/* ============================================================
   OrtoMio, sistema visivo.

   Tre regole che tengono in piedi tutto il resto:

   1. UNA SCALA SOLA. Spazi, corpi, altezze, raggi e bordi escono
      dalle variabili qui sotto. Un valore scritto a mano dentro un
      componente e' un difetto, non una scelta.
   2. TRE ALTEZZE DI COMANDO, non trenta: 56 per quello che conta e
      per i campi, 48 per il resto, 40 per le pillole di stato.
      Due bottoni affiancati hanno sempre la stessa altezza perche'
      stanno in una griglia, non in un flex che li lascia liberi.
   3. NIENTE LARGHEZZE DAL TESTO. In riga si usa 1fr, mai il
      contenuto: cosi' due campi vicini non possono venire diversi.

   Sul corpo: minimo 16px. Si legge in giardino, in piena luce, a
   braccio teso, spesso senza occhiali. Le etichettine maiuscole
   spaziate da 11px sono sparite: erano il vezzo piu' costoso.
   ============================================================ */
:root{
  /* colori: il verde e' il mondo, la crema e' l'interfaccia, l'inchiostro il tratto */
  --prato:#C9E4A5; --crema:#FFFCF0; --ink:#4A3E37; --tenue:#7A6A5F;
  --acqua:#3FA9DD; --raccolta:#43B65F; --allarme:#E5654B; --accento:#C4A8DD;
  --acqua-velo:#D9EEF9; --verde-velo:#DBF3E0; --rosso-velo:#FBE0DA; --osso:#D8CFC0;
  --linea:rgba(74,62,55,.13); --velo:rgba(74,62,55,.06); --carta-spenta:#DFD3B8;
  --ombra-c:rgba(74,62,55,.18);
  --ombra:0 4px 0 var(--ombra-c);
  --ombra-alta:0 6px 0 var(--ombra-c);
  --ombra-giu:0 1px 0 var(--ombra-c);

  /* spazio: 4 8 12 16 24 36. Il salto da 16 a 24 a 36 fa il ritmo. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px;

  /* corpo: 16 e' il pavimento. 13 solo per unita' di misura e coordinate. */
  --t-nota:13px; --t-min:15px; --t-body:16px; --t-lead:18px;
  --t-tit:21px; --t-tit2:26px; --t-mega:38px;

  /* altezze di comando */
  --h-alto:56px; --h-medio:48px; --h-basso:40px; --h-tocco:64px;

  /* Raggi condivisi: etichette 4, comandi 8, pannelli 12. */
  --r-p:4px; --r-m:8px; --r-g:12px;

  --bordo:3px;
  --easing:cubic-bezier(.2,.7,.2,1);
  --dock:75px;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,.chip,.linguette,#dock,#alto{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
:focus-visible{outline:3px solid var(--raccolta);outline-offset:2px}
/* all:unset azzera anche box-sizing, e da li' nascevano bottoni piu' alti
   di quanto dichiarato: 48 diventava 54 col bordo. Si rimette per forza. */
button,input,select,textarea,summary{box-sizing:border-box !important}

/* L'interfaccia non si ingrandisce. Su iPhone il doppio tocco veloce su un
   bottone, tipo i piu' e meno della misura, veniva letto come "zooma la
   pagina": nav, nome dell'orto e pannelli schizzavano fuori schermo e non si
   tornava piu' indietro. touch-action:none toglie al browser tutti i gesti
   qui sopra; la mappa ha i suoi, gestiti a mano, e i pannelli che devono
   scorrere se li riprendono uno per uno qui sotto.
   Il prezzo e' che non si puo' piu' ingrandire la pagina con le dita: e' una
   scelta, e vale solo perche' la mappa lo zoom ce l'ha per conto suo. */
html,body{touch-action:none;-webkit-text-size-adjust:100%;
  margin:0;height:100%;background:var(--prato);overflow:hidden;
  font-family:'Baloo 2',ui-rounded,system-ui,sans-serif;color:var(--ink);
  font-size:var(--t-body);line-height:1.45}
#scena{position:fixed;inset:0;touch-action:none;cursor:grab}
#scena.trascino{cursor:grabbing}
svg#mappa{width:100%;height:100%;display:block}
.cella{cursor:pointer}
.cella .su{transition:transform 180ms var(--easing);transform-box:fill-box;transform-origin:50% 100%}
.cella:hover .su{transform:translateY(-6px)}
.cella.scelta .su{transform:translateY(-10px)}
.alone *{fill:var(--crema) !important;stroke:var(--crema) !important;
  stroke-width:18 !important;stroke-linejoin:round;stroke-linecap:round}

.hud{position:fixed;z-index:5}
.pannello{background:var(--crema);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-g);box-shadow:var(--ombra-alta)}
.chip{display:inline-flex;align-items:center;gap:var(--s2);background:var(--crema);
  border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  min-height:var(--h-basso);padding:0 var(--s3);
  font-weight:700;font-size:var(--t-body);box-shadow:var(--ombra);white-space:nowrap}
/* display:inline-flex batte l'attributo hidden: va detto a parte */
.chip[hidden]{display:none}
.chip.acqua{background:var(--acqua-velo)}
.chip.raccolta{background:var(--verde-velo)}
.chip.quiete{background:transparent;border-color:transparent;box-shadow:none;
  color:var(--tenue);font-weight:600}
/* Quanto vale quello che hai raccolto quest'anno. Sta in fila con le altre
   pastiglie e non sopra al martello, che deve restare raggiungibile. */
.chip.moneta{background:var(--giallo-velo,#F6E7BE)}
.chip.moneta .soldino{width:22px;height:22px;flex:none;display:block}
.chip.moneta .soldino svg{width:100%;height:100%;display:block}
/* Il piu' che compare al raccolto: e' li' che si prende la soddisfazione,
   non nel totale. Sale e svanisce, non sposta niente. */
@keyframes sale{from{opacity:0;transform:translateY(6px)}
  25%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(-2px)}
  to{opacity:0;transform:translateY(-14px)}}
/* fisso rispetto allo schermo, non a un contenitore: la scena si sposta e
   si ingrandisce sotto le dita, il numero no */
.guadagno{position:fixed;left:50%;top:34%;transform:translateX(-50%);
  z-index:6;pointer-events:none;display:inline-flex;align-items:center;gap:6px;
  background:var(--crema);border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  padding:6px var(--s3);font-weight:800;font-size:var(--t-body);box-shadow:var(--ombra);
  animation:sale 1600ms var(--easing) forwards}
.guadagno svg{width:20px;height:20px;display:block}
.punto{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--ink)}

/* ---- testata ----
   Tre oggetti in riga, tutti alti 56: l'omino, la targa, il martello.
   Prima erano 48, auto e 64 e la riga sembrava montata storta. */
#alto{top:var(--s3);left:var(--s3);right:var(--s3);display:flex;flex-direction:column;
  gap:var(--s2);pointer-events:none}
#alto>*{pointer-events:auto}
.fila-testa{display:flex;gap:var(--s2);align-items:stretch}
#targa{display:flex;flex-direction:column;justify-content:center;
  min-height:var(--h-alto);padding:0 var(--s4);min-width:0;flex:1 1 auto}
#targa .occhiello{display:block;font-size:var(--t-nota);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);line-height:1}
#targa h1{margin:2px 0 0;font-size:var(--t-tit);font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stato{touch-action:pan-x;display:flex;gap:var(--s2);align-items:center;align-self:flex-start;
  max-width:100%;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none}
#stato::-webkit-scrollbar{display:none}
#stato[hidden]{display:none}
#stato .quiete{flex:none}

#modi{flex:none;display:flex;background:var(--crema);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-m);padding:var(--s1);gap:var(--s1);box-shadow:var(--ombra)}
#modi button{all:unset;cursor:pointer;padding:0 var(--s4);min-height:var(--h-medio);
  display:flex;align-items:center;justify-content:center;gap:var(--s2);border-radius:var(--r-m);
  font-weight:700;font-size:var(--t-body);white-space:nowrap;color:var(--tenue);
  transition:background 180ms var(--easing),color 180ms var(--easing)}
#modi button svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#modi button[aria-pressed=true] svg{stroke-width:2.3}
#modi button[aria-pressed=true]{background:var(--ink);color:var(--crema)}

/* ---- le quattro sezioni ---- */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:7;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);
  width:100%;max-width:460px;margin:0 auto;
  background:var(--crema);border:var(--bordo) solid var(--ink);border-bottom:0;
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom))}
#dock button{all:unset;cursor:pointer;min-height:var(--h-tocco);display:grid;
  place-items:center;border-radius:var(--r-m);color:var(--tenue)}
#dock button svg:not(.disegnata){width:36px;height:36px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#dock button[aria-pressed=true]{background:var(--prato);color:var(--ink)}
/* i disegni portano i loro colori: le regole di tratto li spegnerebbero */
#dock button svg.disegnata{width:56px;height:56px;display:block}

/* ---- foglio delle sezioni ----
   Non copre piu' tutto lo schermo. L'orto disegnato a mano e' il motivo
   per cui si torna: coprirlo del tutto ogni volta buttava via l'unica
   cosa che nessun'altra app ha. Resta visibile sopra al foglio. */
#foglio{left:var(--s3);right:var(--s3);
  bottom:calc(var(--dock) + var(--s3) + env(safe-area-inset-bottom));
  top:auto;height:auto;max-height:74dvh;max-width:34rem;margin:0 auto;z-index:6;display:flex}
#foglio[hidden]{display:none}
#foglio-corpo{touch-action:pan-y;flex:1;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--s5) var(--s4) var(--s5)}
/* Niente qui dentro si lascia schiacciare. Il foglio e' una colonna flex, e
   in una colonna flex i figli si comprimono da soli quando lo spazio manca:
   su uno schermo basso la striscia dei sette giorni scendeva da 118 pixel a
   14 e le schede finivano tagliate, su uno schermo alto no. Dipendeva dal
   telefono, che e' il modo peggiore di essere rotti. Se lo spazio non basta
   il foglio scorre, non si stringe. */
#foglio-corpo>*{flex:none}
#foglio h2{margin:0;font-size:var(--t-tit2);font-weight:800;line-height:1.2}
#foglio .sotto{margin:2px 0 var(--s5);color:var(--tenue);font-size:var(--t-body);font-weight:600}
/* le sezioni si annunciano in tondo, non in maiuscoletto spaziato */
#foglio h3{margin:var(--s5) 0 var(--s2);font-size:var(--t-min);font-weight:700;
  color:var(--tenue)}
#foglio h3:first-child{margin-top:0}

.riga-compito{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:2px solid var(--linea)}
.riga-compito:last-child{border-bottom:0}
.riga-compito .mini-icona{width:44px;height:44px;flex:none}
.riga-compito .testo{flex:1;min-width:0}
.riga-compito b{display:block;font-size:var(--t-body)}
.riga-compito small{color:var(--tenue);font-weight:600;font-size:var(--t-min)}
.riga-compito button{all:unset;cursor:pointer;width:var(--h-alto);height:var(--h-alto);
  flex:none;display:grid;place-items:center;border-radius:var(--r-m);background:var(--prato);
  border:var(--bordo) solid var(--ink);box-shadow:var(--ombra)}
.riga-compito button svg{width:28px;height:28px}

.meteo{display:flex;align-items:center;gap:var(--s3);padding:0 0 var(--s3)}
/* il disegno del tempo sta sopra al numero, incolonnati: si legge prima che
   tempo fa e poi quanti gradi, che e' l'ordine in cui uno guarda fuori */
.meteo .ora-che-fa{flex:none;display:flex;flex-direction:column;align-items:center;
  gap:var(--s1);min-width:4.6rem}
.meteo .segno{display:block;width:64px;height:64px}
.meteo .segno svg{width:100%;height:100%;display:block}
.meteo .gradi{font-size:var(--t-mega);font-weight:800;line-height:1}
.meteo b{font-size:var(--t-lead)}
.meteo small{display:block;color:var(--tenue);font-weight:600;font-size:var(--t-min)}
.meteo.mancante{display:block}
.meteo.mancante b{display:block;font-size:var(--t-lead)}
.meteo.scheletro{opacity:.5}
.meteo.scheletro .gradi,.meteo.scheletro b,.meteo.scheletro small{
  background:var(--velo);border-radius:var(--r-p);display:inline-block;min-width:5rem}

/* ricerca del comune: campo e bottone alti uguali, il bottone non si
   restringe sulla parola. Prima "Cerca" e "Riprova" erano due misure. */
.citta{display:grid;grid-template-columns:1fr 104px;gap:var(--s2);margin:var(--s3) 0 var(--s2)}
.citta input{min-width:0;min-height:var(--h-alto);padding:0 var(--s4);font:inherit;
  font-size:var(--t-body);font-weight:600;border:var(--bordo) solid var(--ink);
  border-radius:var(--r-m);background:var(--crema);color:var(--ink)}
.citta .btn{width:100%;min-height:var(--h-alto)}
.risultati{display:grid;gap:var(--s2);margin:var(--s2) 0}
.risultati button{all:unset;cursor:pointer;min-height:var(--h-alto);
  padding:var(--s2) var(--s4);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-m);background:var(--crema);box-shadow:var(--ombra)}
.risultati b{display:block;font-size:var(--t-body)}
.risultati span{display:block;font-size:var(--t-min);font-weight:600;color:var(--tenue)}

/* ---- avatar e profilo ---- */
#avatar{all:unset;cursor:pointer;position:relative;flex:none;
  width:var(--h-alto);height:var(--h-alto);
  border-radius:var(--r-m);display:grid;place-items:center;background:var(--crema);
  border:var(--bordo) solid var(--ink);box-shadow:var(--ombra);overflow:visible}
#avatar:active{transform:translateY(3px);box-shadow:var(--ombra-giu)}
#avatar svg{width:28px;height:28px;display:block}
#avatar svg:not(.disegnata){fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Il ritaglio segue gli stessi angoli del pulsante profilo. */
#avatar svg.disegnata{width:52px;height:52px;clip-path:inset(2% round var(--r-m))}
#avatar i{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;
  background:var(--raccolta);border:3px solid var(--crema)}
#avatar i[hidden]{display:none}

#profilo{position:fixed;inset:0;z-index:20;background:rgba(74,62,55,.35);
  display:grid;place-items:end center;padding:var(--s3)}
#profilo[hidden]{display:none}
.profilo-carta{touch-action:pan-y;position:relative;width:100%;max-width:34rem;max-height:88dvh;overflow-y:auto;
  background:var(--crema);border:var(--bordo) solid var(--ink);border-radius:var(--r-g);
  padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  box-shadow:var(--ombra-alta)}
/* la X aveva un bersaglio di 44 ma nessun contorno: sembrava un carattere */
.chiudi-profilo{all:unset;cursor:pointer;position:absolute;right:var(--s3);top:var(--s3);
  width:var(--h-medio);height:var(--h-medio);display:grid;place-items:center;
  border-radius:var(--r-m);background:var(--velo);
  font-size:24px;line-height:1;color:var(--tenue)}
.chiudi-profilo:active{background:var(--linea)}

/* testa del profilo: l'avatar scelto, e su di lui la matita per cambiarlo */
.prof-testa{display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s5);padding-right:var(--h-medio)}
.prof-omino{all:unset;cursor:pointer;position:relative;width:72px;height:72px;flex:none;
  border-radius:var(--r-m);display:grid;place-items:center;overflow:visible;
  background:var(--prato);border:var(--bordo) solid var(--ink)}
.prof-omino>svg{width:40px;height:40px;display:block}
.prof-omino>svg:not(.disegnata){fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.prof-omino>svg.disegnata{width:68px;height:68px;clip-path:inset(2% round var(--r-m))}
.prof-omino .matita{position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:var(--r-m);background:var(--crema);
  border:2.5px solid var(--ink);box-shadow:var(--ombra-giu);
  transition:transform 200ms var(--easing)}
.prof-omino .matita svg{width:15px;height:15px;display:block;fill:none;stroke:var(--ink);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prof-omino:hover .matita{transform:scale(1.12)}
.prof-omino:active{transform:translateY(2px)}
.prof-testa h2{margin:0;font-size:var(--t-tit2);font-weight:800;line-height:1.2}
.prof-testa p{margin:2px 0 0;font-size:var(--t-min);font-weight:600;color:var(--tenue);
  line-height:1.35;overflow-wrap:anywhere}

/* la scelta dell'avatar compare solo quando la chiedi, e sparisce appena
   hai scelto: e' una preferenza di dieci secondi, non una sezione fissa */
.avatar-scelta{grid-template-columns:repeat(2,1fr);gap:var(--s3);
  margin:0 0 var(--s5);padding:0}
.avatar-scelta button{padding:var(--s2)}
.avatar-scelta button svg{aspect-ratio:1;border-radius:var(--r-m)}
.avatar-scelta button[aria-pressed=true]{background:var(--prato)}

#profilo label{display:block;margin:var(--s4) 0 0;font-size:var(--t-min);font-weight:700;
  color:var(--tenue)}
#profilo label input{display:block;width:100%;min-height:var(--h-alto);
  margin-top:var(--s1);padding:0 var(--s4);font:inherit;font-size:var(--t-body);
  font-weight:600;color:var(--ink);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-m);background:var(--crema)}
.scontro{border:var(--bordo) solid var(--allarme);border-radius:var(--r-m);
  padding:var(--s4);margin:var(--s4) 0}
.scontro h3{margin:0 0 var(--s2) !important;color:var(--allarme) !important;
  font-size:var(--t-lead) !important;font-weight:800 !important}
.scontro p{margin:0 0 var(--s2);font-size:var(--t-body);line-height:1.45}
#profilo h3{margin:var(--s5) 0 var(--s2);font-size:var(--t-min);font-weight:700;
  color:var(--tenue)}
#profilo .voce{display:block;padding:var(--s2) 0;border-bottom:2px solid var(--linea)}
#profilo .voce dt{margin-bottom:2px;padding-top:0}
#profilo .voce dd{font-size:var(--t-body)}

/* sette giorni: scorre, non va a capo e non stringe le colonne */
.settimana{touch-action:pan-x;display:flex;align-items:flex-start;gap:var(--s2);overflow-x:auto;
  padding:0 0 var(--s3);scrollbar-width:none;-ms-overflow-style:none}
.settimana::-webkit-scrollbar{display:none}
/* Altezza dichiarata, non dedotta dal contenuto: su Safari la scheda si
   chiudeva dopo la massima e minima e pioggia finivano fuori, sulla crema.
   Qui non succedeva, quindi era il calcolo dell'altezza degli elementi flex
   a comportarsi diverso. Con altezza fissa, colonna centrata e overflow
   chiuso, il caso non puo' piu' presentarsi da nessuna parte. */
.giorno{flex:none;width:74px;min-height:106px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:var(--s1) var(--s1);
  border-radius:var(--r-m);border:var(--bordo) solid var(--ink);
  background:var(--tinta,var(--velo))}
/* le scritte restano tutte inchiostro, cambia solo quanto sono in evidenza:
   su sette fondi diversi e' l'unico modo di restare sempre leggibili */
.giorno span{display:block;font-size:var(--t-nota);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);opacity:.66}
.giorno b{display:block;font-size:var(--t-lead);font-weight:800;line-height:1.2}
.giorno em{display:block;font-style:normal;font-size:var(--t-min);font-weight:700;
  color:var(--ink);opacity:.6}
/* La pioggia e' un'etichetta con il suo fondo, non testo colorato: sopra
   sette tinte diverse nessun colore di testo puo' andare bene su tutte.
   Cosi' il contrasto e' sempre lo stesso, che sia su giallo o su viola. */
.giorno i{display:block;width:fit-content;margin:3px auto 0;min-height:19px;
  padding:0 7px;border-radius:var(--r-m);background:#1A5B7A;color:var(--crema);
  font-style:normal;font-size:var(--t-nota);font-weight:800;line-height:19px}
/* i giorni senza pioggia tengono il posto ma non mostrano un'etichetta vuota */
.giorno i:empty{background:none;padding:0}
/* Open-Meteo chiede che la fonte sia dichiarata, e a te serve sapere da dove
   arriva il numero prima di credergli. */
.fonte{margin:0 0 var(--s2);font-size:var(--t-nota);font-weight:600;color:var(--tenue)}
.fonte a{color:inherit}
.vuoto{color:var(--tenue);font-weight:600;font-size:var(--t-body);
  line-height:1.5;margin:0;padding:var(--s2) 0}

/* ---- scheda pianta ---- */
/* la riga che risponde alla sola domanda che conta: pesa quanto conta */
.ora{margin:var(--s4) 0;font-size:var(--t-lead);font-weight:700;line-height:1.4}
.dipiu{margin:var(--s5) 0 0;border-top:2px solid var(--linea);padding-top:var(--s2)}
.dipiu summary{cursor:pointer;font-weight:700;font-size:var(--t-body);
  min-height:var(--h-medio);display:flex;align-items:center;list-style:none}
.dipiu summary::-webkit-details-marker{display:none}
.dipiu summary::after{content:'';margin-left:auto;width:10px;height:10px;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);transition:transform 200ms var(--easing)}
.dipiu[open] summary::after{transform:rotate(-135deg)}
.voci{margin:var(--s2) 0}
.voce{display:grid;grid-template-columns:7rem 1fr;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:2px solid var(--linea)}
.voce dt{margin:0;font-size:var(--t-min);font-weight:700;color:var(--tenue)}
.voce dd{margin:0;font-size:var(--t-body);line-height:1.45}
.dipiu h4{margin:var(--s5) 0 var(--s2);font-size:var(--t-min);font-weight:700;
  color:var(--tenue)}
.bestie{list-style:none;margin:0;padding:0}
.bestie li{padding:var(--s2) 0;border-bottom:2px solid var(--linea)}
.bestie b{display:block;font-size:var(--t-body)}
.bestie span{display:block;color:var(--tenue);font-size:var(--t-min);font-weight:600}
.bestie em{display:block;font-style:normal;font-size:var(--t-body);margin-top:2px}

/* ---- Nonno ---- */
/* il discorso prende tutta l'altezza che avanza, invece di una quota fissa */
#discorso{touch-action:pan-y;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) 0;
  flex:1;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bolla{max-width:86%;padding:var(--s3) var(--s4);border-radius:var(--r-m);
  font-size:var(--t-body);line-height:1.45}
.bolla p{margin:0 0 var(--s2)}
.bolla p:last-child{margin-bottom:0}
.bolla b{font-weight:800}
.bolla ol,.bolla ul{margin:var(--s1) 0 var(--s2);padding-left:var(--s5)}
.bolla li{margin:var(--s1) 0}
.bolla ol{list-style:decimal}
.bolla ul{list-style:disc}
.bolla.io{align-self:flex-end;background:var(--ink);color:var(--crema);border-bottom-right-radius:6px}
.bolla.nonno{align-self:flex-start;background:var(--prato);border-bottom-left-radius:6px}
.bolla.errore{align-self:flex-start;background:var(--rosso-velo);font-weight:600}
.bolla.attesa{opacity:.6;font-style:normal}
#dimmi{display:grid;grid-template-columns:1fr auto;gap:var(--s2);
  align-items:stretch;padding-top:var(--s2)}
/* La fotocamera sta DENTRO il campo: fuori erano tre pastiglie tonde in
   fila che si contendevano la stessa striscia di schermo. Mandare una foto
   e' un modo di scrivere al Nonno, quindi sta dove si scrive. */
.campo-nonno{position:relative;display:flex;min-width:0}
/* con l'id davanti, se no perde contro #dimmi input e il testo parte
   sotto l'icona */
#dimmi .campo-nonno input[name=testo]{width:100%;padding-left:56px}
.foto-nonno{position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--r-m)}
.foto-nonno:active{background:var(--velo)}
.foto-nonno input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-nonno svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.foto-nonno:has(input:disabled){opacity:.5;pointer-events:none}
/* Sulla zolla vuota: fotografa quello che c'e' invece di cercarlo
   nell'elenco. Sta sopra la ricerca perche' e' la strada piu' corta, non
   quella di ripiego. */
.scatta-riga{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;margin-top:var(--s3);cursor:pointer}
.scatta-riga input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scatta-riga svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ink);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* la foto mandata si vede dentro la bolla, cosi' si capisce a cosa risponde */
.bolla .scatto{display:block;width:100%;max-width:220px;border-radius:var(--r-p);
  border:2.5px solid var(--ink);margin-bottom:var(--s2)}
#dimmi input{min-width:0;min-height:var(--h-alto);padding:0 var(--s4);font:inherit;
  font-size:var(--t-body);border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  background:var(--crema);color:var(--ink)}
#dimmi input:disabled{opacity:.5}
/* Il bottone e' la sua freccia a foglia, la stessa dello slider, girata con
   la punta all'insu'. Tondo e largo quanto e' alto: la parola "Manda"
   prendeva quasi un terzo della riga e il campo per scrivere ci rimetteva. */
#dimmi .btn{min-height:var(--h-alto);min-width:96px}
#dimmi .manda{min-width:var(--h-alto);width:var(--h-alto);padding:0;
  border-radius:var(--r-m);display:grid;place-items:center}
#dimmi .manda svg{width:30px;height:30px;display:block;transform:rotate(90deg)}
#accesso label{display:block;margin:var(--s4) 0 0;font-size:var(--t-min);
  font-weight:700;color:var(--tenue)}
#accesso label input{display:block;width:100%;min-height:var(--h-alto);
  margin-top:var(--s1);padding:0 var(--s4);font:inherit;font-size:var(--t-body);
  border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  background:var(--crema);color:var(--ink)}
.esito{margin:var(--s3) 0 0;font-size:var(--t-min);font-weight:600;color:var(--tenue)}
.esito:empty{display:none}

/* ---- calendario ---- */
#vista-cal{width:100%;min-height:var(--h-alto);margin:0 0 var(--s4);
  padding:0 var(--s6) 0 var(--s4);font:inherit;font-size:var(--t-body);font-weight:700;
  color:var(--ink);border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  background:var(--crema);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 15px) 55%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat}
/* stessa sporgenza della griglia: le frecce stanno sopra la prima e
   l'ultima colonna, non a otto pixel di distanza */
.navmese{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin:0 calc(var(--s2) * -1) var(--s3)}
.navmese b{font-size:var(--t-lead);font-weight:800}
.navmese button{all:unset;cursor:pointer;width:var(--h-medio);height:var(--h-medio);
  display:grid;place-items:center;border-radius:var(--r-p);background:var(--prato);
  font-size:22px;font-weight:800;line-height:1}
/* sette colonne su un telefono stretto: ogni pixel di gomito rubato al
   padding torna al bersaglio del dito. Cosi' i giorni arrivano a 45. */
.settimana-intestazione{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  margin:0 calc(var(--s2) * -1) var(--s1)}
.settimana-intestazione span{text-align:center;font-size:var(--t-nota);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.griglia-mese{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  margin:0 calc(var(--s2) * -1)}
.gg{all:unset;cursor:pointer;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;border-radius:var(--r-p);
  font-size:var(--t-min);font-weight:600;min-height:40px}
.gg.vuota{visibility:hidden;cursor:default}
.gg.pieno{background:var(--velo);font-weight:800}
.gg.oggi{background:var(--ink);color:var(--crema)}
.gg i{display:flex;gap:2px;min-height:7px;align-items:center}
.gg i b{width:6px;height:6px;border-radius:50%;display:block}
.evento{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:2px solid var(--linea)}
.evento>b{width:10px;height:10px;border-radius:50%;flex:none;margin-top:7px}
.evento>div{flex:1;min-width:0}
.evento strong{display:block;font-size:var(--t-body)}
.evento span{display:block;color:var(--tenue);font-size:var(--t-min);font-weight:600}
.evento em{display:block;font-style:normal;font-size:var(--t-min);font-weight:700}
.evento time{font-size:var(--t-nota);color:var(--tenue);font-weight:700;white-space:nowrap}
.evento.futuro strong{color:var(--raccolta)}

/* ---- moduli raccolto e cure ----
   Due campi in riga sono 1fr e 1fr: non possono venire di larghezza diversa. */
.campi{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s4) 0 0}
.campi label,label.lungo{display:block;font-size:var(--t-min);font-weight:700;
  color:var(--tenue);position:relative}
label.lungo{margin-top:var(--s4)}
.campi input,label.lungo input{display:block;width:100%;min-height:var(--h-alto);
  margin-top:var(--s1);padding:0 var(--s4);font:inherit;font-size:var(--t-body);
  font-weight:600;color:var(--ink);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-m);background:var(--crema)}
.campi .unita{position:absolute;right:var(--s4);bottom:18px;font-size:var(--t-min);
  color:var(--tenue);pointer-events:none}
.etichetta{margin:var(--s4) 0 var(--s2);font-size:var(--t-min);font-weight:700;
  color:var(--tenue)}
.taglie{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.taglie button{all:unset;cursor:pointer;min-height:var(--h-alto);display:grid;
  place-items:center;border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  background:var(--crema);font-weight:700;font-size:var(--t-body)}
.taglie button[aria-pressed=true]{background:var(--ink);color:var(--crema)}
/* Il bottone che apre la data: e' un valore, quindi si legge come un campo
   e non come un comando, ma resta premibile a tutta larghezza. */
.btn.quando{width:100%;justify-content:flex-start;background:var(--crema);
  border-radius:var(--r-m);font-weight:700}
/* Il nostro calendario, in casa: stessa griglia della scheda Calendario,
   dentro una cornice che lo tiene attaccato al bottone che l'ha aperto. */
.calendarietto{margin-top:var(--s2);padding:var(--s3) var(--s2);
  border:var(--bordo) solid var(--ink);border-radius:var(--r-m);background:var(--crema)}
.calendarietto .navmese{margin:0 0 var(--s2)}
.calendarietto .gg{min-height:44px;font-size:var(--t-body)}
.calendarietto .gg:disabled{opacity:.25;cursor:default}
.calendarietto .gg.scelto{background:var(--raccolta);color:var(--crema);font-weight:800}
.calendarietto .navmese button:disabled{opacity:.3;cursor:default}
.spunta{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-body);
  font-weight:600;color:var(--ink);cursor:pointer;min-height:var(--h-alto);
  padding:0 var(--s3);border-radius:var(--r-m);background:var(--velo)}
.spunta input{width:26px;height:26px;flex:none;accent-color:var(--ink)}

/* ---- comandi della mano, sul bordo sinistro ---- */
/* piu' in alto della meta': col pannello di costruzione aperto, a meta'
   schermo annulla finiva addosso alle linguette */
#comandi{left:var(--s3);top:38%;transform:translateY(-50%);display:flex;
  flex-direction:column;gap:var(--s4);z-index:5}
#comandi[hidden]{display:none}
#zoom,#storia{display:flex;flex-direction:column;gap:var(--s2)}
#zoom[hidden],#storia[hidden]{display:none}
#zoom button{all:unset;cursor:pointer;width:var(--h-alto);height:var(--h-alto);
  border-radius:var(--r-m);background:var(--crema);border:var(--bordo) solid var(--ink);
  box-shadow:var(--ombra);font-size:var(--t-tit);font-weight:800;line-height:1;
  display:grid;place-items:center}
#zoom button:hover{background:var(--prato)}

#basso{touch-action:pan-y;bottom:calc(var(--dock) + var(--s3) + env(safe-area-inset-bottom));
  max-height:calc(100dvh - var(--testa, 120px) - var(--dock) - var(--s5) - env(safe-area-inset-bottom));
  left:var(--s3);right:var(--s3);max-width:34rem;margin:0 auto;
  padding:var(--s4);transition:transform 240ms var(--easing),opacity 180ms var(--easing);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#basso[hidden]{display:none}
#basso.giu{transform:translateY(16px);opacity:0}
.testa{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.mini{width:56px;height:56px;flex:0 0 auto;border-radius:var(--r-m);
  border:var(--bordo) solid var(--ink);background:var(--prato);overflow:hidden;
  display:grid;place-items:center}
.mini svg{width:100%;height:100%;display:block}
.mini.carta{width:84px;height:84px;border-radius:var(--r-g);
  background:var(--crema);box-shadow:var(--ombra)}
.mini.carta svg{width:100%;height:100%}
.testa h2{margin:0;font-size:var(--t-tit2);font-weight:800;line-height:1.15}
.testa p{margin:2px 0 0;font-size:var(--t-min);font-weight:600;color:var(--tenue)}
/* il blocco di mezzo prende lo spazio che avanza, la coordinata non si
   spezza mai: "R4 . C4" andava a capo e sembrava un errore di stampa */
.testa>div:not(.mini):not(.coord){flex:1;min-width:0}
.coord{margin-left:auto;flex:none;align-self:flex-start;white-space:nowrap;
  font-size:var(--t-nota);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}

.tacche{display:flex;gap:var(--s1);margin:var(--s4) 0 var(--s2)}
.tacca{flex:1;height:12px;border-radius:var(--r-m);background:var(--osso);
  border:2px solid var(--ink);transition:background 260ms var(--easing)}
.tacca.piena{background:var(--raccolta)}
.dida{display:flex;justify-content:space-between;gap:var(--s3);
  font-size:var(--t-min);font-weight:600;color:var(--tenue)}
.dida b{color:var(--ink)}

/* ---- bottoni ----
   Una griglia, non un flex: due bottoni affiancati escono per forza
   della stessa altezza e della stessa larghezza, anche se uno dei due
   testi va a capo. Era il difetto piu' visibile del profilo. */
.azioni{display:grid;gap:var(--s2);margin-top:var(--s4)}
.azioni.due{grid-template-columns:repeat(2,minmax(0,1fr))}
.azioni+.azioni{margin-top:var(--s2)}
.azioni .btn{width:100%;min-height:var(--h-alto)}
.btn{all:unset;box-sizing:border-box;min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;cursor:pointer;border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  min-height:var(--h-medio);padding:0 var(--s5);font-weight:700;font-size:var(--t-body);
  line-height:1.2;text-align:center;background:var(--crema);box-shadow:var(--ombra);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  transition:transform 160ms var(--easing),box-shadow 160ms var(--easing),background 160ms var(--easing)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ombra-c)}
.btn:active{transform:translateY(2px);box-shadow:var(--ombra-giu)}
/* piccolo vuol dire meno peso, non meno bersaglio: sotto i 48 il dito
   non lo prende. I 40 restano solo alle pillole di stato, che non si premono. */
.btn.piccolo{min-height:var(--h-medio);padding:0 var(--s4);font-size:var(--t-min)}
.btn.acqua{background:var(--acqua-velo)} .btn.raccolta{background:var(--verde-velo)}
.btn.tolgo{background:var(--rosso-velo)} .btn.fatto{background:var(--prato);color:var(--tenue)}
.btn.pericolo{background:var(--rosso-velo)}
/* il secondario resta un bottone, non diventa testo sciolto: prima era
   trasparente e senza bordo, e nessuno capiva che si poteva premere */
.btn.quieto{background:transparent;box-shadow:none;border-color:var(--linea);
  color:var(--tenue);font-weight:700}
.btn.quieto:hover{transform:none;box-shadow:none;background:var(--velo)}
.btn.quieto:active{transform:translateY(1px);box-shadow:none}
.btn svg{width:20px;height:20px;flex:none;display:block}
.btn.solo{padding:0;width:var(--h-alto);height:var(--h-alto);border-radius:var(--r-m)}
.btn.solo svg{width:32px;height:32px}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}

/* elementi disegnati sulla mappa */
.bolla{cursor:pointer}
.bolla .cerchio{transition:transform 180ms var(--easing);transform-box:fill-box;transform-origin:50% 100%}
.bolla:hover .cerchio{transform:translateY(-4px)}
@keyframes salta{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.azione{cursor:pointer}
.azione circle{transition:transform 160ms var(--easing);transform-box:fill-box;transform-origin:50% 50%}
.azione:hover circle{transform:scale(1.09)}

/* ---- carte da scegliere ---- */
.scelta{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));
  gap:var(--s2);padding:var(--s2) 0}
.scelta button{all:unset;cursor:pointer;display:grid;justify-items:center;
  border:var(--bordo) solid var(--ink);border-radius:var(--r-g);background:var(--crema);
  box-shadow:var(--ombra);padding:var(--s2) var(--s2) var(--s3);
  transition:transform 160ms var(--easing)}
.scelta button:active{transform:translateY(3px);box-shadow:var(--ombra-giu)}
/* display:grid batte l'attributo hidden: va detto, se no il filtro non nasconde niente */
.scelta button[hidden]{display:none}
.scelta button svg{width:100%;height:auto;aspect-ratio:1;display:block}
/* Con quaranta colture scorrere e' una caccia al tesoro. Il campo resta
   attaccato in alto mentre la lista scorre sotto.

   L'ombra serve a coprire: sticky si incolla al bordo del contenuto, cioe'
   sedici pixel sotto il bordo del pannello, e in quella fessura si vedevano
   passare le carte. L'ombra piena, senza sfocatura, riempie la striscia
   sopra la barra e viene tagliata dal pannello stesso. */
.cerca-riga{position:sticky;top:0;z-index:3;background:var(--crema);
  margin:0 calc(var(--s4) * -1);padding:var(--s2) var(--s4);
  /* La banda e' alta quanto il padding del pannello, non di piu', e sopra
     le si lascia esattamente quello spazio di margine: da ferma copre solo
     vuoto, scorrendo copre il padding. Con 24 e nessun margine si mangiava
     la riga di testo sopra anche a lista ferma. */
  margin-top:var(--s4);box-shadow:0 calc(var(--s4) * -1) 0 var(--crema)}
.cerca{width:100%;min-height:var(--h-alto);padding:0 var(--s4);font:inherit;
  font-size:var(--t-body);font-weight:600;color:var(--ink);
  border:var(--bordo) solid var(--ink);border-radius:var(--r-m);background:var(--crema)}
.scelta button span{display:block;margin-top:var(--s2);padding:var(--s1) var(--s3);
  background:var(--prato);border:2.5px solid var(--ink);border-radius:var(--r-m);
  font-weight:800;font-size:var(--t-min);line-height:1.2;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le colture da escludere sono quattordici, e viste alla misura della semina
   riempivano tre schermate prima di arrivare ai due bottoni. Qui servono a
   riconoscerle, non a sceglierle: piu' piccole, tre per riga. */
.scelta.fitta{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr))}
.scelta.fitta button{padding:var(--s1) var(--s1) var(--s2)}
.scelta.fitta button svg{width:74%}
/* Qui il nome va letto per intero: "Roma..." e "Ravan..." non dicono niente.
   Senza pastiglia il nome ci sta tutto: la pastiglia con bordo e imbottitura
   si mangiava sedici pixel su una carta larga poco piu' di cento. */
.scelta.fitta button span{white-space:normal;background:none;border:0;padding:0;
  margin-top:var(--s1);font-size:.875rem;line-height:1.15;min-height:2.3em;
  display:grid;place-items:center}
.scelta.fitta button[aria-pressed=true] span{background:none;color:var(--ink);
  text-decoration:line-through}
/* Escluso si vede: il disegno sbiadisce e l'etichetta si scurisce. Senza
   questo si toccava e non cambiava niente. */
.scelta button[aria-pressed=true]{background:var(--prato)}
.scelta button[aria-pressed=true] svg{opacity:.35}
.scelta button[aria-pressed=true] span{background:var(--ink);color:var(--crema)}

/* Il bottone resta sotto gli occhi mentre si scorrono le colture: in fondo a
   una lista lunga nessuno lo trova.

   Uno solo, non due affiancati: "Salta, mostrami tutto" in mezza colonna
   andava a capo tre volte e usciva dalla pastiglia. Il salto sta sotto, in
   chiaro, con lo stesso bersaglio da toccare ma senza il peso del bottone. */
.azioni.appesa{position:sticky;bottom:0;z-index:3;background:var(--crema);
  margin:var(--s4) calc(var(--s4) * -1) 0;padding:var(--s2) var(--s4) var(--s1);
  border-top:2px solid var(--linea);box-shadow:0 var(--s4) 0 var(--crema)}
/* Su uno schermo da seicento punti il pannello e' alto quattrocento: la
   barra deve prendersene il meno possibile, o non resta niente da leggere. */
.salta{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;
  width:100%;min-height:var(--h-basso);font:inherit;
  font-size:var(--t-min);font-weight:700;color:var(--ink);opacity:.7;
  text-decoration:underline;text-underline-offset:3px}
.salta:active{opacity:1}

/* liste di scelta senza immagine: larghezze uguali, non a misura di parola */
.pennelli{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:var(--s2);margin-top:var(--s2)}
.pennelli button{all:unset;cursor:pointer;min-height:var(--h-medio);display:grid;
  place-items:center;border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  padding:0 var(--s3);font-weight:700;font-size:var(--t-min);text-align:center;
  background:var(--crema);box-shadow:var(--ombra)}
.pennelli button[aria-pressed=true]{background:var(--ink);color:var(--crema)}
/* La casella dove si scrive era identica alle pastiglie: stesso bordo, stessa
   altezza, tutta larga. Sembrava una nona voce da toccare. Il tratteggio dice
   "qui si scrive" ed e' lo stesso segno del rombo vuoto sull'orto, dove vuol
   dire la stessa cosa: c'e' posto, mettici qualcosa. */
.campo-altro{width:100%;min-height:var(--h-medio);margin-top:var(--s2);
  padding:0 var(--s3);font:inherit;font-size:var(--t-body);font-weight:600;
  color:var(--ink);background:transparent;border-radius:var(--r-m);
  border:2.5px dashed var(--linea)}
.campo-altro::placeholder{font-weight:500;color:var(--tenue)}
.campo-altro:focus{outline:none;border-style:solid;border-color:var(--ink);
  background:var(--crema)}
.pennelli button.pericolo{background:var(--rosso-velo)}

/* ---- slider di costruzione ----
   Compatto di proposito: mentre costruisci devi vedere l'orto. */
#basso.slider{background:var(--crema);border:var(--bordo) solid var(--ink);
  border-radius:var(--r-g);padding:var(--s3);max-height:none;overflow:visible;
  margin-bottom:0}
/* Linguette, non pulsanti: stanno sopra il bordo del pannello e quella
   attiva ci si fonde dentro, come le alette di una cartellina. Solo icona,
   niente parola: quattro parole in fila mangiavano una riga intera. */
/* La fascia prende i tocchi tutta intera. Con pointer-events:none passavano
   alla mappa sotto attraverso i cinque pixel fra una linguetta e l'altra, e
   la mappa in costruzione legge un tocco come "ho finito": bastava sbagliare
   di un dito e si chiudeva tutto. */
.linguette{position:absolute;bottom:100%;left:var(--r-g);right:var(--s3);
  display:flex;gap:5px;align-items:flex-end;margin-bottom:var(--bordo)}
/* Tutte della stessa altezza e allineate in cima. Facendo l'attiva piu' alta
   le altre sembravano spinte dentro il pannello: nelle alette vere cambia il
   colore, non la misura. */
.linguette button[data-gruppo]{all:unset;cursor:pointer;width:56px;height:48px;
  display:grid;place-items:center;overflow:hidden;
  border:var(--bordo) solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0;
  background:var(--carta-spenta)}
.linguette button[data-gruppo] svg{width:36px;height:36px;display:block;opacity:.62}
/* L'attiva scende di quanto e' spesso il bordo e ci va sopra: lo copre col
   proprio fondo, e le sue fiancate nere proseguono fin dentro il pannello
   senza interruzioni. Con l'ombra al posto della discesa restava un
   rattoppo: la banda copriva il bordo ma le fiancate finivano prima, e
   agli angoli in basso si vedeva lo scalino.
   In piu' l'essere piu' bassa delle altre e' gia' il segno che quella e'
   la linguetta aperta. */
.linguette button[aria-pressed=true]{background:var(--crema);
  transform:translateY(var(--bordo))}
.linguette button[aria-pressed=true] svg{opacity:1}
/* Staccata quel tanto che basta. Sono 7 e non 12 perche' sotto c'e' l'ombra
   piena da 4: il vuoto che si vede e' di 3, si separano e basta. */
.chiudi-posa{all:unset;cursor:pointer;margin-left:auto;margin-bottom:7px;
  width:44px;height:44px;
  display:grid;place-items:center;border-radius:var(--r-m);
  border:var(--bordo) solid var(--ink);background:var(--crema);
  font-size:22px;line-height:1;color:var(--tenue);box-shadow:var(--ombra)}
.chiudi-posa:active{transform:translateY(2px);box-shadow:var(--ombra-giu)}
/* Le frecce stanno SOPRA il binario, non accanto: prendendo posto in riga
   stringevano le carte, che erano gia' troppo piccole. */
.slider-riga{position:relative;margin-top:var(--s2)}
/* Appoggiate addosso alle carte, non in riga: a fianco rubavano larghezza
   al binario, ed erano due mattoni grigi in mezzo ai disegni. */
.freccia{all:unset;cursor:pointer;position:absolute;top:50%;z-index:2;
  transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-m);background:var(--crema);border:2.5px solid var(--ink);
  box-shadow:var(--ombra)}
.freccia svg{width:22px;height:22px;display:block}
.freccia.sx{left:-9px} .freccia.dx{right:-9px}
/* la foglia e' disegnata verso sinistra: avanti e' la stessa, specchiata */
.freccia.dx svg{transform:scaleX(-1)}
.freccia:active{transform:translateY(-50%) translateY(2px);box-shadow:var(--ombra-giu)}
.freccia[hidden]{display:none}
.binario{touch-action:pan-x;flex:1;min-width:0;display:flex;gap:var(--s2);overflow-x:auto;
  padding:2px 0 var(--s1);scroll-snap-type:x mandatory;scrollbar-width:none}
.binario::-webkit-scrollbar{display:none}
/* tre carte in vista: i gruppi ne hanno tre, quindi di solito non si scorre
   nemmeno e le frecce restano nascoste */
.binario button{all:unset;cursor:pointer;flex:0 0 calc((100% - var(--s4))/3);
  scroll-snap-align:start;display:grid;justify-items:center;
  border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  background:var(--crema);box-shadow:var(--ombra);padding:var(--s1) var(--s1) var(--s2)}
.binario button svg{width:100%;height:auto;aspect-ratio:1.3;display:block}
.binario button span{display:block;margin-top:2px;padding:2px var(--s2);
  max-width:100%;background:var(--prato);border:2px solid var(--ink);border-radius:var(--r-m);
  font-weight:800;font-size:var(--t-nota);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binario button[aria-pressed=true]{background:var(--prato)}
.dipiu summary[hidden]{display:none}

/* ---- barra mentre posi ---- */
#posa-barra{left:var(--s3);right:var(--s3);
  bottom:calc(var(--dock) + var(--s3) + env(safe-area-inset-bottom));
  max-width:30rem;margin:0 auto;z-index:6;display:flex;align-items:center;gap:var(--s3);
  background:var(--crema);border:var(--bordo) solid var(--ink);border-radius:var(--r-m);
  padding:var(--s2);padding-left:var(--s3);box-shadow:var(--ombra-alta)}
#posa-barra[hidden]{display:none}
#posa-barra .che{display:flex;align-items:center;gap:var(--s2);min-width:0;flex:1}
#posa-barra .che span{width:46px;height:46px;flex:none;display:block}
#posa-barra .che span svg{width:100%;height:100%;display:block}
#posa-barra .che .dice{min-width:0;line-height:1.15}
#posa-barra .che b{display:block;font-size:var(--t-body);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#posa-barra .che small{display:block;font-size:var(--t-nota);font-weight:600;
  color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#posa-fatto{all:unset;cursor:pointer;flex:none;min-height:var(--h-medio);
  padding:0 var(--s5);display:flex;align-items:center;justify-content:center;gap:var(--s2);
  border-radius:var(--r-m);background:var(--verde-velo);border:var(--bordo) solid var(--ink);
  font-weight:800;font-size:var(--t-body);box-shadow:var(--ombra)}
#posa-fatto:active{transform:translateY(2px);box-shadow:var(--ombra-giu)}
#posa-fatto svg{width:20px;height:20px;fill:none;stroke:#2F7D46;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- bottone che apre la costruzione ---- */
#costruisci{all:unset;cursor:pointer;flex:none;
  width:var(--h-alto);height:var(--h-alto);display:grid;place-items:center;
  border-radius:var(--r-m);background:var(--crema);border:var(--bordo) solid var(--ink);
  box-shadow:var(--ombra)}
#costruisci[hidden]{display:none}
/* premuto: sei in costruzione, e ripremendolo ne esci */
#costruisci[aria-pressed=true]{background:var(--prato)}
#costruisci:active{transform:translateY(3px);box-shadow:var(--ombra-giu)}
#costruisci svg{width:36px;height:36px;display:block}
#costruisci svg:not(.disegnata){fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.posa-scelta{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
.posa-scelta button svg{aspect-ratio:1}
.posa-scelta button[aria-pressed=true]{background:var(--prato)}

/* annulla e rifai: bersagli veri, non pulsantini da mouse */
#storia button{all:unset;cursor:pointer;width:var(--h-alto);height:var(--h-alto);
  border-radius:var(--r-m);display:grid;place-items:center;background:var(--crema);
  border:var(--bordo) solid var(--ink);box-shadow:var(--ombra)}
#storia button:active{transform:translateY(3px);box-shadow:var(--ombra-giu)}
/* spento non vuol dire sbiadito: un bottone al 30% sopra il disegno
   sembrava un difetto di stampa. Se non c'e' niente da rifare, non c'e'. */
#storia button:disabled{display:none}
#storia button svg{width:30px;height:30px;display:block}
#storia button svg:not(.disegnata){fill:none;stroke:var(--ink);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* Rifai e' Annulla specchiato: un disegno solo per due comandi. */
#b-rifai svg{transform:scaleX(-1)}


/* La misura dell'orto: due righe uguali, il numero sempre in vista.
   I quattro bottoni sulla mappa non dicevano mai quanto era grande. */
.misure{display:grid;gap:var(--s2);margin-bottom:var(--s3)}
.misura{display:flex;align-items:center;gap:var(--s2);font-weight:700;
  font-size:var(--t-body)}
.misura b{flex:1;min-width:0}
.misura span{width:2.2rem;text-align:center;font-weight:800;font-size:var(--t-lead)}
.misura button{all:unset;cursor:pointer;width:var(--h-medio);height:var(--h-medio);
  flex:none;border-radius:var(--r-m);border:var(--bordo) solid var(--ink);
  display:grid;place-items:center;background:var(--crema);box-shadow:var(--ombra);
  font-weight:800;font-size:var(--t-lead);line-height:1}
.misura button:active{transform:translateY(2px);box-shadow:var(--ombra-giu)}
.misura button:disabled{opacity:.3;cursor:default;box-shadow:none}
.nota{font-size:var(--t-min);font-weight:600;color:var(--tenue);
  line-height:1.5;margin:var(--s3) 0 0}

@media (max-width:760px){ #zoom{display:none} #stato .quiete{display:none} }