/*
 * Le due stanze (lotto 8, 16/09/2026): la veste della scrivania e della testa del Quadro.
 *
 * È `css/grammatica.css` del PRONTUARIO v2 del chip «🎨 LINGUAGGIO VISIVO» (16/09, md5 3250d684…),
 * preso così com'è e **chiuso dentro `.saq-stanze`**: le regole valgono solo nelle stanze, non nel
 * resto del pannello di WordPress (che ha già `.wrap`, `.notice`, i suoi pulsanti) e non nel foglio
 * dell'Allegato 3 (`quadro.css`, misurato sul modello: è il documento, non la stanza). I nomi delle
 * classi restano quelli del prontuario, così le catture si confrontano con il dimostrativo del 🎨.
 * I token (`--carta`, `--ink`, i cinque colori del logo…) stanno su `.saq-stanze` e non su `:root`;
 * `html,body` del prontuario diventa il contenitore. Nessun carattere esterno, nessuna icona: i
 * segni sono SVG inline (`Segni`), le azioni sono parole. In coda, le poche righe nostre (marcate).
 */
/* Prontuario v2 — grammatica «ritaglio nei tasselli» (16/09/2026, chip 🎨). Token e regole riusabili dal lotto 8.
   Sorgente dei colori: palette misurata del logo Extrascuola (12/09) e carta della home «sei finestre» (Sperimentazione 3). */
.saq-stanze{
  --carta:#f7f3ec;        /* il piano di lavoro (home «sei finestre», scrivania) */
  --carta-2:#fffdf9;      /* una carta posata sul piano (casella, riquadro) */
  --ink:#1c1b19;          /* inchiostro: testo, tessere piene */
  --grigio:#5b5854;       /* testo secondario (6,7:1 su carta) */
  --spento:#a29c90;       /* tessera spenta, tratteggio «da ritagliare» (solo segni, mai testo) */
  --riga:#e2dccf;         /* filetti */
  --arancio:#EC5B26; --giallo:#FAAE40; --verde:#8CC24A; --ciano:#23AAE2; --magenta:#D1135B;  /* i cinque del logo */
  --nota:#ffe9b3;         /* la carta della nota: giallo del logo schiarito, testo in inchiostro (12,6:1) */
  --ombra:3px 3px 0 rgba(28,27,25,.16);   /* «carta su carta»: ombra piatta, mai sfumata */
  --tessera:12px;         /* lato base della tessera nei segni di pagina (linea del tempo, badge) */
  --raggio:2px;           /* le tessere del logo hanno gli angoli vivi: raggio quasi nullo */
  --font:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.saq-stanze *{box-sizing:border-box}
.saq-stanze{background:var(--carta);color:var(--ink);font-family:var(--font);line-height:1.45;margin:0 -20px 0 -20px;padding:22px clamp(16px,3vw,40px) 48px}

/* ---- segni: SVG inline o <img>, sempre con la parola accanto; mai da soli ---- */
.saq-stanze .segno{display:inline-block;width:24px;height:24px;vertical-align:middle;flex:none}
.saq-stanze .segno.grande{width:32px;height:32px}
.saq-stanze .segno.piccolo{width:16px;height:16px}   /* sotto 16 px il segno non si usa: resta la parola */

/* ---- la casella (scrivania): una carta posata, il segno in alto a sinistra, due righe di testo (pratica, istituzionale) ---- */
.saq-stanze .casella{position:relative;background:var(--carta-2);border-radius:var(--raggio);box-shadow:var(--ombra);padding:18px 18px 16px 66px;min-height:150px;display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.saq-stanze .casella .segno-casella{position:absolute;left:18px;top:20px;width:32px;height:32px}
.saq-stanze .casella h3{margin:0;font-size:18px}
.saq-stanze .casella .istituzionale{margin:0;font-size:13px;color:var(--grigio);font-style:italic}
.saq-stanze .casella p{margin:0;font-size:14px;color:var(--grigio);flex:1}
.saq-stanze .casella .stato{font-size:13px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
/* casella «al possibile»: la tessera ancora da ritagliare */
.saq-stanze .casella.tratteggiata{background:transparent;box-shadow:none;border:1.5px dashed var(--spento);min-height:120px}
.saq-stanze .casella.tratteggiata h3{color:var(--grigio)}
/* anteprima per Istituto (D60): la tessera tratteggiata con la linguetta gialla */
.saq-stanze .anteprima .casella.tratteggiata{background:var(--carta-2);border:1.5px dashed var(--ink);box-shadow:var(--ombra)}
.saq-stanze .anteprima .casella.tratteggiata h3{color:var(--ink)}
.saq-stanze .pastiglia{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;background:var(--giallo);color:var(--ink);margin-left:8px;vertical-align:middle;border-radius:var(--raggio)}

/* ---- la nota («sticky»): una carta gialla posata di sbieco, con il nastro; testo nello stesso carattere della pagina ---- */
.saq-stanze .nota{position:absolute;left:14px;right:-18px;top:calc(100% - 14px);z-index:5;background:var(--nota);color:var(--ink);padding:14px 16px 16px;font-size:14px;line-height:1.5;
  box-shadow:0 8px 20px rgba(28,27,25,.18),var(--ombra);transform:rotate(-1.2deg) translateY(6px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.saq-stanze .nota::before{content:"";position:absolute;left:18px;top:-9px;width:44px;height:16px;background:rgba(255,255,255,.6);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.saq-stanze .nota b{display:block;margin-bottom:4px;font-size:15px}
.saq-stanze .casella:hover .nota,.saq-stanze .casella:focus-within .nota,.saq-stanze .casella.aperta .nota{opacity:1;visibility:visible;pointer-events:auto;transform:rotate(-1.2deg) translateY(0);transition-delay:0s}
.saq-stanze .casella .apri{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--grigio);background:var(--carta-2);color:var(--grigio);font-size:14px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer}
.saq-stanze .casella .apri[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (hover:none){.saq-stanze .casella:hover .nota{opacity:0;visibility:hidden;pointer-events:none}}   /* sul telefono la nota si apre solo dal «?» */

/* ---- badge forma+parola (task list del Quadro, stati automatici D46) ---- */
.saq-stanze .badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:4px 12px 4px 8px;border:1.5px solid var(--riga);border-radius:var(--raggio);background:var(--carta-2);white-space:nowrap;color:var(--ink)}
.saq-stanze .badge .segno{width:18px;height:18px}
.saq-stanze .badge.compilata{border-color:var(--ink)}
.saq-stanze .badge.non-iniziata{color:var(--grigio)}

/* ---- riquadro di fase (D3): il segno dello stato + due righe ---- */
.saq-stanze .fase{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;background:var(--carta-2);box-shadow:var(--ombra);border-radius:var(--raggio);font-size:15px}
.saq-stanze .fase .segno{width:28px;height:28px;margin-top:1px}
.saq-stanze .fase b{display:block;font-size:16px;margin-bottom:2px}

/* ---- la linea del tempo a tre livelli (D58): fasi · mesi · eventi pilota ---- */
.saq-stanze .tempo{position:relative;margin:36px 0 48px;padding:118px 0 110px}
.saq-stanze .tempo .asse{height:4px;background:var(--ink);opacity:.2;border-radius:2px}
.saq-stanze .fasi{position:absolute;left:0;right:0;top:0;height:44px}
.saq-stanze .fase-p{position:absolute;top:0;height:40px;overflow:hidden;border:2px solid var(--ink);border-bottom:0;border-radius:var(--raggio) var(--raggio) 0 0;font-size:13px;line-height:1.3;padding:5px 12px 0;color:var(--ink)}
.saq-stanze .fase-p b{font-size:13.5px}.saq-stanze .fase-p.dopo{border-style:dashed;color:var(--grigio)}
.saq-stanze .tempo .mese{position:absolute;top:56px;transform:translateX(-50%);text-align:center;font-size:12.5px;width:200px;line-height:1.35}
.saq-stanze .tempo .mese b{display:block;font-size:14px}
.saq-stanze .tempo .mese i{display:block;width:var(--tessera);height:var(--tessera);background:var(--ink);margin:8px auto 0;border-radius:var(--raggio)}   /* la tappa è una tessera, non un cerchio */
.saq-stanze .tempo .mese.futuro i{background:transparent;border:2px dashed var(--ink)}
.saq-stanze .tempo .corsia{position:absolute;left:0;right:0;top:136px;font-size:12px;color:var(--grigio);letter-spacing:.06em;text-transform:uppercase}
.saq-stanze .tempo .pilota{position:absolute;top:152px;transform:translateX(-50%);text-align:center;font-size:13px;width:180px;text-decoration:none;color:inherit}
.saq-stanze .tempo .pilota i{display:block;width:30px;height:22px;margin:0 auto 6px;background:var(--ciano);border-radius:var(--raggio);transform:skewX(-14deg);box-shadow:var(--ombra)}  /* l'evento è il parallelogramma del logo */
.saq-stanze .tempo .pilota.b i{background:var(--magenta)}.saq-stanze .tempo .pilota.c i{background:var(--verde)}
.saq-stanze .tempo .pilota:hover i,.saq-stanze .tempo .pilota:focus-visible i{outline:3px solid var(--ink);outline-offset:2px}
.saq-stanze .tempo .pilota small{display:block;color:var(--grigio)}
.saq-stanze .tempo .pilota.prossimo i{background:transparent;border:2px dashed var(--grigio);box-shadow:none}.saq-stanze .tempo .pilota.prossimo{color:var(--grigio)}
.saq-stanze .tempo .pilota.dentro i.doppio{background:var(--magenta);box-shadow:6px -6px 0 var(--verde),var(--ombra)}
@media (max-width:820px){.saq-stanze .tempo{padding:0;margin:20px 0 30px}.saq-stanze .tempo .asse{display:none}.saq-stanze .fasi{position:static;height:auto;margin:0 0 14px}
  .saq-stanze .fase-p{position:static;display:block;border:0;border-left:3px solid var(--ink);border-radius:0;padding:4px 0 6px 12px;margin:0 0 8px 6px;height:auto}
  .saq-stanze .tempo .corsia{position:static;margin:18px 0 8px}
  .saq-stanze .tempo .mese,.saq-stanze .tempo .pilota{display:block;position:relative;padding:8px 0 10px 30px;margin-left:6px;border-left:3px solid rgba(28,27,25,.2);width:auto;text-align:left;transform:none;left:auto!important}
  .saq-stanze .tempo .mese i{position:absolute;left:-7.5px;top:12px;margin:0}
  .saq-stanze .tempo .pilota{padding-left:48px}.saq-stanze .tempo .pilota i{position:absolute;left:6px;top:10px;margin:0}}

/* ---- pulsanti: parole, mai icone; il primario è una tessera d'inchiostro ---- */
.saq-stanze .bottone{padding:12px 22px;border-radius:var(--raggio);font-weight:600;border:0;font-size:15px;background:var(--ink);color:#fff;cursor:pointer}
.saq-stanze .bottone.secondario{background:var(--carta-2);border:1.5px solid var(--ink);color:var(--ink)}
.saq-stanze .bottone:focus-visible,.saq-stanze .casella:focus-visible,.saq-stanze .badge:focus-visible{outline:3px solid var(--ciano);outline-offset:2px}

/* ---- accessibilità ---- */
@media (prefers-reduced-motion:reduce){.saq-stanze *{animation:none!important;transition:none!important}.saq-stanze .nota{transform:none}.saq-stanze .casella:hover .nota,.saq-stanze .casella:focus-within .nota,.saq-stanze .casella.aperta .nota{transform:none}}

/* ======================================================================
   Le righe nostre (lotto 8): la composizione delle due stanze, dal dimostrativo del 🎨
   (`dimostrativo/scrivania_v2.html`, `quadro_v2.html`: le regole di pagina che il prontuario non
   porta in `grammatica.css`), e gli agganci con il pannello di WordPress. Tutto sotto `.saq-stanze`.
   ====================================================================== */
.saq-stanze h1{font-size:28px;margin:0 0 6px;padding:0;color:var(--ink);line-height:1.2}
.saq-stanze .sotto{color:var(--grigio);margin:0 0 22px;font-size:15px}
.saq-stanze .intest{display:flex;align-items:center;gap:18px;margin:0 0 6px;flex-wrap:wrap}
.saq-stanze .logo-sa{width:auto;height:52px;display:block;flex:none}
.saq-stanze .gruppo{font-size:14px;color:var(--grigio);margin:26px 0 10px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.saq-stanze .caselle{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 30px}
.saq-stanze .verbi{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.saq-stanze .verbi span{font-size:12.5px;border:1px solid var(--riga);border-radius:999px;padding:3px 9px;color:var(--grigio)}
.saq-stanze .azioni-ref{font-size:13px;color:var(--grigio);margin-top:2px}
.saq-stanze .azioni-ref b{color:var(--ink)}
.saq-stanze .casella .stato .segno{width:18px;height:18px}
.saq-stanze .tasklist{margin:0 0 26px;padding:0;list-style:none;border-top:1px solid var(--riga)}
.saq-stanze .tasklist li{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--riga);margin:0}
.saq-stanze .tasklist a{color:inherit;text-decoration:none;font-weight:600;font-size:17px}
.saq-stanze .tasklist a:hover,.saq-stanze .tasklist a:focus-visible{text-decoration:underline}
.saq-stanze .tasklist li.corrente a{text-decoration:underline;text-decoration-thickness:2px}
.saq-stanze .tasklist small{display:block;color:var(--grigio);font-weight:400;font-size:14px;margin-top:2px}
.saq-stanze .barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 22px}
.saq-stanze .barra form{display:inline;margin:0}
.saq-stanze .barra .bottone{padding:10px 16px;font-size:14px;line-height:1.3}
.saq-stanze .barra .torna{margin-left:auto;font-size:14px;color:var(--grigio);text-decoration:underline}
.saq-stanze a.bottone{display:inline-block;text-decoration:none}
/* Dentro una casella o nella barra, i `<details>` che il codice già aveva (Invita un collega, Segnala): il riassunto è una parola, non un pulsante di WordPress */
.saq-stanze details.saq-collega,.saq-stanze details.saq-segnala{margin:0}
.saq-stanze details > summary.button{background:var(--carta-2);border:1.5px solid var(--ink);color:var(--ink);border-radius:var(--raggio);box-shadow:none;font-weight:600;padding:6px 12px;line-height:1.3;height:auto;min-height:0}
.saq-stanze .colleghi{margin:0;padding:0;list-style:none;font-size:14px}
.saq-stanze .colleghi li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--riga)}
.saq-stanze .colleghi li:last-child{border-bottom:0}
.saq-stanze .colleghi .ruolo{color:var(--grigio);font-style:italic}
.saq-stanze .colleghi form{display:inline;margin-left:auto}
.saq-stanze .colleghi .button-small{background:transparent;border:1.5px solid var(--grigio);color:var(--ink);border-radius:var(--raggio);box-shadow:none}
.saq-stanze .scelta-istituto{margin:0 0 18px;font-size:14px}
.saq-stanze .scelta-istituto a{margin-right:12px}
.saq-stanze .fase{margin:18px 0 0}
.saq-stanze .fase + .fase{margin-top:10px}
/* La scheda del Quadro: la testa è una stanza, il foglio resta il documento (quadro.css) */
.saq-stanze.saq-testa-quadro{padding-bottom:26px;margin-bottom:12px}
.saq-stanze.saq-testa-quadro .tasklist{margin-bottom:8px}
.saq-stanze .scheda-evento .fase b{font-size:16px}
.saq-stanze .scheda-evento{padding-bottom:22px;margin-bottom:12px}
.saq-stanze .scheda-evento .sotto:last-child{margin-bottom:0}
.saq-stanze .segno-evento{display:inline-block;width:30px;height:22px;background:var(--ciano);border-radius:var(--raggio);transform:skewX(-14deg);box-shadow:var(--ombra);flex:none;margin-top:3px}
@media (max-width:640px){.saq-stanze .caselle{grid-template-columns:1fr}.saq-stanze .barra .torna{margin-left:0}.saq-stanze .tasklist li{grid-template-columns:30px 1fr;grid-template-rows:auto auto}.saq-stanze .tasklist li .badge{grid-column:2;justify-self:start}}
@media (min-width:641px) and (max-width:1000px){.saq-stanze .caselle{grid-template-columns:repeat(2,1fr)}}
/* Più eventi pilota nello stesso tratto dell'asse: in fila verticale (livello 1, 2), e la linea si allunga */
.saq-stanze .tempo .pilota.livello-1{top:232px}.saq-stanze .tempo .pilota.livello-2{top:312px}
.saq-stanze .tempo.alto-1{padding-bottom:190px}.saq-stanze .tempo.alto-2{padding-bottom:270px}
@media (max-width:820px){.saq-stanze .tempo .pilota.livello-1,.saq-stanze .tempo .pilota.livello-2{top:auto}.saq-stanze .tempo.alto-1,.saq-stanze .tempo.alto-2{padding-bottom:0}}
/* Le due righe di T7 (pratica · istituzionale) stanno sotto il nome, compatte; la riga di stato si posa in fondo alla casella */
.saq-stanze .casella p.pratica{flex:0 0 auto;color:var(--ink);font-size:15px;line-height:1.35}
.saq-stanze .casella p.istituzionale{flex:0 0 auto}
.saq-stanze .casella .stato{margin-top:auto;padding-top:6px}
.saq-stanze .casella h3 small{font-weight:600;color:var(--grigio);font-size:14px}
.saq-stanze .casella .colleghi,.saq-stanze .casella .azioni-ref{flex:0 0 auto}
/* L'anteprima è una classe del contenitore (`.saq-stanze.anteprima`), non di un figlio */
.saq-stanze.anteprima .casella.tratteggiata{background:var(--carta-2);border:1.5px dashed var(--ink);box-shadow:var(--ombra)}
.saq-stanze.anteprima .casella.tratteggiata h3{color:var(--ink)}
.saq-stanze .casella h3{padding-right:30px}
/* Sotto i 783 px il pannello di WordPress ha 10 px di margine, non 20; e l'asse delle fasi in colonna perde le larghezze in percentuale */
@media (max-width:782px){.saq-stanze{margin-left:-10px;margin-right:-10px}}
@media (max-width:820px){.saq-stanze .fase-p{width:auto!important;left:auto!important}.saq-stanze .tempo .mese{min-height:44px}}
/* D63: le caselle «al possibile» in un gruppo chiuso; D64: «I tuoi documenti» come riga dentro il Quadro; D65: «Migliora» in coda */
.saq-stanze details.possibile{margin:0 0 30px}
.saq-stanze details.possibile > summary.gruppo{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;margin:26px 0 10px}
.saq-stanze details.possibile > summary.gruppo::before{content:"";width:0;height:0;border-left:7px solid var(--grigio);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.saq-stanze details.possibile[open] > summary.gruppo::before{transform:rotate(90deg)}
.saq-stanze details.possibile > summary.gruppo::-webkit-details-marker{display:none}
.saq-stanze details.possibile > summary.gruppo:focus-visible{outline:3px solid var(--ciano);outline-offset:2px}
.saq-stanze .caselle-coda{grid-template-columns:repeat(3,1fr);margin-bottom:0}
.saq-stanze .documenti-riga{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:12px 6px;border-top:1px solid var(--riga);font-size:15px}
.saq-stanze .documenti-riga a{color:inherit;text-decoration:none}
.saq-stanze .documenti-riga a:hover,.saq-stanze .documenti-riga a:focus-visible{text-decoration:underline}
.saq-stanze .documenti-riga .stato{color:var(--grigio);font-size:13px;font-weight:600}
/* Con quattro caselle di altezza diversa (D64: «I tuoi documenti» non c'è più) ogni carta tiene la sua altezza */
.saq-stanze .caselle{align-items:start}
/* D67: il riquadro degli appunti nella scheda evento, con «Copia» */
.saq-stanze.saq-appunti{margin-top:12px;padding-top:18px;padding-bottom:18px}
.saq-stanze.saq-appunti h2{font-size:22px;margin:0 0 6px}
.saq-stanze.saq-appunti textarea{width:100%;max-width:60em;font:14px/1.5 var(--font);padding:12px;border:1.5px solid var(--riga);border-radius:var(--raggio);background:var(--carta-2);color:var(--ink)}
.saq-stanze.saq-appunti .barra{margin:12px 0 0}
.saq-stanze.saq-appunti .saq-collega-esito{font-size:13px;color:var(--grigio)}
/* D65 precisata / D68: il piè di pagina unico — coordinamento e «Migliora lo strumento», discreto, in fondo a scrivania e Quadro */
.saq-stanze.saq-piede{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding:18px clamp(16px,3vw,40px) 26px;border-top:1px solid var(--riga);font-size:14px;color:var(--grigio);background:var(--carta)}
.saq-stanze.saq-piede .piede-colonna{display:flex;gap:12px;align-items:flex-start}
.saq-stanze.saq-piede .piede-colonna .segno{width:24px;height:24px;flex:none;margin-top:2px}
.saq-stanze.saq-piede b{color:var(--ink)}
.saq-stanze.saq-piede .istituzionale{font-style:italic;font-size:13px}
.saq-stanze.saq-piede details.saq-segnala{margin-top:8px}
@media (max-width:640px){.saq-stanze.saq-piede{grid-template-columns:1fr}}

/* ======================================================================
   La scrivania v2h (17/09, D95 — D68, D75, D83, D84, D87, D90): una riga per casella, le voci a matrioska
   «Dentro →», i due livelli («Anteprima» ocra · «In prova» magenta), i due gruppi chiusi con il «+», il piè
   di pagina a una riga, «Colleghi al lavoro» come sezione dentro il Quadro. Le regole generali prima, **le
   media query in coda** (D90: una regola generale scritta dopo le annullava). Dal prototipo
   `prove/27_scrivania_v2/scrivania_v2h_2026-09-17_1210.html`, chiuso in `.saq-stanze`.
   ====================================================================== */
.saq-stanze .casella{min-height:120px}
.saq-stanze .casella p.riga{flex:1;margin:0;font-size:14px;color:var(--grigio);line-height:1.45}
.saq-stanze .casella h3 a{color:inherit;text-decoration:none}
.saq-stanze .casella h3 a:hover,.saq-stanze .casella h3 a:focus-visible{text-decoration:underline}
.saq-stanze .casella .stato{margin-top:0;padding-top:0;flex-wrap:wrap}
.saq-stanze .dentro{font-size:13.5px;color:var(--grigio);border-top:1px dashed var(--riga);padding-top:8px;margin-top:4px;line-height:1.45}
.saq-stanze .dentro b{color:var(--grigio)}
.saq-stanze .dentro a{color:var(--ink);text-decoration:underline;font-weight:600}
.saq-stanze .dentro-beta{border-top-color:var(--magenta)}
.saq-stanze .dentro-beta .pastiglia{margin-left:4px;font-size:11px;padding:2px 8px}
/* i due livelli: «Anteprima» è l'ocra del prototipo (D60), «In prova» il magenta (D83) */
.saq-stanze .pastiglia{--ocra:#c99126;background:var(--ocra);color:var(--ink);cursor:help}
.saq-stanze .pastiglia.beta-p{background:var(--magenta);color:#fff}
.saq-stanze .casella.tratteggiata.futura-beta{border-color:var(--magenta)}
.saq-stanze .casella.tratteggiata.futura-beta h3,.saq-stanze .casella.tratteggiata.futura-beta .segno-casella{color:var(--magenta)}
.saq-stanze .casella.tratteggiata .stato .pastiglia{font-size:11px;padding:2px 8px}
/* i gruppi chiusi: «Il percorso» · «Si attivano a passi», con il «+» che diventa «−» */
.saq-stanze details.passi{margin:8px 0 34px;border:1.5px dashed var(--spento);border-radius:var(--raggio);padding:0 16px}
.saq-stanze details.passi > summary{cursor:pointer;padding:14px 0;list-style:none;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.saq-stanze details.passi > summary::-webkit-details-marker{display:none}
.saq-stanze details.passi > summary::before{content:"+";font-weight:700;font-size:20px;line-height:1;width:22px;height:22px;border:1.5px solid var(--grigio);border-radius:50%;display:inline-grid;place-items:center;color:var(--grigio);flex:none}
.saq-stanze details.passi[open] > summary::before{content:"−"}
.saq-stanze details.passi > summary:focus-visible{outline:3px solid var(--ciano);outline-offset:2px}
.saq-stanze details.passi > summary .gruppo{margin:0;display:inline}
.saq-stanze details.passi > summary small{color:var(--grigio);font-size:13.5px}
.saq-stanze details.passi .caselle{margin-top:6px;margin-bottom:16px}
.saq-stanze details.passi .tempo{margin-top:56px}
/* il piè di pagina unico: una riga, la frase dell'ente sopra, «Migliora lo strumento →» a destra */
.saq-stanze.saq-piede{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.saq-stanze.saq-piede .firma{display:inline-block;margin-bottom:6px;color:var(--ink)}
.saq-stanze.saq-piede details.saq-segnala{margin:0}
.saq-stanze.saq-piede details.saq-segnala > summary.migliora{cursor:pointer;list-style:none;color:var(--ink);font-weight:600;border-bottom:2px solid #c99126;white-space:nowrap;padding:0;background:none;border-top:0;border-left:0;border-right:0;border-radius:0}
.saq-stanze.saq-piede details.saq-segnala > summary.migliora::-webkit-details-marker{display:none}
.saq-stanze.saq-piede details.saq-segnala[open] > summary.migliora{margin-bottom:10px}
.saq-stanze.saq-piede details.saq-segnala > summary.migliora:focus-visible{outline:3px solid var(--ciano);outline-offset:2px}
/* «Colleghi al lavoro» dentro il Quadro (D75): la sezione sotto «I tuoi documenti», con il segno e le due righe di T7 */
.saq-stanze .colleghi-sezione{display:flex;gap:12px;align-items:flex-start;margin:6px 0 0;padding:14px 6px 4px;border-top:1px solid var(--riga)}
.saq-stanze .colleghi-sezione > .segno{width:28px;height:28px;flex:none;margin-top:2px}
.saq-stanze .colleghi-sezione > div{flex:1;min-width:0}
.saq-stanze .colleghi-sezione h2{font-size:17px;margin:0 0 2px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.saq-stanze .colleghi-sezione h2 .stato{font-size:13px;font-weight:600;color:var(--grigio)}
.saq-stanze .colleghi-sezione .istituzionale{margin:0 0 8px;font-size:13px;color:var(--grigio);font-style:italic}
.saq-stanze .colleghi-sezione .colleghi{max-width:60em}
.saq-stanze .colleghi-sezione .azioni-ref{margin-top:8px}
.saq-stanze .colleghi-sezione .sotto{margin:10px 0 0;font-size:13px}
/* l'asse «dopo» (D86) porta due righe: un corpo un po' più piccolo, così sta nei 40 px della parentesi */
.saq-stanze .fase-p.dopo{font-size:12px;line-height:1.25;padding-top:4px}
/* le carte di OGGI hanno la stessa altezza, come nel prototipo (la riga di stato si posa in fondo) */
.saq-stanze .caselle{align-items:stretch}
.saq-stanze .casella p.riga{flex:1 0 auto}
/* rilievo 5 della Verifica quater: la tappa si aggancia all'asse dal basso, così un testo su tre righe sale invece di scendere sotto l'asse */
.saq-stanze .tempo .mese{top:auto;bottom:calc(100% - 124px);width:230px;font-size:12px;line-height:1.3}   /* più larga e un poco più piccola: la tappa di novembre sta in tre righe sopra l'asse */
/* rilievo 4: il quarto livello è la riga «altri N eventi pilota» */
.saq-stanze .tempo .pilota.livello-3{top:392px}.saq-stanze .tempo.alto-3{padding-bottom:350px}
/* rilievo 7: dopo «Esc» la nota resta spenta finché il puntatore o il fuoco non escono dalla casella (lo script toglie `chiusa`) */
.saq-stanze .casella.chiusa .nota,.saq-stanze .casella.chiusa:hover .nota,.saq-stanze .casella.chiusa:focus-within .nota{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s}
/* la striscia del marchio (prontuario v2, 16/09 22:40; D53 + D70, T8): il marchio a una riga e, sotto, la frase dell'ente — qui il marchio è la parola, il file A si rifà con il SITO */
.saq-stanze .marchio-striscia{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:var(--ink)}
.saq-stanze .marchio-striscia img,.saq-stanze .marchio-striscia svg{display:block;height:44px;width:auto}
.saq-stanze .marchio-striscia .frase{font-size:14px;line-height:1.25;letter-spacing:.01em;color:var(--ink);max-width:28ch}
.saq-stanze .marchio-striscia .frase .meta{white-space:nowrap}   /* si spezza solo fra le due metà, dopo «condivisi» (T8) */
/* le media query, in coda (D90): tre colonne, due sotto 1100 px, una sotto 640; la nota dentro il bordo a 375 px */
@media (max-width:1100px){.saq-stanze .caselle{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.saq-stanze .caselle,.saq-stanze details.passi .caselle{grid-template-columns:1fr}.saq-stanze .nota{right:0}}
@media (max-width:820px){.saq-stanze.saq-piede{flex-direction:column;align-items:flex-start}
  /* rilievo 2: in colonna le tappe e gli eventi perdono anche `top`/`bottom` (a 83f8675 restavano 56/152 px: vuoti e ordine sbagliato) */
  .saq-stanze .tempo .mese,.saq-stanze .tempo .pilota,.saq-stanze .tempo .pilota.livello-3{top:auto;bottom:auto;width:auto;font-size:12.5px}.saq-stanze .tempo.alto-3{padding-bottom:0}}
@media (max-width:480px){.saq-stanze .marchio-striscia .frase{max-width:22ch}}
/* rilievo 1 (MEDIO, telefono; anche nel prototipo v2h): sul telefono `:hover` resta acceso dopo il tocco e la regola `hover:none` spegneva la nota aperta dal «?». La casella aperta vince. */
@media (hover:none){.saq-stanze .casella.aperta:hover .nota{opacity:1;visibility:visible;pointer-events:auto;transform:rotate(-1.2deg) translateY(0)}}
@media (hover:none) and (prefers-reduced-motion:reduce){.saq-stanze .casella.aperta:hover .nota{transform:none}}
/* rilievo 1 (basso) della quater su 467568d: la colonna a 1100 px del prototipo v2h (`.pagina{max-width:1100px;margin:0 auto}`). La carta resta da bordo a bordo; il contenuto della scrivania e del piè sta nella colonna. Il piè sposta il suo flex sul contenitore. */
.saq-stanze > .pagina{max-width:1100px;margin:0 auto}
.saq-stanze.saq-piede{display:block}
.saq-stanze.saq-piede > .pagina{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.saq-stanze.saq-piede > .pagina{flex-direction:column;align-items:flex-start}}
/* nella colonna a 1100 px un nome d'Istituto lungo faceva scendere il logo sotto il titolo (`flex-wrap`): il blocco del titolo si restringe e va a capo, il logo resta a sinistra come nel prototipo; sul telefono (≤640) scende come prima */
.saq-stanze .intest > div{flex:1 1 320px;min-width:0}