/* Base di tutte le pagine: palette della sala in pixel art, font leggibili, componenti comuni.
   Il font pixel (Pixelify Sans) va solo nel titolo grande: sotto i 20px non si legge. */
@import url("/fonts/fonts.css");

:root{
  --notte:#1d2540;          /* fondo della sala */
  --notte-2:#27314f;        /* le fughe del pavimento */
  --crema:#f6ead2;          /* fogli e schede */
  --crema-2:#e9d8b6;
  --sala:#efe2c4;           /* pavimento chiaro sotto i tavoli */
  --sala-2:#e6d5b1;
  --legno:#3b2a20;
  --legno-chiaro:#5a3f2e;
  --testo:#2b1d14;
  --testo-2:#6b5444;
  --oro:#f2b84b;
  --oro-chiaro:#ffd27a;
  --verde:#3f8a4f;
  --rosso:#b9472f;
  --nero:#000;
  --px:3;                   /* scala della pixel art: sempre intera */
  --tile:calc(16px * var(--px));
  --f-pixel:"Pixelify Sans",ui-monospace,monospace;
  --f-testo:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tap:48px;
}
@media (max-width:380px){:root{--px:2}}

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--notte);color:var(--crema);font:400 17px/1.5 var(--f-testo);
  background-image:linear-gradient(90deg,var(--notte-2) 2px,transparent 2px),linear-gradient(var(--notte-2) 2px,transparent 2px);
  background-size:48px 48px}
/* Pannello ed elenco master: pagine da lavoro, su carta chiara. */
body.chiaro{background:var(--crema);background-image:none;color:var(--testo)}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

.pagina{max-width:720px;margin:0 auto;padding:24px 16px calc(120px + env(safe-area-inset-bottom))}
.pagina--larga{max-width:980px}

/* testata */
.testata{text-align:center;margin:4px 0 18px}
.kicker{font:700 14px var(--f-testo);letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
body.chiaro .kicker{color:var(--rosso)}
.titolo{margin:6px 0 0;font:700 clamp(30px,9vw,46px)/1.05 var(--f-pixel);color:var(--crema);text-shadow:3px 3px 0 var(--nero)}
body.chiaro .titolo{font:700 clamp(26px,6vw,36px)/1.15 var(--f-testo);color:var(--testo);text-shadow:none}
.intro{margin:10px auto 0;max-width:560px;white-space:pre-line;color:var(--crema-2)}
body.chiaro .intro{color:var(--testo-2)}
body.chiaro .testata{text-align:left}

/* foglio: il riquadro chiaro dove si scrive */
.foglio{background:var(--crema);color:var(--testo);border:3px solid var(--nero);box-shadow:0 0 0 3px var(--legno-chiaro),6px 6px 0 6px var(--nero);padding:18px 16px}
.foglio h2{margin:0 0 4px;font:700 22px/1.2 var(--f-testo)}
.sub,.sezione-sub{margin:0 0 10px;color:var(--testo-2)}

/* bottoni */
.btn,.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 18px;border:3px solid var(--nero);
  background:var(--crema-2);color:var(--testo);font:700 16px var(--f-testo);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--nero)}
.btn:hover,.btn:focus-visible,.pt-btn:hover,.pt-btn:focus-visible{background:var(--oro-chiaro);outline:none}
.btn--primario,.pt-btn--accento{background:var(--oro)}
.btn[disabled],.pt-btn[disabled]{background:transparent;color:inherit;opacity:.7;border-style:dashed;box-shadow:none;cursor:default}
.pt-btn--icona{width:var(--tap);padding:0;font-size:20px}
.btn[hidden],.pt-btn[hidden]{display:none}

/* campi */
.campo{display:block;margin-top:14px}
.campo>span{display:block;margin-bottom:6px;font:700 16px var(--f-testo)}
.campo>span i{font-weight:400;color:var(--testo-2)}
.input{width:100%;min-height:var(--tap);padding:0 12px;border:3px solid var(--nero);border-radius:0;background:#fff;color:var(--testo);font:400 17px var(--f-testo)}
textarea.input{padding:10px 12px;min-height:110px;line-height:1.45;resize:vertical}
.input:focus{outline:3px solid var(--oro);outline-offset:0}
.scelte{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;border:0}
.scelte legend{width:100%;margin-bottom:6px;padding:0;font:700 16px var(--f-testo)}
.pill{position:relative}
.pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:3px solid var(--nero);background:#fff;font:400 16px var(--f-testo)}
.pill input:checked+span{background:var(--testo);color:var(--crema)}
.pill input:focus-visible+span{outline:3px solid var(--oro)}
.spunta{display:flex;gap:12px;align-items:flex-start;margin-top:16px;cursor:pointer}
.spunta input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--verde)}
.nascosto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.avviso{margin-top:14px;padding:12px 14px;border:3px solid var(--rosso);background:#fff;color:var(--testo);font-weight:700}
.avviso:empty{display:none}
.avviso--ok{border-color:var(--verde)}

/* riquadro con testata a fascia (turni dell'elenco master) */
.turno{margin-top:18px;border:3px solid var(--nero);background:#fff8ea;box-shadow:4px 4px 0 var(--nero)}
.turno-testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;background:var(--legno);color:var(--crema);font:700 15px var(--f-testo)}
.turno-testa strong{font-size:17px}
.nessuna{padding:12px 14px;font-style:italic;color:var(--testo-2)}
.cartiglio-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rule-dashed{height:0;border:0;border-top:3px dashed var(--crema-2);margin:6px 0}

.pt-vuoto{max-width:520px;margin:40px auto;padding:24px 18px;text-align:center;background:var(--crema);color:var(--testo);border:3px solid var(--nero);box-shadow:6px 6px 0 var(--nero)}
.pt-vuoto h2{margin:0 0 8px;font:700 24px var(--f-testo)}
.pt-vuoto p{margin:0;color:var(--testo-2)}

.piede{margin-top:40px;text-align:center;font-size:14px;color:var(--crema-2)}
body.chiaro .piede{color:var(--testo-2)}