/* INFOCOP — the controlled visual direction.
 *
 * Executive, restrained, engineering-first. A briefing surface, not an admin dashboard: no
 * glow, no gauge, no chart that is not a governed interval, no severity colour invented to
 * make a page look decisive. Colour carries meaning in exactly one place — the four governed
 * readiness states — and every one of those is also carried by its WORD, so nothing depends
 * on seeing a hue.
 *
 * Palette: Army Olive #3B442A, Decision Gold #D4AF37, Slate #3F4348, Graphite #1A1D1F, white.
 */

:root {
  --olive: #3B442A;
  --olive-deep: #2A3120;
  --gold: #D4AF37;
  --gold-dim: #A98A24;
  --slate: #3F4348;
  --graphite: #1A1D1F;
  --paper: #FAFAF8;
  --panel: #FFFFFF;
  --line: #DDDCD6;
  --line-strong: #C3C2BA;
  --ink: #1A1D1F;
  --ink-mid: #4A4E52;
  --ink-quiet: #6E7377;

  --shell-h: 4.5rem;
  --measure: 74ch;
  --radius: 3px;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
          sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}

/* ---------------------------------------------------------------- accessibility basics */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--graphite); padding: 0.6rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }

a { color: var(--olive); text-underline-offset: 0.15em; }
a:hover { color: var(--olive-deep); }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------------- the shell */
.shell {
  display: grid;
  grid-template-columns: minmax(13rem, auto) 1fr minmax(11rem, auto);
  align-items: center;
  gap: 1.5rem;
  min-height: var(--shell-h);
  padding: 0 1.75rem;
  background: var(--olive);
  color: #F2F1EC;
  border-bottom: 3px solid var(--gold);
}

.brand .wordmark {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  color: #fff; text-decoration: none;
}
.brand .mark { color: var(--gold); font-size: 1.15rem; line-height: 1; }
.brand .word {
  font-size: 1.375rem; font-weight: 700; letter-spacing: 0.16em;
}
.brand .tagline {
  margin: 0.1rem 0 0 1.7rem;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B9BCAD;
}

.nav ul { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 0.55rem 0.95rem;
  color: #DEDDD5; text-decoration: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--gold-dim); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }

.who { text-align: right; }
.who .principal { margin: 0; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.who .roles {
  margin: 0; font-size: 0.6875rem; color: #B9BCAD; letter-spacing: 0.04em;
}
.who form { margin: 0.15rem 0 0; }

button.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font: inherit; font-size: 0.75rem; text-decoration: underline;
}
button.link:hover { color: #E8C860; }

/* --------------------------------------------------------------------- context bar */
.contextbar {
  background: var(--slate);
  border-bottom: 1px solid #2C3034;
  padding: 0.6rem 1.75rem;
}
.ctxform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem; }
.ctxform.wide { gap: 1.25rem; }
.ctxfield { display: flex; flex-direction: column; gap: 0.15rem; }
.ctxfield label {
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #B7BBBF;
}
.ctxfield input {
  background: #2F3337; border: 1px solid #565B60; color: #F2F1EC;
  padding: 0.3rem 0.5rem; border-radius: var(--radius); font: inherit; font-size: 0.8125rem;
}
.ctxform button {
  background: var(--gold); color: var(--graphite); border: 0;
  padding: 0.4rem 1rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
}
.ctxform button:hover { background: #E2BF48; }
.ctxnote { margin: 0; font-size: 0.6875rem; color: #A9AEB2; flex-basis: 100%; }

/* ------------------------------------------------------------------------- layout */
main { padding: 1.75rem; max-width: 108rem; margin: 0 auto; }

.grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  /* Equal heights across a row: ragged panel bottoms read as unfinished on a briefing
     display. The asymmetric two-column layouts below keep their natural heights. */
  align-items: stretch;
}
.grid.three { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); align-items: start; }
.span2 { grid-column: span 1; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.panel h1 { font-size: 1.375rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.panel h2 {
  font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 0.75rem; font-weight: 700;
}
.panel h2:not(:first-child) { margin-top: 1.75rem; }
.panel h3 {
  font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 1.25rem 0 0.5rem;
}

.lead { color: var(--ink-mid); margin: 0 0 0.75rem; max-width: var(--measure); }
.body { max-width: var(--measure); }
.note {
  font-size: 0.75rem; color: var(--ink-quiet); margin: 0.75rem 0 0;
  max-width: var(--measure);
}
.hint { font-size: 0.6875rem; color: var(--ink-quiet); margin: 0.2rem 0 0; }
.eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 0.25rem; font-weight: 600;
}

/* ------------------------------------------------------------------- readiness hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  gap: 2rem; align-items: center;
  background: var(--graphite); color: #F2F1EC;
  border-radius: var(--radius); border-left: 6px solid var(--ink-quiet);
  padding: 1.75rem 2rem; margin-bottom: 1.25rem;
}
.herolabel {
  margin: 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #9AA0A5;
}
.herostate {
  margin: 0.25rem 0 0.6rem;
  /* An h1: it is the subject of the page, not a decorative number. */
  font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05;
}
.heroq { margin: 0; color: #C7CACD; max-width: var(--measure); }
.heroright .facts { color: #C7CACD; }
.heroright dt { color: #9AA0A5; }
.heroright dd { color: #F2F1EC; }

/* The four governed states. Colour is a SECOND signal; the word is always present. */
.state-ready { border-left-color: #5C8A3C; }
.state-ready .herostate, .statechip.state-ready { color: #8FCB63; }
.state-accepted { border-left-color: var(--gold); }
.state-accepted .herostate, .statechip.state-accepted { color: var(--gold); }
.state-not-ready { border-left-color: #B4562F; }
.state-not-ready .herostate, .statechip.state-not-ready { color: #E0824F; }
.state-insufficient { border-left-color: #6E7377; }
.state-insufficient .herostate, .statechip.state-insufficient { color: #AEB3B7; }
.state-unknown { border-left-color: var(--ink-quiet); }

.statechip {
  display: inline-block; margin: 0;
  background: var(--graphite); color: #F2F1EC;
  padding: 0.4rem 0.9rem; border-radius: var(--radius);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em;
  border-left: 4px solid var(--ink-quiet);
}
.statechip.state-ready { border-left-color: #5C8A3C; }
.statechip.state-accepted { border-left-color: var(--gold); }
.statechip.state-not-ready { border-left-color: #B4562F; }
.statechip.state-insufficient { border-left-color: #6E7377; }

.decisionhead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.decisionhead h1 { margin: 0 0 0.35rem; font-size: 1.625rem; letter-spacing: -0.015em; }
.askhead { margin-bottom: 1.25rem; }
.askhead h1 { margin: 0 0 0.4rem; font-size: 1.625rem; letter-spacing: -0.015em; }

/* --------------------------------------------------------------------------- facts */
.facts { margin: 0; }
.facts > div {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 0; }
.facts.compact > div { padding: 0.25rem 0; }
.facts dt {
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-quiet); font-weight: 600;
}
.facts dd { margin: 0; }
.facts.mono dd { font-family: var(--mono); font-size: 0.75rem; word-break: break-all; }

/* ----------------------------------------------------------------- readiness basis */
.basis { list-style: none; margin: 0; padding: 0; }
.basis li {
  padding: 0.6rem 0 0.6rem 1rem; border-left: 3px solid var(--line-strong);
  margin-bottom: 0.5rem;
}
.basis li.met { border-left-color: #5C8A3C; }
.basis li.unmet { border-left-color: #B4562F; }
/* The status word is in the MARKUP, not generated here: assistive technology does not
   reliably announce ::before content, and it vanishes if the stylesheet does. CSS styles the
   word; it does not supply it. */
.status {
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: 0.4rem; font-weight: 700;
}
.basis li.met .status { color: var(--ink-quiet); }
.basis li.unmet .status { color: #A24B29; }
.basis li.met .status::after, .basis li.unmet .status::after { content: " —"; }
.basis.quiet li { opacity: 0.85; }
.stmt { margin: 0; font-weight: 500; }
.detail { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--ink-mid); }

.subordinate { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.subordinate summary {
  cursor: pointer; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-quiet); font-weight: 600;
}
.subordinate[open] summary { margin-bottom: 0.6rem; }

/* --------------------------------------------------------------------------- lists */
.findinglist, .recordlist, .answerlist, .plainlist, .keylist, .gaps, .suggestions {
  list-style: none; margin: 0; padding: 0;
}
.findinglist li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.findinglist li:last-child { border-bottom: 0; }
.findinglist a { text-decoration: none; display: block; }
.findinglist a:hover .fsummary { text-decoration: underline; }
.rule {
  display: inline-block; font-family: var(--mono); font-size: 0.6875rem;
  background: var(--olive); color: #F2F1EC; padding: 0.1rem 0.45rem;
  border-radius: var(--radius); margin-right: 0.5rem; letter-spacing: 0.02em;
}
.fsummary { color: var(--ink); }
.fmeta { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--ink-quiet); }
.findinglist.tight li { padding: 0.4rem 0; }

.recordlist li { border-bottom: 1px solid var(--line); }
.recordlist a { display: block; padding: 0.7rem 0; text-decoration: none; }
.recordlist a:hover .rq { text-decoration: underline; }
.rq { display: block; font-weight: 600; color: var(--ink); }
.rdec { display: block; color: var(--ink-mid); font-size: 0.875rem; }
.rmeta { display: block; font-size: 0.75rem; color: var(--ink-quiet); margin-top: 0.15rem; }

.answerlist li { border-bottom: 1px solid var(--line); }
.answerlist a { display: block; padding: 0.55rem 0; text-decoration: none; }
.aq { display: block; color: var(--ink); font-size: 0.875rem; }
.ameta { display: block; font-size: 0.6875rem; color: var(--ink-quiet); }

.plainlist li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.plainlist li:last-child { border-bottom: 0; }
.keylist { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.keylist li {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.3rem 0.6rem; background: #F4F3EF;
}

.gaps li { padding: 0.4rem 0; border-left: 3px solid #B4562F; padding-left: 0.8rem;
  margin-bottom: 0.4rem; }
.gaprole { font-weight: 600; margin-right: 0.4rem; }
.req { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #A24B29; font-weight: 700; }

.suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.suggestions form { margin: 0; }
.suggestions button {
  background: #F1F0EA; border: 1px solid var(--line-strong); color: var(--olive);
  padding: 0.35rem 0.7rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 0.8125rem; text-decoration: none;
}
.suggestions button:hover { background: #E8E7DF; }

/* ------------------------------------------------------------------- governed trace */
.trace { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.trace .step {
  display: grid; grid-template-columns: 0.35rem 6.5rem 1fr; gap: 0 0.9rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.trace .step:last-child { border-bottom: 0; }
.trace .prog { background: var(--olive); border-radius: 2px; align-self: stretch; }
.trace .step.supporting .prog { background: var(--line-strong); }
.trace .progname {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-quiet);
  padding-top: 0.15rem; word-break: break-all;
}
/* NOT uppercased. The role is governed data, and governed type names are CamelCase:
   `text-transform: uppercase` turned OperationalNeed into OPERATIONALNEED, which a reader has
   to decipher rather than read. Hierarchy comes from size, weight and colour instead. */
.steprole {
  margin: 0; font-size: 0.75rem; letter-spacing: 0.02em;
  color: var(--ink-quiet); font-weight: 700;
}
.steprole .etype {
  margin-left: 0.5rem; letter-spacing: 0.02em; text-transform: none; font-weight: 400;
  color: var(--ink-quiet); font-style: italic;
}
.stepname { margin: 0.1rem 0 0; }
.key {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--olive-deep);
  margin-right: 0.4rem;
}
.via { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--ink-quiet); }
.cites { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cite {
  font-family: var(--mono); font-size: 0.6875rem;
  background: #F1F0EA; border: 1px solid var(--line);
  padding: 0.05rem 0.4rem; border-radius: var(--radius);
  color: var(--slate); text-decoration: none;
  /* A governed finding key can be long. It wraps inside the chip rather than forcing the
     chip to a second full-width block, and it is never truncated: a citation a reader
     cannot read in full is not a citation. */
  max-width: 100%; overflow-wrap: anywhere; line-height: 1.35;
}
a.cite:hover { background: #E6E5DD; color: var(--olive-deep); }
.completion { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--ink-mid); }
.etype { font-size: 0.75rem; color: var(--ink-quiet); }

.pill {
  display: inline-block; background: var(--olive); color: #F2F1EC;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.6875rem; letter-spacing: 0.04em; margin-right: 0.3rem;
  font-family: var(--mono);
}

/* -------------------------------------------------------------------------- Voice */
.answer {
  margin-top: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; background: #FCFCFA;
  border-left: 4px solid var(--olive);
}
.answer.status-refused_out_of_record,
.answer.status-denied_by_role,
.answer.status-refused_unclassified_question { border-left-color: var(--gold); }
.answer h2 { font-size: 1.0625rem; text-transform: none; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 0.6rem; }
.answernote {
  background: #F4F2E8; border-left: 3px solid var(--gold-dim);
  padding: 0.6rem 0.85rem; margin: 0 0 1rem; font-size: 0.875rem; color: var(--ink-mid);
  max-width: var(--measure);
}
.claims { margin: 0 0 1rem; padding-left: 1.2rem; }
.claims li { margin-bottom: 0.75rem; }
.claims.tight li { margin-bottom: 0.4rem; }
.claimtext { margin: 0; max-width: var(--measure); }
.claimmeta { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem;
  align-items: center; }
.tier {
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-quiet);
}
.governance {
  margin: 1rem 0 0; padding: 0.7rem 0.9rem; background: #F1F0EA;
  border-left: 3px solid var(--olive); font-size: 0.8125rem; max-width: var(--measure);
}

/* ---------------------------------------------------------------------- change table */
.changetable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.changetable th {
  text-align: left; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-quiet); border-bottom: 2px solid var(--line-strong);
  padding: 0.4rem 0.6rem 0.4rem 0;
}
.changetable td { padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.cat { font-family: var(--mono); font-size: 0.6875rem; color: var(--slate); }
.chg {
  display: inline-block; font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; padding: 0.05rem 0.4rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}
.chg-added { color: #3E6B28; border-color: #9FBF8C; }
.chg-removed { color: #8E4526; border-color: #D0A48F; }
.chg-changed { color: #7A6212; border-color: #D5C283; }
.changestates { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 1rem; }
.arrow { color: var(--ink-quiet); font-size: 1.25rem; }
.changed { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-quiet); }
.count {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-quiet);
  margin-left: 0.4rem; letter-spacing: 0;
}

/* -------------------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.tlkey { margin: 0 0 0.25rem; }
.track {
  position: relative; height: 0.7rem; background: #F1F0EA;
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
}
/* No JavaScript: the bar spans the track and the exact instants below it still say the
   truth. With JavaScript the governed positions are applied. */
.bar { height: 100%; background: var(--olive); width: 100%; }
.bar.inactive { background: var(--line-strong); }
.bar.open-start { border-left: 3px dashed var(--gold); }
.bar.open-end { border-right: 3px dashed var(--gold); }
.tlmeta { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--ink-quiet);
  font-family: var(--mono); }

/* ---------------------------------------------------------------------------- forms */
.field { margin-bottom: 0.9rem; }
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field label {
  display: block; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-quiet); font-weight: 700; margin-bottom: 0.2rem;
}
.field input, .field textarea {
  width: 100%; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.875rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.field textarea { resize: vertical; }
button.primary, .button.primary {
  background: var(--olive); color: #fff; border: 0;
  padding: 0.55rem 1.3rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  text-decoration: none; display: inline-block;
}
button.primary:hover, .button.primary:hover { background: var(--olive-deep); }
.button {
  display: inline-block; padding: 0.45rem 1rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); text-decoration: none; color: var(--olive);
  background: #F4F3EF; font-size: 0.8125rem; font-weight: 600;
}
.button:hover { background: #E9E8E0; }
.actions { margin: 1rem 0 0; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.recordform { max-width: 46rem; }
.askform { max-width: 46rem; }

/* --------------------------------------------------------------------------- login */
.loginpage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: 3rem; align-items: center;
  min-height: 82vh; max-width: 72rem; margin: 0 auto; padding: 2rem 0;
}
.loginbrand .mark { color: var(--gold); font-size: 2rem; margin: 0; }
.loginbrand h1 {
  font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: 0.12em; margin: 0.25rem 0 0.5rem;
  color: var(--olive);
}
.loginbrand .tagline {
  margin: 0 0 1.25rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.8125rem; color: var(--ink-quiet);
}
.loginbrand .promise {
  margin: 0; font-size: 1.125rem; color: var(--ink-mid); max-width: 34ch;
  border-left: 3px solid var(--gold); padding-left: 1rem;
}
.loginform {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem;
}
.loginform h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.formerror {
  background: #F7ECE7; border-left: 3px solid #B4562F; padding: 0.6rem 0.85rem;
  margin: 0 0 1rem; font-size: 0.875rem;
}

/* --------------------------------------------------------------------------- states */
.limited {
  background: #F4F2E8; border-left: 3px solid var(--gold-dim);
  padding: 0.7rem 0.9rem; margin: 1rem 0 0; font-size: 0.8125rem;
  max-width: var(--measure);
}
.limitedpanel { border-left: 4px solid var(--gold); }
.drawer { max-width: 72rem; }

.errorpage { max-width: 42rem; margin: 4rem auto; text-align: center; }
.errcode {
  font-family: var(--mono); font-size: 3.5rem; font-weight: 700; margin: 0;
  color: var(--line-strong);
}
.errorpage h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
.errdetail { color: var(--ink-mid); max-width: var(--measure); margin: 0 auto 1rem; }
.errkind { font-size: 0.8125rem; color: var(--ink-quiet); }
code { font-family: var(--mono); font-size: 0.8125em; }
.mono { font-family: var(--mono); }

.foot {
  border-top: 1px solid var(--line); margin-top: 2.5rem;
  padding: 1.25rem 1.75rem; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.75rem; color: var(--ink-quiet);
}
.foot p { margin: 0; }
.foot .build { font-family: var(--mono); }

/* ------------------------------------------------------------------------ responsive */
/* Desktop and the briefing display come first. The narrower breakpoints reflow; they do not
   reduce the desktop layout to a single mobile column and call it responsive. */
@media (max-width: 1180px) {
  .grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr auto; row-gap: 0.5rem; padding: 0.75rem 1.25rem; }
  .nav { grid-column: 1 / -1; order: 3; }
  .nav ul { flex-wrap: wrap; }
  main { padding: 1.25rem; }
  .loginpage { grid-template-columns: 1fr; min-height: auto; gap: 2rem; }
  .hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .field2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .facts > div { grid-template-columns: 1fr; gap: 0.1rem; }
  /* The step STACKS here. A previous rule declared two columns while the step still had
     three children, so the body landed in an implicit third column a few characters wide and
     every governed key broke across lines. Named areas make the intent explicit. */
  .trace .step {
    grid-template-columns: 0.35rem 1fr;
    grid-template-areas: "band prog" "band body";
    column-gap: 0.7rem;
  }
  .trace .prog { grid-area: band; }
  .trace .progname { grid-area: prog; font-size: 0.625rem; padding-top: 0; }
  .trace .stepbody { grid-area: body; min-width: 0; }
  .changetable { display: block; overflow-x: auto; }
}

/* A very large briefing display: more room, not merely bigger text. */
@media (min-width: 1800px) {
  html { font-size: 17px; }
  main { max-width: 120rem; }
  /* The sign-in screen is the first thing a briefing audience sees. At this size the default
     block sat small in a field of white and the promise broke mid-phrase. The brand column is
     capped so the two halves stay together, and the promise is given room to read as one
     line. */
  .loginpage {
    max-width: 76rem; gap: 4rem;
    grid-template-columns: minmax(0, 1.1fr) 30rem;
  }
  .loginform { padding: 2.75rem; }
  .loginform h2 { font-size: 1.375rem; margin-bottom: 1.25rem; }
  .loginbrand .promise { font-size: 1.5rem; max-width: 44ch; }
  .field input { font-size: 1rem; padding: 0.7rem 0.8rem; }
  .trace .step { grid-template-columns: 0.35rem 8rem 1fr; }
}