/* Ravelwise brand pass (UI legend v1.1). Loaded after app.css. Messages, chips, tables, number rules, charts and the theme picker. */

/* ---- icons ---- */
svg.ico { flex: none; vertical-align: -4px; }
.rw-banner .ico, .rw-callout .ico { margin-top: 1px; }

/* ---- status chips (legend section 6): the old .chip.ok/.warn/.bad get the legend colours and the icon before the label ---- */
.chip.ok, .chip.warn, .chip.bad { font-weight: 600; }
.chip.ok::before, .chip.warn::before, .chip.bad::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--chip-ico) center / contain no-repeat; mask: var(--chip-ico) center / contain no-repeat; }
.chip.ok { --chip-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E"); }
.chip.warn { --chip-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M12 17h.01' /%3E%3C/svg%3E"); }
.chip.bad { --chip-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m15 9-6 6' /%3E %3Cpath d='m9 9 6 6' /%3E%3C/svg%3E"); }
.chip.ok::first-letter, .chip.warn::first-letter, .chip.bad::first-letter { text-transform: none; }
.wz .chip.ok::before { width: 14px; height: 14px; border-radius: 0; background: currentColor; margin-right: 5px; }
.ev { font-weight: 600; }
.ev-observed, .ev-precedent, .ev-lined_up, .ev-pattern { background: var(--surface-200); color: var(--ink-muted); }   /* neutral chip */
.ev-estimated { background: var(--info-soft); color: var(--info); }                                                  /* info chip */
.ev-measured { background: var(--ink); color: var(--ink-inverse); }                                                  /* ink chip */

/* ---- messages (legend section 7) ---- */
.rw-banner { margin-bottom: var(--s3); }
.rw-banner a { color: inherit; font-weight: 600; }
.rw-banner .rw-banner__body form.inline { display: inline; }
.rw-banner.small { font-size: var(--fs-sm); line-height: 20px; } .rw-banner.xs { font-size: var(--fs-xs); line-height: 18px; }
.rw-banner.app-banner { border-radius: 0; margin: 0; padding: 10px var(--s5); align-items: center; border-bottom: 1px solid var(--line); }
.rw-banner__actions { margin: 0; }
.syncitem.rw-banner { border: 0; align-items: center; background: transparent; }
.syncitem.rw-banner--info { background: var(--info-soft); } .syncitem.rw-banner--ok { background: var(--success-soft); } .syncitem.rw-banner--warn { background: var(--marigold-soft); }
.syncitem.rw-banner { color: var(--ink); } .syncitem.rw-banner svg { margin-top: 0; }
.syncitem.rw-banner--info svg { animation: st-rot 1.1s linear infinite; }
.syncx button { display: inline-flex; padding: 4px; color: var(--ink-muted); opacity: 1; }
.st-pending { margin-bottom: var(--s4); } .st-pending .st-ico { color: inherit; }
.rw-callout { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-md); font-size: 14px; line-height: 22px; color: var(--ink); margin: var(--s3) 0; }
.rw-callout--rec { background: var(--marigold-soft); }
.rw-callout--tip { background: var(--info-soft); } .rw-callout--tip svg { color: var(--info); }
/* a page's headline finding: a statement, set like a Why card's "what" line, no coloured edge */
.rw-finding { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.rw-finding__label { margin: 0 0 var(--s1); }
.rw-finding__text { margin: 0; font: 500 22px/30px var(--font-display); letter-spacing: -.005em; max-width: 60ch; }
.rw-finding__text b { font-weight: 600; }
.rw-finding p { max-width: 80ch; } .rw-finding .small, .rw-finding .xs { font-family: var(--font-sans); }
.rw-finding .feed-drill, .rw-finding .why-acts, .rw-finding .tiles, .rw-finding > .tiles { font-family: var(--font-sans); }
.rw-finding .tiles { margin-top: var(--s3); }
.card.attention { border-left: 1px solid var(--line); }
.bigdrop { border-left: 1px solid var(--line); }
.bd-kicker { color: var(--marigold-ink); font-weight: 600; }
.rw-empty { margin: var(--s4) 0; }
.rw-empty .button, .rw-empty button { align-self: flex-start; }
/* field messages: a hint is muted, an error is down with its icon (the input border goes 2px down) */
.hint, .acct-hint, .field .hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--down); }

/* ---- the theme picker (Settings > Profile) ---- */
.theme-pick { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.theme-pick legend { padding: 0; margin-bottom: var(--s2); }
.theme-opt { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.theme-opt:has(input:checked) { border-color: var(--ink); background: var(--surface-100); }
.theme-opt input { margin-top: 4px; }
.theme-opt .small { display: block; }

/* ---- numbers and deltas (legend section 8) ---- */
/* a change always carries its arrow, never colour alone: .up / .down on a figure add the arrow (opt out with .no-arrow) */
td.up:not(.no-arrow)::before, span.up:not(.no-arrow)::before, div.up:not(.no-arrow):not(.delta)::before, .value.up::before, .big.up::before { content: "▲ "; font-size: .8em; }
td.down:not(.no-arrow)::before, span.down:not(.no-arrow)::before, div.down:not(.no-arrow):not(.delta)::before, .value.down::before, .big.down::before { content: "▼ "; font-size: .8em; }
.dneutral { display: inline-flex; gap: var(--s1); font: 500 var(--fs-sm)/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.delta-chip, .delta-chip.pos, .delta-chip.neg { background: transparent; border-color: transparent; color: var(--ink-muted); padding: 0; }   /* a difference between two models is not good or bad */
.then { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.then::before { content: "was "; font-family: var(--font-sans); }

/* ---- tables (legend: Geist Mono tabular figures that can be compared; labels in the 12px caps style) ---- */
th { border-bottom: 1px solid var(--line-strong); }
td, th { padding: 10px var(--s3); }
table.compact td, table.compact th, .why-evidence table td { padding: 6px var(--s2); }
th.num, td.num, td.mono { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
th.num { font-family: var(--font-sans); }
tbody tr:hover td, tbody tr:hover th[scope="row"] { background: color-mix(in srgb, var(--surface-200) 55%, transparent); }
tfoot th, tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; font-weight: 600; }
tbody th[scope="row"], th.sticky { font-weight: 500; }
.sticky { box-shadow: 1px 0 0 var(--line); }

/* ---- charts (legend section 3) ---- */
[data-chart] { background: var(--chart-well); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-2); }
.tip { background: var(--ink); color: var(--ink-inverse); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-toast); }
.tip .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
svg text.axis { fill: var(--ink-muted); }
svg text.c-label { fill: var(--ink); font: 600 12px var(--font-mono); }
svg.stack rect { stroke: var(--chart-well); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pacing-track { background: var(--chart-well); }
.pacing-track .fill.ahead, .pacing-track .fill.behind { background: var(--chart-primary); }
.pacing-track .now { background: var(--chart-pin-line); }
.pacing-track .end { background: var(--chart-axis); opacity: 1; }
.legend i { background: var(--chart-primary); }

@media (prefers-reduced-motion: reduce) { .syncitem.rw-banner--info svg { animation: none; } }

/* ---- dialog: confirms something destructive (legend: centred, max 480px, ink at 40% behind, 200 ms rise) ---- */
.rw-dialog { border: 0; border-radius: var(--radius-lg); padding: var(--space-6); max-width: 480px; width: calc(100vw - 32px); background: var(--surface-000); color: var(--ink); box-shadow: var(--shadow-toast); animation: rw-toast-in .2s cubic-bezier(.2,.7,.2,1); }
.rw-dialog::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.rw-dialog h2 { margin: 0 0 var(--s2); font: 600 17px/24px var(--font-sans); }
.rw-dialog p { margin: 0 0 var(--s4); color: var(--ink-muted); }
.rw-dialog__actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.rw-dialog__danger { background: var(--surface-000); color: var(--down); border: 1px solid var(--down); }
@media (prefers-reduced-motion: reduce) { .rw-dialog { animation: none; } }