/* Generato da knowledge/design/treniamo-mobile.json — non modificare a mano.
   Il foglio APPLICA i token, non li elenca: è la differenza fra un design
   dichiarato e un design servito. */
@font-face { font-family: 'Geist'; src: url('/vendor/fonts/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/vendor/fonts/Geist-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/vendor/fonts/Geist-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/vendor/fonts/Geist-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/vendor/fonts/GeistMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/vendor/fonts/GeistMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --base: #0a0e13;
  --body: #e6e2d9;
  --brand: #f4a828;
  --card: #15191e;
  --delay: #e77863;
  --heading: #ffffff;
  --map-bg: #0f1419;
  --meta: #8a8580;
  --ontime: #7ed4a0;
  --sub: #aaaaaa;
  --train-high-speed: #c96442;
  --train-intercity: #2d5a87;
  --train-regional: #666;
  --radius-chip: 3px;
  --radius-cta: 10px;
  --radius-icon-button: 8px;
  --radius-panel: 14px;
  --radius-pill: 99px;
  --radius-sheet: 22px;
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --rule: rgba(255,255,255,.12);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--base);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--heading); font-weight: 700; letter-spacing: -.02em; margin: .6em 0 .3em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }
p { line-height: 1.55; }
a { color: var(--brand); }
main { max-width: 960px; margin: 0 auto; padding: 1.1rem 1.1rem 3rem; }
header {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  color: var(--heading);
  padding: .8rem 1.1rem;
  display: flex; gap: 1.1rem; align-items: baseline; flex-wrap: wrap;
}
header a { color: var(--heading); text-decoration: none; }
header .logo { font-weight: 700; font-size: 1.15rem; }
header .logo span, header .logo b { color: var(--brand); }
/* I bersagli da toccare stanno a 24px di altezza minima (WCAG 2.2, 2.5.8).
   Trovato dalla sonda del browser, due volte: la prima senza padding (17px), la
   seconda con `line-height:24px` che misurava 23.x e restava sotto. Un valore
   che sta ESATTAMENTE sulla soglia la sfiora e la manca per un arrotondamento
   sub-pixel: qui si sta comodamente sopra, con del padding vero. */
a { text-decoration-thickness: from-font; }
header a, nav a, footer a, main a, td a, li a {
  display: inline-block;
  min-height: 28px;
  padding-block: .35rem;
  line-height: 1.35;
}
nav a { font-size: .88rem; font-weight: 600; opacity: .82; margin-right: .9rem; text-decoration: none; }
nav a:hover, footer a:hover { opacity: 1; color: var(--brand); }
button, input[type=submit], [role=button] { min-height: 32px; }
.sub, .meta { color: var(--meta); font-size: .92rem; }
table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius-panel);
  overflow: hidden; font-size: .92rem;
}
th {
  background: rgba(255,255,255,.04); color: var(--meta); text-align: left;
  padding: .55rem .7rem; font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
}
td { padding: .55rem .7rem; border-top: 1px solid var(--rule); }
td a { color: var(--heading); text-decoration: none; font-weight: 600; }
td a:hover { color: var(--brand); }
.mono, code, time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input, select, textarea, button {
  font-family: var(--font-sans); font-size: 1rem; padding: .65rem .8rem;
  color: var(--heading); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius-cta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
button { background: var(--brand); color: var(--base); font-weight: 700; border: 0; cursor: pointer; }
footer {
  margin: 2.5rem 0 0; padding: 1.1rem; background: var(--card);
  border-top: 1px solid var(--rule); color: var(--meta);
  font-size: .8rem; text-align: center;
}
footer a { color: var(--brand); }
::selection { background: var(--brand); color: var(--base); }
.ontime { color: var(--ontime); font-weight: 600; }
.late { color: var(--delay); font-weight: 700; }
.badge { display:inline-block; background: var(--brand); color:#111; border-radius:3px; padding:.1rem .45rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }