/* ============================================================================
   trove.css — the ONE shared design system (Phase 0: tokens).
   Loaded AFTER each page's inline <style> (inserted before </head>), so these
   canonical tokens WIN and unify a site that had drifted into three different
   "accent" blues and divergent health colors across 24 hand-styled pages.
   Phase 0 is deliberately TOKENS ONLY — no component rules — so it cannot
   collide with any page's existing classes or reflow a layout. It only makes
   var(--accent), var(--good), etc. resolve to one coherent palette everywhere.
   The design language is the one set out in the "Rebuilt From First Principles"
   redesign: one indigo accent, health colors that carry meaning (green good /
   amber watch / red bad), serif for the human voice, sans for the interface.
   ============================================================================ */
:root{
  /* --- surfaces (deep ink, layered panels) --- */
  --bg:#0b0e13; --bg2:#0f141b;
  --panel:#141b24; --panel2:#182029;
  --sf:#141b24; --sf2:#182029;          /* aliases some pages use */
  --line:#232d3a; --line2:#2d3a4a;
  --soft:rgba(59,130,246,.12); --softline:rgba(59,130,246,.34);
  --chip:#1b2534;

  /* --- ink --- */
  --ink:#eef3fb; --sub:#c3cede; --muted:#8a97a6; --mut:#8a97a6; --faint:#5d6b7c;

  /* --- the ONE accent: a TRUE blue (zero purple). --accent2 is a near-twin blue, NOT purple, so any
     gradient stays in-family and never drifts toward violet (the blue/purple two-tone was the amateur tell). --- */
  --accent:#3b82f6; --accent2:#2f6fe0;
  /* --- an explicit 8-pt spacing scale, so every gap on a converted page is intentional & consistent --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:56px;

  /* --- health: color carries MEANING, never decoration --- */
  --good:#37d39b; --grn:#37d39b; --green:#37d39b;
  --warn:#e6b455; --amber:#e6b455;
  --bad:#ef6f6f;  --red:#ef6f6f;
  --teal:#3fd0c9;
  --gold:#e6bd77;
  --goodbg:rgba(55,211,155,.12);
  --warnbg:rgba(230,180,85,.12);
  --badbg:rgba(239,111,111,.12);

  /* --- type: two voices --- */
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;

  /* --- geometry: unify corner radius; page widths (--maxw) left to each page --- */
  --radius:14px;
}

/* ============================================================================
   COMPONENT LIBRARY (Phase 0.5) — the redesign's design language as reusable
   components, SCOPED under `.tv` so it can NEVER restyle a page that hasn't
   opted in. Convert a page: add class="tv" (optionally .reading or .wide) to
   its main container and use these classes; its bespoke styles fall away and it
   matches the vision. Un-migrated pages are completely untouched.
   ============================================================================ */
.tv{font-family:var(--sans);color:var(--sub);line-height:1.7;letter-spacing:-.003em}
.tv.reading{max-width:812px;margin:0 auto;padding:0 24px}
.tv.wide{max-width:1180px;margin:0 auto;padding:0 24px}

/* type — two voices */
.tv .display,.tv h1.d{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.12;color:#fff;margin:0 0 14px;font-size:38px}
.tv h2.d{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:#fff;font-size:22px;margin:40px 0 14px}
.tv .kick{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.tv .secnum{font-family:var(--serif);color:var(--faint);font-weight:600}
.tv .lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--sub);font-weight:500}
.tv .pull{font-family:var(--serif);font-size:26px;line-height:1.3;color:var(--ink);font-weight:600}
.tv a{color:var(--accent);text-decoration:none}
.tv .rule{height:1px;background:var(--line);margin:8px 0}

/* layout */
.tv .grid{display:grid;gap:16px}
.tv .g2{grid-template-columns:1fr 1fr}.tv .g3{grid-template-columns:repeat(3,1fr)}.tv .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.tv .g2,.tv .g3,.tv .g4{grid-template-columns:1fr}}

/* surfaces */
.tv .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.tv .card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .14s,transform .14s}
.tv .card:hover{border-color:#3a466b;transform:translateY(-2px)}
.tv .section{border-top:1px solid var(--line);padding-top:22px;margin-top:34px}
.tv .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);font-weight:800;margin-bottom:12px;display:block}

/* chips / tags / pills / health dots */
.tv .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sub);background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 13px;text-decoration:none}
.tv a.chip:hover{border-color:var(--accent);background:var(--soft);color:var(--ink)}
.tv .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.tv .t-good{color:var(--good);background:var(--goodbg)}.tv .t-warn{color:var(--warn);background:var(--warnbg)}
.tv .t-bad{color:var(--bad);background:var(--badbg)}.tv .t-neu{color:var(--muted);background:rgba(138,151,166,.12)}
.tv .pill{font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:5px;padding:2px 7px}
.tv .hd{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.tv .hd.g{background:var(--good)}.tv .hd.w{background:var(--warn)}.tv .hd.b{background:var(--bad)}

/* stat callouts */
.tv .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.tv .facts{grid-template-columns:1fr}}
.tv .fact{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:18px}
.tv .fact .n{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.02;color:var(--ink)}
.tv .fact .l{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.4}
.tv .fact.bad{border-left:3px solid var(--bad)}.tv .fact.bad .n{color:var(--bad)}
.tv .fact.good{border-left:3px solid var(--good)}.tv .fact.good .n{color:var(--good)}
.tv .fact.warn{border-left:3px solid var(--warn)}.tv .fact.warn .n{color:var(--warn)}
.tv .fact.accent{border-left:3px solid var(--accent)}.tv .fact.accent .n{color:var(--accent)}
.tv .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.tv .stat .v{font-size:22px;font-weight:800;color:var(--ink)}
.tv .stat .k{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

/* buttons */
.tv .btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 15px;cursor:pointer;text-decoration:none;transition:border-color .12s}
.tv .btn:hover{border-color:var(--accent)}
.tv .btn-primary{color:#08122b;background:var(--accent);border-color:var(--accent);font-weight:800}
.tv .btn-primary:hover{filter:brightness(1.06)}

/* annotation + list rows */
.tv .anno{display:flex;gap:11px;padding:12px 14px;border:1px dashed var(--line2);border-radius:11px;background:var(--soft)}
.tv .anno p{margin:0;font-size:13px;color:var(--sub)}
.tv .lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tv .lrow:first-child{border-top:0}
.tv .amt{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:650}