/* ==========================================================================
   Whare Hauora design system — v1 (29 Sep 2026)
   Direction: capable, calm, confident technology. Dark ink bands, light
   reading surfaces, one vivid teal accent. Built for older readers:
   large type, high contrast, big targets. WCAG 2.2 AA minimum; body text AAA.
   Font: Atkinson Hyperlegible Next (Google Fonts). Load in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

:root{
  /* Colour: every pair used for text is contrast-checked (see README) */
  --ink:#061A1F;            /* dark bands, headings, body text */
  --text:#061A1F;           /* 17.9:1 on white */
  --muted:#3F5157;          /* secondary text, 8.3:1 on white */
  --surface:#FFFFFF;        /* reading and form surface */
  --surface-2:#EEF3F2;      /* page behind documents; muted 7.4:1 on it */
  --line:#D5E0DE;           /* dividers only, never a text colour */
  --field:#5E736F;          /* form borders, 5.0:1 (non-text needs 3:1) */
  --accent:#007A6E;         /* teal on light: buttons, links. White on it 5.2:1 */
  --accent-hover:#005C53;
  --accent-soft:#DFF4EF;    /* "meets" chip background; #005C53 on it 6.9:1 */
  --bright:#2EE6C6;         /* teal on ink only: progress, highlights. 11.3:1 */
  --warn:#FFB020;           /* amber on ink only: waiting / overdue. 9.8:1 */
  --warn-soft:#FFE7B3;      /* amber chip on light; text #5A3A00 = 8.5:1 */
  --warn-ink:#5A3A00;
  --warn-text:#8A5A00;      /* amber text on white, 5.9:1 */
  --on-ink:#FFFFFF;         /* text on ink, 17.9:1 */
  --on-ink-muted:rgba(255,255,255,0.8);
  --track-off:rgba(255,255,255,0.22);

  /* Type: sizes never below 16px; body 18–20px */
  --font:"Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif;
  --fs-hero:54px;  --lh-hero:1.05;
  --fs-h1:34px;    --lh-h1:1.2;
  --fs-h2:26px;    --lh-h2:1.25;
  --fs-lead:22px;
  --fs-body:19px;  --lh-body:1.5;
  --fs-small:17px;
  --fs-label:16px;           /* eyebrow labels, uppercase + tracking */

  /* Space, shape, size */
  --gutter:64px; --gap-lg:56px; --gap:24px; --gap-sm:12px;
  --radius:12px; --radius-lg:16px; --pill:999px;
  --target:48px;             /* minimum click/tap target */
  --measure:760px;           /* max line length for reading text */
  --focus:0 0 0 4px #2EE6C6, 0 0 0 6px #061A1F;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--surface)}
h1,h2,h3{margin:0;color:var(--text);letter-spacing:-0.015em}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:800}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:800}
h3{font-size:var(--fs-body);font-weight:700}
p{margin:0;max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:4px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.muted{color:var(--muted)}
.lead{font-size:var(--fs-lead);line-height:1.5}
.eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wrap{padding-inline:var(--gutter)}
@media (max-width:720px){:root{--gutter:20px;--fs-hero:38px;--fs-h1:28px}}

/* ---------- Dark band (header / hero). Dark only here, never behind body copy ---------- */
.band{background:var(--ink);color:var(--on-ink);padding:24px var(--gutter) 40px;display:flex;flex-direction:column;gap:36px}
.band h1,.band h2{color:var(--on-ink)}
.band .hero{font-size:var(--fs-hero);line-height:var(--lh-hero);font-weight:800;letter-spacing:-0.025em;margin:0;max-width:900px}
.band p{color:var(--on-ink);opacity:.9}
.band a{color:var(--bright)}
.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;color:var(--on-ink);text-decoration:none}
.brand::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--bright)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* ---------- Buttons (pill, big target) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 28px;border:0;border-radius:var(--pill);font:inherit;font-size:var(--fs-body);font-weight:700;text-decoration:none;cursor:pointer;background:var(--accent);color:#fff}
.btn:hover{background:var(--accent-hover);color:#fff}
.btn--light{background:#fff;color:var(--ink)}              /* on ink */
.btn--bright{background:var(--bright);color:var(--ink)}    /* on ink, primary */
.btn--outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.band .btn--outline{color:#fff;border-color:rgba(255,255,255,.6)}
.btn--small{min-height:var(--target);padding:10px 20px;font-size:var(--fs-small)}
.btn-link{background:none;border:0;padding:12px 4px;font:inherit;font-size:var(--fs-body);color:var(--accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Fix: ".band a" was overriding button and brand colours on ink */
.band .brand{color:var(--on-ink)}
.band .btn{color:#fff}
.band .btn--bright,.band .btn--light{color:var(--ink)}
.btn--bright:hover{background:#fff;color:var(--ink)}

/* ---------- Progress steps (task list, on ink) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.step{display:flex;flex-direction:column;gap:8px;color:var(--on-ink);text-decoration:none}
.step__bar{height:6px;border-radius:3px;background:var(--track-off)}
.step--active .step__bar,.step--done .step__bar{background:var(--bright)}
.step__name{font-size:var(--fs-small);font-weight:700}
.step__status{font-size:var(--fs-label);font-weight:700}
.step__detail{font-size:var(--fs-label);color:var(--on-ink-muted)}
/* Statuses: words always carry the meaning; colour only reinforces */
.status--progress{color:var(--bright)}
.status--todo{color:var(--on-ink-muted)}
.status--waiting,.status--board{color:var(--warn)}
.status--blocked{color:var(--on-ink-muted);font-weight:400}  /* "Cannot start yet" */

/* ---------- Chips (on light) ---------- */
.chip{display:inline-block;font-size:var(--fs-label);font-weight:700;border-radius:var(--pill);padding:7px 14px}
.chip--ok{background:var(--accent-soft);color:var(--accent-hover)}
.chip--gap{background:var(--warn-soft);color:var(--warn-ink)}
.chip--neutral{background:var(--surface-2);color:var(--muted)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;font-size:18px;font-weight:700}
.field input,.field textarea,.field select{font:inherit;font-size:var(--fs-body);font-weight:400;color:var(--text);background:#fff;border:2px solid var(--field);border-radius:var(--radius);padding:12px 14px;min-height:var(--target)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:var(--focus);outline:none}
.field__hint{font-weight:400;color:var(--muted);font-size:var(--fs-small)}

/* ---------- Layout helpers ---------- */
.main{padding:44px var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-lg)}
.main > .span-2{grid-column:span 2}
@media (max-width:900px){.main{grid-template-columns:1fr}.main > .span-2{grid-column:auto}}
.aside{display:flex;flex-direction:column;gap:14px;font-size:18px}
.callout{padding-left:16px;box-shadow:inset 4px 0 0 var(--accent)}   /* the one emphasis device */

/* ---------- List rows (answers, items) — dividers, not boxes ---------- */
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:5fr 4fr 3fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:900px){.row{grid-template-columns:1fr}}

/* ---------- Document / record ---------- */
.doc-page{background:var(--surface-2);padding:36px var(--gutter)}
.doc{max-width:960px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);padding:40px 48px;display:flex;flex-direction:column;gap:26px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{font-size:36px;font-weight:800}
.stat__label{font-size:var(--fs-small);color:var(--muted)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
table.data th{text-align:left;color:var(--muted);font-weight:700;padding:10px 0;border-bottom:2px solid var(--ink)}
table.data td{padding:12px 0;border-bottom:1px solid var(--line)}

/* Tables scroll inside their own box on small screens */
.table-wrap{overflow-x:auto}
@media (max-width:720px){.doc{padding:24px 20px}.steps{grid-template-columns:1fr 1fr}}

@media print{.band{background:#fff;color:#000}.btn{display:none}.doc-page{background:#fff;padding:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}