*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sisu-backdrop{position:fixed;inset:0;background:var(--paper);z-index:-1;pointer-events:none}
:root{
  /* Sisu brand tokens — Brand Guidelines v1.0 Part 4 and Part 8.1.
     Body text is Fjord Blue on Snow (10.16:1, AAA). Mist and Stone never
     carry text. Pine and Fjord never touch as figure and ground. */
  --ink:#1F3E5A;--ink-2:#345069;--ink-3:#556C80;
  --paper:#F6F5F2;--card:#FFFFFF;--sunk:#E5E6E6;
  --line:#CBD0D4;--line-2:#A9BBC8;
  --accent:#1F3E5A;--accent-dk:#152A3E;--accent-lt:#EAEBE6;
  --pine:#5B735E;--ochre:#DCC29B;
  --danger:#9B4A3F;--danger-lt:#F6ECEA;
  --ok:#4A7C59;--warn:#B08442;
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --r:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#EDF0F3;--ink-2:#C6D0D9;--ink-3:#9FADBA;
  --paper:#152A3E;--card:#1F3E5A;--sunk:#193249;
  --line:#345069;--line-2:#556C80;
  --accent:#F6F5F2;--accent-dk:#E5E6E6;--accent-lt:#193249;
  --pine:#99A799;--ochre:#DCC29B;
  --danger:#E0A79E;--danger-lt:#3A2724;
  --ok:#8FBF9C;--warn:#D8B478;
}}
:root[data-theme="dark"]{
  --ink:#EDF0F3;--ink-2:#C6D0D9;--ink-3:#9FADBA;
  --paper:#152A3E;--card:#1F3E5A;--sunk:#193249;
  --line:#345069;--line-2:#556C80;
  --accent:#F6F5F2;--accent-dk:#E5E6E6;--accent-lt:#193249;
  --pine:#99A799;--ochre:#DCC29B;
  --danger:#E0A79E;--danger-lt:#3A2724;
  --ok:#8FBF9C;--warn:#D8B478;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ---- shell ---- */
.shell{max-width:660px;margin:0 auto;padding:0 18px 140px}
@media(min-width:700px){.shell{padding:0 24px 160px}}

/* ---- sticky progress ---- */
.bar{position:sticky;top:0;z-index:30;background:var(--paper);padding:14px 0 10px;border-bottom:1px solid var(--line)}
.bar-in{max-width:660px;margin:0 auto;padding:0 18px}
@media(min-width:700px){.bar-in{padding:0 24px}}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.bar-name{font-size:13px;font-weight:700;letter-spacing:.02em}
.bar-step{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.track{height:5px;background:var(--sunk);border-radius:99px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:99px;width:0;transition:width .32s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.fill{transition:none}}

/* ---- masthead ---- */
.mast{padding:34px 0 8px}
.mast .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 10px}
.mast h1{font-family:var(--serif);font-weight:500;font-size:31px;line-height:1.15;letter-spacing:-.015em;margin:0 0 10px}
.mast p{margin:0;color:var(--ink-2);font-size:16px;max-width:52ch}
.mast .time{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--ink-3);background:var(--sunk);padding:6px 12px;border-radius:99px}

/* ---- steps ---- */
.step{display:none;padding-top:26px}
.step.on{display:block}
.step.on.anim{animation:in .26s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.step.on.anim{animation:none}}
.step h2{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.step .sub{margin:0 0 24px;color:var(--ink-2);font-size:15.5px;max-width:54ch}

/* ---- fields ---- */
.f{margin:0 0 24px}
.f > label,.gl{display:block;font-size:16px;font-weight:600;line-height:1.4;margin:0 0 3px}
.hint{font-size:14px;color:var(--ink-3);line-height:1.45;margin:0 0 9px}
.req{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--danger);vertical-align:1px}
.opt{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);vertical-align:1px}

input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line-2);border-radius:var(--r);padding:13px 14px;line-height:1.4;
  appearance:none;-webkit-appearance:none}
textarea{min-height:104px;resize:vertical;line-height:1.55}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23556C80' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)}
input.bad,select.bad,textarea.bad{border-color:var(--danger);background:var(--danger-lt)}
::placeholder{color:var(--ink-3);opacity:.75}

/* ---- choice controls: big tap targets ---- */
.choices{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.choices.row{flex-direction:row;flex-wrap:wrap}
.choices.row .ch{flex:1 1 120px}
.ch{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--card);
  border:1.5px solid var(--line-2);border-radius:var(--r);cursor:pointer;min-height:52px;
  transition:border-color .12s,background .12s}
@media(prefers-reduced-motion:reduce){.ch{transition:none}}
.ch:hover{border-color:var(--line-2)}
.ch input{margin:0;flex:0 0 auto;width:22px;height:22px;accent-color:var(--accent);margin-top:1px}
.ch span{font-size:16px;line-height:1.35}
.ch.sel{border-color:var(--accent);background:var(--accent-lt)}
.ch:focus-within{box-shadow:0 0 0 3px var(--accent-lt);border-color:var(--accent)}
fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
legend{padding:0;font-size:16px;font-weight:600;line-height:1.4;margin:0 0 3px}

/* ---- conditional ---- */
.when{display:none;margin:14px 0 0;padding:16px 0 2px 16px;border-left:3px solid var(--accent-lt)}
.when.on{display:block}
.when.bare{padding:0;border-left:0;margin:12px 0 0}

/* ---- consent / legal text ---- */
.legal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;max-height:270px;overflow-y:auto;font-size:15px;line-height:1.6;color:var(--ink-2);
  margin:0 0 14px;-webkit-overflow-scrolling:touch}
.legal h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.legal p{margin:0 0 11px}
.legal p:last-child{margin:0}
.legal ol,.legal ul{margin:0 0 11px;padding-left:20px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--ink);font-weight:600}
.scrollnote{font-size:13px;color:var(--ink-3);margin:-8px 0 12px;text-align:center}

/* ---- callouts ---- */
/* Links. There was no rule for these at all, so they fell back to the browser's
   default blue — which in dark mode is blue text on the dark navy that .note and
   .note.plain are painted with, and unreadable. It hid the tel: link on the
   thank-you page and all three registry links an officer clicks to run a
   background check. Underlined as well as coloured, because colour alone is not
   an affordance and these have to work for someone reading in a hurry. */
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.note{border-left:3px solid var(--accent);background:var(--accent-lt);padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0;margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.note strong{color:var(--ink)}
.note.plain{background:var(--sunk);border-left-color:var(--line-2)}

/* ---- repeating rows (references, medications) ---- */
.row-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px}
.row-card .rl{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 12px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.grid2 .f{margin:0}

/* ---- signature ---- */
.sig{background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r);padding:18px}
.sig .sigline{font-family:var(--serif);font-size:27px;color:var(--accent-dk);min-height:44px;
  border-bottom:1.5px dashed var(--line-2);padding:4px 0 8px;margin:0 0 8px;word-break:break-word}
.sig .stamp{font-size:13px;color:var(--ink-3)}

/* ---- nav ---- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);
  border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.nav-in{max-width:660px;margin:0 auto;display:flex;gap:10px}
.btn{flex:1;font-family:var(--sans);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:14px 28px;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;min-height:48px;line-height:1.2}
.btn-go{background:var(--accent);color:#fff;flex:2}
:root[data-theme="dark"] .btn-go,html:not([data-theme="light"]) .btn-go{color:#1F3E5A}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-go{color:#fff}}
.btn-go:hover{background:var(--accent-dk)}
.btn-back{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-back:hover{background:var(--sunk)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,.ch:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* ---- errors ---- */
.err{display:none;color:var(--danger);font-size:14px;font-weight:600;margin-top:6px}
.err.on{display:block}
.summary{display:none;background:var(--danger-lt);border-left:3px solid var(--danger);
  padding:14px 16px;border-radius:0 var(--r) var(--r) 0;margin:0 0 20px;font-size:15px;color:var(--danger)}
.summary.on{display:block}

/* ---- saved indicator ---- */
.saved{position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);font-size:13px;padding:7px 15px;border-radius:99px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:35;white-space:nowrap}
.saved.on{opacity:.94;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.saved{transition:none}}

/* ---- done ---- */
.done{display:none;padding:56px 0;text-align:center}
.done.on{display:block}
.done h2{font-family:var(--serif);font-weight:500;font-size:29px;margin:0 0 12px}
.done p{color:var(--ink-2);max-width:44ch;margin:0 auto 14px;font-size:16.5px}
.tick{width:60px;height:60px;border-radius:50%;background:var(--accent-lt);color:var(--accent-dk);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:30px}

.foot{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* ---- segmented date: month / day / year ----
   Native date inputs open at today's date, so a birth year is 40 years of
   scrolling on a phone. Three fields with a numeric keypad beat that. */
.dparts{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr) minmax(0,1fr);
  gap:8px;margin-top:4px}
/* grid children default to min-width:auto and refuse to shrink below their
   intrinsic input width, which overflows the row on a narrow phone */
/* the day and year boxes are styled by class, not by input[type=...] */
.dparts select,.dparts input{margin:0;min-width:0;width:100%;
  font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line-2);border-radius:var(--r);padding:13px 14px;line-height:1.4;
  appearance:none;-webkit-appearance:none}
.dparts select{padding-right:30px;background-position:right 9px center}
.dparts .dd,.dparts .dy{text-align:center;font-variant-numeric:tabular-nums}
.dparts.bad select,.dparts.bad input{border-color:var(--danger);background:var(--danger-lt)}
.dhint{font-size:13px;color:var(--ink-3);margin:6px 0 0}

/* ---- inline field validity ---- */
.f.ok input:not(:focus),.f.ok select:not(:focus){border-color:var(--line-2)}
input:disabled,select:disabled{opacity:.5}

/* ---- textarea auto-grow ---- */
textarea{overflow:hidden}

/* ---- section name in the sticky bar ---- */
.bar-sec{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.3}

/* ---- legal blocks: taller on desktop, capped on phones ---- */
@media(max-width:600px){.legal{max-height:210px}}
.legal.read{border-color:var(--accent)}
.legal-done{font-size:13px;color:var(--accent-dk);font-weight:600;margin:-8px 0 12px;text-align:center;display:none}
.legal-done.on{display:block}

/* ---- skip link + focus target ---- */
.step h2{scroll-margin-top:90px}
.step h2:focus{outline:none}

/* ---- staff forms opened from a task link ---- */
.nocid{display:none;border-left:3px solid var(--danger);background:var(--danger-lt);
  padding:16px 18px;border-radius:var(--r);margin:22px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.nocid.on{display:block}
.nocid b{display:block;color:var(--ink);font-size:17px;margin:0 0 7px;font-family:var(--serif);font-weight:500}
.nocid ul{margin:10px 0 0;padding-left:20px}
.nocid li{margin:0 0 5px}
.locked .step,.locked .summary{opacity:.3;pointer-events:none;filter:grayscale(1)}
.cidfor{font-size:13.5px;color:var(--ink-3);background:var(--sunk);border-radius:99px;
  padding:6px 13px;display:inline-block;margin:0 0 4px}
.cidfor code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ink-2)}

/* Anyone can wipe their answers off the device they are standing at, without
   needing to know what browser storage is. Deliberately quiet: this is a
   destructive action and should not compete with Continue. */
.wipe{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
}
.wipe:hover{color:var(--warn)}

/* Sub-headings inside a step. These were inline style attributes until the
   static site's Content Security Policy (no 'unsafe-inline') started dropping
   them — the headings still rendered, just at the wrong size and spacing. */
.sub-h{font-size:17px;margin:34px 0 14px}
.sub-h-tight{font-size:17px;margin:0 0 12px}
.sub-h-gap{font-size:17px;margin:40px 0 12px}
.spacer-14{height:14px}

/* ---------- house vote tally ----------
   The computed result of the ballot. It is the one element on the form nobody
   types into and the only one that decides anything, so it is set apart from
   the inputs rather than reading as another field. */
.tally{border:1px solid var(--line);border-left:3px solid var(--acc);
  background:var(--sunk);border-radius:0 8px 8px 0;padding:14px 16px;margin:4px 0 18px}
.tally-line{margin:0 0 6px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.tally-out{margin:10px 0 0;font-weight:700;font-size:15px;line-height:1.45}
.tally-out:empty{display:none}
.tally-out.pass{color:var(--ok)}
.tally-out.fail{color:var(--new)}
.tally-out.warn{color:var(--ren)}

/* ---------- confirmation pages ----------
   These rules used to live only in the generator, which meant they reached the
   standalone artifacts and never the deployed site: the markup shipped, the
   styling did not, and every confirmation page rendered as unstyled prose with
   a bare checkmark in it. They belong in the stylesheet the build ships. */
.rc{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.rc h2{font-family:var(--serif);font-weight:500;font-size:20px;margin:0;padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.rc ol{margin:0;padding:14px 20px 18px 40px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.rc ol li{margin:0 0 9px}
.rc ol li:last-child{margin:0}
.rc ol li b{color:var(--ink)}
/* The end of a submission should feel like an end. This was a 26px badge
   sitting above four blocks of prose, which reads as another paragraph rather
   than as "you are finished". A large mark, centred, with air around it, is the
   whole signal — the words below it are for whoever wants them. */
.rc-tick{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:8px 0 30px;padding:30px 20px 26px;border-radius:var(--r);
  background:var(--accent-lt);border:1px solid var(--line)}
.rc-tick span{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:99px;background:var(--accent);
  color:var(--paper);font-size:32px;line-height:1;flex:0 0 auto}
.rc-tick b{font-family:var(--serif);font-weight:500;font-size:19px;
  letter-spacing:.01em;color:var(--ink);text-transform:none}
.rc-tick i{font-style:normal;font-size:14.5px;color:var(--ink-3);text-align:center;
  max-width:34ch;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .rc-tick span{animation:tick-in .34s cubic-bezier(.2,.9,.3,1.2) both}
}
@keyframes tick-in{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}