:root {
	color-scheme: light;
	--ink: #1c2430;
	--muted: #5c6b7a;
	--paper: #eef1f4;
	--card: #ffffff;
	--line: #e2e8ee;
	--brand: #0b3a5b;
	--focus: #0b3a5b;
	--online: #14532d;
	--stale: #7c4a03;
	--offline: #7f1d1d;
	--flow: #1d4ed8;
	--supply: #b45309;
	--hood: #9a3412;
	--queue: #047857;
	--service: #0f766e;
	--unknown: #64748b;
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
	margin: 0;
	font: 16px/1.45 system-ui, sans-serif;
	color: var(--ink);
	background: var(--paper);
}

.skip {
	position: absolute;
	left: 0.5rem;
	top: -3rem;
	background: var(--card);
	padding: 0.4rem 0.6rem;
}

.skip:focus { top: 0.5rem; }

.top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8rem 1.4rem;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 0.7rem; }

.brand img { width: 2rem; height: 2rem; border-radius: 0.4rem; }

.eyebrow {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}

.top h1 { font-size: 1.2rem; margin: 0; color: var(--brand); }

.session { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; }

.session p { margin: 0; font-size: 0.85rem; color: var(--muted); }

.top button, #login button, #back, #more-events, button.card {
	font: inherit;
	cursor: pointer;
}

.top button, #login button, #back, #more-events, button.card {
	background: var(--brand);
	color: #f8fafc;
	border: 0;
	border-radius: 6px;
	padding: 0.45rem 0.85rem;
}

#back, button.card { background: var(--card); color: var(--brand); border: 1px solid var(--line); }

main { padding: 1.1rem; max-width: 76rem; margin: 0 auto; }

.lead { color: var(--muted); margin: 0.2rem 0 0; }

#login {
	max-width: 24rem;
	margin: 2rem auto;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 1.2rem;
}

label { display: block; font-weight: 600; margin-top: 0.8rem; font-size: 0.9rem; }

#login input, #login button { display: block; }

#login button { margin-top: 1rem; }

input, select {
	font: inherit;
	width: min(100%, 22rem);
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	color: var(--ink);
}

.overview-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8rem 1.2rem;
	align-items: end;
	margin-bottom: 0.8rem;
}

.overview-head h2, #detail h2, #detail h3 { margin: 0.2rem 0; }

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pills li {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	font-size: 0.88rem;
}

.pills span { font-weight: 700; font-variant-numeric: tabular-nums; }

.pill-online { color: var(--online); }
.pill-stale { color: var(--stale); }
.pill-offline { color: var(--offline); }

#filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: end;
	margin-bottom: 0.9rem;
}

#board {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 0.9rem;
}

.station {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 0.95rem 1rem 0.85rem;
	min-width: 0;
}

.station-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: flex-start; }

.station h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }

.proj { margin: 0.1rem 0 0; color: var(--muted); overflow-wrap: anywhere; }

.badge {
	margin: 0;
	font-weight: 700;
	font-size: 0.82rem;
	white-space: nowrap;
}

.badge[data-health="online"] { color: var(--online); }
.badge[data-health="stale"] { color: var(--stale); }
.badge[data-health="offline"] { color: var(--offline); }

.sample, .evcount { margin: 0.55rem 0 0; font-size: 0.88rem; color: var(--muted); }

.mini {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
	margin-top: 0.75rem;
}

.mini p {
	margin: 0;
	background: var(--paper);
	border-radius: 8px;
	padding: 0.4rem 0.5rem;
	min-width: 0;
}

.mini .k { display: block; font-size: 0.75rem; color: var(--muted); }
.mini .v { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.evline { margin: 0.35rem 0 0; font-size: 0.88rem; overflow-wrap: anywhere; }

button.card { margin-top: 0.8rem; }

.detail-top { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.6rem; }

#detail-health { margin: 0.25rem 0 0; font-weight: 700; }

#detail-sample { margin: 0.15rem 0 0; color: var(--muted); }

.metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0.5rem 0 1.2rem;
}

.metrics-hero .value { font-size: 2rem; }

.metric {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--unknown);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 0.8rem 0.85rem 0.7rem;
	min-width: 0;
}

.tone-flow { border-top-color: var(--flow); }
.tone-supply { border-top-color: var(--supply); }
.tone-hood { border-top-color: var(--hood); }
.tone-queue { border-top-color: var(--queue); }
.tone-service { border-top-color: var(--service); }
.tone-unknown { border-top-color: var(--unknown); }

.metric h4 { margin: 0; font-size: 0.98rem; }

.note, .avail { color: var(--muted); font-size: 0.8rem; margin: 0.25rem 0 0; }

.value { font-size: 1.55rem; margin: 0.35rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.event-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
	margin-bottom: 0.8rem;
}

.event-cols section {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 0.8rem;
	min-width: 0;
}

.event-cols h4 { margin: 0; }

.event-cols ul { list-style: none; padding: 0; margin: 0.6rem 0 0; }

.event-cols li {
	border-top: 1px solid var(--line);
	padding: 0.65rem 0;
}

.ev-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ev-when, .ev-where { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }

.event-cols details { margin-top: 0.35rem; }

.meta { margin: 0.3rem 0 0; padding-left: 1rem; overflow-wrap: anywhere; }

#tech {
	margin-top: 1rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0.7rem 0.9rem;
}

#tech summary { cursor: pointer; font-weight: 700; }

dl { display: grid; grid-template-columns: 12rem 1fr; gap: 0.25rem 0.7rem; margin: 0.7rem 0 0.2rem; }

dt { font-weight: 600; }
dd { margin: 0; overflow-wrap: anywhere; }

#more-events { margin-bottom: 0.6rem; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

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

@media (max-width: 1100px) {
	.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.event-cols { grid-template-columns: 1fr; }
	dl { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.metrics, .mini { grid-template-columns: 1fr; }
	.top, .detail-top, .station-head { align-items: flex-start; }
	.badge { white-space: normal; }
}