/* WetterNieso – Darstellung. Farben über Variablen anpassbar, z. B. im Customizer:
   .wwn { --wwn-accent: #c00; } */
.wwn {
	--wwn-accent: #1971c2;
	--wwn-border: rgba(128, 128, 128, 0.28);
	--wwn-soft: rgba(128, 128, 128, 0.08);
	--wwn-muted: rgba(128, 128, 128, 0.95);
	--wwn-warn: #c92a2a;
	margin: 1.5em 0;
	font-variant-numeric: tabular-nums;
}
.wwn *, .wwn *::before, .wwn *::after { box-sizing: border-box; }
.wwn-loading, .wwn-empty, .wwn-stamp, .wwn-hint { color: var(--wwn-muted); font-size: 0.875em; }
.wwn-error { color: var(--wwn-warn); }

/* Buttons */
.wwn-btn {
	appearance: none;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.2;
	padding: 0.45em 0.9em;
	border: 1px solid var(--wwn-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.wwn-btn:hover { background: var(--wwn-soft); }
.wwn-btn:focus-visible { outline: 2px solid var(--wwn-accent); outline-offset: 2px; }
.wwn-btn.is-active { background: var(--wwn-accent); border-color: var(--wwn-accent); color: #fff; }
.wwn-btn-small { font-size: 0.8em; padding: 0.3em 0.75em; }
.wwn-ranges { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.9em; }

/* Sensorauswahl */
.wwn-picker {
	border: 1px solid var(--wwn-border);
	border-radius: 10px;
	padding: 0.6em 0.9em;
	margin-bottom: 1em;
}
.wwn-picker > summary { cursor: pointer; font-weight: 600; }
.wwn-picker-count { font-weight: 400; color: var(--wwn-muted); }
.wwn-picker[open] > summary { margin-bottom: 0.6em; }
.wwn-picker-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; margin: 0.45em 0; }
.wwn-picker-title { width: 100%; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wwn-muted); }
.wwn-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.7em 0.25em 0.5em;
	border: 1px solid var(--wwn-border);
	border-radius: 999px;
	font-size: 0.875em;
	cursor: pointer;
	user-select: none;
}
.wwn-chip:has(input:checked) { border-color: var(--wwn-accent); background: color-mix(in srgb, var(--wwn-accent) 12%, transparent); }
.wwn-chip input { margin: 0; accent-color: var(--wwn-accent); }
.wwn-picker-actions { display: flex; gap: 0.4em; margin-top: 0.6em; }

/* Kacheln */
.wwn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); gap: 0.75em; }
.wwn-tile {
	border: 1px solid var(--wwn-border);
	border-radius: 12px;
	padding: 0.8em 0.95em;
	min-width: 0;
}
.wwn-tile.is-water { border-color: var(--wwn-accent); background: color-mix(in srgb, var(--wwn-accent) 7%, transparent); }
.wwn-tile-label { font-size: 0.85em; color: var(--wwn-muted); }
.wwn-tile-value { font-size: 1.6em; font-weight: 700; line-height: 1.25; margin: 0.15em 0; overflow-wrap: anywhere; }
.wwn-tile-time { font-size: 0.75em; color: var(--wwn-muted); }
.wwn-tile.is-stale .wwn-tile-value { opacity: 0.55; }
.wwn-tile.is-stale .wwn-tile-time { color: var(--wwn-warn); }

/* Diagramme */
.wwn-charts { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.wwn-charts.is-loading { opacity: 0.45; transition: opacity 0.2s; }
.wwn-chart { margin: 0; min-width: 0; }
.wwn-chart > figcaption { font-weight: 600; margin-bottom: 0.25em; }
.wwn .uplot { font-family: inherit; }
.wwn .u-legend { font-size: 0.8em; text-align: left; margin-top: 0.15em; }
.wwn .u-legend .u-series { padding: 0.1em 0.6em 0.1em 0; }
.wwn .u-legend .u-series > * { padding: 0.15em 0.2em; }
.wwn .u-legend th { font-weight: 500; }
.wwn .u-legend .u-value { font-weight: 600; }
.wwn .u-cursor-x { border-right-color: var(--wwn-muted); }