/* Topic pages — extra exhibit/prose on top of v9 chrome. Tokens from themes.css. */
/* Topic + compare pages. H1 keeps the tube prompt and cursor.
   Everything else in the hero is prose, on the same content rail as the H1
   text — same construction as .section-head h2 + .lead. */
body[data-page="topic"] h1,
body[data-page="topic"] h2,
body[data-page="topic"] h3{
  text-transform:none;
}
html[data-theme="terminal"] body[data-page="topic"] h2,
html[data-theme="terminal"] body[data-page="topic"] h3{
  font-family:var(--prose, "Space Grotesk", system-ui);
  font-weight:650;
  color:var(--ink);
  text-shadow:none;
  letter-spacing:-.02em;
}
html[data-theme="terminal"] body[data-page="topic"] h2::before,
html[data-theme="terminal"] body[data-page="topic"] h3::before{
  content:none !important;
}

/* Hang `>` in the prompt rail. Pad the copy so H1 text, hero-sub, command,
   note and CTA share one left edge — beating hero-v2's h1-only padding. */
html[data-theme="terminal"] body[data-page="topic"] .hero .hero-copy{
  --t-pw:var(--rail-indent, 32px);
  --t-pgap:calc(var(--t-pw) * .25);
  padding-left:var(--t-pw);
}
html[data-theme="terminal"] body[data-page="topic"] .hero .hero-copy .kicker{
  margin-left:calc(-1 * var(--t-pw));
}
html[data-theme="terminal"] body[data-page="topic"] .hero .hero-copy h1{
  position:relative;
  box-sizing:content-box;
  padding-left:0;
}
html[data-theme="terminal"] body[data-page="topic"] .hero .hero-copy h1::before{
  content:">";
  position:absolute;
  top:0;
  right:100%;
  left:auto;
  margin-right:var(--t-pgap);
  color:rgba(43,255,111,.62);
  text-shadow:none;
  pointer-events:none;
}

body[data-page="topic"] .hero-copy h1{
  max-width:22ch;
  text-wrap:balance;
  font-size:clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.028em;
}
body[data-page="topic"] .hero-copy .hero-sub,
body[data-page="topic"] .hero-copy .hero-note{
  display:block;
  font-family:var(--prose, "Space Grotesk", system-ui);
  font-size:clamp(1.2rem, 1rem + .6vw, 1.38rem);
  line-height:1.6;
  letter-spacing:normal;
  text-transform:none;
  text-shadow:none;
  color:var(--ink);
  max-width:var(--measure-body, 62ch);
}
body[data-page="topic"] .hero-copy .hero-sub{
  margin:1.35rem 0 0;
}
body[data-page="topic"] .hero-copy .hero-sub + .hero-sub,
body[data-page="topic"] .hero-note{
  margin:.9rem 0 0;
}

/* CRT (prompt, cursor, glow, plex) stays on H1 only.
   --sans is Plex Mono on the tube, so paragraphs must not use it. */
html[data-theme="terminal"] body[data-page="topic"] .hero-copy{
  text-align:left;
}
html[data-theme="terminal"] body[data-page="topic"] .hero-copy > *{
  margin-inline:0;
}
html[data-theme="terminal"] body[data-page="topic"] .hero-sub,
html[data-theme="terminal"] body[data-page="topic"] .hero-note,
html[data-theme="terminal"] body[data-page="topic"] .lead,
html[data-theme="terminal"] body[data-page="topic"] .topic-prose p,
html[data-theme="terminal"] body[data-page="topic"] .topic-prose li,
html[data-theme="terminal"] body[data-page="topic"] .cr-say,
html[data-theme="terminal"] body[data-page="topic"] .cr-cap{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:400;
  text-transform:none;
  text-shadow:none;
  letter-spacing:normal;
  color:var(--ink);
}
html[data-theme="terminal"] body[data-page="topic"] .hero-sub::before,
html[data-theme="terminal"] body[data-page="topic"] .hero-sub::after,
html[data-theme="terminal"] body[data-page="topic"] .hero-note::before,
html[data-theme="terminal"] body[data-page="topic"] .hero-note::after,
html[data-theme="terminal"] body[data-page="topic"] .lead::before,
html[data-theme="terminal"] body[data-page="topic"] .lead::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
body[data-page="topic"] .topic-cmd{
  margin:1.15rem 0 0;
  max-width:54ch;
  padding:.85rem 1rem;
  background:var(--card);
  border:1px solid var(--hair);
  overflow:auto;
  font-size:.9rem;
  line-height:1.45;
  color:var(--signal);
}
body[data-page="topic"] .topic-cmd code{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  font-size:inherit;
  white-space:pre;
}
body[data-page="topic"] .hero-copy .hero-sub strong{color:var(--ink);}
body[data-page="topic"] .hero-copy .hero-sub code,
body[data-page="topic"] .topic-prose code,
body[data-page="topic"] .mcdc-readout code,
body[data-page="topic"] .mcdc-why code,
body[data-page="topic"] .mcdc-viz code,
body[data-page="topic"] .mcdc-sheet code{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.86em;
  color:var(--signal);
  background:var(--card);
  border:1px solid var(--hair);
  padding:.08em .38em;
  white-space:nowrap;
}
body[data-page="topic"] .hero-copy .topic-cta{margin-top:1.5rem;}
body[data-page="topic"] .topic-prose p,
body[data-page="topic"] .topic-prose li{
  max-width:62ch;
  color:var(--ink-60);
}
body[data-page="topic"] .topic-prose p + p{margin-top:.85em;}
body[data-page="topic"] .topic-prose strong{color:var(--ink);}

body[data-page="topic"] .topic-prose pre{
  max-width:72ch;
  margin:1.1rem 0 0;
  padding:1rem 1.1rem;
  background:var(--card);
  border:1px solid var(--hair);
  overflow:auto;
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink);
}
body[data-page="topic"] .topic-list{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  max-width:62ch;
}
body[data-page="topic"] .topic-list li{
  padding:.7em 0;
  border-top:1px solid var(--hair);
}
body[data-page="topic"] .topic-list time{
  display:block;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.25rem;
}
body[data-page="topic"] .topic-list b{color:var(--ink);display:block;margin-bottom:.15em;}

/* ----- MC/DC instrument ----- */
.mcdc{
  margin-top:1.6rem;
  border:1px solid var(--hair);
  background:var(--card);
}
.mcdc-static{padding:1.15rem 1.2rem 1rem;}
.mcdc-fn{
  display:block;
  margin:0 0 .85rem;
  padding:1rem 1.1rem;
  background:rgba(5,8,7,.55);
  border:1px solid var(--hair);
  overflow:auto;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink);
}
.mcdc-fn .com,
.mcdc-src .com{color:var(--muted);}
.mcdc-why{
  margin:0 0 .7rem;
  max-width:62ch;
  color:var(--ink-60);
  font-size:.98rem;
  line-height:1.55;
}
.mcdc-cli{
  margin:0;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:1rem;
}
.mcdc-cli code{
  display:inline-block;
  padding:.45em .7em;
  border:1px solid var(--hair-strong);
  background:rgba(43,255,111,.06);
  color:var(--signal);
  white-space:nowrap;
}
.mcdc-bar{
  display:flex;
  gap:0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.mcdc-bar button{
  flex:1;
  appearance:none;
  background:transparent;
  border:0;
  border-right:1px solid var(--hair);
  color:var(--muted);
  font:inherit;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.64rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.85rem .35rem;
  cursor:pointer;
}
.mcdc-bar button:last-child{border-right:0;}
.mcdc-bar button[aria-pressed="true"]{
  color:var(--signal);
  background:rgba(43,255,111,.08);
  box-shadow:inset 0 -2px 0 var(--pass);
}
.mcdc-pane{padding:1.15rem 1.2rem 1.3rem;}
.mcdc-pane[hidden]{display:none !important;}
.mcdc-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:0 0 1rem;
}
.mcdc-track span{
  padding:.45rem .3rem;
  text-align:center;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--hair);
  background:transparent;
}
.mcdc-track span.on{
  color:var(--pass);
  border-color:var(--pass);
  background:rgba(43,255,111,.08);
}
.mcdc-track span.miss{
  color:var(--fail);
  border-color:var(--fail);
  background:rgba(255,176,0,.1);
}
.mcdc-viz{
  margin:0 0 1rem;
  max-width:62ch;
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ink);
}
.mcdc-h{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .55rem;
}
.mcdc-src{
  display:block;
  margin:0 0 1rem;
  padding:1rem 1.1rem;
  background:rgba(5,8,7,.55);
  border:1px solid var(--hair);
  overflow:auto;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.82rem;
  line-height:1.55;
  color:var(--ink);
  white-space:pre;
}
.mcdc-sheet{
  display:grid;
  grid-template-columns: 5.4rem 4.4rem 5.4rem minmax(14rem,1fr);
  border:1px solid var(--hair-strong);
  margin:0 0 1.1rem;
  overflow-x:auto;
}
.mcdc-sheet-h,
.mcdc-sheet-r{display:contents;}
.mcdc-sheet-h > span,
.mcdc-sheet-r > span{
  display:flex;
  align-items:center;
  min-height:2.55rem;
  padding:.45rem .65rem;
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.86rem;
  color:var(--ink);
}
.mcdc-sheet-h > span{
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(43,255,111,.04);
}
.mcdc-sheet-h > span:nth-child(-n+3),
.mcdc-sheet-r > span:nth-child(-n+3){
  justify-content:center;
  font-weight:500;
}
.mcdc-sheet-r.is-on > span:nth-child(-n+3){color:var(--pass);}
.mcdc-sheet-r.is-miss > span{
  background:rgba(255,176,0,.1);
}
.mcdc-sheet-r.is-miss > span:nth-child(-n+3){color:var(--fail);}
.mcdc-sheet-h > span:last-child,
.mcdc-sheet-r > span:last-child{
  justify-content:flex-start;
  border-right:0;
  font-family:var(--sans, system-ui);
  font-size:.92rem;
}
.mcdc-sheet-r:last-child > span{border-bottom:0;}
.mcdc-sheet.mcdc-intent{
  grid-template-columns: 7.2rem minmax(16rem,1fr) minmax(16rem,1fr);
}
.mcdc-intent .mcdc-sheet-h > span:nth-child(-n+3),
.mcdc-intent .mcdc-sheet-r > span:nth-child(-n+3){
  justify-content:flex-start;
  font-family:var(--sans, system-ui);
  font-weight:400;
}
.mcdc-intent .mcdc-sheet-r > span:first-child{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.mcdc-intent .mcdc-sheet-r.is-on > span:nth-child(2){color:var(--pass);}
.mcdc-intent .mcdc-sheet-r.is-miss > span:nth-child(2){color:var(--pass);}
.mcdc-intent .mcdc-sheet-r.is-miss > span:nth-child(3){color:var(--fail);}
.mcdc-pane[data-for="proof"] .mcdc-viz{max-width:none;}
.mcdc-pane[data-for="proof"] .mcdc-viz + .mcdc-viz{margin-top:-.45rem;}

/* inline SVG exhibits on the other two pages */
.tx-fig{
  margin:1.4rem 0 0;
  border:1px solid var(--hair);
  background:var(--card);
  padding:1.1rem 1rem .4rem;
}
.tx-fig svg{width:100%;height:auto;display:block;}
.tx-fig-shot{padding:0;}
.tx-fig-shot img{width:100%;height:auto;display:block;}
.tx-fig .tx-box{fill:var(--card);stroke:var(--hair-strong);stroke-width:1.4;}
.tx-fig .tx-name{fill:var(--ink);font:600 13px var(--sans, system-ui);letter-spacing:.04em;}
.tx-fig .tx-sub{fill:var(--muted);font:400 11px var(--sans, system-ui);}
.tx-fig .tx-ok{stroke:var(--pass);stroke-width:1.6;fill:none;}
.tx-fig .tx-neg{stroke:var(--fail);stroke-width:1.6;stroke-dasharray:5 4;fill:none;}
.tx-fig .tx-lab{fill:var(--muted);font:400 12px var(--sans, system-ui);}
.tx-fig-cap{
  margin:.15rem 0 0;
  padding:.7rem 1rem .85rem;
  font-size:.86rem;
  color:var(--muted);
}

.topic-cta{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap;}

/* Topic compare sheets: --line is too close to paper on terminal. */
body[data-page="topic"] .compare-block{margin-top:1.4rem;}
body[data-page="topic"] table.compare{
  background:var(--card);
}
body[data-page="topic"] table.compare th,
body[data-page="topic"] table.compare td{
  border:1px solid var(--hair-strong, var(--hair));
}

/* Compare: tabbed PR → reviewer → corpus. */
.cr-flow{
  margin:1.4rem 0 0;
  border:1px solid var(--hair);
  background:var(--card);
}
.cr-flow-bar{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--hair);
}
.cr-flow-bar button{
  appearance:none;
  background:transparent;
  border:0;
  border-right:1px solid var(--hair);
  color:var(--muted);
  font:inherit;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:1rem .8rem .95rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  align-items:flex-start;
}
.cr-flow-bar button:last-child{border-right:0;}
.cr-flow-bar button .cr-n{
  color:var(--signal);
  font-size:.62rem;
  letter-spacing:.14em;
  opacity:.7;
}
.cr-flow-bar button[aria-pressed="true"]{
  color:var(--ink);
  background:rgba(43,255,111,.07);
  box-shadow:inset 0 -2px 0 var(--pass);
}
.cr-flow-bar button[aria-pressed="true"] .cr-n{opacity:1;}
.cr-pane{display:none;padding:1.4rem 1.3rem 1.35rem;}
.cr-flow-bar.is-2{grid-template-columns:1fr 1fr;}
.cr-flow[data-step="pr"] .cr-pane[data-for="pr"],
.cr-flow[data-step="review"] .cr-pane[data-for="review"],
.cr-flow[data-step="gate"] .cr-pane[data-for="gate"],
.cr-flow[data-step="scan"] .cr-pane[data-for="scan"],
.cr-flow[data-step="shall"] .cr-pane[data-for="shall"],
.cr-flow[data-step="qg"] .cr-pane[data-for="qg"],
.cr-flow[data-step="req"] .cr-pane[data-for="req"],
.cr-flow[data-step="lab"] .cr-pane[data-for="lab"],
.cr-flow[data-step="ci"] .cr-pane[data-for="ci"],
.cr-flow[data-step="day1"] .cr-pane[data-for="day1"],
.cr-flow[data-step="later"] .cr-pane[data-for="later"],
.cr-flow[data-step="tests"] .cr-pane[data-for="tests"],
.cr-flow[data-step="spec"] .cr-pane[data-for="spec"],
.cr-flow[data-step="unpinned"] .cr-pane[data-for="unpinned"],
.cr-flow[data-step="pinned"] .cr-pane[data-for="pinned"],
.cr-flow[data-step="unit"] .cr-pane[data-for="unit"],
.cr-flow[data-step="lemma"] .cr-pane[data-for="lemma"],
.cr-flow[data-step="english"] .cr-pane[data-for="english"],
.cr-flow[data-step="slots"] .cr-pane[data-for="slots"],
.cr-flow[data-step="cert"] .cr-pane[data-for="cert"],
.cr-flow[data-step="jobs"] .cr-pane[data-for="jobs"],
.cr-flow[data-step="asserted"] .cr-pane[data-for="asserted"],
.cr-flow[data-step="derived"] .cr-pane[data-for="derived"],
.cr-flow[data-step="gold"] .cr-pane[data-for="gold"],
.cr-flow[data-step="mirror"] .cr-pane[data-for="mirror"]{display:block;}
.cr-pr{
  max-width:42rem;
  margin:0 auto;
  padding:1.35rem 1.4rem 1.3rem;
  border:1px solid var(--hair-strong);
  background:rgba(5,8,7,.45);
}
.cr-pr-k{
  margin:0 0 .55rem;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.cr-pr-t{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:clamp(1.35rem, 2vw, 1.7rem);
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--ink);
}
.cr-pr-d{
  margin:.7rem 0 0;
  max-width:46ch;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ink-60);
}
.cr-files{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:1.1rem 0 0;
  padding:0;
  list-style:none;
}
.cr-files li{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--signal);
  border:1px solid var(--hair);
  padding:.28rem .55rem;
}
.cr-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.cr-card{
  border:1px solid var(--hair);
  background:rgba(5,8,7,.45);
  padding:1.15rem 1.15rem 1.2rem;
  min-height:16rem;
}
.cr-card.is-dim{opacity:.42;}
.cr-card-h{
  margin:0 0 .85rem;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.cr-thread{margin:0;padding:0;list-style:none;}
.cr-thread li{
  display:grid;
  grid-template-columns:10px 1fr;
  gap:.55rem  .75rem;
  padding:.7rem 0;
  border-top:1px solid var(--hair);
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:1rem;
  line-height:1.45;
  color:var(--ink);
}
.cr-thread li:first-child{border-top:0;padding-top:0;}
.cr-thread .dot{
  width:8px;height:8px;margin-top:.45rem;
  border-radius:0;
  background:var(--pass);
}
.cr-thread li.is-old{color:var(--muted);}
.cr-thread li.is-old .dot{background:var(--hair-strong);}
.cr-who{
  display:block;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.25rem;
}
.cr-rows{margin:0;padding:0;list-style:none;}
.cr-rows li{
  display:grid;
  grid-template-columns:9.2rem 1fr;
  gap:.4rem 1rem;
  padding:.55rem 0;
  border-top:1px solid var(--hair);
  font-size:1rem;
  line-height:1.4;
}
.cr-rows li:first-child{border-top:0;padding-top:0;}
.cr-rows .k{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:.28rem;
}
.cr-rows .v{
  font-family:"Space Grotesk", system-ui, sans-serif;
  color:var(--ink);
}
.cr-chip{
  display:inline-block;
  margin-top:1rem;
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.35rem .55rem;
  border:1px solid var(--hair);
}
.cr-chip.is-ok{color:var(--pass);border-color:var(--pass);}
.cr-chip.is-fail{color:var(--fail);border-color:var(--fail);}
.cr-chip.is-wait{color:var(--muted);}
.cr-empty{
  margin:2.2rem 0 0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--muted);
  max-width:28ch;
}
.cr-cap{
  margin:0;
  padding:.75rem 1.3rem .9rem;
  border-top:1px solid var(--hair);
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:.86rem;
  color:var(--muted);
}
@media (max-width:760px){
  .cr-flow-bar{grid-template-columns:1fr;}
  .cr-flow-bar button{border-right:0;border-bottom:1px solid var(--hair);flex-direction:row;gap:.7rem;align-items:baseline;}
  .cr-split{grid-template-columns:1fr;}
  .cr-card{min-height:0;}
}