/* Onboarding Portal — one family (Atkinson Hyperlegible, built for low-vision legibility),
   its mono cut only for identity numbers. Forest ink for structure, gold reserved for focus
   and the active place in navigation. */
/* Self-hosted fonts (SIL Open Font License, see /fonts/OFL.txt). */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
  --ink: #12352b;
  --ink-2: #1d4a3c;
  --paper: #f3f5f2;
  --surface: #ffffff;
  --gold: #e0a526;
  --line: #cfd8d2;
  --line-strong: #9fb0a7;
  --text: #17231e;
  --muted: #56665f;
  --error: #b42318;
  --error-bg: #fdf0ee;
  --ok: #1f7a4d;
  --ok-bg: #eaf5ee;
  --warn: #8a5a00;
  --warn-bg: #fdf4e1;
  --info-bg: #e9f0f5;
  --info: #1f4f6e;

  --sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", monospace;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--gold);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--step-0)/1.55 var(--sans);
  font-optical-sizing: auto;
}
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); font-weight: 800; }
h2 { font-size: var(--step-1); font-weight: 700; }
h3 { font-size: var(--step-0); font-weight: 700; }
p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }
/* The page region takes focus on navigation so screen readers announce the new page; it needs no ring. */
#main:focus, #main:focus-visible { box-shadow: none; outline: none; }
.mono { font-family: var(--mono); font-feature-settings: "zero" 1; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; font-weight: 700; border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; }
.noscript { padding: 2rem; }

/* ---------- Shell ---------- */
.app { min-height: 100vh; }
.shell { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; background: linear-gradient(to right, var(--ink) 15.5rem, transparent 0); }
.sidebar {
  background: var(--ink); color: #e6eee9;
  padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 2rem;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 0.7rem; align-items: center; padding: 0 0.5rem; color: #fff; text-decoration: none; }
.brand svg { flex: none; }
.brand strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.brand span { display: block; font-size: var(--step--1); color: #b9cbc2; }
.nav { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-group { margin-top: 1.25rem; padding: 0 0.75rem 0.35rem; font-size: var(--step--1); color: #9db5a9; }
.nav a {
  display: block; padding: 0.6rem 0.75rem; color: #e6eee9; text-decoration: none;
  border-radius: var(--radius-s); border-left: 4px solid transparent;
}
.nav a:hover { background: var(--ink-2); }
.nav a[aria-current="page"] { background: var(--ink-2); border-left-color: var(--gold); color: #fff; font-weight: 700; }
.sidebar-foot { margin-top: auto; padding: 0 0.5rem; font-size: var(--step--1); color: #b9cbc2; }
.sidebar-foot strong { display: block; color: #fff; font-size: var(--step-0); }
.sidebar-foot .link-btn { color: #fff; margin-top: 0.6rem; }

.topbar { display: none; }
.main { padding: 2.25rem clamp(1rem, 4vw, 3rem) 4rem; max-width: 76rem; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.75rem; }
.page-head p { color: var(--muted); margin-top: 0.4rem; max-width: 60ch; }
.crumb { font-size: var(--step--1); margin-bottom: 0.5rem; display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-s);
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--paper); border-color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--error); border-color: var(--error); }
.btn-danger:hover { background: var(--error-bg); }
.btn-danger.solid { background: var(--error); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Sign in ---------- */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.signin-side {
  background: var(--ink); color: #e6eee9; padding: clamp(2rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
}
.signin-side h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); max-width: 14ch; }
.signin-side p { color: #c7d6ce; max-width: 40ch; margin-top: 1rem; }
.signin-flows { display: grid; gap: 1rem; max-width: 28rem; }
.signin-flows div { border-top: 1px solid #3c6656; padding-top: 0.9rem; }
.signin-flows strong { color: #fff; display: block; }
.signin-flows span { color: #b9cbc2; font-size: var(--step--1); }
.signin-main { display: grid; place-items: center; padding: 2rem 1rem; }
.signin-card { width: min(26rem, 100%); }
.signin-card h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.signin-card > p { color: var(--muted); margin-bottom: 1.75rem; }

/* ---------- Forms ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.form { display: grid; gap: 1.35rem; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.35rem; }
.fieldset + .fieldset { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.fieldset legend { font-weight: 700; font-size: var(--step-1); padding: 0; margin-bottom: 0.25rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; }
.hint { color: var(--muted); font-size: var(--step--1); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; align-items: end; }
.input, .select, .textarea {
  width: 100%; min-height: 2.9rem; padding: 0.6rem 0.8rem;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-s);
}
.textarea { min-height: 5.5rem; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ink); box-shadow: var(--focus); }
.input.mono { text-transform: uppercase; }
.select {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2312352B' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); }
.field-error { color: var(--error); font-weight: 700; font-size: var(--step--1); display: flex; gap: 0.4rem; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--error); color: #fff; font-size: 0.75rem; margin-top: 0.1rem; }
.pin-wrap { display: flex; gap: 0.5rem; }
.pin-wrap .input { flex: 1; }

.positions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }

.error-summary {
  border: 3px solid var(--error); border-radius: var(--radius-m); padding: 1rem 1.25rem; background: var(--surface);
}
.error-summary h2 { font-size: var(--step-0); color: var(--error); margin-bottom: 0.4rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--error); font-weight: 700; }

.notice { border-left: 4px solid var(--info); background: var(--info-bg); padding: 0.85rem 1rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: var(--step--1); }

/* ---------- Live previews: the one expressive moment ---------- */
.preview { position: sticky; top: 2rem; display: grid; gap: 0.75rem; }
.preview-caption { font-size: var(--step--1); color: var(--muted); }

.idcard {
  aspect-ratio: 85.6 / 54; width: 100%; max-width: 27rem;
  border-radius: 14px; overflow: hidden; position: relative;
  background:
    repeating-linear-gradient(115deg, rgba(18,53,43,0.035) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #fbfcf9, #eef3ee);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(18,53,43,0.06), 0 18px 40px -22px rgba(18,53,43,0.45);
  display: grid; grid-template-rows: auto 1fr auto; font-size: clamp(0.7rem, 1.6vw, 0.86rem);
}
.idcard-band { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 0.45rem; }
.idcard-band i:nth-child(1) { background: #c8102e; }
.idcard-band i:nth-child(2) { background: var(--gold); }
.idcard-band i:nth-child(3) { background: #006b3f; }
.idcard-body { display: grid; grid-template-columns: 30% 1fr; gap: 1rem; padding: 0.9rem 1.1rem 0.4rem; }
.idcard-photo {
  background: var(--ink); color: var(--gold); border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 2.2em; aspect-ratio: 3/4; align-self: start;
}
.idcard dl { margin: 0; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.idcard dt { color: var(--muted); font-size: 0.82em; line-height: 1.1; }
.idcard dd { margin: 0; font-weight: 700; color: var(--text); overflow-wrap: anywhere; line-height: 1.2; }
.idcard dd.blank { color: #5d6c65; font-weight: 400; font-style: italic; }
.idcard-number { padding: 0.45rem 1.1rem 0.8rem; display: flex; justify-content: space-between; align-items: end; gap: 0.5rem; }
.idcard-number .mono { font-size: 1.45em; font-weight: 600; color: var(--ink); letter-spacing: 0.06em; }
.idcard-number .pos { background: var(--ink); color: #fff; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 4px; }

.label-slip {
  background: var(--surface); border: 2px dashed var(--line-strong); border-radius: var(--radius-m);
  padding: 1.25rem 1.4rem; max-width: 27rem; display: grid; gap: 0.9rem;
}
.label-slip .to { font-size: var(--step--1); color: var(--muted); }
.label-slip .name { font-weight: 800; font-size: var(--step-1); line-height: 1.25; overflow-wrap: anywhere; }
.label-slip .addr { white-space: pre-line; overflow-wrap: anywhere; }
.label-slip .gps {
  font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; color: var(--ink);
  letter-spacing: 0.06em; border-top: 2px solid var(--ink); padding-top: 0.7rem;
}
.label-slip .gps small { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--muted); letter-spacing: 0; font-weight: 400; }
.label-slip .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; font-size: var(--step--1); }
.label-slip .meta span { color: var(--muted); display: block; }
.label-slip .meta strong { overflow-wrap: anywhere; }
.placeholder { color: #5d6c65; font-weight: 400; font-style: italic; }
.label-slip .settle {
  display: grid; gap: 0.15rem; font-size: var(--step--1);
  border-top: 1px solid var(--line); padding-top: 0.75rem;
}
.label-slip .settle > span:first-child { color: var(--muted); }
.label-slip .settle strong, .label-slip .settle .acct-name { overflow-wrap: anywhere; }
.label-slip .settle .mono { font-family: var(--mono); letter-spacing: 0.04em; }

/* ---------- Company and bank details ---------- */
.field[hidden], .btn[hidden] { display: none; }
/* Centre forms are in block letters; the script converts the value, this keeps the display steady. */
[data-upper] { text-transform: uppercase; }
[data-upper]::placeholder { text-transform: none; }
.match-hint { font-size: var(--step--1); min-height: 0; }
.match-hint:empty { display: none; }
.match-hint.ok { color: var(--ok); font-weight: 700; }
.match-hint.warn { color: var(--warn); font-weight: 700; }
.match-hint.ok::before { content: "✓ "; }
.match-hint.warn::before { content: "! "; }
.badge.flag { margin-left: 0.5rem; vertical-align: middle; }
.bank-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.4rem 1.5rem; display: grid; gap: 1rem; }
.bank-section .panel-head { flex-wrap: wrap; align-items: center; }

/* ---------- Overview ---------- */
.overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.4rem 1.5rem; display: grid; gap: 1rem; align-content: start; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tally { display: flex; align-items: baseline; gap: 0.6rem; }
.tally strong { font-size: 2.6rem; line-height: 1; font-weight: 800; color: var(--ink); }
.breakdown { display: grid; gap: 0.55rem; }
.breakdown-row { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; gap: 0.75rem; align-items: center; font-size: var(--step--1); }
.bar { height: 0.6rem; background: var(--paper); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.breakdown-row .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.recent { list-style: none; margin: 0; padding: 0; display: grid; }
.recent li { border-top: 1px solid var(--line); }
.recent a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; text-decoration: none; }
.recent a:hover strong { text-decoration: underline; }
.recent .muted { font-size: var(--step--1); white-space: nowrap; }
.empty { padding: 1.5rem; border: 2px dashed var(--line); border-radius: var(--radius-m); text-align: center; display: grid; gap: 0.75rem; justify-items: center; color: var(--muted); }

/* ---------- Tables ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.toolbar .field { min-width: 12rem; }
.toolbar .grow { flex: 1; min-width: 15rem; }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
caption { text-align: left; padding: 0.9rem 1rem; color: var(--muted); font-size: var(--step--1); caption-side: bottom; border-top: 1px solid var(--line); }
th, td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; }
thead th { font-size: var(--step--1); color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--line); white-space: nowrap; }
tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr:hover { background: #f8faf8; }
td a { font-weight: 700; }
td.mono { white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 99px; font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.badge.active, .badge.onboarded { background: var(--ok-bg); color: var(--ok); }
.badge.suspended, .badge.rejected { background: var(--error-bg); color: var(--error); }
.badge.pending { background: var(--warn-bg); color: var(--warn); }
.badge.submitted { background: var(--info-bg); color: var(--info); }
.pos-tag { font-family: var(--mono); font-weight: 600; background: var(--paper); border: 1px solid var(--line); padding: 0.05rem 0.45rem; border-radius: 4px; font-size: var(--step--1); }

/* ---------- Detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2rem; align-items: start; }
.facts { display: grid; grid-template-columns: 11rem 1fr; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.facts dt, .facts dd { padding: 0.85rem 1.1rem; margin: 0; }
.facts dt { color: var(--muted); font-weight: 700; font-size: var(--step--1); }
.facts dt:not(:first-of-type), .facts dt:not(:first-of-type) + dd { border-top: 1px solid var(--line); }
.facts dd { overflow-wrap: anywhere; }
.side-stack { display: grid; gap: 1.25rem; }
.side-stack:empty { display: none; }

.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stepper li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.75rem; position: relative; padding-bottom: 1rem; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; left: 0.75rem; top: 1.6rem; bottom: 0; width: 2px; background: var(--line); }
.stepper .dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; }
.stepper li.done .dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper li.current .dot { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(224,165,38,0.45); }
.stepper li.stopped .dot { background: var(--error); border-color: var(--error); color: #fff; }
.stepper strong { display: block; }
.stepper span { font-size: var(--step--1); color: var(--muted); }

.confirm { border: 2px solid var(--error); border-radius: var(--radius-m); padding: 1rem 1.1rem; background: var(--error-bg); display: grid; gap: 0.75rem; }
.confirm.caution { border-color: var(--warn); background: var(--warn-bg); }
.stack { display: grid; gap: 1.5rem; }
.link-panel .share code { font-size: var(--step-0); letter-spacing: 0.02em; }


/* ---------- Self-service officer onboarding ---------- */
.signin-alt { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); }
.signin-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 28rem; }
.signin-steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.85rem; border-top: 1px solid #3c6656; padding-top: 0.9rem; }
.signin-steps li::before {
  content: counter(step); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-weight: 800;
}
.signin-steps strong { color: #fff; }
.signin-steps span { color: #b9cbc2; font-size: var(--step--1); }

.applicant-shell { min-height: 100vh; }
.appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink); color: #fff; padding: 0.75rem clamp(1rem, 4vw, 3rem);
}
.appbar .menu-btn { background: transparent; color: #fff; border: 2px solid #4f7a6b; border-radius: var(--radius-s); min-height: 2.75rem; padding: 0 0.9rem; font-weight: 700; cursor: pointer; }
.appbar .menu-btn:hover { border-color: #fff; }
.applicant-main { margin: 0 auto; }

.field-label { font-weight: 700; }
.locked {
  min-height: 2.9rem; padding: 0.6rem 0.8rem; display: flex; align-items: center;
  background: var(--paper); border: 2px dashed var(--line-strong); border-radius: var(--radius-s); font-weight: 600;
}
.notice.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.notice.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.panel.approve { border: 2px solid var(--gold); }
.share { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.share code { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.55rem 0.8rem; overflow-wrap: anywhere; flex: 1; min-width: 12rem; }
.section-title { margin: 0.5rem 0 1rem; }
.link-btn.danger { color: var(--error); font-weight: 700; }
.recent.to-do a strong { font-weight: 700; }
@media (max-width: 860px) {
  .signin-steps { display: none; }
}


/* ---------- Pre-registration: adding cards ---------- */
.prereg-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.segmented { display: inline-flex; border: 2px solid var(--line-strong); border-radius: var(--radius-s); padding: 3px; gap: 3px; background: var(--paper); justify-self: start; flex-wrap: wrap; }
.seg { border: 0; background: transparent; padding: 0.5rem 0.9rem; min-height: 2.5rem; border-radius: 4px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg:hover { color: var(--ink); }
.seg[aria-pressed="true"] { background: var(--ink); color: #fff; }
.upload { display: grid; gap: 1.1rem; }
.file-input {
  width: 100%; padding: 1.4rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius-m);
  background: var(--paper); cursor: pointer;
}
.file-input:hover { border-color: var(--ink); }
.file-input::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 1rem; padding: 0.55rem 1rem; min-height: 2.75rem;
  border: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--ink); color: #fff; cursor: pointer;
}
.field.has-error .file-input { border-color: var(--error); }
.templates { font-size: var(--step--1); color: var(--muted); }
.upload-file { overflow-wrap: anywhere; }
.mapping { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.35rem 1rem; margin: 0; font-size: var(--step--1); }
.mapping dt { color: var(--muted); font-weight: 700; }
.mapping dd { margin: 0; }
.problems { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.75rem 1rem; background: var(--surface); }
.problems summary { cursor: pointer; font-weight: 700; color: var(--warn); }
.problems ul { margin: 0.6rem 0; padding-left: 1.2rem; font-size: var(--step--1); }
.sample table { font-size: var(--step--1); }
.sample th, .sample td { padding: 0.45rem 0.75rem; }
.sample caption { caption-side: top; border-top: 0; border-bottom: 1px solid var(--line); }
.uploading { display: grid; gap: 0.6rem; }
.uploading progress { width: 100%; height: 0.9rem; accent-color: var(--ink); }
.more-row { justify-content: center; margin-top: 1rem; }
.more-row [hidden] { display: none; }
@media (max-width: 1080px) { .prereg-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mapping { grid-template-columns: 1fr; } .mapping dd { margin-bottom: 0.4rem; } }

/* Spam trap for the public centre form: off-screen, never shown to people. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Prestige Centres ---------- */
.prestige-add { max-width: 46rem; }
.badge.off { background: #eceeed; color: var(--muted); }
.rename { display: grid; gap: 0.35rem; max-width: 24rem; }
.rename .input { min-height: 2.5rem; }

.start-switch { margin: -0.5rem 0 1.75rem; }
.narrow { max-width: 30rem; }

@media (max-width: 560px) {
  .segmented { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .seg { white-space: normal; text-align: center; line-height: 1.25; padding: 0.55rem 0.5rem; }
}

/* ---------- Toast & loading ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 0.8rem 1.2rem; border-radius: var(--radius-s); font-weight: 700;
  max-width: calc(100% - 2rem); transition: opacity 0.2s, transform 0.2s; z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--error); }
.loading { color: var(--muted); padding: 2rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .form-layout, .detail { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
  .overview { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; background: none; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; inset: 0; z-index: 30; height: auto; overflow-y: auto; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--ink); color: #fff; padding: 0.75rem 1rem; position: sticky; top: 0; z-index: 20;
  }
  .topbar .brand span { display: none; }
  .menu-btn { background: transparent; color: #fff; border: 2px solid #4f7a6b; border-radius: var(--radius-s); min-height: 2.75rem; padding: 0 0.9rem; font-weight: 700; cursor: pointer; }
  .close-menu { align-self: flex-end; }
  .main { padding-top: 1.5rem; }
  .signin { grid-template-columns: 1fr; }
  .signin-side { gap: 1.5rem; padding: 2rem 1rem; }
  .signin-flows { display: none; }
}
@media (min-width: 861px) { .close-menu { display: none; } }
@media (max-width: 560px) {
  h1 { font-size: var(--step-2); }
  .idcard { aspect-ratio: auto; font-size: 0.85rem; }
  .idcard-photo { font-size: 1.6em; }
  .field-row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: 0.2rem; border-top: 0 !important; }
  .page-head .actions { width: 100%; }
  .breakdown-row { grid-template-columns: 5.5rem 1fr 2rem; }
  /* Tables become stacked records on phones */
  .stack-table thead { display: none; }
  .stack-table tr { display: grid; padding: 0.75rem 1rem; gap: 0.2rem; }
  .stack-table td { padding: 0; }
  .stack-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--step--1); }
  .stack-table tbody tr + tr td { border-top: 0; }
  .stack-table tbody tr + tr { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sidebar, .topbar, .actions, .toolbar, .skip-link { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

/* ---------- Security check (CAPTCHA) ---------- */
.captcha-challenge:empty { display: none; }
.captcha-challenge img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: #f3f5f2;
}
.captcha .field { max-width: 22rem; }
.captcha .field label { font-size: var(--step-0); }
.captcha-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.captcha-actions .link-btn { padding: 0.35rem 0; }