/* Valanghe Live Map — stile del blocco mappa.
 *
 * Gira dentro temi diversi (aptica-notizie su www, GeneratePress child dei
 * locali, notizie-it-v3 di milano): tutto è scoped su .vlm. Nessun web font.
 * Oggi/domani è CSS puro: due radio prima del corpo, selettori `~`.
 *
 * Colori: scala ufficiale EAWS (1 #ccff66, 2 #ffff00, 3 #ff9900, 4 #ff0000,
 * 5 a scacchi rosso-nero = pattern #vlm-p5 nell'SVG). Non vanno «addolciti»: sono
 * quelli che il lettore trova su ogni bollettino europeo.
 */

.vlm {
	--vlm-bg: #fff;
	--vlm-ink: #1a1a1a;
	--vlm-mute: #6b7280;
	--vlm-line: #e5e7eb;
	--vlm-1: #ccff66;
	--vlm-2: #ffff00;
	--vlm-3: #ff9900;
	--vlm-4: #ff0000;
	--vlm-0: #ffffff;
	--vlm-na: #d6dae0;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.75rem 0;
	padding: 1rem 1.1rem 0.85rem;
	background: var(--vlm-bg);
	border: 1px solid var(--vlm-line);
	border-radius: 10px;
	color: var(--vlm-ink);
	font-size: 15px;
	line-height: 1.45;
}

.vlm *, .vlm *::before, .vlm *::after { box-sizing: inherit; }

/* ── testata ─────────────────────────────────────────────────────── */

.vlm-head { padding-bottom: 0.7rem; border-bottom: 1px solid var(--vlm-line); }
.vlm-title { margin: 0; font-size: 1.25rem; line-height: 1.2; font-weight: 700; }
.vlm-sub { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--vlm-mute); }
.vlm-issued { margin-left: 0.25em; }

.vlm-notice {
	margin: 0.8rem 0 0.2rem;
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	background: #f1f5f9;
	border-left: 4px solid #64748b;
	font-size: 0.9rem;
}
.vlm-notice--stale, .vlm-notice--expired { background: #fff7ed; border-left-color: #ea580c; }

/* ── oggi / domani ───────────────────────────────────────────────── */

.vlm-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.vlm-tabs { display: flex; gap: 0.4rem; margin: 0.8rem 0 0.2rem; }
.vlm-tab {
	flex: 1 1 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--vlm-line);
	border-radius: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
	color: var(--vlm-mute);
	cursor: pointer;
}
.vlm-pick-a:checked ~ .vlm-tabs .vlm-tab-a,
.vlm-pick-b:checked ~ .vlm-tabs .vlm-tab-b { border-color: var(--vlm-ink); color: var(--vlm-ink); background: #f8fafc; }
.vlm-pick-a:focus-visible ~ .vlm-tabs .vlm-tab-a,
.vlm-pick-b:focus-visible ~ .vlm-tabs .vlm-tab-b { outline: 2px solid #2563eb; outline-offset: 2px; }

.vlm-day { margin: 0.8rem 0 0.2rem; font-weight: 700; }

.vlm-body .vlm-b { display: none; }
.vlm-pick-b:checked ~ .vlm-body .vlm-a { display: none; }
.vlm-pick-b:checked ~ .vlm-body .vlm-b { display: block; }

.vlm-sum { margin: 0.6rem 0 0; }

/* ── mappa ───────────────────────────────────────────────────────── */

.vlm-mapwrap { margin: 0.8rem auto 0.4rem; }
.vlm-map { display: block; width: 100%; height: auto; }

.vlm-reg { fill: #f3f4f6; stroke: #c3c8d0; stroke-width: var(--vlm-sw, 0.6); stroke-linejoin: round; }
.vlm-reg--own { fill: #eceff3; stroke: #8a929e; }

.vlm-z {
	fill: var(--vlm-na);
	stroke: #fff;
	stroke-width: calc(var(--vlm-sw, 0.6) * 0.8);
	stroke-linejoin: round;
	fill-rule: evenodd;
}
.vlm-ctx { opacity: 0.55; }

/* Vista a (default) */
.vlm-z[data-a="0"]  { fill: var(--vlm-0); stroke: #b8c2cc; }
.vlm-z[data-a="1"]  { fill: var(--vlm-1); }
.vlm-z[data-a="2"]  { fill: var(--vlm-2); }
.vlm-z[data-a="3"]  { fill: var(--vlm-3); }
.vlm-z[data-a="4"]  { fill: var(--vlm-4); }
.vlm-z[data-a="5"]  { fill: url(#vlm-p5); }
.vlm-z[data-a="x"]  { fill: url(#vlm-px); }

/* Vista b, quando si sceglie «domani» */
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="na"] { fill: var(--vlm-na); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="0"]  { fill: var(--vlm-0); stroke: #b8c2cc; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="1"]  { fill: var(--vlm-1); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="2"]  { fill: var(--vlm-2); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="3"]  { fill: var(--vlm-3); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="4"]  { fill: var(--vlm-4); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="5"]  { fill: url(#vlm-p5); stroke: #fff; }
.vlm-pick-b:checked ~ .vlm-body .vlm-z[data-b="x"]  { fill: url(#vlm-px); }

.vlm-st { fill: #1d4ed8; stroke: #fff; stroke-width: calc(var(--vlm-sw, 0.6) * 0.7); }
.vlm-city circle { fill: #111827; stroke: #fff; stroke-width: calc(var(--vlm-sw, 0.6) * 0.9); }
.vlm-city text { fill: #111827; font-family: system-ui, sans-serif; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: calc(var(--vlm-sw, 0.6) * 2.5); }

/* Bollettini scaduti scoperti dal JS: niente colori né elenchi. */
.vlm--expired .vlm-z:not([data-a="x"]) { fill: var(--vlm-na) !important; stroke: #fff !important; }
.vlm--expired .vlm-sum,
.vlm--expired .vlm-lists,
.vlm--expired .vlm-empty,
.vlm--expired .vlm-pending,
.vlm--expired .vlm-stations,
.vlm--expired .vlm-st,
.vlm--expired .vlm-tabs,
.vlm--expired .vlm-day,
.vlm--expired .vlm-issued,
.vlm--expired .vlm-legend li:nth-child(-n+5) { display: none !important; }

/* ── legenda ─────────────────────────────────────────────────────── */

.vlm-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: 0.5rem 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: #374151;
}
.vlm-legend li { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.vlm-sw, .vlm-mark {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: var(--vlm-na);
}
.vlm-sw--0 { background: var(--vlm-0); }
.vlm-sw--1, .vlm-mark--1 { background: var(--vlm-1); }
.vlm-sw--2, .vlm-mark--2 { background: var(--vlm-2); }
.vlm-sw--3, .vlm-mark--3 { background: var(--vlm-3); }
.vlm-sw--4, .vlm-mark--4 { background: var(--vlm-4); }
.vlm-sw--5, .vlm-mark--5 { background: repeating-conic-gradient(#000 0 25%, #e00000 0 50%) 0 0 / 0.45rem 0.45rem; }
.vlm-sw--x { background: repeating-linear-gradient(45deg, #c7ccd4 0 2px, #e5e7eb 2px 5px); }

/* ── elenchi ─────────────────────────────────────────────────────── */

.vlm-group { border-top: 1px solid var(--vlm-line); }
.vlm-group > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.55rem;
	padding: 0.5rem 0;
	cursor: pointer;
	list-style: none;
}
.vlm-group > summary::-webkit-details-marker { display: none; }
.vlm-group > summary::after { content: "+"; margin-left: auto; color: var(--vlm-mute); font-weight: 700; }
.vlm-group[open] > summary::after { content: "–"; }
.vlm-gmax { color: var(--vlm-mute); font-size: 0.85rem; }

.vlm-list { margin: 0.2rem 0 0.4rem; padding: 0; list-style: none; }
.vlm-item {
	display: grid;
	grid-template-columns: 1rem 1fr;
	column-gap: 0.55rem;
	row-gap: 0.1rem;
	padding: 0.45rem 0;
	border-top: 1px solid #f1f2f4;
	font-size: 0.9rem;
}
.vlm-item > .vlm-mark { grid-row: 1 / span 4; margin-top: 0.2rem; }
.vlm-where strong { margin-right: 0.4rem; }
.vlm-prov, .vlm-prob, .vlm-snow { color: var(--vlm-mute); font-size: 0.82rem; }
.vlm-empty, .vlm-pending { margin: 0.5rem 0; font-size: 0.88rem; color: var(--vlm-mute); }

/* ── stazioni ────────────────────────────────────────────────────── */

.vlm-h3 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.vlm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vlm-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.vlm-table th, .vlm-table td { padding: 0.35rem 0.45rem; border-bottom: 1px solid #f1f2f4; text-align: left; white-space: nowrap; }
.vlm-table thead th { color: var(--vlm-mute); font-weight: 600; border-bottom-color: var(--vlm-line); }
.vlm-table tbody th { font-weight: 600; white-space: normal; }
.vlm-note { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--vlm-mute); }

/* ── fonti e piede ───────────────────────────────────────────────── */

.vlm-sources { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--vlm-line); font-size: 0.85rem; }
.vlm-sources p { margin: 0 0 0.4rem; }
.vlm-foot { margin-top: 0.4rem; font-size: 0.82rem; color: #374151; }
.vlm-foot p { margin: 0 0 0.45rem; }
.vlm-credits { color: var(--vlm-mute); font-size: 0.78rem; }
.vlm-mm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
/* Il logo ufficiale ha le scritte bianche (è fatto per la testata scura del sito Meteomont):
 * su fondo bianco sparirebbe, e la sua presenza è una condizione del riuso. */
.vlm-mm a { display: inline-block; padding: 5px 9px; background: #10304f; border-radius: 4px; line-height: 0; }
.vlm-mm img { display: block; width: 183px; max-width: 100%; height: auto; }
.vlm a { color: #1d4ed8; }

/* ── FAQ ─────────────────────────────────────────────────────────── */

.vlm-faq { margin: 1.75rem 0; }
.vlm-faq-title { font-size: 1.15rem; margin: 0 0 0.6rem; }
.vlm-faq-item { border-top: 1px solid var(--vlm-line, #e5e7eb); padding: 0.55rem 0; }
.vlm-faq-item summary { cursor: pointer; font-weight: 600; }
.vlm-faq-item p { margin: 0.4rem 0 0; }

@media (max-width: 480px) {
	.vlm { padding: 0.85rem 0.8rem 0.7rem; font-size: 14px; }
	.vlm-tab { font-size: 0.8rem; padding: 0.4rem; }
}