/* Foglio unico, niente framework. Sei utenti interni e cinque schermi: una
   dipendenza CSS costerebbe piu' manutenzione di quanta ne risparmi.
   ---------------------------------------------------------------------------
   L'identita' e' quella di Wanderlust, presa dai token veri di wsmarketing.it
   e dal marchio: arancio #fc5400, fondi #0a0a0a e #1f1d1d, tipografia
   Unbounded per i titoli e Satoshi per il corpo.

   **Lo scuro e' il default, non una variante.** Il sito e' scuro, e un
   applicativo che si accende bianco accanto a un marchio nero non sembra della
   stessa casa. Il chiaro resta, e non e' un'inversione automatica: e' una
   seconda serie di valori scelti e misurati sul bianco, dove l'arancio pieno
   come testo si ferma a 3.28:1 e va scurito a #cc4400 per arrivare a 4.78:1.

   **I contrasti sono calcolati, non stimati.** I numeri qui accanto sono WCAG
   contro la superficie dichiarata. Il piu' istruttivo: **bianco su arancio fa
   3.28:1 e nero su arancio 6.04:1**, quindi il testo dei bottoni pieni e'
   scuro. Sembra sbagliato e non lo e'.

   I font non sono impacchettati qui: la pila li nomina e ripiega sul sistema.
   Sulle macchine di Wanderlust ci sono; sulla VPS andranno serviti da
   `/statico`, ed e' un passo che resta aperto. */

/* I due temi: i valori vivono una volta sola, e gli alias li scelgono. Senza
   questa divisione la serie chiara andrebbe riscritta tre volte — media query,
   scelta esplicita, e la vittoria dell'una sull'altra — e la terza copia
   sarebbe vecchia entro un mese. */
:root {
  --scuro-inchiostro: #ffffff;    /* 16.78:1 sulla carta scura */
  --scuro-tenue: #8f8e8e;         /*  5.13:1 */
  --scuro-sfondo: #0a0a0a;
  --scuro-carta: #1f1d1d;
  --scuro-bordo: #ffffff1a;
  --scuro-accento: #fc5400;       /*  5.12:1 */
  --scuro-su-accento: #0a0a0a;    /*  6.04:1 sull'arancio */
  --scuro-allarme: #ff6b5e;       /*  6.00:1 */

  --chiaro-inchiostro: #0a0a0a;   /* 19.80:1 sulla carta chiara */
  --chiaro-tenue: #787878;        /*  4.42:1 */
  --chiaro-sfondo: #f5f4f2;
  --chiaro-carta: #ffffff;
  --chiaro-bordo: #0d0d0d1a;
  /* L'arancio pieno come testo si ferma a 3.28:1 sul bianco. Sui fondi resta
     #fc5400 — vedi --pieno — ma dove fa da inchiostro va scurito. */
  --chiaro-accento: #cc4400;      /*  4.78:1 */
  --chiaro-su-accento: #ffffff;
  --chiaro-allarme: #bf3313;      /*  5.68:1 */

  /* I raggi erano sei valori scelti uno per volta — 4, 5, 6, 7, 8, 10, 12 — e
     la differenza fra 6 e 7 non la vede nessuno mentre la incoerenza si sente.
     Tre gradini, e ognuno ha un mestiere: il minuto sulle etichette, il medio
     su campi e bottoni, il grande sulle superfici. */
  --raggio-piccolo: 5px;
  --raggio: 9px;
  --raggio-grande: 14px;

  --titoli: Unbounded, "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI",
           system-ui, sans-serif;
}

/* Lo scuro e' il default: il sito e' scuro, e un applicativo che si accende
   bianco accanto a un marchio nero non sembra della stessa casa. */
:root, :root[data-tema="scuro"] {
  color-scheme: dark;
  --inchiostro: var(--scuro-inchiostro); --tenue: var(--scuro-tenue);
  --sfondo: var(--scuro-sfondo);         --carta: var(--scuro-carta);
  --bordo: var(--scuro-bordo);           --accento: var(--scuro-accento);
  --su-accento: var(--scuro-su-accento); --allarme: var(--scuro-allarme);
}

/* `:not([data-tema])` e' cio' che rende la scelta esplicita piu' forte del
   sistema: senza, chi sceglie il chiaro su un Mac in modo scuro vedrebbe la
   media query rivincere e concluderebbe che il commutatore non funziona. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    color-scheme: light;
    --inchiostro: var(--chiaro-inchiostro); --tenue: var(--chiaro-tenue);
    --sfondo: var(--chiaro-sfondo);         --carta: var(--chiaro-carta);
    --bordo: var(--chiaro-bordo);           --accento: var(--chiaro-accento);
    --su-accento: var(--chiaro-su-accento); --allarme: var(--chiaro-allarme);
  }
}

:root[data-tema="chiaro"] {
  color-scheme: light;
  --inchiostro: var(--chiaro-inchiostro); --tenue: var(--chiaro-tenue);
  --sfondo: var(--chiaro-sfondo);         --carta: var(--chiaro-carta);
  --bordo: var(--chiaro-bordo);           --accento: var(--chiaro-accento);
  --su-accento: var(--chiaro-su-accento); --allarme: var(--chiaro-allarme);
}

/* L'arancio del marchio, sempre pieno: e' un colore di superficie, non di
   testo, e non cambia fra i due modi. Il marchio non si scurisce. */
:root { --pieno: #fc5400; }

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 17px e non 16: la scala precedente era tarata su uno schermo grande
     guardato da vicino, e su un portatile a distanza normale non si legge.
     Sale la base, e con lei ogni misura in rem. */
  font: 17px/1.6 var(--corpo);
  color: var(--inchiostro);
  background: var(--sfondo);
}

h1, h2, h3, .marchio { font-family: var(--titoli); font-weight: 600; }
h1 { letter-spacing: -.02em; }

/* ------------------------------------------------------------- il guscio */

/* Barra ferma a sinistra, colonna che scorre a destra. La forma viene da
   Bynor, guardato il 2026-08-03, ed e' l'unica cosa strutturale che vale la
   pena prendere: una navigazione che vive nel corpo della pagina obbliga a
   tornare indietro per cambiare sezione, e chi ci lavora passa la giornata a
   saltare fra un cliente e il calendario di tutti.

   La differenza che non si copia: **li' il brand e' un modo, qui il cliente e'
   una dimensione.** Un applicativo per un brand solo commuta e dimentica; noi
   siamo un'agenzia, e «questa settimana e' affollata su qualcuno?» non ha
   risposta dentro un cliente per volta. Per questo *tutti i clienti* e' una
   voce di menu in cima e non un'opzione dentro un commutatore. */
.guscio { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); }
body.nudo .guscio { grid-template-columns: minmax(0, 1fr); }

.lato {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: 1.1rem .9rem 1rem;
  border-right: 1px solid var(--bordo);
  background: var(--carta);
}
.lato .marchio { padding: .2rem .35rem; font-size: .95rem; }
.lato .marchio span { line-height: 1.15; }
.lato .marchio strong { display: block; font-weight: 600; }

.menu { display: flex; flex-direction: column; gap: .1rem; }
.menu a {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem; border-radius: 7px;
  font-size: .94rem; text-decoration: none; color: var(--tenue);
  min-width: 0;
}
.menu a:hover { background: var(--sfondo); color: var(--inchiostro); }
/* La voce attuale si tinge di fondo e non di solo testo: in un elenco di
   nomi di cliente il grassetto da solo si perde. */
.menu a.attuale {
  background: color-mix(in oklab, var(--pieno) 16%, transparent);
  color: var(--inchiostro); font-weight: 600;
}
.menu .segno { color: var(--accento); font-size: .88rem; }
.menu .nome-cliente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .ambito {
  margin-left: auto; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tenue);
}
.menu .punto-stato { font-size: .62rem; color: var(--tenue); }
.menu .punto-stato.stato-attivo { color: #3f9c68; }
.menu .punto-stato.stato-prospect { color: var(--accento); }

.titoletto {
  margin: 0 0 .35rem .6rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tenue);
}
.dentro-cliente { border-top: 1px solid var(--bordo); padding-top: 1rem; }
.dentro-cliente .menu a { padding-left: 1.5rem; }

/* Il piede si incolla in fondo: chi sei e come vuoi vedere non sono cose che
   si cercano, sono cose che devono stare ferme dove le hai lasciate. */
.piede-lato {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bordo);
  display: flex; flex-direction: column; gap: .7rem;
}

/* La testata di pagina: titolo a sinistra, azioni a destra. Resta in vista
   scorrendo, perche' su un calendario di un mese il titolo sparirebbe subito
   e con lui il modo di uscire dallo schermo. */
.testata {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.6rem; border-bottom: 1px solid var(--bordo);
  background: color-mix(in oklab, var(--sfondo) 88%, transparent);
  backdrop-filter: blur(8px);
}
.testata h1 { margin: 0; font-size: 1.35rem; }
/* Uno schermo che porta gia' il proprio titolo nel corpo — la maschera del
   contenuto — non ne mostra due: la testata vuota sparisce da sola. */
.testata h1:empty { display: none; }
.testata:has(h1:empty):has(.azioni-pagina:empty) { display: none; }
.azioni-pagina { margin-left: auto; display: flex; gap: .5rem;
  flex-wrap: wrap; align-items: center; }

/* Su chi si sta lavorando. In alto a destra, su ogni schermo.

   Un `<details>` e non un menu in JavaScript: si apre da solo, si chiude con
   Esc, e ogni voce e' un collegamento vero. La tendina e' in posizione
   assoluta perche' altrimenti allargherebbe la testata aprendosi, e una
   testata che cambia altezza sposta tutta la pagina sotto. */
.in-testa { position: relative; flex: none; }
.in-testa > summary {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .3rem .7rem .3rem .35rem; border-radius: 99px;
  border: 1px solid var(--bordo); background: var(--carta);
  list-style: none; user-select: none;
}
.in-testa > summary::-webkit-details-marker { display: none; }
.in-testa > summary:hover { border-color: var(--accento); }
.in-testa .chi-e { font-weight: 600; font-size: .95rem; }
.in-testa .freccia { color: var(--tenue); font-size: .9rem; }
.in-testa[open] .freccia { transform: rotate(180deg); }

.in-testa .tendina {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
  min-width: 15rem; max-height: 70vh; overflow-y: auto;
  padding: .5rem; border-radius: var(--raggio-grande);
  border: 1px solid var(--bordo); background: var(--carta);
  box-shadow: 0 12px 32px #0007;
}
.in-testa .tendina .titoletto { margin: .2rem 0 .4rem .4rem; }
.in-testa .tendina a {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; border-radius: 7px;
  color: var(--inchiostro); text-decoration: none;
}
.in-testa .tendina a:hover { background: color-mix(in oklab, var(--inchiostro) 8%, transparent); }
.in-testa .tendina a.attuale { background: color-mix(in oklab, var(--accento) 16%, transparent); }
.in-testa .tendina .punto-stato { margin-left: auto; font-size: .7rem; }

/* Il volto di un cliente. Chi non ha ancora un'immagine non lascia un buco:
   l'iniziale su una tinta ricavata dallo slug si riconosce lo stesso, e non
   cambia mai per lo stesso cliente. */
.volto {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--sfondo);
}
.volto.iniziali {
  display: grid; place-items: center;
  font-family: var(--titoli); font-size: .85rem; font-weight: 600;
  color: #fff; background: hsl(var(--tinta) 42% 42%);
}

.data-oggi {
  margin: 0; font-size: .82rem; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.bottone {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .42rem 1rem; border-radius: 7px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  background: var(--accento); color: var(--su-accento);
  display: inline-flex; align-items: center; gap: .4rem;
}
.bottone:hover { filter: brightness(1.08); }
.bottone.vuoto-bottone {
  background: none; border-color: var(--bordo); color: var(--inchiostro);
}
.bottone.vuoto-bottone:hover { border-color: var(--accento);
  color: var(--accento); filter: none; }
.bottone.piccolo { font-size: .86rem; padding: .3rem .8rem; }

.tema {
  display: flex; gap: .1rem; font-size: .82rem;
}
/* Senza barra — la pagina di accesso — il tema galleggia in alto a destra. */
.tema-sciolto { position: fixed; top: .8rem; right: 1rem; z-index: 9; }
.tema a, .tema .attuale {
  padding: .2rem .55rem; border: 1px solid var(--bordo);
  text-decoration: none; color: var(--tenue);
}
.tema a:first-child, .tema .attuale:first-child { border-radius: 5px 0 0 5px; }
.tema a:last-child, .tema .attuale:last-child { border-radius: 0 5px 5px 0; }
.tema .attuale { color: var(--inchiostro); border-color: var(--accento); }
.tema a:hover { color: var(--accento); }

.chi { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chi .slug { font-size: .92rem; color: var(--tenue); }
.chi form { display: inline; }
.chi button {
  font: inherit; font-size: .88rem; padding: .25rem .7rem;
  background: none; border: 1px solid var(--bordo); border-radius: 99px;
  color: var(--tenue); cursor: pointer;
}
.chi button:hover { border-color: var(--accento); color: var(--accento); }

.livello {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .15rem .55rem; border-radius: 99px; border: 1px solid currentColor;
  color: var(--tenue);
}
.livello-socio { color: var(--accento); }
.livello-amministrazione { color: #2f6f8a; }

/* Lo schermo di accesso */
.entra { max-width: 22rem; margin: 3rem auto; }
.entra form { display: flex; flex-direction: column; gap: .9rem; }
.entra label { display: flex; flex-direction: column; gap: .3rem;
  font-size: .9rem; color: var(--tenue); }
.entra input {
  font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--bordo); border-radius: 6px;
  background: var(--carta); color: var(--inchiostro);
}
.entra input:focus { outline: 2px solid var(--accento); outline-offset: 1px; }
.entra button {
  font: inherit; font-weight: 600; padding: .6rem;
  background: var(--accento); color: var(--su-accento);
  border: none; border-radius: 6px; cursor: pointer;
}
.errore {
  padding: .7rem .9rem; border-radius: 6px; font-size: .95rem;
  border: 1px solid var(--allarme); color: var(--allarme);
}

.marchio {
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--inchiostro);
  display: flex; align-items: center; gap: .6rem;
}
/* Il marchio non si scurisce col modo chiaro: l'arancio e' quello, e un
   angolo arrotondato basta a farlo sedere accanto al testo. */
.marchio img { border-radius: 5px; display: block; }

/* La colonna non si stringe piu' a 54rem: un calendario di un mese per tutti
   i clienti ha bisogno dello schermo, e stringerlo qui significherebbe
   inventare due larghezze e sbagliarne una. Il testo lungo si stringe da se',
   riga per riga, con `max-width` sui paragrafi. */
/* La colonna ha un tetto. Non e' centrata: su uno schermo largo il testo
   parte da sinistra come tutto il resto dell'interfaccia, e non si sposta
   quando una pagina e' piu' stretta di un'altra. */
main { padding: 1.6rem 1.6rem 5rem; max-width: 84rem; }

h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 2.4rem 0 .4rem; }

.sottotitolo, .nota { color: var(--tenue); font-size: .94rem; }
.sottotitolo { margin: 0 0 1.6rem; max-width: 46rem; }
.piede-schermo { margin: 1.4rem 0 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  color: var(--tenue);
}

a { color: var(--accento); }

/* La barra della finzione di livello. Deliberatamente vistosa: e' l'unica
   parte dell'interfaccia che non deve mai sembrare normale. */
.finzione {
  background: repeating-linear-gradient(135deg,
    #f5d76e, #f5d76e 12px, #efc94c 12px, #efc94c 24px);
  color: #3a2f10;
  padding: .5rem 1.5rem;
  font-size: .92rem;
}
.finzione a { color: #3a2f10; margin-right: .5rem; }
.finzione .attuale {
  font-weight: 700; margin-right: .5rem;
  border-bottom: 2px solid #3a2f10;
}
.finzione .nota { color: #5c4d24; }

/* Le schede dei clienti. Una griglia e non un elenco: con quattro o cinque
   clienti un elenco a righe piene sprecherebbe tre quarti dello schermo, ed e'
   la prima pagina che si vede entrando. */
.schede {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  max-width: 62rem;
}
/* La scheda di un cliente: tre fasce separate da una riga.

   Le fasce rispondono a tre domande diverse — chi e', dove esce, quanto vale
   il lavoro che ci abbiamo fatto — e senza stacco si leggevano come un elenco
   unico di cose sciolte. La riga costa un pixel e fa il lavoro di un
   paragrafo. */
.scheda {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--bordo); background: var(--carta);
  text-decoration: none; color: var(--inchiostro);
}
.scheda:hover { border-color: var(--accento); }
.scheda strong { font-family: var(--titoli); font-size: 1.02rem; }

.testa-scheda {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.1rem;
}
.testa-scheda .volto { width: 2.4rem; height: 2.4rem; }
.testa-scheda .volto.iniziali { font-size: 1.1rem; }
.testa-scheda strong { flex: 1; min-width: 0; }

.fascia-scheda {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-top: 1px solid var(--bordo);
  font-size: .9rem; color: var(--tenue);
}
/* Il secondo elemento della fascia va a destra: e' il valore, e la fascia e'
   una riga di tabella senza tabella. */
.fascia-scheda > :last-child { margin-left: auto; color: var(--inchiostro); }
.fascia-scheda .canali { display: flex; gap: .4rem; align-items: center; }
.fascia-scheda .rete { width: 1.25rem; height: 1.25rem; }

.elenco { list-style: none; padding: 0; margin: 0; }
.elenco li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .8rem 1rem;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  margin-bottom: .5rem;
}
.elenco li a { font-weight: 600; text-decoration: none; }

.stato {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .15rem .5rem; border-radius: 99px; border: 1px solid var(--bordo);
  color: var(--tenue);
}
.stato-attivo { color: #2f7a4f; border-color: #2f7a4f55; }
.stato-prospect { color: var(--accento); border-color: currentColor; }

table.pillar { width: 100%; border-collapse: collapse; }
table.pillar th, table.pillar td {
  text-align: left; padding: .5rem .6rem;
  border-bottom: 1px solid var(--bordo);
  font-size: .96rem;
}
table.pillar th { font-size: .84rem; text-transform: uppercase; color: var(--tenue); }
table.pillar tfoot td { font-weight: 600; border-bottom: none; }

.peso { white-space: nowrap; }
.barra {
  display: inline-block; height: .55rem; width: var(--quota);
  max-width: 6rem; background: var(--accento); border-radius: 2px;
  margin-right: .5rem; vertical-align: baseline;
}
.rotto { color: var(--allarme); }

ul.vincoli { list-style: none; padding: 0; margin: 0; }
ul.vincoli li {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: .5rem;
}
ul.vincoli .intestazione {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  margin-bottom: .3rem;
}
ul.vincoli .origine {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue);
}
ul.vincoli .date { font-size: .86rem; color: var(--tenue); margin-left: auto; }
ul.vincoli p { margin: 0; font-size: .96rem; }

.negato, .attesa, .vuoto {
  padding: 1rem; border-radius: 8px; border: 1px solid var(--bordo);
  background: var(--carta); color: var(--tenue);
  /* Un messaggio corto non merita una fascia larga quanto lo schermo: la
     scatola finisce dove finisce la frase. */
  max-width: 46rem;
}
.negato { border-color: var(--allarme); color: var(--allarme); }

/* ------------------------------------------------ gli schermi operativi */

.tenue { color: var(--tenue); font-size: .92rem; }
.periodo, .quando { font-size: .9rem; color: var(--tenue); margin-left: auto; }
.obiettivo { font-size: 1rem; margin: 0 0 .3rem; }

/* Gli stati del giro editoriale. Solo quelli che vale la pena distinguere a
   colpo d'occhio: proposto chiede una decisione, rifiutato e' una porta
   chiusa. Gli altri restano neutri — colorare tutto e' non colorare niente. */
.stato-proposto { color: var(--accento); border-color: currentColor; }
.stato-rifiutato { color: var(--allarme); border-color: currentColor; }
.stato-pubblicato, .stato-completata { color: #2f7a4f; border-color: #2f7a4f55; }
.stato-in_corso, .stato-accettato { color: #2f6f8a; border-color: #2f6f8a55; }

/* Lo scarto: il verso conta piu' del numero, e si legge prima del segno. */
.sopra { color: #2f6f8a; }
.sotto { color: var(--allarme); }

ul.contenuti { list-style: none; padding: 0; margin: 0; }
.contenuto {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 8px; padding: .9rem 1rem; margin-bottom: .6rem;
}
/* Un contenuto che aspetta una decisione si vede da lontano: e' l'unica riga
   della pagina che chiede qualcosa a chi guarda. */
.contenuto-proposto { border-left: 3px solid var(--accento); }
.contenuto-rifiutato { opacity: .72; }
.contenuto .intestazione {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
}
.contenuto .attribuzione {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  margin: .4rem 0 .2rem;
}
.contenuto .ragione { margin: 0; font-size: .95rem; color: var(--tenue); }

.rifiuto {
  margin: .6rem 0 0; padding: .6rem .8rem; font-size: .94rem;
  border-left: 2px solid var(--allarme); background: var(--sfondo);
  border-radius: 0 6px 6px 0;
}
.rifiuto .nota { display: block; margin-top: .2rem; }

.decisione { margin-top: .8rem; display: flex; flex-wrap: wrap;
  gap: .6rem; align-items: flex-start; }
.decisione form { display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: flex-end; }
.decisione label { display: flex; flex-direction: column; gap: .25rem;
  font-size: .86rem; color: var(--tenue); }
.decisione select, .decisione input {
  font: inherit; font-size: .94rem; padding: .35rem .5rem;
  border: 1px solid var(--bordo); border-radius: 6px;
  background: var(--carta); color: var(--inchiostro); max-width: 24rem;
}
.decisione button {
  font: inherit; font-size: .92rem; font-weight: 600; padding: .4rem 1rem;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--bordo);
  background: var(--carta); color: var(--inchiostro);
}
.decisione .accetta { background: var(--accento); color: var(--su-accento);
  border: none; }
.decisione .rifiuta { border-color: var(--allarme); color: var(--allarme); }
.decisione details > summary {
  cursor: pointer; font-size: .92rem; color: var(--tenue);
  padding: .4rem .8rem; border: 1px solid var(--bordo); border-radius: 6px;
  list-style: none;
}
.decisione details[open] > summary { margin-bottom: .6rem; }

/* ------------------------------------------------------------ calendario */

/* La barra strumenti. Dove si e' nel tempo a sinistra, cosa si sta guardando
   a destra: le due mani fanno cose diverse, e mescolarle costringe a rileggere
   la riga a ogni sguardo. */
.attrezzi {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.attrezzi .gruppo { display: flex; }
.attrezzi .gruppo a, .attrezzi .gruppo .attuale {
  font-size: .88rem; padding: .3rem .8rem; border: 1px solid var(--bordo);
  text-decoration: none; color: var(--tenue); line-height: 1.5;
}
.attrezzi .gruppo a:hover { color: var(--accento); border-color: var(--accento); }
.attrezzi .gruppo > :first-child { border-radius: 7px 0 0 7px; }
.attrezzi .gruppo > :last-child { border-radius: 0 7px 7px 0; }
.attrezzi .gruppo > * + * { margin-left: -1px; }
.attrezzi .viste .attuale {
  background: var(--accento); color: var(--su-accento);
  border-color: var(--accento); position: relative;
}
.attrezzi .scorri a { font-size: 1rem; padding: .18rem .7rem; }
.quando-siamo { font-size: 1rem; min-width: 10rem; }
/* L'ambito e' l'unica cosa che si legge a destra, e non e' un bottone: dice
   cosa si sta guardando adesso. Cambiarlo si fa dalla barra o dalla testata. */
.ambito-cliente {
  margin-left: auto; font-size: .84rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accento);
}

/* Griglia e cassetto affiancati: chi ha contenuti senza data li prende da
   destra e li posa a sinistra senza cambiare pagina. Prima il cassetto stava
   sotto la griglia, cioe' fuori schermo proprio mentre serviva. */
.tavolo { display: flex; gap: 1rem; align-items: flex-start; }
.griglia-calendario { flex: 1 1 0; min-width: 0; }

.cassetto {
  flex: 0 0 17rem; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 10px;
}
.cassetto > summary {
  cursor: pointer; list-style: none; padding: .7rem .9rem;
  font-size: .88rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tenue);
  display: flex; align-items: center; gap: .5rem;
}
.cassetto > summary::-webkit-details-marker { display: none; }
.cassetto[open] > summary { border-bottom: 1px solid var(--bordo); }
.cassetto .conta {
  margin-left: auto; font-size: .82rem; letter-spacing: 0;
  padding: .05rem .5rem; border-radius: 99px;
  background: var(--accento); color: var(--su-accento);
}
.dentro-cassetto { padding: .8rem .9rem; }
.dentro-cassetto .nota { margin: 0 0 .7rem; }
.dentro-cassetto .nota:last-child { margin: .8rem 0 0; }

/* Sotto i 62rem il cassetto va sotto: affiancato lascerebbe alla griglia meno
   di quanto serve a sette colonne. */
@media (max-width: 62rem) {
  .tavolo { flex-direction: column; }
  .cassetto { flex: none; width: 100%; }
}

table.calendario { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.calendario th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); text-align: left; padding: .3rem .4rem;
}
.giorno {
  vertical-align: top; height: 6.5rem; padding: .3rem;
  border: 1px solid var(--bordo); background: var(--carta);
}
/* I giorni di bordo ci sono perche' la settimana comincia di lunedi': un
   contenuto del 31 luglio non deve sparire guardando agosto. Restano visibili
   ma spenti, o si scambiano per giorni di questo mese. */
.fuorimese { background: var(--sfondo); }
.fuorimese .numero { opacity: .4; }
.giorno .numero { font-size: .84rem; color: var(--tenue); margin-bottom: .2rem; }
/* Il bersaglio del rilascio: senza, non si sa dove si sta per posare. */
.giorno.bersaglio { outline: 2px solid var(--accento); outline-offset: -2px; }

.da-collocare {
  height: auto; min-height: 4rem; border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem;
}

.gettone {
  display: block; margin-bottom: .25rem; padding: .25rem .35rem;
  border: 1px solid var(--bordo); border-left: 3px solid var(--tenue);
  border-radius: 4px; background: var(--sfondo); font-size: .84rem;
  cursor: grab;
}
.gettone.fermo { cursor: default; opacity: .8; }
.gettone.in-volo { opacity: .45; }
.gettone-proposto { border-left-color: var(--accento); }
.gettone-rifiutato { border-left-color: var(--allarme); opacity: .55; }
.gettone-pubblicato { border-left-color: #2f7a4f; }
.gettone-accettato { border-left-color: #2f6f8a; }
/* `min-width: 0` non e' un ritocco: un elemento flex ha `min-width: auto` e si
   rifiuta di rimpicciolirsi sotto il suo contenuto, quindi `text-overflow`
   non scatta mai e un titolo lungo esce dalla casella invece di troncarsi.
   Serve sul contenitore e sull'elemento, perche' la catena si spezza al primo
   anello che non lo dichiara. */
.gettone { min-width: 0; overflow: hidden; }
.gettone .etichetta {
  display: flex; align-items: center; gap: .3rem; min-width: 0;
}
.gettone .nome {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1 1 0; min-width: 0;
}
/* Le etichette stanno sotto il titolo e non accanto: in una casella di mese
   larga otto caratteri, tre cose sulla stessa riga significa che due
   scompaiono e la terza esce. */
.gettone .righello {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  margin-top: .15rem; min-width: 0;
}
.gettone .stato { font-size: .76rem; padding: 0 .3rem; border: none;
  color: var(--tenue); }
/* Ultima difesa: la cella non lascia uscire niente, qualunque cosa ci finisca
   dentro — un titolo senza spazi non ha punti dove andare a capo. */
.giorno { overflow: hidden; }
.giorno .gettone, .giorno .gettone * { overflow-wrap: anywhere; }

/* Il pillar come sigla, non come colore.
   C'era un pallino colorato, ed e' stato tolto dopo aver fatto i conti. Il
   colore categorico regge **tre** valori in una forma dove due qualsiasi
   possono trovarsi accanto — e una casella di calendario lo e'. I clienti
   hanno quattro pillar a testa, e il calendario di tutti li mette insieme:
   otto e piu'. Nessuna palette porta quell'identita', e una mappa di colori
   fissa non sopravvivrebbe comunque all'ingresso del terzo cliente.
   La sigla la porta sempre, e lascia l'arancio a fare una cosa sola: dire
   cosa aspetta una decisione. */
/* `.sigla-pillar` e non `.pillar`: la pastiglia e la tabella dei pesi si
   chiamavano uguale, e `table.pillar` prendeva `overflow: hidden`,
   `white-space: nowrap` e un bordo arrotondato pensati per un'etichetta larga
   otto caratteri. Risultato: sulla scheda cliente la prima colonna si leggeva
   «..AR» invece di «PILLAR». E' la terza collisione di nome in questo foglio —
   dopo `.nome` e `.pallino` — e la lezione e' sempre quella: una classe che
   descrive una **cosa** non deve chiamarsi come il concetto che quella cosa
   rappresenta, o due cose diverse la reclamano. */
.sigla-pillar {
  display: inline-block;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .05rem .3rem; border-radius: 3px;
  border: 1px solid var(--bordo); color: var(--tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; min-width: 0;
}

.gettone details > summary {
  cursor: pointer; color: var(--tenue); font-size: .8rem; list-style: none;
}
.gettone details input, .gettone details button {
  font: inherit; font-size: .8rem; margin-top: .2rem; width: 100%;
  padding: .15rem .25rem; border: 1px solid var(--bordo); border-radius: 4px;
  background: var(--carta); color: var(--inchiostro);
}
.gettone details button { cursor: pointer; font-weight: 600; }
.gettone .nome { text-decoration: none; color: var(--inchiostro); }
.gettone .nome:hover { color: var(--accento); text-decoration: underline; }
/* Su «tutti i clienti» e' l'informazione che distingue due gettoni identici. */
.gettone .cliente {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accento);
}

/* Con meno colonne c'e' spazio, e le caselle devono usarlo: una settimana
   disegnata come una riga di un mese sprecherebbe due terzi dello schermo. */
.vista-settimana .giorno { height: 22rem; }
.vista-giorno .giorno { height: auto; min-height: 12rem; }
.e-oggi { box-shadow: inset 0 3px 0 var(--accento); }

/* La maschera del contenuto */

/* Il quadro in sola lettura sopra i campi: si distingue perche' non si tocca,
   e il bordo acceso a sinistra e' lo stesso segno che sul calendario dice
   «questo chiede qualcosa». Qui dice «questo e' il metro». */
.quadro-strategia {
  max-width: 40rem; margin: 0 0 1.4rem; padding: .9rem 1.1rem;
  border-radius: 8px; background: var(--sfondo);
  border: 1px solid var(--bordo); border-left: 3px solid var(--accento);
}
.quadro-strategia .titoletto { margin: 0 0 .3rem; }
.quadro-strategia .obiettivo { margin: 0 0 .3rem; font-size: .98rem; }
.quadro-strategia p:last-child { margin-bottom: 0; }

.maschera { display: flex; flex-direction: column; gap: 1.2rem;
  max-width: 40rem; }
.maschera > label { display: flex; flex-direction: column; gap: .3rem;
  font-size: .88rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); }
.maschera input, .maschera select, .maschera textarea {
  font: inherit; padding: .5rem .6rem; text-transform: none;
  letter-spacing: normal; color: var(--inchiostro);
  border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta);
}
.maschera input:disabled { opacity: .6; cursor: not-allowed; }
.maschera textarea { resize: vertical; }
.maschera .aiuto {
  font-size: .88rem; text-transform: none; letter-spacing: normal;
  color: var(--tenue);
}
.maschera .azioni { display: flex; align-items: center; gap: 1rem; }
/* La maschera in sovrapposizione. Il calendario resta dietro, visibile e
   sfocato: chi corregge un contenuto lo fa guardando i giorni intorno, ed e'
   la ragione per cui l'ha aperto da li' invece che dalla scheda del periodo. */
dialog#maschera {
  width: min(46rem, 92vw); max-height: 88vh; overflow: auto;
  padding: 2rem 2.2rem; border: 1px solid var(--bordo); border-radius: 12px;
  background: var(--carta); color: var(--inchiostro);
  box-shadow: 0 24px 60px #0009;
}
dialog#maschera::backdrop { background: #0a0a0acc; backdrop-filter: blur(3px); }
dialog#maschera h1 { font-size: 1.35rem; padding-right: 2rem; }
dialog#maschera .chiudi {
  float: right; margin: -.6rem -.8rem 0 0;
  font: inherit; font-size: 1.5rem; line-height: 1;
  background: none; border: none; color: var(--tenue); cursor: pointer;
}
dialog#maschera .chiudi:hover { color: var(--accento); }
.caricamento { color: var(--tenue); }

.maschera .azioni button {
  font: inherit; font-weight: 600; padding: .55rem 1.6rem;
  background: var(--accento); color: var(--su-accento); border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- rapporto */

/* Cio' che il rapporto non puo' dire, in cima e non in fondo: una
   dichiarazione in coda la legge chi e' gia' arrivato a una conclusione.
   Il bordo e' quello dell'attesa e non dell'allarme — non e' un guasto, e'
   un perimetro. */
.silenzi {
  max-width: 52rem; margin: 0 0 1.6rem; padding: .9rem 1.1rem;
  border: 1px dashed var(--bordo); border-radius: 8px; background: var(--carta);
}
.silenzi p { margin: .4rem 0 0; font-size: .94rem; color: var(--tenue); }
.silenzi p strong { color: var(--inchiostro); }
.silenzi .titoletto { margin: 0; }

.cifre { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.4rem; }
.cifra {
  flex: 1 1 9rem; padding: .9rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--bordo); background: var(--carta);
  display: flex; flex-direction: column; gap: .15rem;
}
.cifra .numero {
  font-family: var(--titoli); font-size: 1.7rem; line-height: 1.1;
  color: var(--inchiostro);
}
.cifra .etichetta-cifra { font-size: .86rem; color: var(--tenue); }
.scarto-peggiore { flex: 2 1 18rem; border-left: 3px solid var(--accento); }

/* La barra del reale accanto a quella dell'atteso: due tinte diverse, perche'
   due barre uguali una sopra l'altra si leggono come una sola lunga. */
table.confronto .barra.reale { background: var(--tenue); }

ul.motivi { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 52rem; }
ul.motivi li {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: .5rem;
}
ul.motivi .intestazione {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
ul.motivi p { margin: .35rem 0 0; font-size: .95rem; color: var(--tenue); }
.conta-motivo {
  font-family: var(--titoli); font-size: 1.05rem; min-width: 1.6rem;
  color: var(--accento);
}
ul.motivi summary { cursor: pointer; font-size: .88rem; color: var(--tenue);
  margin-top: .5rem; }
ul.note-rifiuto { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .94rem;
  color: var(--tenue); }

.blocco-periodo {
  border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--carta); padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.intestazione-blocco {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
}
.intestazione-blocco h3 { margin: 0; font-size: 1.02rem; }
.intestazione-blocco h3 a { text-decoration: none; }
.intestazione-blocco .cliente {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accento);
}
.stati-riga { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.blocco-periodo table.pillar { margin-top: .9rem; }
.blocco-periodo .attesa { margin-top: .9rem; font-size: .94rem; }

/* ---------------------------------------------------------------- proposte */

.apertura {
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta);
  margin: 0 0 1.6rem; max-width: 46rem;
}
.apertura > summary {
  cursor: pointer; padding: .8rem 1.1rem; font-weight: 600; font-size: .95rem;
  list-style: none;
}
.apertura > summary::-webkit-details-marker { display: none; }
.apertura > summary::before { content: "+ "; color: var(--accento); }
.apertura[open] > summary { border-bottom: 1px solid var(--bordo); }
.apertura[open] > summary::before { content: "− "; }
.apertura .maschera { padding: 1.1rem; }

ul.proposte-elenco li { display: block; }
ul.proposte-elenco .intestazione {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
}
ul.proposte-elenco .ragione { margin: .4rem 0 .3rem; font-size: .95rem;
  color: var(--tenue); }
.firme-riga { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0;
  font-size: .88rem; align-items: baseline; }
.conta-firme { color: var(--inchiostro); }
.conta-contrari { color: var(--allarme); }
li.pronta { border-left: 3px solid #3f9c68; }
.pronta-segno { color: #3f9c68; border-color: #3f9c6855; }
.stato.canon { color: var(--accento); border-color: currentColor; }
.stato.riservata { color: #2f6f8a; border-color: #2f6f8a55; }

/* Il testo proposto si legge, non si scorre di traverso: e' cio' su cui una
   persona sta per firmare. Va a capo e non taglia. */
.testo-proposto {
  max-width: 52rem; padding: 1rem 1.2rem; border-radius: 8px;
  background: var(--carta); border: 1px solid var(--bordo);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

ul.firme { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: 46rem; }
ul.firme li {
  padding: .7rem 1rem; margin-bottom: .5rem; border-radius: 8px;
  background: var(--carta); border: 1px solid var(--bordo);
  border-left: 3px solid var(--tenue);
}
ul.firme .intestazione { display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: baseline; font-size: .94rem; }
ul.firme p { margin: .35rem 0 0; font-size: .95rem; color: var(--tenue); }
.firma-approva { border-left-color: #3f9c68; }
.firma-rifiuta { border-left-color: var(--allarme); }

.firma-modulo .azioni button.contrario {
  background: none; border: 1px solid var(--allarme); color: var(--allarme);
}

/* Dove vale una regola: due scelte, e sotto ciascuna il suo campo. */
fieldset.dove {
  border: 1px solid var(--bordo); border-radius: 8px; padding: .9rem 1.1rem;
  margin: 0; display: flex; flex-direction: column; gap: .5rem;
}
fieldset.dove legend {
  font-size: .88rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); padding: 0 .4rem;
}
.scelta { display: flex; align-items: center; gap: .5rem; font-size: .95rem;
  text-transform: none; letter-spacing: normal; color: var(--inchiostro); }
.scelta input { accent-color: var(--pieno); }
.dove .annidato { display: flex; flex-direction: column; gap: .3rem;
  margin: -.2rem 0 .4rem 1.6rem; }
.dove .annidato[hidden] { display: none; }
.dove select { max-width: 26rem; }

.azioni button.secondario {
  background: none; border: 1px solid var(--bordo); color: var(--inchiostro);
  font-weight: 600;
}
.azioni button.secondario:hover { border-color: var(--accento);
  color: var(--accento); }

/* ------------------------------------------------------------- scrivania */

ul.lavori { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 52rem; }
.lavoro {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 1rem; margin-bottom: .5rem; border-radius: 8px;
  background: var(--carta); border: 1px solid var(--bordo);
  border-left: 3px solid var(--bordo);
}
/* Il ritardo e' l'unica etichetta di questa schermata che accusa qualcuno, e
   si vede prima di leggere: il colore sul bordo, non solo sulla data. */
.lavoro.in-ritardo { border-left-color: var(--allarme); }
.lavoro.stato-in-corso { border-left-color: var(--accento); }
.lavoro.stato-bloccata { border-left-color: #2f6f8a; }
.corpo-lavoro { flex: 1 1 0; min-width: 0; }
.corpo-lavoro .intestazione { display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: baseline; }
.corpo-lavoro p { margin: .25rem 0 0; font-size: .94rem; }
.priorita-alta { color: var(--accento); border-color: currentColor; }

/* La spunta e' grande come un bersaglio, non come un'icona: e' l'unica cosa
   che si preme da qui, e si preme di fretta. */
.spunta button {
  font: inherit; font-size: 1rem; line-height: 1;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--bordo); background: none; color: var(--tenue);
  cursor: pointer;
}
.spunta button:hover { border-color: #3f9c68; color: #3f9c68; }

ul.in-uscita li { gap: .8rem; }
.giorno-uscita {
  font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--tenue);
  min-width: 3rem;
}

/* I riquadri della scrivania.

   Non una colonna di fasce larghe e basse: quella forma costringe l'occhio a
   scorrere per trovare la sezione che serve, e con quattro sezioni si scorre
   ogni volta. Riquadri affiancati stanno tutti sopra la piega, e la griglia
   li dispone da se' senza che nessuno decida una larghezza a mano. */
.riquadri {
  display: grid; gap: .9rem; align-items: start; justify-content: start;
  /* **Le colonne hanno un tetto, non solo un minimo.** Con `1fr` e una
     sezione sola, la griglia allargava quel riquadro su tutto lo schermo: tre
     righe corte dentro una fascia larga un metro e mezzo, cioe' l'aria
     sbagliata nel posto sbagliato. Una colonna che non supera 27rem tiene la
     riga a una lunghezza leggibile e impacchetta a sinistra invece di
     stiracchiarsi. */
  grid-template-columns: repeat(auto-fill, minmax(21rem, 27rem));
}
.riquadro {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 12px; overflow: hidden; min-width: 0;
}
/* Le attivita' proprie hanno la riga piu' lunga — titolo, contenuto, cliente,
   scadenza — e prendono due colonne quando ci stanno. */
/* Le attivita' proprie hanno la riga piu' lunga — titolo, contenuto, cliente,
   scadenza — e prendono due colonne quando ce ne sono due. Sotto, no: `span 2`
   con una colonna sola non fa danni, ma tenerlo dietro la media query dice
   quando serve. */
@media (min-width: 46rem) { .riquadro.largo { grid-column: span 2; } }

.riquadro h2 {
  margin: 0; padding: .8rem 1.1rem; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: .5rem;
}
.riquadro h2 .conta {
  margin-left: auto; font-size: .82rem; letter-spacing: 0;
  padding: .05rem .5rem; border-radius: 99px;
  background: var(--sfondo); color: var(--tenue);
}
/* Un riquadro non cresce all'infinito: oltre una certa altezza scorre dentro
   se stesso, cosi' una coda lunga non spinge le altre fuori schermo. */
.dentro-riquadro { padding: .9rem 1.1rem; max-height: 26rem; overflow-y: auto; }
.dentro-riquadro > :first-child { margin-top: 0; }
.dentro-riquadro > :last-child { margin-bottom: 0; }
.dentro-riquadro .nota { margin: 0 0 .7rem; }
/* Dentro un riquadro le righe non hanno piu' il fondo proprio: sarebbero una
   carta dentro una carta, e il bordo doppio fa sembrare tutto piu' stretto. */
.riquadro .lavoro, .riquadro .elenco li {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--bordo);
  padding-left: 0; padding-right: 0; margin-bottom: 0;
}
.riquadro .lavoro { border-left: 3px solid transparent; padding-left: .6rem; }
.riquadro .lavoro.in-ritardo { border-left-color: var(--allarme); }
.riquadro .lavoro.stato-in-corso { border-left-color: var(--accento); }
.riquadro .lavoro.stato-bloccata { border-left-color: #2f6f8a; }
.riquadro .elenco li:last-child, .riquadro .lavoro:last-child {
  border-bottom: none; padding-bottom: 0;
}
.riquadro .elenco li { flex-wrap: wrap; }

/* Un'attivita' gia' fatta tiene il posto della spunta senza offrirla: senza,
   le righe si disallineano e l'occhio perde la colonna. */
.gia-fatta {
  width: 1.9rem; height: 1.9rem; display: inline-flex;
  align-items: center; justify-content: center; color: #3f9c68;
}
.lavoro.stato-fatta { opacity: .6; }
.lavoro.stato-fatta strong { text-decoration: line-through; }

/* Il gettone, riletto perche' non si leggeva.

   Tre cose cambiano insieme, ed e' la stessa correzione: **stato, titolo e
   cliente devono vedersi a colpo d'occhio**. Lo stato era in coda alla riga
   delle etichette, tenue come tutto il resto, e si leggeva per ultimo — mentre
   e' la prima cosa che si cerca guardando un calendario. */
.gettone { padding: .45rem .55rem; font-size: .88rem; }
.gettone .nome { font-size: .95rem; }
.gettone .righello { gap: .35rem; margin-top: .3rem; }

/* Uno stato pieno: fondo tinto invece di un bordo sottile. Il contrasto e'
   calcolato sul fondo che ognuno si porta, non stimato. */
.stato.pieno {
  border: none; font-weight: 600; padding: .1rem .45rem;
  background: color-mix(in oklab, currentColor 20%, transparent);
}
.gettone .stato.pieno { font-size: .74rem; }

/* I marchi delle reti: quelli veri, a colori, e per questo non seguono il
   tema. Prima erano tre segni monocromatici che prendevano `currentColor` —
   comodo, ma erano disegni nostri che somigliavano ai marchi senza esserlo.
   Un marchio si usa com'e' o non si usa.

   `object-fit: contain` perche' uno dei tre non e' quadrato: Google Business
   e' piu' largo che alto, e senza questa riga arriverebbe stirato. */
.rete {
  width: 1.05rem; height: 1.05rem; flex: none;
  object-fit: contain; vertical-align: -.15em;
}

/* La barra delle azioni: cosa si puo' fare da questo schermo.

   Sotto la testata e sopra il contenuto, sempre. Non sono i bottoni della
   testata, che portano altrove: queste fanno una cosa, e un posto fisso conta
   piu' di quante ne contiene — finche' ogni schermo le mette dove capita si
   cercano, da qui in poi si sanno. */
.azioni-vault {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .8rem 1.6rem 0;
}
.azioni-vault a {
  font-size: .9rem; padding: .38rem .9rem; border-radius: 99px;
  border: 1px solid var(--bordo); background: var(--carta);
  color: var(--inchiostro); text-decoration: none;
}
.azioni-vault a::before { content: "+ "; color: var(--accento); font-weight: 600; }
.azioni-vault a:hover { border-color: var(--accento); color: var(--accento); }

/* Una riga che si apre sopra la pagina lo deve far capire prima del clic. */
[data-sopra] { cursor: pointer; }
[data-sopra]:hover { background: color-mix(in oklab, var(--pieno) 7%, transparent); }
.gettone[data-sopra] { cursor: grab; }


/* ------------------------------------------------- il colore dice una cosa

   L'arancio era diventato il colore di **ogni** collegamento, e in un elenco
   di contenuti significava tre titoli arancioni in fila che gridano senza dire
   niente. E' la stessa disciplina gia' applicata ai pillar: un colore che
   marca tutto non marca niente.

   Da qui in poi l'arancio dice **una cosa sola** — questo si puo' fare, o
   questo aspetta te. Un titolo dentro un elenco e' inchiostro, e si scopre
   collegamento passandoci sopra. */
.elenco li a, .lavoro a, .riquadro a, ul.motivi a, .scheda,
.contenuto .intestazione a, .intestazione-blocco a {
  color: var(--inchiostro); text-decoration: none;
}
.elenco li a:hover, .lavoro a:hover, .riquadro a:hover,
.contenuto .intestazione a:hover, .intestazione-blocco a:hover {
  color: var(--accento); text-decoration: underline;
}

/* Le date incolonnano: cifre a larghezza fissa, o «04/08» e «10/08» ballano. */
.giorno-uscita, .quando, .periodo { font-variant-numeric: tabular-nums; }

/* Un po' di respiro fra le righe di un riquadro, e una separazione piu' tenue:
   la linea piena a ogni riga faceva sembrare l'elenco una tabella. */
.riquadro .elenco li, .riquadro .lavoro {
  padding-top: .55rem; padding-bottom: .55rem;
  border-bottom-color: color-mix(in oklab, var(--bordo) 60%, transparent);
}
.riquadro .elenco li { gap: .7rem; align-items: center; }

/* La scrivania non finisce con un muro di niente: il riquadro dell'agente sta
   nella stessa colonna degli altri, non largo la meta' a caso. */
.silenzi { max-width: 46rem; margin-top: 2rem; }


/* ------------------------------------------------------ la passata visiva

   Quattro cose, tutte piccole, tutte nella stessa direzione: far sembrare le
   superfici superfici invece di rettangoli, e togliere il rumore dove non dice
   niente. */

/* Una carta si stacca dal fondo per un filo di luce in alto, non per un'ombra
   pesante: su un fondo quasi nero un'ombra non si vede, un bordo chiaro sopra
   si'. Nel modo chiaro il rapporto si inverte e comanda l'ombra. */
.riquadro, .scheda, .cassetto, .apertura, .blocco-periodo, .cifra {
  border-radius: var(--raggio-grande);
  box-shadow: inset 0 1px 0 #ffffff0d;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .riquadro, :root:not([data-tema]) .scheda,
  :root:not([data-tema]) .cassetto, :root:not([data-tema]) .apertura,
  :root:not([data-tema]) .blocco-periodo, :root:not([data-tema]) .cifra {
    box-shadow: 0 1px 2px #0000000a, 0 6px 16px #00000008;
  }
}
:root[data-tema="chiaro"] .riquadro, :root[data-tema="chiaro"] .scheda,
:root[data-tema="chiaro"] .cassetto, :root[data-tema="chiaro"] .apertura,
:root[data-tema="chiaro"] .blocco-periodo, :root[data-tema="chiaro"] .cifra {
  box-shadow: 0 1px 2px #0000000a, 0 6px 16px #00000008;
}

/* I raggi si allineano ai tre gradini. */
.stato, .livello, .pillar, .barra { border-radius: 99px; }
.bottone, .maschera input, .maschera select, .maschera textarea,
.entra input, .entra button, .decisione select, .decisione input,
.decisione button, .decisione details > summary { border-radius: var(--raggio); }
.gettone { border-radius: var(--raggio-piccolo); }
dialog#maschera { border-radius: var(--raggio-grande); }

/* «Niente» dentro un riquadro: una riga tenue e centrata, non una scatola
   dentro una scatola. Un riquadro vuoto deve leggersi come una risposta, non
   come un errore di caricamento. */
.niente {
  margin: 0; padding: 1.1rem .2rem; text-align: center;
  color: var(--tenue); font-size: .92rem;
}

/* La riga di «cosa esce»: la data e' una pastiglia, cosi' la colonna si legge
   scendendo invece di cercare due cifre in mezzo al testo. */
.giorno-uscita {
  padding: .15rem .5rem; border-radius: 99px;
  background: var(--sfondo); border: 1px solid var(--bordo);
  font-size: .84rem; text-align: center;
}
.riquadro .in-uscita li { gap: .6rem; }

/* Il polso della giornata e' una riga, non una scatola. */
.polso { margin: 0 0 1.2rem; }

/* Il titolo di un riquadro: meno maiuscoletto grigio, piu' inchiostro. Erano
   quattro intestazioni tutte uguali e tutte tenui, quindi nessuna guidava. */
.riquadro h2 {
  color: var(--inchiostro); font-size: .78rem; letter-spacing: .09em;
  background: color-mix(in oklab, var(--sfondo) 55%, transparent);
}

/* Le reti su una riga loro, sotto le etichette. Tre icone accanto a
   «accettato» non ci stanno in una casella di mese: la terza andava a capo da
   sola, e due sopra e una sotto si leggono come due cose diverse. */
.gettone .canali {
  display: flex; gap: .3rem; margin-top: .25rem; align-items: center;
}

/* La pastiglia del «quante cose aspettano»: l'unica cosa arancione di una
   scheda cliente, perche' e' il motivo per cui la guarderesti prima di
   un'altra. Rossa quando dentro c'e' del ritardo — il ritardo e' l'unica
   etichetta di questa interfaccia che accusa qualcuno. */
.conta-aspetta {
  margin-left: auto; font-family: var(--titoli); font-size: .86rem;
  min-width: 1.7rem; padding: .1rem .5rem; border-radius: 99px;
  text-align: center;
  background: var(--accento); color: var(--su-accento);
}
.conta-aspetta.urgente { background: var(--allarme); color: var(--sfondo); }
.indice { font-size: .9rem; }
.indice strong { font-family: var(--titoli); font-size: 1.15rem; }

/* Il cruscotto del cliente: tre o quattro numeri che rispondono a «come sta»
   prima che a «cosa dice la strategia». In cima e non in fondo, perche' e' la
   domanda con cui si apre questa pagina. */
.cruscotto {
  display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .8rem;
  max-width: 62rem;
}
.cruscotto .cifra { flex: 1 1 11rem; }
.canali-cifra { display: flex; gap: .45rem; align-items: center;
  min-height: 1.9rem; }
.canali-cifra .rete { width: 1.5rem; height: 1.5rem; }

ul.lacune li { flex-direction: column; align-items: flex-start; gap: .2rem; }
ul.lacune li p { margin: 0; font-size: .93rem; }
ul.lacune .cliente { font-size: .76rem; }

/* Le misure delle piattaforme: tre elenchi e non un totale. Sommare follower
   e visualizzazioni di una scheda darebbe un numero che non significa niente
   e sembrerebbe autorevole. */
.misure {
  display: grid; gap: .9rem; margin: 0 0 .6rem; max-width: 62rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 20rem));
}
.rete-misure {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); padding: .9rem 1.1rem;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.rete-misure h3 {
  margin: 0 0 .6rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tenue);
  display: flex; align-items: center; gap: .45rem;
}
.rete-misure ul { list-style: none; margin: 0; padding: 0; }
.rete-misure li {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .3rem 0;
}
.rete-misure .valore {
  font-family: var(--titoli); font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.rete-misure .delta { font-size: .86rem; font-variant-numeric: tabular-nums; }
.rete-misure .quale { flex: 1 0 100%; font-size: .84rem; color: var(--tenue); }