/* STUB stylesheet — the presentation track (B1) replaces this with the real design system.
   Only invariants here: the four state colours exist as custom properties, dark mode responds
   to prefers-color-scheme, layout is phone-first with no horizontal scroll. */
:root {
	--state-operational: #2e7d32;
	--state-degraded: #ef6c00;
	--state-outage: #c62828;
	--state-maintenance: #1565c0;
	--bg: #ffffff;
	--fg: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121212;
		--fg: #eaeaea;
	}
}

body {
	font-family: system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--fg);
	max-width: 40rem;
	margin: 0 auto;
	padding: 1rem;
	overflow-x: hidden;
}

[data-state='operational'] { color: var(--state-operational); }
[data-state='degraded'] { color: var(--state-degraded); }
[data-state='outage'] { color: var(--state-outage); }
[data-state='maintenance'] { color: var(--state-maintenance); }

.uptime-bars {
	display: flex;
	gap: 1px;
	list-style: none;
	padding: 0;
	height: 1.5rem;
}

.uptime-bars li { flex: 1; background: var(--state-operational); }
.uptime-bars li[data-kind='not_measured'] { background: #9e9e9e55; }
.uptime-bars li[data-kind='degraded'] { background: var(--state-degraded); }
.uptime-bars li[data-kind='outage'] { background: var(--state-outage); }
.uptime-bars li[data-kind='maintenance'] { background: var(--state-maintenance); }