/* Vendoscope identity (#121 wave 3, #9).
 *
 * One stylesheet for the whole product: the tokens, the two faces, the
 * client shell (Lens) and its components. The analyst board (layout.templ)
 * keeps its dense layout and inherits only the tokens and fonts from here.
 *
 * Doctrine: light, calm, editorial. Warm paper, ink, one accent an operator's
 * uniform would wear (workwear blue). Fraunces for headlines and the big
 * numbers, Public Sans for everything else, monospace only for code-like
 * values (ids, paths). Dark is an option ([data-theme=dark] or the system
 * preference), never a second product.
 *
 * Faces (OFL 1.1, latin subsets, self-hosted under /static/fonts):
 *   Fraunces  — Undercase Type, variable wght 100–900 (+ italic)
 *   Public Sans — USWDS, variable wght 100–900 (+ italic)
 *   IBM Plex Mono 400/600 — code-like values only
 */

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
             src:url(/static/fonts/fraunces-var.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap;
             src:url(/static/fonts/fraunces-var-italic.woff2) format('woff2'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap;
             src:url(/static/fonts/public-sans-var.woff2) format('woff2'); }
@font-face { font-family:'Public Sans'; font-style:italic; font-weight:100 900; font-display:swap;
             src:url(/static/fonts/public-sans-var-italic.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
             src:url(/static/fonts/plexmono-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
             src:url(/static/fonts/plexmono-600.woff2) format('woff2'); }

/* ── tokens: light (default) ─────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* ground and surfaces — warm paper */
  --paper:#F5F0E6;
  --card:#FFFCF7;
  --card2:#F7F1E7;
  --line:#E4DBCB;
  --line2:#CFC4B0;
  /* ink */
  --ink:#1E1B17;
  --ink2:#4B453D;
  --dim:#75705F;          /* 4.6:1 on paper */
  /* the one accent: workwear blue */
  --accent:#2C4C7C;
  --accent-ink:#254470;   /* accent as text */
  --accent-wash:rgba(44,76,124,.09);
  --accent-line:rgba(44,76,124,.45);
  --on-accent:#FFFFFF;
  /* semantic state — derived separately, never the accent */
  --good:#2F7A4F;  --good-wash:rgba(47,122,79,.11);   --good-line:rgba(47,122,79,.5);   --on-good:#FFFFFF;
  --warn:#8F5E0C;  --warn-wash:rgba(178,124,32,.13);  --warn-line:rgba(178,124,32,.55); --on-warn:#FFFFFF;
  --crit:#A63A2B;  --crit-wash:rgba(166,58,43,.10);   --crit-line:rgba(166,58,43,.5);   --on-crit:#FFFFFF;
  /* the engine's own voice (questions) — a quiet plum */
  --ask:#6A4C93;   --ask-wash:rgba(106,76,147,.10);   --ask-line:rgba(106,76,147,.45);
  --shadow:0 1px 2px rgba(60,45,20,.06), 0 8px 24px rgba(60,45,20,.06);
  --shadow-pop:0 12px 40px rgba(40,30,10,.18);
  /* charts (internal/viz): one series hue, its wash, the hairline grid */
  --viz:var(--accent);
  --viz-wash:rgba(44,76,124,.12);
  --viz-recent:rgba(44,76,124,.07);
  --viz-grid:var(--line);
  --viz-hatch:rgba(44,76,124,.35);
  /* aliases the analyst board and older page styles still use */
  --bg:var(--paper); --panel:var(--card); --panel2:var(--card2); --fg:var(--ink);
  --err:var(--crit); --err-wash:var(--crit-wash);
  --indigo:var(--ask); --indigo-wash:var(--ask-wash);
  --track:var(--line);
  --glow:0 0 0 1px var(--accent-line), var(--shadow);
  /* type */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-xs:.78rem; --t-sm:.88rem; --t-md:1rem; --t-lg:1.15rem;
  --t-xl:clamp(1.45rem,3.2vw,1.9rem);
  --t-2xl:clamp(1.9rem,4.6vw,2.7rem);
  --t-num:clamp(1.55rem,3.6vw,2.2rem);
  /* geometry */
  --r-card:14px; --r-btn:10px; --r-chip:999px;
  --measure:68ch;
}
/* dark: the system preference, unless the person chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#16181C; --card:#1D2025; --card2:#242830; --line:#2F343C; --line2:#3E444E;
    --ink:#ECE7DC; --ink2:#CBC4B7; --dim:#9C958A;
    --accent:#8FB3E6; --accent-ink:#A9C6EE; --accent-wash:rgba(143,179,230,.13); --accent-line:rgba(143,179,230,.5); --on-accent:#0E1A2C;
    --good:#7CC996; --good-wash:rgba(124,201,150,.13); --good-line:rgba(124,201,150,.5); --on-good:#0B1F13;
    --warn:#E2B461; --warn-wash:rgba(226,180,97,.13);  --warn-line:rgba(226,180,97,.5);  --on-warn:#22190A;
    --crit:#EE8B79; --crit-wash:rgba(238,139,121,.13); --crit-line:rgba(238,139,121,.5); --on-crit:#2A100B;
    --ask:#B79BE0;  --ask-wash:rgba(183,155,224,.13);  --ask-line:rgba(183,155,224,.5);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-pop:0 12px 40px rgba(0,0,0,.5);
    --viz-wash:rgba(143,179,230,.16); --viz-recent:rgba(143,179,230,.08); --viz-hatch:rgba(143,179,230,.4);
  }
}
/* dark: the person chose it */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#16181C; --card:#1D2025; --card2:#242830; --line:#2F343C; --line2:#3E444E;
  --ink:#ECE7DC; --ink2:#CBC4B7; --dim:#9C958A;
  --accent:#8FB3E6; --accent-ink:#A9C6EE; --accent-wash:rgba(143,179,230,.13); --accent-line:rgba(143,179,230,.5); --on-accent:#0E1A2C;
  --good:#7CC996; --good-wash:rgba(124,201,150,.13); --good-line:rgba(124,201,150,.5); --on-good:#0B1F13;
  --warn:#E2B461; --warn-wash:rgba(226,180,97,.13);  --warn-line:rgba(226,180,97,.5);  --on-warn:#22190A;
  --crit:#EE8B79; --crit-wash:rgba(238,139,121,.13); --crit-line:rgba(238,139,121,.5); --on-crit:#2A100B;
  --ask:#B79BE0;  --ask-wash:rgba(183,155,224,.13);  --ask-line:rgba(183,155,224,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-pop:0 12px 40px rgba(0,0,0,.5);
  --viz-wash:rgba(143,179,230,.16); --viz-recent:rgba(143,179,230,.08); --viz-hatch:rgba(143,179,230,.4);
}

/* ── base ────────────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
html { background:var(--paper); }
body.lens { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--font-ui);
            -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.lens a { color:var(--accent-ink); text-decoration:none; }
body.lens a:hover { text-decoration:underline; text-underline-offset:3px; }
body.lens h1, body.lens h2, body.lens h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; }
body.lens h1 { font-size:var(--t-2xl); line-height:1.08; margin:.9rem 0 .5rem; text-wrap:balance; }
body.lens h2 { font-size:var(--t-lg); line-height:1.25; margin:0 0 .3rem; }
body.lens ::selection { background:var(--accent-wash); }
.num, .tnum { font-variant-numeric:tabular-nums; }
.code { font-family:var(--font-mono); font-size:.86em; }
.dim { color:var(--dim); }
.lens img { max-width:100%; }

/* ── the client shell: header, corridors, footer ─────────────────────── */
.top { display:flex; align-items:center; gap:.7rem; padding:.9rem clamp(1rem,5vw,3rem); flex-wrap:wrap;
       border-bottom:1px solid var(--line); background:var(--paper); }
.top .brand { display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; }
.top .brand:hover { text-decoration:none; }
.top i.mark, .brand i.mark { width:28px; height:28px; border-radius:8px; font-style:normal; display:flex; align-items:center;
         justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--on-accent); background:var(--accent); flex:none; }
.top b { font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; }
.top .lens { font-size:var(--t-xs); color:var(--dim); border:1px solid var(--line2); border-radius:var(--r-chip); padding:.12rem .6rem; }
.top .sp { flex:1; }
.top img.avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--line2); display:block; }
.top .adv { font-size:var(--t-sm); color:var(--dim); white-space:nowrap; min-height:40px; display:inline-flex; align-items:center; }
.top .adv:hover { color:var(--ink); }
/* The six corridors — the whole client navigation (#121). Scrolls sideways on
   a phone; the active one is scrolled into view by a line of script. */
.cor { display:flex; gap:.1rem; align-items:center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%; }
.cor::-webkit-scrollbar { display:none; }
.cor a { color:var(--ink2); font-size:.92rem; padding:.35rem .75rem; border-radius:var(--r-chip); white-space:nowrap;
         min-height:40px; display:flex; align-items:center; font-weight:500; }
.cor a:hover { color:var(--ink); text-decoration:none; background:var(--card2); }
.cor a.on { color:var(--accent-ink); background:var(--accent-wash); font-weight:650; }
/* theme switch (the selector outranks the generic .lens button rule) */
button.theme, .lens button.theme, .board button.theme { background:none; border:1px solid var(--line2); color:var(--dim); border-radius:var(--r-chip);
         width:40px; height:40px; min-height:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex:none; font-size:0; }
button.theme:hover, .lens button.theme:hover, .board button.theme:hover { color:var(--ink); border-color:var(--ink2); background:none; box-shadow:none; }
.theme svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.theme .moon { display:none; }
:root[data-theme="dark"] .theme .sun { display:none; }
:root[data-theme="dark"] .theme .moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display:none; }
  :root:not([data-theme="light"]) .theme .moon { display:block; }
}
@media (max-width:760px) {
  .top { gap:.5rem; padding:.7rem 1rem; }
  .cor { order:3; width:100%; margin-top:.15rem; }
  .top .adv.text { display:none; }
}
main.lens-main { max-width:820px; margin:0 auto; padding:1.4rem clamp(1rem,5vw,2rem) 4rem; }
.lede { color:var(--ink2); max-width:var(--measure); line-height:1.6; margin:0 0 1.5rem; font-size:1.02rem; }
.lede.i { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.12rem; color:var(--ink2); }
.crumb { margin:.2rem 0 0; font-size:var(--t-sm); }
footer.lens-foot { max-width:820px; margin:0 auto; padding:0 clamp(1rem,5vw,2rem) 2rem; color:var(--dim); font-size:var(--t-xs);
                   display:flex; gap:1rem; flex-wrap:wrap; }

/* ── progress ────────────────────────────────────────────────────────── */
.prog { display:flex; align-items:center; gap:.8rem; margin:0 0 1.2rem; font-size:var(--t-sm); color:var(--dim); flex-wrap:wrap; }
.prog .bar { flex:1; max-width:280px; min-width:120px; height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.prog .bar i { display:block; height:100%; background:var(--accent); border-radius:4px; }
.prog .win { font-variant-numeric:tabular-nums; }
.hint { font-size:var(--t-xs); color:var(--accent-ink); font-weight:600; }

/* ── cards: statements, questions, lists ─────────────────────────────── */
.post, .q-card, .list, .ask, .card { border:1px solid var(--line); border-radius:var(--r-card); background:var(--card);
        padding:1.1rem 1.3rem; margin:.8rem 0; position:relative; }
.post { transition:border-color .15s, box-shadow .5s, opacity .15s; }
.post.ok { border-color:var(--good-line); }
.post.fix { border-color:var(--warn-line); }
.post .st { color:var(--ink2); font-size:.95rem; }
.post .val { font-family:var(--font-display); font-weight:600; font-size:var(--t-num); line-height:1.15; letter-spacing:-.015em;
             margin:.15rem 0 .1rem; font-variant-numeric:tabular-nums; text-wrap:balance; }
.post .sub { color:var(--dim); font-size:var(--t-sm); line-height:1.55; max-width:var(--measure); }
.post .row { display:flex; gap:.6rem; align-items:center; margin-top:.7rem; flex-wrap:wrap; }
.post .spark { position:absolute; right:1.3rem; top:1.1rem; }
@media (max-width:520px) { .post .spark { position:static; display:block; margin:.3rem 0 .1rem; } }
.q-card { border-color:var(--ask-line); transition:box-shadow .5s, opacity .15s; }
.q-card.done { border-color:var(--good-line); }
.q-card .qt { font-family:var(--font-display); font-weight:600; font-size:var(--t-lg); line-height:1.3; }
.q-card .qs { color:var(--dim); font-size:var(--t-sm); margin:.3rem 0 .6rem; max-width:var(--measure); }
.q-card .opts { display:flex; gap:.5rem; flex-wrap:wrap; }
.qtag { font-size:var(--t-xs); font-weight:650; color:var(--ask); margin-bottom:.3rem; }
.list h2 { margin:0 0 .2rem; }
.list .sub { color:var(--dim); font-size:var(--t-sm); margin:0 0 .5rem; max-width:var(--measure); }
.list ul { list-style:none; padding:0; margin:0; }
.list li { display:flex; gap:.6rem 1rem; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line);
           font-size:.95rem; flex-wrap:wrap; align-items:baseline; }
.list li:last-child { border-bottom:none; }
.list .a { white-space:nowrap; font-weight:650; font-variant-numeric:tabular-nums; }
.list .b { color:var(--dim); font-size:var(--t-xs); width:100%; }
.list.warnlist { border-color:var(--warn-line); }
.list.warnlist .a { color:var(--warn); }
.list.lockedlist { border-style:dashed; background:none; }
.list.lockedlist h2 { color:var(--dim); }
.list.lockedlist .lock { margin-right:.35rem; opacity:.7; }
.list.lockedlist .a { color:var(--dim); font-weight:500; font-size:var(--t-xs); white-space:normal; }
.empty { border:1px dashed var(--line2); border-radius:var(--r-card); padding:2rem; text-align:center; color:var(--dim); }
.clean { border:1px solid var(--good-line); background:var(--good-wash); border-radius:var(--r-card); padding:1rem 1.2rem; margin:1.2rem 0; }
.flash { border:1px solid var(--ask-line); background:var(--ask-wash); border-radius:var(--r-card); padding:.7rem 1.2rem; margin:0 0 1.2rem; font-size:.92rem; }

/* ── buttons, chips, forms ───────────────────────────────────────────── */
.lens button, .btn { font:inherit; font-size:.92rem; cursor:pointer; border-radius:var(--r-btn); min-height:44px;
                     padding:.55rem 1.1rem; border:1px solid var(--line2); background:var(--card2); color:var(--ink);
                     display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-decoration:none; }
.lens button:hover, .btn:hover { border-color:var(--ink2); text-decoration:none; }
.lens button.yes, .btn.yes { border-color:var(--good-line); color:var(--good); font-weight:650; }
.lens button.yes:hover, .btn.yes:hover { background:var(--good); color:var(--on-good); border-color:var(--good); }
.lens button.pri, .btn.pri { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:650; }
.lens button.pri:hover, .btn.pri:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
.lens button.quiet, .btn.quiet { background:none; border:none; color:var(--dim); font-size:var(--t-xs); text-decoration:underline;
                                 text-underline-offset:3px; padding:.4rem .3rem; }
.lens button.quiet:hover, .btn.quiet:hover { color:var(--ink); }
.btn.wide { width:100%; }
.mark { display:inline-flex; align-items:center; gap:.3rem; font-size:.76rem; font-weight:650; border-radius:var(--r-chip); padding:.15rem .6rem; line-height:1.4; }
.mark.ok { background:var(--good-wash); color:var(--good); }
.mark.fix { background:var(--warn-wash); color:var(--warn); }
.mark.bad { background:var(--crit-wash); color:var(--crit); }
.mark.info { background:var(--accent-wash); color:var(--accent-ink); }
.lens input, .lens textarea, .lens select { font:inherit; font-size:16px; color:var(--ink); background:var(--card);
             border:1px solid var(--line2); border-radius:var(--r-btn); padding:.55rem .75rem; min-height:44px; }
.lens input:focus, .lens textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.lens input::placeholder, .lens textarea::placeholder { color:var(--dim); opacity:.8; }
.lens details > summary { cursor:pointer; color:var(--dim); font-size:var(--t-sm); list-style:none; min-height:44px; display:flex; align-items:center; }
.lens details > summary::-webkit-details-marker { display:none; }
.lens details > summary:hover { color:var(--ink); }
.fixform { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.fixform input[name=given] { min-width:12rem; flex:1 1 12rem; }
.fixform input[name=note] { flex:2 1 16rem; }
.fixform button { border-color:var(--warn-line); color:var(--warn); }
.axline { margin-top:.55rem; font-size:var(--t-sm); background:var(--warn-wash); border-left:3px solid var(--warn);
          border-radius:0 8px 8px 0; padding:.45rem .8rem; }
.reset { margin-left:.4rem; }

/* Background saves (htmx): a card in flight dims and shows a saving chip; the
   swapped-in result glows briefly. Forms still work with JS off. */
.post.htmx-request, .q-card.htmx-request, .wake.htmx-request { opacity:.65; }
.post.htmx-request::after, .q-card.htmx-request::after {
  content:"saving…"; position:absolute; top:.9rem; right:1.1rem; font-size:var(--t-xs); font-weight:600;
  color:var(--accent-ink); animation:lens-pulse 1.1s ease-in-out infinite; }
.post.htmx-settling, .q-card.htmx-settling { box-shadow:0 0 0 2px var(--good-line); }
@keyframes lens-pulse { 50% { opacity:.3; } }

/* ── ask ─────────────────────────────────────────────────────────────── */
.ask { margin-top:2.2rem; }
.ask .sub { color:var(--dim); font-size:var(--t-sm); margin:0 0 .7rem; max-width:var(--measure); }
.askform { display:flex; gap:.6rem; flex-wrap:wrap; }
.askform input { flex:1; min-width:14rem; min-height:48px; }
.askform button { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:650; min-height:48px; }
.ask .wait { display:none; color:var(--accent-ink); font-size:var(--t-sm); margin:.6rem 0 0; }
.ask.htmx-request .wait { display:block; }
.ask.htmx-request .askform button { opacity:.55; pointer-events:none; }
.qa { border-top:1px solid var(--line); margin-top:.9rem; padding-top:.7rem; }
.qa .q { font-weight:650; font-size:.95rem; }
.qa .a { color:var(--ink2); font-size:.93rem; line-height:1.6; margin:.25rem 0 .1rem; max-width:var(--measure); white-space:pre-line; }
.qa .w { color:var(--dim); font-size:var(--t-xs); }

/* ── the path (what opens next) ──────────────────────────────────────── */
.path { margin:2.2rem 0 1rem; }
.lay { display:flex; gap:.8rem; align-items:center; border:1px dashed var(--line2); border-radius:12px;
       padding:.7rem 1rem; margin:.45rem 0; color:var(--dim); font-size:.92rem; flex-wrap:wrap; }
.lay.on { border-style:solid; border-color:var(--good-line); color:var(--ink); background:var(--card); }
.lay .n { font-family:var(--font-display); font-weight:600; color:var(--dim); min-width:1.4rem; font-variant-numeric:tabular-nums; }
.lay .r { margin-left:auto; }

/* ── the wake strip ──────────────────────────────────────────────────── */
.wake { border:1px solid var(--warn-line); background:var(--warn-wash); border-radius:var(--r-card);
        padding:.8rem 1.2rem; margin:0 0 1.2rem; font-size:.95rem; line-height:1.6; }
.wake.quiet { border-color:var(--line); background:var(--card); }
.wake .fd { display:flex; gap:.5rem 1rem; align-items:center; flex-wrap:wrap; padding:.5rem 0; border-top:1px solid var(--warn-line); }
.wake .fd:first-of-type { border-top:none; }
.wake .fd .ln { flex:1 1 16rem; }
.wake .fd .path { width:100%; color:var(--dim); font-size:var(--t-xs); font-family:var(--font-mono); margin:0; }
.wake .fd form { display:inline; }
.wake .fd button { font-size:.88rem; padding:.45rem .9rem; }
.wake .loop { color:var(--dim); font-size:var(--t-xs); margin-top:.5rem; font-variant-numeric:tabular-nums; }

/* ── charts (internal/viz) ───────────────────────────────────────────── */
.viz { margin:1rem 0 1.4rem; }
figure.viz { padding:0; }
.viz svg { width:100%; height:auto; display:block; overflow:visible; font-family:var(--font-ui); }
.viz svg.narrow { display:none; }
@media (max-width:600px) { .viz svg.wide { display:none; } .viz svg.narrow { display:block; } }
.viz .wf-pass { fill:var(--dim); opacity:.45; }
.heat svg { width:auto; max-width:none; }
.viz .cap { color:var(--ink2); font-size:.95rem; margin:.5rem 0 0; max-width:var(--measure); }
.viz .cap b { font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.viz .note { color:var(--dim); font-size:var(--t-xs); margin:.25rem 0 0; }
.viz text { fill:var(--ink); font-variant-numeric:tabular-nums; }
.viz text.dim { fill:var(--dim); }
.viz text.big { font-family:var(--font-display); font-weight:600; }
.viz .grid { stroke:var(--viz-grid); stroke-width:1; }
.viz .axis { stroke:var(--line2); stroke-width:1; }
.viz .area { fill:var(--viz-wash); }
.viz .recent { fill:var(--viz-recent); }
.viz .line { fill:none; stroke:var(--viz); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.viz .bar { fill:var(--viz); }
.viz .bar.partial { fill:url(#vs-hatch); stroke:var(--viz); stroke-width:1; }
.viz .dot { fill:var(--viz); stroke:var(--card); stroke-width:2; }
.viz .hatch-line { stroke:var(--viz-hatch); stroke-width:1.5; }
.viz .wf-gross { fill:var(--viz); }
.viz .wf-cost { fill:var(--ink2); opacity:.55; }
.viz .wf-loss { fill:var(--crit); opacity:.8; }
.viz .wf-keep { fill:var(--good); }
.viz .wf-gap { fill:none; stroke:var(--line2); stroke-width:1.5; stroke-dasharray:4 4; }
.viz .wf-link { stroke:var(--line2); stroke-width:1; }
.viz .cell { fill:var(--viz); }
.viz .cell.none { fill:none; stroke:var(--line2); stroke-width:1; stroke-dasharray:2 3; }
.viz .cell.fired { stroke:var(--crit); stroke-width:2; fill-opacity:.35; }
.viz .rowlink text { fill:var(--ink); }
.viz .rowlink:hover text { fill:var(--accent-ink); text-decoration:underline; }
.heat { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.heat svg { min-width:420px; }
.spark { display:inline-block; vertical-align:middle; }
.spark svg { width:110px; height:32px; display:block; overflow:visible; }
.spark .line { fill:none; stroke:var(--viz); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.spark .area { fill:var(--viz-wash); }
.spark .dot { fill:var(--viz); stroke:var(--card); stroke-width:1.5; }
.spark .partial { fill:none; stroke:var(--viz); stroke-width:1.5; stroke-dasharray:2 2; }

/* ── the driver corridor (ergonomics) ────────────────────────────────── */
.drive main { max-width:600px; }
.drive .dv-big { min-height:64px; font-size:1.1rem; }

/* ── screen-reader only ──────────────────────────────────────────────── */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }