/* Il foglio di stile di CiaoDrop.
   Stava dentro index.html; e uscito da li quando la console di
   piattaforma ha preso un indirizzo suo (/cmd): due pagine che si
   copiassero i colori a mano finirebbero per avere due blu diversi. */
:root{
  --paper:#F4F6FA; --card:#FFFFFF;
  --ink:#101A2B; --ink-2:#4C5B72; --ink-3:#7C8A9E;
  --rule:#D8E0EC; --rule-soft:#EAEFF6;
  --accent:#0071FE; --accent-ink:#FFFFFF; --accent-soft:#E3EEFF;
  --az-soft:#C7DCFF; --az-ink:#0B4EA6;   /* lo spazio: piu carico */
  /* «Al volo»: il vassoio dove le cose arrivano. Caldo di proposito —
     l'azzurro del tocco ci si stacca sopra, un pastello azzurro no. */
  --volo-soft:#FBF0E3;
  --ok:#1F7A4D; --ok-soft:#E2F1E9;
  --warn:#A8650F; --warn-soft:#F8EEDF;
  --err:#B3261E; --err-soft:#FBE9E7;
  --shadow:0 1px 2px rgba(16,26,43,.06),0 8px 24px -12px rgba(16,26,43,.18);
  --bar:rgba(244,246,250,.93);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0B1220; --card:#141D2E;
  --ink:#E8EFF9; --ink-2:#A2B2C8; --ink-3:#71809A;
  --rule:#26324A; --rule-soft:#1C2536;
  --accent:#5CA3FF; --accent-ink:#08121F; --accent-soft:#17243B;
  --az-soft:#1F3358; --az-ink:#9BC8FF;
  --volo-soft:#26252E;
  --ok:#5CC28D; --ok-soft:#1C3529;
  --warn:#E0A860; --warn-soft:#3A2C18;
  --err:#F2B8B5; --err-soft:#3B1F1D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --bar:rgba(11,18,32,.93);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0B1220; --card:#141D2E;
  --ink:#E8EFF9; --ink-2:#A2B2C8; --ink-3:#71809A;
  --rule:#26324A; --rule-soft:#1C2536;
  --accent:#5CA3FF; --accent-ink:#08121F; --accent-soft:#17243B;
  --az-soft:#1F3358; --az-ink:#9BC8FF;
  --volo-soft:#26252E;
  --ok:#5CC28D; --ok-soft:#1C3529;
  --warn:#E0A860; --warn-soft:#3A2C18;
  --err:#F2B8B5; --err-soft:#3B1F1D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --bar:rgba(11,18,32,.93);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:28px;
}
body.conbarra{padding-bottom:104px}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:580px;margin:0 auto;padding:16px 16px 0;display:flex;flex-direction:column;gap:16px}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* barra utente */
/* Un po' d'aria sopra il marchio: incollato al bordo dello schermo — o alla
   barra del browser — la riga sembrava tagliata. Sta sul contenitore e non
   dentro la riga, cosi il marchio e i tasti restano centrati fra loro.
   La tacca del telefono si somma: da app installata la riga ci finirebbe sotto. */
.topbar{border-bottom:1px solid var(--rule);background:var(--card);
  padding-top:calc(7px + env(safe-area-inset-top,0px))}
.topbar-in{max-width:580px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;gap:10px}
.brand{flex:0 0 auto;font-size:17px;margin-right:auto}
/* Il marchio e il file originale. Due versioni perche «ciao» e nero:
   su fondo scuro sparirebbe, quindi la si scambia. */
.marchio{display:inline-flex;align-items:center}
.marchio img{display:block;height:1.55em;width:auto;flex:none}  /* mai schiacciato */
.marchio .scuro{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marchio .chiaro{display:none}
:root:not([data-theme="light"]) .marchio .scuro{display:block}}
:root[data-theme="dark"] .marchio .chiaro{display:none}
:root[data-theme="dark"] .marchio .scuro{display:block}
.who{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.link{appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--accent);padding:4px 2px}
.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h1{margin:0;font-size:clamp(24px,6.4vw,30px);font-weight:700;letter-spacing:-.021em;line-height:1.09;text-wrap:balance}
h1 .suffix{font-weight:500;color:var(--ink-2)}
.sub{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.head-list{display:flex;flex-direction:column;gap:7px}
.head-det{display:flex;flex-direction:column;gap:12px}
.det-top{display:flex;align-items:flex-start;gap:13px}
.det-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.back{align-self:flex-start;appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--accent);padding:5px 8px 5px 0;display:inline-flex;align-items:center;gap:5px}
.back svg{width:14px;height:14px}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.chips-riga{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.chip--az{background:var(--az-soft);color:var(--az-ink)}
.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.av{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:700}
.av--az{border-radius:12px;background:var(--az-soft);color:var(--az-ink)}
.av--sm{width:38px;height:38px;font-size:13px}

.cerca{width:100%;appearance:none;font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:0 14px;min-height:46px}
.cerca::placeholder{color:var(--ink-3)}
/* la crocetta dentro una casella: cancellare a mano un nome col numero
   attaccato sono dieci battute all'indietro */
/* La casella a pastiglie: il riquadro e il campo, ma dentro ci stanno anche
   i pezzi gia riconosciuti. Il bordo lo disegna il contenitore, non l'input,
   che qui dentro resta nudo. */
.campo-pil{position:relative;flex:1;min-width:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px;padding:6px 42px 6px 9px;min-height:46px;
  background:var(--card);border:1px solid var(--rule);border-radius:11px}
.campo-pil:focus-within{outline:2px solid var(--accent);outline-offset:-1px;
  border-color:transparent}
.campo-pil .inp{flex:1 1 110px;min-width:0;width:auto;border:0;background:none;
  padding:0 2px;min-height:32px;border-radius:0}
.campo-pil .inp:focus{outline:0}
.campo-pil .x{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;
  background:none;color:var(--ink-3);font-size:19px;line-height:1;cursor:pointer;padding:0}
.campo-pil .x:hover{background:var(--rule-soft);color:var(--ink)}
.pil-zona{display:contents}
.pil{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  font-size:13px;font-weight:600;padding:4px 3px 4px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);line-height:1.3}
/* tre colori, tre cose diverse: chi e, il telefono, la posta */
.pil--tel{background:var(--ok-soft);color:var(--ok)}
.pil--mail{background:var(--az-soft);color:var(--az-ink)}
.pil-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pil-i{display:flex;flex:none}
.pil-i svg{width:13px;height:13px;display:block}
.pil-x{appearance:none;border:0;background:none;color:inherit;cursor:pointer;
  width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:15px;line-height:1;padding:0;opacity:.6;font-family:inherit}
.pil-x:hover{opacity:1;background:rgba(16,26,43,.1)}
.cerca:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

.gruppo{display:flex;flex-direction:column;gap:8px}
.gruppo h2{margin:0;padding:0 2px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lista{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.voce{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;appearance:none;background:transparent;border:0;border-top:1px solid var(--rule-soft);font-family:inherit;text-align:left;color:inherit;cursor:pointer;transition:background .13s ease}
.voce:first-child{border-top:0}
.voce:active{background:var(--accent-soft)}
@media (hover:hover){.voce:hover{background:var(--accent-soft)}}
.voce:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.voce-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.voce-n{font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.voce-r{font-size:12.5px;color:var(--ink-2);line-height:1.3;overflow-wrap:anywhere}
.chev{flex:none;width:16px;height:16px;color:var(--ink-3);opacity:.6}
.niente{margin:0;padding:22px 16px;font-size:13.5px;color:var(--ink-3);text-align:center;line-height:1.5}

.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 15px 11px;border-bottom:1px solid var(--rule-soft)}
.card-h h2{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card-h .note{font-size:11.5px;color:var(--ink-3);text-align:right}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:9px 15px;appearance:none;background:transparent;border:0;border-top:1px solid var(--rule-soft);font-family:inherit;text-align:left;color:inherit;cursor:pointer;transition:background .13s ease}
.card-h + .row{border-top:0}
.row:active{background:var(--accent-soft)}
@media (hover:hover){.row:hover{background:var(--accent-soft)}}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.k{flex:none;width:120px;font-size:12px;font-weight:500;color:var(--ink-2);line-height:1.3}
.v{flex:1;min-width:0;font-size:14.5px;font-weight:500;color:var(--ink);overflow-wrap:anywhere;line-height:1.35}
.ic{flex:none;width:15px;height:15px;color:var(--ink-3);opacity:.55}
.row:hover .ic,.row:active .ic{opacity:1;color:var(--accent)}
.row--missing .v{color:var(--warn);font-weight:600;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase}

/* L'anteprima e un messaggio, non uno scarico di dati: si mostra nella forma
   in cui arrivera. A caratteri da terminale sembrava roba da tecnici, e
   soprattutto diceva una cosa falsa — su WhatsApp e nella posta quel testo
   arriva normale, con l'indirizzo azzurro e toccabile. */
/* A tutta larghezza. Il fumetto stretto al suo testo e giusto in una chat,
   dove ci sono due voci e servono due lati; qui la voce e una sola e quel
   vuoto a sinistra non diceva niente. Con la larghezza piena cadono anche
   gli angoli asimmetrici, che erano la coda del fumetto verso destra. */
.fumetto-z{padding:13px 15px 15px}
.fumetto{background:var(--accent-soft);border-radius:12px;padding:13px 14px;font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.fumetto b{font-weight:600}
.fumetto .lnk{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 15px 0}
.vuoto{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.chip-r{display:inline-flex;align-items:stretch;background:var(--paper);border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.chip-go{appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 12px;max-width:210px}
.chip-go svg{width:14px;height:14px;flex:none;color:var(--accent)}
.chip-go .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{appearance:none;border:0;border-left:1px solid var(--rule);background:transparent;cursor:pointer;color:var(--ink-3);font-size:17px;line-height:1;padding:0 10px;font-family:inherit}
.chip-x:hover{color:var(--warn);background:var(--warn-soft)}
.chip-go:focus-visible,.chip-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.addrow{display:flex;gap:8px;padding:12px 15px 0}
/* quando la riga chiude la scheda, il fondo deve respirare come i lati */
.addrow:last-child{padding-bottom:13px}
.hint{margin:0;padding:10px 15px 13px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
/* le firme: ci sono, ma non rubano la scena al contenuto */
.firme{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.hint b{color:var(--ink-2);font-weight:600}

.inp{flex:1;min-width:0;width:100%;appearance:none;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:9px 12px;min-height:44px}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
select.inp{cursor:pointer}

.btn{appearance:none;border:1px solid var(--rule);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;min-height:48px;padding:0 16px;border-radius:11px;background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease,filter .16s ease;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn--primary:hover{filter:brightness(1.08)}
.btn--largo{width:100%}
.btn--sm{min-height:44px;font-size:14px;padding:0 16px;flex:none}
.btn--danger{color:var(--err);border-color:var(--rule)}
.btn svg{width:17px;height:17px;flex:none}
.btn[disabled]{opacity:.55;cursor:default}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:88vh;overflow-y:auto;background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.bar-in{max-width:548px;margin:0 auto;display:flex;gap:8px}
.bar-in .btn--primary{flex:1}
/* La barra copre tutta la larghezza, ma quello che contiene deve incolonnarsi
   con le schede del corpo: 548 = i 580 della colonna meno i 16+16 di respiro. */
/* width:100% e necessario: dentro un flex column i margini auto tolgono
   lo stiramento e gli elementi si dimensionerebbero sul contenuto. */
.bar > *{width:100%;max-width:548px;margin-left:auto;margin-right:auto}
/* Il foglio di consegna occupa tutto lo schermo: sotto non deve restare
   niente da sbirciare, ne la scheda ne la barra. */
/* A scorrere e il foglio intero, non il suo contenuto: cosi la barra di
   scorrimento sta al bordo della finestra e non in mezzo alla colonna. */
.bar--pieno{height:auto;bottom:0;max-height:none;overflow-y:auto;
  background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:0;display:flex;flex-direction:column;
  padding-top:calc(12px + env(safe-area-inset-top,0px))}
.bar--pieno .bar-in{display:none}
/* Col foglio aperto l'etichettina sparisce: al suo posto c'e una scheda
   vera, costruita in cima al foglio, che dice anche il tipo e da dove
   arriva quello che stai mandando. */
.bar--pieno .bar-eti{display:none}
.cons-testa{padding:11px 13px 12px}
.cons-testa-top{display:flex;align-items:flex-start;gap:11px}
.cons-testa-top > .chip{margin-top:14px}
.cons-testa .av{margin-top:2px}
.cons-testa-tx{flex:1;min-width:0}
.cons-testa .av{width:36px;height:36px;font-size:12.5px;flex:none}
.cons-testa .chip{flex:none}
.cons-testa-k{margin:0 0 1px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.cons-testa-n{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cons-testa-s{margin-top:1px;font-size:12px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar--pieno #scelte{flex:none;overflow:visible;margin-bottom:0}
body.foglio-aperto{overflow:hidden}
/* Col foglio aperto la testata si inchioda in cima. Prima si contava di
   riportare la pagina all'inizio e di far partire il foglio sotto la
   testata: ma se lo scorrimento non torna a zero — e non sempre torna —
   resta scoperta una fascia della pagina di sotto. Cosi non dipende piu
   da dove eri arrivato a scorrere. */
body.foglio-aperto .topbar{position:fixed;top:0;left:0;right:0;z-index:60}

/* Il foglio di consegna: una cosa domina - il QR e il link - e il resto
   e una riga. Se per vedere le opzioni serve scorrere, e sbagliato. */
.cons{display:flex;flex-direction:column;gap:13px;padding:10px 0 14px}
/* La carta e il codice, affiancati. Sotto i 560 px non c'e posto per due
   colonne: il codice torna sotto, centrato e grande, che e come lo vuoi
   quando lo fai inquadrare a qualcuno che ti sta davanti. */
.cons-alto{display:flex;gap:10px;align-items:stretch}
.cons-alto > .cons-testa{flex:1;min-width:0}
.cons-alto-qr{flex:0 0 auto;display:flex}
.cons-alto-qr .cons-qr{padding:0}
.cons-alto-qr .cons-qr > div{padding:9px;display:flex;align-items:center}
.cons-alto-qr canvas,.cons-alto-qr img{width:130px!important;height:130px!important}
@media (max-width:560px){
  .cons-alto{display:block}
  .cons-alto-qr{display:block;margin-top:10px}
  .cons-alto-qr .cons-qr{padding:0}
  .cons-alto-qr .cons-qr > div{padding:12px}
  .cons-alto-qr canvas,.cons-alto-qr img{width:188px!important;height:188px!important}
}
.cons-qr{display:flex;justify-content:center;padding:12px 0 7px}
.cons-qr > div{background:#fff;padding:12px;border-radius:14px;line-height:0;
  box-shadow:var(--shadow)}
.cons-qr img,.cons-qr canvas{display:block}
.cons-dice{margin:0 0 13px;text-align:center;font-size:12.5px;color:var(--ink-2)}
/* a chi e diretto questo link, sopra al codice */
.cons-per{display:flex;align-items:baseline;justify-content:center;gap:7px;
  flex-wrap:wrap;padding:9px 12px;margin-bottom:8px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent);font-size:15px}
/* Dentro la testata non e piu una fascia a se: e l'ultima riga della carta.
   Niente sfondo, niente angoli, solo un filo che la stacca da sopra. */
.cons-fatti{margin:0 -13px -12px;padding:9px 13px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-2)}
.cons-per--dentro{margin:11px -13px 0;border-radius:0;background:transparent;
  border-top:1px solid var(--rule-soft);padding:10px 13px;
  justify-content:flex-start;font-size:13.5px}
/* l'avviso arriva ai bordi della carta: dentro il margine sembrava un
   rettangolo giallo appoggiato li per sbaglio */
.cons-per--dentro.cons-per--nessuno{background:var(--rule-soft);
  border-top-color:transparent;font-size:12.5px;color:var(--ink-2)}
/* Dopo una fascia tinta non serve un altro filetto: il cambio di fondo
   separa gia. */
.cons-per--nessuno + .cons-fatti,
.cons-per--big + .cons-fatti{border-top-color:transparent}
.cons-per--dentro.cons-per--big{background:var(--az-soft);
  border-top-color:var(--az-soft);font-size:12.5px}
.cons-per-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.cons-per--nessuno{background:var(--warn-soft);color:var(--warn);font-size:12.5px}
.cons-per--big{background:var(--az-soft);color:var(--az-ink);font-size:12.5px}
.cons-url{display:flex;gap:7px;align-items:center}
/* L'indirizzo va a capo invece di essere tagliato: da quando porta davanti
   il titolo, i puntini si mangiavano proprio la parte leggibile — cioe
   l'unica ragione per cui il titolo sta li. */
.cons-url .u{flex:1;min-width:0;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;background:var(--card);border:1px solid var(--rule);border-radius:11px;
  padding:11px 12px;overflow-wrap:anywhere;line-height:1.45}
.cons-righe{display:flex;gap:7px}
.cons-righe .btn{flex:1;min-height:44px;font-size:13.5px}
/* Il gruppo dei canali e la CTA di questa pagina: sopra prende aria, i
   tasti sono piu alti degli altri e il titolo e piu marcato. Erano tre
   riquadri bianchi alti 44 px sotto un'etichetta grigia come tutte le
   altre, e si leggevano come una nota a pie di pagina. */
.cons-azioni{margin-top:18px}
.cons-azioni .btn{min-height:50px;font-size:15px}
.cons-tit--azioni{color:var(--ink-2);font-weight:700;margin-top:16px}
.cons-tit{margin:6px 0 0;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.cons-chiudi{width:100%;min-height:40px}

/* Sugli schermi stretti tre tasti in fila diventano tre colonnine, e quello
   col nome dentro («WhatsApp a Andrea») va a capo mentre gli altri no: la
   riga si sfrangia. Meglio dare al tasto principale una riga sua e mettere
   gli altri due sotto, a meta ciascuno. */
/* I canali vanno SEMPRE a due per riga, a qualunque larghezza, e il tasto
   acceso si prende una riga sua.
   Prima era una regola solo per il telefono, e ogni volta che si aggiungeva
   un canale bisognava ritarare il punto di rottura: misurato, con cinque
   tasti in fila ognuno resta a 103 px e «Copia tutto» ne chiede 113, quindi
   andava a capo DENTRO il tasto anche su uno schermo da 900. Il foglio e
   largo poco piu di 540 px comunque lo si guardi: cinque non ci staranno
   mai. Meglio una forma che non dipende da quanti sono. */
.cons-canali{flex-wrap:wrap;gap:8px}
.cons-canali .btn{min-width:calc(50% - 4px)}
.cons-canali .btn--primary{min-width:100%}
@media (max-width:620px){
  /* l'indirizzo va letto, non spremuto in un terzo di riga */
  .cons-url{flex-direction:column;align-items:stretch}
  .cons-url .btn{width:100%}
  .cons-url .u{text-align:center}
  .cons{gap:12px}
  .cons-tit{margin-bottom:-2px}
}


/* Chi conosciamo gia: compare sotto la casella mentre scrivi */
.sugg{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.sugg-b{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:9px 13px;border:1px solid var(--rule);border-radius:11px;background:var(--card);
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.sugg-b:hover{border-color:var(--accent);background:var(--accent-soft)}
.sugg-b b{font-size:14px}
.sugg-v{font-size:12.5px;color:var(--ink-2);font-family:'JetBrains Mono',ui-monospace,monospace}
.sugg-n{font-size:11px;color:var(--ink-3)}

/* Le opzioni della consegna: una riga che dice gia com'e messo il link, e
   che si apre e si richiude. Dentro, ogni cosa ha la sua etichetta e il suo
   campo — niente tocchi intermedi che non dicono niente. */
.opz-apri{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  padding:13px 15px;border:1px solid var(--rule);border-radius:14px;background:var(--card);
  font:inherit;color:inherit;cursor:pointer;text-align:left;position:relative}
@media (hover:hover){.opz-apri:hover{border-color:var(--accent)}}
/* una freccia disegnata, non un carattere: quella tipografica usciva
   grande come un granello e sembrava un difetto di stampa */
.opz-apri::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  border-radius:1px;transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.opz-apri.aperto::after{transform:translateY(-30%) rotate(225deg)}
@media (hover:hover){.opz-apri:hover::after{border-color:var(--accent)}}
.opz-apri-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding-right:22px}
.opz-apri-v{font-size:14px;color:var(--ink)}
/* aperta, la piega e il suo pannello sono un pezzo solo: angoli squadrati
   dove si toccano, e nessuna linea doppia in mezzo */
.opz-apri.aperto{border-bottom-left-radius:0;border-bottom-right-radius:0;
  padding-bottom:11px;
  /* il bordo acceso PRIMA, il fondo trasparente DOPO: cosi la linea in
     mezzo sparisce ma i tre lati restano del colore giusto */
  border-color:var(--accent);border-bottom-color:transparent}
/* Aperta o sotto il dito, la testa e il pannello si accendono INSIEME.
   Accendere solo la testa lasciava mezzo riquadro blu e mezzo grigio, che
   sembra un difetto e non una scelta. */
@media (hover:hover){.opz-apri:hover+.opz{border-color:var(--accent)}}
.opz-apri.aperto+.opz{border-color:var(--accent)}
/* L'interruttore a scorrimento. Un tasto «Accendi»/«Spegni» dice cosa
   SUCCEDERA premendolo; un interruttore dice in che stato SEI. Per una cosa
   che resta accesa nel tempo — una pagina leggibile da chiunque — conta piu
   la seconda: la guardi di sfuggita e sai come sta messa, senza leggere.
   E' una casella di spunta vera sotto: chi naviga da tastiera o con un
   lettore di schermo trova quello che si aspetta. */
.slide{position:relative;flex:none;width:46px;height:27px;display:inline-block}
.slide input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;
  cursor:pointer;z-index:2}
.slide i{position:absolute;inset:0;border-radius:999px;background:var(--rule);
  transition:background .18s;pointer-events:none}
.slide i::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,26,43,.35);
  transition:transform .18s}
.slide input:checked + i{background:var(--accent)}
.slide input:checked + i::after{transform:translateX(19px)}
.slide input:disabled{cursor:progress}
.slide input:disabled + i{opacity:.5}
.slide input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}

/* L'anteprima aperta non e un pannello di comandi: e una chat. Misurata, la
   versione di prima aveva 144 px di bianco vuoto a sinistra del fumetto,
   dentro una cornice azzurra: una scatola mezza vuota. Col fondo della
   PAGINA quello spazio smette di essere vuoto e diventa sfondo di
   conversazione, che e la cosa che c'e dietro a un messaggio.
   E il bordo resta grigio: l'azzurro in questa app vuol dire «qui stai
   decidendo», e qui non si decide niente — si guarda. */
.opz.opz--chat{background:var(--paper)}
.opz-apri--chat.aperto{border-color:var(--rule);border-bottom-color:transparent}
.opz-apri--chat.aperto+.opz.opz--chat{border-color:var(--rule)}
@media (hover:hover){
  .opz-apri--chat:hover{border-color:var(--rule)}
  .opz-apri--chat:hover::after{border-color:var(--ink-3)}
  .opz-apri--chat:hover+.opz{border-color:var(--rule)}
}
.opz{display:flex;flex-direction:column;gap:2px;margin-top:0;
  border:1px solid var(--rule);border-top:0;
  border-radius:0 0 14px 14px;background:var(--card);overflow:hidden}
.opz-riga{display:flex;gap:12px;align-items:center;padding:13px 15px;
  border-top:1px solid var(--rule-soft)}
.opz-riga:first-child{border-top:0}
.opz-k{flex:none;width:82px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.opz-k-riga{margin:0;padding:14px 15px 2px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.opz-fatto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.opz-nota{margin:3px 0 0;font-size:11px;line-height:1.45;color:var(--ink-3)}
.opz .linkrow .btn{flex:none}
/* tre scelte di fila non ci stanno a fianco dell'etichetta: la mandiamo
   sopra e diamo ai tasti tutta la larghezza, cosi le parole non si spezzano */
.opz-riga--tre{flex-direction:column;align-items:stretch;gap:8px}
.opz-riga--tre .opz-k{width:auto}
@media (max-width:400px){
  .opz-riga{flex-direction:column;align-items:stretch;gap:6px}
  .opz-k{width:auto}
}
.fallback{display:none;gap:8px;max-width:548px;margin:0 auto 8px}
.fallback.on{display:flex}
.fallback .btn{flex:1;font-size:13.5px;min-height:42px}

.toast{position:fixed;left:50%;bottom:0;z-index:60;transform:translate(-50%,14px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:500;padding:10px 16px;border-radius:10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);max-width:calc(100vw - 32px);text-align:center;transition:opacity .2s ease,transform .2s ease}
.toast.on{opacity:1;transform:translate(-50%,-84px)}

/* modulo */
.form{display:flex;flex-direction:column;gap:11px;padding:14px 15px 16px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rigacampo{display:grid;grid-template-columns:1fr 1.35fr auto;gap:7px;align-items:center;padding:9px 15px;border-top:1px solid var(--rule-soft)}
.rigacampo .inp{font-size:14px;min-height:40px;padding:7px 10px}
.mini{appearance:none;border:1px solid var(--rule);background:var(--card);color:var(--ink-3);cursor:pointer;border-radius:9px;width:34px;height:34px;font-size:17px;line-height:1;font-family:inherit;display:grid;place-items:center}
.mini:hover{color:var(--err);border-color:var(--err)}
.mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);padding:0 15px 10px}
.flag input{width:16px;height:16px;accent-color:var(--accent)}
.errore{margin:0;padding:10px 14px;border-radius:10px;background:var(--err-soft);color:var(--err);font-size:13px;font-weight:500}


/* campi riordinabili */
.fbox{display:flex;flex-direction:column;gap:9px;padding:13px 13px 3px}
.fcard{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:9px 10px;touch-action:manipulation;
}
.fcard.trascina{
  border-color:var(--accent);background:var(--card);
  box-shadow:0 14px 30px -12px rgba(36,28,51,.45);
  position:relative;z-index:5;
}
.fcard.posato{animation:posa .22s ease}
@keyframes posa{from{box-shadow:0 14px 30px -12px rgba(36,28,51,.45)}to{box-shadow:none}}
.presa{
  appearance:none;border:0;background:transparent;cursor:grab;
  width:30px;height:40px;padding:0;display:grid;place-items:center;
  color:var(--ink-3);touch-action:none;flex:none;border-radius:8px;
}
.presa:active{cursor:grabbing}
.presa svg{width:16px;height:16px;pointer-events:none}
.presa:hover{color:var(--accent);background:var(--accent-soft)}
.presa:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fcorpo{display:grid;grid-template-columns:1fr 1.25fr;gap:7px;min-width:0}
.fcorpo .flag{grid-column:1 / -1;padding:1px 0 0}
.fcorpo .inp{font-size:14px;min-height:40px;padding:7px 10px}
@media (max-width:430px){ .fcorpo{grid-template-columns:1fr} }
.fcard .mini{margin-top:3px}


/* blocchi */
.voce--doppia{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 14px;border-top:1px solid var(--rule-soft)}
.voce--doppia:first-child{border-top:0}
.voce-apri{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  appearance:none;background:transparent;border:0;font-family:inherit;
  text-align:left;color:inherit;cursor:pointer;padding:8px 0;min-height:46px;
  border-radius:9px;transition:background .13s ease;
}
/* La riga di uno spazio e un pulsante solo, quindi si illumina tutta. Qui i
   pulsanti sono due, e illuminando solo quello del testo la riga sembrava
   spezzata: l'evidenza va sul contenitore, come negli spazi. */
.voce--doppia{transition:background .13s ease}
@media (hover:hover){.voce--doppia:hover{background:var(--accent-soft)}}
.voce--doppia:active{background:var(--accent-soft)}
/* il tasto Manda ha lo stesso colore dell'evidenza: sulla riga accesa
   sparirebbe, quindi li si stacca */
.voce--doppia:active .pill{background:var(--card)}
@media (hover:hover){.voce--doppia:hover .pill{background:var(--card)}}
.voce--doppia .pill:hover{background:var(--accent);color:var(--accent-ink)}
.voce-apri:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pill{
  flex:none;appearance:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;border-radius:999px;
  padding:0 14px;min-height:38px;
  background:var(--accent-soft);color:var(--accent);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:6px;
}
.pill:hover{background:var(--accent);color:var(--accent-ink)}
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill svg{width:14px;height:14px}
.bar-eti{
  max-width:548px;margin:0 auto 7px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
/* editor dei blocchi */
.bcard{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.bcard-h{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:10px 11px;border-bottom:1px solid var(--rule-soft);background:var(--rule-soft)}
.bcard-h .inp{font-size:15px;font-weight:600;min-height:40px;background:var(--card)}
.preset{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 0}
/* I destinatari recenti stanno su UNA riga sola e si scorrono di lato: a
   capo si mangiavano mezza schermata proprio sopra ai tasti di invio, e piu
   ne hai usati piu il foglio si allungava. La barra di scorrimento si
   nasconde — la riga tagliata a meta dice gia che ce n'e dell'altro. */
.preset--riga{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.preset--riga::-webkit-scrollbar{display:none}
.preset--riga>*{flex:none}
.pchip{
  appearance:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  border:1px dashed var(--rule);background:var(--card);color:var(--ink-2);
  border-radius:999px;padding:0 14px;min-height:40px;
}
@media (hover:hover){
  .pchip:hover{border-style:solid;border-color:var(--accent);color:var(--accent);
    background:var(--accent-soft)}
}
.pchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pchip.scelto{border-style:solid;border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
/* «gli hai gia consegnato da queste parti»: un segno piccolo, non un
   secondo colore — la pastiglia deve restare una pastiglia fra le altre */
/* Le righe del conto: la data stretta, la causale che si allarga, il verso
   e l'importo allineati a destra perche si leggono in colonna. */
.mvr{display:flex;align-items:center;gap:7px;padding:9px 15px;
  border-top:1px solid var(--rule-soft)}
.mvr:first-child{border-top:0}
.mvr .inp{min-height:40px}
.mvr-d{flex:0 0 128px;font-size:13.5px;padding:0 8px}
.mvr-k{flex:1;min-width:0}
.mvr-i{flex:0 0 92px;text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:14px;font-variant-numeric:tabular-nums;padding:0 9px}
.mvr-s{appearance:none;flex:none;width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--rule);background:var(--ok-soft);color:var(--ok);
  font-family:inherit;font-size:17px;font-weight:700;line-height:1;padding:0}
.mvr-s.meno{background:var(--err-soft);color:var(--err)}
.mvr-s:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:430px){
  .mvr{flex-wrap:wrap}
  .mvr-d{flex:0 0 118px}
  .mvr-k{flex:1 1 100%;order:-1}
}
/* Le cose da fare. Nell'editor: la casella, il testo che si allarga, la
   data solo se c'e. Nella scheda: la stessa riga, ma tutta cliccabile —
   il bersaglio di un dito e la riga, non un quadratino di 21 pixel. */
.tdr{display:flex;align-items:center;gap:9px;padding:9px 15px;
  border-top:1px solid var(--rule-soft)}
.tdr:first-child{border-top:0}
.tdr .inp{min-height:40px}
.tdr-t{flex:1;min-width:0}
.tdr.fatta .tdr-t{color:var(--ink-3);text-decoration:line-through}
.tdr-s{appearance:none;flex:none;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1.7px solid var(--rule);background:var(--card);color:var(--accent-ink);
  display:grid;place-items:center;padding:0}
.tdr-s svg{width:16px;height:16px;display:block}
.tdr-s.fatta{background:var(--accent);border-color:var(--accent)}
.tdr-s:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tdr-q{flex:none;display:flex}
.tdr-d{width:138px;font-size:13.5px;padding:0 8px}
/* «entro…» sta su OGNI riga e quasi nessuna lo usa: se fosse una pastiglia
   come le altre, cinque cose da fare vorrebbero dire cinque inviti a
   metterci una data. Resta una parola grigia finche non la si guarda. */
.tdr-e{appearance:none;cursor:pointer;font-family:inherit;font-size:11.5px;
  padding:0 4px;height:40px;border:0;border-radius:8px;white-space:nowrap;
  background:transparent;color:var(--ink-3)}
.tdr-e:hover{color:var(--accent)}
.tdr-e:focus-visible{outline:2px solid var(--accent);outline-offset:0}
/* Niente «a capo» come sulle righe del conto: li c'erano data, causale,
   segno e importo, qui c'e una casella e una frase. Su 420 px ci stanno,
   e spezzare in due ogni riga raddoppierebbe l'altezza di una lista di
   dieci cose — cioe la cosa che una lista non deve fare. */
@media (max-width:430px){
  .tdr{gap:7px;padding:9px 12px}
  .tdr-d{width:126px;font-size:12.5px;padding:0 5px}
  /* Va a capo SOLO la riga che ha una data: quelle sono poche, e a
     spezzarle tutte una lista di dieci cose diventerebbe alta il doppio. */
  .tdr.con-data{flex-wrap:wrap}
  .tdr.con-data .tdr-t{flex:1 1 100%;order:-1}
}
.tdv{display:flex;width:100%;align-items:center;gap:11px;padding:12px 15px;min-height:50px;
  text-align:left;font:inherit;color:inherit;background:none;cursor:pointer;
  border:0;border-top:1px solid var(--rule-soft);transition:background .13s ease}
.tdv:first-of-type{border-top:0}
.tdv:hover{background:var(--accent-soft)}
.tdv:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
div.tdv{cursor:default}
div.tdv:hover{background:none}
.tdv-s{flex:none;width:22px;height:22px;border-radius:7px;border:1.7px solid var(--rule);
  background:var(--card);color:var(--accent-ink);display:grid;place-items:center}
.tdv-s svg{width:14px;height:14px;display:block}
.tdv.fatta .tdv-s{background:var(--accent);border-color:var(--accent)}
.tdv-t{flex:1;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.tdv.fatta .tdv-t{color:var(--ink-3);text-decoration:line-through}
.tdv-d{flex:none;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* «scade fra un'ora» dentro una riga tutta grigia: l'unica cosa su cui si
   puo ancora agire non puo avere lo stesso peso di «80 parole». */
.voce-presto{color:var(--warn);font-weight:600}
.pchip--qui{border-style:solid;border-color:var(--accent-soft)}
.pchip-qui{margin-right:6px;font-size:9px;color:var(--accent);vertical-align:1px}
/* Su telefono il Modifica andava a capo da solo e restava orfano a destra:
   si stacca solo dove c'e larghezza per farlo. */
.piede-app{margin:6px 0 4px;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:3px}
.piede-riga{font-size:12px;color:var(--ink-2);line-height:1.5}
.piede-riga--fine{color:var(--ink-3)}
.det-mod{flex:none;appearance:none;cursor:pointer;font-family:inherit;
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--rule);color:var(--ink-2);
  transition:background .13s ease,color .13s ease}
.det-mod svg{width:17px;height:17px}
.det-mod:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.det-mod:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip--vuoto{appearance:none;font-family:inherit;cursor:pointer;
  background:transparent;border:1px dashed var(--rule);color:var(--ink-3)}
.chip--vuoto:hover{border-style:solid;border-color:var(--accent);color:var(--accent)}


.bcard{overflow:visible}
.bcard-h{border-radius:13px 13px 0 0}
.bcard.trascina{
  border-color:var(--accent);
  box-shadow:0 16px 34px -12px rgba(36,28,51,.5);
  position:relative;z-index:6;
}
.bcard.posato{animation:posa .22s ease}
.bcorpo{padding:0 0 4px}


/* documenti allegati */
.doc{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 14px;border-top:1px solid var(--rule-soft)}
.doc-apri{
  flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  appearance:none;background:transparent;border:0;font-family:inherit;
  text-align:left;color:inherit;cursor:pointer;padding:6px 0;min-height:46px;
  border-radius:9px;transition:background .13s ease;
}
@media (hover:hover){.doc-apri:hover{background:var(--accent-soft)}}
.doc-apri:active{background:var(--accent-soft)}
.doc-apri:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.doc-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.doc-ico svg{width:18px;height:18px}
.doc-ico--priv{background:var(--warn-soft);color:var(--warn)}
/* l'anteprima riempie il quadrato: il ritaglio al centro e piu
   riconoscibile di una miniatura intera e minuscola */
.doc-ico--foto{background:var(--rule-soft);padding:0;overflow:hidden}
.doc-ico--foto img{width:100%;height:100%;object-fit:cover;display:block}
.doc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.doc-n{font-size:14.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.doc-m{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.carica{display:flex;gap:8px;padding:12px 15px 0;flex-wrap:wrap}
.carica .btn{flex:1;min-width:140px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.doc-prov{font-size:11.5px;line-height:1.35;color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.doc-prov .chi{font-weight:600;color:var(--ink-2)}
.doc-prov .sep{opacity:.5}

/* Era una griglia a due colonne per il vecchio menu di scelta. Il foglio di
   consegna e una colonna sola: lasciarla griglia lo faceva sforare. */
.scelte{max-width:548px;margin:0 auto 8px;display:block}
.linkbox{max-width:548px;margin:0 auto 8px;background:var(--card);border:1px solid var(--accent);
  border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:10px}
.linkurl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  word-break:break-all;color:var(--accent);font-weight:500}
.linkrow{display:flex;gap:7px}
.linkrow .btn{flex:1;min-height:40px;font-size:13px}

.stato{font-size:11.5px;line-height:1.45;font-weight:600}
.stato--mai{color:var(--ink-3);font-weight:500}
.stato--vista{color:var(--ok)}
.dett-file{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:1px}
.dett-file b{color:var(--accent);font-weight:600}

.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av--foto{background:var(--rule-soft);overflow:hidden;padding:0}
.av--tocca{cursor:pointer;position:relative}
.av--tocca:hover::after{content:'cambia';position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(36,28,51,.6);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:inherit}
.av svg{width:58%;height:58%;display:block}
.av--sm svg{width:55%;height:55%}

/* la scelta dell'icona: una griglia che non cresce all'infinito */
.ico-gruppo{margin-top:12px}
.ico-gruppo:first-child{margin-top:2px}
.ico-tit{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px}
.ico-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.ico-b{display:grid;place-items:center;height:46px;border:1px solid var(--rule);
  border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.ico-b svg{width:22px;height:22px}
.ico-b:hover{border-color:var(--accent);color:var(--accent)}
.ico-b[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ico-b--niente{font-size:11px;font-weight:600;letter-spacing:.02em}
.ico-apri{display:flex;align-items:center;gap:12px}

.pill--solo{padding:0;width:44px;min-height:40px;justify-content:center;gap:5px}
.pill--solo.con-num{width:auto;padding:0 12px}
.pill--solo svg{width:16px;height:16px}
.pill.in-corso{opacity:.55}
.pill.in-corso svg{animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.3}}
.pill--solo .num{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

.prosa{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-top:1px solid var(--rule-soft);padding:14px 16px;font:inherit;color:inherit;cursor:pointer;
  transition:background .13s ease}
.card-h + .prosa{border-top:0}
.prosa:hover,.prosa:active{background:var(--accent-soft)}
.prosa:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.prosa-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.prosa-v{font-size:15px;line-height:1.62;color:var(--ink);white-space:pre-wrap;
  overflow-wrap:anywhere;max-width:62ch}
textarea.inp{resize:vertical;line-height:1.55;min-height:96px;font-family:inherit}
/* La barra della nota: tutti i ferri della stessa misura, in fila dritta.
   Prima erano larghi diversi («B» contro «1. elenco») e andando a capo
   lasciavano righe sfrangiate. */
.ferri{display:flex;align-items:center;gap:3px;margin-bottom:10px;flex-wrap:wrap}
.ferro{appearance:none;cursor:pointer;font-family:inherit;font-size:14px;
  display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
  transition:border-color .13s,color .13s,background .13s}
.ferro svg{width:19px;height:19px;display:block}
.ferro:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ferro:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ferri-sep{width:1px;height:19px;background:var(--rule);margin:0;flex:none}

/* Scrivi / Anteprima: e una scelta fra due stati, non due comandi. Un
   interruttore lo dice, due bottoni uguali ai ferri no. */
/* Il nastro delle linguette: su uno schermo stretto cinque voci non ci
   stanno in fila, e mandarle a capo farebbe due righe di tasti che sembrano
   due gruppi diversi. Scorre, come la riga delle pastiglie. */
.ling{margin:14px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.ling::-webkit-scrollbar{display:none}
.ling .segm{margin-bottom:0;flex:none}
.ling .segm-b{white-space:nowrap}
.segm{display:inline-flex;padding:3px;gap:3px;margin-bottom:11px;
  background:var(--rule-soft);border-radius:11px}
.segm-b{appearance:none;cursor:pointer;font-family:inherit;font-size:13.5px;
  font-weight:600;min-height:32px;padding:0 14px;border:0;border-radius:8px;
  background:none;color:var(--ink-3);transition:background .14s,color .14s}
.segm-b:hover{color:var(--ink)}
.segm-b.scelto{background:var(--card);color:var(--ink);
  box-shadow:0 1px 2px rgba(16,26,43,.09)}
.segm-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prosa-v p{margin:0 0 .7em}
.prosa-v p:last-child{margin-bottom:0}
.prosa-v ul{margin:.2em 0 .8em;padding-left:1.25em}
.prosa-v li{margin:.15em 0}
.prosa-v .vuota{height:.5em}
.prosa-v strong{font-weight:700}
.prosa-v em{font-style:italic}
.prosa-v a{color:var(--accent)}
.prosa-v h2,.prosa-v h3,.prosa-v h4{margin:.95em 0 .35em;line-height:1.25;font-weight:700}
.prosa-v h2{font-size:19px}.prosa-v h3{font-size:17px}.prosa-v h4{font-size:15.5px}
.prosa-v h2:first-child,.prosa-v h3:first-child,.prosa-v h4:first-child{margin-top:0}
.prosa-v ol{margin:.2em 0 .8em;padding-left:1.4em}
.prosa-v blockquote{margin:.45em 0 .85em;padding:.1em 0 .1em .8em;
  border-left:3px solid var(--rule);color:var(--ink-2)}
.prosa-v blockquote p{margin:.2em 0}
.prosa-v code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em;
  background:var(--accent-soft);padding:.1em .35em;border-radius:5px}
.prosa-v pre{margin:.45em 0 .85em;padding:11px 13px;background:var(--accent-soft);
  border-radius:10px;overflow-x:auto}
.prosa-v pre code{background:none;padding:0;font-size:12.5px;line-height:1.5}
.prosa-v hr{border:0;border-top:1px solid var(--rule);margin:1.1em 0}
.inp--nota{width:100%;min-height:260px;font-size:16px;line-height:1.62;padding:14px}
/* Nell'editor dello spazio si riordina, non si scrive: la nota sta piu bassa,
   cosi le schede restano tutte a colpo d'occhio e si trascinano meglio. */
.bcard .inp--nota{min-height:0;height:160px}
.fcorpo{align-items:start}
.fcard{align-items:start}

/* accesso */
/* Una testata sottile: il marchio, e l'accesso raggiungibile subito.
   Cosi il modulo in fondo non e una cosa buttata li, e chi entra ogni
   giorno non deve scorrere tutta la pagina. */
.testata{position:sticky;top:0;z-index:5;background:var(--bar);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft)}
.testata-in{max-width:404px;margin:0 auto;padding:9px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.testata .marchio{font-size:17px}
.home{max-width:404px;margin:0 auto;padding:30px 20px 44px;display:flex;flex-direction:column;gap:19px}
.storia,.accesso{display:flex;flex-direction:column;gap:19px}
/* Su desktop lo spazio in piu non serve ad allargare la colonna - le bolle
   perderebbero la forma di conversazione - ma a mettere l'accesso di fianco,
   cosi non sta piu in fondo e resta li mentre si scorre. */
@media (min-width:820px){
  .testata-in{max-width:912px;padding:11px 24px}
  .testata .btn{visibility:hidden}      /* il modulo e gia visibile: il tasto non serve */
  .home{max-width:912px;flex-direction:row;align-items:flex-start;gap:46px;padding:52px 24px 64px}
  .home h1{font-size:35px;line-height:1.1}
  .storia{flex:1;min-width:0}
  .storia .chat{max-width:440px}
  .accesso{width:336px;flex:none;position:sticky;top:92px}
}
@media (min-width:1060px){ .home{gap:56px} .home h1{font-size:38px} .accesso{width:344px} }
.home h1{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.022em}
.home .card{padding:0}
.home h1{letter-spacing:-.028em}
/* Gli esempi: si capisce prima con uno scambio vero che con una spiegazione.
   La domanda arriva, la risposta parte: e tutto il prodotto. */
.chat{display:flex;flex-direction:column;gap:6px;margin:3px 0 0}
.bolla{max-width:84%;border-radius:17px;font-size:14px;line-height:1.42}
.bolla--loro{align-self:flex-start;padding:9px 14px;background:var(--card);
  border:1px solid var(--rule);border-bottom-left-radius:6px;color:var(--ink-2)}
/* Quello che mandi e un link, non una frase: deve sembrare un link. */
.bolla--io{align-self:flex-end;padding:7px;background:var(--accent);color:var(--accent-ink);
  border-bottom-right-radius:6px;box-shadow:var(--shadow)}
.lk{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:12px;
  background:rgba(255,255,255,.18)}
.lk svg{width:17px;height:17px;flex:none;opacity:.92}
.lk b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.008em}
.lk small{display:block;font-size:11.5px;opacity:.82;margin-top:1px}
/* E quello che trova chi lo apre. */
.chat > .bolla--loro:not(:first-child){margin-top:13px}   /* stacca uno scambio dall'altro */
.finestra-in{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;gap:4px}
.didascalia{margin:0 3px;font-size:11.5px;color:var(--ink-3)}
.finestra{background:var(--card);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)}
.riga-a{display:grid;grid-template-columns:64px 1fr 18px;align-items:center;gap:10px;
  padding:10px 13px;border-top:1px solid var(--rule-soft)}
.riga-a:first-child{border-top:0}
.riga-a span{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.riga-a b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga-a svg{width:16px;height:16px;color:var(--ink-3)}
@keyframes sale{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bolla,.finestra{animation:sale .36s cubic-bezier(.2,.7,.3,1) both}
.home .pie{margin:0;font-size:12px;color:var(--ink-3);line-height:1.65}
@media (max-width:380px){.home{padding-top:38px}.home h1{font-size:26px}}
/* Su schermi stretti il nome dell'utente ruba spazio al marchio, e chi guarda
   la barra sa gia chi e: sparisce lui, non il marchio. */
@media (max-width:400px){
  .topbar-in{gap:7px;padding:9px 12px}
  .who{display:none}
  .brand{font-size:15px}
  .link{font-size:12px;padding:4px 1px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Un allegato con tre tasti in fila lascia al nome un terzo di riga, e
   «Documento di Giulia» diventa tre righe spezzate. Sul telefono il testo
   si prende tutta la larghezza e i tasti scendono sotto, a destra. */
/* La conferma prima di chiudere: un attimo per capire che e successo */
/* la piattaforma: numeri, trenta barre, e il pannello che chiede il nome */
.piat-numeri{display:flex;gap:8px;padding:12px 15px 14px;flex-wrap:wrap}
.piat-n{flex:1;min-width:104px;background:var(--paper);border-radius:11px;padding:10px 12px}
.piat-n b{display:block;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.piat-n span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.piat-gr{display:flex;align-items:flex-end;gap:3px;height:52px;padding:16px 15px 0}
.piat-b{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%}
.piat-b i{display:block;width:100%;max-width:11px;border-radius:3px;background:var(--accent)}
.piat-m{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-top:1px solid var(--rule-soft)}
.piat-m-n{font-size:13.5px;font-weight:600;line-height:1.3}
.piat-tasti{display:flex;gap:7px;flex-wrap:wrap;padding:11px 0 3px}
/* La riga del membro sta su UNA riga: nome e dati a sinistra, ruolo e
   «Togli» a destra, sempre alla stessa altezza. Prima andava a capo appena
   la riga dei dati si allungava, e due persone su quattro finivano coi
   controlli su un rigo tutto loro: la stessa cosa disegnata in due modi
   diversi nello stesso elenco. Il testo si accorcia con i puntini invece
   di spingere; i controlli non si restringono mai. */
.piat-m{flex-wrap:nowrap;align-items:center}
.piat-m > div:first-child{flex:1 1 auto;min-width:0}
.piat-m .doc-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piat-m-az{display:flex;gap:6px;align-items:center;flex:none}
/* Sul telefono una riga sola vorrebbe dire troncare anche l'email, che e
   l'unica cosa che identifica la persona: li si torna a due righe. */
@media (max-width:560px){
  .piat-m{flex-wrap:wrap}
  .piat-m .doc-m{white-space:normal;overflow:visible}
}
.piat-ruolo{flex:none;width:auto;min-width:0;font-size:13px;min-height:40px;padding:0 26px 0 10px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
    linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.piat-m-az .btn{min-height:40px;font-size:13px;padding:0 11px}
.piat-agg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:11px 0 0;border-top:1px solid var(--rule-soft);margin-top:7px}
.piat-agg .inp:not(.piat-ruolo){flex:1 1 8rem;min-height:40px;font-size:14px}
.piat-agg .btn{min-height:40px;font-size:13px}
/* Che tipo di link e, detto prima di tutto il resto. Una pastiglia sola,
   senza colori diversi per tipo: a decidere e la parola, non la tinta —
   colorarli direbbe «questo e buono e questo e cattivo», che non e vero. */
/* nel foglio di consegna: al posto dei tasti, il fatto */
.cons-pub{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:2px 0 0;width:100%}
.cons-pub-t{flex:1;min-width:0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}

/* la pagina pubblica quando e spenta: una riga, non un riquadro */
.pub-muta{margin:0}
.pub-riga{display:flex;align-items:center;gap:8px;padding:2px 2px 0;
  font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.pub-riga .link{padding:0;font-size:11.5px}
.pub-conf{background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:13px 15px;margin:2px 0 0}
.pub-conf p{margin:0 0 11px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.pub-conf-t{display:flex;gap:7px;flex-wrap:wrap}

/* «pubblica» accanto al nome della scheda, nell'elenco */
.pill-pub{margin-left:7px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--az-ink);background:var(--az-soft);
  border-radius:999px;padding:2px 7px;vertical-align:2px;white-space:nowrap}

.pill-link{display:inline-block;margin-right:5px;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  padding:1px 7px;vertical-align:1px;white-space:nowrap}
.pill-link--pubblica{color:var(--az-ink);background:var(--az-soft);border-color:transparent}

/* la pastiglia del piano accanto al nome del cliente */
/* la scheda «la tua organizzazione», dentro Account */
.org-r{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 15px;border-bottom:1px solid var(--rule-soft)}
.org-r:last-of-type{border-bottom:0}
.org-k{font-size:13px;color:var(--ink-2)}
.org-v{font-size:13.5px;text-align:right;min-width:0}
.org-v--forte{font-weight:700;font-size:15px}
.org-p{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 15px;border-top:1px solid var(--rule-soft)}
.org-p-n{font-size:13.5px;font-weight:600;line-height:1.3}
/* il contatore della nota, quando il tetto comincia a vedersi */
/* Due classi, come «.card-h .note» che altrimenti vince sul colore e lascia
   grigio un avviso che deve gridare. */
.card-h .note.nota-quasi{color:var(--warn);font-weight:600}
.card-h .note.nota-troppo{color:var(--err);font-weight:700}
.org-p > div:first-child{flex:1 1 auto;min-width:0}
.org-p .doc-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-az{display:flex;gap:6px;align-items:center;flex:none}
@media (max-width:560px){
  .org-p{flex-wrap:wrap}
  .org-p .doc-m{white-space:normal;overflow:visible}
}
.piat-fatti{border-bottom:1px solid var(--rule-soft);padding-bottom:6px}
.stato-abb{margin-left:7px;color:var(--ink-3)}
.stato-abb--ok{color:var(--ok);font-weight:600}
.stato-abb--attenta{color:var(--warn);font-weight:600}
.stato-abb--guai{color:var(--err);font-weight:600}
.pill-piano{margin-left:7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--az-ink);background:var(--az-soft);
  border-radius:999px;padding:2px 8px;vertical-align:2px}
.card-h .note{margin-left:auto}
.piat-conf .piat-tasti{padding-top:11px}
textarea.inp{min-height:64px;line-height:1.5;padding:9px 12px;resize:vertical}
.piat-guai{border-color:var(--err);background:var(--err-soft)}
.piat-guai-t{margin:0;padding:13px 15px 0;font-size:14px;font-weight:700;color:var(--err)}
.piat-conf{border-top:1px solid var(--rule-soft);margin-top:9px;padding-top:11px}
.piat-conf-t{margin:0;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--err)}
.piat-conf-r{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.piat-conf .hint{padding:9px 0 2px}
.piat-conf .form{padding:9px 0 0}
.btn--ok{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)}
.btn--ok:disabled{opacity:1}
.cons-fatto{margin:0;padding:11px 14px;border-radius:12px;background:var(--ok-soft);
  color:var(--ok);font-size:13px;line-height:1.45;text-align:center}

/* Quando lo stesso recapito arriva sotto un nome nuovo */
.avviso-doppio{margin:9px 15px 0;padding:11px 13px;border-radius:11px;
  background:var(--warn-soft);color:var(--warn)}
.avviso-doppio-t{margin:0 0 9px;font-size:13px;line-height:1.45}
.avviso-doppio .btn{flex:1;min-height:40px;font-size:13px}
.avviso-doppio-n{margin:8px 0 0;font-size:11.5px;line-height:1.45;opacity:.85}

@media (max-width:430px){
  .doc{flex-wrap:wrap;row-gap:9px;padding-bottom:11px}
  /* la riga cliccabile — icona piu testo — si prende tutta la larghezza,
     e i tasti scendono sotto allineati a destra */
  .doc-apri{flex:1 1 100%}
  .doc-apri + *{margin-left:auto}
  .doc-ico{width:34px;height:34px}
  .doc-n{overflow-wrap:anywhere}
}

/* Al volo: la porta per quello che NON hai preparato.

   Era un riquadro tratteggiato. Il tratteggio vuol dire «trascina qui», che
   e la cosa meno importante che questa riga sa fare — sul telefono, dove la
   si usa, non si trascina niente. E la scatola con l'etichetta accanto al
   testo aveva due corpi diversi appaiati: due scritte cosi non stanno mai
   sulla stessa linea di base.

   Adesso e quello che e: un compositore. Stessa forma della ricerca qui
   sopra — stessa altezza, stesso raggio, stesso bordo — perche appartiene
   alla stessa famiglia e la pagina non deve crescere un terzo stile. Quello
   che lo distingue non e la cornice, sono i due tasti a destra: la
   graffetta per il file, e la freccia che compare quando c'e qualcosa da
   mandare. Una casella con una freccia si capisce senza istruzioni. */
.alvolo{display:flex;align-items:center;gap:4px;width:100%;box-sizing:border-box;
  margin:0 0 10px;padding:0 6px 0 14px;min-height:46px;
  background:var(--accent-soft);border:1px solid transparent;border-radius:11px;
  transition:border-color .12s,background .12s}
.alvolo:focus-within{border-color:var(--accent)}
/* Trascinando: l'unico momento in cui la riga deve farsi notare. */
.alvolo--su{border-color:var(--accent);background:var(--accent-soft)}
/* Sedici pixel: sotto questa misura iPhone ingrandisce la pagina al tocco. */
.alvolo-in{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.3;padding:0;outline:none;
  appearance:none}
.alvolo-in::placeholder{color:var(--accent);opacity:.75}
.alvolo-f,.alvolo-go{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:9px;padding:0;cursor:pointer;background:transparent;
  color:var(--accent)}
.alvolo-f svg,.alvolo-go svg{width:19px;height:19px;display:block}
.alvolo-f:hover{background:rgba(0,113,254,.12)}
.alvolo-go{background:var(--accent);color:#fff}
.alvolo-go:hover{filter:brightness(1.06)}
.alvolo-go[hidden]{display:none}

/* La riga di «Al volo» nell'elenco degli spazi. Non e uno spazio che hai
   fatto tu: nasce da solo la prima volta che incolli qualcosa, e ci arrivano
   le cose invece di starci. Si distingue da come e messa — un fondo appena
   diverso e una riga sotto piu marcata, come l'intestazione di un elenco —
   non da un cartello che lo spiega.
   Il fondo NON e l'azzurro: quello e lo stato «toccato» di ogni riga, e due
   cose diverse non possono avere lo stesso colore. */
.voce--volo{background:var(--volo-soft);border-bottom:1px solid var(--rule)}
.voce--volo + .voce{border-top:0}
/* Toccandola deve succedere qualcosa che si VEDE. L'azzurro dell'hover
   (--accent-soft #E3EEFF) e il fondo di questa riga (--rule-soft #EAEFF6)
   sono lo stesso colore a occhio: la riga sembrava non rispondere. Qui si
   usa il passo piu carico, quello che la tavolozza tiene apposta. */
@media (hover:hover){.voce--volo:hover{background:var(--az-soft)}}
.voce--volo:active{background:var(--az-soft)}

/* Lo stralcio di quello che stai mandando, sotto al titolo nel foglio di
   consegna. Due righe al massimo: e un riconoscimento, non una lettura —
   se serve leggerlo tutto c'e la scheda. */
.cons-testa-str{margin-top:6px;padding-left:9px;border-left:2px solid var(--rule);
  font-size:12.5px;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* L'immagine al posto del cerchio: quadrata con gli angoli tondi, come le
   figurine degli allegati — un cerchio taglia via meta di una schermata. */
.av--quad{border-radius:11px}

/* «Destinatario · facoltativo»: il titolo a sinistra, la nota a destra.
   Stesso impianto di «Chi vede questa scheda · solo lettura», perche e la
   stessa cosa — una precisazione che vale piu del titolo che accompagna. */
.opz-k-riga--due{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.opz-k-fac{font-weight:600;letter-spacing:.04em;text-transform:none;
  font-size:11.5px;color:var(--ink-3);opacity:.9}

/* L'anteprima del messaggio dentro la carta «Stai inviando»: una riga della
   carta, non una piega sospesa in mezzo alla colonna. Il filetto sopra la
   attacca a quello che c'e scritto sopra — che e la cosa di cui e
   l'anteprima. */
.cons-ant{margin-top:2px}
/* Dentro la carta la piega non ha una cornice sua: il riquadro e gia
   quello della carta, e due cornici una dentro l'altra sono rumore. Resta
   il filetto sopra, che la attacca a quello di cui e l'anteprima. */
.cons-ant .opz-apri{border:0;border-radius:0;background:transparent;padding:12px 15px}
@media (hover:hover){.cons-ant .opz-apri:hover{background:var(--rule-soft)}}
.cons-ant .opz{padding:0 15px 13px}