/*
 * LA SCHEDA TRENO NUOVA (anteprima ?scheda=nuova, 08/10/2026).
 *
 * Tutto sotto .st2: la scheda di sempre e le altre pagine non vedono niente.
 * I selettori cominciano con «html body .st2» per pesare piu' della veste di
 * stazione (unica.css usa «html.unica .x»): due classi e due elementi
 * battono due classi e un elemento, senza !important.
 *
 * L'idea: chi apre la scheda di un treno vuole sapere tre cose, in
 * quest'ordine — di quanto e' in ritardo, dove si trova, quando arriva. Le
 * mettiamo insieme nel riquadro «Adesso»; il resto viene dopo.
 */

/* ---- la testata: piu' bassa, senza perdere niente */
html body .st2 .rm-th-hero { padding-bottom: 10px; margin-bottom: 0; }
html body .st2 .rm-th-sub { margin: 4px 0 0; }
html body .st2 .rm-train-times { margin: 10px 0 0; }

/* ---- la barra delle sezioni, ferma in alto mentre si scorre */
html body .st2 .st2-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 14px 0 18px; padding: 8px 0;
    background: var(--rm-bg, #0b0f17);
    border-bottom: 1px solid var(--rm-line);
}
html body .st2 .st2-nav::-webkit-scrollbar { display: none; }
/* !important sul colore: style.css colora ogni link di <main> con un selettore da otto classi. */
html body .st2 .st2-nav a {
    flex: none; padding: 7px 14px; border-radius: 999px;
    font-size: .9rem; font-weight: 600; text-decoration: none;
    color: var(--rm-muted, inherit) !important;
}
html body .st2 .st2-nav a:hover, html body .st2 .st2-nav a:focus-visible { color: var(--rm-ink, inherit) !important; background: var(--rm-surface); }
html body .st2 .st2-solo-tel { display: none; }
@media (max-width: 991px) { html body .st2 .st2-solo-tel { display: inline-block; } }

/* ---- la griglia: contenuto e pronostico */
html body .st2 .st2-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 991px) { html body .st2 .st2-griglia { grid-template-columns: minmax(0, 1fr); } }
html body .st2 .st2-lato-in { position: sticky; top: 64px; display: grid; gap: 16px; }
@media (max-width: 991px) { html body .st2 .st2-lato-in { position: static; } }
html body .st2 .st2-sez { scroll-margin-top: 64px; margin: 0 0 32px; }
html body .st2 .st2-h { font-size: var(--rm-h2, 1.4rem); margin: 0 0 14px; }

/* ---- ADESSO: ritardo a sinistra, posizione e prossima fermata a destra */
html body .st2 .st2-adesso {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0;
    border: 1px solid var(--rm-line); border-radius: var(--r-lg, 14px);
    background: var(--rm-surface); overflow: hidden;
}
@media (max-width: 767px) { html body .st2 .st2-adesso { grid-template-columns: minmax(0, 1fr); } }
html body .st2 .st2-ora, html body .st2 .st2-dove { padding: 18px 20px; min-width: 0; }
html body .st2 .st2-dove { border-left: 1px solid var(--rm-line); display: grid; gap: 14px; align-content: start; }
@media (max-width: 767px) { html body .st2 .st2-dove { border-left: 0; border-top: 1px solid var(--rm-line); } }
html body .st2 .st2-ora .detail-panel { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
html body .st2 .st2-ora .tmon-hist, html body .st2 .st2-ora .rm-sample-note { font-size: .86rem; margin: 10px 0 0; }

/* la barra «dove si trova» dentro il riquadro: niente cornice sua */
html body .st2 .st2-dove .bl-viaggio-ora { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* prossima fermata e arrivo: due celle compatte, non due pannelli con titolo enorme */
html body .st2 .st2-dove .bl-next-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
html body .st2 .st2-dove .bl-next-wrap.bl-one { grid-template-columns: 1fr; }
@media (max-width: 420px) { html body .st2 .st2-dove .bl-next-wrap { grid-template-columns: 1fr; } }
html body .st2 .st2-dove .bl-next-wrap .rm-panel { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--rm-bg, transparent); border: 1px solid var(--rm-line); box-shadow: none; }
html body .st2 .st2-dove .bl-next-wrap .rm-sec-head { margin: 0 0 4px; padding: 0; border: 0; }
html body .st2 .st2-dove .bl-next-wrap .rm-sec-head h2 {
    font: 700 .72rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: var(--rm-muted, inherit); margin: 0;
}
html body .st2 .st2-dove .bl-next-wrap .rm-sec-head h2::after, html body .st2 .st2-dove .bl-next-wrap .rm-sec-head::after { display: none; }
html body .st2 .st2-dove .bl-next-name { font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
html body .st2 .st2-dove .bl-next-row { gap: 14px; }
html body .st2 .st2-dove .bl-next-big { font-size: 1.5rem; }
html body .st2 .st2-dove .bl-next-big.sm { font-size: 1.1rem; }
html body .st2 .st2-dove .rm-sec-foot { font-size: .8rem; margin: 8px 0 0; line-height: 1.45; }

/* ---- IL PERCORSO: mappa ed elenco affiancati */
html body .st2 .st2-percorso-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
@media (max-width: 991px) { html body .st2 .st2-percorso-griglia { grid-template-columns: minmax(0, 1fr); } }
html body .st2 .st2-mappa { position: sticky; top: 64px; }
@media (max-width: 991px) { html body .st2 .st2-mappa { position: static; } }
html body .st2 .st2-mappa .rm-panel { margin: 0; }
html body .st2 .st2-mappa .rm-sec-head h2, html body .st2 .st2-fermate .rm-sec-head h2 { font-size: var(--rm-h3, 1.1rem); }
html body .st2 .st2-fermate .rm-stops-wrap { margin: 0; }
html body .st2 .st2-mappa svg { max-height: 70vh; }

/* ---- le sezioni sotto: stesso respiro */
html body .st2 #di-solito > .data-panel, html body .st2 #storico > .data-panel { margin-top: 0 !important; }

html:has(.st2) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.st2) { scroll-behavior: auto; } }

/* ---- RITOCCHI dopo la prima foto (08/10/2026) */
/* L'etichetta delle due celle: la veste di stazione ingrandisce ogni h2 di
   .rm-sec-head con un selettore piu' pesante; qui serve un'etichetta. */
html body .st2 .st2-dove .bl-next-wrap .rm-sec-head h2 {
    font-size: .72rem !important; letter-spacing: .12em !important; line-height: 1.2 !important;
    font-family: system-ui, sans-serif !important; padding: 0 !important; border: 0 !important;
}
/* Il percorso ha gia' il titolo della sezione: quello del pannello mappa si toglie, la nota resta. */
html body .st2 .st2-mappa .rm-sec-head h2 { display: none; }
html body .st2 .st2-mappa .rm-sec-head { justify-content: flex-start; margin-bottom: 8px; }
html body .st2 .st2-fermate .rm-sec-head h2 { font-size: var(--rm-h3, 1.1rem) !important; }
/* «Oggi in tempo reale» su una riga; l'ora dell'aggiornamento va sotto se non ci sta. */
html body .st2 .st2-ora .tmon-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
html body .st2 .st2-ora .today-label { white-space: nowrap; }
/* Il riquadro del ritardo si porta dietro margine e cornice della scheda
   classica: dentro «Adesso» la cornice c'e' gia', 34px di vuoto in alto. */
html body .st2 .st2-ora .today-status { margin: 0; padding: 0; border: 0; background: none; }
/* Sul telefono le cinque voci non stanno: la sfumatura a destra dice che si scorre. */
@media (max-width: 991px) {
    html body .st2 .st2-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
}

/* ---- L'ORARIO UFFICIALE nella testata (08/10/2026, app/gtfs_orari.php) */
html body .st2 .rm-th-cal { margin: 8px 0 0; font-size: .86rem; line-height: 1.6; color: var(--rm-muted); }
html body .st2 .rm-th-cal-tag { margin-right: 6px; }
html body .st2 .rm-th-cal strong { color: var(--rm-ink); }
html body .st2 .rm-th-cal-tag {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .64rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rm-line); color: var(--rm-brand);
}
html body .st2 .rm-th-cal .rm-th-cal-no { color: var(--rm-amber); }