@font-palette-values --lit-color {
   font-family: "Nabla";
   base-palette: 1;
}

/* v/🪩 — reskin the /v SPA in the 🪩-style 3000 design language (see docs/🪩.md, 🪩.css).
 *
 * Strategy: adopt the canonical 🪩 tokens (paper/ink palette, hairline rules, one accent,
 * Fraunces display / Bitter slab / Newsreader body / 🪩-3000 mono) and REMAP the SPA's own
 * --v-* variables onto them, so every component that reads a variable recolours + retypes
 * with no change to the grid/player geometry. v.css also hard-codes several DARK backgrounds
 * (header, command input, grid) that don't read the variables — those get explicit overrides
 * below. Loaded LAST so it wins by source order (v.css/player/details are unlayered, so this
 * must be unlayered too). Fonts are loaded by the video layout (Google css2 link + fonts.css).
 *
 * NOTE: we deliberately avoid color-mix() wrapping light-dark() values — that combination
 * is parsed as invalid in some engines and silently drops the whole declaration (which is
 * why an earlier draft's header override lost to v.css). All tones are flat light-dark().
 *
 * Player & details overlays sit over BLACK video, so they're pinned to color-scheme:dark
 * — light-dark() resolves to the dark palette there, keeping text legible on video while
 * the rest of the app reads as paper.
 */

:root {
   color-scheme: light dark;

   /* — canonical 🪩-style 3000 palette (keep in sync with 🪩.css :root) — */
   --paper:       light-dark(#f7f8f1, #11140f);
   --paper-2:     light-dark(#fffffa, #171b15);
   --paper-3:     light-dark(#eef2e8, #20251d);
   --ink:         light-dark(#161810, #f5f5ec);
   --ink-soft:    light-dark(#4f5949, #c7cdbd);
   --ink-faint:   light-dark(#75806f, #8e9888);
   --line:        light-dark(rgb(22 24 16 / 0.17), rgb(245 245 236 / 0.16));
   --line-strong: light-dark(rgb(22 24 16 / 0.32), rgb(245 245 236 / 0.30));
   --accent:      light-dark(#9e2f2a, #e06f61);
   --accent-2:    light-dark(#245f77, #78b8d0);
   --accent-3:    light-dark(#587332, #abc26e);
   --gold:        light-dark(#8c6a24, #d8bd6a);
   --mark:        light-dark(#e8edc8, #333a24);
   --glow:        light-dark(rgb(158 47 42 / 0.10), rgb(224 111 97 / 0.15));
   --gold-soft:   light-dark(rgb(140 106 36 / 0.45), rgb(216 189 106 / 0.40));

   --font-display: "Fraunces", "Newsreader", "Iowan Old Style", Georgia, serif;
   --font-body:    "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
   --font-slab:    "Bitter", "Roboto Slab", "Rockwell Nova", Rockwell, "American Typewriter", serif;
   --font-color:   "Nabla", "Fraunces", "Newsreader", serif;

   /* — remap the SPA's variables onto the 🪩 tokens — */
   --v-bg:        var(--paper);
   --v-surface:   var(--paper-2);
   --v-surface-2: var(--paper-3);
   --v-line:      var(--line);
   --v-line-2:    var(--line-strong);
   --v-fg:        var(--ink);
   --v-muted:     var(--ink-soft);
   --v-faint:     var(--ink-faint);
   --v-accent:    var(--accent);
   --v-accent-hi: var(--accent);
   --v-amber:     var(--gold);
   --v-display:   var(--font-display);
}

body {
   background:
      radial-gradient(circle at 16% 0%, light-dark(rgb(158 47 42 / 0.06), rgb(224 111 97 / 0.05)), transparent 30rem),
      radial-gradient(circle at 92% 12%, light-dark(rgb(36 95 119 / 0.05), rgb(120 184 208 / 0.04)), transparent 26rem),
      var(--paper);
   color: var(--ink);
   font-family: var(--font-body);
   font-variant-numeric: oldstyle-nums proportional-nums;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}
::selection { background: var(--mark); color: var(--ink); }

/* — top chrome: masthead hairline (replaces the dark gradient + glow) — */
.v-header {
   background: light-dark(rgb(255 255 250 / 0.9), rgb(23 27 21 / 0.85));
   backdrop-filter: blur(8px) saturate(1.1);
   border-bottom: 1px solid var(--line-strong);
   box-shadow: none;
}
.v-header::after { display: none; }
.v-brand { font-family: var(--font-display); color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 35, "WONK" 1; }
.v-brand::before { color: var(--accent); }

/* — command bar: a paper field with an accent prompt + accent focus ring — */
.v-cmd-input, .v-search input {
   font-family: var(--v-mono);
   color: var(--ink);
   background: var(--paper);
   border: 1px solid var(--line);
   caret-color: var(--accent);
}
.v-cmd-input::placeholder, .v-search input::placeholder { color: var(--ink-faint); }
.v-cmd-input:focus, .v-search input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 1px var(--glow);
}
.v-cmd::before, .v-search::before { color: var(--accent); }
.v-cmd-menu { background: var(--paper-2); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgb(0 0 0 / 0.10); }
.v-cmd-item.is-hi { background: var(--glow); }
.v-cmd-item-label { color: var(--ink); }
.v-cmd-item-hint, .v-cmd-item-count, .v-cmd-group-title { font-family: var(--v-mono); color: var(--ink-faint); }

/* — recommendation status pill: an instrument read-out — */
.v-reclabel-pill, .v-reclabel select {
   font-family: var(--v-mono);
   border: 1px solid var(--line);
   color: var(--ink-soft);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   background: transparent;
}
.v-reclabel-pill.is-on { color: var(--accent); border-color: var(--gold-soft); }

/* — rating-session progress strip: the live 'am I learning' read-out (rate mode only) — */
.v-rateprog {
   display: inline-flex; gap: 0.75rem; align-items: baseline; cursor: pointer;
   font-family: var(--v-mono); font-size: 0.8rem;
   border: 1px solid var(--gold-soft); border-radius: 0.3rem;
   padding: 0.15rem 0.6rem; margin: 0.2rem 0;
   color: var(--ink-soft); background: transparent; letter-spacing: 0.04em;
}
.v-rateprog-tag { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.v-rateprog-last { color: var(--ink-faint); }

/* — model overlay: embedding-pipeline coverage bars — */
.v-modelstat-emb { display: grid; gap: 0.3rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.v-emb-row { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.5rem; align-items: center; font-family: var(--v-mono); font-size: 0.72rem; }
.v-emb-k { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.v-emb-bar { height: 0.4rem; border-radius: 0.2rem; background: var(--line); overflow: hidden; }
.v-emb-fill { display: block; height: 100%; width: var(--fill, 0%); background: var(--gold); }
.v-emb-n { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* — dashboard: hairline-ruled data cards on plain paper (trailing space stays paper).
     The <header> keeps main > section gospel-conformant (in-page 🪩 lint enforces it);
     rendered as a slim full-width kicker line, not a shouting title. — */
.v-dash-head {
   grid-column: 1 / -1;
   padding: 0.3rem 0.85rem 0.25rem;
   border-bottom: 1px solid var(--line);
}
.v-dash-head h2 {
   margin: 0;
   font-family: var(--v-mono);
   font-size: 0.62rem;
   font-weight: 500;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--ink-soft);
}

.v-dashboard {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
   gap: 0;
   background: var(--paper);
   border-bottom: 1px solid var(--line-strong);
}

.v-dash-card {
   min-width: 0;
   display: grid;
   gap: 0.28rem;
   align-content: start;
   padding: 0.72rem 0.85rem;
   background: transparent;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   margin-bottom: -1px;
}

.v-dash-card.is-query {
   grid-column: span 2;
}

.v-dash-card.is-selected {
   grid-column: span 2;
}

/* dashboard labels/subs read at tiny sizes — --ink-soft, not --ink-faint: the faint tone
   fails WCAG 4.5:1 on paper (Lighthouse color-contrast; the audit gate blocks on it). */
.v-dash-k {
   color: var(--ink-soft);
   font-family: var(--v-mono);
   font-size: 0.66rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.v-dash-card strong,
.v-dash-query {
   min-width: 0;
   overflow: hidden;
   color: var(--ink);
   font-family: var(--font-slab);
   font-size: clamp(1rem, 0.9rem + 0.32vw, 1.24rem);
   font-weight: 670;
   line-height: 1.05;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.v-dash-card strong small {
   color: var(--ink-soft);
   font-family: var(--v-mono);
   font-size: 0.62rem;
   font-weight: 500;
}

.v-dash-sub {
   min-width: 0;
   overflow: hidden;
   color: var(--ink-soft);
   font-family: var(--v-mono);
   font-size: 0.68rem;
   font-variant-numeric: tabular-nums lining-nums;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.v-dash-meter {
   height: 0.18rem;
   background: linear-gradient(90deg, var(--accent-3) var(--fill, 0%), var(--line) 0);
}

.v-dash-meter.is-gold { background: linear-gradient(90deg, var(--gold) var(--fill, 0%), var(--line) 0); }
.v-dash-meter.is-red { background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--line) 0); }
.v-dash-meter.is-blue { background: linear-gradient(90deg, var(--accent-2) var(--fill, 0%), var(--line) 0); }
.v-dash-meter.is-green { background: linear-gradient(90deg, var(--accent-3) var(--fill, 0%), var(--line) 0); }

/* — the contact sheet: paper field, hairline cells, accent selection rule, gilt rating tag — */
.v-grid { background: var(--paper); }
.v-cell { border: 1px solid var(--line); background: var(--paper-2); border-radius: 0.3rem; overflow: clip; }
.v-cell:hover { border-color: var(--line-strong); }
.v-cell.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); }
.v-cell-overlay {
   font-family: var(--v-mono);
   font-size: 11px;
   letter-spacing: 0.01em;
   color: #fffaf0;
   background: linear-gradient(to top, rgb(0 0 0 / 0.74), transparent);
   text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
.v-cell-title {
   display: block;
   overflow: hidden;
   font-family: var(--font-slab);
   font-size: 12px;
   font-weight: 650;
   line-height: 1.12;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.v-cell-row {
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;
   margin-top: 0.2rem;
   min-width: 0;
}
.v-cell-source,
.v-cell-metric {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.v-cell-source { color: rgb(255 250 240 / 0.72); }
.v-cell-metric { color: var(--gold); font-variant-numeric: tabular-nums lining-nums; }
.v-cell-rating {
   font-family: var(--v-mono);
   font-variant-numeric: tabular-nums;
   color: var(--gold);
   background: rgb(0 0 0 / 0.55);
   border: 1px solid var(--gold-soft);
   border-radius: 0.25rem;
}

/* — scrollbar to match the rules — */
.v-grid::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
.v-grid::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; }

/* — the data dashboard (recommender stats overlay): full data-ink — */
.v-stats-head h3, .v-stats-h { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.v-stats-h { border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.v-stats-h small { font-family: var(--v-mono); color: var(--ink-faint); }
.v-stat b { font-family: var(--v-mono); font-variant-numeric: lining-nums tabular-nums; color: var(--accent); }
.v-stat span, .v-stat i { font-family: var(--v-mono); color: var(--ink-faint); }
.v-corr-label { color: var(--ink); }
.v-corr-r, .v-corr-n { font-family: var(--v-mono); font-variant-numeric: tabular-nums lining-nums; }
.v-corr-r { color: var(--ink); }
.v-corr-n { color: var(--ink-faint); }

/* links read as 🪩 references */
a { text-decoration-color: var(--gold-soft); text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }

/* — player + details sit OVER BLACK VIDEO: pin them to the dark palette so light-dark()
     resolves to legible light-on-dark regardless of the page (paper) theme — */
.v-player-wrap, .v-player-overlay, .v-details, .v-player-host { color-scheme: dark; }
.v-player-wrap { --v-bg: #0b0a08; }