/* NPC Water Audit Portal
   One stylesheet, no build step -- DirectAdmin staging has no Node toolchain. */

:root{
  --ground:#F5F7F5;
  --surface:#FFFFFF;
  --surface-2:#EBF0ED;
  --ink:#111E1B;
  --ink-2:#364844;
  --muted:#657873;
  --line:#D3DDD9;
  --line-2:#BECAC5;
  --accent:#0E5F55;
  --accent-2:#0A4740;
  --accent-soft:#DBEAE5;
  --flag:#A24C1B;
  --flag-soft:#F7E7DB;
  --crit:#8C2F14;
  --crit-soft:#F8E3DD;
  --radius:3px;
  --shadow:0 1px 2px rgba(17,30,27,.05), 0 8px 24px -18px rgba(17,30,27,.22);
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --serif:"IBM Plex Serif", Georgia, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
h1,h2,h3{font-family:var(--serif); margin:0; line-height:1.25; text-wrap:balance}
h1{font-size:1.75rem}
h2{font-size:1.25rem}
h3{font-size:1.02rem}

/* ---------- top bar ---------- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brand-mark{width:6px; height:30px; background:var(--accent); border-radius:1px; display:block}
.brand b{display:block; font-family:var(--serif); font-size:1.02rem; line-height:1.2}
.brand small{display:block; font-family:var(--mono); font-size:.63rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.nav{display:flex; gap:20px; margin-left:auto}
.nav a{
  font-size:.88rem; text-decoration:none; color:var(--ink-2);
  padding:5px 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent)}
.nav a.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.who{display:flex; align-items:center; gap:14px; padding-left:20px; border-left:1px solid var(--line)}
.who b{display:block; font-size:.85rem; font-weight:600}
.who small{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted)}
.linkish{
  background:none; border:0; padding:0; cursor:pointer; color:var(--muted);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
}
.linkish:hover{color:var(--crit)}

/* ---------- layout ---------- */
.page{max-width:1180px; margin:0 auto; padding:30px 24px 56px}
.foot{
  max-width:1180px; margin:0 auto; padding:20px 24px 40px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--muted);
  border-top:1px solid var(--line);
}
.messages{max-width:1180px; margin:16px auto 0; padding:0 24px; display:flex; flex-direction:column; gap:8px}
.msg{padding:11px 16px; border-radius:var(--radius); font-size:.9rem; border:1px solid var(--line);
  background:var(--surface)}
.msg.success{border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--accent-2)}
.msg.error{border-left:3px solid var(--crit); background:var(--crit-soft); color:var(--crit)}
.msg.warning{border-left:3px solid var(--flag); background:var(--flag-soft); color:var(--flag)}
.msg.info{border-left:3px solid var(--muted)}

.pagehead{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:24px}
.pagehead .grow{flex:1 1 320px}
.eyebrow{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px}
.sub{color:var(--ink-2); font-size:.93rem; margin-top:6px}

/* ---------- cards & grid ---------- */
.grid{display:grid; gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow)}
.card h2,.card h3{margin-bottom:12px}
.card.tight{padding:16px 18px}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.stat dt{font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted)}
.stat dd{margin:6px 0 0; font-family:var(--mono); font-size:1.85rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1}
.stat.flag dd{color:var(--flag)}
.stat.good dd{color:var(--accent)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:.88rem}
th,td{padding:10px 15px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); background:var(--surface-2);
  border-bottom:1px solid var(--line-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.empty{padding:26px 18px; color:var(--muted); font-size:.9rem; text-align:center}

/* ---------- pills ---------- */
.pill{display:inline-block; font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:2px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface-2); white-space:nowrap}
.pill.go{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.pill.warn{color:var(--flag); border-color:var(--flag); background:var(--flag-soft)}
.pill.stop{color:var(--crit); border-color:var(--crit); background:var(--crit-soft)}

/* ---------- workflow rail ---------- */
.rail{list-style:none; margin:0; padding:0; border-left:1px solid var(--line-2)}
.rail li{position:relative; padding:7px 0 7px 20px; font-size:.85rem; color:var(--muted)}
.rail li::before{content:""; position:absolute; left:-4px; top:15px; width:7px; height:7px;
  border-radius:50%; background:var(--line-2)}
.rail li.done{color:var(--ink-2)}
.rail li.done::before{background:var(--accent)}
.rail li.current{color:var(--accent); font-weight:600}
.rail li.current::before{background:var(--accent); width:11px; height:11px; left:-6px; top:13px;
  box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- forms & buttons ---------- */
label{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px}
input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%; padding:9px 11px; font-family:var(--sans); font-size:.92rem;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius);
}
textarea{min-height:70px; resize:vertical}
.field{margin-bottom:14px}
.btn{
  display:inline-block; font-family:var(--sans); font-size:.88rem; font-weight:600;
  padding:9px 16px; border-radius:var(--radius); border:1px solid var(--accent);
  background:var(--accent); color:#fff; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{background:transparent; color:var(--crit); border-color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.block{display:block; width:100%; text-align:center}
.inline-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.inline-form > *{flex:1 1 180px}
.inline-form .btn{flex:0 0 auto}

.blocked{font-size:.85rem; color:var(--flag); background:var(--flag-soft);
  border:1px solid var(--flag); border-radius:var(--radius); padding:9px 12px; margin-top:8px}
.hint{font-size:.83rem; color:var(--muted); margin-top:4px}

/* ---------- login ---------- */
.login-wrap{max-width:400px; margin:64px auto; padding:0 24px}
.login-card{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:32px; box-shadow:var(--shadow)}
.login-card h1{font-size:1.35rem; margin-bottom:6px}

@media (max-width:760px){
  .topbar-in{gap:14px}
  .nav{margin-left:0; width:100%; order:3}
  .who{border-left:0; padding-left:0; margin-left:auto}
}

/* ---------- balance ledger ---------- */
.ledger{width:100%; border-collapse:collapse; min-width:520px}
.ledger th{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-2)}
.ledger td{padding:8px 12px; border-bottom:1px solid var(--line); font-size:.88rem}
.ledger tr.group td{background:var(--surface-2); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.ledger tr.subtotal td{font-weight:600; border-bottom:2px solid var(--line-2)}
.ledger tr.derived td{background:var(--flag-soft); color:var(--flag); font-weight:600}
.ledger td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}

/* ---------- bar chart ---------- */
.bars{display:flex; align-items:flex-end; gap:5px; height:150px; padding:10px 0 0;
  border-bottom:1px solid var(--line-2); overflow-x:auto}
.bars .b{flex:1 1 0; min-width:22px; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; position:relative}
.bars .b i{display:block; background:var(--accent); border-radius:1px 1px 0 0; min-height:2px}
.bars .b.gap i{background:repeating-linear-gradient(45deg,var(--line-2),var(--line-2) 3px,transparent 3px,transparent 6px)}
.barlabels{display:flex; gap:5px; margin-top:6px; overflow-x:auto}
.barlabels span{flex:1 1 0; min-width:22px; text-align:center; font-family:var(--mono);
  font-size:.58rem; color:var(--muted); letter-spacing:.02em}

/* ---------- assumption list ---------- */
.assume{list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--line)}
.assume li{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line);
  font-size:.85rem; flex-wrap:wrap}
.assume .k{flex:1 1 190px; color:var(--ink-2)}
.assume .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.assume .why{flex:1 1 100%; color:var(--muted); font-size:.8rem}

/* ================================================================
   Registration, checklists and role dashboards
   Added 23 August 2026. Until then the only way to register a client
   or an audit was the Django admin, and every role saw the same
   dashboard whether it suited them or not.
   ================================================================ */

/* ---------- forms ---------- */
.formcard{max-width:640px}
.formcard .field{margin-bottom:16px}
.formcard label{display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:5px}
.formcard .req{color:var(--flag); letter-spacing:.04em; font-size:.66rem; margin-left:4px}
.formcard input[type=text],.formcard input[type=email],.formcard input[type=password],
.formcard input[type=date],.formcard input[type=number],.formcard select,.formcard textarea{
  width:100%; font:inherit; font-size:.95rem; padding:8px 10px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--radius);
}
.formcard .hint{margin:5px 0 0; font-size:.82rem; color:var(--muted)}
.formcard .field.bad input,.formcard .field.bad select,.formcard .field.bad textarea{border-color:var(--crit)}
.fielderr{margin:5px 0 0; font-size:.82rem; color:var(--crit); font-weight:500}
.formactions{display:flex; align-items:center; gap:16px; margin-top:22px;
  padding-top:16px; border-top:1px solid var(--line)}

.filterbar{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.filterbar .field{flex:1 1 260px; margin:0}
.filterbar label{display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:5px}
.filterbar input{width:100%; font:inherit; padding:8px 10px;
  border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface); color:var(--ink)}

/* ---------- the "nothing yet" panel ---------- */
.start{border-left:3px solid var(--accent)}
.start .btn{margin-top:16px}
.steps-inline{list-style:none; counter-reset:s; margin:16px 0 0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap}
.steps-inline li{counter-increment:s; flex:1 1 150px; padding:10px 12px;
  background:var(--surface-2); border-radius:var(--radius)}
.steps-inline li::before{content:counter(s); display:block; font-family:var(--mono);
  font-size:.68rem; color:var(--accent); font-weight:600; margin-bottom:3px}
.steps-inline b{display:block; font-size:.9rem}
.steps-inline span{display:block; font-size:.8rem; color:var(--muted)}

/* ---------- the plant readiness checklist ---------- */
.checklist{list-style:none; margin:14px 0 0; padding:0}
.checklist li{display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-top:1px solid var(--line)}
.checklist li:last-child{border-bottom:1px solid var(--line)}
.checklist .mark{flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%;
  border:2px solid var(--line-2); position:relative}
.checklist li.ok .mark{background:var(--accent); border-color:var(--accent)}
.checklist li.ok .mark::after{content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
.checklist li.missing .mark{border-color:var(--flag)}
.checklist li.opt .mark{border-style:dashed}
.checklist li > div{flex:1 1 auto; min-width:0}
.checklist b{display:block; font-size:.95rem}
.checklist .det{display:block; font-size:.86rem; color:var(--ink-2)}
.checklist .why{display:block; font-size:.82rem; color:var(--muted); font-style:italic; margin-top:3px}
.checklist li.ok b{color:var(--ink-2)}

/* ---------- client register ---------- */
.orgcard{margin-bottom:14px}
.orghead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.orghead h2{font-size:1.1rem}
.plantlist{list-style:none; margin:12px 0 0; padding:0}
.plantlist li{padding:8px 0; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.plain{list-style:none; margin:8px 0 0; padding:0}
.plain li{padding:5px 0; border-top:1px solid var(--line); font-size:.9rem}

/* ---------- dashboards ---------- */
.grouphead{font-family:var(--sans); font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin:18px 0 4px}
.card > .grouphead:first-of-type{margin-top:12px}
.warnbox{border-left:3px solid var(--flag); background:var(--flag-soft)}
.warnbox h2{color:var(--flag)}

/* the client's four-stage rail -- not NPC's fourteen */
.clientrail{list-style:none; counter-reset:c; margin:12px 0 0; padding:0}
.clientrail li{counter-increment:c; position:relative; display:block;
  padding:11px 0 11px 34px; border-top:1px solid var(--line); opacity:.55}
.clientrail li > div{min-width:0}
.clientrail li::before{content:counter(c); position:absolute; left:0; top:12px;
  width:22px; height:22px;
  border-radius:50%; background:var(--surface-2); color:var(--muted);
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  display:flex; align-items:center; justify-content:center}
.clientrail li.at{opacity:1}
.clientrail li.at::before{background:var(--accent); color:#fff}
.clientrail b{display:block; font-size:.95rem}
.clientrail span{display:block; font-size:.85rem; color:var(--muted)}

.pill.good{background:var(--accent-soft); color:var(--accent-2)}

/* ---------- help, onboarding, questionnaire preparation ---------- */
.guidesteps{list-style:none; counter-reset:g; margin:14px 0 0; padding:0}
/* Deliberately NOT a grid.
   This rule was a two-column grid, and the list item has four children --
   counter, title, description, link. The description landed in the 26px counter
   column and rendered one word per line down the page, twice, on two separate
   days. A block with an absolutely positioned counter cannot go wrong that way:
   it renders correctly whatever number of children the template gives it. */
.guidesteps li{counter-increment:g; position:relative; display:block;
  padding:12px 0 12px 40px; border-top:1px solid var(--line)}
.guidesteps li::before{content:counter(g); position:absolute; left:0; top:12px;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-2); font-family:var(--mono);
  font-size:.72rem; font-weight:600; display:flex; align-items:center; justify-content:center}
.guidesteps li > div{min-width:0}
.guidesteps b{display:block; font-size:.98rem}
.guidesteps span{display:block; font-size:.88rem; color:var(--ink-2)}
.guidesteps a{display:inline-block; margin-top:4px; font-size:.85rem}

.limits{list-style:none; margin:12px 0 0; padding:0}
.limits li{position:relative; padding:9px 0 9px 26px; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink-2)}
.limits li::before{content:"\00d7"; position:absolute; left:6px; top:8px;
  color:var(--flag); font-weight:700}

.firstrun{border-left:3px solid var(--accent); margin-bottom:18px}
.firstrun .eyebrow{margin-bottom:4px}

/* the Engineer ticking what a plant is actually asked for */
.picklist li{align-items:flex-start}
.picklist input[type=checkbox]{flex:none; width:17px; height:17px; margin-top:3px; accent-color:var(--accent)}
.picklist label{cursor:pointer}
.picklist li.opt{opacity:.62}
.picklist li.opt:hover{opacity:1}

.notefromnpc{border-left:3px solid var(--accent); background:var(--accent-soft)}
.notefromnpc p{white-space:normal}

/* the signed-in person's own name, now the way into their profile */
.who .me{display:block; text-decoration:none; color:inherit; border-radius:var(--radius);
  padding:2px 6px; margin:-2px -6px}
.who .me:hover{background:var(--surface-2)}
.who .me:hover b{color:var(--accent)}

/* ---------- training (permanent) ---------- */
.trainingnav ol{margin:8px 0 0; padding-left:20px; columns:2; column-gap:28px}
.trainingnav li{padding:3px 0; font-size:.9rem; break-inside:avoid}
@media(max-width:640px){ .trainingnav ol{columns:1} }
.trainingsection{scroll-margin-top:20px}
.trainingsection .lede{font-size:1.02rem; color:var(--ink-2); max-width:64ch; margin:6px 0 14px}
.trainingsection p{max-width:68ch}
.terms{margin:14px 0 0}
.terms dt{font-weight:600; font-size:.96rem; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line)}
.terms dt:first-child{border-top:0; padding-top:0; margin-top:0}
.terms dd{margin:4px 0 0; color:var(--ink-2); font-size:.92rem; max-width:66ch}

/* ---------- UAT (TEMPORARY -- delete with apps/uat) ---------- */
.uatbanner{background:var(--flag-soft); border:1px solid var(--flag); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:20px; font-size:.88rem; color:var(--ink-2)}
.uatbanner b{display:inline-block; background:var(--flag); color:#fff; border-radius:3px;
  padding:.1rem .42rem; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  margin-right:10px; vertical-align:1px}
.uattask-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.uattask-head .turn-n{font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.06em; color:#fff; background:var(--accent); border-radius:3px; padding:.18rem .45rem}
.uatsteps{list-style:none; counter-reset:u; margin:12px 0 0; padding:0}
.uatsteps li{counter-increment:u; position:relative; padding:12px 0 12px 30px;
  border-top:1px solid var(--line)}
.uatsteps li::before{content:counter(u); position:absolute; left:0; top:13px;
  font-family:var(--mono); font-size:.7rem; color:var(--muted)}
.uatsteps li.fails{background:var(--crit-soft); border-radius:var(--radius);
  padding-left:30px; padding-right:12px; margin:4px 0}
.uatsteps p{margin:0 0 3px; max-width:68ch}
.uatsteps .expect{font-size:.87rem; color:var(--accent-2)}
.uatsteps .expect::before{content:"\2192 "; color:var(--accent)}
.uatsteps .why{font-size:.85rem; color:var(--muted); font-style:italic; margin-top:4px}
.chip-fail{display:inline-block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; padding:.14rem .44rem; border-radius:3px; margin-bottom:5px;
  background:var(--crit); color:#fff}

/* The temporary UAT link. Deliberately louder than the six permanent items --
   people are being asked to go there, and it competes with everything else.
   Delete with apps/uat. */
.nav a.flagged{background:var(--flag); color:#fff; border-radius:99px;
  padding:3px 11px; margin-left:2px}
.nav a.flagged:hover{background:var(--crit); color:#fff}
.nav a.flagged.on{background:var(--crit); color:#fff}

/* TEMPORARY -- delete with apps/uat. */
.uatcall{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; border-left:3px solid var(--flag); background:var(--flag-soft)}
.uatcall h2{font-size:1.15rem; margin-bottom:2px}
.uatcall .eyebrow{color:var(--flag)}
.uatcall p{margin:0; max-width:56ch; font-size:.9rem}
.uatcall .btn{background:var(--flag); border-color:var(--flag); flex:none}
.uatcall .btn:hover{background:var(--crit); border-color:var(--crit)}

/* ---------- label/value fact lists ----------
   These six templates were using .ledger, which is the analysis TABLE style and
   carries min-width:520px. Two consequences, both found in the 24 August review:
   the panel could not shrink, so the whole page scrolled sideways under it; and
   with no rule of its own the label and value ran together, so a profile read
   "You sign in asnpcadmin" and a UAT page read
   "Password for every test accountUatPortal@2026".

   One class name doing two jobs. Same fault as the duplicated ghost-button rule.
   Named separately now, and it wraps instead of forcing a width. */
.factlist{display:flex; flex-direction:column; min-width:0}
.factlist > div{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--line); min-width:0}
.factlist > div:first-child{border-top:0; padding-top:0}
.factlist > div > span{flex:0 0 auto; min-width:11rem; font-size:.78rem;
  letter-spacing:.02em; color:var(--muted)}
.factlist > div > b{flex:1 1 14rem; min-width:0; font-size:.92rem; font-weight:600;
  overflow-wrap:anywhere}
/* Where the value is a sentence rather than a datum -- the two rules on /help/ --
   it needs normal body weight and its own line. */
.factlist.prose > div{flex-direction:column; gap:3px}
.factlist.prose > div > span{min-width:0; font-weight:600; font-size:.9rem;
  color:var(--ink); letter-spacing:0}
.factlist.prose > div > b{font-weight:400; font-size:.88rem; color:var(--ink-2)}

/* ---------- form error summary ----------
   A twelve-field form used to fail its save with nothing above the fold to say
   so: heading unchanged, no banner, first red text off screen. */
.errorsummary{background:var(--crit-soft); border:1px solid var(--crit);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:20px}
.errorsummary b{display:block; color:var(--crit); font-size:.94rem; margin-bottom:6px}
.errorsummary ul{margin:0; padding-left:20px}
.errorsummary li{font-size:.88rem; color:var(--ink-2); padding:2px 0}
.errorsummary a{color:var(--crit); font-weight:600}
/* Cancel discards a long form, so it does not sit within a stray click of Save. */
.formactions .cancel{margin-left:22px}

/* ---------- review fixes, 24 August ---------- */
/* A secondary action that is still the main thing you do on a card. It was
   styled identically to the de-emphasised Help link and the footer. */
.btn.small{font-size:.8rem; padding:5px 11px}
/* The identity block is a link to the profile; nothing said so. */
.who a.me{text-decoration:none; border-bottom:1px dotted var(--line-2); padding-bottom:1px}
.who a.me:hover{border-bottom-color:var(--accent)}
/* Contrast floors. The review measured these at 3.88, 4.06 and 4.35 against a
   4.5 minimum for text this size. */
.foot{color:var(--ink-2)}
.tscroll th{color:var(--ink-2)}
.warnbox .linkish{color:var(--crit); font-weight:600}
/* Running text on the prose pages was reaching 110-118 characters a line. */
.pagehead .sub,.trainingsection .lede,.card > p,.warnbox p{max-width:78ch}