/* Guidon — survey readiness console.
 *
 * Design intent: an *instrument*, not a dashboard. A compliance survey is worked from
 * paper checklists, so the interface reads like a better checklist — bone paper, hairline
 * and double rules, letterspaced form labels, tabular numerals. Colour is spent only where
 * it changes what someone does: a missing document, an overdue certification.
 *
 * Deliberately absent: no seal, no eagle, no flag motif, no "VA" or "GI Bill" in the
 * branding. Trademark & Seal is scored review area 4 (VBA 20-14-04, 38 CFR 1.9) and
 * misusing it in our own product would be disqualifying — see BUSINESS_PLAN.md §6.
 *
 * No web fonts, no build step, no CDN: the console has to run on a laptop in a room with
 * a surveyor in it. Character comes from scale, rules and spacing instead.
 */

:root {
  color-scheme: light dark;

  --paper:        #F6F3EC;
  --surface:      #FFFDF8;
  --surface-sunk: #EFEBE1;
  --ink:          #16181C;
  --ink-2:        #464C55;
  --ink-3:        #7B818A;
  --rule:         #DED8CA;
  --rule-strong:  #BEB5A0;

  --brand:        #1E3A54;
  --brand-soft:   #E6ECF2;
  --signal:       #A8431A;   /* missing, overdue, blocking */
  --signal-soft:  #FAEBE3;
  --clean:        #2E6A4E;   /* satisfied, timely */
  --clean-soft:   #E6F0EA;
  --warn:         #7E6212;   /* stale, due soon, unverified source */
  --warn-soft:    #F7EFD8;

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --gutter: 22px;
  --rail-w: 262px;
  --strip-h: 58px;   /* reserved so the fixed strip never covers content */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0F1115;
    --surface:      #171A20;
    --surface-sunk: #1D2128;
    --ink:          #E9E5DB;
    --ink-2:        #ADB3BC;
    --ink-3:        #7E858F;
    --rule:         #2A2F37;
    --rule-strong:  #414852;

    --brand:        #8FB3D4;
    --brand-soft:   #1B2733;
    --signal:       #E38A5C;
    --signal-soft:  #2E1E17;
    --clean:        #74C097;
    --clean-soft:   #16261E;
    --warn:         #D8B75E;
    --warn-soft:    #2A2415;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The letterspaced micro-label: what makes a government form look like one. */
.label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--brand);
        color: var(--surface); padding: 10px 16px; z-index: 60; }
.skip:focus { left: 0; }

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

.nil { color: var(--ink-3); }
.flag-invalid { color: var(--signal); font-weight: 700; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex; align-items: flex-end; gap: var(--gutter);
  padding: 16px var(--gutter) 11px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }

/* Source asset is GCLogoMain.png at the repo root; this is the 200px derivative, sized
   down so it stays crisp on a 3x display. Width and height are set in the markup too, so
   the masthead does not reflow while it loads.
 *
 * No dark-mode treatment: the artwork carries its own white keyline, which separates the
 * navy fills from a dark ground. An earlier revision needed a CSS halo here; stacking one
 * on top of the keyline now would only blur it. */
.logo { width: 56px; height: auto; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: 0.24em; }
.brand-sub { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
             color: var(--ink-3); margin-top: 3px; }

/* Establishment identity reads as one line: which school, its facility code, its type.
   Stacked, the three fields bunched into a narrow column and left the masthead lopsided. */
.masthead-facility { line-height: 1.3; }
.masthead-facility .label { margin-bottom: 4px; }
.facility-row { display: flex; align-items: stretch; gap: 7px; flex-wrap: wrap; }
.facility-chip {
  display: inline-flex; align-items: center; font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0 10px;
  background: var(--surface); white-space: nowrap;
}

.masthead-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 8px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.btn:hover { border-color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-big { font-size: 14px; padding: 12px 20px; }
.btn-small { font-size: 11px; padding: 4px 9px; }

.bell { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); flex: none; }
.pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  border-radius: 9px; padding: 1px 7px; color: var(--paper);
}
.pill-overdue { background: var(--signal); }
.pill-soon { background: var(--warn); color: #1a1a1a; }

.double-rule { padding: 0 var(--gutter); }
.double-rule i { display: block; height: 1px; background: var(--rule-strong); }
.double-rule i + i { margin-top: 3px; background: var(--rule); }

/* -------------------------------------------------------------------- tabs */

.tabs {
  display: flex; gap: 2px; padding: 12px var(--gutter) 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.tabs a {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2); text-decoration: none;
  padding: 8px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 2px 2px 0 0; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); background: var(--surface-sunk); }
.tabs a[aria-current="page"] {
  background: var(--surface); border-color: var(--rule);
  border-bottom: 1px solid var(--surface); color: var(--ink);
}

/* Full bleed between the gutters. Capped at 100ch this sat as a narrow column with a
   wide empty band to its right, which read as a layout mistake rather than fine print. */
.disclaimer {
  margin: 12px 0 0; padding: 10px var(--gutter);
  font-size: 11px; line-height: 1.5; color: var(--ink-3);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.disclaimer strong { color: var(--ink-2); }

/* ------------------------------------------------------------- work queue */

.queue-panel {
  margin: 14px var(--gutter) 0; border: 1px solid var(--rule);
  border-left: 4px solid var(--signal); background: var(--surface); padding: 14px 16px;
}
.queue-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
              border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 12px; }
.queue-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
                 text-transform: uppercase; margin: 0; }
.queue-group { margin-bottom: 16px; }
.queue-group h3 { margin: 0 0 8px; }

.notes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.note { border: 1px solid var(--rule); border-left: 4px solid var(--ink-3); background: var(--surface); }
.note-overdue { border-left-color: var(--signal); }
.note-due_soon { border-left-color: var(--warn); }
.note-upcoming { border-left-color: var(--clean); }

.note-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
             padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.note-urgency { font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em;
                text-transform: uppercase; }
.note-overdue .note-urgency { color: var(--signal); }
.note-due_soon .note-urgency { color: var(--warn); }
.note-upcoming .note-urgency { color: var(--clean); }
.note-subject { font-size: 13px; font-weight: 600; }
.note-due { margin-left: auto; font-size: 11px; color: var(--ink-3); }

.note-body { padding: 10px 12px; }
.note-body strong { font-size: 13.5px; }
.note-body p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); }
.note-action { color: var(--ink) !important; font-weight: 500; }
.note-foot { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 12px;
             border-top: 1px solid var(--rule); background: var(--surface-sunk); }

/* Citation stamp — every compliance string carries its citation (CLAUDE.md §19), and
   giving it its own typographic treatment makes that visible rather than merely true. */
.stamp {
  font-family: var(--font-mono); font-size: 10.5px; border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 2px 7px; color: var(--ink-2); background: var(--surface);
}
.stamp-owner { border-style: dashed; }

/* -------------------------------------------------------------------- view */

.view { padding: 16px var(--gutter) calc(var(--strip-h) + 28px); }
.view:focus { outline: none; }
.loading, .empty { color: var(--ink-3); padding: 34px 0; }

.section { margin-top: 22px; }
.section-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px;
}
.section-head h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
                   text-transform: uppercase; margin: 0; }
.section-note { font-size: 11px; color: var(--ink-3); margin-left: auto; }

.hint {
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  padding: 11px 14px; font-size: 12.5px; margin: 14px 0 0; color: var(--ink-2);
}

/* ---------------------------------------------------------------- meter */

.meter { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.meter-bar { flex: 1; height: 6px; background: var(--surface-sunk);
             border: 1px solid var(--rule); }
.meter-bar i { display: block; height: 100%; background: var(--clean); }
.meter-text { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.owed { margin-bottom: 12px; }
.owed ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex;
           gap: 8px; flex-wrap: wrap; }
.owed li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--rule-strong);
           border-radius: 2px; padding: 4px 9px; font-size: 12px; background: var(--surface); }
.owed b { color: var(--signal); }

/* ------------------------------------------------------- requirement table */

.reg { width: 100%; border-collapse: collapse; background: var(--surface); }
.reg th, .reg td { padding: 9px 12px; border-bottom: 1px solid var(--rule);
                   vertical-align: top; text-align: left; }
.reg thead th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.reg tbody th { font-weight: 500; }
.reg tr.row-outstanding th, .reg tr.row-outstanding td { background: var(--signal-soft); }

.req-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.req-desc { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px;
            max-width: 68ch; }
.req-note { display: block; font-size: 11.5px; color: var(--signal); margin-top: 4px; }
.req-naming { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }

.col-owner { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.col-files { min-width: 170px; }
.col-cite { max-width: 220px; }

.file { display: block; font-size: 11px; color: var(--ink-2); word-break: break-all; }

/* 38 USC 3690(c) is the SCO's leverage with a department that will not hand over a
   record. It belongs next to the item, not in a help page (CLAUDE.md §11). */
.authority { margin-top: 6px; }
.authority summary { font-size: 11.5px; color: var(--brand); cursor: pointer; font-weight: 600; }
.authority p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2);
               border-left: 2px solid var(--brand); padding-left: 9px; max-width: 62ch; }

.chip {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid; border-radius: 2px;
  white-space: nowrap;
}
.chip-received, .chip-upcoming { color: var(--clean); border-color: var(--clean); background: var(--clean-soft); }
.chip-missing, .chip-overdue { color: var(--signal); border-color: var(--signal); background: var(--signal-soft); }
.chip-needs_update, .chip-due_soon, .chip-unverified { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.chip-not_applicable { color: var(--ink-3); border-color: var(--rule-strong); background: var(--surface-sunk); }

/* ------------------------------------------------------------------- split */

.split { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
         gap: var(--gutter); align-items: start; }

.rail { border: 1px solid var(--rule); background: var(--surface);
        position: sticky; top: 12px;
        max-height: calc(100vh - var(--strip-h) - 28px); overflow-y: auto; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between;
             padding: 11px 12px; border-bottom: 1px solid var(--rule); }
.rail-count { font-size: 11px; color: var(--ink-3); }
.roster { list-style: none; margin: 0; padding: 0; }
.roster .roster-pick {
  width: 100%; display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  gap: 9px; background: none; border: 0; border-left: 3px solid transparent;
  padding: 8px 11px 8px 9px; font: inherit;
  text-align: left; color: inherit; cursor: pointer;
}
.roster .roster-pick:hover { background: var(--surface-sunk); }
.roster .roster-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.roster .roster-pick[aria-current="true"] {
  border-left-color: var(--brand); background: var(--brand-soft);
}
.seq { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.who { min-width: 0; }
.who-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.who-meta { font-size: 10.5px; color: var(--ink-3); }

/* The swallowtail from the crest's guidon, reused as a status marker, so the mark carries
   meaning rather than only decorating the masthead. */
.glyph { width: 11px; height: 11px; flex: none; display: inline-block; }
.glyph-flag { background: var(--signal); clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.glyph-clean { border: 1.5px solid var(--clean); border-radius: 50%; height: 9px; width: 9px; }

.detail { min-width: 0; }
/* Identity, then the facts, then the actions - the same three-part shape as the packet
   hero, so a trainee record and a packet read as the same kind of object.

   The facts used to be plain blocks with no rule of their own, so they stacked into a
   four-row column and left the rest of a wide header empty. */
.student-head { border: 1px solid var(--rule); border-top: 3px solid var(--brand);
                background: var(--surface); padding: 13px 16px; }
.student-name { font-size: 20px; font-weight: 650; margin: 0 0 3px; }

.student-facts {
  display: flex; flex-wrap: wrap; gap: 12px 2.75rem;
  flex: 1; min-width: 0;
  /* The rule belongs to the facts, not the name, so a student record - which has no
     facts - does not show a divider with nothing after it. */
  padding-left: 28px; border-left: 1px solid var(--rule);
}
.fact { min-width: 5.5rem; }
.fact-value {
  display: block; font-family: var(--font-mono); font-size: 15px;
  margin-top: 3px; color: var(--ink); white-space: nowrap;
}

/* ------------------------------------------------------------------ packet */

/* Verdict, then the facts, then the action. The facts are sized to their content and
   sit together behind a hairline rather than being stretched across whatever width the
   monitor happens to have - spread out, they stop reading as one group and the first of
   them collides with the verdict. */
.packet-hero {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 30px;
  border: 1px solid var(--rule); border-left: 5px solid var(--signal);
  background: var(--surface); padding: 18px 20px;
}
.packet-hero.is-ready { border-left-color: var(--clean); }

.packet-verdict-block { padding-right: 30px; border-right: 1px solid var(--rule); }
.packet-verdict { display: block; font-size: 21px; font-weight: 650; margin-top: 4px; }
.is-blocked .packet-verdict { color: var(--signal); }
.is-ready .packet-verdict { color: var(--clean); }

.packet-cells { display: flex; flex-wrap: wrap; gap: 12px 3rem; }
.packet-cell { min-width: 5.5rem; }
.packet-cell strong { display: block; font-size: 17px; margin-top: 3px; }
.packet-cell .is-quiet { color: var(--ink-3); font-weight: 600; font-size: 14px; }

.packet-action { white-space: nowrap; justify-self: end; }

.packet-hero .packet-warn {
  grid-column: 1 / -1;
  max-width: 110ch;
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.55;
}
.packet-sub { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }

@media (max-width: 68rem) {
  .packet-hero { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .packet-verdict-block { padding-right: 0; padding-bottom: 12px;
                          border-right: 0; border-bottom: 1px solid var(--rule); }
  .packet-action { justify-self: start; }
}

.problems { list-style: none; margin: 12px 0 0; padding: 0; }
.problems li { display: flex; gap: 11px; align-items: baseline; padding: 8px 12px;
               border: 1px solid var(--rule); border-left: 3px solid var(--signal);
               background: var(--surface); margin-bottom: 6px; font-size: 12.5px; }
.problems-quiet li { border-left-color: var(--ink-3); color: var(--ink-2); }
.problem-code { font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
                color: var(--signal); white-space: nowrap; }

.batch { border: 1px solid var(--rule); background: var(--surface); margin-top: 12px; }
.batch-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
              padding: 10px 13px; border-bottom: 1px solid var(--rule);
              background: var(--surface-sunk); }
.batch-head .mono { font-size: 12px; color: var(--ink-2); margin-right: auto; }
.batch-files { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.batch-files li { padding: 6px 13px; border-bottom: 1px solid var(--rule);
                  break-inside: avoid; }
.batch-req { display: block; font-size: 11px; color: var(--ink-3); }

/* --------------------------------------------------------------- resources */

.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px; margin-top: 14px; }
.res-group { border: 1px solid var(--rule); background: var(--surface); padding: 13px 15px; }
.res-group h3 { margin: 0 0 10px; }
.res-group ul { list-style: none; margin: 0; padding: 0; }
.res-group li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.res-group li:last-child { border-bottom: 0; }
.res-group a { color: var(--brand); font-size: 13px; font-weight: 600; }
.res-note { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------------------------------------------- strip */

/* Fixed, not sticky. `position: sticky` on the last flow element only holds while its
   containing block is on screen, so the strip scrolled away with the content. */
.strip {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-top: 1px solid var(--rule-strong);
  z-index: 40; box-shadow: 0 -6px 18px rgb(0 0 0 / 6%);
}
/* The colophon is a sibling of the toggle, not a child. A mailto link inside a button is
   unreachable by keyboard and invalid besides. */
.strip-bar { display: flex; align-items: center; }

.strip-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 34px; background: none;
  border: 0; padding: 9px var(--gutter); font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}
.strip-toggle:hover { background: var(--surface-sunk); }
.strip-item .mono { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* Colour only where it changes what someone does. A clear queue is worth seeing as clear;
   an overdue one is worth seeing from across a desk. */
.strip-item .is-flagged { color: var(--signal); }
.strip-item .is-clear { color: var(--clean); }

/* The owner's mark, not a footnote. It reads as branding - the company at brand weight
   and brand colour, the product and the contact beneath it - and sits behind its own rule
   so it is plainly a different kind of thing from the figures to its left. */
.strip-colophon {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0; padding: 6px var(--gutter) 6px 22px;
  border-left: 1px solid var(--rule);
  white-space: nowrap; line-height: 1.3;
}
.strip-colophon[hidden] { display: none; }

.colophon-company {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--brand);
}
.colophon-meta {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; color: var(--ink-3);
}
.colophon-meta a { color: var(--ink-3); text-decoration: none; }
.colophon-meta a:hover { color: var(--brand); text-decoration: underline; }
.colophon-meta a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 74rem) {
  /* Wrapping the colophon would push the strip taller on every screen, and --strip-h is
     what stops it covering content. It lives in the drawer at these widths instead. */
  .strip-colophon { display: none; }
}
.strip-chevron { margin-left: auto; width: 8px; height: 8px;
                 border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
                 transform: rotate(-135deg); transition: transform .15s; }
.strip-toggle[aria-expanded="true"] .strip-chevron { transform: rotate(45deg); }

.strip-drawer { border-top: 1px solid var(--rule); padding: 14px var(--gutter) 18px;
                max-height: 42vh; overflow-y: auto; background: var(--surface-sunk); }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: 20px; }
.drawer-grid h3 { font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
                  text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.drawer-note { font-size: 12px; color: var(--ink-2); margin: 0 0 7px; max-width: 60ch; }
.drawer-note:last-child { margin-bottom: 0; }
.drawer-note a { color: var(--brand); }
.drawer-brand {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--brand); margin-bottom: 6px;
}
.drawer-fineprint { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.drawer-scope { font-size: 11px; color: var(--ink-3); margin: 0 0 8px; }
.blocked-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.blocked-list li { display: grid; grid-template-columns: 1fr auto; gap: 10px;
                   padding: 4px 0; border-bottom: 1px solid var(--rule); }
.blocked-list code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.blocked-list span { color: var(--ink-3); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; }
  .strip-toggle { gap: 18px; flex-wrap: wrap; }
  .batch-files { columns: 1; }
}

@media print {
  .tabs, .strip, .masthead-actions, .skip, .queue-panel { display: none; }
  body { background: #fff; }
  .note, .batch, .res-group { break-inside: avoid; }
}

/* ------------------------------------------------------- institution picker */

.picker {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 5px 9px; max-width: 260px;
}
.picker:hover { border-color: var(--brand); }
.facility-kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                 color: var(--ink-3); }

/* ------------------------------------------------------------- roster extras */

.rail-note { font-size: 11px; color: var(--ink-3); padding: 8px 12px; margin: 0;
             border-bottom: 1px solid var(--rule); }
.roster .roster-pick { grid-template-columns: 1fr auto; }

.student-head { display: flex; gap: 14px 28px; align-items: center; flex-wrap: wrap; }
.student-identity { min-width: 0; }
.student-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center;
                      flex-wrap: wrap; }

@media (max-width: 70rem) {
  /* Stacked, the divider would hang in mid-air. It becomes a horizontal rule instead. */
  .student-facts {
    flex-basis: 100%; padding-left: 0; padding-top: 12px;
    border-left: 0; border-top: 1px solid var(--rule);
  }
  .student-head-right { margin-left: 0; }
}

.chip-status-active { color: var(--clean); border-color: var(--clean); background: var(--clean-soft); }
.chip-status-inactive { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.chip-status-graduated { color: var(--ink-3); border-color: var(--rule-strong); background: var(--surface-sunk); }

/* ---------------------------------------------------------------- file notes */

/* Append-only, like AuditEvent in CLAUDE.md §13. There is no edit or delete control
   here because there is no edit or delete path in the store behind it. */
.note-form { border: 1px solid var(--rule); background: var(--surface);
             padding: 12px 14px; margin: 12px 0; }
.note-form textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 8px 10px; resize: vertical; margin-top: 5px;
}
.note-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 9px; }
.note-author {
  font: inherit; font-size: 12px; width: 130px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 6px 9px;
}
.note-form-actions .btn { margin-left: auto; }

.note-log { list-style: none; margin: 0; padding: 0; }
.note-log li { border-left: 3px solid var(--rule-strong); background: var(--surface);
               border-top: 1px solid var(--rule); border-right: 1px solid var(--rule);
               border-bottom: 1px solid var(--rule); padding: 9px 13px; margin-bottom: 7px; }
.note-log-head { display: flex; gap: 10px; align-items: baseline; }
.note-log-head time { font-size: 11px; color: var(--ink-2); }
.note-author-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                   color: var(--ink-3); }
.note-log p { margin: 5px 0 0; font-size: 13px; }

/* ------------------------------------------------------------------ calendar */

.year-tabs { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.year-tab {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 5px 12px;
}
.year-tab[aria-current="true"] { background: var(--brand); border-color: var(--brand);
                                 color: var(--paper); }

.cal tbody th { position: relative; }
.cal .row-nested th { padding-left: 26px; }
/* A tick in the margin, not indentation alone: nesting has to survive a screenshot. */
.nest-marker { position: absolute; left: 12px; top: 13px; width: 8px; height: 8px;
               border-left: 1.5px solid var(--rule-strong);
               border-bottom: 1.5px solid var(--rule-strong); }
.row-nested td, .row-nested th { background: var(--surface-sunk); }
.cal-due { color: var(--brand); font-weight: 600; }

/* ------------------------------------------------------------------- callout */

.callout { border: 1px solid var(--rule); border-left: 4px solid var(--brand);
           background: var(--surface); padding: 13px 16px; margin-top: 12px; }
.callout p { margin: 0 0 8px; font-size: 13px; }
.callout p:last-child { margin-bottom: 0; }
.callout .small { font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------- certifications due (landing) */

/* The SCO's home screen. Every row is a duty that falls due between surveys and is a
   scored review area if it slips, so this leads rather than survey preparation. */
.cert-hero {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--rule); border-left: 5px solid var(--clean);
  background: var(--surface); padding: 18px 20px;
}
.cert-hero.is-blocked { border-left-color: var(--signal); }
.cert-hero > div { min-width: 240px; }
.cert-hero.is-blocked .packet-verdict { color: var(--signal); }
.cert-hero.is-ready .packet-verdict { color: var(--clean); }
.cert-thesis { flex: 1 1 320px; margin: 0; font-size: 12.5px; color: var(--ink-2);
               border-left: 2px solid var(--rule-strong); padding-left: 14px; }

.tiles { display: grid; gap: 10px; margin-top: 14px;
         grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tile {
  font: inherit; text-align: left; cursor: pointer; display: block;
  border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong);
  background: var(--surface); padding: 11px 13px; color: inherit;
}
.tile:hover { border-top-color: var(--brand); }
.tile[aria-pressed="true"] { border-top-color: var(--brand); background: var(--brand-soft); }
.tile-count { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.tile-label { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.tile-area { display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px;
             letter-spacing: .02em; }

.cert-table .col-due { white-space: nowrap; }
.cert-action { display: block; font-size: 12.5px; margin-bottom: 5px; }
.cert-overdue th, .cert-overdue td { background: var(--signal-soft); }
.cert-due_soon th, .cert-due_soon td { background: var(--warn-soft); }

.linkish { font: inherit; font-size: 11px; background: none; border: 0; padding: 0;
           color: var(--brand); text-decoration: underline; cursor: pointer; }

.meter-tight { margin: 0; }
.meter-tight .meter-bar { width: 110px; flex: none; }

/* A hidden tab must not leave a gap in the row. */
.tabs a[hidden] { display: none; }

/* ---------------------------------------------------------------------- home */

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gutter);
             align-items: start; }
.home-main { min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }

.side-card { border: 1px solid var(--rule); background: var(--surface); padding: 13px 15px; }
.side-big { display: block; font-size: 34px; font-weight: 700; line-height: 1.05;
            margin: 4px 0 2px; }
.side-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin: 0 0 10px; }
.side-card .btn { width: 100%; justify-content: center; }

.board { list-style: none; margin: 8px 0 10px; padding: 0; }
.board li { border-top: 1px solid var(--rule); padding: 9px 0; }
.board li:first-child { border-top: 0; }
.board-kind { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
              color: var(--brand); }
.board-date { font-size: 10.5px; color: var(--ink-3); margin-left: 7px; }
.board li b { display: block; font-size: 12.5px; margin-top: 2px; }
.board-body { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.board-training .board-kind { color: var(--signal); }

.tiles a.tile { text-decoration: none; }

.next-up { list-style: none; margin: 12px 0 0; padding: 0; }
.next-up li { display: grid; grid-template-columns: 90px 1fr 100px; gap: 12px;
              align-items: start; border: 1px solid var(--rule);
              border-left: 3px solid var(--rule-strong); background: var(--surface);
              padding: 10px 13px; margin-bottom: 6px; }
.next-overdue { border-left-color: var(--signal); }
.next-due_soon { border-left-color: var(--warn); }
.next-upcoming { border-left-color: var(--clean); }
.next-body { font-size: 13px; }
.next-action { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.next-due { font-size: 11px; color: var(--ink-3); text-align: right; }

@media (max-width: 1000px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side { position: static; }
  .next-up li { grid-template-columns: 1fr; }
  .next-due { text-align: left; }
}

/* -------------------------------------------------------------- roster search */

/* Appears once a roster passes ten records - the point at which an SCO stops scrolling
   and starts looking someone up by their last four. */
.rail-filters {
  display: grid; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--rule);
}
.rail-filters input[type="search"], .rail-filters select {
  width: 100%; font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 6px 9px;
}
.rail-filters input[type="search"]::placeholder { color: var(--ink-3); }
.rail-filters input[type="search"]:focus-visible, .rail-filters select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}

/* The sample filter is the one an SCO reaches for during a survey, so it reads as a
   control rather than as a third dropdown. */
.rail-toggle {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-2); cursor: pointer; position: relative;
  padding: 2px 0;
}
.rail-toggle input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.rail-toggle-count {
  margin-left: auto; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.roster .roster-pick { grid-template-columns: 1fr auto auto; }
.who-last4 { font-size: 11px; color: var(--ink-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- survey window (readiness)

   One strip, two states. A survey is an event, not a standing condition, so outside a
   window the deadline and key slots are dashes rather than absent - the block keeps its
   shape and the SCO already knows where the numbers will appear. The strip earns its
   brand rule only once a letter has landed; until then it sits in the same quiet ink as
   the rest of the page, because for most of the year there is genuinely nothing to react
   to and dressing that up as an alert is what teaches people to stop reading alerts.
*/

.survey-strip {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  background: var(--surface);
  padding: 14px 16px 13px;
  margin-bottom: 18px;
}
.survey-strip.is-notified { border-top-color: var(--brand); }

.survey-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 28px;
  align-items: start;
}
.survey-cell { min-width: 0; }
.survey-cell strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  margin-top: 3px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.survey-cell .is-quiet { color: var(--ink-3); font-weight: 600; }

.survey-note {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 92ch;
}

.survey-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn-quiet { color: var(--ink-3); border-color: var(--rule); }

.side-big-quiet { font-size: 20px; color: var(--ink-2); }

/* ------------------------------------------------------ survey notification form */

.survey-form {
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--surface-sunk);
  padding: 15px 16px 16px;
  margin: -18px 0 18px;
}
.survey-form-note {
  margin: 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--ink-3); max-width: 92ch;
}

.survey-group { border: 0; margin: 0 0 15px; padding: 0; }
.survey-group:last-of-type { margin-bottom: 0; }
.survey-group legend {
  padding: 0 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  width: 100%;
}

.survey-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
  margin-top: 11px;
}
.survey-fields label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.survey-fields .field-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2);
}
.survey-fields .field-label em {
  font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.survey-fields input, .survey-fields select {
  font: inherit; font-family: var(--font-mono); font-size: 13px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 7px 8px; width: 100%; height: 34px;
}
.survey-fields input:focus-visible, .survey-fields select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}

.survey-form-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.survey-error { font-size: 12px; color: var(--signal); font-weight: 600; }

.packet-warn { color: var(--signal); }

/* ------------------------------------------------------------- roster sample

   The surveyor's Student Selection form gives last-four values, not names. Matching them
   to records is the SCO's job, and on a 200-student roster it is the job - so a sampled
   record pins to the top and carries its own outstanding-document count. The row holds
   two controls because opening a record and sampling it are two decisions.
*/

.roster-group-note {
  margin: 0; padding: 6px 12px 7px; font-size: 11px; line-height: 1.45;
  border-bottom: 1px solid var(--rule);
}
.roster-group-note.is-flagged { color: var(--signal); }
.roster-group-note.is-clean { color: var(--clean); }

.roster-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.roster-row:last-child { border-bottom: 0; }
.roster-row.is-sampled { background: var(--brand-soft); }

.roster-row .roster-pick { flex: 1; min-width: 0; border-bottom: 0; }

/* The control is a real checkbox. The browser owns `checked`, so there is no second
   copy of the state in an aria attribute to drift out of step with it. The native box is
   taken out of the layout rather than hidden, so it still takes focus and still responds
   to the space bar. */
.roster-sample {
  flex: none; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--rule);
  cursor: pointer; padding: 0; position: relative;
}
.roster-sample:hover { background: var(--surface-sunk); }

.roster-sample input, .sample-toggle input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}

.tick {
  width: 13px; height: 13px; flex: none;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--surface); position: relative; pointer-events: none;
}
input:checked + .tick { background: var(--brand); border-color: var(--brand); }
input:checked + .tick::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px;
  width: 4px; height: 8px; border: solid var(--surface);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
input:focus-visible + .tick { outline: 2px solid var(--brand); outline-offset: 2px; }
.roster-sample:hover .tick { border-color: var(--brand); }

.sample-toggle { gap: 7px; position: relative; cursor: pointer; }
.sample-toggle:has(input:checked) { border-color: var(--brand); color: var(--brand); }

.rail-error {
  margin: 0; padding: 8px 12px; font-size: 11px; line-height: 1.45;
  color: var(--signal); background: var(--signal-soft);
  border-bottom: 1px solid var(--rule);
}


/* ------------------------------------------------------------- 85/15 ratio

   The bar is the point of this table: a number alone does not show how close 84 percent
   is to the line, and the line is the whole rule. The ceiling sits as a hairline at 85
   so every bar is read against it rather than against the container.
*/

.scroll-x { overflow-x: auto; }
.ratio-table { min-width: 44rem; }
.ratio-table th[scope="row"] { width: 40%; }

.ratio-bar {
  display: block; position: relative; height: 5px; margin-top: 5px;
  background: var(--surface-sunk); border: 1px solid var(--rule);
}
.ratio-bar i { display: block; height: 100%; background: var(--clean); }
.ratio-bar u {
  position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: var(--ink-2); text-decoration: none;
}
.ratio-fill-violation { background: var(--signal); }
.ratio-fill-risk      { background: var(--warn); }
.ratio-fill-compliant { background: var(--clean); }
.ratio-fill-unknown   { background: var(--rule-strong); }

.chip-ratio-violation    { color: var(--signal); border-color: var(--signal); background: var(--signal-soft); }
.chip-ratio-risk         { color: var(--warn);   border-color: var(--warn);   background: var(--warn-soft); }
.chip-ratio-compliant    { color: var(--clean);  border-color: var(--clean);  background: var(--clean-soft); }
.chip-ratio-exempt       { color: var(--ink-3);  border-color: var(--rule-strong); background: var(--surface-sunk); }
.chip-ratio-not_reviewed { color: var(--ink-3);  border-color: var(--rule-strong); background: var(--surface-sunk); }
.chip-ratio-unknown      { color: var(--ink-3);  border-color: var(--rule-strong); background: var(--surface-sunk); }
.chip-ratio-shielded     { color: var(--warn);   border-color: var(--warn);   background: var(--warn-soft); }

.req-why {
  display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45;
  font-weight: 400; color: var(--ink-3); max-width: 62ch;
}

/* Two chips can land in one status cell - the finding, and what it would be on the
   numbers alone. Let them wrap rather than widening the table. */
.ratio-table td:last-child { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }


/* --------------------------------------------------- how records arrive

   The backlog is the point of this block, so it gets the only colour: each row is a
   specific, small ask with a named owner, which is what turns "can you integrate with
   Banner" into a question somebody can actually answer.
*/

.acq-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 26px; margin: 12px 0 4px;
}
.acq-figure strong { display: block; font-size: 22px; margin-top: 3px; }
.acq-figure small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.flag-open { color: var(--warn); }

.acq-backlog {
  border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  background: var(--surface); padding: 11px 14px; margin: 14px 0;
}
.acq-asks { list-style: none; margin: 8px 0 0; padding: 0; }
.acq-asks li {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto;
  gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.acq-asks li:first-child { border-top: 0; }
.acq-ask-owner { font-size: 11px; color: var(--ink-3); }
.acq-ask-body b { font-size: 13px; }
.acq-ask-note {
  display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--ink-2);
}

.acq-table { min-width: 40rem; }
.acq-table th[scope="row"] { width: 34%; }
.acq-state { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }

.chip-tier { color: var(--ink-3); border-color: var(--rule-strong); background: var(--surface-sunk); }
.chip-method-generated      { color: var(--clean); border-color: var(--clean); background: var(--clean-soft); }
.chip-method-extract        { color: var(--clean); border-color: var(--clean); background: var(--clean-soft); }
.chip-method-watched_folder { color: var(--clean); border-color: var(--clean); background: var(--clean-soft); }
.chip-method-ecm_fetch      { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.chip-method-sco_upload     { color: var(--ink-3); border-color: var(--rule-strong); background: var(--surface-sunk); }

@media (max-width: 60rem) {
  .acq-asks li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}


/* ------------------------------------------------------- non-VA comparison records

   The number is the point: it moves as the SCO marks the sample, and it is what they
   have to go and ask the registrar for. Everything else on this block is explanation.
*/

.nonva {
  display: grid; gap: 14px 26px; align-items: start;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1.35fr) minmax(0, 1fr);
  border: 1px solid var(--rule); border-left: 3px solid var(--brand);
  background: var(--surface); padding: 15px 18px;
}
.nonva-figure { text-align: center; min-width: 5.5rem; }
.nonva-figure strong { display: block; font-size: 42px; line-height: 1; margin: 4px 0 2px; }
.nonva-sub { font-size: 11px; color: var(--ink-3); }
.nonva-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.nonva-body p:last-child { margin-bottom: 0; }
/* The citation sits in its own column so neither it nor the explanation becomes a narrow
   ribbon down the left of a wide box. */
.nonva-aside {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin: 0;
  padding-left: 16px; border-left: 1px solid var(--rule);
}

@media (max-width: 64rem) {
  .nonva { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
  .nonva-aside { grid-column: 1 / -1; padding-left: 0; border-left: 0;
                 padding-top: 10px; border-top: 1px solid var(--rule); }
}
@media (max-width: 44rem) {
  .nonva { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nonva-figure { text-align: left; }
}


/* VA forms held back from a routine packet. A list, not a warning. */
.form-list { list-style: none; margin: 8px 0 0; padding: 0; }
.form-list li {
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
  padding: 5px 0; border-top: 1px solid var(--rule);
}
.form-list li:first-child { border-top: 0; }


/* The demo date. Worded and coloured as a label on the snapshot, not as a warning. */
.demo-clock {
  color: var(--warn); border-color: var(--warn); background: var(--warn-soft);
  font-family: var(--font-mono); letter-spacing: 0;
}
.demo-clock[hidden] { display: none; }


/* Seeded demo configuration, said plainly so a prospect never reads it as a live link. */
.illustrative {
  margin: 10px 0 0; padding: 8px 12px; font-size: 12px; line-height: 1.5;
  color: var(--ink-2); background: var(--warn-soft);
  border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  max-width: 92ch;
}


/* ------------------------------------------------------- figures worth reviewing

   Each item reads as a figure to check, not a verdict: what disagrees, the two numbers
   side by side, who can correct it, and the citation. No severity colour - these are
   ordered by importance, not graded by it.
*/
.review-list { list-style: none; margin: 10px 0 0; padding: 0; }
.review-list li {
  border: 1px solid var(--rule); border-left: 3px solid var(--brand);
  background: var(--surface); padding: 10px 14px; margin-bottom: 8px;
}
.review-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.review-head b { font-size: 13px; }
.review-term { font-size: 11px; color: var(--ink-3); }
.review-figures { display: flex; gap: 10px 32px; flex-wrap: wrap; margin-top: 7px; }
.review-figures .mono { font-size: 13px; font-weight: 600; color: var(--ink); }
.review-detail { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); max-width: 90ch; }
.review-meta {
  display: flex; gap: 6px 22px; flex-wrap: wrap; margin: 7px 0 0;
  font-size: 11px; color: var(--ink-3);
}
.review-clear { margin: 10px 0 0; font-size: 13px; color: var(--clean); }

/* ------------------------------------------------------- accounts, help, notices */

.facility-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.facility-name[hidden], .picker[hidden], .account[hidden], .demo-banner[hidden],
.notices[hidden], .help-panel[hidden], .help-error[hidden] { display: none; }

.account { display: flex; align-items: center; gap: 10px; }
.account-who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.account-who b { font-size: 13px; }
.account-plan { font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em; }
.btn-quiet { background: transparent; color: var(--ink-2); }

/* Dashed and amber: unmistakably not the product's own chrome, so a screenshot of a demo
   cannot be passed off as a real school's console. */
.demo-banner {
  margin: 8px var(--gutter) 0; padding: 7px 12px;
  border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; font-weight: 600;
}

.notices { margin: 10px var(--gutter) 0; display: grid; gap: 8px; }
.notice {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 10px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand);
}
.notice strong { display: block; margin-top: 2px; }
.notice p { margin: 4px 0 0; color: var(--ink-2); white-space: pre-line; max-width: 80ch; }

.help-grid {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--gutter);
}
.help-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.help-item {
  width: 100%; text-align: left; display: grid; gap: 4px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  font: inherit; cursor: pointer;
}
.help-item.is-current { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.help-title { margin: 0; font-size: 15px; }
.thread {
  list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px;
  max-height: 340px; overflow: auto;
}
.msg { padding: 9px 12px; background: var(--surface); border: 1px solid var(--rule); }
.msg-staff { border-left: 3px solid var(--clean); }
.msg p { margin: 4px 0 0; white-space: pre-line; }
.help-form { display: grid; gap: 6px; max-width: 640px; }
.help-form input, .help-form textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink);
}
.help-form .btn { justify-self: start; }
.help-error { color: var(--signal); margin: 0; }

.plan-adds {
  margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px;
  font-size: 12.5px; color: var(--ink-2);
}

@media (max-width: 760px) {
  .help-grid { grid-template-columns: 1fr; }
  .account-who { display: none; }
}

/* ------------------------------------------------------------------ sign-in page */

.auth-page { display: grid; place-items: center; min-height: 100%; padding: 24px 16px; }
.auth-card {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--rule);
  padding: 26px 26px 20px;
}
.auth-card .brand { margin: 0 0 12px; }
.auth-card h1 { font-size: 18px; margin: 16px 0 0; }
.auth-card form { display: grid; gap: 8px; margin-top: 14px; }
.auth-card form[hidden] { display: none; }
.auth-card input {
  font: inherit; padding: 8px 10px; border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink);
}
.auth-card .btn { justify-self: start; margin-top: 6px; }
.link-btn {
  background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline;
  cursor: pointer; font: inherit; justify-self: start;
}
.auth-message { min-height: 1.5em; margin: 12px 0 0; color: var(--ink-2); }
.auth-message.is-bad { color: var(--signal); }
.auth-fine { margin: 18px 0 0; font-size: 11px; color: var(--ink-3); }