/* ============================================================
   CASA ANIGAMI — design system.
   Stessa ossatura di Gesam e Schedario (Archivio + Inter + Space Mono,
   raggio 10): è lo stesso universo, deve sembrarlo.
   La differenza: qui l'accento non è un colore di sezione ma l'inchiostro.
   Il colore compare solo dove c'è un'identità, e le famiglie sono tre e non
   si mescolano: le SEZIONI, le PERSONE, lo STATO. Se li usassi anche per
   decorare, non direbbero più niente. (docs/PLANCIA-BRIEF-DESIGN.md §3)
   ============================================================ */
:root{
  /* LA CARTA NON È PIÙ CELESTINA (Paolo, 20/09: «vorrei togliere il celestino dalla
     dashboard»). Il fondo freddo #EEF1F6, coi suoi grigi azzurrati, era la cosa
     che più dava l'aria di gestionale precompilato — il brief lo diceva già al §8.
     Ora i neutri sono caldi: carta, non schermo. ⚠️ Vale SOLO per la casa madre:
     le altre sezioni hanno ancora i neutri freddi, ed è una differenza voluta
     finché non si decide anche lì. */
  --ground:#F4F2EE; --surface:#FFFFFF; --surface-2:#FAF9F6; --inset:#EFECE6;
  --line:#E3DFD7; --line-2:#CDC8BD;
  --ink:#14130F; --ink-2:#55524B; --ink-3:#86827A;
  /* Creator ha DUE ruoli e due token, non una deriva (brief §3). --creator e'
     l'INCHIOSTRO: testo e fili su fondo chiaro, 5,33:1 sul bianco. --creator-marchio
     e' il MARCHIO: logotipo, quadratino del selettore, riempimenti pieni con
     bianco sopra — come testo starebbe a 4,50:1, esattamente sul limite AA.
     Nello scuro #FF6FB5 fa tutti e due i mestieri. */
  --creator:#D1006F; --creator-soft:#FCE7F1; --creator-marchio:#E6007E;
  --gesam:#3E63DD; --gesam-soft:#E9EEFC;
  --schedario:#56794A; --schedario-soft:#EEF7EB;
  /* Things e' bruno cuoio, non ambra: l'ambra stava a 11 gradi da --warn, che
     qui vuol dire «entro 48 ore». Tipicita' tiene il petrolio. (19/09) */
  --things:#7A4F35; --things-soft:#F3ECE6;
  --tipicita:#035F6A; --tipicita-soft:#E3F1F3;
  --ok:#0F7A4A; --ok-soft:#E2F3E9;
  --warn:#8A5807; --warn-soft:#FAEFD8;
  --crit:#B42318; --crit-soft:#FBE9E7;
  /* «per te»: un colore che non è di nessuna delle tre sezioni e non vuol dire
     né urgenza né errore. Dice una cosa sola — questa aspetta te. */
  --mio:#5B32C4; --mio-soft:#ECE6FB;
  /* I SETTE. Un colore per persona, per riconoscersi a colpo d'occhio.
     Sono una FAMIGLIA A PARTE dai colori di sezione: stessa chiarezza per tutti
     e sette (L 0.485 in oklch), tinte a 38-50 gradi di distanza l'una dall'altra.
     Tre regole, e la terza e' quella che tiene:
     1. non decorano. Compaiono solo dove c'e' una persona.
     2. il viola resta fuori: --mio vuol dire gia' "questa aspetta te", e un
        Angelo viola diventerebbe un messaggio invece di un nome.
     3. dove una tinta si avvicina a un colore di sezione (Riccardo e Schedario sono
        due verdi, Samantha e Gesam due blu) a distinguerli non e' il
        colore ma la forma: le targhette di sezione sono PAROLE MAIUSCOLE in
        Space Mono, quelle delle persone sono nomi in tondo. Un nome non si
        confonde con una sigla, nemmeno dello stesso colore.
     Contrasto verificato: ogni nome sul proprio fondino sta fra 4.7 e 5.5 su 1,
     sopra il minimo AA per il testo piccolo, in chiaro e in scuro. */
  --p-paolo:#A8224C; --p-francesca:#914900; --p-alberto:#686100;
  --p-riccardo:#017238; --p-sofia:#006D71; --p-samantha:#0062A4; --p-angelo:#912F8B;
  --bar:#3E63DD; --bar-dim:#B7C5F4;
  --shadow:0 1px 2px rgba(13,18,32,.05),0 10px 28px -18px rgba(13,18,32,.22);
  --r:10px;

  /* LA FASCIA D'INCHIOSTRO. Non segue il tema: è un mondo suo, scuro anche in
     chiaro. Nel tema scuro cambia solo il fondo, che scende ancora per restare
     la superficie più scura della pagina. Tutto quello che ci sta sopra usa i
     colori «-on», che sono fissi: gli stessi valori che le tre famiglie hanno
     nel tema scuro, perché lì sopra è sempre notte.
     --on-band-3 è un filo più chiaro del prototipo (#6C7A93): a quel valore le
     etichette in Space Mono stavano a 4,4:1 sul fondo, sotto il minimo AA. */
  --band:#0B101B; --band-2:#141B29; --band-line:#242E42;
  --on-band:#F2F5FA; --on-band-2:#A3AFC4; --on-band-3:#7A88A2;
  --creator-on:#FF6FB5; --gesam-on:#88A2FF; --schedario-on:#73AC5F;
  --things-on:#D2AC8E; --tipicita-on:#58BCC8;
  --ok-on:#55C68C; --warn-on:#E2AB53; --crit-on:#FF8D80; --mio-on:#B9A2FF;
  --p-paolo-on:#FF9DAF; --p-francesca-on:#FEA668; --p-alberto-on:#CAC256;
  --p-riccardo-on:#78D694; --p-sofia-on:#28D6DF; --p-samantha-on:#86C4FF; --p-angelo-on:#ED9EE5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0E16; --surface:#131A28; --surface-2:#0F1522; --inset:#0C111C;
    --line:#222B3C; --line-2:#33405A;
    --ink:#E9EDF5; --ink-2:#9BA6BB; --ink-3:#6C778E;
    --creator:#FF6FB5; --creator-soft:#2B1020; --creator-marchio:#FF6FB5;
    --gesam:#88A2FF; --gesam-soft:#141D36;
    --schedario:#73AC5F; --schedario-soft:#141B11;
    --things:#D2AC8E; --things-soft:#231A14;
    --tipicita:#58BCC8; --tipicita-soft:#0E2326;
    --ok:#55C68C; --ok-soft:#0D2519;
    --warn:#E2AB53; --warn-soft:#251C09;
    --crit:#F59187; --crit-soft:#2B100D;
    --mio:#B9A2FF; --mio-soft:#1B1533;
    --p-paolo:#FF9DAF; --p-francesca:#FEA668; --p-alberto:#CAC256;
    --p-riccardo:#78D694; --p-sofia:#28D6DF; --p-samantha:#86C4FF; --p-angelo:#ED9EE5;
    --bar:#88A2FF; --bar-dim:#2D3B63;
    --band:#05080E; --band-2:#0C121C; --band-line:#1C2534;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0E16; --surface:#131A28; --surface-2:#0F1522; --inset:#0C111C;
  --line:#222B3C; --line-2:#33405A;
  --ink:#E9EDF5; --ink-2:#9BA6BB; --ink-3:#6C778E;
  --creator:#FF6FB5; --creator-soft:#2B1020; --creator-marchio:#FF6FB5;
  --gesam:#88A2FF; --gesam-soft:#141D36;
  --schedario:#73AC5F; --schedario-soft:#141B11;
  --things:#D2AC8E; --things-soft:#231A14;
  --tipicita:#58BCC8; --tipicita-soft:#0E2326;
  --ok:#55C68C; --ok-soft:#0D2519;
  --warn:#E2AB53; --warn-soft:#251C09;
  --crit:#F59187; --crit-soft:#2B100D;
  --mio:#B9A2FF; --mio-soft:#1B1533;
  --p-paolo:#FF9DAF; --p-francesca:#FEA668; --p-alberto:#CAC256;
  --p-riccardo:#78D694; --p-sofia:#28D6DF; --p-samantha:#86C4FF; --p-angelo:#ED9EE5;
  --bar:#88A2FF; --bar-dim:#2D3B63;
  --band:#05080E; --band-2:#0C121C; --band-line:#1C2534;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a{color:inherit;text-decoration:none}
code{font-family:'Space Mono',monospace;font-size:.9em}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
/* finché i dati non ci sono la pagina non sfarfalla */
body.carico main{opacity:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:0 64px}

/* ---------- testata ----------
   È d'inchiostro anche lei, e resta attaccata in cima per tutta la pagina: è
   la testata del giornale, e dal passo 3 ci staranno la sala staff e il
   cassetto degli strumenti, che devono essere a un tocco da qualunque punto. */
.top{position:sticky;top:0;z-index:30;background:var(--band);color:var(--on-band);
  border-bottom:1px solid var(--band-line)}
.top-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo svg{height:22px;width:auto;color:var(--on-band);display:block}
.top-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-band-3);border-left:1px solid var(--band-line);padding-left:12px}
.top-sp{flex:1}
.ghost{font:600 12px/1 'Inter',sans-serif;color:var(--on-band-2);background:none;border:1px solid var(--band-line);
  padding:8px 12px;border-radius:99px;cursor:pointer}
.ghost:hover{color:var(--on-band);border-color:var(--on-band-3)}
.ghost[aria-pressed="true"]{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.me{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--on-band-2)}
/* il cerchio con le iniziali prende il colore della persona; chi non è fra i
   sette resta grigio — mai un colore finto */
.ava{width:29px;height:29px;border-radius:50%;background:var(--p,var(--on-band-3));color:var(--band);
  display:grid;place-items:center;font:700 12px 'Archivo',sans-serif;flex:none}

h1{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(28px,4.4vw,42px);line-height:1.04;margin:8px 0 0;text-wrap:balance}

/* ---------- corpo ---------- */
/* niente ombre sulle schede: la gerarchia la fanno il carattere, il filo da un
   pixel e il colore (brief §3, «Materia») */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;position:relative}
.chead{display:flex;align-items:center;gap:10px;padding:15px 18px 13px;border-bottom:1px solid var(--line)}
.chead h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;margin:0}
.chead .cnt{margin-left:auto;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-3)}
.vuoto{margin:0;padding:22px 18px;font-size:13.5px;color:var(--ink-3)}



/* ---------- piede ---------- */
.foot{margin-top:18px;font-size:12px;color:var(--ink-3)}
/* I due link legali in coda al piede. Discreti ma non nascosti: sono un
   adempimento, non una nota di colore — sottolineati, cliccabili, e separati
   dalla frase da un filo verticale perche' non si leggano come sua
   continuazione. */
.legale{margin-left:10px;padding-left:10px;border-left:1px solid var(--line-2);white-space:nowrap}
.legale a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.legale a:hover{color:var(--ink)}

/* ---------- login ---------- */
.loginwrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.loginbox{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:26px 24px}
.loginbox .wm{color:var(--ink);margin-bottom:20px}
.loginbox .wm svg{height:34px;width:auto;display:block;margin:0 auto}
.btn{font:600 14px/1 'Inter',sans-serif;padding:11px 14px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#fff;border:1px solid #dadce0;color:#3c4043;font-weight:600}
.frow{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.frow label{font-size:12.3px;color:var(--ink-2)}
.frow input{font:inherit;padding:10px 12px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink)}
.err{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit);border-radius:10px;
  padding:10px 12px;font-size:13px}
.small{font-size:12.3px}
.dim{color:var(--ink-3)}
.oppure{display:flex;align-items:center;gap:10px;margin:16px 0 6px;color:var(--ink-3);font-size:12px}
.oppure span.l{flex:1;height:1px;background:var(--line)}

@media (max-width:520px){
  .top-tag{display:none}
}

/* ============================================================
   LA LAVAGNA
   Stessi mattoni della coda (.qi) ma con un comportamento in più: qui si
   scrive. Il composer sta IN CIMA, non in fondo: una lavagna dove per
   aggiungere devi scorrere fino in fondo è una lavagna dove non si aggiunge.
   ============================================================ */
.colonna{display:grid;gap:20px;align-content:start;min-width:0}
.linky{background:none;border:0;color:var(--ink-3);font-size:12px;text-decoration:underline;padding:0;cursor:pointer}
.linky:hover{color:var(--ink)}

.comp{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.comp input[type=text]{width:100%;font:inherit;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.comp input[type=text]::placeholder{color:var(--ink-3)}
.compmore{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.seg{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{font:600 12px/1 'Inter',sans-serif;color:var(--ink-2);background:none;border:0;padding:6px 11px;border-radius:7px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.comp select{font:inherit;font-size:12.5px;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.comp select:disabled{opacity:.45}
.go{margin-left:auto;background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  border-radius:9px;padding:8px 14px;font:600 12.5px/1 'Inter',sans-serif;cursor:pointer}
.go[disabled]{opacity:.4;cursor:not-allowed}

.filtri{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.filtri button{font:600 12.3px/1 'Inter',sans-serif;color:var(--ink-3);background:none;
  border:1px solid transparent;padding:6px 10px;border-radius:8px;cursor:pointer}
.filtri button:hover{color:var(--ink)}
.filtri button[aria-pressed="true"]{background:var(--inset);color:var(--ink);border-color:var(--line)}
.filtri .n{font-family:'Space Mono',monospace;font-size:10px;margin-left:5px;opacity:.7}

.voce{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);position:relative}
.voce:last-child{border-bottom:0}
/* la riga nera: cosa è comparso da quando sei passato */
.voce.nuova::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink)}
.voce.avviso{background:var(--warn-soft)}

/* «PER TE» — la riga che aspetta la persona che sta guardando.
   Serviva più di una chip grigia: in una lista di quindici righe uguali, quella
   che riguarda te non deve doversi cercare. Quindi fondo tinto, banda a
   sinistra e la chip piena. La banda batte quella nera del «nuovo» perché
   nuovo lo è per un giorno, tuo lo resta finché non la prendi. */
.voce.perme{background:var(--mio-soft)}
.voce.perme::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mio)}
.voce.perme .bollo{background:color-mix(in srgb,var(--mio) 16%,transparent);color:var(--mio)}
.voce.perme .testo{color:var(--ink)}
.chip.perte{background:var(--mio);color:#fff}
/* il contrario: la palla è di un altro. Il bottone resta — chiunque la può
   prendere, è una lavagna — ma smette di essere un invito. */
.az.altrui{background:var(--surface);color:var(--ink-2)}

/* il richiamo in testata: quante aspettano te, e ci si clicca sopra */
.perte-h{font:700 11px/1 'Inter',sans-serif;letter-spacing:.02em;background:var(--mio);color:#fff;
  border:0;padding:5px 9px;border-radius:6px;cursor:pointer}
.perte-h:hover{filter:brightness(1.1)}
.filtri button[data-f="miei"] .n.acceso{background:var(--mio);color:#fff;opacity:1;
  padding:1px 5px;border-radius:4px;margin-left:6px}
.voce.fatta{opacity:.55}
.voce.fatta .testo{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.bollo{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;background:var(--inset);color:var(--ink-3);margin-top:1px}
.voce.avviso .bollo{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.voce .corpo{flex:1;min-width:0;display:block}
.voce .testo{display:block;font-weight:600;font-size:14.2px;line-height:1.35;overflow-wrap:anywhere}
.voce .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--ink-3)}
.chip{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--inset);color:var(--ink-3)}
.chip.creator{background:var(--creator-soft);color:var(--creator)}
.chip.gesam{background:var(--gesam-soft);color:var(--gesam)}
.chip.schedario{background:var(--schedario-soft);color:var(--schedario)}
.chip.nuovo{background:var(--ink);color:var(--ground)}
.chip.ferma{background:var(--crit-soft);color:var(--crit)}
.chip.preso{background:var(--ok-soft);color:var(--ok)}
.chip.proposto{background:var(--inset);color:var(--ink-2)}
.verso{color:var(--ink-3);font-size:12.5px;line-height:1}
.azioni{display:flex;gap:6px;align-items:flex-start;flex:none}
.az{font:600 12.2px/1 'Inter',sans-serif;padding:7px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.az:hover{color:var(--ink);border-color:var(--ink-3)}
.az.primaria{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.az.spunta{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
/* il «togli»: sta in fondo, compare passandoci sopra e non ha peso visivo.
   È un gesto che serve di rado — le prove, gli errori di battitura — e un
   bottone sempre acceso accanto a «Prendo io» inviterebbe a usarlo. */
.vx{flex:none;opacity:0;width:28px;height:28px;border-radius:9px;border:1px solid transparent;
  background:none;color:var(--ink-3);font-size:15px;line-height:1;cursor:pointer}
.voce:hover .vx,.vx:focus-visible{opacity:1;border-color:var(--line)}
.vx:hover{color:var(--crit);border-color:var(--crit);background:var(--crit-soft)}
/* ============================================================
   IL PIANO EDITORIALE
   Un'uscita non è un task e non deve sembrarlo: bordino a sinistra invece di
   fondo pieno (gli avvisi hanno già il fondo, due fondi diversi in una lista
   sola diventano una tovaglia), e il quando scritto come prima cosa. Il rosso
   compare solo quando la data è passata e nessuno ha spuntato: è l'unico caso
   in cui questo blocco deve alzare la voce.
   ============================================================ */
.voce.uscita{border-left:3px solid var(--line-2)}
.voce.uscita .bollo{background:var(--inset);color:var(--ink-2);font-size:11px}
.voce.uscita.tardi{border-left-color:var(--crit);background:var(--crit-soft)}
.voce.uscita.tardi .bollo{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.chip.can-press{background:var(--schedario-soft);color:var(--schedario)}
.chip.can-social{background:var(--creator-soft);color:var(--creator)}
.chip.quando{background:var(--inset);color:var(--ink-2)}
.chip.quando.adesso{background:var(--ink);color:var(--ground)}
.chip.quando.tardi{background:var(--crit);color:#fff}
/* le note: quello che va letto prima di pubblicare */
.voce .nota{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.4;
  border-left:2px solid var(--line-2);padding-left:9px;overflow-wrap:anywhere}
.note-in{width:100%;margin-top:9px;font:inherit;font-size:13px;padding:9px 11px;border-radius:10px;
  border:1px dashed var(--line-2);background:var(--surface);color:var(--ink)}
.note-in::placeholder{color:var(--ink-3)}
.comp input[type=date]{font:inherit;font-size:12.5px;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}

.fatte-h{padding:11px 18px;background:var(--surface-2);border:0;border-top:1px solid var(--line);
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);width:100%;text-align:left;cursor:pointer}
.fatte-h:hover{color:var(--ink)}

@media (max-width:560px){
  .voce{flex-wrap:wrap}
  .azioni{width:100%;padding-left:38px}
  .go{margin-left:0;width:100%}
  /* col dito non esiste il «passarci sopra»: qui il togli si vede sempre */
  .vx{opacity:1;margin-left:auto}
}

/* ============================================================
   LA PRIMA RIGA — lavagna e agenda affiancate
   Il piano di lavoro sta in cima, prima delle porte. La lavagna è più larga
   perché ci si scrivono frasi; l'agenda è una colonna di orari e non ha
   bisogno di spazio. Sotto i 1040 px si impilano, lavagna sopra.
   ============================================================ */
.master{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:20px;align-items:start;margin-top:22px}
.lavagna .testo{max-width:95ch}
.lavagna .comp input[type=text]{max-width:none}
@media (max-width:1040px){ .master{grid-template-columns:1fr} }

/* ============================================================
   L'AGENDA
   Due provenienze, due colori, e la differenza non è decorativa: il fucsia è
   il mondo pubblicato — lo stesso di Creator, che è chi lo pubblica — e
   l'interno resta grigio perché non deve gridare. Il colore è un bordino a
   sinistra, non uno sfondo: in una lista di dieci righe, dieci sfondi colorati
   diventano una tovaglia.
   ============================================================ */
.agenda .chead .linky{margin-left:12px}
.agenda .chead .cnt{margin-left:auto}

.agform{display:block}
.agform .compmore input[type=text]{flex:1;min-width:140px;font:inherit;padding:9px 11px;
  border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.agform input[type=date],.agform input[type=time],.agform select{font:inherit;font-size:12.5px;
  padding:7px 9px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2)}
.tuttog{display:inline-flex;align-items:center;gap:6px;font-size:12.3px;color:var(--ink-2)}
.agnota{margin:10px 0 0;font-size:11.8px;color:var(--ink-3);line-height:1.45}
.agnota b{color:var(--ink-2)}

.aggi{border-bottom:1px solid var(--line)}
.aggi:last-child{border-bottom:0}
.agd{display:block;padding:10px 18px 6px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.agv{display:flex;gap:12px;align-items:flex-start;padding:11px 18px;border-left:3px solid var(--line-2)}
.agv.pubblico{border-left-color:var(--creator)}
.agq{flex:none;width:92px;font-family:'Space Mono',monospace;font-size:11.5px;
  color:var(--ink-2);padding-top:2px;line-height:1.3}
.agc{flex:1;min-width:0}
.agt{display:block;font-weight:600;font-size:13.8px;line-height:1.35;overflow-wrap:anywhere}
.agm{font-size:11.8px;color:var(--ink-3);margin-top:3px}
.agv.pubblico .agm{color:var(--creator)}
.agx{flex:none;opacity:0;width:24px;height:24px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);font-size:13px;line-height:1;cursor:pointer}
.agv:hover .agx,.agx:focus-visible{opacity:1}
.agx:hover{color:var(--crit);border-color:var(--crit)}

/* La riga che apre il resto dell'agenda. Larga quanto la scheda, senza ora a
   sinistra e senza bordino di colore: così non la si scambia per un
   appuntamento. Sta in fondo perché è la risposta a una domanda che uno si fa
   dopo aver guardato oggi e domani, non prima. */
.agpiu{display:block;width:100%;text-align:left;padding:12px 18px;border:0;
  border-top:1px solid var(--line);background:none;cursor:pointer;
  font:inherit;font-size:12.3px;color:var(--ink-3)}
.agpiu:hover{color:var(--ink);background:var(--surface-2)}
.agpiu:focus-visible{color:var(--ink);background:var(--surface-2)}

/* ============================================================
   LE PERSONE — la targhetta col nome e il fondino della riga.
   Il colore non sta scritto qui: la riga se lo mette addosso con la classe
   `p-<nome>`, che imposta --p, e tutto quello che sotto usa var(--p) ne
   discende. Una variabile, un punto solo da cambiare.
   Chi non e' fra i sette non ha una classe: --p resta il grigio di default,
   la riga non si tinge e la targhetta e' neutra. Nessun colore inventato.
   I fondini sono al 7%: a quella quantita' dodici righe colorate restano una
   lista, non una tovaglia — il colore lo porta la targhetta, il fondino serve
   solo a far vedere da lontano dove finisce una persona e comincia l'altra.
   ============================================================ */
.agv,.voce{--p:var(--ink-3)}
.p-paolo{--p:var(--p-paolo)}
.p-francesca{--p:var(--p-francesca)}
.p-alberto{--p:var(--p-alberto)}
.p-riccardo{--p:var(--p-riccardo)}
.p-sofia{--p:var(--p-sofia)}
.p-samantha{--p:var(--p-samantha)}
.p-angelo{--p:var(--p-angelo)}

.firma{display:inline-block;font:600 11.5px/1.35 'Inter',sans-serif;padding:3px 7px;
  border-radius:7px;white-space:nowrap;
  background:color-mix(in srgb,var(--p) 16%,var(--surface));color:var(--p)}

/* il fondino della riga d'agenda. Solo in agenda: li' l'appuntamento E' di
   quella persona. Nella lavagna il soggetto della riga e' la cosa da fare, non
   chi l'ha scritta, quindi li' resta la sola targhetta. */
.agv.p-paolo,.agv.p-francesca,.agv.p-alberto,.agv.p-riccardo,
.agv.p-sofia,.agv.p-samantha,.agv.p-angelo{
  background:color-mix(in srgb,var(--p) 7%,var(--surface))}

/* la riga sotto il titolo: targhetta + il resto, in grigio */
.agm{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.agmt{color:var(--ink-3)}
/* «pubblico» resta del colore di Creator anche adesso che il testo sta in un
   elemento suo: e' uno stato, non un contorno. */
.agv.pubblico .agmt{color:var(--creator)}

/* Il titolino che divide «le tue» da «quelle di nessuno» dentro «Le mie».
   Stessa forma dei giorni dell'agenda, di proposito: nelle due colonne
   affiancate una riga che separa deve avere lo stesso aspetto, o si legge
   come due sistemi diversi messi vicini. */
.lavsep{display:block;padding:10px 18px 6px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
  border-top:1px solid var(--line)}

@media (max-width:560px){
  .agq{width:74px;font-size:11px}
  .agx{opacity:1}
  .agform .compmore{gap:6px}
}

/* ============================================================
   LA FASCIA D'INCHIOSTRO — il mondo di sopra: ADESSO.
   La pagina ha due mondi e il confine è la piega (brief §1). Qui sopra, su
   fondo d'inchiostro: il giorno, la cosa più vicina a scadere, e le tre
   domande delle 8:40 — Aspetta te · Non va · Poi succede. Sotto, sulla carta,
   tutto il resto.
   Niente scatole con l'ombra: la gerarchia la fanno il carattere, il filo da
   un pixel e il colore. E quasi tutto è chiuso dentro `.inchiostro`, perché
   qui i nomi corti (.riga, .bollo) hanno un aspetto loro e sulla carta ne
   esistono già altri con lo stesso nome.
   ============================================================ */
.notte{--p:var(--on-band-3)}
.notte .p-paolo{--p:var(--p-paolo-on)}
.notte .p-francesca{--p:var(--p-francesca-on)}
.notte .p-alberto{--p:var(--p-alberto-on)}
.notte .p-riccardo{--p:var(--p-riccardo-on)}
.notte .p-sofia{--p:var(--p-sofia-on)}
.notte .p-samantha{--p:var(--p-samantha-on)}
.notte .p-angelo{--p:var(--p-angelo-on)}
.notte :focus-visible{outline-color:var(--mio-on)}
.notte .firma{background:color-mix(in srgb,var(--p) 20%,transparent);color:var(--p)}
.notte code{color:var(--on-band-2)}

.inchiostro{background:var(--band);color:var(--on-band);position:relative;isolation:isolate;
  padding-bottom:clamp(28px,4vw,44px);overflow:hidden}
.inchiostro>.wrap{padding-block:0;position:relative}
/* LA GRANA. Un fondo pieno e piatto fa sembrare stampata male qualunque pagina
   scura. Un velo di rumore le dà una superficie, e non costa né una richiesta
   né un'immagine: è generato. */
.inchiostro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}
/* e un alone caldo dietro il titolo: la giornata ha un centro di gravità */
.inchiostro::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-20px;top:0;width:min(640px,88vw);height:240px;
  background:radial-gradient(60% 55% at 22% 40%,color-mix(in srgb,var(--warn-on) 16%,transparent),transparent 72%);
  filter:blur(18px)}

.inchiostro .head{padding-block:clamp(14px,2vw,20px) 0}
.inchiostro .oggi{display:block;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-band-3)}
/* IL TITOLO DEL GIORNO. Archivo largo e pesante. Ha un limite di 48 caratteri e
   lo rispetta chi lo scrive (fascia.js): oltre, si accorcia il soggetto.
   NON è più grande quanto una prima pagina. Deciso da Paolo il 19/09 guardando
   la pagina vera: a 791 px di altezza il titolone spingeva i task a 617 px e
   gli appuntamenti a 824, sotto la piega — e «è cruciale che task e appuntamenti
   abbiano la massima visibilità». Il titolo resta la prima cosa che si legge,
   ma sta su una riga: il posto grande è di quello che c'è da fare. */
.titolone{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.08;letter-spacing:-.015em;
  margin:6px 0 0;max-width:none;text-wrap:balance;overflow-wrap:anywhere}
/* La parola calda: UNA per titolo, e il colore dice quanto manca. Rosso = è
   scaduta o scade oggi. Ambra = entro 48 ore. Oltre, nessun colore. */
.titolone .hot{color:var(--crit-on)}
.titolone .tiepido{color:var(--warn-on)}
.inchiostro .sotto{margin:6px 0 0;color:var(--on-band-2);font-size:14px;max-width:110ch}
.inchiostro .sotto a{color:var(--on-band);text-decoration:underline;text-underline-offset:3px}
/* le fonti spente, col motivo: piccolo, ma scritto */
.inchiostro .fonti{margin:clamp(20px,3vw,30px) 0 0;padding-top:12px;border-top:1px solid var(--band-line);max-width:none;font-family:'Space Mono',monospace;font-size:10.5px;
  line-height:1.6;letter-spacing:.02em;color:var(--on-band-3)}
.inchiostro .guasto{margin:14px 0 0;max-width:70ch;font-size:13.5px;color:var(--on-band);
  background:var(--band-2);border-left:3px solid var(--crit-on);border-radius:0 9px 9px 0;padding:11px 13px}

/* IL RITMO. Mai colonne uguali: colonne uguali dicono che le cose pesano
   uguale, e non è vero. «Aspetta te» è il motivo per cui uno apre la pagina e
   prende il posto grande.
   Dal 19/09 sera, sullo schermo largo le colonne sono TRE e l'ordine è
   task · appuntamenti · allarmi. Con la guida a due piani («Non va» sopra,
   «Poi succede» sotto) gli appuntamenti finivano sotto la piega mentre sotto
   «Aspetta te» restava mezzo schermo vuoto. Restano disuguali: 1.5 · 1.15 · .95.
   Sotto i 1100 px torna la guida, con gli appuntamenti prima degli allarmi. */
.griglia{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  border-top:1px solid var(--band-line);padding-top:18px;margin-top:16px}
@media (min-width:1100px){
  .griglia{grid-template-columns:minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.95fr);gap:clamp(24px,2.6vw,38px)}
  /* `.griglia>` perché più sotto `.rail{display:grid}` verrebbe dopo e vincerebbe */
  .griglia>.rail{display:contents}
}
.rail{display:grid;gap:clamp(22px,3vw,32px);align-content:start;min-width:0}
.grande{min-width:0}
@media (max-width:980px){.griglia{grid-template-columns:minmax(0,1fr);gap:28px}}

.col-h{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.col-h .k{margin:0;font-family:'Space Mono',monospace;font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-band-3)}
.col-h .n{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.col-h .n.mio{color:var(--mio-on)}
.col-h .n.bad{color:var(--crit-on)}
.col-h .n.warn{color:var(--warn-on)}
.grande .col-h .n{font-size:30px;letter-spacing:-.02em}
.nuove{font:600 11.6px/1.3 'Inter',sans-serif;color:var(--band);background:var(--mio-on);border:0;
  border-radius:99px;padding:3px 10px;cursor:pointer}
.nuove:hover{filter:brightness(1.1)}

/* riga — una cosa che si può spuntare */
.inchiostro .riga{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--band-line);border-radius:8px}
.inchiostro .riga:first-child{border-top:0}
.inchiostro .grande .riga{padding:14px 0}
.inchiostro .bollo{display:block;flex:none;width:8px;height:8px;border-radius:50%;margin:0;
  background:var(--on-band-3);transition:transform .2s cubic-bezier(.2,1.5,.4,1),background .2s}
.inchiostro .grande .bollo{width:10px;height:10px}
.inchiostro .bollo.mio{background:var(--mio-on)}
.inchiostro .bollo.bad{background:var(--crit-on)}
/* il pallino si tocca: l'area è di 28 px anche se il segno ne misura 10 */
.spunta{flex:none;width:28px;height:28px;margin:-3px -4px 0 -9px;display:grid;place-items:center;
  background:none;border:0;border-radius:50%;padding:0}
button.spunta{cursor:pointer}
button.spunta:hover{background:var(--band-2)}
button.spunta:hover .bollo{transform:scale(1.3);background:var(--ok-on)}
.inchiostro .rt{flex:1;min-width:0;display:block}
.inchiostro .rt .t{display:block;font-weight:600;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.inchiostro .grande .rt .t{font-size:16.5px}
.inchiostro .rt .m{font-size:12.3px;color:var(--on-band-2);margin-top:4px;display:flex;gap:7px;
  flex-wrap:wrap;align-items:center}
.rz{flex:none;font:600 12.2px/1 'Inter',sans-serif;color:var(--on-band);background:none;
  border:1px solid var(--band-line);border-radius:99px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.rz:hover{border-color:var(--on-band-3);background:var(--band-2)}
.rz[disabled]{opacity:.45;cursor:default}
.inchiostro .ora{flex:none;width:86px;padding-top:2px;font-family:'Space Mono',monospace;font-size:12px;
  text-transform:uppercase;color:var(--on-band-2)}
.inchiostro .sep{display:block;margin-top:6px;padding:12px 0 2px;border-top:1px solid var(--band-line);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-band-3)}
.inchiostro .sep+.riga{border-top:0}
.vuotino{margin:0;font-size:13.5px;color:var(--on-band-3);padding:6px 0 4px;max-width:60ch}

/* SPUNTARE — la riga si barra e il pallino scatta; dopo la pausa, esce */
.inchiostro .riga.fatta{opacity:.45}
.inchiostro .riga.fatta .t{text-decoration:line-through;text-decoration-thickness:1.5px}
.inchiostro .riga.fatta .bollo{background:var(--ok-on);transform:scale(1.35)}
.inchiostro .riga.uscita{opacity:0;transform:translateX(14px);transition:opacity .35s,transform .35s}
/* RICEVERE — una cosa che arriva mentre guardi */
@keyframes entra{
  0%{opacity:0;transform:translateY(-8px);background:color-mix(in srgb,var(--mio-on) 24%,transparent)}
  60%{opacity:1;transform:none;background:color-mix(in srgb,var(--mio-on) 24%,transparent)}
  100%{background:transparent}
}
.inchiostro .riga.arrivo{animation:entra 1.5s ease both}

/* IL VUOTO, quando c'è: dice che cosa è vuoto e dove guardare invece */
.vuoto-bello{border:1px dashed var(--band-line);border-radius:12px;padding:20px 18px;
  color:var(--on-band-2);font-size:13.6px;line-height:1.5;max-width:64ch}
.vuoto-bello b{color:var(--on-band);display:block;font-size:15px;margin-bottom:4px;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 700}

/* allarme — una cosa rotta. Non è una riga: ha uno sfondo, nessun pallino e
   una costa di colore. Una riga la chiudi tu; un allarme si spegne quando il
   problema sparisce a monte. */
.allarme{display:flex;gap:11px;align-items:flex-start;background:var(--band-2);color:var(--on-band);
  border-left:3px solid var(--crit-on);border-radius:0 9px 9px 0;padding:12px 13px;margin-bottom:8px}
.allarme.warn{border-left-color:var(--warn-on)}
a.allarme:hover{background:color-mix(in srgb,var(--on-band) 7%,var(--band-2))}
.allarme .rt .t{font-size:14.2px}
.allarme .rt .m{font-size:12.2px;margin-top:3px;display:block}
/* la sigla di sezione: MAIUSCOLA e mono, come ovunque — è la forma, non il
   colore, a distinguerla dal nome di una persona */
.sigla{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-right:3px;color:var(--on-band-2)}
.sigla.s-gesam{color:var(--gesam-on)}
.sigla.s-creator{color:var(--creator-on)}
.sigla.s-schedario{color:var(--schedario-on)}

/* SCRIVERE — un campo e un tasto, dentro la colonna */
.scrivi{margin-top:14px;display:flex;gap:8px}
.scrivi input{flex:1;min-width:0;background:var(--band-2);border:1px solid var(--band-line);
  color:var(--on-band);border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px}
.scrivi input::placeholder{color:var(--on-band-3)}
.scrivi input:focus{border-color:var(--mio-on);outline:none}
.scrivi button{background:var(--mio-on);color:var(--band);border:0;border-radius:10px;
  padding:0 16px;font:600 13.5px/1 'Inter',sans-serif;cursor:pointer}
.scrivi button[disabled]{opacity:.5}

.piu{display:block;width:100%;margin-top:12px;background:none;border:0;border-top:1px solid var(--band-line);
  padding:10px 0 0;cursor:pointer;text-align:left;font:inherit;font-size:12.6px;color:var(--on-band-3)}
.piu:hover{color:var(--on-band)}

@media (max-width:520px){
  .inchiostro .ora{width:72px;font-size:11px}
  .rz{padding:7px 10px}
}

/* ============================================================
   IL NASTRO DEI QUATTORDICI GIORNI.
   È l'oggetto che questa plancia ha e nessun altro cruscotto: due settimane in
   una riga sola, con sopra i segni di quello che c'è. Un colpo d'occhio dice la
   FORMA della quindicina — dove è vuoto, dove si accavalla, dove cade l'evento —
   che è la cosa che una lista di appuntamenti non dice mai.
   I pallini prendono il colore della persona; le scadenze sono quadrate, perché
   una scadenza non è un appuntamento; un'edizione è una campata.
   ============================================================ */
.nastro{margin-top:14px;border-top:1px solid var(--band-line);padding-top:12px}
.nastro-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.nastro-h .k{margin:0;font-family:'Space Mono',monospace;font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-band-3)}
.nastro-h .g{font-size:12.4px;color:var(--on-band-2)}
.gg{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.g1{background:none;border:0;cursor:pointer;text-align:center;border-radius:8px;
  padding:7px 0 8px;color:inherit;font:inherit;min-width:0;transition:background .14s}
.g1:hover,.g1[aria-pressed="true"]{background:var(--band-2)}
.g1 .d{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-band-3)}
.g1 .n{display:block;margin-top:2px;line-height:1;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 106,'wght' 700;font-size:15px;color:var(--on-band-2);
  font-variant-numeric:tabular-nums}
/* oggi porta un filo ambra sotto; i festivi sono più spenti */
.g1.oggi{background:var(--band-2);box-shadow:inset 0 -2px 0 var(--warn-on)}
.g1.oggi .n{color:var(--on-band)}
.g1.fest .n,.g1.fest .d{opacity:.55}
.segni{display:flex;justify-content:center;align-items:center;gap:3px;min-height:12px;margin-top:7px;flex-wrap:wrap}
.sg{display:block;width:7px;height:7px;border-radius:50%;background:var(--p)}
.sg.q{border-radius:2px}
.sg.sz-gesam{background:var(--gesam-on)}
.sg.bad{background:var(--crit-on)}
.sgpiu{font:700 9px/1 'Space Mono',monospace;font-style:normal;color:var(--on-band-3)}
.campata{grid-column:var(--da) / var(--a);margin-top:4px;height:20px;border-radius:6px;min-width:0;
  background:color-mix(in srgb,var(--warn-on) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--warn-on) 55%,transparent);
  display:flex;align-items:center;justify-content:center;padding-inline:6px;overflow:hidden;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:10.5px;letter-spacing:.1em;color:var(--warn-on);text-transform:uppercase}
.campata span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* un'edizione cominciata prima di oggi, o che finisce oltre il nastro, ha il bordo aperto */
.campata.tronca{border-left:0;border-radius:0 6px 6px 0}
.campata.continua{border-right:0;border-radius:6px 0 0 6px}
.campata.tronca.continua{border-radius:0}
.gdett{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--on-band-2);min-height:22px}
.gdett b{color:var(--on-band);font-weight:600}
.gdett .dm{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--on-band-3)}
.gdett .dsep{color:var(--on-band-3);margin-inline:3px}
.gdett .dq{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--on-band-3);margin-right:6px}
.gdett .dq.bad{background:var(--crit-on)}
@media (max-width:700px){
  .gg{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:8px}
  .campata{display:none}
  /* qui la campata non c'è: il giorno dentro un'edizione porta un filo dritto in
     testa. Dritto, e solo qui: come ombra interna su un angolo tondo, sul nastro
     largo, disegnava un contorno dorato attorno a ogni giorno e sembrava un guasto. */
  .g1.ed{position:relative}
  .g1.ed::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;border-radius:2px;
    background:color-mix(in srgb,var(--warn-on) 70%,transparent)}
}

/* ============================================================
   LA TESTATA: sala staff e cassetto degli strumenti.
   ============================================================ */
/* la sala staff sta in testata, sempre visibile: è il gesto più frequente della
   settimana e non deve costare uno scorrimento. Verde, col pallino che respira. */
.sala-top{display:inline-flex;align-items:center;gap:8px;background:var(--ok-on);color:#03130B;
  border-radius:99px;padding:7px 14px 7px 11px;font:700 12.6px/1 'Inter',sans-serif;white-space:nowrap}
.sala-top .dot{width:7px;height:7px;border-radius:50%;background:#03130B;opacity:.55;
  animation:battito 2.6s ease-in-out infinite}
.sala-top:hover{filter:brightness(1.1)}
@keyframes battito{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.9;transform:scale(1.3)}}
/* il cassetto: pochi link, sempre a un tocco, mai in fondo alla pagina */
.cass{position:relative}
.pan{position:absolute;right:0;top:calc(100% + 9px);z-index:50;width:min(340px,86vw);
  background:var(--band-2);border:1px solid var(--band-line);border-radius:14px;padding:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.pan h3{margin:0 0 8px;font-family:'Space Mono',monospace;font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-band-3)}
.pan h3+.pan-g{margin-bottom:14px}
.pan .pan-g:last-child{margin-bottom:0}
.pan-g{display:grid;gap:3px}
.pan a{display:flex;align-items:baseline;gap:9px;padding:8px 9px;border-radius:9px;color:var(--on-band)}
.pan a:hover{background:var(--band)}
.pan a .n{font-size:13.6px;font-weight:600}
.pan a .q{font-size:11.6px;color:var(--on-band-3);margin-left:auto;text-align:right}
.corto{display:none}
/* sul telefono la testata resta su UNA riga: è attaccata in cima, e due righe
   fisse si mangerebbero un ottavo dello schermo */
@media (max-width:620px){
  .top-in{gap:6px;padding:10px 12px;flex-wrap:nowrap}
  .logo svg{height:19px}
  .me{gap:7px}
  .me-n,.lungo{display:none}
  .corto{display:inline}
  .logo svg{height:17px}
  .ghost{padding:8px 8px;white-space:nowrap}
  .ghost.conta b{margin-left:4px}
  .sala-top{padding:7px 9px 7px 8px;gap:6px}
  .pan-esci{display:block;width:100%;margin-top:12px;padding:10px;border-radius:9px;cursor:pointer;
    font:600 13px/1 'Inter',sans-serif;color:var(--on-band);background:none;border:1px solid var(--band-line)}
  .sala-top{padding:7px 10px 7px 9px}
  .ghost{padding:8px 10px}
}

/* ============================================================
   LA CARTA — il mondo di sotto: IL RESTO.
   ============================================================ */

/* banner — Tipicità. Il marchio, enorme e cavo, È la texture della fascia: niente
   fotografia di repertorio, niente sfumatura. La materia è il carattere. */
.tip{display:block;background:var(--tipicita);color:#fff;position:relative;overflow:hidden}
:root[data-theme="dark"] .tip{background:#035F6A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tip{background:#035F6A}}
.tip::after{content:"TIPICITÀ";position:absolute;right:-.04em;top:50%;transform:translateY(-52%);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(5rem,17vw,13rem);line-height:.8;letter-spacing:-.045em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.17);pointer-events:none;white-space:nowrap;z-index:0}
.tip-in{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,30px) 20px;display:flex;align-items:center;
  gap:clamp(16px,3vw,40px);flex-wrap:wrap;position:relative;z-index:1}
.tip-w{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 124,'wght' 800;
  font-size:clamp(1.6rem,4.4vw,2.7rem);line-height:.92;letter-spacing:-.015em}
.tip-w span{display:block;font-variation-settings:'wdth' 100,'wght' 500;font-size:.32em;
  letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.tip-sp{flex:1 1 auto;min-width:10px}
.tip-r{display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);flex-wrap:wrap}
.tip-k{font-size:13.5px;line-height:1.35;max-width:24ch;opacity:.92}
.tip-k b{display:block;font-family:'Space Mono',monospace;font-size:22px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.tip-go{border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:9px 18px;
  font-size:13.5px;font-weight:600;white-space:nowrap}
.tip:hover .tip-go{background:#fff;color:#035F6A;border-color:#fff}

.carta{padding-top:clamp(22px,3vw,34px)}

/* porta — una sezione. GRAFICA come il banner di Tipicità (Paolo, 20/09): il
   colore dominante della sezione a campo pieno, e il suo nome gigante e cavo
   che esce dal bordo a fare da texture. Marchio, sottotitolo, UNA riga di
   stato. Il campo pieno è il mestiere del MARCHIO: per Creator è #E6007E, non
   l'inchiostro #D1006F (brief §3). */
.porte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:clamp(28px,4vw,42px)}
.porte[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.porte[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.porte[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.porte,.porte[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.porte,.porte[data-n="2"],.porte[data-n="3"]{grid-template-columns:minmax(0,1fr)}}
.porta{position:relative;overflow:hidden;isolation:isolate;display:block;min-width:0;
  background:var(--pc,var(--surface));color:#fff;border-radius:var(--r);
  padding:20px 18px 18px;min-height:132px;transition:filter .14s,transform .14s}
a.porta:hover{filter:brightness(1.08)}
a.porta:active{transform:translateY(1px)}
.porta::after{content:attr(data-w);position:absolute;z-index:-1;right:-.06em;bottom:-.2em;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(3.4rem,7.4vw,6rem);line-height:.8;letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);pointer-events:none}
.porta .w{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 122,'wght' 800;
  font-size:clamp(17px,1.7vw,21px);letter-spacing:.01em;text-transform:uppercase}
.porta .d{display:block;font-size:12.6px;margin-top:6px;line-height:1.35;opacity:.86}
.porta .s{display:inline-block;margin-top:16px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.82}
/* lo stato che chiede un gesto si stacca: bianco pieno, col colore della sezione dentro */
.porta .s.on{opacity:1;background:#fff;color:var(--pc);font-weight:700;padding:4px 8px;border-radius:5px}
.d-creator{--pc:var(--creator-marchio)} .d-gesam{--pc:var(--gesam)} .d-schedario{--pc:var(--schedario)}
.d-things{--pc:var(--things)}
/* nello scuro i colori di sezione sono chiari: il campo pieno tiene i valori del chiaro */
:root[data-theme="dark"] .porta{--creator-marchio:#E6007E;--gesam:#3E63DD;--schedario:#56794A;--things:#7A4F35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .porta{--creator-marchio:#E6007E;--gesam:#3E63DD;--schedario:#56794A;--things:#7A4F35}}
div.porta{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
div.porta::after{content:none}
div.porta .d{opacity:1;color:var(--ink-2)}

/* le sezioni della carta: un titolo in Archivo, un filo, niente scatola */
.sez{margin-bottom:clamp(30px,4.5vw,48px)}
.sez-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sez-h h2{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.01em}
.sez-h .c{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--ink-3)}
.sez-p{color:var(--ink-2);font-size:13.8px;margin:0 0 14px;max-width:70ch}

/* la sigla di sezione: PAROLA MAIUSCOLA in Space Mono — è la forma, non il
   colore, a distinguerla dal nome di una persona */
.tag{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;flex:none;margin-top:1px}
.t-creator{background:var(--creator-soft);color:var(--creator)}
.t-gesam{background:var(--gesam-soft);color:var(--gesam)}
.t-schedario{background:var(--schedario-soft);color:var(--schedario)}
.t-things{background:var(--things-soft);color:var(--things)}

/* coda: righe che si aprono sul posto. Niente pagina nuova, niente finestra
   sovrapposta: si aprono qui e finiscono con un gesto, nel colore della sezione. */
.coda{border-top:1px solid var(--line)}
.coda .vuoto{padding:18px 4px}
.cq{border-bottom:1px solid var(--line);border-left:3px solid transparent}
.cq.crit{border-left-color:var(--crit)}
.cq.warn{border-left-color:var(--warn)}
.cq-b{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;
  padding:14px 8px 14px 12px;cursor:pointer;font:inherit;color:inherit}
.cq-b:hover{background:var(--surface-2)}
.cq-t{flex:1;min-width:0;display:block}
.cq-t .t{display:block;font-weight:600;font-size:14.8px;line-height:1.35}
.cq-t .m{display:block;font-size:12.8px;color:var(--ink-3);margin-top:3px}
.cq-x{flex:none;color:var(--ink-3);font-size:18px;line-height:1;margin-top:3px;transition:transform .18s ease}
.cq[data-open="true"] .cq-x{transform:rotate(90deg);color:var(--ink)}
.cq[data-open="true"]{background:var(--surface)}
.cq-d{padding:0 12px 18px 12px;display:grid;gap:12px}
.cq-d p{margin:0;font-size:13.8px;color:var(--ink-2);max-width:72ch}
.cq-d .azioni{display:flex;gap:9px;flex-wrap:wrap;align-items:center;flex:initial}
.cq-d .az{display:inline-block;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:99px;padding:8px 15px;font:500 13px/1.2 'Inter',sans-serif;cursor:pointer}
.cq-d .az:hover{border-color:var(--ink-3);color:var(--ink)}
.cq-d .az.primaria{background:var(--pc,var(--ink));color:#fff;border-color:transparent;font-weight:600}
:root[data-theme="dark"] .cq-d .az.primaria{color:#0A0E16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cq-d .az.primaria{color:#0A0E16}}
.cq-d .az.primaria:hover{filter:brightness(1.1)}
.cq-d .az[disabled]{opacity:.6;cursor:default}

/* soldi: quattro cifre e una barra. Archivo grande, numeri in colonna. */
.soldi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2.4vw,24px)}
.cifre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
@media (max-width:900px){.cifre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cifre{grid-template-columns:minmax(0,1fr)}}
.cifra .k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.cifra .v{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.05;margin-top:6px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cifra .v.bad{color:var(--crit)} .cifra .v.ok{color:var(--ok)}
.cifra .n2{font-size:12.4px;color:var(--ink-3);margin-top:4px}
.male{color:var(--crit);font-weight:600} .bene{color:var(--ok);font-weight:600}
.mono{font-family:'Space Mono',monospace}
.eta{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.eta-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-2)}
.eta-h b{color:var(--ink)}
.barra{margin-top:12px;display:flex;gap:2px;height:26px;border-radius:5px;overflow:hidden}
.seg-a{background:var(--ok)} .seg-b{background:var(--crit)}
.eta-l{display:flex;justify-content:space-between;gap:14px;margin-top:9px;flex-wrap:wrap}
.eta-l span{font-size:12.4px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.eta-l b{color:var(--ink);font-variant-numeric:tabular-nums}
.pall{width:9px;height:9px;border-radius:2px;display:inline-block}
.pall.a{background:var(--ok)} .pall.b{background:var(--crit)}

.foot{margin-top:8px;padding-top:18px;border-top:1px solid var(--line);max-width:80ch}

/* ============================================================
   L'ESPLOSIONE — lavagna e agenda intere, DENTRO la fascia d'inchiostro.
   Si aprono al posto delle tre colonne (fascia.js, `esplodi`).
   Non ho riscritto una regola della lavagna né dell'agenda: qui dentro si
   RIDEFINISCONO I TOKEN — superfici, inchiostri, fili, e le tre famiglie di
   colore coi loro valori «-on» — e tutto quello che li usa diventa d'inchiostro
   da solo. È lo stesso trucco del tema scuro, applicato a una scatola.
   ============================================================ */
.inchiostro .esploso,.tendina{
  color-scheme:dark;
  --ground:var(--band); --surface:var(--band-2); --surface-2:color-mix(in srgb,var(--on-band) 4%,var(--band-2));
  --inset:color-mix(in srgb,#000 22%,var(--band-2));
  --line:var(--band-line); --line-2:color-mix(in srgb,var(--on-band) 22%,var(--band-line));
  --ink:var(--on-band); --ink-2:var(--on-band-2); --ink-3:var(--on-band-3);
  --creator:var(--creator-on); --creator-soft:#2B1020;
  --gesam:var(--gesam-on); --gesam-soft:#141D36;
  --schedario:var(--schedario-on); --schedario-soft:#141B11;
  --things:var(--things-on); --things-soft:#231A14;
  --ok:var(--ok-on); --ok-soft:#0D2519;
  --warn:var(--warn-on); --warn-soft:#251C09;
  --crit:var(--crit-on); --crit-soft:#2B100D;
  --mio:var(--mio-on); --mio-soft:#1B1533;
}
.inchiostro .esploso{margin-top:16px;border-color:var(--band-line);background:var(--surface);color:var(--ink);
  scroll-margin-top:70px}
/* dove sopra un colore pieno c'era il bianco: qui i pieni sono chiari, e ci va l'inchiostro */
.inchiostro .esploso .chip.perte,.inchiostro .esploso .perte-h,
.inchiostro .esploso .chip.quando.tardi,
.inchiostro .esploso .filtri button[data-f="miei"] .n.acceso{color:var(--band)}
.inchiostro .esploso .seg button[aria-pressed="true"]{box-shadow:none;background:var(--line-2)}
.inchiostro .esploso .chead{flex-wrap:wrap}
.inchiostro .esploso .chead h2{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 114,'wght' 800;
  font-size:17px;letter-spacing:-.005em}
/* «← Torna ad adesso»: la porta d'uscita, sempre nello stesso posto, prima del titolo */
.torna{font:600 12.2px/1 'Inter',sans-serif;color:var(--on-band);background:none;cursor:pointer;
  border:1px solid var(--band-line);border-radius:99px;padding:7px 12px;white-space:nowrap}
.torna:hover{border-color:var(--on-band-3);background:var(--band)}
/* il bottoncino accanto a un'intestazione di colonna */
.piccolo{margin-left:auto;font:600 11.8px/1 'Inter',sans-serif;color:var(--on-band-2);background:none;cursor:pointer;
  border:1px solid var(--band-line);border-radius:99px;padding:6px 11px;white-space:nowrap}
.piccolo:hover{color:var(--on-band);border-color:var(--on-band-3)}

/* ============================================================
   LE TENDINE — dalla testata scendono «Da fare» (la coda) e «Gesam» (il
   riepilogo, a tutta larghezza come un megamenu). Deciso da Paolo il 20/09 per
   compattare la vista: quello che si consulta non occupa la pagina, scende
   dall'alto da qualunque punto. Sono d'inchiostro come la testata da cui
   scendono: stessi token ridefiniti dell'esplosione qui sopra.
   ============================================================ */
.tendina{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--band);color:var(--on-band);
  border-bottom:1px solid var(--band-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
  max-height:calc(100dvh - 60px);overflow:auto;overscroll-behavior:contain}
.tendina-in{max-width:1240px;margin:0 auto;padding:clamp(16px,2.4vw,24px) 20px clamp(20px,3vw,30px)}
/* dietro una tendina aperta la pagina si SCURISCE: si capisce che la tendina è
   sopra. Scurire, non sbiadire: con l'opacità sotto traspariva la carta chiara e
   la fascia d'inchiostro diventava grigio latte (visto sul sito vero il 20/09). */
body.tendina-aperta main{filter:brightness(.42) saturate(.8);transition:filter .18s}
.td-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.td-h h2{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.01em}
.td-h .c{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--on-band-3)}
.td-h .torna{margin-left:auto}
.td-p{margin:0 0 14px;font-size:13.6px;color:var(--on-band-2);max-width:80ch}
.td-p b{color:var(--on-band)}
.tendina .soldi{background:var(--band-2);border-color:var(--band-line)}
.tendina .cq-d .az.primaria{color:var(--band)}
.td-vai{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.td-vai .az{display:inline-block;border:1px solid var(--line-2);background:none;color:var(--on-band-2);
  border-radius:99px;padding:8px 15px;font:500 13px/1.2 'Inter',sans-serif}
.td-vai .az:hover{color:var(--on-band);border-color:var(--on-band-3)}
.td-vai .az.primaria{background:var(--pc);color:var(--band);border-color:transparent;font-weight:600}

/* i bottoni della testata che aprono una tendina */
.ghost[aria-expanded="true"]{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.ghost.conta b{display:inline-block;min-width:18px;margin-left:6px;padding:2px 5px;border-radius:99px;
  background:var(--band-line);color:var(--on-band);font:700 11px/1.2 'Space Mono',monospace;text-align:center}
.ghost.conta.crit b{background:var(--crit-on);color:var(--band)}
.ghost.conta[aria-expanded="true"] b{background:var(--band);color:var(--on-band)}
/* sotto i 400 px il cerchio con le iniziali esce dalla testata: con «Da fare» e
   «Gesam» la riga è piena, ed «Esci» sta già nel cassetto */
@media (max-width:400px){ .top .me{display:none} }

/* ============================================================
   IL TEAM (team.html) — collaboratori esterni a tempo.
   Stessi mattoni della carta: schede a filo, niente ombre, colore solo dove
   c'è un'identità (le sezioni sui gettoni) o uno stato (scadenza vicina).
   ============================================================ */
.team{padding-top:22px}
.team-su{margin:0;font-size:13px}
.team-su a{color:var(--ink-3)}
.team-su a:hover{color:var(--ink)}
.team-lead{max-width:760px;color:var(--ink-2);margin:10px 0 22px}
.team .card+.card{margin-top:18px}
.team-form{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.team-form label{display:flex;flex-direction:column;gap:5px;font-size:12.3px;color:var(--ink-2);min-width:0}
.team-form input:not([type=checkbox]),.team-form select{font:inherit;font-size:14px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);min-width:0}
.tf-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.team-form fieldset{border:1px solid var(--line);border-radius:var(--r);margin:0;padding:12px 14px 14px}
.team-form legend{font:600 12px 'Inter',sans-serif;color:var(--ink);padding:0 6px}
.tf-aree{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.tf-man{display:flex;flex-wrap:wrap;gap:8px 18px}
.tf-man label{flex-direction:row;align-items:center;gap:7px;font-size:14px;color:var(--ink)}
.tf-az{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:620px){.tf-r{grid-template-columns:minmax(0,1fr)}}

.trow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.3fr) auto;gap:8px 18px;
  padding:14px 18px;border-top:1px solid var(--line);align-items:start}
.trow:first-child{border-top:0}
.trow.appena{background:var(--surface-2)}
.trow.s-scaduto,.trow.s-revocato{color:var(--ink-3)}
.trow.s-scaduto b,.trow.s-revocato b{color:var(--ink-2)}
.tr-chi,.tr-quando{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.tr-nota{font-size:12.3px;color:var(--ink-3);font-style:italic}
.tr-aree{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.tchip{font:600 11px/1 'Inter',sans-serif;padding:5px 8px;border-radius:99px;background:var(--inset);color:var(--ink-2);white-space:nowrap}
.tchip i{font-style:normal;font-weight:400;opacity:.8}
.tchip.t-studio,.tchip.t-creator{background:var(--creator-soft);color:var(--creator)}
.tchip.t-schedario{background:var(--schedario-soft);color:var(--schedario)}
.tchip.t-things{background:var(--things-soft);color:var(--things)}
.tchip.t-man{background:var(--tipicita-soft);color:var(--tipicita)}
.tstato{font:700 10.5px 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.trow.s-attivo .tstato{color:var(--ok)}
.tr-quando .warn{color:var(--warn);font-weight:600}
.tdir{color:var(--ink-3)}
.tdir.no{color:var(--warn)}
.tr-az{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tr-az .btn{font-size:12.5px;padding:8px 11px}
.tprorog{display:flex;gap:6px}
.tprorog input{font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink)}
.tr-revoca{color:var(--crit);border-color:var(--crit)}
.tr-esito{grid-column:1/-1;margin:0;color:var(--ink-2)}
.tr-esito:empty{display:none}
.tr-diario{grid-column:1/-1}
.tr-diario ol{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-2)}
.tr-diario .mono{font-size:11px;color:var(--ink-3);margin-right:6px}
@media (max-width:900px){
  .trow{grid-template-columns:minmax(0,1fr)}
  .tr-az{flex-direction:row;flex-wrap:wrap;align-items:center}
}
.team-stato{margin:0;color:var(--ink-2)}
.tsimile{color:var(--warn)}