/* ADP-Status — refined dark "control-room". All assets self-hosted; no CDN. */

/* --- Self-hosted fonts (SIL OFL 1.1; see /static/fonts/OFL-*.txt) --- */
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/bricolage-grotesque-600.woff2") format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/static/fonts/bricolage-grotesque-700.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
	color-scheme: dark;

	--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--bg: #0a0c11;
	--bg-2: #0d1016;
	--card: #14171e;
	--card-hover: #191d27;
	--border: #232a37;
	--border-soft: #1a202b;
	--text: #e8ebf2;
	--muted: #8b94a6;
	--faint: #5b6473;

	--accent: #38bdf8;
	--operational: #34d399;
	--degraded: #fbbf24;
	--down: #f87171;
	--unknown: #7f8a99;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--text);
	font-family: var(--font-mono);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background:
		radial-gradient(1100px 520px at 50% -180px, rgba(56, 189, 248, 0.07), transparent 70%),
		linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px) 0 0 / 100% 30px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px) 0 0 / 30px 100%,
		var(--bg);
}

.container {
	max-width: 820px;
	margin: 0 auto;
	padding: 2.75rem 1.25rem 4rem;
}

/* --- Status color token, set per status-* class --- */

.status-operational { --status: var(--operational); }
.status-degraded    { --status: var(--degraded); }
.status-down        { --status: var(--down); }
.status-unknown     { --status: var(--unknown); }

/* --- Hero --- */

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--card), var(--bg-2));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1.7rem 1.8rem 1.55rem;
	margin-bottom: 2.1rem;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--status, var(--unknown)), transparent 85%);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--faint);
}

.eyebrow::before {
	content: "";
	width: 1.4rem;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.overall {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
}

.overall-message {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
}

.overall-in-state {
	margin: 0.55rem 0 0;
	color: var(--muted);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 1.05rem 0 0;
	font-size: 0.82rem;
}

.count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.count-operational { color: var(--operational); }
.count-degraded    { color: var(--degraded); }
.count-down        { color: var(--down); }
.count-unknown     { color: var(--unknown); }

.sep { color: var(--faint); }

.updated {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.generated {
	margin: 0.95rem 0 0;
	color: var(--muted);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.stale-warning {
	margin: 0.7rem 0 0;
	color: var(--degraded);
	font-size: 0.82rem;
	font-weight: 500;
}

/* --- Groups --- */

.group {
	margin-bottom: 1.5rem;
}

.group-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.6rem 0.15rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.group-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--border), transparent);
}

.services {
	background: linear-gradient(180deg, var(--card), var(--bg-2));
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
}

/* --- Service row --- */

.service {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.78rem 1.1rem;
	border-top: 1px solid var(--border-soft);
	transition: background 0.12s ease;
}

.service:first-child {
	border-top: none;
}

.service:hover {
	background: var(--card-hover);
}

/* --- Live indicator (pulses only when operational) --- */

.indicator {
	position: relative;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--unknown);
	box-shadow: 0 0 0 3px rgba(127, 138, 153, 0.14);
}

.hero-indicator {
	width: 13px;
	height: 13px;
}

.status-operational .indicator {
	background: var(--operational);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16), 0 0 9px rgba(52, 211, 153, 0.35);
}

.status-operational .indicator::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: pulse-ring 2.4s ease-out infinite;
}

.status-degraded .indicator {
	background: var(--degraded);
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 0 10px rgba(251, 191, 36, 0.4);
}

.status-down .indicator {
	background: var(--down);
	box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2), 0 0 13px rgba(248, 113, 113, 0.5);
}

.status-unknown .indicator {
	background: var(--unknown);
	box-shadow: 0 0 0 3px rgba(127, 138, 153, 0.14);
}

@keyframes pulse-ring {
	0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
	70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.label {
	flex: none;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--text);
}

.message {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--muted);
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.meta {
	margin-left: auto;
	flex: none;
	color: var(--faint);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.in-state {
	color: var(--muted);
}

.meta-sep {
	margin: 0 0.35rem;
	color: var(--faint);
}

/* --- Badges (tinted, not solid) --- */

.badge {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.26rem 0.6rem;
	border-radius: 7px;
	border: 1px solid transparent;
	min-width: 6em;
	text-align: center;
}

.badge-operational { color: var(--operational); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.26); }
.badge-degraded    { color: var(--degraded);    background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); }
.badge-down        { color: #fecaca;            background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.42); }
.badge-unknown     { color: var(--unknown);     background: rgba(127, 138, 153, 0.12); border-color: rgba(127, 138, 153, 0.26); }

/* --- Section info icon + tooltip --- */

.info {
	position: relative;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.05rem;
	height: 1.05rem;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1;
	color: var(--faint);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 50%;
	cursor: help;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.info:hover,
.info:focus-visible {
	color: var(--text);
	border-color: var(--accent);
	outline: none;
}

.info[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: max-content;
	max-width: 16rem;
	padding: 0.45rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.35;
	color: var(--text);
	background: var(--card-hover);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

.info[data-tip]:hover::after,
.info[data-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* --- Locations section (per-region collapsible cards) --- */

.locations {
	margin-bottom: 1.5rem;
}

.locations-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.7rem 0.15rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.locations-title {
	flex: none;
}

.locations-counts {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* Each region is its own collapsible card, keeping its tally visible when closed. */
.region {
	margin-bottom: 0.85rem;
}

.region:last-child {
	margin-bottom: 0;
}

.region-summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem 0.15rem;
	padding: 0.2rem 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.region-summary::-webkit-details-marker {
	display: none;
}

.region-summary:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.region-caret {
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease;
}

.region[open] .region-caret {
	transform: rotate(90deg);
}

.region-name {
	flex: none;
}

.region-counts {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 0.76rem;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Orchestrated page-load reveal --- */

@keyframes rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.hero,
.group,
.locations {
	animation: rise 0.5s ease both;
}

/* After the first live swap the entrance animation must not replay on refresh. */
html.is-live .hero,
html.is-live .group,
html.is-live .locations {
	animation: none;
}

/* Crossfade just the page content when the refresh script swaps <main>. */
main.container {
	view-transition-name: page;
}

.group:nth-child(2) { animation-delay: 0.05s; }
.group:nth-child(3) { animation-delay: 0.10s; }
.group:nth-child(4) { animation-delay: 0.15s; }
.group:nth-child(5) { animation-delay: 0.20s; }
.group:nth-child(6) { animation-delay: 0.25s; }
.group:nth-child(7) { animation-delay: 0.30s; }
.group:nth-child(8) { animation-delay: 0.35s; }

/* --- Responsive --- */

@media (max-width: 560px) {
	.container {
		padding: 1.9rem 1rem 3rem;
	}
	.overall-message {
		font-size: 1.4rem;
	}
	.service {
		flex-wrap: wrap;
		row-gap: 0.3rem;
	}
	.message {
		flex: 1 1 100%;
		order: 3;
		white-space: normal;
	}
	.meta {
		order: 2;
	}
	.badge {
		order: 4;
	}
}

/* --- Respect reduced-motion: kill all pulses/reveals --- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}