/* Mercatorum — il sistema, seconda versione.
 *
 * PIANO. Pietra, pino e pane.
 *
 * Colore — neutro di pietra con una punta di verde, non un grigio puro. Accento
 *   verde pino #16624C: i soldi che arrivano e le cose andate bene. Rame per
 *   quello che si muove, oro per quello che è da confermare. Un colore pieno
 *   per schermata.
 * Carattere — tre voci con un mestiere ciascuna. **Fraunces** per i titoli (una
 *   faccia da libro di cucina, e questo è un mercato di pane e formaggio),
 *   **Schibsted Grotesk** per l'interfaccia, **IBM Plex Mono** per soldi, ore e
 *   codici — un listino si legge in colonna. Niente Inter.
 * 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{
  --ground:#f7f7f4;
  --surface:#ffffff;
  --sunk:#eeeee8;
  --line:#e2e2da;
  --line-2:#cbccc1;
  --ink:#131714;           /* 17:1 sul fondo */
  --ink-2:#4a4f48;         /*  9:1 — testo secondario */
  --ink-3:#63685f;         /*  6:1 anche sul fondo incavato — testo terziario */
  --ink-4:#9a9f97;         /*  3,2:1 — SOLO filetti e segni, mai testo */
  --pino:#16624c;
  --pino-velo:#e2eee8;
  --rame:#9d5417;
  --rame-velo:#f5e7d9;
  --rosso:#8f2f28;
  --rosso-velo:#f6e1df;
  --oro:#7d5f14;
  --oro-velo:#f2ead4;
  --viola:#55427a;
  --viola-velo:#eae5f2;
  --acqua:#245672;
  --acqua-velo:#e0ecf3;
  --vetro:color-mix(in srgb,var(--surface) 72%,transparent);

  --r-1:10px; --r-2:14px; --r-3:24px;
  --om-1:0 1px 2px rgba(19,23,20,.05);
  --om-2:0 1px 2px rgba(19,23,20,.04), 0 8px 28px rgba(19,23,20,.09);
  --om-3:0 -1px 3px rgba(19,23,20,.04), 0 -18px 52px rgba(19,23,20,.16);

  /* 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);
  --tocco:120ms; --stato:220ms; --schermo:340ms; --foglio:420ms;

  --titolo:'Fraunces',ui-serif,Georgia,serif;
  --sans:'Schibsted Grotesk',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)));
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema=chiaro]){
    --ground:#101210; --surface:#191b18; --sunk:#22251f;
    --line:#2b2e28; --line-2:#3d413a;
    --ink:#f0f2ec; --ink-2:#b9bdb2; --ink-3:#949a8f; --ink-4:#6d7268;
    --pino:#6cc0a6; --pino-velo:#16261f;
    --rame:#e0a165; --rame-velo:#2c2118;
    --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) 74%,transparent);
    --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. */
@view-transition{ navigation:auto }
::view-transition-old(root){animation:.2s var(--ios) both sparisci}
::view-transition-new(root){animation:.28s var(--ios) both compari}
@keyframes sparisci{to{opacity:0}}
@keyframes compari{from{opacity:0;translate:0 8px}}

*{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:calc(var(--barra) + 1.5rem);
}
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:500;line-height:1.12;
  letter-spacing:-.012em;font-variation-settings:'SOFT' 12,'WONK' 1}
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:600;font-size:1.125rem;letter-spacing:-.015em}
.top .marchio:hover{text-decoration:none}
.top .marchio svg{width:1.25rem;height:1.25rem;display:block}
.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:380px){ .top .dove{display:none} .top .fine .btn{max-width:6.5rem} }

.wrap{max-width:44rem;margin:0 auto;padding:0 1.15rem}
.wrap.largo{max-width:58rem}

/* ── apertura ──────────────────────────────────────────────────────────── */
.hero{padding:2.5rem 0 1.25rem}
.hero h1{font-size:clamp(2.1rem,7.5vw,3rem);letter-spacing:-.022em;text-wrap:balance;
  font-variation-settings:'SOFT' 18,'WONK' 1}
.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;
}

/* ── 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 ───────────────────────────────────────────────────────────── */
/* 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 260ms 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{background:var(--ink);color:var(--ground);border-color:var(--ink);box-shadow:var(--om-1)}
.btn.pieno:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.verde{background:var(--pino);color:#fff;border-color:var(--pino);box-shadow:var(--om-1)}
.btn.verde:hover{filter:brightness(1.1)}
.btn.nudo{background:none;border-color:transparent;color:var(--ink-2)}
.btn.nudo:hover{background:var(--sunk)}
.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}

.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 260ms var(--molla-viva);
}
.riga:hover{background:var(--sunk)}
.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 260ms 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:#fff;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}
.tag.richiesto {background:var(--sunk);color:var(--ink-2)}
.tag.accettato {background:var(--viola-velo);color:var(--viola)}
.tag.pronto    {background:var(--pino-velo);color:var(--pino)}
.tag.in_viaggio{background:var(--rame-velo);color:var(--rame)}
.tag.all_hub   {background:var(--acqua-velo);color:var(--acqua)}
.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 260ms 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}

/* ── 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 ─────────────────────────────────────────────────────────────── */
.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}

/* ── campi ─────────────────────────────────────────────────────────────── */
.campo{display:block;margin-top:1rem}
.campo > span{display:block;font-size:.9375rem;font-weight:600;color:var(--ink-2);margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{
  width:100%;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);
}
.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}

/* ── foglio ────────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:45;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:50;
  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 .presa{display:none}
}
.foglio .presa{width:2.25rem;height:.3rem;border-radius:999px;background:var(--line-2);margin:.2rem auto 1rem}
.foglio h2{font-size:1.5rem}

/* ── 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 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)}

.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:.72rem;color:var(--ink-3);margin-top:.25rem;font-family:var(--mono)}

/* ── 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:#fff;align-self:flex-end}
.bolla small{display:block;font-size:.7rem;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:#fff;font-family:var(--mono);font-size:.66rem;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)}
.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 ───────────────────────────────────────────────────────── */
.racconta{background:var(--pino-velo);border:1px solid color-mix(in srgb,var(--pino) 22%,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 ───────────────────────────────────────────────────────── */
.vuoto{text-align:center;padding:2.75rem 1.15rem;border:1px dashed var(--line-2);
  border-radius:var(--r-2);background:var(--surface)}
.vuoto svg{width:2.5rem;height:2.5rem;margin:0 auto .8rem;display:block;color:var(--ink-3)}
.vuoto b{display:block;font-family:var(--titolo);font-weight:500;font-size:1.35rem}
.vuoto p{margin:.4rem auto 1.1rem;color:var(--ink-3);font-size:.9375rem;max-width:26rem}

/* ── 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:#fff}
.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:.7rem;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 1.4s ease-in-out infinite}

/* ── 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);
  transition:color var(--tocco) linear,transform 260ms 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)}

/* ── 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}
}