/* Page shell — brick primary (design.md §5.1). Do not "fix" this.
   Divergence: content width 960px, not §3.2's 760px — the dashboard embeds a form.
   The volunteer manager / coordinator console is a separate stylesheet.
   Never both in one file. */

/* ==========================================================================
   1. Tokens (design.md §1)
   The :root block is COPIED from the spec, not edited (§12.3). If a value here
   disagrees with design.md §1, the spec is right and this file is the bug.
   ========================================================================== */

:root{
  /* brand */
  --navy:#1B3A6B; --navy-2:#274F86; --brick:#B5341C; --peach:#F2C9A0; --rose:#E8A09A;
  /* surfaces */
  --paper:#F5F4F0; --surface:#FFFFFF; --surface-2:#F6F3EC;
  --line:#DAD3C7; --line-soft:#E8E2D6;
  /* text */
  --ink:#1A1A2E; --ink-soft:#4A5568; --muted:#5F6B7D; --muted-bg:#ECEAE4;
  /* semantic aliases — components use THESE, not the brand hexes */
  --harbor:#1B3A6B; --harbor-2:#274F86; --beacon:#B5341C;
  /* status */
  --ok:#2E7D5B;     --ok-bg:#E3F0E9;
  --warn:#A9781C;   --warn-bg:#F5ECD7;
  --urgent:#B5341C; --urgent-bg:#F6E2DC;
  /* elevation + radii */
  --shadow-sm:0 1px 2px rgba(26,26,46,.07);
  --shadow:0 1px 2px rgba(26,26,46,.06),0 12px 30px rgba(27,58,107,.12);
  --r:10px; --r-sm:7px;
}

/* §1.1 coverage tokens — unused on this page, but the token block is copied
   whole. A partial :root is the bug §12.3 names. */
:root{
  --cover-none:#cdc9bf;  --cover-none-bg:#faf9f6;   /* no shift at this time+role */
  --cover-empty:#B5341C; --cover-empty-bg:#fdf3f1;  /* nobody signed up */
  --cover-part:#9a6a00;  --cover-part-bg:#fff8ec;   /* partially filled */
  --cover-full:#1d6b2b;  --cover-full-bg:#eef7ef;   /* at capacity */
}

/* Typography stacks (§2) — one web face, body on the system stack. */
:root{
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --text:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Code",Consolas,ui-monospace,monospace;
}

/* SUPPLEMENTARY TOKENS — not in design.md §1 yet. Proposed spec addition.
   §1.2 lightens --navy and --brick in dark so they read as FOREGROUND on dark
   surfaces. But the navy topbar and the brick primary button use them as
   BACKGROUNDS under white text, where lightening destroys the contrast
   (#fff on #E8A09A is ~1.9:1). These two pairs make "chrome fill + the text
   on it" one decision per theme, which is what §1 rule 2 asks for everywhere
   else. Write these into §1 before the next tool copies this file. */
:root{
  --bar:#1B3A6B;  --bar-ink:#FFFFFF;   /* topbar */
  --cta:#B5341C;  --cta-ink:#FFFFFF;   /* primary button + action bar */
}

/* --------------------------------------------------------------------------
   1.2 Dark mode — all three selectors, in this order. The explicit-light block
   must be able to win back over the media query.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme:dark){
  :root{
    --navy:#6E9BD1; --navy-2:#8FB4DE; --brick:#E8A09A; --peach:#C79A6E; --rose:#E8A09A;
    --paper:#0F1621; --surface:#18212F; --surface-2:#1F2A3A;
    --line:#2E3B4E; --line-soft:#26313F;
    --ink:#E7EBF2; --ink-soft:#B4BECD; --muted:#8B97A8; --muted-bg:#232E3D;
    --harbor:#6E9BD1; --harbor-2:#8FB4DE; --beacon:#E8A09A;
    --ok:#5BBC8E;     --ok-bg:#14261C;
    --warn:#D8A94E;   --warn-bg:#2B2416;
    --urgent:#E8A09A; --urgent-bg:#2C1A17;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.45);
    --cover-none:#6b6659;  --cover-none-bg:#171a17;
    --cover-empty:#E07A63; --cover-empty-bg:#2c1a17;
    --cover-part:#D8A94E;  --cover-part-bg:#2b2416;
    --cover-full:#5BBC8E;  --cover-full-bg:#14261c;
    --bar:#16202E;  --bar-ink:#E7EBF2;
    --cta:#E8A09A;  --cta-ink:#2A1512;
  }
}

:root[data-theme="dark"]{
  --navy:#6E9BD1; --navy-2:#8FB4DE; --brick:#E8A09A; --peach:#C79A6E; --rose:#E8A09A;
  --paper:#0F1621; --surface:#18212F; --surface-2:#1F2A3A;
  --line:#2E3B4E; --line-soft:#26313F;
  --ink:#E7EBF2; --ink-soft:#B4BECD; --muted:#8B97A8; --muted-bg:#232E3D;
  --harbor:#6E9BD1; --harbor-2:#8FB4DE; --beacon:#E8A09A;
  --ok:#5BBC8E;     --ok-bg:#14261C;
  --warn:#D8A94E;   --warn-bg:#2B2416;
  --urgent:#E8A09A; --urgent-bg:#2C1A17;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.45);
  --cover-none:#6b6659;  --cover-none-bg:#171a17;
  --cover-empty:#E07A63; --cover-empty-bg:#2c1a17;
  --cover-part:#D8A94E;  --cover-part-bg:#2b2416;
  --cover-full:#5BBC8E;  --cover-full-bg:#14261c;
  --bar:#16202E;  --bar-ink:#E7EBF2;
  --cta:#E8A09A;  --cta-ink:#2A1512;
}

:root[data-theme="light"]{
  --navy:#1B3A6B; --navy-2:#274F86; --brick:#B5341C; --peach:#F2C9A0; --rose:#E8A09A;
  --paper:#F5F4F0; --surface:#FFFFFF; --surface-2:#F6F3EC;
  --line:#DAD3C7; --line-soft:#E8E2D6;
  --ink:#1A1A2E; --ink-soft:#4A5568; --muted:#5F6B7D; --muted-bg:#ECEAE4;
  --harbor:#1B3A6B; --harbor-2:#274F86; --beacon:#B5341C;
  --ok:#2E7D5B;     --ok-bg:#E3F0E9;
  --warn:#A9781C;   --warn-bg:#F5ECD7;
  --urgent:#B5341C; --urgent-bg:#F6E2DC;
  --shadow-sm:0 1px 2px rgba(26,26,46,.07);
  --shadow:0 1px 2px rgba(26,26,46,.06),0 12px 30px rgba(27,58,107,.12);
  --cover-none:#cdc9bf;  --cover-none-bg:#faf9f6;
  --cover-empty:#B5341C; --cover-empty-bg:#fdf3f1;
  --cover-part:#9a6a00;  --cover-part-bg:#fff8ec;
  --cover-full:#1d6b2b;  --cover-full-bg:#eef7ef;
  --bar:#1B3A6B;  --bar-ink:#FFFFFF;
  --cta:#B5341C;  --cta-ink:#FFFFFF;
}


/* ==========================================================================
   2. Base (design.md §2, §8)
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.5 var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;          /* §8 — the page body never scrolls sideways */
}

h1,h2,h3,h4{
  margin:0;                    /* spacing belongs to the container (§2) */
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.005em;
  text-wrap:balance;
}

p{margin:0}
svg{display:block}
img{max-width:100%}

a{color:var(--harbor)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brick);
  outline-offset:2px;
}

/* The tracked micro-label — the signature device (§2). */
.eyebrow{
  font:700 11px/1.2 var(--text);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--beacon);
}
.eyebrow.structural{color:var(--harbor)}
.eyebrow.quiet{color:var(--muted);font-weight:600}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.meta{font-size:12.5px;color:var(--muted)}

/* §8 — nothing animates on load; transitions are hover/state only. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}


/* ==========================================================================
   3. Page shell (design.md §3.2)
   ========================================================================== */

.topbar{
  background:var(--bar);
  color:var(--bar-ink);
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.topbar h1{
  font-size:20px;
  font-weight:600;
  color:var(--bar-ink);
  margin-right:auto;
  min-width:0;
}
.topbar a{color:var(--bar-ink)}

/* .beam — the lighthouse mark (§3.1). The only logo asset we have; reused here
   in the topbar and on the gate card. */
.beam{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:9px;
  background:linear-gradient(150deg,#1B3A6B,#274F86);  /* fixed: sits under white glyph */
  display:grid;place-items:center;
  color:#fff;
}
.beam svg{width:19px;height:19px}
.beam.lg{width:46px;height:46px;flex-basis:46px;border-radius:12px}
.beam.lg svg{width:25px;height:25px}

/* The header action: translucent white pill with a brick count badge (§3.2). */
.headpill{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22);
  color:var(--bar-ink);
  font:600 13.5px/1 var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s;
}
.headpill:hover{background:rgba(255,255,255,.26)}
.headpill .count{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;
  background:var(--cta);
  color:var(--cta-ink);
  font:700 11.5px/1 var(--text);
  font-variant-numeric:tabular-nums;
}

/* Icon button (theme toggle) sitting in the navy bar. */
.topbar .icon-btn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:var(--bar-ink);
  cursor:pointer;
  transition:background .15s;
}
.topbar .icon-btn:hover{background:rgba(255,255,255,.24)}
.topbar .icon-btn svg{width:17px;height:17px}
/* Show the sun in dark mode, the moon in light — one icon at a time. */
.icon-btn .i-dark{display:none}
:root[data-theme="dark"] .icon-btn .i-dark{display:block}
:root[data-theme="dark"] .icon-btn .i-light{display:none}

/* Amber strip when running ungated / unfinished (§7). */
.demo{
  background:var(--warn-bg);
  /* --warn on --warn-bg is only 3.3:1 — fine for a pill, short of AA for a full
     line of 12px text. Pull the amber toward the ink to get to ~6.5:1 without
     leaving the status pair. */
  color:color-mix(in srgb,var(--warn) 55%,var(--ink));
  border-bottom:1px solid var(--line);
  padding:9px 20px;
  font:700 12px/1.3 var(--text);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
}

.wrap{
  max-width:960px;            /* divergence from §3.2's 760 — see line 1 */
  margin:24px auto;
  padding:0 16px 96px;        /* the 96 clears the action bar. Keep it. */
}

/* The page grid — the three dashboard regions (§3.2 + grid layout). */
.dash{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-content:start;
}

/* The persistent CTA. Rendered only when there is pending work and you are not
   already on the page it points to — that conditional is the whole point. */
.actionbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:30;
  display:block;
  padding:16px 20px;
  background:var(--cta);
  color:var(--cta-ink);
  font:700 17px/1.25 var(--text);
  text-align:center;
  text-decoration:none;
  border:0;
  cursor:pointer;
  box-shadow:0 -2px 14px rgba(26,26,46,.18);
}
.actionbar:hover{filter:brightness(1.06)}


/* ==========================================================================
   4. Surfaces (design.md §4)
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;            /* border AND shadow — the border carries dark mode */
  margin:10px;
}

.card-head{
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.card-head h3{font-size:16px;color:var(--ink);margin-right:auto}
.card-body{padding:18px}
.card-foot{
  padding:12px 18px;
  background:var(--surface-2);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}


/* ==========================================================================
   5. Controls (design.md §5)
   ========================================================================== */

/* 5.1 Buttons — PAGE SHELL: brick primary. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;                       /* §8 — targets ≥36px */
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--cta);
  color:var(--cta-ink);
  font:600 14px/1.2 var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{filter:brightness(1.07)}
/* Both classes render as <a> in some places and as <button> inside a POST form
   in others (the CSRF-protected logout and Finish actions). The UA button
   styling has to be switched off so the two look identical. */
button.btn,button.headpill{appearance:none;-webkit-appearance:none}
/* …and the wrapping <form> is only there to carry the token — it must not add
   a box to the flex row it sits in (cf. .gate-card form). */
.topbar form,.card-head form{margin:0}
.btn.alt{background:var(--navy)}         /* secondary primary */
.btn.accept{background:var(--ok)}        /* irreversible-positive only */
.btn.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn.ghost:hover{background:var(--surface-2);filter:none}
/* 36px, not 32px: design.md §8 sets the floor for every target and `small`
   was quietly under it. These are the buttons that sit several-to-a-cell in
   the vetting queue, next to the ones that end a candidacy. */
.btn.small{padding:8px 11px;min-height:36px;font-size:12.5px}
.btn.block{width:100%}
.btn.warn{
  background:var(--warn-bg);
  border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  color:var(--warn);
}
.btn.warn:hover{background:color-mix(in srgb,var(--warn-bg) 1,var(--line) 20%);filter:none}
.btn.danger{
  background:var(--urgent-bg);
  border-color:color-mix(in srgb,var(--urgent) 30%,transparent);
  color:var(--urgent);
}
.btn.danger:hover{background:var(--urgent);color:var(--surface);border-color:var(--urgent);filter:none}
/* Disabled swaps to the grey triple — never opacity (§5.1). */
.btn[disabled],.btn.is-disabled{
  background:var(--muted-bg);
  border-color:var(--line);
  color:var(--muted);
  cursor:default;
  filter:none;
  pointer-events:none;
}

.xbtn{
  border:0;background:none;padding:4px;
  color:var(--muted);cursor:pointer;line-height:1;
  transition:color .15s;
}
.xbtn:hover{color:var(--beacon)}

/* 5.3 Status pills and tags. Round means state, square-ish means label. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;
  border-radius:20px;
  font:600 11.5px/1.3 var(--text);
  background:var(--muted-bg);
  color:var(--muted);
  white-space:nowrap;
}
.pill::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  flex:0 0 6px;
}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.urgent{background:var(--urgent-bg);color:var(--urgent)}

.tag{
  display:inline-block;
  padding:3px 8px;
  border-radius:5px;
  background:var(--muted-bg);
  color:var(--ink-soft);
  font:600 11.5px/1.3 var(--text);
}

/* 5.4 Forms */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{
  font:600 12px/1.3 var(--text);
  color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--harbor);
  outline-offset:1px;
}
/* Mark BOTH ends (§5.4). */
.req{color:var(--beacon);font-weight:700}
.opt{color:var(--muted);font-weight:400;font-size:11.5px}

.form-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:flex-end;
}
.form-actions .left{margin-right:auto}


/* ==========================================================================
   6. Feedback (design.md §6)
   ========================================================================== */

/* Anything the user must act on goes inline above the content, not in a toast. */
.banner{
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--harbor);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--ink-soft);
  font-size:14px;
}
.banner.warn{
  background:var(--urgent-bg);
  border-color:color-mix(in srgb,var(--urgent) 30%,transparent);
  border-left-color:var(--urgent);
  color:var(--urgent);
}
.banner.ok{
  background:var(--ok-bg);
  border-color:color-mix(in srgb,var(--ok) 30%,transparent);
  border-left-color:var(--ok);
  color:var(--ok);
}
/* Every banner so far has been one flashed line of text; a confirm-page
   warning (design.md §6) is the first to need more than one. */
.banner p{margin:0}
.banner p+p{margin-top:6px}

.empty{
  padding:44px 24px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.empty h4{font-size:16px;color:var(--ink-soft);margin-bottom:6px}

/* Long help collapses in place — never a link to somewhere else (§6). */
details.help{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  padding:0 14px;
}
details.help summary{
  cursor:pointer;
  padding:11px 0;
  color:var(--harbor);
  font:600 13.5px/1.3 var(--text);
}
details.help[open] summary{border-bottom:1px solid var(--line-soft)}
details.help .help-body{padding:12px 0 14px;color:var(--ink-soft);font-size:14px}
details.help .help-body p + p{margin-top:9px}

/* The token link is the person's only way back — print it on screen (§6). */
.link-box{
  font-family:var(--mono);
  font-size:12.5px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 12px;
  word-break:break-all;
  color:var(--ink-soft);
}


/* ==========================================================================
   7. Region 1 — the next-task card
   ========================================================================== */

.nexttask{
  display:grid;
  grid-template-columns:1fr;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
@media (min-width:720px){
  /* .tilehead split (§4) — the action sits BESIDE the two-line description. */
  .nexttask{grid-template-columns:minmax(0,1fr) auto}
}

.nexttask-body{
  padding:22px 24px;
  display:grid;
  gap:9px;
  align-content:start;
}
.nexttask-body h2{
  font-size:24px;
  color:var(--harbor);
}
.nexttask-body p{
  font-size:15px;
  color:var(--ink-soft);
  max-width:58ch;
}

.nexttask-side{
  padding:20px 24px 22px;
  background:var(--surface-2);
  border-top:1px solid var(--line-soft);
  display:grid;
  gap:10px;
  align-content:center;
  justify-items:stretch;
  text-align:center;
}
@media (min-width:720px){
  .nexttask-side{
    border-top:0;
    border-left:1px solid var(--line-soft);
    padding:22px 24px;
    min-width:210px;
  }
}
.nexttask-side .meta{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* A pill states a status; it hugs its text rather than stretching to the panel. */
.nexttask-side .pill{justify-self:center}

/* State variants — each is a foreground/background pair (§1 rule 2), and each
   says what state it is in words as well as colour (§8). The tint covers the
   whole card, side panel included, so it reads as one surface rather than as a
   coloured card with a blank column bolted on. */
.nexttask.waiting{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.nexttask.waiting .nexttask-body{background: var(--paper);}
.nexttask.waiting .nexttask-side{background:var(--warn-bg)}
.nexttask.waiting .nexttask-side{
  border-color:color-mix(in srgb,var(--warn) 25%,transparent);
}
.nexttask.waiting .nexttask-body h2{color:var(--warn)}
.nexttask.waiting .nexttask-body p{color:var(--warn)}
.nexttask.waiting .eyebrow{color:var(--warn)}

.nexttask.done{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.nexttask.done .nexttask-body,
.nexttask.done .nexttask-side{background:var(--ok-bg)}
.nexttask.done .nexttask-side{
  border-color:color-mix(in srgb,var(--ok) 25%,transparent);
}
.nexttask.done .nexttask-body h2{color:var(--ok)}
.nexttask.done .nexttask-body p{color:var(--ok)}
.nexttask.done .eyebrow{color:var(--ok)}

/* --- the on-load glow ---------------------------------------------------
   Twice, then it stops. Not forever: a permanent pulse is furniture (§3.2),
   and this has one specific job. Submitting a form reloads the page
   (surveyJS/render.js), so an applicant who has just finished a step arrives
   at a dashboard that looks much like the one they left -- the glow is what
   says "this card is the thing that changed".

   The tint follows the card's own state pair rather than being one fixed
   colour, so a step that's in progress glows warn and a finished application
   glows ok. Colour is not carrying the message either way (§8): the card
   already says which state it is in words.

   The global prefers-reduced-motion rule (§2) switches this off outright, so
   there is no separate media query here. */
.nexttask{
  --glow:var(--urgent);
  animation:nexttask-glow 1.5s ease-in-out .25s 2;
}
.nexttask.waiting{--glow:var(--warn)}
.nexttask.done{--glow:var(--ok)}

@keyframes nexttask-glow{
  /* Starts and ends on the resting shadow, so nothing is left behind when the
     animation finishes and no fill-mode is needed. */
  0%,100%{box-shadow:var(--shadow-sm)}
  45%{
    box-shadow:var(--shadow-sm),
               0 0 0 5px color-mix(in srgb,var(--glow) 26%,transparent);
  }
}

/* The §6 confirmation badge, reused for the finished state. */
.donebadge{
  width:66px;height:66px;
  border-radius:50%;
  background:var(--ok-bg);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  display:grid;place-items:center;
  color:var(--ok);
  justify-self:center;
}
.donebadge svg{width:30px;height:30px}


/* ==========================================================================
   8. Region 2 — the progress timeline
   New component; tokens only. Orientation is purely CSS, so the template
   never branches: same markup at every width.
   ========================================================================== */

.timeline-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
}
.timeline-head .eyebrow{margin-right:auto}
.timeline-head .count{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  color:var(--muted);
}

.timeline{
  display:grid;
  grid-auto-flow:row;
  gap:0;
  padding:16px 18px 18px;
  list-style:none;
  margin:0;
}

.step{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  column-gap:12px;
  padding-bottom:20px;
}
.step:last-child{padding-bottom:0}

.step-marker{
  grid-column:1;
  width:22px;height:22px;
  border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--line);
  background:var(--surface);
  color:transparent;
  z-index:1;
}
.step-marker svg{width:12px;height:12px}

.step-text{grid-column:2;display:grid;gap:2px;min-width:0}
.step-title{
  font:600 14px/1.3 var(--text);
  color:var(--ink);
}
.step-state{
  font:600 11px/1.3 var(--text);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* The connector. Vertical by default — a rail down the marker column. */
.step::after{
  content:"";
  position:absolute;
  left:10px;                 /* centre of the 22px marker in a 28px column */
  top:22px;bottom:0;
  width:2px;
  background:var(--line);
}
.step:last-child::after{display:none}

/* --- states ------------------------------------------------------------- */

.step.done .step-marker{
  border-color:var(--ok);
  background:var(--ok);
  color:var(--ok-bg);   /* the pair inverted — near-white in light, near-black in dark */
}
.step.done .step-state{color:var(--ok)}
.step.done::after{background:var(--ok)}   /* rail fills only behind what's done */

.step.current .step-marker{
  border-width:3px;
  border-color:var(--beacon);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--urgent-bg);
}
.step.current .step-title{color:var(--beacon)}
.step.current .step-state{color:var(--beacon)}

/* Waiting: the applicant has done everything this step asked and is parked on
   the hidden stage that follows it. Deliberately neither `done` (they aren't
   through it) nor `current` (there is nothing for them to do), so the marker
   is a filled centre inside an open ring rather than a tick or a target. The
   warn pair matches Region 1's waiting card, so both say the same thing. */
.step.waiting .step-marker{
  border-color:var(--warn);
  background:radial-gradient(circle,var(--warn) 0 42%,var(--surface) 43%);
}
.step.waiting .step-title{color:var(--warn)}
.step.waiting .step-state{color:var(--warn)}
/* The rail behind a wait is not filled: the step is not finished. */

.step.todo .step-marker{border-color:var(--line);background:var(--surface)}
.step.todo .step-title{color:var(--ink-soft)}
.step.todo .step-state{color:var(--muted)}

/* --- horizontal above 720px --------------------------------------------- */

@media (min-width:720px){
  .timeline{
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    padding:22px 18px 20px;
  }
  .step{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:0 6px;
  }
  .step-marker{grid-column:1}
  .step-text{grid-column:1;justify-items:center;margin-top:9px;gap:3px}
  .step-title{font-size:13.5px}

  /* The rail runs LEFT from each marker, so the segment behind a completed
     step is the one that fills. The first step has nothing to its left. */
  .step::after{
    left:auto;
    right:50%;
    top:10px;bottom:auto;
    width:calc(100% - 22px);
    height:2px;
    margin-right:13px;
  }
  .step:last-child::after{display:block}
  .step:first-child::after{display:none}
  /* A step is reached if it is done or current — fill the segment behind it. */
  .step.current::after{background:var(--ok)}
}


/* ==========================================================================
   9. Region 3 — the task embed
   ========================================================================== */

.taskcard .card-head h3{font-size:16px}

.taskembed{
  position:relative;
  background:var(--surface-2);
  height:auto;
}
.taskembed #surveyElement{
  display:block;
  width:100%;
  border:0;
}

/* A `type: "html"` question (the waiver's agreement text) used to ship its
   own <style> block for this structure -- section/h3/dl/footer -- and that
   block is exactly what render.js's onAfterRenderQuestion now strips, because
   it was unscoped and was overriding this app's own body font, background
   and header on every page it appeared on (see render.js for the full
   account). Stripping it left the agreement as unstyled default HTML, which
   is a worse reading experience for a document someone is about to sign.
   These rules restore structure using the semantic tags/classes the survey
   content already carries, SCOPED under #surveyElement so they can never
   repeat the leak -- and using this app's own tokens rather than the
   removed stylesheet's, so a legal document reads as part of the same
   product rather than a pasted-in PDF. */
#surveyElement section{margin-bottom:20px}
#surveyElement h3{
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  padding-bottom:6px;
  margin-bottom:10px;
}
#surveyElement p{margin:0 0 12px;line-height:1.6;text-wrap:pretty}
#surveyElement dl{margin:8px 0 0}
#surveyElement dt{font-weight:600;margin-top:10px;color:var(--ink)}
#surveyElement dd{margin:2px 0 0;color:var(--ink-soft)}
#surveyElement footer{
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}


/* ==========================================================================
   10. Access gate (design.md §7) — login and register
   ========================================================================== */

.gate{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px 16px;
  background:
    radial-gradient(900px 520px at 100% 0%,color-mix(in srgb,var(--peach) 55%,transparent),transparent 60%),
    radial-gradient(900px 560px at 0% 100%,color-mix(in srgb,var(--navy) 30%,transparent),transparent 60%),
    var(--paper);
}

.gate-card{
  width:min(440px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px 26px 24px;
  display:grid;
  gap:16px;
}
.gate-card .gate-mark{display:flex;align-items:center;gap:12px}
.gate-card h2{font-size:22px;color:var(--harbor)}
.gate-card .lede{font-size:14px;color:var(--ink-soft)}
.gate-card form{margin:0}
.gate-foot{
  border-top:1px solid var(--line-soft);
  padding-top:14px;
  font-size:12px;
  color:var(--muted);
}
.gate-alt{font-size:13.5px;color:var(--ink-soft);text-align:center}

/* The applicant's way out, at the foot of every page of their shell.

   Footnote weight on purpose (§3.1's "every screen keeps a place for an
   explanation"): this is the answer to "how do I stop", not an invitation to
   leave, so it sits below the action bar's clearance at muted size rather
   than competing with the task above it. The link is underlined and coloured
   as a link because disguising an exit is how you get people clicking it by
   accident — and unlike an unsubscribe, this one ends an application.

   No dark-mode block: every colour here is a token, and :root[data-theme]
   already redefines them. */
.pagefoot{
  max-width:960px;
  margin:0 auto;
  padding:18px 16px 40px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}
.pagefoot a{color:var(--muted);text-decoration:underline}
.pagefoot a:hover{color:var(--ink-soft)}