/* Il timer e il DG (viste/timer.js, viste/rosa.js). */

/* Il timer (viste/timer.js). Il foglio di avvio: la materia, il ritmo, l'avviso. */
.foglio-timer { display: grid; gap: 14px; }
.materia-timer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: var(--testo); font: inherit; }
.materia-timer .etichetta { flex: 1; min-width: 0; font-weight: 500; }
.materia-timer small { display: block; color: var(--testo-2); font-size: 13px; font-weight: 400; }
.materia-timer .cambia { color: var(--accento); font-size: 14px; }
.blocco-ritmo { display: grid; gap: 8px; }
.titoletto-timer { font-size: 12px; color: var(--testo-2); text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.ritmi-timer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scelta-timer { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--bordo); background: var(--card); color: var(--testo); font: inherit; }
.scelta-timer b { font-size: 20px; font-variant-numeric: tabular-nums; }
.scelta-timer small { font-size: 12px; color: var(--testo-2); }
.scelta-timer[aria-checked="true"] { border-color: var(--accento); background: var(--card-sel); box-shadow: inset 0 0 0 1px var(--accento); }
.nota-timer { margin: 0 4px; font-size: 13px; color: var(--testo-2); }
.avviso-timer { display: flex; gap: 10px; font-size: 13px; color: var(--testo-2); background: var(--pista); border-radius: 12px; padding: 10px 12px; }
.avviso-timer svg { flex-shrink: 0; width: 18px; height: 18px; }
.concentrati { display: flex; align-items: center; justify-content: center; gap: 8px; }
.concentrati svg { width: 20px; height: 20px; }
.fine-timer { display: grid; gap: 14px; }
.riepilogo-timer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riepilogo-timer div { background: var(--pista); border-radius: 14px; padding: 12px; }
.riepilogo-timer b { display: block; font-family: var(--font-titolo); font-weight: 500; font-size: 26px; font-variant-numeric: tabular-nums; }
.riepilogo-timer small { color: var(--testo-2); font-size: 13px; }

/* Il DG (viste/rosa.js): i colori dello strumento vero, uguali in tutti e
   due i temi; la notte del timer li cambia. Tre strati sovrapposti: la cassa,
   la rosa che gira, quello che sta fermo. */
.strumento { --dg-cassa: #17171d; --dg-rosa: #000; --dg-testo: #f3f3f6; --dg-fede: #f3f3f6; --dg-tacche: #c9c9d1; --dg-bug: #e5322b;
  position: relative; aspect-ratio: 1; flex-shrink: 0; }
.dg-strato, .dg-girevole { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dg-girevole { transform-origin: 50% 50%; will-change: transform; }
.dg-cassa { fill: var(--dg-cassa); }
.dg-rosa { fill: var(--dg-rosa); }
.dg-bug { fill: var(--dg-bug); }
.dg-tacca { stroke: var(--dg-testo); }
.dg-numero { fill: var(--dg-testo); font-family: var(--font); }
.dg-ghiera-tacca { fill: var(--dg-tacche); }
.dg-fede { fill: var(--dg-fede); }
.dg-jet { fill: var(--dg-rosa); stroke: var(--dg-fede); stroke-width: 3.2; stroke-linejoin: round; }
/* Nel benvenuto la rosa si posa sul nord; nel caricamento vira due volte.
   Li' lo strumento si fonde con la pagina: si vedono solo i dettagli (neri in
   light, bianchi in dark, su una pagina nera: html.con-rosa). */
.rosa-benvenuto, .rosa-attesa { --dg-cassa: var(--fondo-rosa); --dg-rosa: var(--fondo-rosa); --dg-testo: var(--testo);
  --dg-fede: var(--testo); --dg-tacche: var(--testo); }
html.con-rosa, html.con-rosa body { background: var(--fondo-rosa); }
.vuoto .rosa-benvenuto { width: 132px; margin: 0 auto 20px; }
.attesa .rosa-attesa { width: 96px; margin-bottom: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .rosa-benvenuto .dg-girevole { animation: si-posa 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .rosa-attesa .dg-girevole { animation: due-virate 4.3s cubic-bezier(.45, 0, .25, 1) both; }
}
@keyframes si-posa { from { transform: rotate(-120deg); } to { transform: rotate(0deg); } }
@keyframes due-virate { from { transform: rotate(0deg); } to { transform: rotate(-720deg); } }

/* Lo schermo del timer: nero pieno in tutti e due i temi (sull'OLED dell'iPhone
   il nero spegne i pixel); grigia solo la ghiera del DG. */
.timer-vista { --t-testo: #f3f3f6; --t-testo-2: #8d8d99; --t-fuoco: #5a9cf5; --t-pausa: #8fc35a; --t-tasto: #15151c; --t-pallino: #22222c;
  --t-fase: var(--t-fuoco);
  position: fixed; inset: 0; z-index: 30; background: #000; color: var(--t-testo); display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
  overflow: hidden; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; }
.timer-vista.in-pausa { --t-fase: var(--t-pausa); }
.timer-vista button { font: inherit; color: inherit; cursor: pointer; }
.esci-timer, .vista-timer-tasti button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--t-tasto);
  color: var(--t-testo-2) !important; display: grid; place-items: center; padding: 0; transition: opacity .3s; }
.esci-timer svg, .vista-timer-tasti svg { width: 20px; height: 20px; }
.esci-timer { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px; }
.vista-timer-tasti { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px; display: flex; gap: 8px; transition: opacity .3s; }
.vista-timer-tasti .notte-timer, .vista-timer-tasti .essenziale-timer { display: none; }
.essenziale-timer[aria-pressed="true"] { background: var(--t-testo-2) !important; color: #000 !important; }
.testa-timer { text-align: center; padding: 0 96px 0 44px; }
.nome-timer { font-weight: 600; }
.obiettivo-timer { color: var(--t-testo-2); font-size: 14px; }
.corpo-timer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 0; }
.lato-timer { display: contents; }
.timer-vista .strumento { width: min(270px, 68vw, 38vh); }
.colonna-dg { display: flex; flex-direction: column; align-items: center; }
/* La casella della prua sopra il DG: "HDG" e il riquadro coi gradi, appoggiato
   alla linea di fede che gli fa da freccia (come sul display di un jet). */
.casella-hdg { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.etichetta-hdg { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--t-testo-2); }
.riquadro-hdg { position: relative; min-width: 62px; padding: 3px 10px; border: 1.5px solid var(--t-testo); border-radius: 3px;
  font-size: 22px; font-weight: 500; letter-spacing: .04em; text-align: center; color: var(--t-testo); }
/* La casella sta al centro: "HDG" non la sposta di lato. */
.casella-hdg { padding-right: 38px; }
/* Cambiando strumento: quello di prima sfuma via, il nuovo compare. */
.timer-vista.esce-forma .corpo-timer { opacity: 0; transition: opacity .28s ease; }
.timer-vista.entra-forma .corpo-timer { animation: compare .45s ease both; }
.tempo-timer { margin-top: 10px; font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.forma-nascosto .tempo-timer { font-size: 84px; font-weight: 200; }
.fase-timer { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t-fase); }
.timer-vista.fermo .fase-timer { color: var(--t-testo-2); }
.materia-sb, .solo-obiettivo { display: none; }
.poi-timer { font-size: 13px; color: var(--t-testo-2); }
.cicli-timer { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.cicli-timer i { width: 9px; height: 9px; border-radius: 50%; background: var(--t-pallino); }
.cicli-timer i.fatto { background: var(--t-fuoco); }
/* L'anello del primo mock: si svuota, col tempo dentro. */
.anello-pista { fill: none; stroke: var(--t-pallino); stroke-width: 8; }
.anello-avanzamento { fill: none; stroke: var(--t-fase); stroke-width: 8; stroke-linecap: round; }
.dentro-anello { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.dentro-anello .tempo-timer { margin: 0; font-size: 60px; }
.comandi-timer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: 420px; gap: 12px; transition: opacity .3s; }
.comandi-timer button { border: 0; background: var(--t-tasto); border-radius: 999px; min-height: 48px; padding: 0 16px; font-size: 15px; }
.comandi-timer .grande { width: 76px; height: 76px; border-radius: 50%; background: var(--t-testo); color: #000 !important; display: grid; place-items: center; padding: 0; }
.comandi-timer .grande svg { width: 28px; height: 28px; }
/* In manuale, a fase finita: il tempo in piu' in ambra e "Inizia la pausa". */
.prosegui-timer { display: none; }
.timer-vista.scaduta .salta-timer, .timer-vista.scaduta .grande { display: none; }
.timer-vista.scaduta .comandi-timer { display: flex; }
.timer-vista.scaduta .prosegui-timer { display: block; flex: 1; background: var(--t-testo) !important; color: #000 !important; font-weight: 600; }
.timer-vista.scaduta .tempo-timer { color: #e0a845; }
.timer-vista.scaduta .fase-timer { color: #e0a845; }
.piede-timer { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--t-testo-2); }
.piede-timer span { display: inline-flex; align-items: center; gap: 6px; }
.piede-timer svg { width: 14px; height: 14px; }
.riga-essenziale small { display: block; font-size: 13px; color: var(--testo-2); margin-top: 2px; }

/* La vista StandBy: l'iPhone in orizzontale. Lo strumento a sinistra, il
   tempo grande a destra; i tasti in alto e i comandi in basso, piccoli,
   spariscono dopo 4 secondi. */
@media (orientation: landscape) and (max-height: 520px) {
  .timer-vista { flex-direction: row; padding: 4vh max(env(safe-area-inset-right, 0px), 4vw) 4vh max(env(safe-area-inset-left, 0px), 4vw); }
  .testa-timer, .piede-timer { display: none; }
  .vista-timer-tasti .notte-timer, .vista-timer-tasti .essenziale-timer { display: grid; }
  .corpo-timer { flex: 1; flex-direction: row; justify-content: flex-start; gap: 5vw; text-align: left; }
  .timer-vista .strumento { width: auto; height: min(70vh, 40vw); }
  .casella-hdg { margin-bottom: .6vh; }
  .riquadro-hdg { font-size: max(16px, 5.6vh); }
  .etichetta-hdg { font-size: max(11px, 3.6vh); }
  .forma-anello .strumento, .forma-nascosto .strumento { height: min(84vh, 44vw); }
  .lato-timer { display: grid; gap: 1.6vh; justify-items: start; min-width: 0; transition: opacity 1s ease; }
  .forma-nascosto .corpo-timer { justify-content: center; }
  .forma-nascosto .lato-timer { justify-items: center; text-align: center; }
  .tempo-timer { order: 0; margin: 0; font-size: min(27vh, 12.5vw); font-weight: 200; line-height: .9; letter-spacing: -0.03em; }
  .forma-nascosto .tempo-timer { font-size: min(36vh, 17vw); }
  .lato-timer { gap: 1.2vh; }
  .dentro-anello .tempo-timer { font-size: min(18vh, 8vw); }
  .dentro-anello .fase-timer, .dentro-anello .poi-timer { font-size: max(11px, 3.4vh); }
  .fase-timer { order: 1; font-size: max(12px, 4.4vh); }
  .materia-sb { display: block; order: 2; font-size: max(14px, 5.6vh); font-weight: 600; }
  .poi-timer { order: 3; font-size: max(12px, 4.4vh); }
  .cicli-timer { order: 5; justify-content: flex-start; }
  /* I comandi nella colonna delle scritte (li sposta collocaComandi). */
  .lato-timer .comandi-timer { order: 6; width: auto; display: flex; gap: 8px; margin-top: 1.5vh; }
  .comandi-timer button { min-height: 40px; font-size: 13px; color: var(--t-testo-2); }
  .comandi-timer .grande { width: 40px; height: 40px; background: var(--t-tasto); color: var(--t-testo-2) !important; }
  .comandi-timer .grande svg { width: 16px; height: 16px; }
  .timer-vista.calma .comandi-timer, .timer-vista.calma .esci-timer, .timer-vista.calma .vista-timer-tasti { opacity: 0; }
  /* La vista essenziale: prima il resto si dissolve, poi lo strumento va al
     centro e sotto compare l'obiettivo. */
  .timer-vista.essenziale .lato-timer { opacity: 0; }
  .timer-vista.essenziale .dentro-anello { opacity: 0; transition: opacity 1s ease; }
  /* Al centro lo strumento tiene la sua grandezza e scivola solo verso destra;
     l'obiettivo compare a destra, dove c'erano le scritte, all'altezza della rosa. */
  .timer-vista.al-centro .corpo-timer { justify-content: center; position: relative; }
  .timer-vista.al-centro .lato-timer { position: absolute; visibility: hidden; }
  .timer-vista.al-centro .solo-obiettivo { display: block; position: absolute; left: calc(50% + min(35vh, 20vw) + 3vw); right: 0; top: 50%;
    transform: translateY(-50%); margin-top: 4vh; font-size: max(14px, 5.6vh); font-weight: 600; text-align: left; animation: compare 1.2s .6s ease both; }
  .timer-vista.forma-anello.al-centro .solo-obiettivo { left: calc(50% + min(42vh, 22vw) + 3vw); margin-top: 0; }
  .timer-vista.forma-nascosto.al-centro .solo-obiettivo { left: 0; text-align: center; margin-top: 0; }
  /* La notte (il tema scuro del telefono o dell'app): tutto rosso tenue. */
  .timer-vista.scaduta .prosegui-timer { flex: 0 1 auto; padding: 0 18px; font-size: 14px; }
  .timer-vista.notte.scaduta .tempo-timer, .timer-vista.notte.scaduta .fase-timer { color: var(--t-testo); }
  .timer-vista.notte { --t-testo: #b3261e; --t-testo-2: #6e1712; --t-fuoco: #b3261e; --t-pausa: #b3261e; --t-tasto: #120404; --t-pallino: #2a0a08; }
  .timer-vista.notte .strumento { --dg-cassa: #0c0404; --dg-testo: #b3261e; --dg-fede: #b3261e; --dg-tacche: #6e1712; --dg-bug: #6e1712; }
}
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }
.modo-timer b { font-size: 16px; }