/* ===========================================================================
   KELVARA — design system v2 (dark / turquoise)
   Serve versioned:  /static/ds/2.0/kelvara.css
   Agents link this first, then their own agent.css.

   Everything below is token-driven. To reskin the entire network, change
   section 1 and nothing else.
   =========================================================================== */

/* --- 0. Faces -------------------------------------------------------------
   Self-hosted, from this same versioned directory. Two reasons, and the second
   is the one that matters for this audience: one less external dependency, and
   the page renders in the intended faces on a network that blocks Google
   Fonts, which is a real condition inside several university networks.

   url() is RELATIVE so the fonts version WITH the design system. An absolute
   URL would let 2.1's faces leak into a page still linking 2.0, which is
   exactly the silent change the versioned path exists to prevent.

   No @import: it serialises a render-blocking request behind the stylesheet
   that contains it, and an agent should link exactly one file.

   Newsreader and Inter are variable fonts, so one file covers a weight RANGE.
   See fonts/SOURCES.txt for provenance and licence (SIL OFL 1.1).
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(./fonts/Newsreader-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/Inter-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/IBMPlexMono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/IBMPlexMono-500.woff2) format('woff2');
}

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Ground — a teal-cast black, not neutral grey. The ground belongs to the
     same family as the accent, which is what stops it reading as generic dark
     mode. */
  --void:      #04100F;
  --surface:   #0A1B19;
  --surface-2: #102725;
  --line:      #1A3633;
  /* Raised from #26514C (2.00:1) on 2026-09-12. Carries three interactive
     borders -- .field input, .btn-quiet -- and the tierbar's UNFILLED
     segments, which are a graphical object under WCAG SC 1.4.11 because
     the empty segments are how "how much is established" is read.
     Lightness only; hue and saturation unchanged. Now 3.01 on surface. */
  --line-lit:  #336E67;

  /* Accent */
  --turq:        #23C9B8;
  --turq-bright: #6FEFE0;
  --turq-dim:    #157F74;
  --turq-wash:   rgba(35, 201, 184, 0.10);

  /* Text */
  --chalk:       #E9F1EF;
  --chalk-muted: #94AAA6;
  /* Raised from #5F7571 (3.19-3.93:1) on 2026-09-12. Carries nav links,
     .meta, .coverage, .verdict-subject and the footer -- all body text
     under SC 1.4.3. v1's --ink-faint failed in exactly this role at 2.93;
     the reskin reproduced the same mistake. Now 4.51 on surface-2. */
  --chalk-faint: #748F8A;

  /* Evidence tiers — semantic only. Never decorative.
     Tuned for contrast on the dark ground. */
  --tier-1: #23C9B8;  /* strong / validated / live */
  --tier-2: #E3AC46;  /* moderate / partial / beta */
  --tier-3: #E27A55;  /* weak / contested / building */
  --tier-4: #7D9198;  /* insufficient / planned */

  /* Type */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.75rem;
  --t-xl:   2.5rem;
  --t-2xl:  4rem;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-8:3rem; --s-10:4.5rem;
  --s-12:7rem;  --s-16:11rem;

  --measure: 62ch;
  --measure-tight: 46ch;
  --page: 1100px;
  --radius: 3px;
  --radius-pill: 100px;
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--chalk);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;          /* light weight at large size — the restraint */
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); color: var(--chalk-muted); }

a { color: var(--turq); text-decoration: none; }
a:hover { color: var(--turq-bright); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }

.id, code { font-family: var(--mono); font-size: 0.9em; color: var(--chalk-muted); }

/* --- 3. Layout ----------------------------------------------------------- */

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-6); }
.prose { max-width: var(--measure); }
.lede { font-size: var(--t-md); line-height: 1.6; max-width: var(--measure-tight); color: var(--chalk-muted); }

.section { padding: var(--s-12) 0; border-top: 1px solid var(--line); }
.hero { padding: var(--s-16) 0 var(--s-12); border-top: 0; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: var(--s-10); align-items: start; }

/* --- 4. Nav — deliberately sparse ---------------------------------------- */

.nav {
  display: flex; align-items: baseline; gap: var(--s-6);
  padding: var(--s-5) 0;
  font-family: var(--sans); font-size: var(--t-sm);
}
.wordmark {
  font-family: var(--serif); font-size: var(--t-md); font-weight: 500;
  letter-spacing: 0.04em; color: var(--chalk);
}
.wordmark .dot { color: var(--turq); }
.nav-links { display: flex; gap: var(--s-5); margin-left: auto; }
.nav-links a { color: var(--chalk-faint); }
.nav-links a:hover, .nav-links a.on { color: var(--chalk); }

/* --- 5. Tier bar --------------------------------------------------------- */
/* Four segments. Filled = how much is actually established. The one motif
   that repeats network-wide. Never decorative. */

.tierbar { display: flex; gap: 3px; width: 100%; }
.tierbar span { height: 3px; flex: 1; background: var(--line-lit); border-radius: 1px; }
.tierbar[data-level="1"] span:nth-child(-n+1),
.tierbar[data-level="2"] span:nth-child(-n+2),
.tierbar[data-level="3"] span:nth-child(-n+3),
.tierbar[data-level="4"] span:nth-child(-n+4) { background: var(--bar, var(--turq)); }
.tierbar[data-tier="1"] { --bar: var(--tier-1); }
.tierbar[data-tier="2"] { --bar: var(--tier-2); }
.tierbar[data-tier="3"] { --bar: var(--tier-3); }
.tierbar[data-tier="4"] { --bar: var(--tier-4); }

.tier-label {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.tier-label::before { content:''; width:8px; height:8px; border-radius:2px; background: var(--dot, var(--turq)); }
.tier-label[data-tier="1"] { color: var(--tier-1); --dot: var(--tier-1); }
.tier-label[data-tier="2"] { color: var(--tier-2); --dot: var(--tier-2); }
.tier-label[data-tier="3"] { color: var(--tier-3); --dot: var(--tier-3); }
.tier-label[data-tier="4"] { color: var(--tier-4); --dot: var(--tier-4); }

/* --- 6. Agent list ------------------------------------------------------- */
/* A list, not a card grid. One line each. The user reads six names in four
   seconds and clicks the one that matches their week. */

.agent-list { border-top: 1px solid var(--line); }
.agent-row {
  display: grid; grid-template-columns: 190px minmax(0,1fr) 120px;
  gap: var(--s-5); align-items: baseline;
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.agent-row:hover { background: var(--surface); }
.agent-row .name { font-family: var(--serif); font-size: var(--t-md); color: var(--chalk); }
.agent-row .what { font-size: var(--t-sm); color: var(--chalk-muted); line-height: 1.5; margin: 0; max-width: none; }
.agent-row .state { text-align: right; }
.agent-row[data-state="planned"] .name,
.agent-row[data-state="building"] .name { color: var(--chalk-faint); }

.state-dot { font-family: var(--sans); font-size: var(--t-xs); display:inline-flex; align-items:center; gap: var(--s-2); }
.state-dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.state-dot[data-state="live"]     { color: var(--tier-1); }
.state-dot[data-state="beta"]     { color: var(--tier-2); }
.state-dot[data-state="building"] { color: var(--tier-3); }
.state-dot[data-state="planned"]  { color: var(--tier-4); }

/* --- 7. Verdict card ----------------------------------------------------- */

.verdict {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--edge, var(--turq));
  border-radius: var(--radius);
  padding: var(--s-5);
}
.verdict[data-tier="1"] { --edge: var(--tier-1); }
.verdict[data-tier="2"] { --edge: var(--tier-2); }
.verdict[data-tier="3"] { --edge: var(--tier-3); }
.verdict[data-tier="4"] { --edge: var(--tier-4); }

.verdict-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-3); }
.verdict-subject { font-family: var(--mono); font-size: var(--t-xs); color: var(--chalk-faint); }
.verdict-claim { font-size: var(--t-base); line-height: 1.55; color: var(--chalk); margin: 0 0 var(--s-4); max-width:none; }

.pillars { display:flex; flex-direction:column; gap:var(--s-3); margin:var(--s-4) 0; }
.pillar { display:grid; grid-template-columns:1fr 84px; gap:var(--s-4); align-items:center; }
.pillar-name { font-family:var(--sans); font-size:var(--t-xs); color:var(--chalk-muted); }

.coverage { font-family:var(--mono); font-size:var(--t-xs); color:var(--chalk-faint); padding-top:var(--s-3); border-top:1px solid var(--line); }

/* Limits — same visual weight as the verdict. This is the product. */
.limits { margin-top: var(--s-4); background: var(--surface-2); border-radius: var(--radius); padding: var(--s-4); }
.limits h4 { font-family: var(--sans); font-size: var(--t-xs); font-weight:600; margin:0 0 var(--s-2); color: var(--chalk); }
.limits ul { margin:0; padding-left:1.1em; }
.limits li { font-size: var(--t-sm); line-height:1.5; color: var(--chalk-muted); margin-bottom: var(--s-1); }

/* --- 8. Controls --------------------------------------------------------- */

.btn {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  padding: 11px 22px; border-radius: var(--radius);
  border: 1px solid var(--turq); background: var(--turq); color: var(--void);
  cursor: pointer; display: inline-block;
}
.btn:hover { background: var(--turq-bright); border-color: var(--turq-bright); color: var(--void); }
.btn-quiet { background: transparent; color: var(--chalk); border-color: var(--line-lit); }
.btn-quiet:hover { background: transparent; border-color: var(--turq); color: var(--turq); }

.field { display: flex; gap: var(--s-2); max-width: 520px; }
.field input {
  flex: 1; font-family: var(--mono); font-size: var(--t-sm);
  padding: 11px 14px; border: 1px solid var(--line-lit);
  border-radius: var(--radius); background: var(--surface); color: var(--chalk);
}
.field input::placeholder { color: var(--chalk-faint); }
.field input:focus { outline: 2px solid var(--turq); outline-offset: 1px; border-color: transparent; }

.pill {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid currentColor; display: inline-block;
}
.pill[data-state="live"]     { color: var(--tier-1); }
.pill[data-state="beta"]     { color: var(--tier-2); }
.pill[data-state="building"] { color: var(--tier-3); }
.pill[data-state="planned"]  { color: var(--tier-4); }

/* --- 9. Handoff ---------------------------------------------------------- */

.handoff {
  margin-top: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--line-lit); border-radius: var(--radius);
  background: var(--turq-wash);
  display: flex; gap: var(--s-4); align-items: center; justify-content: space-between;
}
.handoff p { margin:0; font-size: var(--t-sm); color: var(--chalk-muted); }

/* --- 10. Meta, tables, footer -------------------------------------------- */

.meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--chalk-faint); }
.footer { border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-10); font-family: var(--sans); font-size: var(--t-sm); color: var(--chalk-faint); }
.footer a { color: var(--chalk-muted); }

.sources { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:var(--t-sm); }
.sources th { text-align:left; font-weight:500; color:var(--chalk); padding:var(--s-2) var(--s-3); border-bottom:1px solid var(--line-lit); }
.sources td { padding:var(--s-2) var(--s-3); border-bottom:1px solid var(--line); color:var(--chalk-muted); }
.sources td:first-child { font-family:var(--mono); font-size:var(--t-xs); color:var(--chalk); }

/* --- 11. Quality floor --------------------------------------------------- */

@media (max-width: 860px) {
  :root { --t-2xl: 2.5rem; --t-xl: 1.875rem; --s-16: 5rem; --s-12: 4rem; }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .agent-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .agent-row .state { text-align: left; }
  .nav-links { gap: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}