/* Parent application pages. The look of the earlier prototype (prototype/static/styles.css):
   dark header, three document-stage tabs, one card per stage, two-column field grid on wide
   screens and one column on phones. No external resources. Every control keeps a 16 px font so
   iOS Safari does not zoom on focus. Tap targets are at least 24 px (WCAG 2.2 AA); the signature
   lines keep a 44 px tap area. */
:root { color-scheme: light; --ink:#183044; --muted:#5b6c79; --blue:#126b8c; --blue-dark:#074d68; --paper:#fff; --wash:#f2f7f8; --line:#cad8dd; --amber:#fff6d8; --error:#a42222; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--wash); }

.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem max(1rem,calc((100% - 1100px)/2)); background:var(--header-bg); color:white; }
h1,h2 { line-height:1.15; margin:.2rem 0; }
h1:focus,h2:focus { outline:none; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:.75rem; }
p { margin:.5rem 0; }
main { width:min(1100px,calc(100% - 2rem)); margin:1.4rem auto 4rem; }
a { color:var(--link); }

.banner,.policy-note,.receipt { padding:1rem 1.2rem; border-radius:.55rem; margin:1rem 0; }
.banner { background:var(--banner-bg); border:2px solid var(--error); }
.banner p { margin:0; }
.banner-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.policy-note { background:var(--amber); border-left:5px solid #d69b12; }
.receipt { background:var(--ok-bg); border:2px solid var(--ok-line); }

.stage-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:0 0 1.5rem; }
.stage-tab { background:var(--tab-bg); color:var(--ink); text-align:left; font-weight:600; }
.stage-tab:hover { background:var(--tab-hover); }
.stage-tab span { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; margin-right:.3rem; border-radius:50%; background:var(--badge-bg); color:var(--badge-ink); }
.stage-tab.active { background:var(--blue); color:white; }
.stage-tab.active .stage-number { background:var(--badge-active-bg); color:var(--blue-dark); font-weight:800; }

button { appearance:none; border:0; border-radius:.4rem; min-height:2.75rem; padding:.75rem 1rem; font:inherit; font-weight:700; color:white; background:var(--blue); cursor:pointer; }
button:hover { background:var(--blue-dark); }
button:disabled { opacity:.5; cursor:not-allowed; }
button:disabled:hover { background:var(--blue); }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
button.secondary { background:var(--btn2-bg); color:var(--link); border:1px solid var(--edge); font-weight:600; }
button.secondary:hover { background:var(--tint); }
button.secondary:disabled:hover { background:var(--btn2-bg); }
button.link { background:none; color:var(--link); text-decoration:underline; font-weight:600; padding:.6rem .5rem; }
button.link:hover { background:var(--tint); }

.stage { background:var(--paper); border:1px solid var(--line); border-radius:.7rem; padding:clamp(1rem,3vw,2rem); box-shadow:0 5px 20px var(--shadow-card); }
.stage-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.stage-heading p:not(.eyebrow) { max-width:36rem; color:var(--muted); margin:0; }
.shared { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; background:var(--tint-2); padding:.8rem 1rem; margin:1rem 0; border-radius:.4rem; }

fieldset { border:0; padding:1.2rem 0; margin:0; min-width:0; border-bottom:1px solid var(--line); }
legend { font-size:1.2rem; font-weight:800; padding:0 0 .7rem; }
.subhead { margin:2rem 0 .8rem; padding-bottom:.3rem; border-bottom:2px solid var(--line-soft); font-size:1.05rem; font-weight:800; color:var(--link); letter-spacing:.01em; }
fieldset > .subhead:first-child,.grid > .subhead:first-child { margin-top:.4rem; }
.help { color:var(--muted); margin-top:0; font-weight:400; }

.grid { display:grid; gap:1rem; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid > .subhead,.grid > .help,.grid > .wide,.grid > .more { grid-column:1 / -1; }
.grid > .subhead { margin-bottom:0; }
.grid > .help { margin:0; }
.field { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.conditional { display:grid; gap:.5rem; align-content:start; min-width:0; }
label,.label { font-weight:650; }
.label-text { display:block; }
.req { display:inline-block; margin-left:.35rem; padding:0 .4rem; border-radius:.3rem; background:var(--chip-bg); color:var(--link); font-size:.75rem; font-weight:700; letter-spacing:.03em; vertical-align:middle; }
.field > .help { margin:0; font-size:.95rem; }

input,select,textarea { width:100%; min-width:0; max-width:100%; border:1px solid var(--field-border); border-radius:.35rem; padding:.65rem; font:inherit; font-size:16px; font-weight:400; color:inherit; background:var(--field-bg); }
input:not([type=checkbox]):not([type=radio]),select { height:2.9rem; }
input[type=date],input[type=time] { display:block; -webkit-appearance:none; appearance:none; min-height:2.9rem; }
::placeholder { font-weight:400; color:var(--placeholder); opacity:1; }
textarea { min-height:7rem; resize:vertical; line-height:1.4; }
[aria-invalid=true] { border-color:var(--error) !important; border-width:2px !important; background:var(--invalid-bg); }
.field-error { margin:.15rem 0 0; color:var(--error); font-weight:600; font-size:.92rem; }

/* A single checkbox or radio with its words: the whole row is the tap target. */
.check { display:flex; flex-direction:row; align-items:center; gap:.6rem; min-height:2.75rem; font-weight:500; cursor:pointer; }
.check input { width:1.25rem; height:1.25rem; margin:0; flex:0 0 auto; accent-color:var(--edge); }
.check-with-help { display:flex; flex-direction:column; gap:.1rem; }
.check-with-help .help { margin:0 0 0 1.85rem; }
.choices { border:0; padding:0; margin:0; }
.choices > legend { font-size:1rem; font-weight:650; padding:0 0 .35rem; }
.choice-row { display:flex; flex-wrap:wrap; gap:0 1.5rem; }
fieldset.choices,fieldset.widget { border-bottom:0; padding:0; }
fieldset.widget > legend { font-size:1rem; font-weight:650; padding:0 0 .35rem; }

.day-grid { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.5rem .75rem; align-items:center; max-width:32rem; }
.day-grid label { font-weight:500; }
.times { display:grid; grid-template-columns:repeat(2,minmax(0,12rem)); gap:.5rem 1rem; margin-top:.5rem; }
.times .day-heading { grid-column:1 / -1; font-weight:700; margin:.75rem 0 0; }
.times .field { gap:.25rem; }
.restrict-days { display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:.25rem 1rem; align-items:center; max-width:36rem; margin-top:.5rem; }
.restrict-days .help { grid-column:1 / -1; }
.more { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

.actions { display:flex; justify-content:space-between; gap:1rem; padding-top:1.5rem; }
.actions > button:last-child { margin-left:auto; }
.nav-extra { text-align:right; margin:.25rem 0 0; }
.saved-state { color:var(--muted); font-size:.9rem; margin:.5rem 0 0; min-height:1.4em; }
.plain-list { padding-left:1.25rem; }
.plain-list li { margin:.5rem 0; }

.fix-list { list-style:none; padding:0; }
.fix-list li { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1rem; border:1px solid var(--line); border-left:4px solid var(--error); border-radius:.4rem; padding:.5rem .75rem; margin:.5rem 0; }
.fix-label { font-weight:650; flex:1 1 16rem; }
.fix-message { color:var(--muted); flex:1 1 12rem; }

.documents { list-style:none; padding:0; }
.documents li { margin:.6rem 0; }
.doc-link { display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem 1rem; border:1px solid var(--edge); border-radius:.4rem; color:var(--link); font-weight:600; text-decoration:none; background:var(--btn2-bg); }
.doc-link:hover { background:var(--tint); }
.doc-pages { color:var(--muted); font-size:.95rem; }

.consent-text { white-space:pre-wrap; background:var(--wash); border-radius:.4rem; padding:.8rem 1rem; margin:0 0 .5rem; }
.segmented { display:flex; flex-wrap:wrap; gap:0 1.5rem; margin-bottom:.5rem; }
.pad { display:block; width:100%; aspect-ratio:6 / 1; min-height:5rem; border:2px dashed var(--edge); border-radius:.4rem; background:white; touch-action:none; cursor:crosshair; margin-bottom:.5rem; }
.typed-preview { font-family:"Times New Roman",Times,serif; font-style:italic; font-size:1.8rem; min-height:2.6rem; border-bottom:1px solid var(--line); margin:.5rem 0; }

/* The forms viewer: a full-screen layer over the application (viewer.js). */
html.viewer-open,html.viewer-open body { overflow:hidden; }
.viewer { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; background:var(--viewer-bg); }
.viewer-top { background:var(--paper); border-bottom:1px solid var(--line); padding:.6rem max(1rem,calc((100% - 1100px)/2)) .4rem; }
.viewer-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.viewer-head h2 { font-size:1.25rem; margin:0; }
.viewer-tabs { display:flex; gap:.4rem; margin:.5rem 0 .3rem; overflow-x:auto; }
.viewer-tab { flex:1 1 0; min-width:6.5rem; background:var(--tab-bg); color:var(--ink); font-weight:600; font-size:.95rem; padding:.45rem .5rem; line-height:1.2; }
.viewer-tab:hover { background:var(--tab-hover); }
.viewer-tab.active { background:var(--blue); color:white; }
.viewer-line { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1rem; margin:.3rem 0 0; }
.viewer-line .help { margin:0; }
.viewer-pages { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:1rem; }
.viewer-page { display:block; width:100%; max-width:900px; height:auto; margin:0 auto 1rem; background:white; box-shadow:0 2px 10px var(--shadow-page); }

@media (max-width:700px) {
  .site-header,.stage-heading { align-items:start; flex-direction:column; }
  .stage-heading { gap:.4rem; }
  .grid.two,.stage-nav { grid-template-columns:1fr; }
  .stage-tab { text-align:center; }
  .times { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day-grid { grid-template-columns:6.5rem minmax(0,1fr); }
  .restrict-days { grid-template-columns:minmax(0,7rem) minmax(0,1fr); }
  .actions { flex-wrap:wrap; }
  .actions > button:last-child { flex:1 1 auto; }
}
.hours-grid { display:grid; grid-template-columns:7.5rem minmax(0,1fr) auto minmax(0,1fr); gap:.5rem .6rem; align-items:center; max-width:36rem; }
.hours-day { font-weight:500; }
.hours-to { color:var(--muted, #5a6b78); }
@media (max-width: 40rem) {
  .hours-grid { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .hours-day { grid-column:1 / -1; margin-top:.25rem; }
}
/* A bordered section (Child, Guardian, Emergency contact, ...): its fields need no prefix. */
.box { grid-column:1 / -1; border:1px solid var(--line); border-radius:10px; background:var(--box-bg); padding:.9rem 1rem 1rem; display:grid; gap:.25rem; }
.box-title { margin:0 0 .35rem; font-size:1rem; color:var(--link); }
.box > .grid { margin:0; }
@media (max-width: 40rem) { .box { padding:.75rem .75rem .85rem; } }
/* Signing on the forms: each page is drawn on a canvas inside a wrapper that holds the tappable lines. */
.viewer-page { position:relative; }
.viewer-page-canvas { display:block; width:100%; height:auto; }
.sign-zone { position:absolute; display:flex; align-items:flex-end; justify-content:space-between; gap:.25rem; padding:0 .25rem; min-height:0; margin:0;
  border:2px dashed #d9480f; border-radius:4px; background:#fff3bfcc; color:#7a2a06; font:inherit; cursor:pointer; overflow:hidden; }
.sign-zone:hover { background:#ffe58fcc; }
.sign-zone.signed { border-style:solid; border-color:#2b8a3e; background:#ebfbeecc; }
.sign-zone-label { align-self:center; margin:0 auto; font-size:clamp(.6rem, 1.6vw, .9rem); font-weight:700; white-space:nowrap; }
.sign-zone-ink { height:100%; width:auto; max-width:80%; }
.sign-zone-typed { font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive; font-size:clamp(.8rem, 2.2vw, 1.3rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; color:#10243e; }
.sign-zone-date { font-size:clamp(.5rem, 1.3vw, .75rem); color:#10243e; white-space:nowrap; }
.sign-progress { font-weight:600; }
/* The viewer docked in the review page: part of the page, with its own scrolling pages area. */
.viewer.docked { position:relative; inset:auto; z-index:auto; display:flex; flex-direction:column; height:min(80vh, 60rem); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:.5rem 0 1rem; }
.viewer.docked #viewer-close, .viewer.docked .viewer-head { display:none; }
.sign-date { position:absolute; display:flex; align-items:flex-end; padding:0 .2rem; font-size:clamp(.55rem, 1.5vw, .85rem); color:#10243e; white-space:nowrap; pointer-events:none; }
#sign-block { display:grid; gap:1rem; }

/* Loading placeholders: the shapes of what is coming, shimmering, so nothing jumps when it arrives. */
@keyframes shimmer { from { background-position:150% 0; } to { background-position:-50% 0; } }
.viewer-page.loading { background:linear-gradient(90deg,var(--shimmer-a) 30%,var(--shimmer-b) 50%,var(--shimmer-a) 70%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .viewer-page.loading { animation:none; } }
/* Before the forms arrive, a copy of the docked viewer's frame (same classes, same size) holds their place. */
.viewer-skeleton .viewer-tab { text-align:center; color:var(--muted); }
.viewer-skeleton.stopped .viewer-page.loading { animation:none; }
.sk-page { aspect-ratio:8.5 / 11; }
/* The line under the tabs keeps one height whether or not the download control is showing yet. */
.viewer-line { display:grid; grid-template-columns:10rem 1fr; align-items:center; height:2.75rem; gap:0 .75rem; }
.viewer-line > button, .viewer-line > a { grid-column:1; grid-row:1; justify-self:start; min-height:2.25rem; padding:.3rem .8rem; }
.viewer-line > .help { grid-column:2; grid-row:1; font-size:.85rem; line-height:1.25; max-height:2.5em; overflow:hidden; }
/* "Change answers" sits beside the forms' heading, where the parent is looking. */
.documents-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; }
.documents-head > div { flex:1 1 18rem; }
.documents-head > div > p:last-child { margin-bottom:0; }
.documents-head > button { flex:0 0 auto; }
/* In the placeholder the status leads; "Check again" (rare) sits at its right, and a failure message may wrap. */
#packet-progress { grid-template-columns:1fr auto; height:auto; min-height:2.75rem; }
#packet-progress > .help { grid-column:1; max-height:none; }
#packet-progress > button { grid-column:2; }
.consent-check { margin-top:1rem; font-weight:600; }
#submit-hint { margin:0; align-self:center; }
/* Phone: the three form tabs share the width instead of scrolling the last one out of view. */
@media (max-width:30rem) {
  .viewer-tab { min-width:0; font-size:.82rem; padding:.4rem .3rem; }
}
/* Each signature line is easy to tap on a phone: an invisible touch area at least 44px tall around it. */
.sign-zone { overflow:visible; }
.sign-zone::before { content:""; position:absolute; left:-4px; right:-4px; top:50%; height:max(100%, 44px); transform:translateY(-50%); }
.sign-notice { margin:.25rem 0 .5rem; padding:.5rem .75rem; border-left:4px solid #c27c0e; background:var(--note-bg); }
.more > .less { margin-left:auto; }
/* Phone: the forms viewer takes most of the screen, so a page is readable without a tiny scroll box. */
@media (max-width:40rem) {
  .viewer.docked { height:85vh; height:85svh; }
}

/* ---------- Compact layout (round 9): less chrome, more form. ---------- */
.site-header { flex-direction:row; align-items:baseline; justify-content:flex-start; gap:.25rem 1rem; flex-wrap:wrap; padding:.55rem max(1rem,calc((100% - 1100px)/2)); }
.site-header h1 { font-size:1.15rem; margin:0; }
.site-header .eyebrow { font-size:.7rem; opacity:.85; }
main { margin-top:.8rem; }
button.small { min-height:2.25rem; padding:.35rem .8rem; font-size:.9rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* The review page: a one-line bar, then the forms and the signing panel. */
main:has(#screen-review:not([hidden])) { width:min(1400px, calc(100% - 2rem)); }
.stage.review { padding:.75rem 1rem 1rem; }
.review-bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.review-bar h2 { font-size:1.2rem; margin:0; }
.review-grid { display:grid; gap:1rem; }
.review-forms { min-width:0; }
.review-hint { margin:.4rem 0 0; font-size:.85rem; }
.viewer.docked { margin:0; height:calc(100vh - 8.5rem); height:calc(100svh - 8.5rem); min-height:24rem; }
@media (min-width:64rem) {
  .review-grid:has(#sign-block:not([hidden])) { grid-template-columns:minmax(0,1fr) 22rem; align-items:start; }
  .sign-panel { position:sticky; top:.75rem; }
}

/* Viewer toolbar: count, next line and download on one line beside the form. */
.viewer-line { display:flex; flex-wrap:nowrap; align-items:center; gap:.5rem; height:2.75rem; }
.viewer-line > .help { order:1; flex:1 1 auto; min-width:0; font-size:.85rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:none; }
.viewer-line > #sign-forms { order:2; flex:0 0 auto; }
.viewer-line > #viewer-share, .viewer-line > #viewer-download { order:3; flex:0 0 auto; min-height:2.25rem; padding:.3rem .7rem; font-size:.85rem; }
#packet-progress { display:flex; }

/* The signing panel. */
.sign-panel { display:grid; gap:.5rem; align-content:start; border:1px solid var(--line); border-radius:10px; padding:.75rem; background:var(--paper); }
.sign-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sign-head h3 { margin:0; font-size:1.05rem; }
.sign-head .segmented { margin:0; gap:0 .9rem; }
.sign-how { margin:0; font-size:.85rem; }
.draw-area { position:relative; }
.draw-area .pad { margin:0; }
#type-area { margin:0; }
.typed-preview { margin:.2rem 0 0; }
.sign-notice { margin:0; font-size:.85rem; }
.check.consent { align-items:flex-start; gap:.5rem; font-size:.82rem; line-height:1.35; color:var(--muted); font-weight:400; padding:.1rem 0; }
.check.consent strong { color:var(--ink); }
.consent .consent-text { background:none; padding:0; margin:0; white-space:normal; border-radius:0; }
.submit-hint { margin:0; font-size:.82rem; }
#submit { width:100%; }

/* Phone: edge to edge, no card frame, and the forms take most of the screen. */
@media (max-width:40rem) {
  main, main:has(#screen-review:not([hidden])) { width:100%; margin:.4rem 0 3rem; }
  .stage { border-left:0; border-right:0; border-radius:0; box-shadow:none; padding:.75rem; }
  .stage.review { padding:.5rem .5rem .75rem; }
  .review-bar h2 { font-size:1.05rem; }
  .viewer.docked { height:calc(100svh - 7.5rem); border-radius:8px; }
  .viewer-line > #sign-forms { padding:.3rem .6rem; }
}
/* Phone header: one line. The stage tabs already show where the parent is. */
@media (max-width:40rem) {
  .site-header { padding:.45rem .75rem; }
  .site-header h1 { font-size:1rem; }
  .site-header .eyebrow { display:none; }
}
/* The signature keeps the server's 6:1 drawing shape at every size, or it would print stretched. */
.pad { aspect-ratio:6 / 1; min-height:0; height:auto; }
/* Draw and Type share one space; the one not in use is invisible but keeps its room. */
.sign-input { display:grid; }
.sign-input > * { grid-area:1 / 1; min-width:0; }
.sign-input > .off { visibility:hidden; }
.pad-tools { display:flex; justify-content:space-between; margin-top:.2rem; }
.pad-tools button { min-height:2rem; padding:.2rem .3rem; }
.submit-hint { min-height:2.3em; }
/* The large signature window. */
.sign-dialog { width:min(64rem, 96vw); max-width:none; border:0; border-radius:12px; padding:1rem 1.25rem; box-shadow:0 20px 60px #10243e55; }
.sign-dialog::backdrop { background:#10243e99; }
.sign-dialog-head h2 { font-size:1.2rem; margin:0 0 .2rem; }
.sign-dialog-head .help { margin:0 0 .6rem; }
.pad-big { margin:0; border-width:3px; }
.sign-dialog-actions { display:flex; gap:.6rem; align-items:center; margin-top:.75rem; }
.sign-dialog-actions #big-clear { margin-right:auto; }
/* "Change answers": a back link at the start of the page's title bar. */
.review-bar { justify-content:flex-start; }
.back-link { background:none; color:var(--link); border:0; padding:.3rem .2rem; min-height:2.25rem; font-weight:600; font-size:.95rem; }
.back-link:hover { background:none; text-decoration:underline; }
.review-bar .back-link { padding-right:1rem; border-right:1px solid var(--line); border-radius:0; }

/* ---------- Form stages, compact (round 11) ---------- */
/* The stage picker: one slim row of three, staying at the top of the screen while the parent scrolls. */
.stage-nav { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:0 0 .75rem; padding:.4rem 0; background:var(--wash); }
.stage-tab { min-height:2.5rem; padding:.35rem .6rem; font-size:.95rem; text-align:center; display:flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap; overflow:hidden; }
.stage-tab .stage-number { width:1.45rem; height:1.45rem; margin:0; font-size:.8rem; flex:0 0 auto; }
.stage-tab .tab-short { display:none; }
.stage-tab .tab-long { overflow:hidden; text-overflow:ellipsis; }
/* The stage's own heading: one title line and a short description. */
.stage-body > .stage-heading { padding-bottom:.6rem; gap:.25rem 1.5rem; }
.stage-body > .stage-heading .eyebrow { display:none; }
.stage-body > .stage-heading h2 { font-size:1.35rem; }
.stage-body > .stage-heading p { font-size:.9rem; }
fieldset { padding:.9rem 0; }
legend { font-size:1.1rem; padding:0 0 .5rem; }
.grid { gap:.8rem; }

@media (max-width:40rem) {
  .stage-nav { padding:.35rem .5rem; margin:0; border-bottom:1px solid var(--line); }
  .stage-tab { font-size:.9rem; padding:.3rem .4rem; min-height:2.4rem; }
  .stage-tab .tab-long { display:none; }
  .stage-tab .tab-short { display:inline; }
  .stage-body > .stage-heading { flex-direction:row; align-items:baseline; }
  .stage-body > .stage-heading h2 { font-size:1.15rem; }
  .stage-body > .stage-heading p { display:none; }
  fieldset { padding:.7rem 0; }
  legend { font-size:1.02rem; padding-bottom:.4rem; }
  .grid { gap:.65rem; }
  .box { padding:.6rem .65rem .7rem; }
  .box-title { margin-bottom:.15rem; }
}
/* The labels are plain text; only the number is a badge. */
.stage-tab .tab-long, .stage-tab .tab-short { width:auto; height:auto; margin:0; border-radius:0; background:none; color:inherit; font-weight:inherit; place-items:initial; }
.stage-tab.active .tab-long, .stage-tab.active .tab-short { color:inherit; }
.local-note { margin:1rem 0 0; padding:.6rem .8rem; border-left:4px solid var(--edge); background:var(--tint); }

/* ---------- Denser fields (round 12) ---------- */
/* Wide screens: as many fields to a row as fit; long ones take two columns. */
.grid.two { grid-template-columns:repeat(auto-fill, minmax(12.5rem, 1fr)); gap:.55rem .8rem; }
.grid.two > .field.long { grid-column:span 2; }
.field { gap:.2rem; }
.field > label, .field > .label-text, legend.label-text { font-size:.92rem; line-height:1.3; }
input:not([type=checkbox]):not([type=radio]),select { height:2.5rem; padding:.35rem .6rem; }
input[type=date],input[type=time] { min-height:2.5rem; }
textarea { min-height:4.5rem; padding:.45rem .6rem; }
.check { min-height:2.4rem; }
.box { gap:.15rem; }
/* Phone: two columns; short fields pair up, everything else takes the whole row. */
@media (max-width:40rem) {
  .grid.two { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem .6rem; }
  .grid.two > .field, .grid.two > .field.long { grid-column:span 2; }
  .grid.two > .field.short { grid-column:span 1; }
}
/* Inputs in a row line up even when one label wraps; headings and notes sit closer to their fields. */
.grid.two { align-items:end; }
.grid.two > .box, .grid.two > .subhead, .grid.two > .help, .grid.two > .more, .grid.two > .wide { align-self:start; }
.subhead { margin:1rem 0 .3rem; padding-bottom:.2rem; font-size:1rem; }
.grid > .help, fieldset > .help { margin:.1rem 0 .2rem; font-size:.9rem; }

/* ---------- Dark mode ---------- */
/* Apply after tokenise.patch (it swaps the hard-coded colours in the rules above for the tokens below).
   Plain CSS, no script: the phone's or computer's own setting decides, via prefers-color-scheme.
   The forms' pages stay white paper; the signature pad and the signing lines sit on paper and stay light. */

/* Colour tokens, light theme. Each value is the hard-coded colour it replaces, so light looks as before. */
:root {
  color-scheme: light dark;   /* native controls (date and time pickers, selects, checkboxes, scrollbars) follow the theme */
  --header-bg:#183044; --box-bg:#f2f7f8;
  --tab-bg:#e2e9ec; --tab-hover:#d3dee3; --badge-bg:#fff; --badge-ink:#183044; --badge-active-bg:#fff;
  --link:#074d68; --edge:#126b8c; --tint:#e4f2f6; --tint-2:#eaf4f7; --chip-bg:#e6eef2; --line-soft:#dbe6ea;
  --btn2-bg:#fff; --field-bg:#fff; --field-border:#8196a1; --placeholder:#6b7b86; --invalid-bg:#fff5f5;
  --banner-bg:#fff0f0; --ok-bg:#e6f6ea; --ok-line:#24753a; --note-bg:#fff6e0;
  --focus:#ffbe32; --viewer-bg:#dfe7ea; --shimmer-a:#e3eaed; --shimmer-b:#f4f7f8;
  --shadow-card:#18304412; --shadow-page:#18304426;
}

/* Light theme contrast fixes (WCAG 2.2 AA): a visible focus ring, readable placeholders and muted
   text, and input borders that stand out inside the boxed sections. The dark theme sets its own. */
:root { --focus:#8a5300; --placeholder:#5f6f7a; --field-border:#6f8794; --muted:#566774; }

/* Dark theme: the same tokens, re-valued. The blue brand stays: blue fills with white text, lighter blue for text and edges. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e6eef2; --muted:#a9bbc6; --focus:#ffbe32; --paper:#15242e; --wash:#0b141b; --line:#33495a; --amber:#3a2f12; --error:#ff9d9d;
    --box-bg:#1b2e3b;
    --tab-bg:#0a1319; --tab-hover:#14222c; --badge-bg:#33495a; --badge-ink:#e6eef2;
    --link:#8fd0e8; --edge:#5fb0cf; --tint:#1f3a4a; --tint-2:#1f3a4a; --chip-bg:#28465a; --line-soft:#2c4252;
    --btn2-bg:#15242e; --field-bg:#0d1820; --field-border:#7f98a8; --placeholder:#94a8b5; --invalid-bg:#2f1a1e;
    --banner-bg:#3a1d21; --ok-bg:#14331f; --ok-line:#4cb36b; --note-bg:#3a2f12;
    --viewer-bg:#091218; --shimmer-a:#1a2b37; --shimmer-b:#263d4c;
    --shadow-card:#00000066; --shadow-page:#00000099;
  }
  /* An inactive tab is a dark well, so the lit blue of the current tab stands out from it; a hairline keeps the well visible. */
  .stage-tab:not(.active), .viewer-tab:not(.active) { box-shadow:inset 0 0 0 1px var(--line); }
  /* The large signature window follows the theme (a dialog's default fill is the system's, not the page's). */
  .sign-dialog { background:var(--paper); color:var(--ink); }
  /* Chrome's autofill paints a pale yellow fill with dark text; keep the field's own colours. */
  input:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color:var(--ink); box-shadow:0 0 0 100px var(--field-bg) inset; caret-color:var(--ink); }
}

/* ---------- Review page on a phone: one slim bar, short labels (round 13) ---------- */
.viewer-tab .tab-short { display:none; }
@media (max-width:40rem) {
  .review-bar { flex-wrap:nowrap; gap:.5rem; margin-bottom:.4rem; }
  .review-bar .back-link { font-size:.85rem; padding:.2rem .6rem .2rem 0; min-height:2rem; white-space:nowrap; }
  .review-bar h2 { font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tab-long { display:none; }
  .viewer-tab .tab-short { display:inline; }
  .viewer-top { padding:.35rem .5rem .25rem; }
  .viewer-tabs { margin:0 0 .25rem; gap:.3rem; }
  .viewer-tab { min-width:0; min-height:2rem; padding:.25rem .4rem; font-size:.85rem; }
  .viewer-line { height:2.25rem; gap:.4rem; }
  .viewer-line > #sign-forms, .viewer-line > #viewer-share, .viewer-line > #viewer-download { min-height:2rem; padding:.2rem .6rem; font-size:.85rem; }
  .viewer.docked { height:calc(100svh - 6rem); }
}

/* Phone: what stays in view while the forms scroll is one row: the form tabs, "Next 0/4" and PDF.
   The status line is folded into the Next button until every line is signed. */
.sign-count { display:none; }
@media (max-width:40rem) {
  .viewer.docked .viewer-top { display:flex; align-items:center; gap:.3rem; padding:.3rem .35rem; }
  .viewer.docked .viewer-tabs { flex:1 1 auto; margin:0; min-width:0; }
  .viewer.docked .viewer-tab { padding:.25rem .2rem; font-size:.8rem; }
  .viewer.docked .viewer-line { flex:0 0 auto; height:auto; margin:0; gap:.3rem; }
  .viewer.docked .viewer-line > .help { display:none; }
  .viewer.docked .viewer-line:has(#sign-forms[hidden]) > #viewer-status { display:block; flex:0 0 auto; }
  .viewer.docked .viewer-line > #sign-forms, .viewer.docked .viewer-line > #viewer-share, .viewer.docked .viewer-line > #viewer-download { padding:.2rem .5rem; font-size:.8rem; min-height:2rem; }
  .sign-count { display:inline; }
  .viewer-skeleton .viewer-top { display:flex; align-items:center; }
  .viewer-skeleton .viewer-tabs { flex:1 1 auto; margin:0; }
  #packet-progress { flex:0 0 auto; height:auto; min-height:0; }
  #packet-progress > .help { display:block; max-width:7rem; font-size:.75rem; }
  .viewer.docked { height:calc(100svh - 4.5rem); }
}
/* Taller signature boxes (the drawing keeps its shape: signature.js fits it to the server's units). */
.pad { aspect-ratio:4 / 1; }
.pad-big { aspect-ratio:3 / 1; }

/* Phone: the forms run in the page (no box scrolling inside the page), and the tabs-and-Next bar
   sticks to the top of the screen like the stage picker, so it never scrolls away under the
   browser's address bar. */
@media (max-width:40rem) {
  .viewer.docked { height:auto; overflow:visible; }
  .viewer.docked .viewer-pages { overflow:visible; flex:none; }
  .viewer.docked .viewer-top { position:sticky; top:0; z-index:4; border-radius:8px 8px 0 0; }
  html:has(#screen-review:not([hidden])) { scroll-padding-top:3.5rem; }
}

/* "Full size" (open the PDF in a new tab) is the phone's way to read a form closely; wide screens
   have room to read in the viewer and keep Download PDF. */
#viewer-open { display:none; }
.viewer-line > #viewer-open { order:3; flex:0 0 auto; min-height:2.25rem; padding:.3rem .7rem; font-size:.85rem; }
@media (max-width:40rem) {
  .viewer-line > #viewer-open:not([hidden]) { display:inline-flex; min-height:2rem; padding:.2rem .5rem; font-size:.8rem; }
  .viewer-line > #viewer-share, .viewer-line > #viewer-download { display:none; }
}

/* "?" tooltips: shown on hover or focus, or toggled by a tap on a phone. */
.check-tip { display:flex; align-items:center; gap:.4rem; }
.tip-wrap { position:relative; display:inline-flex; }
.tip { width:1.6rem; height:1.6rem; min-height:0; padding:0; border-radius:50%; background:var(--tint); color:var(--link); border:1px solid var(--edge); font-size:.85rem; font-weight:800; line-height:1; }
.tip:hover { background:var(--tint); }
.tip-text { display:none; position:absolute; z-index:6; left:50%; bottom:calc(100% + .5rem); transform:translateX(-50%); width:min(18rem, 80vw); padding:.55rem .7rem; border-radius:.45rem; background:var(--ink); color:var(--paper); font-size:.85rem; line-height:1.4; font-weight:400; box-shadow:0 6px 20px #10243e44; }
.tip-wrap:hover .tip-text, .tip-wrap.open .tip-text { display:block; }
/* On a phone the explanation drops below the whole row, full width, so it never runs off screen. */
@media (max-width:40rem) {
  .check-tip { position:relative; }
  .tip-wrap { position:static; }
  .tip-text { left:0; right:0; width:auto; top:calc(100% + .3rem); bottom:auto; transform:none; }
}

/* ---------- Start page (round 17): the button up front, then three short cards ---------- */
.stage.start h2 { font-size:1.5rem; margin:0 0 .35rem; }
.start-lead { margin:0 0 .9rem; color:var(--muted); max-width:46rem; }
.start .local-note { margin:0 0 .75rem; }
.start-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:0 0 1.1rem; }
.start-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:.75rem; }
.start-card { border:1px solid var(--line); border-radius:10px; background:var(--box-bg); padding:.75rem .9rem; }
.start-card h3 { margin:0 0 .4rem; font-size:1rem; color:var(--link); }
.start-card p { margin:.3rem 0 0; font-size:.92rem; }
.start-steps, .start-list { margin:0; padding-left:1.2rem; font-size:.92rem; }
.start-steps li, .start-list li { margin:.25rem 0; }
@media (max-width:40rem) {
  .stage.start h2 { font-size:1.25rem; }
  .start-lead { font-size:.95rem; }
  .start-actions > #start { width:100%; }
  .start-grid { gap:.6rem; }
}

/* Working: the pressed button keeps its size and shows a spinner in place of its label. A quick
   answer never shows it (it appears after a quarter second); the other buttons wait without the
   "not allowed" cursor. */
button { --spin:white; }
button.secondary,button.link { --spin:var(--link); }
html.is-busy button:disabled { cursor:progress; }
button[aria-busy="true"] { position:relative; opacity:1; cursor:progress; color:transparent; transition:color 0s .25s; }
button[aria-busy="true"]:disabled:hover { background:var(--blue); }
button.secondary[aria-busy="true"]:disabled:hover { background:var(--btn2-bg); }
button[aria-busy="true"]::after { content:""; position:absolute; inset:0; margin:auto; width:1.15rem; height:1.15rem; box-sizing:border-box; border-radius:50%; border:2.5px solid var(--spin); border-right-color:transparent; opacity:0; animation:busy-spin .8s linear infinite, busy-show 0s .25s forwards; }
@keyframes busy-spin { to { transform:rotate(360deg); } }
@keyframes busy-show { to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"]::after { animation-duration:2.4s, 0s; } }

/* Large signature box on phones: the full width and a taller pad when upright; when the phone is
   turned sideways, a pad that fills the height left over and buttons that stay on screen. */
@media (max-width:40rem) and (orientation:portrait) {
  .sign-dialog { width:100vw; padding:.6rem .6rem .75rem; border-radius:0; }
  .pad-big { aspect-ratio:2.5 / 1; }
}
@media (max-height:500px) {
  .sign-dialog { max-height:100svh; overflow:hidden; padding:.5rem .75rem; }
  .sign-dialog-head .help { display:none; }
  .pad-big { height:calc(100svh - 7rem); width:auto; max-width:100%; aspect-ratio:3 / 1; margin:0 auto; }
  .sign-dialog-actions { margin-top:.5rem; }
}
/* The status line and messages above the card keep the page gutter on phones. */
@media (max-width:40rem) { .banner, .saved-state { margin-left:.75rem; margin-right:.75rem; } }

/* A stopped forms check ("can't reach the server", "taking longer"): the whole message shows, on
   its own line on a phone. */
.viewer-skeleton.stopped #packet-progress > .help { white-space:normal; overflow:visible; text-overflow:clip; max-width:none; }
#packet-progress > #packet-check { white-space:nowrap; flex:0 0 auto; }
@media (max-width:40rem) {
  .viewer-skeleton.stopped .viewer-top { flex-wrap:wrap; }
  .viewer-skeleton.stopped #packet-progress { flex:1 1 100%; }
}