/* ==========================================================================
   BASE — FONDAMENTA CONDIVISE DA TUTTI GLI STRUMENTI
   --------------------------------------------------------------------------
   Va incluso in ogni pagina PRIMA del <style> locale, così che le regole
   specifiche del singolo strumento possano sovrascrivere queste:

     <link rel="stylesheet" href="../assets/nav.css">
     <link rel="stylesheet" href="../assets/base.css">
     <style> ...solo ciò che è specifico di questo strumento... </style>

   Contiene: palette, tipografia, header, layout workspace, form, referto,
   modale tutorial, regole responsive e regole di stampa.

   Personalizzazione per strumento — bastano le variabili, senza riscrivere
   le regole:
     .workspace { --panel-w: 420px; }        larghezza colonna sinistra
     .report-container { --report-max: 780px; }

   NOTA sugli scostamenti rispetto agli stili originali. Sono deliberati e
   valgono per tutti gli strumenti:
     - i campi di input erano stilati in due modi diversi (4 tool in sans su
       fondo --paper, 2 in mono su fondo bianco con anello di focus):
       unificati sulla seconda variante, più leggibile e con focus visibile;
     - testo secondario (.hint, .unit, .report-citation) da #7a7870/#888 a
       --muted: i primi stavano sotto 4.5:1 di contrasto;
     - scala tipografica minima alzata: label, .hint, .section-label,
       .centile-table th e .report-card erano fra 10.4px e 13.9px.
   ========================================================================== */

/* ── FONT ─────────────────────────────────────────────────────────────────
   IBM Plex servito da assets/fonts/, non più via @import da Google Fonts.
   Serve perché il sito funzioni davvero senza rete (e toglie una richiesta
   a terzi in serie prima del primo disegno).

   IBM Plex Sans diritto è un font variabile: lo stesso file copre 300, 400 e
   600, per questo tre @font-face puntano allo stesso woff2 — è esattamente
   ciò che faceva Google Fonts.

   Per aggiornare i font: riscaricare da fonts.gstatic.com i subset latin e
   latin-ext e sostituire i file in assets/fonts/.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-italic-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── SCALA TIPOGRAFICA ───────────────────────────────────────────────────
     Sei gradini invece dei ventinove che si erano accumulati fra base.css e
     gli <style> dei singoli strumenti (si arrivava a 0.6rem, cioè 9.6px).
     Il pavimento è 12px ed è riservato alle sole etichette mono maiuscole,
     che a parità di corpo leggono più grandi; il testo che si legge davvero
     — referto, hint, tabelle — sta a 14px o 16px.

     Tutto in rem: così la voce "Dimensioni carattere" di Android scala
     l'interfaccia invece di ignorarla. Per la stessa ragione non vanno
     reintrodotte misure in px. */
  --fs-xs: 0.75rem;      /* 12px — solo etichette mono maiuscole */
  --fs-sm: 0.875rem;     /* 14px — testo secondario, hint, tabelle */
  --fs-md: 1rem;         /* 16px — corpo e referto */
  --fs-lg: 1.125rem;     /* 18px */
  --fs-xl: 1.375rem;     /* 22px */
  --fs-2xl: 1.75rem;     /* 28px */
  --fs-3xl: 2.25rem;     /* 36px — valori numerici in evidenza */

  /* ── SPAZIATURE ──────────────────────────────────────────────────────────
     Griglia da 4px. Prima i margini andavano a mano libera (.3 / .35 / .6 /
     .7 / .8 / 1.1 / 1.4 / 1.8 / 2.2rem): differenze da due pixel che non si
     leggono come gerarchia, si leggono come sciatteria. */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */

  /* ── SOGLIA DI TOCCO ─────────────────────────────────────────────────────
     48px, non 44: 44 è il numero di Apple, Material chiede 48dp ed è quello
     che il pre-launch report di Play misura su ogni build caricata. */
  --touch: 48px;

  /* ── BLU DEL MARCHIO ─────────────────────────────────────────────────────
     Tre gradini della stessa famiglia (tinta 205–218°), non tre blu scelti
     in momenti diversi: --brand-900 è la navbar, --brand-700 l'interfaccia,
     --brand-500 serve dove il fondo è scuro e il 700 sparirebbe.
     Il gradiente ciano→viola del logo resta all'icona, allo splash e ai
     materiali dello store: nell'interfaccia non entra. */
  --brand-900: #14181f;
  --brand-700: #1b4f72;
  --brand-500: #2b6cb0;

  /* Dice al browser che entrambi i temi esistono: senza, i controlli di
     sistema (scrollbar, date picker, caret) restano chiari su fondo scuro. */
  color-scheme: light dark;

  --ink: #1a1c22;
  --paper: #f5f4f0;
  --card: #ffffff;
  --rule: #d0cfc8;

  /* --accent fa da superficie (header, barra risultato, chip attivo) e
     --accent-ink da testo su fondo chiaro. In chiaro coincidono; al buio no,
     perché un blu che regge come superficie sparisce come testo. */
  --accent: var(--brand-700);
  --accent-ink: var(--brand-700);
  --accent-light: #d6e8f5;
  --mid-border: #e8d96e;
  --warn: #8b2500;
  --warn-bg: #fdecea;
  --ok: #1a4731;
  --ok-bg: #e8f5ee;
  --mid: #4a3800;
  --mid-bg: #fdf8e1;
  --neutral-bg: #eef3f8;
  --neutral: #1b4f72;

  /* testo secondario — contrasto >= 4.5:1 sia su --paper che su --card */
  --muted: #6b6960;

  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;

  /* dimensioni sovrascrivibili dal singolo strumento.
     --report-max in ch e non in px: 720px a 16px facevano circa 90 caratteri
     per riga, contro i 45–75 in cui l'occhio ritrova da solo l'inizio della
     riga successiva. In ch la misura resta giusta anche se l'utente ingrandisce
     il carattere di sistema. */
  --panel-w: 400px;
  --report-max: 62ch;

  /* spazio riservato alla barra risultato sticky; lo imposta mobile-result.js */
  --resultbar-h: 0px;
}

/* ── TEMA SCURO ────────────────────────────────────────────────────────────
   Su Android il tema scuro di sistema è il default per moltissimi, e questi
   strumenti si usano in stanza di refertazione con le luci basse: un'app che
   lì dentro si apre bianca abbaglia.

   Si ridefiniscono solo le variabili — è la ragione per cui la palette stava
   in custom properties fin dall'inizio. Nessuna regola viene riscritta.

   Due criteri nel scegliere i valori:
   - il fondo non è nero ma blu molto scuro (#10141a): il nero pieno su OLED
     fa "smear" quando si scorre, e stacca troppo dal testo;
   - le superfici colorate (--accent, i badge verdi e blu) restano quelle del
     tema chiaro, perché erano già scure e reggono il bianco sopra. A cambiare
     sono i colori usati come TESTO, che vanno schiariti.
   ------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e9ee;
    --paper: #10141a;
    --card: #191e27;
    --rule: #303845;
    --muted: #a2a9b5;

    /* superficie invariata, testo schiarito */
    --accent: var(--brand-700);
    --accent-ink: #8ec5f0;
    --accent-light: #22384c;

    --warn: #ff9e88;
    --warn-bg: #381812;
    --ok: #7ed3a6;
    --ok-bg: #12291d;
    --mid: #e8c766;
    --mid-bg: #2b2410;
    --mid-border: #5c4d1a;
    --neutral: #8ec5f0;
    --neutral-bg: #17232f;
  }

  /* Il referto si stampa sempre su carta bianca: al buio resta una superficie
     scura a schermo, ma le regole di stampa più in basso lo riportano a nero
     su bianco. */
  .report-card,
  input[type="number"],
  input[type="text"],
  input[type="date"],
  select,
  textarea {
    background: var(--card);
    color: var(--ink);
  }

  label { color: var(--ink); }

  /* le ombre nere su fondo scuro non si vedono: serve un bordo */
  .tutorial-modal { border: 1px solid var(--rule); }
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}


/* ── HEADER ────────────────────────────────────────────────────────────── */

header {
  background: var(--accent);
  color: #fff;
  padding: var(--sp-6) var(--sp-8) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

header h1 {
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

header span {
  font-size: var(--fs-sm);
  font-style: italic;
  opacity: .8;
}

.btn-info {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: var(--mono); font-size: var(--fs-md); font-weight: 700;
  cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: background .15s, border-color .15s;
}

.btn-info:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.8); }

/* ── COLLEGAMENTO A FONTE ESTERNA ─────────────────────────────────────────
   Sostituisce i badge immagine di shields.io: niente richiesta a un servizio
   terzo (che offline lasciava un'immagine rotta), scala col testo invece di
   essere un PNG ad altezza fissa, e si stampa.
   ------------------------------------------------------------------------ */

.badge-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  border: 1px solid var(--accent-light);
  background: var(--neutral-bg);
  color: var(--accent-ink);
  transition: background .15s, border-color .15s;
}

.badge-link:hover { background: var(--accent-light); }

/* per etichette che sono nomi propri o percorsi: "gmadevs/neurotools" non va
   maiuscolizzato */
.badge-link.is-name {
  text-transform: none;
  letter-spacing: .02em;
}

.badge-link::after {
  content: '↗';
  font-size: .9em;
  opacity: .7;
}

/* nell'header il fondo è blu pieno */
header .badge-link {
  margin-left: .4rem;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

header .badge-link:hover { background: rgba(255,255,255,.3); }

/* ── LAYOUT ────────────────────────────────────────────────────────────── */

.workspace {
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  min-height: calc(100vh - 68px);
}

.input-panel {
  background: var(--card);
  border-right: 1px solid var(--rule);
  padding: var(--sp-8) var(--sp-6);
  overflow-y: auto;
}

.output-panel {
  background: var(--paper);
  padding: var(--sp-8) var(--sp-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.report-panel {
  background: var(--paper);
  padding: var(--sp-8) var(--sp-10);
  overflow-y: auto;
}

/* ── TIPOGRAFIA DI SEZIONE ─────────────────────────────────────────────── */

/* Il maiuscolo spaziato resta qui, sulle etichette di sezione di primo
   livello: è l'unico posto dove serve a segnare uno stacco. Altrove è stato
   tolto — a 11–12px in mono spaziato il maiuscolo diventa texture, e si legge
   misurabilmente più lento del minuscolo. */
.section-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1.5px solid var(--accent-light);
}

.section-block { margin-bottom: var(--sp-6); }

/* ── FORM ──────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: var(--sp-4); }

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  color: var(--ink);
}

/* Gruppi di campi che vanno letti insieme (settimane + giorni, destro +
   sinistro): serve un fieldset perché il gruppo abbia un nome anche per uno
   screen reader, ma senza il bordo che il browser gli mette di suo. La legend
   ha lo stesso aspetto di una label. */
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-4);
  min-width: 0;
}

legend {
  display: block;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  color: var(--ink);
}

/* Le hint spiegano come si esegue la misura: è il testo che si legge in piedi
   accanto all'ecografo, non una nota a piè di pagina. Da 12.5px a 14px. */
.hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--sp-1);
  line-height: 1.5;
}

input[type="number"],
input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono);
  /* max(16px, 1rem) e non 16px secchi: sotto i 16px iOS ingrandisce la pagina
     a ogni focus, ma un valore fisso in px faceva sì che alzando le
     "Dimensioni carattere" di Android crescessero le etichette e il numero
     dentro il campo restasse fermo. Così vale entrambe le cose. */
  font-size: max(16px, var(--fs-md));
  background: var(--card);
  color: var(--ink);
  transition: border-color .15s;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* le caselle erano 15px: sotto la soglia utilizzabile al tocco */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent-ink);
  flex-shrink: 0;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field-grid.full { grid-template-columns: 1fr; }

/* Coppie di campi corti che si leggono come un valore solo (settimane +
   giorni, destro + sinistro): restano affiancate a ogni larghezza, perché
   impilate occupano il doppio dello scroll senza guadagnare leggibilità.
   Vedi la regola nel media query a 900px, che le impilerebbe. */
.field-grid.compact { grid-template-columns: 1fr 1fr; }

.unit {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.hidden { display: none !important; }

/* ── REFERTO ───────────────────────────────────────────────────────────── */

.report-container { max-width: var(--report-max); margin: 0 auto; }

/* Il referto è il testo che si legge davvero: 16px pieni, non 14.7. */
.report-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  font-size: var(--fs-md);
  line-height: 1.65;
}

.report-placeholder p {
  font-size: var(--fs-sm);
  font-style: italic;
  max-width: 40ch;
  color: var(--muted);
}

.report-section-title {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: var(--sp-6) 0 var(--sp-3);
}

.report-citation {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
}

/* Avvertenza clinica in coda al referto. Compare a schermo e in stampa; il
   testo copiato per il PACS resta invariato, perché quello confluisce in un
   referto firmato dal medico. */
.disclaimer-note {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--mid-bg);
  border: 1px solid var(--mid-border);
  border-left-width: 3px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--mid);
}

.disclaimer-note strong { font-weight: 600; }

/* le tabelle del referto sono generate via JS: senza questo contenitore
   sfondano lateralmente su schermi stretti */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Intestazioni in minuscolo: sono nomi di misura, non etichette di sezione,
   e in maiuscolo spaziato a 11.5px erano la riga meno leggibile del referto. */
.centile-table th {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: left;
  padding: var(--sp-2);
  border-bottom: 1.5px solid var(--rule);
  color: var(--muted);
}

/* ── MODALE TUTORIAL ───────────────────────────────────────────────────── */

.tutorial-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tutorial-overlay.open { display: flex; }

.tutorial-modal {
  background: var(--card);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tutorial-body {
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  min-height: 200px;
  flex: 1;
  overflow-y: auto;
}

/* ── BARRA RISULTATO STICKY (mobile, inserita da mobile-result.js) ─────── */

.result-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 250;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--accent);
  color: #fff;
  border: none;
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  transform: translateY(110%);
  transition: transform .22s ease;
}

.result-bar.visible { transform: translateY(0); }

.result-bar-text { flex: 1; min-width: 0; }

/* Era 0.62rem, cioè 9.9px: la misura più piccola di tutto il progetto,
   su un elemento che compare solo su telefono. */
.result-bar-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

.result-bar-value {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-bar-cta {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  min-height: 40px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────
   Un solo sistema di breakpoint per tutti gli strumenti, al posto dei
   quattro precedenti (780 / 800 / 860 / 640px):
     <= 900px  il workspace passa a colonna singola
     <= 640px  telefono: tocco, tipografia, barra risultato
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .input-panel {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }

  .output-panel { border-top: 1px solid var(--rule); }

  .field-grid { grid-template-columns: 1fr; }
  .field-grid.compact { grid-template-columns: 1fr 1fr; }

  /* titolo e pulsante "?" sulla prima riga, sottotitolo a capo sulla seconda:
     senza l'ordinamento esplicito il margin-left:auto del pulsante lo manda
     da solo su una riga vuota */
  header {
    padding: var(--sp-4) var(--sp-5);
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
  }

  header h1 { order: 1; }
  .btn-info { order: 2; margin-left: auto; }
  header span { order: 3; flex-basis: 100%; }

  .report-panel { padding: var(--sp-6) var(--sp-5); }
  .report-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* ── SOGLIA DI TOCCO ───────────────────────────────────────────────────────
   La condizione è il tipo di puntatore, non la larghezza dello schermo: un
   tablet in orizzontale supera i 640px ma si usa col dito lo stesso, e con la
   sola regola sulla larghezza restava con i bersagli da mouse. La max-width
   resta in OR per i browser che non riportano pointer.
   ------------------------------------------------------------------------ */

@media (pointer: coarse), (max-width: 640px) {
  button,
  .btn-info,
  .btn-copy, .btn-print, .btn-generate,
  .mode-btn, .tab-btn,
  .btn, .btn-guide, .btn-today, .btn-feedback, .cat-btn {
    min-height: var(--touch);
  }

  /* Il chip verso PubMed è un link vero e va preso col pollice, ma sta dentro
     una riga di testo: alzarne l'altezza reale sfondava il sottotitolo. L'area
     sensibile si estende con uno pseudo-elemento, che non occupa spazio nel
     flusso — il chip resta della sua misura, il bersaglio arriva a 48px. */
  .badge-link {
    position: relative;
    padding: var(--sp-1) var(--sp-2);
  }

  .badge-link::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: var(--touch);
    transform: translateY(-50%);
  }

  .btn-info { width: var(--touch); height: var(--touch); font-size: var(--fs-md); }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (max-width: 640px) {
  .input-panel,
  .output-panel,
  .report-panel { padding: var(--sp-6) var(--sp-4); }

  /* lascia spazio alla barra risultato in fondo alla pagina */
  body { padding-bottom: var(--resultbar-h); }

  .result-bar { display: flex; }

  .report-card { padding: var(--sp-5) var(--sp-4); }
}

/* ── STAMPA ────────────────────────────────────────────────────────────── */

@media print {
  header, .input-panel, .report-actions, .site-nav, .result-bar {
    display: none !important;
  }
  .tutorial-overlay, .guide-overlay { display: none !important; }
  .workspace { display: block; }
  .report-panel, .output-panel { padding: 0; }
  .report-card { border: none; box-shadow: none; }
  body { padding-bottom: 0; background: var(--card); }
}

/* ── SAFE AREA ─────────────────────────────────────────────────────────────
   Con viewport-fit=cover nel meta viewport la pagina si estende sotto la
   tacca e sotto la barra a gesti, e env(safe-area-inset-*) smette di valere
   zero — prima il padding-bottom della barra risultato calcolava una difesa
   che non entrava mai in funzione.

   Il blocco sta in fondo di proposito: deve vincere sulle shorthand padding
   dei media query qui sopra, che altrimenti lo azzererebbero.

   max() e non somma: dove la tacca non c'e' l'inset vale 0 e resta il padding
   normale, dove c'e' vince il piu' grande dei due.
   ------------------------------------------------------------------------ */

header,
.input-panel,
.output-panel,
.report-panel,
.result-bar {
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

@media (min-width: 641px) {
  .input-panel,
  .output-panel,
  .report-panel {
    padding-left: max(var(--sp-6), env(safe-area-inset-left));
    padding-right: max(var(--sp-6), env(safe-area-inset-right));
  }

  header {
    padding-left: max(var(--sp-8), env(safe-area-inset-left));
    padding-right: max(var(--sp-8), env(safe-area-inset-right));
  }
}

@media print {
  header,
  .input-panel,
  .output-panel,
  .report-panel { padding-left: 0; padding-right: 0; }
}

/* ── MOVIMENTO RIDOTTO ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}