/* The console's stylesheet; tokens.css comes first (base.html). The review
   bench (the review, blind spot-check and practice-sheet screens) has its
   own layout, bench_base.html, and its own stylesheet, review.css; it does
   not load this file. The old review screen's rules were removed when the
   bench was merged (17 Oct 2026). */
.hint{margin:6px 2px 0}

/* ==================================================================
   The console's look (17 Oct 2026; owner decision CC1: a dark ops-room
   shell by default, light as a per-person choice). Ported from the mock
   CSS of the command-centre concept (Documents/ojoro/02-design/specs/
   ojoro-console-command-centre-2026-10-17.html, selectors .cc*) onto
   tokens.css, which this file follows in base.html. Every colour, font,
   radius, shadow and motion time comes from tokens.css; the one literal
   colour is the white quiet zone behind the authenticator QR code.
   One job per colour: green counted/done/go, amber waiting for a person,
   red the sheet's own figures don't add up or overdue, grey held or set
   aside, blue live data and focus, violet blind checks. A word always
   says the same as the colour.
   Motion marks a change of state only (a menu opening, a toast arriving
   and leaving, hover); nothing loops. tokens.css turns it all off under
   prefers-reduced-motion and data-motion="reduced".
   ================================================================== */

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;transition:color var(--t-quick),text-decoration-color var(--t-quick)}
a:hover{color:var(--blue);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
h1{font-size:22px;line-height:1.25;font-weight:650;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
h2{font:600 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
h2 .note{font:12px var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}
h3{font-size:15px;margin:16px 0 8px}
p{margin:0 0 10px}
ol,ul{padding-left:22px}
li{margin:4px 0}
b,strong{font-weight:650}
.note{color:var(--muted);font-size:13px}
.muted{color:var(--muted);font-weight:400}
.mono{font-family:var(--mono);font-size:12.5px;word-break:break-all}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{font-family:var(--mono)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row form{margin:0}
.spread{justify-content:space-between}
.flush{margin-top:0}
.grow{flex:1;min-width:160px}
.err{background:color-mix(in srgb,var(--red) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));color:var(--ink);padding:9px 12px;border-radius:var(--radius);margin:0 0 12px}
.skip{position:absolute;left:10px;top:-60px;z-index:60;background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:var(--radius);padding:6px 10px}
.skip:focus{top:8px}

/* --------------------------------------------------------- status bar */
.topbar{position:sticky;top:0;z-index:20;height:48px;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.wm{font-weight:750;letter-spacing:-.02em;font-size:16px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.wm:hover{color:var(--ink)}
/* the wordmark's "!" is green TEXT, so the green text token: 4.5:1 or better
   on the status bar in both themes (--green was 3.52:1 in light) */
.bang{color:var(--green-ink);user-select:none}
.wm .wm-sub{color:var(--muted);font-weight:500;font-size:13px;margin-left:5px;letter-spacing:0}
.tb-stat{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap;min-width:0}
.tb-stat b{color:var(--ink);font-weight:600}
.tb-stat .oldest{color:var(--muted)}
.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.tb-dot.amber{background:var(--amber)}
.tb-dot.grey{background:var(--grey)}
.spacer{flex:1}
.go-form{margin:0}
.go{display:inline-flex;align-items:center;gap:8px;background:var(--go-bg);color:var(--go-ink);border:1px solid var(--go-bg);border-radius:var(--radius);padding:7px 14px;font-weight:700;font-size:13.5px;line-height:1.3;cursor:pointer;white-space:nowrap;text-decoration:none}
a.go:hover,button.go:hover{background:color-mix(in srgb,var(--go-bg) 86%,var(--ink));color:var(--go-ink)}
/* One green action per screen: when the page has its own green button,
   the status bar's Start reviewing steps back to an outline. */
body:has(main .primary) .topbar .go{background:transparent;color:var(--ink);border-color:var(--line2);font-weight:600}
body:has(main .primary) .topbar .go:hover{border-color:var(--muted)}

/* ------------------------------------------------- menus (<details>) */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.3;border:1px solid var(--line2);border-radius:var(--radius);padding:6px 10px;color:var(--ink);white-space:nowrap;user-select:none;transition:border-color var(--t-quick),background-color var(--t-quick)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"\25BE";color:var(--muted);font-size:11px}
.menu>summary:hover{border-color:var(--muted)}
.menu[open]>summary{background:var(--panel2);border-color:var(--muted)}
.user-menu>summary{border-color:transparent;color:var(--muted)}
.user-menu>summary b{color:var(--ink);font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:max-content;min-width:260px;max-width:440px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:12px 14px;animation:menu-in var(--t-move) var(--ease-out)}
.alerts-menu .menu-panel{width:420px}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-h{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.menu .count{font:700 12px/1.5 var(--mono);background:var(--amber);color:var(--on-amber);border-radius:9px;padding:0 6px;min-width:20px;text-align:center}
.menu .count.zero{background:var(--track);color:var(--muted)}
ul.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.alerts li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;font-size:13px;animation:row-in var(--t-move) var(--ease-out)}
ul.alerts li .n{font:700 16px var(--mono);text-align:right;color:var(--amber-ink)}
ul.alerts li a{color:var(--ink);text-decoration:none}
ul.alerts li a:hover{text-decoration:underline}
ul.alerts li .age{font:12px var(--mono);color:var(--muted);white-space:nowrap}
ul.alerts li.old{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
ul.alerts li.old .age{color:var(--red-ink)}
@keyframes row-in{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.clear{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.clear b{color:var(--green-ink);font-weight:600}
.prefs fieldset{border:0;margin:0 0 10px;padding:0}
.prefs legend{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 5px;padding:0}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
.seg button{border:0;border-radius:0;padding:5px 14px;font-size:13px;background:transparent;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line2)}
.seg button[aria-pressed="true"]{background:var(--panel2);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--blue)}
.menu .signout{width:100%;justify-content:center;margin-top:4px}

/* --------------------------------------------------------------- rail */
.frame{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:calc(100vh - 48px)}
.rail{position:sticky;top:48px;align-self:start;height:calc(100vh - 48px);overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:10px 10px 28px}
.rail .grp{font:600 10.5px/1.2 var(--mono);letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin:16px 8px 6px}
.rail .grp:first-child{margin-top:6px}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail li{margin:0}
.rail .item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:7px;color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.3;border:1px solid transparent;transition:background-color var(--t-quick),color var(--t-quick)}
.rail a.item:hover{background:var(--panel2);color:var(--ink)}
.rail .item[aria-current]{background:var(--panel2);color:var(--ink);box-shadow:inset 2px 0 0 var(--green)}
.rail .item.lead{color:var(--ink);font-weight:600;border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green) 8%,var(--panel))}
.rail .item.locked{opacity:.6;cursor:default}
.rail .c{font:600 11.5px var(--mono);color:var(--muted);white-space:nowrap}
.rail .c.hot{color:var(--on-amber);background:var(--amber);border-radius:8px;padding:0 6px}
.rail .c.ok{color:var(--green-ink)}

/* ---------------------------------------------------------- the page */
main{min-width:0;padding:20px 24px 56px}
main.bare{max-width:520px;margin:0 auto;padding:56px 20px}
body.wide main{max-width:none;padding:18px 22px 48px}

/* ------------------------------------------------------------ toasts */
.toast{position:fixed;left:50%;bottom:24px;z-index:40;display:flex;gap:10px;align-items:center;max-width:min(560px,90vw);background:var(--panel2);border:1px solid color-mix(in srgb,var(--green) 55%,var(--line));color:var(--ink);border-radius:10px;padding:10px 16px;font-size:13.5px;box-shadow:var(--shadow);pointer-events:none;animation:toast 4.3s var(--ease-out) forwards}
.toast.info{border-color:var(--line2)}
.toast .tick{width:18px;height:18px;border-radius:50%;background:var(--green);color:var(--go-ink);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:12px;flex:none}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}5%{opacity:1;transform:translate(-50%,0)}88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0);visibility:hidden}}
/* Without motion the toast does not fly in or fade: it stays put at the
   top of the page, so the message is never lost. */
@media (prefers-reduced-motion:reduce){.toast{animation:none;position:static;transform:none;margin:0 0 14px;width:max-content;max-width:100%;box-shadow:none}}
[data-motion="reduced"] .toast{animation:none;position:static;transform:none;margin:0 0 14px;width:max-content;max-width:100%;box-shadow:none}

/* ----------------------------------------------------------- buttons */
button,.btn{font:inherit;font-size:13.5px;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:var(--radius);padding:7px 12px;cursor:pointer;text-decoration:none;text-align:center;transition:border-color var(--t-quick),background-color var(--t-quick),color var(--t-quick)}
button:hover,.btn:hover{border-color:var(--muted);color:var(--ink)}
button.primary,.btn.primary{background:var(--go-bg);border-color:var(--go-bg);color:var(--go-ink);font-weight:700}
button.primary:hover,.btn.primary:hover{background:color-mix(in srgb,var(--go-bg) 86%,var(--ink));border-color:color-mix(in srgb,var(--go-bg) 86%,var(--ink));color:var(--go-ink)}
button.danger,.btn.danger{color:var(--red-ink);border-color:color-mix(in srgb,var(--red) 55%,var(--line2))}
button.danger:hover,.btn.danger:hover{border-color:var(--red)}
button.big,.btn.big{font-size:16px;padding:12px 22px;border-radius:10px}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button:disabled,button:disabled:hover,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;border-color:var(--line2)}
button.primary:disabled{background:var(--go-bg);border-color:var(--go-bg)}
kbd{font:600 11px var(--mono);border:1px solid currentColor;border-radius:4px;padding:0 4px;opacity:.75;margin-left:2px}
.why-off{font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------------- forms */
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:7px 9px;width:100%;transition:border-color var(--t-quick),box-shadow var(--t-quick)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,var(--panel))}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--green)}
input[type=file]{padding:6px}
::placeholder{color:var(--faint)}
label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
label.inline{display:inline-flex;gap:6px;align-items:center;margin:4px 0}
label.inline input,label.inline select{width:auto}
.num-in{width:90px}

/* ------------------------------------------------- cards, tiles, grid */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;min-width:0}
.card:has(>table){overflow-x:auto}
.card>:last-child{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;margin-bottom:12px}
.grid>.card{margin:0}
.stat .n{font:650 26px/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .l{color:var(--muted);font-size:12.5px;margin-top:5px}
a.card.stat{text-decoration:none;color:inherit;display:block;transition:border-color var(--t-quick),background-color var(--t-quick)}
a.card.stat:hover{border-color:var(--line2);background:var(--panel2)}
.card.stat.alert{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.card.stat.alert .n{color:var(--amber-ink)}
.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero h1{margin:0 0 4px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-actions form{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.narrow{max-width:420px;margin:0 auto}
.card.pw{max-width:460px}
.user-menu .menu-link{display:block;margin:6px 0 10px;color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.card form.row+form.row{margin-top:10px}
.cleared-line{font-size:13px;color:var(--muted);margin:0 0 12px}
.cleared-line b{color:var(--green-ink);font-weight:600}
/* zeros collapse: queues and tables with nothing in them fold into one line */
.clear-line{font-size:13px;color:var(--muted);margin:2px 0 14px}
.clear-line b{color:var(--green-ink);font-weight:600}
details.add-user>summary{cursor:pointer;font-weight:650;display:flex;align-items:center;gap:8px;list-style:none}
details.add-user>summary::-webkit-details-marker{display:none}
details.add-user>summary::before{content:"+";font:700 14px/1 var(--mono);color:var(--green-ink);width:16px;text-align:center}
details.add-user[open]>summary::before{content:"\2212"}
details.add-user[open]>summary{margin-bottom:6px}
details.add-user form{max-width:560px}

/* ------------------------------------------------------------ tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
tr:last-child>td{border-bottom:0}
tr.muted td{color:var(--faint)}
tfoot td{font-weight:650;border-top:2px solid var(--line);border-bottom:0}
table.coverage td.num{white-space:nowrap}
.coverage-pick label.inline{flex-wrap:wrap;max-width:100%}
.coverage-pick select{max-width:100%;min-width:0}
table.coverage th.span{text-align:center;border-bottom:1px solid var(--line)}
tr.diff td,table.vdiff tr.must td{background:color-mix(in srgb,var(--amber) 11%,var(--panel))}
table.vdiff tr.must td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
table.kv th{width:34%;text-transform:none;letter-spacing:0;font:600 12.5px/1.4 var(--sans);color:var(--muted)}
td.nowrap,th.nowrap{white-space:nowrap}
td.ip{white-space:nowrap;word-break:normal}
td.detail{word-break:break-word}
td.tries div{white-space:nowrap}
.report-review select{width:auto}
.report-review input[name=note]{width:160px}
/* a unit code never breaks across lines in the reports table (19 Oct 2026: the poll update lines made the column narrow) */
td.pu-code,.sub-ref{white-space:nowrap}

/* ---------------------------------------------------- badges and pills */
.badge{display:inline-block;font:600 10.5px/1.6 var(--mono);letter-spacing:.04em;padding:0 6px;border-radius:5px;border:1px solid var(--line2);color:var(--muted);text-transform:uppercase;white-space:nowrap;vertical-align:1px}
.b-counted,.b-app-accepted,.b-inv-sent,.b-on-online{color:var(--green-ink);border-color:color-mix(in srgb,var(--green) 50%,var(--panel))}
.b-withheld,.b-flag,.b-app-new,.b-on-idle{color:var(--amber-ink);border-color:color-mix(in srgb,var(--amber) 50%,var(--panel))}
.b-held,.b-app-noted,.b-inv-used,.b-on-offline{color:var(--muted);border-color:var(--line2)}
.b-excluded,.b-app-declined,.b-inv-not-sent,.b-inv-expired,.b-inv-revoked{color:var(--red-ink);border-color:color-mix(in srgb,var(--red) 55%,var(--panel))}
.b-spot{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 55%,var(--panel))}

/* ------------------------------------------------------------ callouts */
.callout{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--line2);border-radius:var(--radius);padding:9px 12px;margin:0 0 12px;font-size:13.5px;color:var(--ink)}
.callout.ok{border-color:color-mix(in srgb,var(--green) 45%,var(--line));border-left-color:var(--green)}
.callout.warn{background:color-mix(in srgb,var(--amber) 10%,var(--panel));border-color:color-mix(in srgb,var(--amber) 45%,var(--line));border-left-color:var(--amber)}
.first-step{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}

/* ------------------------------------------------ the dashboard (admins) */
.contest .bar{display:block;width:100%;height:10px;border-radius:5px;overflow:hidden;background:var(--track);margin:10px 0 6px}
.bar .counted,.dot.counted{fill:var(--green);background:var(--green)}
.bar .withheld,.dot.withheld{fill:var(--amber);background:var(--amber)}
.bar .held,.dot.held{fill:var(--grey);background:var(--grey)}
.bar .excluded,.dot.excluded{fill:var(--red);background:var(--red)}
.bar rect{transition:width .4s var(--ease-out),x .4s var(--ease-out)}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.spotline{margin-top:8px;font-size:13.5px}
.presence .online-line{font:650 20px var(--mono)}
.presence table.by-role{margin-top:8px;max-width:640px}
.presence details{margin-top:8px}
.presence summary{cursor:pointer;color:var(--muted);font-size:13px}

/* --------------------------------------------------- the home page */
.home{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;align-items:start;max-width:1240px}
.door{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 9%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));border-radius:14px;padding:26px 28px;margin-bottom:14px}
.door.lock{background:var(--panel);border-color:var(--line2)}
.door h1{font-size:30px;margin:6px 0 8px;letter-spacing:-.02em}
.door>p{color:var(--muted);font-size:14.5px;max-width:62ch;margin:0 0 16px}
.kicker{font:600 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.door-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.door-actions form{margin:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 0;padding:0;list-style:none}
.steps li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted);background:var(--panel);margin:0}
.steps li b{display:block;font:650 12px var(--mono);color:var(--green-ink);letter-spacing:.06em;margin-bottom:4px}
.stepper{display:flex;margin:4px 0 18px;padding:0;list-style:none}
.stepper li{flex:1;font-size:12.5px;color:var(--muted);padding:8px 10px;border-top:3px solid var(--line2);margin:0}
.stepper li.done{border-color:var(--green);color:var(--green-ink)}
.stepper li.now{border-color:var(--amber);color:var(--ink);font-weight:600}
.lockline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.panel-h{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;justify-content:space-between;gap:8px}
.panel-h small{font:12px var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.tt{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px;color:var(--muted);margin:0}
.tt dt{margin:0}
.tt dd{margin:0;font:650 15px var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.fine{font-size:12px;color:var(--faint);margin:8px 0 0}

/* ------------------------------------------- sign-in and error pages */
.signin h1{font-size:20px;margin-bottom:6px}
.signin .lede{color:var(--muted);margin:0 0 14px}
.why{background:color-mix(in srgb,var(--blue) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:var(--radius);padding:9px 12px;margin:0 0 14px;font-size:13.5px}
/* Error pages: one design with ojoro.ng's (owner, 18 Oct 2026; error.html). */
.errpage{max-width:640px}
.errpage.card{padding:24px 26px}
.err-art{display:block;color:var(--muted);margin:0 0 16px}
.err-art *{vector-effect:non-scaling-stroke}
.err-art .hi{color:var(--ink)}
.err-fault .err-art .hi{color:var(--red-ink)}
.errpage .code{font:650 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.errpage h1{margin-top:4px}
.errpage .lede{color:var(--muted);max-width:56ch}
.err-asked{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.err-asked code,.err-ref b{font:600 12.5px var(--mono);color:var(--ink)}
.err-ref{font-size:13px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px}
.errpage .actions{margin-top:18px}

/* ---------------------------------- review-adjacent pages and figures */
.rv-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap}
.rv-top h1{margin:0}
.rv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.spotrow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}
.spotimg img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--stage)}
.sheet img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--stage)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
.pair figure,.copies figure{margin:0}
.pair img,.copies img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px;margin-top:6px;background:var(--stage)}
.pair figure{max-height:72vh;overflow:auto}
.copies figure img{max-height:340px;object-fit:contain}
.copies{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0 0 12px}
figcaption{font-size:13px}
.invite{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.invite:first-of-type{border-top:0;margin-top:0;padding-top:0}
.invite form{margin:0}
/* the authenticator setup QR: a white quiet zone so a phone camera reads it on any theme */
.qr{background:#fff;display:inline-block;padding:6px;border-radius:6px;margin:6px 0 12px}
.qr svg{display:block;width:220px;height:auto}
.codeshow{font-family:var(--mono);font-size:28px;letter-spacing:2px;margin:12px 0}

/* --------------------------------------------------------- narrow screens */
/* Help: the "?" in the status bar, on every signed-in page (owner, 18 Oct
   2026; templates/help.html). A round "?" and the word Help; under 900px
   the word goes and the circle stays (its name stays in aria-label). */
.tb-help{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 4px;border:1px solid var(--line2);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:13px;white-space:nowrap;transition:border-color var(--t-quick)}
.tb-help .q{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);font:700 14px/1 var(--sans);transition:background-color var(--t-quick),color var(--t-quick),border-color var(--t-quick)}
.tb-help:hover,.tb-help.on{border-color:var(--blue)}
.tb-help:hover .q,.tb-help.on .q{background:var(--blue);border-color:var(--blue);color:var(--bg)}
/* ------------------------------------------- Volunteers (/admin/users) */
details.role-change>summary{cursor:pointer;color:var(--blue);font-size:12.5px}
details.role-change form{display:grid;gap:6px;margin-top:6px;min-width:220px}
details.role-change label{display:grid;gap:2px;font-size:12.5px}
table.volunteers td.acc{white-space:nowrap}
table.volunteers th a{color:inherit}
.role-request+.role-request{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.role-request form.row input{width:auto}
.acc-n{font-size:22px}
/* ------------------------------------------------- audit log (/audit) */
.audit-filters .row+.row,.audit-filters .note+.row{margin-top:8px}
.audit-filters .note{margin:4px 0 0}
.audit-filters label.grow{flex:1 1 380px}
.audit-filters label.grow input{flex:1;width:auto;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:12.5px;color:var(--ink);text-decoration:none;background:var(--panel2)}
.chip:hover{border-color:var(--muted)}
.chip .x{color:var(--muted);font-weight:700}
table.audit code{font:12px var(--mono);color:var(--muted)}
table.audit a.nowrap{white-space:nowrap}
table.audit td.detail{max-width:440px}
table.audit td.detail details>summary{cursor:pointer}
table.audit td.detail pre{white-space:pre-wrap;word-break:break-word;margin:6px 0 0;font:12px/1.45 var(--mono)}
/* ------------------------------------- squads and referrals (/squad, /refer, /admin/squads) */
.refcode .big{font-size:26px;letter-spacing:.06em;color:var(--ink)}
.reflink{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reflink code{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius);padding:4px 8px;user-select:all}
ol.refsteps{margin:0;padding-left:20px}
ol.refsteps li+li{margin-top:6px}
ul.names{margin:0;padding-left:18px;columns:2 180px}
ul.names li{break-inside:avoid;margin:2px 0}
section.squad+section.squad{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:900px){.tb-help{padding:0 3px}.tb-help .lbl{display:none}}
@media (max-width:1320px){.countdown .cd-name{display:none}}
@media (max-width:1100px){.home{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.tb-stat .oldest{display:none}}
@media (max-width:900px){.frame{grid-template-columns:1fr}.rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.countdown{display:none}.split,.pair,.spotrow{grid-template-columns:1fr}}

/* Points and ranks (console/points.py; design doc mock 1). Amber means
   waiting, as everywhere in the console. Never on the bench (PT12). */
.pts-big{margin:4px 0 0;color:var(--muted)}
.pts-big b{font:650 30px/1.1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:6px}
.pts-wait{margin:4px 0 0;color:var(--amber-ink);font-variant-numeric:tabular-nums}
.pts-rank{margin:10px 0 4px;font-weight:650;color:var(--ink)}
.pts-bar{display:block;width:100%;height:8px;margin:6px 0 2px;accent-color:var(--green)}
.pts-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0}
.pts-ladder tr.on td{color:var(--ink);font-weight:650}
.names .rank-t{color:var(--muted);font-size:13px;white-space:nowrap}
.names li{display:flex;justify-content:space-between;gap:12px}
.rank-cell{white-space:nowrap}