/* Shared styling for HAE collaboration forms (Mock2 register). */
:root{
  --paper:#f4ecd8; --paper-warm:#e8dcbf; --paper-deep:#ddd0b0;
  --ink:#14110d; --ink-soft:#2c2820; --muted:#756c54;
  --accent:#1f5e3a; --accent-soft:#2d7a4d; --accent-dim:#87a890;
  --rule:rgba(20,17,13,.18); --rule-strong:#2a221c;
  --display:'Bangers','Impact',sans-serif; --sans:'Source Sans 3','Helvetica Neue',system-ui,sans-serif;
  --typewriter:'Special Elite','Courier New',monospace; --hand:'Caveat','Marker Felt',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:1.5rem 1.25rem 5rem}
.topbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--typewriter);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding:.5rem 0 1.25rem}
.topbar a{text-decoration:none;border-bottom:1px solid transparent}
.topbar a:hover{border-bottom-color:var(--accent)}
header.hero{border:3px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 var(--ink);padding:1.6rem 1.5rem;margin-bottom:1.5rem}
header.hero .kicker{font-family:var(--typewriter);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:.5rem}
header.hero h1{font-family:var(--display);font-size:2.5rem;letter-spacing:.03em;line-height:1.05;margin-bottom:.6rem}
header.hero p{font-size:1.02rem;color:var(--ink-soft);margin-bottom:.5rem}
header.hero .hand{font-family:var(--hand);font-size:1.25rem;color:var(--accent)}
.helpline{background:var(--paper-warm);border:2px dashed var(--accent);border-radius:6px;padding:.8rem 1.1rem;font-size:.92rem;color:var(--ink-soft);margin-bottom:1.75rem}
.helpline b{color:var(--accent);font-family:var(--display);letter-spacing:.04em}
.who{margin-bottom:1.75rem}
label.fieldlabel{display:block;font-family:var(--sans);font-weight:600;margin-bottom:.4rem}
input[type=text]{width:100%;font-family:var(--sans);font-size:1rem;padding:.6rem .7rem;border:2px solid var(--ink);background:#fff;border-radius:3px}
textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:.6rem .7rem;border:2px solid var(--ink);background:#fff;border-radius:3px;min-height:74px;resize:vertical}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
section.q{border:2px solid var(--rule-strong);background:var(--paper);margin-bottom:1.4rem}
section.q > .qhead{background:var(--paper-warm);border-bottom:2px solid var(--ink);padding:.85rem 1.1rem}
section.q .qnum{font-family:var(--display);color:var(--accent);font-size:1.3rem;letter-spacing:.04em;margin-right:.4rem}
section.q .qtitle{font-family:var(--display);font-size:1.35rem;letter-spacing:.03em}
section.q .qbody{padding:1rem 1.1rem 1.15rem}
section.q .said{font-family:var(--hand);font-size:1.12rem;color:var(--accent-soft);margin-bottom:.85rem;line-height:1.3}
section.q .ask{font-weight:600;margin-bottom:.7rem;color:var(--ink-soft)}
.opts{display:grid;gap:.45rem;margin-bottom:.9rem}
.opt{display:flex;align-items:flex-start;gap:.6rem;background:#fff;border:2px solid var(--rule);border-radius:4px;padding:.5rem .65rem;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--accent-dim)}
.opt input{margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--accent);flex:none}
.opt input:checked + span{font-weight:600}
.opt span{font-size:.97rem;line-height:1.35}
.opt .hint{display:block;font-size:.82rem;color:var(--muted);font-weight:400}
.subfield{margin-top:.5rem}
.subfield label{display:block;font-size:.85rem;color:var(--muted);font-family:var(--typewriter);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}
.savebar{position:sticky;bottom:0;background:rgba(244,236,216,.96);backdrop-filter:blur(6px);border-top:2px solid var(--ink);margin:0 -1.25rem;padding:.85rem 1.25rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.savebar .status{font-family:var(--typewriter);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-right:auto}
button{font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.7rem 1.3rem;border:2px solid var(--ink);border-radius:4px;cursor:pointer;background:#fff;color:var(--ink)}
button.primary{background:var(--accent);color:var(--paper);box-shadow:4px 4px 0 var(--ink)}
button.primary:hover{background:var(--accent-soft)}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}
button:active{transform:translate(2px,2px);box-shadow:none}
.donecard{display:none;border:3px solid var(--accent);background:var(--paper-warm);box-shadow:7px 7px 0 var(--ink);padding:1.6rem 1.5rem;text-align:center;margin-bottom:1.5rem}
.donecard h2{font-family:var(--display);font-size:2rem;color:var(--accent);letter-spacing:.04em;margin-bottom:.5rem}
.donecard p{color:var(--ink-soft);margin-bottom:1rem}
.previewnote{font-size:.82rem;color:var(--muted);font-style:italic;margin-top:.4rem}
footer.sig{font-family:var(--typewriter);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);text-align:center;padding-top:1.5rem}
/* collab hub */
.hub-list{display:grid;gap:1rem;margin-top:.5rem}
.hub-card{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);padding:1.1rem 1.25rem;transition:transform .12s}
.hub-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.hub-card .t{font-family:var(--display);font-size:1.45rem;letter-spacing:.03em;color:var(--accent)}
.hub-card .d{font-size:.95rem;color:var(--ink-soft);margin-top:.2rem}
@media(max-width:560px){header.hero h1{font-size:2rem}.savebar{flex-direction:column;align-items:stretch}.savebar .status{margin:0 0 .25rem}}