/* Ravelwise UI legend v1.1 components (chips, banners, toasts, field messages, chart primitives, pacing bar, empty states).
   A copy of the matching section of design/ravelwise/components/ravelwise.css (the source of truth). Loaded after
   tokens.css and before app.css, which adds the app's own placement and page rules. */
/* ===== UI legend v1.1 additions ===== */
/* Icons (Lucide 0.460.0): <i data-lucide="name"> replaced by svg */
.rw-ico { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }
.rw-ico--sm { width: 16px; height: 16px; stroke-width: 2; }

/* Status chip */
.rw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 600 12px/20px var(--font-sans); white-space: nowrap; }
.rw-chip svg { width: 14px; height: 14px; stroke-width: 2; }
.rw-chip--ok { background: var(--success-soft); color: var(--up); }
.rw-chip--info { background: var(--info-soft); color: var(--info); }
.rw-chip--warn { background: var(--marigold-soft); color: var(--marigold-ink); }
.rw-chip--crit { background: var(--critical-soft); color: var(--down); }
.rw-chip--neutral { background: var(--surface-200); color: var(--ink-muted); }
.rw-chip--ink { background: var(--ink); color: var(--ink-inverse); }

/* Banner */
.rw-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--ink); font-size: 14px; line-height: 22px; }
.rw-banner svg { width: 20px; height: 20px; stroke-width: 1.5; margin-top: 1px; flex-shrink: 0; }
.rw-banner__body { flex: 1; }
.rw-banner__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.rw-banner--info { background: var(--info-soft); } .rw-banner--info svg { color: var(--info); }
.rw-banner--ok { background: var(--success-soft); } .rw-banner--ok svg { color: var(--up); }
.rw-banner--warn { background: var(--marigold-soft); } .rw-banner--warn svg { color: var(--marigold-ink); }
.rw-banner--crit { background: var(--critical-soft); } .rw-banner--crit svg { color: var(--down); }

/* Toast */
.rw-toasts { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.rw-toast { display: flex; align-items: center; gap: var(--space-3); min-width: 320px; max-width: 420px; padding: 12px 12px 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-toast); font-size: 14px; line-height: 20px; animation: rw-toast-in .2s cubic-bezier(.2,.7,.2,1); }
.rw-toast svg { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.rw-toast__msg { flex: 1; }
.rw-toast__act { background: none; border: 0; color: var(--marigold); font: 600 14px var(--font-sans); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.rw-toast__x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 4px; display: flex; }
.rw-toast--ok svg.lead { color: var(--up); } .rw-toast--crit svg.lead { color: var(--down); }
@keyframes rw-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rw-toast { animation: none; } }

/* Field message */
.rw-field { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.rw-field label { font: 600 13px/18px var(--font-sans); }
.rw-input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-000); font: 400 15px var(--font-sans); color: var(--ink); }
.rw-input[aria-invalid="true"] { border: 2px solid var(--down); }
.rw-field__msg { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rw-field__msg--err { color: var(--down); }
.rw-field__msg svg { width: 16px; height: 16px; stroke-width: 2; }

/* Chart primitives (SVG classes) */
.rw-plot { background: var(--chart-well); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); }
.rw-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.rw-plot__title { font: 600 15px/22px var(--font-sans); margin: 0; }
.rw-plot__sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.c-axis { stroke: var(--chart-axis); stroke-width: 1; }
.c-band { fill: var(--chart-band); }
.c-primary { fill: none; stroke: var(--chart-primary); stroke-width: 2; stroke-linejoin: round; }
.c-compare { fill: none; stroke: var(--chart-compare); stroke-width: 1.5; stroke-dasharray: 4 4; }
.c-forecast { fill: none; stroke: var(--chart-forecast); stroke-width: 2; stroke-dasharray: 6 5; }
.c-fband { fill: var(--chart-forecast-band); }
.c-pin { fill: var(--chart-pin); stroke: var(--chart-well); stroke-width: 3; }
.c-pin--auto { fill: var(--chart-well); stroke: var(--chart-pin); stroke-width: 2.5; }
.c-pinline { stroke: var(--chart-pin-line); stroke-width: 1; stroke-dasharray: 2 3; }
.c-flag-up { fill: var(--up); stroke: var(--chart-well); stroke-width: 2; }
.c-flag-down { fill: var(--down); stroke: var(--chart-well); stroke-width: 2; }
.c-tick { font: 500 11px var(--font-mono); fill: var(--ink-muted); }
.c-label { font: 600 12px var(--font-mono); fill: var(--ink); }
.c-bar-base { fill: var(--chart-compare); } .c-bar-total { fill: var(--chart-primary); }
.c-bar-up { fill: var(--up); } .c-bar-down { fill: var(--down); } .c-bar-neutral { fill: var(--slate); }
.c-goal { stroke: var(--chart-axis); stroke-width: 1.5; stroke-dasharray: 3 3; }
.c-cat-1 { fill: var(--cat-1); } .c-cat-2 { fill: var(--cat-2); } .c-cat-3 { fill: var(--cat-3); } .c-cat-4 { fill: var(--cat-4); } .c-cat-5 { fill: var(--cat-5); } .c-cat-6 { fill: var(--cat-6); }

/* Pacing bar */
.rw-pace { display: grid; gap: 6px; }
.rw-pace__head { display: flex; justify-content: space-between; font-size: 14px; }
.rw-pace__track { position: relative; height: 12px; border-radius: 6px; background: var(--chart-well); }
.rw-pace__fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--chart-primary); }
.rw-pace__proj { position: absolute; top: 0; bottom: 0; border: 1.5px solid var(--chart-primary); border-left: 0; border-radius: 0 6px 6px 0; }
.rw-pace__today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--chart-pin-line); }

/* Empty state */
.rw-empty { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); max-width: 520px; }
.rw-empty svg { width: 24px; height: 24px; stroke-width: 1.5; color: var(--ink-muted); }
.rw-empty h3 { margin: 0; font: 600 17px/24px var(--font-sans); }
.rw-empty p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }

/* Icon legend grid */
.rw-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.rw-icons > div { background: var(--surface-000); padding: 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; line-height: 18px; }
.rw-icons code { display: block; font: 500 11px var(--font-mono); color: var(--ink-muted); }