/* ===========================================================================
   Panda EnglishTeacher — il sistema di disegno (ADR 0006)
   ---------------------------------------------------------------------------
   La tavolozza e la tipografia vengono dal pacchetto Google Stitch in
   `stitch_english_voice_chat_tutor/`. Da lì si prende il colore, il carattere e
   il linguaggio delle schede; NON si prende Tailwind da CDN (una dipendenza di
   rete a runtime per tre schermate) né le foto di volti di stock.

   I nomi vecchi (--bg, --fg, --mut, --line, --verde, --err) restano e puntano
   ai nuovi ruoli: le regole già scritte continuano a valere mentre cambia la
   pelle.
   =========================================================================== */

/* Il carattere è in casa, non su fonts.gstatic.com: l'app si usa in piedi a una
   fiera, dove la rete è quella che è. 27 KB, sottoinsieme latino, variabile.
   Plus Jakarta Sans — SIL Open Font License 1.1. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../font/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* superfici */
  --bg: #f0fcf5;
  --superficie: #ffffff;
  --superficie-bassa: #eaf7f0;
  --superficie-media: #e4f1ea;
  --superficie-alta: #deebe4;

  /* inchiostro */
  --fg: #131e1a;
  --mut: #3f4944;
  --tenue: #6f7974;

  /* linee */
  --line: #bfc9c2;
  --line-tenue: #d9e5df;

  /* il verde */
  --verde: #004331;
  --su-verde: #ffffff;
  --verde-contenitore: #0d5c46;
  --su-verde-contenitore: #8cd2b6;
  --verde-chiaro: #e4f1ea;
  --menta: #63fdbc;
  --su-menta: #00734e;

  /* stati */
  --err: #ba1a1a;
  --err-chiaro: #ffdad6;
  --su-err-chiaro: #93000a;

  --ombra: 0 1px 2px rgb(0 40 28 / .06), 0 8px 24px -16px rgb(0 40 28 / .18);
  --ombra-alta: 0 2px 6px rgb(0 40 28 / .08), 0 18px 40px -22px rgb(0 40 28 / .3);

  --raggio: .9rem;
  --raggio-grande: 1.25rem;
  --tondo: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1512;
    --superficie: #151d1a;
    --superficie-bassa: #121a17;
    --superficie-media: #1a2320;
    --superficie-alta: #202a26;

    --fg: #dfe9e3;
    --mut: #b9c9c1;
    --tenue: #8b9a93;

    --line: #2c3733;
    --line-tenue: #232d29;

    --verde: #8ed5b9;
    --su-verde: #00382a;
    --verde-contenitore: #00513d;
    --su-verde-contenitore: #aaf1d4;
    --verde-chiaro: #17241f;
    --menta: #3fdfa1;
    --su-menta: #002114;

    --err: #ffb4ab;
    --err-chiaro: #3b0907;
    --su-err-chiaro: #ffdad6;

    --ombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -16px rgb(0 0 0 / .7);
    --ombra-alta: 0 2px 6px rgb(0 0 0 / .5), 0 18px 40px -22px rgb(0 0 0 / .8);
  }
}

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

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* --- tipografia -----------------------------------------------------------
   La scala dello Stitch, ma con il primo gradino più basso: il mockup è da
   scrivania, qui si legge un telefono tenuto in mano mentre si parla. */
.display { font-size: clamp(1.9rem, 7vw, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.titolo   { font-size: 1.32rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.titolino { font-size: 1.05rem; line-height: 1.3;  font-weight: 600; letter-spacing: -.01em;  margin: 0; }
.occhiello {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin: 0;
}
.spiega { color: var(--mut); font-size: .92rem; line-height: 1.5; margin: 0; }
.numero { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- i pezzi ricorrenti --------------------------------------------------- */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--line-tenue);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  padding: 1.15rem;
}

.pillola {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--tondo);
  background: var(--verde-chiaro); color: var(--mut);
  font-size: .75rem; font-weight: 600; line-height: 1.2;
}
.pillola.viva { background: var(--menta); color: var(--su-menta); }
.pillola.guasta { background: var(--err-chiaro); color: var(--su-err-chiaro); }

button, .bottone {
  /* Mai la scorciatoia `font:` con `inherit` come famiglia: non è valida, il
     browser butta via TUTTA la regola e i bottoni tornano ad Arial 13px. È
     successo, ed è rimasto in produzione per settimane senza che si vedesse. */
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  border: 0; border-radius: var(--raggio);
  padding: 1rem 1.2rem;
  background: var(--verde); color: var(--su-verde);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
button:active, .bottone:active { transform: scale(.985); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.contorno {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line);
}
button.piatto {
  background: transparent; color: var(--mut);
  padding: .7rem .9rem; font-weight: 600;
}
button.tondo { border-radius: var(--tondo); }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* Il monogramma sostituisce le foto di volti del mockup: si carica sempre,
   funziona senza rete, e non è la faccia di nessuno. */
.monogramma {
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--tondo);
  display: grid; place-items: center;
  background: var(--verde-contenitore); color: var(--su-verde-contenitore);
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
}

.riga-tra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

hr.sep { border: 0; border-top: 1px solid var(--line-tenue); margin: 1.4rem 0; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}