/* ============================================================================
   open.csr demo site

   A regulatory document rendered by an engineering team: serif headings for
   the document voice, a system sans for the interface, mono for every
   identifier that has to be copied exactly (slugs, hashes, bindings).

   No web fonts, no CDN, no runtime network — the whole site is one stylesheet
   and precomputed HTML, which is also the deployment story.

     1. Tokens          light + dark surfaces
     2. Base            elements, typography, tables, code
     3. Chrome          header band, nav, footer
     4. Components      cards, chips, panels, stats, tabs, timeline, callouts
     5. Pages           home, gallery, reader, text library, quality, docs
   ============================================================================ */

/* ---- 1. Tokens ----------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper: #f5f7f9;
  --paper-2: #eceff3;
  --card: #ffffff;
  --band: #101823;
  --band-ink: #e9eef5;
  --band-soft: #93a3b6;

  --ink: #131820;
  --muted: #5a6674;
  --faint: #8994a3;
  --rule: #e1e7ee;
  --rule-strong: #cfd8e2;

  --accent: #1a5bb0;
  --accent-hover: #14488c;
  --accent-soft: #e8f0fb;
  --accent-rule: #c3d8f2;

  --good: #12693c;
  --good-bg: #e0f5e9;
  --good-rule: #b3e3c8;
  --warn: #8a4b06;
  --warn-bg: #fdf0d9;
  --warn-rule: #f4d9a8;
  --bad: #a8201a;
  --bad-bg: #fce8e6;
  --bad-rule: #f4c3bf;

  --sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --measure: 74rem;
  --band-pad: max(calc(50vw - (var(--measure) / 2)), 1.25rem);
  --radius: 12px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(19, 24, 32, 0.04), 0 6px 20px -12px rgba(19, 24, 32, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0f16;
    --paper-2: #10161f;
    --card: #141b25;
    --band: #070b11;
    --band-ink: #e6edf5;
    --band-soft: #8896a8;

    --ink: #e4ebf3;
    --muted: #98a5b5;
    --faint: #6d7b8c;
    --rule: #1f2833;
    --rule-strong: #2c3745;

    --accent: #74b0f4;
    --accent-hover: #9ac7fa;
    --accent-soft: #14243a;
    --accent-rule: #23405f;

    --good: #56d391;
    --good-bg: #0f2a1c;
    --good-rule: #1d5136;
    --warn: #efb44a;
    --warn-bg: #2b2110;
    --warn-rule: #55411a;
    --bad: #f38b83;
    --bad-bg: #2c1512;
    --bad-rule: #56241f;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme='light'] {
  --paper: #f5f7f9;
  --paper-2: #eceff3;
  --card: #ffffff;
  --band: #101823;
  --band-ink: #e9eef5;
  --band-soft: #93a3b6;
  --ink: #131820;
  --muted: #5a6674;
  --faint: #8994a3;
  --rule: #e1e7ee;
  --rule-strong: #cfd8e2;
  --accent: #1a5bb0;
  --accent-hover: #14488c;
  --accent-soft: #e8f0fb;
  --accent-rule: #c3d8f2;
  --good: #12693c;
  --good-bg: #e0f5e9;
  --good-rule: #b3e3c8;
  --warn: #8a4b06;
  --warn-bg: #fdf0d9;
  --warn-rule: #f4d9a8;
  --bad: #a8201a;
  --bad-bg: #fce8e6;
  --bad-rule: #f4c3bf;
  --shadow: 0 1px 2px rgba(19, 24, 32, 0.04), 0 6px 20px -12px rgba(19, 24, 32, 0.18);
}

:root[data-theme='dark'] {
  --paper: #0b0f16;
  --paper-2: #10161f;
  --card: #141b25;
  --band: #070b11;
  --band-ink: #e6edf5;
  --band-soft: #8896a8;
  --ink: #e4ebf3;
  --muted: #98a5b5;
  --faint: #6d7b8c;
  --rule: #1f2833;
  --rule-strong: #2c3745;
  --accent: #74b0f4;
  --accent-hover: #9ac7fa;
  --accent-soft: #14243a;
  --accent-rule: #23405f;
  --good: #56d391;
  --good-bg: #0f2a1c;
  --good-rule: #1d5136;
  --warn: #efb44a;
  --warn-bg: #2b2110;
  --warn-rule: #55411a;
  --bad: #f38b83;
  --bad-bg: #2c1512;
  --bad-rule: #56241f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
}

/* ---- 2. Base ------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.15rem;
}
h4 {
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-top: 1.4rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

code,
.mono,
kbd {
  font-family: var(--mono);
  font-size: 0.87em;
  font-variant-ligatures: none;
}

code {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.08em 0.34em;
}

pre {
  margin: 0;
  overflow-x: auto;
}

pre code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.3rem;
}

ul.plain {
  list-style: none;
  padding-left: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

blockquote {
  margin: 0 0 1rem;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--accent-rule);
  color: var(--muted);
}

img {
  max-width: 100%;
  height: auto;
}

.sub {
  color: var(--muted);
  font-size: 0.9rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 62ch;
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trunc {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.empty {
  color: var(--muted);
  background: var(--paper-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 0.6rem;
  z-index: 20;
  background: var(--card);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
}

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

/* Tables ------------------------------------------------------------------ */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}

table.data tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

table.data td.bad {
  color: var(--bad);
}

.scroll {
  overflow-x: auto;
  max-height: 34rem;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.table-tools {
  margin-bottom: 0.6rem;
}

.table-tools input {
  width: min(24rem, 100%);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
}

/* Code figures ------------------------------------------------------------ */

figure.code {
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  overflow: hidden;
}

figure.code figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  padding: 0.4rem 0.8rem;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

figure.code pre {
  padding: 0.85rem 1rem;
}

pre.ascii {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.2rem;
}

/* ---- 3. Chrome ----------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--band);
  color: var(--band-ink);
  padding: 0.85rem var(--band-pad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  /* Sticky: the evidence tables and the CSR run long, and the theme toggle and
     navigation have to stay reachable without scrolling back. */
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--band-ink);
  text-decoration: none;
}

.site-name strong {
  display: block;
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-name em {
  display: block;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--band-soft);
}

.site-name .mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(160deg, #5aa9e6 0%, #1a5bb0 60%, #123a70 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--band-soft);
  text-decoration: none;
  font-size: 0.86rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--band-ink);
  background: rgba(255, 255, 255, 0.07);
}

.site-nav a.current {
  color: var(--band-ink);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -2px 0 #5aa9e6;
}

.site-nav .icon-link,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--band-soft);
  cursor: pointer;
  font-size: 0.95rem;
}

.theme-toggle:hover,
.site-nav .icon-link:hover {
  color: var(--band-ink);
  background: rgba(255, 255, 255, 0.07);
}

.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.4rem var(--band-pad) 4rem;
}

@media (min-width: 60rem) {
  .site-main {
    padding-left: max(calc(50vw - (var(--measure) / 2)), 1.25rem);
    padding-right: max(calc(50vw - (var(--measure) / 2)), 1.25rem);
    max-width: none;
  }
}

.site-footer {
  background: var(--band);
  color: var(--band-soft);
  padding: 1.8rem var(--band-pad) 2.4rem;
  font-size: 0.83rem;
}

.site-footer p {
  max-width: 70ch;
  margin-bottom: 0.5rem;
}

.site-footer strong {
  color: var(--band-ink);
  font-family: var(--mono);
  font-weight: 600;
}

.site-footer a {
  color: #8cc2f2;
}

/* ---- 4. Components ------------------------------------------------------- */

.page-head {
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.crumb {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel h2 {
  margin-top: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.card-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.card:hover {
  border-color: var(--accent-rule);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-bottom: 0.3rem;
}

.card h3 a {
  text-decoration: none;
}

.card-top {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.card-facts {
  font-size: 0.74rem;
  color: var(--faint);
  margin-bottom: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.mono-path {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.16em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--muted);
  white-space: nowrap;
}

.chip-good {
  color: var(--good);
  background: var(--good-bg);
  border-color: var(--good-rule);
}
.chip-bad {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-rule);
}
.chip-warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-rule);
}
.chip-info {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-rule);
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.4rem;
  font-size: 0.94rem;
}

.callout.good {
  border-color: var(--good);
  background: var(--good-bg);
  color: var(--good);
}
.callout.warn {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}
.callout.bad {
  border-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.8rem;
}

.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-value {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--ink);
}

.stat-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
}

dl.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem 1.4rem;
  margin: 0 0 1rem;
}

dl.facts.wide {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

dl.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.15rem;
}

dl.facts dd {
  margin: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.2rem;
}

.button {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 550;
  border: 1px solid transparent;
}

.button:hover {
  background: var(--accent-hover);
  color: #fff;
}

.button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-rule);
}

.button.ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Tabs -------------------------------------------------------------------- */

.tab-list {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.2rem;
}

.tab {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--ink);
}

.tab.current {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 550;
}

.tab-panel[hidden] {
  display: none;
}

/* Timeline ---------------------------------------------------------------- */

ol.timeline {
  list-style: none;
  padding: 0 0 0 1.4rem;
  margin: 0;
  position: relative;
}

ol.timeline::before {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--rule-strong);
}

ol.timeline li {
  position: relative;
  margin-bottom: 1.1rem;
}

.tl-marker {
  position: absolute;
  left: -1.4rem;
  top: 0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--rule-strong);
}

ol.timeline li.current .tl-marker {
  border-color: var(--accent);
  background: var(--accent);
}

.tl-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.tl-request {
  margin-bottom: 0.2rem;
}

/* Loop list --------------------------------------------------------------- */

ol.loop {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

ol.loop li {
  display: grid;
  grid-template-columns: 1.8rem 11rem 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}

ol.loop li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.loop-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  border: 1px solid var(--accent-rule);
  background: var(--accent-soft);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

ol.loop li span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
}

@media (max-width: 44rem) {
  ol.loop li {
    grid-template-columns: 1.8rem 1fr;
  }
  ol.loop li span:last-child {
    grid-column: 2;
  }
}

/* ---- 5. Pages ------------------------------------------------------------ */

/* Home */

.hero {
  padding: 1rem 0 2.2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.hero h1 {
  max-width: 22ch;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem);
}

.hero .lede {
  max-width: 66ch;
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

/* Gallery */

.display-card h3 a {
  color: var(--ink);
}

.display-card h3 a:hover {
  color: var(--accent);
}

.rendered-display {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.8rem;
}

.rendered-display table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
}

.rendered-display th,
.rendered-display td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.rendered-display thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Reader */

.reader {
  display: grid;
  /* minmax(0, 1fr) — a wide gt table inside the document must scroll in its
     own box, not blow the grid column out past the viewport. */
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .reader {
    grid-template-columns: minmax(0, 1fr);
  }
}

.reader-toc {
  position: sticky;
  top: 5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.reader-toc h2 {
  font-size: 0.72rem;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.reader-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reader-toc a {
  text-decoration: none;
  display: block;
  padding: 0.15rem 0;
}

.csr-doc {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow);
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.7;
}

.csr-doc h2,
.csr-doc h3,
.csr-doc h4,
.csr-doc h5 {
  margin-top: 1.8rem;
}

.csr-doc .sec-number {
  color: var(--faint);
  font-size: 0.8em;
  margin-right: 0.4em;
}

.csr-section,
.prose.doc h2,
.prose.doc h3 {
  scroll-margin-top: 5rem;
}

.block-ref {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  margin-top: -0.4rem;
}

.not-populated {
  font-family: var(--sans);
  border-left: 2px solid var(--rule-strong);
  padding-left: 0.9rem;
  color: var(--faint);
}

.e3-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85em;
}

.csr-text.excluded {
  font-family: var(--sans);
}

table.provenance td:first-child {
  white-space: nowrap;
}

table.provenance .trunc {
  max-width: 46ch;
}

.csr-display figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.csr-display .variant {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1em 0.5em;
}

.csr-display {
  margin: 1.5rem 0;
}

.binding {
  background: var(--accent-soft);
  border-bottom: 1px dashed var(--accent);
  border-radius: 3px;
  padding: 0 0.15em;
  cursor: pointer;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

.binding:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.binding.unresolved {
  background: var(--bad-bg);
  border-bottom-color: var(--bad);
  color: var(--bad);
}

[data-trace] {
  cursor: pointer;
}

.trace {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 2rem));
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--accent-rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.45);
  padding: 1rem 1.2rem;
  z-index: 30;
}

.trace[hidden] {
  display: none;
}

.trace-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.8rem;
}

.trace-head h2 {
  font-size: 0.75rem;
  font-family: var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.trace-close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.trace-body h3 {
  font-size: 1rem;
}

.trace .facts {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.trace-links {
  font-size: 0.85rem;
  margin: 0;
}

.trace-list {
  list-style: none;
  padding: 0;
  columns: 2;
  font-size: 0.9rem;
}

@media (max-width: 44rem) {
  .trace-list {
    columns: 1;
  }
}

/* Text library */

.legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.legend p {
  margin: 0;
}

.text-grid {
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

.text-block .prose {
  font-family: var(--serif);
  font-size: 0.98rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
  margin-top: 0.4rem;
}

.text-block .prose p:last-child {
  margin-bottom: 0.4rem;
}

ul.bindings {
  list-style: none;
  padding: 0;
  font-size: 0.8rem;
}

ul.bindings li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

/* Docs */

.doc-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}

@media (max-width: 62rem) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc-toc {
  position: sticky;
  top: 5rem;
  font-size: 0.84rem;
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.doc-toc h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.doc-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doc-toc a {
  display: block;
  padding: 0.16rem 0;
  text-decoration: none;
  color: var(--muted);
}

.doc-toc a:hover {
  color: var(--accent);
}

.prose.doc {
  max-width: 74ch;
}

.prose.doc h2 {
  margin-top: 2.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

.prose.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin-bottom: 1.2rem;
  display: block;
  overflow-x: auto;
}

.prose.doc th,
.prose.doc td {
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.prose.doc thead th {
  background: var(--paper-2);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.prose.doc pre {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doc-list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}

.doc-list li:last-child {
  border-bottom: 0;
}

@media print {
  .site-header,
  .site-nav,
  .trace,
  .reader-toc,
  .doc-toc {
    display: none;
  }
}

.xref {
  font-family: var(--sans);
  font-size: 0.95em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

span.xref {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent-rule);
  cursor: pointer;
}

span.xref.unresolved {
  color: var(--muted);
  border-bottom-style: none;
  cursor: default;
}

/* ---- 6. Text status view -------------------------------------------------- */
/*
   The Text pane is a reading view: wide measure for the prose, the provenance
   beside it rather than under it. Nothing here is decorative — every rule exists
   to separate the writer's words from the computed values, or to make the state
   of a block legible at a glance.
*/

/* Groups ------------------------------------------------------------------ */

.review-group {
  margin: 2rem 0 0;
}

.review-group > h2 {
  font-size: 1.35rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.25rem;
  margin-bottom: 0.35rem;
}

.rm-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  vertical-align: middle;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.05em 0.5em;
}

.review-group > .sub {
  margin-bottom: 1rem;
}

/* One block --------------------------------------------------------------- */

.review-block {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow);
}

.review-block.pending {
  border-left: 3px solid var(--warn);
}

.rb-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
}

.rb-title h2 {
  font-size: 1.15rem;
  margin: 0;
}

.rb-title h2 .mono {
  font-size: 0.86rem;
  color: var(--accent);
  margin-right: 0.35rem;
}

.rb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.rb-links {
  margin: 0;
  font-size: 0.78rem;
  color: var(--faint);
}

.rb-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
  gap: 1.6rem;
  margin-top: 1rem;
}

@media (max-width: 62rem) {
  .rb-body {
    grid-template-columns: 1fr;
  }
}

.rb-h {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: 0 0 0.5rem;
}

.review-prose {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.65;
}

.review-prose p {
  margin-bottom: 0.8rem;
}

/* A bound value: underlined, tabular, numbered into the binding table. The
   reviewer must be able to see which parts of a sentence the pipeline wrote. */
.bound {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  color: var(--ink);
  text-decoration: none;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.18em;
  white-space: nowrap;
}

.bound:hover,
.bound:focus-visible {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--ink);
}

.bound-ref {
  font-family: var(--mono);
  font-size: 0.62em;
  color: var(--accent);
  margin-left: 0.15em;
  top: -0.5em;
}

.bound.unresolved {
  background: var(--bad-bg);
  border-bottom-color: var(--bad);
  color: var(--bad);
}

/* Provenance -------------------------------------------------------------- */

.provenance {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 0.85rem 0.95rem;
  align-self: start;
}

.provenance h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.provenance h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: 0.8rem 0 0.3rem;
}

.prov-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  margin: 0;
  font-size: 0.82rem;
}

.prov-facts dt {
  color: var(--muted);
}

.prov-facts dd {
  margin: 0;
}

.provenance .prompt {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  margin: 0;
  max-height: 22rem;
  overflow: auto;
}

.provenance .sub {
  margin: 0.6rem 0 0;
}

.provenance.not-generated {
  background: transparent;
  border-style: dashed;
}

/* Bindings ---------------------------------------------------------------- */

.rb-bindings {
  margin-top: 1.3rem;
}

.rb-bindings .rb-h .sub {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.4rem;
}

.binding-table {
  font-size: 0.8rem;
}

.binding-table td {
  vertical-align: top;
}

.binding-table code {
  font-size: 0.74rem;
  word-break: break-word;
}

.binding-table tr:target {
  background: var(--accent-soft);
}

.binding-table .unresolved-row {
  background: var(--bad-bg);
}

.quals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.qual {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.02em 0.45em;
}

.qual b {
  color: var(--faint);
  font-weight: 500;
}

.value-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.binding-table .value {
  white-space: nowrap;
}

.binding-table .value .sub {
  display: block;
  white-space: normal;
}

.stat.warn .stat-value {
  color: var(--warn);
}

.stat.warn {
  border-color: var(--warn-rule);
  background: var(--warn-bg);
}

/* Demo app: four panes, one selection (#113) ------------------------------- */

/* The application strip (demo-layout.md §5). A second header band under the site
   header: the four views on the left, and on the right a live readout of what
   you are looking at. Sticky, because in a document this long the answer to
   "which display is this?" must not scroll away. */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0 var(--band-pad);
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.app-views {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  margin-left: -0.7rem;
}

/* Navigation, not a control: a rule under the current label rather than a filled
   tab. These are real links to real pages, upgraded to pane switches by JS. */
.app-view {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 0.7rem 0.6rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}

.app-view:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
  text-decoration: none;
}

.app-view.current {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.app-view:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}

/* Identity and provenance live in the chrome, not in a dialog. Monospace because
   every part of this is an identifier — a number, a slug, an iteration, a hash —
   and none of it is prose. */
.app-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
}

.app-context .ac-study {
  color: var(--muted);
  font-weight: 600;
}

.app-context .ac-number {
  color: var(--accent);
  font-weight: 600;
}

.app-context .ac-slug {
  color: var(--muted);
}

.app-context .ac-sep {
  color: var(--rule-strong);
}

@media (max-width: 900px) {
  /* Below this the bar cannot hold both; the views win — they are the
     navigation, and the context is recoverable from the content. */
  .app-context .ac-number,
  .app-context .ac-slug,
  .app-context .ac-version,
  .app-context .ac-hash,
  .app-context .ac-sep {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-views {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-views::-webkit-scrollbar {
    display: none;
  }
}

/* Content starts at the top of the pane. Each pane is the same HTML its
   standalone page serves, so it arrives carrying that page's title and lede —
   correct at /reader/, redundant here, where the app bar already names the view
   and labels the pane (aria-labelledby). Suppressed in presentation rather than
   removed from the markup, because the panes not drifting from their permalinks
   is worth more than the four elements this hides. */
.app-pane > .page-head {
  display: none;
}

.app-pane > .page-head h1,
.app-pane > .page-head h2 {
  font-size: 1.5rem;
}

/* Tables pane: the picker is a row of displays, the stage shows one. */
.app-display-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}

.app-display-option {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.app-display-option:hover {
  border-color: var(--rule-strong);
}

.app-display-option.current {
  border-color: var(--accent-rule);
  background: var(--accent-soft);
}

.ado-number {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.app-display-option.current .ado-number {
  color: var(--accent);
}

.ado-title {
  font-size: 0.9rem;
  line-height: 1.3;
  font-weight: 600;
}

.ado-slug {
  font-size: 0.72rem;
  color: var(--faint);
}

.app-display-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Templates pane */
.app-block {
  margin: 2rem 0;
}

.app-block > h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.e3-table tbody tr.is-gap td {
  color: var(--muted);
}

.e3-table tbody tr.is-gap td:nth-child(2) {
  font-style: italic;
}

.e3-table td:first-child {
  white-space: nowrap;
}

.muted {
  color: var(--faint);
}

/* A block the shared selection is pointing at. The rule is on the left so it
   survives the card's own background states (draft, approved). */
.app-selected {
  box-shadow: -3px 0 0 0 var(--accent);
}

/* The app bar sits on the card surface in both themes; in dark it needs a
   slightly lifted background so it separates from the page beneath it. */
@media (prefers-color-scheme: dark) {
  .app-bar {
    background: var(--paper-2);
  }
}

:root[data-theme='dark'] .app-bar {
  background: var(--paper-2);
}

:root[data-theme='light'] .app-bar {
  background: var(--card);
}

/* The explorer (#113, revised layout) --------------------------------------
   A persistent tree on the left: study at the top, then the collections that
   belong to it. Displays sit beside documents rather than inside one, because
   the same display can be referenced by more than one document. */

.app.has-nav {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.app.has-nav .app-stage {
  min-width: 0;
  padding-left: 2rem;
}

.app-nav {
  position: sticky;
  top: 45px;
  align-self: start;
  max-height: calc(100vh - 45px);
  overflow-y: auto;
  padding: 1.2rem 0.9rem 2rem 0;
  border-right: 1px solid var(--rule);
  font-size: 0.86rem;
}

.nav-study {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.nav-study-id {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.nav-study-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
}

.nav-tree,
.nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-group + .nav-group {
  margin-top: 0.15rem;
}

.nav-group-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-group-head:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.nav-group.is-active .nav-group-head {
  color: var(--ink);
}

/* A disclosure triangle, rotated when open — the one place this reads as a file
   explorer rather than a menu. */
.nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.14s ease;
  flex: none;
}

.nav-group.open .nav-caret {
  transform: rotate(90deg);
}

.nav-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0;
}

.nav-items {
  display: none;
  margin: 0.1rem 0 0.4rem;
}

.nav-group.open .nav-items {
  display: block;
}

.nav-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem 0.3rem 1.1rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
}

.nav-item:hover {
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}

.nav-item[data-current] {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-item.is-planned {
  color: var(--faint);
  cursor: default;
}

.nav-num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
}

.nav-item[data-current] .nav-num {
  color: var(--accent);
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-flag {
  flex: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav-flag.warn {
  color: var(--warn);
}

.nav-empty {
  margin: 0.2rem 0 0.5rem 1.1rem;
  font-size: 0.78rem;
  color: var(--faint);
}

/* Read / Edit. Edit is disabled until there is something to edit. */
.app-bar-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.app-mode {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.app-mode-btn {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
}

.app-mode-btn.current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.app-mode-btn[disabled] {
  color: var(--faint);
  cursor: not-allowed;
  opacity: 0.75;
}

.app-mode-btn + .app-mode-btn {
  border-left: 1px solid var(--rule-strong);
}

/* Below this the explorer stops paying for itself: wide tables need the width
   more than a permanently visible tree does. */
@media (max-width: 950px) {
  .app.has-nav {
    display: block;
  }

  .app.has-nav .app-stage {
    padding-left: 0;
  }

  .app-nav {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.4rem;
    padding-right: 0;
  }
}

/* The app fills the viewport. Documentation pages keep the 74rem measure that
   makes prose readable; an explorer beside a six-column table does not. */
body.app-page .site-main {
  max-width: none;
  padding: 0 1.5rem 3rem;
}

body.app-page .app-bar {
  padding: 0 1.5rem;
}

/* A document's own contents, as the level below it. Shown for the selected
   document only — sixteen sections per document is a list worth having in the
   tree, and every document's list at once is not. */
.nav-sections {
  display: none;
  list-style: none;
  margin: 0.15rem 0 0.4rem;
  padding: 0;
  border-left: 1px solid var(--rule);
  margin-left: 1.35rem;
}

.nav-item[data-current] + .nav-sections {
  display: block;
}

.nav-section {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.22rem 0.4rem 0.22rem 0.6rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
  text-decoration: none;
}

.nav-section:hover {
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}

/* Modelled but not filled by this report. Still navigable — the heading is
   really in the document, saying so. */
.nav-section.is-empty .nav-label {
  color: var(--faint);
}

.nav-section .nav-num {
  min-width: 1.4rem;
}

/* The reader carries its own table of contents, which is right at /reader/ and
   redundant here now that the tree lists the same sections. */
.app-pane .reader-toc {
  display: none;
}

.app-pane .reader {
  display: block;
}

.nav-section.current {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-section.current .nav-num,
.nav-section.current .nav-label {
  color: var(--accent);
}

/* ---- Text-block editor (#113 increment B) --------------------------------

   The Text pane's blocks became editable: source on the left, the prose as it
   will read on the right, the gates underneath, and the diff the edit produces
   below that. The visual argument the layout is making is that the patch is the
   product — the review view is the last thing you see before you take it away,
   not a detail tucked behind a control.

   Everything here ships `hidden` and is revealed by site/demo/editor.js, so the
   pane with JavaScript off is the read-only status view it has always been.
   -------------------------------------------------------------------------- */

.tb-edit {
  margin-top: 1.3rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.tbe-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  align-items: start;
}

.tbe-bar .rb-h {
  grid-column: 1;
  margin: 0;
}

.tbe-bar .sub {
  grid-column: 1;
  margin: 0;
  max-width: 60ch;
}

.tbe-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font: 600 0.8rem/1 var(--sans);
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--accent-rule);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.tbe-toggle:hover,
.tbe-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.tbe-panel {
  margin-top: 0.9rem;
}

.tbe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 60rem) {
  .tbe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tbe-pane {
  min-width: 0;
}

.tbe-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: 0 0 0.35rem;
}

.tbe-label .sub {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.4rem;
}

.tbe-source {
  width: 100%;
  min-height: 18rem;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  tab-size: 2;
}

.tbe-source:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.tbe-preview {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 0.75rem 0.9rem;
  min-height: 18rem;
  max-height: 32rem;
  overflow: auto;
  font-size: 0.9rem;
}

.tbe-preview p {
  margin: 0 0 0.7rem;
}

/* The three kinds of marked text, in the same visual language the read-only
   prose already uses for a bound value — a writer moving between the two views
   should not have to learn a second vocabulary. */
.tbe-bound,
.tbe-xref {
  font-variant-numeric: tabular-nums;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.18em;
}

.tbe-xref {
  background: transparent;
  border-bottom-style: dotted;
}

.tbe-violation {
  background: var(--bad-bg);
  border-bottom: 2px solid var(--bad);
  color: var(--bad);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 0.18em;
}

.tbe-gate {
  margin-top: 0.9rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--good);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.7rem 0.9rem;
}

.tb-edit.gates-fail .tbe-gate {
  border-left-color: var(--bad);
}

.tbe-verdict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.9rem;
}

.tbe-verdict {
  font: 700 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
}

.tbe-verdict.good {
  color: var(--good);
  background: var(--good-bg);
}

.tbe-verdict.bad {
  color: var(--bad);
  background: var(--bad-bg);
}

.tbe-count {
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tbe-problems {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.6;
}

.tbe-problems li.error {
  color: var(--bad);
}

.tbe-problems li.warn {
  color: var(--warn);
}

.tbe-review {
  margin-top: 1rem;
}

.tbe-diff-body {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 24rem;
  background: var(--card);
}

.tbe-diff-line {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0 0.6rem;
}

.tbe-diff-line.file {
  color: var(--faint);
}

.tbe-diff-line.hunk {
  color: var(--accent);
  background: var(--accent-soft);
}

.tbe-diff-line.add {
  color: var(--good);
  background: var(--good-bg);
}

.tbe-diff-line.remove {
  color: var(--bad);
  background: var(--bad-bg);
}

.tbe-diff-line.note {
  color: var(--faint);
  font-style: italic;
}

.tbe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.tbe-action {
  font: 600 0.78rem/1 var(--sans);
  color: var(--card);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

.tbe-action:hover:not(:disabled),
.tbe-action:focus-visible:not(:disabled) {
  background: var(--accent-hover);
}

.tbe-action:disabled {
  opacity: 0.42;
  cursor: default;
}

.tbe-action.tbe-quiet {
  color: var(--muted);
  background: transparent;
  border-color: var(--rule-strong);
}

.tbe-action.tbe-quiet:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}

.tbe-status {
  font-size: 0.78rem;
  color: var(--muted);
}

/* The pane-level bar: one patch for everything edited in this visit. It appears
   only once something differs from the committed source. */
.tbe-all {
  display: flex;
  /* An author `display` beats the UA stylesheet's `[hidden] { display: none }`,
     so a flex/grid component that is toggled by the hidden attribute has to say
     so itself — otherwise it is visible with nothing to show. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  position: sticky;
  top: 0.5rem;
  z-index: 3;
  border: 1px solid var(--accent-rule);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
}

.tbe-all[hidden] {
  display: none;
}

.tbe-all-label {
  font: 600 0.82rem/1.4 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Expand and collapse (open.csr #10) ---------------------------------- */

/* Screen-reader-only text: the twisty is a chevron to the eye and a named
   control to everything else. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Only nodes that HAVE children carry a control; the rest are flat rows, which
   is what makes the chevron mean something when it appears. */
.nav-node.has-children {
  position: relative;
}

.nav-twisty {
  position: absolute;
  left: 0;
  top: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--faint);
  cursor: pointer;
}

.nav-twisty:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.nav-twisty:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.nav-twisty .nav-caret {
  transform: rotate(90deg);
}

.nav-node.is-collapsed .nav-twisty .nav-caret {
  transform: rotate(0deg);
}

.nav-node.is-collapsed .nav-sections {
  display: none;
}

/* A group with nothing in it is a heading: no control, no hover affordance. */
.nav-group.is-empty .nav-group-head {
  cursor: default;
  opacity: 0.55;
}

.nav-group.is-empty .nav-group-head:hover {
  background: none;
  color: var(--muted);
}

/* Modelled but not populated: dimmed as a whole row rather than by its label
   alone, so a glance down the tree separates what this report fills from what it
   only models. Still navigable, still tooltipped (#10). */
.nav-section.is-empty {
  opacity: 0.62;
}

.nav-section.is-empty .nav-num,
.nav-section.is-empty .nav-label {
  color: var(--faint);
}

.nav-section.is-empty:hover {
  opacity: 1;
}

/* --- Editing from the reading view (#129 C, open.csr#15) ------------------
   The Reader gains one control per block and an empty drawer beneath it. The
   editor itself is not duplicated here: site/demo/reader-edit.js MOVES the
   block's editor out of the Text pane into this drawer and puts it back when the
   drawer closes, so there is one editor, one draft and one set of DOM ids per
   block however the writer got to it.

   While a draft differs from the committed source the block says so — a reading
   view that silently shows uncommitted prose would be lying about the report.
   -------------------------------------------------------------------------- */

.rdr-edit {
  margin-left: 0.6rem;
  font: 600 0.7rem/1 var(--sans);
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--accent-rule);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

.rdr-edit:hover,
.rdr-edit:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.rdr-edit[disabled] {
  opacity: 0.5;
  cursor: default;
}

.rdr-drawer {
  margin: 0.6rem 0 1.2rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  background: var(--paper-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The editor, once adopted: no top rule (the drawer already frames it), no
   preview column — the block above the drawer IS the preview, and the same words
   twice is not a second opinion, it is noise — and no bar of its own, because the
   block's Edit control is the one that opened this and the one that closes it. */
.tb-edit.in-reader {
  margin-top: 0;
  border-top: 0;
  padding: 0.8rem 0.8rem 0.8rem 0;
}

.tb-edit.in-reader .tbe-bar {
  display: none;
}

.tb-edit.in-reader .tbe-panel {
  margin-top: 0;
}

.tb-edit.in-reader .tbe-grid {
  grid-template-columns: minmax(0, 1fr);
}

.tb-edit.in-reader .tbe-preview,
.tb-edit.in-reader .tbe-preview + .sub,
.tb-edit.in-reader .tbe-grid .tbe-pane:last-child {
  display: none;
}

/* The block being edited, and what it is showing. */
.csr-text.is-editing {
  scroll-margin-top: 5rem;
}

.csr-text[data-reader-state='draft'] .csr-prose,
.csr-text[data-reader-state='failing'] .csr-prose {
  border-left: 2px solid var(--warn, #b45309);
  padding-left: 0.9rem;
}

.rdr-draft-note {
  font: 600 0.72rem/1.4 var(--sans);
  color: var(--warn, #b45309);
  margin: 0.5rem 0 0.2rem;
}

/* The block reference normally tucks up under the prose; with a draft notice
   between them it must not climb over it. */
.rdr-draft-note:not([hidden]) + .block-ref {
  margin-top: 0;
}

.csr-text[data-reader-state='failing'] .rdr-draft-note {
  color: var(--bad, #b91c1c);
}

/* A draft's computed values are marked as the document marks them, minus the
   trace affordance: the trace panel answers questions about the committed
   report, and a draft is not in it. */
.binding.is-draft {
  border-bottom-style: dashed;
  cursor: default;
}

.csr-prose .fidelity-violation {
  background: var(--bad-soft, rgba(185, 28, 28, 0.12));
  border-bottom: 2px solid var(--bad, #b91c1c);
}