/* budget-exception: a stylesheet is a table of values, not branching logic. Split
   into screen (here) and print (print.css) rather than by component, because there
   are only three screens and the print sheet has to override wholesale. */

:root {
  --paper: #faf9f6;
  --surface: #ffffff;
  --ink: #14181c;
  --ink-soft: #4a5560;
  --ink-faint: #78838d;
  --rule: #e3e2dc;
  --rule-strong: #cfcec6;
  --accent: #26404e;          /* deep slate — headings, primary action */
  --accent-soft: #eef2f4;
  --disclose: #9a7b42;        /* gold — reserved for revealed information, nothing else */
  --disclose-soft: #fbf7ef;
  --alert: #9e2f26;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ONE content width for every area: the exercise, the record, the results view,
     the top bar and the progress rail all sit on the same left and right edge.
     880px keeps the whole column visible on a 1366px laptop, which is what the
     candidates are on, without a horizontal scrollbar at any zoom they are likely
     to use. Nothing inside should set its own max-width - that is what made the
     page look ragged, with 1080px headers over 820px tables over 720px textareas. */
  --content: 880px;
  --pad: 24px;
}

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

/* The `hidden` attribute only sets `display: none` at user-agent priority, so any
   explicit display rule silently beats it — `.gate` is `display: grid`, which left the
   access-code panel on screen underneath the closed notice. Screens are switched by
   toggling `hidden`, so this rule is what makes that work at all. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0; }

.noscript {
  margin: 0; padding: 16px 24px;
  background: var(--alert); color: #fff; font-size: 15px;
}

/* -------------------------------------------------------------------- gate */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}

.gate__panel {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 44px 40px 36px;
  /* Everything in the sign-in dialog is centred. The form is a grid, so its children
     stretch full width and their own text-align does the rest. */
  text-align: center;
}

.gate__eyebrow {
  margin: 0 0 18px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

.gate__title { font-size: 30px; margin-bottom: 14px; color: var(--accent); }

.gate__standfirst { margin: 0 0 30px; color: var(--ink-soft); font-size: 15px; }

.gate__form { display: grid; gap: 10px; }

.gate__label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  text-align: center;
}

.gate__input {
  font-family: var(--mono);
  font-size: 22px; letter-spacing: 0.22em; text-align: center; text-transform: uppercase;
  padding: 14px 12px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
}

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

.gate__error { margin: 4px 0 0; color: var(--alert); font-size: 14px; text-align: center; }

.gate__footnote {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-faint);
  text-align: center;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}

.topbar__inner {
  max-width: var(--content); margin: 0 auto; padding: 12px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.topbar__identity { display: flex; flex-direction: column; min-width: 0; }

.topbar__title {
  font-family: var(--serif); font-size: 15px; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar__candidate { font-size: 12px; color: var(--ink-faint); }

.topbar__status { display: flex; align-items: center; gap: 18px; }

.saveflag { font-size: 12px; color: var(--ink-faint); min-width: 74px; text-align: right; }

.timer { text-align: right; line-height: 1.1; }

.timer__value { display: block; font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }

.timer__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

.timer--warning .timer__value { color: var(--alert); }

.timer--over .timer__value { color: var(--alert); }
.timer--over .timer__label::after { content: " over"; }

/* -------------------------------------------------------------------- rail */

.rail {
  max-width: var(--content); margin: 0 auto; padding: 0 var(--pad) 10px;
  display: flex; gap: 6px;
}

.rail__step {
  flex: 1; height: 3px; background: var(--rule); position: relative;
}

.rail__step--done { background: var(--accent); }
.rail__step--current { background: var(--disclose); }

.rail__label {
  position: absolute; top: 8px; left: 0;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

/* ------------------------------------------------------------------- stage */

.stage { max-width: var(--content); margin: 0 auto; padding: 40px var(--pad) 120px; }

.intro { max-width: none; }
.intro h2 { font-size: 24px; color: var(--accent); margin-bottom: 16px; }
.intro p { color: var(--ink-soft); }
.intro ul { color: var(--ink-soft); padding-left: 20px; }
.intro li { margin-bottom: 8px; }

.round__head { margin-bottom: 28px; }

.round__eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; gap: 12px; align-items: baseline;
}

.round__guide { color: var(--rule-strong); }

.round__title { font-size: 28px; margin: 8px 0 12px; color: var(--accent); }

.round__standfirst { margin: 0; font-size: 17px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ blocks */

.block { margin-bottom: 24px; }
.block p { margin: 0 0 12px; }

.block__caption {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}

table { border-collapse: collapse; width: 100%; font-size: 15px; }

th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-strong); padding: 8px 14px 8px 0;
}

td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

tr td:first-child { color: var(--ink-soft); width: 32%; }

.table__footnote { font-size: 13px; color: var(--ink-faint); margin-top: 10px; font-family: var(--mono); }

.callout {
  border-left: 2px solid var(--rule-strong); padding: 4px 0 4px 18px;
  margin-bottom: 24px;
}

.callout--constraint { border-left-color: var(--alert); }

.callout__heading {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px;
  color: var(--ink-faint);
}

.callout--constraint .callout__heading { color: var(--alert); }

.callout p { margin: 0; color: var(--ink-soft); }

.org { display: flex; flex-wrap: wrap; gap: 28px; }

.org__group {
  border: 1px solid var(--rule); background: var(--surface);
  padding: 16px 20px; min-width: 240px;
}

.org__name {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}

.org__node { font-size: 14px; padding: 3px 0; color: var(--ink); }
.org__node--child { color: var(--ink-soft); padding-left: 6px; }

.metrics { display: flex; flex-wrap: wrap; gap: 14px; }

.metric {
  border: 1px solid var(--rule); background: var(--surface);
  padding: 16px 22px; min-width: 150px;
}

.metric__value { font-family: var(--serif); font-size: 34px; line-height: 1; }
.metric__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.metric--target .metric__value { color: var(--accent); }
.metric--benchmark .metric__value { color: var(--ink-faint); }

.regions { display: grid; gap: 2px; }

.region { background: var(--disclose-soft); padding: 14px 18px; }
.region__name { font-family: var(--serif); font-size: 16px; margin-bottom: 4px; }
.region__text { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ fields */

.step {
  border-top: 1px solid var(--rule-strong); margin-top: 34px; padding-top: 26px;
}

.step__heading { font-size: 20px; color: var(--accent); margin-bottom: 6px; }

.step__instruction { margin: 0 0 24px; color: var(--ink-soft); }

.field { margin-bottom: 28px; }

.field__label {
  display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px;
}

.field__instruction { font-size: 14px; color: var(--ink-faint); margin: -6px 0 12px; }

.choices { display: grid; gap: 8px; }

.choice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--rule-strong); background: var(--surface);
  padding: 13px 16px; cursor: pointer;
}

.choice:hover { border-color: var(--accent); }
.choice input { margin: 3px 0 0; accent-color: var(--accent); }
.choice--selected { border-color: var(--accent); background: var(--accent-soft); }

textarea {
  width: 100%; min-height: 120px; resize: vertical;
  font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--rule-strong); background: var(--surface);
}

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

.counter { font-size: 12px; color: var(--ink-faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
.counter--near { color: var(--alert); }

.matrix { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.matrix__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); padding: 9px 14px;
}

.matrix__label { font-size: 15px; }

.matrix__row select, .allocation select { min-width: 190px; }

select {
  font-family: var(--sans); font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
}

select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select[data-unset="true"] { color: var(--ink-faint); border-style: dashed; }

.allocation { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.alloc__row {
  display: grid; grid-template-columns: 1fr 74px 132px; align-items: center; gap: 14px;
  background: var(--surface); padding: 9px 14px;
}

.alloc__label { font-size: 15px; }

.alloc__input {
  font-family: var(--mono); font-size: 15px; text-align: right; padding: 7px 10px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.alloc__bar { height: 6px; background: var(--rule); position: relative; }
.alloc__bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }

.alloc__total {
  display: flex; justify-content: space-between; background: var(--surface);
  padding: 11px 14px; font-size: 14px;
}

.alloc__total strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.alloc__total--bad strong { color: var(--alert); }
.alloc__total--good strong { color: var(--accent); }

/* ----------------------------------------------------------------- reveal */

.reveal { margin-top: 34px; border-top: 2px solid var(--disclose); padding-top: 24px; }

.reveal__heading {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--disclose); margin-bottom: 16px;
}

.disclosure { list-style: none; padding: 0; margin: 0 0 8px; }

.disclosure li {
  padding: 12px 0 12px 20px; border-bottom: 1px solid var(--rule);
  position: relative; color: var(--ink);
}

.disclosure li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; background: var(--disclose);
}

.committed {
  border: 1px solid var(--rule); background: var(--surface);
  padding: 14px 18px; margin-bottom: 8px;
}

.committed__label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}

.committed__value { font-size: 15px; }
.committed__value em { color: var(--ink-soft); font-style: normal; }

/* ---------------------------------------------------------------- actions */

.actions {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.button {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 12px 26px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: #fff;
}

.button:hover:not(:disabled) { background: #1b2f3a; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.button:focus-visible { outline: 2px solid var(--disclose); outline-offset: 2px; }

.button--ghost { background: transparent; color: var(--accent); border-color: var(--rule-strong); }
.button--ghost:hover:not(:disabled) { background: var(--accent-soft); }

.actions__note { font-size: 13px; color: var(--ink-faint); max-width: 44ch; }

.error {
  color: var(--alert); font-size: 14px; margin-top: 14px;
  border-left: 2px solid var(--alert); padding-left: 12px;
}

/* ----------------------------------------------------------------- record */

.record { max-width: var(--content); margin: 0 auto; padding: 48px var(--pad) 120px; }

.record__masthead { border-bottom: 2px solid var(--accent); padding-bottom: 18px; margin-bottom: 28px; }

.record__kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.record__title { font-size: 28px; color: var(--accent); margin: 8px 0 4px; }

.record__meta {
  /* A four-up grid rather than a flex row: the fields have very different lengths
     (a name against "4m 22s") and flex left them running together at some widths. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.record__meta dt {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}

.record__meta dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 15px; }

/* The confirmation and the save control read as one block, not as loose text. */
.record__bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  padding: 18px 22px; margin: 28px 0 36px;
}

.record__bar p { margin: 0; color: var(--ink-soft); font-size: 15px; flex: 1 1 320px; }
.record__bar .button { flex: 0 0 auto; }
.record__bar .actions__note { flex: 1 1 100%; margin: 0; }

.record__section { margin-bottom: 34px; break-inside: avoid; }

.record__round {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 6px; margin-bottom: 18px;
}

.record__step { margin-bottom: 22px; }

.record__stepheading {
  font-family: var(--serif); font-size: 16px; margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}

.record__stamp { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); font-weight: 400; }

.record__entry { margin-bottom: 14px; }
.record__entrylabel { font-size: 13px; color: var(--ink-faint); margin-bottom: 3px; }
.record__entryvalue { font-size: 15px; white-space: pre-wrap; }
.record__entryvalue--choice { font-weight: 600; }

.record__group { font-size: 14px; margin-bottom: 5px; }
.record__group b { color: var(--accent); font-weight: 600; }

.record__alloc { display: grid; gap: 3px; max-width: 620px; margin-top: 4px; }
.record__allocrow { display: grid; grid-template-columns: 1fr 40px 100px; gap: 12px; align-items: center; font-size: 14px; }
.record__allocrow span:nth-child(2) { text-align: right; font-family: var(--mono); }
.record__allocbar { height: 5px; background: var(--rule); }
.record__allocbar span { display: block; height: 100%; background: var(--accent); }

.record__actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); }

.record__thanks { color: var(--ink-soft); margin-bottom: 30px; }

@media (max-width: 720px) {
  .record__meta { grid-template-columns: repeat(2, 1fr); }
  .alloc__row { grid-template-columns: 1fr 64px; }
  .alloc__bar { display: none; }
  .matrix__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .topbar__title { display: none; }
}

/* Scroll targets clear the sticky top bar. --scroll-offset is set from the bar's
   measured height in app.js; the fallback covers the first paint. */
[data-anchor] { scroll-margin-top: var(--scroll-offset, 96px); }

/* One candidate per page when the operator prints several records together. */
.record--page { break-after: page; page-break-after: always; }
.record--page:last-child { break-after: auto; page-break-after: auto; }