/* Componenti condivisi — Vexto light (DIRECTION §4). Misure in em. */

/* fix1 decisione 5 (P7): toast, banner notifica e barra offline nascono SOTTO la pillola stato / navbar
   (navbar = safe-top + 3.5em), mai sopra i controlli fissi. Token risolto dove si usa (em dell'elemento). */
:root { --bar-top: calc(env(safe-area-inset-top, 0px) + 3.5em); --toast-top: var(--bar-top); }
/* #app ridichiara --toast-top: così segue --bar-top quando core/net.js lo sposta sotto un banner fisso della schermata */
#app { --toast-top: var(--bar-top); }
/* barra offline accesa (44–48 px): toast e banner notifica scendono sotto di lei (Gestalt prossimità: 8 px tra i due) */
#app:has(> .offline-banner.is-on) { --toast-top: calc(var(--bar-top) + 3.5em); }

/* ---------- Card ---------- */
.card {
  display: block;
  width: 100%;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 1.125em;
  color: inherit;
  position: relative;
  transition: transform var(--d-press-out) var(--ease-jump), background var(--d-press-out);
}
.card--sm { border-radius: var(--r-card-sm); padding: 1em; }
.card--press { cursor: pointer; }
.card--press.is-pressed { transform: scale(0.97); transition-duration: var(--d-press-in); background: var(--card-2); }
.card--ink { background: var(--ink-card); color: var(--ink-fg); }
.card--ink .muted, .card--ink .t-label { color: var(--ink-muted); }
.card--ink .hr-dash, .card--ink .row--dashed { border-color: var(--ink-line); }
.card__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75em; margin-bottom: 0.75em; }
.card__title { font-size: 0.9375em; font-weight: 400; }
.card__sub { font-size: 0.75em; color: var(--muted); margin-top: 0.125em; }
.card__arrow { color: var(--muted); display: inline-flex; margin-top: 0.1em; }
.card--glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(32px) saturate(1.25);
  backdrop-filter: blur(32px) saturate(1.25);
  border: 1px solid var(--glass-border);
  box-shadow: inset 1px 0 0 rgba(0, 120, 255, 0.22), inset -1px 0 0 rgba(243, 148, 68, 0.22), 0 10px 30px rgba(0, 0, 0, 0.08);
  transform-style: preserve-3d;
  --tx: 0deg; --ty: 0deg; --gx: 50%;
  transform: perspective(40em) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform 0.4s var(--ease-osmo);
  overflow: hidden;
}
.card--glass::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
  transform: translateX(calc(var(--gx) - 50%));
  transition: transform 0.4s var(--ease-osmo);
}
.card--glass.is-tilting { transition: transform 0.08s linear; }
.card--glass.is-tilting::after { transition: transform 0.08s linear; }
html[data-theme-status="dark"] .card--glass::after { background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%); }

/* ---------- Titolo due toni (Vexto 03/08/15) ---------- */
.t2 { display: flex; flex-direction: column; align-items: flex-start; font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; }
.t2--large { font-size: 2em; }
.t2--hero { font-size: 2.5em; }
.t2--md { font-size: 1.5em; }
.t2--sm { font-size: 1.25em; }
.t2__line { display: inline-flex; align-items: stretch; position: relative; }
.t2__line--dim { color: var(--muted); }
.t2__line--last { color: var(--fg); background: var(--band); margin-left: -0.375em; padding-left: 0.375em; padding-right: 0.5em; border-radius: 0.125em; }
.t2__bar { width: 1px; background: var(--accent); margin-left: 0.25em; align-self: stretch; }
.t2__text { white-space: pre-wrap; }

/* ---------- Header sezione (Vexto 07/13) ---------- */
.section-hd { display: flex; align-items: center; gap: 0.75em; margin: 1.5em 0 0.75em; }
.section-hd__label { font-size: 0.9375em; font-weight: 400; white-space: nowrap; }
.section-hd__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--fg) 0 2.5em, transparent 2.5em 2.75em, transparent 0) , repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px); background-size: 100% 1px; }
.section-hd--accent .section-hd__rule { background: linear-gradient(90deg, var(--accent) 0 2.5em, transparent 2.5em 2.75em, transparent 0), repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px); }
.section-hd__action { display: inline-flex; align-items: center; gap: 0.25em; color: var(--muted); font-size: 0.8125em; min-width: 2.75em; min-height: 2.75em; justify-content: center; border-radius: 999px; margin: -0.75em -0.5em -0.75em 0; padding: 0 0.5em; transition: transform var(--d-press-out) var(--ease-jump); }
.section-hd__action.is-pressed { transform: scale(0.92); }

/* ---------- Numeri ---------- */
.num { display: inline-flex; align-items: baseline; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.num--hero { font-size: 3.5em; letter-spacing: -0.03em; }
.num--kpi { font-size: 2.5em; }
.num--md { font-size: 1.75em; }
.num--sm { font-size: 1.25em; letter-spacing: 0; }
.num__sec { color: var(--muted); }
.num__unit { font-size: 0.4em; color: var(--muted); margin-left: 0.3em; letter-spacing: 0; font-weight: 400; }
.num--hero .num__unit { font-size: 0.45em; }

/* ---------- Pillole ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.3em; height: 1.625em; padding: 0 0.625em; border-radius: 999px; font-size: 0.75em; font-weight: 400; white-space: nowrap; line-height: 1; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--late { background: var(--accent-soft); color: var(--accent-text); }
.pill--cancel { background: var(--bad-soft); color: var(--bad); text-decoration: none; }
.pill--outline { background: transparent; border: 1px solid var(--line); }
.pill--outline.pill--ok { color: var(--ok); } .pill--outline.pill--late { color: var(--accent-text); }
.pill--neutral { background: var(--card-2); color: var(--muted); }
/* fix1: «da orario» (nessun dato GTFS-RT, mai il verde «in orario») e «ultima posizione N min fa» (dato vecchio).
   Grigio, filo sottile, orologio; vecchio = filo tratteggiato come l'anello dei mezzi vecchi in mappa (Gestalt
   somiglianza: stesso segno, stesso significato). Nessun colore: l'arancio resta per il ritardo vero. */
.pill--sched, .pill--stale { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.pill--stale { border-style: dashed; border-color: var(--muted-2); }
.pill .icon { width: 0.9em; height: 0.9em; }
.pill--offset { height: 1.875em; padding: 0 0.75em; background: var(--card-2); color: var(--muted); font-size: 0.75em; }
.pill--offset.is-late { color: var(--accent-text); }
html[data-theme-status="dark"] .pill--offset.is-late { box-shadow: 0 0 12px rgba(243, 148, 68, 0.35); }

/* ---------- Badge linea «Tracking pod» ---------- */
.badge-line { display: inline-flex; align-items: center; height: 1.75em; padding: 0 0.625em 0 0; border-radius: 999px; background: var(--card-2); font-size: 0.8125em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; gap: 0.4em; }
.badge-line__type { width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--fg); color: var(--bg); display: inline-grid; place-items: center; font-size: 0.75em; font-weight: 500; }
.badge-line--train .badge-line__type { background: var(--muted); }
.badge-line--lift .badge-line__type { background: var(--accent); color: var(--fg); }
.badge-line--sm { height: 1.5em; font-size: 0.75em; }
.badge-line--sm .badge-line__type { width: 1.5em; height: 1.5em; }
.card--ink .badge-line { background: var(--ink-line); }
.card--ink .badge-line__type { background: var(--ink-fg); color: var(--ink); }

/* ---------- Chip con icona (Vexto 03/23) ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.4em; height: 2.75em; min-height: 2.75em; padding: 0 0.875em; border-radius: 999px; background: var(--card-2); font-size: 0.8125em; color: var(--fg); white-space: nowrap; transition: transform var(--d-press-out) var(--ease-jump), background var(--d-press-out); border: 1px solid transparent; }
.chip--on { background: var(--fg); color: var(--bg); }
.chip--glass { background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-color: var(--glass-border); }
.chip--outline { background: transparent; border-color: var(--line); }
.chip.is-pressed { transform: scale(0.95); transition-duration: var(--d-press-in); }
.chip__chev { color: var(--muted); }
.chip-row { display: flex; gap: 0.5em; overflow-x: auto; scrollbar-width: none; padding: 0.25em 0; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); touch-action: pan-x; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { flex: none; }

/* ---------- Bottoni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3.25em; padding: 0 1.5em; border-radius: 999px; font-size: 1em; font-weight: 500; white-space: nowrap; transition: transform var(--d-press-out) var(--ease-jump), background var(--d-press-out), opacity 0.2s; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--secondary { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn--accent { background: var(--accent); color: var(--fg); }
.btn--ink { background: var(--ink-fg); color: var(--ink); }
.btn--sm { min-height: 2.75em; padding: 0 1em; font-size: 0.875em; }
.btn--block { width: 100%; }
.btn.is-pressed { transform: scale(0.97); transition-duration: var(--d-press-in); }
.btn:disabled { opacity: 0.4; }
.btn--icon { width: 2.75em; min-width: 2.75em; height: 2.75em; min-height: 2.75em; padding: 0; border-radius: 50%; background: var(--card-2); color: var(--fg); position: relative; }
.btn--icon.btn--ghost { background: transparent; }
.btn--icon.btn--glass { background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); }
.btn--icon .icon { width: 1.25em; height: 1.25em; }
.btn__badge { position: absolute; top: -0.125em; right: -0.125em; min-width: 1.125em; height: 1.125em; padding: 0 0.3em; border-radius: 999px; background: var(--bad-icon); color: #fff; font-size: 0.625em; font-weight: 500; display: grid; place-items: center; line-height: 1; }

/* ---------- Righe e liste ---------- */
.row { display: flex; align-items: center; gap: 0.75em; padding: 0.875em 0; }
.row--dashed + .row--dashed { border-top: 1px dashed var(--line); }
.row__grow { flex: 1; min-width: 0; }
.row__title { font-size: 1em; }
.row__sub { font-size: 0.75em; color: var(--muted); margin-top: 0.125em; }
.row--press { width: 100%; text-align: left; transition: transform var(--d-press-out) var(--ease-jump), background var(--d-press-out); border-radius: 0.75em; }
.row--press.is-pressed { transform: scale(0.98); background: var(--card-2); transition-duration: var(--d-press-in); }
.list { display: flex; flex-direction: column; }
.list--dashed > * + * { border-top: 1px dashed var(--line); }

/* tile KPI doppio (Vexto 25) */
.tile { background: var(--card); border-radius: var(--r-card); padding: 1em 1.125em; min-height: 6em; display: flex; flex-direction: column; justify-content: space-between; }
.tile__top { display: flex; align-items: center; gap: 0.5em; font-size: 0.8125em; }
.tile__top .icon { width: 1.125em; height: 1.125em; }
.tile__top--ok .icon { color: var(--ok-icon); fill: var(--ok-icon); stroke: var(--bg); }
.tile__top--bad .icon { color: var(--bad-icon); fill: var(--bad-icon); stroke: var(--bad-icon); }
.tile__num { align-self: flex-end; }
.tile-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625em; }

/* ---------- Pulsante stato premuto generico ---------- */
[data-press] { -webkit-user-select: none; user-select: none; }

/* ---------- Skeleton (meccanica Osmo skeleton-loader) ---------- */
.sk { display: flex; flex-direction: column; gap: 0.75em; padding: 0.25em 0; --color-skeleton-base: var(--card-2); --color-skeleton-pulse: var(--line); }
.sk__row { height: 1em; border-radius: 0.375em; background: var(--color-skeleton-base); animation: sk-pulse 1.2s ease-in-out infinite; }
.sk--tall .sk__row { height: 2.5em; }
@keyframes sk-pulse { 50% { background: var(--color-skeleton-pulse); } }

/* ---------- Reveal (Osmo elements-reveal, IO) ---------- */
[data-reveal] { opacity: 0; transform: translateY(0.75em) scale(0.96); transition: opacity 0.35s var(--ease-osmo), transform 0.35s var(--ease-jump); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
html[data-reduce-motion="true"] [data-reveal] { transition: opacity 0.15s linear; transform: none; }

/* ---------- Sheet con detent ---------- */
.sheet { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 40; background: var(--card); border-radius: 1.5em 1.5em 0 0; box-shadow: var(--shadow-float); transform: translate3d(0, 100%, 0); display: flex; flex-direction: column; touch-action: none; will-change: transform; }
.sheet--glass { background: var(--glass-strong); -webkit-backdrop-filter: blur(32px) saturate(1.25); backdrop-filter: blur(32px) saturate(1.25); border: 1px solid var(--glass-border); border-bottom: 0; }
.sheet__handle { display: flex; justify-content: center; align-items: center; height: 2.5em; min-height: 2.5em; width: 100%; }
.sheet__grip { width: 2.25em; height: 0.3125em; border-radius: 999px; background: var(--line); }
.sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--gutter) calc(var(--tabbar-space) + 1em); touch-action: pan-y; scrollbar-width: none; }
.sheet__body::-webkit-scrollbar { display: none; }
.sheet[data-detent="0"] .sheet__body { overflow: hidden; }
.sheet__title { font-size: 1.25em; font-weight: 400; margin-bottom: 0.5em; }
.sheet__backdrop { position: absolute; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.28); }

/* ---------- Modal (Osmo basic-modal-setup, stile nostro) ---------- */
.modal { z-index: 100; opacity: 0; pointer-events: none; visibility: hidden; justify-content: center; align-items: flex-end; padding: 1em; padding-bottom: calc(1em + var(--safe-bottom)); display: flex; position: absolute; inset: 0; overflow: hidden; transition: all 0.2s linear; }
.modal[data-modal-group-status="active"] { opacity: 1; visibility: visible; }
.modal__dark { opacity: .5; pointer-events: auto; cursor: pointer; background-color: #131313; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.modal__card { pointer-events: auto; background-color: var(--card); border-radius: 1.5em; width: 100%; max-height: 100%; padding: .75em; display: none; position: relative; }
.modal__card[data-modal-status="active"] { display: flex; }
.modal__scroll { background-color: var(--card-2); border-radius: 1em; flex-flow: column; width: 100%; max-height: 100%; display: flex; position: relative; overflow: auto; }
.modal__content { flex-flow: column; gap: 1em; padding: 1.25em; display: flex; }
.modal__h2 { font-size: 1.25em; font-weight: 400; padding-right: 2.5em; }
.modal__btn-close { background-color: var(--card); border-radius: 50%; justify-content: center; align-items: center; width: 2.75em; height: 2.75em; display: flex; position: absolute; top: 1.25em; right: 1.25em; }

/* ---------- Accordion (Osmo accordion-css-animation, verbatim nelle transizioni) ---------- */
.accordion-css { position: relative; }
.accordion-css__list { display: flex; flex-flow: column; gap: .5em; }
.accordion-css__item { background-color: var(--card-2); border-radius: 1em; list-style: none; }
.accordion-css__item-top { cursor: pointer; justify-content: space-between; align-items: center; gap: 1em; padding: 0.875em 0.875em 0.875em 1.125em; display: flex; width: 100%; min-height: 2.75em; }
.accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); grid-template-rows: 0fr; display: grid; position: relative; overflow: hidden; }
[data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; }
.accordion-css__item-bottom-wrap { flex-flow: column; height: 100000%; display: flex; position: relative; overflow: hidden; }
.accordion-css__item-bottom-content { padding-bottom: 1.125em; padding-left: 1.125em; padding-right: 1.125em; }
.accordion-css__item-h3 { font-size: 0.9375em; font-weight: 400; line-height: 1.3; flex: 1; }
.accordion-css__meta { font-size: 0.75em; color: var(--muted); }
.accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); background-color: var(--card); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 2em; height: 2em; display: flex; transform: rotate(180deg); }
[data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); }
.accordion-css__item-icon-svg { width: 1em; height: 1em; }

/* ---------- Toggle switch (Osmo toggle-switch) ---------- */
.toggle-switch { --toggle-count: 2; --toggle-padding: 0.25em; width: 100%; padding: var(--toggle-padding); grid-template-columns: repeat(var(--toggle-count, 2), 1fr); background-color: var(--card-2); border-radius: 999px; display: inline-grid; position: relative; }
.toggle-switch__bg { position: absolute; top: var(--toggle-padding); bottom: var(--toggle-padding); left: var(--toggle-padding); width: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2)); transform: translateX(calc(var(--toggle-active, 0) * 100%)); background-color: var(--fg); border-radius: 999px; transition: transform 0.5s cubic-bezier(.625, .05, 0, 1); }
.toggle-switch__btn { z-index: 1; gap: .4em; color: var(--muted); background-color: transparent; border: none; justify-content: center; align-items: center; min-height: 2.5em; padding: 0.5em 0.75em; transition: color .2s; display: flex; position: relative; font-size: 0.875em; border-radius: 999px; }
[data-toggle-active] { color: var(--bg); }

/* interruttore on/off */
.switch { width: 3.25em; height: 2em; box-sizing: content-box; padding: 0.375em 0; background-clip: content-box; border-radius: 999px; background: var(--line); position: relative; transition: background 0.3s; flex: none; }
.switch[aria-checked="true"] { background: var(--ok-icon); }
.switch__knob { position: absolute; top: 0.1875em; left: 0.1875em; width: 1.625em; height: 1.625em; border-radius: 50%; background: #fff; transition: transform 0.35s var(--ease-jump); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(1.25em); }
.switch-row { min-height: 3.25em; }
.switch-row__label { font-size: 1em; }

/* ---------- Toast ---------- */
/* colonna dei messaggi di sistema: sotto la pillola stato, allineata a lei e alla barra offline (Gestalt continuità,
   P8 il sistema parla da un posto solo); lascia libera la colonna dei controlli a destra (3.5em, P7) */
.toast-host { position: absolute; top: var(--toast-top); left: max(var(--gutter), var(--safe-left)); width: min(24em, calc(100% - 2 * var(--gutter) - 3.5em)); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; z-index: 90; pointer-events: none; transition: top 0.35s var(--ease-osmo); }
.toast { display: inline-flex; align-items: center; gap: 0.5em; max-width: 100%; padding: 0.625em 1em; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 0.875em; line-height: 1.3; opacity: 0; transform: translateY(-0.75em) scale(0.96); transition: opacity 0.25s, transform 0.35s var(--ease-jump); }
.toast.is-on { opacity: 1; transform: none; }
.toast__text { min-width: 0; }
/* con azione: bottone contornato dentro il toast (P12). Pillola 28 px, area di tocco 44 (margini negativi: il toast
   non cresce). Il toast con azione riceve i tocchi, gli altri no (host pointer-events none). */
.toast--act { pointer-events: auto; padding-right: 0.375em; }
.toast__act { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(2.75em / 0.875); min-height: calc(2.75em / 0.875); margin: calc(-0.625em - 0.25em) 0; padding: 0 0.25em; color: inherit; font: inherit; transition: transform var(--d-press-out) var(--ease-jump); }
.toast__act.is-pressed { transform: scale(0.94); transition-duration: var(--d-press-in); }
.toast__pill { display: inline-flex; align-items: center; height: calc(1.75em / 0.875); padding: 0 0.875em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent); font-weight: 500; white-space: nowrap; }

/* ---------- Barra di stato dei dati (ui.stateBar, fix1 decisione 2) ----------
   Vetro chiaro come le pillole (DIRECTION-V2 §4), 44 px (compact 36), icona 16, testo 13, pillola contornata a
   destra 36 px (compact 28) con area di tocco 44. Gestalt prossimità: 8 px dentro la riga. Arancio solo su «vecchio». */
.state-bar { display: flex; align-items: center; gap: 0.5em; width: 100%; min-height: 2.75em; padding: 0 0.875em; border-radius: 1.375em; background: var(--glass-pill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--hairline-in), 0 0 0 1px var(--hairline-out), var(--shadow-pill); color: var(--fg); text-align: left; }
.state-bar--act { padding-right: 0.25em; }
.state-bar__icon { flex: none; display: inline-flex; color: var(--fg); }
.state-bar__icon .icon { width: 1em; height: 1em; }
.state-bar__text { flex: 1; min-width: 0; padding: 0.375em 0; font-size: 0.8125em; line-height: 1.25; }
.state-bar__a, .state-bar__b { display: inline-block; max-width: 100%; }
.state-bar__a { font-weight: 500; } /* gerarchia col peso, non col grigio: sopra la mappa satellitare il grigio su vetro scende sotto AA */
.state-bar__act { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75em; min-height: 2.75em; padding: 0 0.25em; color: var(--fg); transition: transform var(--d-press-out) var(--ease-jump), opacity 0.2s; }
.state-bar__act.is-pressed { transform: scale(0.95); transition-duration: var(--d-press-in); }
.state-bar__act[aria-busy="true"] { opacity: 0.45; }
.state-bar__pill { display: inline-flex; align-items: center; height: calc(2.25em / 0.8125); padding: 0 1em; border-radius: 999px; border: 1px solid var(--line); font-size: 0.8125em; font-weight: 500; white-space: nowrap; }
.state-bar--compact { min-height: 2.25em; border-radius: 1.125em; }
.state-bar--compact .state-bar__text { padding: 0.25em 0; }
.state-bar--compact .state-bar__act { margin: -0.25em 0; }
.state-bar--compact .state-bar__pill { height: calc(1.75em / 0.8125); }
/* dentro un foglio (su carta, non su mappa): stessa anatomia senza vetro né ombra */
.state-bar--flat { background: var(--card-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--hairline-out); }
.state-bar--scheduled .state-bar__icon, .state-bar--fake .state-bar__icon { color: var(--muted); }
.state-bar--stale .state-bar__icon { color: var(--accent-text); }
.state-bar--online .state-bar__icon { color: var(--ok); }

/* ---------- Barra offline globale (core/net.js): una ui.stateBar sotto la pillola stato / navbar ----------
   In alto a sinistra, lascia libera la colonna dei controlli a destra (3.5em). Entra con jump, esce in dissolvenza. */
.offline-banner.state-bar { position: absolute; top: var(--bar-top); left: max(var(--gutter), var(--safe-left)); z-index: 80; width: max-content; max-width: min(24em, calc(100% - 2 * var(--gutter) - 3.5em)); opacity: 0; visibility: hidden; transform: translateY(-0.5em) scale(0.97); transform-origin: left center; transition: opacity 0.2s, transform 0.35s var(--ease-jump), visibility 0s linear 0.35s; }
.offline-banner.state-bar.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.35s var(--ease-jump), visibility 0s; }
html[data-reduce-motion="true"] .offline-banner.state-bar { transform: none; }
/* una schermata che mostra la SUA barra offline (stesso componente, dove il suo layout la vuole) zittisce quella
   globale: mai due barre con lo stesso messaggio (P8) */
#app:has(.screen:not([aria-hidden="true"]) .state-bar--offline) > .offline-banner.state-bar { opacity: 0; visibility: hidden; }
/* desktop/tablet (html.is-dock, core/desk.js): la colonna sinistra è il pannello agganciato. Barra offline e toast
   stanno al centro dell'area mappa, sotto la barra in alto (desk.css porta il toast a --dock-top); con la barra
   accesa il toast scende sotto di lei. A 390 queste regole non valgono. */
html.is-dock .offline-banner.state-bar { top: var(--dock-top); left: calc(var(--dock-map-l) + (100% - var(--dock-map-l) - var(--dock-map-r)) / 2); translate: -50% 0; transform-origin: center top; max-width: min(28em, calc(100% - var(--dock-map-l) - var(--dock-map-r) - 2 * var(--dock-gap))); }
html.is-dock .toast-host { left: var(--dock-map-l); right: var(--dock-map-r); width: auto; align-items: center; }
html.is-dock #app:has(> .offline-banner.is-on) .toast-host { top: calc(var(--dock-top) + 3.5em); }

/* ---------- Tab bar flottante (Vexto 52 + HIG) ---------- */
.tabbar { position: absolute; left: 50%; bottom: calc(1em + var(--safe-bottom)); transform: translateX(-50%); z-index: 50; display: flex; gap: 0.25em; padding: 0.375em; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(32px) saturate(1.25); backdrop-filter: blur(32px) saturate(1.25); border: 1px solid var(--glass-border); box-shadow: var(--shadow-float); transition: transform 0.35s var(--ease-osmo), opacity 0.25s; --active-i: 0; }
.tabbar.is-hidden { transform: translate(-50%, 150%); opacity: 0; pointer-events: none; }
.tabbar__active { position: absolute; top: 0.375em; left: 0.375em; width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--fg); transform: translateX(calc(var(--active-i) * 3em)); transition: transform 0.35s var(--ease-jump); }
.tabbar__btn { position: relative; width: 2.75em; height: 2.75em; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color 0.25s, transform var(--d-press-out) var(--ease-jump); }
.tabbar__btn .icon { width: 1.25em; height: 1.25em; transition: transform 0.35s var(--ease-jump); }
.tabbar__btn--active { color: var(--bg); }
.tabbar__btn--active .icon { transform: scale(1.08); }
.tabbar__btn.is-pressed { transform: scale(0.9); }
.tabbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Nav bar (viste pushate) e header radice ---------- */
.navbar { display: grid; grid-template-columns: 2.75em 1fr 2.75em; align-items: center; gap: 0.5em; padding: calc(var(--safe-top) + 0.5em) var(--gutter) 0.5em; min-height: calc(var(--navbar-h) + var(--safe-top)); }
.navbar__back { width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; transition: transform var(--d-press-out) var(--ease-jump); }
.navbar__back.is-pressed { transform: scale(0.9); }
.navbar__title { text-align: center; font-size: 1.25em; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar__spacer { width: 2.75em; }
.screen--ink .navbar__back { background: var(--ink-card); color: var(--ink-fg); }
.header-root { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: calc(var(--safe-top) + 0.75em) 0 0.75em; }
.header-root__actions { display: flex; gap: 0.5em; }
.logo { width: 1.75em; height: 1.75em; color: var(--fg); }
.large-title { position: sticky; top: 0; z-index: 5; }

/* ---------- Timeline a tacche (Vexto 03/15/16) ---------- */
.timeline { position: relative; padding: 1.25em 0 0.25em; touch-action: none; -webkit-user-select: none; user-select: none; }
.timeline__track { position: relative; height: 1.5em; }
.timeline__ticks { position: absolute; inset: 0.25em 0; display: flex; justify-content: space-between; align-items: center; }
.timeline__ticks i { display: block; width: 1px; height: 0.5em; background: var(--muted-2); opacity: 0.7; }
.timeline__ticks i.is-major { height: 0.875em; }
.timeline__fill { position: absolute; left: 0; top: 50%; height: 1px; width: 0; background: var(--fg); transform: translateY(-50%); }
.timeline__node { position: absolute; top: 50%; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--card); border: 1.5px solid var(--fg); transform: translate(-50%, -50%); }
.timeline__node--end { width: 0.625em; height: 0.625em; background: var(--fg); }
.timeline__cursor { position: absolute; top: 50%; left: 0; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; transform: translate(-50%, -50%); transition: left 0.25s linear; }
.timeline.is-scrubbing .timeline__cursor { transition: none; transform: translate(-50%, -50%) scale(1.15); }
.timeline__here { position: absolute; top: -1.25em; transform: translateX(-50%); font-size: 0.6875em; color: var(--accent-text); white-space: nowrap; padding: 0.125em 0.5em; border-radius: 999px; background: var(--accent-soft); transition: left 0.25s linear; }
.timeline__labels { display: flex; justify-content: space-between; margin-top: 0.375em; font-size: 0.6875em; color: var(--muted); }

/* ---------- Grafici ---------- */
.seismo { width: 100%; height: auto; display: block; overflow: visible; }
.seismo__line { fill: none; stroke: var(--fg); stroke-width: 1; stroke-linejoin: round; }
.seismo__accent { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.seismo__band { fill: var(--band); }
.seismo__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.seismo__ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.seismo__dot { fill: var(--card); stroke: var(--fg); stroke-width: 1.5; }
.seismo__ly, .seismo__lx { font-size: 9px; fill: var(--muted-2); font-family: var(--font); }
.slant { width: 100%; height: auto; display: block; }
.slant__bar { stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; }
.slant__bar.is-active { stroke: var(--accent); }
.slant__bar--ghost { stroke: var(--accent); opacity: 0.55; stroke-width: 1.5; }
.slant__band { fill: var(--band); }
.slant__lx { font-size: 9px; fill: var(--muted-2); font-family: var(--font); }
.slant__lx.is-active { fill: var(--accent-text); }
.slant__pill rect { fill: var(--glass-strong); stroke: var(--glass-border); }
.slant__pill text { font-size: 9px; fill: var(--fg); font-family: var(--font); }
.busart { width: 100%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; color: var(--fg); }
.minimap { width: 100%; height: auto; display: block; border-radius: 1em; background: var(--card-2); }
.minimap__grid { stroke: var(--line); stroke-width: 0.6; opacity: 0.8; }
.minimap__route { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }
.minimap__route--todo { stroke-dasharray: 3 4; stroke: var(--muted); }
.minimap__pin { fill: var(--fg); }
.minimap__pin-halo { fill: var(--accent); opacity: 0.2; }
.card--ink .minimap { background: var(--ink-line); } .card--ink .minimap__grid { stroke: #3a3a3a; } .card--ink .minimap__route { stroke: #fff; }
.qr rect { fill: currentColor; }

/* ---------- Date strip ---------- */
.date-strip { display: flex; gap: 0.375em; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; margin: 0 calc(-1 * var(--gutter)); padding: 0.25em var(--gutter); }
.date-strip::-webkit-scrollbar { display: none; }
.date-strip__day { flex: none; width: 2.75em; height: 3.5em; border-radius: 0.75em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125em; background: var(--card-2); transition: transform var(--d-press-out) var(--ease-jump), background 0.2s; }
.date-strip__day--on { background: var(--fg); color: var(--bg); }
.date-strip__day.is-pressed { transform: scale(0.94); }
.date-strip__num { font-size: 1.125em; font-weight: 300; line-height: 1; }
.date-strip__dow { font-size: 0.625em; opacity: 0.7; }

/* ---------- Avvisi (Vexto 10/14) ---------- */
.alert-card { background: var(--bad-soft); border-radius: var(--r-card); padding: 1em 1.125em; }
.alert-card--warn { background: var(--accent-soft); }
.alert-card--info { background: var(--card-2); }
.alert-card__hd { display: flex; align-items: flex-start; gap: 0.625em; }
.alert-card__badge { flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--bad-icon); color: #fff; font-size: 0.6875em; font-weight: 500; display: grid; place-items: center; margin-top: 0.2em; }
.alert-card--warn .alert-card__badge { background: var(--accent); color: var(--fg); }
.alert-card--info .alert-card__badge { background: var(--fg); color: var(--bg); }
.alert-card__title { font-size: 0.9375em; }
.alert-card__meta { font-size: 0.75em; color: var(--muted); margin-top: 0.125em; }
.station-list { margin: 0.75em 0 0 0.3em; border-left: 1px solid var(--line); padding-left: 0.875em; display: flex; flex-direction: column; gap: 0.5em; }
.station-list__name { font-size: 0.9375em; }
.station-list__sub { font-size: 0.75em; color: var(--muted); }
.recommend { display: flex; gap: 0.5em; align-items: flex-start; margin-top: 0.75em; font-size: 0.875em; }
.recommend .icon { color: var(--accent-text); margin-top: 0.1em; }

/* ---------- Placeholder (finché le foglie non arrivano) ---------- */
.placeholder { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: 0.75em; }

/* ---------- Veicolo in mappa / cerchio tratteggiato ---------- */
.dash-ring { border: 1px dashed var(--fg); border-radius: 50%; animation: ring-spin 12s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
html[data-reduce-motion="true"] .dash-ring { animation: none; }


/* ===== v2 (DIRECTION-V2 §3-4): schermate trasparenti sopra il mapstage, vetro Apple, azione primaria ===== */
.mapstage { position: absolute; inset: 0; z-index: 0; background: var(--bg); transition: opacity 0.35s var(--ease-osmo), filter 0.4s; }
.mapstage.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
#app > .stage { z-index: 1; } /* resta absolute/inset 0 da base.css: sopra il mapstage */
.screen--map { background: transparent; pointer-events: none; will-change: auto; } /* will-change rompe il backdrop-filter del vetro sopra la mappa */
.screen--map > * { pointer-events: auto; }
.screen--map .screen__scroll { pointer-events: none; }
.screen--map .screen__scroll > * { pointer-events: auto; }
/* Gestalt figura/sfondo: la mappa è sfondo, il vetro è figura */
.glass { background: var(--glass-sheet); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--hairline-in), 0 0 0 1px var(--hairline-out), var(--shadow-pill); }
.sheet--glass { background: var(--glass-sheet); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--hairline-in), 0 0 0 1px var(--hairline-out), var(--shadow-sheet); border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
.pill-glass { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75em; padding: 0 1em; border-radius: 999px; background: var(--glass-pill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--hairline-in), 0 0 0 1px var(--hairline-out), var(--shadow-pill); color: var(--fg); font-size: 0.9375em; font-weight: 500; }
.circle-glass { width: 2.75em; height: 2.75em; border-radius: 50%; display: grid; place-items: center; background: var(--glass-pill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--hairline-in), 0 0 0 1px var(--hairline-out), var(--shadow-pill); color: var(--fg); }
/* Punto focale: una sola azione primaria per schermata */
.btn--primary { display: flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; min-height: 3.5em; padding: 0 1.25em; border-radius: 1em; background: var(--fg); color: var(--bg); font-size: 1.0625em; font-weight: 500; transition: transform var(--d-press-out) var(--ease-jump), opacity 0.2s; }
.btn--primary.is-pressed { transform: scale(0.97); }
.btn--primary .icon { width: 1.25em; height: 1.25em; }
.search-pill { display: flex; align-items: center; gap: 0.75em; width: 100%; min-height: 3.5em; padding: 0 1.125em; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 1.0625em; box-shadow: 0 0 0 1px var(--hairline-out), var(--shadow-pill); text-align: left; transition: transform var(--d-press-out) var(--ease-jump); }
.search-pill.is-pressed { transform: scale(0.98); }
.search-pill .icon { width: 1.375em; height: 1.375em; color: var(--fg); flex: none; }
.sheet__grip { width: 2.25em; height: 0.3125em; border-radius: 999px; background: var(--line); }

/* perf iPhone (owner 16/10 «meno laggh»): il vetro sopra la mappa WebGL si ri-sfoca a ogni frame della mappa;
   su touch raggio 14px invece di 24/32 (costo ~quadratico nel raggio) e un filo più opaco per lo stesso aspetto. */
@media (pointer: coarse) {
  .glass, .sheet--glass, .pill-glass { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
  .glass, .sheet--glass { background: color-mix(in srgb, var(--glass-sheet), var(--card) 22%); }
}

/* Osmo rotating-text (osmo/resources/rotating-text/style.css, struttura verbatim; la maschera di riga di SplitText
   = overflow-y: clip sullo span, una riga sola). Usato dal suggerimento della pillola «Dove vai?» (GATES-3 L1a). */
[data-rotating-words] { display: inline-block; position: relative; overflow-x: visible; overflow-y: clip; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rotating-text__inner { display: inline-block; }
.rotating-text__word { display: block; white-space: nowrap; position: absolute; top: 0; left: 0; }

/* barra «Installa» dopo l'arrivo da un QR alla fermata (core/qrbar.js): glass sopra la tab bar, chiudibile */
.qrbar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(1em + var(--safe-bottom)); z-index: 60; display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.375em 0.5em 0.875em; border-radius: 1.25em; background: var(--glass-strong); -webkit-backdrop-filter: blur(32px) saturate(1.25); backdrop-filter: blur(32px) saturate(1.25); border: 1px solid var(--glass-border); box-shadow: var(--shadow-float); transform: translateY(160%); opacity: 0; transition: transform 0.45s var(--ease-osmo), opacity 0.3s; }
.qrbar.is-raised { bottom: calc(var(--tabbar-h) + 1.75em + var(--safe-bottom)); } /* sopra la tab bar quando c'è */
.qrbar.is-in { transform: none; opacity: 1; }
.qrbar.is-out { transform: translateY(160%); opacity: 0; }
.qrbar__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.qrbar__txt b { font-weight: 500; font-size: 0.9375em; color: var(--fg); }
.qrbar__txt span { color: var(--muted); font-size: 0.8125em; }
.qrbar__btn { flex: 0 0 auto; min-height: 2.9375em; /* 44 px con font 0.9375em */ padding: 0 1em; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 500; font-size: 0.9375em; }
.qrbar__x { flex: 0 0 auto; width: 2.75em; height: 2.75em; display: grid; place-items: center; color: var(--muted); border-radius: 50%; }
.qrbar__x .icon { width: 1.125em; height: 1.125em; }