/**
 * location-views.css — «La Previsione di meteo.sm» (contract location-views-v1)
 *
 * Redesign in stile yr.no (met.no) su richiesta di Marco: sfondo azzurro pallido,
 * card bianche ariose, righe-giorno con 4 simboli di fascia + high/low, e il
 * METEOGRAMMA come firma (curva temp rossa + barre precip blu su asse mm a destra
 * + pannello vento viola con frecce direzione). La nostra onestà resta: banda
 * P10–P90 come riempimento chiaro (coerente col linguaggio "range" di yr), regimi
 * espliciti, provenance. Tutto scoped sotto `.lvx`. Dark mode supportata.
 *
 * Modulo beta indipendente: non tocca location.css / location-app.js (WIP point_forecast).
 */

/* Sfondo pagina yr (solo questa pagina carica questo CSS) */
body { background: #e9f1fb; }
[data-theme="dark"] body { background: #0d1320; }

.lvx {
  /* ── Palette yr.no ──────────────────────────────────────────────────────── */
  --lvx-page:  #e9f1fb;
  --lvx-card:  #ffffff;
  --lvx-card-2:#f2f7fd;
  --lvx-ink:   #12161c;
  --lvx-ink-2: #55606e;
  --lvx-ink-3: #5f6b7a;   /* #1226: contrasto AA (era #8a94a2, 3,07 sul bianco) */
  --lvx-line:  #dde6f1;
  --lvx-line-2:#eef3f9;

  --lvx-temp:  #c1121f;   /* curva/alta temperatura (rosso yr) */
  --lvx-temp-low: #5b6875;/* minima (grigio) */
  --lvx-band:  rgba(193, 18, 31, 0.13);   /* banda P10–P90 temp */
  --lvx-precip:#1565c0;   /* precipitazione (blu yr) */
  --lvx-precip-2: rgba(21, 101, 192, 0.35);
  --lvx-wind:  #8e44ad;   /* vento (viola yr) */

  --lvx-observed: #0f9d8f;
  --lvx-observed-ink: #0a7468;   /* #1226: testo «osservato» con contrasto AA sul fondo verde chiaro (il colore pieno resta alle grafiche) */
  --lvx-nowcast:  #e08205;
  --lvx-forecast: #1565c0;
  --lvx-grid:  #e6edf6;
  --lvx-frost: #1f6fa8;   /* gelata (#1225) */

  --lvx-radius: 14px;
  --lvx-mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  color: var(--lvx-ink);
  min-width: 0;
  overflow-x: clip;
  margin: 0;
  padding: 4px max(clamp(12px, 3vw, 22px), calc((100% - 1040px) / 2)) calc(56px + var(--safe-area-bottom, 0px));
  font-feature-settings: 'tnum' 0;
}

[data-theme="dark"] .lvx {
  --lvx-page:  #0d1320;
  --lvx-card:  #161e2c;
  --lvx-card-2:#1c2635;
  --lvx-ink:   #e9eef5;
  --lvx-ink-2: #a4b0be;
  --lvx-ink-3: #8693a2;   /* #1226: contrasto AA (era #6f7d8c, 3,97 sulla card) */
  --lvx-line:  #263243;
  --lvx-line-2:#1e2836;
  --lvx-temp:  #ff6b6b;
  --lvx-temp-low: #9fb0c0;
  --lvx-band:  rgba(255, 107, 107, 0.16);
  --lvx-precip:#4d9fe8;
  --lvx-precip-2: rgba(77, 159, 232, 0.35);
  --lvx-wind:  #c78be0;
  --lvx-observed: #34d6c6;
  --lvx-observed-ink: #34d6c6;
  --lvx-nowcast:  #f5b13d;
  --lvx-forecast: #6fb2f0;
  --lvx-grid:  #24303f;
  --lvx-frost: #8cc8f2;
}

.lvx-visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Focus sempre visibile da tastiera (non solo il default del browser, che su
   sfondi colorati sparisce), senza comparire al click col mouse. */
.lvx :focus-visible, .lvx-select:focus-visible {
  outline:3px solid var(--lvx-forecast); outline-offset:2px; border-radius:6px;
}
.lvx :focus:not(:focus-visible) { outline:none; }
.lvx-num { font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; }

/* Picker in header */
.lvx-headpick { flex:1; display:flex; justify-content:center; min-width:0; }
.lvx-select {
  font:600 15px/1.2 var(--font-family, Inter, sans-serif);
  color: var(--text-primary, #202124);
  background: transparent; border:1px solid var(--border, #dadce0);
  border-radius:999px; padding:7px 30px 7px 14px; max-width:62vw;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235f6368'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}

/* Combobox di ricerca: sostituisce il <select>, che non regge migliaia di voci.
   L'input riusa l'aspetto di .lvx-select (stessa pillola nell'header). */
.lvx-combo { position:relative; width:min(62vw, 320px); }
.lvx-combo__input {
  width:100%; cursor:text; background-image:none; padding-right:14px;
  text-overflow:ellipsis;
}
.lvx-combo__list {
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:4px; list-style:none; max-height:min(60vh, 380px); overflow-y:auto;
  background:var(--surface, #fff); border:1px solid var(--border, #dadce0);
  border-radius:12px; box-shadow:0 10px 28px rgba(15,23,42,.16);
}
.lvx-combo__opt {
  display:flex; align-items:baseline; gap:8px; padding:8px 10px; border-radius:8px;
  font:500 14px/1.25 var(--font-family, Inter, sans-serif);
  color:var(--text-primary, #202124); cursor:pointer;
}
.lvx-combo__opt[aria-selected="true"], .lvx-combo__opt:hover { background:var(--lvx-chip, #eef2f7); }
.lvx-combo__opt--current { font-weight:700; }
.lvx-combo__where { font-size:12px; color:var(--lvx-ink-2); font-weight:400; }
/* Località mai generata: si produce alla prima apertura (~1 s). Va detto, non nascosto. */
.lvx-combo__new { margin-left:auto; font-size:11px; color:var(--lvx-ink-2); white-space:nowrap; }
.lvx-combo__group {
  padding:8px 10px 4px; font:700 11px/1 var(--font-family, Inter, sans-serif);
  letter-spacing:.04em; text-transform:uppercase; color:var(--lvx-ink-2);
}
.lvx-combo__empty { padding:12px 10px; font-size:13px; color:var(--lvx-ink-2); }

/* ── «Dove sei» ─────────────────────────────────────────────────────────────
   Il bottone sta accanto alla ricerca perche' e' la stessa domanda posta in un
   altro modo: o scrivi il nome del comune, o lasci che sia il telefono a dirlo.
   Solo icona: l'header e' gia' affollato e su telefono il combobox si prende
   62vw. L'aria-label dice cosa fa a chi non vede l'icona. */
.lvx-geo-btn {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:6px;
  background:none; border:1px solid var(--lvx-line); border-radius:50%;
  color:var(--lvx-ink-2); cursor:pointer;
}
.lvx-geo-btn:hover:not(:disabled) { color:var(--lvx-ink); border-color:var(--lvx-ink-2); }
.lvx-geo-btn:disabled { opacity:.5; cursor:default; }
.lvx-geo-btn--busy svg { animation:lvx-geo-pulse 1.1s ease-in-out infinite; }

@keyframes lvx-geo-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .lvx-geo-btn--busy svg { animation:none; opacity:.55; } }

/* La proposta: una riga sola, sopra il contenuto, che si chiude e sparisce.
   Non e' un errore ne' un avviso, quindi niente colori d'allarme: e' un'offerta. */
/* 🪤 Il selettore ha :not([hidden]) per un motivo — 17/09/2026.
   L'elemento nasce con l'attributo `hidden`, ma `display:flex` scritto qui
   BATTE il display:none che il browser applica a [hidden]: risultato, un
   riquadro vuoto col filetto blu a sinistra, visibile sempre. Si notava poco
   finche' stava sotto la barra blu; spostata la barra, si vede. */
.lvx-geo-proposta:not([hidden]) {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px auto 0; max-width:var(--lvx-maxw, 720px); padding:10px 14px;
  background:var(--lvx-card); border:1px solid var(--lvx-line);
  border-left:3px solid var(--lvx-accent, #1a73e8);
  border-radius:var(--lvx-radius); font-size:14px; color:var(--lvx-ink);
}
.lvx-geo-proposta span { flex:1 1 200px; }
.lvx-geo-proposta__si {
  flex:0 0 auto; min-height:38px; padding:0 14px;
  background:var(--lvx-accent, #1a73e8); border:none; border-radius:999px;
  color:#fff; font:600 13px/1 var(--font-family); cursor:pointer;
}
.lvx-geo-proposta__no {
  flex:0 0 auto; min-width:38px; min-height:38px;
  background:none; border:none; color:var(--lvx-ink-2);
  font-size:18px; line-height:1; cursor:pointer; border-radius:50%;
}
.lvx-geo-proposta__no:hover { color:var(--lvx-ink); }
[data-theme="dark"] .lvx-combo__list { background:var(--surface, #16202e); border-color:rgba(255,255,255,.14); box-shadow:0 12px 30px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lvx-combo__list { background:var(--surface, #16202e); border-color:rgba(255,255,255,.14); }
}
@media (max-width: 560px) { .lvx-combo { width:min(70vw, 260px); } }

/* ── Boot / stato ──────────────────────────────────────────────────────────── */
.lvx-boot { display:flex; flex-direction:column; align-items:center; gap:14px; padding:72px 16px; color:var(--lvx-ink-2); }
/* #1226 (CLS): durante il caricamento il resto della pagina (località vicine, piè di pagina) sta già sotto lo schermo */
.lvx-boot { min-height:100vh; box-sizing:border-box; }
.lvx-boot__spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--lvx-line); border-top-color:var(--lvx-forecast); animation:lvx-spin .8s linear infinite; }
@keyframes lvx-spin { to { transform:rotate(360deg); } }
.lvx-boot__label { margin:0; font-size:14px; }
.lvx-state { max-width:520px; margin:56px auto; text-align:center; padding:28px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); }
.lvx-state h2 { margin:0 0 8px; font-size:19px; }
.lvx-state p { margin:0 0 16px; color:var(--lvx-ink-2); font-size:14.5px; line-height:1.5; }
.lvx-state__badge { display:inline-block; font:600 11px/1 var(--font-family); text-transform:uppercase; letter-spacing:.08em; color:var(--lvx-nowcast); background:rgba(224,130,5,.14); padding:5px 10px; border-radius:999px; margin-bottom:14px; }
.lvx-btn { font:600 14px/1 var(--font-family); color:#fff; background:var(--lvx-forecast); border:0; border-radius:999px; padding:11px 20px; cursor:pointer; }

/* ── Intestazione località ─────────────────────────────────────────────────── */
.lvx-place { padding:14px 2px 6px; }
.lvx-place__eyebrow { display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--font-family); color:var(--lvx-ink-2); }
.lvx-place__eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--lvx-forecast); }
.lvx-place__name { margin:8px 0 2px; font-size:clamp(26px,5vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.02; }
.lvx-place__sub { font-size:13px; color:var(--lvx-ink-3); }

/* ── Card "condizioni attuali" (yr) ────────────────────────────────────────── */
.lvx-current { margin-top:12px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); padding:16px clamp(14px,3vw,22px); box-shadow:0 1px 2px rgba(16,40,80,.05); }
.lvx-current__label { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--font-family); color:var(--lvx-ink-2); margin-bottom:12px; }
.lvx-current__row { display:flex; align-items:center; gap:clamp(12px,3vw,26px); flex-wrap:wrap; }
.lvx-current__icon { width:clamp(60px,13vw,84px); height:clamp(60px,13vw,84px); flex:none; }
.lvx-current__icon svg { width:100%; height:100%; }
.lvx-current__temp { font-size:clamp(38px,8vw,52px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--lvx-temp); }
.lvx-current__band { font-size:13px; color:var(--lvx-ink-2); margin-top:6px; }
.lvx-current__facts { display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--lvx-ink); margin-left:auto; }
.lvx-current__fact { display:flex; align-items:center; gap:9px; }
.lvx-current__fact svg { color:var(--lvx-ink-3); flex:none; }
.lvx-current__fact b { font-weight:600; }
.lvx-current__desc { margin:8px 0 0; font-size:14.5px; color:var(--lvx-ink); }

/* Card attuali + nowcast affiancati (come yr: condizioni | previsioni precipitazioni) */
.lvx-currentwrap { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:900px) { .lvx-currentwrap:has(.lvx-nowcast) { grid-template-columns:minmax(0,1.9fr) minmax(240px,1fr); align-items:stretch; } .lvx-currentwrap:has(.lvx-nowcast) .lvx-current { margin-top:12px; } }

/* Pannello nowcast radar */
.lvx-nowcast { margin-top:12px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); padding:16px 18px; display:flex; flex-direction:column; }
.lvx-nowcast__head { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--font-family); color:var(--lvx-ink-2); margin-bottom:10px; }
.lvx-nowcast__head svg { color:var(--lvx-precip); }
.lvx-nowcast__txt { margin:0; font-size:14.5px; line-height:1.45; color:var(--lvx-ink); }
.lvx-nowcast__txt b { font-weight:700; }
.lvx-nowcast__src { margin:auto 0 0; padding-top:10px; font-size:11.5px; color:var(--lvx-ink-3); }
/* #1226: pioggia delle prossime 2 ore (radar a 5', poi modello orario) */
.lvx-r2h { margin:10px 0 0; }
.lvx-r2h__plot { position:relative; height:84px; margin-left:58px; }
.lvx-r2h__plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lvx-r2h__grid { stroke:var(--lvx-line); stroke-width:1; stroke-dasharray:3 3; }
.lvx-r2h__base { stroke:var(--lvx-ink-3); stroke-width:1; }
.lvx-r2h__radar { fill:var(--lvx-precip); }
.lvx-r2h__model { fill:var(--lvx-precip-2); stroke:var(--lvx-precip); stroke-width:1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.lvx-r2h__lvl { position:absolute; right:calc(100% + 6px); transform:translateY(-50%); font-size:11px; line-height:1; color:var(--lvx-ink-3); white-space:nowrap; }
.lvx-r2h__pop { position:absolute; bottom:4px; transform:translateX(-50%); font-size:11px; line-height:1; color:var(--lvx-precip); font-weight:600; font-variant-numeric:tabular-nums; }
.lvx-r2h__axis { position:relative; height:16px; margin:4px 0 0 58px; font-size:11px; color:var(--lvx-ink-3); font-variant-numeric:tabular-nums; }
.lvx-r2h__axis span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.lvx-r2h__axis span:first-child { transform:none; }
.lvx-r2h__nd { stroke:var(--lvx-ink-3); stroke-width:2; stroke-dasharray:1 4; }
.lvx-r2h__leg { display:flex; flex-wrap:wrap; gap:4px 14px; margin:2px 0 0 58px; font-size:11px; color:var(--lvx-ink-3); }
.lvx-r2h__leg span { display:inline-flex; align-items:center; gap:5px; }
.lvx-r2h__sw { display:inline-block; width:12px; height:9px; border-radius:2px; }
.lvx-r2h__sw--radar { background:var(--lvx-precip); }
.lvx-r2h__sw--model { background:var(--lvx-precip-2); border:1px dashed var(--lvx-precip); box-sizing:border-box; }
/* #1226: sintesi in parole (WxSummary) */
.lvx-summary { min-height:3em; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--lvx-line-2); font-size:15px; line-height:1.5; color:var(--lvx-ink); }
.lvx-dintorni { margin-top:8px; font-size:13.5px; color:var(--lvx-ink-2); }
.lvx-nowcast--rain { border-color:var(--lvx-precip); background:linear-gradient(180deg, rgba(21,101,192,.06), transparent 60%), var(--lvx-card); }
[data-theme="dark"] .lvx-nowcast--rain { background:linear-gradient(180deg, rgba(77,159,232,.10), transparent 60%), var(--lvx-card); }

/* Chip regime */
.lvx-regime { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--font-family); text-transform:uppercase; letter-spacing:.05em; padding:4px 9px 4px 7px; border-radius:999px; }
.lvx-regime::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.lvx-regime--observed { color:var(--lvx-observed-ink); background:rgba(15,157,143,.13); }
.lvx-regime--nowcast  { color:var(--lvx-nowcast);  background:rgba(224,130,5,.14); }
.lvx-regime--forecast { color:var(--lvx-forecast); background:rgba(21,101,192,.12); }
.lvx-regime--mixed { color:var(--lvx-ink-2); background:var(--lvx-card-2); }
.lvx-regime--mixed::before { background:linear-gradient(90deg,var(--lvx-observed) 0 50%,var(--lvx-forecast) 50% 100%); }

/* ── Toggle Tabella/Grafico (yr) ───────────────────────────────────────────── */
.lvx-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 0 6px; }
.lvx-tabs { display:inline-flex; gap:2px; padding:3px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:999px; }
.lvx-tab { font:600 13px/1 var(--font-family); color:var(--lvx-ink-2); background:transparent; border:0; padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.lvx-tab[aria-selected="true"] { color:#fff; background:var(--lvx-forecast); }
.lvx-rep { margin:0 auto; display:inline-flex; gap:2px; padding:3px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:999px; }
.lvx-rep button { font:600 13.5px/1 var(--font-family); color:var(--lvx-ink-2); background:transparent; border:0; padding:9px 20px; border-radius:999px; cursor:pointer; }
.lvx-rep button[aria-pressed="true"] { color:var(--lvx-forecast); background:var(--lvx-card-2); }

/* Condividi */
.lvx-share { flex:none; display:inline-flex; align-items:center; gap:7px; font:600 13px/1 var(--font-family); color:var(--lvx-ink-2); background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:999px; padding:9px 15px; cursor:pointer; }
.lvx-share:hover { color:var(--lvx-forecast); border-color:var(--lvx-forecast); }
.lvx-share svg { width:15px; height:15px; }

/* ── Righe-giorno (overview, yr daily-table) ───────────────────────────────── */
/* Intestazioni colonne (etichette fasce sopra i 4 simboli, allineate a destra) */
.lvx-colhead { display:flex; align-items:flex-end; gap:12px; padding:2px 16px 2px; font:600 11px/1.2 var(--font-family); color:var(--lvx-ink-3); }
.lvx-colhead__spacer { flex:1; }
.lvx-colhead__syms { display:flex; gap:2px; }
.lvx-colhead__syms > span { width:44px; text-align:center; }
.lvx-colhead__chev { width:20px; }

.lvx-days { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.lvx-day { background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); overflow:hidden; }
/* Salto rapido al giorno: la testata del sito e' sticky (56 px, 64 su desktop) e
   copriva il giorno scelto; si vedevano i giorni dopo (Roberto Montanari, 14/10). */
.lvx-day { scroll-margin-top:calc(var(--header-height, 56px) + 12px); }
.lvx-day__row { display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.lvx-day__row:hover { background:var(--lvx-card-2); }
.lvx-day__main { flex:1; min-width:0; }
.lvx-day__name { font-size:15.5px; font-weight:700; text-transform:capitalize; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lvx-day__name .lvx-day__date { font-weight:500; font-size:12.5px; color:var(--lvx-ink-3); text-transform:none; }
.lvx-day__rdot { width:8px; height:8px; border-radius:50%; align-self:center; }
.lvx-day__stats { margin-top:5px; display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; font-variant-numeric:tabular-nums; font-size:14px; }
.lvx-day__hi { color:var(--lvx-temp); font-weight:700; }
.lvx-day__lo { color:var(--lvx-temp-low); }
.lvx-day__precip { color:var(--lvx-precip); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.lvx-day__wind { color:var(--lvx-ink-2); display:inline-flex; align-items:center; gap:5px; }
.lvx-day__syms { display:flex; gap:2px; flex:none; }
.lvx-day__sym { width:44px; height:42px; display:flex; align-items:center; justify-content:center; }
.lvx-day__sym svg { width:38px; height:38px; }
.lvx-day__chev { width:20px; display:flex; justify-content:center; color:var(--lvx-ink-3); transition:transform .18s; flex:none; }
.lvx-day[open] .lvx-day__chev { transform:rotate(180deg); }

@media (max-width:640px) {
  .lvx-colhead__syms > span { width:38px; font-size:10px; }
  .lvx-day__sym { width:38px; height:38px; }
  .lvx-day__sym svg { width:33px; height:33px; }
}

/* Dettaglio fasce (espanso) */
.lvx-day__detail { border-top:1px solid var(--lvx-line-2); padding:4px 8px 8px; display:none; }
.lvx-day[open] .lvx-day__detail { display:block; }
/* #1225: scheda ospite col lucchetto (stessi colori della pagina vecchia) */
.lvx-guest { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0; padding:12px 14px; border-radius:12px; border:1px solid rgba(245,166,35,.5); background:rgba(245,166,35,.10); color:var(--lvx-ink); }
.lvx-guest__txt { flex:1 1 220px; font-size:14px; line-height:1.45; }
.lvx-guest__btn { flex:0 0 auto; }
/* #1225: dettagli orari a richiesta (riga sotto l'ora) */
.lvx-dettbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 2px; }
.lvx-dett { font:600 13px/1 var(--font-family); color:var(--lvx-forecast); background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:999px; padding:8px 14px; cursor:pointer; }
.lvx-dett[aria-pressed="true"] { background:var(--lvx-card-2); }
.lvx-dettbar__hint { font-size:12px; color:var(--lvx-ink-3); }
.lvx-hrow__dett { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px 14px; font-size:12px; color:var(--lvx-ink-2); margin-top:-2px; }
.lvx-hrow__dett b { color:var(--lvx-ink); font-weight:600; }
/* #1225: mare (onde e livello) per i comuni costieri */
.lvx-sea { margin:14px 0; padding:14px 16px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); }
.lvx-sea__part + .lvx-sea__part { margin-top:18px; padding-top:14px; border-top:1px solid var(--lvx-line-2); }
.lvx-sea__h { margin:0 0 4px; font-size:16px; }
.lvx-sea__lead { margin:0 0 8px; font-size:13px; line-height:1.45; color:var(--lvx-ink-2); }
.lvx-sea__chart { width:100%; overflow:hidden; min-height:170px; }
.lvx-sea__chart svg { display:block; }
.lvx-sea__grid { stroke:var(--lvx-line); stroke-width:.6; }
.lvx-sea__grid--zero { stroke-width:1.2; }
.lvx-sea__grid--day { stroke-dasharray:3 3; }
.lvx-sea__tick { fill:var(--lvx-ink-2); font-size:11px; }
.lvx-sea__tick--strong { fill:var(--lvx-ink); font-weight:600; }
.lvx-sea__switch { stroke:var(--lvx-ink); stroke-width:1.5; }
.lvx-sea__area { fill:var(--lvx-precip); opacity:.12; }
.lvx-sea__line { fill:none; stroke:var(--lvx-precip); stroke-width:2; }
.lvx-sea__dot--alta { fill:var(--lvx-precip); }
.lvx-sea__dot--bassa { fill:var(--lvx-ink-2); }
.lvx-sea__tablewrap { overflow-x:auto; margin-top:8px; }
.lvx-sea__table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.lvx-sea__table th { text-align:left; font-weight:600; color:var(--lvx-ink-2); padding:6px 8px; border-bottom:1px solid var(--lvx-line); white-space:nowrap; }
.lvx-sea__table td { padding:5px 8px; border-bottom:1px solid var(--lvx-line-2); white-space:nowrap; }
.lvx-sea__num { text-align:right; }
.lvx-sea__src { margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--lvx-ink-3); }
.lvx-sea__src a { color:inherit; }
/* #1225: intorno a te (webcam, aria, collegamenti) e confronto modelli in alto */
.lvx-place__compare { display:inline-block; margin-top:6px; font:600 13px/1.3 var(--font-family); color:var(--lvx-forecast); text-decoration:none; }
.lvx-place__compare:hover, .lvx-place__compare:focus-visible { text-decoration:underline; }
.lvx-around { margin:14px 0; padding:14px 16px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); }
.lvx-around__h { margin:0 0 10px; font-size:16px; }
.lvx-around__cams { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px; }
.lvx-around__cam { flex:0 0 132px; width:132px; text-decoration:none; color:var(--lvx-ink-2); font-size:12px; }
.lvx-around__cam img { width:132px; height:78px; object-fit:cover; border-radius:10px; display:block; margin-bottom:4px; background:var(--lvx-card-2); }
.lvx-around__cam span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvx-around__aqi { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; font-size:14px; color:var(--lvx-ink); text-decoration:none; }
.lvx-around__aqi:hover { text-decoration:underline; }
.lvx-around__dot { width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15); }
.lvx-around__links { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.lvx-around__links a { color:var(--lvx-forecast); text-decoration:none; }
.lvx-around__links a:hover { text-decoration:underline; }
/* #1225: gelata (badge nella riga del giorno) e chip nel giorno aperto */
.lvx-day__frost { color:var(--lvx-frost); font-weight:600; white-space:nowrap; }
.lvx-day__chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.lvx-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:var(--lvx-card-2); border:1px solid var(--lvx-line); font-size:12.5px; line-height:1.35; color:var(--lvx-ink-2); font-variant-numeric:tabular-nums; }
.lvx-day__precipnote { margin:4px 0 6px; font-size:12.5px; line-height:1.4; color:var(--lvx-ink-2); }
.lvx-period { display:grid; grid-template-columns:96px 40px 1fr; gap:10px; align-items:center; padding:10px 8px; border-top:1px solid var(--lvx-line-2); }
.lvx-period:first-child { border-top:0; }
.lvx-period__slot { font-size:13px; }
.lvx-period__slot b { display:block; font-weight:700; text-transform:capitalize; }
.lvx-period__slot small { color:var(--lvx-ink-3); }
.lvx-period__sym svg { width:34px; height:34px; }
.lvx-period__vars { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:4px 14px; font-size:12.5px; }
.lvx-var { display:flex; align-items:baseline; gap:6px; }
.lvx-var__k { color:var(--lvx-ink-3); min-width:38px; }
.lvx-var__v { font-variant-numeric:tabular-nums; font-weight:600; }
.lvx-var__v small { font-weight:400; color:var(--lvx-ink-2); }
.lvx-var--miss .lvx-var__v { color:var(--lvx-ink-3); font-weight:400; font-style:italic; }

/* ── Tabella oraria (yr hourly-table) ──────────────────────────────────────── */
/* NB: niente overflow:hidden — romperebbe position:sticky delle intestazioni
   giorno. Gli angoli si arrotondano sulla prima/ultima riga. */
.lvx-htable { margin-top:6px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); }
.lvx-htable > :first-child { border-top-left-radius:var(--lvx-radius); border-top-right-radius:var(--lvx-radius); }
.lvx-htable > :last-child { border-bottom-left-radius:var(--lvx-radius); border-bottom-right-radius:var(--lvx-radius); }
.lvx-hrow { display:grid; grid-template-columns:64px 44px 1fr 1.1fr 1.2fr; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--lvx-line-2); font-size:14px; }
.lvx-hrow:first-of-type { border-top:0; }
.lvx-hrow--night { background:var(--lvx-card-2); }
/* Intestazione giorno «appiccicosa»: con 169 righe orarie resta il riferimento
   di quale giorno si sta leggendo mentre si scorre. */
.lvx-hrow__daysep { position:sticky; top:var(--header-height, 56px); z-index:3; padding:9px 14px; background:var(--lvx-card-2); border-top:1px solid var(--lvx-line); border-bottom:1px solid var(--lvx-line); font-weight:700; text-transform:capitalize; font-size:13.5px; scroll-margin-top:var(--header-height, 56px); }
[data-theme="dark"] .lvx-hrow__daysep { background:#1b2534; }

/* Salto rapido al giorno */
.lvx-daynav { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0 8px; scrollbar-width:thin; }
.lvx-daynav__btn { flex:none; font:600 12.5px/1 var(--font-family); color:var(--lvx-ink-2); background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:999px; padding:8px 13px; cursor:pointer; white-space:nowrap; text-transform:capitalize; }
.lvx-daynav__btn:hover { color:var(--lvx-ink); border-color:var(--lvx-forecast); }
.lvx-daynav__btn--now { color:var(--lvx-forecast); border-color:var(--lvx-forecast); }
.lvx-hrow__time { font-variant-numeric:tabular-nums; font-weight:600; }
.lvx-hrow__time small { display:block; font-weight:400; font-size:11px; color:var(--lvx-ink-3); }
.lvx-hrow__sym svg { width:34px; height:34px; }
.lvx-hrow__temp { font-variant-numeric:tabular-nums; font-weight:700; color:var(--lvx-temp); }
.lvx-hrow__temp small { color:var(--lvx-ink-2); font-weight:400; font-size:11.5px; }
.lvx-hrow__precip { font-variant-numeric:tabular-nums; color:var(--lvx-precip); }
.lvx-hrow__precip small { color:var(--lvx-ink-3); }
.lvx-hrow__precip .lvx-miss { color:var(--lvx-ink-3); font-style:italic; }
.lvx-hrow__wind { display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; color:var(--lvx-ink-2); }
.lvx-hrow__wind small { color:var(--lvx-ink-3); }
.lvx-wind-arrow { width:16px; height:16px; color:var(--lvx-ink-2); flex:none; }

/* ── Meteogramma a pannelli (stile yr «Dettagli») ───────────────────────────
   Un riquadro per grandezza, con asse proprio in colonna fissa e legenda sotto;
   lo scorrimento orizzontale è sincronizzato fra i pannelli (JS) così le
   grandezze restano incolonnate sullo stesso istante. */
.lvx-meteo { position:relative; margin-top:6px; display:flex; flex-direction:column; gap:10px; }
.lvx-panel { background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); padding:6px 6px 2px; }
.lvx-panel__body { position:relative; display:flex; align-items:stretch; }
.lvx-panel__gutter { flex:none; background:var(--lvx-card); z-index:2; }
.lvx-panel__scroll { flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.lvx-panel__scroll::-webkit-scrollbar { height:0; }
.lvx-panel[data-panel="wind"] .lvx-panel__scroll { scrollbar-width:thin; }
.lvx-panel[data-panel="wind"] .lvx-panel__scroll::-webkit-scrollbar { height:8px; }
.lvx-panel svg { display:block; }

.lvx-mg-band { fill:url(#lvx-h-temp); stroke:var(--lvx-band-edge); stroke-width:.75; }
.lvx-mg-band--minmax { fill:var(--lvx-band); fill-opacity:.55; stroke:var(--lvx-temp-low); stroke-dasharray:3 3; } /* #1223: minima-massima, non incertezza */
.lvx-hl { stroke-width:0.45; }
.lvx-hl--temp { stroke:var(--lvx-temp); opacity:.75; }
.lvx-hl--precip { stroke:var(--lvx-precip); opacity:.9; }
.lvx-hl--wind { stroke:var(--lvx-wind); opacity:.72; }
.lvx-mg-wband { fill:url(#lvx-h-wind); stroke:var(--lvx-wind); stroke-width:.6; stroke-opacity:.35; }
.lvx-mg-gband { fill:url(#lvx-h-wind); opacity:.6; }
.lvx-mg-temp { stroke:var(--lvx-temp); stroke-width:2.4; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.lvx-mg-precip { fill:var(--lvx-precip); }
.lvx-mg-precip--cap { fill:url(#lvx-h-precip); stroke:var(--lvx-precip); stroke-width:.6; stroke-opacity:.45; }
.lvx-mg-wind { stroke:var(--lvx-wind); stroke-width:2; fill:none; stroke-linejoin:round; }
.lvx-mg-gust { stroke:var(--lvx-wind); stroke-width:1.6; fill:none; stroke-linejoin:round; stroke-dasharray:5 3; opacity:.85; }
.lvx-mg-grid { stroke:var(--lvx-grid); stroke-width:1; }
.lvx-mg-grid--fine { opacity:.55; }
.lvx-mg-axis { fill:var(--lvx-ink-3); font:10px/1 var(--font-family); }
.lvx-mg-axis--temp { fill:var(--lvx-temp); }
.lvx-mg-axis--precip { fill:var(--lvx-precip); }
.lvx-mg-axis--wind { fill:var(--lvx-wind); }
.lvx-mg-day { fill:var(--lvx-ink); font:700 12.5px/1 var(--font-family); }
.lvx-mg-hour { fill:var(--lvx-ink-3); font:10px/1 var(--font-family); font-variant-numeric:tabular-nums; }
.lvx-mg-daysep { stroke:var(--lvx-line); stroke-width:1; }
.lvx-mg-now { stroke:var(--lvx-nowcast); stroke-width:1.5; stroke-dasharray:3 3; }
.lvx-mg-arrow { fill:var(--lvx-ink-2); }
/* colonna evidenziata al passaggio del mouse/tocco */
.lvx-mg-hl { fill:var(--lvx-forecast); opacity:.10; pointer-events:none; }

.lvx-mg-legend { display:flex; flex-wrap:wrap; gap:4px 16px; padding:6px 8px 4px calc(46px + 8px); font-size:12px; color:var(--lvx-ink-2); }
.lvx-mg-legend__item { display:inline-flex; align-items:center; gap:6px; }
.lvx-mg-legend__sw { width:20px; height:3px; border-radius:2px; flex:none; }
.lvx-mg-legend__sw--temp { background:var(--lvx-temp); }
.lvx-mg-legend__sw--band { height:11px; border-top:2px solid var(--lvx-temp);
  background-image:repeating-linear-gradient(45deg, var(--lvx-temp) 0 1px, transparent 1px 4px); opacity:.75; }
.lvx-mg-legend__sw--minmax { height:11px; border-radius:2px; background:var(--lvx-band); border:1px dashed var(--lvx-temp-low); }
.lvx-mg-legend__sw--precip { height:11px; border-radius:2px; background:var(--lvx-precip); }
.lvx-mg-legend__sw--pmax { height:11px; border-radius:2px;
  background-image:repeating-linear-gradient(45deg, var(--lvx-precip) 0 1px, transparent 1px 4px); }
.lvx-mg-legend__sw--wband { height:11px; border-radius:2px;
  background-image:repeating-linear-gradient(45deg, var(--lvx-wind) 0 1px, transparent 1px 4px); }
.lvx-mg-legend__sw--wind { background:var(--lvx-wind); }
.lvx-mg-legend__sw--gust { height:0; border-top:2px dashed var(--lvx-wind); background:none; }
.lvx-mg-legend__sw--chigh { height:9px; border-radius:2px; background:#9aa7b8; }
.lvx-mg-legend__sw--cmid  { height:9px; border-radius:2px; background:#6b7a8f; }
.lvx-mg-legend__sw--clow  { height:9px; border-radius:2px; background:#3d4a5c; }
[data-theme="dark"] .lvx-mg-legend__sw--chigh { background:#8fa0b5; }
[data-theme="dark"] .lvx-mg-legend__sw--cmid  { background:#b0bccb; }
[data-theme="dark"] .lvx-mg-legend__sw--clow  { background:#d6dee8; }

/* Striscia nubi */
.lvx-mg-cl--high { fill:#9aa7b8; }
.lvx-mg-cl--mid  { fill:#6b7a8f; }
.lvx-mg-cl--low  { fill:#3d4a5c; }
[data-theme="dark"] .lvx-mg-cl--high { fill:#8fa0b5; }
[data-theme="dark"] .lvx-mg-cl--mid  { fill:#b0bccb; }
[data-theme="dark"] .lvx-mg-cl--low  { fill:#d6dee8; }

/* Scheda dei valori al passaggio del mouse / tocco */
.lvx-mgtip { position:absolute; z-index:20; pointer-events:none; min-width:190px; max-width:280px;
  background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:10px;
  box-shadow:0 6px 20px rgba(16,40,80,.16); padding:10px 12px; font-size:12.5px; color:var(--lvx-ink); }
[data-theme="dark"] .lvx-mgtip { box-shadow:0 6px 20px rgba(0,0,0,.5); }
.lvx-mgtip[hidden] { display:none; }
.lvx-mgtip__title { font-weight:700; font-size:13px; margin-bottom:7px; }
.lvx-mgtip__row { display:flex; justify-content:space-between; gap:14px; padding:2px 0; color:var(--lvx-ink-2); }
.lvx-mgtip__row b { color:var(--lvx-ink); font-variant-numeric:tabular-nums; font-weight:600; }
.lvx-mgtip--temp { color:var(--lvx-temp)!important; }
.lvx-mgtip--precip { color:var(--lvx-precip)!important; }
.lvx-mgtip--wind { color:var(--lvx-wind)!important; }
.lvx-mgtip__foot { margin-top:7px; padding-top:6px; border-top:1px solid var(--lvx-line); font-size:11.5px; color:var(--lvx-ink-3); text-transform:capitalize; }

@media (max-width:640px) { .lvx-mg-legend { padding-left:8px; } .lvx-mgtip { min-width:160px; font-size:12px; } }

/* ── Ponte «Confronta i modelli» → /compare (utenti evoluti) ───────────────── */
.lvx-compare { display:flex; align-items:center; gap:14px; margin-top:22px; padding:14px 18px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); text-decoration:none; color:inherit; transition:background .15s, border-color .15s; }
.lvx-compare:hover { background:var(--lvx-card-2); border-color:var(--lvx-forecast); }
.lvx-compare__ic { width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(21,101,192,.1); color:var(--lvx-forecast); }
.lvx-compare__txt { flex:1; min-width:0; }
.lvx-compare__txt b { display:block; font-size:14.5px; font-weight:700; }
.lvx-compare__txt span { font-size:12.5px; color:var(--lvx-ink-2); }
.lvx-compare__arrow { color:var(--lvx-ink-3); flex:none; }

/* ── Provenienza ───────────────────────────────────────────────────────────── */
.lvx-prov { margin-top:22px; border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); background:var(--lvx-card); overflow:hidden; }
.lvx-prov > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:13.5px; font-weight:600; }
.lvx-prov > summary::-webkit-details-marker { display:none; }
.lvx-prov > summary::after { content:"▾"; margin-left:auto; color:var(--lvx-ink-3); }
.lvx-prov[open] > summary::after { transform:rotate(180deg); }
.lvx-fresh { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--font-family); text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:999px; }
.lvx-fresh--fresh { color:var(--lvx-observed-ink); background:rgba(15,157,143,.13); }
.lvx-fresh--degraded,.lvx-fresh--stale { color:var(--lvx-nowcast); background:rgba(224,130,5,.14); }
.lvx-prov__list { padding:4px 8px 10px; }
.lvx-src { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 8px; border-top:1px solid var(--lvx-line-2); }
.lvx-src__name { font-weight:600; font-size:13px; }
.lvx-src__meta { grid-column:1/-1; color:var(--lvx-ink-2); font-family:var(--lvx-mono); font-size:11.5px; display:flex; flex-wrap:wrap; gap:2px 14px; }
.lvx-src__meta b { color:var(--lvx-ink); font-weight:600; }
.lvx-srcbadge { font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:3px 7px; border-radius:999px; font-weight:600; }
.lvx-srcbadge--available { color:var(--lvx-observed-ink); background:rgba(15,157,143,.13); }
.lvx-srcbadge--partial { color:var(--lvx-nowcast); background:rgba(224,130,5,.14); }
.lvx-srcbadge--missing { color:var(--lvx-ink-3); background:var(--lvx-card-2); }

.lvx-footnote { margin-top:16px; font-size:12px; color:var(--lvx-ink-3); line-height:1.5; padding:0 2px; }
.lvx-footnote code { font-family:var(--lvx-mono); font-size:11.5px; }
.lvx-updated { font-size:12.5px; color:var(--lvx-ink-3); margin:8px 2px 0; }
/* #1067: copia salvata o scaduta, detta in chiaro sopra la previsione */
.lvx-copia { margin:10px 0 4px; padding:9px 12px; border-radius:10px; font-size:13.5px; line-height:1.45; color:var(--lvx-ink); background:rgba(224,130,5,.12); border:1px solid rgba(224,130,5,.35); }
/* #1223: banner temporali e grandine (stessi livelli e colori di .alert-banner di location.css) */
.lvx-alert { display:flex; align-items:center; gap:8px; margin:10px 0 4px; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:500; line-height:1.4; color:var(--lvx-ink); border-left:4px solid; }
.lvx-alert--l1 { background:rgba(251,188,4,.14); border-color:#fbbc04; }
.lvx-alert--l2 { background:rgba(255,145,0,.16); border-color:#ff9100; }
.lvx-alert--l3 { background:rgba(234,67,53,.16); border-color:#ea4335; }
.lvx-alert__ico { flex-shrink:0; }
.lvx-alert__src { margin-left:auto; font-size:12px; font-weight:400; color:var(--lvx-ink-3); cursor:help; }
.lvx-gap { margin-top:8px; padding:10px 14px; border:1px dashed var(--lvx-line); border-radius:10px; font-size:12.5px; color:var(--lvx-ink-2); background:var(--lvx-card); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .lvx-current__facts { margin-left:0; width:100%; flex-direction:row; flex-wrap:wrap; gap:8px 18px; }
  .lvx-controls { gap:8px; }
  .lvx-tabs { flex:1; }
  .lvx-tab { flex:1; text-align:center; }
  .lvx-rep { margin:0; width:100%; }
  .lvx-rep button { flex:1; text-align:center; }
  .lvx-hrow { grid-template-columns:52px 38px 1fr 1fr 1.1fr; gap:6px; padding:9px 10px; font-size:13px; }
  .lvx-period { grid-template-columns:84px 34px 1fr; }
}

@media (prefers-reduced-motion:reduce) { .lvx-boot__spinner { animation:none; } .lvx * { transition:none!important; } }

/* ── Striscia nubi del meteogramma (alte / medie / basse) ────────────────────
   Tre corsie sovrapposte come su yr: l'opacità porta la copertura, la tinta
   distingue la quota. Gli strati NON si sommano (si sovrappongono in verticale),
   quindi restano corsie separate e non una barra unica. */
.lvx-mg-cl--high { fill:#9aa7b8; }
.lvx-mg-cl--mid  { fill:#6b7a8f; }
.lvx-mg-cl--low  { fill:#3d4a5c; }
[data-theme="dark"] .lvx-mg-cl--high { fill:#8fa0b5; }
[data-theme="dark"] .lvx-mg-cl--mid  { fill:#b0bccb; }
[data-theme="dark"] .lvx-mg-cl--low  { fill:#d6dee8; }
.lvx-mg-legend__sw--chigh { height:9px; border-radius:2px; background:#9aa7b8; }
.lvx-mg-legend__sw--cmid  { height:9px; border-radius:2px; background:#6b7a8f; }
.lvx-mg-legend__sw--clow  { height:9px; border-radius:2px; background:#3d4a5c; }
[data-theme="dark"] .lvx-mg-legend__sw--chigh { background:#8fa0b5; }
[data-theme="dark"] .lvx-mg-legend__sw--cmid  { background:#b0bccb; }
[data-theme="dark"] .lvx-mg-legend__sw--clow  { background:#d6dee8; }

/* ── Pannello umidità ────────────────────────────────────────────────────────
   Tinta neutra (come su yr, che la disegna in nero): le quattro grandezze
   "colorate" — temperatura, precipitazione, vento, nubi — restano distinguibili
   fra loro senza aggiungere una quinta tinta in competizione. */
.lvx { --lvx-hum: #3f4a5a; }
[data-theme="dark"] .lvx { --lvx-hum: #aab6c6; }
.lvx-mg-hum { stroke:var(--lvx-hum); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.lvx-mg-hband { fill:url(#lvx-h-hum); stroke:var(--lvx-hum); stroke-width:.6; stroke-opacity:.3; }
.lvx-hl--hum { stroke:var(--lvx-hum); opacity:.55; }
.lvx-mg-axis--hum { fill:var(--lvx-hum); }
.lvx-mg-legend__sw--hum { background:var(--lvx-hum); }
.lvx-mg-legend__sw--hband { height:11px; border-radius:2px;
  background-image:repeating-linear-gradient(45deg, var(--lvx-hum) 0 1px, transparent 1px 4px); }
.lvx-mgtip--hum { color:var(--lvx-hum)!important; }

/* Minima e massima del giorno nei grafici di temperatura e umidità (14/10/2026):
   pallino sulla curva e valore con un alone del colore della card, leggibile sopra
   griglia e bande. Pioggia zero: segmento blu spesso sullo zero. */
.lvx-mg-ext { stroke:var(--lvx-card); stroke-width:1.5; }
.lvx-mg-ext.lvx-mg-ext--temp { fill:var(--lvx-temp); }
.lvx-mg-ext.lvx-mg-ext--hum { fill:var(--lvx-hum); }
.lvx-mg-extv { font:600 11px/1 var(--font-family, Inter, sans-serif); paint-order:stroke; stroke:var(--lvx-card); stroke-width:3px; stroke-linejoin:round; }
.lvx-mg-extv.lvx-mg-ext--temp { fill:var(--lvx-temp); }
.lvx-mg-extv.lvx-mg-ext--hum { fill:var(--lvx-hum); }
.lvx-mg-legend__sw--ext { width:8px; height:8px; border-radius:50%; background:var(--lvx-ink-2); }
/* minime della temperatura in blu (Marco, 14/10/2026) */
.lvx { --lvx-tmin: #1d5fbf; }
[data-theme="dark"] .lvx { --lvx-tmin: #6aa8ff; }
.lvx-mg-ext.lvx-mg-ext--tmin, .lvx-mg-extv.lvx-mg-ext--tmin { fill:var(--lvx-tmin); }
.lvx-mg-legend__sw--tmax { background:var(--lvx-temp); }
.lvx-mg-legend__sw--tmin { background:var(--lvx-tmin); }
.lvx-mg-ext.lvx-mg-ext--gust, .lvx-mg-extv.lvx-mg-ext--gust { fill:var(--lvx-wind); }
.lvx-mg-legend__sw--gmax { background:var(--lvx-wind); }
.lvx-mg-precip--zero { fill:var(--lvx-precip); opacity:.75; }

/* ═══ Riepilogo server-side (#1224) ═══════════════════════════════════════════
   Su /location/<slug> la shell (location/index.php) scrive dentro #lvx-root il
   riepilogo testuale (.ssr-*) e, fuori, le località vicine: è ciò che leggono
   i crawler e il primo contenuto per chi arriva. location-views-app.js lo
   sostituisce con la previsione appena è pronta.
   Copia delle regole di location.css (congelata con location.html): le
   variabili globali vengono da app.css. */
.lvx .ssr-summary {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: var(--lvx-radius);
  background: var(--lvx-card);
  border: 1px solid var(--lvx-line);
  color: var(--lvx-ink);
}
.lvx .ssr-summary__h { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.lvx .ssr-verdict { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; }
.lvx .ssr-days { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 2px; }
.lvx .ssr-day {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(64px, auto) 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--lvx-line-2);
  font-size: 14.5px;
}
.lvx .ssr-day:last-child { border-bottom: 0; }
.lvx .ssr-day__mm { color: var(--lvx-ink-2); }
.lvx .ssr-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lvx-ink-2); }
.lvx .ssr-note a, .lvx .ssr-nearby a { color: var(--lvx-precip); }
.lvx .ssr-nearby { margin-top: 10px; font-size: 12.5px; color: var(--lvx-ink-2); line-height: 1.9; }
.lvx .ssr-nearby a { margin-right: 6px; }
@media (max-width: 560px) {
  .lvx .ssr-day { grid-template-columns: minmax(76px, auto) minmax(58px, auto) 1fr; }
}
.nearby-locations {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px clamp(12px, 3vw, 22px) calc(64px + var(--safe-area-bottom, 0px));
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* #1226: la barra sta fuori da .lvx: blu più scuro in chiaro (AA 4,89 sul fondo pagina), --primary in scuro */
.nearby-locations a { color: #1765cc; text-decoration: none; }
.nearby-locations a:hover { text-decoration: underline; }
/* #1224: «Torna alla versione precedente» (solo quando la shell serve la nuova). */
.lvx-classica { margin: 14px 0 0; text-align: center; font-size: 13px; }
.lvx-classica a { color: var(--lvx-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.lvx-classica a:hover { color: var(--lvx-ink); }

/* #1226 punto 4.1: come è andata ieri (verifica locale) */
.lvx-verifica { margin-top:14px; background:var(--lvx-card); border:1px solid var(--lvx-line); border-radius:var(--lvx-radius); padding:14px clamp(14px,3vw,20px); }
.lvx-verifica__h { margin:0 0 6px; font:600 13px/1.2 var(--font-family); color:var(--lvx-ink-2); }
.lvx-verifica__txt { margin:0; font-size:15px; line-height:1.5; color:var(--lvx-ink); }
.lvx-verifica__stats { margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--lvx-ink-2); }
.lvx-verifica__det { margin-top:8px; font-size:13.5px; }
.lvx-verifica__det summary { cursor:pointer; color:var(--lvx-precip); min-height:32px; display:flex; align-items:center; }
.lvx-verifica__tab { width:100%; border-collapse:collapse; margin-top:4px; font-size:13px; }
.lvx-verifica__tab th, .lvx-verifica__tab td { padding:5px 6px; text-align:right; border-bottom:1px solid var(--lvx-line-2); font-weight:400; }
.lvx-verifica__tab thead th { color:var(--lvx-ink-3); font-size:12px; }
.lvx-verifica__tab tbody th { text-align:left; white-space:nowrap; }
.lvx-verifica__src { margin:8px 0 0; font-size:11.5px; line-height:1.45; color:var(--lvx-ink-3); }
.lvx-nowcast--attesa .lvx-nowcast__txt { color:var(--lvx-ink-3); }
.lvx-summary--attesa { border-top-color:transparent; }
.lvx-r2h__sw--nd { height:0; border-top:2px dotted var(--lvx-ink-3); border-radius:0; }
[data-theme="dark"] .nearby-locations a { color: var(--primary); }