/* ==========================================================================
   xophersean.com: /shape-transformation/ page styles
   Loaded ONLY on /shape-transformation/ (base.njk page.url conditional).
   Consumes tokens.css + base.css. No new colors; everything derives from
   existing tokens. System-mode overrides follow the mapping established in
   system-mode.css: teal-family (action) -> --sys-signal, gold-family
   (secondary/meta) -> --sys-arcane.

   3A (SHAPE_TRANSFORMATION_3A_TEARDOWN_ACT_ONE.md): the diagnostic band,
   progress dots, question and option styles, the result panel, the lens
   picker, the end CTA and the long-form marginalia grid were removed with
   their markup. The Butler verse and email capture styles are KEPT with
   their markup deleted, because their copy lives in the source doc but
   their CSS lives nowhere else, and 3B rebuilds both in new positions.

   Type scale, accent semantics, rule vocabulary and the asset decision all
   carry forward from the 2026-08-02 visual direction unchanged.

   THE INVERSION: everything below renders the COMPLETED table by default.
   .st-voting is added by JavaScript and is the only thing that hides
   answers and shows vote controls.
   ========================================================================== */

/* ==========================================================================
   Full-bleed utility. Escape the 680px measure: the rules go edge to edge,
   the text does not. The 100vw technique overflows by the scrollbar width,
   which is why base.css carries overflow-x: clip on body.
   Component rules on .sx-fullbleed elements must use margin-top/bottom
   longhands only; a margin shorthand would reset margin-left: -50vw.
   ========================================================================== */
.sx-fullbleed {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}
.sx-fullbleed > .sx-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-page);
}

/* ==========================================================================
   Hero. H1 is one of the two permitted display moments, weight 400 because
   DM Serif Display ships no 700 face and synthetic bold smears at this size.
   The deck is a single line and there is no introductory paragraph: the
   measured failure of the previous build was the payoff sitting 787px down,
   below the fold on a normal laptop.
   ========================================================================== */
/* The hero rides the ledger's container so both share a left edge, and so the
   H1 has room to sit on one line. Measured 2026-08-04: "Shape Transformation"
   at 72px needs 698px; the 680px prose measure leaves only 600px of text
   width after padding, which forced a hyphenated two-line break at every
   desktop size. */
/* Centred on Chris's review 2026-08-04. This overrides the visual direction's
   "asymmetric, the H1 need not be centred" note, deliberately and against the
   rendered page. The deck centres with it: centring the H1 alone while a
   560px-capped deck stayed left-aligned read as a mistake rather than a
   choice. */
.st-hero { margin-top: 0; margin-bottom: var(--space-6); }
.st-hero .sx-inner { text-align: center; }
.st-hero .st-deck { margin-left: auto; margin-right: auto; }
.st-hero h1 {
  font: 400 clamp(38px, 7vw, 72px)/1.05 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  /* Safety net only, for narrow viewports and System mode's wider mono face.
     It should never fire at desktop widths now. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.st-deck {
  font: 400 24px/1.35 var(--font-display);
  color: var(--ink);
  max-width: 560px;
  margin: 0;
}

/* ==========================================================================
   Act One ledger. Mobile first, same DOM at every width. Built from rules at
   three weights: 3px ink brackets the object, 2px underlines the header,
   hairlines separate rows. No axes, gridlines, figures, or row color-coding.
   ========================================================================== */
.tl-wrap { margin-top: var(--space-5); margin-bottom: var(--space-7); }

.tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
/* Sentence case deliberately: the tally string is verbatim copy, so the
   uppercase label transform used elsewhere would rewrite it. */
.tl-tally {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0;
}
/* Three of three takes the semantic accent. gold-ink rather than gold: at
   13px this is normal-size text under WCAG and --accent-gold misses 4.5:1. */
.tl-tally--full { color: var(--accent-gold-ink); }

/* Escape hatch. Low emphasis by construction, never a button-looking control.
   Hidden by default because the completed state has nothing to escape to. */
.tl-escape {
  display: none;
  font: var(--text-body-sm);
  color: var(--ink-faint);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
}
.tl-escape:hover { color: var(--ink); border-bottom-color: var(--ink); }
.tl-escape:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 3px; }

.tl {
  width: 100%;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.tl thead { display: none; }
.tl, .tl tbody, .tl tr, .tl th, .tl td { display: block; }
.tl-row { border-top: 1px solid var(--rule); padding: var(--space-4) 0; }
.tl-row:first-child { border-top: none; padding-top: 0; }
.tl-row:last-child { padding-bottom: 0; }
.tl th[scope="row"] {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 0;
  margin-bottom: var(--space-3);
}
/* Era labels. "now" stays lowercase in the semantic accent against three
   quiet dates: the rupture stated in four characters. */
.tl-era {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.tl-era--now { color: var(--accent-gold-ink); text-transform: none; }

.tl td {
  font: var(--text-body);
  color: var(--ink-muted);
  padding: 0;
  margin-bottom: var(--space-3);
}
.tl td:last-child { margin-bottom: 0; }
.tl td.tl-c3 { color: var(--ink); }
.tl-answer { display: block; }
.tl-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

/* Row four breaks the pattern. "Still open" is the second permitted display
   moment; "You tell me" is a treatment rather than a color swap. Both clamp
   down so the mobile stacked layout cannot overflow. */
/* CHANGED 2026-08-04 on Chris's review: was clamp(38px, 8vw, 72px). At 72px
   inside a table of 17px cells it read as a rendering fault rather than as
   emphasis. 40px is the section-opener step already in the locked ladder, so
   this introduces no new size, stays clearly the largest thing in the ledger,
   and still breaks the pattern. Consequence, flagged: the H1 is now the most
   prominent element on the page, which inverts the visual direction's own
   test 2. That trade was made deliberately against the rendered page. */
.tl-row--open .tl-c3 strong {
  display: block;
  font: 400 clamp(30px, 4vw, 40px)/1.1 var(--font-display);
  color: var(--accent-gold);
  margin-bottom: var(--space-2);
}
.tl-row--open .tl-you {
  font: italic 400 24px/1.3 var(--font-display);
  color: var(--accent-gold);
}
.tl-open-note {
  display: block;
  margin-top: var(--space-3);
  font: var(--text-body);
  color: var(--ink-muted);
}
/* Vote feedback, both quiet by design. No correct or incorrect styling
   anywhere: no red, no green, no checkmarks. The page's credibility depends
   on the reader not feeling handled. */
.tl-note,
.tl-your-answer {
  display: block;
  margin-top: var(--space-3);
  font: var(--text-body-sm);
  color: var(--ink-faint);
}
.tl-your-answer { font-style: italic; }
.tl-note[hidden], .tl-your-answer[hidden] { display: none; }

/* Desktop: true table. Labels visually hidden, markup unchanged. */
@media (min-width: 641px) {
  .tl { display: table; border-collapse: collapse; }
  .tl thead { display: table-header-group; }
  .tl tbody { display: table-row-group; }
  .tl tr { display: table-row; }
  .tl th, .tl td { display: table-cell; }
  .tl-row { border-top: none; padding: 0; }
  .tl th[scope="col"] {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: left;
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 2px solid var(--rule-strong);
  }
  .tl th[scope="row"], .tl td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    margin-bottom: 0;
  }
  .tl th:last-child, .tl td:last-child { padding-right: 0; }
  .tl tr:last-child th[scope="row"], .tl tr:last-child td { border-bottom: none; }
  .tl-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ==========================================================================
   Vote mechanics. Everything above renders the completed ledger; the rules
   below only take effect once JS has added .st-voting.

   Answers use display: none pre-vote rather than a visually-hidden technique.
   That is deliberate: a screen reader user should not hear the answer before
   casting a vote, because that would spoil the interaction for them and
   break parity with sighted readers. The content is in the HTML source and
   is never injected, which is what the accessibility requirement is for.
   ========================================================================== */
.tl-vote { display: none; }
.st-voting .tl-vote { display: block; }
.st-voting .tl-escape { display: inline-block; }

.st-voting .tl-row:not(.tl-row--answered) .tl-answer,
.st-voting .tl-row:not(.tl-row--answered) .tl-label { display: none; }
.st-voting .tl-row--answered .tl-vote { display: none; }

/* Transitions cannot run across a display change, so the reveal is an
   animation. Killed wholesale under reduced motion below. */
.st-voting .tl-row--answered .tl-answer { animation: tl-reveal .3s ease both; }
@keyframes tl-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.tl-vote {
  border: none;
  margin: 0;
  padding: 0;
}
.tl-vote-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.tl-vote-opt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font: var(--text-body);
  color: var(--ink);
  cursor: pointer;
  padding: 7px 0;
}
.tl-vote-opt input {
  accent-color: var(--accent-teal);
  margin: 0;
  flex-shrink: 0;
}
.tl-vote-opt:hover { color: var(--ink); }
.tl-vote-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
}
/* The revealed answer takes focus after a vote; keep the ring off mouse users. */
.tl-answer:focus { outline: none; }
.tl-answer:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 3px; }

/* ==========================================================================
   Bridge into Act Two. Present in the completed and no-JS renders; held back
   in the voting state until row four resolves.
   ========================================================================== */
.st-bridge { margin-top: var(--space-6); }
.st-voting .st-bridge { display: none; }
.st-voting .st-bridge.st-bridge--in {
  display: block;
  animation: tl-reveal .3s ease both;
}

/* ==========================================================================
   Acts Two and Three (3B). Section openers at 40px, the ladder step already
   in the locked scale. Same inversion throughout: everything renders open by
   CSS default and .st-staged is the only thing that closes it.
   ========================================================================== */
.st-act { margin-top: var(--space-8); }
.st-act > h2 {
  font: 400 40px/1.15 var(--font-display);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  border-top: none;
  padding-top: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
.st-act-line {
  font: 400 24px/1.35 var(--font-display);
  color: var(--ink-muted);
  margin: 0 0 var(--space-7);
}

/* ---- The four decisions ---- */
.sx-decision {
  border: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--rule);
}
.sx-decision legend {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0;
  margin-bottom: var(--space-4);
}
/* Options read as buttons rather than as a bulleted list (Chris's review
   2026-08-04), but they stay real radio inputs so the group semantics, the
   visible legend and keyboard behaviour the spec requires are all preserved.
   The input is moved off-screen rather than display:none so it keeps its
   place in the tab order; the label carries the focus ring on its behalf.
   Square and ruled, never pills. */
.sx-opt {
  display: block;
  position: relative;
  font: var(--text-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 13px 17px;
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sx-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sx-opt:hover { border-color: var(--ink); background: var(--surface-raised); }
.sx-opt:has(input:focus-visible) { outline: 2px solid var(--accent-teal); outline-offset: 2px; }
/* No option is styled wrong and none is styled right. Selection is marked by
   the semantic accent, never by approval: no ticks, no colour coding. */
.sx-opt--on {
  border-color: var(--accent-gold-ink);
  box-shadow: inset 0 0 0 1px var(--accent-gold-ink);
  color: var(--accent-gold-ink);
  font-weight: 600;
  background: transparent;
}
.sx-opt--on:hover { background: transparent; border-color: var(--accent-gold-ink); }

.sx-consequence {
  font: var(--text-body);
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--rule);
}

/* ---- The terms sheet ---- */
.sx-terms {
  margin-top: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.sx-terms[hidden] { display: none; }
.sx-terms-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-3);
}
.sx-terms-body {
  font: 400 clamp(24px, 3.2vw, 32px)/1.35 var(--font-display);
  color: var(--accent-gold-ink);
  margin: 0 0 var(--space-4);
}
.sx-terms-close {
  font: var(--text-body);
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Act Three: the ladder ---- */
.sx-ladder { border-top: 1px solid var(--rule); }
.sx-rung { border-bottom: 1px solid var(--rule); }
.sx-rung-toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--space-4) 0;
  cursor: pointer;
  font: var(--text-body);
  color: var(--ink);
}
.sx-rung-toggle:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 2px; }
.sx-rung-n {
  font: 400 24px/1 var(--font-display);
  color: var(--ink-faint);
  flex-shrink: 0;
  min-width: 1.2em;
}
.sx-rung-title { font-weight: 600; flex: 1; }
.sx-rung-flag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-gold-ink);
  flex-shrink: 0;
}
.sx-rung-body { padding: 0 0 var(--space-5); }
.sx-rung-body p {
  font: var(--text-body);
  color: var(--ink-muted);
  margin: 0;
  padding-left: calc(1.2em + var(--space-4));
}

/* ---- Evidence and close ---- */
.sx-evidence {
  margin-top: var(--space-7);
  padding-left: var(--space-5);
  border-left: 2px solid var(--rule);
}
.sx-evidence p { font: var(--text-body); color: var(--ink-muted); margin: 0 0 var(--space-3); }
.sx-evidence p:last-child { margin-bottom: 0; }
.st-close {
  font: 400 24px/1.45 var(--font-display);
  color: var(--ink);
  margin: var(--space-7) 0 0;
}
/* base.css sets .page em to 13px mono site-wide, which shrank "shape" to a
   speck inside this 24px line (Chris's review 2026-08-04). Butler's own verb
   is the point of the sentence, so it emphasises in place instead: same face,
   same size, italic. */
.st-close em {
  font-family: inherit;
  font-size: inherit;
  font-style: italic;
  color: inherit;
}

/* ==========================================================================
   Staging for Acts Two and Three. .st-staged is added by JavaScript and is
   the only thing that closes any of this. Without it every guidance block
   and every rung body renders open, which is the no-JS floor.
   ========================================================================== */
.st-staged .sx-consequence { display: none; }
.st-staged .sx-consequence--on { display: block; animation: tl-reveal .3s ease both; }
.st-staged .sx-rung-toggle[aria-expanded="false"] + .sx-rung-body { display: none; }
/* Capture is present by default so no-JS degrades to a plain form post; JS
   holds it back until the terms sheet exists. */
.st-staged #sxCapture { display: none; }
.st-staged #sxCapture.sx-ready { display: block; animation: tl-reveal .3s ease both; }

/* ==========================================================================
   Email capture. The submit button stays teal: it is functional, not one of
   the semantic-accent uses. The end CTA below takes the accent instead.
   ========================================================================== */
.aic-email-capture {
  margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
}
.aic-email-pitch { font: var(--text-body); color: var(--ink); }
#aicEmailForm {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  margin: var(--space-4) 0 var(--space-2);
}
.aic-input {
  flex: 1;
  min-width: 0;
  font: var(--text-body);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.aic-input::placeholder { color: var(--ink-faint); }
.aic-input:focus {
  outline: none;
  border-color: var(--accent-teal);
  box-shadow: inset 0 0 0 1px var(--accent-teal);
}
.aic-email-note {
  font: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0;
}
.aic-email-thanks { margin: var(--space-3) 0 0; }
.aic-email-thanks p { font: var(--text-body); margin: 0 0 var(--space-2); }
.aic-email-thanks p:first-child { font-weight: 600; color: var(--accent-teal); }
.aic-email-thanks p:last-child { color: var(--ink-muted); margin-bottom: 0; }
.aic-email-error {
  font: var(--text-body);
  font-weight: 600;
  color: var(--accent-gold-ink);
  margin: var(--space-3) 0 0;
}

/* ==========================================================================
   Butler verse. Markup removed in 3A, CSS kept for the same reason as the
   email capture. 3B places it in Act Three. Carries the single permitted
   structural use of the Earthseed mark: large, low contrast, compositional
   rather than a logo. One instance only.
   ========================================================================== */
.sx-butler-wrap { position: relative; margin: var(--space-7) 0; }
.sx-butler-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -3rem;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  background: url("/img/earthseed-mark.svg") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.st-butler {
  position: relative;
  margin: 0;
  padding: var(--space-6) 0 var(--space-6) var(--space-5);
  border-left: 3px solid var(--ink);
}
.st-butler p {
  font: italic 400 24px/1.6 var(--font-display);
  color: var(--ink);
  margin: 0;
}
.st-butler cite {
  display: block;
  margin-top: var(--space-4);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink-faint);
}
/* Same base.css .page em leak as .st-close: the book title was rendering in
   13px mono inside the attribution line. A cited title wants italic, in the
   surrounding face and size. */
.st-butler cite em {
  font-family: inherit;
  font-size: inherit;
  font-style: italic;
  color: inherit;
}

/* ==========================================================================
   Footnotes: the apparatus of something researched. On this page they are a
   credibility signal, so they are not hidden.
   ========================================================================== */
.sx-footnotes { margin-top: var(--space-7); }
.sx-footnotes h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-3);
  border-top: none;
  padding-top: 0;
}
.ai-check-page sup { font-size: 11px; line-height: 0; }
.ai-check-page sup a { color: var(--accent-gold-ink); text-decoration: none; }
.ai-check-page sup a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ai-check-page .aic-footnotes li {
  font: var(--text-body-sm);
  color: var(--ink-faint);
}

/* ==========================================================================
   System mode. Same selector form and token mapping as system-mode.css:
   functional teal-family stays --sys-signal, semantic gold-family goes
   --sys-arcane.
   ========================================================================== */
:root[data-mode="system"] .st-deck {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink);
}

:root[data-mode="system"] .tl { border-top-color: var(--sys-ink); border-bottom-color: var(--sys-ink); }
:root[data-mode="system"] .tl-row { border-top-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .tl th[scope="row"] {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
}
:root[data-mode="system"] .tl td {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-muted);
}
:root[data-mode="system"] .tl td.tl-c3 { color: var(--sys-ink); }
:root[data-mode="system"] .tl-label { color: var(--sys-ink-faint); }
:root[data-mode="system"] .tl-era { color: var(--sys-ink-faint); }
:root[data-mode="system"] .tl-era--now { color: var(--sys-arcane); }
:root[data-mode="system"] .tl-row--open .tl-c3 strong {
  font-family: var(--sys-font-mono);
  color: var(--sys-arcane);
}
:root[data-mode="system"] .tl-row--open .tl-you {
  font-family: var(--sys-font-mono);
  color: var(--sys-arcane);
}
:root[data-mode="system"] .tl-open-note {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-muted);
}
:root[data-mode="system"] .tl-note,
:root[data-mode="system"] .tl-your-answer {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-faint);
}

:root[data-mode="system"] .tl-tally {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink-faint);
}
:root[data-mode="system"] .tl-tally--full { color: var(--sys-arcane); }
:root[data-mode="system"] .tl-escape {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-faint);
  border-bottom-color: var(--sys-ink-hairline-strong);
}
:root[data-mode="system"] .tl-escape:hover { color: var(--sys-ink); border-bottom-color: var(--sys-ink); }
:root[data-mode="system"] .tl-escape:focus-visible { outline-color: var(--sys-signal); }

:root[data-mode="system"] .tl-vote-opt {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
}
:root[data-mode="system"] .tl-vote-opt input { accent-color: var(--sys-signal); }
:root[data-mode="system"] .tl-vote-opt:has(input:focus-visible) { outline-color: var(--sys-signal); }
:root[data-mode="system"] .tl-answer:focus-visible { outline-color: var(--sys-signal); }

:root[data-mode="system"] .st-bridge p {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-muted);
}

@media (min-width: 641px) {
  :root[data-mode="system"] .tl th[scope="col"] {
    color: var(--sys-ink-faint);
    border-bottom-color: var(--sys-ink-hairline-strong);
  }
  :root[data-mode="system"] .tl th[scope="row"],
  :root[data-mode="system"] .tl td { border-bottom-color: var(--sys-ink-hairline); }
}

:root[data-mode="system"] .ai-check-page sup a { color: var(--sys-arcane-dim); }
:root[data-mode="system"] .ai-check-page .aic-footnotes li { color: var(--sys-ink-faint); }
:root[data-mode="system"] .sx-footnotes h2 { color: var(--sys-ink-faint); }

:root[data-mode="system"] .aic-email-capture { border-top-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .aic-email-pitch { color: var(--sys-ink); }
:root[data-mode="system"] .aic-input {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
  background: var(--sys-paper);
  border-color: var(--sys-ink-hairline);
}
:root[data-mode="system"] .aic-input::placeholder { color: var(--sys-ink-faint); }
:root[data-mode="system"] .aic-input:focus {
  border-color: var(--sys-signal);
  box-shadow: inset 0 0 0 1px var(--sys-signal);
}
:root[data-mode="system"] .aic-email-note {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink-faint);
}
:root[data-mode="system"] .aic-email-thanks p:first-child { color: var(--sys-signal); }
:root[data-mode="system"] .aic-email-thanks p:last-child { color: var(--sys-ink-muted); }
:root[data-mode="system"] .aic-email-error { color: var(--sys-arcane-dim); }

/* ---- Acts Two and Three, System mode ---- */
:root[data-mode="system"] .st-act > h2 {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink);
}
:root[data-mode="system"] .st-act-line,
:root[data-mode="system"] .sx-consequence,
:root[data-mode="system"] .sx-terms-close,
:root[data-mode="system"] .sx-rung-body p,
:root[data-mode="system"] .sx-evidence p {
  font-family: var(--sys-font-body);
  color: var(--sys-ink-muted);
}
:root[data-mode="system"] .sx-decision { border-top-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .sx-decision legend { color: var(--sys-ink-faint); }
:root[data-mode="system"] .sx-opt {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
}
:root[data-mode="system"] .sx-opt input { accent-color: var(--sys-signal); }
:root[data-mode="system"] .sx-opt:has(input:focus-visible) { outline-color: var(--sys-signal); }
:root[data-mode="system"] .sx-opt--on { color: var(--sys-arcane); }
:root[data-mode="system"] .sx-consequence { border-left-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .sx-terms {
  border-top-color: var(--sys-ink);
  border-bottom-color: var(--sys-ink);
}
:root[data-mode="system"] .sx-terms-label { color: var(--sys-ink-faint); }
:root[data-mode="system"] .sx-terms-body {
  font-family: var(--sys-font-mono);
  color: var(--sys-arcane);
}
:root[data-mode="system"] .sx-ladder,
:root[data-mode="system"] .sx-rung { border-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .sx-rung-toggle {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
}
:root[data-mode="system"] .sx-rung-toggle:focus-visible { outline-color: var(--sys-signal); }
:root[data-mode="system"] .sx-rung-n {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink-faint);
}
:root[data-mode="system"] .sx-rung-flag { color: var(--sys-arcane); }
:root[data-mode="system"] .sx-evidence { border-left-color: var(--sys-ink-hairline); }
:root[data-mode="system"] .st-close {
  font-family: var(--sys-font-mono);
  color: var(--sys-ink);
}

:root[data-mode="system"] .st-butler { border-left-color: var(--sys-ink); }
:root[data-mode="system"] .st-butler p {
  font-family: var(--sys-font-body);
  color: var(--sys-ink);
}
:root[data-mode="system"] .st-butler cite { color: var(--sys-ink-faint); }

/* ---- Mobile (existing 640px convention) ---- */
@media (max-width: 640px) {
  #aicEmailForm { flex-direction: column; }
  .sx-butler-wrap::before { right: 0; width: 240px; height: 240px; opacity: 0.06; }
  .tl-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .st-voting .tl-row--answered .tl-answer,
  .st-voting .st-bridge.st-bridge--in { animation: none; }
}

/* ==========================================================================
   3B-R2 additions (2026-08-19): act frames, thesis line, ledger why-disclosures,
   ladder key/value rows. Existing tokens only, square corners, rules not boxes.
   ========================================================================== */

/* Act frames. Prose measure, not the ledger's width: the frames are read, the
   ledger is scanned, and mixing the two measures is what made the old top of
   the page read as misaligned. */
.st-frame {
  max-width: var(--content-width);
  margin: 0 auto var(--space-6);
  padding: 0 var(--padding-page);
}
.st-frame p { margin-top: var(--space-3); }
.st-frame p:first-child { margin-top: 0; }

/* Thesis line above the four decisions. */
.st-thesis {
  max-width: var(--content-width);
  margin: var(--space-6) auto var(--space-5);
  padding: 0 var(--padding-page);
  font: var(--text-display-sm);
  color: var(--ink);
}

.sx-decisions-note {
  max-width: var(--content-width);
  margin: var(--space-6) auto 0;
  padding: 0 var(--padding-page);
  color: var(--ink-faint);
  font: var(--text-body-sm);
}

/* Ledger why-disclosures. Same mechanism as the Act Three rungs: open by CSS
   default so a no-JS reader gets all four, collapsed only once JS is live. */
.tl-why { margin-top: var(--space-3); }
.tl-why-toggle {
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 2px;
  cursor: pointer;
}
.tl-why-toggle:hover { color: var(--ink); }
.tl-why-toggle[aria-expanded="false"] + .tl-why-body { display: none; }
.tl-why-body p {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font: var(--text-body-sm);
}
.tl-why-still-open {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-faint);
  font: var(--text-body-sm);
}

/* Ladder rows carry three labelled values after v3 rebuilt the ladder on
   own/build/where axes rather than a single control axis. */
.sx-rung-k {
  display: block;
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-1);
}
.sx-rung-body p + p { margin-top: var(--space-4); }

/* Fold recovery (3B-R2 section 3b), 2026-08-19.
   R2 projected the Act One frame would land the first radio near 700px against
   a 720px fold. Measured at 844px instead. The gap is the 2026-08-02 body type
   change from 15px to 17px, which shipped 2026-08-19 and makes every frame
   taller than R2's estimate assumed. R2 is explicit that the frame does not get
   cut for fold reasons, so this takes spacing in the order R2 specifies.
   SCOPED to .ai-check-page deliberately: .page padding-top is shared with
   /about/, /services/ and every /writing/ post, and this is not their problem. */
.ai-check-page.page { padding-top: var(--space-5); }
.ai-check-page .st-hero { margin-bottom: var(--space-4); }
.ai-check-page .tl-wrap { margin-top: 0; }
.ai-check-page .st-frame { margin-bottom: var(--space-5); }