/* Staff console: the "Public Record" system from accrivon.com, adapted for a
   workshop. Redaction sets page and section titles; Public Sans carries all
   operational UI. Sections are ruled like a register rather than boxed;
   figures are tabular. Every colour is a token; dark mode follows the OS.
   Contrast for each text/background pair is noted in docs/DESIGN-NOTES.md. */

/* Tokens and fonts: tokens.css (shared with the candidate pages). */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background-color: var(--bg); color: var(--text);
  font: 400 0.9375rem/1.55 var(--sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2 { font-family: var(--serif); font-weight: 400; font-synthesis: none; letter-spacing: -0.01em; line-height: 1.15; margin: 0; font-variant-numeric: lining-nums; }
h1 { font-size: 2.125rem; }
h2 { font-size: 1.375rem; }
h3 { font: 600 1rem/1.4 var(--sans); margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 0.75rem; max-width: 72ch; }
ul, ol { padding-left: 1.25rem; }
code, kbd { font-family: var(--mono); font-size: 0.85em; }
kbd { border: 1px solid var(--control); border-bottom-width: 2px; border-radius: var(--radius); padding: 0 0.3em; background-color: var(--surface); color: var(--text); }
table, .num, .ledger dd, .facts dd, progress { font-variant-numeric: tabular-nums lining-nums; }
.num { text-align: right; }
th.num, td.num { padding-right: 1.5rem; }
.muted { color: var(--muted); }
.fine { font-size: 0.875rem; color: var(--muted); }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background-color: var(--bar); color: var(--on-bar); padding: 0.6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.skip:focus-visible { outline-color: var(--focus-on-bar); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------- top bar */
/* Row 1: wordmark and the signed-in person. Row 2: navigation in three groups.
   Under 64rem the navigation folds into a <details> menu. */
.topbar { position: relative; background-color: var(--bar); color: var(--on-bar); }
.topbar :focus-visible { outline-color: var(--focus-on-bar); }
.topbar-inner { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; }
.wordmark { display: flex; gap: 0.625rem; min-height: 3.25rem; align-self: stretch; align-items: center; min-width: 0; font: 400 1.25rem/1 var(--serif); font-synthesis: none; color: var(--on-bar); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--on-bar); text-decoration: none; }
.wordmark small { font: 500 0.8125rem/1 var(--sans); color: var(--on-bar-muted); }
.wordmark-mark { flex: none; width: 1.625rem; height: 1.625rem; margin-right: -0.125rem; }
@media (max-width: 30rem) { .wordmark small { display: none; } }
.who { display: flex; align-items: center; gap: 0.875rem; font-size: 0.875rem; white-space: nowrap; }
.who a { color: var(--on-bar); text-decoration: none; }
.who a:hover { text-decoration: underline; }
.who form { margin: 0; }
.role-tag { margin-left: 0.375rem; font: 500 0.8125rem/1 var(--sans); color: var(--on-bar-muted); }
.menu { grid-column: 1 / -1; }
.menu > summary { display: none; }
.menu-body { display: flex; align-items: stretch; border-top: 1px solid var(--bar-hover); }
.menu-body .who { display: none; }
.nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.nav-group { display: flex; align-items: stretch; gap: 0.125rem; }
.nav-group > span { align-self: center; margin-right: 0.5rem; font: 500 0.8125rem/1 var(--sans); color: var(--on-bar-quiet); }
.nav-group ul { display: flex; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.625rem; color: var(--on-bar); text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover { background-color: var(--bar-hover); }
.nav a[aria-current="page"] { border-bottom-color: var(--on-bar-muted); font-weight: 600; }

@media (max-width: 64rem) {
  .topbar-inner { padding: 0 1rem; }
  .topbar-inner > .who { display: none; }
  .wordmark { margin-right: 5.5rem; }
  .menu > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 0.25rem; cursor: pointer; list-style: none; font-weight: 600; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary::after { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.125rem) rotate(45deg); }
  .menu.ready > summary::after { transition: transform 0.2s var(--ease); }
  .menu[open] > summary::after { transform: translateY(0.125rem) rotate(-135deg); }
  /* In the page flow, not an overlay: focus can never land on content hidden beneath it (WCAG 2.4.11). */
  .menu { grid-column: 1 / -1; grid-row: 2; }
  .menu > summary { position: absolute; right: 1rem; top: 0; }
  .menu-body { flex-direction: column; padding: 0.25rem 0 1rem; border-top: 1px solid var(--bar-hover); }
  .menu-body .who a { display: inline-flex; align-items: center; min-height: var(--target); }
  .menu-body .who { display: flex; flex-wrap: wrap; white-space: normal; margin-top: 0.75rem; padding-top: 0.875rem; border-top: 1px solid var(--bar-hover); }
  .nav { flex-direction: column; gap: 0.5rem; }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group > span { align-self: flex-start; margin: 0.75rem 0 0.25rem; }
  .nav-group ul { flex-direction: column; }
  .nav a { border-bottom: 0; padding: 0 0.5rem; }
  .nav a[aria-current="page"] { background-color: var(--bar-hover); }
}

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.page-head > div { min-width: 0; }
.lede { color: var(--text-2); max-width: 68ch; margin: 0.625rem 0 0; }
.back { display: inline-block; margin-bottom: 0.75rem; font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.actions form { margin: 0; }
.actions select { width: auto; }

/* A ruled section of the register. */
.section { border-top: 1px solid var(--rule-strong); padding: 1rem 0 0; margin: 0 0 2.75rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.section-head p { margin: 0; }
.section > h2 { margin-bottom: 1rem; }
/* A contained surface: only for small standalone forms (sign-in, errors). */
.panel { background-color: var(--surface); border: 1px solid var(--rule); padding: 1.75rem 1.5rem; }
.panel > h1 { margin-bottom: 1.25rem; }
.panel .fine { margin: 1.25rem 0 0; }
.panel form .btn-primary { width: 100%; }
.narrow { max-width: 28rem; margin: 0 auto; }
.narrow-left { max-width: 36rem; }
.bare { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.bare-main { width: 100%; max-width: 30rem; padding: 2rem 1.25rem; }
.wordmark-dark { display: block; text-align: center; margin: 0 0 1.5rem; color: var(--text); font: 400 1.5rem/1.2 var(--serif); font-synthesis: none; }
.wordmark-tile { display: block; width: 2.75rem; height: 2.75rem; margin: 0 auto 0.75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.grid-2 > .span-2 { grid-column: 1 / -1; }
@media (max-width: 48rem) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- ledgers */
/* A horizontal line of figures: label above, figure below, ruled columns. */
.ledger { display: flex; flex-wrap: wrap; margin: 0; }
.ledger > div { padding: 0.25rem 1.5rem 0.25rem 0; margin: 0 1.5rem 1rem 0; border-right: 1px solid var(--rule); }
.ledger > div:last-child { border-right: 0; }
.ledger dt { font: 600 0.8125rem/1.3 var(--sans); color: var(--muted); }
.ledger dd { margin: 0.25rem 0 0; font-size: 1.25rem; font-weight: 600; }
.ledger dd small { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.ledger-tight > div { padding-right: 1rem; margin-right: 1rem; }
.ledger-tight dd { font-size: 1rem; }
.facts { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) { .facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .facts dt { margin-top: 0.625rem; } }

/* To-do list: things a person should act on. Severity is a text label. */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.todo li:first-child { padding-top: 0.25rem; }
.todo .go { white-space: nowrap; font-weight: 600; }
@media (max-width: 36rem) { .todo li { grid-template-columns: minmax(0, 1fr); } }
.clear-state { color: var(--text-2); margin: 0; }

/* Event feed: time then sentence. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.125rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.feed time { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
@media (max-width: 36rem) { .feed li { grid-template-columns: minmax(0, 1fr); } }

/* First-run checklist. */
.checklist { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.checklist li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.checklist li::before { content: counter(step); font: 400 1.25rem/1.2 var(--serif); color: var(--accent); }
.checklist li.done::before { content: "\2713"; color: var(--ok); font-family: var(--sans); }
.checklist li.done { color: var(--muted); }

/* ----------------------------------------------------------------- forms */
.field { margin-bottom: 1.125rem; min-width: 0; }
label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.375rem; }
label .muted { font-weight: 400; }
/* :where() keeps this base rule at zero specificity so component rules (.filter, .bulk) win. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) {
  width: 100%; min-height: var(--target); font: inherit; color: var(--text); background-color: var(--surface);
  border: 1px solid var(--control); border-radius: var(--radius); padding: 0.5rem 0.625rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input[type=file] { font: inherit; max-width: 100%; color: var(--text-2); }
input[type=file]::file-selector-button { font: 600 0.875rem/1.1 var(--sans); min-height: var(--target); padding: 0.5rem 1rem; margin-right: 0.75rem; border: 1px solid var(--control); border-radius: var(--radius); background-color: transparent; color: var(--text); cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--text); background-color: var(--hover-tint); }
input[type=checkbox], input[type=radio] { width: 1.125rem; height: 1.125rem; accent-color: var(--accent); margin: 0; flex: none; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--text-2); }
input:focus, select:focus, textarea:focus { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--panel); color: var(--muted); cursor: not-allowed; }
input[readonly] { background-color: var(--panel); }
[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: 0 0 0 1px var(--err); }
::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
textarea.mono { font-family: var(--mono); font-size: 0.875rem; min-height: 13rem; }
.hint { font-size: 0.875rem; color: var(--muted); margin: 0.375rem 0 0; max-width: 68ch; }
.field-error { font-size: 0.875rem; font-weight: 600; color: var(--err); margin: 0.375rem 0 0; }
fieldset { border: 0; border-top: 1px solid var(--rule); padding: 0.75rem 0 0; margin: 0 0 1.125rem; min-width: 0; }
legend { font-weight: 600; font-size: 0.875rem; padding: 0 0.5rem 0 0; }
fieldset.check-group { border-top: 0; padding: 0; margin: 0; }
.check-group legend { margin-bottom: 0.375rem; }
.check-group label.check { margin: 0 0 0.375rem; }
label.check { display: flex; gap: 0.625rem; align-items: center; font-weight: 400; font-size: 0.9375rem; margin: 0; min-height: var(--target); cursor: pointer; }
label.check .muted { font-size: 0.875rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.form-actions .btn-link { margin-left: 0.25rem; }
.form-actions + .hint { margin-top: 0.75rem; }

/* Error summary above a form: links jump to each field. */
.error-summary { border: 1px solid var(--err); background-color: var(--err-bg); color: var(--text); padding: 0.875rem 1rem; margin: 0 0 1.5rem; }
.error-summary h2 { font: 600 1rem/1.4 var(--sans); font-weight: 600; color: var(--err); margin: 0 0 0.375rem; }
.error-summary:focus { outline: none; }
.error-summary ul { margin: 0; padding-left: 1.125rem; }
.error-summary a { color: var(--err); font-weight: 600; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: var(--target); padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius);
  font: 600 0.875rem/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background-color: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background-color: var(--btn-hover); color: var(--on-btn-hover); }
.btn-quiet { background-color: transparent; color: var(--text); border-color: var(--control); }
.btn-quiet:hover { border-color: var(--text); background-color: var(--hover-tint); }
.btn-danger { background-color: transparent; color: var(--err); border-color: var(--err); }
.btn-danger:hover { background-color: var(--err); color: var(--on-err); }
.btn-link { font: inherit; background-color: transparent; border: 0; padding: 0.25rem 0; min-height: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; font-weight: 600; cursor: pointer; }
.btn-on-bar { color: var(--on-bar); border-color: var(--on-bar-muted); min-height: 2.25rem; padding: 0.375rem 0.75rem; }
.btn-on-bar:hover { background-color: var(--bar-hover); border-color: var(--on-bar); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background-color: var(--panel); color: var(--muted); border-color: var(--rule); }
.btn[data-busy]::after { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) { :root { --target: 2.75rem; } .btn-on-bar { min-height: 2.75rem; } }

/* ----------------------------------------------- messages and status pills */
.flash-stack { margin: 0 0 1.5rem; }
.flash { border: 1px solid; padding: 0.75rem 1rem; margin: 0 0 0.5rem; max-width: none; }
.flash p { margin: 0; }
.flash strong { margin-right: 0.25rem; }
.flash-ok { border-color: var(--ok); background-color: var(--ok-bg); }
.flash-ok strong { color: var(--ok); }
.flash-warn { border-color: var(--warn); background-color: var(--warn-bg); }
.flash-warn strong { color: var(--warn); }
.flash-error { border-color: var(--err); background-color: var(--err-bg); }
.flash-error strong { color: var(--err); }
.flash .actions, .flash > form { margin-top: 0.5rem; }
.flash .actions form { margin: 0; }
.disclose > .danger-zone { margin-top: 0; }
.danger-zone .hint { margin: 0 0 0.75rem; }
.status {
  display: inline-block; font: 600 0.75rem/1.5 var(--sans); letter-spacing: 0.02em;
  border: 1px solid; border-radius: var(--radius); padding: 0 0.4375rem; white-space: nowrap; vertical-align: 0.1em;
}
.status-ok { color: var(--ok); background-color: var(--ok-bg); }
.status-warn { color: var(--warn); background-color: var(--warn-bg); }
.status-error { color: var(--err); background-color: var(--err-bg); }
.status-info { color: var(--info); background-color: var(--info-bg); }
.status-muted { color: var(--muted); background-color: transparent; border-color: var(--rule); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
caption { text-align: left; }
th, td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem 0.625rem 0; border-bottom: 1px solid var(--rule); }
th { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--text); text-decoration: underline; }
th[aria-sort] a { color: var(--text); }
th[aria-sort="ascending"] a::after { content: " \2191"; }
th[aria-sort="descending"] a::after { content: " \2193"; }
td.select, th.select { width: 2.25rem; }
tbody tr:hover { background-color: var(--hover-tint); }
.sub { display: block; color: var(--muted); font-size: 0.875rem; font-weight: 400; }
td.cell-actions { white-space: nowrap; }
td.cell-actions > * + * { margin-top: 0.5rem; }
td.cell-actions form { margin: 0; }
td.cell-actions details { white-space: normal; min-width: 16rem; }
td.meta span { display: inline-block; margin-right: 0.75rem; color: var(--text-2); }
.table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: center; margin-top: 0.875rem; }
.count { color: var(--muted); font-size: 0.875rem; margin: 0 0 0.625rem; }
.pager { display: flex; gap: 1rem; align-items: center; }
.pager a { font-weight: 600; }

/* Below 40rem, rows become stacked records: each cell carries its label. */
@media (max-width: 40rem) {
  /* The header becomes a tools row: sort links and select-all stay visible and usable. */
  table.stack thead { display: block; }
  table.stack thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rule-strong); }
  table.stack thead th { display: none; border: 0; padding: 0; }
  table.stack thead th.select, table.stack thead th[data-sortable] { display: block; }
  table.stack thead th[data-sortable] a { display: inline-flex; align-items: center; min-height: var(--target); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-strong); }
  table.stack td { overflow-wrap: anywhere; display: grid; grid-template-columns: minmax(5.5rem, 35%) minmax(0, 1fr); gap: 0.75rem; padding: 0.25rem 0; border: 0; }
  table.stack .status { white-space: normal; }
  table.stack code { overflow-wrap: anywhere; }
  table.stack td > * { grid-column: 2; justify-self: start; }
  table.stack td.num { text-align: left; }
  table.stack td::before { content: attr(data-label); font: 600 0.8125rem/1.6 var(--sans); color: var(--muted); }
  table.stack td.select::before, table.stack td.lead::before { content: none; }
  table.stack td.select, table.stack td.lead { display: block; }
  table.stack td.lead { font-size: 1rem; margin-bottom: 0.25rem; }
  table.stack td.cell-actions { white-space: normal; }
  /* An open panel takes the whole row and wraps, instead of growing to its widest line. */
  table.stack td.cell-actions > details, table.stack td > details.disclose { grid-column: 1 / -1; justify-self: stretch; min-width: 0; }
  table.stack td.cell-actions .actions { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 0 0 1.5rem; padding: 0.75rem 0 0; border-top: 1px solid var(--rule); }
.filter-note { flex: 1 0 100%; max-width: none; order: 99; margin: 0; font-size: 0.8125rem; color: var(--muted); }
.filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.filter label { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.filter input:not([type=checkbox]) { width: 17rem; max-width: 100%; }
.filter select { width: auto; min-width: 9rem; }
.filter-bar label.check { font-size: 0.9375rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.filter-bar .actions { margin-left: auto; }
@media (max-width: 40rem) {
  .filter, .filter input:not([type=checkbox]), .filter select { width: 100%; }
  .filter-bar .actions { margin-left: 0; }
}
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin: -0.5rem 0 1.25rem; font-size: 0.875rem; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.125rem 0.5rem; background-color: var(--surface); color: var(--text); font-size: 0.875rem; text-decoration: none; }
a.chip:hover { border-color: var(--text); text-decoration: none; }
a.chip::after { content: "\00d7"; font-size: 1rem; line-height: 1; color: var(--muted); }

/* Bulk action bar above a selectable table. */
.bulk { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 0.75rem; }
.bulk input:not([type=checkbox]) { width: 16rem; max-width: 100%; }

/* --------------------------------------------- disclosure, help, glossary */
details > summary { cursor: pointer; }
.help { margin: 0.5rem 0 0; font-size: 0.875rem; }
.help > summary { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; min-height: 2rem; }
.help > summary::marker { content: ""; }
.help > summary::before { content: "?"; display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-right: 0.375rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.6875rem; }
.help[open] > summary { margin-bottom: 0.375rem; }
.help > :not(summary) { color: var(--text-2); max-width: 68ch; }
.glossary { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: var(--text-2); }
@media (max-width: 36rem) { .glossary { grid-template-columns: minmax(0, 1fr); gap: 0; } .glossary dd { margin-bottom: 0.5rem; } }
.disclose > summary { font-weight: 600; color: var(--accent); min-height: 2.25rem; display: flex; align-items: center; gap: 0.5rem; list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.disclose[open] > summary::before { transform: rotate(45deg); }
.disclose[open] > summary { margin-bottom: 0.75rem; }

/* Inline confirmation, inserted by console.js instead of a modal. */
.confirm-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; border: 1px solid var(--rule-strong); background-color: var(--surface); padding: 0.625rem 0.75rem; margin-top: 0.5rem; white-space: normal; }
.confirm-bar.danger { border-color: var(--err); background-color: var(--err-bg); }
.confirm-bar p:focus { outline: none; }
.confirm-bar p { margin: 0; flex: 1 1 16rem; font-weight: 600; }

/* Destructive actions sit apart, behind a labelled rule. */
.danger-zone { border: 1px solid var(--err); padding: 1rem; margin-top: 1.5rem; }
.danger-zone h3 { margin: 0 0 0.5rem; color: var(--err); }
.danger-zone form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin: 0; }
.danger-zone .field { margin: 0; flex: 1 1 16rem; }

/* Email preview: the letter as the candidate will read it. */
.letter { background-color: var(--surface); border: 1px solid var(--rule); padding: 1.25rem 1.5rem; max-width: 44rem; }
.letter .facts { font-size: 0.875rem; padding-bottom: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.letter pre { font: 400 0.9375rem/1.6 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* Progress: the native element, drawn in the palette. */
progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 24rem; height: 0.5rem; border: 0; border-radius: 0; background-color: var(--panel); color: var(--text); margin: 0.375rem 0 0; }
progress::-webkit-progress-bar { background-color: var(--panel); }
progress::-webkit-progress-value { background-color: var(--text); }
progress::-moz-progress-bar { background-color: var(--text); }

.verdict-ok { color: var(--ok); font-weight: 600; }
.verdict-block { color: var(--err); font-weight: 600; }
.copy-row { display: flex; gap: 0.5rem; max-width: 44rem; align-items: flex-start; }
.disclose > .copy-row + form, .copy-row + .actions { margin-top: 0.75rem; }
.copy-row input { font-family: var(--mono); font-size: 0.875rem; }
.copy-row .btn { min-width: 5.5rem; flex: none; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 0 2rem; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
@media (max-width: 48rem) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- footer */
.console-foot { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem 2.5rem; color: var(--muted); font-size: 0.875rem; }
.console-foot-inner { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.shortcut-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0.5rem 0 0; }
.shortcut-list dd { margin: 0; }
.console-foot p { margin: 0; }
@media (pointer: coarse) { .shortcuts { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .topbar, .console-foot, .filter-bar, .actions, .form-actions, .bulk, .confirm-bar, .danger-zone, .help, button, td.select, th.select { display: none !important; }
}

/* Step indicator for two-step flows (single invitation, batch). */
.steps { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; list-style: none; counter-reset: step; margin: 1rem 0 0; padding: 0; font-size: 0.875rem; color: var(--muted); }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 0.5rem; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--control); border-radius: 50%; font-weight: 600; font-variant-numeric: tabular-nums; }
.steps li[aria-current="step"] { color: var(--text); font-weight: 600; }
.steps li[aria-current="step"]::before { background-color: var(--text); color: var(--bg); border-color: var(--text); }
.steps li.done::before { content: "\2713"; color: var(--ok); border-color: var(--ok); }

.error-summary li + li { margin-top: 0.25rem; }
/* Touch screens: every interactive target at least 44px (WCAG 2.5.5). */
@media (pointer: coarse) {
  .back, .btn-link, .todo .go, .pager a, .subnav a, .section-head > a, .chips a, th a,
  .help > summary, .disclose > summary, .ledger dd a, .console-foot a, .poll-status a, .poll-status .btn-link,
  table.stack td.lead a, table.stack td .sub a, .feed a, .error-summary a, table.stack td[data-label="About"] a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
  }
  input[type=checkbox], input[type=radio] { width: 1.5rem; height: 1.5rem; }
  td.select label.select-hit { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  .ledger dd a { min-width: 2.75rem; }
}
td.select label.select-hit { display: inline-grid; place-items: center; cursor: pointer; }

/* Narrow screens: ledgers become a two-column grid without dangling rules. */
@media (max-width: 40rem) {
  .ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
  .ledger > div { border-right-color: transparent; margin: 0; }
}

/* Sub-navigation within one page (Sending: status, rules, system). */
.subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.subnav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 0.125rem; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); border-bottom-color: var(--rule-strong); }
.subnav a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* Bulk actions appear once something is selected (console.js). */
.bulk[hidden] { display: none; }
.bulk .field { margin: 0; }
.bulk-hint { margin: 0 0 0.75rem; }
.bulk .hint { margin: 0; }
.bulk .hint[hidden] { display: none; }
.form-actions + .section { margin-top: 2rem; }

/* Live progress for a running batch. */
.poll-status { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.poll-paused { font-style: italic; }
.sending-summary { font-size: 1.0625rem; max-width: 64ch; }
.sending-summary strong { font-variant-numeric: tabular-nums; }

/* Formatted email preview, rendered by the browser in a sandbox. */
.letter-frame { display: block; width: 100%; max-width: 44rem; height: 52rem; max-height: 85vh; border: 1px solid var(--rule); background-color: var(--surface); }
.material-list { margin: 0; padding-left: 1.125rem; }
.shortcut-list > div { display: contents; }

/* Dark mode: keep the top bar distinct from the page. */
@media (prefers-color-scheme: dark) { .topbar { border-bottom: 1px solid var(--rule); } }
/* Stacked rows: the select box sits beside the name, not on a line of its own. */
@media (max-width: 40rem) {
  table.stack tbody td.select { display: inline-block; width: auto; vertical-align: top; margin-right: 0.5rem; }
  table.stack tbody td.select + td.lead { display: inline-block; width: calc(100% - 3.5rem); }
}
.idle-warning { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.idle-warning p { flex: 1 1 20rem; }
/* Filters: a panel on wide screens; a "Filters" disclosure on phones (menu.js folds it). */
.filters > summary { display: none; }
@media (max-width: 40rem) {
  .filters > summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--target); margin-bottom: 0.5rem; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; }
  .filters > summary::-webkit-details-marker { display: none; }
  .filters > summary::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
  .filters[open] > summary::before { transform: rotate(45deg); }
}
summary kbd { margin: 0 0.125rem; }

/* Script-only controls stay hidden from the first paint (menu.js adds .js). */
.js [data-bulk]:not(.is-on) { display: none; }
/* Touch: the select-all box gets the same 44px target as row boxes. */
@media (pointer: coarse) { th.select label.select-hit { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; } }
/* Windows High Contrast. The styled progress pseudo-elements would be forced to the
   page colour and vanish, so the bar draws itself in system colours instead. */
@media (forced-colors: active) {
  progress { forced-color-adjust: none; border: 1px solid CanvasText; background-color: Canvas; }
  progress::-webkit-progress-bar { background-color: Canvas; }
  progress::-webkit-progress-value { background-color: Highlight; }
  /* Transparent underlines become visible here: keep them only on the current page. */
  .nav a, .subnav a { border-bottom-color: Canvas; }
  .nav a[aria-current="page"], .subnav a[aria-current="page"] { border-bottom-color: Highlight; }
}
@media (forced-colors: active) { progress::-moz-progress-bar { background-color: Highlight; } }
/* The wordmark name truncates with an ellipsis rather than a hard cut. */
.wordmark-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow screens with large text: buttons may wrap. */
@media (max-width: 30rem) { .btn { white-space: normal; text-align: center; } }
/* Sign-in on a phone starts near the top, not mid-screen. */
@media (max-width: 40rem) { .bare { align-items: flex-start; } .bare-main { padding-top: 3rem; } }
.ledger dd small { white-space: nowrap; }

/* Stacked tables on phones keep a header row only when it holds tools (sort links, select all). */
@media (max-width: 40rem) { table.stack thead:not(:has(th[data-sortable], th.select)) { display: none; } }
/* Forced colours: the current step keeps a filled marker, not just bold text. */
@media (forced-colors: active) { .steps li[aria-current="step"]::before { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; } }
/* Long explanations in fact lists stay readable. */
.facts .sub { max-width: 70ch; }
/* Stacked rows on phones skip cells with nothing in them, so no label stands alone. */
@media (max-width: 40rem) { table.stack td:empty { display: none; } }
/* Forms stacked in a disclosure keep apart, so a destructive button never touches its neighbour. */
.disclose > form + form, .disclose > form + .field, .disclose > .field + form { margin-top: 0.75rem; }
/* Phones: a cell that holds only a "Change" disclosure doesn't also print the label beside nothing. */
@media (max-width: 40rem) { table.stack td.cell-actions:has(> details:only-child)::before { content: none; } }
/* The paste example: one entry per line; a line too long for a phone wraps with a hanging indent, so it still reads as one entry. */
.paste-example { list-style: none; margin: 0.5rem 0; padding: 0; font-size: 0.8125rem; line-height: 1.6; }
.paste-example li { padding-left: 1.5em; text-indent: -1.5em; }
.paste-example code { font-size: 1em; overflow-wrap: anywhere; }