/* Mercatorum — il sistema, identità Canva.
 *
 * CHIARO. Verde Mercatorum, carta calda e mercato editoriale.
 *
 * Colore — il verde #008b48 e la carta #fffcf7 vengono dalla tavola marchio;
 *   corallo, bacca, azzurro polvere, verde profondo e crema sono gli accenti.
 * Carattere — **Archivo** porta il grotesk compatto e deciso del wordmark;
 *   **IBM Plex Mono** resta solo dove codici e numeri devono allinearsi.
 * Impianto — due strati e basta: il CONTENUTO, opaco, che scorre; e lo STRATO
 *   FUNZIONALE (barra bassa, fogli, comandi della mappa) che galleggia sopra,
 *   col vetro. Mai vetro sul contenuto, mai vetro su vetro.
 *
 * MISURE, che vengono da fonti e non dal gusto:
 *   · testo di lettura 17 px, mai sotto i 15 nemmeno per le etichette
 *   · contrasto ≥ 4,5:1 su tutto quello che è testo (--ink-4 è l'unico sotto,
 *     e infatti si usa solo per filetti e cose non leggibili)
 *   · bersagli 48 px, e mai un'icona senza la sua parola
 *   · micro-feedback 120 ms, stato 200-300 ms, schermata 300-400, foglio 420
 *   · molle con `linear()`, non `ease`; rimbalzo tenuto basso
 *   · `100dvh` e mai `100vh`; safe area ovunque
 *
 * Il testo è corto per regola, e c'è una prova che lo fa rispettare: 30 parole
 * a paragrafo, 6 a titolo. Quello che non ci sta va nel deck.
 */

/* ── i gettoni ─────────────────────────────────────────────────────────── */
:root{
  /* la stella, disegnata una volta e usata come maschera: cosi' cambia colore
     col gettone invece che con un file diverso per ogni tinta */
  --stella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E");
  --ground:#f4efe2;
  --surface:#fffcf7;
  --sunk:#efe8d5;
  --line:#d9d1bf;
  --line-2:#b8b09f;
  --ink:#101510;
  --ink-2:#414b3b;
  --ink-3:#667064;
  --ink-4:#9da49b;         /* SOLO filetti e segni, mai testo */
  --pino:#008b48;          /* il verde esatto della tavola marchio Canva */
  --pino-velo:#d7eadb;
  --rame:#e87168;          /* corallo */
  --rame-velo:#f8dfdc;
  --rosso:#973e5c;         /* bacca */
  --rosso-velo:#f1dce3;
  --oro:#725d24;
  --oro-velo:#efe8d5;      /* crema */
  --viola:#973e5c;
  --viola-velo:#f1dce3;
  --acqua:#024d39;         /* verde profondo */
  --acqua-velo:#c8d1d9;    /* azzurro polvere */
  --vetro:color-mix(in srgb,var(--surface) 92%,transparent);

  /* Testo sopra un accento pieno, invertito nel tema scuro. */
  --su-accento:#ffffff;

  /* Le larghezze di lavoro introdotte dal Pass 1. */
  --colonna-lettura:44rem;
  --colonna-lavoro:58rem;
  --colonna-banco:76rem;

  --r-1:8px; --r-2:16px; --r-3:22px;
  --om-1:0 1px 2px rgba(23,35,28,.05);
  --om-2:0 1px 2px rgba(23,35,28,.04),0 12px 34px rgba(38,71,50,.08);
  --om-3:0 -1px 3px rgba(23,35,28,.05),0 -18px 52px rgba(38,71,50,.13);

  /* le curve. `iOS` per entrate e uscite, le due molle per i gesti e i fogli.
     Il rimbalzo sta sotto 1,17: oltre sembra un giocattolo. */
  --ios:cubic-bezier(.32,.72,0,1);
  --molla:linear(0,.0026,.0106 2.4%,.0433 4.8%,.1809 9.9%,.2504,.3178,.3813 16%,.4425,.4996,.5527 22.3%,.6019,.6467,.6875 28.6%,.7239,.7565 33%,.8149 37.7%,.8607 42.6%,.8961 47.9%,.9231 53.9%,.9433 60.7%,.9582 68.9%,.9692 80.2%,.9752 89.2%,1);
  --molla-viva:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  /* ── LA GRAMMATICA DEL MOTO ───────────────────────────────────────────────
   *
   * Michele, 27/08/2026: «il moto non ha una grammatica, e sta per averne
   * cinque». Aveva ragione e si contava: il 28/08 questo foglio aveva
   * **quindici durate diverse** scritte a mano — 180, 200, 220, 260, 360, 420,
   * 520, 560, 760, 900 — ognuna scelta da sola nel momento in cui serviva.
   * Nessuna era sbagliata; insieme erano quindici sistemi.
   *
   * Adesso sono SEI gettoni, e nessuna animazione ne scrive un settimo. Non è
   * pignoleria: due cose che fanno la stessa cosa a 220 e a 260 ms si sentono
   * — non si vedono, si sentono — e sono la differenza fra un prodotto e una
   * raccolta di schermate.
   *
   * ⚠️ E la regola che viene prima di tutte: **un moto senza mestiere non si
   * scrive.** I mestieri veri sono orientarsi, causa-effetto, continuità,
   * cambio di stato, riscontro, avanzamento, e UN momento di piacere per
   * pagina. «Perché sembra premium» non è un mestiere — e l'animazione in più
   * è essa stessa il marchio di fabbrica di una cosa generata.
   *
   *   --tocco    120  MICRO      hover, pressione, un colore che cambia.
   *                             Quasi invisibile: se la si nota, è troppa.
   *   --stato    220  STATO      una cosa diventa un'altra cosa. Un pannello
   *                             che si apre, un filtro che riordina.
   *   --schermo  340  RACCONTO   una schermata che sostituisce un'altra.
   *   --foglio   420  RACCONTO   un foglio che sale dal basso: più strada,
   *                             più tempo.
   *   --volo     520  RACCONTO   una cosa che ATTRAVERSA lo schermo. Il
   *                             pallino che vola nel carrello.
   *   --lento    900  MOMENTO    il momento unico della pagina, e uno solo:
   *                             il denaro che passa da una mano all'altra.
   *
   * Le durate lunghe che non stanno qui sono i RESPIRI — lo scheletro che
   * pulsa, il tratteggio che corre su una tratta — e hanno un gettone loro
   * (`--respiro`) perché non sono moto: sono uno stato che dura.
   */
  --tocco:120ms; --stato:220ms; --schermo:340ms; --foglio:420ms;
  /* ⚠️ Il respiro lungo di un'illustrazione che galleggia. Sei secondi, e non è
     un numero a caso: sotto i quattro il movimento si nota e distrae da una
     domanda a cui si deve rispondere; sopra i dieci non si vede più e tanto vale
     toglierlo. Sta qui e non nella regola perché è una DURATA, e le durate hanno
     i gettoni — è così che sono nati i quindici sistemi di moto che questo
     progetto ha già dovuto smontare una volta. */
  /* I tre periodi della boa in piano, primi fra loro: tornano insieme ogni
     1071 secondi, quasi diciotto minuti. Cambiarne uno solo rompe la cosa —
     vanno cambiati tutti e tre, e devono restare primi. */
  --onda-su:7s; --onda-lato:9s; --onda-gira:17s;
  /* I campioni del laboratorio del moto: sono DURATE, e le durate hanno i
     gettoni anche quando servono a far vedere delle durate. Il giro corto è
     quello che l'occhio impara, il lungo quello che non si vede muovere. */
  /* `--onda-boa` è sparito con la scheda che lo usava: il campione della boa
     adesso usa i periodi veri. Un gettone che non serve più si toglie —
     lasciarlo vuol dire che il prossimo lo riusa credendo che significhi
     qualcosa. */
  --onda-corta:6s; --onda-lunga:12s;
  --volo:520ms; --lento:900ms; --respiro:1.4s;

  --titolo:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --editoriale:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --barra:calc(4rem + max(.75rem, env(safe-area-inset-bottom)));
  /* Quanto spazio deve restare in fondo a QUALUNQUE cosa scorra sotto la barra
     bassa: l'altezza della barra piu' 24 px d'aria. Scritto una volta e usato
     ovunque — corpo, fogli, moduli fissi, piede — perche' ogni volta che una
     schermata se lo e' ricalcolato per conto suo ha sbagliato di poco, e di
     poco basta per mangiarsi l'ultima riga di una lista. */
  --sotto-barra:calc(var(--barra) + 1.5rem);
}

/* Il sistema operativo non decide la pelle del prodotto. Mercatorum e'
   chiaro per impostazione: l'eventuale tema scuro e' solo una scelta esplicita. */
:root[data-tema=scuro]{
    --ground:#17130f; --surface:#211a15; --sunk:#2c231c;
    --line:#47382d; --line-2:#665140;
    --ink:#f5e9dc; --ink-2:#cfbaa8; --ink-3:#ab9481; --ink-4:#756254;
    --pino:#86ae91; --pino-velo:#203026;
    --rame:#e0a16b; --rame-velo:#3b291c;
    --rosso:#e59a93; --rosso-velo:#2d1d1b;
    --oro:#d3b45e; --oro-velo:#292315;
    --viola:#b49ed4; --viola-velo:#221e2c;
    --acqua:#84b9d6; --acqua-velo:#182630;
    --vetro:color-mix(in srgb,var(--surface) 92%,transparent);
    --su-accento:#0d1512;
    --om-1:0 1px 2px rgba(0,0,0,.4);
    --om-2:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.5);
    --om-3:0 -1px 3px rgba(0,0,0,.3), 0 -18px 52px rgba(0,0,0,.6);
}

/* Le schermate si sostituiscono con una dissolvenza, non con uno sbattimento:
   è la differenza fra un sito e un'app. Dove non c'è, non succede niente. */
/* Il cambio fra le pagine dell'app deve essere immediato: il tondo M porta a
   una schermata che aspetta i dati, e una dissolvenza sopra lo scheletro sembra
   uno zoom rotto invece di un caricamento normale. */
@view-transition{ navigation:none }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  padding-bottom:var(--sotto-barra);
}
a{color:var(--pino);text-decoration:none;text-underline-offset:.18em}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-family:var(--titolo);font-weight:700;line-height:1.08;
  letter-spacing:-.045em}
b,strong{font-weight:600}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── la testata ────────────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:30;min-height:3.5rem;
  padding:0 1.15rem;padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:.65rem;
  background:var(--vetro);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
/* Quello che sta a destra non si stringe (un tasto stretto e' un tasto che non
   si prende), quindi a cedere e' quello che sta a sinistra: il marchio e la
   briciola si accorciano. Senza `min-width:0` un elemento flex non scende MAI
   sotto la larghezza del suo contenuto, e la testata esce dallo schermo — a
   320 px lo faceva su cinque schermate. */
.top .marchio{display:flex;align-items:center;gap:.5rem;color:var(--ink);min-height:2.75rem;
  flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--titolo);font-weight:800;font-size:1.0625rem;letter-spacing:-.055em}
.top .marchio:hover{text-decoration:none}
.top .marchio img{width:1.55rem;height:1.35rem;display:block;object-fit:contain;flex:0 0 auto}
.top .dove{color:var(--ink-3);font-size:.85rem;font-weight:500;font-family:var(--mono);
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .dove::before{content:'/';margin-right:.5rem;color:var(--line-2)}
.top .fine{margin-left:auto;display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
/* Un nome lungo in testata non allarga la barra: si accorcia. */
.top .fine .btn{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){ .top .dove{display:none} }
@media (max-width:380px){ .top .fine .btn{max-width:5.5rem} .top .marchio{font-size:1rem} }
/* Sotto i 460 px il nome del marchio si toglie e resta il segno.
   Da quando in testata c'e' la parola «Impostazioni» al posto della rotella, i
   bersagli a destra sono quattro: con «Mercatorum» scritto per esteso il nome
   veniva tagliato a meta' («Mercatoru»), che e' peggio di non averlo. Il segno
   riporta a casa lo stesso, e a casa e' anche la barra in fondo. */
@media (max-width:460px){
  .top .marchio span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .top{padding:0 .8rem;gap:.4rem}
}
/* Sotto i 340 px la rotella cede il posto: le impostazioni stanno anche nel
   menu, gli avvisi e la posta no. */
@media (max-width:340px){ #rotella{display:none} }

/* Le tre larghezze, scelte per mestiere e non a occhio: `.wrap` da leggere,
   `.wrap.largo` da lavorare, `.wrap.banco` per il pannello. Su un telefono
   sono la stessa cosa — cambia solo da un tablet in su. */
.wrap{max-width:var(--colonna-lettura);margin:0 auto;padding:0 1.15rem}
.wrap.largo{max-width:var(--colonna-lavoro)}
.wrap.banco{max-width:var(--colonna-banco)}

/* ── apertura ──────────────────────────────────────────────────────────── */
.hero{padding:2.5rem 0 1.25rem}
.hero h1{font-size:clamp(2.1rem,7.5vw,3rem);letter-spacing:-.06em;text-wrap:balance}
.hero p{margin:.7rem 0 0;color:var(--ink-2);font-size:1.125rem;max-width:34ch;line-height:1.45}
.occhio{
  display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem;
}

/* Il titolo di una ROTTA: dice dove sei, c'e' prima che il servizio risponda,
   e resta anche se l'indirizzo non porta nessun dato. Non compete con la
   proposta della schermata — sans e non serif, perche' il serif grande e'
   riservato a una cosa sola per pagina. */
/* Il selettore porta il tag apposta: dentro `.hero` c'e' `.hero h1{}` che vale
   quanto una classe, e senza il tag il titolo di rotta ereditava il corpo da
   48 px della proposta di pagina — su profilo si vedeva «Profilo» grande come
   il nome della persona che doveva ancora arrivare. */
h1.titolo-rotta,.titolo-rotta{font-family:var(--sans);font-size:.9375rem;font-weight:600;
  letter-spacing:.01em;color:var(--ink-3);margin:1rem 0 .35rem;line-height:1.3}

/* ── sezioni ───────────────────────────────────────────────────────────── */
.sez{margin:2.5rem 0 0}
.sez > h2{font-size:1.5rem;letter-spacing:-.014em}
.sez > p.sotto{margin:.35rem 0 1rem;color:var(--ink-2);font-size:1rem;max-width:44ch}
.muto{color:var(--ink-3);font-size:.95rem;line-height:1.45}
.muto b{color:var(--ink-2)}

/* ── bottoni ───────────────────────────────────────────────────────────── */
/* TRE LIVELLI, E BASTA.
 *
 *   1. PRIMARIO   `.btn.verde` (e il suo vecchio nome `.btn.pieno`)
 *                 verde pino pieno. Uno per schermata: e' la cosa da fare.
 *   2. SECONDARIO `.btn` nudo
 *                 filetto d'inchiostro su superficie. La strada alternativa.
 *   3. QUIETO     `.btn.nudo`
 *                 solo testo. Annulla, «piu' tardi», le vie di servizio.
 *
 * Erano quattro: c'era anche un pieno d'inchiostro nero accanto al pieno verde,
 * e nessuno dei due era «il primario» — due tasti dello stesso peso in fondo
 * alla stessa schermata sono due tasti che si annullano. Adesso `.pieno` e
 * `.verde` disegnano la stessa cosa: dove ne restano due in una schermata si
 * vede a occhio, e si toglie quello di troppo.
 *
 * `.sm` e `.pieno-largo` non sono livelli, sono misure: cambiano quanto e'
 * grosso il tasto, non quanto pesa.
 *
 * 48 px di bersaglio, sempre. E il tocco si sente: schiaccia in 120 ms e
 * torna con la molla, come su un telefono. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:3rem;padding:0 1.15rem;
  font:inherit;font-size:1rem;font-weight:500;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-1);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--tocco) linear,border-color var(--tocco) linear,
             transform var(--stato) var(--molla-viva),box-shadow var(--stato) var(--ios);
}
.btn:hover{background:var(--sunk);text-decoration:none}
.btn:active{transform:scale(.96);transition-duration:var(--tocco)}
.btn:focus-visible{outline:2px solid var(--pino);outline-offset:3px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.pieno,.btn.verde{background:var(--pino);color:var(--su-accento);
  border-color:var(--pino);box-shadow:var(--om-1);font-weight:600}
.btn.pieno:hover,.btn.verde:hover{filter:brightness(1.08)}
.btn.nudo{background:none;border-color:transparent;color:var(--ink-2);font-weight:500}
.btn.nudo:hover{background:var(--sunk)}
/* Il focus dentro un tasto pieno: il filetto verde su fondo verde non si vede.
   Si stacca con un alone chiaro all'interno del bordo. */
.btn.pieno:focus-visible,.btn.verde:focus-visible{
  outline-color:var(--ink);box-shadow:var(--om-1),0 0 0 2px var(--surface)}
.btn.sm{min-height:2.5rem;padding:0 .85rem;font-size:.9375rem}
.btn.pieno-largo{width:100%;min-height:3.5rem;font-size:1.0625rem}
.righe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* ── carte e righe ─────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  padding:1.1rem 1.2rem;
}
.card + .card{margin-top:.6rem}
.card h3{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0;margin-bottom:.25rem}

/* ── i passaggi, in bacheca ────────────────────────────────────────────────
   Una riga di bacheca è una decisione, non una scheda di catalogo. Se avesse
   la stessa forma di un prodotto — riquadro, immagine, prezzo — chi arriva qui
   penserebbe di essere finito ancora nel mercato: due schermate che si
   assomigliano diventano una schermata sola nella testa di chi guarda.

   Quindi: un FILO con le fermate, che è la forma di un viaggio, e il pezzo che
   tocca a te acceso. Il resto della strada resta visibile e spento, perché un
   passaggio senza il resto del viaggio non dice dove va a finire. */
.passaggi{display:grid;gap:.7rem;margin-top:1rem}
.nota-lista{margin:.85rem 0 0;color:var(--ink-3);font-family:var(--mono);font-size:.78rem}
.passaggio{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  padding:1rem 1.1rem;
}
.passaggio.quieto{background:transparent}
.passaggio.mirato{border-color:var(--pino);box-shadow:0 0 0 3px color-mix(in srgb,var(--pino) 12%,transparent)}
.ptesta{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ptesta h3{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0;
  margin:0;flex:1;min-width:0}
.ptesta>div{flex:1;min-width:0}.ptesta .occhio{margin:0 0 .15rem;font-size:.68rem}
.rotta-bacheca{display:grid;grid-template-columns:minmax(0,1fr) 2.2rem minmax(0,1fr);align-items:center;
  gap:.45rem;margin-top:.85rem;padding:.7rem .75rem;border-radius:var(--r-1);background:var(--ground)}
.rotta-bacheca>span{min-width:0}.rotta-bacheca>span:last-child{text-align:right}
.rotta-bacheca small,.rotta-bacheca b,.rotta-bacheca em{display:block}.rotta-bacheca small{font:400 .66rem/1.25 var(--mono);color:var(--ink-3)}
.rotta-bacheca b{margin-top:.12rem;font-size:.875rem;line-height:1.25;overflow-wrap:anywhere}
.rotta-bacheca em{margin-top:.14rem;font:400 .68rem/1.3 var(--sans);color:var(--ink-3);font-style:normal;overflow-wrap:anywhere}
.rotta-bacheca>i{display:grid;place-items:center;color:var(--pino)}.rotta-bacheca svg{width:1.2rem;height:1.2rem}
.dati-pacco{display:grid;grid-template-columns:1.15fr 1fr .7fr;gap:.25rem;margin:.65rem 0 0}
.dati-pacco>div{min-width:0;padding:.45rem .55rem;border-left:1px solid var(--line)}
.dati-pacco>div:first-child{border-left:0;padding-left:0}.dati-pacco dt{font:400 .65rem var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.dati-pacco dd{margin:.16rem 0 0;font-size:.78rem;line-height:1.3;color:var(--ink-2)}
.dati-pacco>div:last-child dd{font-family:var(--mono);font-weight:600;color:var(--pino)}

/* ⚠️ `.tragitto`, non `.filo`: `.filo` esiste gia' ed e' la conversazione di
   un ordine. Due cose diverse con lo stesso nome in un foglio solo vuol dire
   che una delle due prende addosso le regole dell'altra, e a vincere e'
   semplicemente quella scritta piu' in basso. */
.tragitto{
  display:flex;align-items:flex-start;gap:0;
  list-style:none;margin:.85rem 0 0;padding:0;
}
.fermata{
  flex:1;min-width:0;position:relative;
  padding-top:1.1rem;text-align:center;
}
/* Il filo fra una fermata e l'altra: mezzo segmento a sinistra e mezzo a
   destra di ogni pallino, così la linea non deborda ai due capi. */
.fermata::before,.fermata::after{
  content:'';position:absolute;top:.34rem;height:2px;background:var(--line);
}
.fermata::before{left:0;right:50%}
.fermata::after{left:50%;right:0}
.fermata:first-child::before,.fermata:last-child::after{background:transparent}
.fermata .pallo{
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:.7rem;height:.7rem;border-radius:50%;
  background:var(--ground);border:2px solid var(--line-2);z-index:1;
}
.fermata.tocca::before,.fermata.tocca::after{background:var(--pino)}
.fermata.tocca:first-child::before,.fermata.tocca:last-child::after{background:transparent}
.fermata.tocca .pallo{background:var(--pino);border-color:var(--pino)}
.fermata .dove{display:block;font-size:.875rem;font-weight:600;line-height:1.25;
  overflow-wrap:anywhere}
.fermata .che{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  letter-spacing:.03em;margin-top:.1rem}
.fermata.tocca .dove{color:var(--pino)}

@media (min-width:760px){
  .passaggi{margin-top:.75rem}
  .passaggio{padding:1.1rem 1.25rem}
  .tragitto{max-width:46rem}
}

.pmisure{margin:.85rem 0 0;font-size:.875rem;color:var(--ink-3);font-family:var(--mono)}
.pgiu{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.85rem}
.pcrediti{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.pcrediti b{font-family:var(--titolo);font-size:1.25rem;color:var(--pino);font-weight:500}
.pcrediti{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.03em}
/* Quando non c'e' niente da guadagnare — parte e arriva nello stesso paese,
   quindi nessun trasporto da pagare — il numero non si scrive in verde a
   caratteri grandi: «0,00 €» in evidenza fa sembrare un rifiuto quello che e'
   solo un pacco che non deve viaggiare. */
.pcrediti.quieto b{color:var(--ink-2);font-size:1rem}

/* ── la scheda di un ordine ───────────────────────────────────────────────
   Tutta la scheda porta nella stanza dell'ordine, quindi si deve vedere che e'
   toccabile; e quella su cui tocca a te ha un filo di colore sul bordo di
   sinistra, che si legge scorrendo senza fermarsi a leggere. */
.ordine-card{cursor:pointer}
.ordine-card.tua{border-left:3px solid var(--pino)}
.ordine-card:hover{border-color:var(--line-2)}
/* Un comando piccolo dentro una scheda: si legge, non grida, e resta un
   bersaglio da 44px come tutti gli altri. */
.tocco{
  position:absolute;left:.4rem;bottom:.4rem;
  min-height:1.9rem;padding:0 .55rem;
  font:inherit;font-size:.75rem;font-weight:500;
  color:var(--ink-2);background:var(--ground);
  border:1px solid var(--line-2);border-radius:999px;cursor:pointer;
}
.tocco:hover{background:var(--sunk);color:var(--ink)}
.tocco:focus-visible{outline:2px solid var(--pino);outline-offset:2px}

/* Il nome di chi c'è dall'altra parte di un ordine: porta alla conversazione,
   e si deve vedere che è un collegamento senza diventare un tasto azzurro. */
.chi-ordine{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.chi-ordine svg{width:.85rem;height:.85rem;vertical-align:-.1rem;opacity:.55}
.chi-ordine:hover{border-bottom-color:var(--pino);color:var(--pino)}
.ptutta{margin:.6rem 0 0;font-size:.875rem;color:var(--ink-2);line-height:1.45;text-wrap:pretty}

@media (max-width:24rem){
  .fermata .che{display:none}
  .dati-pacco{grid-template-columns:1fr 1fr}.dati-pacco>div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0}
}

.riga{
  display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  min-height:3rem;padding:.8rem;margin:0 -.8rem;
  background:none;border:0;border-radius:var(--r-1);font:inherit;color:inherit;
  cursor:pointer;transition:background var(--tocco) linear,transform var(--stato) var(--molla-viva);
}
.riga:hover{background:var(--sunk)}
/* ⚠️ UN'ICONA SENZA MISURA SI PRENDE TUTTA LA RIGA.
   Il 27/08/2026 la freccia in fondo alle righe della rubrica e' diventata alta
   quattrocento pixel, col nome del contatto spezzato a una parola per riga.
   Nessun errore: un `<svg>` senza width/height dentro un flex prende lo spazio
   che trova, e `.riga` non gliene dava nessuno. La misura sta QUI, sul
   contenitore, e non su ogni chiamante: se no la prossima riga che mette
   un'icona rifa' lo stesso identico difetto.
   Il `>` conta: le icone dentro `.corpo` sono decorazioni di testo e hanno gia'
   la loro misura. */
.riga>svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--ink-3)}
.riga:active{transform:scale(.985)}
.riga:focus-visible{outline:2px solid var(--pino);outline-offset:-2px}
.riga .corpo{flex:1;min-width:0}
.riga > span > svg{width:1.35rem;height:1.35rem;display:block;flex:0 0 auto}
.riga > span:has(> svg){flex:0 0 auto;display:flex;align-items:center;color:var(--ink-3)}
.riga .tit{font-weight:600;font-size:1rem;display:block}
.riga .sub{color:var(--ink-3);font-size:.9375rem;display:block;margin-top:.1rem}
.riga .num{margin-left:auto;font-weight:500;font-size:.9375rem}
.elenco{border-top:1px solid var(--line)}
.elenco .riga{border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:.8rem .3rem}

/* ── numeri ────────────────────────────────────────────────────────────── */
.cifre{display:flex;flex-wrap:wrap;gap:2rem;margin:1.5rem 0 0}
.cifre div b{display:block;font-family:var(--titolo);font-size:2.1rem;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;
  font-variation-settings:'SOFT' 18,'WONK' 1}
.cifre div span{display:block;font-size:.875rem;color:var(--ink-3);margin-top:.35rem}

/* ── la ricerca ────────────────────────────────────────────────────────── */
/* Sta in cima e resta lì: su un catalogo di quaranta cose, cercare è più veloce
   che filtrare, e chi non sa cosa cerca ha comunque le pillole sotto. */
.cerca{display:flex;align-items:center;gap:.6rem;margin:1.25rem 0 .9rem;
  padding:0 .9rem;min-height:3rem;background:var(--sunk);border:1px solid transparent;
  border-radius:var(--r-2);transition:background var(--tocco) linear,border-color var(--tocco) linear,box-shadow var(--tocco) linear}
.cerca:focus-within{background:var(--surface);border-color:var(--pino);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pino) 16%,transparent)}
.cerca svg{width:1.25rem;height:1.25rem;color:var(--ink-3);flex:0 0 auto}
.cerca input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.0625rem;
  color:var(--ink);padding:.6rem 0}
.cerca input:focus{outline:0}
.cerca input::-webkit-search-cancel-button{display:none}
.cerca button{width:2rem;height:2rem;border:0;border-radius:50%;background:var(--line);
  color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer;flex:0 0 auto}
.cerca button:focus-visible{outline:2px solid var(--pino);outline-offset:2px}

/* ── la vetrina di un produttore vero ──────────────────────────────────── */
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.85rem}
.vetrina a{display:block;border-radius:var(--r-1);overflow:hidden;position:relative;
  aspect-ratio:3/4;background:var(--sunk)}
.vetrina img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--schermo) var(--ios)}
.vetrina a:hover img{transform:scale(1.04)}
.vetrina a:focus-visible{outline:2px solid var(--pino);outline-offset:2px}

/* ── pillole ───────────────────────────────────────────────────────────── */
.pillole{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.15rem;padding:.25rem 1.15rem .7rem;
}
.pillole::-webkit-scrollbar{display:none}
.pillole button{
  flex:0 0 auto;min-height:2.5rem;padding:0 .95rem;
  font:inherit;font-size:.9375rem;font-weight:500;
  color:var(--ink-2);background:var(--sunk);
  border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background var(--tocco) linear,color var(--tocco) linear,transform var(--stato) var(--molla-viva);
}
.pillole button:hover{background:var(--line)}
.pillole button:active{transform:scale(.95)}
.pillole button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
.pillole button:focus-visible{outline:2px solid var(--pino);outline-offset:2px}
.pillole.avvolge{flex-wrap:wrap;overflow:visible;margin:0;padding:.15rem 0 0}
/* Due caroselli uno sotto l'altro si stringono togliendo aria al primo, non
   tirando su il secondo con un margine negativo: quello li fa sovrapporre per
   davvero, e a un rilevatore di sbordi risulta un difetto perche' lo e'. */
.pillole + .pillole{padding-top:0}
.pillole.stretta{padding-bottom:.35rem}
/* Venti pastiglie verde pieno sono un muro. Selezionato = velo e bordo, che si
   legge in un colpo senza diventare la cosa piu' scura della pagina. */
.pillole button[aria-pressed=true].verde{
  background:var(--pino-velo);color:var(--pino);border-color:color-mix(in srgb,var(--pino) 30%,transparent)}
.pillole button.estremo{background:var(--pino);color:var(--su-accento);border-color:var(--pino);cursor:default}
.duecolonne{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:end}
.duecolonne .campo{margin-top:1rem}
.pillole button i{font-style:normal;opacity:.6;margin-left:.4rem;font-family:var(--mono);font-size:.8rem}

/* ── targhette ─────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  padding:.2rem .55rem;border-radius:var(--r-1);
  background:var(--sunk);color:var(--ink-2);white-space:nowrap;
}
.tag::before{content:'';width:.38rem;height:.38rem;border-radius:50%;background:currentColor}
/* ⚠️ «FARE» NON E' UNO STATO, ED E' PER QUESTO CHE E' PIENO.
   Gli altri gettoni descrivono dov'e' il pacco e stanno in un velo tenue: sono
   informazione. Questo dice che tocca a te, e in una lista di dodici righe deve
   staccarsi da tutti gli altri senza doverlo leggere. E' l'unico con lo sfondo
   pieno, apposta: se domani ne diventassero due, non si distinguerebbe piu'. */
.tag.fare{background:var(--pino);color:var(--su-accento);font-weight:600}
/* ⚠️ GLI STATI SONO UNA PROGRESSIONE, NON CINQUE TINTE. Michele, 27/08/2026:
   «il blu del badge "Da ritirare" è estraneo al sistema cromatico».
   Aveva ragione, e il difetto era più largo del blu: richiesto grigio,
   accettato bacca, pronto verde, in viaggio corallo, da ritirare azzurro
   polvere. Cinque accenti diversi su cinque momenti dello STESSO viaggio, che
   è esattamente il modo di far sembrare decorazione una cosa che è semantica —
   e in una lista di ordini diventava un arcobaleno senza ordine di lettura.
   Tre famiglie, e si leggono da lontano:
     · FERMO o PASSATO  — carta affondata. Niente si muove, o è già finito.
     · IN MOVIMENTO     — crema e oro. Il pacco è in mano a qualcuno.
     · TOCCA A TE       — verde pieno, l'unico stato saturo del sistema.
   Il verde pieno compare una volta sola per ordine, ed è il momento in cui
   qualcuno deve alzarsi e andare a prendere una cosa. */
.tag.richiesto {background:var(--sunk);color:var(--ink-2)}
.tag.accettato {background:var(--sunk);color:var(--ink-2)}
.tag.pronto    {background:var(--oro-velo);color:var(--oro)}
.tag.in_viaggio{background:var(--oro-velo);color:var(--oro)}
.tag.all_hub   {background:var(--pino);color:var(--su-accento);font-weight:600}
.tag.ritirato  {background:var(--sunk);color:var(--ink-3)}
.tag.rifiutato,.tag.annullato{background:var(--rosso-velo);color:var(--rosso)}
.tag.credito   {background:var(--pino-velo);color:var(--pino)}
.tag.conferma  {background:var(--oro-velo);color:var(--oro)}
.tag.vero      {background:var(--pino-velo);color:var(--pino)}
.tag.nudo{background:none;padding-left:0}
.tag.nudo::before{display:none}

/* ── avviso ────────────────────────────────────────────────────────────── */
.avviso{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  padding:.9rem 1rem;margin:1.2rem 0 0;font-size:.9375rem;color:var(--ink-2);
  animation:sali var(--stato) var(--ios) both;
}
.avviso b{color:var(--ink)}
.avviso .punto{width:.5rem;height:.5rem;border-radius:50%;background:var(--rame);
  flex:0 0 auto;margin-top:.5rem}
.avviso.bene .punto{background:var(--pino)}
.avviso.male .punto{background:var(--rosso)}

/* ── prodotti ──────────────────────────────────────────────────────────── */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem}
/* Dentro il foglio della carta la griglia diventa una fila che scorre: dodici
   schede grandi trasformerebbero il tocco su un paese in una pagina da leggere,
   e quello che serve li' e' un'occhiata. */
.griglia.fila{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1.15rem;padding:.15rem 1.15rem .3rem;scroll-snap-type:x proximity}
.griglia.fila::-webkit-scrollbar{display:none}
.griglia.fila .oggetto{flex:0 0 8.5rem;scroll-snap-align:start}
.griglia.fila .oggetto .sotto{padding:.55rem .6rem .65rem}
.griglia.fila .oggetto .nome{font-size:.875rem}

.oggetto{
  display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  font:inherit;color:inherit;cursor:pointer;width:100%;position:relative;
  transition:border-color var(--stato) var(--ios),box-shadow var(--stato) var(--ios),
             transform var(--stato) var(--molla-viva);
}
.oggetto:hover{border-color:var(--line-2);box-shadow:var(--om-2);transform:translateY(-2px)}
.oggetto:active{transform:scale(.975);transition-duration:var(--tocco)}
.oggetto:focus-visible{outline:2px solid var(--pino);outline-offset:3px}
.oggetto .figura{width:100%;aspect-ratio:4/3;display:block;background:var(--sunk);object-fit:cover}
img.figura{object-fit:cover}
.oggetto .sotto{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.oggetto .nome{font-weight:600;font-size:.9375rem;line-height:1.3}
.oggetto .chi{font-size:.875rem;color:var(--ink-3);line-height:1.35}
.oggetto .prezzo{margin-top:auto;padding-top:.5rem;font-family:var(--mono);
  font-weight:500;font-size:1rem;font-variant-numeric:tabular-nums}
.oggetto .prezzo small{display:block;font-family:var(--sans);font-weight:400;
  color:var(--ink-3);font-size:.85rem;margin-top:.1rem;letter-spacing:0}
.oggetto .bollo{position:absolute;top:.55rem;right:.55rem}

/* ── UN TOCCO PER METTERE DENTRO ─────────────────────────────────────────
 *
 * Michele, 01/09/2026: «da lista dovrei avere il più per aggiungere al
 * carrello già lì, quindi riduco un tocco».
 *
 * Un bottone dentro un bottone non esiste, e la scheda dello scaffale E' un
 * bottone: per questo la cella e' un contenitore e il «+» e' un fratello
 * appoggiato nell'angolo, non un figlio. La scheda resta il bersaglio grande
 * che apre; il «+» e' il bersaglio piccolo che compra. */
.cella{position:relative;display:flex}
.cella > .oggetto{width:100%}
/* Il prezzo non va mai sotto il pollice: la riga di sotto tiene libero
   l'angolo dove sta il comando. */
.cella .oggetto .sotto{padding-right:3.5rem}
.cella-azione{position:absolute;right:.5rem;bottom:.5rem;z-index:1}
.oggetto-piu{
  position:relative;width:2.75rem;height:2.75rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:1.5rem;line-height:1;font-weight:400;
  background:var(--pino);color:var(--su-accento);border:1px solid var(--pino);
  border-radius:999px;cursor:pointer;box-shadow:var(--om-2);
  transition:transform var(--stato) var(--molla-viva),filter var(--stato) var(--ios)}
.oggetto-piu:hover{filter:brightness(1.08)}
.oggetto-piu:active{transform:scale(.9);transition-duration:var(--tocco)}
.oggetto-piu:focus-visible{outline:2px solid var(--pino);outline-offset:3px}
/* Quanti ce ne sono gia' dentro: appiccicato al comando, non in mezzo alla
   scheda. Serve a non toccarlo due volte per il dubbio. */
.oggetto-piu .quanti{
  position:absolute;top:-.3rem;right:-.3rem;min-width:1.35rem;height:1.35rem;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .25rem;
  font-family:var(--mono);font-size:.8125rem;font-style:normal;font-weight:500;
  background:var(--ink);color:var(--ground);border:2px solid var(--surface);border-radius:999px}

/* Il contatore vero sta dove c'e' spazio: nella scheda di un prodotto e nel
   carrello. Tre bersagli da 44 px in fila non stanno in una scheda da 10 rem. */
.oggetto-conta{display:inline-flex;align-items:center;gap:.15rem;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:.15rem}
.oggetto-conta button{width:2.75rem;height:2.75rem;padding:0;font:inherit;font-size:1.25rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:999px;color:var(--ink);cursor:pointer}
.oggetto-conta button:hover{background:var(--sunk)}
.oggetto-conta button:focus-visible{outline:2px solid var(--pino);outline-offset:2px}
.oggetto-conta b{min-width:1.75rem;text-align:center;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:1.0625rem;font-weight:500}

/* Il fondo della scheda di un prodotto: o un tasto largo, o il contatore piu'
   la strada per la cassa. */
.azione-scheda{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.azione-scheda #vaiCarrello{flex:1;min-width:9rem}

/* ── i soldi, divisi ───────────────────────────────────────────────────── */
.split{margin:.9rem 0 0}
.barra-quota{height:.45rem;border-radius:999px;overflow:hidden;display:flex;
  background:var(--sunk);margin-bottom:.85rem}
.barra-quota i{display:block;height:100%;width:0;animation:cresci var(--schermo) var(--molla) both}
.barra-quota i:nth-child(2){animation-delay:70ms}
.barra-quota i:nth-child(3){animation-delay:140ms}
.barra-quota i:nth-child(4){animation-delay:210ms}
.voce{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.voce .pun{width:.55rem;height:.55rem;border-radius:3px;flex:0 0 auto}
.voce .che{font-size:1rem}
.voce .che small{display:block;color:var(--ink-3);font-size:.875rem;line-height:1.35}
.voce .num{margin-left:auto;font-weight:500;font-size:1rem}
.voce.tot{border-bottom:0;border-top:1px solid var(--line-2);margin-top:.35rem;padding-top:.7rem}
.voce.tot .che{font-family:var(--titolo);font-size:1.3rem;font-weight:500}
.voce.tot .num{font-size:1.15rem;font-weight:500}
.voce.sconto .num{color:var(--pino)}

/* ── saldo ─────────────────────────────────────────────────────────────── */
/* I contatori di chi produce — «da consegnare», «in arrivo oggi», «più
   avanti». Restano schede affiancate perché sono tre cose DIVERSE che si
   contano, non tre facce dello stesso conto: qui la griglia è l'informazione. */
.saldi{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.5rem}
.saldo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:1rem}
.saldo span{display:block;font-size:.875rem;color:var(--ink-3)}
.saldo b{display:block;font-family:var(--titolo);font-size:1.85rem;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:.25rem;
  font-variation-settings:'SOFT' 18,'WONK' 1}
.saldo.crediti b{color:var(--pino)}
.saldo small{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.3rem}

/* ── ⚠️ UNA SCHEDA SOLA, NON TRE ──────────────────────────────────────────
   Michele, 27/08/2026: «il cruscotto è ancora al peso 0,7».
   «Speso» e «Crediti» erano due schede affiancate sotto il portafoglio: tre
   rettangoli, tre bordi, tre superfici per tre numeri dello STESSO conto. E il
   numero grosso finiva per essere tre numeri grossi, che è il modo di non
   averne nessuno. Adesso sono due righe dentro il portafoglio, separate da un
   filetto: si legge come un estratto conto, che è quello che è. */
.borsa-righe{margin-top:.85rem;padding-top:.15rem;border-top:1px solid var(--line)}
.borsa-riga{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.6rem 0}
.borsa-riga + .borsa-riga{border-top:1px solid var(--line)}
.borsa-riga span{display:grid;gap:.1rem;min-width:0;font-size:1rem;color:var(--ink)}
.borsa-riga small{font-size:.9375rem;color:var(--ink-3);line-height:1.35}
.borsa-riga b{flex:0 0 auto;font-family:var(--mono);font-size:1.125rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink)}
/* I crediti sono un'altra moneta e non si sommano agli euro: il verde lo dice
   senza una riga di spiegazione, ed è l'unico verde di questa schermata. */
.borsa-riga.crediti b{color:var(--pino)}

/* ── campi ─────────────────────────────────────────────────────────────── */
.campo{display:block;margin-top:1rem}
.campo > span{display:block;font-size:.9375rem;font-weight:600;color:var(--ink-2);margin-bottom:.4rem}
/* Un campo non si allarga quanto la pagina: su un banco da 58 rem un campo
   pieno larghezza diventa una riga da novanta caratteri, e chi scrive perde il
   punto in cui e' arrivato. Il tetto e' la misura di lettura. */
.campo input,.campo select,.campo textarea{
  width:100%;max-width:34rem;min-height:3rem;padding:.6rem .8rem;
  font:inherit;font-size:1.0625rem;color:var(--ink);
  background:var(--sunk);border:1px solid transparent;border-radius:var(--r-1);
  transition:background var(--tocco) linear,border-color var(--tocco) linear,box-shadow var(--tocco) linear;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;background:var(--surface);border-color:var(--pino);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pino) 16%,transparent);
}
/* L'AIUTO sta sotto il campo, non dentro.
   Un suggerimento scritto nel segnaposto sparisce appena si comincia a
   scrivere — cioe' sparisce esattamente quando serve. Sotto resta. */
.campo > small,.campo .aiuto{display:block;margin-top:.35rem;font-size:.8125rem;
  color:var(--ink-3);line-height:1.4}
/* Il campo sbagliato lo dice il campo, non un paragrafo in fondo alla pagina:
   filetto rosso, velo rosso, e la frase attaccata sotto. Chi legge con la
   tastiera ci arriva col fuoco, chi legge con l'orecchio se la sente leggere
   perche' e' agganciata con `aria-describedby`. */
.campo input[aria-invalid=true],.campo select[aria-invalid=true],.campo textarea[aria-invalid=true]{
  border-color:var(--rosso);background:var(--rosso-velo)}
.campo input[aria-invalid=true]:focus,.campo textarea[aria-invalid=true]:focus{
  border-color:var(--rosso);box-shadow:0 0 0 4px color-mix(in srgb,var(--rosso) 16%,transparent)}
.campo .storto{display:flex;align-items:flex-start;gap:.35rem;margin-top:.35rem;
  font-size:.875rem;font-weight:500;color:var(--rosso);line-height:1.4}
.campo .storto::before{content:'!';flex:0 0 auto;display:grid;place-items:center;
  width:1.05rem;height:1.05rem;margin-top:.1rem;border-radius:50%;
  background:var(--rosso);color:var(--su-accento);font-size:.75rem;font-weight:700}
/* Il segno di «obbligatorio» si mette solo dove ha senso, cioe' dove qualcosa
   e' facoltativo davvero: se tutto e' obbligatorio, l'asterisco non dice
   niente e sporca ogni etichetta. */
.campo > span .facolt{font-weight:400;color:var(--ink-3);font-size:.875rem;margin-left:.35rem}
#ritiro-punto{max-height:8rem;opacity:1;transform:translateY(0);overflow:hidden;
  transition:max-height var(--schermo) var(--molla),opacity var(--stato) ease,transform var(--schermo) var(--molla),margin var(--schermo) var(--molla)}
#ritiro-punto.nascosto-diretto{max-height:0;opacity:0;transform:translateY(-.5rem);margin-top:0;pointer-events:none}

/* Quello che il servizio sta facendo, detto a voce.
   Un riquadro che si aggiorna da solo e non annuncia niente e' un riquadro che
   per meta' della gente non e' mai cambiato. Non ha aspetto suo: presta quello
   di chi lo ospita. */
/* `.solo-voce` e' la stessa cosa per un pezzo di testo che deve esserci ma non
   deve occupare spazio: l'etichetta della casella dove si scrive nella stanza,
   per dirne una. Un segnaposto non e' un'etichetta — sparisce alla prima
   lettera battuta, cioe' proprio quando serve sapere cos'e' quel campo. */
.dillo,.solo-voce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* ⚠️ E VALE ANCHE QUANDO E' UN `hero`. Michele, 01/09/2026: «bacheca top part
   is filled empty??». Il titolo della bacheca e' scritto per la voce e non si
   vede — giusto, la pagina lo dice gia' con le sue linguette — ma `.hero` e'
   dichiarato piu' in basso con la stessa specificita', quindi vinceva lui e
   quella sezione invisibile teneva sessanta pixel di margine e padding: una
   fascia vuota fra la testata e il contenuto, su bacheca, mercato e posta.
   Due classi, e adesso non c'e' partita. */
.hero.solo-voce{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);border:0}

.spunta{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;margin-top:.75rem;
  min-height:3rem;background:var(--pino-velo);border-radius:var(--r-2);cursor:pointer}
.spunta input{margin:.15rem 0 0;accent-color:var(--pino);width:1.25rem;height:1.25rem;flex:0 0 auto}
.spunta div{font-size:.9375rem;line-height:1.4}
.spunta b{display:block}
.spunta small{color:var(--ink-2);font-size:.875rem}

/* Il campo di ricerca della posta: largo quanto la colonna, perché lì dentro
   ci si cerca un nome, non ci si scrive una frase. */
.cerca-posta{margin-top:1rem}
.cerca-posta input{max-width:none}

/* ── la ricevuta, dentro il foglio di conferma ────────────────────────────
   Cosa stai per firmare, prima del campo dove lo firmi. Punto 88. */
.ricevuta{margin:.4rem 0 1rem;padding:.9rem 1rem;
  background:var(--sunk);border-radius:var(--r-2)}
.ricevuta .dati-r dd{font-weight:600}
.ricevuta .prepassaggio{padding:0;border:0;border-radius:0;background:transparent}

/* ── il cancello ──────────────────────────────────────────────────────────
   Un invito a entrare stretto, in linea, invece di una schermata vuota che
   dice «prima entra» e basta. Sotto ci sta il resto della pagina — quello che
   si può leggere anche senza essere nessuno. Punto 83 della revisione. */
.cancello{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1rem;padding:1rem 1.15rem;
  background:var(--pino-velo);border-radius:var(--r-2)}
.cancello .segno{flex:0 0 auto;display:flex;color:var(--pino)}
.cancello .segno svg{width:1.5rem;height:1.5rem}
.cancello div{flex:1;min-width:12rem;display:flex;flex-direction:column;gap:.15rem}
.cancello b{font-size:1rem;font-weight:600}
.cancello span span,.cancello div > span{font-size:.875rem;color:var(--ink-2);line-height:1.45;
  text-wrap:pretty}
.cancello .btn{flex:0 0 auto}

/* ── l'assaggio ───────────────────────────────────────────────────────────
   Cosa comparirà qui dentro, mostrato spento a chi non è ancora entrato. Una
   schermata vuota con due bottoni non dice a cosa serve premerli; tre righe che
   nominano quello che ci sarà sì. Punto 77 della revisione. */
.assaggio{margin-top:1.5rem;border:1px dashed var(--line-2);border-radius:var(--r-2);
  padding:.35rem .25rem;opacity:.62}
.assaggio-r{display:flex;align-items:center;gap:.85rem;padding:.75rem .95rem}
.assaggio-r + .assaggio-r{border-top:1px solid var(--line)}
.assaggio-r svg{width:1.35rem;height:1.35rem;flex:0 0 auto;color:var(--ink-3)}
.assaggio-r span{display:flex;flex-direction:column;min-width:0}
.assaggio-r b{font-size:.9375rem;font-weight:600}
.assaggio-r small{font-size:.8125rem;color:var(--ink-3);line-height:1.35}

/* ── il campo con l'occhio ─────────────────────────────────────────────────
   Un campo password senza «mostra» si sbaglia a battere e non si sa dove. Con
   una chiave lunga battuta sul telefono di un bar, succede ogni volta. */
.con-occhio{display:block;position:relative;max-width:34rem}
.con-occhio input{padding-right:3.25rem!important;max-width:none!important}
.occhietto{
  position:absolute;right:0;top:50%;translate:0 -50%;
  width:3rem;height:3rem;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--ink-3);border-radius:var(--r-1);
}
.occhietto svg{width:1.25rem;height:1.25rem}
.occhietto:hover{color:var(--ink)}
.occhietto[aria-pressed=true]{color:var(--pino)}
.occhietto:focus-visible{outline:2px solid var(--pino);outline-offset:-2px}

/* ── la porta di una schermata di servizio ─────────────────────────────────
   Il pannello e il quaderno non sono l'app: sono la stanza sul retro. A chi
   non ha la chiave non si mostra la navigazione di un negozio in cui non sta
   entrando — e soprattutto non gli si offre un «Esci», che è la domanda «da
   dove?» stampata su un bottone. Qui non c'è barra bassa e non c'è marchio:
   c'è una domanda sola, al centro, e la via per tornare in valle. */
body.serratura{padding-bottom:2rem}
/* Niente barra bassa, niente striscia, niente testata vuota e niente piede:
   a chi non e' entrato non si mostra la cornice di un'app in cui non sta. */
body.serratura .tabs,body.serratura .quale,
body.serratura .top,body.serratura footer{display:none}
.lucchetto{
  max-width:26rem;margin:12vh auto 0;padding:1.5rem 1.4rem 1.4rem;
}
.lucchetto h2{font-size:1.75rem;margin:.15rem 0 .5rem}
.lucchetto > p.muto{margin:0;font-size:.9375rem;text-wrap:pretty}
.lucchetto .campo{margin-top:1.25rem}
.lucchetto .righe{margin-top:1.1rem}

/* ── le scelte a due strade ────────────────────────────────────────────────
   «Dove ritiri» e «Come paghi», nel foglio del carrello.

   ⚠️ QUESTE CLASSI NON ERANO VESTITE. `.paghe` e `.paga` esistevano solo nel
   JavaScript del mercato: due gruppi di `<label>` senza una riga di CSS, cioè
   quattro righe di testo appiccicate una sull'altra con i pallini di sistema.
   Michele: «new lines in select where and how to pay so less crowded». Non era
   una questione di densità da limare — era stile che mancava del tutto, e non
   se n'era accorto nessuno perché la prova che controlla il vestiario guarda
   solo le classi usate da PIÙ pagine, e queste stanno in una sola.

   Adesso ogni scelta è una riga alta 56 px con il suo pallino, il suo titolo e
   la sua riga di spiegazione, e i due gruppi hanno un titolo visibile: sono un
   `<fieldset>` con la sua `<legend>`, che è il modo in cui il browser e chi
   legge con la voce sanno già che quelle due righe sono una domanda sola. */
.gruppo{
  border:0;padding:0;margin:1.35rem 0 0;min-width:0;
}
.gruppo > legend{
  padding:0;margin:0 0 .5rem;font-size:.9375rem;font-weight:600;color:var(--ink-2);
}
.paghe{display:grid;gap:.5rem}
.paga{
  display:flex;align-items:flex-start;gap:.75rem;
  min-height:3.5rem;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  cursor:pointer;
  transition:border-color var(--stato) linear,background var(--stato) linear,
             transform var(--tocco) var(--ios);
}
.paga:hover{border-color:var(--line-2)}
.paga:active{transform:scale(.99)}
.paga input{
  margin:.1rem 0 0;accent-color:var(--pino);
  width:1.25rem;height:1.25rem;flex:0 0 auto;
}
.paga > span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.paga b{font-size:1rem;font-weight:600;line-height:1.3}
.paga small{font-size:.875rem;color:var(--ink-2);line-height:1.4;text-wrap:pretty}
.paga.scelto{border-color:var(--pino);background:var(--pino-velo)}
.paga.scelto b{color:var(--pino)}
/* Spento, non nascosto: «in contanti» sparito senza spiegazione fa cercare una
   cosa che c'era ieri. Resta, si legge, e la sua riga dice perché non si può. */
.paga.spento{opacity:.6;cursor:not-allowed;background:var(--sunk)}
.paga.spento small{color:var(--rame)}
.paga:focus-within{outline:2px solid var(--pino);outline-offset:2px}

/* ── foglio ────────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:2000;background:color-mix(in srgb,var(--ink) 40%,transparent);
  animation:vela var(--stato) ease-out both;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.foglio{
  position:fixed;left:0;right:0;bottom:0;z-index:2001;
  max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--om-3);
  padding:.7rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
  animation:saliFoglio var(--foglio) var(--molla) both;
}
@media (min-width:40rem){
  .foglio{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(31rem,92vw);border-radius:var(--r-3);border:1px solid var(--line);
    animation:apri var(--foglio) var(--molla) both;max-height:88dvh}
}
.foglio h2{font-size:1.5rem;padding-right:2.75rem}
/* Il tasto di chiusura, visibile.
   Prima si usciva solo tirando giu' il foglio o toccando il velo: due gesti
   che nessuno ha mai spiegato a nessuno, e su un telefono Escape non esiste.
   Sta in alto a destra perche' e' li' che lo cerca il pollice, ed e' alto
   44 px anche se il segno dentro ne misura 20. */
.foglio .chiudi-foglio{
  position:absolute;top:.5rem;right:.6rem;z-index:2;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  /* Fondo pieno e non trasparente: il tasto galleggia sopra il contenuto del
     foglio — che a volte e' una fotografia — e un segno scuro sopra una foto
     scura non c'e'. */
  border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-2);
  cursor:pointer;transition:background var(--tocco) linear,color var(--tocco) linear,
             transform var(--stato) var(--molla-viva);
}
.foglio .chiudi-foglio:hover{background:var(--sunk);color:var(--ink)}
.foglio .chiudi-foglio:active{transform:scale(.92)}
.foglio .chiudi-foglio:focus-visible{outline:2px solid var(--pino);outline-offset:-2px}
.foglio .chiudi-foglio svg{width:1.25rem;height:1.25rem;display:block}
/* Il foglio e' il riferimento del tasto, e in fondo tiene l'aria della barra
   di sistema: un ultimo tasto incollato al bordo dello schermo non si preme. */
.foglio{position:fixed;padding-bottom:calc(1.5rem + max(.75rem,env(safe-area-inset-bottom)))}

/* ── quale dei due ─────────────────────────────────────────────────────── */
.quale{
  position:sticky;top:0;z-index:25;padding:.55rem 1.15rem;
  font-size:.8125rem;line-height:1.35;color:var(--ink-2);
  background:var(--sunk);border-bottom:1px solid var(--line);
}
.quale b{color:var(--ink);font-weight:600}
.quale a{color:var(--pino);font-weight:600;white-space:nowrap}
.quale.demo{background:var(--rame-velo);border-bottom-color:color-mix(in srgb,var(--rame) 22%,var(--line))}
.quale.demo b{color:var(--rame)}

/* ── il piu', e le cose che si tolgono ─────────────────────────────────── */
.capo-sez{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.capo-sez h2{margin:0}
.tondo{width:2.75rem;height:2.75rem;flex:0 0 auto;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--tocco) linear,transform var(--stato) var(--molla-viva)}
.tondo:hover{background:var(--sunk)}
.tondo:active{transform:scale(.92)}
.tondo:focus-visible{outline:2px solid var(--pino);outline-offset:2px}

.oggetto.aggiungi{border-style:dashed;background:transparent;align-items:center;justify-content:center;
  min-height:9rem;gap:.25rem;color:var(--ink-2)}
.oggetto.aggiungi:hover{border-color:var(--pino);color:var(--pino)}
.oggetto.aggiungi .piu{font-size:2rem;line-height:1;font-weight:300}
.oggetto.aggiungi .sotto{padding:0 .8rem .9rem;text-align:center;align-items:center}

.oggetto .via{
  position:absolute;top:.4rem;right:.4rem;z-index:2;
  width:1.9rem;height:1.9rem;border-radius:999px;border:none;cursor:pointer;
  background:var(--vetro);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink-2);font:inherit;font-size:1.1rem;line-height:1;display:grid;place-items:center}
.oggetto .via:hover{background:var(--rosso-velo);color:var(--rosso)}

/* ── quanto manca ──────────────────────────────────────────────────────── */
.attesa{display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem;
  padding:.2rem .5rem .2rem .35rem;border-radius:999px;
  background:var(--sunk);color:var(--ink-2);font-size:.78rem;line-height:1.3}
.attesa svg{width:.85rem;height:.85rem;flex:0 0 auto}
.attesa b{font-weight:600;color:var(--ink)}
.attesa.tardi{background:var(--rame-velo);color:var(--rame)}
.attesa.tardi b{color:var(--rame)}

/* ── file corte di bottoni, e righe di carrello ────────────────────────── */
/* Una riga di bottoni sotto un'etichetta: si avvolge, e ogni bottone resta
   intero. Dentro un <p> andavano a capo dove capitava. */
.fila-corta{display:flex;flex-wrap:wrap;gap:.35rem}

.miniatura{width:3rem;height:3rem;border-radius:var(--r-1);overflow:hidden;flex:0 0 auto;
  background:var(--sunk);display:block}
.miniatura svg,.miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.quanti{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.quanti b{min-width:1.4rem;text-align:center;font-variant-numeric:tabular-nums}
/* Sotto i 360 px il nome e le quantita' non ci stanno in fila: le quantita'
   scendono sotto invece di schiacciare il nome a due lettere per riga. */
@media (max-width:359px){
  .foglio .riga{flex-wrap:wrap}
  .quanti{width:100%;justify-content:flex-end;margin-top:.35rem}
}

/* ── il codice, la fotocamera, la foto ─────────────────────────────────── */
.codicone{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.25rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-2)}
.codicone svg{display:block;width:min(15rem,60vw);height:auto}
.codicone b{font-family:var(--mono);font-size:1.5rem;letter-spacing:.22em;color:var(--ink)}

/* ── IL FOGLIO DEL CODICE, le due metà nello stesso posto (ordine #71) ──
 * Sopra quello che mostri, sotto la fotocamera. Il nome, quando un pacco in
 * mano non ce l'hai, non va in mono e non va spaziato: non è un codice da
 * battere, è come ti chiami. */
.mio-codice .codicone b.mio-nome{font-family:var(--editoriale);font-size:1.125rem;
  letter-spacing:0;font-weight:600}
.quali-pacchi{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
/* Il portafoglio di chi non ha ancora fatto niente: una riga, non un
   estratto conto di zeri (ordine #71). */
.borsa.borsa-quieta{padding-bottom:1rem}
.borsa.borsa-quieta .fermo{margin-bottom:0}
.quali-pacchi .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Il codice già letto: si dice che c'è, non lo si fa ribattere. */
.letto-gia{margin:.1rem 0 .9rem;color:var(--ink-3);font-size:.9375rem}
.letto-gia .mono{font-family:var(--mono);letter-spacing:.15em;color:var(--ink)}
/* Il tasto del codice in chat: quadrato, icona sola, bersaglio pieno. */
#scrivi .tasto-codice{flex:0 0 auto;width:2.75rem;height:2.75rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center;color:var(--pino);
  border-radius:999px;text-decoration:none}
#scrivi .tasto-codice svg{width:1.5rem;height:1.5rem}
#scrivi .tasto-codice:hover{background:color-mix(in srgb,var(--pino) 10%,transparent)}

.scanner{margin-top:.6rem;border-radius:var(--r-2);overflow:hidden;background:var(--sunk)}
.scanner video{display:block;width:100%;max-height:14rem;object-fit:cover}
.scanner p{padding:1rem;margin:0}

.scatto{display:block;width:100%;max-height:12rem;object-fit:cover;
  border-radius:var(--r-2);border:1px solid var(--line);margin-top:.5rem}

/* le prove nel riepilogo: una striscia di quello che e' stato fotografato */
.prove{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin-top:.5rem;padding-bottom:.2rem}
.prove::-webkit-scrollbar{display:none}
.prove figure{flex:0 0 7rem;margin:0}
.prove img{display:block;width:100%;height:5rem;object-fit:cover;border-radius:var(--r-1);border:1px solid var(--line)}
.prove figcaption{font-size:.75rem;color:var(--ink-3);margin-top:.25rem;font-family:var(--mono)}

/* ── i passi del piano ─────────────────────────────────────────────────── */
.passo-r{align-items:flex-start;gap:.75rem}
.passo-r .corpo .sub{white-space:normal;line-height:1.4}
.passo-r.fatto .corpo .tit{text-decoration:line-through;color:var(--ink-3)}
.passo-r.fatto{opacity:.62}
.passo-r.in-corso .corpo .tit::after{content:' · in corso';color:var(--rame);font-weight:500;font-size:.8rem}

.spunta-t{
  flex:0 0 auto;width:1.65rem;height:1.65rem;margin-top:.15rem;
  border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);
  cursor:pointer;display:grid;place-items:center;color:var(--su-accento);
  transition:background var(--tocco) linear,border-color var(--tocco) linear,transform var(--stato) var(--molla-viva);
}
.spunta-t:hover{border-color:var(--pino)}
.spunta-t:active{transform:scale(.9)}
.spunta-t:focus-visible{outline:2px solid var(--pino);outline-offset:2px}
.spunta-t svg{width:.9rem;height:.9rem;stroke-width:2.6}
.passo-r.fatto .spunta-t{background:var(--pino);border-color:var(--pino)}
.passo-r.in-corso .spunta-t{border-color:var(--rame)}
.spunta-t .mezzo{width:.6rem;height:.6rem;border-radius:50%;background:var(--rame);display:block}

/* ── carta o lista ─────────────────────────────────────────────────────── */
/* Un commutatore, non due destinazioni: dice COME stai guardando, mentre la
   barra bassa dice DOVE sei. Mescolare le due cose fa sembrare quattro posti
   quelli che sono due. */
.commuta{display:inline-flex;gap:.15rem;padding:.2rem;margin:.75rem 0 .25rem;
  background:var(--sunk);border-radius:999px}
.commuta a{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:2.5rem;padding:0 .95rem;border-radius:999px;
  color:var(--ink-2);text-decoration:none;font-size:.9375rem;font-weight:500;
  transition:background var(--stato) var(--ios),color var(--stato) var(--ios)}
.commuta a svg{width:1.05rem;height:1.05rem}
.commuta a:hover{color:var(--ink)}
.commuta a[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:var(--om-1)}

/* ── «c'e' gia'» ───────────────────────────────────────────────────────── */
/* La riga che cambia cosa si compra e non solo come: fra due pani, quello che
   c'e' adesso a due passi vince su quello che arriva martedi'. */
.gia-la{display:flex;gap:.6rem;align-items:flex-start;
  padding:.7rem .85rem;border-radius:var(--r-2);
  background:var(--pino-velo);border:1px solid color-mix(in srgb,var(--pino) 22%,transparent)}
.gia-la > svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--pino);margin-top:.1rem}
.gia-la > span{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.gia-la b{font-size:.9375rem;color:var(--pino)}
.gia-la small{font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.gia-la .btn{margin-right:.25rem}

.oggetto .bollo.pronto{background:var(--pino);color:var(--su-accento);border:0}

/* ── il pieghevole ─────────────────────────────────────────────────────── */
/* Non nasconde: piega. La differenza e' che il totale resta sempre in vista,
   e chi vuole vedere come si divide lo apre. */
.pieghevole{margin-top:1rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden}
.pieghevole summary{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.85rem 1rem;cursor:pointer;list-style:none;min-height:3rem;
  font-size:.9375rem;color:var(--ink-2)}
.pieghevole summary::-webkit-details-marker{display:none}
.pieghevole summary b{font-family:var(--mono);color:var(--ink);font-weight:600}
.pieghevole summary span::after{content:' ▾';color:var(--ink-3)}
.pieghevole[open] summary span::after{content:' ▴'}
.pieghevole summary:hover{background:var(--sunk)}
.pieghevole .split{padding:0 1rem 1rem;margin-top:0}
.azioni-ordine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
  margin:.75rem 0 1rem}
.azioni-ordine .btn{width:100%;justify-content:center;text-align:center;text-decoration:none}
.etichetta-sezione{margin:.2rem 0 .25rem;font-family:var(--mono);font-size:.72rem;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.conto-ordine{margin-top:.7rem}
.conto-ordine summary{gap:.75rem}
.tempo-titolo{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:1.1rem 0 .55rem}
.tempo-titolo b{font-weight:600}.tempo-titolo span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.tempo-compatta{margin-top:0}
.tempo-compatta li{padding-bottom:.8rem}
@media(max-width:27rem){
  .azioni-ordine{grid-template-columns:1fr}
}

/* ── le stelline, e cosa dicono ────────────────────────────────────────── */
.stelline{display:flex;align-items:center;gap:.12rem;margin:0}
.stelline .s{
  width:.85rem;height:.85rem;display:block;flex:0 0 auto;
  background:var(--line-2);
  -webkit-mask:var(--stella) center/contain no-repeat;mask:var(--stella) center/contain no-repeat;
}
.stelline .s.piena{background:var(--oro)}
/* mezza stella: due strati, uno pieno tagliato a meta' */
.stelline .s.mezza{background:linear-gradient(90deg,var(--oro) 50%,var(--line-2) 50%)}
.stelline span{margin-left:.4rem;font-size:.8125rem;color:var(--ink-3)}

.voci{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem}
.voce-r{padding:.75rem 0;border-bottom:1px solid var(--line)}
.voce-r:last-child{border-bottom:none}
.voce-r p{margin:.3rem 0 0;font-size:.9375rem;line-height:1.45}
.voce-r .quando{font-size:.75rem;font-family:var(--mono)}

/* le stelle che si toccano: cinque bersagli grandi, non un menu */
.voti{display:flex;gap:.2rem;margin-top:.5rem}
.voti button{width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;border-radius:var(--r-1)}
.voti button:hover{background:var(--sunk)}
.voti button:focus-visible{outline:2px solid var(--pino);outline-offset:-2px}
.voti .s{width:1.5rem;height:1.5rem;display:block;background:var(--line-2);
  -webkit-mask:var(--stella) center/contain no-repeat;mask:var(--stella) center/contain no-repeat}
.voti .s.piena{background:var(--oro)}

/* ── il profilo ────────────────────────────────────────────────────────── */
.testaprofilo{display:flex;gap:.9rem;align-items:center}
.faccia{width:3.75rem;height:3.75rem;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--sunk);display:grid;place-items:center;color:var(--ink-3)}
.faccia img{width:100%;height:100%;object-fit:cover}
.faccia b{font-family:var(--titolo);font-size:1.4rem;color:var(--ink-2)}

.filo{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.bolla{max-width:80%;padding:.55rem .75rem;border-radius:var(--r-2);
  background:var(--sunk);color:var(--ink);font-size:.9375rem;line-height:1.4;align-self:flex-start}
.bolla.mio{background:var(--pino);color:var(--su-accento);align-self:flex-end}
.bolla small{display:block;font-size:.75rem;opacity:.65;margin-top:.15rem;font-family:var(--mono)}

/* ── la campanella e gli avvisi ────────────────────────────────────────── */
.squillo{
  position:relative;width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border:none;background:transparent;color:var(--ink-2);border-radius:999px;cursor:pointer;
  transition:background var(--tocco) linear,color var(--tocco) linear;
}
.squillo svg{width:1.35rem;height:1.35rem}
.squillo:hover{background:var(--sunk);color:var(--ink)}
.squillo:active{transform:scale(.93)}
.squillo:focus-visible{outline:2px solid var(--pino);outline-offset:2px}
.squillo.acceso{color:var(--ink)}
.squillo i{
  position:absolute;top:.35rem;right:.3rem;min-width:1.1rem;height:1.1rem;padding:0 .22rem;
  display:grid;place-items:center;border-radius:999px;
  background:var(--rame);color:var(--su-accento);font-family:var(--mono);font-size:.75rem;font-style:normal;
  box-shadow:0 0 0 2px var(--ground);
}

.avvisi{display:flex;flex-direction:column;gap:.1rem;margin-top:.5rem}
.avviso{display:flex;gap:.7rem;padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.avviso:last-child{border-bottom:none}
.avviso .segno{
  flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:999px;display:grid;place-items:center;
  background:var(--sunk);color:var(--ink-3)}
.avviso .segno svg{width:1rem;height:1rem}
.avviso.fare .segno{background:var(--pino-velo);color:var(--pino)}
.avviso .corpo{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.avviso .corpo b{font-size:.9375rem;font-weight:600;line-height:1.3}
.avviso .corpo span{font-size:.875rem;color:var(--ink-2);line-height:1.4}
.avviso .quando{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.avviso.letto{opacity:.55}

/* ── il portafoglio ────────────────────────────────────────────────────── */
.borsa{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.15rem}
.borsa .quanto{font-family:var(--mono);font-size:2rem;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.borsa .che{font-size:.875rem;color:var(--ink-2)}
.borsa .fermo{font-size:.8125rem;color:var(--ink-3);font-family:var(--mono)}
/* Perché il numero è quello: l'ultima cosa che l'ha mosso, con la sua causale.
   Un saldo senza il perché accanto è una cifra che si guarda e non si capisce. */
.borsa .perche{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.borsa .perche b{font-family:var(--mono);color:var(--ink)}
/* «Soldi finti» sta ACCANTO al numero, non in fondo alla pagina: un'avvertenza
   a trenta righe dalla cosa che avverte non avverte nessuno. */
.borsa .finti{font-style:normal;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--rame-velo);color:var(--rame);
  padding:.1rem .4rem;border-radius:999px;margin-left:.35rem;vertical-align:.05em}
.borsa .righe{margin-top:.75rem}
.metodi{display:grid;gap:.4rem;margin-top:.5rem}
.metodo{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  font:inherit;color:inherit;cursor:pointer;width:100%}
.metodo[aria-pressed=true]{border-color:var(--pino);background:var(--pino-velo)}
.metodo b{font-size:.9375rem;font-weight:600}
.metodo span{font-size:.8125rem;color:var(--ink-3);margin-left:auto;font-family:var(--mono)}

/* ── il racconto ───────────────────────────────────────────────────────── */
/* ⚠️ NON PIÙ VERDE, e non è un cambio di gusto. Dal 27/08/2026 il verde pieno
   in questo sistema vuol dire UNA cosa: adesso tocca a te. Compare una volta
   per ordine — il pacco che ti aspetta al punto — e una volta per schermata.
   Un riquadro promozionale verde («guarda un ordine intero, fallo partire») lo
   diluiva ogni volta che qualcuno apriva il profilo: dopo tre visite il verde
   non vuol più dire niente, e il giorno che c'è davvero un pacco da ritirare
   quel verde è solo un altro rettangolo colorato. È una dimostrazione: carta
   affondata, che è quello che è. */
.racconta{background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r-2);padding:1.1rem 1.2rem}
.racconta > b{display:block;font-family:var(--titolo);font-size:1.3rem;font-weight:500;margin-bottom:.2rem}
.racconta > p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.45}
.racconta .battuta{margin-top:.6rem;font-size:.9375rem;color:var(--ink-2)}
.racconta .battito{padding:.15rem 0;animation:entra var(--stato) var(--ios) both}
.racconta .battito b{color:var(--ink)}
.racconta .soldo{font-family:var(--mono);color:var(--pino);font-weight:500}

/* ── stato vuoto ───────────────────────────────────────────────────────── */
/* Era un rettangolo tratteggiato alto quattro dita, uguale su bacheca, profilo,
 * impostazioni, conferma e filo: un'assenza disegnata piu' grossa della cosa
 * presente accanto, con un'icona da 40 px e un titolo in serif da 22 px che
 * gridava quanto il titolo della schermata. Cinque schermate diverse che
 * finiscono con lo stesso rettangolo sono cinque schermate che sembrano rotte
 * allo stesso modo.
 *
 * Adesso e' un riquadro basso, a bandiera: un segno piccolo, una frase, e il
 * passo dopo. Il tratteggio e l'aria restano solo dove l'assenza E' il
 * contenuto della schermata — `.vuoto.grande`: un ordine che non esiste, un
 * profilo che non si apre, il servizio che tace.
 *
 * La regola dietro: lo stato vuoto e' onboarding. Dice cosa manca e porta un
 * tasto. Se non c'e' un passo dopo non e' uno stato vuoto, e' un errore, e va
 * scritto come un errore. */
.vuoto{
  padding:1.05rem 1.15rem;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);
}
/* Il segno, non l'illustrazione: 24 px. Una figura grande sopra un vuoto dice
   «guarda qui», ed e' esattamente il contrario di quello che serve. */
.vuoto > svg{width:1.5rem;height:1.5rem;display:block;color:var(--ink-3);margin:0 0 .5rem}
/* Sans, non serif: il titolo di uno stato vuoto non e' la proposta della
   pagina. Due serif nella stessa schermata e non si capisce piu' quale dei
   due viene prima. */
.vuoto b{display:block;font-family:var(--sans);font-weight:600;font-size:1.0625rem;
  line-height:1.35;letter-spacing:0}
.vuoto p{margin:.25rem 0 0;color:var(--ink-3);font-size:.9375rem;line-height:1.45;max-width:46ch}
/* Il passo dopo, staccato dal testo e alto quanto un tasto piccolo. */
.vuoto .btn{margin-top:.85rem;min-height:2.75rem;padding:0 .95rem;font-size:.9375rem}
.vuoto .righe{margin-top:.75rem}
.vuoto .righe .btn{margin-top:0}
/* Un esempio di quello che ci sarebbe se non fosse vuoto: una riga sola,
   spenta, che mostra la forma della cosa che manca invece di descriverla. */
.vuoto .esempio{margin-top:.75rem;padding:.55rem .7rem;border-radius:var(--r-1);
  background:var(--sunk);color:var(--ink-3);font-size:.875rem;line-height:1.4}
.vuoto .esempio b{display:inline;font-weight:600;font-size:inherit;color:var(--ink-2)}

/* Quando l'assenza E' la schermata. Li' il tratteggio serve: dice «qui non
   c'e' niente», che a occhio e' diverso da «sta ancora caricando». */
.vuoto.grande{padding:2.25rem 1.25rem;text-align:center;
  border-style:dashed;border-color:var(--line-2)}
.vuoto.grande > svg{width:2rem;height:2rem;margin:0 auto .7rem}
.vuoto.grande b{font-size:1.25rem}
.vuoto.grande p{margin-inline:auto;max-width:34ch}
.vuoto.grande .righe{justify-content:center}

/* ── primi passi ───────────────────────────────────────────────────────── */
.passi{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--surface)}
.passi .capo{padding:.95rem 1.2rem .8rem;border-bottom:1px solid var(--line)}
.passi .capo b{font-size:1rem}
.passi .barra{height:.3rem;border-radius:999px;background:var(--sunk);margin-top:.7rem;overflow:hidden}
.passi .barra i{display:block;height:100%;background:var(--pino);
  transition:width var(--schermo) var(--molla)}
.passo{display:flex;gap:.8rem;align-items:center;padding:.85rem 1.2rem;min-height:3rem;
  border-bottom:1px solid var(--line);font-size:1rem}
.passo:last-child{border-bottom:0}
.passo .cerchio{width:1.35rem;height:1.35rem;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line-2);display:grid;place-items:center;
  transition:background var(--stato) var(--molla),border-color var(--stato) var(--molla)}
.passo.fatto .cerchio{background:var(--pino);border-color:var(--pino)}
.passo.fatto .cerchio svg{width:.8rem;height:.8rem;color:var(--su-accento)}
.passo.fatto .testo{color:var(--ink-3);text-decoration:line-through}
.passo .testo{flex:1}
.passo a{margin-left:auto;font-size:.9375rem;font-weight:600}

/* ── linea del tempo ───────────────────────────────────────────────────── */
.tempo{list-style:none;margin:.8rem 0 0;padding:0}
.tempo li{display:flex;gap:.85rem;padding-bottom:1.05rem;position:relative;font-size:.9375rem}
.tempo li::before{content:'';position:absolute;left:.42rem;top:1.15rem;bottom:0;width:1.5px;background:var(--line)}
.tempo li:last-child{padding-bottom:0}
.tempo li:last-child::before{display:none}
.tempo .pallino{width:.85rem;height:.85rem;border-radius:50%;flex:0 0 auto;margin-top:.3rem;
  background:var(--surface);border:1.5px solid var(--line-2);z-index:1}
.tempo li.fatto .pallino{background:var(--pino);border-color:var(--pino)}
.tempo li.ora .pallino{background:var(--rame);border-color:var(--rame);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rame) 20%,transparent)}
.tempo b{display:block;font-weight:600}
.tempo span{color:var(--ink-3);font-size:.875rem}

/* ── il piano: quando porta, quando parte, quando ritiri ───────────────── */
.piano{display:flex;gap:.5rem;margin-top:.9rem;
  border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--surface)}
.piano div{flex:1;padding:.85rem .6rem;text-align:center;border-right:1px solid var(--line)}
.piano div:last-child{border-right:0}
.piano span{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.piano b{display:block;font-size:.9375rem;margin-top:.25rem;line-height:1.3}
.piano small{display:block;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);margin-top:.1rem}
.piano div.ora b{color:var(--pino)}

/* ── mappa (il riquadro, dove serve) ───────────────────────────────────── */
.mappa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.mappa svg{display:block;width:100%;height:auto}
.strada{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rotta{fill:none;stroke:var(--pino);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.paese{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.4;cursor:pointer;
  transition:fill var(--tocco) linear,stroke var(--tocco) linear}
.paese.pieno{fill:var(--ink-2);stroke:var(--ink-2)}
.paese.libero{stroke-dasharray:2 2}
.paese.acceso{fill:var(--pino);stroke:var(--pino);stroke-width:2.5}

/* ── scheletro ─────────────────────────────────────────────────────────── */
.skel i{display:block;height:3.75rem;border-radius:var(--r-2);margin-bottom:.6rem;
  background:linear-gradient(90deg,var(--sunk) 25%,var(--line) 37%,var(--sunk) 63%);
  background-size:400% 100%;animation:onda var(--respiro) ease-in-out infinite}

/* Uno scheletro che ha la FORMA di quello che sta arrivando.
   Punto 79 della revisione: «replace the generic skeleton rectangle with
   structural skeletons — mirror the eventual avatar, name, place, roles».
   Un rettangolo grigio dice «sto caricando»; queste tre forme dicono anche
   «sta arrivando una persona», e quando il contenuto entra non salta niente. */
.skel.ritratto{display:flex;align-items:center;gap:.9rem}
.skel.ritratto i{margin-bottom:0}
.skel.ritratto i:first-child{width:3.75rem;flex:0 0 auto;border-radius:50%}
.skel.ritratto i:nth-child(2){flex:1;height:1.5rem;max-width:12rem}
.skel.ritratto i:nth-child(3){flex:0 0 auto;width:5rem;height:1rem}

/* ── avviso a comparsa ─────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--barra) + 1rem);translate:-50% 0;
  z-index:60;max-width:min(26rem,calc(100vw - 2rem));
  display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1.1rem;border-radius:999px;
  background:var(--ink);color:var(--ground);font-size:.9375rem;font-weight:500;
  box-shadow:var(--om-2);animation:saliToast var(--schermo) var(--molla-viva) both;
}
.toast .punto{width:.5rem;height:.5rem;border-radius:50%;background:var(--pino);flex:0 0 auto}

/* ── barra bassa ───────────────────────────────────────────────────────── */
/* Galleggia, non è incollata al bordo: così il contenuto le passa sotto senza
   toccarla, e sotto di lei resta lo spazio della barra dei gesti. È il difetto
   che Michele ha visto — le voci che si sovrapponevano al contenuto. */
.tabs{
  position:fixed;z-index:40;
  left:max(.9rem,env(safe-area-inset-left));right:max(.9rem,env(safe-area-inset-right));
  bottom:max(.75rem,env(safe-area-inset-bottom));
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:4rem;border-radius:var(--r-3);
  background:var(--vetro);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--om-2);
  max-width:32rem;margin-inline:auto;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabs{background:var(--surface)}
}
.tabs a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  color:var(--ink-3);font-size:.75rem;font-weight:500;text-decoration:none;position:relative;
  border-radius:var(--r-2);
  border:0;background:transparent;font-family:inherit;cursor:pointer;
  transition:color var(--tocco) linear,transform var(--stato) var(--molla-viva);
}
.tabs a:hover{color:var(--ink-2);text-decoration:none}
.tabs a:active{transform:scale(.94)}
/* Lo stato attivo non è solo colore: è anche peso e riempimento. Il colore da
   solo lo perde chi non lo distingue. */
.tabs a[aria-current=page]{color:var(--ink);font-weight:700}
.tabs a[aria-current=page] svg{stroke-width:2.1}
.tabs a[aria-current=page]::after{content:'';position:absolute;bottom:.4rem;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--pino)}
.tabs svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tabs .pastiglia{position:absolute;top:.7rem;margin-left:1.35rem;width:.45rem;height:.45rem;
  border-radius:50%;background:var(--rame)}

/* Il portale QR non è una pagina di istruzioni: due gesti grandi, poi il
   dettaglio necessario. Le etichette restano sotto il pollice su mobile. */
.qr-porta{clear:both}.qr-porta>h2{margin-bottom:.4rem}.qr-scelte{display:grid;grid-template-columns:1fr 1fr;
  gap:.65rem;margin:1.15rem 0}.qr-scelta{min-height:8.25rem;padding:1rem;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;text-align:left;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--sunk);color:var(--ink);cursor:pointer}
.qr-scelta:first-child{background:var(--pino);color:#fffaf2;border-color:var(--pino)}
.qr-scelta svg{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.7}
.qr-scelta b,.qr-scelta small{display:block}.qr-scelta b{font-size:1.05rem}.qr-scelta small{margin-top:.2rem;
  color:inherit;opacity:.72;line-height:1.25}.qr-scelta:active{transform:scale(.98)}
.qr-vuoto{padding:1rem;border-top:1px solid var(--line)}.qr-vuoto p{margin:.25rem 0 .9rem;color:var(--ink-3)}
.qr-pacchi{display:grid;gap:.45rem}.qr-pacchi button{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;width:100%;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}.qr-pacchi button b{font-family:var(--mono)}
.qr-manuale{margin-top:.8rem}.qr-inserisci{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.qr-inserisci input{font-family:var(--mono);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:22rem){.qr-scelte{grid-template-columns:1fr}.qr-scelta{min-height:6.5rem}}

/* ── piede ─────────────────────────────────────────────────────────────── */
footer{margin-top:3.5rem;padding:1.5rem 0 1rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-3);line-height:1.5}
footer p{margin:0 0 .5rem;max-width:52ch}

/* ── moto ──────────────────────────────────────────────────────────────── */
@keyframes sali{from{opacity:0;translate:0 .7rem}}
@keyframes saliToast{from{opacity:0;translate:-50% 1.2rem}}
@keyframes saliFoglio{from{translate:0 100%}}
@keyframes apri{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}}
@keyframes vela{from{opacity:0}}
@keyframes onda{to{background-position:-135% 0}}
@keyframes entra{from{opacity:0;translate:0 .5rem}}
@keyframes cresci{from{width:0}}

.scala > *{animation:entra var(--stato) var(--ios) both}
.scala > *:nth-child(1){animation-delay:0ms}
.scala > *:nth-child(2){animation-delay:30ms}
.scala > *:nth-child(3){animation-delay:60ms}
.scala > *:nth-child(4){animation-delay:90ms}
.scala > *:nth-child(5){animation-delay:120ms}
.scala > *:nth-child(6){animation-delay:150ms}
.scala > *:nth-child(7){animation-delay:180ms}
.scala > *:nth-child(n+8){animation-delay:210ms}

/* Dove il browser lo sa fare, le cose compaiono mentre entrano nello schermo,
   senza una riga di JavaScript. Dove non lo sa fare, sono già lì. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.oggetto,.passi,.piano{animation:affiora linear both;animation-timeline:view();
      animation-range:entry 0% cover 18%}
    @keyframes affiora{from{opacity:0;translate:0 .9rem}to{opacity:1;translate:0}}
    .scala > *{animation-timeline:auto}
  }
}

/* Chi chiede meno movimento non vuole zero informazione: le cose compaiono
   lo stesso, in dissolvenza, senza scivolare. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
.oggetto{animation:none!important;opacity:1!important;translate:none!important}
}

/* ── il filo di un ordine: la stanza ───────────────────────────────────────
   Una conversazione, non un registro. Le due cose si distinguono dalla forma:
   quello che fa il servizio corre al centro e non ha una bolla, quello che
   dicono le persone sta in una bolla e ha una faccia da che parte guardare. */
/* La stanza ha due cose fisse in fondo — chi scrive e il passaggio di mano —
   e sotto ci va comunque l'aria della barra. Il conto parte dal gettone, non
   da un numero riscritto a mano. */
body.stanza main{padding-bottom:calc(var(--sotto-barra) + 4.2rem)}

/* La testata resta attaccata in alto: in una chat di lavoro l'oggetto e' meta'
   del significato, e farlo scorrere via costringe a risalire per capire. */
/* ⚠️ NON PIÙ STICKY. La testata dell'ordine adesso porta cinque livelli
   (stato, roba, dove, conto, codice) e incollata in alto mangerebbe un terzo
   di schermo per tutta la conversazione. Al suo posto, quando esce dallo
   schermo, cala `.ordine-barra`: una riga sola con le stesse tre cose, che si
   preme per tornare su. Il motivo per cui questa era sticky — l'oggetto della
   conversazione deve restare disponibile — è servito meglio da quella. */
#cima{margin:.25rem 0 .5rem}
.capo{display:grid;gap:.2rem;padding:.7rem .85rem;border-radius:var(--r-2);
  border:1px solid var(--line);background:var(--vetro);box-shadow:var(--om-2);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  text-decoration:none;color:inherit;position:relative}
.capo-t{display:flex;align-items:center;gap:.5rem;min-width:0}
.capo-t b{font-weight:600;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capo-s{font-size:.8125rem;color:var(--ink-3);line-height:1.35}
.capo-a{position:absolute;right:.7rem;bottom:.6rem;font-size:.75rem;color:var(--pino);font-weight:600}

/* Chi c'e' nella stanza. Prima di scrivere «lo lascio fuori» uno vuole sapere
   chi lo leggera': i gettoni portano al profilo di ciascuno. */
.stanzieri{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem .1rem .1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stanzieri::-webkit-scrollbar{display:none}
.stanzieri .chip{flex:0 0 auto;display:grid;gap:.05rem;padding:.35rem .6rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  text-decoration:none;color:inherit;line-height:1.2}
.stanzieri .chip b{font-size:.8125rem;font-weight:600}
.stanzieri .chip span{font-size:.75rem;color:var(--ink-3)}

.filo.lungo{gap:.3rem;margin-top:.75rem}
/* Quanto spazio deve restare sotto l'ultimo messaggio quando la stanza scende
   in fondo. Lo dichiara qui perché è il foglio di stile a sapere quanto è alto
   il campo dove si scrive: `--scrivi-h` lo misura la pagina sul pezzo vero.
   Senza questa riga `scrollIntoView({block:'end'})` incolla l'ultimo messaggio
   al bordo basso della finestra, cioè esattamente sotto il compositore. */
.filo > *:last-child{scroll-margin-bottom:calc(var(--scrivi-h,5.45rem) + var(--scambio-h,0px) + 1rem)}
.filo .giorno{align-self:center;margin:.9rem 0 .35rem;font-size:.75rem;
  font-family:var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
/* Un fatto del servizio: al centro, senza bolla, con l'ora in coda. Se avesse
   una bolla come i messaggi, «e' partito» sembrerebbe detto da qualcuno. */
.filo .fatto{align-self:center;max-width:90%;text-align:center;padding:.35rem .7rem;
  font-size:.8125rem;color:var(--ink-3);line-height:1.4}
/* L'ora di un fatto: 13 px e il grigio che si legge. Era 11 px in --ink-4,
   cioe' 3,2:1 — sotto la soglia AA, su un dato che serve davvero («quando
   e' partito»). */
.filo .fatto i{font-style:normal;font-family:var(--mono);font-size:.8125rem;color:var(--ink-3)}
.bolla .chi{display:block;font-size:.75rem;font-weight:600;color:var(--ink-3);margin-bottom:.1rem}
/* Anche qui l'inchiostro segue il tema: un bianco al 75% sopra la bolla
   verde di notte diventa quasi invisibile, perche' di notte la bolla e'
   chiara. */
.bolla.mio .chi{color:color-mix(in srgb,var(--su-accento) 78%,transparent)}
.bolla.mio small{opacity:.8}

/* Chi scrive sta sopra la barra bassa: il pollice ci arriva senza spostare la
   mano, ed e' l'unica posizione che non copre l'ultimo messaggio letto. */
#scrivi{position:fixed;left:0;right:0;bottom:var(--barra);z-index:6;
  display:flex;flex-direction:column;gap:.3rem;
  padding:.5rem max(.9rem,env(safe-area-inset-left)) .55rem max(.9rem,env(safe-area-inset-right));
  border-top:1px solid var(--line);background:var(--vetro);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
/* Chi lo legge, scritto sopra il campo e sempre. Un segnaposto sparisce alla
   prima lettera battuta — cioe' proprio quando serve sapere dove sta finendo
   quello che si scrive. Punto 92 della revisione. */
/* ⚠️ NÉ MONO NÉ 11 PX. Il mono in questo sistema è condimento — codici, ore,
   quantità — e questa è una frase in italiano che si legge. A 11 px troncata
   coi puntini non la leggeva nessuno, ed era l'unica riga che dice DOVE STA
   FINENDO quello che scrivi. */
#scrivi .a-chi{display:block;font-size:.9375rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scrivi .riga-scrivi{display:flex;gap:.5rem;align-items:flex-end}
#scrivi textarea{flex:1;min-width:0;resize:none;font:inherit;font-size:1rem;
  padding:.6rem .8rem;border-radius:var(--r-2);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);max-height:120px}
#scrivi button{flex:0 0 auto}
/* «Tocca a Cascina», «Inquadra», «Mostra il codice»: è la mossa che fa
   avanzare il pacco, cioè la cosa che il servizio ti sta chiedendo di fare
   adesso. A 12,5 px e in grigio sembrava un tasto spento accanto a «Scrivi».
   Verde e leggibile: si stacca da «Scrivi» senza diventare un secondo tasto
   pieno appiccicato al primo. */
/* ⚠️ Michele, 28/08/2026: «viene troncato orizzontalmente da "tocca al forno
   di Parre"». `max-width:9rem` tagliava a meta' proprio la frase piu' lunga e
   piu' utile - quella che dice su chi si sta aspettando - e un nome tagliato a
   meta' e' peggio di nessun nome: sembra un errore.
   Adesso la larghezza e' un tetto, non una gabbia: la riga si accorcia se
   serve, e se il testo e' lungo va a capo su due righe invece di sparire. */
#scrivi .passo-rapido{max-width:min(14rem,45vw);padding-inline:.5rem;
  font-size:.9375rem;line-height:1.15;white-space:normal;text-align:right;
  color:var(--pino);font-weight:600;
  text-decoration-color:color-mix(in srgb,var(--pino) 45%,transparent)}
#scrivi .passo-rapido:hover{color:var(--pino);text-decoration-color:var(--pino)}
/* ── IL PERCORSO: una bolla di accompagnamento, non un tracker in miniatura ──
 *
 * Michele, 27/08/2026: «trasformare lo stepper microscopico in uno stato
 * leggibile».
 *
 * Era sei colonne in 350 px. Per starci dentro i caratteri erano scesi a
 * **10 px il nome della tappa e 9 px il dettaglio** — contro il minimo di
 * questo stesso foglio, scritto in cima: «testo di lettura 17 px, mai sotto i
 * 15 nemmeno per le etichette». E non bastava lo stesso: «Al punto di
 * partenza» andava a capo su tre righe, «Cartoleria di Albino · Albino ↗»
 * pure, e le colonne finivano di altezze diverse. Il posto dove il servizio
 * dice DOVE VA IL TUO PACCO era il testo più piccolo della schermata.
 *
 * Adesso è verticale, e non per gusto: una bolla di accompagnamento si legge
 * per righe, una riga per passaggio di mano, e in verticale non c'è larghezza
 * da contendersi — i nomi lunghi dei produttori e dei punti stanno per intero,
 * a 15 px, senza andare a capo per forza. Sei fermate costano ~280 px di
 * altezza, che su una pagina che scorre non sono niente; erano l'unica cosa
 * costosa da guardare quando erano larghe.
 *
 * I pallini: pieno verde = è successo · anello rame = il pacco è qui adesso
 * (il rame in questo sistema porta stato e moto) · vuoto = deve ancora venire.
 */
.percorso-ordine{margin:.55rem 0 .15rem;padding:.9rem 1rem .8rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.percorso-ordine .occhio{margin:0 0 .7rem}
.percorso-binario{display:block;position:relative}
.percorso-tappa{position:relative;display:block;padding:0 0 .7rem 1.65rem;color:var(--ink-3)}
.percorso-tappa::after{content:'';position:absolute;left:.34rem;top:1.2rem;bottom:.05rem;width:1px;background:var(--line)}
.percorso-tappa:last-child{padding-bottom:0}
.percorso-tappa:last-child::after{display:none}
.percorso-tappa i{position:absolute;left:0;top:.3rem;width:.75rem;height:.75rem;
  border:2px solid var(--line-2);border-radius:50%;background:var(--surface)}
.percorso-tappa b{display:block;font-size:.9375rem;line-height:1.3;font-weight:500;color:var(--ink-2)}
.percorso-tappa small,.percorso-tappa a{display:block;font-size:.9375rem;line-height:1.35;
  color:var(--ink-3);text-decoration:none}
.percorso-tappa a{color:var(--pino);text-decoration:underline;text-underline-offset:2px}
.percorso-tappa.fatto i{border-color:var(--pino);background:var(--pino)}
/* La tappa corrente è l'unica cosa che si deve vedere da lontano: il nome sale
   a 17 px e prende il nero pieno, il resto del percorso resta contorno. */
.percorso-tappa.corrente b{font-size:1.0625rem;font-weight:700;color:var(--ink)}
.percorso-tappa.corrente small{color:var(--ink-2)}
.percorso-tappa.corrente i{border-color:var(--rame);background:var(--surface);box-shadow:0 0 0 3px var(--rame-velo)}
/* ── LA TESTATA DELL'ORDINE: CINQUE LIVELLI, DICHIARATI ──────────────────
 *
 * Le misure non sono a occhio, sono i salti che servono perché l'occhio capisca
 * l'ordine di lettura in meno di un secondo:
 *   occhio (metadata)  12 px mono, --ink-3   ·  livello 5
 *   stato              26 px 700 --ink       ·  livello 1
 *   roba               17 px 500 --ink-2     ·  livello 2
 *   dove               19 px 600 --ink       ·  livello 3, dentro la carta affondata
 *   conto              17 px, totale in 500  ·  livello 4
 * Fra il livello 1 e il 2 c'è un salto di 9 px: è quello che prima non c'era
 * (erano 12 e 15) ed è la ragione per cui «tutto aveva peso 0,7».
 */
.ordine-capo{display:grid;gap:.5rem;padding:1rem 1.05rem 1.05rem;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.ordine-capo .occhio{margin:0}
.ordine-stato{margin:0;font-size:1.625rem;line-height:1.12;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);display:flex;align-items:center;gap:.5rem}
/* Il pallino porta la famiglia dello stato: fermo, in moto, tocca a te. È il
   colore che prima stava sulla pastiglia, e qui non deve dipingere una parola
   per essere letto. */
.ordine-stato::before{content:'';flex:0 0 auto;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--line-2)}
.ordine-stato.pronto::before,.ordine-stato.in_viaggio::before{background:var(--rame)}
.ordine-stato.all_hub::before{background:var(--pino)}
.ordine-stato.ritirato::before{background:var(--ink-4)}
.ordine-stato.annullato::before,.ordine-stato.rifiutato::before{background:var(--rosso)}
.ordine-cosa{margin:0;font-size:1.0625rem;line-height:1.35;font-weight:500;color:var(--ink-2)}

/* Il posto dove va a finire la roba. Carta affondata e non una scheda dentro
   la scheda: un rettangolo dentro un rettangolo è la cosa che il brief chiama
   card slop, e qui basta un cambio di superficie per dire «questo è un altro
   tipo di informazione». */
.ordine-dove{display:grid;gap:.1rem;margin-top:.15rem;padding:.7rem .8rem;
  border-radius:var(--r-1);background:var(--sunk)}
.ordine-dove .occhio{margin:0 0 .1rem}
.ordine-dove b{font-size:1.1875rem;line-height:1.25;font-weight:600;color:var(--ink)}
.ordine-dove small{font-size:.9375rem;color:var(--ink-2)}
.ordine-dove .strada{justify-self:start;margin-top:.35rem;min-height:2.75rem;
  display:inline-flex;align-items:center;font-size:.9375rem;font-weight:600;
  color:var(--pino);text-decoration:underline;text-underline-offset:.25rem;
  text-decoration-color:color-mix(in srgb,var(--pino) 40%,transparent)}
.ordine-dove .strada:hover{text-decoration-color:var(--pino)}
/* Quando tocca a te andare a prendere il pacco, il posto è la cosa da leggere:
   è l'unico momento in cui il verde entra in questa testata. */
.ordine-capo.agisci .ordine-dove{background:var(--pino-velo)}
.ordine-capo.agisci .ordine-dove b{color:var(--acqua)}

/* Il conto: il totale si vede senza premere, e il tasto apre com'è fatto.
   Allineato a destra coi numeri tabulari, perché una colonna di soldi che non
   si allinea è la differenza fra una ricevuta e un modulo. */
.ordine-conto{display:flex;align-items:baseline;gap:.5rem;width:100%;margin-top:.15rem;
  padding:.6rem 0 0;border:0;border-top:1px solid var(--line);border-radius:0;
  background:none;font:inherit;color:var(--ink-2);text-align:left;cursor:pointer;min-height:2.75rem}
.ordine-conto strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ordine-conto i{margin-left:auto;font-style:normal;font-size:.9375rem;color:var(--pino);
  text-decoration:underline;text-underline-offset:.25rem;
  text-decoration-color:color-mix(in srgb,var(--pino) 40%,transparent)}
.ordine-conto[aria-expanded=true] i::after{content:' ▾'}
.ordine-conto:hover i{text-decoration-color:var(--pino)}

/* Le istruzioni per mettersela sulla Home: passi numerati, non un paragrafo.
   Chi le sta seguendo ha il telefono in mano e guarda una riga per volta. */
.passi-installa{margin:.6rem 0 0;padding-left:1.35rem;display:grid;gap:.5rem}
.passi-installa li{font-size:1rem;line-height:1.45;color:var(--ink-2)}
.passi-installa li b{color:var(--ink)}
/* La riga che dice «sei nel browser sbagliato»: sta prima dei passi, perché
   è la cosa che li rende inutili tutti e tre. */
.avviso-riga{margin:.4rem 0 0;padding:.6rem .75rem;border-radius:var(--r-1);
  background:var(--oro-velo);color:var(--oro);font-size:.9375rem;line-height:1.4}
.avviso-riga b{color:var(--oro)}

/* Le mosse sull'ordine: una riga, allineate a sinistra come tutto il resto,
   con l'aria giusta attorno. `.righe` dentro sono i contenitori che arrivano
   da `proposta()` e `ripensarci()`: qui perdono il margine proprio, perché a
   decidere le distanze è il contenitore e non i pezzi. */
.ordine-mosse{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem 1.1rem;
  margin:.15rem 0 .1rem}
.ordine-mosse>.righe{margin:0!important;gap:.15rem 1.1rem}
.ordine-mosse .card{width:100%;margin:.4rem 0!important}

/* La riga che cala quando la testata è scorsa via. */
.ordine-barra{position:fixed;left:0;right:0;top:calc(3.5rem + env(safe-area-inset-top));z-index:5;
  display:flex;align-items:baseline;gap:.5rem;width:100%;min-height:2.9rem;
  padding:.45rem max(.9rem,env(safe-area-inset-left)) .45rem max(.9rem,env(safe-area-inset-right));
  border:0;border-bottom:1px solid var(--line);background:var(--vetro);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  animation:cala var(--stato) var(--ios) both}
.ordine-barra b{font-size:.9375rem;font-weight:600;flex:0 0 auto}
.ordine-barra small{font-size:.9375rem;color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ordine-barra .pallo{flex:0 0 auto;align-self:center;width:.5rem;height:.5rem;border-radius:50%;background:var(--line-2)}
.ordine-barra .pallo.pronto,.ordine-barra .pallo.in_viaggio{background:var(--rame)}
.ordine-barra .pallo.all_hub{background:var(--pino)}
@keyframes cala{from{opacity:0;translate:0 -.4rem}}
@media (prefers-reduced-motion:reduce){ .ordine-barra{animation:none} }

@media (min-width:760px){
  #scrivi{left:50%;transform:translateX(-50%);width:min(46rem,100%);border-radius:var(--r-2) var(--r-2) 0 0;
    border:1px solid var(--line);border-bottom:0}
}

/* ── IL DESKTOP GUADAGNA UNA RELAZIONE, NON DEI MARGINI ──────────────────
 *
 * Michele, 27/08/2026: «il canvas desktop è enorme ma l'esperienza rimane una
 * colonnina da ~600 px: non minimalismo, ma spazio inutilizzato».
 *
 * A 1440 px questa stanza era una colonna da 660 px con, sotto l'ultimo
 * messaggio, cinquecento pixel di beige vuoto e poi un compositore bianco che
 * galleggiava scollegato da tutto. Non era una composizione: era una schermata
 * da telefono sospesa al centro di uno schermo grande.
 *
 * Da 1080 px in su: **il documento a sinistra, il contesto a destra.** La
 * conversazione — che è la cosa che scorre e che si legge — prende la colonna
 * larga; stato, posto, conto e bolla di accompagnamento diventano una guida
 * ferma sul fianco, che è il posto dove si guarda quando si vuole ricontrollare
 * un dato mentre si sta scrivendo a qualcuno. Sono le stesse informazioni del
 * telefono: cambia la RELAZIONE fra loro, che è quello che il desktop può dare
 * e che un margine più largo non dà.
 *
 * Sul telefono la guida torna in fila: una storia verticale sola (§7 e §42 del
 * brief). Non si tengono le colonne del desktop compresse.
 */
@media (min-width:1080px){
  body.stanza main.wrap{max-width:var(--colonna-banco);
    display:grid;grid-template-columns:minmax(0,1fr) 20.5rem;gap:.35rem 2.75rem;align-items:start}
  body.stanza .titolo-rotta{grid-area:1/1/2/3}
  /* ⚠️ LA CONVERSAZIONE CRESCE DAL BASSO. Un ordine appena nato ha due righe
     di storia: appoggiate in cima a una colonna alta 900 px lasciavano sotto
     un buco di beige che si legge come un guasto, non come una stanza nuova.
     Ancorate al fondo, sopra il campo dove si scrive, quel vuoto diventa
     quello che è — spazio che si riempirà — ed è anche il posto dove il
     messaggio più recente sta già su tutte le app in cui si parla con
     qualcuno: sotto gli occhi, sopra il pollice. */
  /* ⚠️ NIENTE `min-height` QUI. Ce l'aveva messo per riempire la colonna, e
     allungava la pagina quel tanto che bastava a renderla scorrevole: allora
     `disegna()`, che a fine caricamento scorre in fondo alla conversazione,
     la spingeva sotto il compositore fisso e l'ultimo messaggio finiva
     tagliato a metà. Basta `stretch`: la colonna prende l'altezza della riga —
     che la guida a destra detta già — e i messaggi si appoggiano al suo fondo
     senza che la pagina debba diventare più alta dello schermo. */
  body.stanza #corpo{grid-area:2/1/4/2;align-self:stretch;margin-top:.35rem;
    justify-content:flex-end;padding-bottom:.75rem}
  body.stanza #cima{grid-area:2/2/3/3;margin:.25rem 0 0}
  body.stanza #percorso{grid-area:3/2/4/3}
  /* Il compositore appartiene alla colonna del documento, non al centro dello
     schermo: prima era largo 46rem e centrato sul viewport, cioè allineato a
     niente. Adesso ha la larghezza del contenitore e si ferma dove finisce la
     conversazione, con la guida che gli resta a destra. */
  /* E niente cornice arrotondata che galleggia: su uno schermo largo il campo
     dove si scrive è il fondo della pagina, non una scheda appoggiata sopra.
     Un filetto in alto e la stessa carta, come il piede di un documento. */
  body.stanza #scrivi,body.stanza #scambio{left:50%;transform:translateX(-50%);
    width:min(var(--colonna-banco),100%);padding-right:calc(20.5rem + 2.75rem + 1.15rem);
    padding-left:1.15rem;border-radius:0;border-left:0;border-right:0;
    border-top:1px solid var(--line);box-shadow:none}
  body.stanza .nuovi{left:calc(50% - (20.5rem + 2.75rem)/2)}
  /* Una conversazione larga 53rem con le bolle al 80% diventa illeggibile: la
     riga di lettura resta quella di sempre. */
  body.stanza .bolla{max-width:min(34rem,72%)}
  body.stanza .filo .fatto{max-width:38rem}
}
/* «Ne sono arrivati di nuovi», mentre stai rileggendo più su. Galleggia sopra
   chi scrive, si preme, e la decisione di scendere resta di chi legge — invece
   di una pagina che salta al fondo da sola ogni venti secondi. Punto 94. */
.nuovi{
  position:fixed;left:50%;translate:-50% 0;bottom:calc(var(--barra) + 5.2rem);z-index:8;
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:2.5rem;padding:0 .9rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.875rem;font-weight:600;
  background:var(--ink);color:var(--ground);box-shadow:var(--om-2);
  animation:sali var(--stato) var(--ios) both;
}
.nuovi svg{width:1rem;height:1rem;rotate:90deg}
@keyframes sali{from{opacity:0;translate:-50% .5rem}}
@media (prefers-reduced-motion:reduce){ .nuovi{animation:none} }

.stanzieri .muto-chip{border-style:dashed;background:transparent;color:var(--ink-3);
  font-size:.75rem;align-items:center;padding:.4rem .6rem}

/* Il passaggio di mano, appeso sopra chi scrive. Un colore suo — non quello
   della conversazione — perche' non e' una cosa da leggere: e' una cosa da
   fare adesso, con l'altra persona davanti. */
#scambio{position:fixed;left:0;right:0;bottom:calc(var(--barra) + 5.2rem);z-index:7;
  display:flex;align-items:center;gap:.75rem;
  margin:0 auto;width:min(46rem,100%);
  padding:.6rem max(.9rem,env(safe-area-inset-left)) .6rem max(.9rem,env(safe-area-inset-right));
  background:var(--pino-velo);border-top:1px solid color-mix(in srgb,var(--pino) 22%,var(--line))}
#scambio .che{flex:1;min-width:0;font-size:.8125rem;color:var(--pino);line-height:1.35;font-weight:500}
#scambio .btn{flex:0 0 auto}
@media (min-width:760px){
  #scambio{left:50%;transform:translateX(-50%);border-radius:var(--r-2) var(--r-2) 0 0;
    border:1px solid color-mix(in srgb,var(--pino) 22%,var(--line));border-bottom:0}
}
/* Con lo scambio aperto, chi scrive scende di una tacca e il filo si accorcia:
   due barre sovrapposte coprono l'ultimo messaggio, che e' quello che si stava
   leggendo. */
body.stanza:has(#scambio:not([hidden])) main{padding-bottom:calc(var(--sotto-barra) + 7.7rem)}

/* Cosa fai in valle: due porte, ciascuna col suo stato. Una porta aperta non
   e' un tasto — non ci si preme sopra — e infatti non lo sembra. */
.porte-fai{display:grid;gap:.6rem;margin-top:.75rem}
.porta-fai{display:flex;gap:.8rem;align-items:flex-start;width:100%;text-align:left;
  padding:.85rem .95rem;border-radius:var(--r-2);border:1px solid var(--line);
  background:var(--surface);font:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--stato) linear,background var(--stato) linear}
.porta-fai:hover{border-color:var(--line-2)}
.porta-fai .segno{flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;background:var(--sunk);color:var(--ink-2)}
.porta-fai .segno svg{width:1.15rem;height:1.15rem}
.porta-fai b{display:block;font-weight:600;font-size:.9375rem}
.porta-fai span span{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.4;margin-top:.1rem}
.porta-fai.fatta{cursor:default;border-color:color-mix(in srgb,var(--pino) 26%,var(--line));
  background:var(--pino-velo)}
.porta-fai.fatta .segno{background:var(--pino);color:var(--su-accento)}
.porta-fai.attesa{cursor:default;border-style:dashed}
.porta-fai.attesa .segno{background:var(--oro-velo);color:var(--oro)}

/* L'aiuto sotto un campo. Non e' un suggerimento: e' la ragione per cui quel
   campo esiste, e senza, meta' dei punti di ritiro restano senza orari. */
.campo .aiuto{display:block;margin-top:.3rem;font-size:.8125rem;color:var(--ink-3);line-height:1.4}

/* Chi vuole entrare: una scheda per richiesta, coi campi del modulo srotolati.
   Non una tabella — le richieste sono poche e ciascuna e' una persona. */
.richiesta .testa-r{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.richiesta .testa-r a{text-decoration:none;color:inherit}
.richiesta .testa-r b{font-size:1rem;font-weight:600}
.dati-r{margin:0;display:grid;gap:.35rem}
.dati-r > div{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;align-items:baseline}
.dati-r dt{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.dati-r dd{margin:0;font-size:.9375rem;line-height:1.45}
@media (max-width:520px){ .dati-r > div{grid-template-columns:1fr} .dati-r dd{margin-top:-.15rem} }
.richiesta.decisa{opacity:.7}
/* Cosa succede se premi, scritto PRIMA di premere. «Accogli» non dice che un
   nome comparirà a catalogo in un mercato pubblico: lo dice questa riga. */
.conseguenza{margin:.7rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-2);line-height:1.45;text-wrap:pretty}
/* E cosa è successo, dopo: quando, per mano di chi, con che conseguenza.
   In mono perché è un registro, non una frase. */
.traccia{margin:.7rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);line-height:1.5}

/* ── le scelte: una riga con un segno, un titolo e una spiegazione ───────
   ⚠️ Stavano SOLO dentro lo <style> di `entra.html`, e le usano almeno tre
   pagine: le impostazioni, il foglio «cosa fai in valle», l'ingresso. Fuori da
   entra.html erano senza vestito — un'icona grande come mezzo schermo e due
   frasi attaccate («Guarda il tuo profiloCome lo vedono gli altri»). Nessun
   errore da nessuna parte: una classe che non esiste non si lamenta, si vede
   soltanto, e solo se qualcuno apre quella pagina.
   Adesso stanno qui, che e' il posto delle cose che usano in tante. */
.scelte{display:grid;gap:.5rem;margin-top:1.25rem}
@media (min-width:34rem){ .scelte.due{grid-template-columns:1fr 1fr} }
.scelta{
  display:flex;align-items:center;gap:.75rem;text-align:left;width:100%;
  padding:.9rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-2);font:inherit;color:inherit;cursor:pointer;
  text-decoration:none;
  transition:border-color var(--tocco) var(--ios),background var(--tocco) var(--ios),
             transform var(--tocco) var(--ios);
}
.scelta:hover{border-color:var(--line-2);background:var(--sunk)}
.scelta:active{transform:scale(.99)}
.scelta:focus-visible{outline:2px solid var(--acqua);outline-offset:2px}
.scelta .segno{width:2.15rem;height:2.15rem;border-radius:var(--r-1);flex:0 0 auto;
  display:grid;place-items:center;background:var(--sunk);color:var(--ink-2)}
.scelta .segno svg{width:1.15rem;height:1.15rem}
.scelta > span{display:block;min-width:0}
.scelta b{display:block;font-size:.925rem;font-weight:600;color:var(--ink)}
.scelta b + span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.35}

/* ── le tappe: un elenco numerato dove ogni riga e' un passo ─────────────
   Stessa storia di `.scelta`: vivevano nello <style> del deck, e le usa anche
   la pagina delle candidature — dove le tre righe «cosa vuol dire tenere il
   punto» comparivano senza pallini e senza gerarchia. Chi le legge sta
   decidendo se prendersi un impegno, ed e' il posto peggiore in cui mostrargli
   una pagina che sembra rotta.
   `animation` e `--stato` sopravvivono anche qui: `entra` e' definita nel
   sistema, e dove non c'e' l'animazione la riga resta comunque leggibile. */
.tappa{display:flex;gap:.75rem;padding:.8rem .9rem;border-bottom:1px solid var(--line);
  align-items:flex-start}
.tappa:last-child{border-bottom:0}
.tappa .n{width:1.7rem;height:1.7rem;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--sunk);color:var(--ink-2);
  font-size:.75rem;font-weight:650;font-variant-numeric:tabular-nums}
.tappa .n svg{width:.85rem;height:.85rem}
.tappa .che{flex:1;min-width:0}
.tappa .che b{display:block;font-size:1rem;font-weight:600}
.tappa .che span{display:block;font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.tappa .soldi{text-align:right;flex:0 0 auto;padding-left:.4rem}
.tappa .soldi .delta{display:block;font-family:var(--mono);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.tappa .soldi .tot{display:block;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tappa.oro .n{background:var(--pino);color:var(--su-accento)}
.delta.piu{color:var(--pino)} .delta.meno{color:var(--ink-2)} .delta.zero{color:var(--ink-3)}
.percorso{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);overflow:hidden}
/* Una porta che porta altrove e' un collegamento, non un tasto: eredita il
   vestito ma non la sottolineatura. */
a.porta-fai{text-decoration:none;color:inherit}

/* Una parola invece di un tondo, in testata. Tre tondi grigi di fila si
   distinguono solo a chi sa gia' cosa cerca. */
.parolina{display:inline-flex;align-items:center;min-height:2.4rem;padding:0 .7rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);text-decoration:none;font-size:.8125rem;font-weight:500;white-space:nowrap}
.parolina:hover{border-color:var(--line-2);color:var(--ink)}
@media (max-width:400px){ .parolina{padding:0 .55rem;font-size:.78rem} }

/* Una riga di movimento che si apre, con la scorciatoia al filo accanto.
   Due bersagli distinti: uno grande per il riepilogo, uno piccolo per la
   conversazione — e nessuno dei due dentro l'altro, che e' il modo di far
   aprire la cosa sbagliata a chi ha il pollice grosso. */
.riga.con-filo{display:flex;align-items:stretch;gap:0;padding:0}
.riga.con-filo .apre{flex:1;min-width:0;display:flex;align-items:center;gap:.75rem;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  padding:.7rem .2rem .7rem .9rem}
.riga.con-filo .filo-scorc{flex:0 0 auto;display:grid;place-items:center;width:2.75rem;
  color:var(--ink-3);border-left:1px solid var(--line)}
.riga.con-filo .filo-scorc:hover{color:var(--pino);background:var(--sunk)}
.riga.con-filo .filo-scorc svg{width:1.05rem;height:1.05rem}

/* ── cosa fai in valle: quattro interruttori ─────────────────────────────
   Non un mestiere da scegliere: quattro cose che si accendono. Il fornaio che
   tiene anche i pacchi del paese e scende in citta' il martedi' e' tre cose
   insieme, ed e' il caso migliore che possa capitare — non un'eccezione. */
.due-campi{display:grid;gap:0 .7rem;grid-template-columns:1fr}
@media (min-width:30rem){ .due-campi{grid-template-columns:1fr 1fr} }

.interruttori{display:grid;gap:.5rem;margin-top:.75rem}
.fila-fai{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center;
  padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.fila-fai.su{border-color:color-mix(in srgb,var(--pino) 26%,var(--line));background:var(--pino-velo)}
.fila-fai.attesa{border-style:dashed}
.fila-fai .testo{min-width:0}
.fila-fai .testo b{display:block;font-size:.9375rem;font-weight:600}
.fila-fai .testo span{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.4;margin-top:.1rem}
.fila-fai .segna{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--pino);color:var(--su-accento)}
.fila-fai .segna svg{width:1rem;height:1rem}
.fila-fai .segna.attende{width:auto;height:auto;padding:.2rem .55rem;border-radius:999px;
  background:var(--oro-velo);color:var(--oro);font-size:.75rem;font-weight:600}
.fila-fai .stato-fai{grid-column:1/-1;font-family:var(--mono);font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}

/* I giorni della settimana: sette bersagli da premere, non una tendina. */
.giorni{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
.gio input{position:absolute;opacity:0;width:0;height:0}
.gio span{display:inline-grid;place-items:center;min-width:2.6rem;min-height:2.4rem;padding:0 .5rem;
  border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);
  font-size:.8125rem;cursor:pointer;text-transform:capitalize}
.gio input:checked + span{background:var(--pino);border-color:var(--pino);color:var(--su-accento);font-weight:600}
.gio input:focus-visible + span{outline:2px solid var(--pino);outline-offset:2px}

/* ── la valle: ventun paesi, uno sotto l'altro ───────────────────────────
   La Val Seriana E' una lista: una strada sola che sale, coi paesi in fila.
   Disegnarla come una cartina era disegnare la cosa sbagliata. */
.zona{margin-top:2rem}
.zona .ztesta{margin-bottom:.85rem}
.zona .ztesta h2{font-family:var(--titolo);font-weight:500;font-size:1.35rem;
  letter-spacing:-.02em;margin:0}
.zona .ztesta p{margin:.2rem 0 0;font-size:.875rem;color:var(--ink-3);line-height:1.45;max-width:44ch}

.paese{padding:1rem 1.05rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface);margin-bottom:.6rem;
  opacity:0;translate:0 .75rem;
  transition:opacity var(--volo) var(--ios),translate var(--volo) var(--ios),border-color var(--stato) linear}
.paese.dentro{opacity:1;translate:0 0}
.paese:hover{border-color:var(--line-2)}

/* Il nome del paese è un BOTTONE: si tocca per vedere cosa c'è lì dentro.
   Alto 48 px come tutti i bersagli, largo quanto la scheda, e con la freccia
   che dice che porta da qualche parte — un titolo che si può premere e non lo
   dice è un titolo che nessuno preme. */
.pnome{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;min-height:3rem;padding:0;margin:0;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pnome h3{font-family:var(--titolo);font-weight:500;font-size:1.3rem;letter-spacing:-.02em;margin:0;
  flex:1;min-width:0}
.pnome .muto{font-family:var(--mono);font-size:.75rem;white-space:nowrap}
.pnome .pfreccia{flex:0 0 auto;display:flex;color:var(--ink-4);
  transition:transform var(--stato) var(--ios),color var(--stato) linear}
.pnome .pfreccia svg{width:1.15rem;height:1.15rem}
.pnome:hover .pfreccia{color:var(--pino);transform:translateX(2px)}
.pnome:active{transform:scale(.995)}
.pnome:focus-visible{outline:2px solid var(--pino);outline-offset:4px;border-radius:var(--r-1)}

.pfatti{display:grid;gap:.5rem;margin-top:.7rem}
@media (min-width:30rem){ .pfatti{grid-template-columns:1fr 1fr} }
.pfatto{padding:.6rem .75rem;border-radius:var(--r-1);background:var(--sunk)}
.pfatto .pt{display:block;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.pfatto b{display:block;font-size:.9375rem;font-weight:600;margin-top:.1rem}
.pfatto .pq{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.35;margin-top:.1rem}
.pfatto.ora{background:var(--pino-velo)}
.pfatto.ora .pt,.pfatto.ora b{color:var(--pino)}
.pfatto.manca{background:transparent;border:1px dashed var(--line-2)}
.pfatto.manca b{color:var(--ink-3)}

.pchi{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.ptag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:.8125rem;
  text-decoration:none;color:var(--ink-2)}
.ptag:hover{border-color:var(--pino);color:var(--pino)}
.ptag span{font-family:var(--mono);font-size:.8125rem;color:var(--ink-3)}
.pvuoto{margin:.7rem 0 0;font-size:.8125rem}

.pgiu{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
/* La scorciatoia al filo funziona anche quando la riga e' un collegamento e
   non un tasto: due bersagli affiancati, nessuno dentro l'altro. */
.riga.con-filo .apre{text-decoration:none;color:inherit}
a.riga.con-filo,.riga.con-filo{overflow:hidden}
/* Acceso ma incompleto: un trasportatore che non ha ancora detto dove passa.
   Non e' spento e non e' a posto — e dirgli «attivo» sarebbe una bugia che si
   scopre quando non gli arriva niente. */
.fila-fai.incompleto{border-color:color-mix(in srgb,var(--rame) 34%,var(--line));background:var(--rame-velo)}
.fila-fai.incompleto .stato-fai{color:var(--rame)}
/* Un metodo di pagamento davvero collegato si distingue da uno previsto:
   sono due cose diverse, e la seconda non prende soldi. */
.metodo.vivo{border-color:color-mix(in srgb,var(--pino) 30%,var(--line))}
.metodo .acceso{font-style:normal;font-family:var(--mono);font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--pino);
  background:var(--pino-velo);padding:.1rem .35rem;border-radius:999px;margin-left:.35rem}

/* Il piede, uguale ovunque: tre vie e una riga. Erano undici paragrafi
   diversi, uno per schermata — undici modi di finire una pagina. */
.piede{margin-top:2.5rem;padding-top:1.15rem;border-top:1px solid var(--line)}
.piede-vie{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;margin-bottom:.5rem}
.piede-vie a{font-size:.8125rem;color:var(--ink-3);text-decoration:none}
.piede-vie a:hover{color:var(--ink)}
.piede p{margin:0;font-size:.8125rem;color:var(--ink-3);line-height:1.5}
.piede p b{color:var(--ink-3);font-weight:600}

/* ── direzione approvata: bosco e carta ──────────────────────────────────
   Il sistema cambia una volta qui, non pagina per pagina. I contenitori sono
   fogli; le azioni ordinarie sono parole; la riga di rame porta stato e moto. */
.card,.borsa,.passi,.piano,.vuoto{box-shadow:none}
.card{background:var(--surface);border-color:var(--line);border-radius:var(--r-2)}

/* ⚠️ UN'AZIONE ORDINARIA NON È UN AVVERTIMENTO. Michele, 27/08/2026: «il rosso
   deve voler dire distruttivo, errore, eccezione importante. Per cose come
   "Proponi un altro punto" o "Cambia punto" usa un trattamento neutro».
   Prima questa riga dipingeva di rame OGNI tasto che non fosse pieno o verde:
   «Non ora», «Proponi un altro punto», «Tocca a Cascina» e «Annulla l'ordine»
   uscivano dello stesso identico colore. Con quattro rossi in una schermata il
   rosso smette di essere un segnale e diventa la tinta dei tasti secondari —
   e quello vero, l'unico irreversibile, non si distingue più.
   Adesso: l'azione ordinaria è una PAROLA in inchiostro, col filetto sotto che
   dice che si preme; il rame resta dove il commento qui sopra lo voleva, cioè
   su stato e moto; il rosso è solo di `.pericolo`. */
.btn:not(.pieno):not(.verde){
  min-height:2.75rem;padding-inline:.55rem;color:var(--ink-2);background:transparent;
  border-color:transparent;border-radius:0;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:.3rem
}
.btn:not(.pieno):not(.verde):hover{background:transparent;color:var(--ink);text-decoration-color:var(--ink)}
/* Il verde per le azioni che fanno avanzare il pacco: sono la cosa che il
   servizio ti chiede di fare, e devono staccarsi dalle altre parole senza
   diventare un secondo tasto pieno accanto al primo. */
.btn.avanti:not(.pieno){color:var(--pino);font-weight:600;
  text-decoration-color:color-mix(in srgb,var(--pino) 45%,transparent)}
.btn.avanti:not(.pieno):hover{color:var(--pino);text-decoration-color:var(--pino)}
.btn.pieno{background:var(--ink);color:var(--ground);border-color:var(--ink);border-radius:var(--r-1)}
.btn.verde{border-radius:var(--r-1)}
.quanti .btn{width:2.75rem;min-height:2.75rem;padding:0;border:1px solid var(--line-2);
  border-radius:var(--r-1);text-decoration:none;color:var(--ink);background:var(--surface)}
.quanti .btn:hover{background:var(--sunk)}

/* «Dello stesso produttore»: il nome ci porta, il «+» lo mette dentro.
 * ⚠️ Sta QUI sotto e non lassu' con le schede: `.btn:not(.pieno):not(.verde)`
 * poco piu' in alto rifa' tutti i tasti quieti, e con la stessa specificita'
 * vince quello scritto dopo. Il «+» verde scritto prima diventava un
 * trattino sottolineato — e si vedeva solo aprendo la scheda. */
.chip-doppio{display:inline-flex;align-items:center;gap:.2rem;
  padding:.2rem .2rem .2rem .3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:999px}
/* Dentro la pillola il nome non e' un tasto a se': e' il nome. Il filetto e la
   sottolineatura tornerebbero a farli sembrare due oggetti slegati, che e'
   esattamente quello che erano prima. */
.chip-doppio .btn.sm{border:0;background:transparent;text-decoration:none;padding:0 .3rem}
.chip-doppio .btn.sm:hover{background:transparent;text-decoration:underline}
.chip-doppio .btn.chip-piu{width:2.75rem;min-width:2.75rem;height:2.75rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pino);color:var(--su-accento);border:0;border-radius:999px;
  font-size:1.25rem;line-height:1}
.chip-doppio .btn.chip-piu:hover{background:var(--pino);filter:brightness(1.08);text-decoration:none}
.chip-doppio .btn.chip-piu.dentro{font-family:var(--mono);font-size:1rem}

/* I filtri sono un indice editoriale: una riga, parole e una traccia attiva. */
.pillole{gap:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:.35rem 0 0;padding:.15rem 0;scroll-padding-inline:.2rem}
.cerca + .pillole{border-top:0}
.pillole + .pillole{margin-top:-1px;padding-top:.15rem}
.pillole button{position:relative;min-height:2.7rem;padding:0 .15rem;border:0;border-radius:0;
  color:var(--ink-3);background:transparent;font-family:var(--mono);font-size:.8125rem}
.pillole button:hover{background:transparent;color:var(--ink)}
.pillole button[aria-pressed=true],.pillole button[aria-pressed=true].verde{
  color:var(--ink);background:transparent;border-color:transparent}
.pillole button[aria-pressed=true]::after{content:'';position:absolute;left:0;right:0;bottom:-.15rem;
  height:2px;background:var(--pino);animation:inchiostra var(--stato) var(--ios) both}
.pillole button i{color:var(--pino);opacity:1}
.cerca{margin-bottom:.8rem;padding:0;border-width:0 0 1px;border-color:var(--line-2);
  border-radius:0;background:transparent}
.cerca:focus-within{background:transparent;border-color:var(--pino);box-shadow:none}
.posta-sommario{margin:.2rem 0 1rem;font-size:.9rem}
.posta-gruppo{margin:1.15rem 0 .35rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);
  color:var(--ink-2);font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.04em}

/* Carta fotografica attuale: una foto vera, una gerarchia, nessun doppio box. */
.griglia{grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:1rem}
.oggetto{border-radius:var(--r-2);background:var(--surface);box-shadow:none}
.oggetto:hover{border-color:var(--rame);box-shadow:var(--om-2);transform:translateY(-1px)}
.oggetto .figura{aspect-ratio:4/3}
.oggetto .sotto{padding:.85rem .9rem .95rem}
.oggetto .prezzo{color:var(--rame)}

/* Il foglio ha sempre un'uscita visibile e non lascia che una foto diventi la
   pagina intera su desktop. */
.foglio{padding-top:1rem;background:var(--surface)}
.foglio .chiudi-foglio{position:sticky;top:0;right:auto;z-index:4;float:right;width:2.75rem;height:2.75rem;
  margin:-.25rem -.55rem .2rem .75rem;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:var(--surface);color:var(--ink);font:inherit;font-size:1.35rem;cursor:pointer}
.chiudi-foglio:hover{border-color:var(--rame);color:var(--rame)}
.chiudi-foglio:focus-visible{outline:2px solid var(--rame);outline-offset:2px}
.scheda-prodotto{display:grid;gap:1rem;clear:both}
.scheda-media{overflow:hidden;border-radius:var(--r-2);background:var(--sunk)}
.scheda-media .figura{display:block;width:100%;height:auto;max-height:19rem;aspect-ratio:4/3;object-fit:cover}
.scheda-dettaglio{min-width:0}
@media(min-width:50rem){
  .foglio.foglio-prodotto{width:min(58rem,94vw);padding:1rem}
  .foglio-prodotto .scheda-prodotto{grid-template-columns:minmax(0,1.08fr) minmax(20rem,.92fr);align-items:start}
  .foglio-prodotto .scheda-media{position:sticky;top:0}
  .foglio-prodotto .scheda-media .figura{height:min(64dvh,34rem);max-height:none;aspect-ratio:auto}
}

/* La mini rail conserva solo le tre destinazioni frequenti. È opaca abbastanza
   da restare leggibile, non una lastra di vetro ornamentale. */
.tabs{height:3.75rem;max-width:29rem;background:var(--surface);box-shadow:var(--om-2)}
.tabs a{gap:.05rem;font-family:var(--mono);font-size:.6875rem}
.tabs a[aria-current=page]{font-weight:500;color:var(--ink)}
.tabs a[aria-current=page]::after{width:1.5rem;height:2px;border-radius:0;background:var(--pino);
  animation:inchiostra var(--stato) var(--ios) both}
.tabs .pastiglia{background:var(--pino)}
@media(min-width:48rem){
  body{padding-bottom:5rem}
  .tabs{height:3.5rem;left:50%;right:auto;transform:translateX(-50%);bottom:1rem}
  .tabs a{flex-direction:row;gap:.45rem;font-size:.75rem}
  .tabs a[aria-current=page]::after{bottom:.25rem}
}

/* Checkout: fieldset e legend danno un solo nome visibile e accessibile a ogni
   domanda; le scelte restano righe, non capsule concorrenti. */
.paghe{display:grid;gap:.5rem;margin-top:0}
.paga{display:grid;grid-template-columns:1.25rem 1fr;gap:.7rem;align-items:start;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);cursor:pointer}
.paga input{width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--pino)}
.paga span,.paga b,.paga small{display:block}
.paga b{font-weight:600}
.paga small{margin-top:.15rem;color:var(--ink-3);font-size:.875rem;line-height:1.4}
.paga.scelto{border-color:var(--rame);box-shadow:inset 3px 0 0 var(--rame)}
.paga.scelto b{color:var(--rame)}
.paga.spento{opacity:.52;cursor:not-allowed}

/* Chiusura della transazione: una riga d'inchiostro mostra dove passa il
   denaro. Contanti e portafoglio raccontano due fatti diversi. */
.transazione-fatta{clear:both;padding:.4rem 0 .2rem;text-align:left}
.transazione-fatta .tx-tipo{display:block;color:var(--rame);font-family:var(--mono);
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.transazione-fatta .tx-importo{display:block;margin:.45rem 0;font-family:var(--mono);
  font-size:clamp(2.4rem,10vw,4rem);font-weight:500;letter-spacing:-.08em;line-height:1}
.tx-flusso{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;
  align-items:center;margin:1.25rem 0 .9rem;color:var(--ink-3);font-family:var(--mono);font-size:.72rem}
.tx-flusso>span:last-child{text-align:right}
/* ── LA STRADA DEL DENARO È UNA M ────────────────────────────────────────
   Michele: «nice animation send money but like with M path fading, and on
   other screen path entering con + euro».
   Era una riga dritta e la moneta ci scorreva sopra. La M del marchio non è
   un'illustrazione appiccicata: è la STRADA su cui viaggia il numero, e le due
   salite raccontano quello che succede davvero — i soldi non vanno da A a B,
   passano per delle mani. Si disegna con `stroke-dashoffset`, la moneta la
   percorre con `offset-path`, e tutte e due si spengono in fondo. */
.tx-traccia{position:relative;height:2.4rem;overflow:visible;color:var(--rame)}
.tx-traccia svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tx-em{stroke-dasharray:96;stroke-dashoffset:96;opacity:.9;
  animation:tracciaM var(--lento) var(--ios) both, sfumaM var(--lento) var(--ios) var(--lento) both}
.tx-moneta{position:absolute;left:0;top:0;width:1.65rem;height:1.65rem;display:grid;place-items:center;
  border-radius:50%;background:var(--rame);color:var(--surface);font-family:var(--mono);font-size:.72rem;
  offset-path:path('M 6 30 L 6 8 L 20 24 L 34 8 L 34 30');
  offset-rotate:0deg;offset-distance:0%;
  animation:passaSullaM var(--lento) var(--ios) var(--tocco) both}
/* Chi INCASSA la vede arrivare dall'altra parte: stessa strada, verso opposto.
   È l'unica differenza fra le due schermate, ed è quella che conta. */
.tx-flusso.entra .tx-moneta{animation-name:passaSullaMIndietro}
.tx-flusso.entra .tx-em{animation-direction:reverse,normal}
@keyframes tracciaM{to{stroke-dashoffset:0}}
@keyframes sfumaM{from{opacity:.9}to{opacity:.25}}
@keyframes passaSullaM{from{offset-distance:0%;opacity:0}
  8%{opacity:1} 92%{opacity:1} to{offset-distance:100%;opacity:0}}
@keyframes passaSullaMIndietro{from{offset-distance:100%;opacity:0}
  8%{opacity:1} 92%{opacity:1} to{offset-distance:0%;opacity:0}}
/* Il segno davanti al numero: verde quando entra, inchiostro quando esce.
   Il rosso qui sarebbe sbagliato — pagare una spesa non è un errore. */
.transazione-fatta .tx-importo.entra{color:var(--pino)}
@media (prefers-reduced-motion:reduce){
  .tx-em{animation:none;stroke-dashoffset:0;opacity:.45}
  .tx-moneta{animation:none;offset-distance:50%}
}
.tx-quote{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:1rem;background:var(--line);border:1px solid var(--line)}
.tx-quote span{min-width:0;padding:.65rem .45rem;background:var(--surface);opacity:0;
  animation:quotaArriva var(--stato) var(--ios) forwards}
.tx-quote span:nth-child(2){animation-delay:100ms}.tx-quote span:nth-child(3){animation-delay:170ms}.tx-quote span:nth-child(4){animation-delay:240ms}
.tx-quote small,.tx-quote b{display:block}.tx-quote small{color:var(--ink-3);font-size:.65rem}.tx-quote b{font-family:var(--mono);font-size:.8rem}
/* In contanti la strada è tratteggiata: quei soldi non passano da qui. */
.transazione-fatta.contanti .tx-em{stroke-dasharray:5 4;stroke-dashoffset:0;animation:sfumaM var(--lento) var(--ios) var(--lento) both}
@keyframes quotaArriva{from{opacity:0;translate:0 .35rem}to{opacity:1;translate:0}}

/* Il filo è una conversazione operativa: meno capsule, un solo comando chiaro,
   e nessuna collisione fra azione, composizione e rail. */
.stanzieri{flex-wrap:wrap;overflow:visible;gap:.15rem .7rem;padding:.4rem 0 0}
.stanzieri .chip{display:inline-flex;align-items:baseline;gap:.3rem;padding:.25rem 0;border:0;
  border-radius:0;background:transparent;color:var(--ink-2)}
.stanzieri .chip + .chip::before{content:none}
.stanzieri .muto-chip{width:100%;padding:.25rem 0 0;border:0;color:var(--ink-4)}
#scambio{bottom:calc(var(--barra) + 5.35rem);background:var(--pino-velo);
  border-color:color-mix(in srgb,var(--pino) 28%,var(--line))}
#scambio .che{color:var(--ink-2)}
#scambio .btn.pieno{background:var(--pino);border-color:var(--pino);color:var(--su-accento)}
#scrivi{bottom:var(--barra);background:var(--surface)}
body.stanza:has(#scambio:not([hidden])) main{padding-bottom:calc(var(--barra) + 10rem)}

/* Gli eventi del servizio formano una traccia leggibile, non una manciata di
   righe sospese nel vuoto della conversazione. */
.filo.lungo{position:relative;padding-left:1.15rem}
.filo .giorno{align-self:flex-start;margin-left:.85rem}
.filo .fatto{align-self:flex-start;position:relative;max-width:42rem;text-align:left;
  margin-left:.15rem;padding:.35rem .7rem .55rem 1.15rem;border-left:1px solid var(--line)}
.filo .fatto::before{content:'';position:absolute;left:-.28rem;top:.68rem;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--pino);box-shadow:0 0 0 3px var(--ground)}

/* Nel filo la barra globale era un secondo sistema di navigazione sotto il
   compositore. La stanza ha già il ritorno nel marchio e nel riepilogo: qui il
   fondo appartiene al messaggio, senza fessure o doppi vetri. */
body.stanza{padding-bottom:0}
body.stanza .tabs{display:none}
body.stanza main{padding-bottom:calc(var(--scrivi-h,5.45rem) + var(--scambio-h,0px) + 1.5rem)}
body.stanza #scrivi{bottom:0;padding-bottom:max(.55rem,env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(38,71,50,.08)}
body.stanza #scambio{bottom:var(--scrivi-h,5.45rem)}
body.stanza .nuovi{bottom:calc(var(--scrivi-h,5.45rem) + var(--scambio-h,0px) + .5rem)}
body.stanza:has(#scambio:not([hidden])) main{padding-bottom:calc(var(--scrivi-h,5.45rem) + var(--scambio-h,4.5rem) + 1.5rem)}
body.stanza #cima{margin-bottom:.15rem}
body.stanza .capo{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .7rem;padding:.62rem .75rem}
body.stanza .capo-t{min-width:0}.capo-a{position:static;grid-column:2;grid-row:1;font-size:.72rem;white-space:nowrap}
body.stanza .stanzieri{padding:.28rem .1rem 0;gap:.08rem .65rem}
body.stanza .stanzieri .chip{font-size:.75rem;padding:.18rem 0}
body.stanza .stanzieri .muto-chip{margin-top:.05rem;font-size:.68rem}
body.stanza .filo.lungo{gap:.15rem;margin-top:.35rem;padding-left:.8rem}
body.stanza .filo .giorno{margin:.75rem 0 .2rem .55rem;font-size:.75rem}
/* I fatti del servizio sono la STORIA dell'ordine — «è partito alle 9,40»,
   «l'ha accettato» — e a 12,5 px erano il testo più piccolo di una schermata
   che parla di roba da andare a prendere. 15 px, che è il pavimento di questo
   foglio, con l'ora in mono a fare da condimento. */
body.stanza .filo .fatto{padding:.3rem .4rem .45rem .95rem;font-size:.9375rem}
body.stanza .filo .fatto::before{top:.54rem}
body.stanza .titolo-rotta{margin:.65rem 0 .25rem}

@media(max-width:32rem){
  .hero{padding-top:2rem}.hero p{font-size:1rem}
  .tx-quote{grid-template-columns:1fr 1fr}
  #scambio{align-items:flex-start;flex-wrap:wrap;gap:.35rem .6rem}
  #scambio .che{width:100%;flex-basis:100%}
  #scambio .btn{min-height:2.75rem}
}

/* Una sola utilità nuova nelle impostazioni, non un altro menu di scorciatoie. */
.installa-app{padding:.95rem 1rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.installa-app .occhio{margin:0 0 .35rem}.installa-riga{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.installa-riga h2{font-size:1.15rem;margin:0}.installa-riga .sotto{margin:.2rem 0 0;max-width:42ch}
.installa-riga .btn{flex:0 0 auto}
@media(max-width:22rem){.installa-riga{align-items:flex-start;flex-direction:column}.installa-riga .btn{width:100%}}

/* ── LA VALLE COME PICCOLO MONDO ─────────────────────────────────────────
 * Non una cartina geografica da pizzicare e non ventun rettangoli in colonna:
 * la sola strada della valle diventa il bordo di un mondo che si esplora con
 * uno scorrimento orizzontale. La curva è informazione (si sale) e non scena. *
.atlante-testa{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:.8rem}
.atlante-testa h2{font-size:clamp(1.45rem,4vw,2rem);letter-spacing:-.045em}
.atlante-testa .occhio{margin:0 0 .2rem}
.atlante-testa > p{max-width:34ch;margin:0;color:var(--ink-3);font-size:.875rem;line-height:1.45}
.fermata-orbita{position:absolute;translate:-50% 0;width:9rem;min-height:5.5rem;padding:.25rem .35rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;scroll-snap-align:center;
  color:var(--ink);border:0;background:transparent;font:inherit;cursor:pointer}
.fermata-orbita b{font-size:.875rem;line-height:1.1;background:var(--surface);padding:.16rem .35rem;border-radius:6px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 75%,transparent)}
.nodo-orbita{width:1rem;height:1rem;border-radius:50%;background:var(--pino);border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--pino),0 6px 16px rgba(0,139,72,.18);margin-bottom:.32rem}
.micro-orbita{font-family:var(--mono);font-size:.625rem;line-height:1.25;color:var(--ink-3);margin-top:.25rem}
.badge-orbita{position:absolute;top:0;right:1.5rem;min-width:1.3rem;height:1.3rem;padding:0 .25rem;
  border-radius:999px;background:var(--rame);color:var(--su-accento);font:600 .6875rem/1.3rem var(--mono)}
.fermata-orbita:hover .nodo-orbita,.fermata-orbita:focus-visible .nodo-orbita{transform:scale(1.3);background:var(--rame)}
.fermata-orbita:focus-visible{outline:2px solid var(--pino);outline-offset:1px;border-radius:var(--r-1)}
.legenda-orbita{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem .25rem 0;color:var(--ink-3);font-size:.75rem}
.legenda-orbita span{display:flex;align-items:center;gap:.35rem}.legenda-orbita i{width:.55rem;height:.55rem;border-radius:50%}
.legenda-orbita .verde{background:var(--pino)}.legenda-orbita .corallo{background:var(--rame)}

/* Più contenuto, meno cornice: nelle schermate operative la gerarchia viene
   dal testo e dagli stati, non da aria verticale ripetuta fra ogni scheda. */
.ordine-cosa{display:block;margin-top:.28rem;font-weight:600;font-size:1rem;line-height:1.3;color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.consegna-ordine{display:grid;gap:.1rem;margin-top:.55rem;padding:.55rem .65rem;border-left:3px solid var(--oro);background:var(--sunk)}
.consegna-ordine span{color:var(--ink-2);font-size:.8125rem;line-height:1.35}
.candidature-ordine{margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--line)}
.candidature-ordine .occhio{margin:0 0 .4rem;font-size:.67rem}
.candidatura-riga{display:flex;justify-content:space-between;align-items:center;gap:.65rem}
.candidatura-riga>span:first-child{display:grid;gap:.12rem;min-width:0}
.candidatura-riga small{color:var(--ink-2);line-height:1.3}
.candidatura-riga .righe{flex-wrap:nowrap;margin:0}
#conto{transition:opacity var(--tocco) ease}
#conto.sta-calcolando{opacity:.62;pointer-events:none}
.nota-conto{margin:.35rem 0 .2rem;padding:.45rem .6rem;background:var(--sunk);color:var(--ink-2);font-size:.78rem;line-height:1.35}
#corpo .scala .card + .card{margin-top:.55rem}
body:has(#saldi) #corpo .sez{margin-top:1.65rem}
.gruppo-oppure{margin-top:.55rem!important}
.gruppo-oppure .paghe{grid-template-columns:1fr}
.promessa-ritiro{margin-top:.65rem!important}

/* Il momento del QR è una ricevuta prima della firma: prima il pacco, poi il
   conto, infine una conferma esplicita. */
.prepassaggio{padding:.8rem;border:1px solid var(--line);border-radius:var(--r-1);background:var(--ground)}
.prepassaggio .occhio{margin:0 0 .2rem}.prepassaggio-cosa{display:block;font-size:1.05rem;line-height:1.3}
.prepassaggio > .muto{margin:.35rem 0 .65rem;font-size:.8125rem}
.preconto{border-top:1px solid var(--line);padding-top:.45rem}
.preconto > div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.2rem 0;font-size:.8125rem}
.preconto .preconto-tot{font-size:1rem;padding-bottom:.4rem}.preconto-quieto{margin:.4rem 0 0;color:var(--ink-3);font-size:.8125rem}
.conferma-passo{margin-top:.8rem}

@media (max-width:38rem){
  .atlante-testa{display:block}.atlante-testa > p{margin-top:.35rem}
  .foglio .ricevuta{margin-top:.5rem}
}

/* ── LA VALLE SULLA CARTA VERA ───────────────────────────────────────────
   La mappa è una schermata operativa: poca testata, quasi tutto spazio alla
   geografia, comandi leggibili sopra e non nascosti dentro il provider. */
/* Il nucleo di posizionamento di Leaflet resta locale: se il CDN del foglio
   esterno non risponde, le tessere non diventano una colonna alta tre pagine. */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,
.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden;-webkit-tap-highlight-color:transparent}.leaflet-container img{max-width:none!important;max-height:none!important}
.leaflet-tile{visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-animated{transform-origin:0 0}
.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}
.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}
.leaflet-control{position:relative;z-index:800;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}
.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}
.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}
.leaflet-control-zoom a{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 20px/1 var(--sans)}
.leaflet-control-zoom a:first-child{border-radius:8px 8px 0 0}.leaflet-control-zoom a:last-child{border-radius:0 0 8px 8px}
.leaflet-control-attribution{padding:2px 5px;background:rgba(255,255,255,.85)}
.hero-operativa{padding:1.35rem 0 .65rem}
.hero-operativa h1{font-size:clamp(2.2rem,6vw,4rem)}
.hero-operativa p:last-child{margin-top:.3rem}
/* ── ⚠️ UNA PAGINA CHE È UNA CARTA DEVE ESSERE TUTTA CARTA ────────────────
 *
 * Michele, 28/08/2026: «pudding weird + not filled map nice?».
 *
 * A 1440×900 la carta era un rettangolo di 890×585 px in mezzo al beige: aria
 * sopra, ai lati, e centonovanta pixel di niente sotto prima della barra. Su
 * una schermata che ESISTE per essere una carta, tutto quello che non è carta
 * è carta in meno — e la geografia della Val Seriana in un francobollo è
 * esattamente il contrario di quello che questa pagina deve far vedere.
 *
 * Adesso: una riga di comandi in cima, e sotto la carta fino in fondo. La
 * barra bassa ci galleggia sopra, come su ogni carta che si sia mai usata. */
/* ⚠️ `main.wrap.valle-mappa`, e non `.valle-mappa` e basta: la pagina è anche
   `.wrap.largo`, che ha due classi e quindi vince — la carta restava larga
   58 rem in mezzo a uno schermo da 1440, cioè il difetto che si stava
   correggendo, ma solo in orizzontale. */
main.wrap.valle-mappa{display:flex;flex-direction:column;gap:.6rem;
  max-width:none;padding-left:max(.9rem,env(safe-area-inset-left));
  padding-right:max(.9rem,env(safe-area-inset-right));
  height:calc(100dvh - 3.5rem - env(safe-area-inset-top));min-height:26rem}
.valle-mappa .commuta{margin:0}

/* Dove si guarda a sinistra, cosa si guarda a destra. Una riga sola. */
/* ⚠️ L'ALTEZZA SI PRENOTA. `#commuta` lo riempie il JavaScript dopo il primo
   disegno: la riga nasce alta zero, poi cresce, e la carta sotto scende di
   cinquanta pixel sotto gli occhi di chi sta già guardando. Misurato dalla
   prova di velocità appena introdotta: CLS 0,155 su un tetto di 0,08 — la
   pagina era ferma a zero prima di questa modifica, ed è esattamente il
   difetto che quella prova esiste per prendere. */
.valle-barra{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem 1.25rem;flex-wrap:wrap;padding-top:.6rem;min-height:3.35rem}
.valle-barra .commuta{min-height:2.75rem}
/* ⚠️ E LE DUE METÀ PARLANO LA STESSA LINGUA. «Mappa | Lista» era una capsula
   grassa dentro una vaschetta, i filtri erano parole con una traccia sotto:
   due grammatiche a venti pixel di distanza, nella stessa riga. Su questa
   pagina la capsula diventa parole — è la stessa domanda, «cosa guardo», fatta
   due volte. Altrove `.commuta` resta com'era: lì è sola. */
.valle-barra .commuta{padding:0;background:none;gap:1.25rem}
.valle-barra .commuta a{position:relative;min-height:2.75rem;padding:0 .1rem;border-radius:0;
  background:none;color:var(--ink-3);font-weight:500}
.valle-barra .commuta a[aria-current="page"],
.valle-barra .commuta a.qui{background:none;color:var(--ink);font-weight:600;box-shadow:none}
.valle-barra .commuta a[aria-current="page"]::after,
.valle-barra .commuta a.qui::after{content:'';position:absolute;left:0;right:0;bottom:.35rem;
  height:2px;background:var(--pino)}

/* ⚠️ NON PIÙ CAPSULE. Tre pillole molli da 48 px con dentro tre parole erano
   il «pudding»: grasse, senza struttura, e larghe abbastanza da strabordare
   dalla carta su un telefono. Qui i filtri prendono la grammatica che il resto
   del sito usa già per gli indici — parole, e una traccia sotto quella accesa.
   Le stesse otto combinazioni, in un terzo dello spazio. */
.mappa-filtri{display:flex;align-items:center;gap:1rem;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.mappa-filtri::-webkit-scrollbar{display:none}
.mappa-filtri button{position:relative;min-height:2.75rem;padding:0 .1rem;border:0;border-radius:0;
  background:transparent;color:var(--ink-3);font:500 .9375rem var(--sans);white-space:nowrap;cursor:pointer}
.mappa-filtri button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.mappa-filtri button[aria-pressed="true"]::after{content:'';position:absolute;
  left:0;right:0;bottom:.35rem;height:2px;background:var(--pino)}
.mappa-filtri button:hover{color:var(--ink)}
/* Il contatore dei pacchi: NON rosso. In questo sistema il rosso vuol dire
   distruttivo, e «otto pacchi aspettano qualcuno» è un'occasione, non un
   guasto — è la riga su cui il servizio sta in piedi. */
.mappa-filtri i{display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;
  margin-left:.3rem;padding:0 .25rem;border-radius:999px;
  background:var(--pino);color:var(--su-accento);font:600 .65rem/1 var(--mono);font-style:normal}
.mappa-filtri button[aria-pressed="false"] i{background:var(--line-2)}
.mappa-cerca{margin:0}.mappa-cerca input{min-height:2.8rem;padding:.6rem .85rem}
.mappa-cornice{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;
  border:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;border-bottom:0;
  overflow:hidden;background:var(--sunk);box-shadow:var(--om-1)}
#mappa-reale{height:100%;width:100%;z-index:1;background:#e8eadf}
.mappa-ripristina{position:absolute;z-index:500;left:.7rem;top:.7rem;min-height:3rem;padding:0 .85rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 .78rem var(--sans);box-shadow:var(--om-1);cursor:pointer}
.mappa-legenda{position:absolute;z-index:500;left:.7rem;bottom:.7rem;display:flex;gap:.65rem;padding:.38rem .55rem;
  border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--om-1);font-size:.7rem;color:var(--ink-2)}
.mappa-legenda span{display:flex;align-items:center;gap:.3rem}.mappa-legenda i{width:.65rem;height:.65rem;border-radius:50%;background:var(--pino)}
.mappa-legenda i.pacco{border-radius:.18rem;background:var(--rame)}
.mappa-nota{margin:.5rem .2rem 0;color:var(--ink-3);font-size:.78rem;line-height:1.4}
.leaflet-container{font-family:var(--sans);color:var(--ink)}
.leaflet-control-attribution{font-size:10px!important}
/* ⚠️ SI CLICCA QUELLO CHE SI VEDE, NON LA SCATOLA CHE LO CONTIENE.
   Michele, 01/09/2026: «map: if click not very close to a point, still I have
   the point that opens = weird interaction; because of that I cannot easily
   double click zoom».
   Ogni segno di paese e' un riquadro da 120 x 42 px — il pallino piu' il nome
   piu' l'aria intorno — e quel riquadro intercettava i clic. Con ventitre'
   paesi la carta era coperta di rettangoli invisibili: si apriva un paese
   toccando il vuoto, e il doppio clic per ingrandire non arrivava mai alla
   carta. Adesso il contenitore lascia passare, e prendono solo le tre cose che
   si vedono: il pallino, il nome, il numero. */
.leaflet-mercatorum{background:transparent;border:0;pointer-events:none}
.marcatore-hub>i,.marcatore-hub>span,.marcatore-hub small,
.pacco-marker>span{pointer-events:auto;cursor:pointer}
.marcatore-hub{display:flex;align-items:center;gap:.32rem;width:max-content;max-width:8.5rem;color:var(--ink);filter:drop-shadow(0 2px 4px rgba(12,24,16,.18))}
.marcatore-hub.a-sinistra{flex-direction:row-reverse}
.marcatore-hub>i{display:block;width:1rem;height:1rem;flex:0 0 auto;border:3px solid var(--surface);border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 1px var(--ink-3)}
.marcatore-hub.attivo>i{background:var(--pino);box-shadow:0 0 0 1px var(--pino)}
.marcatore-hub>span{overflow:hidden;text-overflow:ellipsis;padding:.18rem .35rem;border:1px solid rgba(35,45,36,.13);
  border-radius:.35rem;background:rgba(255,252,247,.94);font:600 .72rem/1.15 var(--sans);white-space:nowrap}
.marcatore-hub small{display:grid;place-items:center;width:1.1rem;height:1.1rem;margin-left:-.2rem;border-radius:50%;background:var(--pino);color:white;font:600 .6rem var(--mono)}
.marcatore-hub>span,.marcatore-hub>small{display:none}.marcatore-hub.chiave>span,.mappa-dettaglio .marcatore-hub>span,
.mappa-dettaglio .marcatore-hub>small{display:grid}.marcatore-hub.a-sinistra small{margin-left:0;margin-right:-.2rem}
.pacco-marker>span{position:relative;display:grid;place-items:center;width:2.35rem;height:2.35rem;border:3px solid var(--surface);
  border-radius:.7rem;background:var(--rame);color:var(--su-accento);box-shadow:0 5px 16px rgba(162,62,34,.35)}
.pacco-marker svg{width:1.25rem;height:1.25rem}.pacco-marker b{position:absolute;right:-.4rem;top:-.5rem;display:grid;place-items:center;
  min-width:1.15rem;height:1.15rem;padding:0 .2rem;border:2px solid var(--surface);border-radius:999px;background:var(--ink);color:var(--ground);font:600 .62rem var(--mono)}
.foglio-luogo h2{margin:.1rem 0 0}.azioni-luogo{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.75rem}
.luogo-blocco{display:grid;gap:.16rem;margin-top:1rem;padding:.85rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--ground)}
.luogo-blocco .occhio{margin:0}.luogo-blocco b{font-size:1rem}.luogo-blocco small{color:var(--ink-3);line-height:1.4}
.vuoto-luogo{border-style:dashed}.mappa-foglio-sez{margin-top:1.15rem}.mappa-foglio-sez .capo-sez{margin-bottom:.4rem}
.mappa-foglio-sez h3{font-family:var(--sans);font-size:1rem;letter-spacing:0}.mappa-foglio-sez .capo-sez>span{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.mappa-pacchi-lista,.mappa-produttori{display:grid;gap:.4rem}.mappa-pacco-riga,.mappa-produttore-riga{display:grid;align-items:center;gap:.65rem;
  min-height:3.4rem;padding:.65rem .7rem;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);color:inherit;text-decoration:none}
.mappa-produttore-riga{grid-template-columns:minmax(0,1fr) auto}.mappa-produttore-riga a{color:inherit;text-decoration:none}.mappa-produttore-riga .mappa-indicazioni{color:var(--rame);font-size:.75rem;font-weight:600}
.mappa-pacco-riga{grid-template-columns:2rem minmax(0,1fr) auto}.mappa-pacco-segno{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:var(--rame-velo);color:var(--rame)}
.mappa-pacco-segno svg{width:1rem;height:1rem}.mappa-pacco-riga b,.mappa-pacco-riga small,.mappa-produttori b,.mappa-produttori small{display:block}
.mappa-pacco-riga b,.mappa-produttori b{font-size:.875rem}.mappa-pacco-riga small,.mappa-produttori small{margin-top:.12rem;color:var(--ink-3);font-size:.75rem;line-height:1.3}
.mappa-pacco-riga strong{font:600 .78rem var(--mono);color:var(--pino)}
.mappa-fallback{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.45rem;margin-top:.75rem}
.mappa-fallback button{min-height:3.8rem;padding:.7rem;text-align:left;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.mappa-fallback b,.mappa-fallback span{display:block}.mappa-fallback span{margin-top:.2rem;color:var(--ink-3);font-size:.75rem}

/* Posta: ogni conversazione ha un oggetto, un ultimo fatto e uno stato. Non
   tre righe che si contendono lo stesso peso. */
.cerca-posta{margin-top:.45rem}.posta-sez .capo-sez{padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.posta-filtri{margin:.55rem 0 0;overflow-x:auto}.posta-filtri button{white-space:nowrap}
.posta-sez .capo-sez>span{font:400 .75rem var(--mono);color:var(--ink-3)}
.posta-elenco{display:grid}.posta-riga{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:.75rem;align-items:center;
  min-height:5rem;padding:.75rem .3rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.posta-riga:hover{background:color-mix(in srgb,var(--sunk) 68%,transparent)}.posta-riga:focus-visible{outline:2px solid var(--pino);outline-offset:2px}
.posta-segno{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--pino-velo);color:var(--pino)}
.posta-segno svg{width:1.2rem;height:1.2rem}.posta-segno.iniziali{border-radius:50%;font:600 .7rem var(--mono);background:var(--sunk);color:var(--ink-2)}
.posta-direzione{font:600 1.25rem/1 var(--mono)}.posta-valore{color:var(--pino);font:600 .75rem var(--mono);white-space:nowrap}.posta-valore.esce{color:var(--ink)}.posta-valore small{font-size:.62rem;font-weight:400}
.posta-direzione.in_uscita{background:var(--rame);color:var(--su-accento);box-shadow:0 5px 14px color-mix(in srgb,var(--rame) 24%,transparent)}
.posta-direzione.in_arrivo{background:var(--pino);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--pino) 22%,transparent)}
.posta-corpo{min-width:0}.posta-corpo>*{display:block}.posta-meta{margin-bottom:.12rem;color:var(--ink-3);font:400 .67rem var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posta-corpo>b{font-size:.92rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.posta-ultimo{margin-top:.22rem;color:var(--ink-3);font-size:.78rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posta-ultimo strong{color:var(--ink-2);font-weight:600}.posta-stato{display:grid;justify-items:end;gap:.35rem}.posta-stato>small{color:var(--ink-3);font:400 .67rem var(--mono)}
.posta-stato>i{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:999px;background:var(--rame);color:var(--su-accento);font:600 .65rem var(--mono)}
.persona-posta{min-height:4.4rem}
/* Il conto in cima al profilo: sopra il commutatore dei mestieri, perché è la
   risposta alla domanda con cui si apre questa schermata — e perché è uno solo
   per tutti i mestieri, mentre quel commutatore cambia solo quello che sta
   sotto. `:empty` per non lasciare un buco mentre arriva. */
.conto-in-cima{margin-top:1.1rem}.conto-in-cima:empty{margin-top:0}

/* ── IL CRUSCOTTO SU UNO SCHERMO LARGO ────────────────────────────────────
 *
 * Michele, 27/08/2026: «il pannello e il cruscotto non hanno ricevuto la
 * revisione, sono ancora al peso 0,7».
 *
 * Stessa medicina del filo, e apposta la stessa: **il documento a sinistra, il
 * contesto a destra.** Quello che si muove — i pacchi, la rete, il racconto —
 * prende la colonna larga; il conto diventa una guida ferma sul fianco, che è
 * il posto dove si guarda quando si vuole ricontrollare un numero mentre si
 * legge altro. Prima era una colonna da telefono lunga milletrecento pixel, e
 * il portafoglio stava sotto tutto: per vedere quanto si può spendere bisognava
 * scorrere oltre l'invito agli amici.
 *
 * Due schermate diverse che risolvono lo stesso problema in due modi diversi
 * sono due prodotti. Questa è la stessa griglia, con le stesse misure. */
@media (min-width:1080px){
  main.wrap.largo:has(#saldi){max-width:var(--colonna-banco);
    display:grid;grid-template-columns:minmax(0,1fr) 20.5rem;gap:.35rem 2.75rem;align-items:start}
  main.wrap.largo:has(#saldi) > .hero,
  main.wrap.largo:has(#saldi) > #nota{grid-column:1/-1}
  main.wrap.largo:has(#saldi) > #corpo{grid-column:1;grid-row:3}
  main.wrap.largo:has(#saldi) > #racconta{grid-column:1;grid-row:4}
  /* Su uno schermo largo il conto sta comunque a destra: «sopra» è la risposta
     al telefono, dove si scorre; qui la colonna di fianco è già «prima». */
  /* Il conto sale in cima alla colonna di destra e ci resta: è il numero che
     si ricontrolla, non quello che si scorre. */
  main.wrap.largo:has(#saldi) > #saldi{grid-column:2;grid-row:3/span 2;margin-top:.35rem;
    position:sticky;top:calc(3.5rem + env(safe-area-inset-top) + 1rem)}
  main.wrap.largo:has(#saldi) > #saldi.saldi-dopo-ordini{margin-top:.35rem}
}
@media(max-width:42rem){
  /* Su un telefono la riga dei comandi va a capo se serve, e la carta prende
     tutto quello che resta: niente altezze scritte a mano, che erano il modo
     di lasciare un buco sotto quando i conti non tornavano. */
  .valle-barra{gap:.5rem .9rem}
  .mappa-filtri{gap:.9rem}
  main.wrap.valle-mappa{padding-left:.7rem;padding-right:.7rem}.hero-operativa{padding:.65rem 0 .4rem}
  .hero-operativa .occhio{display:none}.hero-operativa h1{font-size:2rem}.hero-operativa p:last-child{margin-top:.15rem;font-size:.875rem;line-height:1.35}
  .posta-riga{grid-template-columns:2.35rem minmax(0,1fr) auto;gap:.6rem}.posta-stato .tag{max-width:7rem;overflow:hidden;text-overflow:ellipsis}
}

/* ── La scena del pacco sulla carta ──────────────────────────────────────
   Il dettaglio non sostituisce la geografia: resta dentro la cornice, mentre
   la strada si disegna e la mappa si ricentra con il percorso ancora visibile. */
.pacco-premium{position:absolute;z-index:850;top:.75rem;right:.75rem;bottom:.75rem;width:min(25rem,43%);
  display:flex;flex-direction:column;padding:1.15rem;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  border-radius:calc(var(--r-3) - .2rem);background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:-18px 18px 46px rgba(14,30,20,.18);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  overflow:auto;transform-origin:right center;transition:opacity var(--foglio) ease,transform var(--volo) var(--molla-viva),clip-path var(--volo) var(--molla-viva)}
.pacco-premium.entra{opacity:0;transform:translateX(48px) scale(.97);clip-path:inset(0 0 0 35% round 1.2rem)}
.pacco-premium.via{opacity:0;transform:translateX(36px) scale(.98)}
.pacco-premium:before{content:"";position:absolute;inset:0 0 auto;height:7rem;z-index:-1;
  background:radial-gradient(circle at 12% 10%,var(--pino-velo),transparent 66%);pointer-events:none}
.pacco-premium-chiudi{position:absolute;top:.8rem;right:.8rem;width:2.65rem;height:2.65rem;border:1px solid var(--line);
  border-radius:50%;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);font:300 1.65rem/1 var(--sans);cursor:pointer}
.pacco-premium-chiudi:hover{background:var(--sunk)}
.pacco-premium-segno{display:grid;place-items:center;width:2.7rem;height:2.7rem;margin-bottom:1rem;border-radius:.8rem;
  background:var(--rame);color:var(--su-accento);box-shadow:0 8px 22px color-mix(in srgb,var(--rame) 25%,transparent)}
.pacco-premium-segno svg{width:1.3rem;height:1.3rem}.pacco-premium .occhio{padding-right:3rem;color:var(--pino)}
.pacco-premium h2{margin:.18rem 2.7rem 0 0;font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.02;text-wrap:balance}
.tratta-scritta{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:center;margin:1.25rem 0;padding:1rem 0;
  border-block:1px solid var(--line)}
.tratta-scritta>span{display:grid;grid-template-columns:.75rem minmax(0,1fr);column-gap:.45rem;align-items:center}
.tratta-scritta i{grid-row:1 / span 2;width:.68rem;height:.68rem;border-radius:50%;background:var(--rame);box-shadow:0 0 0 4px var(--rame-velo)}
.tratta-scritta i.arriva{background:var(--pino);box-shadow:0 0 0 4px var(--pino-velo)}
.tratta-scritta small,.tratta-scritta b{grid-column:2;display:block}.tratta-scritta small{font:400 .62rem var(--mono);text-transform:uppercase;color:var(--ink-3)}
.tratta-scritta b{margin-top:.08rem;font-size:.9rem}.tratta-scritta em{color:var(--ink-3);font-style:normal}
.pacco-premium-meta{display:flex;gap:.4rem;flex-wrap:wrap}.pacco-premium-meta span,.pacco-premium-meta strong{padding:.35rem .55rem;border-radius:999px;background:var(--sunk);font:500 .68rem var(--mono)}
.pacco-premium-meta strong{background:var(--pino-velo);color:var(--pino)}
.pacco-premium-testo{margin:.85rem 0;color:var(--ink-2);font-size:.86rem;line-height:1.45;text-wrap:pretty}
.pacco-scelte{display:flex;gap:.35rem;margin:auto 0 .8rem;padding-top:.75rem;overflow-x:auto}
.pacco-scelte button{flex:0 0 auto;max-width:10rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font:500 .7rem var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pacco-scelte button[aria-pressed="true"]{border-color:var(--pino);background:var(--pino-velo);color:var(--pino)}
.pacco-premium>.btn{margin-top:auto;justify-content:space-between}.pacco-premium>.btn span{font-size:1.2rem}

/* ── LA LISTA DEI PRODUTTORI, DI FIANCO ───────────────────────────────────
   Michele, 28/08/2026: «click produttori maybe list also on side to scroll».
   Stessa cornice del pacco di proposito: sono la stessa cosa — un dettaglio
   che si apre di fianco senza coprire la geografia. Due pannelli che fanno lo
   stesso mestiere con due forme diverse sono due sistemi. */
.lato-lista h2{margin:.1rem 0 .2rem}
.lato-lista .lato-titolo{margin:.9rem 0 .35rem;padding-top:.75rem;border-top:1px solid var(--line)}
/* ⚠️ Scorre SOLO l'elenco, non tutto il pannello: se scorresse il pannello,
   il nome di chi hai toccato uscirebbe dallo schermo mentre cerchi gli altri —
   e non sapresti più da dove sei partito. */
.lato-lista .lato-elenco{flex:1;min-height:0;overflow-y:auto;margin:0 -.35rem;padding:0 .35rem}
.lato-riga{display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.6rem .55rem;border:0;border-radius:var(--r-1);background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background var(--tocco) linear}
.lato-riga + .lato-riga{box-shadow:inset 0 1px 0 var(--line)}
.lato-riga:hover{background:var(--sunk)}
.lato-riga.scelto{background:var(--pino-velo)}
.lato-riga .corpo{display:grid;gap:.05rem;min-width:0;flex:1}
.lato-riga .tit{font-size:1rem;font-weight:500;line-height:1.3}
.lato-riga .sub{font-size:.9375rem;color:var(--ink-3)}
.lato-riga .quanti-lato{flex:0 0 auto;display:grid;place-items:center;
  min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;
  background:var(--pino);color:var(--su-accento);font:600 .8125rem/1 var(--mono)}
.lato-lista .lato-suoi{margin-top:.35rem}
.lato-lista .lato-suoi .occhio{margin:0 0 .3rem}
.mappa-cornice.pacco-aperto .mappa-comandi,.mappa-cornice.pacco-aperto .mappa-legenda{opacity:.2;pointer-events:none;transition:opacity var(--stato) ease}
.leaflet-overlay-pane path.tratta-premium{animation:correTratta var(--respiro) linear infinite;filter:drop-shadow(0 2px 3px rgba(0,107,69,.2))}
.mappa-pacco-riga{width:100%;font:inherit;text-align:left;cursor:pointer}
@keyframes correTratta{to{stroke-dashoffset:-24}}

/* ── Riepilogo del filo: una tendina dall'alto ─────────────────────────── */
.capo.riassumi{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.foglio.dall-alto{left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);width:min(46rem,100%);max-height:min(88dvh,48rem);
  padding:1rem 1.35rem 1.6rem;border:0;border-bottom:1px solid var(--line);border-radius:0 0 var(--r-3) var(--r-3);
  animation:none;translate:0 0;box-shadow:0 24px 60px rgba(14,30,20,.22);
  transition:opacity var(--schermo) ease,transform var(--volo) var(--molla-viva),clip-path var(--volo) var(--molla-viva)}
.foglio.dall-alto.entra{opacity:0;transform:translate(-50%,-105%);clip-path:inset(100% 0 0 round 0 0 1.4rem 1.4rem)}
.scrim.scrim-alto{animation:vela var(--stato) ease-out both;background:color-mix(in srgb,var(--ink) 32%,transparent)}
.riepilogo-alto-cima{position:relative;padding-right:3rem}.riepilogo-alto-cima h2{margin:.18rem 0 .65rem;padding:0;font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.05}
.riepilogo-tratta{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;margin:1rem 0;padding:.85rem 1rem;border-radius:var(--r-2);background:var(--pino-velo)}
.riepilogo-tratta span{display:grid}.riepilogo-tratta small{font:400 .62rem var(--mono);text-transform:uppercase;color:var(--pino)}
.riepilogo-tratta b{margin-top:.14rem;font-size:.9rem}.riepilogo-tratta i{font-style:normal;color:var(--pino)}
.riepilogo-alto-blocco{margin-top:1rem}.riepilogo-alto-blocco .capo-sez{margin-bottom:.3rem}.riepilogo-alto-blocco h3{font-family:var(--sans);font-size:1rem;letter-spacing:0}
.riepilogo-alto-blocco .capo-sez>span{color:var(--ink-3);font:400 .68rem var(--mono)}
.riepilogo-riga,.conto-riga{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.riepilogo-riga span{display:grid}.riepilogo-riga b{font-size:.86rem}.riepilogo-riga small{margin-top:.1rem;color:var(--ink-3);font-size:.72rem}
.riepilogo-riga strong,.conto-riga strong{font:600 .78rem var(--mono);white-space:nowrap}.conto-riga{color:var(--ink-2);font-size:.82rem}
.conto-riga.totale{padding-top:.75rem;border:0;color:var(--ink);font-size:1rem}.conto-riga.totale strong{font-size:1rem;color:var(--pino)}
.riepilogo-persone{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.05rem}.riepilogo-persone .occhio{flex:0 0 100%}
.riepilogo-persone>span{display:grid;padding:.45rem .6rem;border-radius:.65rem;background:var(--sunk)}.riepilogo-persone b{font-size:.72rem}.riepilogo-persone small{margin-top:.08rem;color:var(--ink-3);font-size:.62rem}
@media(max-width:42rem){
  .pacco-premium{left:.45rem;right:.45rem;top:auto;bottom:.45rem;width:auto;max-height:57%;padding:1rem;border-radius:1.25rem;
    transform-origin:center bottom}
  .pacco-premium.entra{transform:translateY(52px) scale(.98);clip-path:inset(45% 0 0 round 1.25rem)}
  .pacco-premium.via{transform:translateY(34px) scale(.98)}.pacco-premium h2{font-size:1.65rem}
  .tratta-scritta{margin:.85rem 0;padding:.75rem 0}.pacco-premium-testo{margin:.65rem 0}.pacco-scelte{padding-top:.35rem}
  .mappa-cornice.pacco-aperto .leaflet-control-zoom{opacity:.18;pointer-events:none}
  .foglio.dall-alto{width:100%;max-height:90dvh;padding:.9rem 1rem 1.35rem}
  .riepilogo-alto-cima h2{font-size:1.65rem}.riepilogo-tratta{padding:.75rem}
}
@media(prefers-reduced-motion:reduce){
  .pacco-premium,.pacco-premium.via,.foglio.dall-alto{transition-duration:1ms!important}
  .leaflet-overlay-pane path.tratta-premium{animation-duration:1ms!important;animation-iteration-count:1!important}
}
@media(max-width:32rem){
  body.stanza .capo{grid-template-columns:minmax(0,1fr) auto}
  body.stanza .capo-t{display:contents}
  body.stanza .capo-t b{grid-column:1 / -1;grid-row:1;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  body.stanza .capo-t .tag{grid-column:1;grid-row:2;justify-self:start}
  body.stanza .capo-a{grid-column:2;grid-row:2;align-self:center}
  .posta-riga{grid-template-columns:2.35rem minmax(0,1fr);align-items:start;gap:.35rem .6rem;padding:.7rem .25rem}
  .posta-segno{grid-row:1 / span 2}.posta-stato{grid-column:2;display:flex;align-items:center;justify-items:start;gap:.4rem}
  .posta-stato .tag{max-width:none}.posta-corpo>b,.posta-ultimo{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .posta-corpo>b{-webkit-line-clamp:1}.posta-ultimo{-webkit-line-clamp:2}
}

/* ── L'INVITO A METTERLA SULLA HOME ────────────────────────────────────────
   Una striscia sotto la testata, non un foglio in mezzo allo schermo: chi sta
   guardando un prodotto deve poterla ignorare senza chiuderla. Sticky insieme
   alla testata, cosi' non scorre via prima di essere stata letta e non copre
   niente di quello che c'e' sotto. Le regole di quando compare stanno in
   `_mrc.js`, invitoVaMostrato(). */
.invito-app{
  position:sticky;top:3.5rem;z-index:29;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem 1.15rem;
  background:var(--pino-velo);border-bottom:1px solid var(--line);
  animation:sali var(--stato) var(--ios) both;
}
.invito-app>img{width:2.25rem;height:2.25rem;border-radius:var(--r-1);flex:0 0 auto}
.invito-dice{display:flex;flex-direction:column;gap:.1rem;min-width:8rem;flex:1 1 11rem}
.invito-dice b{font-size:.9375rem;font-weight:600;line-height:1.25;color:var(--ink)}
.invito-dice small{font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.invito-tasti{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;margin-left:auto}
/* I bersagli restano da 44 px anche qui: e' una striscia stretta, ed e' proprio
   dove si sbaglia tasto. */
.invito-tasti .btn{min-height:2.75rem;padding-inline:.9rem;font-size:.875rem}
@media (max-width:420px){
  .invito-app{padding:.65rem .9rem;gap:.6rem}
  .invito-dice{flex-basis:100%;order:2}
  .invito-tasti{order:3;margin-left:0;width:100%}
  .invito-tasti .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .invito-app{animation:none} }

/* La riga che porta dal profilo alla posta.
   Non e' una scheda d'ordine e non deve sembrarlo: e' un cartello. Dice quanti
   pacchi hai in giro e basta — il dettaglio sta di la', ed e' proprio il punto
   di averlo tolto da qui. */
.verso-posta{align-items:center;gap:.75rem}
.verso-posta .corpo{min-width:0}
.verso-posta svg{width:1.1rem;height:1.1rem;color:var(--ink-3);flex:0 0 auto}

/* Il pacco che aspetta TE, sulla carta.
   Gli altri segni dicono «qui c'è roba»; questo dice «qui c'è roba tua». In una
   carta con venti pallini uguali il proprio si deve trovare senza cercarlo. */
.pacco-marker.mio span{
  background:var(--pino);color:var(--su-accento);
  box-shadow:0 0 0 3px var(--pino-velo),var(--om-2);
}
.pacco-marker.mio span b{background:var(--su-accento);color:var(--pino)}

/* ── I CONTI IN SOSPESO ────────────────────────────────────────────────────
   Una riga per debito, col nome grande quanto la cifra: sono le due cose che
   uno guarda, e chiedersi «quanto» senza «a chi» non serve a niente. */
.conto-sez{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.conto{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  padding:.85rem .95rem;display:flex;flex-direction:column;gap:.35rem;
}
/* Chi ha già detto di aver pagato e aspetta: un bordo, non un colore pieno.
   È uno stato di attesa, non un allarme. */
.conto.in-attesa{border-color:var(--oro);background:var(--oro-velo)}
.conto-capo{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.conto-capo b{font-size:1rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conto-capo .num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.conto p{margin:0;font-size:.8125rem}
.conto .righe{margin-top:.25rem}

/* Una riga scritta dal servizio, dentro la posta.
   Il segno e' tondo come gli altri ma di un altro colore: chi guarda deve
   capire in un colpo d'occhio che dietro non c'e' una persona a cui rispondere.
   Quelli che chiedono una mossa prendono il verde pieno, come le righe degli
   ordini che aspettano te: e' la stessa domanda. */
.posta-segno.servizio{background:var(--sunk);color:var(--ink-3)}
.posta-segno.servizio.fare{background:var(--pino);color:var(--su-accento)}
.posta-segno.servizio svg{width:1rem;height:1rem}

/* Il contatore della posta, sulla barra in fondo.
   Sta appeso all'icona e non accanto al nome: su quattro voci in 32 rem lo
   spazio orizzontale non c'e', e un numero che allarga la sua voce fa ballare
   le altre tre. */
.tabs .conta-posta{
  position:absolute;top:.55rem;left:50%;margin-left:.25rem;
  min-width:1rem;height:1rem;padding:0 .2rem;border-radius:999px;
  background:var(--rame);color:var(--su-accento);
  font-family:var(--mono);font-size:.625rem;font-weight:600;font-style:normal;
  display:grid;place-items:center;line-height:1;
}
.tabs a{position:relative}

/* Il numero della CARRELLO, sulla stessa linguetta ma dall'altro lato.
   Sono due domande diverse — «ti hanno scritto» e «hai della roba in mano» — e
   un pallino solo che le somma non risponde a nessuna delle due. Verde perché
   è roba tua che aspetta un tuo gesto, non una cosa che ti è arrivata. */
.tabs .conta-carrello{
  position:absolute;top:.55rem;right:50%;margin-right:.25rem;
  min-width:1rem;height:1rem;padding:0 .2rem;border-radius:999px;
  background:var(--pino);color:var(--su-accento);
  font-family:var(--mono);font-size:.625rem;font-weight:600;font-style:normal;
  display:grid;place-items:center;line-height:1;
}

/* ── IL CARRELLO ─────────────────────────────────────────────────────────────
   In cima alla posta: l'unica riga di quella pagina che chiede qualcosa a te
   invece di raccontarti qualcosa. Verde, come tutto quello che aspetta un tuo
   gesto — e verde una volta sola, che è la regola del sistema. */
.carrello-cima{
  display:flex;align-items:center;gap:1rem;width:100%;margin:.75rem 0 .25rem;
  padding:.85rem .95rem;border:1px solid color-mix(in srgb,var(--pino) 30%,var(--line));
  border-radius:var(--r-2);background:var(--pino-velo);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--stato) linear;
}
.carrello-cima:hover{border-color:var(--pino)}
.carrello-cima-che{display:grid;gap:.1rem;min-width:0;flex:1}
.carrello-cima-che .occhio{margin:0}
.carrello-cima-che b{font-size:1.1875rem;font-weight:600;line-height:1.25;color:var(--acqua)}
.carrello-cima-che small{font-size:.9375rem;color:var(--ink-2)}
.carrello-cima-vai{flex:0 0 auto;font-size:.9375rem;font-weight:600;color:var(--pino);
  text-decoration:underline;text-underline-offset:.25rem;
  text-decoration-color:color-mix(in srgb,var(--pino) 40%,transparent)}

/* La pillola resta accanto allo scaffale: una CTA utile non deve coprire le
   card del catalogo mentre la pagina scorre. */
.carrello-pillola{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:min(100%,21rem);margin:.25rem auto .75rem;
  min-height:2.75rem;padding:0 1rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.9375rem;
  /* Su una riga sola: con «2 cose» e «Apri il carrello» che vanno a capo la
     pillola diventava un rettangolo storto in mezzo allo scaffale. */
  white-space:nowrap;max-width:calc(100vw - 2rem);
  background:var(--ink);color:var(--ground);box-shadow:var(--om-2);
  animation:sali var(--stato) var(--ios) both;
}
.carrello-pillola svg{width:1.05rem;height:1.05rem}
.carrello-pillola b{font-weight:600}
.carrello-pillola span{color:color-mix(in srgb,var(--ground) 72%,transparent)}
@media (prefers-reduced-motion:reduce){ .carrello-pillola{animation:none} }

/* Dentro il foglio: un banco per volta, col suo occhiello. Il raggruppamento
   non è decorazione — ogni gruppo diventerà un pacco, e chi guarda deve
   vederlo PRIMA di premere, non scoprirlo dopo. */
.carrello-banco{margin:0 0 .9rem}
.carrello-banco .occhio{margin:0 0 .35rem}
.carrello-banco + .carrello-banco{padding-top:.9rem;border-top:1px solid var(--line)}
.carrello-riga{display:flex;align-items:center;gap:.75rem;padding:.4rem 0}
.carrello-riga .corpo{display:grid;gap:.05rem;min-width:0;flex:1}
.carrello-riga .tit{font-size:1rem;font-weight:500;line-height:1.3}
.carrello-riga .sub{font-size:.9375rem;color:var(--ink-3)}
.carrello-riga .quanti{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.carrello-riga .quanti b{min-width:1.4rem;text-align:center;font-variant-numeric:tabular-nums}
/* Il conto: una riga per pacco. La domanda davanti a un cesto è «quanto costa
   la roba di ognuno», non la spartizione in quattro voci — quella resta nel
   riepilogo di ogni ordine, dove serve. */
.carrello-conto{margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--line)}
/* La terza strada, quando le prime due sono chiuse: saldo che non basta e
   paese senza custode. Non è un errore — è una scelta ancora da fare, e infatti
   ha il colore dell'attesa e non quello del guasto. */
.paghe-uscita{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .6rem;
  margin:.6rem 0 0;padding:.65rem .75rem;border-radius:var(--r-1);
  background:var(--oro-velo);color:var(--oro);font-size:.9375rem;line-height:1.4}
.paghe-uscita .btn{min-height:2.25rem;color:var(--oro);font-weight:600;
  text-decoration-color:color-mix(in srgb,var(--oro) 45%,transparent)}
.paghe-uscita .btn:hover{color:var(--oro)}
.carrello-conto .conto-riga small{display:block;font-size:.875rem;color:var(--ink-3)}

/* ── IL PALLINO CHE VOLA NELLA CARRELLO ──────────────────────────────────────
   Michele: «carrello animation nice like dot moving to posta».
   Il moto ha un mestiere: dire DOVE è finita la cosa che hai appena toccato.
   Muove solo `transform` e `opacity`, che sono le due proprietà che il browser
   sposta senza ridisegnare la pagina. */
.vola-carrello{
  position:fixed;z-index:60;width:1.15rem;height:1.15rem;margin:-.575rem 0 0 -.575rem;
  border-radius:50%;background:var(--pino);box-shadow:0 2px 10px rgba(0,139,72,.4);
  pointer-events:none;
}
/* E la linguetta risponde all'arrivo: senza, il pallino atterra e non succede
   niente, che è il modo di far sembrare finta un'animazione. */
.tabs a.presa svg{animation:presa var(--foglio) var(--molla-viva) both}
@keyframes presa{
  0%{scale:1} 35%{scale:1.28} 100%{scale:1}
}
@media (prefers-reduced-motion:reduce){
  .vola-carrello{display:none}
  .tabs a.presa svg{animation:none}
}

/* Un ordine chiuso, e un avviso superato: finiti, non sbagliati.
   Si spengono invece di colorarsi. Il verde e il rosso servono a chi deve
   decidere qualcosa, e qui non c'e' piu' niente da decidere. */
.posta-riga.chiusa,.posta-riga.passata{opacity:.62}
.posta-riga.chiusa .tag,.posta-riga.passata .tag{background:var(--sunk);color:var(--ink-3)}
.posta-riga.chiusa .posta-valore{color:var(--ink-3)}
.posta-riga.chiusa .posta-direzione,.posta-riga.passata .posta-segno{
  background:var(--sunk);color:var(--ink-3)}
.tag.passata{background:var(--sunk);color:var(--ink-3)}
.posta-riga.chiusa:hover,.posta-riga.passata:hover{opacity:1}

/* Il pallino coi non letti su una riga della rubrica. */
.pallino-conta{
  flex:0 0 auto;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;
  background:var(--rame);color:var(--su-accento);
  font-family:var(--mono);font-size:.6875rem;font-weight:600;font-style:normal;
  display:grid;place-items:center;line-height:1;
}

/* Un pacco che aspetta qualcuno, sulla carta.
   Arancio: e' l'unico segno che chiede una cosa a chi guarda, e in una carta di
   dodici pallini uguali deve staccarsi senza doverlo leggere. Il verde resta a
   quelli tuoi, che rispondono a un'altra domanda. */
.pacco-marker.aspetta span{
  background:var(--rame);color:var(--su-accento);
  box-shadow:0 0 0 3px var(--rame-velo),var(--om-2);
}
.pacco-marker.aspetta span b{background:var(--su-accento);color:var(--rame)}
.tag.attesa{background:var(--rame-velo);color:var(--rame)}

/* L'indietro, a sinistra del marchio: e' dove il pollice lo cerca su ogni
   telefono che esiste. */
.top .indietro{margin-left:-.35rem;margin-right:-.15rem;flex:0 0 auto}

/* Il punto di ritiro dentro il profilo di chi lo tiene: un blocco a se',
   perche' e' un LUOGO e non una qualita' della persona. Un filetto a sinistra
   basta a dire «questa e' un'altra cosa» senza costruirci una scatola. */
.punto-ritiro{border-left:3px solid var(--pino);padding-left:.9rem}
.punto-ritiro h2{margin:.15rem 0 .2rem}

/* Le due icone accanto al nome, su un profilo: scrivere e copiare.
   Erano due tasti larghi quanto lo schermo, uno sopra l'altro. */
.azioni-profilo{display:flex;gap:.25rem;margin-left:auto;flex:0 0 auto;align-self:flex-start}

/* Il canale di un banco: quello che ha detto ai suoi clienti.
   Righe, non bolle: non e' una conversazione, e disegnarla come tale
   prometterebbe una risposta che qui non si puo' dare. */
/* ⚠️ Si chiamava `.canale`, come la classe sul body di canale.html — e quel
   body si prendeva addosso `display:flex` e otto pixel di margine che nessuno
   aveva chiesto. Trovata da `bin/prova-nomi.mjs` il 03/09/2026, terza
   collisione della giornata dopo `.porta` e `.storia`.
   Rinominato il COMPONENTE e non la pagina: il componente lo usa un posto solo,
   la pagina dodici regole. */
.canale-lista{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.canale-riga{
  background:var(--sunk);border-radius:var(--r-1);padding:.6rem .75rem;
  display:flex;flex-direction:column;gap:.15rem;
}
.canale-riga p{margin:0;font-size:.9375rem;line-height:1.4}
.canale-riga small{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}

/* Il riepilogo che scende sotto la riga che l'ha chiesto, invece di un foglio
   sopra i messaggi. */
.riepilogo-sotto{
  background:var(--surface);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-2) var(--r-2);padding:.85rem 1rem;
  animation:sali var(--stato) var(--ios) both;
}
.riepilogo-sotto .riepilogo-persone a{display:flex;flex-direction:column;color:inherit}
/* Annullare non e' una cosa che si preme per sbaglio, e non e' nemmeno un
   allarme: sta in fondo, discreta, e chiede conferma. */
.ripensarci{margin-top:.5rem;justify-content:flex-end}
.btn.pericolo{color:var(--rosso)}
.btn.pericolo:hover{background:var(--rosso-velo)}

/* La riga di un canale nella posta: il corpo porta al banco, il tasto a destra
   fa una cosa sua (scrivere, o silenziare). */
.canale-riga-posta{display:flex;align-items:center;gap:.75rem}
.canale-riga-posta .posta-corpo-link{
  display:flex;align-items:center;gap:.75rem;flex:1 1 auto;min-width:0;color:inherit}

/* La spunta di una preferenza, in fondo alla sua riga. */
.segna-flag{flex:0 0 auto;margin:0}
.segna-flag>span{display:none}

/* ── DUE COLONNE SUL TELEFONO, SEMPRE ──────────────────────────────────────
   Michele, 27/08/2026: «la lista non va bene su schermi piccoli mobile. Un big
   box: magari fai un array di due colonne».

   `minmax(10rem,1fr)` con `auto-fill` sotto i 22 rem di larghezza dà UNA
   colonna: su un telefono da 360 px ogni prodotto diventava una scheda alta
   mezzo schermo, e per vedere tre cose bisognava scorrere tre volte. Un mercato
   si guarda a colpo d'occhio.

   Due colonne fisse, e le schede si stringono: il nome va a capo, la foto
   diventa più bassa, il prezzo resta leggibile. Meglio due cose piccole che si
   confrontano di una grande che si ammira. */
@media (max-width:30rem){
  .griglia:not(.fila){grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .griglia:not(.fila) .oggetto .nome{font-size:.875rem;line-height:1.25}
  .griglia:not(.fila) .oggetto .chi{font-size:.75rem}
  .griglia:not(.fila) .oggetto .prezzo{font-size:.9375rem}
  .griglia:not(.fila) .oggetto figure,
  .griglia:not(.fila) .oggetto img{aspect-ratio:4/3}
}

/* ⚠️ IL PALLINO DEI NON LETTI NON È UN BOLLINO GIGANTE.
   Michele: «c'è un pallino rosso enorme che non ha senso a livello visivo».
   `.posta-stato>i` è una pastiglia con dentro un numero — giusta in una casella
   di posta, dove i numeri contano. Nelle «ultime cose» del profilo il numero
   non c'è: restava una pastiglia vuota larga 1,25 rem, cioè un bollo rosso in
   mezzo alla riga. Vuoto vuol dire punto. */
.posta-stato>i:empty{
  min-width:.5rem;width:.5rem;height:.5rem;padding:0;border-radius:50%;
}

/* ── LE SCHEDE DEI SETTAGGI ────────────────────────────────────────────────
   Michele: «serve un modo per selezionare quale tipo di settaggi stai
   editando, stilisticamente uniforme».

   «Uniforme» è la parola che decide tutto: è lo stesso commutatore della
   mappa (.commuta), con dentro dei tasti invece che dei collegamenti, perché
   qui non si cambia pagina. Chi ha già toccato «Mappa / Lista» sa cosa fa. */
.commuta-schede{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
.commuta-schede::-webkit-scrollbar{display:none}
.commuta button{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  min-height:2.5rem;padding:0 .95rem;border:0;background:transparent;border-radius:999px;
  color:var(--ink-2);font:500 .9375rem/1 var(--sans);cursor:pointer;
  transition:background var(--stato) var(--ios),color var(--stato) var(--ios)}
.commuta button:hover{color:var(--ink)}
.commuta button[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:var(--om-1)}
/* Il pallino su una linguetta dice «questo mestiere lo fai davvero», e si
   legge senza aprirla. Verde come tutto il resto che è acceso. */
.commuta button>i.acceso{width:.4rem;height:.4rem;border-radius:50%;background:var(--pino)}
.scheda-ruolo{padding-top:.35rem}
/* ⚠️ `.sez > p.sotto` non arriva qui: dentro la scheda quel paragrafo non e'
   piu' figlio della sezione, e senza questa riga tornava grande come il testo
   normale — la spiegazione piu' grossa della cosa che spiega. */
.scheda-ruolo > p.sotto{margin:.35rem 0 0;color:var(--ink-2);font-size:.9375rem;max-width:44ch}
/* Le quattro linguette devono STARE, non scorrere: una striscia che scorre
   nasconde «Trasporto» dietro il bordo, e chi non sa che c'e' non lo cerca.
   A 390 px si stringono i fianchi e il corpo, e ci stanno tutte e quattro. */
@media (max-width:30rem){
  .commuta-schede{width:100%;overflow-x:visible}
  .commuta-schede button{flex:1;justify-content:center;padding:0 .5rem;font-size:.8125rem;gap:.28rem}
  .commuta-schede button>i.acceso{width:.34rem;height:.34rem}
}
.scheda-ruolo .titolino{margin:1rem 0 -.15rem;color:var(--ink-3);
  font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* I campi che valgono solo per un mestiere: stanno dentro la scheda, sotto gli
   interruttori, e ne compare uno o nessuno a seconda di dove sei. */
.campi-mestiere{display:grid;gap:.75rem;margin-top:1rem}
.campi-mestiere:empty{margin:0}
.schede-ruolo .righe{margin-top:1rem}

/* ── LA REGIA: quattro telefoni veri, 2×2 ─────────────────────────────────
 *
 * Michele, 28/08/2026: «2x2 schermate working del telefono controllabili tutte,
 * come fossero delle virtual demo con autoload 4 persone diverse».
 *
 * Non quattro riquadri di informazioni: quattro APP, ognuna alla larghezza di
 * un telefono, ognuna nei panni di una persona diversa. La cornice che le
 * contiene è disegnata come un telefono di proposito — un rettangolo bianco
 * senza bordi in mezzo a una pagina sarebbe una parte della pagina, e quello
 * che c'è dentro NON è questa pagina: è un'altra app, con un'altra identità.
 *
 * 390 px è la larghezza vera di un telefono e non si negozia: è quella su cui
 * l'app è disegnata, e restringerla per farne stare quattro vorrebbe dire
 * provare una schermata che nessuno vedrà mai. Se non ci stanno, scorrono.
 */
/* La porta della regia, nel profilo. Carta affondata e non verde: è uno
   strumento, non una cosa che ti tocca fare. */
.regia-porta{display:flex;align-items:center;gap:1rem;margin-top:1.1rem;
  padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--sunk);color:inherit;text-decoration:none;
  transition:border-color var(--stato) linear}
.regia-porta:hover{border-color:var(--line-2)}
.regia-porta > span:first-child{display:grid;gap:.1rem;min-width:0;flex:1}
.regia-porta .occhio{margin:0}
.regia-porta b{font-size:1.1875rem;font-weight:600;line-height:1.25}
.regia-porta small{font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.regia-porta-vai{flex:0 0 auto;font-size:.9375rem;font-weight:600;color:var(--pino)}

.regia-capo{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface)}
.regia-capo .occhio{margin:0}
.regia-capo h2{margin:.15rem 0 .1rem;font-size:1.5rem}
.regia-che{margin:0 0 .6rem;font-size:.9375rem;color:var(--ink-2);line-height:1.4;max-width:64ch}

/* ⚠️ DUE PER DUE, e non «quante ce ne stanno». Un `auto-fit` metteva quattro
   telefoni in fila su uno schermo largo e uno solo su un portatile: la regia
   serve a vedere le quattro persone INSIEME, e una fila da quattro larga tre
   metri non è insieme. Sotto i 1100 px diventano una colonna, che su un
   telefono è l'unica cosa leggibile. */
.regia-tavolo{display:grid;gap:1rem;margin-top:1rem;grid-template-columns:1fr;justify-content:center}
@media (min-width:1100px){ .regia-tavolo{grid-template-columns:repeat(2,auto)} }

.regia-tel{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.regia-tel > header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  max-width:24.5rem}
.regia-chi{display:grid;gap:0;min-width:0;flex:1}
.regia-chi b{font-size:1rem;font-weight:600;line-height:1.2}
.regia-chi small{font-size:.875rem;color:var(--ink-3)}
.regia-tel select{min-height:2.25rem;padding:0 .4rem;border:1px solid var(--line);
  border-radius:var(--r-1);background:var(--surface);color:var(--ink);
  font:500 .875rem var(--sans);max-width:8rem}
.regia-tel .regia-ri{min-height:2.25rem;padding:0 .5rem}
/* Il vetro: la cornice che dice «qui dentro c'è un altro telefono». */
.regia-vetro{position:relative;width:min(24.5rem,100%);height:44rem;
  max-height:calc(100dvh - 12rem);
  overflow:hidden;border:1px solid var(--line-2);border-radius:1.75rem;
  background:var(--ground);box-shadow:var(--om-2);padding:.35rem}
.regia-schermo{width:100%;height:100%;border:0;border-radius:1.45rem;background:var(--ground)}
/* La sedia di chi POTREBBE portarlo: e' un'ipotesi, e si vede. Il telefono
   funziona come gli altri — ci si preme «ci vado io» — ma il bordo tratteggiato
   dice che quel pacco non e' ancora di nessuno. Disegnarla come le altre
   farebbe credere che qualcuno se ne sia gia' preso carico, che e' la cosa piu'
   sbagliata da far credere su una bacheca. */
.regia-tel.forse .regia-vetro{border-style:dashed}
.regia-tel.forse .regia-chi b{color:var(--ink-2)}
.regia-tel.vuoto .regia-vetro{display:grid;place-items:center;padding:1.5rem;
  border-style:dashed;background:var(--sunk);height:auto;min-height:12rem}
.regia-tel.vuoto .muto{margin:0;text-align:center;line-height:1.45}
/* Il codice sotto ogni telefono: si inquadra e quello vero diventa quella
   persona. Piccolo, perché è uno strumento e non un'illustrazione. */
.regia-qr{display:block;width:max-content;padding:.35rem;border:1px solid var(--line);
  border-radius:var(--r-1);background:#fff;line-height:0}
.regia-qr svg{display:block;width:5.25rem;height:5.25rem}

/* ── LE PERSONE, NEL PANNELLO ─────────────────────────────────────────────
   Michele, 28/08/2026: «voglio vedere utenti iscritti, e anche cosa fanno».
   A destra di ogni nome quello che ha FATTO, non quello che potrebbe fare: e
   chi non ha fatto niente si spegne invece di mostrare quattro zeri. Quattro
   zeri sono quattro numeri da leggere per scoprire che non c'e' niente da
   leggere. */
.persone-conti{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:.1rem .55rem;max-width:14rem;text-align:right}
.persone-conti small{font-size:.875rem;color:var(--ink-2);white-space:nowrap}
.persone-conti.ferma small{color:var(--ink-4);font-style:italic}
.persone-elenco .riga{align-items:center}

/* La striscia che dice qual e' il prossimo passaggio, e lo fa fare.
   Sta fra la testata e i quattro telefoni perche' e' la risposta alla domanda
   che uno si fa guardandoli: «e adesso chi tocca?». */
.regia-passo{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem .9rem;margin:0 0 .9rem;border:1px solid var(--line);
  border-radius:var(--r-1);background:var(--surface)}
.regia-passo p{margin:0;flex:1 1 16rem;font-size:.9375rem}
.regia-codice{font-size:.8125rem;letter-spacing:.14em;color:var(--ink-2)}

/* Il dietro le quinte: gli avvisi e i soldi di un ordine, che altrimenti
   vivono in quattro telefoni diversi e non si vedono da nessuna parte. */
.regia-quinte{margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r-1);
  background:var(--surface);padding:.6rem .9rem}
.regia-quinte summary{cursor:pointer;font-size:.875rem;color:var(--ink-2)}
.regia-quinte h3{margin:.9rem 0 .3rem;font-size:.8125rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.qui{list-style:none;margin:0;padding:0;font-size:.8125rem}
.qui li{display:grid;grid-template-columns:minmax(6rem,1fr) 3fr auto auto;gap:.6rem;
  padding:.25rem 0;border-top:1px solid var(--line-2)}
.qui-chi{font-weight:600}
.qui-euro{font-family:var(--mono)}
.qui-ora{color:var(--ink-3)}
@media (max-width:640px){ .qui li{grid-template-columns:1fr auto} .qui-ora{display:none} }

/* Una cornice che e' finita su un altro ordine: dentro c'e' l'app vera, e l'app
   vera si puo' navigare. La deriva non si puo' impedire, ma non deve essere
   invisibile: quattro schermate plausibili di due pacchi diversi si leggono
   come quattro punti di vista sullo stesso. */
.regia-tel.sviata .regia-vetro{outline:2px solid var(--rame);outline-offset:-2px}
.regia-sviata{position:absolute;left:0;right:0;bottom:0;display:flex;
  align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;
  background:var(--rame-velo);font-size:.75rem;color:var(--ink)}

/* ── IL LINGUAGGIO MERCATORUM, OVUNQUE ───────────────────────────────────
 * La guida illustrata ha chiarito l'identità finale: carta calda, titoli
 * editoriali, forme generose e accenti da mercato stampato. Questo ultimo
 * strato non riscrive la logica delle schermate: rende coerenti i componenti
 * condivisi, quindi mercato, valle, posta, profilo, fogli e pannello parlano
 * finalmente la stessa lingua. */
:root{
  --ground:#fffaf2;--surface:#fffdf8;--sunk:#efe8d2;
  --line:#ded3bd;--line-2:#b9aa90;
  --ink:#101b15;--ink-2:#334f40;--ink-3:#66786b;
  --pino:#08784c;--pino-velo:#dce9dc;
  --rame:#a33c39;--rame-velo:#f8ded8;
  --rosso:#793047;--rosso-velo:#f1dce3;--viola:#793047;
  --oro:#7d6220;--oro-velo:#efe8d2;
  --acqua:#244b3a;--acqua-velo:#d5dfeb;--ink-3:#536458;
  --r-1:14px;--r-2:22px;--r-3:32px;
  --editoriale:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --om-1:0 2px 3px rgba(36,75,58,.05);
  --om-2:0 2px 3px rgba(36,75,58,.04),0 18px 42px rgba(36,75,58,.09);
  --vetro:color-mix(in srgb,var(--surface) 91%,transparent);
}
/* ⚠️ 03/09/2026: qui c'era `:not(.porta)`, e la prima pagina si chiamava
   `body.porta` — lo stesso nome del componente-scheda del pannello, che le
   metteva addosso angoli tondi, sfondo di superficie e una rimpicciolita al
   tocco. Rinominata in `soglia`, questa esclusione va rinominata con lei: se
   no lo sfondo di questa regola vince su quello della porta, e la pesca sparisce.
   Due nomi che dovevano cambiare insieme, e uno non dava nessun errore. */
body:not(.soglia):not(.guida){
  background:
    radial-gradient(circle at 100% 7%,color-mix(in srgb,var(--rame) 10%,transparent) 0 5.5rem,transparent 5.6rem),
    radial-gradient(circle at 0 37%,color-mix(in srgb,#f2c522 8%,transparent) 0 4rem,transparent 4.1rem),
    var(--ground);
}

/* Testate: carta, marchio leggibile e una sola geometria su ogni pagina. */
.top{min-height:4rem;padding-inline:clamp(.85rem,3vw,1.35rem);background:var(--vetro);border-bottom-color:color-mix(in srgb,var(--pino) 18%,var(--line));box-shadow:0 1px 0 rgba(255,255,255,.65)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--pino) 0 18%,transparent 18%)}
.top .marchio{font-family:var(--sans);font-size:1.08rem;font-weight:800;color:var(--ink)}
.top .marchio img{width:1.9rem;height:1.55rem}
.top .dove{color:var(--bosco,var(--ink-2))}

/* Gerarchia editoriale condivisa. I piccoli titoli operativi restano sans. */
.hero{position:relative;padding-top:clamp(2.35rem,7vw,4.4rem);padding-bottom:1.5rem}
.hero::after{content:"✦";position:absolute;right:.2rem;top:clamp(1.6rem,5vw,3rem);color:#f2c522;font-size:clamp(1.5rem,5vw,2.8rem);rotate:11deg;pointer-events:none}
.hero .occhio,.occhio{color:var(--pino);font-weight:600;letter-spacing:.09em}
.hero h1:not(.titolo-rotta){max-width:15ch;padding-right:2.8rem;font-family:var(--editoriale);font-size:clamp(2.8rem,9vw,4.9rem);font-weight:700;line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.hero p{color:var(--ink-2);text-wrap:pretty}
.sez{margin-top:clamp(2.7rem,7vw,4.6rem)}
.sez>h2,.capo-sez>h2,.zona .ztesta h2,.regia-capo h2{font-family:var(--editoriale);font-size:clamp(1.65rem,4vw,2.35rem);font-weight:700;line-height:1;letter-spacing:-.025em;text-wrap:balance}
.sez>p.sotto,.zona .ztesta p{color:var(--ink-2);line-height:1.5;text-wrap:pretty}

/* Superfici e controlli: gli stessi raggi delle carte della guida. */
.btn{border-radius:999px;border-color:var(--line);background:var(--surface);font-weight:600}
.btn.pieno,.btn.verde{background:var(--pino);border-color:var(--pino)}
.card,.passaggio,.pieghevole,.richiesta,.regia-capo,.regia-porta,.regia-quinte{border-radius:var(--r-2);background:var(--surface)}
.card{padding:1.25rem 1.35rem}
.card h3{font-family:var(--editoriale);font-size:1.18rem;font-weight:700;letter-spacing:-.015em}
.riga{border-radius:1.15rem;padding:.9rem .85rem}
.elenco .riga{padding:.9rem .5rem}
.riga:hover{background:color-mix(in srgb,var(--sunk) 62%,var(--surface))}
.campo input,.campo select,.campo textarea{border-radius:1rem;background:var(--surface);border-color:var(--line)}
.commuta{border-radius:999px;background:var(--sunk);border-color:transparent;padding:.28rem}
.commuta a,.commuta button{border-radius:999px}
.pillole{border-color:var(--line);gap:1.25rem}
.oggetto{border-radius:1.55rem;border-color:var(--line);background:var(--surface);overflow:hidden}
.oggetto .figura{background:var(--sunk)}
.oggetto .nome{font-family:var(--editoriale);font-size:1.03rem;font-weight:700;letter-spacing:-.012em}
.oggetto .prezzo{color:var(--pino)}
/* `--testo` non è mai esistito: il carattere del testo di lettura è `--sans`. */
.oggetto .anteprima-prezzo{color:var(--ink-2);font-family:var(--sans);font-size:.9rem;font-weight:650}
.anteprima-avviso{margin-top:1rem;padding:1rem 1.05rem;border-left:3px solid var(--pino);
  background:var(--sunk);border-radius:0 var(--r-2) var(--r-2) 0}
.anteprima-avviso p{margin:.25rem 0 0;color:var(--ink-3);font-size:.875rem;line-height:1.45}

/* Mappa, posta e fogli: più chiari, ma senza cambiare il flusso. */
.mappa,.mappa-cornice{border-radius:var(--r-3);border-color:var(--line);box-shadow:var(--om-1)}
.mappa-ripristina,.mappa-legenda{border-radius:999px!important;background:var(--surface)!important;box-shadow:var(--om-1)}
.mappa-foglio-sez h3,.riepilogo-alto-blocco h3{font-family:var(--editoriale);font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
.posta-riga{border-radius:1.15rem;padding-inline:.65rem}
.posta-gruppo{font-family:var(--editoriale);font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.foglio{background:var(--surface);border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:0 -1.5rem 4rem rgba(36,75,58,.16)}
.foglio h2{font-family:var(--editoriale);font-size:1.9rem;line-height:1;letter-spacing:-.025em}
@media(min-width:46rem){.foglio{border-radius:var(--r-3)}}

/* La navigazione bassa e la chat condividono la stessa carta morbida. */
.tabs{border-radius:999px;background:var(--vetro);border-color:var(--line);box-shadow:var(--om-2)}
#scrivi{background:color-mix(in srgb,var(--surface) 96%,transparent);border-top-color:var(--line)}
#scrivi input,#scrivi textarea{border-radius:1rem;background:var(--surface)}

/* Il pannello è uno studio editoriale, non una pagina amministrativa grigia. */
.wrap.banco{max-width:78rem}
.studio-post{border-radius:2rem!important;box-shadow:var(--om-1)}
.studio-capo h3{font-family:var(--editoriale);font-size:1.45rem;letter-spacing:-.02em}
.post-preview{border-radius:1.65rem!important}
.regia-vetro{border-radius:2rem;background:var(--surface)}

@media(max-width:30rem){
  .hero{padding-top:2.25rem}
  .hero h1:not(.titolo-rotta){font-size:clamp(2.75rem,14vw,4.1rem)}
  .hero::after{right:.45rem}
  .card{padding:1.05rem}
  .foglio{border-radius:1.8rem 1.8rem 0 0}
  .oggetto .nome{font-size:.95rem}
}

/* ── RIFINITURE DEL SISTEMA, 29 AGOSTO ───────────────────────────────────
   La carta bassa respira anche sui bordi: Mercato e Posta non toccano più la
   curva esterna, soprattutto sui telefoni stretti. */
.tabs{padding-inline:.7rem;column-gap:.1rem}

/* Il titolo della Valle è disponibile alla voce ma non deve prenotare novanta
   pixel invisibili. Quell'altezza rendeva il documento più alto del viewport:
   mettendo a fuoco i filtri a destra, il browser faceva saltare la pagina. */
.valle-mappa>.solo-voce{position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;white-space:nowrap!important}

/* Il canale di un banco è una stanza editoriale, non il filo logistico di un
   ordine. La griglia larga del filo lo spezzava in tre colonne scollegate. */
body.stanza.canale main.wrap{display:block;max-width:48rem;margin-inline:auto;padding-inline:1rem;
  padding-bottom:calc(9rem + env(safe-area-inset-bottom))}
body.canale .hero{padding:2.6rem 0 1.1rem}
body.canale .hero h1{font-size:clamp(2.75rem,8vw,4.6rem)}
body.canale #cima{margin:0}
.canale-capo{margin:.25rem 0 1.1rem;padding:1.25rem 1.35rem;border-radius:var(--r-2);
  background:var(--pino);color:#fffaf2;box-shadow:var(--om-1)}
.canale-capo .occhio{margin:0 0 .65rem;color:#f2c522}
.canale-capo-riga{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.canale-capo h2{margin:0;font-family:var(--editoriale);font-size:clamp(1.7rem,4vw,2.35rem);
  line-height:1;letter-spacing:-.025em}
.canale-capo p:not(.occhio){max-width:34rem;margin:.55rem 0 0;color:#dce9dc;line-height:1.45}
.canale-pubblico{flex:0 0 auto;padding:.38rem .58rem;border-radius:999px;background:#fffaf2;
  color:var(--pino);font:600 .7rem var(--mono);white-space:nowrap}
.canale-capo .righe{margin-top:1rem}.canale-capo .btn{background:transparent;border-color:#cfe0d5;color:#fffaf2}
.canale-capo .btn:hover{background:#fffaf2;color:var(--pino)}
body.canale #corpo{min-height:12rem;margin:0}
body.canale .canale-filo{display:flex;flex-direction:column;gap:.65rem;max-width:40rem;margin:0 auto}
body.canale .canale-filo .bolla{max-width:min(34rem,88%);padding:.8rem 1rem;border-radius:1.2rem}
body.canale #fondo{position:fixed;z-index:80;left:50%;bottom:0;translate:-50% 0;
  width:min(48rem,100%);padding:.65rem 1rem max(.7rem,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 -12px 34px rgba(36,75,58,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
body.canale .scrivi-riga{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:end}
body.canale #ilTesto{display:block;width:100%;min-height:3.15rem;max-height:8.75rem;resize:none;
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);
  color:var(--ink);font:inherit;line-height:1.35}
body.canale #manda{min-height:3.15rem;padding-inline:1.15rem}
body.canale #esito{margin:.45rem .1rem 0;font-size:.75rem;line-height:1.35}

/* Nel pannello un carosello si giudica come sequenza: tre copertine vicine,
   con le future fotografie dichiarate e non simulate da stock generico. */
.carosello-storyboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;align-self:start}
.story-slide{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;
  min-width:0;padding:.65rem;border-radius:1.15rem;overflow:hidden;background:#f4dacb;color:#101b15}
.story-slide:nth-child(2){background:#c4d0bc}.story-slide:nth-child(3){background:#08784c;color:#fffaf2}
.story-slide>span{position:absolute;left:.65rem;top:.55rem;z-index:2;font:600 .58rem var(--mono)}
.story-slide img{position:absolute;right:-12%;top:9%;width:82%;height:60%;object-fit:contain}
.story-slide strong{position:relative;z-index:2;font-family:var(--editoriale);font-size:clamp(.9rem,2vw,1.3rem);
  line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.spazio-foto{position:absolute;inset:2.1rem .55rem auto;height:42%;z-index:1;display:grid;place-items:center;
  border:1.5px dashed color-mix(in srgb,var(--ink) 42%,transparent);border-radius:.8rem;
  background:color-mix(in srgb,var(--surface) 74%,transparent);color:var(--ink-2);
  font:500 .55rem var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.story-slide:has(.spazio-foto) img{right:-18%;top:34%;width:62%;height:43%;opacity:.78}
.story-nota{margin:0 0 .85rem;padding:.75rem .85rem;border-radius:1rem;background:var(--pino-velo);
  color:var(--ink-2);font-size:.82rem;line-height:1.4}
/* ══ LA CASA ═══════════════════════════════════════════════════════════════
 *
 * Ordine #76. Una schermata pulita: il saluto, una frase che si scrive da
 * sola, e sei porte. Niente altro — e «niente altro» è la specifica, non il
 * risultato di essere arrivati a fine giornata.
 */
/* Il saluto e il portafoglio condividono la testata: il nome resta il primo
   punto di lettura, il saldo sta di lato e non spinge le porte verso il basso. */
.saluto{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  text-align:left;gap:1rem;
  margin:.35rem 0 1rem}
.saluto-chi .occhio{margin:0 0 .15rem}
.saluto h1{margin:0;font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance}
/* Il credito: piccolo, a destra, e si apre. Un numero in alto a destra che non
   si può toccare è una decorazione con dentro dei soldi. */
.credito{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.05rem;flex:0 0 auto;
  min-height:2.75rem;padding:.4rem .7rem;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;color:inherit}
.credito .occhio{margin:0;font-size:.6rem}
.credito b{font-family:var(--mono);font-size:1.0625rem;font-weight:500;color:var(--pino)}
.credito:hover{border-color:var(--line-2)}
.credito:focus-visible{outline:2px solid var(--pino);outline-offset:2px}

/* Le storie della valle. L'altezza è fissa a due righe: la frase si scrive
   lettera per lettera, e un blocco che cresce mentre si scrive sposterebbe le
   porte proprio mentre un dito ci sta arrivando sopra. */
/* ⚠️ Altezza FISSA: «animation texts no height variation of element
   container». Con `min-height` una frase lunga alzava il riquadro e spingeva
   giù le porte mentre la si stava leggendo. */
.storie{height:5.4rem;overflow:hidden;display:flex;align-items:center;
  margin:0 0 1.35rem;padding:.85rem 1rem;border-radius:var(--r-2);
  background:var(--pino-velo)}
.storia{margin:0;font-family:var(--editoriale);font-style:italic;
  font-size:clamp(1rem,3.4vw,1.15rem);line-height:1.35;color:var(--ink);text-wrap:pretty}
.storia::after{content:'';display:inline-block;width:.5ch;height:1.05em;margin-left:.1ch;
  vertical-align:-.15em;background:var(--pino);opacity:.55;
  animation:battito var(--respiro) steps(1) infinite}
@keyframes battito{0%,49%{opacity:.55}50%,100%{opacity:0}}
/* Una frase editoriale non è una notizia: si vede che parla del progetto e non
   di stamattina. */
.storia.detta{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .storia::after{display:none} }

/* Le sei porte: due colonne sul telefono, tre da tablet in su. Il bersaglio è
   tutta la scheda, non il nome. */
.porte{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.porta{position:relative;display:flex;flex-direction:column;gap:.55rem;
  min-height:8.5rem;padding:.9rem .85rem 1rem;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  color:inherit;text-decoration:none;font:inherit;cursor:pointer;
  transition:border-color var(--stato) var(--ios),box-shadow var(--stato) var(--ios),
             transform var(--stato) var(--molla-viva)}
.porta:hover{border-color:var(--line-2);box-shadow:var(--om-2);transform:translateY(-2px)}
.porta:active{transform:scale(.985);transition-duration:var(--tocco)}
.porta:focus-visible{outline:2px solid var(--pino);outline-offset:3px}
.porta-segno{display:flex;width:3.25rem;height:3.25rem;align-items:center;justify-content:center;
  border-radius:999px;background:var(--sunk)}
.porta-segno img{width:2.1rem;height:2.1rem;object-fit:contain}
.porta-dice{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.porta-dice b{font-size:1.0625rem;font-weight:600;line-height:1.25}
.porta-dice small{font-size:.875rem;color:var(--ink-3);line-height:1.3}
.porta-quanti{position:absolute;top:.75rem;right:.75rem;min-width:1.5rem;height:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;
  font-family:var(--mono);font-size:.8125rem;font-style:normal;font-weight:500;
  background:var(--pino);color:var(--su-accento);border-radius:999px}
/* I tre piccoli: una cella sola della griglia, tre bersagli dentro. Solo il
   segno — il nome lo legge la voce — e il numero quando c'è qualcosa. */
.terzetto{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.terzetto{align-content:start}
/* Bassi e larghi: tre bersagli, non tre colonne. Si allineano in cima alla
   riga, all'altezza di un pollice. */
.porta.piccola{min-height:4.6rem;height:4.6rem;padding:0;align-items:center;justify-content:center}
.porta.piccola .porta-segno{width:2.4rem;height:2.4rem;background:transparent}
.porta.piccola .porta-segno svg{width:1.5rem;height:1.5rem;color:var(--pino)}
.porta.piccola .porta-quanti{top:-.35rem;right:-.35rem;min-width:1.3rem;height:1.3rem;font-size:.72rem;
  border:2px solid var(--ground)}
@media (min-width:34rem){
  .porte{grid-template-columns:repeat(3,1fr)}
  .porta{min-height:9.5rem}
  /* Da tablet in su la fila è di tre: il terzetto prende l'ultima cella. */
  .terzetto{grid-column:span 1}
}

/* Il conto in tre righe: quello che c'è, senza il registro delle transazioni
   interne (punto 5 dell'ordine #76). */
.conto-netto{display:grid;gap:.1rem}
.conto-netto > div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0}
.conto-netto > div + div{border-top:1px solid var(--line)}
.conto-netto span{display:grid;gap:.1rem;min-width:0;font-size:1rem}
.conto-netto small{font-size:.9375rem;color:var(--ink-3);line-height:1.35}
.conto-netto b{flex:0 0 auto;font-family:var(--mono);font-size:1.125rem;font-weight:500;
  font-variant-numeric:tabular-nums}

/* La linguetta tonda: il segno di casa, sempre in basso, sempre lo stesso
   posto. È l'«home orb» chiesto nell'ordine, dentro la barra invece che
   galleggiante — due sistemi di navigazione in venti millimetri sono uno di
   troppo. */
/* ── IL SEGNO IN BASSO, E BASTA ────────────────────────────────────────
 * Non è più una barra con quattro parole: è il segno di Mercatorum, tondo,
 * che riporta a casa. Sale da sotto quando la schermata si apre — «nicely
 * animated from bottom» — e sulla Casa non c'è, perché starci sopra e vedere
 * il tasto per andarci è rumore. */
.tabs.solo-segno{width:3.5rem;max-width:none;height:3.5rem;padding:0;border:0;background:none;
  box-shadow:none;left:50%;right:auto;margin:0;translate:-50% 0;
  animation:segno-sale var(--schermo) var(--molla) both}
.tabs.solo-segno a{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;
  border-radius:999px;background:var(--surface);box-shadow:var(--om-2);
  border:1px solid var(--line);color:var(--pino);
  transition:transform var(--stato) var(--molla-viva),box-shadow var(--stato) var(--ios)}
.tabs.solo-segno a:hover{transform:translateY(-2px);box-shadow:var(--om-3,var(--om-2))}
.tabs.solo-segno a:active{transform:scale(.92);transition-duration:var(--tocco)}
.tabs.solo-segno svg{width:1.9rem;height:1.9rem}
.tabs.solo-segno .conta-posta,.tabs.solo-segno .conta-carrello{top:-.15rem;right:-.15rem}
@keyframes segno-sale{from{opacity:0;transform:translateY(1.4rem) scale(.9)}}
@media (prefers-reduced-motion:reduce){ .tabs.solo-segno{animation:none} }

@media(max-width:34rem){
  .saluto{gap:.65rem}
  .saluto h1{font-size:clamp(1.65rem,8vw,2.2rem)}
  .tabs{padding-inline:.85rem}
  .canale-capo-riga{display:block}.canale-pubblico{display:inline-flex;margin-top:.75rem}
  body.canale #fondo{padding-inline:.75rem}
  .carosello-storyboard{gap:.3rem}.story-slide{padding:.45rem;border-radius:.85rem}
  .story-slide strong{font-size:.78rem}.story-slide>span{left:.45rem;top:.4rem}
  .spazio-foto{inset:1.7rem .35rem auto;height:39%;font-size:.45rem}
}

/* ── QUELLO CHE È STATO TOLTO, E PERCHÉ SE NE PARLA QUI ────────────────────
   Il 01/09/2026, dopo la revisione: `.atlante-valle`, `.orbita`, `.pianeta` —
   la vecchia valle disegnata come un piccolo sistema solare, sostituita dalla
   carta vera di Leaflet il 25/08 — più `.qr-cornice`, `.qr-mirino` e
   `.tabs button.tab-qr`, cioè la schermata di lettura del codice prima che
   diventasse `M.ilCodice()`. Zero riferimenti in tutto il sito.

   Un foglio di stile non dà errore quando veste qualcosa che non esiste: resta
   lì, si legge, e la volta dopo qualcuno lo modifica per far funzionare una
   cosa che non funzionerà mai. È il motivo per cui si toglie invece di
   lasciarlo «per sicurezza». */

/* ── IL DIARIO OPERATIVO ───────────────────────────────────────────────────
   Michele, 02/09/2026: cinque todo con dentro i passi, spuntabili, e il
   rimando al punto che ne blocca un altro. Sta nel pannello, che è la sola
   schermata di Mercatorum che parla a una persona e le chiede qualcosa: qui
   la densità è una virtù, perché si legge da fermi e con l'intenzione di
   fare, non passando. */
.diario{display:grid;gap:.6rem;margin-top:.9rem}
.todo{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);overflow:hidden}
.todo.fatto{opacity:.62;background:var(--sunk)}
.todo.tardi{border-color:color-mix(in srgb,var(--rosso) 42%,var(--line))}
.todo.bloccato{border-style:dashed}
.todo-capo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.8rem .9rem}
/* La spunta di `_app.css` è pensata per una riga larga: dentro il capo di un
   todo si prende tutto lo spazio che le si dà, e diventa un rettangolo verde
   grande quanto il titolo. Qui vale la sua misura e basta. */
.todo-capo>.spunta,.todo-passi .spunta,.giorno-cose .spunta{padding:0;background:none;border:0;min-height:0;width:auto;align-self:start}
.todo-passi .spunta{margin-top:.15rem}
.todo-titolo{display:grid;gap:.15rem;text-align:left;border:0;background:none;padding:0;cursor:pointer;min-width:0}
.todo-titolo b{font-size:1rem;line-height:1.25;color:var(--ink)}
.todo-titolo small{color:var(--ink-3);font:400 .78rem var(--mono)}
.todo.fatto .todo-titolo b{text-decoration:line-through;text-decoration-thickness:1px}
/* La barra dice a che punto sei DENTRO il todo: senza, spuntare tre passi su
   sei non si vede da fuori, e un lavoro che non si vede avanzare si molla. */
.todo-avanti{display:grid;justify-items:center;gap:.25rem;width:3.4rem;flex:0 0 auto}
/* ⚠️ La barra ha bisogno di una PISTA, non solo di un riempimento: a zero passi
   fatti un riempimento largo zero è un puntino, e un puntino non si legge come
   «non hai ancora cominciato» — si legge come un difetto. La pista si vede
   sempre, il verde ci cammina sopra. */
.todo-avanti .pista{display:block;width:100%;height:.3rem;border-radius:999px;
  background:var(--sunk);box-shadow:0 0 0 1px var(--line) inset;overflow:hidden}
.todo-avanti .pista>i{display:block;height:100%;border-radius:999px;background:var(--pino);
  transition:width var(--stato) var(--ios)}
.todo-avanti small{color:var(--ink-3);font:500 .68rem var(--mono)}
.todo-bloccato{margin:0;padding:0 .9rem .8rem;color:var(--ink-2);font-size:.85rem}
/* Il rimando: «fermo finché non è chiuso QUELLO», e quello si apre da qui. Un
   bottone e non un testo, perché è una cosa che si preme. */
.rimando{border:0;background:none;padding:0;cursor:pointer;color:var(--pino);
  font:inherit;text-decoration:underline;text-underline-offset:2px}
.todo-dentro{border-top:1px solid var(--line);padding:.85rem .9rem 1rem;background:var(--ground)}
.todo-perche{margin:0 0 .9rem;color:var(--ink-2);line-height:1.5;max-width:60ch}
.todo-passi{display:grid;gap:.75rem;margin:0;padding:0;list-style:none;counter-reset:passo}
.todo-passi>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start}
.todo-passi>li.fatto{opacity:.55}
.todo-passi b{display:block;font-size:.9375rem;line-height:1.3}
.todo-passi p{margin:.2rem 0 0;color:var(--ink-2);font-size:.875rem;line-height:1.5;max-width:60ch}
.todo-asset{display:block;margin-top:.3rem;color:var(--ink-3);font:400 .72rem var(--mono);
  overflow-wrap:anywhere}
.todo-fine{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.todo-fine p{margin:0 0 .3rem;font-size:.875rem;line-height:1.45}
/* La consegna da dare all'avvocato: si legge e si copia, quindi è monospazio e
   scorre di lato invece di andare a capo dove capita. */
.consegna{margin:.8rem 0 0;padding:.85rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--sunk);color:var(--ink-2);font:400 .78rem/1.55 var(--mono);
  white-space:pre-wrap;overflow-x:auto;max-height:22rem;overflow-y:auto}
.avviso-riga{margin:.6rem 0 0;padding:.6rem .75rem;border-radius:var(--r-2);
  background:color-mix(in srgb,var(--oro) 16%,var(--surface));color:var(--ink);font-size:.875rem}
.elenco .riga.da-fare .tit{font-weight:600}

@media (max-width:30rem){
  .todo-capo{grid-template-columns:auto minmax(0,1fr);gap:.6rem;padding:.7rem .75rem}
  /* La barra passa sotto: a 360 px tre colonne vogliono dire un titolo di due
     parole per riga. */
  .todo-avanti{grid-column:2;width:100%;justify-items:start;
    grid-template-columns:minmax(0,1fr) auto;display:grid;align-items:center;gap:.5rem}
  .todo-dentro{padding:.75rem .75rem .9rem}
}

/* Le carte legali nel piede: una riga sotto le altre, più piccola e più
   silenziosa. Sono cose che si cercano quando servono, non strade da proporre. */
.piede-carte{display:flex;flex-wrap:wrap;gap:.15rem 1rem;margin-top:.55rem}
/* ── Il posto dove si va per SEGUIRE, non per fare. Una riga sua, un segno, e
   il nome grande abbastanza da essere un indirizzo invece di una nota. */
.piede-social{display:inline-flex;align-items:center;gap:.7rem;margin-top:1rem;
  padding:.7rem .95rem;border:1px solid var(--line);border-radius:1rem;
  background:var(--surface);color:var(--ink);text-decoration:none;min-height:2.75rem;
  transition:border-color var(--stato) var(--ios),background var(--stato) var(--ios)}
.piede-social:hover{border-color:var(--pino);background:var(--pino-velo)}
.piede-social svg{flex:0 0 auto;width:1.15rem;height:1.15rem;fill:var(--pino)}
.piede-social span{display:grid;gap:.05rem;min-width:0}
.piede-social b{font-family:var(--mono);font-size:.9rem;color:var(--pino);letter-spacing:.01em}
.piede-social small{color:var(--ink-3);font-size:.75rem;line-height:1.35}
.piede-carte a{color:var(--ink-3);font-size:.78rem;text-decoration:none}
.piede-carte a:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* Il corpo di una carta legale: una colonna sola, righe corte, e abbastanza
   aria fra un capoverso e l'altro da poterla leggere per intero senza perdere
   il segno. È l'unico posto del servizio in cui qualcuno legge mille parole di
   fila, e va trattato come tale. */
.carta-legale{max-width:38rem;margin:0 auto;padding:.5rem 0 2rem}
.carta-legale h2{margin:2rem 0 .5rem;font:700 1.35rem/1.2 var(--titolo);letter-spacing:-.015em}
.carta-legale h3{margin:1.4rem 0 .35rem;font:600 1.05rem/1.25 var(--sans)}
.carta-legale h4{margin:1.1rem 0 .3rem;font:600 .9375rem/1.3 var(--sans);color:var(--ink-2)}
.carta-legale p{margin:0 0 .8rem;line-height:1.62;color:var(--ink-2)}
.carta-legale li{margin:0 0 .45rem;line-height:1.55;color:var(--ink-2)}
.carta-legale ul,.carta-legale ol{margin:0 0 1rem;padding-left:1.2rem}
.carta-legale b{color:var(--ink)}
.carta-legale code{padding:.05rem .3rem;border-radius:.3rem;background:var(--sunk);
  font:400 .875em var(--mono)}
.carta-legale blockquote{margin:1rem 0;padding:.15rem 0 .15rem 1rem;
  border-left:.2rem solid var(--pino);color:var(--ink-2)}
.carta-legale blockquote p:last-child{margin-bottom:0}
.carta-legale hr{margin:2rem 0;border:0;border-top:1px solid var(--line)}
.carta-legale a{color:var(--pino)}

/* Il tasto che apre la carta di un passo: piccolo, sotto al «come», e con la
   busta davanti — si riconosce che è una mail prima di leggerla. */
.carta-tasto{margin-top:.5rem;display:inline-flex;align-items:center;gap:.4rem}
.carta-tasto svg{width:1rem;height:1rem}
.carta-oggetto{margin:.2rem 0 .8rem;padding:.55rem .7rem;border-radius:var(--r-2);
  background:var(--sunk);color:var(--ink-2);font-size:.9375rem;line-height:1.4}
/* Le carte pronte nell'elenco sono bottoni, non collegamenti: si aprono qui
   dentro invece di portare altrove. */
.elenco button.riga{width:100%;text-align:left;border:0;background:none;font:inherit;cursor:pointer}

/* Cosa c'è dentro un todo, senza doverlo aprire: quante carte pronte e quanti
   passi sono codice. Una riga sotto il capo, piccola, che si legge di sfuggita
   scorrendo i cinque — e che era esattamente quello che mancava il 02/09,
   quando le carte c'erano e non si vedevano. */
.todo-segni{display:flex;flex-wrap:wrap;gap:.35rem .7rem;margin:0;padding:0 .9rem .75rem}
.todo-segni span{display:inline-flex;align-items:center;gap:.3rem;
  font:500 .74rem var(--mono);color:var(--ink-3)}
.todo-segni svg{width:.9rem;height:.9rem}
.segno-carte{color:var(--pino)!important}
.segno-mio{padding:.1rem .45rem;border-radius:999px;background:var(--sunk)}
.todo-conto{margin:.6rem 0 0;color:var(--ink-2);font-size:.875rem;line-height:1.5}
.todo-conto b{color:var(--ink)}
/* Un passo che è mio si distingue senza urlare: la riga di fianco più chiara e
   una parola in coda al titolo. */
.todo-passi>li.mio>div>b{display:block}
.tocca-a-me{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;
  background:var(--sunk);color:var(--ink-3);font:500 .68rem var(--mono);vertical-align:.08em}
.carte-passo{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}

/* I dati per fatturare stanno chiusi in un <details>: sono cinque campi che
   servono a chi vende e a nessun altro, e aperti spingono giù tutto il resto
   della scheda per chi non li compilerà mai. */
.campi-fisco{border:1px solid var(--line);border-radius:var(--r-2);padding:.7rem .85rem;background:var(--surface)}
.campi-fisco>summary{cursor:pointer;font-weight:600;font-size:.9375rem;list-style:none}
.campi-fisco>summary::-webkit-details-marker{display:none}
.campi-fisco>summary::before{content:'+';display:inline-block;width:1rem;color:var(--ink-3)}
.campi-fisco[open]>summary::before{content:'–'}
.campi-fisco[open]>summary{margin-bottom:.4rem}
.campi-fisco .campo{margin-top:.6rem}

/* ── LA VETRINA ────────────────────────────────────────────────────────────
   Quando il servizio non risponde ma il sito sì. Una riga in cima, calda e non
   allarmata: non è un errore di chi guarda, ed è una cosa che passa. Sta dentro
   `main` e non fissa in alto, perché non deve seguire chi scorre — si legge una
   volta e poi si guarda il mercato. */
.vetrina-riga{margin:0 0 1rem;padding:.7rem .9rem;border-radius:var(--r-2);
  background:color-mix(in srgb,var(--oro) 18%,var(--surface));
  border:1px solid color-mix(in srgb,var(--oro) 38%,var(--line));
  color:var(--ink);font-size:.875rem;line-height:1.5}
.vetrina-riga b{color:var(--ink)}
/* I tasti che non possono funzionare restano, e si vede che sono spenti: uno
   che sparisce fa pensare che la funzione non esista. */
.in-vetrina .tabs a[href="posta.html"],
.in-vetrina .porta-quanti{opacity:.55}

/* La demo che gira nella pagina è un'altra cosa dalla vetrina: verde invece che
   ambra, perché non è un guasto — è il servizio, spostato. */
.vetrina-riga.viva{background:color-mix(in srgb,var(--pino) 13%,var(--surface));
  border-color:color-mix(in srgb,var(--pino) 34%,var(--line))}

/* Il testo di una carta dentro il foglio: si legge, non si decodifica. Sono le
   stesse regole della carta legale, strette a misura di un foglio che si apre
   dal basso. */
.carta-testo{max-height:26rem;overflow-y:auto;padding-right:.3rem;
  color:var(--ink-2);line-height:1.6}
.carta-testo h2{margin:1.1rem 0 .35rem;font:700 1.05rem/1.25 var(--sans);color:var(--ink)}
.carta-testo h3{margin:.9rem 0 .3rem;font:600 .9375rem/1.3 var(--sans);color:var(--ink)}
.carta-testo p{margin:0 0 .65rem}
.carta-testo ul,.carta-testo ol{margin:0 0 .8rem;padding-left:1.15rem}
.carta-testo li{margin:0 0 .35rem}
.carta-testo b{color:var(--ink)}
.carta-testo hr{margin:1rem 0;border:0;border-top:1px solid var(--line)}
.carta-testo blockquote{margin:.7rem 0;padding:.1rem 0 .1rem .8rem;
  border-left:.18rem solid var(--pino)}
.carta-testo code{padding:.05rem .25rem;border-radius:.3rem;background:var(--sunk);
  font:400 .875em var(--mono)}
.carta-testo .riga-tabella{font:400 .85rem var(--mono);color:var(--ink-3)}

/* La nota che si legge PRIMA di mandare: piccola, sopra, e si distingue dal
   testo che si manda. */
.carta-nota{margin:0 0 .8rem;padding:.6rem .75rem;border-left:.18rem solid var(--ink-3);
  color:var(--ink-3);font-size:.8125rem;line-height:1.5;white-space:pre-wrap}
/* ⚠️ Il testo da mandare ha un riquadro suo, e non è decorazione: è il modo di
   far vedere dove finisce la mail e dove ricominciano gli appunti. Prima erano
   un blocco solo e «copia» prendeva tutto. */
.carta-testo.da-mandare{padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--surface);max-height:24rem}
.carta-dopo{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem}
.carta-dopo>summary{cursor:pointer;color:var(--ink-3);font:500 .8125rem var(--mono);
  list-style:none}
.carta-dopo>summary::-webkit-details-marker{display:none}
.carta-dopo>summary::before{content:'+ ';color:var(--ink-3)}
.carta-dopo[open]>summary::before{content:'– '}
.carta-dopo p,.carta-dopo li{font-size:.85rem;color:var(--ink-2)}

/* ── Il fascicolo: documenti da aprire davanti a qualcuno ────────────────────
   Righe alte, non una lista di link: ognuna deve dire cosa è, a chi serve e
   quanto pesa PRIMA di essere premuta. Un tasto «scarica» che consegna 1,1 MB
   senza averlo detto è una piccola scortesia a chi sta in 4G in valle. */
.fasc{display:grid;gap:.5rem}
.fasc-voce{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color var(--tocco) linear,transform var(--stato) var(--molla-viva)}
.fasc-voce:hover{border-color:var(--pino);transform:translateY(-1px)}
.fasc-segno{flex:0 0 2rem;height:2rem;display:grid;place-items:center;border-radius:.6rem;
  background:var(--sunk);color:var(--ink-3)}
.fasc-segno svg{width:1.1rem;height:1.1rem}
.fasc-segno.xlsx{background:color-mix(in srgb,var(--pino) 14%,transparent);color:var(--pino)}
.fasc-segno.pdf{background:color-mix(in srgb,var(--rosso) 12%,transparent);color:var(--rosso)}
.fasc-corpo{flex:1;min-width:0;display:grid;gap:.15rem}
.fasc-tit{font-weight:600;line-height:1.25}
.fasc-per{font:500 .75rem/1.35 var(--mono);color:var(--pino);
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.fasc-cosa{font-size:.8125rem;line-height:1.45;color:var(--ink-3)}
.fasc-peso{flex:0 0 auto;text-align:right;font:500 .68rem/1.4 var(--mono);
  letter-spacing:.06em;color:var(--ink-3)}
.fasc-peso b{display:block;font-weight:500;font-size:.72rem;color:var(--ink-2)}
@media (max-width:30rem){
  .fasc-per{white-space:normal}
  .fasc-peso{align-self:flex-start}
}

/* I rimandi al paragrafo del piano: stanno sotto il «perché» e sopra i passi,
   che è l'ordine in cui si legge — prima capisco, poi faccio. Discreti: sono
   un aiuto, non il contenuto del punto. */
.todo-legge{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .9rem}
.todo-legge>span{font:500 .7rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);width:100%}
.todo-legge a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:.78rem;color:var(--ink-2);text-decoration:none;line-height:1.3}
.todo-legge a:hover{border-color:var(--pino);color:var(--pino)}
.todo-legge svg{width:.85rem;height:.85rem;flex:0 0 auto;opacity:.6}

/* ═══ L'AGENDA: GIORNO PER GIORNO ═══════════════════════════════════════════
   Michele, 02/09/2026: «task per day, visibile anche prossimi, 5 max, con
   progress bar». Il giorno è la carta; le cose sono dentro. Oggi si distingue
   con una riga verde a sinistra e non con un colore diverso: una carta di un
   altro colore diventa una categoria, e domani non è una categoria. */
.linee{display:flex;gap:.35rem;margin:0 0 1rem;padding:.25rem;border-radius:999px;
  background:var(--sunk);width:fit-content;max-width:100%}
.linea-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;
  border:0;border-radius:999px;background:transparent;color:var(--ink-3);
  font:500 .875rem/1 inherit;cursor:pointer;white-space:nowrap;
  transition:background var(--tocco) linear,color var(--tocco) linear}
.linea-tab b{font:600 .72rem/1 var(--mono);opacity:.7}
.linea-tab.scelta{background:var(--surface);color:var(--ink);box-shadow:var(--om-1)}
.linea-tab.scelta b{color:var(--pino);opacity:1}
.linea-tab:hover:not(.scelta){color:var(--ink-2)}

.giorno{margin:0 0 .9rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden}
.giorno.oggi{border-color:color-mix(in srgb,var(--pino) 35%,var(--line))}
.giorno.oggi .giorno-capo{background:color-mix(in srgb,var(--pino) 7%,transparent)}
.giorno-capo{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.7rem .9rem .6rem}
.giorno-capo b{font:600 1rem/1.2 inherit;display:block}
.giorno-capo small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.1rem}
.giorno-conto{flex:0 0 auto;font:500 .72rem/1.3 var(--mono);color:var(--ink-3);text-align:right}
.giorno-conto i{display:block;font-style:normal;opacity:.75;font-size:.68rem}
/* La pista: sottile, larga quanto la carta. È l'avanzamento del giorno, e si
   guarda con la coda dell'occhio — non è un dato da leggere. */
.giorno-pista{height:3px;background:var(--sunk)}
.giorno-pista>i{display:block;height:100%;background:var(--pino);
  transition:width var(--schermo) var(--molla)}

.giorno-cose{margin:0;padding:0;list-style:none}
.cosa{display:flex;gap:.7rem;padding:.75rem .9rem;border-top:1px solid var(--line)}
.cosa:first-child{border-top:0}
.cosa .spunta{flex:0 0 auto;margin-top:.15rem}
.cosa-corpo{flex:1;min-width:0}
.cosa-corpo>b{display:block;font-weight:600;line-height:1.35}
.cosa-corpo>p{margin:.2rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.cosa input:checked~*,.cosa:has(input:checked) .cosa-corpo>b{text-decoration:line-through;
  text-decoration-color:var(--ink-4)}
.cosa:has(input:checked){opacity:.55}
.cosa-piede{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.45rem}
/* Il punto da cui viene: una riga sola. Il titolo di un punto è una frase
   intera, e a tre righe sotto ogni cosa diventava lui il testo principale. */
.cosa-da{border:0;background:transparent;padding:0;cursor:pointer;
  font:500 .72rem/1.3 var(--mono);color:var(--ink-3);text-decoration:underline;
  text-underline-offset:.15em;text-align:left;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosa-da:hover{color:var(--pino)}
.cosa-linea{font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .45rem;border-radius:999px;background:var(--sunk);color:var(--ink-3)}
.cosa.app .cosa-linea{background:color-mix(in srgb,var(--acqua) 12%,transparent);color:var(--acqua)}
.cosa.crescita .cosa-linea{background:color-mix(in srgb,var(--oro) 14%,transparent);color:var(--oro)}
.cosa-tardi{font:500 .7rem/1 var(--mono);color:var(--rosso)}
.cosa.tardi{background:color-mix(in srgb,var(--rosso) 4%,transparent)}

/* ═══ LE DIECI MOSSE ════════════════════════════════════════════════════════
   La coda di lavoro che propongo io. Numerata perché l'ordine è informazione:
   è l'ordine in cui le cose si sbloccano, non un elenco. */
.mosse{margin:0;padding:0;list-style:none;counter-reset:none;display:grid;gap:.5rem}
.mossa{display:flex;gap:.75rem;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--surface)}
.mossa.proposta{border-style:dashed}
.mossa-n{flex:0 0 1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;
  background:var(--sunk);color:var(--ink-3);font:600 .78rem/1 var(--mono)}
.mossa-corpo{flex:1;min-width:0}
.mossa-capo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.3rem}
.mossa-linea{display:inline-flex;align-items:center;gap:.25rem;
  font:600 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:999px;background:var(--sunk);color:var(--ink-3)}
.mossa-linea svg{width:.8rem;height:.8rem}
.mossa-linea.backend{background:color-mix(in srgb,var(--acqua) 13%,transparent);color:var(--acqua)}
.mossa-linea.frontend{background:color-mix(in srgb,var(--pino) 13%,transparent);color:var(--pino)}
.mossa-linea.design{background:color-mix(in srgb,var(--viola) 12%,transparent);color:var(--viola)}
.mossa-linea.crescita{background:color-mix(in srgb,var(--oro) 14%,transparent);color:var(--oro)}
.mossa-tag{font:500 .68rem/1 var(--mono);padding:.22rem .5rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-3);cursor:default}
.mossa-tag.diario{cursor:pointer}
.mossa-tag.diario:hover{border-color:var(--pino);color:var(--pino)}
.mossa-tag.proposta{border-style:dashed;color:var(--oro);border-color:color-mix(in srgb,var(--oro) 45%,var(--line))}
.mossa-fine{display:flex;flex-wrap:wrap;gap:.15rem .75rem;margin-top:.45rem}
.mossa-quanto{font:500 .72rem/1.4 var(--mono);color:var(--ink-4)}
.mossa-quanto::before{content:'⏱ ';opacity:.6}
.mossa-corpo>b{display:block;font-weight:600;line-height:1.32}
.mossa-corpo>p{margin:.25rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.mossa-sblocca{font:500 .72rem/1.4 var(--mono);color:var(--pino)}
.mossa-sblocca::before{content:'→ ';opacity:.7}


/* Il «come» accorciato: tre righe, e il resto si apre. Il tasto è una parola,
   non un bottone: aprire una nota non è un'azione che merita un rettangolo. */
.cosa-come{margin:.2rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.cosa-come.stretta{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.cosa-piu{margin:.25rem 0 0;padding:0;border:0;background:transparent;cursor:pointer;
  font:500 .74rem/1.3 var(--mono);color:var(--pino)}
.cosa-piu:hover{text-decoration:underline}
/* ⚠️ Il titolo di una carta pronta è lungo quanto una frase: senza questo il
   tasto usciva dal riquadro e l'ultima parola finiva fuori dallo schermo. */
.carte-passo{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.carte-passo .btn{max-width:100%;white-space:normal;text-align:left;line-height:1.3}

/* La pista del punto, dentro la cosa del giorno: piccola, accanto al nome del
   punto. Non è un dato da leggere, è un movimento da vedere. */
.cosa-avanti{display:inline-flex;align-items:center;gap:.35rem}
.cosa-avanti .pista{width:2.6rem;height:3px;border-radius:2px;background:var(--sunk);
  overflow:hidden;display:block}
.cosa-avanti .pista>i{display:block;height:100%;background:var(--pino);
  transition:width var(--schermo) var(--molla)}
.cosa-avanti small{font:500 .66rem/1 var(--mono);color:var(--ink-4)}

/* ═══ IL BUDGET ═════════════════════════════════════════════════════════════
   Michele, 02/09/2026: «una parte budget con spese fatte o previste come fossi
   un cfo». La cassa in grande e una frase che la spiega: un numero da solo su
   un cruscotto di soldi è un numero che ognuno interpreta a modo suo. */
.cassa{display:grid;gap:.15rem;padding:1rem 1.1rem;border-radius:var(--r-2);
  background:color-mix(in srgb,var(--pino) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pino) 22%,var(--line))}
.cassa>b{font:700 clamp(1.8rem,7vw,2.4rem)/1 var(--titolo);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--pino)}
.cassa>small{color:var(--ink-3);font-size:.82rem}
.cassa.rossa{background:color-mix(in srgb,var(--rosso) 7%,var(--surface));
  border-color:color-mix(in srgb,var(--rosso) 25%,var(--line))}
.cassa.rossa>b{color:var(--rosso)}
.quadra{margin:.7rem 0 0;padding:.7rem .85rem;border-radius:var(--r-1);
  background:var(--sunk);font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.quadra.buona{background:color-mix(in srgb,var(--pino) 8%,transparent);color:var(--ink-2)}

/* Una previsione ha una forma sua: titolo e provenienza in alto, la nota in
   mezzo, la forbice e i due tasti in fondo. In riga sola, su un telefono, il
   titolo si schiacciava a metà colonna. */
.previste{display:grid;gap:.5rem}
.prevista{padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface)}
.prevista.vicina{border-left:.2rem solid var(--oro)}
.prevista.scaduta{border-left-color:var(--rosso)}
.prevista-capo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.prevista-capo>b{font-weight:600;line-height:1.3}
.prevista-quando{margin:.2rem 0 0;font:500 .76rem/1.4 var(--mono);color:var(--ink-3)}
.prevista-nota{margin:.35rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prevista-fine{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem}
.prevista-fine>b{font:600 .95rem/1 var(--mono);font-variant-numeric:tabular-nums;
  margin-right:auto}
.prevista-punto{border:0;background:transparent;padding:0;cursor:pointer;
  font:500 .74rem/1 var(--mono);color:var(--ink-3);text-decoration:underline;
  text-underline-offset:.15em}
.prevista-punto:hover{color:var(--pino)}
/* Da dove viene il numero. Un preventivo e una mia stima non sono la stessa
   cosa, e su un foglio di soldi la differenza va vista senza aprire niente. */
.certezza{font:500 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .4rem;border-radius:999px;vertical-align:.1em;
  background:var(--sunk);color:var(--ink-3)}
.certezza.preventivo{background:color-mix(in srgb,var(--pino) 14%,transparent);color:var(--pino)}
.certezza.listino{background:color-mix(in srgb,var(--acqua) 12%,transparent);color:var(--acqua)}
.certezza.ipotesi{background:color-mix(in srgb,var(--oro) 16%,transparent);color:var(--oro)}

.barre{display:grid;gap:.4rem;margin:.2rem 0 .9rem}
.barra{display:grid;grid-template-columns:7rem 1fr auto;align-items:center;gap:.6rem;
  font-size:.8125rem}
.barra>span{color:var(--ink-3)}
.barra>i{height:.5rem;border-radius:999px;background:var(--pino);min-width:2px;
  transition:width var(--schermo) var(--molla)}
.barra>b{font:600 .8125rem/1 var(--mono);font-variant-numeric:tabular-nums}
.toglie{flex:0 0 auto;width:1.6rem;height:1.6rem;margin-left:.4rem;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-4);cursor:pointer;
  font:400 1rem/1 inherit;transition:border-color var(--tocco) linear,color var(--tocco) linear}
.toglie:hover{border-color:var(--rosso);color:var(--rosso)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:26rem){ .due{grid-template-columns:1fr} .barra{grid-template-columns:5.5rem 1fr auto} }

/* Il ritorno: il numero che distingue una curiosità da un servizio. Frase, non
   cifrone — con tre clienti una percentuale grande mentirebbe. */
.ritorno{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:.9rem 0 0;
  padding:.75rem .85rem;border-radius:var(--r-1);border:1px solid var(--line);
  background:var(--surface)}
.ritorno>b{font:700 1.35rem/1 var(--titolo);color:var(--pino);font-variant-numeric:tabular-nums}
.ritorno>span{flex:1;min-width:12rem;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.ritorno.presto{border-style:dashed}
.ritorno.vuoto{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:var(--r-1);
  background:var(--sunk);color:var(--ink-3);font-size:.85rem}

/* ═══ L'ETICHETTA DI UN ALIMENTO ════════════════════════════════════════════
   Reg. UE 1169/2011 art. 14: queste cose si dicono PRIMA dell'acquisto, non
   sulla confezione che arriva dopo. Quindi aperte sulla scheda, non dentro un
   dettaglio da aprire. */
.etichetta{margin:1rem 0 0;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--sunk)}
.etichetta>h3{margin:0 0 .5rem;font:600 .72rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.etichetta dl{margin:0;display:grid;gap:.4rem}
.etichetta dl>div{display:grid;grid-template-columns:8rem 1fr;gap:.6rem;align-items:baseline}
.etichetta dt{font:500 .74rem/1.4 var(--mono);color:var(--ink-3)}
.etichetta dd{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.etichetta dd b{color:var(--ink)}
.etichetta .manca{margin:.55rem 0 0;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.5;color:var(--rosso)}
@media (max-width:26rem){ .etichetta dl>div{grid-template-columns:1fr;gap:.05rem} }

/* Il modulo, dal lato di chi vende. */
.etichetta-modulo{margin:.4rem 0 .9rem;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--sunk)}
.etichetta-modulo>h3{margin:0;font:600 .95rem/1.2 inherit}
.etichetta-modulo>.muto{margin:.2rem 0 .7rem;font-size:.8125rem;line-height:1.45}
.allergeni{border:0;margin:.2rem 0 .6rem;padding:0}
.allergeni legend{font:500 .8125rem/1 inherit;color:var(--ink-2);padding:0 0 .4rem}
.allergene{display:flex;gap:.5rem;align-items:flex-start;padding:.32rem .1rem;cursor:pointer}
.allergene input{margin:.15rem 0 0;accent-color:var(--pino);width:1.05rem;height:1.05rem;flex:0 0 auto}
.allergene>span{font-size:.85rem;line-height:1.35}
.allergene i{display:block;font-style:normal;font-size:.75rem;color:var(--ink-4)}
/* «Nessuno di questi» si stacca dai quattordici: è una risposta di natura
   diversa, non il quindicesimo allergene. */
.allergene.nessuno{margin-top:.4rem;padding-top:.55rem;border-top:1px solid var(--line)}

/* «Contiene: latte, glutine» nel carrello: piccolo ma non grigio. È l'unica
   riga di un carrello che qualcuno legge perché deve, non perché vuole. */
.allergeni-riga{display:block;margin-top:.15rem;font-size:.78rem;color:var(--rosso)}
.allergeni-riga b{font-weight:600}

/* La ricevuta, per chi non ha costruito il servizio. Il nome di chi prende i
   soldi sotto il ruolo, e il perché sotto ancora: «Al produttore» è un ruolo,
   «Al Panificio di Fiorano» è una persona a cui stai dando dei soldi. */
.split-capo{margin:0 0 .7rem;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.voce{align-items:flex-start}
.voce .che b{display:block;font-weight:600;font-size:.9rem;line-height:1.3;color:var(--ink)}
.voce .che i{display:block;font-style:normal;font-size:.78rem;line-height:1.4;
  color:var(--ink-3);margin-top:.1rem}
.voce .num{padding-top:.1rem;font-variant-numeric:tabular-nums}

/* ═══ IL BIGLIETTO DI UN PRODUTTORE ═════════════════════════════════════════
   Si apre da una chat, spesso da qualcuno che non sa cos'è Mercatorum. Una
   colonna sola, niente navigazione, e i tre passi di «come funziona» sempre
   visibili: senza quelli il tasto «Compra» porta in un posto che non capisce. */
.biglietto{max-width:32rem;padding-top:1.5rem;padding-bottom:3rem}
.bg{display:grid;gap:1.1rem}
.bg-capo>h1{margin:.35rem 0 0;font:700 clamp(1.9rem,7vw,2.6rem)/1.05 var(--titolo);
  letter-spacing:-.03em;text-wrap:balance}
.bg-racconto{margin:.6rem 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.bg-dove{display:flex;align-items:center;gap:.35rem;margin:.5rem 0 0;
  font:500 .8125rem/1.4 var(--mono);color:var(--ink-3)}
.bg-dove svg{width:.9rem;height:.9rem;flex:0 0 auto}
.bg-dove a{color:var(--pino)}

.bg-cose{display:grid;gap:.5rem}
.bg-cose.attesa{opacity:.75}
.bg-titoletto{margin:0 0 .1rem;font:600 .7rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.bg-cosa{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.bg-cosa img,.bg-senzafoto{flex:0 0 3.4rem;width:3.4rem;height:3.4rem;border-radius:var(--r-1);
  object-fit:cover;background:var(--sunk);display:grid;place-items:center;color:var(--ink-4)}
.bg-cosa-corpo{flex:1;min-width:0;display:grid;gap:.1rem}
.bg-cosa-corpo>b{font-weight:600;line-height:1.25}
.bg-cosa-corpo>small{font-size:.78rem;color:var(--ink-3);line-height:1.35}
.bg-allergeni{color:var(--rosso)}
.bg-prezzo{flex:0 0 auto;font:600 1rem/1 var(--mono);font-variant-numeric:tabular-nums}

.bg-come{padding:.9rem 1rem;border-radius:var(--r-2);background:var(--sunk)}
.bg-come ol{margin:.5rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem}
.bg-come li{font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.bg-nota{margin:.7rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
.bg-tasti{display:grid;gap:.5rem}
.bg-piede{text-align:center;font-size:.8125rem}
.bg-piede a{color:var(--ink-3)}

/* Un modo di pagare che ARRIVA: si vede, non si preme. Tratteggiato come le
   previsioni del budget — è la stessa idea, una cosa dichiarata e non ancora
   vera. */
.paga.in-arrivo{border-style:dashed;opacity:.75}
.paga.in-arrivo b::after{content:' · in arrivo';font:500 .68rem/1 var(--mono);
  letter-spacing:.05em;text-transform:uppercase;color:var(--oro)}

/* Le fasi delle spese previste: adesso, pilota, crescita. Una spesa di fra sei
   mesi guardata come un problema di oggi è un problema inventato. */
.fase{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:1.4rem 0 .5rem}
.fase:first-of-type{margin-top:.8rem}
.fase-capo{display:flex;align-items:baseline;gap:.6rem;width:100%}
.fase-capo>b{font:600 .95rem/1.2 inherit}
.fase-capo>span{margin-left:auto;font:600 .8125rem/1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink-3)}
.fase-dice{margin:.1rem 0 0;font-size:.8125rem;color:var(--ink-3);width:100%}

/* Quanto costa incassare, per binario. Una riga per ognuno, con la barra che
   dice quanta parte del ricavo se ne va: è l'unico modo per vedere a occhio
   che fra 0,20 € e 0,83 € non c'è una piccola differenza. */
.rotaie{display:grid;gap:.5rem}
.rotaia{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;padding:.7rem .85rem;
  border:1px dashed var(--line);border-radius:var(--r-2);background:var(--surface)}
.rotaia.attiva{border-style:solid;border-color:color-mix(in srgb,var(--pino) 30%,var(--line))}
.rotaia-nome{font-weight:600;line-height:1.3}
.rotaia-nome i{margin-left:.35rem;white-space:nowrap}
.rotaia-nome i{font:500 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  font-style:normal;color:var(--oro)}
.rotaia-costo{font:600 1rem/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.rotaia-pista{grid-column:1;height:.35rem;border-radius:999px;background:var(--sunk);
  overflow:hidden;align-self:center;margin:.2rem 0}
.rotaia-pista>i{display:block;height:100%;background:var(--rosso)}
.rotaia-quota{font:500 .75rem/1 var(--mono);color:var(--rosso);text-align:right;align-self:center}
.rotaia-resta{font-size:.8125rem;color:var(--ink-2)}
.rotaia-anno{font:500 .72rem/1.3 var(--mono);color:var(--ink-4);text-align:right}

/* ═══ IL FOGLIO DEL PACCO ═══════════════════════════════════════════════════
   Viaggia dentro lo scatolone e finisce su uno scaffale in un bar. Deve dirsi
   da lontano: codice grande, cosa c'è dentro, dove va. E deve stampare bene su
   un foglio A4 piegato — che è il modo in cui la gente lo userà davvero. */
.foglio-pacco{max-width:34rem;padding-top:1.5rem;padding-bottom:3rem}
.fp{display:grid;gap:1rem}
.fp-capo{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;border-bottom:2px solid var(--ink)}
.fp-capo h1{margin:.3rem 0 0;font:700 clamp(1.3rem,4.5vw,1.7rem)/1.2 var(--titolo);
  letter-spacing:-.02em;text-wrap:balance}
.fp-codice{flex:0 0 auto;text-align:right}
.fp-codice small{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.fp-codice b{font:700 1.4rem/1.1 var(--mono);letter-spacing:.02em}

.fp-viaggio{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.fp-viaggio>div{display:grid;gap:.1rem;align-content:start}
.fp-viaggio small{font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.fp-viaggio b{font-size:.95rem;line-height:1.25}
.fp-viaggio i{font-style:normal;font-size:.78rem;color:var(--ink-3);line-height:1.3}

.fp-cose{width:100%;border-collapse:collapse;font-size:.875rem}
.fp-cose th{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--ink);
  font:600 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fp-cose td{padding:.5rem;border-bottom:1px solid var(--line);vertical-align:top}
.fp-cose td.n,.fp-cose td.m{font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-cose td.m{font:500 .8125rem/1.4 var(--mono)}
/* ⚠️ Non `.vuoto`: quello è già il componente della schermata vuota, e le due
   celle si vestivano da riquadro con dentro una parola. Una collisione di nome
   in un foglio di stile non dà nessun errore — disegna e basta. */
.fp-cose .fp-vuoto{color:var(--ink-4);font-style:italic}
.fp-manca{margin:0;padding:.6rem .75rem;border-radius:var(--r-1);
  background:color-mix(in srgb,var(--rosso) 7%,transparent);color:var(--ink-2);
  font-size:.8125rem;line-height:1.5}

.fp-conto{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
  padding:.75rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fp-conto small{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem}
.fp-conto b{font-size:.95rem}
.fp-nota{margin:0;font-size:.8125rem;line-height:1.55;color:var(--ink-3)}
.fp-tasti{display:grid;gap:.5rem}

/* ⚠️ In stampa spariscono i tasti e il fondo colorato: quello che resta è il
   foglio. Un tasto «Stampa» stampato dentro il foglio che ha stampato è la
   cosa che fa sembrare un servizio fatto in fretta. */
@media print{
  body{background:#fff}
  .top,.tabs,.fp-tasti,.foglio{display:none !important}
  .foglio-pacco{max-width:none;padding:0}
  .fp{gap:.8rem}
  .fp-nota{color:#444}
  .fp-cose td,.fp-cose th{padding:.35rem .4rem}
}

/* ═══ QUELLO CHE ASPETTA UNA RISPOSTA DA TE ═════════════════════════════════
   «In linea semplice»: una riga per cosa. Sono venti domande, e venti schede
   sarebbero una schermata da scorrere invece di una lista da guardare. */
.date{margin:0;padding:0;list-style:none;display:grid;gap:.3rem}
.dat{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface)}
.dat.data,.dat.saltata{opacity:.62;border-style:dashed}
.dat-tipo{flex:0 0 3.4rem;font:500 .62rem/1.6 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.1rem}
.dat-corpo{flex:1;min-width:0;display:grid;gap:.1rem}
.dat-corpo>b{font-weight:600;line-height:1.3;font-size:.9375rem}
.dat-perche{font-size:.8125rem;line-height:1.45;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dat-risposta{font:500 .8125rem/1.4 var(--mono);color:var(--pino);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dat.saltata .dat-risposta{color:var(--ink-4)}
.dat-quanti,.dat-entro{font:500 .7rem/1.4 var(--mono);color:var(--ink-4)}
.dat-entro{color:var(--oro)}
.dat-tasto{flex:0 0 auto;align-self:center;border:1px solid var(--line);background:transparent;
  border-radius:999px;padding:.3rem .7rem;font:500 .78rem/1 inherit;color:var(--ink-2);
  cursor:pointer;transition:border-color var(--tocco) linear,color var(--tocco) linear}
.dat-tasto:hover{border-color:var(--pino);color:var(--pino)}
.date-chiuse{margin-top:.7rem}
.date-chiuse>summary{cursor:pointer;font:500 .8125rem/1 var(--mono);color:var(--ink-3);
  padding:.4rem 0}
.date-chiuse[open]>summary{margin-bottom:.4rem}

/* ═══ I BANDI ═══════════════════════════════════════════════════════════════
   Tre cose per riga, e la terza decide: quanto vale, entro quando, e cosa
   bisogna GIÀ ESSERE. Un bando da un milione a cui non si è ammissibili vale
   zero, e senza il conto dei requisiti sembra la cosa più importante. */
.bando{margin:0 0 .7rem;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--surface)}
.bando.aperto{border-color:color-mix(in srgb,var(--pino) 30%,var(--line))}
.bando.scaduto{opacity:.55}
.bando-capo{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.bando-capo b{display:block;font-weight:600;line-height:1.25}
.bando-capo small{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.1rem}
.bando-stato{flex:0 0 auto;font:600 .68rem/1 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;padding:.28rem .55rem;border-radius:999px;
  background:var(--sunk);color:var(--ink-3)}
.bando.aperto .bando-stato{background:color-mix(in srgb,var(--pino) 14%,transparent);color:var(--pino)}
.bando-quanto{margin:.5rem 0 0;font:600 .95rem/1.3 var(--mono);color:var(--ink)}
.bando-quando{margin:.15rem 0 0;font-size:.8125rem;color:var(--ink-3)}
.bando-nota{margin:.5rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.bando-req{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .35rem}
.bando-pista{flex:1;height:.35rem;border-radius:999px;background:var(--sunk);overflow:hidden}
.bando-pista>i{display:block;height:100%;background:var(--pino);
  transition:width var(--schermo) var(--molla)}
.bando-req>b{font:500 .75rem/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.bando-lista{margin:0;padding:0;list-style:none;display:grid;gap:.15rem}
.bando-lista li{display:flex;align-items:center;gap:.4rem;font-size:.8125rem}
.bando-lista li svg{width:.9rem;height:.9rem;color:var(--pino);flex:0 0 auto}
.bando-lista li>i{width:.9rem;height:.9rem;border:1.5px solid var(--line-2);border-radius:50%;
  flex:0 0 auto;display:block}
.bando-lista button{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;
  font:inherit;font-size:.8125rem;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:.15em}
.bando-lista li.si button{color:var(--ink-4);text-decoration:none}
.bando-lista button:hover{color:var(--pino)}
.bando-altro{margin-top:.6rem}
.bando-altro>summary{cursor:pointer;font:500 .78rem/1 var(--mono);color:var(--ink-3)}
.bando-altro ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.8125rem;color:var(--ink-3)}
.bando-cancello{margin:.7rem 0 0;padding:.6rem .75rem;border-radius:var(--r-1);
  background:color-mix(in srgb,var(--oro) 12%,transparent);font-size:.8125rem;line-height:1.5;
  color:var(--ink-2)}

/* Una riga di «Cosa manca» riusa la riga delle risposte: sono la stessa forma
   — una cosa, il perché, e un gesto — e due componenti che si somigliano al 90%
   sono peggio di uno solo. Cambia solo la spunta a tre stati. */
.dat .spunta-t{flex:0 0 auto;align-self:flex-start;margin-top:.1rem}
.dat.passo-in-corso{border-color:color-mix(in srgb,var(--rame) 40%,var(--line))}
.dat.passo-fatto .dat-corpo>b{text-decoration:line-through;text-decoration-color:var(--ink-4)}

/* ═══ LE TABELLE DEL BUDGET ═════════════════════════════════════════════════
   Michele, 03/09/2026: «like excel table with nice filtering options and tabs».
   Non un foglio di calcolo finto — quello c'è, si scarica e ha le formule —
   ma la stessa presa: guardo, ordino, filtro, trovo. */
.tab-strumenti{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .6rem}
.tab-cerca{flex:1;min-width:9rem;max-width:none;padding:.45rem .7rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:inherit;font-size:.875rem}
.tab-cerca:focus{outline:2px solid var(--pino);outline-offset:1px}
.tab-chip{display:flex;flex-wrap:wrap;gap:.25rem}
.tab-c{border:1px solid var(--line);background:transparent;border-radius:999px;
  padding:.28rem .6rem;font:500 .75rem/1 inherit;color:var(--ink-3);cursor:pointer;
  transition:background var(--tocco) linear,color var(--tocco) linear}
.tab-c.scelto{background:var(--pino);border-color:var(--pino);color:var(--su-accento)}
.tab-conto{margin-left:auto;font:500 .72rem/1 var(--mono);color:var(--ink-4)}

/* ⚠️ La tabella scorre dentro il suo riquadro. Cinque colonne su 390 px non ci
   stanno, e senza questo la PAGINA scorre di lato — che è il difetto che si
   vede solo sul telefono e rompe tutto il resto. */
.tab-giro{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface)}
/* ⚠️ 34rem, non 26: con cinque colonne su 390 px la prima si stringeva a
   undici caratteri e la nota diventava una colonna di parole singole alta
   quanto lo schermo. La tabella deve avere la sua larghezza VERA e scorrere
   dentro il riquadro — è il senso di overflow-x. */
.tab{border-collapse:collapse;width:100%;font-size:.85rem;min-width:34rem}
.tab th{position:sticky;top:0;background:var(--sunk);text-align:left;
  padding:.5rem .6rem;border-bottom:1px solid var(--line);cursor:pointer;
  font:600 .66rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;user-select:none}
.tab th:hover{color:var(--pino)}
.tab th i{font-style:normal;margin-left:.2rem;color:var(--pino)}
.tab th.n,.tab td.n{text-align:right;font-variant-numeric:tabular-nums}
.tab td{padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;
  line-height:1.35}
.tab tbody tr:last-child td{border-bottom:0}
.tab tbody tr:hover{background:color-mix(in srgb,var(--pino) 4%,transparent)}
/* La nota a due righe: in una tabella si guarda, non si legge. Per intero sta
   nella scheda della previsione, che è dove uno la apre quando gli serve. */
.tab td small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--ink-4);font-size:.75rem;line-height:1.4;margin-top:.1rem;
  max-width:20rem}
.tab td:first-child{min-width:11rem}
.tab .tab-vuota{color:var(--ink-3);text-align:center;padding:1.2rem}
.tab tr.tab-tardi td:first-child{box-shadow:inset .18rem 0 0 var(--rosso)}
.tab .btn.sm,.tab .toglie{white-space:nowrap}

/* ⚠️ «Chiedimelo» non è «è fatto», e i due gesti non si somigliano.
   Michele, 03/09/2026: «sto flaggando cose che "fai tu" ma vuol dire che sono
   fatte in backlog da te?». La spunta quadrata dice «è successo»; il tondo col
   più dice «mettilo in coda». Se si somigliassero, si tornerebbe al punto di
   partenza: un piano che si dichiara più avanti di dov'è. */
.chiedi{flex:0 0 auto;width:1.65rem;height:1.65rem;margin-top:.15rem;align-self:flex-start;
  border-radius:50%;border:1.5px dashed var(--line-2);background:var(--surface);
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;
  font:500 1rem/1 var(--mono);
  transition:border-color var(--tocco) linear,background var(--tocco) linear,
             transform var(--stato) var(--molla-viva)}
.chiedi:hover{border-color:var(--pino);color:var(--pino)}
.chiedi:active{transform:scale(.9)}
.chiedi.incoda{border-style:solid;border-color:var(--pino);background:var(--pino-velo)}
.chiedi.incoda>i{width:.55rem;height:.55rem;border-radius:50%;background:var(--pino);display:block}
.chiedi.fatto{border-style:solid;background:var(--pino);border-color:var(--pino);
  color:var(--su-accento)}
.chiedi.fatto svg{width:.9rem;height:.9rem;stroke-width:2.6}
.tocca-a-me.incoda{background:color-mix(in srgb,var(--pino) 16%,transparent);color:var(--pino)}
.mossa-tag.chiesta{border-style:solid;color:var(--pino);
  border-color:color-mix(in srgb,var(--pino) 45%,var(--line));
  background:color-mix(in srgb,var(--pino) 8%,transparent)}

/* ═══ L'INGRESSO A SCHERMO PIENO ════════════════════════════════════════════
   Michele, 03/09/2026 a voce: «tipo fullscreen Instagram story, con gli asset
   SVG belli di Mercatorum, animazioni floating leggere, playful».
   Una domanda per schermata, le barrette in cima che dicono quante ne mancano.
   ⚠️ `.storia` è un nome nuovo apposta: il 03/09 abbiamo pagato un pomeriggio
   per una collisione fra un nome di stato e uno di componente. */
body.accoglienza{margin:0;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--orto-pesca,#f4dacb);padding:0;overflow-x:hidden}
.acc-barre{display:flex;gap:.25rem;padding:max(.7rem,env(safe-area-inset-top)) .9rem .2rem}
.acc-barre>i{flex:1;height:.2rem;border-radius:999px;background:rgba(16,21,16,.14);
  overflow:hidden;transition:background var(--schermo) linear}
.acc-barre>i.piena{background:var(--pino)}
.acc-barre>i.ora{background:linear-gradient(90deg,var(--pino) 50%,rgba(16,21,16,.14) 50%)}

.acc-palco{flex:1;display:flex;min-height:0}
.acc-lastra{flex:1;display:flex;flex-direction:column;
  max-width:34rem;margin:0 auto;width:100%;
  padding:.5rem 1.15rem max(1.2rem,env(safe-area-inset-bottom))}
.acc-figura{flex:0 0 auto;display:grid;place-items:center;padding:1rem 0 .4rem;
  min-height:9rem}
.acc-figura img{width:min(11rem,42vw);height:auto;filter:drop-shadow(0 .8rem 1.6rem rgba(36,75,58,.14))}
/* ═══ ⚠️ «BOA IN PIANO»: IL MOTO SCELTO ════════════════════════════════════
 *
 * Michele, 03/09/2026: «ok boa ma un po' rotazione anche smooth e meno vertical
 * floating ok? 2d plane floating i mean. E ancora, motions e entrate un po'
 * organic, not pre-scripted all equal».
 *
 * Tre cose, e sono tre decisioni separate:
 *
 * 1. MENO SU E GIÙ, PIÙ IN PIANO. Il galleggiamento verticale scende a tre
 *    pixel, quello orizzontale sale a otto: il disegno si sposta sul piano
 *    invece di fare l'ascensore. È anche più onesto — una cosa appoggiata su
 *    una superficie deriva, non rimbalza.
 *
 * 2. LA BOA RESTA, MA NELLA CURVA. Sale piano, si ferma un attimo, ricade più
 *    in fretta: la curva non è simmetrica, ed è quello che fa sentire un peso.
 *    Sta nei fotogrammi (45% e 55% allo stesso valore), non nell'ampiezza.
 *
 * 3. E LA ROTAZIONE È LENTA E MORBIDA. Diciassette secondi per un grado e
 *    mezzo: non si vede girare, si vede che è girato.
 *
 * ⚠️ ORGANICO, NON A CASO. I periodi — 7, 9, 17 — sono primi fra loro: le tre
 * onde tornano insieme ogni 1071 secondi, quasi diciotto minuti. E la FASE di
 * partenza di ogni elemento la tira `_mrc.js` una volta al caricamento: due
 * illustrazioni nella stessa pagina non respirano mai all'unisono, ed è
 * l'unisono — non la regolarità — la cosa che fa dire «è scritto».
 *
 * Il caso vero, un numero nuovo a ogni fotogramma, non si usa e non si deve
 * usare: non sembra acqua, sembra un'immagine che trema.
 */
/* ⚠️ `--amp` è un MOLTIPLICATORE, non un'ampiezza. Un'illustrazione grande
   quanto mezza schermata e una tessera da tre centimetri non possono muoversi
   degli stessi quattro pixel — sulla grande non si vede, sulla piccola sballa.
   Quello che deve restare identico è la CURVA: `--amp` scala, non riscrive.
   Sopra 2 si smette di galleggiare e si comincia a dondolare. */
@keyframes galleggia{
  0%{translate:0 calc(2px * var(--amp,1))}
  45%{translate:0 calc(-3px * var(--amp,1))}
  55%{translate:0 calc(-3px * var(--amp,1))}
  100%{translate:0 calc(2px * var(--amp,1))}
}
@keyframes galleggia-lato{
  0%,100%{translate:calc(-4px * var(--amp,1)) 0}
  50%{translate:calc(4px * var(--amp,1)) 0}
}
@keyframes galleggia-gira{
  0%,100%{rotate:calc(-1.5deg * var(--amp-gira,var(--amp,1)))}
  50%{rotate:calc(1.5deg * var(--amp-gira,var(--amp,1)))}
}
.galleggia{animation:
  galleggia var(--onda-su) cubic-bezier(.45,0,.2,1) infinite,
  galleggia-lato var(--onda-lato) ease-in-out infinite,
  galleggia-gira var(--onda-gira) ease-in-out infinite;
  animation-delay:var(--fase-su,0s), var(--fase-lato,0s), var(--fase-gira,0s)}
@media (prefers-reduced-motion:reduce){ .galleggia{animation:none} }

/* Il viaggio, alla sua dimensione vera. Un'animazione da valutare si guarda
   grande: rimpicciolita, un difetto di composizione sembra una scelta. */
.lab-viaggio{margin:1rem 0 0;padding:0}
.lab-viaggio img{display:block;width:100%;height:auto;border-radius:1.1rem;
  border:1px solid var(--line);background:var(--surface)}
.lab-viaggio figcaption{margin-top:.55rem;font-size:.8125rem;color:var(--ink-3);
  font-family:var(--mono);line-height:1.5}

/* La storia verticale accanto alle tavole: 9:16 è alta, e senza un tetto
   all'altezza si mangia due schermate del pannello da sola. */
.storia-kit{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.1rem;
  margin-top:1.1rem;padding:1rem;border:1px solid var(--line);border-radius:1.35rem;
  background:var(--surface)}
.storia-kit img{width:100%;height:auto;max-height:22rem;object-fit:contain;
  border-radius:.9rem;border:1px solid var(--line);background:var(--ground)}
.storia-kit b{display:block;font-size:.92rem}
.storia-kit p{margin:.35rem 0 0;color:var(--ink-2);font-size:.85rem;line-height:1.5}
.storia-kit .asset-azioni{margin-top:.7rem}
@media (max-width:34rem){ .storia-kit{grid-template-columns:1fr} }

/* ── Il marchio modificabile. Il selettore di colore vive DENTRO il quadro:
   il quadro è già il campione, e mettergli accanto un secondo comando avrebbe
   voluto dire due cose da guardare per una decisione sola. */
.tinta-quadro{position:relative;overflow:hidden;cursor:pointer}
.tinta-quadro input[type=color]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;cursor:pointer}
.tinta.cambiata,.carattere.cambiata{position:relative}
/* ⚠️ Un gettone cambiato lo DICE. Senza questo segno, fra un mese, guardando la
   tavola non si distingue quello che hai scelto tu da quello che c'è sempre
   stato — e non si sa più cosa si sta guardando. */
.tinta.cambiata::after,.carattere.cambiata::after{content:"tuo";position:absolute;
  right:.5rem;top:.5rem;padding:.1rem .4rem;border-radius:999px;
  background:var(--arancio,#f47b2f);color:#fff;
  font:700 .6rem/1.4 var(--mono);letter-spacing:.05em}
.tinta-torna{display:block;margin-top:.3rem;border:0;background:transparent;padding:0;
  color:var(--ink-3);font:500 .72rem/1.3 inherit;text-align:left;cursor:pointer;
  text-decoration:underline;text-underline-offset:.15em}
.tinta-torna:hover{color:var(--pino)}
.carattere-campo{width:100%;margin:.25rem 0;border:1px solid var(--line-2);
  border-radius:.6rem;background:var(--ground);color:var(--ink);
  font:500 .78rem/1.4 var(--mono);padding:.35rem .5rem}

/* L'interruttore che costa: sta in fondo, dopo che uno ha visto cosa ha
   cambiato, e dice il prezzo prima di essere premuto. */
.rigenera{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
  justify-content:space-between;margin-top:1.4rem;padding:.9rem 1.1rem;
  border:1px dashed var(--line-2);border-radius:1.2rem;background:var(--ground)}
.rigenera.acceso{border-style:solid;border-color:var(--arancio,#f47b2f);
  background:color-mix(in srgb,var(--arancio,#f47b2f) 7%,var(--ground))}
.rigenera b{display:block;font-size:.92rem}
.rigenera small{display:block;max-width:38rem;margin-top:.2rem;color:var(--ink-3);
  font-size:.78rem;line-height:1.45}
.interruttore{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;
  padding:.4rem .9rem .4rem .5rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;font:600 .82rem/1 inherit;
  transition:all var(--stato) var(--ios)}
.interruttore i{width:2.1rem;height:1.2rem;border-radius:999px;background:var(--line-2);
  position:relative;transition:background var(--stato) var(--ios)}
.interruttore i::after{content:"";position:absolute;top:.15rem;left:.15rem;
  width:.9rem;height:.9rem;border-radius:50%;background:var(--surface);
  transition:translate var(--stato) var(--ios)}
.interruttore.acceso{border-color:var(--arancio,#f47b2f);color:var(--arancio,#f47b2f)}
.interruttore.acceso i{background:var(--arancio,#f47b2f)}
.interruttore.acceso i::after{translate:.9rem 0}

/* ═══ I DUE GESTI TUOI: «ADESSO» E LA NOTA ═════════════════════════════════
   Stessa forma ovunque compaiano — agenda, passi, dieci mosse — perché sono la
   stessa cosa, e tre disegni per la stessa cosa sono tre cose da imparare. */
.tuoi-gesti{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.tuoi-gesti button{display:inline-flex;align-items:center;gap:.35rem;
  min-height:2.25rem;padding:.35rem .7rem;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:600 .78rem/1 inherit;
  transition:background var(--stato) var(--ios),border-color var(--stato) var(--ios),color var(--stato) var(--ios)}
.tuoi-gesti button svg{width:.9rem;height:.9rem;fill:currentColor}
.tuoi-gesti button:hover{border-color:var(--pino);color:var(--pino)}
/* ⚠️ Acceso si vede DA FERMO, senza doversi ricordare se l'hai premuto: pieno,
   non un bordo. Un interruttore che si distingue solo per il bordo è un
   interruttore di cui, dopo due giorni, non sai più lo stato. */
.tuoi-gesti .gesto-adesso.acceso{background:var(--arancio,#f47b2f);border-color:var(--arancio,#f47b2f);
  color:#fff}
.tuoi-gesti .gesto-adesso.acceso:hover{filter:brightness(.94);color:#fff}
.tuoi-gesti .gesto-nota.piena{border-color:var(--pino);color:var(--pino)}
.tua-nota{margin:.55rem 0 0;padding:.6rem .8rem;border:0;border-left:3px solid var(--pino);
  border-radius:0 .7rem .7rem 0;background:var(--pino-velo);color:var(--ink);
  font-size:.85rem;line-height:1.5}
.tua-nota b{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pino);margin-right:.35rem}
.nota-editor{margin-top:.55rem;display:grid;gap:.45rem}
.nota-editor textarea{width:100%;resize:vertical;border:1px solid var(--line-2);
  border-radius:.9rem;background:var(--ground);color:var(--ink);font:inherit;
  font-size:.9rem;line-height:1.45;padding:.65rem}
.nota-tasti{display:flex;gap:.4rem}

/* Il tasto per mettere in coda una delle dieci mosse. Fino a oggi le mosse non
   avevano nessun gesto: erano dieci proposte da guardare. */
.chiedi-mossa{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;
  min-height:2.25rem;padding:.35rem .8rem;border:1px dashed var(--line-2);
  border-radius:999px;background:transparent;color:var(--ink-3);cursor:pointer;
  font:600 .78rem/1 inherit;transition:all var(--stato) var(--ios)}
.chiedi-mossa svg{width:.9rem;height:.9rem;fill:currentColor}
.chiedi-mossa:hover{border-color:var(--pino);border-style:solid;color:var(--pino)}
.chiedi-mossa.incoda{border-style:solid;border-color:var(--pino);
  background:var(--pino-velo);color:var(--pino)}

/* ── «SCORRI», E LE ENTRATE CHE NON SONO TUTTE UGUALI ────────────────────────
 *
 * La lastra entra dal lato giusto — da destra se vai avanti, da sinistra se
 * torni — e la molla frena alla fine invece di fermarsi di colpo. Avanti e
 * indietro devono distinguersi: chi torna indietro lo fa perché si è perso,
 * cioè proprio quando il movimento deve dirgli dov'è.
 *
 * ⚠️ «Non pre-scripted all equal»: la DISTANZA e la DURATA cambiano di poco a
 * ogni entrata — `--entra-da` fra 26 e 42 px, `--entra-quanto` fra 380 e 520 ms
 * — e le tira `_mrc.js` a ogni passaggio. Non si nota la singola variazione: si
 * nota la sua assenza, dopo la terza entrata identica al pixel.
 *
 * La molla resta CORTA. Lunga diventa un rimbalzo, e i rimbalzi stancano.
 */
@keyframes entra-destra{
  from{translate:var(--entra-da,34px) 0;opacity:0}
  to{translate:0 0;opacity:1}
}
@keyframes entra-sinistra{
  from{translate:calc(var(--entra-da,34px) * -1) 0;opacity:0}
  to{translate:0 0;opacity:1}
}
.entra-da-destra{animation:entra-destra var(--entra-quanto,var(--foglio)) var(--molla) both}
.entra-da-sinistra{animation:entra-sinistra var(--entra-quanto,var(--foglio)) var(--molla) both}
@media (prefers-reduced-motion:reduce){
  .entra-da-destra,.entra-da-sinistra{animation:none}
}

.acc-testo{flex:1;min-height:0;overflow-y:auto;padding-bottom:.5rem}
.acc-lastra h1{margin:.3rem 0 .5rem;font:700 clamp(1.7rem,6.5vw,2.3rem)/1.08 var(--titolo);
  letter-spacing:-.03em;text-wrap:balance}
.acc-dice{margin:0 0 1.1rem;font-size:.95rem;line-height:1.55;color:var(--ink-2);
  max-width:30rem}
.acc-corpo .campo{margin-bottom:.7rem}
.acc-sotto{flex:0 0 auto;display:grid;gap:.35rem;padding-top:.6rem}
.acc-salta{border:0;background:transparent;padding:.55rem;cursor:pointer;
  font:500 .875rem/1 inherit;color:var(--ink-3);min-height:2.75rem}
.acc-salta:hover{color:var(--ink-2)}

/* Le mansioni: schede grandi da premere, non caselle. Si tocca l'illustrazione,
   non un quadratino da tre millimetri. */
.mansioni{display:grid;gap:.5rem}
.mansione{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;
  padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--surface);cursor:pointer;font:inherit;color:inherit;
  transition:border-color var(--tocco) linear,background var(--tocco) linear,
             transform var(--stato) var(--molla-viva)}
.mansione:active{transform:scale(.985)}
.mansione.scelta{border-color:var(--pino);background:var(--pino-velo)}
.mansione-segno{flex:0 0 auto;width:2.6rem;height:2.6rem;object-fit:contain}
.mansione b{display:block;font-weight:600;line-height:1.25}
.mansione small{display:block;font-size:.8125rem;line-height:1.4;color:var(--ink-3);margin-top:.1rem}

.fatto-conto{display:grid;gap:.5rem}
.fatto-conto p{margin:0;padding:.7rem .85rem;border-radius:var(--r-2);background:var(--surface)}
.fatto-conto b{display:block;font-weight:600}
.fatto-conto small{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:.1rem}

/* ═══ IL MARCHIO ════════════════════════════════════════════════════════════
   Michele, 03/09/2026: «sopra il logo tutte le scelte tipografiche». I colori
   si toccano per copiarli — è quello che si fa con una tavola colori — e i
   caratteri si mostrano NEL loro carattere: una tavola tipografica scritta
   tutta con lo stesso font non fa vedere niente. */
.tinte{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem}
.tinta{display:grid;gap:.15rem}
.tinta-quadro{display:block;height:3.2rem;border-radius:var(--r-1);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.tinta>b{font-weight:600;font-size:.875rem;margin-top:.2rem}
.tinta-valore{align-self:start;justify-self:start;border:0;background:transparent;padding:0;
  cursor:pointer;font:500 .75rem/1.3 var(--mono);color:var(--ink-3);
  text-decoration:underline;text-underline-offset:.15em}
.tinta-valore:hover{color:var(--pino)}
.tinta small{font-size:.75rem;line-height:1.4;color:var(--ink-4)}

.caratteri{display:grid;gap:.5rem}
.carattere{display:flex;align-items:center;gap:.9rem;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.carattere>p{margin:0;flex:0 0 3rem;font-size:2rem;line-height:1;text-align:center;color:var(--ink)}
.carattere b{display:block;font-weight:600;font-size:.9375rem}
.carattere small{display:block;font-size:.75rem;line-height:1.4;color:var(--ink-4);margin-top:.1rem}

/* La parte fiscale: un documento, non un cruscotto. Chi lo apre lo legge una
   volta e lo stampa, non ci torna dieci volte al giorno. */
body.contabile{background:var(--ground)}
.cont-capo{padding-bottom:1rem;border-bottom:2px solid var(--ink)}
.cont-capo h1{margin:.3rem 0 .5rem;font:700 clamp(1.8rem,5vw,2.6rem)/1.05 var(--titolo);
  letter-spacing:-.03em;text-wrap:balance}
.cont-dice{margin:0;max-width:44rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.cont-domande{margin:.6rem 0 0;padding-left:1.3rem;display:grid;gap:.5rem}
.cont-domande li{font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:44rem}
.cont-piede{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.cont-piede p{margin:0;font-size:.8125rem;color:var(--ink-3)}
@media print{ body.contabile{background:#fff} .tab-giro{border:0} }

/* Il tasto indietro dell'ingresso, accanto ad «avanti». Michele: «e back non
   c'è se uno vuole tornare indietro?». Piccolo e a sinistra: è un ritorno, non
   un'alternativa — e due tasti dello stesso peso in fondo a una schermata sono
   due tasti che si annullano. */
.acc-righe{display:flex;gap:.5rem;align-items:stretch}
.acc-indietro{flex:0 0 auto;width:3.5rem;border:1px solid var(--line-2);
  border-radius:var(--r-1);background:var(--surface);color:var(--ink-2);cursor:pointer;
  display:grid;place-items:center;
  transition:border-color var(--tocco) linear,transform var(--stato) var(--molla-viva)}
.acc-indietro:hover{border-color:var(--pino);color:var(--pino)}
.acc-indietro:active{transform:scale(.94)}
.acc-indietro svg{width:1.2rem;height:1.2rem}
.acc-manca{margin:.6rem 0 0;padding:.55rem .75rem;border-radius:var(--r-1);
  background:color-mix(in srgb,var(--rosso) 9%,transparent);color:var(--rosso);
  font-size:.85rem;line-height:1.45}

/* ═══ IL LABORATORIO DEL MOTO ═══════════════════════════════════════════════
   Michele, 03/09/2026: «propose me examples I will pick». Descrivere un
   movimento a parole è il modo più veloce per mettersi d'accordo su niente:
   qui si guardano tutti insieme e si sceglie col dito. */
body.laboratorio{background:var(--ground)}
.lab-elenco,.lab-media{display:grid;gap:.7rem}
.lab-c{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.lab-c.consigliata{border-color:color-mix(in srgb,var(--pino) 40%,var(--line));
  background:color-mix(in srgb,var(--pino) 4%,var(--surface))}
.lab-palco{flex:0 0 6.5rem;height:6.5rem;display:grid;place-items:center;
  border-radius:var(--r-1);background:var(--sunk);overflow:hidden}
.lab-fig{width:4.2rem;height:4.2rem;object-fit:contain}
.lab-testo{flex:1;min-width:0}
.lab-capo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;margin-bottom:.25rem}
.lab-capo>b{font-weight:600}
.lab-capo>span{font:500 .7rem/1 var(--mono);color:var(--ink-4)}
.lab-cons{font:600 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  font-style:normal;color:var(--pino);padding:.2rem .45rem;border-radius:999px;
  background:color-mix(in srgb,var(--pino) 12%,transparent)}
.lab-c p{margin:0 0 .3rem;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.lab-pro{color:var(--pino)!important}
.lab-contro{color:var(--ink-3)!important;font-size:.8125rem!important}
.lab-finta{padding:.6rem .7rem;text-align:center}
.lab-finta b{display:block;font:700 1rem/1.15 var(--titolo)}
.lab-finta small{display:block;font-size:.7rem;color:var(--ink-3);margin-top:.15rem}
@media (max-width:26rem){
  .lab-c{flex-direction:column}
  .lab-palco{flex:0 0 auto;width:100%;height:5.5rem}
}

/* ── I CINQUE GALLEGGIAMENTI ────────────────────────────────────────────────
   ⚠️ Questi sono i CAMPIONI, e devono restare diversi fra loro: servono a far
   vedere una differenza, non a essere belli. Quello scelto — «Boa in piano» — è
   l'unico che qui deve dire la verità, perché è quello che gira sul servizio:
   quindi non ha fotogrammi suoi, usa gli stessi di `.galleggia`. Se un giorno
   la boa cambia, il campione cambia con lei — e se avesse una copia, no. */
@keyframes g-su{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes g-lato{0%,100%{translate:0 0}50%{translate:3px 0}}
@keyframes g-gira{0%,100%{rotate:-1.4deg}50%{rotate:1.4deg}}
@keyframes g-deriva{0%,100%{translate:0 0;rotate:-.8deg}50%{translate:4px -4px;rotate:.8deg}}

.g-onda{animation:g-su var(--onda-corta) ease-in-out infinite, g-gira var(--onda-corta) ease-in-out infinite}
/* Tre onde, tre periodi che non si dividono: su in 7, di lato in 11, gira in 13. */
.g-acqua{animation:g-su var(--onda-su) ease-in-out infinite,
  g-lato var(--onda-lato) ease-in-out infinite, g-gira var(--onda-gira) ease-in-out infinite}
/* «Vivo» è la boa scelta con la fase spostata: messo accanto a `.g-boa` fa
   vedere in un colpo solo che due disegni con la STESSA curva, partiti da due
   punti diversi, non sembrano più la stessa animazione. Era il punto. */
.g-vivo{--amp:1.7;animation:
  galleggia var(--onda-su) cubic-bezier(.45,0,.2,1) infinite,
  galleggia-lato var(--onda-lato) ease-in-out infinite,
  galleggia-gira var(--onda-gira) ease-in-out infinite;
  animation-delay:-3.4s,-5.1s,-11s}
/* ⚠️ Il campione della boa È la boa: gli stessi fotogrammi che girano sulla
   prima pagina, sull'ingresso e sul deck. Una copia qui vorrebbe dire un
   laboratorio che fa vedere una cosa e un servizio che ne fa un'altra — cioè
   esattamente il difetto per cui questa pagina esiste. `--amp` la porta a un
   po' più del vero perché il riquadro è grande e il disegno piccolo. */
.g-boa{--amp:1.7;animation:
  galleggia var(--onda-su) cubic-bezier(.45,0,.2,1) infinite,
  galleggia-lato var(--onda-lato) ease-in-out infinite,
  galleggia-gira var(--onda-gira) ease-in-out infinite}
.g-deriva{animation:g-deriva var(--onda-lunga) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .g-onda,.g-acqua,.g-vivo,.g-boa,.g-deriva{animation:none}
}

/* ── I QUATTRO PASSAGGI ─────────────────────────────────────────────────── */
@keyframes p-sfuma{from{opacity:.1}to{opacity:1}}
@keyframes p-scorri{from{translate:34px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes p-carta{from{translate:26px 0;scale:.96;opacity:0}to{translate:0 0;scale:1;opacity:1}}
@keyframes p-sfoglia{from{translate:0 -22px;opacity:0}to{translate:0 0;opacity:1}}
.p-sfuma{animation:p-sfuma var(--foglio) var(--ios) both}
/* La molla frena alla fine invece di fermarsi di colpo. Corta: lunga diventa un
   rimbalzo, e i rimbalzi stancano dopo il terzo. */
.p-scorri{animation:p-scorri var(--foglio) var(--molla) both}
.p-carta{animation:p-carta var(--volo) var(--molla) both}
.p-sfoglia{animation:p-sfoglia var(--foglio) var(--ios) both}
@media (prefers-reduced-motion:reduce){
  .p-sfuma,.p-scorri,.p-carta,.p-sfoglia{animation:none}
}