/* Regia — lo stile. Il comportamento lo da' apple-design, i numeri li da' questo :root.
   Cinque testi, cinque spazi, tre raggi: un numero nuovo non si inventa.
   Niente font dal web: l'app deve aprirsi in aereo, e il font di sistema e' gia' tarato. */

:root {
  color-scheme: light dark;

  /* fondo e superfici: la gerarchia di iOS, fondo grigio e carte bianche */
  --fondo: #F2F2F7;
  --carta: #FFFFFF;
  --carta-2: #F7F7FA;
  --riga: rgba(60, 60, 67, 0.12);
  --inchiostro: #1C1C1E;
  --muto: #6C6C70;
  --accento: #2445D6;
  --su-accento: #FFFFFF;
  --rosso: #C2342B;
  --verde: #1E7A4C;
  --vetro: rgba(242, 242, 247, 0.72);

  /* le aree: gli stessi colori del pannello, Alessandro li riconosce a colpo d'occhio */
  --a-synmir: #7A3FC4; --a-omicsdesk: #0F8A80; --a-labsdesk: #C46A12; --a-universita: #2F5DB8;
  --a-salute: #C23B5E; --a-personale: #5E7A3A; --a-viaggi: #1C8BB8; --a-soldi: #A88412;

  /* cinque testi: tracking stretto quando cresce, aperto quando e' piccolo */
  --t-grande: 700 2.125rem/1.08 system-ui;
  --t-titolo: 600 1.5rem/1.2 system-ui;
  --t-corpo: 400 1.0625rem/1.45 system-ui;
  --t-piccolo: 400 0.9375rem/1.4 system-ui;
  --t-etichetta: 600 0.75rem/1.2 system-ui;

  /* cinque spazi, tre raggi */
  --s1: 4px; --s2: 8px; --s3: 14px; --s4: 20px; --s5: 32px;
  --r1: 10px; --r2: 16px; --r3: 24px;

  --alto: env(safe-area-inset-top, 0px);
  --basso: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --carta: #1C1C1E;
    --carta-2: #2C2C2E;
    --riga: rgba(84, 84, 88, 0.45);
    --inchiostro: #F2F2F7;
    --muto: #98989F;
    --accento: #7D95FF;
    --su-accento: #0B1020;
    --rosso: #FF7A6E;
    --verde: #5CCB8F;
    --vetro: rgba(0, 0, 0, 0.72);
    --a-synmir: #B58BF0; --a-omicsdesk: #4FD1C5; --a-labsdesk: #F2A15A; --a-universita: #7FA6F5;
    --a-salute: #F27A9A; --a-personale: #A6C77A; --a-viaggi: #6CC6EC; --a-soldi: #E3C25A;
  }
}

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

/* `hidden` deve vincere su qualunque display: senza questa riga la porta resta sopra l'app. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: var(--t-corpo);
  letter-spacing: 0;
  overscroll-behavior-y: none;
}

/* ---- la porta ---- */
.porta { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--s4); background: var(--fondo); z-index: 10; }
.porta-dentro { width: min(380px, 100%); display: flex; flex-direction: column; gap: var(--s3); }
.porta input {
  font: var(--t-corpo); padding: var(--s3); border-radius: var(--r1);
  border: 1px solid var(--riga); background: var(--carta); color: var(--inchiostro);
}

/* ---- testata: titolo grande come le app di sistema ---- */
.testata {
  position: sticky; top: 0; z-index: 5;
  padding: calc(var(--alto) + var(--s3)) var(--s4) var(--s2);
  background: var(--vetro);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.testata-riga { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.titolo-grande { font: var(--t-grande); letter-spacing: -0.022em; margin: 0; }
.conto { font: var(--t-titolo); font-variant-numeric: tabular-nums; color: var(--muto); letter-spacing: -0.01em; }

/* segmented control */
.viste { display: grid; grid-auto-flow: column; gap: 2px; margin-top: var(--s3);
  background: var(--carta-2); border-radius: var(--r1); padding: 2px; }
.viste button {
  appearance: none; border: 0; background: transparent; color: var(--muto);
  font: var(--t-piccolo); font-weight: 600; padding: 9px 4px; min-height: 36px;
  border-radius: 8px; cursor: pointer; transition: color 120ms ease;
}
.viste button[aria-selected="true"] { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.viste button:active { transform: scale(.98); }

/* ---- corpo ---- */
.corpo {
  padding: var(--s3) var(--s4) calc(var(--basso) + 140px);
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s3);
}

/* ---- la carta: una domanda per schermata ---- */
.carta {
  background: var(--carta); border-radius: var(--r3); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: 0 12px 32px -22px rgba(0,0,0,.45);
  touch-action: pan-y; will-change: transform;
}
.area { display: flex; align-items: center; gap: var(--s2); font: var(--t-etichetta);
  letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--muto)); }
.area .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muto)); }
.area .urgente { margin-left: auto; color: var(--rosso); }
.vuole { font: var(--t-titolo); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.chi { font: var(--t-piccolo); color: var(--muto); margin: calc(-1 * var(--s2)) 0 0; }
.carta textarea {
  width: 100%; min-height: 128px; resize: vertical; font: var(--t-corpo);
  color: var(--inchiostro); background: var(--carta-2); border: 1px solid transparent;
  border-radius: var(--r1); padding: var(--s3);
}
.carta textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

/* ---- tasti: 44px, risposta al tocco e non al rilascio ---- */
.tasti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tasto {
  appearance: none; border: 0; border-radius: var(--r1); min-height: 48px; padding: 0 var(--s3);
  font: var(--t-corpo); font-weight: 600; cursor: pointer;
  background: var(--carta-2); color: var(--inchiostro);
  transition: transform 100ms ease-out, background 120ms ease;
}
.tasto:active { transform: scale(.97); }
.tasto.pieno { background: var(--accento); color: var(--su-accento); }
.tasto.largo { grid-column: 1 / -1; }
.tasto.piano { background: transparent; color: var(--muto); min-height: 44px; font-weight: 500; }
.tasto.rosso { color: var(--rosso); }
.tondo {
  appearance: none; border: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--carta-2); color: var(--inchiostro); font-size: 1.125rem; cursor: pointer;
  transition: transform 100ms ease-out;
}
.tondo:active { transform: scale(.94); }
.tondo.pieno { background: var(--accento); color: var(--su-accento); }

/* i segni che compaiono mentre si trascina: dicono dove sta andando la carta */
.pista { position: relative; }
.segno {
  position: absolute; top: 50%; transform: translateY(-50%); opacity: 0;
  font: var(--t-etichetta); letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s2) var(--s3); border-radius: 99px; pointer-events: none;
}
.segno.si { left: var(--s2); background: var(--verde); color: #fff; }
.segno.poi { right: var(--s2); background: var(--muto); color: var(--fondo); }

/* ---- liste raggruppate ---- */
.gruppo { background: var(--carta); border-radius: var(--r2); overflow: hidden; }
.gruppo h2 { font: var(--t-etichetta); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muto); margin: 0; padding: var(--s3) var(--s4) var(--s1); }
.voce {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit; font: var(--t-corpo);
  padding: var(--s3) var(--s4); min-height: 48px; cursor: pointer;
  border-top: 1px solid var(--riga);
}
.voce:first-of-type { border-top: 0; }
.voce:active { background: var(--carta-2); }
.voce .punto { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--c, var(--muto)); flex: 0 0 auto; }
.voce .quando { margin-left: auto; padding-top: 2px; color: var(--muto); font: var(--t-piccolo); font-variant-numeric: tabular-nums; }
.voce p { margin: 0; }
.voce small { display: block; color: var(--muto); font: var(--t-piccolo); }

.vuoto { text-align: center; color: var(--muto); padding: var(--s5) var(--s4); }
.vuoto b { display: block; color: var(--inchiostro); font: var(--t-titolo); margin-bottom: var(--s2); }

/* ---- barra in basso: il pollice sta qui ---- */
.barra-basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: var(--s2) var(--s4) calc(var(--basso) + var(--s2));
  background: var(--vetro);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--riga);
}
.dire { display: flex; gap: var(--s2); max-width: 560px; margin: 0 auto; }
.dire input {
  flex: 1; min-width: 0; font: var(--t-corpo); padding: 0 var(--s3); min-height: 44px;
  border-radius: 22px; border: 1px solid var(--riga); background: var(--carta); color: var(--inchiostro);
}
.dire input:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.stato-riga { font: var(--t-piccolo); color: var(--muto); text-align: center; margin: var(--s2) 0 0; }
.stato-riga.tardi { color: var(--rosso); font-weight: 600; }

/* ---- brindisi: la conferma che non chiede niente ---- */
.brindisi {
  position: fixed; left: 50%; bottom: calc(var(--basso) + 104px); transform: translateX(-50%);
  background: var(--inchiostro); color: var(--fondo); font: var(--t-piccolo); font-weight: 600;
  padding: var(--s2) var(--s4); border-radius: 99px; z-index: 9;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}

.errore { color: var(--rosso); font: var(--t-piccolo); margin: 0; }
.muto { color: var(--muto); font: var(--t-piccolo); margin: 0; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---- le tre preferenze che non si discutono ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 120ms !important; }
  .tasto:active, .tondo:active, .viste button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .testata, .barra-basso { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .carta, .gruppo { border: 1px solid var(--inchiostro); }
  .muto, .chi, .voce small { color: var(--inchiostro); }
}