/* style.css — margin.wiki design system, one file, source of truth.
   Retune the look here, not on a page. Direction (settled 2026-09-13):
   a black hero band, white below; Archivo throughout; indigo is the only
   accent and it is reserved for data, never decoration; pills only on
   things a reader can act on. See ROADMAP.md, U1. */

/* ---------------------------------------------------------------- Archivo,
   self-hosted -- the only typeface on the site, every weight the pages use. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("./vendor/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --color-ink: #201e1d;        /* the hero band, headings, body text */
  --color-bg: #ffffff;         /* white, below the hero */
  --color-surface: #f3f2f2;    /* a shade off white -- cards sitting on the white */
  --color-text: var(--color-ink);
  --color-divider: color-mix(in srgb, var(--color-ink) 40%, transparent);

  /* Neutral ramp -- ink tints, used for muted text and hairlines. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Indigo -- the only accent, reserved for data: chart lines, sparklines,
     a number that came out of a file. Never a button, a hover, a badge. */
  --data-100: #f7f8fe;
  --data-200: #f2f4fd;
  --data-300: #e6eafb;
  --data-400: #d2d9f7;
  --data-500: #b3bdf1;
  --data-600: #8b96e4;
  --data-700: #5a63c4;
  --grid-empty: #eaeaed;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-ink) 14%, transparent);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-ink); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-ink) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-ink) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--data-600) 35%, transparent); }

/* ---------------------------------------------------------------- header
   One shared header, four nav items, identical markup on every page. */
[data-nav="bar"] {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 24px; border-bottom: 2px solid var(--color-ink); padding: 0 24px; flex-wrap: wrap;
  background: var(--color-bg);
}
[data-nav="brand"] {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  letter-spacing: -0.02em; padding: 14px 0; color: var(--color-ink); text-decoration: none;
}
[data-nav="links"] { display: flex; align-items: stretch; gap: 0; }
[data-nav="links"] a, [data-nav="links"] button {
  appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent;
  cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 800;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 14px 12px;
  color: var(--color-neutral-700);
}
[data-nav="links"] a:hover, [data-nav="links"] button:hover { color: var(--color-ink); }
[data-nav="links"] a[aria-current="page"], [data-nav="links"] button[aria-current="page"] {
  color: var(--color-ink); border-bottom-color: var(--color-ink);
}

/* ---------------------------------------------------------------- hero
   Black band, white below -- the one place on a page that inverts. */
.hero {
  background: var(--color-ink); color: var(--color-bg);
  padding: 56px 24px 40px;
}
.hero h1 { color: var(--color-bg); }
.hero .text-muted { color: color-mix(in srgb, var(--color-bg) 65%, transparent); }

/* ---------------------------------------------------------------- pills
   Pills only on input -- a pill shape means "you can act on this". A
   result, a status, a fact wears a square-cornered tag instead. */
.pill-input {
  border-radius: 999px; cursor: pointer; appearance: none;
  font-family: var(--font-heading); font-weight: 700;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-ink);
}
.pill-input[aria-pressed="true"], .pill-input.is-active {
  background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink);
}
.tag-static {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 3px;
}

/* ---------------------------------------------------------------- responsive
   Additive only: above 980px nothing here applies. Three breakpoints --
   980 / 700 / 640 -- overriding inline layout via [data-grid] hooks, the
   mechanism the pages already use for their fixed-column grids. */
@media (max-width: 980px) {
  [data-grid="hero"],
  [data-grid="split"]     { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  [data-grid="label-row"] { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  [data-grid="finding"]   { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  [data-grid="stat-row"]  { grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; }
}

@media (max-width: 700px) {
  [data-grid="ladder"] {
    grid-template-columns: 104px 84px repeat(4, minmax(74px, 1fr)) !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  [data-grid="cross"] { grid-template-columns: 96px repeat(3, minmax(74px, 1fr)) !important; }
  [data-grid="spread"] {
    grid-template-columns: 96px repeat(5, minmax(74px, 1fr)) !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  [data-grid="bar-row"] { grid-template-columns: 56px minmax(0, 1fr) 72px !important; gap: 8px !important; }
  [data-grid="board-row"] { grid-template-columns: 56px minmax(0, 1fr) 96px !important; gap: 4px 8px !important; }
}

@media (max-width: 640px) {
  [data-grid="tiles"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-grid="bar-row"] { grid-template-columns: 48px minmax(0, 1fr) 64px !important; }
  [data-grid="board-row"] { grid-template-columns: 48px minmax(0, 1fr) 78px !important; }
  [data-grid="coverage-row"] { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 0 10px !important; }
  [data-grid="coverage"] {
    grid-template-columns: repeat(24, minmax(13px, 1fr)) !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  [data-nav="bar"] { padding: 0 12px !important; gap: 10px !important; }
  [data-nav="links"] a, [data-nav="links"] button { padding: 12px 9px 10px !important; letter-spacing: 0.04em !important; }
  h1 { font-size: 30px !important; line-height: 1.1 !important; }
  h2 { font-size: 19px !important; }
}

/* ---------------------------------------------------------------- thread
   The homepage reads as the agent's report, one turn after another, not a
   grid of tiles. A rail with a small indigo mark runs down the left of every
   turn below the hero; the hero band itself is the opening line and keeps its
   own full-bleed treatment. See ROADMAP.md, U2. */
[data-thread="turn"] {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 16px; align-items: start;
}
[data-thread="rail"] { display: flex; flex-direction: column; align-items: center; height: 100%; }
[data-thread="mark"] {
  width: 9px; height: 9px; background: var(--data-600); flex: none; margin-top: 6px;
}
[data-thread="rail"]::after { content: ""; flex: 1; width: 1px; background: var(--color-divider); margin-top: 8px; min-height: 24px; }
[data-thread="turn"]:last-of-type [data-thread="rail"]::after { display: none; }

/* ---------------------------------------------------------------- provenance
   The receipt on a number: where it came from, when it was computed, how many
   sources stood behind it. Pure CSS hover/focus, so it costs nothing to run
   and works with the keyboard. Only wraps a figure that actually carries B1's
   fields (or an equivalent real, derived count) -- never a fabricated one. */
.prov { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted var(--color-neutral-500); }
.prov:hover, .prov:focus-visible { border-bottom-color: var(--color-ink); }
.prov .prov-pop {
  display: none; position: absolute; z-index: 30; bottom: calc(100% + 7px); left: 0;
  width: max-content; min-width: 200px; max-width: 280px;
  background: var(--color-ink); color: var(--color-bg); border: 1px solid var(--color-neutral-600);
  padding: 9px 11px; font-size: 11px; line-height: 1.5; font-weight: 400;
  letter-spacing: normal; text-transform: none; box-shadow: var(--shadow-card);
}
.prov:hover .prov-pop, .prov:focus-visible .prov-pop { display: block; }
.prov .prov-pop b {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; color: var(--data-400);
}

/* ---------------------------------------------------------------- intro sequence
   One orchestrated moment on load: the hero line reveals word by word, then
   the market chart's line draws left to right. Both are CSS-only so they
   still fire even while the rest of the page's data is loading, and both are
   cancelled outright under prefers-reduced-motion -- everything is simply
   there, at rest, immediately. */
.type-word { display: inline-block; opacity: 0; animation: sc-word-in 420ms ease-out forwards; }
@keyframes sc-word-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chart-draw { stroke-dasharray: 3000; animation: sc-draw-line 900ms ease-out 1.05s both; }
@keyframes sc-draw-line { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .type-word { opacity: 1; animation: none; transform: none; }
  .chart-draw { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- docked ask
   The ask box lives at the bottom of the thread, not a floating chrome
   widget. Pre-computed mode: a fixed set of pills, each answered from a file
   already in the repo -- never a text field that looks like it takes a
   question it cannot answer. */
[data-ask="dock"] {
  position: sticky; bottom: 0; z-index: 10; margin-top: 48px;
  background: var(--color-ink); color: var(--color-bg); border-top: 2px solid var(--color-ink);
}
[data-ask="row"] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-ask="pill"] {
  appearance: none; cursor: pointer; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-bg) 40%, transparent);
  background: transparent; color: var(--color-bg); font-family: var(--font-body); font-size: 12px;
  padding: 7px 13px; text-align: left;
}
[data-ask="pill"]:hover, [data-ask="pill"][aria-pressed="true"] { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-bg); }
[data-ask="answer"] { background: color-mix(in srgb, var(--color-bg) 8%, transparent); border-top: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent); }