/* ==========================================================================
   What is a token? — exhibition display
   Dark throughout. Sized to be read standing up, a metre or two away.
   ========================================================================== */

:root {
  color-scheme: dark;

  --page:          #0f0f0e;
  --surface-1:     #1a1a19;   /* the surface the series colours were validated against */
  --surface-2:     #232322;
  --border:        #34342f;
  --border-strong: #55554e;

  --text-primary:   #ffffff;
  --text-secondary: #cfcec4;
  --text-muted:     #99988e;

  /* Data-viz roles — validated categorical slots 1 and 2 on this surface */
  --series-in:  #3987e5;   /* what you write */
  --series-out: #d95926;   /* what the AI writes */

  --accent: #59a0f2;
  --focus:  #ffb020;

  --radius:   18px;
  --radius-s: 10px;
  --maxw:     68rem;
}

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

/* Elements below are toggled with the `hidden` attribute while also carrying a
   display rule, which would otherwise win. Keep `hidden` absolute. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 23px; } }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}

h1, h2 { line-height: 1.05; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.03em; }
p { margin: 0 0 .8em; text-wrap: pretty; }
strong { font-weight: 700; }

a { color: var(--accent); text-underline-offset: 4px; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -130%);
  background: var(--surface-1); color: var(--text-primary);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-s) var(--radius-s);
  border: 1px solid var(--border-strong); z-index: 50;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(3rem, 12vw, 7rem) 0 clamp(2.5rem, 8vw, 4.5rem);
  background:
    radial-gradient(ellipse 75% 60% at 12% 0%, #16304e, transparent 70%),
    radial-gradient(ellipse 65% 55% at 95% 10%, #45210f, transparent 70%);
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  font-size: clamp(3rem, 15vw, 7rem);
  font-weight: 800;
  margin-bottom: .3em;
}
.hl { color: var(--series-out); }

/* Both sentences stay on a single line at any width — see the budget note on
   .oneline below. */
.lede {
  font-size: clamp(0.95rem, 3.0vw, 2.1rem);
  color: var(--text-secondary);
  font-weight: 500;
  max-width: none;
}
.lede-line { display: block; white-space: nowrap; }

.hero-cta { margin: clamp(1.8rem, 5vw, 2.8rem) 0 0; }
/* A button, not a link: it scrolls the page rather than navigating, so it
   leaves no #hash behind for a refresh to jump back to. */
.hero-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.5rem);
  padding: .8rem 2.2rem; min-height: 64px; line-height: 2;
  border: 0; border-radius: 999px;
  background: var(--text-primary); color: var(--page);
  cursor: pointer;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: clamp(2.8rem, 9vw, 5.5rem) 0; border-bottom: 1px solid var(--border); }
.section h2 {
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  font-weight: 750;
  margin-bottom: .6em;
}
.section--demo, .section--scale { background: var(--surface-1); }

/* The demo is meant to fit one screen — chooser, numbers and both messages
   together — so it runs tighter than the surrounding sections. */
.section--demo { padding-block: clamp(1.8rem, 5vw, 3rem); }
.section--demo h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: .5em; }

/* Single-line text. Sized against the viewport so it never wraps before the
   edge of the screen, and capped so it still fits inside the --maxw .wrap on
   large displays. Budget: characters x ~0.55em advance must fit both ~90vw
   and (--maxw - gutters), with 10% headroom. build/verify.js checks this. */
.oneline {
  font-size: clamp(0.9rem, 2.8vw, 1.95rem);
  white-space: nowrap;
  max-width: none;
  color: var(--text-secondary);
  margin: 1.2rem 0 0;
}
.oneline--muted { color: var(--text-muted); font-size: clamp(0.8rem, 2.6vw, 1.4rem); }

/* ── Token chips ──────────────────────────────────────────────────────── */

.tokens {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0; padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; line-height: 1.5;
}
.tokens--big { font-size: clamp(1.05rem, 4vw, 1.7rem); gap: 7px; }

/* One flat colour per group. Every chip in a group looks identical on purpose:
   the colour says who wrote the text and nothing else. An earlier version
   cycled three shades so neighbours stayed distinct, but that reads as though
   the shade encodes something. The gap and the border do that job instead. */
.tok {
  display: inline-block;
  padding: .25em .4em;
  border-radius: 7px;
  white-space: pre-wrap;
  color: #fff;
}
.tokens--in  .tok { background: #2a6bb5; border: 1px solid #4d8fd6; }
.tokens--out .tok { background: #b8471f; border: 1px solid #db6a3d; }

/* Markers for the two things that are otherwise invisible but still counted:
   a leading space and a line break. Dimmed so they read as annotation rather
   than as part of the word — but only to 0.7, which keeps them above 3:1
   against the chip. At 0.45 they were 2.3:1 and effectively unreadable. */
.tok-mark { opacity: .7; font-weight: 400; }

/* A flex spacer that starts a new row. Deliberately not a .tok — one chip per
   token is what makes the chips countable. */
.rowbreak { flex-basis: 100%; height: 0; }

/* ── Chooser ──────────────────────────────────────────────────────────── */

.chooser {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.2rem;
}

.choice {
  display: flex; flex-direction: column; gap: .1rem;
  flex: 1 1 8.5rem;               /* one row on a wide screen, wraps on a phone */
  text-align: left; font: inherit; color: inherit;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-s);
  padding: .55rem .8rem;
  min-height: 48px;               /* still a comfortable tap target */
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--border-strong); }
.choice[aria-selected="true"] {
  border-color: var(--series-in);
  background: #17304d;
}
.choice-label { font-weight: 650; font-size: clamp(.9rem, 2.6vw, 1.02rem); line-height: 1.2; }
.choice-meta { font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Result ───────────────────────────────────────────────────────────── */

.result { display: grid; gap: .9rem; }

/* Headline and numbers share a row on wider screens so the two messages below
   fit on the same screen as the chooser. */
.summary { display: grid; gap: .8rem; align-items: center; }
@media (min-width: 46rem) { .summary { grid-template-columns: 1fr auto; } }

.blurb {
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  font-weight: 650; color: var(--text-primary);
  margin: 0;
}

.meters { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 46rem) { .meters { min-width: 22rem; } }

.meter {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 4px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: .5rem .7rem;
  text-align: center;
}
.meter--in  { border-top-color: var(--series-in); }
.meter--out { border-top-color: var(--series-out); }

.meter-num {
  display: block; line-height: 1.05;
  font-size: clamp(1.4rem, 6vw, 2.3rem);
  font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.meter-lbl {
  display: block; margin-top: .15rem;
  font-size: clamp(.68rem, 2.2vw, .82rem);
  color: var(--text-secondary);
}

/* Both messages sit side by side on a wide screen and stack on a phone. */
.panels { display: grid; gap: .9rem; align-items: start; }
@media (min-width: 60rem) { .panels { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.panel-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
}
.panel-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.panel-dot--in  { background: var(--series-in); }
.panel-dot--out { background: var(--series-out); }
.panel-title { font-weight: 700; font-size: .98rem; margin: 0; }
.panel-count {
  margin-left: auto; font-size: 1rem; font-weight: 700;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
/* A bounded scroll pane, so a 900-token answer cannot push the rest of the
   demo off screen. No fading — the content is simply scrollable. */
.panel-body {
  padding: .9rem;
  max-height: clamp(11rem, 34vh, 26rem);
  overflow-y: auto;
  overscroll-behavior-y: auto;   /* let the page keep scrolling at the ends */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.panel-body::-webkit-scrollbar { width: 10px; }
.panel-body::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 6px;
  border: 3px solid var(--surface-2);
}

.viewtabs { display: flex; gap: .4rem; padding: .55rem .9rem 0; }
.viewtab {
  font: inherit; font-size: .9rem; font-weight: 650;
  background: none; border: 2px solid var(--border-strong);
  border-radius: 999px; padding: .4rem 1rem; min-height: 44px;
  cursor: pointer; color: var(--text-secondary);
}
.viewtab[aria-pressed="true"] {
  background: var(--text-primary); color: var(--page); border-color: var(--text-primary);
}

.plaintext {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 1rem; color: var(--text-secondary);
}

/* ── Chart ────────────────────────────────────────────────────────────── */

.chart-figure { margin: 0; }

.legend { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--text-secondary); }
.legend-swatch { width: 16px; height: 16px; border-radius: 5px; flex: none; }

.chart { display: grid; gap: 1.2rem; }
.bar-row { display: grid; gap: .4rem; }
.bar-label { font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 650; }
.bar-track { display: flex; gap: 3px; height: 34px; background: var(--surface-2); border-radius: 6px; }
.bar-seg { height: 100%; min-width: 3px; }
.bar-seg--in  { background: var(--series-in);  border-radius: 6px 0 0 6px; }
.bar-seg--out { background: var(--series-out); border-radius: 0 6px 6px 0; }
.bar-seg--out:first-child { border-radius: 6px; }
.bar-value { font-size: 1rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ── Collapsed detail ─────────────────────────────────────────────────── */

.more { margin-top: 1.6rem; }
.more summary {
  cursor: pointer; font-weight: 650; font-size: 1rem;
  color: var(--text-muted); min-height: 44px; padding: .6rem 0;
}
.table-scroll { overflow-x: auto; margin-top: .8rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: right; padding: .5rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--text-muted); font-weight: 650; }
tbody td { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ── Scale ────────────────────────────────────────────────────────────── */

.scalepick { margin: 0 0 1.6rem; }
.scalepick select {
  font: inherit; font-size: clamp(1rem, 3.6vw, 1.2rem); font-weight: 650;
  padding: .8rem 1rem; min-height: 60px; width: 100%; max-width: 26rem;
  border-radius: var(--radius-s); border: 3px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-primary);
}

.scalegrid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 54rem) { .scalegrid { grid-template-columns: repeat(4, 1fr); } }

.scaleitem {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 1.1rem 1rem;
  text-align: center;
}
.scaleitem-num {
  display: block; font-size: clamp(1.6rem, 7vw, 2.6rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.scaleitem-lbl { display: block; font-size: clamp(.8rem, 2.8vw, 1rem); color: var(--text-muted); margin-top: .4rem; }

/* ── Try your own ─────────────────────────────────────────────────────── */

.trybox {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 4vw, 1.6rem);
}
#tryinput {
  width: 100%; font: inherit; font-size: clamp(1rem, 4vw, 1.3rem);
  padding: .9rem 1rem; resize: vertical; min-height: 4.5rem;
  border-radius: var(--radius-s); border: 3px solid var(--border-strong);
  background: var(--page); color: var(--text-primary);
}
.trystatus { margin: .8rem 0 0; font-size: 1rem; color: var(--text-muted); min-height: 1.5em; }
.trycount { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.2rem; }
.trycount-num {
  font-size: clamp(2.2rem, 10vw, 3.5rem); font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.trycount-lbl { color: var(--text-muted); font-size: 1.1rem; }

/* ── aGiTrack ─────────────────────────────────────────────────────────── */

.section--agitrack { background: var(--surface-1); }

.agicard {
  background: var(--surface-2);
  border: 3px solid var(--series-in);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 6vw, 3rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.agicard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--series-in), var(--series-out));
}
.agi-h { font-size: clamp(1.7rem, 6.5vw, 2.8rem); margin-bottom: .7em; }
.agi-link { margin: 0 0 .6rem; }

.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  text-decoration: none;
  padding: .9rem 2.4rem; min-height: 68px;
  border-radius: 999px;
  background: var(--series-in); color: #fff;
}
.ext { font-size: .85em; }
.agi-url { font-size: 1rem; color: var(--text-muted); font-family: ui-monospace, monospace; margin: 0; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer { padding: clamp(2rem, 6vw, 3rem) 0; }
.foot-list { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--text-muted); font-size: .95rem; }
.foot-list li { margin-bottom: .6rem; max-width: 60ch; }
.foot-tail {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center;
  font-size: .95rem; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 1.2rem; margin-top: 1.6rem;
}
.foot-lab { margin-left: auto; font-weight: 650; white-space: nowrap; }

@media (forced-colors: active) {
  .bar-seg, .panel-dot, .legend-swatch, .tok { forced-color-adjust: none; }
  .choice[aria-selected="true"] { outline: 3px solid CanvasText; }
}