/* ============================================================================
   © 2026 Lindsay Zuñiga. All rights reserved. See LICENSE.
   Agentic Trust · Dev Tools — a Tiny Wire consumer.
   All color / space / radius / shadow via lib tokens (no hardcoded values).
   Layout: a three-beat deck (Pattern / Demo / Close; see "deck / sequencer"
   below) with the offers queue as a destination overlay.
   ========================================================================== */

html, body { height: 100%; overscroll-behavior: none; }   /* stop the browser/OS swipe-to-go-back from eating the back swipe */
/* lock the page to the viewport: the deck-bar can never scroll away, only beats scroll internally */
body { background: var(--surface-page); color: var(--text-primary); overflow: hidden; }

/* Projected to a room: muted content uses text-secondary (7–9:1), copy sits on
   the large end of the dense scale; hierarchy by size/weight, not faintness. */
.muted { color: var(--text-secondary); }

/* the decision surface + the tell line under it */
.turn { display: flex; flex-direction: column; gap: var(--space-12); }
.trust-tell { font-size: var(--text-base); margin: 0; }
.trust-tell .tell-strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .turn { animation: turnIn var(--duration-base) var(--ease-out) both; }
  @keyframes turnIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* designer's cut note (revealed by the global toggle → body.notes-on, set below) */
.dnote {
  max-width: 760px; margin: 0 auto var(--space-24); width: calc(100% - var(--space-48));
  border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-radius: var(--radius-sm); padding: var(--space-14) var(--space-16);
}
.dnote-tag { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); font-weight: var(--weight-bold); }
.dnote dl { margin: var(--space-10) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-6) var(--space-12); }
.dnote dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); font-weight: var(--weight-semibold); padding-top: 2px; }
.dnote dd { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
.dnote dd strong { color: var(--text-primary); }


/* ════════════════════════ Held-offer surface (offers.html) ════════════════════════ */
/* block-level scroll container (NOT flex) so it reliably scrolls when content overflows */
.offers-canvas {
  flex: 1;
  width: 100%; max-width: 1020px; margin: 0 auto;
  padding: var(--space-40) var(--space-24) var(--space-32);
}
.offers-canvas > * + * { margin-top: var(--space-20); }

.offers-head { display: flex; flex-direction: column; gap: var(--space-6); }
.eyebrow { font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--brand); font-weight: var(--weight-semibold); }
.offers-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.offers-lede { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; max-width: 60ch; }
.offers-lede strong { color: var(--text-primary); }

/* Allegiance verdict — where allegiance renders */
.allegiance { padding: var(--space-16) var(--space-20); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.alleg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-14); }
.alleg-verdict { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--success-dark); letter-spacing: var(--tracking-snug); }
.alleg-glyph { font-size: var(--text-xl); }
.alleg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.astat { padding: var(--space-12); background: var(--surface-muted); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.astat-num { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums lining-nums; }
.astat-lbl { font-size: var(--text-base); color: var(--text-secondary); margin-top: var(--space-4); line-height: var(--leading-compact); }
.astat-good { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.astat-good .astat-num { color: var(--success-dark); }

/* Audit table */
.audit { font-size: var(--text-base); }
.audit th { font-size: var(--text-md); }
.audit .oname { font-weight: var(--weight-semibold); }
.audit .odesc { display: block; font-size: var(--text-md); color: var(--text-tertiary); margin-top: 1px; }
/* Deal column + sortable header (sorts the held offers; served-you row stays pinned) */
.audit .td-deal { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.sort-btn { font: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0; }
.sort-btn:hover { color: var(--brand); }
.sort-ind { color: var(--text-tertiary); }
.sort-btn[aria-sort="descending"] .sort-ind { color: var(--brand); }
.deal-amt { font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; }
.deal-none { color: var(--text-tertiary); font-size: var(--text-md); }
.audit .tag { margin-right: var(--space-6); }
.audit .not-you { color: var(--warning); font-weight: var(--weight-medium); }
.audit .is-you { color: var(--success-dark); font-weight: var(--weight-semibold); white-space: nowrap; }
.audit tr.served-you td { background: color-mix(in srgb, var(--success) 6%, transparent); }
.audit .td-actions { white-space: nowrap; }
.audit .td-actions .btn { margin-left: var(--space-6); }
.offer-tell { display: none; font-size: var(--text-md); color: var(--text-tertiary); }

/* resolved rows: hide buttons, show the tell, dim */
.audit tr[data-resolved] td { color: var(--text-tertiary); }
.audit tr[data-resolved] .td-actions .btn { display: none; }
.audit tr[data-resolved] .offer-tell { display: inline; }
.audit tr[data-resolved="consider"] { background: color-mix(in srgb, var(--success) 6%, transparent); }
.audit tr[data-resolved="dismiss"] .oname { text-decoration: line-through; }

.audit-foot { font-size: var(--text-base); margin: 0; line-height: var(--leading-normal); }
.audit-foot strong { color: var(--warning); }

.offers-dnote { max-width: 880px; width: calc(100% - var(--space-48)); }

@media (max-width: 720px) {
  .alleg-stats { grid-template-columns: 1fr; }
  /* the 6-column audit becomes one labeled card per offer */
  .audit thead { display: none; }
  .audit, .audit tbody, .audit tr, .audit td { display: block; width: 100%; }
  .audit tr { padding: var(--space-12); margin-bottom: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
  .audit td { padding: var(--space-4) 0; }
  .audit .td-primary { font-size: var(--text-lg); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-light); }
  .audit td:nth-of-type(n+2)::before {
    display: block; margin-bottom: var(--space-2);
    color: var(--text-tertiary); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-caps);
  }
  .audit td:nth-of-type(2)::before { content: "Served"; }
  .audit td:nth-of-type(3)::before { content: "Deal"; }
  .audit td:nth-of-type(4)::before { content: "Why held"; }
  .audit td:nth-of-type(5)::before { content: "When"; }
  .audit td:nth-of-type(6)::before { content: "Your move"; }
}

/* ════════════════════════ Origin ladder (origin.html) ════════════════════════ */
.ladder-canvas {
  flex: 1;
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: var(--space-40) var(--space-24) var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-24);
}
.ladder { list-style: none; margin: 0; padding: 0; }

/* each rung — vertical: the HERO verdict (the takeaway) → evidence → caption */
.rung {
  display: flex; flex-direction: column; gap: var(--space-14);
  padding: var(--space-20); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* the hero verdict — the largest, boldest element; escalates rung 1 → 3 */
.rung-hero { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0; }
.hero-1 { font-size: var(--text-4xl); color: var(--text-primary); }
.hero-2 { font-size: var(--text-4xl); color: var(--warning); }
.hero-3 { font-size: var(--text-5xl); color: var(--danger); }
.rung-ctx { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); font-weight: var(--weight-semibold); }
.rung-tag { align-self: flex-start; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-sm); font-weight: var(--weight-bold); padding: var(--space-4) var(--space-10); }
/* these category chips are meant to be loud — override the DS's quiet dark-mode tag fill with a visible tint + outline */
.rung-tag.tag-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 50%, transparent); color: var(--warning); }
.rung-tag.tag-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); }
.rung-cap { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
.rung-cap strong { color: var(--text-primary); }

/* screenshot frame + placeholder fallback */
.rung-media { margin: 0; }
.shot { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-inset); }
.shot img { display: block; width: 100%; max-height: min(620px, 64vh); object-fit: contain; background: var(--surface-inset); }
.shot-ph {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: 120px; padding: var(--space-16);
  border: 1px dashed var(--border-dashed); border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--text-tertiary); text-align: center;
}
.shot-ph code { font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--text-md); }
.shot-ph span { font-size: var(--text-md); }

/* transcript (rung 2) — plain styled text */
.transcript { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-12) var(--space-14); display: flex; flex-direction: column; gap: var(--space-6); }
.tr-meta { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.tr-line { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
.tr-line strong { color: var(--text-primary); }
.tr-who { display: inline-block; min-width: 44px; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-tertiary); margin-right: var(--space-8); }
.tr-agent { color: var(--brand); }
.tr-you em { color: var(--text-tertiary); }

/* agent teaser (rung 3) */
.agent-teaser { display: flex; flex-direction: column; gap: var(--space-6); background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-12) var(--space-14); }
.at-who { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--brand); }
.at-say { font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-normal); }
.at-tell { font-size: var(--text-base); color: var(--text-secondary); }
.at-tell em { color: var(--text-primary); font-style: italic; }

/* synthesis frame (rung 4) — the big headline appears ONCE, here */
.rung-synthesis { gap: var(--space-12); justify-content: center; }
.synth-line { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0; color: var(--text-primary); }
.synth-sub { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; max-width: 60ch; }
.synth-sub strong { color: var(--text-primary); }

@media (max-width: 720px) {
  /* longer headers on small screens: scale down, color still carries the escalation */
  .rung-hero { font-size: var(--text-3xl); }
  .hero-3 { font-size: var(--text-2xl); }   /* the longest line — keep it from overflowing */
  .synth-line { font-size: var(--text-4xl); }
}

/* ════════════════════════ Three-beat deck / sequencer ════════════════════════ */
.deck { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--surface-page); }

.deck-bar {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-8) var(--space-20);
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.deck-brand { display: inline-flex; align-items: center; gap: var(--space-6); font-weight: var(--weight-semibold); font-size: var(--text-md); }
/* inverted badge (Tiny Wire): badge bg = text-primary, icon = surface, so it flips with the theme */
.brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--surface); flex: none; }
.brand-badge svg { width: 14px; height: 14px; }
.brand-name { line-height: 1; }

.deck-progress { display: flex; gap: var(--space-4); margin: 0 auto; }
.deck-dot {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-10); border: 0; background: transparent;
  border-radius: var(--radius-full); cursor: pointer; color: var(--text-tertiary); font: inherit;
}
.deck-dot .dd-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--surface-muted); border: 1px solid var(--border);
  font-size: var(--text-md); font-weight: var(--weight-semibold);
}
.deck-dot .dd-l { font-size: var(--text-md); }
.deck-dot.is-current { color: var(--text-primary); }
.deck-dot.is-current .dd-n { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

.deck-actions { display: flex; align-items: center; gap: var(--space-8); }
/* theme toggle — Phosphor sun/moon, swapped by [data-theme] (no emoji glyphs) */
#themeToggle svg, #ghLink svg { width: 18px; height: 18px; display: block; }
html[data-theme="dark"] #themeToggle .ti-sun { display: none; }
html[data-theme="light"] #themeToggle .ti-moon { display: none; }
.deck-hint { font-size: var(--text-md); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--space-4); }
.deck-hint .kbd { margin: 0 1px; }

/* beats — one visible at a time */
.beat { display: none; flex: 1; overflow: auto; }
.beat.is-active { display: flex; flex-direction: column; }
.beat > main, .beat > .builder { flex: 1 1 auto; }
@media (prefers-reduced-motion: no-preference) {
  .beat.is-active { animation: beatIn var(--duration-base) var(--ease-out) both; }
  @keyframes beatIn { from { opacity: 0; } to { opacity: 1; } }
}

/* beat 2 shell */
.builder { display: flex; flex-direction: column; min-height: 100%; }

/* button styled as inline link (keeps demo click-driven without <a> reloads) */
.as-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Designer's-cut notes: revealed by the global toggle, only the active beat's shows */
.dnote { display: none; }
body.notes-on .dnote { display: block; }

/* ════════════════════════ Beat 3 — close ════════════════════════ */
.beat-close.is-active { justify-content: safe center; }   /* center when it fits, fall back to top+scroll when tall (never clip) */
.close-canvas {
  max-width: 820px; margin: 0 auto; padding: var(--space-32) var(--space-24) var(--space-40);
  display: flex; flex-direction: column; gap: var(--space-20);
}
.close-line {
  font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0;
}
.close-body { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; max-width: 64ch; }
.close-body strong { color: var(--text-primary); }
.close-pov { font-size: var(--text-xl); color: var(--text-primary); line-height: var(--leading-normal); margin: 0; }
.close-pov strong { color: var(--success-dark); }
.close-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8);
  margin-top: var(--space-12); padding-top: var(--space-16); border-top: 1px solid var(--border-light);
  font-size: var(--text-base); color: var(--text-tertiary);
}
.close-built strong { color: var(--brand); }
.close-built a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.close-built a:hover { text-decoration-thickness: 2px; }
/* QR to the live demo — the code SVG carries its own white quiet-zone, so it scans on any theme */
.close-cta { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-20); }
.close-by { font-size: var(--text-md); color: var(--text-secondary); }
.close-by strong { color: var(--text-primary); }

@media (max-width: 720px) {
  .deck-hint { display: none; }
  #fsToggle { display: none; }            /* fullscreen is desktop-only on mobile */
  .close-line { font-size: var(--text-2xl); }
}

/* ════════════════ Beat 1 — scenario carousel (one rung at a time) ════════════════ */
.ladder.carousel { min-height: 400px; }
.ladder.carousel .rung { display: none; }
.ladder-canvas[data-rung="1"] .rung[data-rung="1"],
.ladder-canvas[data-rung="2"] .rung[data-rung="2"],
.ladder-canvas[data-rung="3"] .rung[data-rung="3"],
.ladder-canvas[data-rung="4"] .rung[data-rung="4"] { display: flex; }

.rung-dots { display: flex; gap: var(--space-8); justify-content: center; margin-top: var(--space-4); }
.rung-dot {
  width: 11px; height: 11px; padding: 0; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: transparent; cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.rung-dot:hover { border-color: var(--brand); }
.rung-dot.is-current { background: var(--brand); border-color: var(--brand); }

/* ════════════════ Beat 2 — declarative governed surface (the fix) ════════════════ */
.declsurface { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }

/* the declaration — the governing object (hero) */
.decl-contract {
  padding: var(--space-14) var(--space-16) var(--space-8);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: var(--radius-md); position: relative;
}
.decl-tag { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--brand); font-weight: var(--weight-bold); }
.decl-statement { font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-normal); margin: var(--space-6) 0 var(--space-2); }
.decl-rules { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.decl-rule {
  font-size: var(--text-md); color: var(--text-secondary);
  padding: var(--space-4) var(--space-10); border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border);
}
.decl-rule strong { color: var(--text-primary); }

.decision { padding-top: var(--space-8); }
.decision-head { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-10); }

.ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.opt {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-12); align-items: center;
  padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.opt:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.opt-rank { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-tertiary); text-align: center; }
.opt-main { min-width: 0; }
.opt-name { font-weight: var(--weight-semibold); font-size: var(--text-lg); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.meter { font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: 1px; }
.m-on { color: var(--success); }
.m-off { color: var(--text-disabled); }
.opt-prov { font-size: var(--text-md); color: var(--text-tertiary); margin-top: 2px; }
.opt-pick { display: none; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--success-dark); white-space: nowrap; }

/* the human-in-the-loop choice — you select; nothing pre-selected */
.opt.is-selected { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.opt.is-selected .opt-pick { display: inline; }

.opt-divider {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--warning); font-weight: var(--weight-semibold);
  margin: var(--space-6) 0 var(--space-2);
}
.opt-divider::before, .opt-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--warning) 30%, var(--border)); }

.opt.is-demoted { opacity: 0.82; border-style: dashed; background: var(--surface-subtle); }
.opt.is-demoted .opt-name { color: var(--text-secondary); }

/* ════════════════ Deck-bar refinement — quiet, compact chrome ════════════════ */
.deck-bar { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.deck-brand { color: var(--text-tertiary); font-weight: var(--weight-medium); }
.deck-dot .dd-l { font-size: var(--text-sm); }
.deck-dot .dd-n { width: 16px; height: 16px; font-size: var(--text-sm); }
.deck-hint { font-size: var(--text-sm); }

/* toggle + state strip read as one focal unit (layout in "beat 2 bar" below) */
.ts {
  display: inline-flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap;
  padding: var(--space-8) var(--space-14); border-radius: var(--radius-sm);
}
.ts-thesis { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.ts-verdict { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.ts-detail { font-size: var(--text-lg); color: var(--text-secondary); }

/* ════════════ Beat 2 FIXED — declarative decision surface ════════════ */
/* declaration: static state pills vs the live toggle */
/* rank-by: a live control that cycles the criterion and re-ranks */
.decl-cycle { cursor: pointer; font: inherit; font-size: var(--text-md); color: var(--text-secondary); }
.decl-cycle:hover { border-color: var(--brand); }
.decl-cycle strong { color: var(--text-primary); }
.cycle-mark { color: var(--text-tertiary); margin-left: var(--space-4); }
.decl-toggle {
  display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; font: inherit;
  font-size: var(--text-md); color: var(--text-secondary);
}
.decl-toggle strong { color: var(--text-primary); }
.toggle-track { width: 26px; height: 14px; border-radius: var(--radius-full); background: var(--border-strong); position: relative; flex: none; }
.toggle-knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--surface); transition: transform var(--duration-fast) var(--ease-out); }
.decl-toggle[aria-pressed="true"] .toggle-track { background: var(--warning); }
.decl-toggle[aria-pressed="true"] .toggle-knob { transform: translateX(12px); }

/* the bias-on warning + live re-rank (declaration drives it) */
.bias-warn {
  display: none; margin: 0 0 var(--space-12);
  padding: var(--space-10) var(--space-14); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  color: var(--warning); font-size: var(--text-base); line-height: var(--leading-normal);
}
.declsurface[data-bias="on"] .bias-warn { display: block; }
.declsurface[data-bias="on"] .opt-rank { visibility: hidden; }
.declsurface[data-bias="on"] .opt-divider { display: none; }
.declsurface[data-bias="on"] .opt[data-opt="authora"] { order: -1; opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.declsurface[data-bias="on"] .opt[data-opt="authora"] .opt-name::after { content: " · now #1, because it paid"; color: var(--warning); font-weight: var(--weight-semibold); }

/* per-option affordances */
.opt-why { background: none; border: 0; padding: 0 0 0 var(--space-4); font: inherit; font-size: var(--text-md); color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.opt-detail { margin-top: var(--space-6); font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-normal); padding-left: var(--space-10); border-left: 2px solid var(--border); }
.opt-detail[hidden] { display: none; }

/* the deal — surfaced as value, not punished */
.opt-deal { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-8); padding: var(--space-8) var(--space-10); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--info) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 24%, transparent); }
.deal-badge { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-bold); color: var(--info); padding: var(--space-2) var(--space-8); border-radius: var(--radius-full); background: var(--surface); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
.deal-text { font-size: var(--text-md); color: var(--text-secondary); }
.deal-text strong { color: var(--text-primary); }
.deal-dismissed { font-size: var(--text-md); color: var(--text-tertiary); }
.opt-actions { display: flex; gap: var(--space-8); margin-top: var(--space-10); }

/* ════════════════ Beat 2 — two-panel IDE, a framed pattern canvas ════════════════ */
.ide {
  display: flex; flex: 1; min-height: 0;
  margin: 0 var(--space-20) var(--space-20);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface);
}

/* LEFT rail — the agent building your app (the connection) */
.ide-rail {
  width: 248px; flex: none; display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-20) var(--space-16);
  background: var(--surface); border-right: 1px solid var(--border);
}
.rail-head { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-md); color: var(--text-secondary); }
.rail-head strong { color: var(--text-primary); }
.rail-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); flex: none; }

/* AGENT RUN — collapsible build panel (collapsed by default on mobile) */
.rail-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; padding: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.rail-eyebrow { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--brand); font-weight: var(--weight-bold); }
.rail-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; margin: calc(-1 * var(--space-10)) 0; color: var(--text-tertiary); }
.rail-icon svg { width: 18px; height: 18px; }
.rail-toggle:hover .rail-icon { color: var(--text-secondary); }
.rail-body { display: grid; grid-template-rows: 1fr; }
.rail-body-inner { display: flex; flex-direction: column; gap: var(--space-16); min-height: 0; overflow: hidden; }

/* DESKTOP (two-column): steps shown by default; the sidebar icon hides/shows the whole rail */
@media (min-width: 761px) {
  .rail-caret { display: none; }
  .ide-rail { overflow: hidden; }
  .ide-rail[data-collapsed="true"] { width: 52px; padding-left: var(--space-4); padding-right: var(--space-4); align-items: center; }
  .ide-rail[data-collapsed="true"] .rail-eyebrow { display: none; }
  .ide-rail[data-collapsed="true"] .rail-body { display: none; }
  .ide-rail[data-collapsed="true"] .rail-toggle { justify-content: center; }
  .ide-rail[data-collapsed="true"] .rail-icon { margin: 0; }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .ide-rail { transition: width var(--duration-base) var(--ease-out); }
}

.build-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.bstep { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-base); color: var(--text-tertiary); }
.bstep-mark { width: 16px; text-align: center; flex: none; }
.bstep.is-done { color: var(--text-secondary); }
.bstep.is-done .bstep-mark { color: var(--success); }
.bstep.is-pending { color: var(--text-disabled); }
.bstep-note {
  margin-left: auto; flex: none; white-space: nowrap;
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-bold); color: var(--brand);
  padding: var(--space-2) var(--space-8); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
}
/* RIGHT — the decision panel (governed surface scrolls here, rail stays put) */
.ide-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* persistent thesis billboard — sits below the deck bar, above every beat */
.billboard { flex: none; margin: var(--space-12) var(--space-20); }
.billboard .ts { width: 100%; }
/* the Close restates the whole thesis, so the billboard is redundant there — hide it and give the close the room */
#deck[data-beat="3"] .billboard { display: none; }
/* no designer's-cut note on the Close, so hide its toggle there (a control that reveals nothing is confusing) */
#deck[data-beat="3"] #notesToggle { display: none; }

/* the decision content scrolls here; rail + trust-state stay put */
.ide-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-20) var(--space-24); }

/* MOBILE / skinny: rail is a top accordion; the caret hides/shows the steps */
@media (max-width: 760px) {
  .ide { flex-direction: column; }
  .ide-rail { width: auto; border-right: 0; border-bottom: 1px solid var(--border); gap: var(--space-12); }
  .rail-side { display: none; }
  .ide-rail[data-collapsed="true"] .rail-body { grid-template-rows: 0fr; }
  .ide-rail[data-collapsed="false"] .rail-caret svg { transform: rotate(180deg); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .rail-body { transition: grid-template-rows var(--duration-base) var(--ease-out); }
  .rail-caret svg { transition: transform var(--duration-fast) var(--ease-out); }
}

/* ════════ Held — a destination overlay (opened from the queue links, not a beat) ════════ */
.queue-view { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--surface-page); }
.queue-view[hidden] { display: none; }
.qv-bar {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-10) var(--space-20); background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.qv-title { font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-secondary); }
.queue-view { overflow: hidden; }
.queue-view .offers-canvas { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* the declaration's link to the queue */
/* My Queue — a destination link, NOT a rule-pill (no border/bg; sits apart) */
.decl-open {
  margin-left: auto; cursor: pointer; font: inherit; font-size: var(--text-md);
  color: var(--brand); font-weight: var(--weight-semibold);
  background: none; border: none; padding: var(--space-4) var(--space-2); text-decoration: none;
}
.decl-open:hover { text-decoration: underline; }

/* Designer's cut — hidden during the live run; press D to enable (button + annotations), persists for the session */
/* Designer's cut — a visible toggle: labeled button on desktop, icon on mobile (tap to reveal the notes) */
#notesToggle .nt-icon { display: none; }
/* active (notes revealed): brand-tinted so the "on" state is unmistakable */
#notesToggle[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }

/* ════════════════ Mobile optimization pass — segmented nav, big-tap header, swipe hint ════════════════ */
/* base: hidden on desktop, shown on small screens */
.pnav { display: none; }
.swipe-hint { display: none; }

@media (max-width: 720px) {
  /* nav: swap the desktop dots for a segmented progress indicator on its own row */
  .deck-progress, .rung-dots { display: none; }
  .pnav { display: flex; flex: none; gap: var(--space-6); padding: var(--space-8) var(--space-12); background: var(--surface); border-bottom: 1px solid var(--border); }
  .pnav-seg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-4); background: none; border: 0; border-top: 2px solid var(--border); cursor: pointer; font: inherit; }
  .pnav-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-bold); color: var(--text-tertiary); }
  .pnav-seg.is-active { border-top-color: var(--brand); }
  .pnav-seg.is-active .pnav-label { color: var(--brand); }
  .pnav-dots { display: flex; gap: var(--space-8); align-items: center; }
  .pnav-seg:not(.is-active) .pnav-dots { visibility: hidden; }   /* reserve space — no layout jump between sections */
  .pnav-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer; }
  .pnav-seg.is-active .pnav-dot:hover { background: color-mix(in srgb, var(--brand) 50%, var(--border-strong)); }
  .pnav-dot.is-current { background: var(--brand); }

  /* one swipe axis: browser pans vertically, JS owns horizontal (no back-swipe hijack) */
  .deck, .beat { touch-action: pan-y; }

  /* reclaim vertical space: the persistent thesis billboard is desktop-only (the rungs + close carry it on mobile) */
  .billboard { display: none; }
  /* the billboard used to provide the gap below the nav; restore it for the IDE card */
  .ide { margin-top: var(--space-16); }

  /* taller header, 44px tap targets, larger icons */
  .deck-bar { min-height: 56px; padding: var(--space-6) var(--space-12); gap: var(--space-8); }
  .deck-actions { margin-left: auto; }
  .brand-badge { width: 38px; height: 38px; }
  .brand-badge svg { width: 22px; height: 22px; }
  .brand-name { font-size: var(--text-md); }
  #themeToggle, #ghLink { min-width: 44px; min-height: 44px; }
  #themeToggle svg, #ghLink svg { width: 24px; height: 24px; }
  /* Designer's cut collapses to an icon on mobile */
  #notesToggle { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  #notesToggle .nt-label { display: none; }
  #notesToggle .nt-icon { display: block; width: 24px; height: 24px; }

  /* one-time swipe hint, only on the first screen, gone after the first swipe */
  .ladder-canvas[data-rung="1"] .swipe-hint { display: inline-flex; align-self: center; align-items: center; gap: var(--space-6); margin-top: var(--space-8); padding: var(--space-6) var(--space-14); border-radius: var(--radius-full); background: var(--surface-muted); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-secondary); }
  body.swiped .swipe-hint { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .swipe-hint .sh-arrow { animation: shNudge 1.4s var(--ease-out) infinite; }
  @keyframes shNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
}