/* Live Weerdata -- analoge gauges-dashboard (alternatief voor de tekstlijst-
   pagina "Actueel weer"). Alles hieronder is bewust gescoped onder
   .hwa-livedata zodat er niets lekt naar/botst met de rest van de site- of
   thema-CSS; system-font-stack i.p.v. custom webfonts (geen Google Fonts-
   hotlinking op de publieke site, zie het technisch plan). */

.hwa-livedata {
	--ld-panel: #ffffff;
	--ld-border: #d7e1ea;
	--ld-face: #fbfcfe;
	--ld-grid: #c9d5e0;
	--ld-ink: #182430;
	--ld-muted: #5b6b7c;
	--ld-muted-2: #8798a8;
	--ld-accent: #2569c9;
	--ld-accent-soft: #e5edf9;
	--ld-warm: #d9820f;
	--ld-good: #2f9e5c;
	--ld-warn: #c98a12;
	--ld-crit: #cf4638;
	--ld-extreme: #7a4bc4;
	--ld-needle: #1b2733;
	--ld-shadow: 0 1px 2px rgba(20,40,60,.07), 0 6px 16px -10px rgba(20,40,60,.2);

	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--ld-ink);
	max-width: 1080px;
}

.hwa-livedata * { box-sizing: border-box; }

.livedata-terug { margin: 0 0 10px; font-size: .9rem; }
.livedata-terug a { text-decoration: none; color: var(--ld-accent); }
.livedata-terug a:hover { text-decoration: underline; }

.hwa-livedata .section-label {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ld-muted-2); margin: 18px 0 10px;
}

.hwa-livedata .hero-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-bottom: 6px;
}
.hwa-livedata .secondary-grid {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-bottom: 10px;
}

.hwa-livedata .card {
	background: var(--ld-panel); border: 1px solid var(--ld-border); border-radius: 14px;
	box-shadow: var(--ld-shadow); padding: 14px 12px 12px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	transition: opacity .3s ease, filter .3s ease;
}
.hwa-livedata .card.gauge--storing { opacity: .55; filter: grayscale(1); }
.hwa-livedata .card.gauge--storing::after {
	content: "sensor buiten gebruik"; display: block; margin-top: 6px;
	font-size: .68rem; color: var(--ld-crit); font-weight: 600;
}

.hwa-livedata .card h3 { font-size: .95rem; font-weight: 700; margin: 0 0 2px; }
.hwa-livedata .card .sub { font-size: .72rem; color: var(--ld-muted-2); margin: 0 0 4px; }
.hwa-livedata .card .sub2 { font-size: .76rem; color: var(--ld-muted); margin-top: 3px; }

.hwa-livedata .gauge-svg { width: 100%; height: auto; max-width: 210px; }

/* Draaipunt van de naald zit al volledig in de rotate(angle,cx,cy)-transform
   die JS meegeeft -- transform-origin moet dus GEEN eigen origin toevoegen,
   anders draait de naald om het verkeerde punt (echte bug geweest, zie de
   Weerstation-Cockpit-mockup waar dit is gevonden en gefixt). */
.hwa-livedata .ld-needle-grp {
	transform-box: view-box; transform-origin: 0 0;
	transition: transform .8s cubic-bezier(.34,1.4,.4,1);
}
@media (prefers-reduced-motion: reduce) {
	.hwa-livedata .ld-needle-grp { transition: none; }
}

.hwa-livedata .readout { margin-top: 2px; }
.hwa-livedata .readout .value {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-weight: 600; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.hwa-livedata .hero-card .readout .value { font-size: 1.9rem; }
.hwa-livedata .readout .unit { font-size: .82rem; color: var(--ld-muted); margin-left: 3px; }

.hwa-livedata .chip {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; min-height: 1.2em;
	padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
	background: var(--ld-accent-soft); color: var(--ld-accent);
}

.hwa-livedata .minmax {
	display: flex; gap: 14px; margin-top: 9px; font-size: .72rem; color: var(--ld-muted);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.hwa-livedata .minmax b { color: var(--ld-ink); font-weight: 600; }

.hwa-livedata svg text { fill: var(--ld-muted); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.hwa-livedata svg .ld-facelabel { fill: var(--ld-muted-2); font-family: inherit; font-weight: 600; letter-spacing: .04em; }
.hwa-livedata svg .ld-cardinal { fill: var(--ld-ink); font-family: inherit; font-weight: 700; }