/* Passa il bus Live
   Il soggetto è il trasporto interurbano calabrese: ventisei aziende piccole,
   statali che serpeggiano fra Tirreno e Ionio, autostazioni di paese. La mappa
   è la pagina: il pannello resta una lastra scura che non le ruba la scena.
   Un solo accento, l'arancio del logo, riservato allo stato "vivo".
   I colori delle aziende possiedono tutto il resto. */
:root{
  --notte:#0B1418;        /* inchiostro di mare, fondo del pannello */
  --notte-2:#111E24;      /* superficie sollevata: righe, chip, campi */
  --notte-3:#18292F;      /* premuta, hover */
  --riga:#1F333B;         /* filo di separazione */
  --testo:#E9F0F1;
  --testo-2:#93A9B0;
  --testo-3:#63797F;
  --bergamotto:#FF9A2E;   /* l'unico accento, l'arancio del logo: vivo, attivo, a fuoco */
  --su-bergamotto:#1A0D00;
  --tardi:#FF6B6B;
  --presto:#79B4F5;
  --orario:#A8D96B;
  --velo:rgba(11,20,24,.86);
  --ombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --stretto:"Instrument Sans",system-ui,sans-serif;
  --largo-stretto:82%;   /* la larghezza stretta esce dall’asse wdth della stessa famiglia */
  --r:12px;  --r-s:8px;  --r-xs:4px;
  --pannello:404px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --notte:#FFFFFF; --notte-2:#F1F5F4; --notte-3:#E4EBE9; --riga:#D8E1E0;
  --testo:#0D1A1E; --testo-2:#52666B; --testo-3:#7E9096;
  --bergamotto:#D9640A; --su-bergamotto:#FFFFFF;
  --tardi:#C62828; --presto:#1A5FB4; --orario:#3F7A16;
  --velo:rgba(255,255,255,.9);
  --ombra:0 1px 2px rgba(13,26,30,.1), 0 8px 26px rgba(13,26,30,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--notte);color:var(--testo);font:400 15px/1.5 var(--font);font-optical-sizing:auto;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
/* Niente attesa di 300 ms per il doppio tocco sui comandi. */
button,input,label,.st,.row,.chip,.tab,.r{touch-action:manipulation}
h2,h3,.count{text-wrap:balance}
.note,.empty{text-wrap:pretty}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--bergamotto);outline-offset:2px;border-radius:2px}
b,strong{font-weight:700}
.tab-num{font-variant-numeric:tabular-nums}

#map{position:fixed;inset:0;background:#AAD3DF}
/* Il tema scuro conserva i colori della mappa e li abbassa, come fa PadoVia. */
#map.night .map-tiles{filter:brightness(.6) invert(1) contrast(3) hue-rotate(200deg) saturate(.3) brightness(.7)}
#map.night{background:#1B1B1B}

/* ---------- comandi sospesi sulla mappa: la mappa resta intera, il pannello
   compare solo quando si apre qualcosa */
/* il pallino del conteggio dice anche se il collegamento regge: quando qualcosa
   non va diventa rosso e accanto compare il motivo */
.live{display:none}
.stato-rete{position:fixed;left:14px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:1000;display:flex;align-items:center;gap:8px;padding:7px 13px;background:var(--notte);border:1px solid var(--tardi);border-radius:999px;box-shadow:var(--ombra);font-size:12.5px;font-weight:600;color:var(--tardi)}
.stato-rete i{width:7px;height:7px;border-radius:50%;background:var(--tardi);flex:none}
.conta .pallino.on{animation:battito 2.4s infinite}
.conta .pallino.err{background:var(--tardi);animation:none}
@keyframes battito{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bergamotto) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.tools{position:fixed;top:calc(13px + env(safe-area-inset-top,0px));right:14px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.tool{width:44px;height:44px;flex:none;border:1px solid var(--riga);border-radius:50%;background:var(--notte);color:var(--testo);box-shadow:var(--ombra);display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.tool:hover{background:var(--notte-2)}
.tool.on{color:var(--bergamotto)}
@media (prefers-reduced-motion: reduce){.tool{transition:none}}

/* la lente si allarga in campo di ricerca, e torna lente quando finisci */
.search{position:relative;display:flex;align-items:center;justify-content:flex-end}
.search input,.search .clear{display:none}
.search[data-open="true"]{width:min(340px,calc(100vw - 28px))}
.search[data-open="true"] #qopen{display:none}
.search[data-open="true"] input{display:block;width:100%;height:44px;padding:0 42px 0 16px;border:1px solid var(--riga);border-radius:999px;background:var(--notte);box-shadow:var(--ombra);font-size:15px;font-weight:500}
.search input::placeholder{color:var(--testo-2);font-weight:400}
.search input::-webkit-search-cancel-button{display:none}
.search[data-open="true"] .clear{display:flex;position:absolute;right:7px;width:30px;height:30px;border-radius:50%;background:var(--notte-2);color:var(--testo-2);font-size:19px;line-height:1;align-items:center;justify-content:center}
.search .clear:hover{background:var(--notte-3);color:var(--testo)}
.results{position:absolute;top:50px;right:0;width:min(340px,calc(100vw - 28px));background:var(--notte);border:1px solid var(--riga);border-radius:var(--r);box-shadow:var(--ombra);overflow:hidden auto;overscroll-behavior:contain;max-height:min(60vh,500px);text-align:left}
.results h3{margin:0;padding:11px 15px 5px;font-size:12.5px;font-weight:600;color:var(--testo-2)}
.results .r{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;width:100%;padding:9px 15px;text-align:left}
.results .r:hover,.results .r.active{background:var(--notte-2)}
.results .r .t{min-width:0}
.results .r .t div{font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .r .t small{display:block;color:var(--testo-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .r .n{font-size:12.5px;color:var(--testo-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.results .r .n b{color:var(--bergamotto);font-weight:600}
.results .empty{padding:15px}

/* quanti autobus ci sono adesso: un bottone, non un pannello sempre aperto */
.conta{position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1000;display:inline-flex;align-items:center;gap:9px;padding:9px 15px;background:var(--notte);border:1px solid var(--riga);border-radius:999px;box-shadow:var(--ombra);font-size:13.5px;color:var(--testo-2);font-weight:500}
.conta:hover{background:var(--notte-2)}
.conta b{font-family:var(--stretto);font-stretch:var(--largo-stretto);font-size:17px;font-weight:700;color:var(--testo);font-variant-numeric:tabular-nums}
.conta .pallino{width:8px;height:8px;border-radius:50%;background:var(--bergamotto);flex:none}

/* ---------- targa di linea: la lastra che sta sul parabrezza */
.code{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 9px;border-radius:var(--r-xs);background:var(--c,#5D7C86);color:var(--on-c,#fff);font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:700;font-size:14px;letter-spacing:.015em;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.code.sched{background:transparent;color:var(--testo);box-shadow:inset 0 0 0 1.5px var(--c)}
.code.lg{height:32px;font-size:17px;min-width:56px;padding:0 10px}
.stopdot{width:15px;height:15px;border-radius:50%;background:var(--notte);box-shadow:inset 0 0 0 3px var(--testo-2);justify-self:center;flex:none}

/* ---------- pannello: entra da sinistra solo quando serve */
.panel{position:fixed;left:14px;top:calc(68px + env(safe-area-inset-top,0px));width:var(--pannello);max-width:calc(100vw - 28px);z-index:900;display:flex;flex-direction:column;background:var(--notte);border:1px solid var(--riga);border-radius:var(--r);box-shadow:var(--ombra);overflow:hidden;max-height:calc(100vh - 84px - env(safe-area-inset-top,0px))}
.handle{display:none}
.phead{display:flex;align-items:center;gap:11px;padding:13px 14px;flex:none}
.phead .title{min-width:0;flex:1}
.phead .title h2{margin:0;font-family:var(--stretto);font-stretch:var(--largo-stretto);font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .title small{display:block;color:var(--testo-2);font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:32px;height:32px;flex:none;border-radius:50%;background:var(--notte-2);color:var(--testo);display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.ib:hover{background:var(--notte-3)}
.ib.on{background:var(--bergamotto);color:var(--su-bergamotto)}
.pbody{overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain}
.sec{padding:13px 14px;border-top:1px solid var(--riga)}
.sec h3{margin:0 0 9px;font-size:12.5px;font-weight:600;color:var(--testo-2)}
.sec.flush{padding:0}
.sec.flush h3{padding:13px 14px 5px;margin:0}

/* riga di stato della corsa: una sola, invece di sei caselle */
.stato{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px 13px;font-size:13.5px}
.stato .dato{color:var(--testo-2)}
.stato .dato b{color:var(--testo);font-weight:600}

/* ---------- il conteggio vivo: l'unico elemento in grassetto della pagina */
.panel .phead[hidden]+.pbody>.pulse{padding-top:19px}
.pulse .count{margin:0;font-family:var(--stretto);font-stretch:var(--largo-stretto);font-size:17px;font-weight:600;line-height:1.2;color:var(--testo-2)}
.pulse .count b{display:block;font-size:42px;font-weight:700;line-height:1;color:var(--testo);letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin-bottom:3px}
.split{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--notte-3);margin:14px 0 11px}
.split i{display:block;height:100%;background:var(--bergamotto);transition:width .5s ease-out}
.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.keys li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--testo-2);font-variant-numeric:tabular-nums}
.keys li b{color:var(--testo);font-weight:600}
.keys i{width:11px;height:11px;border-radius:3px;flex:none}
.keys .k-gps{background:var(--bergamotto)}
.keys .k-est{background:var(--notte-3);box-shadow:inset 0 0 0 1.5px var(--testo-3)}
.keys .k-late{background:var(--tardi)}

.toggle{display:flex;align-items:center;gap:11px;margin-top:15px;font-size:13.5px;color:var(--testo-2);cursor:pointer}
.toggle input{appearance:none;width:36px;height:21px;border-radius:999px;background:var(--notte-3);position:relative;margin:0;flex:none;transition:background .18s}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--testo-2);transition:transform .18s,background .18s}
.toggle input:checked{background:var(--bergamotto)}
.toggle input:checked::after{transform:translateX(15px);background:var(--su-bergamotto)}
@media (prefers-reduced-motion: reduce){.toggle input,.toggle input::after,.split i{transition:none}}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border:1px solid var(--riga);border-radius:999px;font-size:13px;font-weight:500;color:var(--testo);min-height:32px}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.chip b{font-weight:600;color:var(--testo-2);font-variant-numeric:tabular-nums}
.chip:hover{background:var(--notte-2)}
.chip[aria-pressed="false"]{color:var(--testo-3);border-color:transparent;background:var(--notte-2)}
.chip[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--c);opacity:.6}
.chip.more{border-style:dashed;color:var(--testo-2)}

.list{display:flex;flex-direction:column}
.list .row{content-visibility:auto;contain-intrinsic-size:auto 58px}
.stops .st{content-visibility:auto;contain-intrinsic-size:auto 68px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:11px 16px;border-top:1px solid var(--riga);text-align:left;width:100%}
.list .row:first-child{border-top:0}
.row:hover{background:var(--notte-2)}
.row .t{min-width:0}
.row .t div{font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{display:block;color:var(--testo-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row .s{text-align:right;font-weight:600;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .s small{display:block;font-weight:400;color:var(--testo-2);font-size:12.5px}
.row.dim{opacity:.5}
.late{color:var(--tardi)}.early{color:var(--presto)}.ontime{color:var(--orario)}.muted{color:var(--testo-2)}
.empty{color:var(--testo-2);font-size:14px;padding:15px 16px;line-height:1.55}
.note{margin:0;font-size:13px;color:var(--testo-2);line-height:1.6;max-width:62ch}
.note b{color:var(--testo);font-weight:600}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.kv div{display:flex;flex-direction:column;gap:3px;min-width:0}
.kv span{font-size:12.5px;color:var(--testo-2)}
.kv b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--notte-2);width:max-content}
.pill.gps{color:var(--bergamotto)}
.pill.gps::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--riga);background:var(--notte-2);border-radius:var(--r-s);padding:9px 14px;font-size:13.5px;font-weight:600;min-height:38px;transition:background .15s}
.btn:hover{background:var(--notte-3)}
.btn[aria-pressed="true"]{background:var(--bergamotto);color:var(--su-bergamotto);border-color:var(--bergamotto)}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}

.tabs{display:flex;gap:7px;padding:14px 16px 0}
.tab{flex:1;border:1px solid var(--riga);border-radius:var(--r-s);padding:9px 11px;font-size:13px;font-weight:600;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:38px}
.tab[aria-selected="true"]{background:var(--testo);color:var(--notte);border-color:var(--testo)}

/* ---------- il viaggio: una colonna sola, il nome della fermata va a capo
   invece di essere tagliato, e l'orario sta sotto al nome, non in gara con lui */
.stops{display:flex;flex-direction:column;position:relative;padding:4px 0}
.st{display:grid;grid-template-columns:24px 1fr;gap:0 13px;align-items:start;text-align:left;width:100%;padding:9px 16px 9px 14px;position:relative}
.st:hover{background:var(--notte-2)}
.st::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:3px;background:var(--c);border-radius:2px}
.st:first-child::before{top:18px}
.st:last-child::before{bottom:calc(100% - 18px)}
.st i{width:13px;height:13px;margin-top:5px;border-radius:50%;background:var(--notte);box-shadow:inset 0 0 0 3px var(--c);justify-self:center;position:relative;z-index:1}
.st .nm{font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:600;font-size:15.5px;line-height:1.28;min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st .nm small{display:block;font-family:var(--font);color:var(--testo-2);font-weight:400;font-size:12.5px;margin-top:1px}
.st .ora{grid-column:2;display:flex;align-items:baseline;gap:8px;margin-top:3px;font-size:13.5px;color:var(--testo-2);font-variant-numeric:tabular-nums}
.st .ora b{font-weight:700;color:var(--testo)}
.st .ora b.late{color:var(--tardi)}
.st .ora s{color:var(--testo-3);font-weight:400}
.st .ora em{font-style:normal;font-size:12px;font-weight:600;color:var(--bergamotto)}
.st.past{opacity:.45}
.st.past i{background:var(--c)}
.st.next i{box-shadow:inset 0 0 0 3px var(--c),0 0 0 5px color-mix(in srgb,var(--c) 28%,transparent)}
.st.next .nm{font-weight:700}

.board .row .s b{font-size:19px;font-weight:700}
.board .row .s b.now{color:var(--bergamotto)}
.trips .row .s{font-size:13px}

/* ---------- comandi sulla mappa */
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1100;background:var(--testo);color:var(--notte);padding:11px 16px;border-radius:var(--r-s);font-weight:600;font-size:13.5px;box-shadow:var(--ombra);max-width:calc(100vw - 40px)}

.leaflet-container{font-family:var(--font);font-size:12.5px}
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{font-size:11px;background:var(--velo)!important;color:var(--testo-2)!important;padding:2px 7px!important}
.leaflet-control-attribution a{color:var(--testo-2)!important}
.leaflet-tooltip{background:var(--notte);color:var(--testo);border:1px solid var(--riga);box-shadow:var(--ombra);font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:600;border-radius:var(--r-s);padding:6px 10px}
.leaflet-tooltip::before{display:none}

/* ---------- mezzi sulla mappa: distintivo dritto e leggibile, punta che gira */
.vm{position:relative}
.vm .bd{position:absolute;inset:15%;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.vm .n{color:var(--on-c,#fff);font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:700;font-size:11px;line-height:1;letter-spacing:-.01em;pointer-events:none;font-variant-numeric:tabular-nums}
.vm .dir{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .5s ease-out;pointer-events:none}
.vm .dir::before,.vm .dir::after{content:"";position:absolute;left:50%;border-left-color:transparent;border-right-color:transparent;border-style:solid;border-top-width:0}
.vm .dir::before{top:-1px;margin-left:-7px;border-left-width:7px;border-right-width:7px;border-bottom-width:10px;border-bottom-color:#fff}
.vm .dir::after{top:1px;margin-left:-5px;border-left-width:5px;border-right-width:5px;border-bottom-width:7px;border-bottom-color:var(--c)}
.vm.sched .bd{background:color-mix(in srgb,var(--c) 45%,var(--notte));border-style:dashed;border-color:var(--c)}
.vm.sched .n{color:var(--testo)}
.vm.sched .dir{opacity:.5}
.vm.sel .bd{border-color:var(--bergamotto);box-shadow:0 0 0 4px color-mix(in srgb,var(--bergamotto) 40%,transparent),0 2px 6px rgba(0,0,0,.45)}
.vm.sel{z-index:3}
.vm.dim{opacity:.28}
.vm .eti{position:absolute;left:calc(100% + 7px);top:50%;transform:translateY(-50%);font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:700;font-size:12.5px;line-height:1.25;color:var(--c);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;pointer-events:none;paint-order:stroke fill;-webkit-text-stroke:3px var(--notte)}
html[data-theme="light"] .vm .eti{-webkit-text-stroke:3px #fff}
@media (prefers-reduced-motion: reduce){.vm .dir{transition:none}}

.cl{position:relative;border-radius:50%;background:var(--notte);color:var(--testo);border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:700;font-size:14px;box-shadow:0 2px 7px rgba(0,0,0,.5);font-variant-numeric:tabular-nums;transition:transform .12s}
.cl:hover{transform:scale(1.1)}
.cl::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--bergamotto) 60%,transparent)}
.cl.mixed{color:var(--testo-2)}
.cl.mixed::after{border-style:dashed;border-color:color-mix(in srgb,var(--testo-2) 45%,transparent)}
@media (prefers-reduced-motion: reduce){.cl{transition:none}}

.stopm{width:13px;height:13px;border-radius:50%;background:var(--notte);box-shadow:inset 0 0 0 2.5px var(--testo),0 1px 3px rgba(0,0,0,.4)}
.stopm.sel{background:var(--bergamotto);box-shadow:inset 0 0 0 2.5px var(--notte),0 0 0 3px var(--bergamotto)}
.me{width:17px;height:17px;border-radius:50%;background:var(--bergamotto);border:3px solid #fff;box-shadow:0 0 0 7px color-mix(in srgb,var(--bergamotto) 28%,transparent)}


/* ---------- telefono: il pannello diventa un foglio che sale dal basso */
@media (max-width: 760px){
  .avviso{left:10px;right:10px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  :root{--pannello:100%}
  .panel{left:0;right:0;top:auto;bottom:0;width:100%;max-width:none;height:48vh;border:0;border-top:1px solid var(--riga);border-radius:16px 16px 0 0;max-height:none;transition:height .25s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
  .panel.full{height:calc(100vh - 76px - env(safe-area-inset-top,0px))}
  .panel.min{height:84px}
  .tools{right:10px;top:calc(10px + env(safe-area-inset-top,0px))}
  .conta{left:10px}
  .handle{display:flex;justify-content:center;align-items:center;width:100%;padding:9px 0 3px;flex:none;min-height:28px}
  .handle i{width:42px;height:4px;border-radius:2px;background:var(--testo-3)}
  .phead{padding-top:7px}
  .conta{bottom:calc(16px + env(safe-area-inset-bottom,0px));transition:bottom .25s ease}
  body.aperto .conta{bottom:calc(48vh + 14px)}
  body.aperto .panel.full ~ .conta,body.aperto.pieno .conta{bottom:calc(100vh - 66px)}
  .pulse .count b{font-size:36px}
}
@media (prefers-reduced-motion: reduce){.live.on i{animation:none}.panel,.conta{transition:none}}
.more{display:block;width:100%;padding:12px 16px;border-top:1px solid var(--riga);color:var(--bergamotto);font-size:13.5px;font-weight:600;text-align:left}
.more:hover{background:var(--notte-2)}

/* ---------- fascia del mezzo in cima alla scheda di una corsa */
.mezzo{position:relative;background:var(--notte-2);border-bottom:1px solid var(--riga);padding:12px 22px 10px;display:block}
.mezzo svg{display:block;width:100%;height:auto;max-height:74px;opacity:.95}
.mezzo .targa{position:absolute;right:14px;bottom:10px;display:inline-flex;align-items:center;gap:6px;background:#F4F6F3;color:#101418;font-family:var(--stretto);font-stretch:var(--largo-stretto);font-weight:700;font-size:13px;letter-spacing:.06em;padding:3px 8px 3px 4px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.mezzo .targa i{font-style:normal;background:#0B3B8F;color:#F6C915;font-size:9px;font-weight:700;letter-spacing:0;padding:3px 3px 2px;border-radius:2px;line-height:1}

/* ---------- avviso sulla riservatezza: informa e si toglie di mezzo */
.avviso{position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1200;width:min(400px,calc(100vw - 28px));background:var(--notte);border:1px solid var(--riga);border-radius:var(--r);box-shadow:var(--ombra);padding:15px 16px}
.avviso p{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:var(--testo-2)}
.avviso p b{color:var(--testo);font-weight:700}
.avvisoAzioni{display:flex;gap:8px;flex-wrap:wrap}
.btn.primario{background:var(--bergamotto);color:var(--su-bergamotto);border-color:var(--bergamotto)}
.btn.primario:hover{filter:brightness(1.08)}

/* ---------- pagine di testo */
.testo h4{margin:19px 0 6px;font-family:var(--stretto);font-stretch:var(--largo-stretto);font-size:15.5px;font-weight:700;color:var(--testo)}
.testo h4:first-child{margin-top:0}
.testo p{margin:0 0 11px;font-size:14px;line-height:1.62;color:var(--testo-2);max-width:62ch;text-wrap:pretty}
.piede{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px!important}
.linkish{color:var(--bergamotto);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{text-decoration-thickness:2px}