:root{--navy:#233646;--or:#FC4600;--or-btn:#E04000;--bg:#f4f6f8;--surface:#fff;--line:#c7d1da;--ink:#1b2833;--ink-2:#4a5a68;--crit:#c62f2f;--good:#0a7a2a}
@media (prefers-color-scheme: dark){:root{--bg:#0f171e;--surface:#17222c;--line:#36485a;--ink:#eef3f7;--ink-2:#b9c6d1;--crit:#ef6b6b;--good:#3cc23c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 'Titillium Web',system-ui,sans-serif}
.top{background:var(--navy);border-top:3px solid var(--or);display:flex;align-items:center;gap:14px;padding:12px 20px;color:#fff}
.top img{height:24px;width:auto}
.top b{font:700 19px/1 'Ubuntu',system-ui,sans-serif}.top b span{color:var(--or)}
.shield{position:fixed;right:-60px;bottom:-40px;width:320px;opacity:.06;pointer-events:none}
main{max-width:520px;margin:40px auto;padding:0 16px;position:relative}
h1{font:700 28px/1.2 'Ubuntu',system-ui,sans-serif;margin:0 0 6px}
.sub{color:var(--ink-2);margin:0 0 18px}
form,.box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
label{font-weight:700;font-size:14px}
input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:999px;padding:11px 18px;background:var(--or-btn);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.err{background:#fbe7e7;color:#8a1f1f;border-radius:8px;padding:10px 12px}
.ok{background:#e6f4e6;color:#0a5a1a;border-radius:8px;padding:10px 12px}
.mu{color:var(--ink-2);font-size:14px}
a{color:#2a6aa8}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:0;margin:14px 0 4px}
.steps li{font-size:12px;font-weight:600;color:var(--ink-2);border-top:4px solid var(--line);padding-top:5px}
.steps li.done{border-top-color:#13a06c}.steps li.cur{border-top-color:var(--or);color:var(--ink)}
.pill{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px}
.msg{border-left:3px solid var(--or);padding:8px 12px;background:var(--bg);border-radius:6px;margin-top:8px;white-space:pre-wrap}
/* i messaggi scritti dal cliente (stato/index.php) */
.msg.cl{border-left-color:var(--navy,#233646)}
#messaggi .ok,#messaggi .err{margin:0 0 10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.verde{background:#1f9d3a}.arancio{background:#f08a00}.rosso{background:#d42c2c}
textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);width:100%;min-height:110px;resize:vertical}
input[type=file]{padding:8px;background:var(--bg)}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}.chk input{width:auto;margin-top:4px}
.campo{display:flex;flex-direction:column;gap:6px}.campo small{color:var(--ink-2);font-weight:400}
.fatto{color:var(--good);font-weight:700}
h2.t{font:700 19px/1.25 'Ubuntu',system-ui,sans-serif;margin:4px 0 0}
.steps.s6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* un pulsante dentro un riquadro: il riquadro e' una colonna flessibile, senza questa riga
   il pulsante si allargherebbe e andrebbe a finire sopra il testo che lo precede */
.box .btn{display:inline-block;align-self:flex-start;margin:2px 0}
/* LE TRE PORTE DELL'ACCESSO (accesso.php, scelta iniziale).
   Due sono <details>: il tasto e' il <summary> e il modulo si apre sotto. Il terzo e' un <a>,
   perche' gli attivisti entrano con un link via email e non hanno password da scrivere.
   La freccina che il browser mette da solo al <summary> si toglie in due modi diversi perche'
   i browser non sono d'accordo: display:none sul marker e list-style:none sul riquadro. */
.porte{display:grid;gap:12px;margin:0 0 18px}
.porta{display:block;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--or);border-radius:12px;text-decoration:none;color:var(--ink)}
.porta-link{padding:16px 18px}
.porta>summary{display:block;list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;border-radius:12px}
.porta>summary::-webkit-details-marker{display:none}
.porta>summary::marker{content:''}
.porta:hover,.porta:focus-within,.porta-link:hover,.porta-link:focus-visible{border-color:var(--or)}
.porta>summary:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.porta b{display:block;font:700 18px/1.25 'Ubuntu',system-ui,sans-serif;color:var(--navy)}
@media (prefers-color-scheme: dark){.porta b{color:var(--ink)}}
.porta span{display:block;color:var(--ink-2);font-size:15px;margin-top:3px}
.porta em{display:block;color:var(--ink-2);font-size:13px;font-style:normal;margin-top:7px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
/* il segno "si apre": un chevron disegnato con due bordi, che ruota quando il riquadro e' aperto */
.porta>summary::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(45deg);transition:transform .15s}
.porta[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.porta[open]>summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.porta-corpo{padding:4px 18px 16px}
.porta-corpo label{margin-top:10px}
.porta-corpo p{margin:10px 0 0}
/* elenco di spiegazioni sotto un avviso (per esempio su "Password dimenticata") */
ul.mu{margin:8px 0 0;padding-left:20px;line-height:1.5}
ul.mu li{margin-bottom:4px}