/* IFP Request Assistant - application layer over the Govcraft.AI design tokens.
   Tokens live in /static/tokens/. Nothing here invents a colour, radius, shadow or
   duration: every value is a --gc-* token or a documented deviation (ADR-006).
   No CDN, no external font, no build step. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--gc-font-sans);
  font-size: var(--gc-fs-body);
  line-height: var(--gc-lh-normal);
  color: var(--gc-fg-primary);
  background: var(--gc-bg-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--gc-fg-strong); font-weight: var(--gc-weight-bold);
  line-height: var(--gc-lh-tight); letter-spacing: var(--gc-tracking-title); margin: 0; }
h1 { font-size: var(--gc-fs-h1); }
h2 { font-size: var(--gc-fs-h3); }
h3 { font-size: var(--gc-fs-small); }
p { margin: 0 0 var(--gc-space-2); text-wrap: pretty; }
code { font-family: var(--gc-font-mono); font-size: 0.92em; }
::selection { background: var(--gc-teal-light); color: var(--gc-oxford-navy); }

.gc-eyebrow { font-size: var(--gc-fs-eyebrow); letter-spacing: var(--gc-tracking-eyebrow);
  text-transform: uppercase; font-weight: var(--gc-weight-bold); color: var(--gc-teal); }
.muted { color: var(--gc-fg-muted); font-size: var(--gc-fs-caption); }
.strong { font-weight: var(--gc-weight-bold); color: var(--gc-fg-strong); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Hidden to the eye, present to a screen reader. display:none would remove the
   label from the accessibility tree and leave the collapsed rail buttons unnamed. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Focus. The design system's ring alone is a 15%-alpha wash and does not meet
   WCAG 1.4.11, so a solid 2px teal outline carries it. Deviation, see ADR-006. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gc-teal); outline-offset: 2px; box-shadow: var(--gc-focus-ring);
}
.skip-link { position: absolute; left: var(--gc-space-2); top: -40px; z-index: 10;
  background: var(--gc-oxford-navy); color: var(--gc-fg-inverse);
  padding: var(--gc-space-2) var(--gc-space-3); border-radius: var(--gc-radius-sm); }
.skip-link:focus { top: var(--gc-space-2); }

/* ---------- buttons ---------- */
.btn { font: inherit; cursor: pointer; border-radius: var(--gc-radius-sm);
  padding: var(--gc-space-2) var(--gc-space-3); border: 1px solid transparent;
  transition: background-color var(--gc-dur-fast) var(--gc-ease),
              color var(--gc-dur-fast) var(--gc-ease),
              border-color var(--gc-dur-fast) var(--gc-ease); }
.btn-primary { background: var(--gc-teal); color: var(--gc-fg-inverse); font-weight: var(--gc-weight-bold); }
.btn-primary:hover:not(:disabled) { background: var(--gc-teal-80); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); opacity: .9; }
.btn-primary:disabled { opacity: .5; cursor: progress; }
.btn-secondary { background: var(--gc-white); color: var(--gc-teal); border-color: var(--gc-teal); }
.btn-secondary:hover { background: var(--gc-teal-light); }
.btn-quiet { background: none; color: var(--gc-fg-muted); border-color: var(--gc-rule); }
.btn-quiet:hover { color: var(--gc-slate-ink); border-color: var(--gc-rule-strong); }
.btn-block { width: 100%; }

/* ---------- wordmark ---------- */
/* Rendered as text rather than the shipped SVG: those files hard-position ".AI"
   at x=206 assuming Calibri metrics and drift in any other face. ADR-006. */
.wordmark { font-weight: var(--gc-weight-bold); letter-spacing: 0.04em;
  font-size: var(--gc-fs-h3); color: var(--gc-fg-inverse); }
.wordmark-ai { color: var(--gc-cyan-accent); }
.wordmark-navy { color: var(--gc-oxford-navy); }
.wordmark-navy .wordmark-ai { color: var(--gc-teal); }

/* ---------- three-pane shell ---------- */
.app { height: 100vh; overflow: hidden; }
.shell { display: grid; grid-template-columns: 212px 340px minmax(0, 1fr); height: 100vh; }
.pane { overflow-y: auto; min-width: 0; }

/* rail */
.rail { background: var(--gc-oxford-navy); color: var(--gc-fg-inverse);
  display: flex; flex-direction: column; padding: var(--gc-space-4) 0; overflow-y: auto; }
.rail-brand { padding: 0 var(--gc-space-4) var(--gc-space-4);
  border-bottom: 1px solid var(--gc-navy-90); margin-bottom: var(--gc-space-3);
  display: flex; flex-direction: column; gap: var(--gc-space-1); }
.rail-product { font-size: var(--gc-fs-caption); color: var(--gc-on-navy-muted); }
.rail-mark { display: none; width: 28px; height: 28px; }
.rail-nav { list-style: none; margin: 0; padding: 0 var(--gc-space-2); display: grid; gap: 2px; }
.rail-item { display: flex; align-items: center; gap: var(--gc-space-3); width: 100%;
  background: none; border: 0; color: var(--gc-on-navy-muted); font: inherit; cursor: pointer;
  padding: var(--gc-space-2) var(--gc-space-3); border-radius: var(--gc-radius-sm); text-align: left;
  transition: background-color var(--gc-dur-fast) var(--gc-ease), color var(--gc-dur-fast) var(--gc-ease); }
.rail-item:hover { background: var(--gc-navy-90); color: var(--gc-fg-inverse); }
.rail-item.is-active { background: var(--gc-navy-90); color: var(--gc-fg-inverse);
  box-shadow: inset 3px 0 0 var(--gc-cyan-accent); }
.rail-foot { margin-top: auto; padding: var(--gc-space-4) var(--gc-space-2) 0;
  border-top: 1px solid var(--gc-navy-90); display: grid; gap: var(--gc-space-2); }
.rail-meta { display: grid; gap: 2px; padding: 0 var(--gc-space-3) var(--gc-space-2);
  font-size: var(--gc-fs-caption); color: var(--gc-on-navy-muted); }
.rail-meta .gc-eyebrow { color: var(--gc-cyan-accent); }
.rail-meta-v { overflow-wrap: anywhere; }
.rail-meta code { color: var(--gc-cyan-accent); }
.rail-user { padding: 0 var(--gc-space-3); font-size: var(--gc-fs-small);
  color: var(--gc-fg-inverse); font-weight: var(--gc-weight-bold); }
.lang-toggle { display: flex; gap: var(--gc-space-1); padding: 0 var(--gc-space-3); }
.lang-btn { font: inherit; font-size: var(--gc-fs-caption); cursor: pointer;
  background: none; border: 1px solid var(--gc-navy-70); color: var(--gc-on-navy-muted);
  padding: 2px var(--gc-space-2); border-radius: var(--gc-radius-xs);
  transition: background-color var(--gc-dur-fast) var(--gc-ease); }
.lang-btn:hover { background: var(--gc-navy-90); color: var(--gc-fg-inverse); }
.lang-btn.is-active { background: var(--gc-cyan-accent); border-color: var(--gc-cyan-accent);
  color: var(--gc-oxford-navy); font-weight: var(--gc-weight-bold); }

/* list pane */
.pane-list { background: var(--gc-bg-soft); border-right: var(--gc-border-hair);
  display: flex; flex-direction: column; }
.composer { padding: var(--gc-space-3); background: var(--gc-white);
  border-bottom: var(--gc-border-hair); display: grid; gap: var(--gc-space-2); }
.composer textarea { font: inherit; resize: vertical; width: 100%;
  padding: var(--gc-space-2); border: var(--gc-border-strong);
  border-radius: var(--gc-radius-sm); color: var(--gc-fg-primary); background: var(--gc-white); }
.composer textarea:focus { border-color: var(--gc-teal); }
.composer-actions { display: flex; align-items: center; gap: var(--gc-space-2); }
.composer-status { font-size: var(--gc-fs-caption); color: var(--gc-fg-muted); }
.composer-model { display: grid; gap: 2px; }
.composer-model select { font: inherit; font-size: var(--gc-fs-caption); padding: var(--gc-space-1) var(--gc-space-2);
  border: var(--gc-border-strong); border-radius: var(--gc-radius-sm); background: var(--gc-white);
  color: var(--gc-fg-primary); font-family: var(--gc-font-mono); }
.composer-model select:focus { border-color: var(--gc-teal); }
.list-head { display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--gc-space-3) var(--gc-space-3) var(--gc-space-2); }
.list-count { font-size: var(--gc-fs-caption); color: var(--gc-fg-muted); }
.rows { list-style: none; margin: 0; padding: 0 0 var(--gc-space-4); }
.row { padding: var(--gc-space-2) var(--gc-space-3); border-left: 3px solid transparent;
  border-bottom: var(--gc-border-hair); cursor: pointer; display: grid; gap: 2px;
  transition: background-color var(--gc-dur-fast) var(--gc-ease); }
.row:hover { background: var(--gc-white); }
.row.is-active { background: var(--gc-white); border-left-color: var(--gc-teal); }
.row-top { display: flex; justify-content: space-between; gap: var(--gc-space-2);
  font-size: var(--gc-fs-caption); color: var(--gc-fg-muted); }
.row-provider { font-family: var(--gc-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-preview { font-size: var(--gc-fs-small); color: var(--gc-fg-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row.is-active .row-preview { font-weight: var(--gc-weight-bold); }
.rows-empty { padding: var(--gc-space-4) var(--gc-space-3); }

/* reading pane */
.pane-read { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.read-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--gc-space-5) var(--gc-space-8); }
.commitment { flex: 0 0 auto; margin: 0; padding: var(--gc-space-2) var(--gc-space-5);
  background: var(--gc-teal-wash); border-bottom: var(--gc-border-hair);
  color: var(--gc-slate-ink); font-size: var(--gc-fs-caption); }

/* Evidence dock. A citation opens the passage here instead of scrolling the reader
   two thousand pixels away from the draft it is checking. The full passage list
   below is untouched; "Show in list" jumps to it for anyone who wants it. */
.evidence { flex: 0 0 auto; max-height: 40%; overflow-y: auto;
  background: var(--gc-surface-card); border-top: 2px solid var(--gc-teal);
  box-shadow: var(--gc-shadow-lg); padding: var(--gc-space-3) var(--gc-space-5) var(--gc-space-4); }
.evidence.is-superseded { border-top-color: var(--gc-slate-ink); background: var(--gc-bg-soft); }
.evidence-head { display: flex; justify-content: space-between; align-items: center;
  gap: var(--gc-space-3); margin-bottom: var(--gc-space-2); }
.evidence-actions { display: flex; gap: var(--gc-space-2); }
.empty-state { padding: var(--gc-space-8) 0; max-width: 46ch; }
.empty-state h1 { margin-bottom: var(--gc-space-2); }

.pack { max-width: 88ch; padding-top: var(--gc-space-2); }
/* The corpus view is a six-column table, so it takes the full pane rather than the
   reading measure. Real series names ("annual_progress_report_2025_mandatory_tables")
   are far wider than the sample corpus was: without fixed widths the table overflowed
   and pushed STATUS, the column that carries vintage, out of sight. */
.corpus { max-width: none; padding-top: var(--gc-space-2); }
.corpus-table { table-layout: fixed; }
.corpus-table th:nth-child(1), .corpus-table td:nth-child(1) { width: 26%; }
.corpus-table th:nth-child(2), .corpus-table td:nth-child(2) { width: 22%; }
.corpus-table th:nth-child(3), .corpus-table td:nth-child(3) { width: 9%; }
.corpus-table th:nth-child(4), .corpus-table td:nth-child(4) { width: 11%; }
.corpus-table th:nth-child(5), .corpus-table td:nth-child(5) { width: 7%; }
.corpus-table th:nth-child(6), .corpus-table td:nth-child(6) { width: 25%; }
.corpus-table td { overflow-wrap: anywhere; }
/* th is nowrap globally, which makes LANGUAGE collide with STATUS in a fixed layout. */
.corpus-table th { white-space: normal; overflow-wrap: anywhere; }
.corpus-table code { font-size: var(--gc-fs-caption); overflow-wrap: anywhere; }
.corpus-table td:nth-child(6) .muted { display: block; margin-top: 2px; }
.pack-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--gc-space-4); padding-bottom: var(--gc-space-3); border-bottom: var(--gc-border-strong); }
.pack-meta { font-size: var(--gc-fs-caption); color: var(--gc-fg-muted); margin-top: 2px; }
.pack-actions { display: flex; gap: var(--gc-space-2); flex-shrink: 0; }

.sec { padding: var(--gc-space-5) 0; border-bottom: var(--gc-border-hair); }
.sec > h2 { padding-bottom: var(--gc-space-2); }
.sec > h3 { margin: var(--gc-space-3) 0 var(--gc-space-1); color: var(--gc-fg-muted); }
.bullets, .flags, .checklist { margin: 0; padding-left: var(--gc-space-4); }
.bullets li, .flags li { margin-bottom: var(--gc-space-1); }
.request-text { color: var(--gc-slate-ink); white-space: pre-wrap; }

.callout { padding: var(--gc-space-2) var(--gc-space-3); border-radius: var(--gc-radius-sm);
  font-size: var(--gc-fs-small); margin: var(--gc-space-3) 0; }
.callout-note { background: var(--gc-teal-wash); border-left: 3px solid var(--gc-teal);
  color: var(--gc-slate-ink); }
.callout-warn { background: var(--gc-bg-soft); border-left: 3px solid var(--gc-slate-ink);
  color: var(--gc-slate-ink); }
.callout-vintage { background: var(--gc-bg-soft); border-left: 3px solid var(--gc-slate-ink);
  color: var(--gc-fg-strong); font-weight: var(--gc-weight-bold); }

/* draft and citations */
.draft { white-space: pre-wrap; line-height: var(--gc-lh-loose); }
.cite { font-family: var(--gc-font-mono); font-size: 0.9em; color: var(--gc-teal);
  border-bottom: 1px solid transparent; cursor: pointer; text-decoration: none;
  padding: 0 1px; border-radius: var(--gc-radius-xs); }
.cite:hover { border-bottom-color: currentColor; }
/* Superseded citation: slate, underlined, and marked with a dagger so the signal
   survives greyscale printing and colour-vision deficiency. */
.cite.is-superseded { color: var(--gc-slate-ink); background: var(--gc-bg-soft);
  border-bottom: 2px solid var(--gc-slate); font-weight: var(--gc-weight-bold); }
.cite.is-superseded::after { content: "\2020"; margin-left: 1px; }
.needs-analyst { background: var(--gc-gold-wash); border: 1px solid var(--gc-oxford-gold);
  color: var(--gc-oxford-gold); border-radius: var(--gc-radius-xs); padding: 0 var(--gc-space-1);
  font-weight: var(--gc-weight-bold); font-size: 0.92em; }

/* vintage badges. Current is a quiet teal outline; superseded is a filled slate
   chip so the heavier mark is on the material that carries the risk. The fill
   uses --gc-slate-ink, not --gc-slate: slate on white is 3.0:1 and fails AA. */
.badge { display: inline-block; font-size: var(--gc-fs-eyebrow); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: var(--gc-weight-bold); padding: 1px var(--gc-space-2);
  border-radius: var(--gc-radius-xs); white-space: nowrap; }
.badge.current { color: var(--gc-teal); border: 1px solid var(--gc-teal-20); background: var(--gc-teal-wash); }
.badge.superseded { color: var(--gc-white); background: var(--gc-slate-ink); border: 1px solid var(--gc-slate-ink); }
/* Neither current nor superseded: a document for a particular year. Outlined rather than
   filled, so it reads as neutral against the teal of a live round and the filled slate of
   a superseded one. */
.badge.record { color: var(--gc-slate-ink); border: 1px dashed var(--gc-rule-strong); background: var(--gc-paper); }

/* tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--gc-fs-small); }
th { text-align: left; font-size: var(--gc-fs-eyebrow); letter-spacing: var(--gc-tracking-eyebrow);
  text-transform: uppercase; color: var(--gc-slate-ink); font-weight: var(--gc-weight-bold);
  padding: var(--gc-space-2); border-bottom: var(--gc-border-strong); white-space: nowrap; }
td { padding: var(--gc-space-2); border-bottom: var(--gc-border-hair); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--gc-table-alt); }
.num { font-family: var(--gc-font-mono); white-space: nowrap; }
/* Superseded rows lose the teal-tinted alternation and gain a slate rule. */
tbody tr.is-superseded, tbody tr.is-superseded:nth-child(even) { background: var(--gc-bg-soft); }
tbody tr.is-superseded td:first-child { box-shadow: inset 3px 0 0 var(--gc-slate-ink); }

.fig-source th { text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400;
  padding-top: var(--gc-space-4); border-bottom: 1px solid var(--gc-rule-strong); white-space: normal; }
.fig-source th > * { margin-right: var(--gc-space-2); }
.fig-source th strong { color: var(--gc-fg-strong); font-size: var(--gc-fs-small); }
.fig-source.is-superseded th { box-shadow: inset 3px 0 0 var(--gc-slate-ink); }
tbody tr.is-disputed td { background: var(--gc-gold-wash); }
.disagree { font-size: var(--gc-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: var(--gc-weight-bold); color: var(--gc-oxford-gold);
  border: 1px solid var(--gc-oxford-gold); border-radius: var(--gc-radius-xs); padding: 0 var(--gc-space-1); }

/* operator page: compact stat tiles */
.ops { max-width: none; padding-top: var(--gc-space-2); }
.ops-figures { display: flex; flex-wrap: wrap; gap: var(--gc-space-3); margin-bottom: var(--gc-space-3); }
.ops-stat { border: var(--gc-border-hair); border-top: 3px solid var(--gc-teal);
  border-radius: var(--gc-radius-sm); background: var(--gc-surface-card);
  box-shadow: var(--gc-shadow-sm); padding: var(--gc-space-2) var(--gc-space-3); min-width: 128px; }
.ops-stat .v { display: block; font-size: var(--gc-fs-h2); font-weight: var(--gc-weight-bold);
  color: var(--gc-fg-strong); font-family: var(--gc-font-mono); line-height: var(--gc-lh-tight); }
.ops-stat .k { display: block; font-size: var(--gc-fs-eyebrow); letter-spacing: var(--gc-tracking-eyebrow);
  text-transform: uppercase; color: var(--gc-slate-ink); margin-top: 2px; }
.ops-stat.warn { border-top-color: var(--gc-oxford-gold); }

/* passages */
.passages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gc-space-3); }
.passages li { border: var(--gc-border-hair); border-radius: var(--gc-radius-sm);
  background: var(--gc-surface-card); box-shadow: var(--gc-shadow-sm);
  padding: var(--gc-space-3); scroll-margin-top: var(--gc-space-8);
  transition: box-shadow var(--gc-dur-base) var(--gc-ease), border-color var(--gc-dur-base) var(--gc-ease); }
.passages li.superseded { border-left: 3px solid var(--gc-slate-ink); background: var(--gc-bg-soft); }
.passages li.current { border-top: 3px solid var(--gc-teal); }
.passages li.is-highlight { box-shadow: var(--gc-shadow-md); border-color: var(--gc-teal); }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gc-space-2);
  font-size: var(--gc-fs-caption); color: var(--gc-fg-muted); margin-bottom: var(--gc-space-2); }
.phead .n { font-family: var(--gc-font-mono); font-weight: var(--gc-weight-bold); color: var(--gc-fg-strong); }
.phead strong { color: var(--gc-fg-strong); font-size: var(--gc-fs-small); }
.ptext { font-size: var(--gc-fs-small); white-space: pre-wrap; color: var(--gc-fg-primary); }
.ptext mark { background: var(--gc-gold-soft); color: var(--gc-fg-strong);
  padding: 0 2px; border-radius: var(--gc-radius-xs); }

.flags .kind { font-family: var(--gc-font-mono); font-size: var(--gc-fs-caption);
  color: var(--gc-slate-ink); margin-right: var(--gc-space-2); }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--gc-space-2); }
.checklist li { display: flex; gap: var(--gc-space-2); align-items: flex-start; }
.checklist input { margin-top: 2px; accent-color: var(--gc-teal); }

/* ---------- login ---------- */
.login { display: grid; place-items: center; min-height: 100vh; background: var(--gc-bg-soft); padding: var(--gc-space-4); }
.login-card { width: 100%; max-width: 380px; background: var(--gc-surface-card);
  border: var(--gc-border-hair); border-top: 3px solid var(--gc-teal);
  border-radius: var(--gc-radius-md); box-shadow: var(--gc-shadow-sm); padding: var(--gc-space-6); }
.login-brand { margin-bottom: var(--gc-space-5); }
.login-card h1 { margin-bottom: var(--gc-space-2); }
.commitment-inline { position: static; margin: 0 0 var(--gc-space-5); padding: var(--gc-space-2) var(--gc-space-3);
  border: 0; border-left: 3px solid var(--gc-teal); background: var(--gc-teal-wash); }
.login-form { display: grid; gap: var(--gc-space-4); }
.field { display: grid; gap: var(--gc-space-1); }
.field input { font: inherit; padding: var(--gc-space-2); border: var(--gc-border-strong);
  border-radius: var(--gc-radius-sm); background: var(--gc-white); color: var(--gc-fg-primary); }
.field input:focus { border-color: var(--gc-teal); }
.lang-toggle-login { padding: var(--gc-space-5) 0 0; margin-top: var(--gc-space-5);
  border-top: var(--gc-border-hair); justify-content: center; }
.login .lang-btn { border-color: var(--gc-rule-strong); color: var(--gc-fg-muted); }
.login .lang-btn:hover { background: var(--gc-bg-soft); color: var(--gc-slate-ink); }
.login .lang-btn.is-active { background: var(--gc-teal); border-color: var(--gc-teal); color: var(--gc-white); }

/* ---------- responsive ---------- */
/* 900-1199px: the rail collapses to icons, the list pane narrows. Three panes hold. */
@media (max-width: 1199px) {
  .shell { grid-template-columns: 56px 280px minmax(0, 1fr); }
  .rail-product, .rail-meta { display: none; }
  .rail-item span, .rail-user { position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .rail-brand { padding: 0 0 var(--gc-space-3); align-items: center; }
  .wordmark { display: none; }
  .rail-mark { display: block; }
  .rail-item { justify-content: center; padding: var(--gc-space-2); }
  .lang-toggle { flex-direction: column; padding: 0 var(--gc-space-1); }
  .read-scroll { padding: 0 var(--gc-space-4) var(--gc-space-8); }
  .commitment, .evidence { padding-left: var(--gc-space-4); padding-right: var(--gc-space-4); }
}
/* Below 900px the three-pane model stops being usable. Panes stack; the rail
   becomes a horizontal bar. This is below the supported floor but must not break. */
@media (max-width: 899px) {
  .app { height: auto; overflow: visible; }
  .shell { grid-template-columns: 1fr; height: auto; }
  .pane { overflow-y: visible; }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: var(--gc-space-2) var(--gc-space-3); gap: var(--gc-space-3); }
  .rail-brand { border: 0; margin: 0; padding: 0; }
  .rail-mark { display: block; }
  .wordmark { display: none; }
  .rail-nav { display: flex; padding: 0; }
  .rail-foot { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: var(--gc-space-2); }
  .lang-toggle { flex-direction: row; padding: 0; }
  .pane-list { border-right: 0; border-bottom: var(--gc-border-strong); }
  .pack, .corpus { max-width: none; }
  .pane-read { display: block; overflow: visible; }
  .read-scroll { overflow: visible; }
  .evidence { max-height: none; position: sticky; bottom: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}