/* =========================================================================
   Promemoria — foglio di stile unico.
   Impianto: superfici chiare e calde, angoli morbidi, un solo accento oro.
   Il tema scuro segue automaticamente le impostazioni del telefono.
   ========================================================================= */

:root {
  /* Colori — tema chiaro */
  --bg: #f6f3f7;
  --bg-glow: #ece2ee;
  --surface: #ffffff;
  --surface-2: #faf7fb;
  --ink: #17141a;
  --ink-2: #5d5560;
  --ink-3: #8e8593;
  --line: rgba(23, 20, 26, 0.08);
  --line-strong: rgba(23, 20, 26, 0.14);

  /* ------------------------------------------------------------------
     IL VIOLA ZENITH — #7a496c

     Non è stato cercato: è arrivato. È il viola del logo di Zenith Fitness
     Lab, verificato due volte — dichiarato nel foglio di stile del
     gestionale e ricampionato dai pixel del logo, che danno lo stesso
     colore. Goccia smette di avere una tinta propria e prende quella di
     casa: due app diverse che si riconoscono come una cosa sola.

     Regge dove serve: 6,3 sulla carta chiara — meglio di quanto reggesse
     l'oro, che stava a 3,6. Sul fondo scuro invece scende a 2,5 e sparisce,
     quindi al buio si usa il secondo viola di Zenith, il #9c6d8e: è loro
     anche quello, non è inventato qui.

     Quello che si perde, ed è giusto dirlo: l'oro stava nel giallo, cioè
     nell'unico posto della ruota dei colori che la scala dell'imminenza
     lascia libero, e per questo non somigliava a nessun significato. Il
     viola sta invece proprio dentro quel corridoio, a un passo da «ora» e
     da «oggi». Il conto esatto sta in DECISIONI.md.
     ------------------------------------------------------------------ */
  --goccia: #7a496c;

  /* La stessa cosa sotto una luce diversa. color-mix, non altri esadecimali:
     così cambiando l'oro cambia tutto insieme e niente resta indietro. */
  --gold: var(--goccia);
  --gold-2: color-mix(in oklab, var(--goccia) 72%, #ffffff);
  --gold-tint: color-mix(in oklab, var(--goccia) 13%, var(--surface));
  --gold-ink: color-mix(in oklab, var(--goccia) 82%, #000000);

  --green: #2e8b57;
  --green-tint: #e6f4ec;
  --red: #c0483c;
  --red-tint: #fbeceb;

  /* Imminenza — quanto manca, detto col colore.
     Le sei tinte vengono da una ricerca che massimizzava la distanza
     percettiva nel caso peggiore fra vista normale, protanopia,
     deuteranopia e tritanopia; le luminanze scendono in modo continuo,
     così la scala si legge anche in bianco e nero. Il glifo di ogni
     tessera è quello dei due inchiostri che contrasta di più. */
  --im-ritardo: #870001;
  --im-ritardo-glifo: #ffffff;
  --im-ora: #942048;
  --im-ora-glifo: #ffffff;
  --im-oggi: #94488f;
  --im-oggi-glifo: #ffffff;
  --im-domani: #7f79c5;
  --im-domani-glifo: #1a1815;
  --im-settimana: #6dadd1;
  --im-settimana-glifo: #1a1815;
  --im-lontano: #a8d5cd;
  --im-lontano-glifo: #1a1815;

  /* Azioni: quattro tinte piene, distinguibili fra loro sotto ogni
     forma di daltonismo (la coppia più vicina resta a ΔE 11,5). */
  --az-fatto: #0a7d55;
  --az-rimanda: #1f6fd0;
  /* Modifica era un grigio-viola, e col marchio viola è diventato lo stesso
     colore: 6,4 di distanza, cioè indistinguibile. Ora è ambra, e non è un
     gusto — è l'unico posto della ruota che nessun altro significato occupa:
     né le quattro azioni, né i sei gradini dell'imminenza. Da lì dista 29,6
     dalle azioni e 16,8 dai gradini. È anche la tinta giusta per il suo
     mestiere: aprire e cambiare è un'azione che avverte, non che conclude. */
  --az-modifica: #ddb130;
  --az-annulla: #c62a1f;
  --az-testo: #ffffff;
  /* Sull'ambra il bianco non si legge: è l'unica delle quattro che porta il
     testo scuro, e non è un'eccezione capricciosa — è il colore chiaro che
     la impone. */
  --az-modifica-testo: #1a1815;
  /* Riattiva: l'unica azione che dà vita invece di muoverla o chiuderla.
     Parla la lingua della storia, dove la nascita è segnata in oro — e
     riattivare è rinascere. Non è un esadecimale nuovo: è l'Oro Goccia con
     un po' di ombra addosso, quanta ne serve per reggere il testo bianco. */
  --az-riattiva: color-mix(in oklab, var(--goccia) 84%, #000000);

  /* Le famiglie dei consigli. Vivono dentro la nuvoletta, che ha il fondo
     scuro: qui servono tinte chiare. Prese lontane fra loro sul giro dei
     colori — corallo, viola, blu, verde — e comunque mai sole: sopra il
     consiglio la famiglia è scritta a parole. */
  --tinta-voce: #f5967f;
  --tinta-occhio: #d98ad0;
  --tinta-tempo: #7fc4e8;
  --tinta-scorciatoia: #5fd3a4;

  --shadow-1: 0 1px 2px rgba(23, 22, 20, 0.04), 0 4px 12px rgba(23, 22, 20, 0.05);
  --shadow-2: 0 2px 6px rgba(23, 22, 20, 0.06), 0 12px 32px rgba(23, 22, 20, 0.09);
  --shadow-gold: 0 10px 30px rgba(122, 73, 108, 0.34);

  --radius-card: 22px;
  --radius-sheet: 30px;

  --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --gloss: rgba(255, 255, 255, 0.72);

  --dock-h: 104px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #100e13;
    --bg-glow: #1b1622;
    --surface: #1b1820;
    --surface-2: #221e29;
    --ink: #f3eff6;
    --ink-2: #b3aabb;
    --ink-3: #837b8c;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* Al buio il viola del logo scende a 2,5 di contrasto e sparisce: qui
       si passa al SECONDO viola di Zenith, il #9c6d8e, che è loro anche
       quello. Non è un colore nuovo, è lo stesso marchio sotto un'altra
       luce — ed è esattamente quello che fa il gestionale. */
    --goccia: #9c6d8e;
    --gold-2: color-mix(in oklab, var(--goccia) 62%, #ffffff);
    --gold-ink: color-mix(in oklab, var(--goccia) 55%, #ffffff);

    --green: #5cba85;
    --green-tint: #1b2a21;
    --red: #e1776a;
    --red-tint: #2c1d1b;

    --im-ritardo: #f97f6f;
    --im-ritardo-glifo: #0d0c0b;
    --im-ora: #c7798a;
    --im-ora-glifo: #0d0c0b;
    --im-oggi: #966a91;
    --im-oggi-glifo: #0d0c0b;
    --im-domani: #5f5d85;
    --im-domani-glifo: #f4f1ea;
    --im-settimana: #2f4e61;
    --im-settimana-glifo: #f4f1ea;
    --im-lontano: #193632;
    --im-lontano-glifo: #f4f1ea;

    --az-fatto: #3fbf8f;
    --az-rimanda: #6aa8ff;
    --az-modifica: #e8c65a;
    --az-annulla: #ff6f5e;
    --az-testo: #0d0c0b;
    --az-modifica-testo: #0d0c0b;
    --az-riattiva: color-mix(in oklab, var(--goccia) 78%, #ffffff);

    /* Al buio la nuvoletta si rovescia: fondo chiaro, quindi tinte scure. */
    --tinta-voce: #a83a20;
    --tinta-occhio: #8d2f87;
    --tinta-tempo: #175d80;
    --tinta-scorciatoia: #0a6b49;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 10px 30px rgba(156, 109, 142, 0.36);
    --gloss: rgba(255, 255, 255, 0.055);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #100e13;
  --bg-glow: #1b1622;
  --surface: #1b1820;
  --surface-2: #221e29;
  --ink: #f3eff6;
  --ink-2: #b3aabb;
  --ink-3: #837b8c;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  /* Lo stesso oro, identico. Sul fondo scuro cambia solo dove va la luce:
     il testo si schiarisce invece di scurirsi, e il velo si posa sulla
     superficie scura invece che su quella chiara. Il colore no. */
  --goccia: #9c6d8e;
  --gold-2: color-mix(in oklab, var(--goccia) 62%, #ffffff);
  --gold-ink: color-mix(in oklab, var(--goccia) 55%, #ffffff);
  --green: #5cba85;
  --green-tint: #1b2a21;
  --red: #e1776a;
  --red-tint: #2c1d1b;

  --im-ritardo: #f97f6f;
  --im-ritardo-glifo: #0d0c0b;
  --im-ora: #c7798a;
  --im-ora-glifo: #0d0c0b;
  --im-oggi: #966a91;
  --im-oggi-glifo: #0d0c0b;
  --im-domani: #5f5d85;
  --im-domani-glifo: #f4f1ea;
  --im-settimana: #2f4e61;
  --im-settimana-glifo: #f4f1ea;
  --im-lontano: #193632;
  --im-lontano-glifo: #f4f1ea;

  --az-fatto: #3fbf8f;
  --az-rimanda: #6aa8ff;
  --az-modifica: #e8c65a;
  --az-annulla: #ff6f5e;
  --az-testo: #0d0c0b;
  --az-modifica-testo: #0d0c0b;
  --az-riattiva: color-mix(in oklab, var(--goccia) 78%, #ffffff);
  --tinta-voce: #a83a20;
  --tinta-occhio: #8d2f87;
  --tinta-tempo: #175d80;
  --tinta-scorciatoia: #0a6b49;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 10px 30px rgba(156, 109, 142, 0.36);
  --gloss: rgba(255, 255, 255, 0.055);
  color-scheme: dark;
}

/* ------------------------------ Base ------------------------------ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  background-image: radial-gradient(120% 60% at 50% 0%, var(--bg-glow) 0%, var(--bg) 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------ Layout ------------------------------ */

.app {
  max-width: 560px;
  margin: 0 auto;
  /* Il fondo lascia spazio alla barra E al tasto dei consigli, che
     altrimenti si siederebbe sopra l'ultima card. */
  padding: max(18px, env(safe-area-inset-top)) 18px calc(var(--dock-h) + 64px);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px 22px;
}

.topbar__greeting {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 500;
}

.topbar__date {
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* La versione, sotto la data. Serve a una cosa sola: quando qualcosa non va,
   sapere quale copia dell'app si ha davanti senza aprire le impostazioni.
   Sta in fondo alla scala dei grigi apposta — si trova quando la si cerca e
   non si vede quando non serve. Cifre tabulari perché cambiando versione la
   riga non deve ballare. */
.topbar__versione {
  margin: 3px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, color 0.15s ease;
  flex: none;
}

.icon-btn:active {
  transform: scale(0.93);
}

/* ------------------------------ Sezioni ------------------------------ */

.section {
  margin-bottom: 26px;
}

.section__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 10px;
}

/* Il numero va a fondo riga: fra titolo e numero ci sta la freccia solo se
   la sezione si piega, e l'allineamento non deve cambiare per questo. */
.section__head .section__count {
  margin-left: auto;
}

.section__title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.section__count {
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.section--now .section__title {
  color: var(--im-ritardo);
}

/* ------------------------------ Card ------------------------------ */

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La card prende il colore del proprio livello di imminenza e se lo tiene
   addosso in due modi: un velo lucido sopra e un alone sotto. Il velo dà
   spessore alla superficie, l'alone lega la card alla sua tessera — così il
   colore non è un francobollo appiccicato a sinistra ma la temperatura di
   tutta la riga. Restano entrambi molto tenui: devono farsi sentire di
   sottecchi, non colorare la lista. */
.card {
  position: relative;
  --alone: var(--im-lontano);
  background:
    linear-gradient(168deg, var(--gloss) 0%, transparent 42%),
    var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1), 0 10px 26px -12px color-mix(in oklab, var(--alone) 42%, transparent);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card[data-im='ritardo'] { --alone: var(--im-ritardo); }
.card[data-im='ora'] { --alone: var(--im-ora); }
.card[data-im='oggi'] { --alone: var(--im-oggi); }
.card[data-im='domani'] { --alone: var(--im-domani); }
.card[data-im='settimana'] { --alone: var(--im-settimana); }

/* Concluso: l'imminenza non c'è più, ma un alone sì — di un altro colore e
   per un altro motivo. Non dice più quanto manca (non manca niente), dice
   com'è finita: verde chi è stato fatto, rosso chi è stato annullato.

   Sta nell'ombra e non sulla carta apposta. Una lista di venti conclusi col
   fondo colorato diventa a strisce e stanca dopo tre schermate; l'ombra si
   sente di sottecchi, che è quanto serve a una cosa già archiviata.

   Si cambia solo di che colore è l'alone, non come si disegna: il meccanismo
   è quello di sempre, e così la card aperta lo allarga da sola come fa con
   tutte le altre, senza una seconda regola che se ne ricordi. */
.card--done { --alone: var(--az-fatto); }
.card--cancelled { --alone: var(--az-annulla); }

/*
 * Le eliminate prendono il viola del marchio, spento.
 *
 * La scelta ha un motivo, non è un gusto. Verde e rosso sono già presi da
 * «fatta» e «annullata», e sono anche i due che più occhi confondono: un
 * terzo colore vivo accanto a loro avrebbe reso peggiore anche quello che
 * prima funzionava. Il viola invece è il colore di casa — non dice «bene» né
 * «male», dice «roba dell'app» — e smorzato dice quello che è successo
 * davvero: non un esito, una pulizia. Una goccia eliminata non ha vinto né
 * perso: è stata tolta di mezzo, e da qui si riprende quando serve.
 */
.card--deleted { --alone: color-mix(in oklab, var(--goccia) 60%, var(--ink-3)); }

/* Più marcato di quello dell'imminenza, e per un motivo pratico più che di
   gusto: i conclusi stanno dentro un riquadro che ha già un fondo suo, e
   un'ombra su un fondo si perde. Alla forza delle altre card qui non si
   vedeva niente. */
.card--done,
.card--cancelled,
.card--deleted {
  box-shadow: var(--shadow-1), 0 7px 18px -6px color-mix(in oklab, var(--alone) 85%, transparent);
}

/* Senza orario non c'è temperatura da mostrare: niente alone.
   I conclusi sono tirati fuori dalla regola perché un alone ce l'hanno, di
   un altro colore — e senza questa esclusione lo perderebbero: hanno tutti
   data-im="nessuna", e un attributo pesa più di una classe. */
.card[data-im='nessuna']:not(.card--done):not(.card--cancelled):not(.card--deleted) {
  box-shadow: var(--shadow-1);
}

/* Aperta, l'alone si allarga: sta per succedere qualcosa. */
.card[data-open='true'] {
  box-shadow: var(--shadow-2), 0 16px 40px -14px color-mix(in oklab, var(--alone) 55%, transparent);
}

/* Solo le card appena comparse si animano: l'elenco si aggiorna spesso
   per tenere aggiornati i "tra 2 ore" e non deve lampeggiare. */
.card.is-new {
  animation: card-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* La card scaduta si accende del colore del ritardo, non dell'oro:
   l'oro è l'identità dell'app e non deve mai voler dire qualcosa. */
.card--due {
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.card--due::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--im-ritardo);
}

.card--done .card__title,
.card--cancelled .card__title,
.card--deleted .card__title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.card__main {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  /* Serve al cerchietto della selezione, che si appoggia qui dentro. */
  position: relative;
}

/* La tessera: dice in un colpo d'occhio di che cosa si tratta (il segno)
   e quanto manca (il colore di fondo). Cambia da sola col passare del
   tempo, senza che l'utente tocchi niente. */
.card__tile {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--im-lontano);
  color: var(--im-lontano-glifo);
  transition: background 0.4s ease, color 0.4s ease;
}

.card__tile[data-im='ritardo'] {
  background: var(--im-ritardo);
  color: var(--im-ritardo-glifo);
}

.card__tile[data-im='ora'] {
  background: var(--im-ora);
  color: var(--im-ora-glifo);
}

.card__tile[data-im='oggi'] {
  background: var(--im-oggi);
  color: var(--im-oggi-glifo);
}

.card__tile[data-im='domani'] {
  background: var(--im-domani);
  color: var(--im-domani-glifo);
}

.card__tile[data-im='settimana'] {
  background: var(--im-settimana);
  color: var(--im-settimana-glifo);
}

/* Senza orario non c'è imminenza da mostrare: il contorno tratteggiato lo
   dice senza rubare un colore alla scala. */
.card__tile[data-im='nessuna'] {
  background: transparent;
  color: var(--ink-3);
  border: 1.5px dashed var(--line-strong);
}

/* Concluso o annullato: il colore non serve più, resta solo il segno. */
.card--done .card__tile,
.card--cancelled .card__tile {
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

.card__when {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1px;
}

.card__hour {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.card__day {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card--due .card__hour {
  color: var(--im-ritardo);
}

.card__body {
  flex: 1;
  min-width: 0;
}

.card__title {
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Le informazioni sotto il titolo stanno su righe fisse, non in una fila che
   va a capo da sola. Prima "ogni anno" e "tra 133 giorni" finivano affiancati
   su una card e su due righe su quella sotto, a seconda di quanto erano
   lunghi: due card uguali si leggevano in due modi. Ora la ripetizione ha
   sempre la sua riga e lo stato la sua, e l'occhio impara dove guardare. */
.card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
}

.card__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* Le icone si adattano alla taglia del contenitore che le ospita */
.tag svg {
  width: 13px;
  height: 13px;
}

.chip svg {
  width: 17px;
  height: 17px;
}

.empty__mark svg {
  width: 28px;
  height: 28px;
}

.banner svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* "in ritardo di 25 min": stesso colore della tessera, così i due segnali
   si confermano a vicenda invece di raccontare due storie diverse. */
.tag--ritardo {
  background: var(--im-ritardo);
  color: var(--im-ritardo-glifo);
  border-color: transparent;
  font-weight: 600;
}

.tag--red {
  background: var(--red-tint);
  color: var(--red);
  border-color: transparent;
}

.tag--green {
  background: var(--green-tint);
  color: var(--green);
  border-color: transparent;
  font-weight: 600;
}

.tag--soft {
  background: transparent;
  border-style: dashed;
  color: var(--ink-3);
}

.card__chevron {
  flex: none;
  color: var(--ink-3);
  transition: transform 0.25s ease;
}

.card[data-open='true'] .card__chevron {
  transform: rotate(180deg);
}

/* Azioni della card: appaiono solo quando serve */
.card__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 14px 14px;
}

.card__actions--full {
  grid-template-columns: repeat(4, 1fr);
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 4px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  transition: transform 0.12s ease, background 0.15s ease;
}

.action:active {
  transform: scale(0.95);
}

/* Tinte piene, non sfumature: quando la card è aperta è perché c'è una
   scelta da fare, e una scelta si legge in mezzo secondo. Colore, icona e
   posizione dicono la stessa cosa tre volte, così nessuna delle tre da sola
   deve bastare. */
.action--done,
.action--snooze,
.action--edit,
.action--cancel,
.action--restore {
  color: var(--az-testo);
  border-color: transparent;
  font-weight: 600;
}

.action--done {
  background: var(--az-fatto);
}

.action--snooze {
  background: var(--az-rimanda);
}

.action--edit {
  background: var(--az-modifica);
  color: var(--az-modifica-testo);
}

.action--cancel {
  background: var(--az-annulla);
}

.action--restore {
  background: var(--az-riattiva);
}

/* ------------------------------ Vuoto ------------------------------ */

.empty {
  text-align: center;
  padding: 42px 22px 30px;
}

.empty__mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-tint);
  color: var(--gold);
}

.empty__title {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 8px;
  font-weight: 500;
}

.empty__text {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 32ch;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  align-items: center;
}

.example {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-1);
  font-style: italic;
}

/* ------------------------------ Dock ------------------------------ */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 58%, transparent);
  pointer-events: none;
}

.dock > * {
  pointer-events: auto;
}

.mic {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--gold-2), var(--gold));
  box-shadow: var(--shadow-gold);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mic:active {
  transform: scale(0.92);
}

.mic__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
}

.mic[data-listening='true'] .mic__ring {
  animation: ring 1.8s ease-out infinite;
}

.mic[data-listening='true'] .mic__ring:nth-child(2) {
  animation-delay: 0.6s;
}

@keyframes ring {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.dock__side {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease;
}

.dock__side:active {
  transform: scale(0.92);
}

.dock__side[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
}

/* ------------------------------ Ascolto ------------------------------ */

.listening {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 32px;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fade-in 0.2s ease both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.orb {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--gold-2), var(--gold));
  box-shadow: var(--shadow-gold);
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.orb::before,
.orb::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: ring 2.2s ease-out infinite;
}

.orb::after {
  animation-delay: 1.1s;
}

.listening__text {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.35;
  max-width: 22ch;
  min-height: 2.7em;
  margin: 0;
}

.listening__text:empty::before {
  content: 'Ti ascolto…';
  color: var(--ink-3);
}

.listening__hint {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
}

.listening__stop {
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-2);
}

/* ------------------------------ Sheet ------------------------------ */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 11, 10, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.18s ease both;
}

.sheet {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
  animation: sheet-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  max-height: 88vh;
  overflow-y: auto;
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}

.sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  margin: 0 auto 16px;
}

.sheet__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
  margin: 0 0 8px;
}

.sheet__title {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 4px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.sheet__title-input {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.25;
  font-weight: 500;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed var(--line-strong);
  padding: 2px 0 6px;
  margin: 0 0 6px;
}

.sheet__sub {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0 0 16px;
}

.sheet__raw {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.12s ease;
}

.chip:active {
  transform: scale(0.95);
}

.chip--gold {
  background: var(--gold-tint);
  border-color: transparent;
  color: var(--gold-ink);
}

.chip--selected {
  background: var(--ink);
  color: var(--bg);
  border-color: transparent;
}

/* ------------------------------ Rinvii ------------------------------ */

/* Tre righe invece di una fila sola: l'occhio salta all'unità giusta
   (minuti, ore, giorni) e poi sceglie. Sotto ogni pastiglia c'è l'ora di
   ritorno, così non si fa il conto a mente. */
.rinvii {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.rinvii__titolo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 7px 2px;
}

.rinvii__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rinvio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 78px;
  padding: 9px 13px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform 0.12s ease, border-color 0.15s ease;
}

.rinvio:active {
  transform: scale(0.94);
}

.rinvio__quanto {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rinvio__ora {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.rinvii__altro {
  align-self: flex-start;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}

/* ------------------------------ Selettore data/ora ------------------------------ */

.pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Quello che hai scelto, scritto per esteso: è l'unica riga che va letta. */
.pick__eco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  margin-bottom: 12px;
  border-radius: 17px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.pick__eco-giorno {
  font-family: var(--serif);
  font-size: 16.5px;
}

.pick__eco-ora {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pick__eti {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 10px 0 6px 2px;
}

.pick__riga {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ogni riga scorre invece di andare a capo: se le pastiglie si accavallano
   l'altezza del pannello cambia a ogni tocco e le frecce ballano. Una riga
   che scorre resta ferma, e il pollice ci arriva comunque. */
.pick__chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  padding-bottom: 2px;
}

.pick__chips::-webkit-scrollbar {
  display: none;
}

.pick__chip {
  flex: none;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: transform 0.12s ease;
}

.pick__chip:active {
  transform: scale(0.93);
}

.pick__chip--on {
  background: var(--ink);
  color: var(--bg);
  border-color: transparent;
  font-weight: 600;
}

/* Il giorno scelto quando non è uno dei salti rapidi: si mostra, non si tocca. */
.pick__chip--eco {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  border-color: var(--line-strong);
}

.pick__arrow {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.pick__arrow svg {
  width: 19px;
  height: 19px;
}

.pick__arrow--giu svg {
  transform: rotate(90deg);
}

.pick__arrow--su svg {
  transform: rotate(-90deg);
}

.pick__arrow:active {
  transform: scale(0.92);
}

.sheet__buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn {
  flex: 1;
  padding: 15px 18px;
  border-radius: 17px;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  transition: transform 0.12s ease;
  border: 1px solid transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-2);
  flex: 0 0 auto;
  min-width: 108px;
}

.btn--done {
  background: var(--green);
  color: #fff;
}

/* Le due strade alternative al «Fatto», nel pannello che scatta all'ora:
   rimandare e annullare. Prima Rimanda era un fantasma bianco e Annulla una
   pastiglia colorata, e a colpo d'occhio sembrava che annullare fosse la
   scelta normale e rimandare un ripiego — mentre è il contrario, si rimanda
   dieci volte per ogni annullamento. Ora pesano uguale, ognuna del proprio
   colore: quello dei tasti che fanno la stessa cosa dentro la card. */
.btn--danger {
  background: var(--red-tint);
  color: var(--red);
}

.btn--rimanda {
  background: color-mix(in oklab, var(--az-rimanda) 13%, var(--surface));
  color: color-mix(in oklab, var(--az-rimanda) 78%, var(--ink));
  border-color: transparent;
}

/*
 * Il tasto che cancella qualcosa.
 *
 * Prende il rosso di Annulla, che nell'app vuole già dire «questo toglie». Il
 * primo disegno del ripristino metteva «Sostituisci tutto» nel blu di
 * Rimanda: il testo diceva «cancella i 4 promemoria che ho adesso» e il
 * colore diceva «sposto di dieci minuti». Chi legge i colori prima delle
 * parole — cioè chiunque, di fretta — avrebbe premuto tranquillo.
 */
.btn--pericolo {
  background: color-mix(in oklab, var(--az-annulla) 13%, var(--surface));
  color: color-mix(in oklab, var(--az-annulla) 82%, var(--ink));
  border-color: color-mix(in oklab, var(--az-annulla) 24%, transparent);
}

/*
 * Scelte larghe, una sopra l'altra.
 *
 * Servono dove le due strade non sono «sì» e «no» ma due cose diverse che
 * vanno lette prima di premere — il ripristino di una copia, dove una
 * aggiunge e l'altra cancella. Affiancate e con la sola etichetta si preme a
 * caso; incolonnate, con sotto la frase di cosa succede, si legge.
 */
.sheet__scelte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.btn--largo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 15px 18px;
}

.btn__nome {
  font-size: 16px;
  font-weight: 700;
}

.btn__spiega {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.82;
}

/* Barra del conto alla rovescia dentro il pulsante di conferma */
.btn__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.btn--primary[data-countdown='true'] .btn__progress {
  animation: countdown var(--countdown, 4s) linear forwards;
}

@keyframes countdown {
  to {
    width: 100%;
  }
}

.big-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.big-actions .btn--done {
  grid-column: 1 / -1;
  padding: 18px;
  font-size: 17px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field__label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.field__control {
  width: 100%;
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

/* Impostazioni.
   Prima era una colonna sola di righe tutte diverse: il nome era un campo con
   l'etichetta maiuscola, l'aspetto un blocco, gli interruttori una fila, i
   tasti in fondo un'altra cosa ancora — quattro grammatiche in una schermata.
   Ora c'è una forma sola, la riga, e le righe stanno dentro blocchi morbidi
   con un titolino sopra. Il titolino non è decorazione: dice di che cosa
   parlano le righe sotto, così se ne cercano tre invece di dodici. */
.blocco {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 15px;
}

.blocco__titolo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 4px 8px;
}

/*
 * Una riga delle impostazioni: testo a sinistra, comando a destra.
 *
 * La colonna del comando ha una larghezza FISSA, e non è un vezzo. Prima era
 * flessibile, quindi ogni tasto era largo quanto la sua parola: «Prova»,
 * «Salva», «Esporta», «Scegli il file» finivano a quattro distanze diverse
 * dal bordo, e in mezzo a loro gli interruttori a una quinta. Scorrendo la
 * pagina il bordo destro ballava, e una schermata che balla si legge come
 * disordinata anche quando ogni singola riga è giusta.
 *
 * Fissandola, tutto quello che si tocca sta incolonnato: i tasti diventano
 * larghi uguali fra loro (quanto il più lungo, «Scegli il file») e gli
 * interruttori si allineano al loro stesso bordo.
 */
.setting {
  display: grid;
  grid-template-columns: 1fr var(--comando-largo, 8.6rem);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

/* Il comando sta a destra dentro la sua colonna, qualunque cosa sia — tranne
   nelle righe a colonna, dove sotto al testo c'è un campo che deve occupare
   tutta la riga. Senza l'eccezione, `justify-self: end` restringeva il
   selettore dell'aspetto a 236px su 340 e lo appendeva a destra, con un vuoto
   a sinistra che non voleva dire niente. */
.setting:not(.setting--colonna):not(.setting--campo) > :last-child {
  justify-self: end;
}

/* I tasti riempiono la colonna: larghi uguali, testo al centro. */
.setting .chip {
  width: 100%;
  justify-content: center;
}

/*
 * Lo stato delle notifiche prende la stessa forma dei tasti — stessa
 * larghezza, stessa altezza, stesso raggio — e cambia solo colore: verde se
 * arrivano, rosso se non arrivano. Prima era una pastiglietta piccola in
 * mezzo a rettangoli grandi: l'occhio la leggeva come "un'altra cosa", mentre
 * dice esattamente quello che dicono gli altri — a che punto sta questa riga.
 */
.setting .tag--stato {
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
}

/* Viola e non verde: nella tavolozza dell'app i colori portanti sono il
   viola, il nero e il chiaro del fondo. Il verde e il rosso restano dove
   dicono un esito — fatta, annullata — e qui non c'è nessun esito: c'è una
   cosa che funziona. Il rosso di «Bloccate» resta, perché lì un guasto c'è
   davvero, e un avviso che non si distingue non è un avviso. */
.setting .tag--stato[data-acceso='true'] {
  color: color-mix(in oklab, var(--goccia) 88%, var(--ink));
  background: color-mix(in oklab, var(--goccia) 13%, var(--surface));
  border-color: color-mix(in oklab, var(--goccia) 30%, transparent);
}

.setting .tag--stato[data-acceso='false'] {
  color: color-mix(in oklab, var(--az-annulla) 88%, var(--ink));
  background: color-mix(in oklab, var(--az-annulla) 13%, var(--surface));
  border-color: color-mix(in oklab, var(--az-annulla) 26%, transparent);
}

/* Il campo del nome occupa tutta la riga: lì non c'è nessun comando a destra. */
.setting--campo {
  grid-template-columns: 1fr;
}

.setting:last-of-type,
.blocco .setting:last-child {
  border-bottom: none;
}

/* Il nome è una riga come le altre, solo con il campo sotto invece che il
   comando a destra: un'etichetta maiuscola in cima alla schermata faceva
   sembrare le impostazioni un modulo da compilare. */

.setting--campo .field__control {
  margin-top: 9px;
  background: var(--surface);
}

/* La riga in più che spiega una conseguenza — dove finiscono i dati, quanta
   batteria consuma. Sta sotto, più piccola: serve una volta sola, e le
   altre volte non deve intralciare la lettura. */
.setting__nota {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
  opacity: 0.85;
  margin-top: 5px;
}

.setting__text {
  min-width: 0;
}

.setting__name {
  font-size: 15px;
  font-weight: 500;
}

.setting__hint {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.switch {
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background 0.2s ease;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * Acceso è viola, non verde.
 *
 * Il verde nell'app vuole già dire una cosa precisa — «fatto» — e un
 * interruttore acceso non è una cosa fatta, è una cosa in funzione. Con il
 * viola del marchio la schermata delle impostazioni smette anche di avere due
 * famiglie di colore che litigano: il verde dei sette interruttori e il viola
 * di tutto il resto.
 *
 * Resta verde solo la pastiglia delle notifiche attive, che è un'altra cosa:
 * lì il verde non dice «acceso», dice «funziona» — e accanto ha il rosso di
 * «bloccate», che senza il verde non avrebbe con cosa contrapporsi.
 */
.switch[aria-checked='true'] {
  background: var(--goccia);
}

.switch[aria-checked='true']::after {
  transform: translateX(20px);
}

/* ------------------------------ Toast ------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + 14px);
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  max-width: min(92vw, 460px);
  animation: toast-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

.toast__action {
  font-weight: 700;
  color: var(--gold-2);
  white-space: nowrap;
}

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 17px;
  background: var(--gold-tint);
  color: var(--gold-ink);
  font-size: 13.5px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}

.banner__cta {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
}

/* ------------------------------ Preferenze di sistema ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Una pastiglia spenta non è rotta: è una scelta che non esiste più.
   Resta visibile perché la sua assenza confonderebbe più della sua ombra. */
.pick__chip--spento {
  opacity: 0.32;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pick__vuoto {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ------------------------------ Le ruote ------------------------------ */

/* Tre cilindri affiancati. L'effetto tridimensionale non è decorazione: una
   lista piatta che scorre non dice dove finisce, un cilindro sì — le voci si
   inclinano e sbiadiscono verso i bordi, e si capisce da soli che quella al
   centro è quella scelta senza bisogno di una cornice che lo spieghi. */
.ruote {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
  padding: 0 10px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.ruote__colonna {
  flex: 0 0 58px;
  min-width: 0;
}

.ruote__colonna--giorno {
  flex: 1 1 auto;
  max-width: 190px;
}

/* La banda che segna la voce scelta sta sotto le ruote e non intercetta il
   dito, altrimenti mangerebbe lo scorrimento proprio al centro. */
.ruote__banda {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  pointer-events: none;
}

/* Sopra la banda, altrimenti ci finisce sotto e sparisce. */
.ruote__due-punti {
  position: relative;
  z-index: 2;
  align-self: center;
  flex: none;
  width: 10px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-3);
}

.ruota {
  position: relative;
  z-index: 1;
  height: 210px; /* cinque voci da 42px */
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  perspective: 620px;
  perspective-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}

.ruota::-webkit-scrollbar {
  display: none;
}

.ruota:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 14px;
}

/* Il riempimento sopra e sotto serve a far arrivare al centro anche la prima
   e l'ultima voce: senza, gli estremi non sarebbero mai selezionabili. */
.ruota__pista {
  padding: 84px 0; /* (210 - 42) / 2 */
  transform-style: preserve-3d;
}

.ruota__voce {
  height: 42px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink-2);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.ruota__voce[data-scelta='true'] {
  color: var(--ink);
  font-weight: 650;
}

/* Il testo porta la correzione ottica — di quanto il font del telefono
   appoggia le cifre fuori centro nella propria riga. Sta QUI e non sulla
   pista per una ragione dura: lo scroll-snap guarda i riquadri trasformati,
   e spostare la pista sposterebbe anche i punti di aggancio, annullando la
   correzione esattamente di quanto vale. Il testo, per lo snap, non esiste. */
.ruota__testo {
  display: inline-block;
  transform: translateY(var(--ottica-ruota, 0px));
}

/* Chi ha chiesto meno animazioni ottiene una lista piatta che scorre uguale. */
@media (prefers-reduced-motion: reduce) {
  .ruota {
    perspective: none;
  }

  .ruota__voce {
    transform: none !important;
    opacity: 1 !important;
  }

  .ruota {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Il numero del promemoria: è la parola che si pronuncia per indicarlo,
   quindi va letto senza cercarlo ma non deve gridare più dell'ora. */
/* La lettera del ritmo — g s m a — appoggiata all'angolo della tessera.
   Prende il colore della pagina, non quello della tessera: così si stacca
   uguale su tutti e sei i livelli di imminenza, che vanno dal bordeaux al
   verde acqua, invece di sparire su metà di essi. */
.card__cadenza {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

/* Concluso o annullato: la tessera si spegne, e la lettera con lei. */
.card--done .card__cadenza,
.card--cancelled .card__cadenza {
  background: var(--surface-2);
  color: var(--ink-3);
}

/* La riga della ripetizione è l'unica squadrata, e l'unica tratteggiata: si
   riconosce per forma prima ancora di leggerla.

   Il passo del tratteggio dice l'andatura. Fitto vuol dire spesso: ogni
   giorno sono trattini quasi attaccati, ogni anno sono quattro o cinque
   segmenti lunghi che girano intorno alla scritta. È la stessa informazione
   della lettera sulla tessera e delle parole qui dentro — tre volte, sì, ma
   ognuna si legge a una distanza diversa: il tratteggio da lontano mentre si
   scorre, la lettera a mezz'aria, le parole quando ci si ferma.

   Il bordo è disegnato con quattro strisce invece che con `border: dashed`,
   perché la lunghezza dei trattini del bordo CSS non si può scegliere: la
   decide il browser. */
.tag--rip {
  --tratto: 5px;
  --vuoto: 4px;
  border: none;
  border-radius: 4px;
  padding: 3px 10px 4px;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--line-strong) 0 var(--tratto),
      transparent var(--tratto) calc(var(--tratto) + var(--vuoto))
    ),
    repeating-linear-gradient(
      90deg,
      var(--line-strong) 0 var(--tratto),
      transparent var(--tratto) calc(var(--tratto) + var(--vuoto))
    ),
    repeating-linear-gradient(
      180deg,
      var(--line-strong) 0 var(--tratto),
      transparent var(--tratto) calc(var(--tratto) + var(--vuoto))
    ),
    repeating-linear-gradient(
      180deg,
      var(--line-strong) 0 var(--tratto),
      transparent var(--tratto) calc(var(--tratto) + var(--vuoto))
    );
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  color: var(--ink-2);
}

/* Ogni giorno: trattini quasi attaccati, un bordo che da lontano sembra
   pieno. È la cosa che torna più spesso, ed è giusto che sia la più fitta. */
.tag--rip[data-cadenza='g'] {
  --tratto: 2px;
  --vuoto: 2px;
}

.tag--rip[data-cadenza='s'] {
  --tratto: 6px;
  --vuoto: 4px;
}

.tag--rip[data-cadenza='m'] {
  --tratto: 12px;
  --vuoto: 7px;
}

/* Ogni anno: pochi segmenti lunghi. Si conta a occhio quanti sono, ed è
   proprio quello il colpo d'occhio — raro. */
.tag--rip[data-cadenza='a'] {
  --tratto: 26px;
  --vuoto: 11px;
}

/* Il filo fra un mese e l'altro dentro "Più avanti".
   Non un titolo e non una fascia colorata: una riga sottile e un nome in
   corsivo minuscolo, come lo stacco fra due capitoli di un libro. Separa
   senza spezzare la colonna delle card. */
.filo-mese {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 6px 2px 0;
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.filo-mese:first-child {
  margin-top: 0;
}

.filo-mese::before,
.filo-mese::after {
  content: '';
  height: 1px;
  background: var(--line-strong);
}

.filo-mese::before {
  width: 14px;
  flex: none;
}

.filo-mese::after {
  flex: 1;
}

.card__numero {
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Il resoconto della pulizia del titolo: presente ma sottovoce.
   Deve farsi leggere se serve, non reclamare attenzione ogni volta. */
.sheet__nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.sheet__nota-segno {
  flex: none;
  color: var(--gold);
  display: grid;
  place-items: center;
}

.sheet__nota-segno svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------ Consigli ------------------------------ */

/* Il segno dell'app, fermo in basso a SINISTRA: il pollice destro tiene il
   microfono e la barra, e un aiuto che si tocca per sbaglio smette di essere
   un aiuto. */
.goccia {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(var(--dock-h) + 10px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--gold-2), var(--gold));
  box-shadow: var(--shadow-gold);
  border: 2px solid var(--surface);
  z-index: 40;
  transition: transform 0.16s ease;
}

.goccia:active {
  transform: scale(0.9);
}

.goccia[data-aperta='true'] {
  transform: scale(1.06);
}

.goccia svg {
  width: 22px;
  height: 22px;
}

/* La nuvoletta: due righe, non un manuale. Parte dal pallino e si apre verso
   l'alto, dove c'è spazio, invece di coprire la barra. */
.bolla {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(var(--dock-h) + 62px);
  width: min(300px, calc(100vw - 40px));
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-2);
  z-index: 41;
  animation: bolla-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* La codina che la lega al pallino: senza, sembrerebbe arrivata da sola. */
.bolla::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background: var(--ink);
  border-radius: 3px;
  transform: rotate(45deg);
}

@keyframes bolla-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bolla {
    animation: none;
  }
}

/* Ogni famiglia porta la sua tinta. Il nome scritto sopra resta comunque la
   cosa che dice quale famiglia è: il colore serve ad accorgersi che si è
   cambiato argomento, non a indovinarlo. */
.bolla[data-tinta='voce'] {
  --tinta: var(--tinta-voce);
}

.bolla[data-tinta='occhio'] {
  --tinta: var(--tinta-occhio);
}

.bolla[data-tinta='tempo'] {
  --tinta: var(--tinta-tempo);
}

.bolla[data-tinta='scorciatoia'] {
  --tinta: var(--tinta-scorciatoia);
}

.bolla__famiglia {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
}

.bolla__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta);
  flex: none;
}

.bolla__testo {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

/* La parte che si legge anche senza leggere il resto. */
.bolla__forte {
  color: var(--tinta);
  font-weight: 650;
}

.bolla__altro {
  margin-top: 10px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0.9;
}

/* Il tempo che resta prima del consiglio successivo.
   Senza, il testo che cambia da solo sembra un guasto; con, si capisce che
   sta scorrendo e che basta appoggiare il dito per fermarlo. */
.bolla__barra {
  height: 2px;
  margin-top: 11px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--bg) 22%, transparent);
  overflow: hidden;
}

.bolla__barra i {
  display: block;
  height: 100%;
  background: var(--tinta);
  transform-origin: left center;
  animation-name: bolla-tempo;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes bolla-tempo {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Fermo il dito sopra: si sta leggendo, e la barra si ferma con il timer. */
.bolla:hover .bolla__barra i {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .bolla {
    animation: none;
  }

  .bolla__barra i {
    animation: none;
    transform: scaleX(1);
    opacity: 0.5;
  }
}

.aiuto__voce {
  margin-top: 20px;
}

.aiuto__titolo {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
}

.aiuto__testo {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.aiuto__testo--nota {
  font-size: 13px;
  color: var(--ink-3);
}

.aiuto__frase {
  margin: 0 0 5px;
  padding: 8px 12px;
  border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink);
}

.aiuto__scala {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 10px 0 12px;
}

.aiuto__grado {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* Il campione di colore vero, non una descrizione a parole: la scala si
   capisce guardandola tutta insieme, non leggendo sei aggettivi. */
.aiuto__pezzo {
  flex: none;
  width: 30px;
  height: 22px;
  border-radius: 8px;
  background: var(--im-lontano);
}

.aiuto__pezzo[data-im='ritardo'] { background: var(--im-ritardo); }
.aiuto__pezzo[data-im='ora'] { background: var(--im-ora); }
.aiuto__pezzo[data-im='oggi'] { background: var(--im-oggi); }
.aiuto__pezzo[data-im='domani'] { background: var(--im-domani); }
.aiuto__pezzo[data-im='settimana'] { background: var(--im-settimana); }

.aiuto__grado-nome {
  font-weight: 500;
}

.aiuto__grado-nota {
  color: var(--ink-3);
  font-size: 12.5px;
}

/* Le quattro andature, con la lettera com'è davvero sul quadratino: due
   colonne, perché quattro voci in fila diventano una lista da scorrere. */
.aiuto__ritmi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin: 10px 0 12px;
}

.aiuto__ritmo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}

.aiuto__lettera {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------ Scelte in linea ------------------------------ */

/* Al posto di <select>, che su Android apre un elenco grigio di sistema con
   un'altra faccia piantata in mezzo all'app. */
.scelta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 15px;
  text-align: left;
}

.scelta__freccia {
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.scelta__freccia svg {
  width: 18px;
  height: 18px;
}

.scelta[aria-expanded='true'] .scelta__freccia {
  transform: rotate(180deg);
}

.scelta__elenco {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.scelta__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  font-size: 15px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.scelta__voce:last-child {
  border-bottom: none;
}

.scelta__voce--on {
  color: var(--gold-ink);
  font-weight: 600;
  background: var(--gold-tint);
}

.scelta__segno {
  display: grid;
  place-items: center;
  color: var(--gold-ink);
}

.scelta__segno svg {
  width: 17px;
  height: 17px;
}

/* Il contatore delle ripetizioni: più e meno, senza tastiera. */
.conta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.conta__tasto {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.conta__tasto:active {
  transform: scale(0.92);
}

.conta__numero {
  min-width: 34px;
  text-align: center;
  font-size: 21px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.conta__parola {
  flex: 1;
  color: var(--ink-3);
  font-size: 14px;
}

/* Tre voci, una sola accesa: si vedono tutte le possibilità insieme, che con
   un menù a tendina non succede. */
.setting--colonna {
  display: block;
}

/*
 * Il selettore dell'aspetto, da bordo a bordo.
 *
 * Prima si stringeva sul suo contenuto e restava appeso a destra, con un
 * vuoto a sinistra che non voleva dire niente. Adesso occupa tutta la riga e
 * si divide in tre — ma non in tre parti uguali: «Come il telefono» vale il
 * doppio di «Chiaro» e «Scuro», perché è lungo il doppio. A parti uguali
 * andava a capo o rimpiccioliva il carattere di tutte e tre per colpa di una
 * sola; con il 2-1-1 le tre scritte respirano allo stesso modo.
 */
.segmenti {
  display: grid;
  width: 100%;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.segmenti__voce {
  min-width: 0;
  padding: 10px 4px;
  border-radius: 12px;
  /* Le tre voci stanno su una riga sola: "Come il telefono" spezzato in due
     righe alzava il segmento e disallineava tutto il blocco. */
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease;
}

.segmenti__voce--on {
  background: var(--ink);
  color: var(--bg);
  font-weight: 650;
}

/* ------------------------------ Calendario ------------------------------ */

/* Il mese tutto insieme. Al posto di una ruota, perché di un giorno interessa
   la forma — che sabato è due caselle più in là, che la settimana prossima è
   la riga sotto — e una ruota quella forma la nasconde. */
.cal {
  margin-top: 14px;
  padding: 12px 10px 10px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.cal__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cal__mese {
  font-family: var(--serif);
  font-size: 16.5px;
  text-transform: capitalize;
}

.cal__freccia {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.cal__freccia svg {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
}

.cal__freccia--avanti svg {
  transform: rotate(-90deg);
}

.cal__freccia:disabled {
  opacity: 0.3;
}

.cal__freccia:not(:disabled):active {
  transform: scale(0.92);
}

.cal__iniziali,
.cal__griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal__iniziali {
  margin-bottom: 4px;
}

.cal__iniziali span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.cal__giorno {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease, transform 0.12s ease;
}

.cal__giorno:not(:disabled):active {
  transform: scale(0.9);
}

/* Il passato resta visibile ma spento: la forma del mese si legge tutta, e si
   capisce dove si è dentro la settimana. */
.cal__giorno:disabled {
  color: var(--ink-3);
  opacity: 0.38;
}

.cal__giorno[data-oggi='true'] {
  box-shadow: inset 0 0 0 1.5px var(--gold);
  color: var(--gold-ink);
  font-weight: 650;
}

.cal__giorno[data-scelto='true'] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  box-shadow: none;
}

/* ------------------------------ Guida ------------------------------ */

/* Un libretto, non un manuale: indice di capitoli, e dentro ogni capitolo si
   può girare pagina senza tornare indietro. La misura del testo resta stretta
   apposta — righe lunghe si perdono, e questa è l'unica parte dell'app che si
   legge davvero riga per riga. */
.guida__occhiello {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 6px 0 18px;
}

.guida__indice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guida__voce {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background 0.15s ease, transform 0.15s ease;
}

.guida__voce:active {
  transform: scale(0.985);
}

/* Il numero è informazione, non decorazione: i capitoli vanno letti in
   quest'ordine, e chi salta il terzo sa di aver saltato qualcosa. */
.guida__numero {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.guida__voce-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.guida__voce-titolo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.guida__voce-sommario {
  font-size: 12.5px;
  color: var(--ink-3);
}

.guida__freccia {
  flex: none;
  color: var(--ink-3);
  transform: rotate(-90deg);
  display: grid;
  place-items: center;
}

.guida__freccia svg {
  width: 18px;
  height: 18px;
}

.guida__indietro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.guida__indietro-segno {
  display: grid;
  place-items: center;
  transform: rotate(90deg);
}

.guida__indietro-segno svg {
  width: 15px;
  height: 15px;
}

.guida__p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 62ch;
}

.guida__p strong {
  color: var(--ink);
  font-weight: 650;
}

.guida__parte {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 24px 0 9px;
  letter-spacing: -0.005em;
}

.guida__nota {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  max-width: 60ch;
}

.guida__frasi {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 16px;
}

.guida__passi {
  margin: 4px 0 16px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.guida__passi li {
  margin-bottom: 8px;
  padding-left: 3px;
}

.guida__passi li::marker {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--gold-ink);
}

/* Le sezioni della lista, in fila come si susseguono sullo schermo. */
.guida__sezioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 16px;
}

.guida__sezione {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* I disegni con sotto la parola che li accende: è la cosa che si capisce
   guardandola, e spiegarla a parole richiederebbe un paragrafo. */
.guida__segni {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
  margin: 6px 0 16px;
}

.guida__segno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.guida__segno .card__tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.guida__segno .card__tile svg {
  width: 20px;
  height: 20px;
}

.guida__segno-nome {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

.guida__filo {
  margin: 4px 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.guida__card {
  margin: 8px 0 16px;
  pointer-events: none;
}

.guida__card .card {
  box-shadow: var(--shadow-1);
}

.guida__card .card__main {
  cursor: default;
}

/* La notifica finta: si disegna come la vede il telefono, striscia scura con
   i due tasti dentro. Descriverla a parole non basta a chi non sa cos'è. */
.guida__notifica {
  margin: 6px 0 16px;
  padding: 13px 15px 11px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}

.guida__notifica-titolo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.guida__notifica-corpo {
  margin: 2px 0 10px;
  font-size: 14px;
  color: var(--ink-2);
}

.guida__notifica-tasti {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.guida__notifica-tasti span {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
}

/* I quattro tasti come si vedono aprendo una card, ma spenti: qui si
   guardano, non si toccano. */
.guida__tasti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 6px 0 16px;
  pointer-events: none;
}

/* ------------------------------ Ordine della lista ------------------------------ */

/* Due modi di guardare la stessa lista, sopra la lista.
   Non sta nelle impostazioni perché si cambia dieci volte al giorno: una cosa
   che si cambia spesso non si va a cercare dietro un ingranaggio. */
.ordine {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.ordine__voce {
  flex: 1;
  padding: 9px 6px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease;
}

.ordine__voce--on {
  background: var(--ink);
  color: var(--bg);
  font-weight: 650;
}

/* ------------------------------ Archivio ------------------------------ */

/* Le tre pastiglie del filtro. Il numero non è decorazione: dice in anticipo
   se vale la pena toccare, e una voce a zero si vede spenta. */
.filtro {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}

.filtro__voce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.filtro__voce--on {
  background: var(--ink);
  border-color: transparent;
  color: var(--bg);
  font-weight: 600;
}

.filtro__quanti {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}

.filtro__voce:disabled {
  opacity: 0.4;
}

/* Il riquadro grande che delimita tutto l'archivio, e dentro i riquadri dei
   periodi. La stessa forma delle impostazioni: quando una schermata ha già
   una grammatica che funziona, la seconda non se ne inventa un'altra. */
.archivio {
  padding: 4px 12px 14px;
  border-radius: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.archivio__titolo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 16px 4px 7px;
}

.archivio__blocco {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Dentro il riquadro le card perdono il proprio riquadro: due contorni uno
   dentro l'altro sono rumore. Restano separate da una riga sottile, come le
   righe delle impostazioni. */
.archivio__blocco .card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

.archivio__blocco .card:last-child {
  border-bottom: none;
}

.archivio__blocco .card::before,
.archivio__blocco .card::after {
  display: none;
}

/* L'alone, dove un'ombra non ci starebbe.
   Dentro il riquadro le righe sono a filo una sull'altra: un'ombra sotto una
   riga la copre quella dopo, e non si vede più niente. Il colore allora entra
   NELLA riga invece di starle sotto — una velatura che nasce a sinistra, dove
   sta il quadratino con la spunta, e si spegne prima di metà. Da lontano
   resta un alone verde o rosso; da vicino non c'è nessuna striscia da
   leggere, che è quello che serve a una lista di quaranta righe. */
.archivio__blocco .card--done,
.archivio__blocco .card--cancelled {
  background-image: radial-gradient(
    130% 165% at 0% 50%,
    color-mix(in oklab, var(--alone) 30%, transparent),
    color-mix(in oklab, var(--alone) 9%, transparent) 52%,
    transparent 78%
  );
}

.archivio__vuoto {
  margin: 18px 4px;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}


/* ------------------------------ Sezioni pieghevoli ------------------------------ */

/* Il titolo di una sezione che si può piegare diventa un tasto. Il numero
   resta scritto anche da chiusa: è quello che rende la piega innocua — una
   sezione chiusa senza numero nasconde qualcosa e non lo dice. */
.section__head--tocca {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: opacity 0.15s ease;
}

.section__head--tocca:active {
  opacity: 0.6;
}

.section__chevron {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-3);
  margin-left: -3px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.section__chevron svg {
  width: 16px;
  height: 16px;
}

/* Chiusa: la freccia punta a destra, come una cartella da aprire. La regola
   vale per le sezioni e per i mesi, che sono due classi diverse ma lo stesso
   gesto: si guarda l'attributo, non il nome della classe. */
[data-chiusa='true'] .section__chevron {
  transform: rotate(-90deg);
}

/* I mesi dentro "Più avanti": lo stesso filo di prima, ma toccabile. Da
   chiusi restano un indice di nomi con accanto quanto c'è dentro. */
.mesi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filo-mese--tocca {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 7px 4px;
  margin: 2px 0 0;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.filo-mese--tocca:active {
  background: var(--surface-2);
}

/* Il filo pieghevole non ha le righe ai lati: con la freccia e il numero
   diventerebbero tre cose che si contendono la stessa riga. */
.filo-mese--tocca::before,
.filo-mese--tocca::after {
  content: none;
}

.filo-mese--tocca .section__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
}

.filo-mese--tocca .section__count {
  margin-left: auto;
}

.filo-mese--tocca[data-chiusa='false'] {
  margin-bottom: 4px;
}

/* Le pastiglie del periodo sopra la lista: stessa forma di quelle dei
   conclusi, perché fanno la stessa cosa. */
.filtro--periodi {
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ------------------------- Esito e storia ------------------------- */

/* Il segno di com'è finita, appeso alla tessera.

   Serve perché l'alone da solo non basta: verde e rosso sono la coppia che
   più occhi confondono, e una lista in cui l'unica differenza fra "fatto" e
   "annullato" è quella tinta, per una persona su dodici non ha nessuna
   differenza. La spunta e la croce si vedono sempre; il colore, quando
   arriva, conferma. Nessuno dei due porta il peso da solo. */
.card__esito {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--az-testo);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Dove c'è già la lettera del ritmo, l'esito passa dall'altra parte. */
.card__esito--sinistra {
  right: auto;
  left: -5px;
}

.card__esito svg {
  width: 11px;
  height: 11px;
  stroke-width: 3.2;
}

.card--done .card__esito { background: var(--az-fatto); }
.card--cancelled .card__esito { background: var(--az-annulla); }
/* Il bollino delle eliminate: viola pieno, non smorzato come il suo alone.
   L'alone può permettersi di essere tenue perché è un fondo; il bollino è
   l'unica cosa che dice QUALE dei tre esiti è, e un segno tenue su una
   tessera chiara non lo legge nessuno. */
.card--deleted .card__esito {
  background: color-mix(in oklab, var(--goccia) 82%, var(--ink));
}

/* La tessera di un concluso resta spenta, ma prende il bordo del suo esito:
   un filo, quanto basta perché il segno non sembri appoggiato lì per caso. */
.card--done .card__tile { border-color: color-mix(in oklab, var(--az-fatto) 30%, transparent); }
.card--cancelled .card__tile { border-color: color-mix(in oklab, var(--az-annulla) 30%, transparent); }

/* Il bollino della storia: il blu dei tasti che spostano il tempo, perché di
   tempo spostato parla quasi sempre. Dentro c'è quante volte è stato toccato. */
.storia-btn {
  position: absolute;
  right: 13px;
  top: 24px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--az-rimanda) 32%, transparent);
  background: color-mix(in oklab, var(--az-rimanda) 11%, var(--surface));
  color: var(--az-rimanda);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform 0.12s ease, background 0.15s ease;
}

.storia-btn:active {
  transform: scale(0.92);
}

.storia-btn[aria-expanded='true'] {
  background: var(--az-rimanda);
  border-color: transparent;
  color: var(--az-testo);
}

/* Il bollino ruba spazio al titolo, quindi lo prende solo dove c'è. */
.card--storia .card__main {
  padding-right: 56px;
}

/* Il pannello, sotto la card. */
.storia {
  border-top: 1px solid var(--line);
  padding: 13px 16px 15px;
  background: var(--surface-2);
}

.storia__titolo {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
  margin-bottom: 9px;
}

/* Sei colonne, e una griglia SOLA per tutte le righe: pallino · quando ·
   che cosa · da · freccia · a.

   Prima ogni riga era una griglia per conto suo, e la nota era una frase —
   «di 30 min, a mer 12 ago 22:32» — che bisognava rileggere per intero per
   sapere dove il promemoria fosse finito. In colonna invece il movimento si
   vede senza leggere: si scorre la colonna del prima, si scorre quella del
   dopo, e la freccia in mezzo dice da dove a dove.

   Le larghezze le detta il contenuto più lungo di TUTTE le righe
   (`max-content`), non riga per riga: è l'unico modo perché il prima e il
   dopo di righe diverse si trovino sulla stessa verticale. */
.storia__voci {
  display: grid;
  grid-template-columns: 12px max-content 1fr;
  column-gap: 8px;
  row-gap: 3px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
}

/* Il movimento scende sotto, ma incolonnato con l'azione: due righe che si
   leggono come una. Da 560 px in su torna in linea, perché lo spazio c'è. */
.storia__movimento {
  grid-column: 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
}

.storia__movimento:empty {
  display: none;
}

@media (min-width: 560px) {
  .storia__voci {
    grid-template-columns: 12px max-content max-content 1fr;
  }
  .storia__movimento {
    grid-column: auto;
  }
}

/* Il prima e il dopo: cifre a passo fisso, così le colonne restano dritte
   anche quando cambiano i numeri. Il «prima» non va mai a capo — è quello che
   tiene in riga la freccia; il «dopo» sì, perché è l'ultima colonna e andando
   a capo non sposta niente di quello che sta prima. */
.storia__da {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}

.storia__a {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 550;
}

/* La freccia porta il colore dell'azione che l'ha fatta: blu se il tempo è
   stato spostato, ambra se è stata una modifica. È l'unico punto colorato
   della riga oltre al pallino, e dice la stessa cosa — ma dove serve, cioè
   in mezzo al movimento. */
.storia__freccia {
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
}

.storia__freccia[data-tinta='nascita'] { color: var(--gold); }
.storia__freccia[data-tinta='rimanda'] { color: var(--az-rimanda); }
.storia__freccia[data-tinta='modifica'] { color: var(--az-modifica); }
.storia__freccia[data-tinta='fatto'] { color: var(--az-fatto); }
.storia__freccia[data-tinta='annulla'] { color: var(--az-annulla); }

/* Quello che non è un orario — i campi cambiati, «dalla notifica» — sta in
   coda, più piccolo: è un'aggiunta, non una colonna. */
.storia__coda {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 12px;
}

.storia__coda::before {
  content: ' · ';
}

.storia__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  background: var(--ink-3);
}

.storia__punto[data-tinta='nascita'] { background: var(--gold); }
.storia__punto[data-tinta='rimanda'] { background: var(--az-rimanda); }
.storia__punto[data-tinta='modifica'] { background: var(--az-modifica); }
.storia__punto[data-tinta='fatto'] { background: var(--az-fatto); }
.storia__punto[data-tinta='annulla'] { background: var(--az-annulla); }

/* Rimandare e spostare hanno lo stesso blu perché sono la stessa famiglia,
   ma non sono la stessa cosa: pieno chi ha ceduto di dieci minuti, vuoto chi
   ha deciso un altro giorno. */
.storia__punto--vuoto {
  background: transparent;
  border: 2px solid var(--az-rimanda);
}

.storia__quando {
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* La parola dell'azione: è la sola cosa in grassetto di tutta la riga, e sta
   nella sua colonna. Il grassetto qui non decora — dice dove guardare per
   primo scorrendo l'elenco in verticale. */
.storia__azione {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.storia__nota {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}



/* ------------------------------ Il gloss di casa ------------------------------ */

/* Una ricetta sola, presa dai pulsanti del gestionale Zenith, dove esiste già:

     linear-gradient(150deg, chiaro, il colore 62%)
     inset 0 1.5px 0 rgba(255,255,255,.30)
     0 6px 20px rgba(viola, .5)

   Tre ingredienti, e ognuno fa una cosa precisa. La diagonale è la LUCE: cade
   da sopra a sinistra come cade sempre in questa app — è la stessa direzione
   del velo sulle card, 150° invece di 168° perché su una superficie piccola e
   piena la luce si vede meglio se taglia più netta. Il filo bianco sul bordo
   alto è lo SPESSORE: un pixel e mezzo, e il pulsante smette di essere un
   rettangolo colorato e diventa una cosa che sporge. L'alone sotto è il PESO:
   dice che sta sopra la pagina, non dentro.

   Si mette solo dove il pulsante è pieno di colore suo. Sui pulsanti vuoti —
   i fantasma, le pastiglie chiare — il gloss non ha niente da illuminare e
   diventa una macchia grigia. */

:root {
  --luce-alta: rgba(255, 255, 255, 0.26);
  --luce-filo: rgba(255, 255, 255, 0.34);
}

/* Al buio la stessa luce accecherebbe: le superfici sono scure e un velo
   bianco al 26% sopra un viola scuro fa una patina lattiginosa. Si dimezza. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --luce-alta: rgba(255, 255, 255, 0.14);
    --luce-filo: rgba(255, 255, 255, 0.2);
  }
}

:root[data-theme='dark'] {
  --luce-alta: rgba(255, 255, 255, 0.14);
  --luce-filo: rgba(255, 255, 255, 0.2);
}

/* I quattro tasti della card, e i due dell'archivio. Il colore resta il loro:
   il gloss ci si posa sopra senza cambiarlo. */
.action--done,
.action--snooze,
.action--edit,
.action--cancel,
.action--restore {
  background-image: linear-gradient(150deg, var(--luce-alta), transparent 62%);
  box-shadow: inset 0 1.5px 0 var(--luce-filo), 0 4px 12px -5px rgba(0, 0, 0, 0.4);
}

.action--done:active,
.action--snooze:active,
.action--edit:active,
.action--cancel:active,
.action--restore:active {
  /* Premuto, la luce si spegne e il filo va sotto: il pulsante affonda invece
     di rimpicciolirsi soltanto. */
  background-image: linear-gradient(150deg, transparent, transparent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);
}

/* Il microfono: è il pulsante più grande dell'app e quello che si guarda
   sempre. Qui la diagonale del gestionale la prende in pieno.

   Le due sfumature vanno scritte INSIEME, non una sotto l'altra in due
   regole: il fondo del microfono è già una sfumatura, e una seconda regola
   che dice solo `background-image` non ci si posa sopra — la sostituisce, e
   il viola sparisce lasciando un pulsante nero. (Successo, visto in una
   schermata, corretto.) Qui la luce sta sopra e il colore sotto, nello
   stesso elenco. */
.mic {
  background-image:
    linear-gradient(150deg, var(--luce-alta), transparent 62%),
    linear-gradient(160deg, var(--gold-2), var(--gold));
  box-shadow: var(--shadow-gold), inset 0 1.5px 0 var(--luce-filo);
}

.mic:active {
  box-shadow: var(--shadow-1), inset 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* La goccia dei consigli: stessa famiglia, taglia più piccola — e stesso
   accorgimento, perché anche il suo fondo è una sfumatura. */
.goccia {
  background-image:
    linear-gradient(150deg, var(--luce-alta), transparent 62%),
    linear-gradient(160deg, var(--gold-2), var(--gold));
  box-shadow: var(--shadow-gold), inset 0 1px 0 var(--luce-filo);
}

/* Il tasto pieno dei pannelli — «Salva», «Sì, sposta» — e le pastiglie scure
   che segnano la scelta fatta: pieni di colore, quindi prendono la luce. */
.btn--primary,
.ordine__voce--on,
.filtro__voce--on {
  background-image: linear-gradient(150deg, var(--luce-alta), transparent 62%);
  box-shadow: inset 0 1.5px 0 var(--luce-filo), 0 4px 12px -6px rgba(0, 0, 0, 0.4);
}

.btn--primary:active {
  background-image: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.24);
}

/* La pastiglia d'oro — quella che invita ad attivare le notifiche — è l'unico
   chip pieno di marchio, e va con gli altri. */
.chip--gold {
  background-image: linear-gradient(150deg, var(--luce-alta), transparent 62%);
  box-shadow: inset 0 1px 0 var(--luce-filo);
}

/* La legenda della storia, dentro il manuale: tre colonne che cominciano
   sempre nello stesso punto, come le righe della storia vera. */
.guida__legenda {
  display: grid;
  grid-template-columns: 12px max-content 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: baseline;
  margin: 12px 0 16px;
  font-size: 14.5px;
}

.guida__legenda-riga {
  display: contents;
}

.guida__legenda-nome {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.guida__legenda-nota {
  color: var(--ink-2);
}

/* ------------------------------ Il riquadro del periodo ------------------------------ */

/* Le gocce di un periodo stanno in un riquadro solo, con la temperatura del
   più urgente che contiene. Dentro, le schede perdono il proprio riquadro e
   diventano righe: due contorni uno dentro l'altro sono rumore, e la stessa
   forma la usano già le impostazioni e l'archivio.

   Perché l'alone è salito qui. Le sezioni SONO i livelli di imminenza, quindi
   l'alone che ogni scheda si portava addosso ripeteva quello del suo vicino:
   tre schede vicine facevano tre aloni uguali e il colore diventava una
   nebbia. Detto una volta sola sul riquadro, si legge. */
.periodo {
  position: relative;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-1), 0 14px 34px -16px color-mix(in oklab, var(--alone) 72%, transparent);
}

.periodo[data-im='ritardo'] { --alone: var(--im-ritardo); }
.periodo[data-im='ora'] { --alone: var(--im-ora); }
.periodo[data-im='oggi'] { --alone: var(--im-oggi); }
.periodo[data-im='domani'] { --alone: var(--im-domani); }
.periodo[data-im='settimana'] { --alone: var(--im-settimana); }
.periodo[data-im='lontano'] { --alone: var(--im-lontano); }
.periodo[data-im='nessuna'] { --alone: transparent; box-shadow: var(--shadow-1); }

/* Il filo: sta sempre nello stesso punto, quindi si legge anche senza
   distinguere le tinte. È il solo segnale della coppia che non dipende dal
   colore per esistere. */
.periodo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--alone);
  z-index: 2;
}

/* Una velatura che nasce dall'angolo del filo e si spegne subito: lega il
   filo al riquadro invece di lasciarlo appiccicato al bordo. */
.periodo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 130% at 0% 0%, color-mix(in oklab, var(--alone) 12%, transparent), transparent 58%);
}

.periodo .card-list {
  gap: 0;
}

.periodo .card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

.periodo .card:last-child {
  border-bottom: none;
}

/* Il filo occupa i primi quattro pixel: il contenuto si sposta per non
   finirci sotto. */
.periodo .card__main {
  padding-left: 20px;
}

.periodo .card__actions,
.periodo .storia {
  padding-left: 20px;
}

/* Dentro il riquadro l'alone della singola scheda non serve più — lo dice il
   riquadro — ma il ritardo resta un'eccezione: quello è di UNA riga, non del
   gruppo, e va detto dove sta. */
.periodo .card--due::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 4px;
  width: 3px;
  background: var(--im-ritardo);
}

/* ------------------------------------------------------------------ *
 * Il giro guidato
 *
 * Il buco non è un ritaglio vero: è un rettangolo trasparente con
 * un'ombra enorme tutt'intorno. Costa un elemento invece di una maschera
 * SVG, e si anima da solo passando da un bersaglio all'altro.
 * ------------------------------------------------------------------ */

.giro {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.giro__buco {
  position: absolute;
  box-shadow:
    0 0 0 9999px rgba(10, 7, 13, 0.82),
    0 0 0 2px color-mix(in oklab, var(--goccia) 70%, #ffffff),
    0 0 30px 5px color-mix(in oklab, var(--goccia) 45%, transparent);
  transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
  pointer-events: none;
}

.giro__scheda {
  position: absolute;
  left: 16px;
  right: 16px;
  background: var(--surface-2, var(--surface));
  border-radius: 22px;
  padding: 20px 22px 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
  transition: top 0.28s ease;
}

.giro__conta {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--goccia);
  margin-bottom: 6px;
}

.giro__titolo {
  font-family: var(--serif, Georgia, serif);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 8px;
}

.giro__testo {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted, var(--ink));
}

.giro__piede {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.giro__salta {
  font-size: 15px;
  color: var(--muted, var(--ink));
  padding: 6px 2px;
}

.giro__pallini {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.giro__pallino {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  transition: width 0.2s ease, background 0.2s ease;
}

.giro__pallino--ora {
  width: 18px;
  background: var(--goccia);
}

/*
 * Il tasto del giro ha una classe sua e NON riusa `.btn--primary`.
 * Riusandola, un velo che sta sopra tutta l'app rispondeva a un selettore
 * comunissimo: qualunque codice — o prova — che cercasse «il tasto
 * principale» trovava quello del giro, che nel frattempo si stava spostando
 * da un bersaglio all'altro. Un pezzo che copre lo schermo non deve
 * presentarsi con il nome di quello che copre.
 */
.giro__avanti {
  flex: 0 0 auto;
  padding: 12px 24px;
  border-radius: 17px;
  font-size: 15.5px;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.12s ease;
}

.giro__avanti:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .giro__buco,
  .giro__scheda,
  .giro__pallino {
    transition: none;
  }
}

/* Il bollino delle gocce del primo avvio: si legge, non si confonde con la
   scala dell'imminenza — è neutro apposta, perché non dice niente sul quando. */
.tag--esempio {
  border-style: dashed;
  color: color-mix(in oklab, var(--goccia) 78%, var(--ink));
  border-color: color-mix(in oklab, var(--goccia) 42%, transparent);
  background: color-mix(in oklab, var(--goccia) 9%, transparent);
  font-weight: 650;
}

/* Nel menù del giro, quanti passi ha ogni parte: un numero piccolo accanto al
   nome, così si sa prima se sono due minuti o dieci. */
.btn__quanti {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.6;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

/* Le voci di un menù non sono azioni.
   Il primo disegno le faceva blu come Rimanda, e il blu nell'app vuole già
   dire «sposta nel tempo»: un colore che significa una cosa precisa, usato
   dove non significa niente, smette di significare anche dove serve. */
.btn--scelta {
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  border-color: var(--linea, rgba(128, 128, 128, 0.22));
}

/* Il tasto che cancella, dentro una riga delle impostazioni. Stesso rosso di
   Annulla: in mezzo a sei tasti neutri, l'unico che non si può disfare non
   deve somigliare agli altri. */
.chip--pericolo {
  color: color-mix(in oklab, var(--az-annulla) 86%, var(--ink));
  background: color-mix(in oklab, var(--az-annulla) 11%, var(--surface));
  border-color: color-mix(in oklab, var(--az-annulla) 26%, transparent);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * La selezione multipla
 * ------------------------------------------------------------------ */

/* Mentre si sceglie, le card si stringono un poco e fanno posto al segno:
   è il modo più corto per dire «adesso questa lista si comporta in un altro
   modo» senza scriverlo da nessuna parte. */
.card--sceglibile .card__main {
  padding-left: 46px;
}

.card--sceglibile .card__main::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--ink) 26%, transparent);
  background: var(--surface);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.card--scelta .card__main::before {
  background: var(--goccia);
  border-color: var(--goccia);
}

/* La spunta dentro il cerchio, disegnata con due lati di un quadrato ruotato:
   costa niente e non ha bisogno di un'altra icona da tenere allineata. */
.card--scelta .card__main::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.card--scelta {
  box-shadow: var(--shadow-1), 0 0 0 2px var(--goccia);
}

/* La barra dei comandi, appoggiata sopra la dock. */
.scelte {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.45);
}

.scelte__conta {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scelte .chip {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .card--sceglibile .card__main::before {
    transition: none;
  }
}