@charset "utf-8";
/* ==========================================================================
   SISTEMA — token del design
   --------------------------------------------------------------------------
   Qui c'era una palette CHIARA (--paper:#fff, --soft:#f5f7fa) mai usata: il
   sito è scuro da tre generazioni di CSS e quei valori erano completamente
   inerti, ma restavano il primo blocco che chiunque leggeva aprendo il file.

   Le custom property NON cascano per posizione: vince l'ultima definizione
   per tutto il documento. Le palette intermedie erano quindi già morte.
   La palette viva resta definita più sotto (--rm-bg e compagnia); qui stanno
   le SCALE, che prima non esistevano affatto.

   Perché servono: nel file convivevano 49 raggi di bordo diversi (7, 9, 11,
   13px accanto a 12px: nessuno li sceglie apposta), 52 transizioni distinte
   su 53 dichiarazioni e 30 ombre su 42. È ciò che l'occhio legge come
   "sciatto" senza saper dire dove: bordi che non si allineano e animazioni
   senza ritmo comune.

   REGOLA: da qui in avanti niente valori grezzi per raggi, transizioni e
   ombre. Se serve un gradino che non c'è, si aggiunge QUI.
   ========================================================================== */
:root {
    /* Raggi: quattro gradini e la pillola. */
    --r-sm: 8px;      /* controlli piccoli: badge, chip, pillole */
    --r-md: 12px;     /* bottoni, campi, celle */
    --r-lg: 16px;     /* pannelli e schede */
    --r-xl: 22px;     /* contenitori grandi, hero */
    --r-pill: 999px;  /* elementi a capsula */

    /* Ritmo delle animazioni: tre velocità, una sola curva. */
    --t-fast: 120ms;  /* reazione al tocco (premuto, hover di un bottone) */
    --t-base: 180ms;  /* cambi di stato normali */
    --t-slow: 280ms;  /* entrate e uscite di pannelli */
    /* Curva del movimento. ERA `var(--ease-out)`, cioè riferiva sé stessa:
       una variabile autoreferenziale è INVALIDA, quindi tutte le transizioni
       che la usavano ricadevano sull'easing predefinito senza dirlo. Insieme a
       --rm-ease e --ease, che si appoggiano a questa, erano una ventina di
       animazioni con la curva sbagliata. */
    --ease-out: cubic-bezier(.22, .61, .36, 1);

    /* Verde: tre gradini con ruoli distinti.
       Il sito li usava già tutti e tre, ma senza nomi e con dieci sfumature
       inventate rule per rule (var(--g-soft), var(--g-soft), var(--g-soft), var(--g-soft)...).
         strong  stato premuto / hover dell'azione primaria
         base    azione: bottoni, accento, elementi cliccabili
         soft    DATO positivo: numeri, badge di stato, indicatori
       Su fondo scuro il gradino chiaro è quello che rende i numeri leggibili
       da lontano: è il motivo per cui esiste. */
    --g-strong: #16A34A;
    --g-base: #22C55E;
    --g-soft: #4ADE80;
    --g-soft-bg: rgba(var(--g-soft-rgb), .16);   /* fondo tenue dei badge positivi */

    /* Elevazione a tre livelli.
       Su fondo scuro un'ombra nera su nero non separa niente: è il motivo per
       cui qui ne convivevano trenta senza che nessuna facesse il suo lavoro.
       Il livello lo dà una LINEA CHIARA sul bordo superiore, come luce che
       colpisce lo spigolo; l'ombra serve solo a chi galleggia davvero. */
    --sh-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .30);
    --sh-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 24px rgba(0, 0, 0, .35);
    --sh-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 44px rgba(0, 0, 0, .45);

    /* Spaziature, sulla stessa griglia da 4px del resto. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ===== I BINARI: le misure che tutte le pagine devono rispettare =====
     Ricavate misurando il sito, non inventate: sono i valori che cinque
     pagine su dieci gia' condividevano. Le altre cinque divergevano, e
     divergevano ognuna a modo suo.

     --gutter  distanza fra il bordo di <main> e la colonna di contenuto.
               Serve a chi vuole far "respirare" un pannello oltre la
               colonna (un'immagine di testata) SENZA spostare il testo:
               margin-inline:calc(var(--gutter)*-1) + padding-inline:var(--gutter).
     --ritmo   stacco fra due sezioni di primo livello.
     --testata-gap  distanza fra la testata e il primo blocco.

     Nota sul MECCANISMO, non solo sul valore: il ritmo va espresso con i
     MARGINI, non col padding. Due blocchi con padding 50 danno 100px di
     stacco, due con margine 26 ne danno 26 perche' i margini collassano:
     era questa la ragione dei salti da 113px accanto a salti da 2px.  */
  --gutter: 12px;
  --ritmo: var(--sp-7);
  --testata-gap: var(--sp-6);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--soft);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: var(--rail);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav-search input {
    min-width: 230px;
}

.hero {
    min-height: 520px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background-image: linear-gradient(90deg, rgba(9, 18, 26, .86), rgba(9, 18, 26, .54)), var(--hero-image);
    background-size: cover;
    background-position: center;
}

.hero h1 {
    max-width: 760px;
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .86);
    font-size: 1.08rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: .7rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #f6d46b;
}

.search-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    max-width: 760px;
}

.scoreboard-panel,
.side-panel,
.data-panel,
.detail-panel,
.auth-panel,
.setup-panel,
.train-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(25, 32, 42, .06);
}

.score-row,
.mini-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
}

.mini-row {
    grid-template-columns: 1fr auto;
}

.score-row:first-of-type,
.mini-row:first-of-type {
    border-top: 0;
}

.score-row span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--soft);
    font-weight: 800;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: .9rem;
}

.section-heading h2,
.side-panel h2,
.data-panel h2 {
    margin: 0;
    font-size: 1.18rem;
}

.train-card {
    padding: 1rem;
    height: 100%;
}

.train-code {
    font-weight: 900;
    color: var(--danger);
}

.train-card h3 {
    font-size: 1.15rem;
    margin: .8rem 0 .2rem;
}

.train-card p,
td span {
    color: var(--muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.metric-grid span {
    display: block;
    padding: .8rem;
    background: var(--soft);
    border-radius: var(--r-sm);
    color: var(--muted);
}

.metric-grid strong {
    display: block;
    color: var(--ink);
    font-size: 1.2rem;
}

.detail-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.side-panel,
.data-panel,
.detail-panel,
.auth-panel,
.setup-panel {
    padding: 1.1rem;
}

.detail-panel h1,
.setup-panel h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0;
}

.table {
    --bs-table-bg: transparent;
}

.ad-placeholder {
    min-height: 92px;
    display: grid;
    place-items: center;
    margin: 1rem 0;
    border: 1px dashed #aab3bd;
    border-radius: var(--r-sm);
    background: var(--rm-surface);
    color: var(--muted);
    font-size: .9rem;
}

.stacked-form {
    display: grid;
    gap: .85rem;
}

.stacked-form label {
    display: grid;
    gap: .35rem;
    font-weight: 700;
}

.auth-panel {
    max-width: 440px;
}

.page-title {
    font-weight: 850;
    letter-spacing: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: flex-end;
}

.small-link {
    font-size: .92rem;
    font-weight: 700;
}

.history-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gate-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* L'IMMAGINE STA SUL NOSTRO SERVER, non su Unsplash.
       Questa e' la pagina di manutenzione e di "coming soon": non e' codice
       morto, e' codice che dorme, e quando si sveglia la vedono TUTTI i
       visitatori. Con la fotografia esterna ogni browser contattava
       images.unsplash.com — un terzo che vede indirizzo IP e agente utente —
       proprio sulla pagina dove il sito e' giu' e il banner dei cookie e'
       l'ultimo dei pensieri. In piu' era un collegamento a caldo: se quella
       foto sparisce, sparisce dalla nostra pagina.
       Visivamente CAMBIA, al contrario di quel che avevo previsto: la velatura
       e' al 92% e all'82% ma la foto si legge benissimo. Si passa da una
       locomotiva merci generica a un Frecciarossa in stazione — per un sito
       sui treni italiani e' piu' a fuoco, non un ripiego. */
    background: linear-gradient(120deg, rgba(13, 31, 42, .92), rgba(104, 20, 31, .82)), url("../img/hero-treno.webp");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.gate-panel {
    max-width: 820px;
}

.gate-panel h1 {
    max-width: 760px;
    font-size: clamp(2.3rem, 7vw, 5rem);
    line-height: 1;
    letter-spacing: 0;
}

.gate-panel p {
    max-width: 640px;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .86);
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    gap: .75rem;
    max-width: 620px;
    margin-top: 1.25rem;
}

.countdown div {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .09);
}

.countdown strong,
.countdown span {
    display: block;
}

.countdown strong {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    line-height: 1;
}

.countdown span {
    margin-top: .35rem;
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 768px) {
    .hero,
    .hero-overlay {
        min-height: 620px;
    }

    .search-card {
        grid-template-columns: 1fr;
    }

    .metric-grid,
    .detail-metrics {
        grid-template-columns: 1fr;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* =====================================================================
   Dinamiche, micro-interazioni e aggiornamenti live (2026-06)
   ===================================================================== */

:root {
    --shadow-sm: var(--sh-1);
    --shadow-md: var(--sh-2);
    --rail-grad: linear-gradient(120deg, #0b4f6c, #0a3b52);
    --ease: var(--ease-out);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Card: sollevamento all'hover */
.train-card,
.data-panel,
.side-panel {
    transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.train-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Bottoni: feedback al passaggio e al click */
.btn {
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn:active {
    transform: translateY(0) scale(.98);
}

/* Link nav con sottolineatura animata */

/* Indicatore "aggiornato" del blocco live */
.live-stamp {
    font-size: .72rem;
    color: var(--muted);
    margin-left: auto;
    margin-right: .75rem;
    white-space: nowrap;
    transition: color var(--t-slow) var(--ease);
}
.live-stamp.is-stale {
    color: var(--danger);
}
.live-stamp.pulse {
    animation: stampPulse .6s var(--ease);
}
@keyframes stampPulse {
    0% { opacity: .3; }
    100% { opacity: 1; }
}

/* Badge "live" pulsante per i treni in ritardo non finalizzati */
.badge-live {
    position: relative;
    padding-left: 1.35rem;
}
.badge-live::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 50%;
    width: .5rem;
    height: .5rem;
    margin-top: -.25rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); opacity: 1; }
    70%  { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, 0); opacity: .6; }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 1; }
}

/* Riga classifica: entrata e transizione FLIP */
.score-row {
    transition: background var(--t-slow) var(--ease);
}
.score-row.row-enter {
    animation: rowEnter .45s var(--ease);
}
@keyframes rowEnter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.score-row em {
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Card live: accento a sinistra */
.train-card.is-live {
    border-left: 3px solid var(--rail);
}

/* Hero: titolo con leggero gradiente d'accento */
.hero h1 {
    text-wrap: balance;
}

/* Spinner/skeleton leggero per i caricamenti (opzionale, usato dal JS) */

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* Rispetto delle preferenze di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .train-card,
    .btn,
    .badge-live::before,
    .live-stamp,
    .score-row {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Mobile: ritocchi mirati all'esperienza da telefono */
@media (max-width: 768px) {
    .navbar-nav .nav-link::after { display: none; }
    .live-stamp {
        width: 100%;
        margin: .25rem 0 0;
        order: 3;
    }
    .train-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Pannello "oggi in tempo reale" nella scheda treno */
.today-status {
    padding: 1rem;
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--rail);
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, rgba(11, 79, 108, .04), transparent);
}
.today-label {
    font-size: .95rem;
}
.today-grid {
    margin: 0;
}
/* IL LAMPO DI AGGIORNAMENTO, INTORNO E NON SOTTO.
   Colorava il FONDO del valore, oro al 55%: per un secondo il numero ci
   spariva dentro. Misurato sul pannello scuro, il numerone rosso scendeva a
   1,24:1 e la pastiglia «In ritardo» a 1,99:1 — illeggibili proprio
   nell'istante in cui cambiano, che è quando li vuoi leggere, ed è il
   motivo per cui il lampo esiste.
   Abbassare l'opacità non bastava: per tenere leggibile anche il numerone
   grande serviva scendere a 0,14, cioè a un lampo invisibile. Il difetto
   era nel metodo. Un anello non tocca il fondo del testo, e si vede uguale.
   L'oro ora è quello della tavolozza (è un richiamo, non uno stato: dura
   un secondo e non dice niente sul ritardo). app.js lo salta già quando il
   sistema chiede meno animazioni. */
.field-flash {
    animation: fieldFlash 1s var(--ease);
}
@keyframes fieldFlash {
    0%   { box-shadow: 0 0 0 3px rgba(var(--rm-amber-rgb), .55); }
    100% { box-shadow: 0 0 0 3px rgba(var(--rm-amber-rgb), 0); }
}
[data-field] {
    border-radius: 4px;
    transition: background var(--t-slow) var(--ease);
}

/* =====================================================================
   REDESIGN HOME + NAV + FOOTER (namespaced "rm-", convive con Bootstrap)
   ===================================================================== */
/* Palette CHIARA di prima generazione: rimossa. Ridefiniva --rm-ink, --rm-muted,
   --rm-line e compagnia con valori opposti a quelli in uso (--rm-ink era qui
   #0e1726, quasi nero; nella palette viva è #E8EDF4, quasi bianco). Essendo
   sovrascritta più sotto era già inerte: toglierla non cambia un pixel, ma
   elimina il motivo per cui in questo file una variabile non significava
   niente di stabile. --rm-ease resta definita nel blocco vivo. */
body{background:var(--rm-soft);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.rm-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* NAV */
.rm-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--rm-line)}
.rm-nav-row{display:flex;align-items:center;gap:24px;min-height:64px;flex-wrap:wrap}
.rm-brand{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.15rem;color:var(--rm-ink);text-decoration:none}
.rm-brand:hover{text-decoration:none;color:var(--rm-ink)}
.rm-dot{width:11px;height:11px;border-radius:50%;background:var(--rm-red);animation:rmPulse 1.8s infinite}
@keyframes rmPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.rm-nav-collapse{display:flex;align-items:center;gap:20px;flex:1}
.rm-links{display:flex;gap:20px;margin-left:auto}
/* NIENTE A CAPO DENTRO UNA VOCE. Con sette voci «Ritardi oggi» si
   spezzava su due righe e portava l'intera barra da 40 a 60 pixel di
   altezza: misurato a 1265px il 10/09/2026, subito dopo aver aggiunto
   «Collegamenti». Sotto i 1100 la barra passa comunque al menu compatto,
   quindi impedire la rottura non crea traboccamenti. */
.rm-links a{color:var(--rm-ink);font-weight:500;font-size:.95rem;text-decoration:none;position:relative;padding:4px 0;white-space:nowrap}
.rm-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rm-red);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--rm-ease)}
.rm-links a:hover{text-decoration:none}
.rm-links a:hover::after{transform:scaleX(1)}
.rm-nav-search{display:flex;gap:8px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:5px}
.rm-nav-search input{border:0;outline:0;font:inherit;font-size:.9rem;padding:5px 8px;background:transparent;min-width:180px}
.rm-nav-search button{border:0;background:var(--rm-deep);color:#fff;border-radius:var(--r-sm);padding:6px 12px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.rm-nav-auth{display:flex;align-items:center;gap:8px}

/* Autocomplete ricerca (dropdown suggerimenti treni/stazioni) */
.ac-box{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);box-shadow:0 16px 40px rgba(0,0,0,.28);overflow-y:auto;max-height:min(60vh,380px)}
.ac-item{display:flex;align-items:center;gap:10px;padding:9px 12px;text-decoration:none;color:var(--rm-ink);border-bottom:1px solid var(--rm-line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.is-active{background:var(--rm-surface2)}
.ac-tag{flex:0 0 auto;font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--rm-muted);background:rgba(127,127,127,.14);padding:3px 7px;border-radius:var(--r-sm);min-width:46px;text-align:center}
.ac-main{flex:1;min-width:0;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-sub{flex:0 1 auto;color:var(--rm-muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.rm-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r-md);padding:9px 16px;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;transition:transform var(--t-fast) var(--rm-ease),box-shadow var(--t-base) var(--rm-ease);font-family:inherit}
.rm-btn:hover{transform:translateY(-1px);box-shadow:var(--rm-shadow);text-decoration:none}
.rm-btn-primary{background:var(--rm-red);color:#fff}.rm-btn-primary:hover{color:#fff}
.rm-btn-ghost{background:var(--rm-surface);border:1px solid var(--rm-line);color:var(--rm-ink)}.rm-btn-ghost:hover{color:var(--rm-ink)}
.rm-link-muted{color:var(--rm-muted);font-size:.9rem;text-decoration:none}
/* Il bersaglio era 38x32: sotto i 44 px che si toccano senza sbagliare,
   ed e' la navigazione principale su telefono. Le tre barrette restano
   larghe 22 px come prima — cambia solo l'area sensibile, centrata. */
.rm-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:0;border:0;cursor:pointer;padding:8px;margin-left:auto;min-width:44px;min-height:44px}
.rm-burger span{width:22px;height:2px;background:var(--rm-deep);border-radius:2px}

/* HERO */
.rm-home h1,.rm-home h2,.rm-home h3{font-family:"Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.02em;line-height:1.06;margin:0}
.rm-hero{padding:52px 0 30px}
.rm-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.rm-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rm-rail);background:#e7f0f6;padding:6px 11px;border-radius:var(--r-pill);margin-bottom:18px}
.rm-hero-copy h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700}
.rm-hero-copy h1 em{font-style:normal;color:var(--rm-rail)}
.rm-sub{font-size:1.1rem;color:var(--rm-muted);max-width:30em;margin:16px 0 24px}

.rm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rm-chip{font-size:.85rem;color:var(--rm-muted);background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-pill);padding:6px 12px;text-decoration:none;transition:var(--t-base) var(--rm-ease)}
.rm-chip:hover{border-color:var(--rm-rail);color:var(--rm-rail);text-decoration:none}

/* TABELLONE (firma) */
.rm-board{background:var(--rm-deep);border-radius:var(--r-lg);padding:18px;box-shadow:var(--rm-shadow);position:relative;overflow:hidden}
.rm-board::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(245,195,59,.10),transparent 60%);pointer-events:none}
.rm-board-head{display:flex;align-items:center;justify-content:space-between;color:var(--rm-amber);font-family:"JetBrains Mono",monospace;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid rgba(245,195,59,.18)}
.rm-board-live{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:.72rem}
.rm-board-live i{width:7px;height:7px;border-radius:50%;background:var(--rm-green);display:inline-block;animation:rmBlink 1.6s infinite}
@keyframes rmBlink{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.rm-board-row{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none}
.rm-board-row:last-child{border-bottom:0}.rm-board-row:hover{text-decoration:none}
.rm-board-code{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--rm-amber);font-size:.9rem}
.rm-board-dest{color:#eef2f7;font-size:.92rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-board-dest small{display:block;color:#8b97ab;font-weight:400;font-size:.76rem}
.rm-delay{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.9rem;padding:3px 9px;border-radius:var(--r-sm);white-space:nowrap}
.rm-delay.ok{color:var(--g-soft);background:rgba(31,169,113,.14)}
.rm-delay.late{color:#ffb4b6;background:rgba(229,72,77,.16)}
.rm-board-empty{color:#8b97ab;font-size:.9rem;padding:18px 2px}

/* STATS */
/* auto-fit e non repeat(4): su /statistiche le voci sono CINQUE e la
   quinta ("231 soppresse") restava da sola su una seconda riga. */
.rm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px}
.rm-stat{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:18px}
.rm-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.85rem;line-height:1}
.rm-n.mono{font-family:"JetBrains Mono",monospace}
.rm-l{color:var(--rm-muted);font-size:.85rem;margin-top:6px}
.rm-l b{color:var(--rm-ink);font-weight:600}

/* SECTIONS */
.rm-block{padding:50px 0}
.rm-block-tight{padding-top:0}
.rm-sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.rm-sec-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.rm-sec-head p{color:var(--rm-muted);margin:6px 0 0}
.rm-sec-head a{color:var(--rm-rail);font-weight:600;font-size:.92rem;white-space:nowrap}

/* CARDS */
.rm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rm-card{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:22px;transition:transform var(--t-slow) var(--rm-ease),box-shadow var(--t-slow) var(--rm-ease);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--rm-ink)}
.rm-card:hover{transform:translateY(-4px);box-shadow:var(--rm-shadow);text-decoration:none;color:var(--rm-ink)}
.rm-ic{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;background:#e7f0f6;color:var(--rm-rail);font-size:1.2rem;margin-bottom:6px}
.rm-card-game .rm-ic{background:#fbf0cf;color:var(--rm-amber-dim)}
.rm-card h3{font-size:1.06rem}
.rm-card p{color:var(--rm-muted);font-size:.9rem;margin:0}

.rm-card-game{border-color:#f0d98a;background:linear-gradient(180deg,#fffdf6,#fff)}

/* LIVE GRID + PANEL */
.rm-live-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
/* UN ELEMENTO DI GRIGLIA NON SI RESTRINGE SOTTO IL PROPRIO CONTENUTO,
   a meno che non glielo si dica: il valore iniziale di min-width e'
   `auto`, non 0. Misurato il 22/08 con la colonna a 375px: il pannello
   delle categorie era largo 485px dentro una traccia da 351 e sfondava
   la pagina. Non bastava mettere la tabella in .table-responsive —
   il contenitore si allargava con lei invece di trattenerla. */
.rm-live-grid > *{min-width:0}
.rm-panel{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:20px}
.rm-panel-h{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}

/* FAQ */
.rm-faq{max-width:760px}
.rm-faq details{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:2px 18px;margin-bottom:10px}
.rm-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:"Bricolage Grotesque",sans-serif}
.rm-faq summary::-webkit-details-marker{display:none}
.rm-faq summary::after{content:"+";color:var(--rm-rail);font-size:1.3rem;transition:transform var(--t-base) var(--rm-ease)}
.rm-faq details[open] summary::after{transform:rotate(45deg)}
.rm-faq details p{color:var(--rm-muted);margin:0 0 16px;font-size:.93rem}

/* FOOTER */
.rm-footer{background:var(--rm-deep);color:#aeb9c9;padding:44px 0 26px;margin-top:36px}
.rm-foot-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
/* CINQUE FIGLI, NON QUATTRO. La griglia dichiarava `repeat(3,1fr)` — marchio
   piu' tre colonne — ma i blocchi sono cinque: marchio, Esplora, Statistiche,
   Il progetto, Gioco. «Il progetto» fu aggiunta dopo (il commento in seo.php
   la annuncia come «QUARTA COLONNA») senza aggiornare il modello, e da allora
   «Gioco» andava a capo da sola su una seconda riga, sotto il marchio, con
   tre quarti di riga vuoti. MISURATO a 1265px: footer alto 318px invece di
   ~190, e le voci di «Gioco» staccate dalle altre. */
.rm-foot-cols .rm-foot-h{color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:.95rem;margin:0 0 12px}
.rm-foot-cols a{color:#aeb9c9;display:block;padding:4px 0;font-size:.9rem;text-decoration:none}
.rm-foot-cols a:hover{color:var(--rm-amber)}
.rm-foot-cols p{font-size:.9rem;margin:0}
.rm-foot-cols .rm-foot-social{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:10px}
.rm-foot-cols .rm-foot-social a{display:inline-block}
.rm-foot-brand{color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;display:block;margin-bottom:8px}
.rm-foot-note{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:18px;font-size:.82rem;color:#7f8aa0}

/* RESPONSIVE */
@media (max-width:900px){
    .rm-hero-grid{grid-template-columns:1fr;gap:26px}
    .rm-stats{grid-template-columns:repeat(2,1fr)}
    .rm-cards{grid-template-columns:repeat(2,1fr)}
    .rm-live-grid{grid-template-columns:1fr}
    .rm-foot-cols{grid-template-columns:1fr 1fr}
    .rm-burger{display:flex}
    .rm-nav-collapse{flex-direction:column;align-items:stretch;width:100%;gap:14px;padding:14px 0;display:none}
    .rm-nav-collapse.is-open{display:flex}
    .rm-links{flex-direction:column;margin-left:0;gap:10px}
    .rm-nav-search input{min-width:0;flex:1}
    .rm-nav-auth{flex-wrap:wrap}
}
@media (max-width:560px){
    .rm-stats{grid-template-columns:1fr 1fr}
    .rm-cards{grid-template-columns:1fr}
    .rm-foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
    .rm-dot,.rm-board-live i{animation:none}
}

/* =====================================================================
   ARMONIZZAZIONE GLOBALE — porta il linguaggio "rm-" a TUTTE le pagine
   agendo sulle classi gia' esistenti (zero modifiche al PHP).
   ===================================================================== */

/* Tipografia coerente ovunque */
h1, h2, h3, h4, h5,
.page-title, .section-heading h2,
.detail-panel h1, .detail-panel h2,
.data-panel h2, .side-panel h2, .setup-panel h1 {
    font-family: "Bricolage Grotesque", Inter, sans-serif;
    letter-spacing: -.02em;
}
.page-title { font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
main.container { max-width: 1120px; }

/* Pannelli: stesso stile-card del redesign */
.detail-panel, .data-panel, .side-panel, .auth-panel,
.setup-panel, .scoreboard-panel {
    border: 1px solid var(--rm-line);
    border-radius: var(--r-lg);
    box-shadow: var(--rm-shadow);
    background: var(--rm-surface);
}
.section-heading h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.section-heading a { color: var(--rm-rail); font-weight: 600; }

/* Bottoni Bootstrap ridipinti con la palette nuova */
.btn { border-radius: var(--r-md); font-weight: 600; transition: transform var(--t-fast) var(--rm-ease), box-shadow var(--t-base) var(--rm-ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--rm-shadow); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-danger { background: var(--rm-red); border-color: var(--rm-red); }
.btn-danger:hover, .btn-danger:focus { background: var(--rm-brand-strong); border-color: var(--rm-brand-strong); }
.btn-dark { background: var(--rm-deep); border-color: var(--rm-ink); }
.btn-dark:hover, .btn-dark:focus { background: #1b2740; border-color: #1b2740; }
.btn-outline-dark { color: var(--rm-ink); border-color: var(--rm-line); }
.btn-outline-dark:hover { background: var(--rm-deep); border-color: var(--rm-ink); color: #fff; }
.btn-outline-danger { color: var(--rm-red); border-color: var(--rm-red); }
.btn-outline-danger:hover { background: var(--rm-red); border-color: var(--rm-red); }

/* Form: bordi morbidi e focus in blu ferrovia */
.form-control, .form-select {
    border-radius: var(--r-md);
    border-color: var(--rm-line);
    padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--rm-rail);
    box-shadow: 0 0 0 3px rgba(14, 79, 115, .12);
}
.form-control-lg { border-radius: var(--r-md); }
.stacked-form label { font-weight: 600; }

/* Tabelle: intestazione pulita, righe ariose */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rm-muted);
    border-bottom: 2px solid var(--rm-line);
    font-weight: 600;
}
.table tbody td { border-color: var(--rm-line); padding-top: .8rem; padding-bottom: .8rem; }
.table tbody tr { transition: background var(--t-base) var(--rm-ease); }
.table-hover tbody tr:hover, .data-panel .table tbody tr:hover { background: var(--rm-soft); }
.table a { color: var(--rm-rail); font-weight: 600; }
.train-code { color: var(--rm-red); font-family: "JetBrains Mono", monospace; }

/* Alert in stile coerente */
.alert { border-radius: var(--r-md); border: 1px solid transparent; }
.alert-success { background: #e7f7ef; color: #11623f; border-color: #b9e6cf; }
.alert-danger  { background: #fdecec; color: #a32127; border-color: #f6c6c8; }
.alert-info    { background: #e7f0f6; color: #0e4f73; border-color: #c4dcea; }

/* Chip filtro categoria (pagina /treni) */
.category-filter .btn { border-radius: var(--r-pill); }

/* History switch (scheda treno) */
.history-switch .btn { border-radius: var(--r-pill); }

/* Metric grid coerente */
.metric-grid strong { font-family: "JetBrains Mono", monospace; }

/* Search card (pagine cerca/treni): stile barra ricerca rm */
.search-card .form-control {
    border-radius: var(--r-md);
}

/* Badge: tono leggermente più morbido */
.badge { font-weight: 600; border-radius: var(--r-sm); letter-spacing: .01em; }

/* Link generici dentro il contenuto.
 *
 * `.rm-btn` E' NELL'ELENCO PERCHE' UN BOTTONE NON E' UN LINK.
 * La guardia nominava solo `.btn`, il nome vecchio: dopo la rinomina
 * ogni bottone scritto come <a> dentro <main> si prendeva il colore
 * dei link. Questo selettore pesa 0-6-1 e batte `.rm-btn.bl-btn-gold`
 * (0-2-0), quindi vinceva senza far rumore. Risultato misurato il
 * 09/09/2026 sulla home: «Vedi la classifica» azzurro su ambra
 * (rapporto 1,24) e «Registrati gratis» azzurro su verde (1,02) —
 * i due inviti all'azione principali, illeggibili. Si salvava solo
 * «Cerca», che e' un <button> e non un <a>.
 */
main a:not(.btn):not(.rm-btn):not(.bl-chip-percorso):not(.train-code):not(.rm-card):not(.nav-link):not(.adm-link):not(.adm-side-back) { color: var(--rm-rail); }

/* Spaziatura verticale tra le sezioni delle pagine interne */
main.container > .row + .row { margin-top: 1.5rem; }

/* Lista operatori / qualità dati (pagina statistiche) */
.rm-oplist { list-style: none; padding: 0; margin: 0; }
.rm-oplist li { padding: 9px 0 9px 22px; position: relative; color: var(--rm-ink); border-bottom: 1px solid var(--rm-line); }
.rm-oplist li:last-child { border-bottom: 0; }
.rm-oplist li::before { content: "→"; position: absolute; left: 0; color: var(--rm-rail); font-weight: 700; }

/* =====================================================================
   CRUSCOTTO ADMIN (statistiche private)
   ===================================================================== */
.admin-dash{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);box-shadow:var(--rm-shadow);padding:22px}
.admin-dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.admin-dash-head h2{margin:0;font-size:1.3rem}
.admin-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.admin-kpi{background:var(--rm-soft);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px}
.admin-kpi .k-n{display:block;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.5rem;line-height:1;color:var(--rm-ink)}
.admin-kpi .k-l{display:block;color:var(--rm-muted);font-size:.78rem;margin-top:6px;line-height:1.3}
.admin-kpi .k-l em{font-style:normal;color:var(--rm-green);font-weight:600}
.admin-dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.admin-card{border:1px solid var(--rm-line);border-radius:var(--r-md);padding:16px}
.admin-card h3{font-size:1rem;margin:0 0 12px;font-family:"Bricolage Grotesque",sans-serif}
.admin-job{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--rm-line);font-size:.9rem}
.admin-job:first-of-type{border-top:0}
.job-dot{width:9px;height:9px;border-radius:50%;background:#cbd3de}
.job-dot.ok{background:var(--rm-green)}
.job-dot.old{background:var(--rm-amber)}
.job-dot.run{background:var(--rm-rail);animation:rmBlink 1.2s infinite}
.job-name{color:var(--rm-ink);font-weight:500}
.job-time{color:var(--rm-muted);font-size:.82rem;font-family:"JetBrains Mono",monospace}
.job-rank{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--rm-soft);font-weight:700;font-size:.8rem}
.admin-bars{display:flex;flex-direction:column;gap:10px}
.admin-bar-row{display:grid;grid-template-columns:84px 1fr 36px;gap:10px;align-items:center;font-size:.85rem}
.bar-track{height:9px;background:var(--rm-soft);border-radius:var(--r-pill);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:var(--r-pill);transition:width .6s var(--rm-ease)}
.bar-v{text-align:right;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem}
.bar-l{color:var(--rm-muted)}
@media (max-width:900px){
    .admin-kpis{grid-template-columns:repeat(3,1fr)}
    .admin-dash-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.admin-kpis{grid-template-columns:repeat(2,1fr)}}

/* Sotto-etichetta e countdown nei job admin */
.job-name .job-sub{display:block;font-size:.72rem;color:var(--rm-muted);font-weight:400;font-family:Inter,sans-serif}
.job-next{color:var(--rm-rail);font-weight:600}
.job-next.due{color:var(--rm-green)}

/* =====================================================================
   FORM PRONOSTICO riformulato (scheda treno)
   ===================================================================== */
.rm-predict h2{font-family:"Bricolage Grotesque",sans-serif}
.rm-predict-hint{font-size:.9rem;margin-bottom:1rem}
.rm-predict-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:1rem;color:var(--rm-ink)}
.rm-predict-form .form-select{margin-top:.35rem}
.rm-predict-delays{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.5rem}
.rm-input-suffix{position:relative;display:block;margin-top:.35rem}
.rm-input-suffix input{padding-right:2.6rem}
.rm-input-suffix>span{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);color:var(--rm-muted);font-size:.82rem;font-family:"JetBrains Mono",monospace;pointer-events:none}
.rm-predict-closed{display:flex;gap:.75rem;align-items:flex-start;background:#e7f7ef;border:1px solid #b9e6cf;border-radius:var(--r-md);padding:14px}
/* LA SPUNTA ERA BIANCA SU VERDE: 2,38:1, sotto ogni soglia (misurato il
   18/09/2026 col misuratore di contrasto, glifo 16px in grassetto). Il verde
   `#2FBF71` e' chiaro, quindi sopra ci va lo scuro, non il bianco — ed e' lo
   stesso scuro che il sito usa gia' sui fondi verdi: 7,94:1. */
.rm-predict-ic{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--rm-green);color:var(--rm-on-accent);display:grid;place-items:center;font-weight:700}
.rm-predict-closed p{color:#11623f;font-size:.9rem}
@media (max-width:560px){.rm-predict-delays{grid-template-columns:1fr}}

/* Barra filtro tabelle */
.rm-filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.rm-filter-bar .form-control{max-width:420px}
.rm-filter-count{color:var(--rm-muted);font-size:.85rem;font-family:"JetBrains Mono",monospace}

/* Orari programmati nella scheda treno */
.rm-train-times{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin:-.4rem 0 1rem;font-size:.95rem}
.rm-train-times strong{font-family:"JetBrains Mono",monospace;font-size:1.05rem}
.rm-train-times .rm-times-note{font-size:.74rem;color:var(--rm-muted);text-transform:uppercase;letter-spacing:.05em}

/* Navigazione pjax: barra di avanzamento sottile + link attivo */
body.pjax-busy{cursor:progress}
body.pjax-busy::after{content:"";position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;background:linear-gradient(90deg,var(--rm-rail),var(--rm-red));transform-origin:left;animation:pjaxBar .8s ease-in-out infinite}
@keyframes pjaxBar{0%{transform:scaleX(0);opacity:1}50%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:.2}}
.rm-links a.is-active{color:var(--rm-rail);font-weight:700}
@media (prefers-reduced-motion:reduce){body.pjax-busy::after{animation:none}}

/* =====================================================================
   TABELLONE STAZIONE (partenze/arrivi live)
   ===================================================================== */
.rm-board-station{background:var(--rm-deep);border-radius:var(--r-lg);padding:18px;margin-top:18px;box-shadow:var(--rm-shadow)}
.rm-bs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rm-bs-tabs{display:flex;gap:6px;background:rgba(255,255,255,.08);padding:4px;border-radius:var(--r-pill)}
.rm-bs-tab{border:0;background:transparent;color:rgba(255,255,255,.7);font-weight:600;font-size:.85rem;padding:6px 16px;border-radius:var(--r-pill);cursor:pointer;font-family:"Bricolage Grotesque",sans-serif}
.rm-bs-tab.is-active{background:var(--rm-amber);color:var(--rm-on-amber)}
.rm-bs-stamp{color:rgba(255,255,255,.55);font-size:.78rem;font-family:"JetBrains Mono",monospace}
.rm-bs-body{display:flex;flex-direction:column}
.rm-bs-row{display:grid;grid-template-columns:62px 1fr 1.3fr auto;gap:12px;align-items:center;padding:11px 8px;border-top:1px solid rgba(255,255,255,.08);text-decoration:none;transition:background var(--t-base) var(--rm-ease)}
.rm-bs-row:hover{background:rgba(255,255,255,.05)}
.rm-bs-time{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--rm-amber);font-size:1.05rem}
.rm-bs-train{display:flex;flex-direction:column;line-height:1.2}
.rm-bs-train strong{color:#fff;font-family:"JetBrains Mono",monospace}
.rm-bs-train small{color:rgba(255,255,255,.5);font-size:.72rem}
.rm-bs-place{color:rgba(255,255,255,.85);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-board-station .rm-delay{justify-self:end;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem;padding:3px 9px;border-radius:var(--r-sm)}
.rm-board-station .rm-delay.ok{background:rgba(46,204,113,.16);color:var(--g-soft)}
.rm-board-station .rm-delay.late{background:rgba(231,76,60,.18);color:#ff7a72}
.rm-board-station .rm-delay.sched{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.rm-bs-empty{color:rgba(255,255,255,.6);text-align:center;padding:24px 0;font-size:.9rem}
@media (max-width:560px){
    .rm-bs-row{grid-template-columns:50px 1fr auto;gap:8px}
    .rm-bs-place{display:none}
}

/* =====================================================================
   DESIGN V2 — linguaggio "tabellone Solari"
   Ridefinisce i token (vince per cascata) e raffina i componenti.
   Niente modifiche al markup PHP; le palette del tabellone arrivano dal JS.
   ===================================================================== */
/* Palette CHIARA di seconda generazione: rimossa per lo stesso motivo.
   ATTENZIONE: due variabili vivevano SOLO in questi blocchi ormai obsoleti e
   sarebbero morte con loro. Sono conservate qui con lo stesso identico valore
   che vinceva prima, così la rimozione resta a impatto zero:
     --rm-ease       12 usi nel file
     --rm-amber-dim   2 usi
   (--rm-ink-2 invece era definita ma non usata da nessuno: eliminata.) */
:root{
    --rm-ease: var(--ease-out);
    --rm-amber-dim: #C9871F;
}

/* Sfondo "sala partenze": grigio-blu freddo con trama a puntini */
body{
    background:#E8EBEF;
    background-image:radial-gradient(circle at 1px 1px,rgba(20,24,31,.045) 1px,transparent 0);
    background-size:22px 22px;
}

/* Tipografia display: Bricolage Grotesque (Space Grotesk tolto il 01/10/2026: non e' del marchio)
   ----------------------------------------------------------------
   L'`!important` qui sotto SEMBRA il residuo di una lotta con Bootstrap, e
   ora che Bootstrap non c'e' piu' (14/09/2026) viene voglia di toglierlo.
   NON SI PUO'. Non era li' per Bootstrap: Bootstrap il carattere dei titoli
   non lo imposta affatto. Serve contro regole piu' avanti in QUESTO file.

   MISURATO, non dedotto: togliendolo, sulla home `h1.bl-h1` e `h2.bl-h2`
   passano da Bricolage Grotesque a Space Grotesk — cioe' cambia il carattere
   del titolone della prima pagina. Sette elementi in tutto.

   E' il motivo per cui quattro punti del foglio (`.bl-board-t`,
   `.rm-foot-cols .rm-foot-h`, e altri due) devono usare a loro volta
   `!important` per imporre il monospaziato: contro `!important` la
   specificita' non conta. La matassa si scioglie riordinando l'ordine
   delle regole, non cancellando una parola. */
h1,h2,h3,h4,h5,h6,
.rm-brand,.page-title,
.rm-hero h1,.rm-sec-head h2,.rm-sec-head h3,
.rm-card h3,.card h3,.panel-h h3,
.admin-card h3,.admin-dash-head h2,
.section-heading h2,.detail-panel h1,.side-panel h2,.data-panel h2,
.rm-panel-h,.rm-eyebrow{
    font-family:"Bricolage Grotesque", system-ui, sans-serif !important;
    letter-spacing:-.02em;
}
.page-title{font-weight:800}

/* Bottoni più decisi */
.btn{border-radius:var(--r-md)}
.btn-danger,.rm-btn-primary{background:var(--rm-red);border-color:var(--rm-red)}
.rm-btn-primary:hover{background:var(--rm-brand-strong)}

/* ---- TABELLONE: palette split-flap (Solari) ---- */
.rm-board{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.rm-board-row{grid-template-columns:auto 1fr auto;gap:14px}
.rm-board-code{display:flex;gap:3px;color:var(--rm-amber)}
.rm-board-code .flap{
    font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.9rem;
    color:var(--rm-amber);background:#0c0f15;width:1.34em;height:1.68em;
    display:grid;place-items:center;border-radius:3px;position:relative;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.rm-board-code .flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);transform:translateY(-.5px)}
.rm-board-code .flap.sp{background:transparent;box-shadow:none;width:.5em}
.rm-board-code .flap.sp::after{display:none}

/* Striscia statistiche stile "readout" */
.rm-stats .rm-stat .rm-n,.rm-stat .rm-n{font-family:"JetBrains Mono",monospace}

/* Card: bordo netto, hover misurato */
.rm-card,.card,.detail-panel,.data-panel,.side-panel,.admin-card,.admin-dash{border-radius:var(--r-lg)}
.rm-card:hover,.card:hover{transform:translateY(-3px)}

/* Eyebrow mono come al tabellone */
.rm-eyebrow{font-family:"JetBrains Mono",monospace !important;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem}

/* Link di struttura nel colore ferrovia */
.rm-links a.is-active{color:var(--rm-rail);border-color:var(--rm-amber)}

/* =====================================================================
   BANNER CONSENSO COOKIE + PAGINE LEGALI
   ===================================================================== */
.rm-cookie{position:fixed;left:0;right:0;bottom:0;z-index:2000;padding:16px;display:flex;justify-content:center;pointer-events:none}
.rm-cookie[hidden]{display:none}
.rm-cookie-in{pointer-events:auto;max-width:1000px;width:100%;background:var(--rm-deep);color:#fff;border-radius:var(--r-md);box-shadow:var(--sh-3);display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 20px;flex-wrap:wrap}
.rm-cookie-txt{font-size:.9rem;color:rgba(255,255,255,.82);flex:1;min-width:240px;line-height:1.5}
.rm-cookie-txt strong{color:#fff}
.rm-cookie-txt a{color:var(--rm-amber);text-decoration:underline}
.rm-cookie-act{display:flex;gap:10px;flex-shrink:0}
.rm-cookie .btn{border-radius:var(--r-sm);font-weight:600;font-size:.88rem;padding:9px 16px;border:1px solid transparent;cursor:pointer}
.rm-cookie-reject{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.rm-cookie-reject:hover{background:rgba(255,255,255,.08)}
.rm-cookie-accept{background:var(--rm-amber);color:var(--rm-on-amber)}
.rm-cookie-accept:hover{background:#ffbe4d}

/* link legali nel footer */
.rm-foot-legal{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.rm-foot-legal a,.rm-foot-linkbtn{color:rgba(255,255,255,.6);font-size:.85rem;text-decoration:none}
.rm-foot-legal a:hover,.rm-foot-linkbtn:hover{color:var(--rm-amber)}
.rm-foot-linkbtn{background:none;border:0;cursor:pointer;padding:0;font-family:inherit}

/* pagine legali / contenuto testuale */
.rm-legal{max-width:760px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);box-shadow:var(--rm-shadow);padding:32px 36px}
/* LA GERARCHIA ERA ROVESCIATA. `.rm-legal h2` era definito a 1.2rem, ma
   `.rm-legal h3` non esisteva: l'h3 ricadeva sul valore predefinito di
   Bootstrap (1.75rem) e usciva PIU' GRANDE del titolo che lo contiene —
   misurato su /metodologia il 09/09/2026: h2 a 19,2px, h3 a 27,4px, e
   l'h3 senza nemmeno un margine sopra. Riguardava tutte e sei le pagine
   di testo. Qui la scala scende come deve, nel carattere del marchio. */
/* 800 come ogni altro titolo di sezione del sito: a 700 le sei pagine
   informative e legali sembravano composte da un altro progetto. */
.rm-legal h2{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-size:1.5rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  margin:2.4rem 0 .7rem;color:var(--rm-ink)}
.rm-legal h2:first-child{margin-top:0}
.rm-legal h3{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  margin:1.7rem 0 .5rem;color:var(--rm-ink)}
/* #36404E ERA UN COLORE DA TEMA CHIARO rimasto su un pannello scuro:
   grigio ardesia su #101826, rapporto 1,69 — testo corrente a 16px
   praticamente invisibile. Sulla sola /metodologia riguardava 11 elementi
   su 27; gli altri 14 prendevano gia' --rm-ink da regole piu' specifiche,
   quindi la stessa pagina mostrava due colori di testo diversi.
   Misurato il 09/09/2026 su /metodologia e /come-funziona. */
.rm-legal p,.rm-legal li{color:var(--rm-ink);line-height:1.65}
.rm-legal ul{padding-left:1.2rem}.rm-legal li{margin-bottom:.4rem}
.rm-legal a{color:var(--rm-rail);font-weight:600}
.rm-legal-upd{color:var(--rm-muted);font-size:.85rem;font-family:"JetBrains Mono",monospace}
.rm-legal-note{margin-top:1.8rem;padding:12px 16px;background:var(--rm-soft);border-radius:var(--r-md);font-size:.85rem;color:var(--rm-muted)}
@media (max-width:560px){.rm-legal{padding:22px 20px}.rm-cookie-act{width:100%}.rm-cookie-act .btn{flex:1}}

/* suggerimenti nei form di autenticazione */
.auth-hint{display:block;margin-top:5px;font-size:.78rem;color:var(--rm-muted)}

/* =====================================================================
   REGISTRO ATTIVITÀ AUTOMAZIONE (cruscotto admin)
   ===================================================================== */
.admin-logbadge{font-family:"JetBrains Mono",monospace;font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:var(--r-pill)}
.admin-logbadge.ok{background:rgba(46,158,100,.12);color:var(--g-soft)}
.admin-logbadge.err{background:rgba(229,72,77,.12);color:#c0353a}
.admin-log{display:flex;flex-direction:column;border:1px solid var(--rm-line);border-radius:var(--r-md);overflow:hidden}
.admin-log-row{display:grid;grid-template-columns:10px auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--rm-line);font-size:.9rem}
.admin-log-row:last-child{border-bottom:0}
.admin-log-row.is-err{background:rgba(229,72,77,.04)}
.admin-log-dot{width:8px;height:8px;border-radius:50%}
.admin-log-dot.ok{background:var(--rm-green)}
.admin-log-dot.err{background:var(--rm-red)}
.admin-log-job{font-weight:700;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--rm-rail);min-width:78px}
.admin-log-msg{color:#36404e;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-log-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}
.admin-log-dur{font-family:"JetBrains Mono",monospace;font-size:.74rem;color:var(--rm-muted);background:var(--rm-soft);padding:2px 7px;border-radius:var(--r-sm)}
.admin-log-when{font-size:.78rem;color:var(--rm-muted)}
@media (max-width:640px){
    .admin-log-row{grid-template-columns:10px auto 1fr;row-gap:4px}
    .admin-log-meta{grid-column:2 / -1;justify-content:flex-start;padding-left:0}
    .admin-log-msg{white-space:normal}
}

/* errori per-sezione del cruscotto admin */
.admin-dash-err{background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.25);border-radius:var(--r-md);padding:14px 16px;margin-bottom:18px;font-size:.88rem;color:#8a2b2f}
.admin-dash-err ul{margin:8px 0 0;padding-left:1.1rem}
.admin-dash-err li{margin-bottom:3px}
.admin-dash-err .sec{font-weight:700;font-family:"JetBrains Mono",monospace;font-size:.8rem}

/* =====================================================================
   GESTIONE UTENTI (cruscotto admin)
   ===================================================================== */
.admin-users{display:flex;flex-direction:column;border:1px solid var(--rm-line);border-radius:var(--r-md);overflow:hidden}
.admin-user{display:grid;grid-template-columns:1.4fr auto auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rm-line)}
.admin-user:last-child{border-bottom:0}
.admin-user-id{display:flex;flex-direction:column;min-width:0}
.admin-user-name{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-user-badge{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(28,63,95,.1);color:var(--rm-rail);padding:2px 7px;border-radius:var(--r-pill)}
.admin-user-you{font-size:.66rem;font-weight:700;text-transform:uppercase;background:rgba(255,176,46,.18);color:var(--rm-amber-dim);padding:2px 7px;border-radius:var(--r-pill)}
.admin-user-mail{font-size:.82rem;color:var(--rm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:#36404e;white-space:nowrap}
.admin-user-date{font-size:.72rem;color:var(--rm-muted)}
.admin-user-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-user-act form{margin:0}
@media (max-width:680px){
    .admin-user{grid-template-columns:1fr;row-gap:8px}
    .admin-user-meta{flex-direction:row;align-items:center;gap:12px}
    .admin-user-act{justify-content:flex-start}
}

/* =====================================================================
   PANNELLI ADMIN: treni più in ritardo oggi + andamento 7 giorni
   ===================================================================== */
.admin-worst{display:flex;flex-direction:column;border:1px solid var(--rm-line);border-radius:var(--r-md);overflow:hidden}
.admin-worst-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--rm-line);text-decoration:none;color:inherit;transition:background var(--t-fast)}
.admin-worst-row:last-child{border-bottom:0}
.admin-worst-row:hover{background:var(--rm-soft)}
.aw-code{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--rm-rail);font-size:.86rem}
.aw-route{color:#36404e;font-size:.88rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-tag{font-family:"JetBrains Mono",monospace;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill)}
.aw-tag.live{background:rgba(28,63,95,.1);color:var(--rm-rail)}
.aw-tag.done{background:rgba(105,117,134,.14);color:var(--rm-muted)}
.aw-delay{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--rm-red)}

.admin-trend{display:flex;flex-direction:column;gap:10px}
.admin-trend-row{display:grid;grid-template-columns:42px 1fr auto;grid-template-areas:"date bar val" "date sub sub";column-gap:10px;row-gap:2px;align-items:center}
.at-date{grid-area:date;font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--rm-muted)}
.at-bar-wrap{grid-area:bar;height:10px;background:var(--rm-soft);border-radius:var(--r-pill);overflow:hidden}
.at-bar{display:block;height:100%;background:linear-gradient(90deg,var(--rm-amber),var(--rm-red));border-radius:var(--r-pill);min-width:3px}
.at-val{grid-area:val;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem;color:var(--rm-ink)}
.at-sub{grid-area:sub;font-size:.74rem;color:var(--rm-muted)}

/* form intervalli aggiornamenti (admin) */
.admin-intervals{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px}
.admin-intervals label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
.admin-intervals .ai-field{display:flex;align-items:center;gap:8px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:4px 4px 4px 12px;width:200px}
.admin-intervals .ai-field input{border:0;outline:0;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1rem;width:100%;background:transparent;color:var(--rm-ink)}
.admin-intervals .ai-unit{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--rm-muted);background:var(--rm-soft);padding:5px 9px;border-radius:var(--r-sm);white-space:nowrap}
.admin-intervals small{font-weight:400}

/* =====================================================================
   ACCESSIBILITÀ — focus visibile e bordi dei controlli

   QUI SOPRA C'ERANO TRE REGOLE DEL TEMA CHIARO, tolte il 17/09/2026:

       :root{ --rm-red:#D62D34; --rm-muted:#535A67 }
       .btn-danger:hover,...{ background:#b92b31 }
       .text-secondary{ color:#535A67 !important }

   Erano tutte e tre MORTE, sovrascritte piu' avanti dal blocco scuro:
   `--rm-muted` alla riga ~1478 (#93A0B4), `--rm-red` alla ~1484 (#F0554D),
   `.text-secondary` alla ~1491, l'hover alla ~1509. Verificato sul sito
   vivo: `.text-secondary` rende #93A0B4 con contrasto 7,43:1.

   Il guaio non era l'aspetto — non si vedeva niente — ma il COMMENTO:
   diceva «ridefinisce i token, vince per cascata» e non vinceva piu'
   niente, e le due righe di colore si portavano dietro una rivendicazione
   di accessibilita' «su sfondo chiaro» su un sito che chiaro non e' da un
   pezzo. Chi leggeva qui si faceva un'idea sbagliata dei colori del sito.

   Quello che segue invece e' vivo e vale ancora.
   ===================================================================== */

/* bordo degli input ben visibile (WCAG 1.4.11: edge dei controlli >= 3:1) */
.form-control,.form-select{border-color:#8A909C}

/* FOCUS VISIBILE e coerente per tutti gli elementi interattivi
   (risolve il focus invisibile sui bottoni del banner cookie) */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--rm-rail);
    outline-offset:2px;
    border-radius:5px;
}
/* i campi dentro wrapper personalizzati mostrano il focus sul wrapper */
.rm-nav-search:focus-within,.rm-search:focus-within,.admin-intervals .ai-field:focus-within{
    outline:3px solid var(--rm-rail);
    outline-offset:2px;
}

/* link "salta al contenuto" per chi naviga da tastiera */
.skip-link{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--rm-deep);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* ===== Dashboard: striscia stato sistema + divisori di sezione ===== */
.admin-sys{display:flex;flex-wrap:wrap;gap:12px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:12px}
.admin-sys-chip{display:flex;align-items:center;gap:10px;flex:1 1 180px;min-width:170px;padding:10px 14px;border-radius:var(--r-md);background:var(--rm-soft)}
.admin-sys-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--rm-muted)}
.admin-sys-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.admin-sys-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--rm-muted);font-weight:600}
.admin-sys-val{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.98rem;color:var(--rm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-sys-val small{font-family:inherit;font-weight:400;color:var(--rm-muted);font-size:.8rem}
.admin-sys--ok .admin-sys-dot{background:var(--rm-green)}
.admin-sys--warn .admin-sys-dot{background:var(--rm-amber)}
.admin-sys--bad .admin-sys-dot{background:var(--rm-red)}
.admin-sys--info .admin-sys-dot{background:var(--rm-rail)}
/* I fondi delle tre pastiglie stavano qui, del tema chiaro (#e9f6ef verdino,
   #fdeaea rosino) con dentro testo quasi bianco: illeggibili, se fossero mai
   arrivati a valere. Non ci arrivavano — li sovrascrivono la riga ~1540 e poi
   la ~2911 coi translucidi giusti — quindi tolti senza conseguenze.
   Uno dei tre era anche CSS NON VALIDO: `background:var(--rm-surface)5e6`,
   il residuo di una sostituzione fatta a meta' su `#fff5e6`. Una
   dichiarazione cosi' non fallisce a voce alta: viene semplicemente
   ignorata, ed e' per questo che e' rimasta li'. */

.admin-section-sep{display:flex;align-items:center;gap:14px;margin:6px 2px 0}
.admin-section-sep::after{content:"";flex:1;height:1px;background:var(--rm-line)}
.admin-section-sep span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--rm-muted)}

/* pannello Qualità dati (admin) */
.dq-cats{display:flex;flex-direction:column;gap:9px}
.dq-cat-row{display:grid;grid-template-columns:52px 1fr auto;column-gap:10px;align-items:center}
.dq-cat-name{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem;color:var(--rm-ink)}
.dq-cat-bar-wrap{background:var(--rm-soft);border-radius:var(--r-pill);height:12px;overflow:hidden}
.dq-cat-bar{display:block;height:100%;background:linear-gradient(90deg,var(--rm-rail),var(--rm-amber));border-radius:var(--r-pill);min-width:4px}
.dq-cat-n{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem;color:var(--rm-muted);min-width:44px;text-align:right}
.dq-health{display:flex;flex-direction:column;gap:12px}
.dq-metric{display:flex;align-items:baseline;gap:12px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--rm-line)}
.dq-metric-n{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:1.6rem;line-height:1;flex:none}
.dq-metric-lbl{font-size:.85rem;color:var(--rm-muted);line-height:1.25}
/* I FONDI di queste tre metriche erano del tema chiaro e li sovrascrive la
   riga ~1554: tolti. Uno era il secondo `var(--rm-surface)5e6` malformato.
   ATTENZIONE, non tutto il gruppo era morto: le due righe rimaste qui sotto
   danno il COLORE DEL NUMERO, usano le variabili — quindi seguono il tema —
   e nessuno le sovrascrive. Quelle restano. */
.dq-metric--ok .dq-metric-n{color:var(--rm-green)}
.dq-metric--bad .dq-metric-n{color:var(--rm-red)}

/* =====================================================================
   LAYOUT DASHBOARD ADMIN — sidebar di navigazione + viste
   ===================================================================== */
.adm-layout{display:flex;gap:26px;align-items:flex-start}
.adm-side{flex:0 0 216px;position:sticky;top:86px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:2px}
.adm-side-title{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rm-muted);padding:8px 10px 6px}
.adm-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--rm-ink);text-decoration:none;font-weight:600;font-size:.92rem;transition:background var(--t-fast) ease}
.adm-link svg{width:16px;height:16px;flex:none;opacity:.7}
.adm-link:hover{background:var(--rm-soft);color:var(--rm-ink)}
.adm-link.active{background:var(--rm-deep);color:#fff}
.adm-link.active svg{opacity:1}
.adm-badge{margin-left:auto;background:var(--rm-red);color:var(--rm-on-red);font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:700;border-radius:var(--r-pill);padding:2px 7px;line-height:1.3}
.adm-side-back{margin-top:8px;padding:10px 10px 4px;border-top:1px solid var(--rm-line);color:var(--rm-muted);text-decoration:none;font-size:.85rem}
.adm-side-back:hover{color:var(--rm-ink)}
.adm-main{flex:1;min-width:0}
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.adm-title{font-size:1.7rem;margin:0}
.adm-sub{color:var(--rm-muted);margin:3px 0 0;font-size:.92rem}
@media (max-width: 991px){
    .adm-layout{flex-direction:column;gap:16px}
    .adm-side{position:static;flex-direction:row;align-items:center;overflow-x:auto;width:100%;padding:8px;gap:6px;-webkit-overflow-scrolling:touch}
    .adm-side-title{display:none}
    .adm-link{white-space:nowrap;font-size:.85rem;padding:8px 12px;flex:none}
    .adm-badge{margin-left:6px}
    .adm-side-back{margin:0;border:0;padding:8px 12px;white-space:nowrap;flex:none}
    .adm-main{width:100%}
}

/* =====================================================================
   INTESTAZIONE DI PAGINA UNIFICATA (page_header)
   ===================================================================== */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 26px;flex-wrap:wrap;margin:4px 0 26px}
.ph-main{max-width:100%}
.ph .rm-eyebrow{margin-bottom:12px}
.ph-title{font-size:clamp(1.75rem,3.6vw,2.35rem);margin:0;line-height:1.05;letter-spacing:-.01em}
.ph-sub{color:var(--rm-muted);margin:9px 0 0;max-width:62ch;font-size:1.02rem}
.ph-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ph-chips{display:flex;gap:10px;flex-wrap:wrap}
.ph-chip{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:10px 14px;display:flex;flex-direction:column;min-width:96px}
.ph-n{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:1.18rem;line-height:1.1;color:var(--rm-ink)}
.ph-l{font-size:.72rem;color:var(--rm-muted);margin-top:3px}
@media (max-width: 767px){
    .ph{align-items:flex-start;flex-direction:column}
    .ph-chip{padding:8px 12px;min-width:84px}
}

/* larghezza di lettura per pagine documentali (privacy, cookie, chi siamo) */
.rm-doc{max-width:76ch}
.rm-doc p, .rm-doc li{line-height:1.65}

/* link alternativo sotto i form di accesso/registrazione */
.auth-alt{text-align:center;margin:14px 0 0;font-size:.92rem;color:var(--rm-muted)}

/* Analytics: liste a barre con etichette lunghe + elenchi compatti */
.an-row{grid-template-columns:minmax(110px,44%) 1fr auto}
.an-name{font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--rm-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-list{display:flex;flex-direction:column}
.an-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px dashed var(--rm-line);font-size:.9rem}
.an-item:last-child{border-bottom:0}

/* API Center: tester */
.api-tester-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.api-tester-row .form-select{max-width:320px}
.api-tester-row .form-control{max-width:260px}
.api-refresh{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--rm-muted);margin:0}
.api-result{margin-top:14px}
.api-result-meta{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--rm-muted);margin-bottom:8px;word-break:break-all}
.api-result-pre{background:var(--rm-deep);color:#e8ebef;border-radius:var(--r-md);padding:14px;max-height:420px;overflow:auto;font-size:.78rem;line-height:1.5;margin:0}

/* Badge: griglia (profilo e pagina pubblica) + contatore in classifica */
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bd-card{border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px 10px;display:flex;flex-direction:column;gap:4px;background:var(--rm-surface);text-align:center;align-items:center}
.bd-icon{font-size:1.75rem;line-height:1}
.bd-name{font-weight:700;font-size:.85rem;color:var(--rm-ink)}
.bd-desc{font-size:.72rem;color:var(--rm-muted);line-height:1.35}
.bd-date{font-family:"JetBrains Mono",monospace;font-size:.66rem;color:var(--rm-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.bd-on{border-color:#e7c968;box-shadow:0 1px 0 rgba(231,201,104,.35)}
/* .78 E NON .5. Un badge bloccato va attenuato, non reso illeggibile: a
   meta' opacita' la sua descrizione scendeva a 2,57 di contrasto, e proprio
   la riga che dice COME si sblocca era la meno leggibile della pagina.
   Il grigio (grayscale) porta gia' da solo il segnale «non ancora tuo»:
   l'opacita' serviva a rincarare, e rincarava troppo. A .78 restava a
   4,31: serve .85 per stare sopra il minimo. Misurato il 10/09/2026,
   il primo giorno in cui ho potuto aprire il profilo. */
.bd-off{opacity:.85;filter:grayscale(1);background:var(--rm-soft)}

/* checklist di lancio (admin) + versione nel footer */
.ck-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;background:var(--rm-muted);vertical-align:baseline}
.ck-ok{background:var(--rm-green)}
.ck-warn{background:var(--rm-amber)}
.ck-bad{background:var(--rm-red)}
.rm-foot-ver{font-family:"JetBrains Mono",monospace;opacity:.85}

/* =====================================================================
   ENGAGEMENT: sezioni home, Treno del Giorno, racconto, record, segui
   ===================================================================== */
.rm-sec{margin:26px 0}
.rm-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px}
/* LA GRAMMATICA DEL TITOLO DI SEZIONE NON DIPENDE PIU' DALLO SCOPE.
   Queste stesse dichiarazioni esistevano solo dentro `.rm-home`, e qui una
   regola tardiva riportava il titolo a 1.25rem in peso ereditato. Risultato:
   le schede treno e stazione — che il markup giusto ce l'hanno gia',
   `rm-sec-head > h2`, sei volte — mostravano titoli a 21px/500 mentre il
   resto del sito li mostra a 24px/800. Alle schede NON si puo' dare lo scope
   (ci ho gia' provato: schiaccia le intestazioni dei pannelli), quindi la
   strada giusta e' l'opposta: liberare la grammatica dallo scope.
   Le pagine che lo scope ce l'hanno ricevono valori identici, quindi non
   cambiano di un pixel. Misurato il 10/09/2026. */
.rm-sec-head h2{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.5rem,3vw,2.15rem);color:var(--rm-ink);margin:0}
/* Il bersaglio del tocco arriva a 24px, che e il minimo delle linee guida
   (WCAG 2.5.8). Misurato su telefono a 390px: erano 22 — mancavano due
   pixel, invisibili a occhio e non a un pollice. Il padding verticale non
   sposta niente perche il link sta su una riga sua, allineato al titolo
   di sezione; l inline-flex serve solo a far valere l altezza su un <a>. */
.rm-sec-link{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--rm-rail);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.rm-sec-link:hover{text-decoration:underline}

/* i miei treni */
.rm-mt{display:flex;flex-direction:column;gap:8px}
.rm-mt-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:11px 14px;text-decoration:none;color:var(--rm-ink);transition:border-color var(--t-fast)}
.rm-mt-row:hover{border-color:var(--rm-rail);color:var(--rm-ink)}
.rm-mt-code{font-weight:800;color:var(--rm-red)}
.rm-mt-route{color:var(--rm-muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-mt-status{display:flex;align-items:center;gap:8px;font-weight:700}

/* treno del giorno */
/* Onboarding primo pronostico (home, solo utenti senza pronostici) */
.rm-onb{display:grid;grid-template-columns:1.3fr 1fr auto;gap:24px;align-items:center;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--rm-shadow)}
.rm-onb-copy h2{margin:.2rem 0 .4rem;font-size:1.35rem}
.rm-onb-copy p{color:var(--rm-muted);margin:0;font-size:.92rem;line-height:1.5}
.rm-onb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rm-onb-steps li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--rm-ink)}
.rm-onb-steps li b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-pill);background:var(--rm-accent);color:var(--rm-on-accent);font-size:.8rem;flex:0 0 auto}
.rm-onb-cta{white-space:nowrap}
@media(max-width:820px){.rm-onb{grid-template-columns:1fr}.rm-onb-cta{justify-self:start}}
.rm-tdg{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--rm-deep);color:#fff;border-radius:var(--r-lg);padding:20px 22px;border:1px solid #000}
.rm-tdg .rm-eyebrow{color:var(--rm-amber)}
.rm-tdg-code{font-size:1.9rem;font-weight:800;letter-spacing:.02em;color:var(--rm-amber);line-height:1.1}
.rm-tdg-route{color:#e8ebef;font-weight:600;margin-top:2px}
.rm-tdg-meta{color:#aab2bf;font-size:.88rem;margin-top:6px}
.rm-tdg-meta b{color:#fff}
.rm-tdg-banner{background:var(--rm-deep);color:var(--rm-amber);border-radius:var(--r-md);padding:10px 14px;font-size:.9rem;margin-bottom:12px}
.rm-tdg-banner b{color:#fff}

/* pagina record */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rec-card{display:flex;flex-direction:column;gap:3px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:18px}
.rec-bad{border-top:4px solid var(--rm-red)}
.rec-good{border-top:4px solid var(--rm-green)}
.rec-k{font-size:.74rem;color:var(--rm-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.rec-v{font-size:2rem;font-weight:800;line-height:1.1;color:var(--rm-ink)}
.rec-bad .rec-v{color:var(--rm-red)}
.rec-good .rec-v{color:var(--rm-green)}
.rec-t{font-weight:800;color:var(--rm-rail);text-decoration:none;margin-top:2px}
.rec-t:hover{text-decoration:underline}
.rec-d{font-size:.84rem;color:var(--rm-muted)}

/* segui questo treno */
.follow-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--rm-surface);border:1px dashed var(--rm-line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:14px}
.follow-card .small{flex-basis:100%;margin-top:2px}

/* treno del giorno: colonna testo (unica classe rimasta orfana dall'audit) */
.rm-tdg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}

/* =====================================================================
   DESIGN V3 "BINARIOLIVE" — tema scuro, verde d'accento, tutto live.
   Questo blocco vince per cascata su tutto ciò che sta sopra.
   ===================================================================== */
:root{
    --rm-bg:#0A0F1A;          /* fondo pagina */
    --rm-surface:#101826;     /* pannelli e card */
    --rm-surface2:#0D1420;    /* campi e superfici incassate */
    --rm-deep:#070B14;        /* superfici molto scure (tabelloni, code) */
    /* UN GRADINO PIU' GIU'. Non e' deriva: tre sfumature scendono di proposito
       sotto `--rm-deep` per chiudere la pagina, e si leggono come una scala —
       `linear-gradient(180deg, var(--rm-bg) 0%, var(--rm-deep) 58%, X 100%)`.
       Sostituirlo con `--rm-deep` spegnerebbe la sfumatura invece di
       allinearla: qui il valore diverso E' il motivo della regola. Gli si da'
       un nome, che e' il contrario di toglierlo.
       (La quarta comparsa e' `rgba(5,8,15,.55)` dentro la stessa regola del
       404: un rgba non accetta un token, e resta scritta a mano.) */
    --rm-deepest:#05080F;     /* fondo della pagina: sotto --rm-deep */
    --rm-ink:#E8EDF4;         /* testo primario */
    --rm-muted:#93A0B4;       /* testo secondario (AA su surface) */
    --rm-line:#202C40;        /* bordi */
    --rm-soft:#16202F;        /* riempimenti tenui */
    /* DUE MESTIERI, DUE VARIABILI.
       `--rm-accent` faceva insieme l'accento del marchio E il colore di «in
       orario»: e' in 115 regole, di cui almeno quattordici sono STATO
       (`.bl-run.ok`, `.rm-hist-fill.is-ok`, la barra di puntualita', la
       pastiglia Regionale). Cambiandolo in blu si sarebbe tinto di blu ogni
       indicatore di puntualita', rompendo il semaforo verde/arancio/rosso su
       cui il sito si regge. Il mockup di branding li distingue gia': «Verde
       puntualita'» e' uno stato, il blu elettrico e' il marchio. */
    --rm-accent:#22C55E;      /* STATO: in orario, puntuale */
    /* DUE BLU, E IL MOTIVO E' IL CONTRASTO, non il gusto.
       `#157BFF` come TESTO sul fondo scuro da' 4,84:1 e passa (titolo e
       occhiello, misurati). Come FONDO di un bottone col testo bianco da'
       pero' **3,96:1**, e quel testo e' 14,4px in grassetto — non conta come
       «grande», quindi la soglia e' 4,5. Il blu profondo da' 5,57:1. */
    --rm-brand:#157BFF;       /* MARCHIO: testo, icone, bordi sul fondo scuro */
    --rm-brand-solid:#0B63D6; /* MARCHIO pieno: fondo di bottone, testo bianco */
    --rm-brand-strong:#0A57BE;/* il pieno premuto: hover e stati attivi */
    /* Un verde solo: quello del design system (rm-accent). Fino al 01/10/2026
       qui c'era #2FBF71, un secondo verde in 29 regole. Resta il nome, per
       chi lo usa ancora. */
    --rm-green:var(--rm-accent);
    --rm-amber:#F5B72E;
    --rm-red:#F0554D;         /* ritardi: rosso più luminoso per il dark */
    /* IL ROSSO SU FONDO ROSSO. Non e' una sfumatura in piu' del rosso: e' un
       mestiere diverso. `--rm-red` sta bene come RIEMPIMENTO (una barra, un
       punto sulla mappa), ma come TESTO dentro una pastiglia gia' tinta di
       rosso al 18% non si legge. Questo e' il colore che quel testo usa, ed
       era scritto a mano in QUINDICI punti senza nome: le pastiglie di stato,
       `.text-danger`, i numeri in sofferenza dei cruscotti, le righe ko.
       Quindici copie di un valore sono quindici occasioni per farlo divergere,
       ed e' cosi' che il sito si e' ritrovato con cinque rossi diversi. */
    --rm-red-soft:#FF8A84;    /* ritardo come TESTO, su fondo rosso tenue */
    /* E IL SUO SPECULARE DALLA PARTE DEL VERDE. Quando il verde diventa il
       FONDO — un bottone pieno, una pastiglia attiva, l'avatar — il testo
       sopra non puo' essere ne' bianco ne' inchiostro: ci vuole un verde
       quasi nero. Era scritto a mano in NOVE punti, sempre lo stesso valore
       e sempre senza nome, esattamente come il rosso chiaro.
       Contrasto misurato: 8,31:1 su `--rm-accent`, 5,74:1 su `--g-strong`. */
    --rm-on-accent:#04140A;   /* testo SOPRA il verde pieno */
    /* IL SEMAFORO HA QUATTRO LUCI, NON TRE. La mappa lo dichiara nella sua
       legenda: in orario / 6-15 min / 16-30 min / oltre 30. Il terzo gradino
       stava scritto a mano (`#FB923C`) e non aveva un nome, quindi non
       risultava parte della palette pur essendo uno stato a tutti gli
       effetti. Il mockup lo chiama «arancio ritardo». */
    --rm-orange:#FB923C;      /* STATO: ritardo serio, fra l'ambra e il rosso */
    /* E IL TERZO DELLA STESSA FAMIGLIA. Come `--rm-on-accent` sta al verde,
       questo sta all'oro: quando `--rm-amber` diventa il FONDO (la linguetta
       attiva del tabellone, il bottone d'oro, la pastiglia della posta, il
       bottone dei cookie) il testo sopra vuole un nero CALDO.
       Sei regole facevano esattamente questo lavoro con DUE valori diversi,
       #1B1300 e #1A1204, tre volte ciascuno: uno scarto di (1,1,4) che
       nessun occhio distingue. Non e' una scelta, e' sedimentazione.
       Tenuto il caldo e non `--rm-on-accent`, che e' verdastro: il nero che
       porta una traccia del colore su cui poggia e' voluto.
       Contrasto misurato: 10,33:1 su `--rm-amber`, 9,16:1 sul suo hover. */
    --rm-on-amber:#1A1204;    /* testo SOPRA l'oro pieno */
    /* E IL TERZO, che mancava e si vedeva. Misurato il 19/09/2026 sul vivo:
       il BIANCO non regge su NESSUNO dei quattro colori di stato —
       verde 2,28:1, oro 1,80:1, rosso 3,44:1, arancio 2,26:1. Sono tinte
       vivide, fatte per essere viste su fondo scuro, non per reggerci sopra
       del testo chiaro.
       Il sito lo sapeva gia' per il verde e per l'oro (i due token qui
       sopra). Sul rosso no: cinque regole ci scrivevano `color:#fff`, e due
       sono pubbliche — il chip «Soppresso» e il chip «Punta tutto» del
       modulo pronostici. 3,44:1 e' sotto la soglia di 4,5 per il testo
       normale. Con questo nero caldo: 5,70:1.
       NIENTE `--rm-on-orange`: oggi nessun testo poggia sull'arancio, che
       fa solo da pastiglia nella mappa. Se un domani ce ne andra' uno, la
       regola e' questa: sui pieni della palette il testo e' un nero che
       porta una traccia del colore sotto, mai il bianco. */
    --rm-on-red:#1A0604;      /* testo SOPRA il rosso pieno */
    /* AVVISO DI SERVIZIO. FUORI DALLA SCALA DEL RITARDO, di proposito.
       Verde, oro, arancio e rosso qui dentro vogliono dire una cosa sola:
       quanto e' in ritardo un treno. Serviva un colore che colpisse senza
       entrare in quella grammatica, e l'oro pieno non andava — messo a
       confronto sulla scheda di un treno risulta IDENTICO al badge «IN
       RITARDO» due righe sotto, provato il 19/09/2026.
       Questo e' un giallo ACIDO, un'altra famiglia dall'oro #F5B72E: si
       vede da lontano e non si legge come un ritardo lieve. 16,25:1 col
       suo testo, il contrasto piu' alto di tutta la palette. */
    --rm-notte:#E8FF3A;       /* la luce dell'avviso di fascia notturna */
    --rm-on-notte:#14170A;    /* testo SOPRA il giallo acido, se mai servisse pieno */
    --rm-notte-rgb: 232, 255, 58;   /* lo stesso colore per le velature e i bagliori */
    /* LO SCIOPERO. Un avviso di servizio come la fascia notturna, ma di un
       altro peso: non e' il sito che va piu' piano, e' il treno che non
       parte. Quindi un colore suo.
       PERCHE' IL VIOLA E NON IL MAGENTA, che sarebbe piu' d'impatto: il
       magenta e' un rosso slavato, e contro il rosso del ritardo #F0554D fa
       1,06 di rapporto di luminanza. Chi ha una carenza cromatica li vede
       ugualmente chiari, e su questa pagina il rosso vuol dire «ritardo
       grave»: due allarmi che si confondono sono un allarme solo. Il ciano
       sarebbe il piu' brillante (10,89:1) ma sta addosso al blu rotaia dei
       link. Il viola non e' usato da nessun'altra parte, e' lontano per
       tinta sia dal rosso sia dal giallo della notte, e fa 6,79:1 acceso sul
       fondo scuro. */
    --rm-sciopero:#B57BFF;
    --rm-sciopero-rgb: 181, 123, 255;
    /* I CANALI, per le velature. Vedi il commento qui sopra: sono gli
       stessi colori dei token pieni, scritti in modo che `rgba()` li
       possa usare. Se cambia il token, DEVE cambiare anche questo. */
    --rm-ink-rgb: 232, 237, 244;
    --rm-muted-rgb: 147, 160, 180;
    --rm-rail-rgb: 127, 178, 229;
    --rm-accent-rgb: 34, 197, 94;
    --g-soft-rgb: 74, 222, 128;
    --rm-green-rgb: var(--rm-accent-rgb);
    --rm-orange-rgb: 251, 146, 60;
    --rm-amber-rgb: 245, 183, 46;
    --rm-red-rgb: 240, 85, 77;
    --rm-brand-rgb: 21, 123, 255;
    --rm-bg-rgb: 10, 15, 26;
    --rm-deep-rgb: 7, 11, 20;
    --rm-rail:#7FB2E5;        /* link */
    --rm-shadow:var(--sh-3);
    /* LA COLONNA DEI NUMERI NEGLI ELENCHI (tratte, stazioni).
       Stava scritta 46px in TRE punti che devono per forza andare d'accordo:
       le celle dei numeri, l'intestazione da 561px in su e quella sotto. Tre
       copie dello stesso numero sono tre occasioni per farlo divergere, e a
       46px l'etichetta «Puntuali» (63px) si sovrapponeva a «Ritardo» di 5px
       — misurato il 17/09/2026 su /tratte. Serve che colonna piu' distanza
       superino la piu' larga delle etichette: 56+12 fa 68 contro 63, cinque
       pixel di aria. A 52 ne restava uno solo, che non e' un margine. */
    --rt-col:56px;
    --rt-gap:12px;
}
html{background:var(--rm-bg)}
body{background-color:var(--rm-bg);background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);background-size:26px 26px;color:var(--rm-ink)}
h1,h2,h3,h4,h5,strong,b{color:var(--rm-ink)}
.text-secondary{color:var(--rm-muted) !important}
.mono{color:inherit}
.t-red{color:var(--rm-red)}
.t-green{color:var(--rm-green)}

/* navigazione */
.rm-nav{background:rgba(var(--rm-bg-rgb),.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--rm-line)}
.rm-brand{color:var(--rm-ink)}
.rm-links a,.rm-nav a{color:var(--rm-muted)}
.rm-links a:hover,.rm-links a.active{color:var(--rm-ink)}
.rm-dot{background:var(--rm-accent);box-shadow:0 0 10px var(--rm-accent)}
.rm-nav-search{border:1px solid var(--rm-line);background:var(--rm-surface2)}
.rm-nav-search input{color:var(--rm-ink)}
.rm-nav-search input::placeholder{color:var(--rm-muted)}
.rm-burger span{background:var(--rm-ink)}

/* bottoni: primario = verde; outline-dark diventa outline chiaro */
/* IL TESTO DEL BOTTONE PERDEVA PER SPECIFICITA', NON PER ORDINE.
   Il bottone primario e' un <a> dentro `.rm-nav`, e la regola
   `.rm-links a, .rm-nav a{color:var(--rm-muted)}` vale (0,1,1) mentre
   `.rm-btn-primary` vale (0,1,0): vinceva lei ovunque la si scrivesse, e il
   testo usciva GRIGIO — misurato rgb(147,160,180), contrasto ~1,5:1, sotto
   ogni soglia. Non e' un guaio nuovo: capitava anche col verde di prima.
   Qui non si rilancia con un !important, si nomina l'elemento per quello che
   e' gia': `.rm-btn.rm-btn-primary` sono due classi che porta entrambe, cioe'
   (0,2,0), e basta a vincere senza aprire una gara. */
.btn-danger,.rm-btn-primary{background:var(--rm-brand-solid);border-color:var(--rm-brand-solid);color:#fff;font-weight:700}
.rm-btn.rm-btn-primary{color:#fff}
.btn-danger:hover,.btn-danger:focus,.rm-btn-primary:hover{background:var(--rm-brand-strong);border-color:var(--rm-brand-strong);color:#fff}
form[onsubmit*="Eliminare"] .btn-danger{background:var(--rm-red);border-color:var(--rm-red);color:#fff}
form[onsubmit*="Eliminare"] .btn-danger:hover{background:#D8433C;border-color:#D8433C}
.btn-dark{background:var(--rm-accent);border-color:var(--rm-accent);color:var(--rm-on-accent);font-weight:700}
.btn-dark:hover{background:var(--g-strong);border-color:var(--g-strong);color:var(--rm-on-accent)}
.btn-outline-dark,.btn-outline-secondary{border-color:#3A4660;color:var(--rm-ink);background:transparent}
.btn-outline-dark:hover,.btn-outline-secondary:hover{background:var(--rm-soft);border-color:#4A5878;color:var(--rm-ink)}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--rm-brand);outline-offset:2px}
/* LO STACCO NON E' ESTETICA. Senza, il contorno del fuoco poggia sul pieno
   dell'elemento: sul bottone principale, che e' blu #0B63D6, un anello blu
   #157BFF da' 1,41:1 sul lato interno e sparisce dentro il bottone. Con
   due pixel di stacco l'anello ha il fondo pagina da tutte e due le parti,
   e li' il contrasto e' 4,84:1 — sopra il 3:1 che serve.
   Cinque regole piu' specifiche lo stacco ce l'avevano gia': la globale,
   che copre tutto il resto del sito, era l'unica senza. */
.rm-nav-search:focus-within,.rm-search:focus-within,.admin-intervals .ai-field:focus-within{outline:3px solid var(--rm-brand)}

/* form scuri */
.form-control,.form-select{background:var(--rm-surface2);border-color:#33405C;color:var(--rm-ink)}
.form-control::placeholder{color:var(--rm-muted)}
.form-control:focus,.form-select:focus{background:var(--rm-surface2);border-color:var(--rm-brand);color:var(--rm-ink);box-shadow:0 0 0 .2rem rgba(var(--rm-brand-rgb),.20)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2393A0B4' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:14px 14px}
.form-check-input{background-color:var(--rm-surface2);border-color:#33405C}
.form-check-input:checked{background-color:var(--rm-brand);border-color:var(--rm-brand)}

/* tabelle e alert */
.table{--bs-table-bg:transparent;--bs-table-color:var(--rm-ink);--bs-table-border-color:var(--rm-line);--bs-table-striped-bg:rgba(255,255,255,.02);--bs-table-hover-bg:rgba(255,255,255,.045);color:var(--rm-ink)}
.table thead th{color:var(--rm-muted);border-bottom-color:var(--rm-line)}
.alert{background:var(--rm-surface2);border:1px solid var(--rm-line);color:var(--rm-ink)}
.alert-success{border-left:4px solid var(--rm-green)}
.alert-warning{border-left:4px solid var(--rm-amber)}
.alert-danger{border-left:4px solid var(--rm-red)}
.badge.text-bg-light{background:var(--rm-soft) !important;color:var(--rm-muted) !important}
.badge.text-bg-success{background:rgba(var(--rm-green-rgb),.18) !important;color:var(--g-soft) !important}
.badge.text-bg-danger{background:rgba(var(--rm-red-rgb),.18) !important;color:var(--rm-red-soft) !important}
.badge.text-bg-secondary{background:var(--rm-soft) !important;color:var(--rm-muted) !important}

/* tinte di stato scure (metriche qualità, striscia sistema, checklist) */
.dq-metric--ok,.admin-sys--ok{background:rgba(var(--rm-green-rgb),.10);border-color:rgba(var(--rm-green-rgb),.35)}
.dq-metric--warn,.admin-sys--warn{background:rgba(var(--rm-amber-rgb),.10);border-color:rgba(var(--rm-amber-rgb),.35)}
.dq-metric--bad,.admin-sys--bad{background:rgba(var(--rm-red-rgb),.10);border-color:rgba(var(--rm-red-rgb),.35)}
.dq-metric--warn .dq-metric-n{color:var(--rm-amber)}
.ad-placeholder{color:var(--rm-muted);border-color:var(--rm-line)}

/* HERO v3 */
.rm-hero{background:linear-gradient(180deg, rgba(var(--rm-accent-rgb),.10), transparent 55%), radial-gradient(900px 320px at 70% -10%, rgba(var(--rm-accent-rgb),.14), transparent), var(--rm-deep);border:1px solid var(--rm-line);border-radius:var(--r-xl);padding:44px 26px 30px;box-shadow:var(--rm-shadow)}
.rm-hero-grid{display:block;max-width:760px;margin:0 auto;text-align:center}
.rm-hero-copy h1{font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.02em}
.rm-hero-copy h1 em{color:var(--rm-brand);font-style:normal}
.rm-hero .rm-sub{margin-left:auto;margin-right:auto}

.rm-chips{justify-content:center}
.rm-chip{background:var(--rm-surface);border:1px solid var(--rm-line);color:var(--rm-muted)}
.rm-chip:hover{color:var(--rm-ink);border-color:#3A4660}
.rm-eyebrow{color:var(--rm-brand)}

/* stat card v3 */
.rm-stats{gap:14px}
.rm-stat{display:flex;align-items:center;gap:14px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:16px;text-align:left}
.rm-stat-ic{flex:none;width:42px;height:42px;border-radius:var(--r-md);background:rgba(var(--rm-accent-rgb),.12);color:var(--rm-accent);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.rm-stat .rm-n{font-size:1.5rem}
.rm-stat .rm-l{color:var(--rm-muted)}
.rm-stat .rm-l b{color:var(--rm-ink)}

/* treni in evidenza: card live */
.rm-evi{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.rm-evi-card{position:relative;display:flex;flex-direction:column;gap:3px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px 14px 12px;text-decoration:none;color:var(--rm-ink);transition:transform var(--t-base) ease,border-color var(--t-base) ease}
.rm-evi-card:hover{transform:translateY(-2px);border-color:var(--rm-accent);color:var(--rm-ink)}
.rm-evi-code{font-weight:800;font-size:.82rem;color:var(--rm-muted);letter-spacing:.06em}
.rm-evi-name{font-weight:700;font-size:1.02rem;padding-right:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-evi-route{color:var(--rm-muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-evi-pill{position:absolute;top:12px;right:12px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-pill)}
.rm-evi-ok{background:rgba(var(--rm-green-rgb),.16);color:var(--g-soft)}
.rm-evi-late{background:rgba(var(--rm-red-rgb),.16);color:var(--rm-red-soft)}
.rm-evi-bad{background:rgba(var(--rm-muted-rgb),.16);color:var(--rm-muted)}
.rm-evi-delay{font-size:1.7rem;font-weight:800;line-height:1;margin-top:7px}
.rm-evi-delay.ok{color:var(--rm-green)}
.rm-evi-delay.late{color:var(--rm-red)}
.rm-evi-delay.bad{color:var(--rm-muted)}
.rm-evi-times{color:var(--rm-muted);font-size:.74rem;margin-top:2px}

/* pannelli generici v3 */
.rm-panel{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:18px}
.rm-sec-note{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--rm-muted);letter-spacing:.08em;text-transform:uppercase}

/* stazioni principali */
.rm-strank{display:flex;flex-direction:column}
.rm-strank-row{display:grid;grid-template-columns:1fr 64px 110px 70px;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--rm-line);color:var(--rm-ink);text-decoration:none;font-size:.92rem}
.rm-strank-row:hover{color:var(--rm-ink);background:rgba(255,255,255,.02)}
.rm-strank-row:last-child{border-bottom:0}
.rm-strank-head{color:var(--rm-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--rm-line)}
.rm-strank-head:hover{background:transparent}
.rm-strank-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-strank-row small{color:var(--rm-muted)}
@media(max-width:575px){.rm-strank-row{grid-template-columns:1fr 50px 84px 58px;font-size:.84rem}}

/* avvisi */
.rm-ntc{display:flex;flex-direction:column}
.rm-ntc-row{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:baseline;padding:10px 2px;border-bottom:1px dashed var(--rm-line)}
.rm-ntc-row:last-child{border-bottom:0}
.rm-ntc-row i{width:9px;height:9px;border-radius:50%;position:relative;top:1px}
.rm-ntc-info i{background:var(--rm-rail)}
.rm-ntc-warn i{background:var(--rm-amber)}
.rm-ntc-bad i{background:var(--rm-red)}
.rm-ntc-row b{display:block}
.rm-ntc-row span{color:var(--rm-muted);font-size:.88rem}
.rm-ntc-row small{color:var(--rm-muted)}
.ntc-form{display:flex;gap:10px;flex-wrap:wrap}
.ntc-form .form-select{max-width:150px}
.ntc-form input[name="notice_title"]{flex:1;min-width:220px}
.ntc-form input[name="notice_body"]{flex:2;min-width:260px}
/* La casella «manda anche come notifica» sta nello stesso flex del modulo,
   ma occupa una riga sua: e' la scelta piu' pesante del gruppo e non deve
   finire schiacciata di fianco al bottone come se fosse un dettaglio. */
/* La casella su una riga sua, la spiegazione sotto e allineata al testo.
   Prima erano sulla stessa riga separati da un punto centrale: alla prima
   andata a capo il separatore restava in testa alla riga nuova e sembrava
   un elenco puntato sbagliato. Un separatore che regge solo finche' il
   testo non va a capo non e' un separatore, e' un caso fortunato. */
/* Il modulo dei collegamenti: due campi affiancati e il bottone in fondo,
   che su schermo stretto vanno uno sotto l'altro. Le due etichette «Da» e
   «A» stanno SOPRA il campo e non accanto: affiancate, su telefono
   spingerebbero il campo a una larghezza in cui non si legge piu' il nome
   della stazione che si sta scrivendo. */
/* La colonna dell'orario: le due ore in evidenza e la freccia fra loro
   piu' quieta, cosi' l'occhio legge «06:12 08:26» come una coppia e non
   come tre elementi separati. */
/* «Ho letto X come Y»: sta fra il modulo e i risultati, in ambra, perche'
   e' un avviso — il sito ha cambiato qualcosa e chi legge deve poterlo
   vedere senza cercarlo. */
/* I percorsi d'esempio: pastiglie, non un elenco. Sono scorciatoie da
   toccare, e la forma deve dirlo prima del testo. */
/* La proposta di viaggio in cima ai risultati di ricerca: e' un'offerta,
   non un risultato, quindi ha una forma diversa dalle righe sotto — bordo
   d'accento e tre righe con il percorso in mezzo, che e' la parte che si
   legge per capire se e' quello che si cercava. */
.bl-viaggio{display:block;padding:16px 18px;margin:0 0 22px;border-radius:var(--r-lg);
  background:var(--rm-surface);border:1px solid var(--rm-accent);text-decoration:none;
  color:var(--rm-ink);transition:transform var(--t-fast),box-shadow var(--t-base)}
.bl-viaggio:hover{transform:translateY(-1px);box-shadow:var(--rm-shadow);color:var(--rm-ink)}
.bl-viaggio-t{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rm-muted)}
.bl-viaggio-r{display:block;font-size:1.05rem;margin:5px 0 4px}
.bl-viaggio-r b{color:var(--rm-ink)}
.bl-viaggio-c{display:block;font-size:.85rem;color:var(--rm-accent);font-weight:600}

.bl-coll-esempi{display:flex;flex-wrap:wrap;gap:10px}
.bl-coll-es{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:9px 15px;border:1px solid var(--rm-line);border-radius:var(--r-pill);
  background:var(--rm-surface);color:var(--rm-ink);text-decoration:none;
  font-size:.86rem;transition:border-color var(--t-fast),transform var(--t-fast)}
.bl-coll-es:hover{border-color:var(--rm-accent);transform:translateY(-1px);color:var(--rm-ink)}
.bl-coll-es b{color:var(--rm-muted);font-weight:400}
/* Il ritorno sta dentro il titolo: deve leggersi come un'azione, non come
   una parola del titolo, quindi corpo piccolo e colore d'accento. */
.bl-coll-inv{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rm-accent);
  text-decoration:none;margin-left:12px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px;vertical-align:middle}
.bl-coll-inv:hover{text-decoration:underline;color:var(--rm-accent)}

.bl-coll-letto{color:var(--rm-amber);font-size:.9rem;margin:0 0 14px}
/* La tendina dell'autocomplete dentro un'etichetta a colonna: si aggancia
   sotto il campo, non sotto tutta l'etichetta che comprende anche il titolino. */
.bl-coll-f .ac-box{top:auto;bottom:auto;margin-top:2px;z-index:30}

.bl-coll-ore b{font-size:1rem;color:var(--rm-ink)}
.bl-coll-fr{color:var(--rm-muted);margin:0 6px}

.bl-coll-form{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:0 0 8px}
.bl-coll-f{display:flex;flex-direction:column;gap:6px;flex:1 1 240px;min-width:0}
.bl-coll-f > span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rm-muted)}
.bl-coll-form .rm-btn{flex:0 0 auto;min-height:42px}
@media (max-width:560px){
  .bl-coll-form{flex-direction:column;align-items:stretch}
  .bl-coll-form .rm-btn{justify-content:center}
  /* LA BASE DEL FLEX CAMBIA SIGNIFICATO QUANDO GIRA LA DIREZIONE.
     `.bl-coll-f{flex:1 1 240px}` qui sopra vuol dire «larga almeno 240»
     finche' il form e' in riga. Appena diventa colonna, quei 240px sono
     un'ALTEZZA: ogni campo si portava a 240px con dentro 62px di contenuto,
     e fra «Da» e «A» si apriva un buco di 178px. Sul telefono il modulo di
     ricerca occupava 550px prima ancora dei risultati.
     Visto guardando la pagina a 375px: lo scanner di contrasto la dava
     perfetta, perche' il vuoto non ha colore. */
  .bl-coll-f{flex:0 0 auto}
}

/* IL VIAGGIO CON UN CAMBIO.
   Una coincidenza si legge dall'alto in basso: treno, attesa, treno. Per
   questo e' una lista ordinata e non una tabella — una tabella suggerisce
   colonne confrontabili, qui invece i tre passi vanno letti in sequenza.
   La riga dell'attesa e' rientrata e senza codice treno perche' e' l'unico
   passo in cui non si viaggia: se avesse lo stesso peso degli altri due,
   un cambio da tre ore sembrerebbe una terza tratta. */
.bl-camb{background:var(--rm-surface);border:1px solid var(--rm-line);
  border-radius:var(--r-lg);padding:16px 18px;margin:0 0 14px}
.bl-camb-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--rm-line)}
.bl-camb-h h3{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-weight:800;letter-spacing:-.02em;font-size:1.12rem;color:var(--rm-ink);margin:0}
.bl-camb-h span{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.04em;color:var(--rm-muted)}
.bl-camb-v{position:relative;padding:12px 0;border-top:1px dashed var(--rm-line)}
.bl-camb-v:first-of-type{border-top:0;padding-top:0}
.bl-camb-tot{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.bl-camb-tot span{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--rm-muted)}
.bl-camb-tot b{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-size:1.25rem;font-weight:800;color:var(--rm-ink)}
.bl-camb-passi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bl-camb-passi > li{display:grid;grid-template-columns:118px 1fr;gap:2px 14px;
  align-items:baseline}
.bl-camb-ore{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.9rem;
  font-weight:600;color:var(--rm-ink);white-space:nowrap}
.bl-camb-tre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.92rem;color:var(--rm-ink)}
.bl-camb-via{grid-column:2;font-size:.8rem;color:var(--rm-muted)}
.bl-camb-poco{font-size:.78rem;color:var(--rm-muted)}
.bl-camb-att .bl-camb-ore,.bl-camb-att .bl-camb-tre{color:var(--rm-muted);font-weight:400}
.bl-camb-att .bl-camb-tre{font-size:.85rem}
.bl-camb-gg{margin:10px 0 0;font-size:.85rem;color:var(--rm-muted)}

/* Nota con un bottone a fianco: si vede, ma non compete con i dati.
   Serve al rimando verso i canali ufficiali e al passaggio dalla media
   della tratta all'elenco dei singoli treni. */
.bl-uff,.bl-azione{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:var(--rm-surface2);border:1px solid var(--rm-line);
  border-radius:var(--r-lg);padding:16px 18px;margin:18px 0 0}
.bl-uff h3,.bl-azione h3{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-weight:800;font-size:1.02rem;color:var(--rm-ink);margin:0 0 4px}
.bl-uff p,.bl-azione p{font-size:.88rem;color:var(--rm-muted);max-width:64ch}
.bl-uff .rm-btn,.bl-azione .rm-btn{flex:0 0 auto}

@media (max-width:560px){
  /* La colonna degli orari e' fissa a 118px: sotto i 560 il nome del treno
     ci finirebbe schiacciato accanto, quindi i due passi si impilano. */
  .bl-camb-passi > li{grid-template-columns:1fr;gap:2px}
  .bl-camb-via{grid-column:1}
  .bl-uff,.bl-azione{flex-direction:column;align-items:stretch}
  .bl-uff .rm-btn,.bl-azione .rm-btn{justify-content:center}
}

.ntc-push{flex:1 0 100%;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;
  align-items:baseline;margin:2px 0 0;cursor:pointer;line-height:1.5}
.ntc-push input{margin:0;position:relative;top:2px}
.ntc-push-nota{grid-column:2}
.ntc-sent{color:var(--rm-amber);font-weight:600}

/* breadcrumb + header scheda treno */
.rm-bc ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 10px;padding:0;font-size:.8rem;color:var(--rm-muted)}
.rm-bc li+li::before{content:"\203A";margin-right:6px;color:var(--rm-muted)}
.rm-bc a{color:var(--rm-muted);text-decoration:none}
.rm-bc a:hover{color:var(--rm-ink)}
.rm-th{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.rm-th h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.rm-th-pill{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;position:relative;top:-2px}
.rm-th-sub{color:var(--rm-muted);margin:6px 0 0}
.rm-th-actions{display:flex;gap:8px;flex-wrap:wrap}

/* micro-transizioni live: mai un refresh percepito */
@keyframes rmTick{0%{color:var(--rm-accent);text-shadow:0 0 14px rgba(var(--rm-accent-rgb),.7)}100%{text-shadow:none}}
.rm-tick{animation:rmTick .9s ease}
.rm-swap{animation:rmSwap .35s ease}
@keyframes rmSwap{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.rm-tick,.rm-swap,.rm-evi-card{animation:none;transition:none}}

/* pulizie dark residue */
.skip-link{background:var(--rm-deep)}
.rm-legal-note,.rm-doc p{color:var(--rm-ink)}
.rm-doc .rm-legal-note{color:var(--rm-muted)}
.rm-foot-note,.rm-foot-ver{color:var(--rm-muted)}

/* ===== stato della corsa: avanzamento, fatti, grafico, fermate ===== */
.rm-stops-wrap{margin-top:18px}
.rm-prog{margin:16px 0 6px}
.rm-prog-track{position:relative;height:8px;background:var(--rm-soft);border-radius:var(--r-pill);margin:18px 8px 8px}
.rm-prog-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(var(--rm-rail-rgb),.72),var(--rm-rail));border-radius:var(--r-pill);transition:width .6s ease}
.rm-prog-dot{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--rm-line);transform:translate(-50%,-50%);border:2px solid var(--rm-surface)}
.rm-prog-dot.is-past{background:var(--rm-rail)}
.rm-prog-dot.is-next{background:var(--rm-ink);box-shadow:0 0 0 4px rgba(var(--rm-rail-rgb),.22)}
.rm-prog-train{position:absolute;top:-16px;transform:translateX(-50%);font-size:1rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:left .6s ease}
.rm-prog-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--rm-muted);padding:0 2px}
.rm-prog-next{margin:10px 0 0;font-size:.95rem}
.rm-facts{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 4px;color:var(--rm-muted);font-size:.85rem}
.rm-facts b{color:var(--rm-ink);font-size:1rem;margin-right:4px}
.rm-chart{margin-top:16px}
.rm-chart svg{display:block;width:100%;height:110px;background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md)}
.rm-chart-x{display:flex;justify-content:space-between;font-size:.68rem;color:var(--rm-muted);margin-top:5px}
.rm-stops{display:flex;flex-direction:column;margin-top:16px}
.rm-stops-row{display:grid;grid-template-columns:1fr 72px 72px 54px 54px;gap:10px;align-items:center;padding:8px 2px;border-bottom:1px dashed var(--rm-line);font-size:.9rem}
.rm-stops-row:last-child{border-bottom:0}
.rm-stops-head{color:var(--rm-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--rm-line)}
.rm-stops-row .mono{text-align:right}
.rm-stops-head span{text-align:right}
.rm-stops-head span:first-child,.rm-stop-name{text-align:left}
.rm-stop-name{display:flex;align-items:center;gap:9px;min-width:0}
.rm-stop-name a{color:var(--rm-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-stop-name a:hover{color:var(--rm-accent)}
.rm-stop-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rm-line)}
.rm-stops-row.is-past .rm-stop-dot{background:var(--rm-rail)}
.rm-stops-row.is-next{background:rgba(var(--rm-rail-rgb),.07)}
.rm-stops-row.is-next .rm-stop-dot{background:var(--rm-ink)}
.rm-stops-row:not(.is-past):not(.is-next):not(.rm-stops-head){opacity:.65}
@media(max-width:575px){
    .rm-stops-row{grid-template-columns:1fr 58px 58px 44px 40px;gap:6px;font-size:.8rem}
    .rm-prog-train{font-size:.85rem}
}

/* =====================================================================
   FIX v3.1 — rimappa le variabili LEGACY (senza prefisso) sul tema scuro.
   Erano rimaste ai valori chiari: da qui le scatole bianche su scheda
   treno, gli alert e le card. Un blocco, le sistema tutte.
   ===================================================================== */
:root{
    --ink:var(--rm-ink);
    --muted:var(--rm-muted);
    --soft:var(--rm-soft);
    --line:var(--rm-line);
    --rail:var(--rm-rail);
    --paper:var(--rm-bg);
    --danger:var(--rm-red);
    --green:var(--rm-green);
    --amber-dim:#0A0F1A;
}
/* scatole metriche (Stato/Arrivo/Partenza, Ritardo medio…) */
/* --rm-muted NON BASTA SU --rm-surface2. Il riquadro delle metriche ha un
   fondo piu' chiaro del pannello che lo contiene, e li' il grigio di
   servizio scendeva a 4,01: sono le cinque etichette che dicono che cosa
   sono i numeri sopra — «Pronostici totali», «Centri», «Miglior colpo» —
   cioe' l'unica parte che spiega il resto. Misurate sul profilo il
   10/09/2026. */
.metric-grid span{background:var(--rm-surface2);border:1px solid var(--rm-line);color:var(--rm-muted)}
.metric-grid strong{color:var(--rm-ink)}
.detail-panel,.train-card{background:var(--rm-surface);border:1px solid var(--rm-line);color:var(--rm-ink)}
.train-card h3{color:var(--rm-ink)}
.train-card p{color:var(--rm-muted)}
.today-status{background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px}

/* alert a tinte scure coerenti */
.alert-success{background:rgba(var(--rm-green-rgb),.10);color:var(--g-soft);border-color:rgba(var(--rm-green-rgb),.30)}
.alert-danger{background:rgba(var(--rm-red-rgb),.10);color:#FFA29C;border-color:rgba(var(--rm-red-rgb),.30)}
/* IL ROSSO DI BOOTSTRAP NON E' MAI STATO RITINTO PER IL FONDO SCURO.
   `.text-danger` esce #dc3545, che su un pannello scuro da' 4,08 di
   contrasto. Era gia' stato curato DENTRO le tabelle
   (`.tbl-board .text-danger`), ma non fuori — e fuori c'e' il messaggio che
   app.js scrive quando il browser nega il permesso alle notifiche: proprio
   la riga che spiega perche' un bottone non funziona, e quindi quella che
   chi ha un problema deve poter leggere.
   Serve `!important` perche' Bootstrap 5 lo dichiara cosi': senza, questa
   regola non vince nemmeno arrivando dopo. */
.text-danger{ color:var(--rm-red-soft) !important; }
.alert-info{background:rgba(var(--rm-rail-rgb),.10);color:#B8D4F0;border-color:rgba(var(--rm-rail-rgb),.30)}
.rm-predict-closed{background:rgba(var(--rm-green-rgb),.10);border-color:rgba(var(--rm-green-rgb),.30);color:var(--rm-ink)}
/* IL PARAGRAFO, NON SOLO IL CONTENITORE. La riga qui sopra ridipingeva il
   pannello per il tema scuro ma il testo vero sta in un <p>, e
   `.rm-predict-closed p{color:#11623f}` — il verde scuro del tema chiaro —
   continuava a vincere per specificita'. Sulla scheda treno il risultato era
   verde scuro su fondo scuro: rapporto 2,15, misurato il 09/09/2026. */
.rm-predict-closed p{color:var(--rm-ink)}

/* card "Cosa puoi fare" + card gioco in evidenza (era crema) */
.rm-card .rm-ic{background:rgba(var(--rm-rail-rgb),.12);color:var(--rm-rail)}
.rm-card h3{color:var(--rm-ink)}
.rm-card p{color:var(--rm-muted)}

.rm-card-game{border-color:rgba(var(--rm-amber-rgb),.45);background:linear-gradient(180deg,rgba(var(--rm-amber-rgb),.10),var(--rm-surface))}
.rm-card-game .rm-ic{background:rgba(var(--rm-amber-rgb),.16);color:var(--rm-amber)}
.rm-card-game h3{color:var(--rm-ink)}

/* tabelloni/righe che usavano toni chiari */
.rm-board-dest{color:var(--rm-ink)}
.rm-board-dest small,.small-link{color:var(--rm-muted)}
.rm-foot-note{color:var(--rm-muted)}

/* =====================================================================
   PAGINA RICERCA v2 — stazioni in cima, treni per categoria
   ===================================================================== */
.rm-sres-stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.rm-sres-station{display:flex;align-items:center;gap:12px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:12px 14px;text-decoration:none;color:var(--rm-ink);transition:border-color var(--t-base) ease,transform var(--t-base) ease}
.rm-sres-station:hover{border-color:var(--rm-accent);transform:translateY(-1px);color:var(--rm-ink)}
.rm-sres-st-ic{color:var(--rm-accent);font-size:.9rem;flex:none}
.rm-sres-st-main{display:flex;flex-direction:column;min-width:0;flex:1}
.rm-sres-st-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-sres-st-sub{font-size:.8rem;color:var(--rm-muted)}
.rm-sres-st-go{color:var(--rm-muted);flex:none}

.rm-sres-cat{margin-bottom:16px}
.rm-sres-cat-head{display:flex;align-items:center;gap:10px;margin:0 2px 8px}
.rm-sres-cat-badge{font-weight:800;font-size:.72rem;background:var(--rm-soft);color:var(--rm-ink);padding:3px 9px;border-radius:var(--r-sm);letter-spacing:.05em}
.rm-sres-cat-name{font-weight:700;font-size:.95rem;color:var(--rm-ink)}
.rm-sres-cat-count{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--rm-muted)}
.rm-sres-trains{display:flex;flex-direction:column;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);overflow:hidden}
.rm-sres-train{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;padding:11px 14px;text-decoration:none;color:var(--rm-ink);border-bottom:1px solid var(--rm-line)}
.rm-sres-train:last-child{border-bottom:0}
.rm-sres-train:hover{background:rgba(255,255,255,.03);color:var(--rm-ink)}
.rm-sres-tr-code{font-weight:700;font-size:.85rem;color:var(--rm-muted)}
.rm-sres-tr-route{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.94rem}
.rm-sres-tr-delay{font-weight:700;font-size:.9rem;flex:none}
@media(max-width:520px){
    .rm-sres-stations{grid-template-columns:1fr}
    .rm-sres-train{grid-template-columns:74px 1fr auto;gap:8px;padding:10px 12px}
    .rm-sres-tr-route{font-size:.85rem}
}

/* =====================================================================
   REGISTRO ERRORI (admin -> Diagnostica)
   ===================================================================== */
.errlog{display:flex;flex-direction:column;gap:10px}
.errlog-row{background:var(--rm-surface2);border:1px solid var(--rm-line);border-left:3px solid var(--rm-line);border-radius:var(--r-md);padding:12px 14px}
.errlog-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.errlog-type{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:var(--r-sm)}
.errlog-bad{background:rgba(var(--rm-red-rgb),.16);color:var(--rm-red-soft)}
.errlog-warn{background:rgba(var(--rm-amber-rgb),.16);color:var(--rm-amber)}
.errlog-ok{background:rgba(var(--rm-green-rgb),.16);color:var(--g-soft)}
.errlog-time{font-size:.74rem;color:var(--rm-muted)}
.errlog-url{font-size:.74rem;color:var(--rm-muted);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.errlog-msg{font-size:.92rem;color:var(--rm-ink);word-break:break-word}
.errlog-loc{font-size:.76rem;color:var(--rm-muted);margin-top:5px;word-break:break-all}
.errlog-trace{margin-top:8px}
.errlog-trace summary{cursor:pointer;font-size:.78rem;color:var(--rm-rail)}
.errlog-trace pre{margin:8px 0 0;background:var(--rm-deep);border-radius:var(--r-sm);padding:10px;font-size:.72rem;line-height:1.5;max-height:280px;overflow:auto;white-space:pre-wrap;color:var(--rm-muted)}

/* =====================================================================
   PROFILER (barra diagnostica in fondo, solo admin)
   ===================================================================== */
.rm-prof{position:fixed;left:0;right:0;bottom:0;z-index:9998;font-family:"JetBrains Mono",monospace;pointer-events:none}
.rm-prof-bar{pointer-events:auto;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;border:0;background:rgba(var(--rm-deep-rgb),.94);backdrop-filter:blur(8px);border-top:1px solid var(--rm-line);color:var(--rm-muted);font-size:.72rem;padding:6px 12px;cursor:pointer}
.rm-prof-bar span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rm-prof-bar i{width:8px;height:8px;border-radius:50%;display:inline-block}
.rm-prof-caret{transition:transform var(--t-base) ease;color:var(--rm-muted)}
.rm-prof.open .rm-prof-caret{transform:rotate(180deg)}
.rm-prof-detail{pointer-events:auto;display:none;max-height:45vh;overflow:auto;background:rgba(var(--rm-deep-rgb),.98);border-top:1px solid var(--rm-line);padding:12px 16px}
.rm-prof.open .rm-prof-detail{display:block}
.rm-prof-detail-h{color:var(--rm-ink);font-size:.75rem;font-weight:700;margin-bottom:8px}
.rm-prof-empty{color:var(--rm-muted);font-size:.74rem}
.rm-prof-q{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--rm-line)}
.rm-prof-q-ms{flex:none;font-size:.72rem;min-width:62px;text-align:right}
.rm-prof-q code{color:var(--rm-muted);font-size:.7rem;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.rm-prof-note{color:var(--rm-muted);font-size:.66rem;margin-top:8px;opacity:.8}

/* =====================================================================
   MISSIONI (home)
   ===================================================================== */
.rm-miss-h{font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rm-muted);margin-bottom:12px}
.rm-miss-list{display:flex;flex-direction:column;gap:14px}
.rm-miss{background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:12px 14px;transition:border-color var(--t-base) ease}
.rm-miss.is-done{border-color:rgba(var(--rm-accent-rgb),.4);background:rgba(var(--rm-accent-rgb),.06)}
.rm-miss-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rm-miss-title{font-weight:700;color:var(--rm-ink);font-size:.96rem}
.rm-miss.is-done .rm-miss-title{color:var(--g-soft)}
.rm-miss-reward{flex:none;font-weight:800;font-size:.8rem;color:var(--rm-amber);background:rgba(var(--rm-amber-rgb),.14);padding:2px 8px;border-radius:var(--r-sm)}
.rm-miss.is-done .rm-miss-reward{color:var(--g-soft);background:rgba(var(--rm-green-rgb),.16)}
.rm-miss-desc{color:var(--rm-muted);font-size:.84rem;margin:3px 0 9px}
.rm-miss-bar{height:7px;background:var(--rm-soft);border-radius:var(--r-pill);overflow:hidden}
.rm-miss-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--rm-accent),var(--g-soft));border-radius:var(--r-pill);transition:width .5s ease}
.rm-miss.is-done .rm-miss-bar span{background:var(--rm-green)}
.rm-miss-prog{font-size:.72rem;color:var(--rm-muted);margin-top:5px;text-align:right}

/* =====================================================================
   SPAZI PUBBLICITARI (Altervista) — centrati e responsivi
   ===================================================================== */
.ad-slot{display:flex;justify-content:center;align-items:center;margin:20px auto;max-width:100%;overflow:hidden;text-align:center}
.ad-slot script{display:none}
.ad-728x90{min-height:90px}
.ad-468x60{min-height:60px}
.ad-300x250,.ad-336x280{min-height:250px}
.ad-120x600,.ad-160x600{min-height:600px}
.ad-300x600{min-height:600px}
.ad-125x125{min-height:125px}
/* su mobile il leaderboard 728 viene centrato e l'eccesso nascosto */
@media(max-width:760px){.ad-728x90,.ad-468x60{min-height:60px}}

/* =====================================================================
   POSTA SUI PRONOSTICI (modalità brivido)
   ===================================================================== */
.rm-stake{margin:6px 0 4px;padding:14px;background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md)}
.rm-stake-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rm-stake-title{font-weight:700;color:var(--rm-ink);font-size:.95rem}
.rm-stake-bal{font-size:.8rem;color:var(--rm-muted)}
.rm-stake-bal b{color:var(--rm-amber)}
.rm-stake-hint{font-size:.8rem;color:var(--rm-muted);margin:6px 0 10px;line-height:1.45}
.rm-stake-chips{display:flex;gap:6px;flex-wrap:wrap}
.rm-chip-stake{flex:1;min-width:52px;padding:8px 4px;border:1px solid var(--rm-line);background:var(--rm-surface);color:var(--rm-muted);border-radius:var(--r-sm);font-weight:700;font-size:.85rem;cursor:pointer;transition:all var(--t-base) ease;font-family:inherit}
.rm-chip-stake:hover:not(:disabled){border-color:var(--rm-accent);color:var(--rm-ink)}
.rm-chip-stake.is-active{background:var(--rm-accent);border-color:var(--rm-accent);color:var(--rm-on-accent)}
.rm-chip-stake:disabled{opacity:.4;cursor:not-allowed}
.rm-stake-odds{margin-top:11px;padding:10px 12px;background:rgba(var(--rm-amber-rgb),.08);border:1px solid rgba(var(--rm-amber-rgb),.28);border-radius:var(--r-sm);font-size:.9rem;color:var(--rm-ink);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.rm-odds-val{color:var(--rm-amber);font-family:"JetBrains Mono",monospace;font-size:1.05rem}
.rm-stake-outcome{font-size:.85rem;color:var(--rm-muted)}

/* =====================================================================
   PAGINAZIONE TABELLE + NOTA CAMPIONE STATISTICHE
   ===================================================================== */
.rm-pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:14px 10px 6px;flex-wrap:wrap}
.rm-page-info{font-size:.85rem;color:var(--rm-muted);font-family:"JetBrains Mono",monospace}
.rm-sample-note{font-size:.78rem;margin:6px 0 0}

/* =====================================================================
   CLASSIFICA: PODIO, RIGA UTENTE, CTA COMMUNITY GIOVANE
   ===================================================================== */

.rm-lb-cta{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:14px 16px;background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md)}
.rm-lb-cta p{color:var(--rm-muted);font-size:.88rem;margin-top:2px}

/* =====================================================================
   PAGINA STATISTICHE: HERO CON IMMAGINE, GRAFICO 7 GIORNI, CATEGORIE
   ===================================================================== */
.rm-stats-hero{position:relative;padding:56px var(--gutter) 34px;margin:0 calc(var(--gutter) * -1) 8px;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(10,13,18,.82) 0%,rgba(10,13,18,.66) 55%,var(--rm-bg) 100%),url('../img/hero-treno.webp') center 38%/cover no-repeat;border:1px solid var(--rm-line)}
.rm-stats-hero h1,.rm-stats-hero .rm-sub{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.rm-stats-hero .rm-stat{background:rgba(12,16,22,.72);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:12px 14px}
@media (max-width:640px){.rm-stats-hero{padding:38px 16px 22px;background-position:62% 38%}}

.rm-week-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:190px;padding-top:6px}
.rm-week-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.rm-week-bar{width:min(46px,80%);background:linear-gradient(180deg,var(--rm-red),rgba(var(--rm-red-rgb),.35));border-radius:6px 6px 3px 3px;transition:height var(--t-slow) ease}

.rm-week-val{font-size:.78rem;font-weight:700}
.rm-week-day{font-size:.74rem;color:var(--rm-muted);text-transform:uppercase;letter-spacing:.05em}
.rm-week-n{font-size:.68rem;color:var(--rm-muted)}
.rm-chart-note{font-size:.78rem;margin:12px 0 0}
@media (max-width:640px){.rm-week-chart{gap:5px;height:160px}.rm-week-val{font-size:.66rem}.rm-week-n{display:none}}

.rm-cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.rm-cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rm-cards-4{grid-template-columns:1fr}}
.rm-cat-table th,.rm-cat-table td{white-space:nowrap}
.rm-panel-foot{padding-top:10px;border-top:1px solid var(--rm-line);margin-top:8px;font-size:.86rem}

/* =====================================================================
   IMMAGINE HERO IN HOME, AUTH SPLIT, 404, BANNER DOCUMENTI
   ===================================================================== */
.rm-home-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin:0 -4px;padding:64px 28px 34px;border:1px solid var(--rm-line);background:linear-gradient(180deg,rgba(10,13,18,.88) 0%,rgba(10,13,18,.78) 50%,var(--rm-bg) 100%),url('../img/hero-treno.webp') center 40%/cover no-repeat}
.rm-home-hero h1,.rm-home-hero .rm-sub{text-shadow:0 2px 16px rgba(0,0,0,.6)}
.rm-home-hero .rm-stats{position:relative}
.rm-home-hero .rm-stat{background:rgba(12,16,22,.74);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.09)}
@media (max-width:640px){.rm-home-hero{padding:44px 16px 22px;background-position:60% 40%}}

.auth-split{display:grid;grid-template-columns:1fr 1fr;max-width:860px;border:1px solid var(--rm-line);border-radius:var(--r-lg);overflow:hidden;background:var(--rm-surface2)}
.auth-visual{position:relative;min-height:420px;background:linear-gradient(200deg,rgba(10,13,18,.25) 0%,rgba(10,13,18,.82) 78%),url('../img/hero-treno.webp') 32% center/cover no-repeat;display:flex;align-items:flex-end;padding:22px}
.auth-visual-copy p{font-size:1.28rem;line-height:1.35;margin:10px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.auth-visual-copy strong{color:var(--rm-accent)}
.auth-split .auth-panel{margin:0;max-width:none;border:0;border-radius:0;padding:28px 26px}
@media (max-width:720px){.auth-split{grid-template-columns:1fr;max-width:440px}.auth-visual{min-height:150px;align-items:center}}

.rm-doc-banner{width:100%;height:auto;max-height:260px;object-fit:cover;object-position:center 42%;border-radius:var(--r-md);border:1px solid var(--rm-line);margin:0 0 20px;display:block}

/* =====================================================================
   PROFILO: HEADER CON AVATAR, PROGRESSO LIVELLO, TAB
   ===================================================================== */
.pf-head{margin-bottom:22px}
.pf-id{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.pf-avatar{flex:0 0 auto;width:64px;height:64px;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.6rem;font-weight:700;color:var(--rm-accent);background:var(--rm-surface2);border:1px solid var(--rm-line)}
.pf-name{font-size:1.7rem;margin:0 0 2px;letter-spacing:-.02em}
.pf-meta{font-size:.9rem}
.pf-level{color:var(--rm-accent);font-weight:700}
.pf-level-bar{width:min(320px,100%);height:7px;border-radius:var(--r-pill);background:var(--rm-line);margin-top:10px;overflow:hidden}
.pf-level-fill{height:100%;border-radius:var(--r-pill);background:var(--rm-accent)}
.pf-level-note{font-size:.72rem;margin-top:5px}
.pf-stats .rm-stat{padding:12px 14px}
.pf-dim{color:var(--rm-muted);font-weight:400;font-size:.82em}
@media (max-width:560px){.pf-avatar{width:52px;height:52px;font-size:1.35rem;border-radius:var(--r-md)}.pf-name{font-size:1.35rem}}

/* =====================================================================
   UNIFORMITÀ UI: tipografie e componenti legacy allineati allo standard
   ===================================================================== */
/* Titoli delle schede (treno) allineati alla scala di .ph-title */
.rm-th h1,.detail-panel > h1{font-size:clamp(1.75rem,3.6vw,2.35rem);line-height:1.05;letter-spacing:-.01em}
/* Eyebrow legacy identica a rm-eyebrow */
.eyebrow{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rm-brand);background:rgba(var(--rm-brand-rgb),.10);border:1px solid rgba(var(--rm-brand-rgb),.26);border-radius:var(--r-pill);padding:4px 12px;margin-bottom:12px}
/* Titoli sezione dei pannelli tutti sulla stessa scala */
.data-panel h2,.rm-panel-h,.side-panel h2{font-size:1.05rem;font-weight:700;letter-spacing:-.005em}
/* Le tabelle dentro qualunque pannello condividono lo stesso ritmo */
.data-panel .table,.rm-panel .table{--bs-table-bg:transparent;margin-bottom:0}
.data-panel .table th,.rm-panel .table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rm-muted);font-weight:700;border-color:var(--rm-line)}
.data-panel .table td,.rm-panel .table td{border-color:var(--rm-line)}
/* Bottoni-tab (classifica, ritardi, profilo) con lo stesso raggio ovunque */
.ph-actions .btn,.rm-filter-bar .btn{border-radius:var(--r-md)}

/* =====================================================================
   ADMIN: STRIP SALUTE SISTEMA + COERENZA COL DESIGN DEL SITO
   ===================================================================== */
.adm-health{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:10px 14px;margin-bottom:20px;font-size:.84rem}
.ah-item{display:inline-flex;align-items:center;gap:7px;color:var(--rm-muted);white-space:nowrap}
.ah-dot{width:8px;height:8px;border-radius:var(--r-pill);flex:none}
.ah-ok{background:var(--rm-accent)}
.ah-warn{background:var(--rm-amber)}
.ah-bad{background:var(--rm-red)}
.adm-title{font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.01em}
.adm-head .rm-eyebrow{margin-bottom:10px}
.admin-card{background:var(--rm-surface)}
@media (max-width:640px){.adm-health{gap:7px 12px;font-size:.78rem;padding:9px 12px}}

/* Tabella cookie nella policy */
.rm-cookie-table td{vertical-align:top;font-size:.9rem}
.rm-cookie-table td:first-child{white-space:nowrap}

/* =====================================================================
   MODALITÀ BRIVIDO: ALL-IN + ANALISI BINARIOLIVE AI
   ===================================================================== */
.rm-chip-allin{border-color:rgba(var(--rm-red-rgb),.5)!important;color:var(--rm-red)!important;font-weight:700}
.rm-chip-allin.is-active{background:var(--rm-red)!important;color:var(--rm-on-red)!important;border-color:var(--rm-red)!important}
.rm-allin-warn{margin:8px 0 0;padding:9px 12px;border-radius:var(--r-md);background:rgba(var(--rm-red-rgb),.08);border:1px solid rgba(var(--rm-red-rgb),.3);color:var(--rm-red);font-size:.84rem}

.rm-ai{background:var(--rm-surface2);border:1px solid var(--rm-line);border-left:3px solid var(--rm-accent);border-radius:var(--r-md);padding:13px 15px;margin-bottom:14px}
.rm-ai-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.rm-ai-title{font-weight:800;font-size:.92rem;letter-spacing:-.005em}
.rm-ai-n{font-size:.72rem;color:var(--rm-muted)}
.rm-ai-body{font-size:.9rem;margin:0 0 9px;line-height:1.5}
.rm-ai-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rm-ai-prob{font-size:.85rem}
.rm-ai-prob b{color:var(--rm-accent)}
/* L'avviso «treno irregolare» dentro l'aiutante: stesso corpo del testo
   ma in ambra, perche' non e' una previsione — e' un avvertimento sul
   rischio, e al gioco cambia la scelta. */
/* L'invito alle notifiche dopo il pronostico: separato dalla nota che lo
   precede, perche' e' un'offerta e non una spiegazione. */
.rm-predict-push{margin-top:8px;padding-top:8px;border-top:1px dashed var(--rm-line)}
.rm-ai-warn{color:var(--rm-amber)}
.rm-ai-warn b{color:var(--rm-amber)}
.rm-ai-note{font-size:.7rem;color:var(--rm-muted);margin:9px 0 0}

/* Pannello "hai già pronosticato questa corsa" nella scheda treno */
.rm-predict-mine{background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px 16px}
.rm-predict-mine-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rm-predict-mine-note{font-size:.82rem;color:var(--rm-muted);margin:12px 0 0}

/* Avviso corsa notturna in viaggio nel form pronostico */
.rm-run-note{background:rgba(94,140,255,.08);border:1px solid rgba(94,140,255,.3);border-radius:var(--r-md);padding:8px 12px;font-size:.84rem;margin:0 0 12px}

/* Barra puntualità nella classifica treni */
.rm-punct-bar{width:90px;height:5px;border-radius:var(--r-pill);background:var(--rm-line);margin:5px 0 0 auto;overflow:hidden}
.rm-punct-fill{height:100%;border-radius:var(--r-pill);background:var(--rm-accent)}
.rm-punct-fill.is-bad{background:var(--rm-red)}

/* =====================================================================
   BANNER "RISULTATI ARRIVATI" IN HOME
   ===================================================================== */
.rm-news{background:var(--rm-surface);border:1px solid var(--rm-line);border-left:3px solid var(--rm-accent);border-radius:var(--r-md);padding:18px 20px}
.rm-news-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rm-news-title{font-size:1.25rem;margin:8px 0 4px;letter-spacing:-.01em}
.rm-news-sub{margin:0;color:var(--rm-muted);font-size:.92rem}
.rm-news-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rm-news-chip{display:inline-flex;align-items:center;gap:8px;background:var(--rm-surface2);border:1px solid var(--rm-line);border-radius:var(--r-pill);padding:6px 13px;font-size:.82rem;text-decoration:none;color:inherit;transition:border-color var(--t-base)}
.rm-news-chip:hover{border-color:var(--rm-accent)}
.rm-news-out{color:var(--rm-muted)}
.rm-news-more{border-style:dashed}
@media (max-width:560px){.rm-news{padding:14px 15px}.rm-news-chip{font-size:.76rem;padding:5px 10px}}

/* =====================================================================
   SCHEDA TRENO: BANDA VISUALE PER CATEGORIA + PILL + SFIDA
   ===================================================================== */
.rm-th-hero{position:relative;margin:-1.1rem -1.1rem 16px;padding:1.1rem 1.1rem .9rem;border-radius:16px 16px 0 0;overflow:hidden;isolation:isolate}
.rm-th-hero::before{content:"";position:absolute;inset:0;background:url('../img/hero-treno.webp') right 30%/auto 165% no-repeat;opacity:.16;z-index:-2;filter:saturate(.7)}
.rm-th-hero::after{content:"";position:absolute;inset:0;z-index:-1}
/* L'alone della testata non cambia colore con la categoria (01/10/2026):
   rosso per i Frecciarossa e verde per i regionali erano due colori di stato. */
.rm-th-hero::after{background:linear-gradient(105deg,rgba(var(--rm-rail-rgb),.12) 0%,rgba(var(--rm-rail-rgb),.04) 45%,transparent 75%)}
.rm-th-hero--night::before{opacity:.22;filter:saturate(.5) brightness(.8)}
.rm-th-hero .rm-th h1{text-shadow:0 2px 12px rgba(0,0,0,.45)}

.rm-cat-pill{display:inline-block;vertical-align:middle;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 11px;margin-left:2px;font-family:"JetBrains Mono",monospace}
/* LE CATEGORIE NON HANNO COLORE (01/10/2026, design system). Verde, ambra,
   arancio e rosso dicono solo quanto e' in ritardo un treno, il blu solo
   BinarioLive: «Alta velocità» in rosso diceva «critico» a ogni Frecciarossa,
   e il verde dei regionali «in orario». La categoria la dice la parola: la
   pastiglia e' una sola, neutra. Le classi per famiglia restano nel markup. */
.rm-cat-pill--av,.rm-cat-pill--ic,.rm-cat-pill--reg,.rm-cat-pill--night,.rm-cat-pill--italo,
.rm-cat-pill--met,.rm-cat-pill--exp,.rm-cat-pill--unk{background:rgba(var(--rm-ink-rgb),.06);color:var(--rm-ink);border:1px solid rgba(var(--rm-ink-rgb),.26)}

.rm-challenge{margin-top:12px}
.rm-news-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:560px){.rm-th-hero::before{background-size:auto 120%;background-position:right -40px top 30%}}

/* Admin: editor punti inline nella riga utente */
.admin-user-edit{position:relative}
.admin-user-edit summary{list-style:none;cursor:pointer;display:inline-block}
.admin-user-edit summary::-webkit-details-marker{display:none}
.admin-points-form{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:12px;display:flex;gap:10px;align-items:flex-end;box-shadow:var(--sh-2)}
.admin-points-form label{font-size:.72rem;color:var(--rm-muted);display:flex;flex-direction:column;gap:4px;margin:0}
.admin-points-form input{width:110px}

/* Gestione utenti: pannello a tendina "Gestisci" con sezioni ------------ */
.admin-users{overflow:visible} /* consente al pannello di uscire dalla riga */
.admin-user-manage{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(440px,88vw);max-height:72vh;overflow:auto;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-3)}
.aum-group{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--rm-line)}
.aum-group:last-child{border-bottom:0;padding-bottom:0}
.aum-h{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rm-muted)}
.aum-suspend,.aum-identity{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aum-group form{margin:0}
.admin-user-manage .admin-points-form{position:static;box-shadow:none;border:0;padding:0;background:transparent;flex-wrap:wrap}
.admin-user.is-suspended{background:rgba(180,35,42,.06)}
.admin-userfilters{display:flex;gap:6px;flex-wrap:wrap}

/* =====================================================================
   SCHEDA TRENO: TIMELINE VERTICALE FERMATE + STORICO A BARRE
   ===================================================================== */
.rm-prog-train{width:12px;height:12px;border-radius:3px;background:var(--rm-accent);border:2px solid var(--rm-bg);transform:translate(-50%,-50%) rotate(45deg);top:50%;position:absolute}

.rm-tl{margin-top:14px}
.rm-tl-row{display:grid;grid-template-columns:52px 22px 1fr auto;align-items:center;gap:0 10px;padding:7px 0;position:relative}
.rm-tl-time{font-size:.86rem;color:var(--rm-muted);text-align:right}
.rm-tl-time.is-real{color:var(--rm-rail);font-weight:700}
.rm-tl-rail{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.rm-tl-rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--rm-line)}
.rm-tl-row:first-child .rm-tl-rail::before{top:50%}
.rm-tl-row:last-child .rm-tl-rail::before{bottom:50%}
.rm-tl-dot{position:relative;z-index:1;width:10px;height:10px;border-radius:var(--r-pill);background:var(--rm-surface);border:2px solid var(--rm-line)}
.rm-tl-row.is-past .rm-tl-rail::before{background:var(--rm-rail)}
.rm-tl-row.is-past .rm-tl-dot{background:var(--rm-rail);border-color:var(--rm-rail)}
.rm-tl-row.is-next .rm-tl-dot{width:14px;height:14px;border-color:var(--rm-ink);background:var(--rm-bg)}
.rm-tl-row.is-past .rm-tl-name{color:var(--rm-muted)}
.rm-tl-row.is-next{background:var(--rm-surface2);border-radius:var(--r-md);margin:0 -8px;padding-left:8px;padding-right:8px}
.rm-tl-name{font-weight:600;font-size:.93rem}
.rm-tl-name a{color:inherit;text-decoration:none}
.rm-tl-name a:hover{text-decoration:underline}
.rm-tl-nextpill{font-family:"JetBrains Mono",monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--rm-accent);border:1px solid rgba(var(--g-soft-rgb),.4);border-radius:var(--r-pill);padding:2px 8px;margin-left:6px;vertical-align:1px}
.rm-tl-sub{display:block;font-size:.72rem;color:var(--rm-muted)}
.rm-tl-sub:empty{display:none}
.rm-tl-delay{font-size:.86rem;min-width:34px;text-align:right}
@media (max-width:560px){.rm-tl-row{grid-template-columns:44px 18px 1fr auto}.rm-tl-time{font-size:.78rem}}

.rm-hist-sum{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:.82rem;color:var(--rm-muted);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:9px 13px;margin-bottom:12px;background:var(--rm-surface2)}
.rm-hist-sum b{color:var(--rm-ink)}
.rm-hist-sum b.t-red{color:var(--rm-red)}
.rm-hist-row{display:grid;grid-template-columns:74px 1fr 54px;gap:12px;align-items:center;padding:5px 0;border-bottom:1px solid var(--rm-line)}
.rm-hist-row:last-child{border-bottom:0}
.rm-hist-date{font-size:.82rem;color:var(--rm-muted);white-space:nowrap}
.rm-hist-bar{position:relative;height:10px;background:var(--rm-surface2);border-radius:var(--r-pill);overflow:hidden}
.rm-hist-fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);background:var(--rm-red)}
.rm-hist-fill.is-ok{background:var(--rm-accent);width:2%!important;min-width:6px}
.rm-hist-canc{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(var(--rm-red-rgb),.35) 0 5px,transparent 5px 10px)}
.rm-hist-val{text-align:right;font-size:.84rem}

/* =====================================================================
   FORM PRONOSTICO: CHIP RAPIDE + PANNELLO "IL TUO PRONOSTICO"
   ===================================================================== */
.rm-guess-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px}
.rm-guess-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.rm-chip-guess{border:1px solid var(--rm-line);background:var(--rm-surface2);color:var(--rm-ink);border-radius:var(--r-md);padding:8px 4px;font-family:"JetBrains Mono",monospace;font-size:.86rem;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.rm-chip-guess:hover{border-color:var(--rm-accent)}
.rm-chip-guess.is-active{background:var(--rm-accent);border-color:var(--rm-accent);color:var(--rm-on-accent);font-weight:700}
.rm-chip-guess-canc{color:var(--rm-red)}
.rm-chip-guess-canc.is-active{background:var(--rm-red);border-color:var(--rm-red);color:var(--rm-on-red)}
.rm-guess-fine{font-size:.8rem;color:var(--rm-muted)}
.rm-guess-fine .form-control{max-width:130px}
.rm-guess-adv{margin-top:10px}
.rm-guess-adv summary{font-size:.8rem;color:var(--rm-muted);cursor:pointer;list-style:none}
.rm-guess-adv summary::before{content:"+ "}
.rm-guess-adv[open] summary::before{content:"\2212 "}
.rm-guess-adv summary::-webkit-details-marker{display:none}
.rm-guess-adv label{margin-top:10px;font-size:.8rem}

.rm-mypred-main{margin-bottom:12px}
.rm-mypred-big{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.rm-mypred-cap{font-size:.78rem;color:var(--rm-muted)}
.rm-mypred-rows div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rm-line);font-size:.88rem}
.rm-mypred-rows div:last-child{border-bottom:0}
.rm-mypred-rows span{color:var(--rm-muted)}

/* ===================================================================
   BinarioLive v2 — HERO homepage (namespaced "bl-", riusa i token --rm-*).
   Appended in coda: vince per cascata. Convive con Bootstrap e con rm-.
   =================================================================== */
.bl-hero{position:relative;overflow:hidden;padding:52px 0 6px}
.bl-railbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.bl-glow{position:absolute;width:440px;height:440px;border-radius:50%;filter:blur(90px)}
.bl-g1{top:-150px;right:-50px;background:rgba(var(--rm-accent-rgb),.14)}
.bl-g2{bottom:-190px;left:-90px;background:rgba(var(--rm-amber-rgb),.11)}
.bl-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--rm-line) 14%,var(--rm-line) 86%,transparent)}
.bl-la{top:38%}.bl-lb{top:62%}
.bl-node{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--rm-surface);border:2px solid var(--rm-accent);transform:translate(-50%,-50%)}
.bl-spark{position:absolute;width:56px;height:2px;top:38%;left:-56px;background:linear-gradient(90deg,transparent,var(--rm-accent));border-radius:2px;animation:blRun 7s linear infinite}
.bl-spark2{top:62%;animation-duration:9s;animation-delay:2s;background:linear-gradient(90deg,transparent,var(--rm-amber))}
@keyframes blRun{0%{left:-56px}100%{left:100%}}

.bl-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
/* UNA CASELLA DI GRIGLIA NON SI RESTRINGE DA SOLA, e su 360 px si vedeva.
   Gli elementi dentro una griglia hanno `min-width:auto`: non scendono sotto
   la larghezza minima del loro contenuto. Su un telefono da 360 px la
   colonna veniva calcolata 354,328 px dentro un contenitore da 336, e la
   home — l'unica pagina del sito — scorreva di sei pixel in orizzontale.
   Misurato il 13/09/2026 su tutte e quattordici le pagine principali: era
   l'unica che sfondava, e 360 px e' la larghezza di meta' degli Android.
   Con `min-width:0` la colonna torna 336 e il testo va a capo come deve. */
.bl-hero-grid>*{min-width:0}
.bl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--rm-brand)}
.bl-h1{font-family:"Bricolage Grotesque", system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.2rem,4.8vw,3.5rem);margin:16px 0 0;text-wrap:balance;color:var(--rm-ink)}
.bl-h1 em{font-style:normal;color:var(--rm-brand)}
.bl-lede{margin-top:18px;font-size:1.1rem;color:var(--rm-muted);max-width:38ch;line-height:1.55}
.bl-lede b{color:var(--rm-ink);font-weight:600}
.bl-search{margin-top:26px;display:flex;gap:8px;align-items:center;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:15px;padding:8px;box-shadow:var(--rm-shadow);transition:border-color var(--t-base),box-shadow var(--t-base)}
.bl-search:focus-within{border-color:var(--rm-accent);box-shadow:0 0 0 4px rgba(var(--rm-accent-rgb),.16)}
.bl-search>svg{margin-left:8px;color:var(--rm-muted);flex:0 0 auto}
.bl-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--rm-ink);font:inherit;font-size:1.02rem;outline:none;padding:9px 2px}
.bl-search input::placeholder{color:var(--rm-muted);opacity:.75}
.bl-search .rm-btn-primary{border-radius:var(--r-md);flex:0 0 auto}
.bl-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bl-chips-lbl{font-size:.82rem;color:var(--rm-muted)}
.bl-chip{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--rm-line);color:var(--rm-muted);background:var(--rm-surface);text-decoration:none;transition:var(--t-base)}
.bl-chip:hover{border-color:var(--rm-accent);color:var(--rm-ink);transform:translateY(-1px);text-decoration:none}
/* La pastiglia del percorso si distingue dalle stazioni accanto: porta
   altrove — a una ricerca di viaggio, non a una scheda — e la forma deve
   dirlo prima che si legga la freccia.
   STA QUI E NON PIU' SU, subito dopo `.bl-chip`: scritta prima, veniva
   cancellata dalla regola base che arriva dopo con la stessa specificita'.
   La pastiglia usciva azzurra come le altre e il segnale spariva. */
/* Una tratta, non uno stato: il verde e' «in orario» (design system). Il
   colore dei collegamenti, rm-rail, come gli altri link. 01/10/2026. */
.bl-chip-percorso{border-color:rgba(var(--rm-rail-rgb),.55);color:var(--rm-rail)}
.bl-chip-percorso:hover{background:rgba(var(--rm-rail-rgb),.14);border-color:var(--rm-rail);color:var(--rm-ink)}

.bl-board{position:relative;z-index:1;background:linear-gradient(180deg,var(--rm-surface),var(--rm-surface2));border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:6px;box-shadow:var(--rm-shadow)}
.bl-board-top{display:flex;justify-content:space-between;align-items:center;padding:13px 15px 11px}
/* `h2.bl-board-t` E `!important`, e nessuno dei due e' pignoleria.
   Il titolo del tabellone era uno `span`; diventando un `h2` finisce sotto
   due regole di titolo che qui non vanno bene. La prima —
   `.rm-home h1,.rm-home h2,.rm-home h3` — si batte con il selettore
   qualificato, che pareggia la specificita' e vince per posizione. La
   seconda no: il foglio impone il carattere dei titoli con un
   `!important` globale (riga ~1650, `h1,h2,h3,...{font-family:"Bricolage
   Grotesque"!important}`), e contro `!important` la specificita' non conta.
   MISURATO, non dedotto: senza questa riga il titolo usciva in Bricolage
   mentre l'etichetta <<LIVE>> accanto, l'orario e il codice restavano
   monospaziati — cioe' cambiare il tag cambiava l'aspetto, che e' l'unica
   cosa che non doveva succedere. */
.bl-board-t,h2.bl-board-t{font-family:"JetBrains Mono",ui-monospace,monospace!important;font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--rm-muted);margin:0}
/* Le due porte sotto il tabellone: piccole, in riga, senza rubare la scena
   alle quattro corse. */
.bl-board-piu{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 15px 12px;border-top:1px solid var(--rm-line)}
.bl-board-piu a{font-size:.78rem;font-weight:600;color:var(--rm-rail);text-decoration:none}
.bl-board-piu a:hover,.bl-board-piu a:focus-visible{text-decoration:underline}
.bl-livetag{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;color:var(--rm-accent);text-transform:uppercase;letter-spacing:.08em}
.bl-livetag i{width:6px;height:6px;border-radius:50%;background:var(--rm-accent);animation:blPulse 2s infinite}
@keyframes blPulse{0%,100%{opacity:1}50%{opacity:.3}}
.bl-brow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 15px;border-top:1px solid var(--rm-line);text-decoration:none;color:inherit;transition:background var(--t-base)}
.bl-brow:hover{background:var(--rm-surface2);color:inherit;text-decoration:none}
.bl-bcode{font-weight:700;font-size:.9rem;color:var(--rm-ink)}
.bl-bdest{font-size:.85rem;color:var(--rm-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-bdest small{display:block;color:var(--rm-muted);opacity:.65;font-size:.72rem}
.bl-bdelay{font-weight:700;font-size:1.02rem;text-align:right;white-space:nowrap}
.bl-bdelay.late{color:var(--rm-red)}.bl-bdelay.ok{color:var(--rm-accent)}.bl-bdelay.canc{color:var(--rm-muted)}

.bl-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.bl-stat{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:18px 16px;transition:transform var(--t-base),border-color var(--t-base)}
.bl-stat:hover{transform:translateY(-3px);border-color:var(--rm-accent)}
.bl-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:1.7rem;letter-spacing:-.03em;color:var(--rm-ink);line-height:1.1}
.bl-n.rail{color:var(--rm-accent)}.bl-n.late{color:var(--rm-red)}
.bl-sl{font-size:.78rem;color:var(--rm-muted);margin-top:4px}

@keyframes blUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bl-hero-copy>*{animation:blUp .7s var(--ease-out) both}
.bl-hero-copy>*:nth-child(2){animation-delay:.06s}
.bl-hero-copy>*:nth-child(3){animation-delay:.12s}
.bl-hero-copy>*:nth-child(4){animation-delay:.18s}
.bl-hero-copy>*:nth-child(5){animation-delay:.24s}
.bl-board{animation:blUp .8s var(--ease-out) both;animation-delay:.16s}
.bl-stats>*{animation:blUp .7s var(--ease-out) both}
.bl-stats>*:nth-child(1){animation-delay:.26s}.bl-stats>*:nth-child(2){animation-delay:.32s}
.bl-stats>*:nth-child(3){animation-delay:.38s}.bl-stats>*:nth-child(4){animation-delay:.44s}

@media(max-width:900px){.bl-hero-grid{grid-template-columns:1fr;gap:26px}.bl-stats{grid-template-columns:repeat(2,1fr)}.bl-railbg{opacity:.5}}
@media(max-width:560px){.bl-hero{padding:30px 0 4px}}
@media (prefers-reduced-motion:reduce){.bl-hero-copy>*,.bl-board,.bl-stats>*,.bl-spark,.bl-livetag i{animation:none!important}}

/* ---- BinarioLive v2 — sezioni homepage ---- */
.bl-sec{padding:54px 0}
.bl-sec-head{max-width:62ch;margin-bottom:30px}
.bl-eyebrow.gold{color:var(--rm-amber)}
.bl-h2{font-family:"Bricolage Grotesque", system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.6rem,3.2vw,2.3rem);margin:12px 0 0;color:var(--rm-ink);text-wrap:balance}
.bl-sub{margin-top:12px;color:var(--rm-muted);font-size:1.05rem;line-height:1.55;max-width:62ch}
.bl-sub b{color:var(--rm-ink);font-weight:600}

/* value pillars */
.bl-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl-pillar{display:flex;flex-direction:column;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:26px 24px;text-decoration:none;color:var(--rm-ink);transition:transform .22s,border-color .22s,box-shadow .22s}
.bl-pillar:hover{transform:translateY(-4px);border-color:var(--rm-accent);box-shadow:var(--rm-shadow);color:var(--rm-ink);text-decoration:none}
.bl-pillar-game:hover{border-color:var(--rm-amber)}
.bl-pic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:rgba(var(--rm-accent-rgb),.14);color:var(--rm-accent);margin-bottom:16px}
.bl-pic.gold{background:rgba(var(--rm-amber-rgb),.14);color:var(--rm-amber)}
.bl-pillar h3{font-size:1.18rem;margin:0}
.bl-pillar p{margin:9px 0 0;color:var(--rm-muted);font-size:.95rem}
.bl-go{margin-top:16px;display:inline-flex;gap:6px;align-items:center;color:var(--rm-accent);font-weight:600;font-size:.88rem;transition:gap var(--t-base)}
.bl-go.gold{color:var(--rm-amber)}
.bl-pillar:hover .bl-go{gap:10px}

/* predictions showcase (oro) */
.bl-game{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;background:radial-gradient(120% 140% at 90% -10%,rgba(var(--rm-amber-rgb),.12),transparent 55%),var(--rm-surface);border:1px solid var(--rm-line);border-radius:24px;padding:42px}
.bl-game-copy .bl-sub{max-width:44ch}
.bl-feats{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.bl-feat{display:flex;gap:12px;align-items:flex-start}
.bl-fk{width:26px;height:26px;border-radius:var(--r-sm);background:rgba(var(--rm-amber-rgb),.14);color:var(--rm-amber);display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
.bl-feat b{color:var(--rm-ink)}
.bl-feat>div span{color:var(--rm-muted);font-size:.92rem}
.bl-game-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.rm-btn.bl-btn-gold{background:var(--rm-amber);border-color:var(--rm-amber);color:var(--rm-on-amber);font-weight:700}
.rm-btn.bl-btn-gold:hover{background:#e6ad24;border-color:#e6ad24;color:var(--rm-on-amber)}
.bl-btn-lg{padding:13px 22px;font-size:1rem;border-radius:var(--r-md)}
.bl-tdg{display:block;background:var(--rm-surface2);border:1px solid rgba(var(--rm-amber-rgb),.4);border-radius:var(--r-lg);padding:24px;text-decoration:none;color:var(--rm-ink);box-shadow:var(--rm-shadow);transition:transform var(--t-base),border-color var(--t-base)}
.bl-tdg:hover{transform:translateY(-3px);border-color:var(--rm-amber);color:var(--rm-ink);text-decoration:none}
.bl-tdg-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bl-tdg-tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rm-amber);border:1px solid rgba(var(--rm-amber-rgb),.45);padding:4px 9px;border-radius:var(--r-pill)}
.bl-tdg-dep{font-size:.75rem;color:var(--rm-muted)}
.bl-tdg-code{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-top:16px;color:var(--rm-amber)}
.bl-tdg-route{color:var(--rm-muted);font-size:.92rem;margin-top:2px}
.bl-tdg-meta{margin-top:12px;font-size:.86rem;color:var(--rm-muted)}
.bl-tdg-meta b{color:var(--rm-ink)}
.bl-tdg-cta{display:inline-block;margin-top:16px;color:var(--rm-amber);font-weight:700;font-size:.9rem}
.bl-tdg-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* punctuality trend */
.bl-trend{display:grid;grid-template-columns:.82fr 1.4fr;gap:32px;align-items:center}
.bl-trend-facts{display:flex;flex-direction:column;gap:18px}
.bl-tfact{display:flex;align-items:baseline;gap:12px}
.bl-tn{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--rm-ink)}
.bl-tn.rail{color:var(--rm-accent)}.bl-tn.late{color:var(--rm-red)}
.bl-tl{color:var(--rm-muted);font-size:.88rem;line-height:1.35}
.bl-chartbox{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-lg);padding:22px}
.bl-chart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.9rem;color:var(--rm-ink)}
.bl-chart-h .mono{color:var(--rm-muted);font-size:.75rem}
.bl-chart{width:100%;height:168px;display:block}
.bl-chart-x{display:flex;justify-content:space-between;margin-top:8px;color:var(--rm-muted);font-size:.68rem}

/* how it works */
.bl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bl-step{position:relative;padding-top:6px}
.bl-snum{font-weight:700;font-size:.95rem;color:var(--rm-accent);border:1px solid var(--rm-line);width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--rm-surface);position:relative;z-index:1}
.bl-step h3{font-size:1.15rem;margin:16px 0 0}
.bl-step p{margin:8px 0 0;color:var(--rm-muted);font-size:.93rem}
.bl-sline{position:absolute;top:21px;left:52px;right:-12px;height:1px;background:linear-gradient(90deg,var(--rm-accent),transparent)}

/* cta band */
.bl-ctaband{background:radial-gradient(90% 160% at 50% -30%,rgba(var(--rm-accent-rgb),.14),transparent 60%),var(--rm-surface);border:1px solid var(--rm-line);border-radius:24px;padding:52px 32px;text-align:center}
.bl-ctaband .bl-h2{max-width:22ch;margin-inline:auto}
.bl-ctaband-row{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  .bl-pillars,.bl-steps{grid-template-columns:1fr}
  .bl-game{grid-template-columns:1fr;padding:28px}
  .bl-trend{grid-template-columns:1fr}
  .bl-sline{display:none}
}
@media(max-width:560px){.bl-sec{padding:38px 0}}

/* ---- BinarioLive v2 — CLASSIFICA: quadro orario, non cento schede ----
   La vecchia versione era un riquadro con dentro una griglia per giocatore,
   ognuna col suo quadratino di iniziali: cento volte lo stesso ornamento.
   Una classifica si legge IN COLONNA — si cerca la propria riga e si
   confrontano i numeri — quindi prende la forma del tabellone come
   /stazioni e /tratte, e il grosso dello stile arriva da .tbl-board.

   NOTA su una collisione riparata: la regola di prima si chiamava .bl-lb, e
   con quel nome colpiva ANCHE `<span class="bl-line bl-lb">`, una delle due
   linee decorative della scena. Le dava sfondo pieno e bordo su un elemento
   alto 2px, sovrascrivendo il gradiente — quindi le due linee non erano
   uguali. Ora i nomi sono `bl-lb-*` e la scena e' tornata simmetrica.
   `.bl-rank` NON e' stata toccata: appartiene alla classifica delle
   stazioni, che e' un altro componente. */
.bl-lb-pos{width:56px;text-align:center;font-weight:700}
.bl-lb-str{width:88px}
.bl-lb-t tbody tr.is-podio .bl-lb-pos{color:var(--rm-amber);font-size:1.15rem}
/* La propria riga si trova a colpo d'occhio: e' l'unica cosa che si cerca
   davvero in una classifica. Il filo verde a sinistra invece dell'ambra
   dell'hover, cosi' i due segnali non si confondono. */
.bl-lb-t tbody tr.is-me{background:rgba(var(--rm-accent-rgb),.08)}
.bl-lb-t tbody tr.is-me td:first-child{box-shadow:inset 2px 0 0 0 var(--rm-accent)}
.bl-youtag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(var(--rm-accent-rgb),.18);color:var(--rm-accent);padding:2px 7px;border-radius:var(--r-pill);margin-left:8px;white-space:nowrap}
@media(max-width:560px){
  /* Lo streak e' la colonna meno consultata: sparisce per prima, cosi'
     nome e punti restano leggibili senza scorrere in orizzontale. */
  .bl-lb-str{display:none}
  .bl-lb-pos{width:38px}
}

/* ===================================================================
   BinarioLive v2 — COERENZA: porta le sezioni dinamiche della home
   (markup rm-, alcune rigenerate da app.js) al linguaggio bl-.
   Scoped a .rm-home: nessun effetto sulle altre pagine, nessun JS toccato.
   =================================================================== */
.rm-home .rm-sec,.rm-home .rm-block{margin:0;padding:42px 0}
.rm-home .rm-block-tight{padding-top:0}
.rm-home .rm-sec-head{margin-bottom:24px;align-items:end}
/* Sulla scala di --rm-h2 (vedi GERARCHIA DEI TITOLI): .rm-home non e' solo la
   home, e' l'involucro di Statistiche, /treni, /mappa, classifiche e ritardi
   di oggi, che con 2.15rem avevano titoli di sezione quasi grandi quanto il
   titolo della pagina (34px contro 40). Le fasce promozionali (.bl-h2)
   restano grandi: non sono sezioni, sono richiami. */
.rm-home .rm-sec-head h2,.rm-home .rm-block h2{font-family:"Bricolage Grotesque", system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.08;font-size:var(--rm-h2);color:var(--rm-ink)}
.rm-home .rm-sec-head p{color:var(--rm-muted);font-size:1rem;margin-top:8px}
.rm-home .rm-sec-head a,.rm-home .rm-sec-link{color:var(--rm-accent);font-weight:600;font-size:.9rem}
.rm-home .rm-sec-note{color:var(--rm-muted);font-size:.82rem}
.rm-home .rm-panel{border-radius:var(--r-lg);padding:22px}
.rm-home .rm-panel-h{font-size:1.05rem}
.rm-home .rm-evi-card{border-radius:var(--r-md);transition:transform var(--t-base) ease,border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.rm-home .rm-evi-card:hover{transform:translateY(-3px);border-color:var(--rm-red);box-shadow:var(--rm-shadow)}
.rm-home .rm-mt-row{border-radius:var(--r-md);transition:transform var(--t-base),border-color var(--t-base)}
.rm-home .rm-mt-row:hover{transform:translateY(-2px);border-color:var(--rm-accent)}
.rm-home .rm-strank-row:not(.rm-strank-head):hover{background:var(--rm-surface2)}
.rm-home .rm-news{border-radius:var(--r-lg)}
.rm-home .rm-onb{border-radius:var(--r-lg)}
.rm-home .rm-miss{border-radius:var(--r-md)}
.rm-home .score-row{transition:background var(--t-base)}
.rm-home .score-row:hover{background:var(--rm-surface2)}

/* ===================================================================
   BinarioLive v2 — POLISH GLOBALE dei componenti condivisi.
   Additivo (hover/transizioni/accento): eleva profilo, scheda treno,
   record, statistiche, puntualità allo stesso linguaggio della home.
   =================================================================== */
/* eyebrow coerente con bl-eyebrow */
.rm-eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--rm-accent)}
/* intestazioni di pagina (page_header) */
.ph-title{font-family:"Bricolage Grotesque", system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}
/* IL TITOLO DI /statistiche NON ERA VESTITO DA NESSUNO. Quella pagina
   costruisce l'intestazione a mano con `.rm-hero.rm-stats-hero > div > h1`,
   ma le regole del titolo puntano a `.rm-hero-copy h1`: nessuna lo
   raggiungeva, quindi vinceva il valore predefinito di Bootstrap e il
   titolo usciva a 22px in peso 500 — piu' PICCOLO e piu' LEGGERO dei suoi
   stessi h2 (24px/800). La gerarchia della pagina era rovesciata.
   Misurato nel browser il 10/09/2026. Stessa scala di .ph-title, cosi'
   tutte le pagine del sito aprono con lo stesso titolo. */
.rm-stats-hero h1{font-family:"Bricolage Grotesque", system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;
  font-size:clamp(1.75rem,3.6vw,2.35rem)}
.ph-chip{transition:transform var(--t-base) ease,border-color var(--t-base) ease}
.ph-chip:hover{transform:translateY(-2px);border-color:var(--rm-accent)}
.ph-n{color:var(--rm-accent)}
/* stat tile (profilo e altrove) */
.rm-stat{transition:transform var(--t-base) ease,border-color var(--t-base) ease}
.rm-stat:hover{transform:translateY(-3px);border-color:var(--rm-accent)}
/* pannelli e card */
.data-panel,.rm-panel,.side-panel{border-radius:var(--r-lg);transition:border-color var(--t-base) ease}
.rm-card{transition:transform var(--t-base) ease,border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.rm-card:hover{transform:translateY(-4px);border-color:var(--rm-accent);box-shadow:var(--rm-shadow)}
/* metriche chiave/valore → tile più definite */
.metric-grid span,.detail-metrics span{border-radius:var(--r-md);transition:border-color var(--t-base) ease}
.metric-grid span:hover,.detail-metrics span:hover{border-color:var(--rm-accent)}
/* profilo: avatar e barra livello con accento */
.pf-avatar{background:linear-gradient(135deg,var(--rm-accent),var(--rm-green));color:var(--rm-on-accent)}
.pf-level-fill{background:var(--rm-accent)}

/* ---- FIX autocomplete: la tendina deve stare SOPRA stats/chip/sezioni ----
   Causa: bl-hero-grid e bl-stats avevano lo stesso z-index e l'hero aveva
   overflow:hidden che tagliava la tendina. Soluzione: l'hero non taglia più
   (i bagliori vengono clippati dal solo .bl-railbg), e la griglia sta sopra
   le stats così la tendina (dentro la griglia) copre tutto ciò che ha sotto. */
.bl-hero{overflow:visible}
.bl-railbg{overflow:hidden}
.bl-hero-grid{z-index:3}
.bl-stats{z-index:1}
.ac-box{z-index:200}
/* .bl-search e .bl-chips sono figli animati (blUp) di .bl-hero-copy: l'animazione
   li rende stacking-context persistenti, così le chip (dopo nel DOM) coprivano la
   tendina. Diamo a .bl-search un z-index proprio per farla stare sopra le chip. */
.bl-search{position:relative;z-index:20}

/* ---- BinarioLive v2 — pagine-tratta (SEO) ---- */
.bl-routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

.bl-route-card{display:flex;flex-direction:column;gap:10px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:16px 18px;text-decoration:none;color:var(--rm-ink);transition:transform var(--t-base) ease,border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.bl-route-card:hover{transform:translateY(-3px);border-color:var(--rm-accent);box-shadow:var(--rm-shadow);color:var(--rm-ink);text-decoration:none}
.bl-route-od{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;flex-wrap:wrap}
.bl-route-arrow{color:var(--rm-accent);flex:0 0 auto}
.bl-route-o,.bl-route-d{min-width:0}
.bl-route-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--rm-muted)}
.bl-route-meta b{color:var(--rm-ink)}
.bl-route-hl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.bl-route-hlcard{display:flex;flex-direction:column;gap:3px;background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--r-md);padding:16px 18px;text-decoration:none;color:var(--rm-ink);transition:transform var(--t-base) ease,border-color var(--t-base) ease}
.bl-route-hlcard.good{border-left:3px solid var(--rm-green)}
.bl-route-hlcard.bad{border-left:3px solid var(--rm-red)}
.bl-route-hlcard:hover{transform:translateY(-2px);color:var(--rm-ink);text-decoration:none}
.bl-route-hlcard.good:hover{border-color:var(--rm-green)}
.bl-route-hlcard.bad:hover{border-color:var(--rm-red)}
.bl-route-hlk{font-size:.74rem;color:var(--rm-muted);text-transform:uppercase;letter-spacing:.06em}
.bl-route-hlcode{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.bl-route-hlv{font-size:.9rem;font-weight:600}
@media(max-width:560px){.bl-route-hl{grid-template-columns:1fr}}

/* ===================================================================
   BinarioLive v2 — AREA PRONOSTICO (scheda treno): trattamento "oro".
   Semantica: VERDE = il tuo pronostico · ORO = la scommessa/posta.
   Solo CSS: nessun hook JS (data-*, is-active) toccato.
   =================================================================== */
.side-panel.rm-predict{position:relative;border:1px solid rgba(var(--rm-amber-rgb),.34);
  background:radial-gradient(130% 120% at 100% 0,rgba(var(--rm-amber-rgb),.10),transparent 55%),var(--rm-surface)}
.rm-predict>h2{font-family:"Bricolage Grotesque", system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.35rem;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.rm-predict>h2::before{content:"\2605";color:var(--rm-amber);font-size:.95rem}
.rm-tdg-banner{background:rgba(var(--rm-amber-rgb),.13);border:1px solid rgba(var(--rm-amber-rgb),.4);color:var(--rm-ink);border-radius:var(--r-md);padding:10px 13px;font-size:.86rem;margin-bottom:14px}
.rm-tdg-banner b{color:var(--rm-amber)}
/* AI box */
.rm-ai{border:1px solid var(--rm-line);border-radius:var(--r-md);background:var(--rm-surface2);padding:14px 16px}
.rm-ai-title{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rm-accent)}
/* chip pronostico: attiva = verde (la tua scelta) */
.rm-chip-guess{transition:background var(--t-base),border-color var(--t-base),transform var(--t-fast)}
.rm-chip-guess:hover{border-color:var(--rm-accent);transform:translateY(-1px)}
.rm-chip-guess.is-active{background:var(--rm-accent);border-color:var(--rm-accent);color:var(--rm-on-accent);font-weight:700}
.rm-chip-guess-canc.is-active{background:var(--rm-red);border-color:var(--rm-red);color:var(--rm-on-red)}
/* blocco posta: attiva = oro (la scommessa) */
.rm-stake{margin-top:8px;padding-top:16px;border-top:1px dashed rgba(var(--rm-amber-rgb),.35)}
.rm-stake-title{color:var(--rm-amber);font-weight:700}
.rm-chip-stake{transition:background var(--t-base),border-color var(--t-base),transform var(--t-fast)}
.rm-chip-stake:hover{border-color:var(--rm-amber);transform:translateY(-1px)}
.rm-chip-stake.is-active{background:var(--rm-amber);border-color:var(--rm-amber);color:var(--rm-on-amber);font-weight:700}
.rm-chip-allin.is-active{background:var(--rm-red);border-color:var(--rm-red);color:var(--rm-on-red)}
.rm-stake-odds{background:rgba(var(--rm-amber-rgb),.1);border:1px solid rgba(var(--rm-amber-rgb),.28);border-radius:var(--r-md);padding:10px 13px;margin-top:10px}
.rm-odds-val{color:var(--rm-amber)}
/* pronostico già fatto */
.rm-predict-mine{border:1px solid rgba(var(--rm-amber-rgb),.3);border-radius:var(--r-md);background:var(--rm-surface2);padding:16px}
.rm-mypred-big{color:var(--rm-amber)}
/* submit resta verde: è l'azione primaria "invia" */

/* Etichetta LIVE con dati vecchi: ambra e ferma, non verde e pulsante.
   Dichiarare 'live' un dato di mezz'ora fa e' una promessa non mantenuta. */
.bl-livetag.is-stale{color:var(--rm-amber)}
.bl-livetag.is-stale i{background:var(--rm-amber);animation:none}

/* ── Timeline della corsa: binario in colonna propria ─────────────────
   Il binario era una nota in coda al nome della stazione, in testo
   secondario. Per chi è in stazione è una delle tre informazioni che
   contano davvero, insieme a orario e destinazione: ora ha una colonna
   sua e la forma di un cartello, come sui tabelloni veri.
   L'orario programmato compare sotto quello reale solo quando differisce,
   così si legge di quanto è slittata la fermata senza fare i conti. */
.rm-tl-row{grid-template-columns:56px 20px 1fr auto auto;gap:0 10px}
.rm-tl-time{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.rm-tl-sched{font-size:.62rem;color:var(--rm-muted);text-decoration:line-through;
  /* .85 e non .75: a .75 il rapporto era 4,43, appena sotto il minimo */
  opacity:.85;margin-top:1px;font-weight:400}
.rm-tl-plat{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:34px;padding:3px 6px;border:1px solid var(--rm-line);border-radius:var(--r-sm);
  background:var(--rm-surface2);line-height:1}
/* L'ETICHETTA «BIN» PRENDE IL COLORE PIENO, non il grigio spento.
   Le fermate gia' passate sono attenuate a opacity:.55, e quella
   attenuazione moltiplica il colore del testo: con --rm-muted il rapporto
   scendeva a 2,78 (misurato il 09/09/2026 su FR9514). Nessun grigio
   intermedio regge il .55 — provati #B6C0CE, #C3CCD9, #CBD3DE, #D2D9E2:
   al massimo 4,34. Con --rm-ink si arriva a 5,02 e la gerarchia con il
   numero sotto resta affidata a corpo (8px contro 13,8) e peso. */
.rm-tl-plat i{font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rm-ink)}
.rm-tl-plat b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.86rem;
  font-weight:700;color:var(--rm-ink);margin-top:1px}
.rm-tl-plat.is-empty{border-color:transparent;background:transparent;min-width:34px}
.rm-tl-row.is-next .rm-tl-plat{border-color:rgba(var(--rm-rail-rgb),.45);background:rgba(var(--rm-rail-rgb),.08)}
.rm-tl-row.is-next .rm-tl-plat b{color:var(--rm-rail)}
.rm-tl-row.is-past .rm-tl-plat{opacity:.55}
@media (max-width:520px){
  .rm-tl-row{grid-template-columns:46px 16px 1fr auto auto;gap:0 7px}
  .rm-tl-plat{min-width:28px;padding:2px 4px}
  .rm-tl-plat b{font-size:.76rem}
}
/* ══ TABELLE — sorgente unica ═══════════════════════════════════════════
   Lo stile delle tabelle era sparso in quattro blocchi che si
   sovrascrivevano, con DUE colori di hover diversi a seconda di quale
   vinceva. Qui c'è tutto, in fondo al file, quindi è l'ultima parola.

   Scelte, e perché:
   · niente righelli verticali. Su una tabella di dati le colonne le separa
     l'allineamento, non le linee: i bordi verticali aggiungono solo rumore.
   · cifre tabulari ovunque. Senza, "+308'" e "+44'" non si incolonnano e
     una colonna di numeri sembra storta.
   · l'ultima riga non ha bordo inferiore: prima lasciava una linea sospesa
     appena sopra il bordo del pannello.
   · l'hover accende un filo verde a sinistra oltre allo sfondo. Su righe
     larghe il solo cambio di sfondo si perde; il filo ancora l'occhio a
     inizio riga e lo aiuta a percorrerla fino in fondo.
   · respiro orizzontale da 8px a 14px: era troppo stretto per dei dati. */

.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--rm-ink);
  --bs-table-border-color:var(--rm-line);
  color:var(--rm-ink);
  border-collapse:separate;
  border-spacing:0;
  margin-bottom:0;
  font-variant-numeric:tabular-nums;
}
.table > :not(caption) > * > *{ border-bottom-width:0; box-shadow:none; }

.table thead th,
.data-panel .table thead th,
.rm-panel .table thead th{
  font-family:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--rm-muted);
  background:transparent;
  padding:10px 14px;
  border-bottom:1px solid var(--rm-line);
  white-space:nowrap;
  vertical-align:bottom;
}

.table tbody td,
.data-panel .table tbody td,
.rm-panel .table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.045);
  vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:0; }

.table tbody td:first-child{ font-weight:600; }

.table tbody tr{ transition:background var(--t-fast) var(--ease-out); }
.table tbody tr td:first-child{
  box-shadow:inset 2px 0 0 0 transparent;
  transition:box-shadow var(--t-fast) var(--ease-out);
}
.data-panel .table tbody tr:hover,
.rm-panel .table tbody tr:hover,
.table-hover tbody tr:hover{ background:rgba(255,255,255,.038); }
.data-panel .table tbody tr:hover td:first-child,
.rm-panel .table tbody tr:hover td:first-child,
.table-hover tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 0 var(--g-soft); }

.table .text-end{ font-variant-numeric:tabular-nums; }
.table .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }

.table a{ color:var(--rm-rail); font-weight:600; text-decoration:none; }
.table a:hover{ text-decoration:underline; }

.table-sm tbody td, .table-sm thead th{ padding-top:8px; padding-bottom:8px; }

.table-responsive{
  -webkit-overflow-scrolling:touch;
  position:relative;
  background:
    linear-gradient(to right, var(--rm-surface) 30%, rgba(16,24,38,0)) left / 28px 100% no-repeat,
    linear-gradient(to left,  var(--rm-surface) 30%, rgba(16,24,38,0)) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) right / 12px 100% no-repeat;
  background-attachment:local, local, scroll, scroll;
}

@media (max-width:560px){
  .table thead th{ padding:8px 10px; font-size:.62rem; }
  .table tbody td{ padding:10px 10px; }
}

/* -- MOTORE DATI (pannello admin) --------------------------------------
   La barra e' larga quanto la quota che rappresenta, cosi' la forma della
   distribuzione si legge senza leggere i numeri: se la fascia "oltre 1 ora"
   ha una barra visibile, ci sono treni fermi sul sito. */
.admin-mot-dist{ margin-top:18px; }
.admin-mot-dist h3{
  font-family:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--rm-ink); margin:0 0 4px;
}
.admin-mot-hint{ font-size:.78rem; color:var(--rm-muted); margin:0 0 10px; line-height:1.5; }
.admin-mot-hint em{ font-style:normal; color:var(--rm-ink); }

.admin-mot-bar{
  display:inline-block; vertical-align:middle;
  width:var(--w,0%); min-width:2px; max-width:calc(100% - 52px);
  height:8px; margin-right:8px;
  border-radius:var(--r-pill,999px);
  background:var(--g-base);
}
.admin-mot-bar--warn{ background:var(--rm-amber); }
.admin-mot-bar--bad{ background:var(--rm-red); }

/* -- COSA RICHIEDE ATTENZIONE (pannello admin) ------------------------
   Ogni riga e' un problema con la sua azione. La pallina a sinistra dice
   la gravita' senza doverla leggere, e il bordo colorato regge il colpo
   d'occhio anche scorrendo veloce. */
.admin-att{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.admin-att-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:12px;
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-left:3px solid var(--rm-muted);
  border-radius:var(--r-md,12px); padding:12px 14px;
}
.admin-att-row strong{ display:block; font-size:.92rem; line-height:1.4; color:var(--rm-ink); }
.admin-att-row p{ margin:4px 0 0; font-size:.8rem; line-height:1.5; color:var(--rm-muted); }
.admin-att-dot{
  width:9px; height:9px; border-radius:50%; margin-top:6px;
  background:var(--rm-muted); flex:none;
}
.admin-att--alto{ border-left-color:var(--rm-red); }
.admin-att--alto .admin-att-dot{ background:var(--rm-red); }
.admin-att--medio{ border-left-color:var(--rm-amber); }
.admin-att--medio .admin-att-dot{ background:var(--rm-amber); }
.admin-att--basso{ border-left-color:var(--g-base); }
.admin-att--basso .admin-att-dot{ background:var(--g-base); }

.admin-att-go{
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--rm-rail); text-decoration:none; white-space:nowrap;
  border:1px solid var(--rm-line); border-radius:var(--r-pill,999px); padding:4px 11px;
  align-self:center;
}
.admin-att-go:hover{ border-color:var(--rm-rail); }

.admin-att-ok{ margin:0; font-size:.88rem; color:var(--rm-muted); }

.admin-dash-more{
  font-size:.78rem; font-weight:600; color:var(--rm-rail);
  text-decoration:none; white-space:nowrap;
}
.admin-dash-more:hover{ text-decoration:underline; }

@media (max-width:560px){
  .admin-att-row{ grid-template-columns:auto 1fr; }
  .admin-att-go{ grid-column:2; justify-self:start; margin-top:8px; }
}

/* ══ PANNELLO ADMIN — restyling ═══════════════════════════════════════
   Sta in fondo di proposito: è l'ultima parola sulla cascata, come per le
   tabelle. Le scelte, e il perché di ciascuna:

   · via le scatole dentro le scatole. Un pannello con bordo che contiene
     card con un altro bordo che contengono riquadri con un terzo bordo
     produce solo rumore: la gerarchia la fanno lo sfondo e lo spazio.
   · i numeri contano più delle etichette, e prima erano della stessa
     misura. Ora la cifra è grande e l'etichetta piccola e maiuscoletta.
   · cifre tabulari ovunque: senza, una colonna di numeri sembra storta.
   · gli indicatori di stato erano colorati solo nel puntino, cioè in nove
     pixel. Ora è tutto il riquadro a tingersi: il colpo d'occhio si legge
     senza cercare la pallina.
   · movimento breve e solo dove serve, disattivato per chi lo chiede. */

/* -- Contenitori ---------------------------------------------------- */
.admin-dash{
  padding:26px 24px;
  box-shadow:var(--sh-1);
  border-radius:var(--r-lg);
}
.admin-dash-head{
  align-items:center;
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--rm-line);
}
.admin-dash-head h2{
  font-size:1.18rem;
  letter-spacing:-.015em;
}

/* -- Fascia dei numeri ---------------------------------------------- */
/* Un'unica griglia con separatori a filo invece di sei riquadri bordati:
   così si legge come una fascia sola, non come sei oggetti scollegati. */
.admin-kpis{
  gap:1px;
  background:var(--rm-line);
  border:1px solid var(--rm-line);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:24px;
}
.admin-kpi{
  background:var(--rm-surface);
  border:0;
  border-radius:0;
  padding:16px 15px;
  transition:background var(--t-fast) var(--ease-out);
}
.admin-kpi:hover{ background:var(--rm-soft); }
.admin-kpi .k-n{
  font-size:1.72rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.admin-kpi .k-l{
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
  margin-top:7px;
}
.admin-kpi .k-l em{
  display:block;
  text-transform:none;
  letter-spacing:0;
  font-size:.74rem;
  margin-top:2px;
}

/* -- Card interne: niente terzo bordo ------------------------------- */
.admin-card{
  border:0;
  background:var(--rm-soft);
  padding:18px;
}
.admin-card h3{
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--rm-muted);
  margin-bottom:14px;
}

/* -- Indicatori di stato: si tinge il riquadro, non il puntino ------ */
.admin-sys{
  background:transparent;
  border:0;
  padding:0;
  gap:10px;
}
.admin-sys-chip{
  padding:13px 15px;
  border:1px solid var(--rm-line);
  background:var(--rm-soft);
  transition:transform var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
}
.admin-sys-chip:hover{ transform:translateY(-1px); }
.admin-sys-val{ font-variant-numeric:tabular-nums; font-size:1.06rem; }
.admin-sys-label{ font-size:.66rem; letter-spacing:.09em; }
.admin-sys-dot{ width:8px; height:8px; }

.admin-sys--ok{   background:rgba(var(--rm-green-rgb),.09);  border-color:rgba(var(--rm-green-rgb),.26); }
.admin-sys--warn{ background:rgba(var(--rm-amber-rgb),.10);  border-color:rgba(var(--rm-amber-rgb),.30); }
.admin-sys--bad{  background:rgba(var(--rm-red-rgb),.10);   border-color:rgba(var(--rm-red-rgb),.30); }
.admin-sys--info{ background:rgba(var(--rm-rail-rgb),.09); border-color:rgba(var(--rm-rail-rgb),.26); }

/* -- Navigazione laterale ------------------------------------------- */
.adm-side{ padding:12px; border-radius:var(--r-lg); }
.adm-link{
  padding:10px 12px;
  border-radius:var(--r-md);
  font-weight:550;
  transition:background var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out);
}
/* L'attivo era nero pieno: pesante e senza relazione col resto della
   palette. Ora è verde tenue con un filo pieno a sinistra, che dice
   "sei qui" senza gridare. */
.adm-link.active{
  background:var(--g-soft-bg);
  color:var(--rm-ink);
  box-shadow:inset 2px 0 0 0 var(--g-soft);
}
.adm-link.active svg{ opacity:1; color:var(--g-soft); }
.adm-side-title{ padding:6px 12px 10px; }

/* -- Avvisi ---------------------------------------------------------- */
.admin-att-row{
  transition:border-color var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out);
}
.admin-att-row:hover{ transform:translateX(2px); }

/* -- Numeri ovunque -------------------------------------------------- */
.admin-job .job-time,
.admin-kpi .k-n,
.admin-sys-val,
.bar-v{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .admin-sys-chip:hover,
  .admin-att-row:hover{ transform:none; }
}

@media (max-width:900px){
  .admin-dash{ padding:20px 16px; }
  .admin-kpi .k-n{ font-size:1.45rem; }
}

/* ══ ANALYTICS E API CENTER ═══════════════════════════════════════════
   Grafici fatti con div e altezze in percentuale: nessuna libreria, si
   stampano bene e funzionano senza JavaScript. Per un pannello interno
   e' esattamente quello che serve. */

/* -- Selettore di periodo ------------------------------------------- */
.admin-seg{ display:inline-flex; gap:2px; padding:3px; background:var(--rm-soft);
  border:1px solid var(--rm-line); border-radius:var(--r-pill); }
.admin-seg-btn{
  padding:5px 13px; border-radius:var(--r-pill); font-size:.78rem; font-weight:600;
  color:var(--rm-muted); text-decoration:none; white-space:nowrap;
  transition:color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.admin-seg-btn:hover{ color:var(--rm-ink); }
.admin-seg-btn.is-on{ background:var(--g-soft-bg); color:var(--rm-ink); }

/* -- Grafico a colonne ---------------------------------------------- */
.admin-chart{
  display:flex; align-items:flex-end; gap:4px;
  height:150px; padding:0 0 2px;
  overflow-x:auto;
}
.admin-chart-col{
  flex:1 1 0; min-width:14px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  height:100%; justify-content:flex-end;
}
.admin-chart-stack{
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:var(--r-sm) var(--r-sm) 0 0; overflow:hidden;
  background:var(--rm-soft);
}
.admin-chart-bar{
  display:block; width:100%; min-height:2px;
  background:var(--g-base);
  transition:opacity var(--t-fast) var(--ease-out);
}
.admin-chart-bar.is-api{ background:var(--rm-rail); }
.admin-chart-bar.is-bad{ background:var(--rm-red); }
.admin-chart-col:hover .admin-chart-bar{ opacity:.75; }
.admin-chart-lbl{
  font-size:.62rem; color:var(--rm-muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; line-height:1;
}
.admin-chart.is-hours .admin-chart-col{ min-width:10px; }

.admin-key{
  display:inline-block; width:10px; height:10px; border-radius:3px;
  background:var(--g-base); vertical-align:-1px; margin-right:4px;
}
.admin-key.is-api{ background:var(--rm-rail); }

/* -- Classifiche con barra ------------------------------------------ */
/* La barra sta DIETRO al testo, non accanto: cosi' l'etichetta resta
   leggibile per intero anche quando il valore e' piccolo. */
.admin-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.admin-rank li{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r-sm); overflow:hidden;
  font-size:.86rem;
}
.admin-rank-bar{
  position:absolute; inset:0 auto 0 0; width:var(--w,0%);
  background:var(--g-soft-bg); border-radius:var(--r-sm);
  pointer-events:none;
}
.admin-rank-bar.is-bad{ background:rgba(var(--rm-red-rgb),.16); }
.admin-rank-bar.is-warn{ background:rgba(var(--rm-amber-rgb),.16); }
.admin-rank-lbl{
  position:relative; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--rm-ink);
}
.admin-rank-lbl a{ color:var(--rm-ink); text-decoration:none; }
.admin-rank-lbl a:hover{ text-decoration:underline; }
.admin-rank-n{
  position:relative; font-family:"JetBrains Mono",monospace; font-weight:700;
  font-size:.82rem; font-variant-numeric:tabular-nums; color:var(--rm-ink);
}

/* -- Liste compatte nei quadretti ------------------------------------ */
.admin-mini{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.admin-mini li{ display:flex; justify-content:space-between; gap:10px; font-size:.83rem; }
.admin-mini span{ color:var(--rm-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-mini b{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; color:var(--rm-ink); }

/* -- Pastiglie di esito ---------------------------------------------- */
.admin-flag{
  display:inline-block; font-family:"JetBrains Mono",monospace; font-weight:700;
  font-size:.72rem; padding:2px 7px; border-radius:var(--r-sm);
  background:var(--rm-soft); color:var(--rm-ink);
}
.admin-flag.warn{ background:rgba(var(--rm-amber-rgb),.16); color:var(--rm-amber); }
.admin-flag.bad{ background:rgba(var(--rm-red-rgb),.16); color:var(--rm-red); }

/* -- Variazione rispetto al periodo precedente ------------------------ */
.k-d{ font-style:normal; font-weight:700; }
.k-up{ color:var(--rm-green); }
.k-down{ color:var(--rm-red); }
.k-flat{ color:var(--rm-muted); }
.admin-kpi .k-n small{ font-size:.55em; font-weight:600; color:var(--rm-muted); margin-left:2px; }

@media (max-width:700px){
  .admin-chart{ height:110px; }
}

/* -- Varianti mancanti e stato vuoto --------------------------------- */
.admin-chart-bar.is-warn{ background:var(--rm-amber); }
.admin-key.is-warn{ background:var(--rm-amber); }
.admin-key.is-bad{ background:var(--rm-red); }

/* Lo stato vuoto non e' un errore: va detto con calma, non con un
   riquadro d'allarme. Nel registro errori "vuoto" e' la notizia buona. */
.admin-empty{
  text-align:center; padding:38px 20px;
  border:1px dashed var(--rm-line); border-radius:var(--r-md);
  background:var(--rm-soft);
}
.admin-empty strong{ display:block; font-size:1.02rem; color:var(--rm-ink); margin-bottom:4px; }
.admin-empty p{ margin:0; font-size:.86rem; color:var(--rm-muted); }

/* ══ INDICI PUBBLICI — snodi e classifiche ═══════════════════════════
   Le stesse forme del pannello admin, portate sul sito pubblico: una
   classifica con la barra dietro al testo si legge molto piu' in fretta
   di una colonna di percentuali, e la barra dice l'ordine di grandezza
   senza che nessuno debba confrontare cifre. */
.bl-sec-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:1.05rem; font-weight:700;
  letter-spacing:-.01em; margin:0 0 2px; color:var(--rm-ink); }
.bl-sec-sub{ font-size:.85rem; color:var(--rm-muted); margin:0 0 14px; }

/* Gli snodi: pochi, grandi, con il numero che conta in evidenza. */
.bl-hubs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; }
.bl-hub{
  display:flex; flex-direction:column; gap:2px; padding:14px 15px;
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-radius:var(--r-md); text-decoration:none;
  transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.bl-hub:hover{ transform:translateY(-2px); border-color:var(--g-soft); }
.bl-hub-name{ font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--rm-muted);
  text-transform:uppercase; line-height:1.3; }
.bl-hub-num{ font-family:"JetBrains Mono",monospace; font-size:1.6rem; font-weight:700;
  line-height:1.1; color:var(--rm-ink); font-variant-numeric:tabular-nums; }
.bl-hub-num small{ font-size:.5em; color:var(--rm-muted); margin-left:1px; }
.bl-hub-lbl{ font-size:.72rem; color:var(--rm-muted); }
.bl-hub.is-ok .bl-hub-num{ color:var(--rm-green); }
.bl-hub.is-warn .bl-hub-num{ color:var(--rm-amber); }
.bl-hub.is-bad .bl-hub-num{ color:var(--rm-red); }

/* --- Puntualita' ora per ora, sulle schede stazione ------------------------
   Istogramma di ventiquattro colonne al massimo. L'altezza e' il ritardo
   medio della fascia, il colore la percentuale di puntualita': le due cose
   dicono un fatto diverso e insieme si leggono a colpo d'occhio.
   Niente libreria: sono div con una variabile CSS, quindi arrivano
   nell'HTML del server e un crawler li vede. */
.bl-ore{ display:flex; align-items:flex-end; gap:3px; height:120px;
  margin:0 0 6px; padding:10px 12px; background:var(--rm-surface);
  border:1px solid var(--rm-line); border-radius:var(--r-md,12px); overflow-x:auto; }
.bl-ora{ flex:1 1 0; min-width:18px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:100%; gap:4px; }
.bl-ora-bar{ display:block; width:100%; height:var(--h,4%); border-radius:3px 3px 0 0;
  background:rgba(var(--rm-green-rgb),.35); }
.bl-ora.is-warn .bl-ora-bar{ background:rgba(var(--rm-amber-rgb),.42); }
.bl-ora.is-bad  .bl-ora-bar{ background:rgba(var(--rm-red-rgb),.42); }
.bl-ora-h{ font-family:"JetBrains Mono",monospace; font-size:.62rem;
  color:var(--rm-muted); line-height:1; }
@media (max-width:560px){ .bl-ore{ height:96px; } .bl-ora{ min-width:14px; } }

/* Il paragrafo di sintesi sulla scheda treno, sopra i riquadri. */
.bl-train-intro{ margin:14px 0 4px; }
.bl-train-intro p{ margin:0 0 10px; max-width:70ch; font-size:.95rem; }
.bl-train-intro p:last-child{ margin-bottom:0; }

/* Il paragrafo di sintesi in cima alla scheda stazione. */
.bl-station-intro{ margin:0 0 18px; }
.bl-station-intro p{ margin:0 0 10px; max-width:70ch; }
.bl-station-intro p:last-child{ margin-bottom:0; }

.bl-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.bl-rank li{ position:relative; display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm); overflow:hidden; font-size:.9rem; }
.bl-rank-bar{ position:absolute; inset:0 auto 0 0; width:var(--w,0%);
  border-radius:var(--r-sm); pointer-events:none; }
.bl-rank-bar.is-ok{ background:rgba(var(--rm-green-rgb),.14); }
.bl-rank-bar.is-bad{ background:rgba(var(--rm-red-rgb),.14); }
.bl-rank-lbl{ position:relative; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.bl-rank-lbl a{ color:var(--rm-ink); text-decoration:none; font-weight:600; }
.bl-rank-lbl a:hover{ text-decoration:underline; }
.bl-rank-n{ position:relative; font-family:"JetBrains Mono",monospace; font-weight:700;
  font-size:.85rem; font-variant-numeric:tabular-nums; color:var(--rm-ink); }

/* Filo colorato sulle schede: la puntualita' si vede scorrendo. */
.bl-route-card.is-ok{ box-shadow:inset 3px 0 0 0 var(--rm-green); }
.bl-route-card.is-warn{ box-shadow:inset 3px 0 0 0 var(--rm-amber); }
.bl-route-card.is-bad{ box-shadow:inset 3px 0 0 0 var(--rm-red); }

/* -- Tabellone della home: stile tabellone di stazione ----------------
   Stessa grammatica del tabellone in /stazione: l'ORARIO per primo in
   ambra, poi il treno, la tratta, e il ritardo a destra. E' come si legge
   un tabellone vero — l'occhio cerca l'ora, non il codice — e allinea la
   home alla pagina stazione invece di avere due linguaggi diversi.

   Il markup e' generato in DUE posti, page_home() e renderHeroBoard() in
   app.js, e devono restare identici: il server disegna la prima versione,
   il JS la riscrive ogni 20 secondi. */
.bl-board{ background:var(--rm-deep); }
.bl-brow{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:3px 12px;
  align-items:center;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.bl-brow:hover{ background:rgba(255,255,255,.05); }

.bl-btime{
  grid-column:1; grid-row:1;
  font-weight:700; font-size:1.05rem; color:var(--rm-amber);
  font-variant-numeric:tabular-nums;
}
.bl-bcode{
  grid-column:2; grid-row:1;
  font-size:.8rem; font-weight:700; letter-spacing:.05em;
  color:#fff;
}
.bl-bdest{
  grid-column:3; grid-row:1;
  color:rgba(255,255,255,.85); font-size:.9rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bl-bdelay{
  grid-column:4; grid-row:1; justify-self:end;
  font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.bl-bdelay.ok{ color:var(--rm-green); }
.bl-bdelay.late{ color:var(--rm-red-soft); }
.bl-bdelay.canc{ color:rgba(255,255,255,.45); }

.bl-bpill{
  grid-column:3 / -1; grid-row:2; justify-self:end;
  font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.6);
}
.bl-bpill.ok{ background:rgba(var(--rm-green-rgb),.18); color:var(--g-soft); }
.bl-bpill.late{ background:rgba(var(--rm-red-rgb),.18); color:var(--rm-red-soft); }

.bl-board-t{ color:rgba(255,255,255,.55); }

@media (max-width:520px){
  .bl-brow{ grid-template-columns:auto auto 1fr; padding:11px 12px; }
  .bl-btime{ font-size:.95rem; }
  .bl-bdelay{ grid-column:3; grid-row:2; justify-self:end; font-size:.95rem; }
  .bl-bpill{ grid-column:1 / 3; grid-row:2; justify-self:start; }
}

/* ══ LINGUAGGIO "STAZIONE" ═══════════════════════════════════════════
   Il sito come una stazione. La regola che tiene insieme la cosa senza
   farla diventare un vezzo:

     · i DATI hanno l'aspetto del tabellone — fondo profondo, cifre in
       ambra, monospace, numeri tabulari;
     · i TESTI hanno l'aspetto della cartellonistica — alto contrasto,
       niente ambra su nero per i paragrafi, che sarebbero illeggibili.

   Contrasto verificato: ambra #F5B72E su #070B14 = 10,96:1, molto oltre
   il 4,5:1 richiesto. Il verde e il bianco al 55% stanno a 8,26 e 6,06.

   Vale su 21 pagine perche' agisce su page_header(), che usano tutte. */

/* -- L'occhiello diventa un cartello ---------------------------------- */
.rm-eyebrow{
  background:var(--rm-deep);
  color:var(--rm-amber);
  border:1px solid rgba(var(--rm-amber-rgb),.28);
  padding:5px 12px;
  letter-spacing:.14em;
}

/* -- Gli indicatori diventano display del tabellone -------------------- */
.ph-chip{
  background:var(--rm-deep);
  border-color:rgba(255,255,255,.10);
  padding:10px 14px;
  min-width:104px;
}
.ph-chip .ph-n{
  color:var(--rm-amber);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
/* .ph-chip .ph-l E' STATA TOLTA DA QUI, non appesa altrove.
   Era `.62rem` con due selettori (specificita' 0,2,0) e batteva la `.72rem`
   scritta molto piu' in basso con un selettore solo: la dichiarazione
   successiva non ha mai avuto effetto, e l'etichetta sotto ogni numero
   dell'intestazione condivisa restava a 9,92 px maiuscoli — la scritta piu'
   piccola del sito, su ogni pagina che ha una testata con gli indicatori.
   Misurato il 17/09/2026 su /tratte: font-size calcolato 9.92px.
   Le sue proprieta' (colore, maiuscolo, spaziatura, peso) sono state
   trasferite nel blocco `.ph-l` piu' sotto, che ora e' l'unico a dire
   com'e' fatta quell'etichetta. */

/* Il primo indicatore e' quello che conta di piu': filo ambra a sinistra,
   come la riga evidenziata su un tabellone. */
/* La barretta ambra sulla prima cella e' stata TOLTA il 21/08/2026.
   Era di quando le celle erano scatole con `padding:10px 14px`: i 3 px
   dell'ombra interna stavano dentro quel padding. Il ridisegno le ha rese
   piatte e ha azzerato il padding sinistro della prima
   (`.ph-chips > .ph-chip:first-child{ padding-left:0 }`), ma questa regola
   e' rimasta indietro: la barra finiva SOPRA il testo e mangiava la prima
   lettera dell'etichetta — su /stazione/roma-termini si leggeva
   "RENI TRACCIATI". Nel disegno attuale i separatori sono le righe sottili
   fra una cella e l'altra, un accento ambra sulla sola prima non ci sta. */

/* -- Convenzione italiana: partenze GIALLE, arrivi BIANCHI -------------
   E' il segnale che chi prende il treno riconosce senza leggerlo: nelle
   stazioni i quadri orari delle partenze sono gialli, quelli degli
   arrivi bianchi. Applicato alle schede del tabellone di stazione. */
.rm-bs-tab[data-board-tab="departures"].is-active{
  background:var(--rm-amber); color:var(--rm-on-amber);
}
.rm-bs-tab[data-board-tab="arrivals"].is-active{
  background:#EDEFF2; color:#12161c;
}

/* -- Tabelle di dati ferroviari: il tabellone ------------------------- */
/* Solo le tabelle che parlano di treni portano questa classe. Quella dei
   cookie e quelle del gioco restano come sono: vestire da tabellone una
   tabella che non riguarda la circolazione e' il vezzo da evitare. */
.tbl-board{
  --bs-table-color:rgba(255,255,255,.88);
  color:rgba(255,255,255,.88);
}
.data-panel:has(.tbl-board),
.rm-panel:has(.tbl-board){
  background:var(--rm-deep);
  border-color:rgba(255,255,255,.10);
}
.tbl-board thead th{
  color:rgba(255,255,255,.5);
  border-bottom-color:rgba(255,255,255,.14);
  background:transparent;
}
.tbl-board tbody td{
  border-bottom-color:rgba(255,255,255,.07);
}
.tbl-board tbody tr:hover{ background:rgba(255,255,255,.05) !important; }
.tbl-board tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 0 var(--rm-amber) !important; }

/* La prima colonna e' l'ancora della riga, come l'orario sul quadro. */
.tbl-board tbody td:first-child{ color:#fff; }
.tbl-board .mono{ color:var(--rm-amber); }
.tbl-board a{ color:#fff; }
.tbl-board a:hover{ color:var(--rm-amber); }
.tbl-board .train-code{ color:var(--rm-amber); font-weight:700; }
.tbl-board .text-secondary{ color:rgba(255,255,255,.5) !important; }
.tbl-board strong{ color:#fff; }
.tbl-board .text-danger{ color:var(--rm-red-soft) !important; }

/* Ripiego per i browser senza :has() — il pannello resta chiaro ma la
   tabella e' comunque leggibile, perche' i colori sopra sono legati alla
   tabella e non al contenitore. */
@supports not (selector(:has(*))){
  .tbl-board{ --bs-table-color:var(--rm-ink); color:var(--rm-ink); }
  .tbl-board thead th{ color:var(--rm-muted); }
  .tbl-board tbody td:first-child,
  .tbl-board a,
  .tbl-board strong{ color:var(--rm-ink); }
}

/* -- Scheda treno: il monitor sopra il binario ------------------------
   Il riquadro "oggi in tempo reale" era una griglia di quattro valori
   della stessa misura: stato, ritardo, partenza, arrivo, tutti uguali.
   Ma chi apre la pagina di un treno vuole sapere UNA cosa, e la vuole da
   lontano. Qui il ritardo prende la scena, come sul monitor di banchina;
   il resto gli sta attorno.

   Solo CSS: il markup e i campi data-field restano quelli che il polling
   aggiorna, quindi il tempo reale continua a funzionare. */
.today-status{
  background:var(--rm-deep);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--rm-amber);
  border-radius:var(--r-lg);
  padding:16px 18px 18px;
}
.today-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  color:rgba(255,255,255,.55);
}
.today-status .live-stamp{ color:rgba(255,255,255,.5); }

.today-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.today-grid span{
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:9px 11px;
}
.today-grid strong{
  color:#fff; font-size:1.05rem; margin-top:3px;
  font-variant-numeric:tabular-nums;
}

/* Il ritardo occupa tutta la prima riga e si legge da lontano. */
.today-grid span:has([data-field="delay_main"]){
  grid-column:1 / -1;
  background:transparent;
  padding:2px 0 6px;
}
.today-grid [data-field="delay_main"]{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(2.2rem,7vw,3.1rem);
  font-weight:800; line-height:1;
  /* NIENTE COLORE QUI: lo porta la classe .rt-* della scala. Finche'
     questa riga diceva `--rm-green`, batteva `.rt-ko` per specificita'
     (0,2,0 contro 0,1,0) e un ritardo di 149 minuti usciva VERDE. */
  letter-spacing:-.02em;
}


/* Ripiego senza :has(): il ritardo resta comunque piu' grande del resto. */
@supports not (selector(:has(*))){
  .today-grid [data-field="delay_main"]{ font-size:1.8rem; }
}

/* -- Scheda treno: il monitor, secondo tentativo ----------------------
   La prima versione manteneva la griglia di riquadri e ingrandiva solo
   il numero: restava una scatola dentro una scatola dentro un'altra.
   Qui la struttura e' cambiata davvero — tre fasce, nessun incasso. */
.today-status{
  background:var(--rm-deep);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--rm-amber);
  border-radius:var(--r-lg);
  padding:15px 18px 16px;
}
.tmon-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:6px;
}
.tmon-top .live-stamp{ color:rgba(255,255,255,.45); font-size:.72rem; }

/* La fascia che conta: il numero e lo stato, sulla stessa linea. */
.tmon-big{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tmon-big [data-field="delay_main"]{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(2.4rem,8vw,3.4rem);
  font-weight:800; line-height:1; letter-spacing:-.03em;
  /* vedi sopra: il colore e' della scala, non del contenitore */
}

.tmon-big .badge{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }

/* Partenza e arrivo: due dettagli su una riga, non due riquadri. */
.tmon-split{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  margin-top:10px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.07em;
  color:rgba(255,255,255,.45);
}
.tmon-split strong{
  color:#fff; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.95rem; letter-spacing:0; text-transform:none; margin-left:5px;
  font-variant-numeric:tabular-nums;
}

/* Lo storico: una frase, non tre riquadri. */
.tmon-hist{
  margin:12px 0 0; font-size:.9rem; color:var(--rm-muted); line-height:1.6;
}
.tmon-hist strong{ color:var(--rm-ink); font-variant-numeric:tabular-nums; }

/* =====================================================================
   404 — BINARIO MORTO
   Una scena, non una pagina di errore. Il treno non e' una foto dentro
   una scheda: e' un elemento della composizione, sciolto nel fondo da
   maschere e velature. Nessun colore, raggio, ombra o curva nuovi:
   tutto viene dai token gia' in uso nel resto del sito.

   ORDINE DI SOVRAPPOSIZIONE, che qui e' sostanza e non dettaglio:
     1  trama + il numero 404
     2  la scena (treno, velature, fanali, scia)
     3  il binario
     5  il testo
   Il 404 sta SOTTO la scena: e' cosi' che il treno gli mangia l'ultima
   cifra man mano che la maschera diventa opaca. Perche' funzioni,
   .bl404-in non deve avere z-index — con uno diventerebbe un contesto
   di impilamento e sigillerebbe il numero sopra il treno.
   ===================================================================== */

/* La scena esce dalla colonna di main.container. Il rientro usa 100vw,
   che su desktop e' piu' largo dell'area utile della finestra quanto la
   barra di scorrimento: senza un taglio su html comparirebbe uno scroll
   orizzontale. Si usa `clip` e non `hidden` perche' `hidden` renderebbe
   html un contenitore di scorrimento e romperebbe la barra sticky. */
html { overflow-x: clip; }

.bl404 {
    position: relative;
    margin-inline: calc(50% - 50vw);
    margin-top: -1.5rem;      /* annulla il py-4 di main: la scena parte in alto */
    margin-bottom: -1.5rem;
    width: 100vw;
    min-height: min(86vh, 780px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(130% 95% at 76% 40%, rgba(20, 33, 52, .80), transparent 62%),
        linear-gradient(180deg, var(--rm-bg) 0%, var(--rm-deep) 58%, var(--rm-deepest) 100%);
}

/* Trama ferroviaria: puntini fitti piu' una griglia verticale rada, come
   le campate di una pensilina. Sfuma verso i bordi, non e' stesa su tutto. */
.bl404::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(var(--rm-rail-rgb), .11) 1px, transparent 1px),
        repeating-linear-gradient(90deg, rgba(var(--rm-rail-rgb), .045) 0 1px, transparent 1px 132px);
    background-size: 26px 26px, auto;
    -webkit-mask-image: radial-gradient(88% 74% at 28% 46%, #000 12%, transparent 76%);
    mask-image: radial-gradient(88% 74% at 28% 46%, #000 12%, transparent 76%);
    opacity: .8;
}

/* ---- il treno -------------------------------------------------------
   .bl404-train e' solo la scatola che tiene la posizione: l'immagine sta
   sul suo ::before. Serve perche' maschera e filtro si applicano anche ai
   figli, e fanali e scia devono restarne fuori. Stando dentro la scatola,
   pero', seguono il treno nella deriva: si muovono insieme, come devono. */
.bl404-scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.bl404-train {
    position: absolute;
    right: -8%;
    bottom: -12%;
    /* La larghezza detta l'altezza (aspect-ratio), e l'altezza decide se il
       treno arriva o no all'altezza delle cifre. Con 120% non ci arrivava:
       misurati 0 px di sovrapposizione col 404. Il tetto serve agli schermi
       molto larghi, dove il treno crescerebbe fino a coprire tutto. */
    width: min(2000px, 138%);
    aspect-ratio: 1800 / 702;
    animation: bl4Drift 30s var(--ease-out) infinite alternate;
}
.bl404-train::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bl404-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(.80) contrast(1.07) brightness(.88);
    /* Il lato sinistro non finisce: si dissolve. E' la maschera che toglie
       l'effetto "immagine incollata sulla pagina", ed e' anche quella che
       fa sparire l'ultima cifra del 404 sotto il muso del treno. */
    -webkit-mask-image: linear-gradient(101deg, transparent 4%, rgba(0, 0, 0, .16) 22%, rgba(0, 0, 0, .70) 40%, #000 56%);
    mask-image: linear-gradient(101deg, transparent 4%, rgba(0, 0, 0, .16) 22%, rgba(0, 0, 0, .70) 40%, #000 56%);
}

/* Fanali di coda: il treno e' appena passato. Bagliore, non lampadina.
   Percentuali del TRENO, non della sezione: cosi' restano incollati ai
   fanali dell'immagine a qualunque larghezza. */
.bl404-glow {
    position: absolute;
    left: 55%;
    top: 51%;
    width: 32%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side,
        rgba(214, 45, 52, .42), rgba(214, 45, 52, .13) 46%, transparent 72%);
    filter: blur(20px);
    animation: bl4Tail 7s ease-in-out infinite;
}

/* La scia: parte dai fanali e se ne va verso sinistra fino a uscire dallo
   schermo. Il segmento chiaro che la percorre e' il "e' appena passato". */
.bl404-streak {
    position: absolute;
    top: 51%;
    right: 45%;
    left: -150%;
    height: 1px;
    overflow: hidden;
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(214, 45, 52, .07) 42%,
        rgba(214, 45, 52, .34) 78%,
        rgba(var(--rm-ink-rgb), .62) 97%,
        transparent 100%);
}
.bl404-streak::after {
    content: "";
    position: absolute;
    top: 0;
    left: 76%;
    width: 24%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--rm-ink-rgb), .85) 52%, transparent);
    animation: bl4Streak 16s linear infinite;
}

/* Velature: chiudono l'immagine nel fondo sopra e sotto senza comporre
   piu' maschere (composizione che i browser gestiscono in modo
   disomogeneo). Quella alta e' tagliata a destra: stesa su tutta la
   larghezza slaverebbe la parte piu' luminosa del 404. */
.bl404-veil-t,
.bl404-veil-b { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.bl404-veil-t {
    top: 0;
    height: 34%;
    background: linear-gradient(180deg, var(--rm-bg) 2%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 58%);
    mask-image: linear-gradient(90deg, transparent 26%, #000 58%);
}
.bl404-veil-b {
    bottom: 0;
    height: 40%;
    background: linear-gradient(0deg, var(--rm-deepest) 12%, rgba(5, 8, 15, .55) 50%, transparent 100%);
}

/* ---- contenuto ------------------------------------------------------
   Niente z-index su .bl404-in: vedi la nota in testa al blocco. */
.bl404-in {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}
.bl404-copy {
    /* Una sola misura comanda il numero e la quota del binario che lo
       attraversa: cambiarla qui li muove insieme, sempre allineati. */
    --bl404-nf: clamp(8rem, 23vw, 20rem);
    position: relative;
    max-width: min(560px, 56%);
    padding: clamp(26px, 5vh, 52px) 0;
}

/* Il 404: nel flusso, cosi' il testo gli si dispone sotto da solo, senza
   coordinate da tenere in sincrono. Sta a z-index 1, sotto la scena. */
.bl404-num {
    position: relative;
    z-index: 1;
    margin: 0 0 clamp(18px, 3vh, 34px) -.065em;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--bl404-nf);
    line-height: .78;
    letter-spacing: -.045em;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    color: transparent;
    /* Texture finissima piu' dissolvenza verticale, entrambe ritagliate
       sulle glifi: da' al numero l'aria del pannello luminoso spento. */
    background-image:
        repeating-linear-gradient(0deg, rgba(var(--rm-ink-rgb), .17) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, rgba(var(--rm-ink-rgb), .22) 0%, rgba(var(--rm-ink-rgb), .06) 74%, rgba(var(--rm-ink-rgb), .02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    animation: bl4Num 1.3s var(--ease-out) both;
}

/* Il binario che attraversa le cifre. Nasce fuori schermo a sinistra —
   i binari si perdono nel buio — e muore prima di arrivare al treno, cosi'
   non ci passa sopra. Sta a z-index 1 come il numero ma dopo di lui nel
   DOM: sopra le cifre, sotto il treno. */
.bl404-rail {
    position: absolute;
    z-index: 1;
    left: -50vw;
    right: -6%;
    top: calc(var(--bl404-nf) * .50);
    height: 26px;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg,
        rgba(var(--rm-rail-rgb), .22) 0 2px, transparent 2px 24px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
    transform-origin: left center;
    animation: bl4Rail 1.9s var(--ease-out) .35s both;
}
.bl404-rail::before,
.bl404-rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--rm-rail-rgb), .10), rgba(var(--rm-rail-rgb), .58) 62%, rgba(var(--rm-rail-rgb), .16));
}
.bl404-rail::before { top: 0; }
.bl404-rail::after { bottom: 0; }

/* Il testo sopra tutto. */
.bl404-plate,
.bl404-title,
.bl404-lead,
.bl404-note,
.bl404-actions { position: relative; z-index: 5; }

/* Targa di servizio, nella lingua del sito: una tratta che non esiste
   non e' un "errore", e' una corsa soppressa. */
.bl404-plate {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--rm-rail);
    background: rgba(var(--rm-rail-rgb), .07);
    border: 1px solid var(--rm-line);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    animation: bl4In .8s var(--ease-out) both;
}
.bl404-plate i {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--rm-red);
    box-shadow: 0 0 8px rgba(214, 45, 52, .9);
    animation: bl4Dot 3.4s ease-in-out infinite;
}

.bl404-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--rm-ink);
    margin: 16px 0 0;
    text-wrap: balance;
    animation: bl4In .9s var(--ease-out) .12s both;
}
.bl404-lead {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: 500;
    color: var(--rm-ink);
    margin: 13px 0 0;
    max-width: 30ch;
    animation: bl4In .9s var(--ease-out) .24s both;
}
.bl404-note {
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(var(--rm-ink-rgb), .55);
    margin: 9px 0 0;
    max-width: 42ch;
    animation: bl4In .9s var(--ease-out) .34s both;
}

/* ---- navigazione ----------------------------------------------------
   Una sola azione ha peso. Le altre due sono destinazioni, non pulsanti. */
.bl404-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 28px;
    animation: bl4In .9s var(--ease-out) .46s both;
}
.bl404-actions .rm-btn { padding: 12px 22px; font-size: .95rem; }
.bl404-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.bl404-alt a {
    position: relative;
    font-size: .92rem;
    font-weight: 500;
    color: rgba(var(--rm-ink-rgb), .62);
    text-decoration: none;
    padding-bottom: 3px;
    transition: color var(--t-base) var(--ease-out);
}
.bl404-alt a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: .28;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.bl404-alt a:hover { color: var(--rm-ink); }
.bl404-alt a:hover::after { transform: scaleX(1); opacity: .5; }
.bl404-alt a:focus-visible { outline: 2px solid var(--rm-rail); outline-offset: 4px; border-radius: 2px; }

/* ---- movimenti ------------------------------------------------------ */
@keyframes bl4In {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes bl4Num {
    from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bl4Rail {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
@keyframes bl4Tail {
    0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: .96; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes bl4Streak {
    from { transform: translateX(6%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    to   { transform: translateX(-420%); opacity: 0; }
}
@keyframes bl4Drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-16px, -7px, 0) scale(1.02); }
}
@keyframes bl4Dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ---- tablet --------------------------------------------------------- */
@media (max-width: 1200px) {
    .bl404 { min-height: min(84vh, 700px); }
    .bl404-copy { --bl404-nf: clamp(7rem, 26vw, 14rem); max-width: min(560px, 74%); }
    .bl404-train { width: 178%; right: -34%; bottom: -9%; }
    .bl404-veil-t {
        -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 46%);
        mask-image: linear-gradient(90deg, transparent 12%, #000 46%);
    }
}

/* ---- telefono -------------------------------------------------------
   Non e' il desktop rimpicciolito: la composizione cambia. Il treno
   diventa una fascia d'atmosfera in basso che sale a sfumare dietro il
   contenuto, e il testo torna a colonna piena sopra di essa. */
@media (max-width: 600px) {
    .bl404 {
        min-height: 0;
        align-items: flex-start;
        padding: 30px 0 clamp(210px, 44vw, 290px);
    }
    .bl404::before {
        -webkit-mask-image: radial-gradient(120% 60% at 50% 24%, #000 10%, transparent 78%);
        mask-image: radial-gradient(120% 60% at 50% 24%, #000 10%, transparent 78%);
    }
    .bl404-copy { --bl404-nf: clamp(6rem, 34vw, 11rem); max-width: 100%; padding: 0; }
    .bl404-rail { right: -18%; }

    .bl404-train {
        width: 180%;
        right: -44%;
        bottom: -3%;
        /* In verticale la dissolvenza deve salire, non venire da sinistra. */
        animation-name: bl4DriftM;
    }
    .bl404-train::before {
        -webkit-mask-image: linear-gradient(6deg, #000 24%, rgba(0, 0, 0, .55) 58%, transparent 94%);
        mask-image: linear-gradient(6deg, #000 24%, rgba(0, 0, 0, .55) 58%, transparent 94%);
    }
    .bl404-veil-t {
        height: 20%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .bl404-veil-b { height: 22%; }
    .bl404-actions { gap: 14px 20px; margin-top: 24px; }
    .bl404-actions .rm-btn { width: 100%; justify-content: center; }
    .bl404-alt { width: 100%; gap: 4px 18px; }
    .bl404-alt a { padding: 9px 0; }
}
@keyframes bl4DriftM {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-10px, 0, 0) scale(1.03); }
}

/* A movimento ridotto si spengono le animazioni ma si tengono le
   posizioni: il bagliore e la scia hanno una collocazione propria che
   deve restare anche da fermi. */
@media (prefers-reduced-motion: reduce) {
    .bl404-num, .bl404-plate, .bl404-plate i, .bl404-title, .bl404-lead,
    .bl404-note, .bl404-actions, .bl404-rail, .bl404-train,
    .bl404-streak::after, .bl404-glow {
        animation: none;
    }
    .bl404-num, .bl404-plate, .bl404-title, .bl404-lead, .bl404-note, .bl404-actions {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .bl404-rail { transform: scaleX(1); opacity: 1; }
    .bl404-glow { opacity: .82; transform: translate(-50%, -50%); }
    .bl404-streak::after { opacity: .9; }
}

/* =====================================================================
   BARRA E PIE' DI PAGINA nel linguaggio della 404.
   Non la SCENA della 404 — quella e' giusta per una pagina-momento e
   sbaglierebbe sotto una tabella di ritardi — ma i suoi ingredienti:
   il filo del binario come divisore, la targa mono maiuscola tracciata,
   l'azzurro ferrovia per la struttura, il verde per l'unica azione, e le
   sottolineature che crescono invece di apparire.
   Solo token gia' esistenti.
   ===================================================================== */

/* Il filo del binario: due filanti e le traversine, sfumato alle due
   estremita'. E' l'elemento che lega barra, piede e 404. */
.rm-nav::after,
.rm-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(var(--rm-rail-rgb), .40), rgba(var(--rm-rail-rgb), .10)),
        repeating-linear-gradient(90deg, rgba(var(--rm-rail-rgb), .16) 0 2px, transparent 2px 26px);
    background-size: 100% 1px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 82%, transparent);
}

/* ---- barra ---------------------------------------------------------- */
.rm-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(var(--rm-deep-rgb), .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 0;               /* il bordo piatto lo sostituisce il binario */
}
.rm-nav::after { bottom: 0; }
.rm-nav-row { padding: 12px 0; }

/* Il marchio prende il carattere display del 404: e' lo stesso sistema. */
.rm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -.02em;
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-brand:hover { color: var(--rm-ink); }
.rm-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--r-pill);
    background: var(--rm-accent);
    box-shadow: 0 0 10px rgba(var(--rm-accent-rgb), .85);
    animation: bl4Dot 3.4s ease-in-out infinite;
}

.rm-links { display: flex; gap: 4px; margin-left: auto; }
.rm-links a {
    position: relative;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    font-weight: 500;
    color: rgba(var(--rm-ink-rgb), .62);
    text-decoration: none;
    transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
/* Segnale di banchina: un trattino corto sotto la voce, non una barra
   che attraversa tutto. Era rosso — ma qui il rosso vuol dire RITARDO,
   e usarlo per il passaggio del mouse ne diluiva il significato. */
.rm-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;   /* la vecchia regola metteva right:0: va azzerato, o
                      left/right/width restano sovra-vincolati */
    bottom: 2px;
    width: 16px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--rm-rail);
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--t-base) var(--ease-out);
}
.rm-links a:hover { color: var(--rm-ink); background: rgba(var(--rm-rail-rgb), .07); }
.rm-links a:hover::after { transform: translateX(-50%) scaleX(1); }
.rm-links a.is-active { color: var(--rm-ink); font-weight: 600; background: rgba(var(--rm-rail-rgb), .09); }
.rm-links a.is-active::after { transform: translateX(-50%) scaleX(1); background: var(--rm-accent); }
.rm-links a:focus-visible { outline: 2px solid var(--rm-rail); outline-offset: 2px; }

.rm-nav-search {
    display: flex;
    gap: 6px;
    background: rgba(13, 20, 32, .8);
    border: 1px solid var(--rm-line);
    border-radius: var(--r-md);
    padding: 4px 4px 4px 10px;
    transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.rm-nav-search input { background: 0; border: 0; color: var(--rm-ink); font: inherit; font-size: .9rem; }
.rm-nav-search input:focus { outline: 0; }
.rm-nav-search input::placeholder { color: var(--rm-muted); }
/* Un contorno da 3px su un campo di ricerca e' un allarme, non un fuoco.
   Bordo che si accende piu' un alone tenue: si vede, non urla. */
.rm-nav-search:focus-within {
    outline: 0;
    border-color: var(--rm-accent);
    box-shadow: 0 0 0 3px rgba(var(--rm-accent-rgb), .16);
}
.rm-nav-search button {
    border: 0;
    background: rgba(var(--rm-rail-rgb), .12);
    color: var(--rm-rail);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    font: inherit;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.rm-nav-search button:hover { background: rgba(var(--rm-accent-rgb), .18); color: var(--g-soft); }

.rm-nav-auth { display: flex; align-items: center; gap: 10px; }
.rm-link-muted {
    font-size: .88rem;
    color: rgba(var(--rm-ink-rgb), .5);
    text-decoration: none;
    transition: color var(--t-base) var(--ease-out);
}
.rm-link-muted:hover { color: var(--rm-ink); }
.rm-burger span { background: var(--rm-ink); width: 22px; height: 2px; border-radius: var(--r-pill); }

/* ---- piede ---------------------------------------------------------- */
.rm-footer {
    position: relative;
    background: linear-gradient(180deg, var(--rm-deep), var(--rm-deepest));
    color: rgba(var(--rm-ink-rgb), .55);
    padding: 46px 0 28px;
    margin-top: 40px;
}
.rm-footer::before { top: 0; }

.rm-foot-brand {
    display: block;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: var(--rm-ink);
    margin-bottom: 8px;
}

/* Intestazioni di colonna come targhe di servizio, non come titoletti.
   L'!important serve davvero: una regola generale su h1..h6 impone
   Bricolage con !important, e senza pari forza il mono non passava.
   E' l'unico punto del blocco dove serve. */
.rm-foot-cols .rm-foot-h {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--rm-rail);
    margin: 0 0 14px;
}
.rm-foot-cols a {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    color: rgba(var(--rm-ink-rgb), .58);
    text-decoration: none;
    transition: color var(--t-base) var(--ease-out);
}

/* OGNI VOCE SULLA SUA RIGA.
   `display: inline-block` qui sopra serve alla sottolineatura: `::after` con
   left/right a 0 prende la larghezza del BOX, e su un elemento a blocco
   sarebbe larga quanto tutta la colonna invece che quanto il testo. Il
   prezzo pero' era che i link tornavano a comportarsi come parole, uno di
   seguito all'altro: le quattro voci di ogni gruppo si leggevano come una
   frase sola — «Ritardi oggi Treni Tratte Stazioni» — su desktop come su
   telefono. Era una regressione silenziosa, perche' a riga 749 il display
   era gia' `block` e questa regola, piu' in basso e a parita' di
   specificita', lo annullava.
   Colonna flex sul contenitore: ogni link torna su una riga propria.
   `align-self: flex-start` sui soli link lascia loro la larghezza del testo,
   quindi la sottolineatura resta giusta; il paragrafo della prima colonna
   non viene toccato e continua ad andare a capo sulla larghezza piena. */
.rm-foot-cols > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rm-foot-cols > div > a {
    align-self: flex-start;
}
.rm-foot-cols a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: .3;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-slow) var(--ease-out);
}
.rm-foot-cols a:hover { color: var(--rm-ink); }
.rm-foot-cols a:hover::after { transform: scaleX(1); }

.rm-foot-note,
.rm-foot-legal {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .04em;
    /* .58 E NON .4. A .4 il rapporto era 3,41 su fondo #0a0f1a: sotto il
       minimo di 4,5, e proprio su «non affiliato con Trenitalia, Italo o
       RFI» — la riga che al sito serve di piu' che venga letta. Il minimo
       misurato e' .49; .58 lascia margine sulle pagine il cui footer
       poggia su un fondo leggermente diverso. */
    color: rgba(var(--rm-ink-rgb), .58);
}
.rm-foot-legal { border-top: 1px solid var(--rm-line); }
.rm-foot-legal a,
.rm-foot-linkbtn {
    /* BERSAGLIO DA 24px. Questi link erano alti 17px: MISURATO nel browser a
       375px. Il minimo WCAG 2.2 per un bersaglio tattile e' 24x24, ed era gia'
       stato applicato altrove (.rm-sec-link) ma non qui. inline-flex con
       min-height allarga l'area toccabile senza spostare di un pixel il testo. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: rgba(var(--rm-ink-rgb), .5);
    text-decoration: none;
    background: 0;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: color var(--t-base) var(--ease-out);
}
.rm-foot-legal a:hover,
.rm-foot-linkbtn:hover { color: var(--g-soft); }
.rm-foot-legal a:focus-visible,
.rm-foot-linkbtn:focus-visible { outline: 2px solid var(--rm-rail); outline-offset: 3px; }
/* .90 PERCHE' L'ALFA NON E' SOLA. Una regola precedente mette
   `.rm-foot-ver{opacity:.85}`, che moltiplica: con .75 l'alfa effettiva era
   .64 e il rapporto si fermava a 4,1. Il minimo effettivo misurato e' .68,
   quindi serve almeno .68/.85 = .80; .90 lascia margine. */
.rm-foot-ver { color: rgba(var(--rm-rail-rgb), .90); }

/* LA BARRA PASSA AL MENU COMPATTO A 1100, NON A 900.
   Fra le due soglie restava in versione desktop senza starci: MISURATO a
   995px di finestra — le sei voci andavano a capo su tre righe e i pulsanti
   a destra sfondavano di 18px. Non si vedeva uno scroll orizzontale ma un
   TAGLIO, perche' `overflow-x: clip` su html (che serve al rientro a piena
   larghezza della 404) impedisce di scorrere: "Esci" spariva e basta.
   Marchio + 6 voci + ricerca + 3 pulsanti chiedono circa 1100px. */
@media (max-width: 1100px) {
    .rm-burger { display: flex; }
    .rm-nav-collapse {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 14px;
        padding: 14px 0;
        display: none;
    }
    .rm-nav-collapse.is-open { display: flex; }
    .rm-nav-search { width: 100%; }
    .rm-nav-search input { min-width: 0; flex: 1; }
    /* A colonna il margine automatico non serve piu' e anzi spinge le voci
       contro il bordo destro, mentre ricerca e pulsanti partono da sinistra:
       il menu risultava disallineato. Qui vanno a tutta larghezza. */
    .rm-links { flex-direction: column; gap: 2px; margin-left: 0; align-items: stretch; }
    .rm-links a { padding: 12px; }
    .rm-links a::after { left: 12px; transform: scaleX(0); }
    .rm-links a:hover::after,
    .rm-links a.is-active::after { transform: scaleX(1); }
    .rm-nav-auth { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-dot { animation: none; }
}

/* =====================================================================
   MENO SCATOLE.
   Contate sulle pagine vere: 640 riquadri su /stazioni, 305 su /tratte,
   di cui 888 erano la stessa identica card ripetuta. Un bordo per voce
   non raggruppa niente — c'e' gia' la ripetizione a dire che sono cose
   dello stesso tipo — e ruba lo spazio al dato.

   REGOLA: una scatola si guadagna il bordo solo se raggruppa qualcosa
   che altrimenti sarebbe ambiguo. Un elenco di 600 voci uguali non lo e':
   e' un tabellone. Quattro numeri in fila non lo sono: sono un quadrante.
   Dove il bordo sparisce, a separare restano il filo, lo spazio e la
   gerarchia tipografica — che e' anche piu' facile da scorrere.
   ===================================================================== */

/* ---- elenchi di tratte e stazioni: da griglia di card a tabellone ---- */
.bl-routes {
    display: grid;
    /* 620 E NON 470, ED E' LA STESSA REGOLA DI PRIMA PORTATA FINO IN FONDO:
       la riga deve contenere ENTRAMBI, il nome intero e i numeri.
       A 470 la scheda veniva larga 473 px e al nome ne restavano 271. Ma il
       nome piu' lungo di questa pagina — «MILANO CADORNA -> MALPENSA
       AEROPORTO TERMINAL 2» — ne chiede 409: misurati il 17/09/2026, con 23
       righe su 60 accorciate. A 620 la seconda colonna compare solo quando
       ogni scheda puo' tenerci dentro anche quello.
       CI GUADAGNA ANCHE L'INTESTAZIONE, che era il difetto peggiore: aveva
       `max-width: 528px` e copriva la PRIMA colonna soltanto (12->540 su una
       griglia 12->997). I numeri della colonna destra — «37 +2' 88%» — non
       avevano nessuna etichetta sopra, e senza etichetta tre numeri nudi non
       si sa cosa siano. Con una colonna sola l'intestazione le dice tutte,
       e il max-width che serviva a nasconderlo non serve piu'. */
    grid-template-columns: repeat(auto-fill, minmax(var(--rt-min, 470px), 1fr));
    gap: 0 40px;
    margin-top: 4px;
}
/* ELENCHI DI COPPIE DI NOMI (origine -> destinazione): servono 620 px per
   riga, e sotto quella soglia la colonna resta una sola. Gli elenchi di
   nomi SINGOLI (stazioni, regioni) stanno larghi meno e tengono le due
   colonne: il nome di stazione piu' lungo di /stazioni ne chiede 253,
   quello di /regione/lombardia 288 — misurati. Forzare una colonna anche
   li' avrebbe raddoppiato una pagina da 200 righe per riempirla di vuoto. */
.bl-routes--coppie { --rt-min: 620px; }

.bl-route-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 16px;
    padding: 11px 10px 11px 14px;
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--rm-line);
    color: var(--rm-ink);
    text-decoration: none;
    transition: background var(--t-base) var(--ease-out), padding-left var(--t-base) var(--ease-out);
}
.bl-route-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--rm-line);
    background: rgba(var(--rm-rail-rgb), .07);
    padding-left: 18px;
    color: var(--rm-ink);
    text-decoration: none;
}
/* Il filo della puntualita' resta: e' un dato, non una decorazione. Era
   un'ombra interna da 3px, che senza la card non avrebbe piu' un bordo su
   cui appoggiarsi; qui diventa un segmento vero. */
.bl-route-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: var(--r-pill);
    background: transparent;
}
.bl-route-card.is-ok, .bl-route-card.is-warn, .bl-route-card.is-bad { box-shadow: none; }
.bl-route-card.is-ok::before { background: var(--rm-green); }
.bl-route-card.is-warn::before { background: var(--rm-amber); }
.bl-route-card.is-bad::before { background: var(--rm-red); }

.bl-route-od {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    /* La vecchia regola aveva flex-wrap:wrap: origine, freccia e
       destinazione andavano a capo e la riga passava da 46 a 76px.
       Su un tabellone le righe devono essere tutte alte uguale — e'
       quello che permette di scorrere con l'occhio invece che leggere. */
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
    font-family: "Bricolage Grotesque", Inter, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* CHI E' PIU' LUNGO SI ACCORCIA DI PIU'.
   Senza `--n` i due nomi si restringono in proporzione alla loro larghezza
   naturale, quindi anche il corto ci rimette: su /tratte «STABIO» diventava
   «STA…» per far posto a «MALPENSA AEROPORTO TERMINAL 2», che restava
   comunque tagliato. Con flex-shrink pari al numero di lettere (lo conta
   PHP, il CSS non puo') il taglio si distribuisce col quadrato della
   lunghezza: il nome lungo assorbe quasi tutto e quello corto resta intero.
   Il valore di scorta e' 1, cioe' il comportamento di prima. */
.bl-route-o, .bl-route-d { min-width: 0; flex-shrink: var(--n, 1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-route-arrow { color: rgba(var(--rm-rail-rgb), .7); font-weight: 400; }
/* I numeri a destra, in colonna, con le cifre della stessa larghezza:
   e' quello che rende un elenco confrontabile invece che solo leggibile. */
.bl-route-meta {
    grid-column: 2;
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: var(--rt-gap);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    /* .62 e non .45: a .45 il rapporto era 4,01 (misurato su /stazioni,
       il nome della regione accanto a ogni stazione). Stessa alfa e stesso
       colore del difetto gia' corretto su .rec-d: la coppia .45 su
       #E8EDF4 non regge il minimo a questo corpo. */
    color: rgba(var(--rm-ink-rgb), .62);
    white-space: nowrap;
}
.bl-route-meta b { color: var(--rm-ink); font-weight: 500; }
.bl-route-meta > span { min-width: var(--rt-col); text-align: right; }

/* INTESTAZIONE DELL'ELENCO: LARGA QUANTO UNA SCHEDA, NON QUANTO UN NUMERO
   SCRITTO A MANO.
   Aveva `max-width: 528px`, che e' la larghezza di una scheda SOLO quando il
   contenitore e' al massimo (1096px). A 985 le schede vengono 472,5 e
   l'intestazione ne sporgeva di 55: le sue colonne di numeri, ancorate a
   destra, finivano 55px piu' a destra di quelle che dovevano etichettare.
   Adesso porta la STESSA griglia dell'elenco e le etichette stanno dentro la
   prima cella (.bl-routes-hc): larga quanto una scheda a qualunque larghezza,
   e larga tutta la riga quando la colonna e' una sola. */
.bl-routes-h {
    display: none;
    border-bottom: 1px solid var(--rm-line);
}
.bl-routes-hc {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(var(--rm-rail-rgb), .8);
    padding: 0 10px 8px 14px;
}
.bl-routes-hc > span + span { text-align: right; }
@media (min-width: 561px) {
    .bl-routes-h {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--rt-min, 470px), 1fr));
        gap: 0 40px;
    }
    /* Stesse colonne della riga sotto: le misure vengono da --rt-col e
       --rt-gap, dichiarate una volta sola accanto agli altri gettoni, cosi'
       ogni intestazione sta davvero sopra la sua colonna invece che li'
       vicino — e non puo' piu' scollarsi dai numeri. */
    .bl-routes-hc {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr;
        grid-auto-columns: var(--rt-col);
        column-gap: var(--rt-gap);
        align-items: baseline;
    }
}

@media (max-width: 560px) {
    .bl-routes { grid-template-columns: 1fr; gap: 0; }
    .bl-route-card { grid-template-columns: 1fr; padding: 10px 0 10px 12px; }
    .bl-route-meta { grid-column: 1; justify-self: start; gap: 12px; }
    /* I numeri vanno sotto il nome e restano comunque senza etichetta:
       "33" da solo non dice niente. L'intestazione quindi NON sparisce,
       perde solo la colonna del nome e si allinea ai numeri sottostanti. */
    .bl-routes-h { display: block; }
    .bl-routes-hc {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--rt-col);
        column-gap: var(--rt-gap);
        justify-content: start;
        align-items: baseline;
        max-width: none;
        padding: 0 0 8px 12px;
    }
    .bl-routes-hc > span:first-child { display: none; }
}

/* I nomi lunghi nelle classifiche uscivano dallo schermo sul telefono
   (Milano Centrale -> Reggio di Calabria Centrale sono 387px su 375).
   Stessa regola del tabellone: si accorciano, non sfondano. */
.bl-rank-lbl { min-width: 0; overflow: hidden; }
.bl-rank-lbl a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- gli snodi: restano in griglia, perdono il riquadro ------------- */
.bl-hubs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rm-line);
}
.bl-hub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 14px;
    background: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rm-line);
    box-shadow: none;
    text-decoration: none;
    transition: background var(--t-base) var(--ease-out);
}
.bl-hub:hover {
    transform: none;
    border-color: var(--rm-line);
    background: rgba(var(--rm-rail-rgb), .07);
    text-decoration: none;
}
.bl-hub-num { font-variant-numeric: tabular-nums; }

/* ---- quadranti numerici: separati da un filo, non da un bordo ------- */
/* Il riquadro attorno a ogni numero li faceva leggere come quattro cose
   diverse. Sono un solo strumento a quattro indici: un filo verticale
   basta a dividerli e li tiene insieme. */
.rm-stats, .bl-stats { gap: 0; }
.rm-stat, .bl-stat {
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 20px;
    border-left: 1px solid var(--rm-line);
}
.rm-stats > .rm-stat:first-child,
.bl-stats > .bl-stat:first-child { border-left: 0; padding-left: 0; }
.rm-stat:hover, .bl-stat:hover { transform: none; border-color: var(--rm-line); }
.rm-stat .rm-n, .bl-stat .bl-n {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
/* Sopra la fotografia dell'hero il fondo serve davvero: il testo bianco
   su un'immagine senza velo non si legge. Li' la scatola resta. */
.rm-stats-hero .rm-stat,
.rm-home-hero .rm-stat {
    background: rgba(var(--rm-bg-rgb), .62);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-md);
    padding: 14px 16px;
}
@media (max-width: 640px) {
    .rm-stat, .bl-stat { border-left: 0; border-top: 1px solid var(--rm-line); padding: 12px 0; }
    .rm-stats > .rm-stat:first-child,
    .bl-stats > .bl-stat:first-child { border-top: 0; }
}

/* ---- pannelli: restano contenitori, smettono di essere schede ------- */
/* Qui il raggruppamento serve (dentro c'e' una tabella, un grafico), ma
   non serve il bordo: bastano il fondo appena piu' chiaro e la riga di
   titolo. Un bordo in piu' su ogni pannello e' quello che dava alle
   pagine l'aria di essere fatte solo di schede. */
.rm-panel, .data-panel, .side-panel {
    border: 0;
    box-shadow: none;
    background: var(--rm-surface2);
    border-radius: var(--r-lg);
}
.rm-panel:hover, .data-panel:hover, .side-panel:hover { transform: none; box-shadow: none; }
/* La riga di titolo diventa una targa di servizio col filo sotto. */
.rm-panel-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rm-line);
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--rm-rail);
}

/* ---- schede informative: filo sopra invece del riquadro ------------- */
.rm-cards { gap: 0 28px; }
.rm-card {
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 18px 0 16px;
    border-top: 2px solid var(--rm-line);
}
.rm-card:hover {
    transform: none;
    box-shadow: none;
    border-top-color: var(--rm-accent);
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-card .rm-ic {
    background: 0;
    color: var(--rm-rail);
    padding: 0;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
    .bl-route-card, .bl-hub, .rm-card { transition: none; }
}

/* =====================================================================
   COMPONENTI CONDIVISI nella grammatica nuova.
   Censite le pagine una per una, i pezzi ancora "Bootstrap generico" non
   erano nelle singole pagine ma nei componenti che TUTTE usano: la
   testata, i selettori periodo/vista (btn-dark / btn-outline-dark) e le
   tabelle. Sistemarli qui rifa' in un colpo Panoramica, Puntualita',
   Record, Storico ritardi, Ritardi oggi e le schede di tratta e stazione.
   ===================================================================== */

/* ---- testata di pagina ---------------------------------------------- */
.ph {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 28px;
    padding-bottom: 20px;
    margin-bottom: 26px;
}
/* Il filo del binario chiude la testata, come sotto la barra e sopra il
   piede: e' il segno che tiene insieme tutto il sito. */
.ph::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(var(--rm-rail-rgb), .38), rgba(var(--rm-rail-rgb), .08)),
        repeating-linear-gradient(90deg, rgba(var(--rm-rail-rgb), .15) 0 2px, transparent 2px 26px);
    background-size: 100% 1px, 100% 100%;
    background-repeat: no-repeat, repeat-x;
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
    mask-image: linear-gradient(90deg, #000 62%, transparent);
}
.ph-main { min-width: 0; }

/* L'occhiello era una pillola su fondo chiaro (#e7f0f6), rimasta dal
   tema chiaro: su fondo notte era una macchia. Ora e' una targa. */
.rm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--rm-rail);
    background: rgba(var(--rm-rail-rgb), .07);
    border: 1px solid var(--rm-line);
    border-radius: var(--r-sm);
    padding: 6px 11px;
    margin-bottom: 14px;
}
.ph-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.6vw, 2.5rem);
    line-height: 1.03;
    letter-spacing: -.025em;
    margin: 0;
    text-wrap: balance;
}
.ph-sub {
    color: rgba(var(--rm-ink-rgb), .55);
    margin: 10px 0 0;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.55;
}
/* I dati della testata: quadrante, non scatolette. */
.ph-chips { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.ph-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: 0;
    border: 0;
    border-radius: 0;
    border-left: 1px solid var(--rm-line);
    padding: 2px 18px;
}
.ph-chips > .ph-chip:first-child { border-left: 0; padding-left: 0; }
.ph-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rm-ink);
    line-height: 1.1;
}
/* L'UNICO POSTO CHE DICE COM'E' FATTA QUESTA ETICHETTA. Prima erano tre
   blocchi in tre punti del foglio e vinceva quello di mezzo per specificita'
   (vedi il commento su .ph-chip .ph-l piu' sopra).
   IL COLORE E' BIANCO AL 50%, NON #E8EDF4 AL 45%. Il .45 che stava scritto
   qui non e' mai stato applicato, e per fortuna: e' la stessa coppia
   valore/fondo gia' bocciata su .rec-d, che dava 4,01 di rapporto contro il
   minimo di 4,5. Il bianco al 50% sul fondo della pagina da' 5,33. */
.ph-l {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .5);
}

/* ---- selettori periodo / vista --------------------------------------
   Erano btn-dark e btn-outline-dark di Bootstrap: due pulsanti pieni che
   si contendevano l'attenzione con la vera azione della pagina. Un
   selettore non e' un'azione, e' uno stato: qui diventa un segmentato
   mono, come il selettore di banchina di un tabellone. */
main a.btn-sm.btn-dark,
main a.btn-sm.btn-outline-dark {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rm-line);
    box-shadow: none;
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
main a.btn-sm.btn-outline-dark {
    background: 0;
    color: rgba(var(--rm-ink-rgb), .58);
}
main a.btn-sm.btn-outline-dark:hover {
    background: rgba(var(--rm-rail-rgb), .09);
    border-color: rgba(var(--rm-rail-rgb), .35);
    color: var(--rm-ink);
}
/* Lo stato scelto: acceso ma non urlato, e con il segno del binario. */
main a.btn-sm.btn-dark {
    position: relative;
    background: rgba(var(--rm-accent-rgb), .12);
    border-color: rgba(var(--rm-accent-rgb), .38);
    color: var(--g-soft);
}
main a.btn-sm.btn-dark:hover {
    background: rgba(var(--rm-accent-rgb), .18);
    border-color: var(--rm-accent);
    color: var(--g-soft);
}
main a.btn-sm.btn-dark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 18px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--rm-accent);
    transform: translateX(-50%);
}
main a.btn-sm.btn-dark:focus-visible,
main a.btn-sm.btn-outline-dark:focus-visible {
    outline: 2px solid var(--rm-rail);
    outline-offset: 2px;
}

/* Le AZIONI restano pulsanti. Erano finite anche loro nel segmentato:
   "Filtra" e "Condividi" avevano l'aria di due linguette spente, cioe'
   di uno stato non scelto invece che di una cosa da premere. Nel markup
   la differenza c'e' gia': uno stato e' un <a> che porta altrove, una
   azione e' un <button> che fa succedere qualcosa. */
main button.btn-dark,
main button.btn-outline-dark,
main .btn[data-share] {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 9px 16px;
    border-radius: var(--r-md);
    box-shadow: none;
}
main button.btn-dark {
    background: var(--rm-accent);
    border: 1px solid var(--rm-accent);
    color: var(--rm-on-accent);
}
main button.btn-dark:hover {
    background: var(--g-strong);
    border-color: var(--g-strong);
    color: var(--rm-on-accent);
}
main button.btn-outline-dark,
main .btn[data-share] {
    background: rgba(var(--rm-rail-rgb), .08);
    border: 1px solid var(--rm-line);
    color: var(--rm-ink);
}
main button.btn-outline-dark:hover,
main .btn[data-share]:hover {
    background: rgba(var(--rm-rail-rgb), .16);
    border-color: rgba(var(--rm-rail-rgb), .4);
    color: var(--rm-ink);
}
/* SPENTO MA LEGGIBILE. Bootstrap tinge il bottone spento col suo grigio
   scuro (--bs-btn-disabled-color, #212529) e la regola di Bootstrap batte
   quelle qui sopra: sul fondo notte la scritta spariva. Successo il
   01/10/2026 con «Avvisi bloccati» sulla scheda treno, e vale anche per
   «Memoria non disponibile» e per «Un momento...». */
main button.btn-outline-dark:disabled {
    background: transparent;
    border-color: var(--rm-line);
    color: var(--rm-muted);
    opacity: 1;
}
main button.btn-dark::after { content: none; }

/* ---- tabelle: tabellone, non griglia -------------------------------- */
main .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rm-ink);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
main .table > :not(caption) > * > * { background: 0; box-shadow: none; }
/* La specificita' conta: `.data-panel .table thead th` (due classi)
   batteva `main .table thead th` (una), e le intestazioni restavano in
   Space Grotesk dentro i pannelli. Si nominano tutti i contenitori. */
main .table thead th,
main .data-panel .table thead th,
main .rm-panel .table thead th,
main .side-panel .table thead th {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(var(--rm-rail-rgb), .85);
    border-bottom: 1px solid var(--rm-line);
    border-top: 0;
    padding: 0 14px 10px;
    white-space: nowrap;
}
main .table tbody td,
main .data-panel .table tbody td,
main .rm-panel .table tbody td,
main .side-panel .table tbody td {
    border-top: 0;
    border-bottom: 1px solid var(--rm-line);
    padding: 11px 14px;
    vertical-align: middle;
}
main .table tbody tr:last-child td { border-bottom: 0; }
main .table tbody tr { transition: background var(--t-base) var(--ease-out); }
main .table tbody tr:hover td { background: rgba(var(--rm-rail-rgb), .06); }
/* Le cifre in colonna: e' cio' che rende una tabella confrontabile. */
main .table .mono,
main .table td.text-end,
main .table th.text-end { font-variant-numeric: tabular-nums; }

/* ---- record: da schede a voci di tabellone --------------------------- */
/* auto-fIT e non auto-fILL, e un minimo piu' basso: i record sono CINQUE
   e con tracce da 250px piu' 32 di distanza ne entravano quattro, cosi'
   «Il giorno nero» restava da solo su una seconda riga come un ripensamento.
   190 + 20 di distanza fanno stare in riga tutti e cinque a 1.096px. */
/* COLONNE PIU' LARGHE DA QUANDO OGNI PRIMATO HA LA SUA SPIEGAZIONE.
   Con 190px di minimo cinque riquadri stavano in fila su desktop: perfetto
   per cinque numeri, illeggibile per cinque paragrafi — il testo usciva a
   quattro parole per riga. A 300px se ne affiancano tre e la riga torna
   leggibile. Il divario fra righe era a zero perche' prima le schede erano
   alte uguali: ora non lo sono piu'.
   NB: questa regola arriva DOPO quella della riga 1376 e la sovrascrive.
   Modificata qui, non appesa in fondo, o diventerebbero tre. */
/* RIGHE CHE SI CHIUDONO, NON UNA GRIGLIA CON UN BUCO IN FONDO.
   I primati sono cinque (e possono essere meno, se un criterio non trova
   nessuno sopra la sua soglia): in tre colonne l'ultima riga ne conteneva
   due e lasciava la terza cella vuota — 328x312 px misurati il 17/09/2026 —
   con la riga di separazione che si fermava a due terzi, come una tabella
   interrotta. Una griglia non sa contare i figli; flex-wrap si': gli
   elementi dell'ultima riga crescono e se la spartiscono, qualunque sia il
   loro numero e qualunque sia la larghezza dello schermo. */
.rec-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 20px;
    align-items: flex-start;
}
.rec-grid > * { flex: 1 1 300px; }
.rec-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "k v" "t v" "d v";
    align-items: baseline;
    gap: 2px 18px;
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--rm-line);
    padding: 16px 0 15px;
}
.rec-card::before { content: none; }
.rec-k {
    grid-area: k;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--rm-rail);
}
/* Il numero e' il protagonista: grande, a destra, allineato con gli altri. */
.rec-v {
    grid-area: v;
    align-self: center;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.rec-card.rec-bad .rec-v { color: var(--rm-red); }
.rec-card.rec-good .rec-v { color: var(--g-soft); }
.rec-t { grid-area: t; font-weight: 600; font-size: .95rem; color: var(--rm-ink); text-decoration: none; }
.rec-t:hover { color: var(--g-soft); }
/* .45 dava un rapporto di contrasto di 4,02 su fondo #0a0f1a: sotto il
   minimo di 4,5 per il testo normale, e questa riga porta la tratta e il
   numero di corse, cioe' il senso del primato. A .62 il rapporto sale a
   circa 6,3 e la gerarchia rispetto al dato grande resta.
   NB: esiste una .rec-d anche alla riga 1398, ma vince questa. */
.rec-d { grid-area: d; font-size: .8rem; color: rgba(var(--rm-ink-rgb), .62); line-height: 1.45; }

/* ---- il grafico settimanale ----------------------------------------- */
.rm-week-val, .rm-week-n { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .ph { align-items: flex-start; }
    .ph-chip { border-left: 0; border-top: 1px solid var(--rm-line); padding: 8px 0; width: 100%; }
    .ph-chips { flex-direction: column; width: 100%; }
    .ph-chips > .ph-chip:first-child { border-top: 0; }
    /* .rec-grid ora e' flex, non griglia: si impila con la direzione, e
       grid-template-columns qui non avrebbe piu' alcun effetto. */
    .rec-grid { flex-direction: column; gap: 0; }
    main .table thead th, main .table tbody td { padding-left: 8px; padding-right: 8px; }
}

/* ---- stati: pastiglie quiete, non blocchi di colore -----------------
   Erano i badge pieni di Bootstrap con i suoi colori grezzi (#FFC107 su
   testo nero): cinquanta rettangoli gialli dentro una tabella tolgono
   l'occhio proprio dai numeri per cui si e' aperta la pagina. Qui lo
   stato e' un punto colorato e una scritta, sul colore del sito.
   L'!important serve: Bootstrap dichiara background-color con
   !important dentro .text-bg-*, e senza pari forza restava il
   giallo pieno anche dopo aver cambiato testo e carattere. */
main .badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 9px 4px 8px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: 0;
    white-space: nowrap;
}
main .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: currentColor;
    flex: none;
}
/* IL PALLINO DEL «LIVE» STA NEL FLUSSO, non sopra il testo (08/10/2026).
   .badge-live lo posa in posizione assoluta a .5rem dal bordo e si riserva
   1,35rem a sinistra; ma «main .badge» qui sopra e' piu' specifico e il
   margine se lo riprende. Risultato sulla scheda di ogni treno in ritardo
   in viaggio: il pallino cadeva sulla seconda lettera, «I■ RITARDO».
   Dentro main il badge e' gia' un flex col suo pallino: basta rimetterlo
   in fila, e la pulsazione resta. */
main .badge.badge-live { padding-left: 8px; }
main .badge.badge-live::before { position: static; margin-top: 0; width: 6px; height: 6px; left: auto; top: auto; }
main .badge.text-bg-warning,
main .badge.bg-warning {
    background: rgba(var(--rm-amber-rgb), .13) !important;
    border-color: rgba(var(--rm-amber-rgb), .30) !important;
    color: var(--rm-amber) !important;
}
main .badge.text-bg-danger,
main .badge.bg-danger {
    background: rgba(214, 45, 52, .14) !important;
    border-color: rgba(214, 45, 52, .32) !important;
    color: var(--rm-red-soft) !important;
}
main .badge.text-bg-success,
main .badge.bg-success {
    background: var(--g-soft-bg) !important;
    border-color: rgba(var(--g-soft-rgb), .3) !important;
    color: var(--g-soft) !important;
}
main .badge.text-bg-secondary,
main .badge.bg-secondary,
main .badge.text-bg-light,
main .badge.bg-light {
    background: rgba(var(--rm-rail-rgb), .10) !important;
    border-color: var(--rm-line) !important;
    color: rgba(var(--rm-ink-rgb), .62) !important;
}
main .badge.text-bg-info,
main .badge.bg-info {
    background: rgba(var(--rm-rail-rgb), .13) !important;
    border-color: rgba(var(--rm-rail-rgb), .3) !important;
    color: var(--rm-rail) !important;
}
/* text-bg-dark era l'unica variante senza regola: restava il bianco fisso
   di Bootstrap, e «Soppresso» nella cronologia dei pronostici
   (pagine_gioco.php) spariva nel tema chiaro (02/10/2026). */
main .badge.text-bg-dark,
main .badge.bg-dark {
    color: var(--rm-ink) !important;
}

/* ---- campi: stesso fuoco della ricerca in barra --------------------- */
main .form-control,
main .form-select {
    background: rgba(13, 20, 32, .8);
    border: 1px solid var(--rm-line);
    color: var(--rm-ink);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
main .form-control::placeholder { color: var(--rm-muted); }
main .form-control:focus,
main .form-select:focus {
    background: rgba(13, 20, 32, .9);
    border-color: var(--rm-accent);
    box-shadow: 0 0 0 3px rgba(var(--rm-accent-rgb), .16);
    color: var(--rm-ink);
    outline: 0;
}

/* =====================================================================
   SCHEDA DEL TRENO.
   L'ossatura era gia' buona: il grosso dei "riquadri" contati erano i 27
   pallini delle fermate, non schede. Mancava la grammatica — .detail-panel
   era rimasto fuori dalla sbordatura, e i titoli di sezione non avevano
   la targa. Qui la corsa diventa quello che e': un tabellone di fermate.
   ===================================================================== */

.detail-panel,
.side-panel.rm-predict {
    border: 0 !important;
    box-shadow: none;
    background: var(--rm-surface2);
    border-radius: var(--r-lg);
}

/* =====================================================================
   GERARCHIA DEI TITOLI: tre livelli e una scala sola (24/09/2026).

   L'H2 esisteva in CINQUE forme: 34px dove c'era .rm-sec-head, 37 in
   home, 24 nelle pagine di testo, e 12px in maiuscolo monospaziato — la
   «targa» — dentro ogni pannello. Sulla scheda del treno TUTTI i titoli
   di sezione erano targhe: l'occhio passava dal titolo della pagina,
   48px, a titoli da 12, e le sezioni si leggevano come didascalie. Su
   Roma Termini due sezioni sorelle uscivano una a 34px e una a 12. E fra
   il titolo della pagina (40px) e quello di sezione (34) il salto non si
   vedeva.

   LA REGOLA: un pannello che E' una sezione ha un titolo; un pannello
   DENTRO una sezione che ha gia' il suo titolo porta la targa. E' la
   grammatica che home e Statistiche usavano gia'.

     1  titolo della pagina   .ph-title, ~40px        (invariato)
     2  titolo di sezione     --rm-h2, da 22 a 27px   .rm-sec-head, pannelli-sezione, testi
     3  sotto-sezione         --rm-h3, 18px
     ·  targa                 .72rem mono maiuscolo   pannelli dentro una sezione

   Anche .rm-home (home, Statistiche, liste) usa --rm-h2; restano grandi
   solo le fasce promozionali .bl-h2, che sono richiami e non sezioni.
   ===================================================================== */
:root {
    --rm-h2: clamp(1.35rem, 1rem + 1.4vw, 1.7rem);
    --rm-h3: 1.15rem;
}

/* 2 — il pannello E' la sezione: titolo vero. Discendente e non figlio
   diretto: "Questo treno di solito" sta in un .rm-sec-head dentro il
   pannello, e col selettore `>` resterebbe fuori. */
.detail-panel h2,
.side-panel h2,
.data-panel h2,
.rm-panel h2,
.rm-predict h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--rm-line);
    font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
    font-size: var(--rm-h2) !important;
    font-weight: 800;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: -.02em;
    color: var(--rm-ink);
}

/* · — targa per le SCHEDE AFFIANCATE (.bl-two): «Prossima fermata» e
   «Arrivo a destinazione» sul treno, i tre riquadri di puntualita' in home.
   Sono carte di un gruppo, non sezioni. Una prima versione dava la targa a
   ogni .rm-panel, e «Il percorso» del treno — la mappa, una sezione intera —
   restava una didascalia da 12px.
   DUE REGOLE E NON UNA LISTA: in CSS un selettore che il browser non capisce
   fa cadere l'intera lista, e con `:has()` dentro un browser vecchio
   perderebbe anche queste. */
.bl-two .rm-panel h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    margin: 0 0 15px;
    border-bottom: 1px solid var(--rm-line);
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: .72rem !important;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--rm-rail);
}
/* `:has(> .rm-sec-head)` e non `:has(.rm-sec-head)`: su /treni e /tratte i
   pannelli stanno in un .rm-sec SENZA titolo proprio, e li' le sezioni sono
   loro. Oggi non scatta su nessuna pagina: tiene la regola per quando un
   pannello con titolo finira' dentro una sezione con titolo. */
:is(.rm-sec, .rm-block):has(> .rm-sec-head) :is(.detail-panel, .side-panel, .data-panel, .rm-predict, .rm-panel) h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    margin: 0 0 15px;
    border-bottom: 1px solid var(--rm-line);
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: .72rem !important;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--rm-rail);
}

/* 2 — i titoli di sezione fuori dai pannelli, sulla stessa scala. */
.rm-sec-head h2,
.rm-legal h2 { font-size: var(--rm-h2); }

/* Respiro sopra un titolo di sezione che segue un altro blocco. Esisteva
   solo dentro .rm-home; su Roma Termini «La puntualita' ora per ora» stava
   attaccato al tabellone, margini 0 e 0 (misurato il 24/09/2026). Solo i
   titoli FIGLI DIRETTI del contenuto: quelli dentro un pannello hanno gia'
   il pannello intorno. 40px e' lo stacco che hanno gia' le altre pagine. */
main.container > .rm-sec-head:not(:first-child) { margin-top: 40px; }

/* 3 — sotto-sezioni. Gli scioperi non avevano una misura: l'h3 cadeva sul
   1.75rem di Bootstrap, 28px, piu' grande dei titoli che lo contengono. */
.rm-legal h3,
.sci-spiega h3 { font-size: var(--rm-h3); }

/* ---- le fermate: un tabellone, riga per riga ------------------------ */
.rm-tl-row {
    border-bottom: 1px solid var(--rm-line);
    transition: background var(--t-base) var(--ease-out);
}
.rm-tl-row:last-child { border-bottom: 0; }
.rm-tl-row:hover { background: rgba(var(--rm-rail-rgb), .05); }
.rm-tl-time {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .88rem;
}
.rm-tl-name { font-weight: 600; letter-spacing: -.005em; }
.rm-tl-name a { text-decoration: none; color: var(--rm-ink); }
.rm-tl-name a:hover { color: var(--g-soft); }
/* La fermata dove il treno sta arrivando: e' l'unica informazione per cui
   uno apre questa pagina, e va trovata senza cercarla. */
.rm-tl-row.is-next {
    position: relative;
    background: rgba(var(--rm-accent-rgb), .07);
    border-radius: 0;
}
.rm-tl-row.is-next::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: var(--r-pill);
    background: var(--rm-accent);
}
.rm-tl-nextpill {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--g-soft);
    background: var(--g-soft-bg);
    border: 1px solid rgba(var(--g-soft-rgb), .3);
    border-radius: var(--r-sm);
    padding: 2px 7px;
}
.rm-tl-plat {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    background: rgba(var(--rm-rail-rgb), .10);
    border: 1px solid var(--rm-line);
    border-radius: var(--r-sm);
    color: var(--rm-rail);
}

/* ---- lo storico: barre sottili, non blocchi ------------------------- */
.rm-hist-bar {
    background: rgba(var(--rm-rail-rgb), .10);
    border: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
}
.rm-hist-fill { border-radius: var(--r-pill); }
.rm-hist-sum { border: 0; background: 0; }

/* Tutti i numeri della scheda in colonna. */
.rm-tl-row .mono,
.rm-hist-sum .mono,
.rm-prog-next .mono { font-variant-numeric: tabular-nums; }

/* ---- la testata della scheda treno ----------------------------------
   Era l'unica pagina del sito senza testata: nessun occhiello, nessun
   titolo a piena larghezza, nessun filo. L'h1 stava DENTRO il primo
   pannello, rientrato e largo un terzo dello schermo, cosi' la pagina
   cominciava di colpo, dentro una scatola. Ora si apre come tutte le
   altre — stesso occhiello, stesso titolo, stesso filo del binario. */
.rm-th-hero {
    position: relative;
    padding: 0 0 20px;
    margin: 0 0 26px;
    background: 0;
    border: 0;
    border-radius: 0;
}
.rm-th-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(var(--rm-rail-rgb), .38), rgba(var(--rm-rail-rgb), .08)),
        repeating-linear-gradient(90deg, rgba(var(--rm-rail-rgb), .15) 0 2px, transparent 2px 26px);
    background-size: 100% 1px, 100% 100%;
    background-repeat: no-repeat, repeat-x;
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
    mask-image: linear-gradient(90deg, #000 62%, transparent);
}
.rm-th {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 28px;
}
.rm-th-main { min-width: 0; }
.rm-th-main h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin: 0;
}
.rm-th-sub {
    color: rgba(var(--rm-ink-rgb), .55);
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: 1.5;
}
.rm-th-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Gli orari programmati: un quadrante, come la testata delle altre pagine. */
.rm-train-times {
    display: flex;
    align-items: baseline;
    gap: 0;
    margin: 16px 0 0;
    flex-wrap: wrap;
}
.rm-train-times > span {
    border-left: 1px solid var(--rm-line);
    padding: 2px 18px;
    font-size: .84rem;
    color: rgba(var(--rm-ink-rgb), .5);
}
.rm-train-times > span:first-child { border-left: 0; padding-left: 0; }
.rm-train-times strong {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rm-ink);
    margin-left: 6px;
}
.rm-times-note {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(var(--rm-rail-rgb), .7);
}

/* La colonna di destra teneva 258px di contenuto in 3.068px di altezza:
   quasi tremila pixel di vuoto accanto all'elenco delle fermate. Resa
   adesiva segue la lettura invece di restare indietro. */
@media (min-width: 992px) {
    .rm-th-page .row > aside {
        position: sticky;
        top: 84px;
        align-self: start;
    }
}

/* =====================================================================
   PAGINE ACCOUNT nella scena della 404.
   Login, registrazione e recupero password sono pagine-MOMENTO: un solo
   compito, nessun dato da leggere. E' l'unica categoria, insieme alla
   404, in cui la scena a piena pagina e' giusta — sotto una tabella di
   ritardi toglierebbe solo leggibilita'. Avevano per giunta il difetto
   che dalla 404 avevamo tolto: la foto del treno dentro una card.
   ===================================================================== */
.bl-auth { min-height: min(80vh, 720px); }
.bl-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    align-items: center;
    gap: 40px 56px;
    padding: clamp(28px, 5vh, 56px) 0;
}
/* z-index 5 come i testi della 404. Senza, il modulo resta `static` e
   viene dipinto PRIMA degli elementi posizionati: la scena (z-index 2) gli
   passa sopra e il riquadro sparisce sotto il treno. I titoli si vedevano
   perche' .bl404-title & c. hanno gia' z-index 5.
   Il tranello: la scena ha pointer-events:none, quindi elementFromPoint
   rispondeva "l'input e' in cima" — il test dei click la salta, la
   pittura no. La geometria era giusta, l'ordine di pittura no. */
.bl-auth-copy,
.bl-auth-form { position: relative; z-index: 5; }
.bl-auth-copy { max-width: 30rem; }
.bl-auth-copy .bl404-lead { margin-top: 16px; max-width: none; }
.bl-auth-copy .bl404-lead strong { color: var(--g-soft); display: inline-block; }
/* LA SCIA PASSAVA IN MEZZO ALLA FRASE. `.bl404-streak` sta a top:51% della
   scena: sulla 404, dove la copia e' corta, cade nel vuoto ed e' la scia di
   velocita' del treno. Sulle pagine di accesso la colonna di testo e' piu'
   alta — occhiello, titolo, slogan e nota — e il 51% cade dentro l'ultima
   frase: misurato il 10/09/2026 su /login, riga a 580px contro una nota che
   va da 547 a 595. Il testo sta sopra (z-index 5), quindi la riga passa
   dietro le lettere, ma a occhio sembra una cancellatura proprio sulla frase
   che spiega a che serve registrarsi. Spostata sotto la copia: resta la scia,
   sparisce la collisione. */
.bl-auth .bl404-streak { top: 68%; }

/* Il modulo galleggia sulla scena: qui il fondo serve davvero, perche' i
   campi devono restare leggibili sopra l'immagine. E' la stessa eccezione
   dei quadranti sopra l'hero. */
.bl-auth-form {
    background: rgba(var(--rm-bg-rgb), .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-xl);
    padding: 26px 24px;
    box-shadow: var(--sh-3);
    animation: bl4In .9s var(--ease-out) .18s both;
}
.bl-auth-form .stacked-form { display: flex; flex-direction: column; gap: 16px; }
.bl-auth-form label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--rm-rail);
}
.bl-auth-form .form-control {
    width: 100%;
    margin-top: 7px;
    padding: 11px 13px;
    font-family: Inter, system-ui, sans-serif;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
}
.bl-auth-form .auth-hint {
    display: block;
    margin-top: 6px;
    font-family: Inter, system-ui, sans-serif;
    font-size: .78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rm-muted);
}
.bl-auth-form .rm-btn-primary {
    justify-content: center;
    padding: 12px 18px;
    font-size: .95rem;
    margin-top: 4px;
}
.bl-auth-alt {
    margin: 18px 0 0;
    font-size: .88rem;
    line-height: 1.7;
    color: rgba(var(--rm-ink-rgb), .5);
}
/* BERSAGLIO DA 24px anche per i link che riempiono una cella di tabella:
   i codici treno su /statistiche e i nomi utente in /classifica erano alti
   22px — misurati a 375px il 10/09/2026 — cioe' a due pixel dal minimo.
   `:first-child` e' la parte che conta. Il primo tentativo usava
   `:only-child` e non prendeva niente: le celle hanno piu' figli — il
   codice treno e' seguito da un <br> e dalla tratta, il nome utente da
   altri elementi. «Primo figlio» invece coglie il link che apre la cella e
   lascia stare quelli in coda a una frase, come «Scegli un treno e gioca»
   nella riga vuota della cronologia: li' ingrossare spezzerebbe il testo,
   e per un link dentro una frase il minimo tattile non si applica.
   `.an-item` e' la stessa forma fuori da una tabella: righe di elenco che
   aprono una scheda. Trovato sul profilo, dove il codice treno stava a
   22px — misurato il 10/09/2026, la prima volta che ho potuto aprire
   quella pagina con un accesso vero. */
main td > a:first-child,
main td .tbl-v > a:first-child,
main .an-item > a:first-child,
/* Stessa forma nelle coincidenze: il codice treno e' un bersaglio a se',
   non una parola in una frase, e stava a 22px. Misurato il 10/09/2026 a
   375px sulla pagina dei collegamenti con cambio. Il link del NODO invece
   resta com'e': quello sta dentro «Cambio a MESSINA CENTRALE», cioe'
   dentro una frase, dove il minimo tattile non si applica. */
main .bl-camb-tre > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* BERSAGLIO DA 24px, come gia' su .rm-foot-legal a e .rm-sec-link.
   Qui erano alti 17px — misurato a 375px il 10/09/2026 — e sono i due link
   che un nuovo utente tocca di piu' sul telefono: «Registrati gratis» e
   «Password dimenticata?». inline-flex con min-height allarga l'area
   toccabile senza spostare il testo di un pixel; align-items:center tiene
   la linea di base dov'era. */
.bl-auth-alt a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--g-soft);
    text-decoration: none;
}
.bl-auth-alt a:hover { text-decoration: underline; }

/* Sotto i 900 il modulo va sotto il testo e la scena torna atmosfera. */
@media (max-width: 900px) {
    .bl-auth-grid { grid-template-columns: 1fr; gap: 28px; }
    .bl-auth-copy { max-width: none; }
    .bl-auth { min-height: 0; padding-bottom: clamp(120px, 26vw, 200px); }
    .bl-auth .bl404-train { width: 150%; right: -30%; bottom: -6%; }
}
@media (max-width: 600px) {
    .bl-auth .bl404-train { width: 190%; right: -50%; }
    .bl-auth-form { padding: 20px 16px; }
}

/* Chi non e' classificato, elencato sotto il numero: un conteggio senza
   nomi non e' azionabile. */
.dq-unk { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.dq-unk li {
    display: flex;
    gap: 8px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .68rem;
    color: var(--rm-muted);
}
.dq-unk a { color: var(--rm-rail); text-decoration: none; flex: none; }
.dq-unk a:hover { color: var(--g-soft); }
.dq-unk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-note {
    margin: 10px 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--rm-muted);
}
.dq-note code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .72rem;
    color: var(--rm-rail);
    background: rgba(var(--rm-rail-rgb), .09);
    padding: 1px 5px;
    border-radius: var(--r-sm);
}

/* =====================================================================
   PROFILO.
   Aveva DUE testate impilate: pf-head con avatar e nome, e subito sopra
   page_header con l'occhiello "Il tuo account" e il titolo generico
   "Profilo". Ora ce n'e' una sola, che usa le stesse classi .ph di tutte
   le altre pagine — quindi eredita il filo del binario e i dati come
   quadrante — e ci ospita dentro l'identita' e le schede.
   ===================================================================== */
.pf-head { display: block; }
.pf-head .ph-main { display: block; }
.pf-id { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.pf-idmain { min-width: 0; }

/* L'avatar era un gradiente verde-accento: e' esattamente il segnale
   "fatto con l'AI" che era gia' stato tolto dal resto del sito a luglio.
   Superficie piatta, filo sottile, iniziale nel colore d'accento. */
.pf-avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: rgba(var(--rm-rail-rgb), .10);
    border: 1px solid var(--rm-line);
    color: var(--g-soft);
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
}
.pf-head .ph-title { margin: 0; }
.pf-head .ph-sub { margin: 6px 0 0; }
.pf-level { color: var(--g-soft); font-weight: 600; }
.pf-level-bar {
    width: min(320px, 100%);
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--rm-line);
    margin-top: 12px;
    overflow: hidden;
}
.pf-level-fill { height: 100%; border-radius: var(--r-pill); background: var(--rm-accent); }
.pf-level-note {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--rm-muted);
    margin-top: 6px;
}
.pf-head .ph-actions { margin-top: 18px; }
/* .62 e non .38: a .38 il rapporto era 3,19. E' la riga che dice «1/12»
   accanto a «I miei treni» — piccola per scelta, non invisibile. */
.pf-dim { color: rgba(var(--rm-ink-rgb), .62); font-weight: 400; font-size: .62em; }


/* Le impostazioni hanno TRE pannelli: rm-live-grid e' 1.5fr/1fr, pensata
   per due, e lasciava il terzo da solo su una riga larga il doppio. */
.pf-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: start;
}

/* ---- metriche chiave/valore: quadrante, non scatolette --------------
   Usate anche su scheda treno e stazione: qui cambiano ovunque. Erano
   riquadri con fondo e bordo, uno per numero — la stessa ripetizione che
   avevamo tolto dagli elenchi. */
.metric-grid,
.detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin: 14px 0 0;
    border-top: 1px solid var(--rm-line);
}
.metric-grid span,
.detail-metrics span {
    display: block;
    background: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--rm-line) !important;
    padding: 12px 16px 12px 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    /* .72 E NON .45. Sono le cinque etichette che dicono che cosa sono i
       numeri sopra — «Pronostici totali», «Centri», «Miglior colpo» —
       cioe' l'unica parte che spiega il resto, e stavano a 4,01.
       TERZA REGOLA SULLO STESSO SELETTORE: ce ne sono altre due piu' su, e
       correggerne una non cambiava niente. La coppia .45 su #E8EDF4 e' lo
       stesso difetto gia' trovato su .rec-d e .bl-route-meta: in questo
       foglio quell'alfa non regge mai il minimo. Misurato sul profilo il
       10/09/2026. */
    color: rgba(var(--rm-ink-rgb), .72);
}
.metric-grid span:hover,
.detail-metrics span:hover { border-color: var(--rm-line) !important; }
.metric-grid strong,
.detail-metrics strong {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--rm-ink);
    text-transform: none;
    margin-bottom: 3px;
}

/* ---- i treni seguiti: righe da tabellone ---------------------------- */
.an-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--rm-line);
    transition: padding-left var(--t-base) var(--ease-out);
}
.an-item:hover { padding-left: 6px; }
.an-item a { font-weight: 600; text-decoration: none; color: var(--rm-ink); }
.an-item a:hover { color: var(--g-soft); }

@media (max-width: 640px) {
    .pf-id { gap: 12px; }
    .pf-avatar { width: 48px; height: 48px; font-size: 1.35rem; }
    .metric-grid, .detail-metrics { grid-template-columns: 1fr; }
}

/* ===================================================================
   LABORATORIO — LA MAPPA DEI TRENI
   SVG disegnato dal server: niente librerie, niente tessere, niente
   javascript. I binari stanno sotto e sono volutamente tenui: servono a
   dare la FORMA del paese, non a essere letti. Quello che si legge sono
   i punti.
   =================================================================== */
.bl-mp-box{
  background:var(--rm-deep);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  padding:10px;
  overflow:auto;
  text-align:center;
}
.bl-mp{ width:100%; max-width:620px; height:auto; }
.bl-mp-rete line{ stroke:rgba(255,255,255,.16); stroke-width:1; }
/* I punti hanno un contorno scuro: senza, due treni vicini si fondono in
   una macchia e si perde il conto. */
.bl-mp-treni circle{ stroke:var(--rm-deep); stroke-width:.7; }
/* `fill` E `background` INSIEME, e non e' ridondanza: queste quattro classi
   vestono DUE cose diverse. Sui cerchi dell'SVG conta `fill`; sui quadratini
   della legenda, che sono <span>, conta `background` — e `fill` su uno span
   viene ignorato. Con il solo `fill` la legenda era trasparente: i quattro
   colori non si vedevano, ne' nel laboratorio ne' sulla pagina pubblica.
   Ogni proprieta' e' ignorata dal contesto in cui non serve, quindi tenerle
   entrambe e' sicuro e lascia una sola definizione dei colori. */
.bl-mp-p-ok{ fill:var(--rm-accent); background:var(--rm-accent); }
.bl-mp-p-w1{ fill:var(--rm-amber); background:var(--rm-amber); }
.bl-mp-p-w2{ fill:var(--rm-orange); background:var(--rm-orange); }
.bl-mp-p-ko{ fill:var(--rm-red); background:var(--rm-red); }
.bl-mp-key{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.bl-mp-k{ width:11px; height:11px; border-radius:50%; display:inline-block; }
@media(max-width:560px){ .bl-mp{ max-width:100%; } }

/* Varianti della mappa. `linee` colora i BINARI invece dei treni: un
   segmento grigio non e' libero, e' semplicemente senza treni nostri
   sopra — e va detto, se no si legge come "tutto scorre". */
.bl-mp-linee line{ stroke-width:1.6; stroke-linecap:round; }
.bl-mp-l-off{ stroke:rgba(255,255,255,.10); stroke-width:1 !important; }
.bl-mp-l-ok{ stroke:var(--rm-accent); }
.bl-mp-l-w1{ stroke:var(--rm-amber); stroke-width:2.2 !important; }
.bl-mp-l-w2{ stroke:var(--rm-orange); stroke-width:2.8 !important; }
.bl-mp-l-ko{ stroke:var(--rm-red); stroke-width:3.4 !important; }
.bl-mp-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.bl-mp-tabs .text-secondary{ flex:1 1 220px; }

/* ===================================================================
   ANALYTICS — liste affiancate dentro UN pannello
   Prima ogni classifica aveva la sua scatola: dieci riquadri, sei dei
   quali identici. Le barre restano perche' la proporzione e'
   informazione; sparisce il bordo attorno a ognuna.
   =================================================================== */
.an-due{ display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; }
.an-tre{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 28px; }
.an-due > div > h3, .an-tre > div > h3{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--rm-muted);
  margin:0 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--rm-line);
}
/* I quadretti dei dispositivi stanno su due colonne invece di tre:
   dentro meta' pannello, tre sarebbero illeggibili. */
.an-mini{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
.an-mini .admin-card{ padding:12px; }
.an-mini .admin-card h3{ font-size:.85rem; margin-bottom:8px; }
@media(max-width:900px){
  .an-due, .an-tre{ grid-template-columns:1fr; }
  .an-mini{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ===================================================================
   BARRA ADMIN — famiglie invece di un elenco piatto
   Tredici voci in fila erano un elenco, non un'organizzazione: per
   trovare qualcosa bisognava ricordare il nome invece di ragionare su
   cosa si stava cercando. Le intestazioni sono piccole e mute apposta —
   servono a raggruppare, non a competere con le voci.
   =================================================================== */
.adm-side-grp{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rm-muted); opacity:.72;
  padding:14px 10px 5px; margin-top:2px;
  border-top:1px solid var(--rm-line);
}
/* La prima famiglia sta gia' sotto il titolo della barra: un secondo filo
   sarebbe una riga doppia. */
.adm-side-grp:first-of-type{ border-top:0; padding-top:4px; margin-top:0; }

@media (max-width: 991px){
  /* In orizzontale le intestazioni diventano separatori verticali: un
     titolo su una riga che scorre di lato ruberebbe spazio alle voci,
     che li' sono l'unica cosa che conta. */
  .adm-side-grp{
    border-top:0; border-left:1px solid var(--rm-line);
    padding:8px 0 8px 10px; margin:0 4px 0 6px;
    align-self:stretch; display:flex; align-items:center;
    font-size:.55rem; letter-spacing:.1em; flex:none;
  }
  .adm-side-grp:first-of-type{ display:none; }
}

/* ===================================================================
   HOME — QUATTRO NUMERI, CATEGORIE, LINEE
   Le KPI hanno icona, valore e variazione su ieri: un numero da solo non
   dice se la giornata va bene. Sul ritardo e sulle soppressioni il verso
   e' invertito — crescere e' peggio — quindi il "+" e' rosso.
   =================================================================== */
/* QUATTRO COLONNE FINCHE' CI STANNO, NON FINCHE' LO DICE UN NUMERO.
   Erano quattro fisse fino a 640 px, dove diventano 2x2. In mezzo — fra i
   641 e i ~760 — quattro caselle non ci stavano piu': misurato a 683 px, il
   contenuto usciva di 12 px e la pagina scorreva in orizzontale. `auto-fit`
   con una larghezza minima toglie il punto di rottura: le colonne
   diventano tre, poi due, quando servono. Sotto i 640 resta la regola
   esplicita 1fr 1fr, perche' li' le caselle si rimpiccioliscono apposta. */
.bl-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
  margin-top:26px;
}
.bl-kpi{
  display:flex; align-items:center; gap:13px;
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-radius:var(--r-lg); padding:15px 16px;
  transition:border-color var(--t-base) ease, transform var(--t-base) ease;
}
.bl-kpi:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-1px); }
.bl-ki{
  width:38px; height:38px; flex:0 0 auto; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:rgba(255,255,255,.05); color:var(--rm-muted);
}
.bl-ki svg{ width:19px; height:19px; }
.bl-ki.ok{ background:rgba(var(--rm-accent-rgb),.12); color:var(--rm-accent); }
.bl-ki.late{ background:rgba(var(--rm-amber-rgb),.12); color:var(--rm-amber); }
.bl-ki.bad{ background:rgba(239,68,68,.12); color:var(--rm-red-soft); }
.bl-kb{ display:flex; flex-direction:column; min-width:0; }
/* Gerarchia: il valore e' grande ma non enorme, l'etichetta resta leggibile. */
.bl-kn{ font-size:1.5rem; font-weight:800; line-height:1.08; letter-spacing:-.01em; }
.bl-kn.late{ color:var(--rm-amber); }
.bl-kn.bad{ color:var(--rm-red-soft); }
.bl-kl{
  font-size:.76rem; color:var(--rm-muted); margin-top:4px;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
/* .85 e non .7: «% su ieri» stava a 3,93 sotto i numeri della home */
.bl-kl small{ font-size:.68rem; opacity:.85; }
/* Il gruppo del delta non si spezza mai al suo interno: freccia,
   segno, numero e unita sono una cosa sola. Il testo che segue
   (<<su ieri>>, <<punti>>) puo andare a capo, ed e giusto cosi. */
.bl-kd{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.7rem; font-weight:700; white-space:nowrap; }
.bl-kd.up{ color:var(--rm-accent); }
.bl-kd.down{ color:var(--rm-red-soft); }
.bl-kd.flat{ color:var(--rm-muted); }

/* Due pannelli affiancati: categorie e linee. */
.bl-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px;align-items:start; }

.bl-cats{ display:flex; flex-direction:column; gap:11px; margin-top:4px; }
.bl-cat{ display:grid; grid-template-columns:132px 1fr 58px; align-items:center; gap:12px; }
.bl-cat-n{ font-size:.86rem; color:var(--rm-ink); }
.bl-cat-bar{ height:7px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.bl-cat-bar i{ display:block; height:100%; width:var(--w); border-radius:99px; transition:width var(--t-base) ease; }
.bl-cat-bar i.ok{ background:var(--rm-accent); }
.bl-cat-bar i.w{ background:var(--rm-amber); }
.bl-cat-bar i.ko{ background:var(--rm-red); }
.bl-cat-v{ text-align:right; font-weight:700; font-size:.88rem; }

.bl-lines{ display:flex; flex-direction:column; margin-top:4px; }
.bl-line-row{
  display:grid; grid-template-columns:10px 1fr auto auto; align-items:center; gap:11px;
  padding:10px 2px; border-top:1px solid var(--rm-line);
  text-decoration:none; color:var(--rm-ink); transition:background var(--t-fast) ease;
}
.bl-line-row:first-child{ border-top:0; }
.bl-line-row:hover{ background:rgba(255,255,255,.03); }
.bl-line-dot{ width:9px; height:9px; border-radius:50%; }
.bl-line-dot.ok{ background:var(--rm-accent); }
.bl-line-dot.w{ background:var(--rm-amber); }
.bl-line-dot.ko{ background:var(--rm-red); }
.bl-line-nm{ font-size:.87rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bl-line-ar{ color:var(--rm-muted); }
.bl-line-n{ font-size:.72rem; color:var(--rm-muted); white-space:nowrap; }
.bl-line-d{ font-weight:700; font-size:.86rem; min-width:46px; text-align:right; }
.bl-line-d.ok{ color:var(--rm-accent); }
.bl-line-d.w{ color:var(--rm-amber); }
.bl-line-d.ko{ color:var(--rm-red-soft); }

.rm-sec-foot{ font-size:.74rem; color:var(--rm-muted); margin:14px 0 0; }

/* MOBILE: le KPI vanno 2x2 come da specifica, i due pannelli si impilano.
   Non e' il desktop compresso — la griglia cambia forma. */
@media (max-width: 900px){
  .bl-two{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .bl-kpis{ grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
  .bl-kpi{ padding:12px; gap:10px; }
  .bl-ki{ width:32px; height:32px; }
  .bl-ki svg{ width:16px; height:16px; }
  .bl-kn{ font-size:1.24rem; }
  .bl-kl{ font-size:.7rem; }
  .bl-cat{ grid-template-columns:104px 1fr 50px; gap:9px; }
  .bl-cat-n{ font-size:.8rem; }
  .bl-line-n{ display:none; }   /* il conteggio treni e' la colonna sacrificabile */
}

/* ===================================================================
   UN PANNELLO CHE OCCUPA TUTTE E DUE LE COLONNE
   La griglia ha due colonne e tre pannelli: il terzo cadeva in basso a
   sinistra e lasciava la cella accanto VUOTA — 539x494 px di fondo
   scuro misurati il 17/09/2026 a 1280, in home, proprio di fianco al
   grafico piu' importante della pagina. Il grafico stava stretto in
   mezza riga mentre l'altra mezza non conteneva niente.
   =================================================================== */
.bl-two > .bl-panel-largo{ grid-column:1 / -1; }

/* ===================================================================
   IL GRAFICO DENTRO IL PANNELLO STRETTO
   A tutta pagina .bl-trend e' una griglia .82fr/1.4fr: i tre numeri a
   sinistra, il grafico a destra. In mezza colonna quella spartizione
   lasciava al grafico 246px su 539 — una linea illeggibile. Qui i
   numeri passano SOPRA, in riga, e il grafico si prende tutta la
   larghezza del pannello.
   Le regole valgono per i pannelli STRETTI: quello che si prende
   entrambe le colonne torna alla spartizione a tutta pagina, che e'
   quella per cui era stata pensata.
   =================================================================== */
.bl-two .rm-panel:not(.bl-panel-largo) .bl-trend{ grid-template-columns:1fr; gap:16px; align-items:stretch; }
.bl-two .rm-panel:not(.bl-panel-largo) .bl-trend-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
/* Numero sopra, etichetta sotto: in riga i tre non ci stavano e uno
   andava a capo da solo, spezzando la simmetria delle tre voci. */
.bl-two .rm-panel:not(.bl-panel-largo) .bl-tfact{ flex-direction:column; align-items:flex-start; gap:2px; }
.bl-two .rm-panel:not(.bl-panel-largo) .bl-tfact .bl-tn{ font-size:1.3rem; }
.bl-two .rm-panel:not(.bl-panel-largo) .bl-chartbox{ padding:16px; }
/* Nel pannello largo i tre numeri sono una colonnina di servizio: dargli
   .82fr di 1100 px vorrebbe dire 375 px per tre cifre, e altrettanti
   tolti al grafico, che e' quello che si guarda.
   DENTRO UNA min-width, non fuori: piu' in alto nel foglio c'e' gia'
   `@media(max-width:900px){ .bl-trend{grid-template-columns:1fr} }`, e
   questa regola — piu' specifica e piu' in basso — se ne sarebbe
   mangiata l'effetto lasciando due colonne su un telefono. */
@media (min-width: 901px){
  .bl-panel-largo .bl-trend{ grid-template-columns:minmax(190px,.55fr) 2fr; gap:26px; }
}
@media (max-width: 900px){
  .bl-panel-largo .bl-chartbox{ padding:16px; }
}
/* Su schermo stretto le colonne si impilano gia': i numeri tornano in
   colonna solo se non ci stanno in riga, cosa che il wrap fa da solo. */

/* ===================================================================
   STAZIONI PIU' CRITICHE — schede
   Sei schede in riga su desktop; su telefono diventano una striscia che
   scorre di lato con lo scatto, invece di sei blocchi impilati che
   allungherebbero la pagina di mezzo schermo.
   La barra sotto il numero ripete il dato in forma visiva: il colore da
   solo non basta a chi non distingue rosso e verde.
   =================================================================== */
.bl-stcards{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:4px;
}
.bl-stcard{
  display:flex; flex-direction:column; gap:2px;
  padding:15px 14px 13px; text-decoration:none; color:var(--rm-ink);
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-radius:var(--r-lg); position:relative; overflow:hidden;
  transition:border-color var(--t-base) ease, transform var(--t-base) ease,
             background var(--t-base) ease;
}
/* IL FILO IN ALTO E' LUNGO QUANTO LA PERCENTUALE, non sempre uguale.
   Prima era pieno da bordo a bordo e il colore diceva solo la fascia
   (sopra 40 rosso, sopra 20 ambra): il 17/09/2026 le sei stazioni in home
   stavano fra il 43% e il 72% — tutte rosse, tutte identiche a colpo
   d'occhio, con il numero unico indizio della differenza.
   Il ::before e' la TRACCIA (dice «su cento»), il ::after e' la misura.
   La scala parte da zero come quella dei grafici: e' una lunghezza, e una
   lunghezza che mente e' una bugia esattamente come un asse tagliato. */
.bl-stcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--rm-line);
}
.bl-stcard::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--rm-accent);
  transform:scaleX(var(--stc-q,1)); transform-origin:left;
}
.bl-stcard.w::after{ background:var(--rm-amber); }
.bl-stcard.ko::after{ background:var(--rm-red); }
.bl-stcard:hover{
  border-color:rgba(255,255,255,.16); transform:translateY(-2px);
  background:var(--rm-surface2); color:var(--rm-ink);
}
.bl-stcard:focus-visible{ outline:3px solid var(--rm-accent); outline-offset:2px; }
.bl-stc-name{
  font-size:.78rem; color:var(--rm-muted); line-height:1.25;
  min-height:2.5em; overflow:hidden;
}
.bl-stc-big{ font-size:1.72rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
/* .82 e non .65: il simbolo di percentuale e' attenuato di proposito —
   il dato e' il numero, non l'unita' — ma a .65 il rosso delle schede
   in sofferenza (#FF8A84) scendeva a 3,96:1, sotto il 4,5 richiesto.
   Misurato il 18/09/2026 componendo gli sfondi. A .82 sale a 5,60 e
   l'attenuazione si vede ancora. */
.bl-stc-big small{ font-size:.9rem; font-weight:700; opacity:.82; margin-left:1px; }
.bl-stcard.ok .bl-stc-big{ color:var(--rm-accent); }
.bl-stcard.w  .bl-stc-big{ color:var(--rm-amber); }
.bl-stcard.ko .bl-stc-big{ color:var(--rm-red-soft); }
.bl-stc-lab{ font-size:.68rem; color:var(--rm-muted); }
.bl-stc-foot{
  display:flex; justify-content:space-between; gap:6px; margin-top:9px;
  padding-top:9px; border-top:1px solid var(--rm-line);
  font-size:.68rem; color:var(--rm-muted); white-space:nowrap;
}

@media (max-width: 1100px){
  .bl-stcards{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px){
  /* Striscia che scorre: sei schede impilate sarebbero mezzo schermo. */
  .bl-stcards{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:10px; padding-bottom:6px;
    /* ESONDAZIONE AGGANCIATA AL MARGINE VERO.
       Qui c'era calc(var(--rm-gutter, 16px) * -1), e --rm-gutter non e' mai
       stata definita: compariva una volta sola in tutto il foglio, dentro la
       sua stessa var(). Valeva quindi sempre il ripiego di 16px, mentre il
       margine laterale reale e' di 12px — lo mette main.container. La striscia
       sfondava di 4px oltre il bordo dello schermo: MISURATO a 375px di
       finestra, scrollWidth 379. Non si vedeva uno scroll orizzontale ma un
       TAGLIO, perche' `overflow-x: clip` su html impedisce di scorrere.
       --bs-gutter-x e' la variabile da cui .container ricava il proprio
       padding (1.5rem / 2 = 12px) ed e' ereditata fin qui: legando le due
       cose alla stessa sorgente non possono piu' divergere. */
    margin-right:calc(var(--bs-gutter-x, 1.5rem) / -2);
    scrollbar-width:thin;
  }
  .bl-stcard{ flex:0 0 46%; scroll-snap-align:start; }
  .bl-stc-big{ font-size:1.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .bl-stcard{ transition:none; }
  .bl-stcard:hover{ transform:none; }
}

/* Le due colonne NON si stirano alla stessa altezza: le categorie sono
   cinque righe, il grafico e' molto piu' alto, e stirare la prima lasciava
   200 px di vuoto scuro sotto la sua ultima riga — misurati, non stimati.
   Meglio un fondo irregolare che una scatola mezza vuota. */
.bl-two{ align-items:start; }

/* «OGGI» NEL GRAFICO DEI SETTE GIORNI — segnato, non colorato.
   La colonna di oggi aveva la barra VERDE mentre le altre sei erano rosse.
   Ma quel grafico misura il RITARDO MEDIO, e su tutto il sito il verde
   vuol dire puntuale: il 21/08/2026 oggi era a +4' — pari al giorno
   peggiore della settimana — e si presentava col colore del giorno
   migliore. Ora la barra e' rossa come le altre e «oggi» si riconosce
   dall'anello chiaro e dall'etichetta, che dice OGGI invece di VEN. */
.rm-week-col.is-today .rm-week-bar{
  box-shadow:0 0 0 2px rgba(255,255,255,.30);
}
.rm-week-col.is-today .rm-week-day{ color:var(--rm-ink); font-weight:700; }
.rm-week-col.is-today .rm-week-val{ color:var(--rm-ink); }

/* SCHEDE RECORD IN COLONNA — numero sopra, testo sotto.
   Erano "etichetta e testo a sinistra, numerone a destra": con cinque
   record in riga al testo restavano ~100px e «TORINO PORTA NUOVA - ROMA
   TERMINI · 20/08/2026» andava a capo sei volte. Impilando, il testo si
   prende tutta la larghezza della scheda e il numero resta grande.
   E' anche la stessa forma delle schede stazioni in home. */
.rec-card{
  grid-template-columns:1fr;
  grid-template-areas:"k" "v" "t" "d";
  align-items:start;
  gap:4px;
  padding-bottom:14px;
}
.rec-card .rec-v{
  align-self:start;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  line-height:1.05;
  margin:2px 0 2px;
}
.rec-card .rec-d{ margin-top:2px; }

/* NOMI DI TRATTA SEMPRE IN MAIUSCOLO.
   Su 316 tratte, 315 arrivano da ViaggiaTreno in maiuscolo e una — «Milano
   Centrale → Messina Centrale» — in Maiuscoletto: in mezzo alle altre
   sembrava un errore di stampa. Il maiuscolo e' la lingua del sito per i
   nomi di stazione (ROMA TERMINI, MILANO CENTRALE), quindi si normalizza
   qui: vale anche per i record che arrivassero storti in futuro, senza
   toccare il dato — lo slug e l'indirizzo restano quelli. */
.bl-route-o, .bl-route-d, .bl-rank-lbl{ text-transform:uppercase; }

/* SNODI: i numeri sulla stessa linea.
   Il nome occupa 16px su una riga e 32 su due, cosi' «MILANO BOVISA
   POLITECNICO» spingeva la sua percentuale 16px piu' in basso delle
   vicine e la fila di numeri risultava a gradini. Si riserva lo spazio
   di due righe: i nomi corti lasciano un po' d'aria, i numeri si
   incolonnano. (min-height non taglia niente: se un nome ne chiedesse
   tre, la scheda cresce.) */
.bl-hub-name{ min-height:32px; }

/* ===================================================================
   PROSSIMA FERMATA / ARRIVO — i due riquadri della scheda treno.
   Due domande, due risposte grandi. Il nome della stazione fa da titolo
   perche' e' la cosa che si cerca con lo sguardo; sotto, l'orario e lo
   scarto dall'orario, nella stessa forma dei numeri del resto del sito.
   =================================================================== */
.bl-next-wrap{ margin-bottom:18px; }
.bl-next-name{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size:1.45rem; font-weight:800; line-height:1.15;
  letter-spacing:-.01em; color:var(--rm-ink); margin:2px 0 12px;
}
.bl-next-row{ display:flex; gap:26px; flex-wrap:wrap; }
.bl-next-cell{ display:flex; flex-direction:column; gap:2px; }
.bl-next-lbl{ font-size:.7rem; color:var(--rm-muted); text-transform:uppercase; letter-spacing:.1em; }
.bl-next-big{ font-size:1.9rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; }
.bl-next-big.sm{ font-size:1.35rem; color:var(--rm-muted); font-weight:700; }
.bl-next-big.ok{ color:var(--rm-accent); }
.bl-next-big.w{ color:var(--rm-amber); }
.bl-next-big.ko{ color:var(--rm-red-soft); }

@media (max-width: 640px){
  .bl-next-name{ font-size:1.2rem; }
  .bl-next-big{ font-size:1.6rem; }
  .bl-next-row{ gap:18px; }
}

/* ULTIMI SETTE VIAGGI — una casella per corsa.
   Sette caselle in riga: giorno sopra, ritardo sotto, colore per gravita'.
   Il colore non e' l'unica informazione — il numero c'e' sempre — perche'
   rosso e verde da soli non bastano a chi non li distingue. */
.bl-runs-h{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:18px 0 8px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--rm-rail);
}
.bl-runs-h span:last-child{ color:var(--rm-muted); letter-spacing:.06em; }
.bl-runs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; }
.bl-run{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; border-radius:var(--r-md);
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-top-width:3px;
}
.bl-run.ok{ border-top-color:var(--rm-accent); }
.bl-run.w{ border-top-color:var(--rm-amber); }
.bl-run.ko{ border-top-color:var(--rm-red); }
.bl-run.na{ border-top-color:var(--rm-line); }
.bl-run-d{ font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--rm-muted); }
.bl-run-v{ font-size:.98rem; font-weight:800; }
.bl-run.ok .bl-run-v{ color:var(--rm-accent); }
.bl-run.w  .bl-run-v{ color:var(--rm-amber); }
.bl-run.ko .bl-run-v{ color:var(--rm-red-soft); }
.bl-run.na .bl-run-v{ color:var(--rm-muted); }

/* Una colonna sola: quando la prossima fermata E' il capolinea, il secondo
   riquadro direbbe le stesse identiche parole del primo. */
.bl-one{ display:grid; grid-template-columns:1fr; }

/* MAPPA DEL PERCORSO — scheda treno.
   L'SVG ha un riquadro fisso e il percorso ci sta dentro in proporzione,
   quindi qui basta lasciarlo respirare. Niente altezza fissa in pixel:
   width:100% con l'aspetto del viewBox fa il resto. */
.bl-map-wrap{ margin-bottom:18px; }
.bl-map{ display:block; width:100%; height:auto; margin:2px auto 4px; }
.bl-map-ends{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.68rem; color:var(--rm-muted);
  text-transform:uppercase; letter-spacing:.08em;
}
.bl-map-ends span{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bl-map-ends span:last-child{ text-align:right; }

/* FERMATE GIA' PASSATE, piegate.
   Si usa <details>, non JavaScript: funziona anche senza, si apre da
   tastiera e i lettori di schermo lo annunciano da soli. Lo stato aperto
   sopravvive all'aggiornamento automatico del pannello (vedi app.js). */
.bl-past{ margin:0; }
.bl-past > summary{
  display:flex; align-items:center; gap:9px;
  list-style:none; cursor:pointer;
  padding:9px 2px; margin-bottom:2px;
  font-size:.76rem; color:var(--rm-muted);
  border-bottom:1px dashed var(--rm-line);
  transition:color var(--t-fast) ease;
}
.bl-past > summary::-webkit-details-marker{ display:none; }
.bl-past > summary::before{
  content:"+"; display:inline-grid; place-items:center;
  width:19px; height:19px; flex:0 0 auto;
  border:1px solid var(--rm-line); border-radius:var(--r-sm);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.82rem; line-height:1;
}
.bl-past[open] > summary::before{ content:"\2212"; }
.bl-past > summary:hover{ color:var(--rm-ink); }
.bl-past > summary:focus-visible{ outline:3px solid var(--rm-accent); outline-offset:2px; }

/* RICERCA: la legenda dei numeri, e i treni senza storico.
   La legenda stava in fondo, dopo venti numeri rossi. Qui sta prima,
   sobria ma leggibile: e' una precisazione, non un avviso. */
.rm-sres-legenda{
  font-size:.78rem; color:var(--rm-muted);
  margin:0 0 12px; padding-left:11px;
  border-left:2px solid var(--rm-line); line-height:1.5;
}
/* Il trattino di "non lo sappiamo" non deve somigliare a un numero buono:
   niente verde, niente rosso — grigio, come tutto cio' che manca. */
.rm-sres-tr-nd{ color:var(--rm-muted); opacity:.7; }
/* Le tratte incomplete: la nota non deve gridare piu' del nome. */
.rm-sres-tr-parz{
  font-size:.66rem; color:var(--rm-muted);
  border:1px solid var(--rm-line); border-radius:var(--r-pill);
  padding:1px 7px; margin-left:7px; white-space:nowrap; vertical-align:1px;
}

/* UNA SOLA STAZIONE TROVATA = e' quella che cercavi.
   Prende tutta la riga e dice cosa ci trovi dentro. Con piu' risultati
   resta la griglia di prima: li' nessuno e' "la" risposta. */
.rm-sres-stations.is-una{ grid-template-columns:1fr; }
.rm-sres-stations.is-una .rm-sres-station{ padding:18px 20px; gap:16px; }
.rm-sres-stations.is-una .rm-sres-st-name{ font-size:1.25rem; }
.rm-sres-st-cta{
  display:block; margin-top:3px; font-size:.78rem;
  color:var(--rm-accent); font-weight:600;
}

/* ===================================================================
   I BINARI, APPLICATI
   Misure prese il 22/08/2026 su dieci pagine a 1280px di larghezza.
   =================================================================== */

/* LA TESTATA CON IMMAGINE non deve spostare la colonna.
   Il suo padding orizzontale di 28px portava il contenuto da x=85 a
   x=110 e stringeva la colonna da 1096 a 1046: passando da /treni a
   /statistiche il testo scattava di 25px verso destra. Ora il pannello
   si allarga di una gutter per lato — l'immagine respira — e il testo
   resta esattamente dove sta su tutte le altre pagine. */

/* La gerarchia tipografica della testata e' UNA. Sulle pagine con
   immagine il sottotitolo era 17,6px contro i 16 delle altre, e le
   distanze 14/16 contro 12/10: differenze troppo piccole per sembrare
   una scelta e abbastanza grandi da sembrare un errore. */
.rm-stats-hero .rm-eyebrow{ margin-bottom: 12px; }
.rm-stats-hero h1 + .rm-sub,
.rm-stats-hero h1 + p{ margin-top: 10px; }
.rm-stats-hero .rm-sub,
.rm-stats-hero h1 + p{ font-size: 1rem; }

/* IL RITMO FRA SEZIONI, espresso in margini perche' collassino.
   Prima: .rm-sec margine 26, .rm-block padding 50, .bl-sec padding 54,
   la home padding 42. Quattro valori, nessuno nella scala, e due
   meccanismi diversi che si sommavano fra loro. */
.rm-sec,
.rm-block,
.bl-sec{
  margin-block: var(--ritmo);
  padding-block: 0;
}
.rm-home .rm-sec,
.rm-home .rm-block{
  margin-block: var(--ritmo);
  padding-block: 0;
}
/* La testata e' piu' vicina al suo primo blocco che due sezioni fra loro:
   titolo e contenuto sono la stessa cosa, due sezioni no. */
.ph{ margin-bottom: var(--testata-gap); }

/* UNA SEZIONE E' UNA SEZIONE, comunque si chiami.
   Su /stazioni l'ultima <section> non aveva classe e nessun margine: si
   incollava alla precedente a 8px, mentre le altre stavano a 40-52. La
   regola guarda il RUOLO nel documento (figlia diretta del contenuto),
   non il nome della classe — cosi' vale anche per le sezioni che
   scriveremo domani, senza doversi ricordare di aggiungere `rm-sec`.
   I margini collassano, quindi non si somma a quello gia' dichiarato. */
main > section,
main > .container > section{
  margin-block: var(--ritmo);
}

@media (max-width: 720px){
  :root{ --ritmo: var(--sp-6); --testata-gap: var(--sp-5); }
}

/* Binario abituale: la riga di dettaglio sta su UNA riga sola.
   Senza questo, su telefono "91% (32 su 35), 3 binari diversi" andava a capo
   tre volte e la riga della tabella passava da 71 a 119 px: un elenco con
   altezze diverse smette di essere confrontabile, che e' esattamente il
   motivo per cui questi elenchi sono tabelloni e non schede. */
.bl-bin-det {
  display: block;
  white-space: nowrap;
  font-size: .78em;
  color: var(--muted);
  line-height: 1.35;
}

/* ===================================================================
   BERSAGLI TATTILI DA 24px  (2026-08-29)

   MISURATO nel browser a 375px, non dedotto: le briciole di navigazione
   erano alte 15px, i link della classifica 22, i codici treno nelle
   tabelle 21. Il minimo WCAG 2.2 (criterio 2.5.8) e' 24x24 px CSS, ed era
   gia' stato applicato altrove (.rm-sec-link, .rm-foot-legal) ma mai qui.
   Su un telefono 15px sono meno di 4 millimetri: si sbaglia bersaglio.

   Tre tecniche diverse perche' tre situazioni diverse, e la piu' comoda
   avrebbe rotto qualcosa:
   - le briciole sono inline: inline-flex le alza senza spostare il testo
     ne' interferire con il separatore, che sta sul <li> come ::before;
   - i link della classifica troncano con i puntini di sospensione
     (display:block + text-overflow), e passarli a flex farebbe saltare il
     troncamento: qui basta min-height, che su un blocco si limita a
     crescere;
   - i codici treno sono ristretti alle CELLE DI TABELLA. La stessa classe
     compare anche dentro il testo corrente, dove il criterio WCAG prevede
     un'eccezione per i bersagli in linea con la prosa e dove allargare la
     riga sarebbe un peggioramento.
   =================================================================== */
.rm-bc a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
.bl-rank-lbl a {
    min-height: 24px;
}
td .train-code {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
/* Gli ultimi due, trovati nello stesso giro: i nomi di fermata sulla scheda
   treno (18px, inline dentro la linea del percorso) e i codici sulle carte di
   /record (23px, gia' a blocco: basta la min-height). */
.rm-tl-name a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
.rec-card .rec-t {
    min-height: 24px;
}
/* I link nudi dentro le celle di tabella (codici treno di /storico-ritardi-treni
   e /classifica) erano alti 20px. Qui NON si usa inline-flex come sopra: in
   quelle celle finiscono anche nomi lunghi, e un elemento inline-flex non manda
   il proprio testo a capo — si otterrebbe una cella che sfora invece di una che
   va a capo. Il padding verticale su un elemento in linea allarga il riquadro
   cliccabile lasciando intatti sia il ritorno a capo sia l'altezza della riga:
   20 + 2 + 2 = 24. */
td a { padding-block: 2px; }
/* Il richiamo in fondo ai pannelli («Tutti i ritardi di oggi →») era alto
   16px: il bersaglio piu' piccolo rimasto, ed e' un invito all'azione, unico
   figlio del suo contenitore — non un link dentro una frase, quindi senza
   l'eccezione WCAG per i bersagli in linea con la prosa. */
.rm-panel-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* LA SPIA DELLA MANUTENZIONE.
   Si vede solo all'amministratore, su ogni pagina, quando il cancello e'
   chiuso: l'admin lo scavalca e altrimenti non avrebbe nessun modo di
   accorgersi che il sito risponde 503 a tutti gli altri. Non e' chiudibile,
   e non deve esserlo. */
.bl-gate-warn {
    border-left: 4px solid currentColor;
    font-weight: 500;
}
.bl-gate-warn a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===================================================================
   LA MAPPA DEI TRENI, VERSIONE PUBBLICA  (2026-08-29)

   Riusa il disegno del laboratorio (.bl-mp, .bl-mp-rete, .bl-mp-p-*)
   perche' e' lo stesso SVG: duplicare i colori significherebbe averne due
   definizioni che prima o poi divergono. Qui si aggiunge solo la cornice
   della pagina pubblica, che ha bisogno di piu' respiro del pannello.
   =================================================================== */
.bl-map-wrap {
    margin: 18px 0 14px;
    display: flex;
    justify-content: center;
}
.bl-map-wrap .bl-mp {
    /* Era 560px, ereditato dal laboratorio, dentro una colonna da 1096: la
       meta' dello spazio buttata. L'Italia e' alta e stretta, quindi qui il
       vincolo vero e' l'ALTEZZA, non la larghezza: si lascia crescere fino a
       riempire lo schermo e non oltre, perche' una mappa che non ci sta in
       una schermata si perde di vista mentre la si guarda. */
    max-width: 700px;
    max-height: 84vh;
    width: 100%;
    height: auto;
}
.bl-map-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}
.bl-map-sub {
    margin: 0 0 4px;
    font-size: .93rem;
}
/* La legenda va a capo per intero sui telefoni: spezzata a meta' non si
   legge, e i quattro colori vanno visti insieme per capirli. */
.bl-map-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: .88rem;
    margin: 0 0 6px;
}
.bl-map-eta {
    font-size: .82rem;
    margin: 0;
}
@media (max-width: 560px) {
    .bl-map-wrap .bl-mp { max-width: 100%; }
}

/* --- Gli avvisi della Sala Operativa, sulla pagina della mappa ----------- */
.bl-avviso {
    border: 1px solid var(--rm-line);
    border-left: 3px solid var(--rm-amber);
    border-radius: var(--r-md);
    background: var(--rm-surface);
    padding: 14px 16px;
    margin: 0 0 12px;
}
.bl-avviso-t {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 1.02rem;
    line-height: 1.32;
    margin: 0 0 6px;
    text-wrap: balance;
}
.bl-avviso-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    font-size: .78rem;
    color: var(--rm-muted);
    margin: 0 0 8px;
}
.bl-avviso-reg {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--rm-line);
    border-radius: 100px;
    padding: 1px 9px;
}
.bl-avviso-txt { margin: 0 0 8px; font-size: .93rem; line-height: 1.55; }
.bl-avviso-treni { margin: 0; font-size: .85rem; color: var(--rm-muted); }
/* I numeri sono bersagli tattili come gli altri: 24px, non 17. */
.bl-avviso-treni a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    padding: 0 4px;
}
.bl-avviso-h {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: .96rem;
    margin: 20px 0 8px;
}
/* I documenti erano un <ul> di soli titoli: dal 17/09/2026 ogni voce e' una
   sezione pieghevole col testo dentro. Le regole sui <li> qui sotto sarebbero
   diventate mute — riscritte, non appese in fondo: una regola aggiunta in coda
   allo stesso selettore ne cancella una precedente senza dirlo. */
.bl-doc-lista { list-style: none; margin: 0; padding: 0; }
.bl-doc {
    border-top: 1px solid var(--rm-line);
    font-size: .9rem;
    line-height: 1.45;
}
.bl-doc:first-child { border-top: 0; }
.bl-doc > summary {
    padding: 9px 0 9px 4px;
    cursor: pointer;
    list-style-position: outside;
}
.bl-doc > summary::marker { color: var(--rm-muted); }
.bl-doc[open] > summary { font-weight: 600; }
.bl-doc-corpo {
    padding: 2px 0 14px 18px;
    border-left: 2px solid var(--rm-line);
    margin: 0 0 8px 3px;
}
.bl-doc-corpo p { margin: 0 0 9px; font-size: .9rem; line-height: 1.6; }
.bl-doc-corpo p:last-child { margin-bottom: 0; }
.bl-doc-t { display: inline; }
.bl-doc-q {
    font-size: .76rem;
    color: var(--rm-muted);
    margin-right: 10px;
}

/* ---- MAPPA: treni cliccabili, ancore geografiche, peggiori ---------------- */

/* L'area di CLICK e' un cerchio SUO, invisibile, disegnato sotto quello vero
   (.bl-mp-p-h, vedi admin_lab_map_svg). Il primo tentativo allargava invece il
   contorno del cerchio visibile: funzionava, ma sostituiva la regola piu'
   sopra che da' ai treni un contorno scuro: e quel contorno e' l'unica cosa
   che stacca due pallini sovrapposti. Misurato: bersaglio da 4 a 13 px.
   Il passaggio del puntatore si segnala col bagliore e non ingrossando il
   contorno, che rimpicciolirebbe il bersaglio proprio mentre ci sei sopra
   facendone uscire il puntatore, in un ciclo di lampeggio. */
.bl-mp-treni a { cursor: pointer; }
.bl-mp-p-h{ fill: rgba(0,0,0,0); pointer-events: all; }
.bl-mp-treni a:hover .bl-mp-p-h + circle{
  filter: drop-shadow(0 0 4px rgba(232,184,75,.95));
}

/* Le ancore: sopra a tutto perche' i puntini non le coprano, ma trasparenti al
   puntatore, altrimenti si mangerebbero i click dei treni che stanno sotto. */
.bl-mp-citta{ pointer-events: none; }
.bl-mp-citta circle{ fill: rgba(255,255,255,.42); }
.bl-mp-citta text{
  font-size: 13px;
  font-weight: 600;
  fill: rgba(255,255,255,.66);
  paint-order: stroke;
  stroke: rgba(10,13,18,.85);
  stroke-width: 3.4;
  stroke-linejoin: round;
}

/* Chi sta peggio adesso */
.bl-peggio-h{ margin-top: 1.6rem; }
.bl-peggio{
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: .45rem .9rem;
}
.bl-peggio li{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .42rem .1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.bl-peggio li > a{
  font-weight: 700;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.bl-peggio-st{
  /* IL RIPIEGO NON SCATTAVA MAI. `var(--bs-secondary-color, #9AA4B2)` usa
     #9AA4B2 solo se la variabile Bootstrap NON esiste — ma esiste, e vale
     rgba(33,37,41,.75): un quasi-nero pensato per fondo chiaro. Sulla
     mappa il nome della stazione peggiore usciva cosi' a rapporto 1,16,
     illeggibile. Un token del sito non ha questo doppio fondo. */
  color: var(--rm-muted);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.bl-peggio-r{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #F87171;
  flex: 0 0 auto;
}

/* Su un telefono la mappa e' larga un terzo: i nomi vanno ingranditi nelle
   unita' dell'SVG per restare leggibili, e le ancore minori tolte di mezzo. */
@media (max-width: 700px){
  .bl-mp-citta text{ font-size: 25px; stroke-width: 6; }
  .bl-mp-citta circle{ r: 3.4; }
  .bl-mp-city-min{ display: none; }
}

/* Nascosta di suo: sul desktop la quota sta gia' nel fumetto del `title`.
   La regola sta QUI, PRIMA del @media che la riaccende: scritta dopo, avrebbe
   vinto lei a parita' di specificita' e la quota sarebbe rimasta invisibile
   anche sul telefono. E' successo davvero, al primo tentativo. */
.pron-quota{ display: none; }

/* ---- TABELLA PRONOSTICI: schede impilate sul telefono ---------------------
   Misurato il 30/08/2026 a 375px: la tabella e' larga 531px in un contenitore
   da 316, quindi scorrevole — ma senza scorrere si vedevano SOLO le prime tre
   colonne (Treno, Giorno, Previsto). Punti e Posta, cioe' com'e' finita, erano
   fuori schermo: si doveva trascinare per sapere se si aveva vinto.
   Sotto i 560px ogni riga diventa una scheda con le etichette a sinistra e i
   valori a destra: sei campi su sei visibili, nessuno scorrimento. */
@media (max-width: 560px){
  .tbl-pron thead, .tbl-stack thead{ display: none; }
  .tbl-pron, .tbl-pron tbody, .tbl-pron tr, .tbl-pron td,
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td{ display: block; width: 100%; }
  .tbl-pron tr, .tbl-stack tr{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r-md, 10px);
    padding: 9px 13px;
    margin-bottom: 9px;
    background: rgba(255,255,255,.02);
  }
  .tbl-pron tbody tr:hover td:first-child,
  .tbl-stack tbody tr:hover td:first-child{ box-shadow: none !important; }
  /* IL PADDING VUOLE !important, e non e' pigrizia. Su `.table tbody td`
     insistono SEI regole in cascata, ognuna un filo piu' specifica della
     precedente; a vincere e' `main .data-panel .table tbody td` con due
     classi. Rilanciare con una settima significherebbe entrare in una gara
     che il prossimo che passa perdera' di nuovo. Qui la vista impilata deve
     annullare il padding da tabella, punto: `!important` lo dice una volta
     sola. Le regole vincenti me le ha dette il browser, non le ho dedotte —
     in un foglio da 275 KB dedurle e' come indovinare.
     `flex-wrap: wrap` serve alla quota, che occupa una riga intera: senza,
     restava sulla stessa riga e sfondava il contenitore di 65px. */
  main .tbl-pron tbody td, main .tbl-stack tbody td{
    border: 0 !important;
    padding: 2px 0 !important;
    line-height: 1.42;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 14px;
    text-align: right !important;
  }
  main .tbl-pron tbody td::before, main .tbl-stack tbody td::before{
    content: attr(data-l);
    color: rgba(255,255,255,.5);
    font-size: .84rem;
    flex: 0 0 auto;
  }
  /* Il codice del treno fa da titolo della scheda: niente etichetta, piu' peso. */
  main .tbl-pron tbody td:first-child, main .tbl-stack tbody td:first-child{
    justify-content: flex-start;
    text-align: left !important;
    font-size: 1.04rem;
    font-weight: 700;
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  main .tbl-pron tbody td:first-child::before, main .tbl-stack tbody td:first-child::before{ content: none; }
  main .tbl-pron tbody td:first-child a, main .tbl-stack tbody td:first-child a{ min-height: 24px; display: inline-flex; align-items: center; }
  /* La QUOTA vive solo qui. Sul desktop sta nel fumetto del `title`, che al
     tocco non compare mai: su un telefono non c'era modo di sapere a che
     quota si aveva puntato. Va a capo su tutta la riga per non stringere
     la cifra della vincita. */
  .pron-quota{ display: block; flex: 1 0 100%; text-align: right;
               font-size: .78rem; color: rgba(255,255,255,.45); }
}

/* ---- TABELLE SUL TELEFONO: il padding si mangiava un terzo dello schermo ---
   Misurato il 30/08/2026 su /ritardi-treni-oggi a 375px: contenitore 316px,
   tabella 554px, di cui 112 di solo padding (28px per cella su quattro).
   Il testo da solo ne occupa 335, quindi stringere non basta a far entrare
   tutto — ma 28px per cella su uno schermo da 375 e' sproporzionato comunque,
   e ogni pixel recuperato e' una colonna in piu' che si vede senza trascinare.
   Selettore con `main` perche' la regola da battere e' `main .table tbody td`. */
@media (max-width: 560px){
  main .table tbody td,
  main .table thead th,
  main .data-panel .table tbody td,
  main .rm-panel .table tbody td{
    padding-left: 6px;
    padding-right: 6px;
    font-size: .92rem;
  }
  main .table thead th{ font-size: .60rem; }
  /* LE PASTIGLIE DI STATO ANDAVANO A CAPO MAI. Bootstrap mette
     `white-space: nowrap` su `.badge`, e «Arrivato in ritardo» diventa una
     riga indivisibile da 173px: il 59% di uno schermo da 375, piu' del nome
     del treno e della tratta messi insieme. Era questa, non il testo dei
     dati, a spingere fuori schermo la colonna del ritardo su meta' del sito.
     Lasciandola andare a capo la colonna si stringe alla parola piu' lunga
     e le altre rientrano: nessun dato tolto, solo righe un po' piu' alte. */
  main .table tbody td .badge{ white-space: normal; }

  /* PROVATO E SCARTATO: `table-layout: fixed`. Faceva entrare tutte le
     colonne, ma dividendo lo spazio in parti uguali «BARI CENTRALE - MILANO
     CENTRALE» finiva in una colonna da 79px e la riga passava da 89 a 222px.
     Misurato su sei pagine: righe fra 178 e 244px. Il rimedio era peggiore.
     Al suo posto c'e' la vista a schede, generata da app.js. */
  /* La vista a schede dei pronostici non c'entra: li' il padding e' zero e le
     etichette stanno nei ::before. Si riafferma dopo, per non farsi
     sovrascrivere da queste. */
  main .tbl-pron tbody td, main .tbl-stack tbody td{ padding-left: 0 !important; padding-right: 0 !important; }
  /* L'involucro del valore, messo da app.js: e' un unico elemento flessibile,
     e la struttura interna della cella (i <br>, i blocchi) torna a valere. */
  main .tbl-stack tbody td > .tbl-v{ flex: 1 1 auto; min-width: 0; text-align: right; }
}

/* ==========================================================================
   GRAFICI SVG DISEGNATI DAL SERVER  (app/grafici.php)
   Selettori nuovi: verificato prima di appendere che `bl-graf` non compaia
   altrove nel foglio. Appendere una regola su un selettore gia' usato ne
   cancella in silenzio una precedente, ed e' successo il 30/08/2026.
   ========================================================================== */
/* QUI STA IL COLORE, NON LA GEOMETRIA. Le misure (corpo del testo, spessore
   delle linee, raggio dei punti) le scrive PHP come attributi, perche'
   dipendono da quanto e' largo il riquadro in pagina — un numero che il
   foglio di stile non conosce e che una media query sulla finestra non
   indovina. Il perche' esteso e' in app/grafici.php.

   IL COLORE DELLA SERIE E' UNA VARIABILE perche' il grafico non misura
   sempre la stessa cosa: sui ritardi tanto e' male (rosso), sulla
   puntualita' tanto e' bene (verde). Le regole sotto NON sono appese in
   fondo al foglio: sostituiscono quelle di prima sugli stessi selettori. */
.bl-graf { display: block; width: 100%; height: auto; overflow: visible; --graf-serie: var(--rm-red); }
.bl-graf--verde { --graf-serie: var(--rm-green); }
.bl-graf--ambra { --graf-serie: var(--rm-amber); }
.bl-graf--accento { --graf-serie: var(--rm-accent, var(--rm-green)); }
.bl-graf-griglia { stroke: var(--rm-line); opacity: .5; }
.bl-graf-scala,
.bl-graf-data { fill: var(--rm-muted); font-variant-numeric: tabular-nums; }
/* IL VOLUME era `fill: var(--rm-ink-2)`, un gettone tolto da questo foglio:
   senza valore il riempimento SVG torna al suo iniziale, il NERO, e le barre
   sparivano sul fondo scuro mentre la didascalia promette «barre chiare»
   (02/10/2026). Il grigio del tema, leggero: stanno dietro alla serie. */
.bl-graf-vol { fill: var(--rm-muted); opacity: .22; }
/* Il giorno non ancora finito: stesso dato, meta' voce. */
.bl-graf-vol--parz { opacity: .11; }
/* La soglia e' un RIFERIMENTO, non un giudizio: se fosse verde direbbe
   "bene" anche quando segna un limite da non superare. Resta neutra, e
   cosi' non litiga col colore della serie. */
.bl-graf-soglia { stroke: var(--rm-muted); opacity: .7; }
.bl-graf-soglia-t { fill: var(--rm-muted); opacity: .9; }
.bl-graf-area { fill: var(--graf-serie); opacity: .13; }
.bl-graf-linea { fill: none; stroke: var(--graf-serie); stroke-linejoin: round; stroke-linecap: round; }

/* I punti restano invisibili finche' non li si sfiora: su sessanta giorni
   sessanta pallini fissi sono rumore, non informazione. */
.bl-graf-pt { fill: var(--graf-serie); opacity: 0; transition: opacity var(--t-fast, .15s) ease; }
.bl-graf-p:hover .bl-graf-pt,
.bl-graf-p:focus-visible .bl-graf-pt { opacity: 1; }
.bl-graf-p { cursor: crosshair; }

@media (max-width: 640px) {
  /* SOLO PER I GRAFICI LARGHI QUANTO LA PAGINA (`largo` nel chiamante).
     Li' il contenitore e' la finestra meno i margini, quindi misurare la
     finestra e' lecito: un grafico disegnato su una griglia larga 1000 e
     reso a 307 px scala di 0,307, e 12 unita' arrivano all'occhio come 3,7.
     Prima questa regola era globale, e infatti ingrossava il testo anche
     dove il grafico stava in una colonna stretta di una griglia a due —
     cioe' nel caso in cui il contenitore NON e' la finestra. */
  .bl-graf--largo .bl-graf-scala,
  .bl-graf--largo .bl-graf-data { font-size: 34px; }
  .bl-graf--largo .bl-graf-soglia-t { font-size: 30px; }
  .bl-graf--largo .bl-graf-linea { stroke-width: 5; }
  .bl-graf--largo .bl-graf-pt { r: 8; }
}

/* ==========================================================================
   RECORD DEI BINARI — la parte scritta
   Selettori nuovi: verificato che rec-intro, rec-ctx, rec-why e
   rec-note non comparissero altrove. La pagina aveva 87 parole in tutto:
   cinque numeri senza nessuno che dicesse cosa significassero.
   ========================================================================== */
.rec-intro { max-width: 74ch; margin: 0 0 26px; }
.rec-intro p { color: var(--rm-ink-2); line-height: 1.65; margin: 0 0 12px; }
.rec-intro .rec-ctx { color: var(--rm-ink); }
.rec-intro strong { color: var(--rm-ink); }



/* La spiegazione sotto ogni primato: piu' piccola del dato, ma non nascosta.
   Il bordo in alto la separa dai numeri senza aggiungere un altro riquadro. */
.rec-why {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--rm-line);
  font-size: .93rem; line-height: 1.55; color: var(--rm-ink-2);
}
.rec-why strong { color: var(--rm-ink); font-weight: 600; }

.rec-note { max-width: 74ch; }
.rec-note p { color: var(--rm-ink-2); line-height: 1.65; margin: 0 0 12px; }
.rec-note strong { color: var(--rm-ink); }
.rec-note a { color: var(--rm-accent); }

@media (max-width: 640px) {
  .rec-why { font-size: .9rem; }
  }
/* QUI c'erano due righe sbagliate, tolte il 14/09/2026:

       .pag-intro p, .pag-note p { font-size: .95rem; }
       }

   L'indentazione racconta com'e' andata: quella regola stava DENTRO il
   @media qui sopra, e qualcuno ha chiuso il blocco una riga troppo presto
   (la graffa rientrata). Da li' in poi la regola valeva a TUTTE le
   larghezze e il testo di spiegazione degli elenchi usciva a 15,2px
   invece di 16 anche sul desktop. MISURATO su /tratte a 826px: sei
   paragrafi.

   Non l'ho rimessa dentro il @media: la versione buona esiste gia' piu'
   sotto, e' piu' completa (porta anche `line-height: 1.62`) e copre pure
   .rec-intro e .rec-note. Questa era un doppione parziale.

   La graffa avanzata i browser la buttano via senza dire niente — per
   questo era li' da chissa' quando, e per questo ora esiste
   `python tools/graffe_css.py assets/css/style.css`. */

/* ==========================================================================
   PAGINE-ELENCO E SCHEDE — la parte scritta, vestita come il resto del sito

   Le introduzioni e le note di lettura erano paragrafi nudi in mezzo alle
   tabelle: leggibili ma estranei, si vedeva che erano stati aggiunti dopo.
   Qui prendono il linguaggio che il sito usa gia' altrove — eyebrow in
   mono maiuscolo, titoli in Space Grotesk, pannelli su --paper con bordo
   --line — cosi' sembrano parte del disegno invece che una toppa.
   ========================================================================== */

/* --- introduzione: il testo che apre la pagina ------------------------- */
.pag-intro { max-width: 72ch; margin: 0 0 26px; }
.pag-intro p { color: var(--rm-ink-2); line-height: 1.68; margin: 0 0 14px; }
.pag-intro p:last-child { margin-bottom: 0; }
.pag-intro strong { color: var(--rm-ink); font-weight: 600; }
.pag-intro em { color: var(--rm-ink); font-style: italic; }
.pag-intro a { color: var(--rm-rail); }

/* La frase con i numeri del giorno e' la piu' importante della pagina:
   prende il binario a sinistra, come le citazioni del sito. */
.pag-intro .pag-oggi {
  color: var(--rm-ink);
  border-left: 3px solid var(--rm-rail);
  padding: 2px 0 2px 16px;
  margin-top: 18px;
}

/* NIENTE azzeramento sul primo: su queste pagine il titolo segue sempre
   l'introduzione, e il margine a zero glielo incollava addosso. */

/* --- nota di lettura: un pannello, non un muro di testo ---------------- */
.pag-note {
  max-width: 78ch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rm-rail);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 0 0 26px;
}
.pag-note::before {
  content: "Come si legge";
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rm-muted);
  margin-bottom: 14px;
}
.pag-note p { color: var(--rm-ink-2); line-height: 1.68; margin: 0 0 13px; }
.pag-note p:last-child { margin-bottom: 0; }
.pag-note strong { color: var(--rm-ink); font-weight: 600; }
.pag-note em { color: var(--rm-ink); font-style: normal; font-weight: 500; }
.pag-note a { color: var(--rm-rail); }

/* --- record: introduzione e spiegazioni ------------------------------- */
.rec-intro { max-width: 72ch; margin: 0 0 26px; }
.rec-intro p { color: var(--rm-ink-2); line-height: 1.68; margin: 0 0 14px; }
.rec-intro strong { color: var(--rm-ink); font-weight: 600; }
.rec-intro .rec-ctx {
  color: var(--rm-ink);
  border-left: 3px solid var(--rm-rail);
  padding: 2px 0 2px 16px;
  margin: 18px 0 0;
}


/* La spiegazione sotto ogni primato: separata dai numeri da una riga
   sottile, piu' piccola del dato ma non nascosta. */
.rec-why {
  margin: 15px 0 0; padding-top: 13px;
  border-top: 1px solid var(--rm-line);
  font-size: .92rem; line-height: 1.6; color: var(--rm-ink-2);
}
.rec-why strong { color: var(--rm-ink); font-weight: 600; }

.rec-note {
  max-width: 78ch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rm-rail);
  border-radius: var(--r-md);
  padding: 22px 26px;
}
.rec-note::before {
  content: "I criteri";
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rm-muted);
  margin-bottom: 14px;
}
.rec-note p { color: var(--rm-ink-2); line-height: 1.68; margin: 0 0 13px; }
.rec-note p:last-child { margin-bottom: 0; }
.rec-note strong { color: var(--rm-ink); font-weight: 600; }
.rec-note a { color: var(--rm-rail); }

@media (max-width: 640px) {
  .pag-intro p, .pag-note p, .rec-intro p, .rec-note p { font-size: .95rem; line-height: 1.62; }
  .pag-note, .rec-note { padding: 18px 18px; }
  .pag-intro .pag-oggi, .rec-intro .rec-ctx { padding-left: 13px; }
}

/* La giornata in una frase, sotto i quattro numeri della home. Prende il
   binario a sinistra come le altre righe di sintesi del sito. */
.bl-giornata {
  max-width: 68ch; margin: 20px 0 0;
  color: var(--rm-ink-2); line-height: 1.65;
  border-left: 3px solid var(--rm-rail);
  padding: 4px 0 4px 16px;
}
.bl-giornata strong { color: var(--rm-ink); font-weight: 600; }
.bl-giornata a { color: var(--rm-rail); white-space: nowrap; }
@media (max-width: 640px) {
  .bl-giornata { font-size: .95rem; padding-left: 13px; }
}

/* "Forse cercavi": i suggerimenti sotto una ricerca a vuoto. */
.rm-forse { margin: 14px 0 0; line-height: 1.6; }
.rm-forse a { color: var(--rm-rail); font-weight: 600; }
.rm-forse a:hover { text-decoration: underline; }
.rm-forse strong { color: var(--rm-ink); }

/* Respiro sopra un titolo di sezione che NON apre il suo contenitore.
   Sulla home ogni .rm-sec-head e' il primo figlio di .rm-sec, che porta
   gia' i suoi 42px di padding: li' questa regola non si applica. Serve
   alle pagine dove il titolo segue un paragrafo o una tabella, dove
   altrimenti resta incollato a quello che lo precede. */
.rm-home .rm-sec-head:not(:first-child) { margin-top: 40px; }

/* IL TITOLO DEL PERCORSO STAVA DI FIANCO ALLA MAPPA, NON SOPRA.
   .bl-map-wrap e' un flex per centrare l'SVG, ma cosi' l'intestazione
   diventava una sorella della mappa e si spartiva la riga con lei:
   misurato su /treno/IC723, il contenitore restava largo 137px e
   «Il percorso» andava a capo TRE volte dentro 68px.
   Le parti che sono righe intere lo dichiarano; la mappa resta centrata. */
.bl-map-wrap { flex-wrap: wrap; }
.bl-map-wrap > .rm-sec-head,
.bl-map-wrap > .bl-map-ends,
.bl-map-wrap > p { flex: 1 0 100%; }

/* «Questo servizio compare anche come ICN1962». Una nota, non un allarme:
   il dato non e' sbagliato, e' parziale, e la differenza va detta con il
   tono di una precisazione. */
.rm-gemello{margin:14px 0 0;padding:10px 14px;font-size:.88rem;line-height:1.5;
  color:var(--rm-muted);background:var(--rm-surface2);border:1px solid var(--rm-line);
  border-radius:var(--r-md)}
.rm-gemello strong{color:var(--rm-ink);font-weight:600}

/* ============================================================
   AFFIDABILITA' DEL TRENO — il numero che risponde alla domanda.
   Classi nuove col prefisso `bl-aff`, nessuna esiste altrove: una regola
   appesa in fondo al foglio ne cancella una precedente sullo stesso
   selettore, e qui non c'e' niente da cancellare.
   Il colore non porta mai da solo l'informazione: accanto a ogni fascia
   c'e' il numero di corse e la parola che dice cos'e'.
   ============================================================ */
.bl-aff{
  background:var(--rm-surface); border:1px solid var(--rm-line);
  border-radius:var(--r-md); padding:16px 18px; margin-bottom:18px;
}
.bl-aff-testa{ display:flex; align-items:center; gap:16px; }
.bl-aff-n{ display:flex; align-items:baseline; gap:2px; line-height:1; }
.bl-aff-n strong{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:2.6rem; font-weight:800; color:var(--rm-accent);
  font-variant-numeric:tabular-nums;
}
.bl-aff-n small{ font-size:.9rem; color:var(--rm-muted); font-weight:600; }
.bl-aff-nd{ font-size:2.2rem; color:var(--rm-muted); font-weight:800; }
.bl-aff.vuoto .bl-aff-eti{ color:var(--rm-muted); }
.bl-aff-t{ display:flex; flex-direction:column; gap:2px; }
.bl-aff-lab{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--rm-rail);
}
.bl-aff-eti{ font-size:1.06rem; font-weight:700; color:var(--rm-ink); }
.bl-aff-barra{
  display:flex; gap:2px; height:10px; margin:14px 0 10px;
  border-radius:999px; overflow:hidden;
}
.bl-aff-f{ display:block; min-width:3px; }
.bl-aff-f.ok{ background:var(--rm-accent); }
.bl-aff-f.w{ background:var(--rm-amber); }
.bl-aff-f.ko{ background:var(--rm-red); }
.bl-aff-f.sopp{ background:var(--rm-rail); }
.bl-aff-leg{
  list-style:none; padding:0; margin:0 0 10px;
  display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.78rem;
}
.bl-aff-leg li{ display:flex; align-items:center; gap:6px; color:var(--rm-ink); }
.bl-aff-leg i{ width:9px; height:9px; border-radius:3px; display:inline-block; flex:0 0 auto; }
.bl-aff-leg i.ok{ background:var(--rm-accent); }
.bl-aff-leg i.w{ background:var(--rm-amber); }
.bl-aff-leg i.ko{ background:var(--rm-red); }
.bl-aff-leg i.sopp{ background:var(--rm-rail); }
.bl-aff-leg strong{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:800; }
.bl-aff-leg span{ color:var(--rm-muted); font-size:.72rem; }
.bl-aff-d{ margin:0; font-size:.82rem; color:var(--rm-muted); line-height:1.55; }
@media (max-width: 520px){
  .bl-aff{ padding:14px; }
  .bl-aff-n strong{ font-size:2.1rem; }
  .bl-aff-leg{ gap:5px 14px; font-size:.74rem; }
}

/* =====================================================================
   TERMINI: i due riquadri che contano
   Modificatore di .rm-legal-note, non una classe che la sostituisce: la
   nota resta quello che e' e prende solo piu' voce. Nome NUOVO, quindi
   questa regola in fondo al file non ne cancella nessuna precedente.
   ===================================================================== */
.rm-legal-forte{
  border-left:3px solid var(--rm-amber);
  background:var(--rm-surface);
  font-size:.92rem;
}
.rm-doc .rm-legal-forte{ color:var(--rm-ink); }
.rm-legal-forte p{ margin:0; }
.rm-legal-forte p + p{ margin-top:10px; }

/* ---- Pannello: spazio del database ---------------------------------- */
/* La barra della quota. Non riusa .admin-sys--ok/warn/bad: quelle danno uno
   sfondo al 10% con un bordo, che su una pastiglia si legge e su una barra
   piena sparisce. Qui serve tinta piena. */
.admin-quota{
    height:10px; border-radius:999px; overflow:hidden;
    background:var(--rm-line); margin:2px 0 10px;
}
.admin-quota-bar{ display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.admin-quota-bar.is-ok{   background:var(--rm-green); }
.admin-quota-bar.is-warn{ background:var(--rm-amber); }
.admin-quota-bar.is-bad{  background:var(--rm-red); }

/* Un comando in linea dentro un pannello: etichetta, campo, pulsante. */
.admin-inline-form{
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    margin:0 0 4px;
}
.admin-inline-form label{ font-size:.78rem; color:var(--rm-muted); }

/* Tabella dati del pannello: righe fitte, numeri allineati, niente sorprese
   di larghezza. La colonna dei numeri usa le cifre tabulari, o le colonne
   ballano da una riga all'altra. */
.admin-table{ font-size:.82rem; margin-bottom:0; }
.admin-table th{ font-weight:600; color:var(--rm-muted); white-space:nowrap; }
.admin-table td, .admin-table th{ padding:.35rem .5rem; vertical-align:middle; }
.admin-table .mono{ font-variant-numeric:tabular-nums; }

/* `is-page` era USATA IN CINQUE PUNTI E DEFINITA IN NESSUNO: le barre «sopra
   l'80%» e i quadratini della legenda ricadevano su `--g-base`, che per
   fortuna e' un verde. Funzionava per caso. Il giorno che qualcuno cambia il
   colore di base, la legenda continua a dire «verde sopra l'80%» mentre a
   schermo c'e' altro, e nessuno collega le due cose.
   Dichiarata con LO STESSO colore di prima: l'aspetto di oggi non cambia di
   un pixel, cambia solo che adesso e' una scelta. */
.admin-chart-bar.is-page{ background:var(--g-base); }
.admin-key.is-page{ background:var(--g-base); }
.admin-chart-bar.is-ok{ background:var(--rm-green); }
.admin-key.is-ok{ background:var(--rm-green); }

/* ---- Scioperi ------------------------------------------------------- */
.sci-oggi{ background:rgba(var(--rm-red-rgb),.10); border:1px solid rgba(var(--rm-red-rgb),.35);
           border-radius:var(--r-md); padding:.7rem .9rem; margin:0 0 1rem; }
.sci-nessuno{ background:rgba(var(--rm-green-rgb),.09); border:1px solid rgba(var(--rm-green-rgb),.30);
              border-radius:var(--r-md); padding:.9rem; }
.sci-lista{ list-style:none; padding:0; margin:0 0 1.6rem; display:flex; flex-direction:column; gap:.7rem; }
.sci-voce{ display:flex; gap:1rem; flex-wrap:wrap; padding:.85rem 1rem;
           background:var(--rm-surface); border:1px solid var(--rm-line); border-radius:var(--r-md); }
.sci-voce.is-oggi{ border-color:rgba(var(--rm-red-rgb),.45); }
.sci-quando{ min-width:11rem; display:flex; flex-direction:column; gap:.15rem; }
.sci-data{ font-weight:600; text-transform:capitalize; }
.sci-fino{ font-size:.8rem; color:var(--rm-muted); }
.sci-quanto{ font-size:.75rem; color:var(--rm-muted); font-variant-numeric:tabular-nums; }
.sci-cosa{ flex:1 1 16rem; min-width:0; }
.sci-orario{ font-weight:600; margin:0 0 .15rem; }
.sci-chi{ margin:0 0 .4rem; color:var(--rm-muted); font-size:.86rem; }
.sci-meta{ margin:0; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.sci-meta small{ color:var(--rm-muted); font-size:.74rem; }
.sci-note{ margin:.4rem 0 0; font-size:.8rem; color:var(--rm-muted); }
.sci-spiega{ border-top:1px solid var(--rm-line); padding-top:1.1rem; }
.sci-spiega h3{ margin:0 0 .5rem; }
.sci-spiega p{ margin:0 0 .6rem; }
.sci-fonte{ font-size:.82rem; color:var(--rm-muted); }

/* L'avviso di sciopero in home: compare solo quando ce n'e' uno entro una
   settimana, quindi puo' permettersi di farsi notare. */
.bl-sciopero{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; text-decoration:none; color:inherit;
  background:rgba(var(--rm-amber-rgb),.10); border:1px solid rgba(var(--rm-amber-rgb),.40);
  border-radius:var(--r-md); transition:border-color var(--t-fast) var(--ease-out);
}
.bl-sciopero:hover{ border-color:rgba(var(--rm-amber-rgb),.75); }
.bl-sciopero-q{
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:.74rem; color:var(--rm-amber); white-space:nowrap;
}
.bl-sciopero-t{ flex:1 1 14rem; min-width:0; font-size:.88rem; }
.bl-sciopero-t strong{ display:block; }
.bl-sciopero-go{ font-size:.8rem; color:var(--rm-muted); white-space:nowrap; }

/* La frase che spiega CHE TIPO di soppressione: non l'etichetta, ma cosa
   vuol dire per chi aspetta in stazione. */
.tmon-spiega{
  margin:.35rem 0 0; font-size:.86rem; color:var(--rm-ink);
  padding:.45rem .7rem; border-radius:var(--r-sm);
  background:rgba(var(--rm-amber-rgb),.10); border:1px solid rgba(var(--rm-amber-rgb),.28);
}

/* L'indennizzo: compare solo a corsa conclusa e solo oltre l'ora di ritardo,
   quindi puo' permettersi di farsi vedere. Verde perche' e' una buona
   notizia dentro una cattiva. */
.tmon-indennizzo{
  margin:.6rem 0 0; padding:.6rem .8rem; border-radius:var(--r-sm);
  background:rgba(var(--rm-green-rgb),.10); border:1px solid rgba(var(--rm-green-rgb),.32);
}
.tmon-ind-t{ margin:0 0 .25rem; font-size:.92rem; }
.tmon-ind-n{ margin:0; font-size:.79rem; color:var(--rm-muted); line-height:1.5; }

/* ==========================================================================
   I TUOI TRENI — la striscia in cima alla home e il bottone che la riempie.
   Selettori nuovi: verificato prima di appendere che `bl-miei` e `bl-salva`
   non compaiano altrove nel foglio (la regola di casa: appendere su un
   selettore gia' usato ne cancella in silenzio una precedente).
   La striscia la disegna app.js e non esiste nell'HTML servito: e' una
   comodita' di chi torna, non un contenuto da indicizzare.
   ========================================================================== */
.bl-miei { margin: 0 0 26px; }
.bl-miei-lista { display: grid; gap: 8px; margin-top: 4px; }
.bl-miei-riga { display: flex; align-items: stretch; gap: 6px; }
.bl-miei-card {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(84px, auto) 1fr auto;
  align-items: center; gap: 4px 14px;
  padding: 11px 14px; text-decoration: none; color: var(--rm-ink);
  background: var(--rm-surface); border: 1px solid var(--rm-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
}
.bl-miei-card:hover { border-color: var(--rm-accent); background: var(--rm-surface2); color: var(--rm-ink); }
.bl-miei-card:focus-visible { outline: 3px solid var(--rm-accent); outline-offset: 2px; }
.bl-miei-code { font-weight: 700; color: var(--rm-rail); white-space: nowrap; }
/* Il nome della tratta si accorcia, non sfonda: e' l'unica parte di
   lunghezza imprevedibile della riga. */
.bl-miei-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; color: var(--rm-muted); }
.bl-miei-stato { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bl-miei-rit { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.bl-miei-nulla { font-size: .78rem; color: var(--rm-muted); }
/* Il bottone per togliere e' grande abbastanza da premerlo col pollice:
   44px e' il minimo che le linee guida di Apple e Google danno per un
   bersaglio tattile, e questo sta di fianco a un collegamento. */
.bl-miei-x {
  flex: 0 0 auto; width: 44px; min-height: 44px;
  background: 0; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--rm-muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.bl-miei-x:hover { color: var(--rm-ink); border-color: var(--rm-line); background: var(--rm-surface); }
.bl-miei-x:focus-visible { outline: 3px solid var(--rm-accent); outline-offset: 2px; }

.bl-salva.is-on { border-color: var(--rm-amber); color: var(--rm-amber); }
.bl-salva-nota { margin: 10px 0 0; font-size: .82rem; color: var(--rm-muted); }
/* L'avviso senza account sta accanto a «Salva treno» e parla la stessa
   lingua: acceso = bordo e testo ambra, come la stella del salvataggio.
   Selettori nuovi, verificati assenti dal resto del foglio. */
.bl-avvisa.is-on { border-color: var(--rm-amber); color: var(--rm-amber); }
.bl-avvisa-nota { margin: 10px 0 0; font-size: .82rem; color: var(--rm-muted); max-width: 62ch; }

@media (max-width: 560px) {
  /* Il titolo prende la riga per se': in riga con la nota restava largo
     quattro parole e «I tuoi treni» andava a capo in mezzo. */
  .bl-miei .rm-sec-head { flex-wrap: wrap; }
  .bl-miei .rm-sec-head h2 { flex: 1 0 100%; }
  /* Sul telefono la tratta va sotto il codice: in riga restava larga
     quaranta pixel e si riduceva a tre lettere e i puntini. */
  .bl-miei-card { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .bl-miei-route { grid-column: 1 / -1; }
  .bl-miei-stato { grid-column: 2; grid-row: 1; }
}

/* Il campo della data su /collegamenti e la nota sulle due fonti.
   Selettori nuovi: verificato che bl-coll-quando, bl-coll-fonte e
   bl-coll-solocal non compaiano altrove nel foglio. */
.bl-coll-quando input[type="date"] { min-height: 44px; }
.bl-coll-fonte { font-size: .84rem; color: var(--rm-muted); margin: 6px 0 0; }
.bl-coll-fonte strong { color: var(--rm-ink); }
.bl-coll-solocal { font-size: .76rem; color: var(--rm-amber); }

/* VIAGGI CON UN CAMBIO, DENTRO LA STESSA TABELLA DEI DIRETTI.
   Tre selettori nuovi: verificato che bl-coll-camb-pill, bl-coll-riga-camb
   e bl-coll-camb-att non compaiano altrove nel foglio, cosi' questa aggiunta
   in fondo non puo' sovrascrivere una regola precedente.
   La riga col cambio NON e' un avviso: si distingue quanto basta per
   leggerla come una soluzione diversa, non come un problema. */
.bl-coll-camb-pill { display: inline-block; font-size: .7rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--rm-brand); border: 1px solid var(--rm-brand);
    border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
/* LA SPECIFICITA', DI NUOVO. Questa regola non ha mai tinto niente: piu'
   su nel foglio c'e' `main .table > :not(caption) > * > *` con
   `background: 0px center` — la scorciatoia che azzera il fondo delle celle
   di Bootstrap — e (0,1,3) batte (0,1,1). Verificato nel browser: il fondo
   calcolato della cella era `rgba(0,0,0,0)`.
   Si nomina la riga per quello che gia' e', come per `.rm-btn.rm-btn-primary`
   il 18/09: (0,2,4) e niente !important. */
main .table > tbody > tr.bl-coll-riga-camb > td { background: rgba(var(--rm-brand-rgb), .045); }
.bl-coll-camb-att { font-size: .76rem; color: var(--rm-muted); margin: 3px 0;
    padding-left: 10px; border-left: 2px solid var(--rm-line); }
.bl-coll-camb-att a { color: var(--rm-muted); text-decoration: underline; }

/* IL LOGOTIPO: «binario» + «LIVE», come nel mockup del 18/09/2026.
   Due selettori nuovi, verificato che non compaiano altrove nel foglio.
   Il nome nell'HTML resta «BinarioLive» e sono le maiuscole/minuscole a
   essere disegnate qui: chi non vede la pagina sente il nome giusto.
   `--rm-brand` e non `--rm-accent`: qui e' marchio, non stato. */
/* IL COLORE VA NOMINATO, NON EREDITATO. Lasciandolo ereditare, «binario»
   usciva GRIGIO #93A0B4: il logotipo sta dentro `.rm-nav`, e `.rm-nav a`
   vale (0,1,1) contro (0,1,0) di `.rm-brand`. E' la stessa specificita' che
   il 18/09 aveva scolorito il testo del bottone primario, e che il 19/09
   aveva mangiato la tinta delle righe col cambio: tre volte in due giorni.
   Qui si nomina la riga per quello che gia' e' — (0,2,0) batte (0,1,1). */
/* «Binario» con la B maiuscola: il logo del design system, deciso dall'utente il 29/09/2026. */
.rm-brand .rm-brand-1 { text-transform: none; letter-spacing: -.01em; color: var(--rm-ink); }
.rm-brand .rm-brand-2 { text-transform: uppercase; letter-spacing: .01em; color: var(--rm-brand); }
.rm-foot-brand .rm-brand-1 { text-transform: none; letter-spacing: -.01em; }
.rm-foot-brand .rm-brand-2 { text-transform: uppercase; letter-spacing: .01em; color: var(--rm-brand); margin-left: .3em; }


/* IL `<code>` IN PROSA. Senza questa riga eredita `--bs-code-color` da
   compat.css, che e' il rosa #d63384 di Bootstrap: 3,95:1 e fuori tavolozza.
   Il blu rotaia e' quello che il foglio usa gia' per il codice in linea. */
code { color: var(--rm-rail); }

/* LA SCALA DEL RITARDO, la stessa che la mappa dichiara nella sua legenda.
   Prima di queste quattro righe il ritardo aveva un colore diverso per ogni
   punto della scheda, e due regole arrivavano a ridefinire `.t-red` come
   ORO: la classe diceva "rosso" e il lettore vedeva il colore del ritardo
   lieve su un treno di 149 minuti. Il nome mentiva.
   La chiave la calcola ritardo_fascia() in helpers.php; qui c'e' solo il
   colore. Le tinte sono quelle dei pallini della mappa, per non promettere
   nella legenda una cosa e mostrarne un'altra nella scheda. */
/* LA CLASSE E' SCRITTA DUE VOLTE APPOSTA, non e' un refuso.
   Cosi' la specificita' sale a (0,2,0) e la scala batte i colori di
   CONTENITORE, che altrimenti la cancellano: `.tbl-board .mono` dipinge di
   ambra ogni monospaziato del tabellone, e dentro quelle tabelle `+1'` e
   `+153 min` uscivano identici. Un ritardo porta una decisione esplicita
   sul colore, un contenitore porta solo un valore di scorta: deve vincere
   la decisione. Doppiare la classe invece di usare `!important` lascia
   comunque scavalcabile la regola a chi ne ha davvero bisogno. */
.rt-ok.rt-ok { color: var(--rm-accent); }
.rt-w1.rt-w1 { color: var(--rm-amber); }
.rt-w2.rt-w2 { color: var(--rm-orange); }
.rt-ko.rt-ko { color: var(--rm-red); }

/* PROMEMORIA SUL VERDE. Il 19/09/2026 l'avanzamento (barra, pallini, linea
   del percorso) e' passato dal verde al blu rotaia, perche' nella scala del
   ritardo il verde vuol dire «in orario» e un treno con 149 minuti di
   ritardo mostrava una barra tutta verde sotto il titolo «Stato della
   corsa». Il colore, su questo sito, e' del RITARDO: vedi ritardo_fascia()
   e le classi .rt-*. Chi aggiunge un indicatore di avanzamento usi il blu. */

/* =====================================================================
   CHI CHIEDE MENO MOVIMENTO LO OTTIENE SEMPRE, ANCHE DOMANI.
   =====================================================================

   Questa regola esisteva gia', ma sparsa in DIECI blocchi che elencavano
   ventinove selettori scelti a mano. Un elenco a mano si dimentica: ogni
   animazione nuova deve ricordarsi di iscriversi, e chi la scrive non sa
   che l'elenco esiste. Contate il 19/09/2026, tre non si erano iscritte:

     .bl-auth-form   bl4In      0,9 s   (entrata del modulo di accesso)
     .field-flash    fieldFlash 1,0 s   (il lampo sul campo del pronostico)
     .job-dot.run    rmBlink    1,2 s   INFINITA, nel pannello

   La terza e' la peggiore: un lampeggio che non finisce mai e' proprio
   quello che chi soffre di disturbi vestibolari chiede di spegnere. La
   seconda l'avevo aggiunta io stesso poche ore prima, senza accorgermi
   che c'era un elenco da aggiornare: la dimostrazione che il difetto non
   sono i tre nomi, e' la forma.

   PERCHE' .01ms E NON `animation: none`.
   `none` non spegne solo il movimento: azzera anche il modo di riempimento.
   Undici entrate qui dentro sono dichiarate `both` e partono da
   `opacity: 0`; spegnendole, l'elemento non si ferma sull'ultimo
   fotogramma, torna al suo stile di BASE. Provate tutte e undici il
   19/09/2026: nessuna sparisce, perche' nessuna dichiara un'opacita' di
   base — restano a 1. Quindi oggi `none` andrebbe bene. Ma va bene per
   coincidenza, non per costruzione: basta che qualcuno scriva
   `opacity: 0` nella regola normale — che e' proprio come si scrive una
   comparsa — e quell'elemento diventa invisibile per sempre a chi ha
   chiesto meno movimento, cioe' a nessuno che possa segnalarlo. Il
   sospetto era gia' venuto a qualcuno: il blocco della 404 qui sopra
   rimette `opacity: 1; transform: none` a mano.
   Con una durata impercettibile il problema non si pone: l'animazione
   FINISCE davvero e si posa da sola sul suo ultimo fotogramma.
   E nessun elenco da tenere aggiornato.

   I blocchi specifici restano dove sono e continuano a vincere: hanno
   specificita' (0,1,0) contro lo (0,0,0) di `*`, quindi l'ordine non
   c'entra. Questo qui riempie solo i buchi. */
/* «PARTITO IERI», nell'elenco dei ritardi di oggi.
   Blu rotaia, come tutto cio' che informa: non e' uno stato del treno — il
   suo stato ce l'ha gia' accanto, nella colonna apposta — e' una nota su
   QUANDO e' partito. Dipingerla con un colore della scala del ritardo
   direbbe una seconda volta, e peggio, una cosa gia' detta. */
.rm-ieri{
    display:inline-block; margin-top:3px;
    color:var(--rm-rail); font-size:.74rem; font-weight:600;
    letter-spacing:.02em; white-space:nowrap;
}

/* =====================================================================
   FASCIA NOTTURNA — l'avviso di servizio, su ogni pagina dall'una alle cinque.
   =====================================================================

   IL COLORE E' BLU, E NON E' UN DETTAGLIO. Su questo sito verde, oro, arancio
   e rosso vogliono dire UNA cosa: quanto e' in ritardo un treno (vedi
   ritardo_fascia() e le classi .rt-*). Un avviso di servizio dipinto d'ambra
   verrebbe letto come un ritardo lieve — dal lettore distratto e da chiunque
   abbia imparato la scala guardando le schede. Il blu rotaia e' il colore
   dell'informazione: link, didascalie, avanzamento.

   Il testo lo compone fascia_notturna() in seo.php, che chiede le ore alla
   regola invece di riscriverle. */
/* IL GIALLO E' LUCE, NON CAMPO — ed e' la ragione per cui questa banda
   funziona senza rubare il mestiere alla scala del ritardo.
   Steso su mezza larghezza di pagina, un giallo forte compete con i numeri
   colorati della scheda; ridotto a bordo, bagliore e parole in grassetto,
   si vede da lontano e non si confonde con niente. In piu' un tubo al neon
   acceso su fondo scuro e' letteralmente l'immagine di un'insegna di notte,
   che e' proprio quello che la banda dice.
   Il bagliore e' STATICO: un lampeggio su ogni pagina per quattro ore
   sarebbe un fastidio, non un effetto. */
.bl-notte{
    display:flex; gap:12px; align-items:flex-start;
    margin:0 0 18px; padding:13px 17px;
    background:var(--rm-deep);
    border:2px solid var(--rm-notte);
    border-radius:var(--r-md);
    color:var(--rm-ink); font-size:.92rem; line-height:1.55;
    box-shadow:
        0 0 20px -4px rgba(var(--rm-notte-rgb), .42),
        inset 0 0 22px -10px rgba(var(--rm-notte-rgb), .55);
}
/* Il titolo SU UNA RIGA SUA, e sotto due paragrafi: prima era tutto un
   periodo solo e a quest'ora, su un telefono, un blocco di testo pieno non
   lo legge nessuno. Il titolo e' anche l'unica cosa accesa: il neon sta nel
   bordo e qui, e il corpo resta dell'inchiostro normale, che a questa
   dimensione si legge molto meglio di un giallo saturo. */
.bl-notte strong{
    display:block; margin-bottom:5px;
    color:var(--rm-notte); font-weight:700;
    letter-spacing:.01em;
}
.bl-notte-t{min-width:0}
.bl-notte-t p{margin:0 0 5px}
.bl-notte-t p:last-child{margin-bottom:0}
/* IL LINK RESTA DEL COLORE DEI LINK, e qui c'e' una storia.
   Avevo scritto `color:var(--rm-notte)` e, per lo sciopero, `color:
   var(--rm-sciopero)`. Nessuna delle due si vedeva. Il colpevole:
     main a:not(.btn):not(.rm-btn):not(.bl-chip-percorso):not(.train-code)
          :not(.rm-card):not(.nav-link):not(.adm-link):not(.adm-side-back)
   che vale (0,8,1) — un elemento e OTTO classi negate — contro lo (0,2,1)
   di `.bl-notte--sciopero .bl-notte-t a`. Un selettore costruito per
   esclusione diventa, senza volerlo, il piu' forte del foglio.
   Le ho tolte invece di rincorrerle con `!important`, perche' avevano
   torto: su questo sito il blu vuol dire «si clicca», dappertutto. Tingere
   il link del colore della banda userebbe il colore per decorare, non per
   dire qualcosa — e lascerebbe un link che non sembra un link.
   Il peso e la sottolineatura all'hover invece passano: quella regola il
   colore non lo tocca. */
.bl-notte-t a{font-weight:650; text-decoration:none}
.bl-notte-t a:hover,.bl-notte-t a:focus{text-decoration:underline}

/* LO SCIOPERO: stessa veste, tinta sua. Il neon cambia colore, tutto il
   resto — fondo, testo, forma, bagliore — resta identico alla banda della
   notte, cosi' le due si riconoscono come la stessa famiglia di avvisi. Il
   segno e' un quadrato fermo: un blocco, non una notte, e il morso della
   luna qui non c'e'. */
.bl-notte--sciopero{
    border-color:var(--rm-sciopero);
    box-shadow:
        0 0 20px -4px rgba(var(--rm-sciopero-rgb), .42),
        inset 0 0 22px -10px rgba(var(--rm-sciopero-rgb), .55);
}
.bl-notte--sciopero strong{color:var(--rm-sciopero)}
.bl-notte--sciopero .bl-notte-i{
    border-radius:3px;
    background:var(--rm-sciopero);
    box-shadow:0 0 10px -1px rgba(var(--rm-sciopero-rgb), .75);
}

/* I DATI FERMI: giallo come la notte — e' la stessa famiglia, il sito che
   parla di se' — ma il segno e' un cerchio VUOTO. La luna e' piena perche'
   di notte il sito lavora lo stesso, solo piu' piano; qui dentro non entra
   niente, e si vede.
   Un terzo colore non serviva: il colore dice la famiglia, le parole dicono
   il caso. Se ogni caso nuovo si prendesse una tinta, fra sei mesi il sito
   sarebbe un arcobaleno e nessuno leggerebbe piu' nessuna banda. */
.bl-notte--fermo .bl-notte-i{
    background:transparent;
    border:2px solid var(--rm-notte);
    box-shadow:0 0 10px -1px rgba(var(--rm-notte-rgb), .75);
}
.bl-notte-i{
    flex:0 0 18px; width:18px; height:18px; margin-top:3px;
    border-radius:50%;
    /* Una luna: un cerchio pieno con un morso tolto dal bordo. Niente SVG e
       niente carattere emoji — un'emoji porta il suo, di fondo, e cambia
       faccia da un sistema all'altro. Qui il cerchio e' acceso e il morso e'
       il fondo scuro della banda.
       `var(--rm-deep)` e NON `rgba(var(--rm-deep-rgb), 1)`: quel canale non
       esiste, e un rgba() con dentro una variabile vuota non e' un colore
       sbiadito — e' una dichiarazione INVALIDA, che il browser butta via in
       silenzio. Il morso non ci sarebbe stato e la luna sarebbe uscita un
       cerchio pieno, senza che niente lo segnalasse. */
    background:var(--rm-notte);
    box-shadow:
        inset -5px -1px 0 0 var(--rm-deep),
        0 0 10px -1px rgba(var(--rm-notte-rgb), .75);
}
@media (max-width:560px){
    .bl-notte{font-size:.86rem; padding:10px 12px; gap:10px}
}

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

/* SOTTOMENU DELLA SEZIONE STATISTICHE (statistiche_sottomenu in seo.php).
   Le cinque pagine della sezione, in testa a ciascuna: prima si
   raggiungevano solo dal piede di pagina. A sinistra, non al centro come le
   altre file di chip: sta sotto un titolo allineato a sinistra. Due classi
   nel selettore, perche' `.rm-chips` da sola viene ridefinita piu' in alto. */
.rm-chips.rm-subnav{justify-content:flex-start;margin:0 0 var(--testata-gap)}
.rm-stats-hero + .rm-chips.rm-subnav{margin-top:16px}
.rm-chips.rm-subnav .rm-chip[aria-current="page"]{color:var(--rm-ink);border-color:var(--rm-rail);font-weight:600}

/* ------------------------------------------------------------------------
   LA SCALA DEL RITARDO OVUNQUE (01/10/2026, allineamento al design system).

   Quattro luci, sempre le stesse: `ok` fino alla tolleranza, `w1` fino a 15,
   `w2` fino a 30, `ko` oltre e per le soppressioni; `attesa` per il treno
   non partito. La classe la decide ritardo_fascia() sul server, e il browser
   la riceve gia' fatta: prima il tabellone di stazione colorava di rosso
   ogni ritardo sopra zero, il tabellone della home cambiava colori al primo
   aggiornamento, gli «ultimi viaggi» andavano in rosso dai 10 minuti e le
   linee della home dai 3. Qui le fasce che mancavano, con i token.
   ------------------------------------------------------------------------ */

/* Il tabellone di stazione */
.rm-board-station .rm-delay.ok{ background:rgba(var(--rm-accent-rgb),.16); color:var(--g-soft); }
.rm-board-station .rm-delay.w1{ background:rgba(var(--rm-amber-rgb),.16); color:var(--rm-amber); }
.rm-board-station .rm-delay.w2{ background:rgba(var(--rm-orange-rgb),.16); color:var(--rm-orange); }
.rm-board-station .rm-delay.ko,
.rm-board-station .rm-delay.late{ background:rgba(var(--rm-red-rgb),.18); color:var(--rm-red-soft); }
.rm-board-station .rm-delay.attesa,
.rm-board-station .rm-delay.sched{ background:rgba(var(--rm-ink-rgb),.10); color:var(--rm-muted); }

/* Il tabellone della home: il ritardo e la pastiglia dello stato */
.bl-bdelay.ok{ color:var(--rm-accent); }
.bl-bdelay.w1{ color:var(--rm-amber); }
.bl-bdelay.w2{ color:var(--rm-orange); }
.bl-bdelay.ko,
.bl-bdelay.late{ color:var(--rm-red-soft); }
.bl-bdelay.canc{ color:var(--rm-muted); }
.bl-bpill.ok{ background:rgba(var(--rm-accent-rgb),.18); color:var(--g-soft); }
.bl-bpill.w1{ background:rgba(var(--rm-amber-rgb),.18); color:var(--rm-amber); }
.bl-bpill.w2{ background:rgba(var(--rm-orange-rgb),.18); color:var(--rm-orange); }
.bl-bpill.ko,
.bl-bpill.late{ background:rgba(var(--rm-red-rgb),.18); color:var(--rm-red-soft); }
.bl-bpill.canc{ background:rgba(var(--rm-red-rgb),.12); color:var(--rm-red-soft); }

/* Le linee in evidenza della home */
.bl-line-dot.w1{ background:var(--rm-amber); }
.bl-line-dot.w2{ background:var(--rm-orange); }
.bl-line-d.w1{ color:var(--rm-amber); }
.bl-line-d.w2{ color:var(--rm-orange); }

/* Gli ultimi viaggi della scheda treno */
.bl-run.w1{ border-top-color:var(--rm-amber); }
.bl-run.w2{ border-top-color:var(--rm-orange); }
.bl-run.w1 .bl-run-v{ color:var(--rm-amber); }
.bl-run.w2 .bl-run-v{ color:var(--rm-orange); }

/* La barra dell'affidabilita' e la sua legenda */
.bl-aff-f.w1, .bl-aff-leg i.w1{ background:var(--rm-amber); }
.bl-aff-f.w2, .bl-aff-leg i.w2{ background:var(--rm-orange); }

/* La puntualita' in barra, con la lettura del sito (puntualita_fascia) */
.rm-punct-fill.is-w{ background:var(--rm-amber); }

/* Lo storico della scheda treno: «in orario» e «soppresso» per intero */
.rm-hist-row{ grid-template-columns:74px 1fr 78px; }

/* IL LOGO E' UNO SOLO: anche nel piede il pallino del segnale, poi «Binario»
   e «LIVE», a 10px l'uno dall'altro come nella barra (design system). */
.rm-foot-brand{ display:flex; align-items:center; gap:10px; }
.rm-foot-brand .rm-brand-2{ margin-left:0; }

/* Le barre dello storico della scheda treno: il colore della fascia, non
   rosso per ogni minuto (un +3 e' «in orario»). `is-ok` resta per lo zero. */
.rm-hist-fill.f-ok{ background:var(--rm-accent); }
.rm-hist-fill.f-w1{ background:var(--rm-amber); }
.rm-hist-fill.f-w2{ background:var(--rm-orange); }
.rm-hist-fill.f-ko{ background:var(--rm-red); }

/* ==========================================================================
   SCHEDA TRENO: I TRENTA GIORNI E LA SETTIMANA (02/10/2026)
   Al posto della striscia dei sette viaggi: una barra per giorno alta
   quanto il ritardo (in cima = un'ora), e la puntualita' giorno per giorno
   della settimana. Idee prese da Zugfinder. Selettori nuovi, verificato
   prima di appendere che `bl-mese` e `bl-sett` non comparissero altrove:
   appendere una regola su un selettore gia' usato ne cancella una precedente.
   ========================================================================== */
.bl-mese{ display:flex; align-items:flex-end; gap:3px; height:76px; margin-top:8px; padding-bottom:1px; border-bottom:1px solid var(--rm-line); }
.bl-mese-g{ flex:1 1 0; min-width:3px; height:var(--h,0%); border-radius:2px 2px 0 0; background:var(--rm-muted); cursor:pointer; transition:opacity 140ms ease; }
.bl-mese-g.ok{ background:var(--rm-accent); }
.bl-mese-g.w1{ background:var(--rm-amber); }
.bl-mese-g.w2{ background:var(--rm-orange); }
.bl-mese-g.ko{ background:var(--rm-red); }
.bl-mese-g.na{ height:3px; background:var(--rm-line); cursor:default; }
.bl-mese-g.sop{ background:repeating-linear-gradient(135deg, rgba(var(--rm-red-rgb),.70) 0 3px, transparent 3px 6px); }
.bl-mese:hover .bl-mese-g:not(:hover){ opacity:.55; }
.bl-mese-g.is-scelta{ outline:2px solid var(--rm-ink); outline-offset:1px; }
.bl-mese-asse{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:6px; font-size:.74rem; color:var(--rm-muted); }
.bl-mese-lettura{ color:var(--rm-ink); font-weight:600; text-align:center; }
.bl-sett{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin-top:8px; border-top:1px solid var(--rm-line); border-bottom:1px solid var(--rm-line); }
.bl-sett-g{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 2px; border-right:1px solid var(--rm-line); min-width:0; }
.bl-sett-g:last-child{ border-right:0; }
.bl-sett-d{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--rm-muted); }
.bl-sett-v{ font-size:1rem; font-weight:800; }
.bl-sett-n{ font-size:.64rem; color:var(--rm-muted); white-space:nowrap; }
.bl-sett-frase{ margin:10px 0 4px; }
@media (max-width:420px){
  .bl-sett-v{ font-size:.9rem; }
  .bl-sett-n{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .bl-mese-g{ transition:none; } }

/* Collegamenti: il pulsante che scambia «Da» e «A» (02/10/2026). Sta fra i
   due campi, alto quanto loro; sul telefono, dove i campi vanno a capo,
   resta piccolo a destra. Selettore nuovo, verificato prima di appendere. */
.bl-coll-inverti{ flex:0 0 auto; align-self:flex-end; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:transparent; border:1px solid var(--rm-line); border-radius:var(--r-md); color:var(--rm-rail); font-size:1.15rem; line-height:1; cursor:pointer; }
.bl-coll-inverti:hover{ color:var(--rm-ink); border-color:var(--rm-rail); }
.bl-coll-inverti:focus-visible{ outline:2px solid var(--rm-accent); outline-offset:2px; }
@media (max-width:560px){ .bl-coll-inverti{ margin-left:auto; } }

/* Tabellone di stazione: il binario CAMBIATO si vede (02/10/2026). In ambra,
   come i ritardi lievi: e' un'informazione da guardare, non un allarme. Il
   binario mostrato e' ora quello effettivo (viaggiatreno_station_board). */
.rm-bs-train small.is-cambiato{ color:var(--rm-amber); font-weight:700; }

/* Scheda treno: «Puntualita' fermata per fermata» (02/10/2026). Una tendina
   chiusa che si presenta come le altre intestazioni della sezione
   (.bl-runs-h): chiusa e' una riga sola, la freccia dice che si apre.
   Selettori nuovi, verificati prima di appendere. */
.bl-fermate > summary{ list-style:none; cursor:pointer; margin:0; padding:0 0 8px;
  border-bottom:1px solid var(--rm-line); }
.bl-fermate > summary::-webkit-details-marker{ display:none; }
.bl-fermate > summary > span:last-child::after{ content:" \25BE"; }
.bl-fermate[open] > summary > span:last-child::after{ content:" \25B4"; }
.bl-fermate > summary:hover > span:first-child{ text-decoration:underline; text-underline-offset:3px; }

/* Un .bl-runs-h con un solo <span> e' un titolo senza contorno («Dove
   accumula ritardo», «Binario abituale»): quel <span> e' anche l'ultimo, e
   senza questa riga prendeva il grigio del contorno. Resta del colore del
   titolo. Selettore nuovo, verificato prima di appendere. */
.bl-runs-h > span:only-child{ color:inherit; letter-spacing:inherit; }
/* «RITARDO TIPICO» va a capo invece di allargare la colonna: sul telefono
   la tabella deve stare in 343 px senza scorrere, e i 137 px di
   un'intestazione su una riga sola mandavano i nomi delle fermate su tre.
   Il `main` e il `.table` non sono decorazione: servono a pareggiare
   `main .data-panel .table thead th` (nowrap), e a parita' vince l'ultima. */
main .bl-fermate .table thead th{ white-space:normal; }
/* «47 passaggi» sotto il nome della fermata. Non `d-block`: il sito non
   carica Bootstrap ma compat.css, che ne copia solo le regole viste nelle
   pagine sorvegliate, e `d-block` non c'e'. */
.bl-fermate-n{ display:block; font-size:.74rem; margin-top:2px; }
/* Il conteggio e la freccia restano insieme: a 316 px (la veste di oggi
   sul telefono) la freccia andava a capo da sola, sotto «17 FERMATE». */
.bl-fermate > summary > span:last-child{ white-space:nowrap; }

/* L'avviso di ViaggiaTreno sulla corsa (02/10/2026), con le sue parole: una
   citazione, quindi una riga a sinistra e la fonte detta sopra, non un'altra
   scatola accanto a quella ambra che spiega il tipo di provvedimento.
   Selettori nuovi, verificati prima di appendere. */
.tmon-nota{
  margin:.45rem 0 0; padding:.1rem 0 .1rem .7rem; font-size:.86rem; color:var(--rm-ink);
  border-left:2px solid rgba(var(--rm-amber-rgb),.7);
}
.tmon-nota-k{
  display:block; margin-bottom:2px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--rm-muted);
}
/* Lo storico: l'avviso di quel giorno sotto la barra, dove «soppresso» da
   solo non dice da dove a dove. Occupa le due colonne di destra della
   griglia, quindi la data resta allineata con le altre righe. */
.rm-hist-nota{ grid-column:2 / -1; margin-top:-8px; font-size:.76rem; line-height:1.35; color:var(--rm-muted); }

/* =====================================================================
   LA BARRA IN ALTO: DUE RIGHE VOLUTE (02/10/2026)
   ---------------------------------------------------------------------
   MISURATO il 02/10: la barra sta nel contenitore .rm-wrap, largo al
   massimo 1.120 px (1.080 utili), e in fila chiede 1.328 px senza accesso
   (marchio 135, sette voci 641, ricerca 297, pulsanti 191, spazi): non ci
   stava a NESSUNA larghezza. Andava a capo da sola, con il marchio solo
   sulla prima riga e tutto il resto sulla seconda, che sforava di 48 px a
   destra («Registrati» tagliato a 1.110 px di finestra). Il commento della
   soglia a 1.100 px, piu' su, e' di quando le voci erano sei.
   Qui le due righe diventano un disegno: sopra il marchio, poi ricerca,
   tema e pulsanti a destra; sotto le voci, col testo allineato al marchio.
   L'altezza resta quella di prima, che era gia' su due righe.
   display: contents toglie la scatola di #mainNav solo sopra i 1.100 px:
   ricerca, voci e pulsanti diventano elementi della riga e si ordinano.
   Sotto, #mainNav resta la tendina del menu com'era.
   ===================================================================== */
@media (min-width: 1101px) {
    .rm-nav-row { row-gap: 2px; }
    .rm-nav-collapse { display: contents; }
    .rm-nav-search { order: 1; margin-left: auto; flex: 0 1 380px; }
    .rm-nav-search input { min-width: 0; flex: 1; }
    .rm-tema { order: 2; }
    .rm-nav-auth { order: 3; }
    .rm-links { order: 4; flex: 1 0 100%; margin-left: -12px; }
}

/* IL TEMA: sole e luna (render_nav in seo.php, setupTema() in app.js). Si
   vede il tema in cui si passa: il sole nello scuro, la luna nel chiaro.
   Le icone sono a tratto, currentColor: niente emoji, che portano un
   disegno loro diverso su ogni sistema. */
.rm-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--rm-line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--rm-muted);
    cursor: pointer;
    transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.rm-tema:hover { color: var(--rm-ink); border-color: rgba(var(--rm-rail-rgb), .35); background: rgba(var(--rm-rail-rgb), .07); }
.rm-tema:focus-visible { outline: 2px solid var(--rm-rail); outline-offset: 2px; }
.rm-tema svg { display: block; }
.rm-tema .rm-tema-luna { display: none; }
html[data-tema="chiaro"] .rm-tema .rm-tema-sole { display: none; }
html[data-tema="chiaro"] .rm-tema .rm-tema-luna { display: block; }
/* Sul telefono sta accanto al menu, a destra, e si tocca col pollice. */
@media (max-width: 1100px) {
    .rm-nav-row { column-gap: 10px; }
    .rm-tema { margin-left: auto; width: 44px; height: 44px; }
    .rm-tema + .rm-burger { margin-left: 0; }
}

/* LE PARTENZE IN PROGRAMMA sulla scheda stazione (08/10/2026): i sette giorni
   come pastiglie. Selettore nuovo, verificato assente nel resto del foglio.
   !important sul colore: main colora ogni link con un selettore da otto classi. */
main .bl-prog-giorni { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
main .bl-prog-giorni a {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rm-line);
    font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--rm-muted) !important;
}
main .bl-prog-giorni a:hover { color: var(--rm-ink) !important; border-color: var(--rm-brand); }
main .bl-prog-giorni a.is-on { background: var(--rm-brand); border-color: var(--rm-brand); color: #fff !important; }