/* ============================================================
   v100 — Per-tab layout & motion (blueprint §2 file layout)
   ------------------------------------------------------------
   P4 scope: Tab 1 — Home / Intro, per blueprint §6.
   All colors via tokens (§7); no hardcoded theme values here.
   Agent-decided details are labeled as such in comments.
   ============================================================ */

/* ---------- Hero (full viewport, §6 Tab 1) ------------------- */
.home-hero {
  position: relative;
  overflow: hidden; /* clip the floating panels at the edges */
  /* Was a full viewport. Trimmed 2026-09-05 with the marquee removal so the
     first story beat sits just under the fold instead of a screen below it. */
  min-height: calc(82vh - 56px);
  min-height: calc(82svh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* Sized so the content column matches the width of the h1 on one line
     (48px type, ~651px). The description then spans exactly the same
     measure as the title above it (owner request, 2026-09-05). */
  max-width: 700px;
  padding: var(--sp-7) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.hero-inner .eyebrow {
  margin: 0;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-inner h1 {
  margin: 0;
  font-size: var(--fs-7);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero-sub {
  margin: 0;
  /* No narrower measure than the title: the description spans the same
     width as the h1 above it (owner request, 2026-09-05). */
  max-width: none;
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--text-secondary);
}

.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* Floating glass panels — decorative only (aria-hidden in markup).
   Agent-decided: animate the individual `translate` property so it can't
   clash with any transform on the element; hidden below 900 px. */
.hero-float {
  position: absolute;
  z-index: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  white-space: nowrap;
}

.hero-float b { color: var(--text-primary); font-weight: 700; }

.hero-float--a { top: 16%; left: 7%;  animation: float-a 9s  var(--ease-toggle) infinite alternate; }
.hero-float--b { top: 24%; right: 6%; animation: float-b 11s var(--ease-toggle) infinite alternate; }
.hero-float--c { bottom: 18%; left: 13%; animation: float-c 13s var(--ease-toggle) infinite alternate; }

@keyframes float-a { from { translate: 0 0; } to { translate: 0 -20px; } }
@keyframes float-b { from { translate: 0 0; } to { translate: 0 16px; } }
@keyframes float-c { from { translate: 0 0; } to { translate: 0 -14px; } }

@media (max-width: 900px) { .hero-float { display: none; } }

/* Comparison table (P7 M2). Five columns will not fit a narrow screen, so the
   TABLE scrolls inside its own box rather than the page scrolling sideways. */
.table-scroll { overflow-x: auto; margin-top: var(--sp-4); }
.table-scroll table.data { min-width: 720px; }
.table-scroll table.data th[scope="row"] { text-align: left; font-weight: 600; color: var(--text-primary); }
.table-scroll table.data td { vertical-align: top; }

/* Footnote markers and the source list under the table. */
sup.fn { color: var(--accent-solid); font-weight: 700; white-space: nowrap; }
.fn-list { padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.fn-list a { color: var(--accent-solid); }

/* ---------- Tab 4 race cards (P7 M1) -------------------------
   The race is five real answers arriving in real time, so each contestant
   needs a card it can write into rather than a bar in a chart. The panes are
   a fixed height and scroll: text landing token by token must not push the
   card below it down the page mid-race. */
.race-prompt {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent-solid);
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
  border-radius: 0 var(--r-2, 8px) var(--r-2, 8px) 0;
  color: var(--text-primary);
  font-size: var(--fs-1);
}

.race-grid {
  display: grid;
  /* 330px rather than something narrower: five lanes will not fit the site's
     content width at a size anyone would want to read two paragraphs in, and
     reading the answers is half the point of the race. Three across, then two. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.race-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.28));
  border-radius: var(--r-3, 12px);
  background: var(--surface-1, rgba(127, 127, 127, 0.05));
  transition: border-color 160ms ease, opacity 160ms ease;
}
/* The reader's own machine is the one they care about, so the two local
   cards are not left looking like any other contestant. */
.race-card.is-local { border-color: var(--accent-solid); }
.race-card.is-done { border-color: var(--accent-solid); }
.race-card.is-blocked { opacity: 0.55; }

.race-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.race-who { font-size: var(--fs-2); color: var(--text-primary); }
.race-tag {
  font-size: var(--fs-0, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.28));
  border-radius: 999px;
  padding: 0 0.5em;
}
.race-card.is-local .race-tag { color: var(--accent-solid); border-color: var(--accent-solid); }
.race-place { margin-left: auto; font-weight: 700; color: var(--accent-solid); }

.race-speed { margin: 0; font-size: var(--fs-1); color: var(--text-secondary); }
.race-status { margin: 0; font-size: var(--fs-1); font-weight: 600; color: var(--text-primary); }

.race-answer {
  height: 13.5em;
  overflow-y: auto;
  margin: 0;
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;   /* keeps the model's own paragraph breaks */
  overflow-wrap: break-word;
}
/* The cursor only belongs on a card that is actually mid-answer. */
.race-card.is-done .race-answer::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .race-answer:not(:empty)::after {
    content: '▌';
    color: var(--accent-solid);
    animation: race-caret 1s steps(2) infinite;
  }
}
@keyframes race-caret { 50% { opacity: 0; } }

/* A candidate that top-p threw away (P5 M5). Dimmed rather than removed,
   so a reader can see what the setting is actually discarding. */
.bw-row.is-cut { opacity: 0.38; }
.bw-row.is-cut .bw-val { font-weight: 600; font-style: italic; }

/* ---------- Scroll story (§6 Tab 1: beats) -------------------- */
.home-story {
  max-width: 920px;
  margin-inline: auto;
  /* Tight at the top so the first beat is reached almost immediately when
     the reader starts scrolling (owner request, 2026-09-05). */
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

@media (max-width: 820px) { .beat { grid-template-columns: 1fr; } }

.beat-copy h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-5); line-height: 1.2; }
.beat-copy p { margin: 0; line-height: 1.65; color: var(--text-secondary); }
.beat-copy b { color: var(--text-primary); }

.beat-visual h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-2); color: var(--text-faint); font-weight: 600; }

/* Beat 1 — a corner of the weight table (decorative, aria-hidden) */
.weights-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: var(--sp-3); }

.w-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 7px 2px;
  text-align: center;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--text-faint);
}

.w-cell--hot { background: var(--accent-gradient); color: var(--on-accent); font-weight: 700; }

.beat-caption { margin: 0 !important; font-size: var(--fs-1) !important; color: var(--text-faint) !important; }

/* Beat 2 — bandwidth comparison bars (numbers from blueprint §3.1) */
.bw { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-3); }

.bw-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px; align-items: center; gap: var(--sp-3); }
@media (max-width: 560px) { .bw-row { grid-template-columns: 110px minmax(0, 1fr) 72px; } }

.bw-label { font-size: var(--fs-1); color: var(--text-secondary); }

.bw-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bw-bar i { display: block; height: 100%; width: var(--w, 10%); border-radius: inherit; background: var(--accent-gradient); }

.bw-val { font-size: var(--fs-2); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Beat 3 — the local/cloud fork */

/* ---------- Explore grid (ring + tab cards, §4 tracker) ------- */
.home-explore { max-width: 920px; margin-inline: auto; padding: 0 var(--sp-5) var(--sp-7); }

.explore-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 640px) { .explore-head { flex-direction: column; align-items: flex-start; } }

.explore-head h3 { margin: 0 0 var(--sp-1, 6px); font-size: var(--fs-5); }
.explore-head p { margin: 0; color: var(--text-secondary); max-width: 48ch; line-height: 1.6; }

.tab-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 820px) { .tab-card-grid { grid-template-columns: 1fr; } }

/* Tab cards are links — keep the card look, drop link affordances */
.tab-card { position: relative; display: block; text-decoration: none; color: inherit; transition: transform var(--dur-micro) var(--ease-toggle), box-shadow var(--dur-micro) var(--ease-toggle); }
.tab-card:hover { transform: translateY(-3px); }

/* ---------- Reduced motion (§8 courtesy) ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-float--a, .hero-float--b, .hero-float--c { animation: none !important; }
}

/* ============================================================
   Tab 2 · How It Works (blueprint §6 Tab 2) — P5 M2
   ------------------------------------------------------------
   Stage 2's bar reuses base.css's .membar/.seg primitives; the
   “pouring” beat rides the existing .seg width transition. One rule
   here: kill that transition on the reduced-motion path (final state
   is painted instantly by pipeline.js anyway — this is the belt to
   its suspenders). All colors via tokens (§7).
   ============================================================ */

/* ---------- Tab 2 reduced motion (§8) ------------------------- */
@media (prefers-reduced-motion: reduce) {
  #pipe-loadbar .seg { transition: none !important; }
}

/* ============================================================
   Tab 3 · Hardware Lab — layout & motion (blueprint §6 Tab 3)
   ------------------------------------------------------------
   Three rails at ≥1280 px: controls | simulation | printouts.
   Component primitives (.segmented, .slider, .membar, .gauge,
   .run-btn, .estimates) come from base.css (P3, signed off);
   this section only lays them out. All colors via tokens (§7).
   ============================================================ */

.lab-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.lab-head h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-6); }
.lab-head p { margin: 0; color: var(--text-secondary); max-width: 78ch; line-height: 1.6; }

.lab-grid {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .lab-grid { grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .lab-grid { grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(270px, 330px); }
}

/* ---------- Left rail · controls ---------------------------- */
.lab-controls { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); }
.ctl-group h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-1);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ctl-sub { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--glass-border); }
.ctl-sub h5 {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ctl-note { margin: var(--sp-1) 0 0; font-size: var(--fs-1); color: var(--text-secondary); line-height: 1.5; }
.ctl-sublabel { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-2); color: var(--text-secondary); }

/* Mode-dependent sub-groups (lab.js toggles .is-hidden) */
.lab-controls .is-hidden, .nofit.is-hidden { display: none; }

/* Quantization explainer card inside the controls rail */
.ctl-explain {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  line-height: 1.55;
}
.ctl-explain h5 { margin: 0 0 var(--sp-2); font-size: var(--fs-2); color: var(--text-primary); }
.ctl-explain p { margin: 0 0 var(--sp-2); }
.ctl-explain p:last-child { margin-bottom: 0; }

/* ---------- Center · simulation ----------------------------- */
.lab-sim { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); min-height: 420px; }
.sim-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.sim-stage { margin: 0; font-size: var(--fs-2); color: var(--text-secondary); min-height: 1.5em; }

/* Token conveyor: chips appear as tokens are emitted (P6 M3) */
.sim-conveyor {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 96px;
  padding: var(--sp-2);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px dashed var(--glass-border);
}
.sim-conveyor .chip {
  animation: chip-in var(--dur-base) var(--ease-reveal);
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Gauge + progress side by side */
.sim-readout { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.sim-progress { flex: 1 1 200px; min-width: 180px; display: flex; flex-direction: column; gap: var(--sp-1); }
.sim-meta { margin: 0; font-size: var(--fs-1); color: var(--text-faint); }

/* ---------- Right rail · printouts -------------------------- */
.lab-printouts { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.lab-printouts h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-1);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.memblock { display: flex; flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-2); border-bottom: 1px solid var(--glass-border); }

/* Fit-state chip (GPU-resident / offload / CPU-only / doesn’t fit) */
.fit-chip {
  margin: var(--sp-2) 0 0;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  font-size: var(--fs-1);
  font-weight: 600;
  text-align: center;
  background: color-mix(in srgb, var(--accent-solid) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-solid) 35%, transparent);
}
.fit-chip[data-fit="offload"] { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.fit-chip[data-fit="cpuOnly"], .fit-chip[data-fit="noFit"] {
  background: color-mix(in srgb, var(--fail) 12%, transparent);
  border-color: color-mix(in srgb, var(--fail) 45%, transparent);
}

/* Doesn’t-fit diagnosis card */
.nofit { padding: var(--sp-3); border-radius: var(--radius-control); background: color-mix(in srgb, var(--fail) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent); }
.nofit h5 { margin: 0 0 var(--sp-2); font-size: var(--fs-2); color: var(--text-primary); }
.nofit ul { margin: 0; padding-left: 1.3em; font-size: var(--fs-1); color: var(--text-secondary); line-height: 1.6; }

/* ---------- Lab reduced motion (§8) -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sim-conveyor .chip { animation: none !important; }
}

/* ============================================================
   Tab 5 · Glossary + inline term hover cards
   ------------------------------------------------------------
   One shared card (#gloss-tip) is positioned by js/tabs/glossary.js.
   Marked-up terms are real links, so click navigates to the full
   entry and keyboard focus shows the same card as hover.
   ============================================================ */

/* ---------- an inline term anywhere on the site --------------- */
.gloss {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-2);
  cursor: help;
  transition: color var(--dur-micro) var(--ease-toggle),
    text-decoration-color var(--dur-micro) var(--ease-toggle);
}

.gloss:hover,
.gloss:focus-visible {
  color: var(--accent-solid);
  text-decoration-color: var(--accent-solid);
}

/* ---------- the shared hover card ----------------------------- */
.gloss-tip {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-panel), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-micro) var(--ease-toggle),
    transform var(--dur-micro) var(--ease-toggle),
    visibility var(--dur-micro);
  pointer-events: none; /* the card must never eat the hover it describes */
}

.gloss-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- the glossary page --------------------------------- */
.glossary-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.gloss-entry {
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-highlight);
  scroll-margin-top: 96px; /* clear the fixed nav when deep-linked */
  transition: border-color var(--dur-base) var(--ease-toggle),
    box-shadow var(--dur-base) var(--ease-toggle);
}

.gloss-entry h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-4);
}

.gloss-entry p {
  margin: 0;
  color: var(--text-secondary);
  /* Full card width. There is no reason to leave half the card empty
     (owner request, 2026-09-05). */
}

.gloss-entry .gloss-more {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--text-faint);
}

.gloss-entry .gloss-more a {
  color: var(--accent-solid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.gloss-entry .gloss-more a:hover,
.gloss-entry .gloss-more a:focus-visible {
  text-decoration-thickness: 2px;
}

/* The entry a reader was sent to by clicking a term. */
.gloss-entry.is-target {
  border-color: var(--accent-solid);
  box-shadow: var(--glass-highlight), 0 0 0 3px color-mix(in srgb, var(--accent-solid) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .gloss-tip { transition-duration: 1ms; transform: none; }
  .gloss-entry { transition: none; }
}

/* ---------- Home beat lists (Tab 1) --------------------------
   Used by the cloud and local beats: short factual lines rather
   than prose, so a reader can scan the shape of each option. */
.flow-list { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.flow-list li { font-size: var(--fs-2); color: var(--text-secondary); line-height: 1.55; }