@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font: 400 var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
a { color: inherit; }

.wrap { width: min(100% - clamp(2rem, 8vw, 3rem), 74rem); margin-inline: auto; }

/* ── motion engine ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ── N13 · bordered bar + ⌘K ───────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper) 86%, transparent);
  backdrop-filter: blur(8px);
}
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: 3.5rem; }
.nav__mark { font: 600 var(--text-base)/1 var(--font-display); color: var(--color-ink);
  letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); margin-left: var(--space-md); }
.nav__link { font-size: var(--text-sm); color: var(--color-ink-3); text-decoration: none;
  white-space: nowrap; position: relative; padding-block: 0.25rem;
  transition: color var(--dur-fast) var(--ease-out); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--color-accent); transition: right var(--dur-mid) var(--ease-out); }
.nav__link:hover { color: var(--color-ink); }
.nav__link:hover::after { right: 0; }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.kbd-trigger {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 2rem; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink-3);
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.06em; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kbd-trigger:hover { border-color: var(--color-accent); color: var(--color-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 2.25rem; padding: 0 var(--space-md);
  border-radius: var(--radius-sm); border: var(--rule-hair) solid transparent;
  font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-active); }
.btn--primary:disabled { background: var(--color-rule); color: var(--color-ink-3); cursor: not-allowed; }
.btn--ghost { border-color: var(--color-rule); color: var(--color-ink); background: var(--color-paper); }
.btn--ghost:hover { border-color: var(--color-accent); }

/* ── hero: title left · live instrument right ──────────────── */
.hero { padding-block: clamp(var(--space-xl), 7vw, var(--space-3xl)) var(--space-2xl); }
.hero__grid { display: grid; gap: var(--space-xl); align-items: start;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); } }
.eyebrow { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-ink-3); display: flex; align-items: center; gap: var(--space-xs); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--color-accent); flex: none; }
.hero h1 { font-size: var(--text-display); margin-block: var(--space-md) var(--space-md); font-weight: 600; }
.hero__lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 34ch; }
.hero__meta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md);
  font: 400 var(--text-sm)/1.5 var(--font-mono); color: var(--color-ink-3); }

/* ── the instrument ────────────────────────────────────────── */
.panel { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-ink-3); }
.panel__body { padding: var(--space-md); }
.field { display: block; margin-bottom: var(--space-sm); }
.field__label { display: block; font: 500 var(--text-xs)/1.6 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-3); margin-bottom: var(--space-2xs); }
.field__input {
  width: 100%; min-height: 2.375rem; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-sm)/1 var(--font-mono); text-overflow: ellipsis;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field__input:hover { border-color: var(--color-rule-hover); }
.field__input:focus-visible { border-color: var(--color-accent); outline-offset: 1px; }
.field__row { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) { .field__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field__hint { font: 400 var(--text-xs)/1.5 var(--font-body); color: var(--color-ink-3); margin-top: var(--space-2xs); }

.out { margin-top: var(--space-md); border-radius: var(--radius-md); background: var(--color-graphite);
  border: var(--rule-hair) solid var(--color-rule-2); overflow: hidden; }
.out__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2);
  font: 500 var(--text-xs)/1.8 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-on-dark-2); }
.out pre { margin: 0; padding: var(--space-md);
  /* The hash is the single most important value on this page. Evidence you
     cannot read is not evidence, so it wraps instead of scrolling out of view. */
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 var(--text-sm)/1.7 var(--font-mono); color: var(--color-on-dark); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.15rem var(--space-xs); border-radius: 3px;
  font: 500 var(--text-xs)/1.5 var(--font-mono); letter-spacing: 0.06em; }
.chip--settled    { background: var(--chip-settled-bg); color: var(--chip-settled-ink); }
.chip--notsettled { background: var(--chip-notsettled-bg); color: var(--chip-notsettled-ink); }
.chip--unknown    { background: var(--chip-unknown-bg); color: var(--chip-unknown-ink); }
.chip--idle       { background: var(--chip-idle-bg);  color: var(--color-on-dark-2); }
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-pun { color: var(--tok-pun); }

/* ── sections ──────────────────────────────────────────────── */
.band { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.band__head { max-width: 52ch; margin-bottom: var(--space-xl); }
.band__head h2 { font-size: var(--text-display-s); font-weight: 600; margin-bottom: var(--space-sm); }
.band__head p { color: var(--color-ink-2); }

.verdicts { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.verdict { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-md); border-top-width: 2px; }
.verdict--settled    { border-top-color: var(--color-settled); }
.verdict--notsettled { border-top-color: var(--color-notsettled); }
.verdict--unknown    { border-top-color: var(--color-unknown); }
.verdict__name { font: 500 var(--text-sm)/1 var(--font-mono); color: var(--color-ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  margin-bottom: var(--space-xs); }
.verdict__exit { font-size: var(--text-xs); color: var(--color-ink-3); }
.verdict p { font-size: var(--text-sm); color: var(--color-ink-2); }

.snippet { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; }
.snippet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md); background: var(--color-paper-2);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font: 500 var(--text-xs)/1.8 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-ink-3); }
.snippet pre { margin: 0; padding: var(--space-md); overflow-x: auto;
  font: 400 var(--text-sm)/1.7 var(--font-mono); color: var(--color-ink); background: var(--color-paper); }
.copy { border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; background: transparent;
  color: var(--color-ink-3); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.06em;
  padding: 0.3rem var(--space-xs); cursor: pointer; min-height: 1.75rem;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.copy:hover { color: var(--color-ink); border-color: var(--color-accent); }
.copy[data-state="done"] { color: var(--color-accent); border-color: var(--color-accent); }

.split { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); } }

/* the one dark beat */
.dark { background: var(--color-graphite-2); color: var(--color-on-dark-2);
  padding-block: var(--space-3xl); border: 0; }
.dark h2, .dark h3 { color: var(--color-on-dark); }
.dark .band__head p { color: var(--color-on-dark-2); }
.dark .snippet { border-color: var(--color-rule-2); }
.dark .snippet__head { background: var(--color-graphite); border-bottom-color: var(--color-rule-2);
  color: var(--color-on-dark-2); }
.dark .snippet pre { background: var(--color-graphite); color: var(--color-on-dark); }
.dark .copy { border-color: var(--color-rule-2); color: var(--color-on-dark-2); }
.finding { font: 500 var(--text-xs)/1.6 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); }
.dark h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-sm); }
.dark p { font-size: var(--text-sm); }

/* ── Ft4 dense colophon ────────────────────────────────────── */
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl);
  font: 400 var(--text-xs)/1.9 var(--font-mono); color: var(--color-ink-3); }
.foot dl { display: grid; gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-lg);
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .foot dl { grid-template-columns: 9rem minmax(0, 1fr); } }
.foot dt { color: var(--color-ink); letter-spacing: 0.06em; text-transform: uppercase; }
.foot dd { margin: 0; overflow-wrap: anywhere; }
.foot a { color: var(--color-ink-2); text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.foot a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ── ⌘K palette ────────────────────────────────────────────── */
.pal { position: fixed; inset: 0; z-index: 60; display: none; padding-top: 12vh;
  justify-content: center; background: var(--color-scrim); }
.pal[open] { display: flex; }
.pal__box { width: min(100% - 2rem, 34rem); height: max-content;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); overflow: hidden; box-shadow: 0 8px 32px var(--color-lift); }
.pal__input { width: 100%; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md); background: transparent; color: var(--color-ink);
  font: 400 var(--text-base)/1 var(--font-mono); }
.pal__input:focus { outline: none; }
.pal__list { list-style: none; margin: 0; padding: var(--space-2xs); max-height: 50vh; overflow-y: auto; }
.pal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm); border-radius: 4px; cursor: pointer;
  font-size: var(--text-sm); color: var(--color-ink-2); }
.pal__row[aria-selected="true"] { background: var(--color-accent-dim); color: var(--color-ink); }
.pal__row span:last-child { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-ink-3); }
.pal__empty { padding: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-3); }

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

@media (max-width: 40rem) {
  .nav__links { display: none; }
  /* Two mono labels in one head collide at this width; the right one is
     ambience, the left one is the label that matters. */
  .panel__head > :last-child { display: none; }
  .panel__head, .out__head, .snippet__head { white-space: nowrap; }
  .btn, .kbd-trigger, .copy { min-height: 2.75rem; }
  .copy { padding-inline: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: var(--dur-fast) !important; }
}