:root{
  --bg:#f7f8fa; --card:#ffffff; --fg:#0f172a; --muted:#64748b; --border:#e2e8f0;
  --primary:#0f2a4d; --primary-fg:#ffffff; --accent:#eef3fb; --destructive:#dc2626; --ring:#0f2a4d;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit}
input,textarea{font:inherit;color:var(--fg)}
.hidden{display:none!important}

/* layout */
.topbar{background:var(--primary);border-bottom:1px solid var(--border)}
.topbar .in{max-width:64rem;margin:0 auto;display:flex;align-items:center;gap:12px;padding:16px 24px}
.topbar h1{margin:0;font-size:18px;font-weight:700;color:var(--primary-fg)}
.topbar p{margin:0;font-size:12px;color:rgba(255,255,255,.8)}
.topbar svg{width:24px;height:24px;color:#fff}
main{max-width:48rem;margin:0 auto;padding:48px 24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card + .card{margin-top:24px}
.card .pad{padding:32px}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.gate .card{width:100%;max-width:24rem}
.gate h2{display:flex;align-items:center;gap:8px;margin:0;padding:24px 24px 0;font-size:16px;font-weight:600}
.gate form{padding:24px}
.label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.label.big{font-size:16px;font-weight:600;margin-bottom:0}
.sub{margin:4px 0 16px;color:var(--muted);font-size:14px}
.input{width:100%;height:36px;border:1px solid var(--border);border-radius:6px;background:transparent;padding:4px 12px;outline:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.input.tall{height:48px;background:var(--accent);font-size:16px}
.row{display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.row{flex-direction:row}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;border:1px solid transparent;background:var(--primary);color:var(--primary-fg);font-weight:500;cursor:pointer;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.tall{height:48px;padding:0 24px}
.btn.h11{height:44px;padding:0 24px}
.btn.wide{width:100%}
.btn.outline{background:var(--card);color:var(--fg);border-color:var(--border)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn svg{width:16px;height:16px}
.err{color:var(--destructive);font-size:14px;margin:0 0 12px}
.eyebrow{margin:0 0 16px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.eyebrow.tight{margin-bottom:8px}
dl{display:grid;grid-template-columns:1fr;gap:16px 32px;margin:0}
@media(min-width:640px){dl{grid-template-columns:1fr 1fr}}
dt{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
dd{margin:4px 0 0;font-size:16px;font-weight:600}
.pick{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:12px 16px;cursor:pointer;transition:.15s}
.pick:hover{border-color:var(--primary);background:var(--accent)}
.pick + .pick{margin-top:12px}
.pick .t{font-size:14px;font-weight:600}
.pick .s{font-size:12px;color:var(--muted)}
.pick input{width:16px;height:16px;accent-color:var(--primary);margin:0;flex:none}
.h2{margin:0 0 16px;font-size:16px;font-weight:700}
.right{display:flex;justify-content:flex-end;margin-top:24px}

/* forms view */
.sticky{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.sticky .in{max-width:64rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px}
.sticky .left{display:flex;align-items:center;gap:12px}
.sticky .meta{font-size:14px;color:var(--muted)}
.sticky .meta b{color:var(--fg)}
.sticky .meta .dep{color:var(--primary);font-weight:600}
.sticky .btns{display:flex;gap:8px}
.wrap{max-width:64rem;margin:0 auto;padding:24px 16px 0}
.tabs{display:flex;flex-wrap:wrap;gap:4px}
.tab{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:6px;padding:6px 12px;font-size:14px;font-weight:500;cursor:pointer}
.tab.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.ready{margin-top:16px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:16px}
.ready b{font-size:14px}
.ready .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ready a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:500}
.sheet{max-width:52rem;margin:0 auto;background:#fff;color:var(--fg);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.sheet header{border-bottom:4px solid var(--primary)}
.sheet .band{background:var(--primary);color:var(--primary-fg);padding:12px 32px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.sheet h1{margin:0;padding:20px 32px;font-size:24px;font-weight:700;color:var(--primary)}
.sheet .body{padding:24px 32px}
.sheet h2{margin:24px 0 12px;padding-bottom:4px;border-bottom:1px solid rgba(15,42,77,.3);font-size:18px;font-weight:700;color:var(--primary)}
.sheet .note{margin:0 0 12px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
.f label{display:block;margin-bottom:4px;font-size:14px;font-weight:500}
.f input,.f textarea{width:100%;border:1px solid var(--border);border-radius:2px;background:var(--accent);padding:8px 12px;font-size:14px;outline:none}
.f input:focus,.f textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.f .pv{display:none;min-height:2.25rem;border:1px solid rgba(15,23,42,.4);border-radius:2px;background:#fff;padding:8px 12px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}
.chk input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--primary)}
.chk .box{display:none;width:16px;height:16px;margin-top:2px;border:1px solid rgba(15,23,42,.7);font-size:12px;line-height:14px;text-align:center;font-weight:700}
.chks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:768px){.chks.three{grid-template-columns:1fr 1fr 1fr}}
.col{display:flex;flex-direction:column;gap:8px}
.sheet footer{margin-top:40px;border-top:1px solid var(--border);padding:16px 32px;font-size:10px;line-height:1.6;color:var(--muted)}
.sheet footer p{margin:0}.sheet footer p+p{margin-top:4px}
.page + .page{margin-top:24px}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toasts{position:fixed;top:16px;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast{background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:8px;padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,.1);font-size:14px;min-width:240px}
.toast.err{border-left-color:var(--destructive)}
.toast.ok{border-left-color:#16a34a}

@media print{
  body{background:#fff}
  .no-print{display:none!important}
  .wrap{padding:0;max-width:none}
  .sheet{box-shadow:none;max-width:none}
  .page{display:block!important;page-break-after:always}
  .f input,.f textarea,.chk input{display:none!important}
  .f .pv,.chk .box{display:block!important}
  .chk .box{display:inline-flex!important;align-items:center;justify-content:center}
}

/* ---------------- Halloween theme: dark mode (auto-on Oct 20-31, see app.js) ---------------- */
body.halloween{
  --bg:#0d0618; --card:#1a0f2e; --fg:#f3e9ff; --muted:#b8a6d9; --border:#3b2a5c;
  --primary:#f28c28; --primary-fg:#1a0a2e; --accent:#241640; --ring:#f28c28; --destructive:#ff6b6b;
  background:radial-gradient(ellipse at top,#1d0f38 0%,#0d0618 50%,#0d0618 100%);min-height:100vh;
}
html.halloween{background:#0d0618}
body.halloween .topbar{background:linear-gradient(90deg,#0b0416 0%,#2a1250 55%,#f28c28 100%);border-bottom:3px solid #f28c28}
body.halloween .topbar h1{color:#fff}
body.halloween .topbar h1::before{content:"\1F383  "}
body.halloween .topbar p{color:#ffd9b3}
body.halloween .card{background:var(--card);border-color:var(--border);box-shadow:0 0 0 1px rgba(242,140,40,.15),0 10px 30px rgba(0,0,0,.5)}
body.halloween .input{background:var(--accent);border-color:var(--border);color:var(--fg)}
body.halloween .input::placeholder{color:#8f7fb3}
body.halloween .input.tall{background:var(--accent)}
body.halloween .btn:not(.outline):not(.ghost){background:#f28c28;color:#1a0a2e;border-color:#d97a1a;box-shadow:0 0 18px rgba(242,140,40,.35)}
body.halloween .btn:not(.outline):not(.ghost):hover{background:#ff9f3c}
body.halloween .btn.outline{background:var(--accent);color:var(--fg);border-color:var(--border)}
body.halloween .btn.ghost{color:var(--fg)}
body.halloween .tab{background:var(--accent);color:var(--fg);border-color:var(--border)}
body.halloween .tab.active{background:#f28c28;color:#1a0a2e;border-color:#f28c28}
body.halloween .pick{background:var(--accent);border-color:var(--border)}
body.halloween .pick:hover{border-color:#f28c28;background:#2d1b4d}
body.halloween .pick input,body.halloween .chk input{accent-color:#f28c28}
body.halloween .eyebrow{color:#ffb060}
body.halloween dt{color:#b8a6d9}
body.halloween .sticky{background:var(--card);border-color:var(--border)}
body.halloween .sticky .meta b{color:#fff}
body.halloween .sticky .meta .dep{color:#ffb060}
body.halloween .ready{background:var(--card);border-color:var(--border)}
body.halloween .ready a{background:var(--accent);color:var(--fg);border-color:var(--border)}
body.halloween .gate h2{color:#fff}
body.halloween .gate h2::before{content:"\1F47B";margin-right:6px}
body.halloween .label,body.halloween .h2{color:var(--fg)}
body.halloween .toast{background:var(--card);color:var(--fg);border-color:var(--border);border-left-color:#f28c28}
/* the form sheets stay white/navy so the on-screen form matches the printed one */
body.halloween .sheet{--primary:#0f2a4d;--fg:#0f172a;--muted:#64748b;--border:#e2e8f0;--accent:#eef3fb;color:#0f172a}
/* floating pumpkins, witches, ghosts and candles behind the page */
.spooky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.spooky span{position:absolute;opacity:.85;animation:float ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(242,140,40,.45))}
.spooky span.candle{animation-name:flicker}
@keyframes float{0%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(28px,-36px) rotate(5deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes flicker{0%,100%{opacity:.85;filter:drop-shadow(0 0 8px rgba(255,190,80,.6))}50%{opacity:1;filter:drop-shadow(0 0 18px rgba(255,190,80,.95))}}
#app{position:relative;z-index:1}
@media print{.spooky{display:none!important}body.halloween{background:#fff;--bg:#fff}}