:root { color-scheme: light dark; --bg:#0b0f14; --card:#131a22; --ink:#e8eef5; --muted:#9fb0c0;
        --line:#243141; --accent:#39ff14; --warn:#ffcf5c; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
.wrap { max-width:680px; margin:0 auto; padding:24px 18px 64px; }
/* The back-link is a standalone control in its own <p> — not a link inside a sentence — so the WCAG
   2.5.8 inline exception does NOT cover it. At .9rem it measured 70x20; min-height makes it a real
   thumb target. This one rule serves every form page, because they all render from render.mjs. */
.home a { color:var(--muted); text-decoration:none; font-size:.9rem;
          display:inline-flex; align-items:center; min-height:24px; }
h1 { font-size:1.5rem; margin:.2em 0; }
.sub { color:var(--muted); margin:0 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0; }
label { display:block; color:var(--muted); font-size:.85rem; margin:.6em 0 .2em; }
.consent label, label.inline { display:inline; color:var(--ink); }
/* The consent checkbox is a 13x13 user-agent control, and its <label> IS the hit area — so growing the
   label to a 24px line box is what actually enlarges the target a driver taps. inline-block, NOT
   inline-flex: the consent sentence has to keep wrapping normally at 320px, which the 1.4.10 reflow
   check depends on. The checkbox itself is left at its native size deliberately. */
.consent label { display:inline-block; line-height:24px; min-height:24px; }
input, textarea { width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:#0e141b; color:var(--ink); font:inherit; }
textarea { resize:vertical; }
.consent input { width:auto; margin-right:.4em; }
.req { color:var(--accent); }
.opt { color:var(--muted); font-size:.8rem; }
.muted { color:var(--muted); }
.src { color:var(--muted); font-size:.78rem; }
.note { border-left:3px solid var(--warn); padding:8px 12px; color:var(--warn); background:rgba(255,207,92,.06);
        border-radius:0 8px 8px 0; font-size:.9rem; margin:10px 0; }
/* A safety/privacy notice the reader must not miss (e.g. the 911 redirect on path 017). */
.note.notice-critical { border-left-width:5px; border-left-color:#ff6b5c; color:#ffb4ab;
        background:rgba(255,107,92,.10); font-size:.95rem; font-weight:600; padding:12px 14px; }
/* Submit outcome must read differently for success, refusal and failure. */
.status-ok { color:var(--accent); }
.status-warn { color:var(--warn); }
.status-error { color:#ff8a7a; font-weight:600; }
.status-pending { color:var(--muted); }
button { background:var(--accent); color:#04120a; border:0; border-radius:8px; padding:10px 16px; font-weight:700; cursor:pointer; }
.dir h2 { font-size:1rem; color:var(--muted); margin:1.2em 0 .3em; border-bottom:1px solid var(--line); padding-bottom:.2em; }
.dir a { display:block; padding:8px 10px; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:8px; margin:6px 0; }
.dir a:hover { border-color:var(--accent); }
.dir .fence { color:var(--warn); font-size:.78rem; }
.dir .tag { color:var(--muted); font-size:.78rem; }