/*
 * Lo stile di Rampallonata (@rampallonata/stile), ridotto a quello che serve qui:
 * bianco e nero, bordi e niente angoli, il rosso solo per il marchio e per gli errori.
 */
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/font/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/font/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Variable"; font-weight: 100 900; font-display: swap; src: url("/font/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --carta: #ffffff; --fondo: #f4f4f4; --filo: #e2e2e2; --linea: #111111;
  --inchiostro: #111111; --tenue: #404040; --muto: #737373; --ombra: #111111;
  --rosso: #ea162f; --male: #d0142a;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
}
/* lo scuro: grigi senza blu */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --carta: #0e0e0e; --fondo: #191919; --filo: #262626; --linea: #4a4a4a;
    --inchiostro: #ececec; --tenue: #c4c4c4; --muto: #8f8f8f; --ombra: #333333; --male: #ff5468;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--carta); color: var(--inchiostro);
  font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.4; }
:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
[hidden] { display: none !important; }

.pagina { max-width: 30rem; margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) 1rem 4rem; }
.testata { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; font-size: 0.75rem; font-weight: 600; }
.marchio { width: 0.875rem; height: 0.875rem; background: var(--rosso); }

.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.muto { color: var(--muto); }
.tenue { color: var(--tenue); }
.piccolo { font-size: 0.8125rem; min-height: 1.25rem; }
.prosa { margin: 0; line-height: 1.55; }
.titolo { margin: 0; font-family: var(--mono); text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.etichetta { display: block; font-family: var(--mono); text-transform: uppercase; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--muto); }
.numero { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.875rem; }

.riquadro { border: 1px solid var(--linea); background: var(--carta); box-shadow: 4px 4px 0 0 var(--ombra); }
.scheda { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.5rem; }

.campo {
  width: 100%; border: 1px solid var(--linea); background: var(--carta); padding: 0.5625rem 0.75rem;
  font-size: 0.9375rem; outline: none;
}
.campo:focus { border-color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
@supports (-webkit-touch-callout: none) { .campo { font-size: 16px; } }

.bottone, .bottone-muto {
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
  padding: 0.5625rem 1rem; min-height: 2.5rem; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; line-height: 1; user-select: none;
  transition: background-color 140ms, color 140ms;
}
.bottone { border-color: var(--inchiostro); background: var(--inchiostro); color: var(--carta); }
.bottone:hover:not(:disabled) { background: var(--carta); color: var(--inchiostro); }
.bottone-muto { background: none; color: var(--muto); align-self: flex-start; padding-inline: 0; }
.bottone-muto:hover { color: var(--inchiostro); }
#suona { min-width: 8rem; }

.avviso { display: flex; flex-direction: column; gap: 0.5rem; background: var(--fondo); }
.avviso strong { font-weight: 600; }
.avviso { margin: 0; border: 1px solid var(--linea); padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.avviso-male { border-color: var(--male); color: var(--male); background: color-mix(in srgb, var(--male) 8%, transparent); }

.riga { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.barra { height: 0.5rem; border: 1px solid var(--linea); background: var(--fondo); }
#avanzamento { height: 100%; width: 0; background: var(--inchiostro); }