/* ================================================================
 * Ground Truth Labs — long-form reading surface
 * ================================================================
 *
 * Brand tokens below are a SNAPSHOT of landing/kit/colors_and_type.css,
 * taken 2026-08-13. They are copied rather than imported because labs/ and
 * landing/ are separate Vercel projects with separate build roots, so a
 * relative import across directories would not resolve at deploy time.
 *
 *   >> Canonical source: landing/kit/colors_and_type.css
 *   >> If brand tokens change there, update the two :root blocks here.
 *
 * Deviations from the app's usage, and why:
 *
 *   1. Light is the default here; the app is dark-default. Both palettes are
 *      the house ones, verbatim — this only decides what a reader with no OS
 *      preference sees. The app is dark because it is a dense data surface
 *      viewed all day; an article is a different reading task.
 *
 *   2. Body copy is set at --text-xl (18px). The app's --text-md (14px) is
 *      tuned for dense list rows, not for 2,500 words of prose.
 *
 *   3. Everything else — families, purple, warm-stone neutrals, radius scale,
 *      tracking, the eyebrow treatment — follows the house system.
 * ================================================================ */

/* ---------- brand tokens: GT light theme (default here) ---------- */

:root {
  --background:        oklch(0.98 0.004 80);
  --foreground:        oklch(0.18 0.008 75);
  --muted:             oklch(0.955 0.004 80);
  --muted-foreground:  oklch(0.50 0.008 75);
  --border:            oklch(0.91 0.004 80);
  --primary:           oklch(0.488 0.243 264);
  --gt-purple:         oklch(0.488 0.243 264);
  --gt-purple-light:   oklch(0.72 0.15 264);
  /* chart palette — the house tokens for neutral data series */
  --chart-1: oklch(0.62 0.22 264);
  --chart-4: oklch(0.65 0.10 45);

  /* tally: candidate / tie / incumbent.
     Drawn from the chart palette, NOT from --signal-* or --severity-*: those
     carry "action needed" meaning in the app, and these three blocks are
     outcomes, not verdicts. Deliberately not red-green either, and the tie is
     the quietest block on the page because "no difference" is the finding. */
  --tally-win:  var(--chart-1);
  --tally-tie:  oklch(0.86 0.008 80);
  --tally-loss: var(--chart-4);

  /* type — families and scale from the house system */
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs:  0.625rem;
  --text-sm:   0.75rem;
  --text-base: 0.8125rem;
  --text-md:   0.875rem;
  --text-lg:   1rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.25rem;
  --text-4xl:  1.875rem;
  --text-5xl:  2.25rem;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.15em;

  --radius:    0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);

  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* reading measure — not a brand token; specific to long-form */
  --measure:      37rem;
  --measure-wide: 46rem;
}

/* ---------- brand tokens: GT dark theme, opt-in only ----------
 *
 * Light is the default and this surface deliberately does NOT follow
 * prefers-color-scheme (Eddie, 2026-08-13): a reader on a dark-mode machine
 * still lands on the warm light ground, because that is the palette chosen for
 * long-form reading. Dark is available via the masthead toggle, which sets
 * [data-theme="dark"] and remembers the choice in localStorage.
 *
 * This mirrors the app's convention, where light is the opt-in
 * ([data-theme="light"]) over a dark default. Here the polarity is reversed
 * because the default differs; the token values are the house ones either way.
 *
 * No-JS readers get light and no toggle — the button is hidden until the
 * script un-hides it, so it never renders as a control that does nothing.
 */

:root[data-theme="dark"] {
  --background:       oklch(0.14 0.006 75);
  --foreground:       oklch(0.93 0.004 80);
  --muted:            oklch(0.24 0.006 75);
  --muted-foreground: oklch(0.60 0.006 80);
  --border:           oklch(1 0.004 80 / 10%);
  --primary:          oklch(0.62 0.22 264);
  --gt-purple:        oklch(0.62 0.22 264);
  --gt-purple-light:  oklch(0.75 0.15 264);

  --chart-1: oklch(0.62 0.22 264);
  --chart-4: oklch(0.68 0.10 45);

  --tally-tie: oklch(0.38 0.006 80);
}

/* ================================================================
 * base
 * ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-loose);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 40rem) {
  body { font-size: var(--text-xl); }
}

/* ================================================================
 * layout
 * ================================================================ */

/* box-sizing is border-box, so max-width must carry the inline padding —
   otherwise the content box lands narrower than --measure and the masthead
   stops aligning with the text column. */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* The article container is wider than the reading measure so figures and
   tables can break out of the text column without negative margins. Both
   are centred, so the masthead (at --measure) aligns with body text. */
.wrap-wide { max-width: calc(var(--measure-wide) + 2 * var(--space-6)); }

article {
  display: grid;
  grid-template-columns: 1fr min(var(--measure), 100%) 1fr;
}

article > * { grid-column: 2; }

article > .wide {
  grid-column: 1 / -1;
  width: 100%;
}

/* ================================================================
 * masthead
 * ================================================================ */

.masthead {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-4);
  margin-bottom: var(--space-16);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--foreground);
}

.mark-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

.mark-name {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.mark:hover .mark-name { color: var(--gt-purple); }

.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  cursor: pointer;
}

.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--foreground); border-color: var(--muted-foreground); }

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.theme-toggle svg { width: 1rem; height: 1rem; display: block; }

/* light showing → offer dark (moon); dark showing → offer light (sun) */
.theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.mark-labs {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
}

/* ================================================================
 * type
 * ================================================================ */

h1 {
  font-size: clamp(var(--text-4xl), 1.2rem + 3vw, var(--text-5xl));
  font-weight: 700;
  /* --leading-snug, same as h2: --leading-tight (1.1) sets display type so much
     tighter than body (1.65) that the headline reads as a different system. */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

/* Wrap each sentence of a headline in <span class="line"> to break it at
   sentence boundaries. text-wrap: balance optimises for even line lengths, not
   for meaning, and will happily strand a preposition and split "which model to
   use." across two lines. Each span wraps independently, so this still reflows
   at any width — unlike a hard <br>. Optional: omit it and the headline wraps
   normally. */
h1 .line { display: block; }

h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

article h2 {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

p { margin: 0 0 var(--space-6); }

a {
  color: var(--gt-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--gt-purple-light); }

a:focus-visible,
.mark:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

strong { font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--muted);
  padding: 0.1em 0.34em;
  border-radius: var(--radius-sm);
}

ul, ol { margin: 0 0 var(--space-6); padding-left: 1.35rem; }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--muted-foreground); }

/* ================================================================
 * article furniture
 * ================================================================ */

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--primary);
  margin: 0 0 var(--space-4);
}

.standfirst {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.byline {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* ================================================================
 * the tally — this page's one loud element
 * ================================================================ */

.tally { margin: var(--space-10) 0; padding: 0; }

.tally-item + .tally-item { margin-top: var(--space-8); }

.tally-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}

.tally-n { font-weight: 400; color: var(--muted-foreground); }

.tally-bar {
  display: flex;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--muted);
}

.seg { display: block; height: 100%; }
.seg-win  { background: var(--tally-win); }
.seg-tie  { background: var(--tally-tie); }
.seg-loss { background: var(--tally-loss); }

.tally-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--muted-foreground);
}

.tally-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.swatch {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 2px;
  flex: none;
}

.swatch-win  { background: var(--tally-win); }
.swatch-tie  { background: var(--tally-tie); }
.swatch-loss { background: var(--tally-loss); }

.tally-note {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  margin: var(--space-6) 0 0;
}

/* ================================================================
 * tables
 * ================================================================ */

.table-scroll {
  overflow-x: auto;
  margin: var(--space-8) 0;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-size: var(--text-md);
}

caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

th {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}

td.num, th.num {
  text-align: right;
  padding-right: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ================================================================
 * index
 * ================================================================ */

.index-intro {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  max-width: 32rem;
  margin: 0 0 var(--space-12);
}

.entry { padding-top: var(--space-6); border-top: 1px solid var(--border); }

.entry-date {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
  margin: 0 0 var(--space-2);
}

.entry-title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.entry-title a { color: var(--foreground); text-decoration: none; }
.entry-title a:hover { color: var(--gt-purple); text-decoration: underline; }

.entry-dek {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  margin: 0;
}

/* ================================================================
 * footer
 * ================================================================ */

footer.site {
  margin-top: var(--space-16);
  padding-block: var(--space-8) var(--space-12);
  border-top: 1px solid var(--border);
  font-size: var(--text-md);
  color: var(--muted-foreground);
}

article { padding-bottom: var(--space-4); }