/* Tower 0.5.0 · web/tower.css
   Solo quello che il vestito (ds/bundle.css) non ha già: la disposizione delle pagine
   (altezza a tutto schermo, dove il guscio passa da largo a medio a stretto) e gli style="…" delle tavole, spostati
   in classi col nome della tavola da cui vengono. Solo variabili dei token: mai colori o misure scritti a mano.
   Nessuno stile inventato: se manca un pezzo si aggiunge al design system «Tower» e si ricopia (ds/LEGGIMI.md).
   Dalla 0.3.1 il 320 del dettaglio e le tre toppe del lavoro B2 stanno nel vestito (ds/bundle.css), non più qui. */

/* ---------------------------------------------------------------- la disposizione delle pagine */
[hidden] { display: none !important; }
html, body { height: 100%; }
.pagina { height: 100dvh; overflow: hidden; }
.pagina > .guscio { height: 100%; }

/* l'ingresso vero (0.5.0): sul sito, finché tower.js non sa chi è entrato, il guscio resta coperto da «Un attimo» */
.pagina-attesa { display: none; }
[data-ingresso] .pagina > .guscio, [data-ingresso] .pagina > .solo-stretto { display: none; }
[data-ingresso] .pagina-attesa { display: flex; height: 100%; align-items: center; justify-content: center; }
/* il tema e «Esci», in fondo alle zone (0.5.0): righe come le zone, ma sono tasti; nella colonnina resta l'icona */
button.zona { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }

/* il guscio stretto (telefono) non si costruisce: sotto i 700 si vede solo «presto» */
.solo-stretto { display: none; }
@media (max-width: 699px) {
  .pagina > .guscio { display: none; }
  .solo-stretto { display: flex; height: 100%; }
}
/* il passo tra largo (PC, da 1200) e medio (tablet, 700–1199) lo dà tower.js con la classe .medio del vestito */

/* l'ingresso sul telefono: le due metà una sotto l'altra, la porta per prima */
.pagina-ingresso { min-height: 100dvh; }
@media (max-width: 699px) {
  .pagina-ingresso > .ingresso { grid-template-columns: minmax(0, 1fr); }
  .pagina-ingresso .ingresso-porta { order: -1; border-left: 0; border-bottom: 1px solid var(--filo); }
}

/* ---------------------------------------------------------------- dalla tavola Ingresso */
.tavola-ingresso { height: 100%; min-height: 100dvh; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tavola-ingresso-piccolo { font: var(--f-piccolo); }

/* ---------------------------------------------------------------- dalla tavola Main (Oggi) */
.tavola-main-scelta { padding: 0; }
.tavola-main-nota { margin: 0; align-self: flex-start; }
.tavola-main-sezione { margin-top: var(--spazio-3); }
.tavola-main-link { margin-top: auto; }

/* ---------------------------------------------------------------- le pagine d'esempio delle zone (0.4.0, web/esempi.js)
   Dalle tavole Idee, DaFare-Vittoria, Appunti-Stefania e Cartellino: gli style="…" delle tavole, in classi. Solo token. */
.tavola-avviso { align-self: flex-start; margin: 0; padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-s); background: var(--rialzo); font: var(--f-testo); color: var(--testo-tenue); }
.tavola-due { flex: 1; display: grid; grid-template-columns: var(--pannello-proprieta) minmax(0, 1fr); gap: var(--spazio-6); min-height: 0; }
.tavola-due-stretta { grid-template-columns: var(--pannello) minmax(0, 1fr); }
.tavola-colonna { display: flex; flex-direction: column; gap: var(--spazio-3); min-width: 0; min-height: 0; }
.tavola-colonna > .zone-gruppo { padding-left: var(--spazio-2); }
.tavola-largo { width: 100%; }
.tavola-sinistra { align-self: flex-start; }
.tavola-testa-aperta { display: flex; align-items: center; gap: var(--spazio-3); padding-bottom: var(--spazio-3); border-bottom: 1px solid var(--filo); }
.tavola-testa-aperta h2 { margin: 0; flex: 1; font: var(--f-lettura-titolo); }
.tavola-testa-colonna { flex-direction: column; align-items: flex-start; gap: var(--spazio-2); }
.tavola-testa-colonna h2 { flex: none; }
.tavola-tenue { margin: 0; font: var(--f-piccolo); color: var(--testo-tenue); }
.tavola-forte { font-weight: 600; color: var(--testo); }
.tavola-piede { margin-top: auto; display: flex; flex-direction: column; gap: var(--spazio-2); padding-top: var(--spazio-3); border-top: 1px solid var(--filo); }
.tavola-tasti { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); }
.tavola-riga { display: flex; align-items: flex-end; gap: var(--spazio-3); }
.tavola-riga > .linguette { flex: 1; }
.tavola-scorre { overflow-x: auto; }
.tavola-col-cosa { width: 40%; }
.tavola-col-per { width: 18%; }
.tavola-col-da { width: 14%; }
.tavola-col-entro { width: 12%; }
.tavola-col-stato { width: 16%; }
.tavola-idee-scheda .voce-scheda { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
.tavola-idee-scheda > .meta, .tavola-idee-scheda > .da-claude { margin-bottom: var(--spazio-3); }
.tavola-cartellino { width: 100%; max-width: calc(var(--lettura-largo) + var(--spazio-6) * 4); align-self: center; display: flex; flex-direction: column; gap: var(--spazio-4); }
.tavola-cartellino-scelta { background: var(--lastra); border: 1px solid var(--filo); border-radius: var(--raggio-m); }
.tavola-scelta-riquadro { padding: var(--spazio-3); border: 1px solid var(--filo); border-radius: var(--raggio-m); }
.tavola-scelta-riga { padding: var(--spazio-3) 0; border-top: 1px solid var(--filo); }
.tavola-scelta-riga .domanda { font: var(--f-testo); }
.onda .h1, .onda .h6 { height: var(--spazio-2); }
.onda .h2, .onda .h4, .onda .h7 { height: var(--spazio-3); }
.onda .h3, .onda .h5 { height: var(--spazio-4); }
/* le righe e le linguette delle pagine d'esempio sono tasti veri, col vestito delle righe */
button.riga-elenco { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.linguette > button { font: inherit; cursor: pointer; }
.tabella tbody tr[data-azione] { cursor: pointer; }
@media (hover: hover) { .tabella tbody tr[data-azione]:hover td { background: var(--rialzo); } }
.tabella tbody tr[data-azione]:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--sottolineo) var(--selezione); }
/* sul tablet le due colonne interne diventano una: l'elenco sopra, la cosa aperta sotto */
.guscio.medio .tavola-due { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- la dedica a tempo di musica (0.4.1, web/dedica.js)
   Dalla tavola Ingresso (la scena D1). Vale solo con .scena, che mette lo script: senza, resta la dedica ferma.
   Il testo non ancora scritto tiene il suo posto (visibility), così niente si sposta mentre si scrive. */
.ingresso { position: relative; overflow: hidden; }
.ingresso-dedica.scena img.anello { position: relative; z-index: 3; will-change: transform; }
.ingresso-dedica.scena :is(.riga-dedica, .nome-porta, .firma) { position: relative; }
.ingresso-dedica.scena .resto, .ingresso-dedica.scena .punto-posto { visibility: hidden; }
.ingresso-dedica.scena .cursore { display: inline-block; width: var(--sottolineo); height: .8lh; margin: 0 var(--spazio-mezzo); vertical-align: -.1lh;
  border-radius: var(--spazio-mezzo); background: var(--accento); visibility: hidden; }
.ingresso-dedica.scena .cursore.qui { visibility: visible; }
.ingresso-dedica.scena .cursore.pensa { animation: tower-lampeggia 1060ms steps(1) infinite; }
@keyframes tower-lampeggia { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ingresso-dedica.scena .calcata { display: inline-block; white-space: pre; animation: tower-calca 260ms var(--morbido) both; }
@keyframes tower-calca { 0% { opacity: 0; transform: translateY(calc(var(--spazio-1) * -.75)) scale(1.35); filter: blur(calc(var(--spazio-mezzo) * .75)); } 55% { opacity: 1; transform: translateY(calc(var(--spazio-mezzo) / 2)) scale(.96); filter: none; } 100% { opacity: 1; transform: none; } }
.ingresso-dedica.scena .tratto { position: absolute; height: calc(var(--spazio-mezzo) * 1.5); border-radius: var(--spazio-mezzo); background: var(--accento); pointer-events: none; }
.ingresso-dedica.scena .amore { display: inline-block; position: relative; vertical-align: top; overflow: visible; white-space: pre; }
.ingresso-dedica.scena .amore .amata { display: inline-block; }
.ingresso-dedica.scena .amore svg { position: absolute; left: 50%; top: 50%; width: .75lh; height: .75lh; margin: -.375lh 0 0 -.375lh; fill: var(--accento); opacity: 0; transform: scale(.2); }
.ingresso-dedica.scena .slogan { opacity: 0; transition: opacity 1600ms ease; }
.ingresso-dedica.scena .slogan.vista, .ingresso-dedica.scena.fermo-tutto .slogan { opacity: 1; }
.invito-dedica { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); }
.rivedi-dedica { position: absolute; top: var(--spazio-6); right: var(--spazio-6); z-index: 4; }
@media (prefers-reduced-motion: reduce) { .invito-dedica, .rivedi-dedica { display: none; } }