:root {
  --blue: #0055CC;
  --red: #CC3333;
  --green: #1A9933;
  --bg: #ffffff;
  --panel: #f7f7f9;
  --border: #cfcfd6;
  --warn-bg: #fdf3d7;
  --warn-border: #e0b93c;
  --warn-text: #6b4e05;
}

* { box-sizing: border-box; }

/* Il valore di specificita' di regole come "#loader { display:flex }" batte la
   regola UA "[hidden]{display:none}": senza questa riga l'attributo hidden non
   nasconderebbe piu' loader/app. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #1a1a1a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

/* ---- Loader ---- */
#loader {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #d5d5dd;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-note { color: #777; font-size: 12px; }

/* ---- App layout ---- */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px 48px;
}
h1 {
  font-size: 18px;
  margin: 4px 0 12px;
}

/* ---- Intestazione: titolo a sinistra, strumenti a destra ---- */
.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.toolbar button {
  padding: 5px 10px;
  font-size: 13px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.row-title { font-weight: 700; }
.scale-row label { cursor: pointer; }

.dyn-label {
  min-width: 340px;
  font-weight: 700;
}
.controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.blue { color: var(--blue); }
.red { color: var(--red); }
.green { color: var(--green); }

input[type="range"] {
  width: 360px;
  max-width: 60vw;
  accent-color: #444;
}

input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 14px;
}
input.tiny { width: 44px; }
input.small { width: 62px; }
input.red-border { border-color: var(--red); }
input.green-border { border-color: var(--green); }
input:disabled { background: #ececf0; color: #999; }
/* Casella il cui contenuto e' stato rifiutato: il testo sbagliato resta a
   schermo (per poterlo correggere) ma e' evidenziato. */
input.invalid {
  border-color: var(--warn-border);
  border-width: 2px;
  background: var(--warn-bg);
}

/* ---- Plot ---- */
.plot-wrap {
  text-align: center;
  margin: 8px 0 4px;
}
#plot-img {
  width: 100%;
  max-width: 1100px;
  height: auto;
}

/* ---- Likelihood + CPT ---- */
.combo {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 14px;
}
fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--panel);
}
legend { font-weight: 700; padding: 0 6px; }

.lik-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.lik-line label { min-width: 92px; }
.odds-lbl { margin-left: 12px; }

table.cpt { border-collapse: collapse; }
table.cpt th, table.cpt td {
  border: 1px solid var(--border);
  padding: 6px 12px;
  text-align: center;
  min-width: 64px;
}
table.cpt thead th { background: #ececf0; }
table.cpt tbody td {
  background: #ffffff;
  font-variant-numeric: tabular-nums;
}

.btn-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
button:hover { background: #f0f0f4; }
button:active { background: #e4e4ea; }

/* ---- Numero di versione, ancorato all'angolo in basso a destra della
   viewport (fixed, non della pagina), come nella versione desktop ---- */
.app-version {
  position: fixed;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: #999999;
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 640px) {
  .dyn-label { min-width: 100%; }
  input[type="range"] { max-width: 100%; width: 100%; }
}

/* ---- Avviso non bloccante (errori di input, guasti recuperabili) ---- */
.error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--warn-border);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn-text);
}
.error-dismiss {
  margin-left: auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}
.error-dismiss:hover { background: rgba(0, 0, 0, 0.06); }

/* ---- Riquadro di errore ancorato alla casella incriminata ----
   position: fixed, con left/top calcolati da app_web.py sulle coordinate della
   casella: non entra nel flusso, quindi non riorganizza il layout a flexbox
   mentre l'utente sta digitando. */
.field-error {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  max-width: 24em;
  padding: 6px 10px;
  border: 1px solid var(--warn-border);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

/* ---- Errore di avvio, mostrato dentro il loader ---- */
.boot-error-text {
  max-width: 46em;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 10px 12px;
  text-align: left;
}

/* ---- Finestra di dialogo modale (lingua / guida / documentazione) ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.modal {
  max-width: 34em;
  width: 100%;
  padding: 18px 22px;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.modal h2 {
  margin: 0 0 10px;
  font-size: 16px;
}
.modal p {
  margin: 0 0 16px;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* ---- Pagine di documentazione (guida.html): prosa, non interfaccia ----
   Riusano la stessa tavolozza e lo stesso font dell'app per continuita', ma
   con una colonna di testo stretta e leggibile. */
.doc-page {
  max-width: 46em;
  margin: 0 auto;
  padding: 20px 18px 60px;
  line-height: 1.55;
}
.doc-page h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.doc-page h2 {
  font-size: 16px;
  margin: 28px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--blue);
}
.doc-page p { margin: 0 0 12px; }
.doc-page ul { margin: 0 0 12px; padding-left: 22px; }
.doc-page li { margin-bottom: 6px; }
.doc-lead {
  font-size: 15px;
  padding: 10px 14px;
  border-left: 4px solid var(--blue);
  background: var(--panel);
  border-radius: 0 4px 4px 0;
}
.doc-page code {
  padding: 1px 4px;
  border-radius: 3px;
  background: #eeeef3;
  font-size: 0.92em;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
}
.doc-table th, .doc-table td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.doc-table thead th { background: #ececf0; }
.doc-back { font-size: 13px; }
.doc-note {
  font-size: 13px;
  color: #555;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: 4px;
}

/* Le figure della guida sono schermate dell'app: vanno ridimensionate con la
   colonna di testo, non con la larghezza in pixel che Word ci scriveva dentro. */
.doc-page figure {
  margin: 0 0 16px;
}
.doc-page img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.doc-page figcaption {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

/* ---- Pulsante della lingua: mostra entrambe le lingue, con quella attiva in
   evidenza, cosi' si vede a colpo d'occhio in che lingua si sta lavorando e
   quale si otterrebbe con un clic. ---- */
.lang-btn { font-variant-numeric: tabular-nums; }
.lang-btn .lang-active {
  font-weight: 700;
  color: var(--blue);
}
.lang-btn .lang-inactive { color: #9a9aa2; }
.lang-btn .lang-sep {
  margin: 0 4px;
  color: var(--border);
}