/* BrandedMark status. Self-hosted Plus Jakarta Sans; navy #241E61, green #00A86B, lime #CFF710. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plus-jakarta-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plus-jakarta-sans-600.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plus-jakarta-sans-700.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-800.woff2) format('woff2'); }

:root {
	--navy: #241E61;
	--green: #00A86B;
	--lime: #CFF710;
	--bg: #F6F6FB;
	--surface: #FFFFFF;
	--text: #1A1640;
	--muted: #4B4870;
	--border: #DDDBEA;
	--link: #241E61;
	--focus: #241E61;
	/* Text colours: at least 4.5:1 on --surface. */
	--t-operational: #00704A;
	--t-degraded: #8A4B00;
	--t-outage: #B3261E;
	--t-maintenance: #1D4ED8;
	--t-unknown: #55526F;
	/* Bar fills: at least 3:1 against --surface. */
	--b-operational: #00A86B;
	--b-degraded-1: #D97706;
	--b-degraded-2: #92400E;
	--b-outage: #C62828;
	--b-maintenance: #2563EB;
	--b-maintenance-dot: #BFD3FB;
	--b-nodata: #8C89A6;
	--tip-bg: #1A1640;
	--tip-text: #FFFFFF;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0F0D24;
		--surface: #18153A;
		--text: #ECEBF7;
		--muted: #B7B4D3;
		--border: #2E2A5C;
		--link: #D9F55C;
		--focus: #CFF710;
		--t-operational: #4ADE9A;
		--t-degraded: #FBBF24;
		--t-outage: #FF8A80;
		--t-maintenance: #93C5FD;
		--t-unknown: #C9C6E0;
		--b-operational: #00A86B;
		--b-degraded-1: #F59E0B;
		--b-degraded-2: #B45309;
		--b-outage: #EF4444;
		--b-maintenance: #3B82F6;
		--b-maintenance-dot: #1E3A8A;
		--b-nodata: #6E6A99;
		--tip-bg: #ECEBF7;
		--tip-text: #1A1640;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1rem/1.55 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.0625rem; margin: 0; }
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--surface); color: var(--text); padding: 0.5rem 1rem; border: 2px solid var(--focus); }
.skip:focus { top: 1rem; }

.site { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.125rem; }
.brand img { display: block; height: 3rem; width: auto; border-radius: 0.5rem; }
@media (prefers-color-scheme: dark) { .brand img { background: #FFFFFF; padding: 0.125rem 0.375rem; } }
.brand-suffix { padding-left: 0.75rem; border-left: 2px solid var(--border); }
.site nav { display: flex; gap: 1rem; font-size: 0.9375rem; }
.site nav a { display: inline-block; padding: 0.25rem 0; min-height: 24px; }

.banner {
	display: flex; gap: 1rem; align-items: center;
	margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-radius: 1rem;
	background: var(--navy); color: #FFFFFF;
}
.banner h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.banner p { margin: 0.25rem 0 0; color: #E4E2F5; }
.banner .icon { width: 2.5rem; height: 2.5rem; flex: none; }
.banner.lv-operational .icon { color: var(--lime); }
.banner.lv-degraded .icon { color: #FBBF24; }
.banner.lv-outage .icon { color: #FF8A80; }
.banner.lv-maintenance .icon { color: #93C5FD; }
.banner.lv-unknown .icon { color: #D6D3F0; }
.banner.lv-outage { background: #5C1010; }

.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
.badge { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.lv-operational .icon, .badge.lv-operational { color: var(--t-operational); }
.lv-degraded .icon, .badge.lv-degraded { color: var(--t-degraded); }
.lv-outage .icon, .badge.lv-outage { color: var(--t-outage); }
.lv-maintenance .icon, .badge.lv-maintenance { color: var(--t-maintenance); }
.lv-unknown .icon, .badge.lv-unknown { color: var(--t-unknown); }

.legend { color: var(--muted); font-size: 0.9375rem; }
.key { display: inline-flex; align-items: center; gap: 0.375rem; margin-right: 1rem; white-space: nowrap; }
.swatch { display: inline-block; width: 0.75rem; height: 1rem; border-radius: 2px; }

.components { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; }
.component { padding: 1.25rem 1.5rem; }
.component + .component { border-top: 1px solid var(--border); }
.component-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.desc { margin: 0.25rem 0 0.75rem; color: var(--muted); font-size: 0.9375rem; }
.meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 0; color: var(--muted); font-size: 0.875rem; }

.bars { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; height: 2.25rem; }
.bar { position: relative; flex: 1 1 0; min-width: 2px; border-radius: 2px; cursor: default; }
.bar:focus-visible { outline-offset: 1px; z-index: 2; }
.d-operational { background: var(--b-operational); }
.d-degraded { background: repeating-linear-gradient(135deg, var(--b-degraded-1) 0 3px, var(--b-degraded-2) 3px 6px); }
.d-outage { background: var(--b-outage); }
.d-maintenance { background-color: var(--b-maintenance); background-image: radial-gradient(var(--b-maintenance-dot) 1px, transparent 1.5px); background-size: 4px 4px; }
.d-nodata { background: transparent; box-shadow: inset 0 0 0 1px var(--b-nodata); }
.bars-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.8125rem; margin-top: 0.25rem; }

/* Tooltip: real text, visually hidden until its bar is hovered or focused. A transparent border
   joins it to the bar so the pointer can move onto it (WCAG 1.4.13); Escape hides it (status.js). */
.tip {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.bar:hover .tip, .bar:focus .tip {
	width: max-content; max-width: min(18rem, 80vw); height: auto; overflow: visible; clip-path: none; white-space: normal;
	bottom: 100%; left: 50%; transform: translateX(-50%); z-index: 5;
	padding: 0.5rem 0.75rem; border-bottom: 8px solid transparent; background-clip: padding-box;
	background-color: var(--tip-bg); color: var(--tip-text); border-radius: 0.5rem; font-size: 0.8125rem; line-height: 1.45;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}
.bar.tip-start:hover .tip, .bar.tip-start:focus .tip { left: 0; transform: none; }
.bar.tip-end:hover .tip, .bar.tip-end:focus .tip { left: auto; right: 0; transform: none; }
.bars.tips-hidden .tip { width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; padding: 0 !important; border: 0 !important; }
.tip strong { display: block; }

.daily { margin-top: 0.75rem; font-size: 0.875rem; }
.daily summary { cursor: pointer; color: var(--link); min-height: 24px; }
.daily table { border-collapse: collapse; margin-top: 0.5rem; width: 100%; }
.daily th, .daily td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }

.incident { background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--t-unknown); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.incident.lv-degraded { border-left-color: var(--b-degraded-1); }
.incident.lv-outage { border-left-color: var(--b-outage); }
.incident.lv-maintenance { border-left-color: var(--b-maintenance); }
.incident.lv-operational { border-left-color: var(--b-operational); }
.incident h3 { margin-bottom: 0.25rem; }
.incident p { margin: 0.5rem 0 0; }
.incident-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; color: var(--muted); font-size: 0.875rem; }
.pill { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--text); }
.when { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }

.history { list-style: none; padding: 0; margin: 0; }
.history li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.history .when { display: block; white-space: normal; }

.back { margin-top: 2rem; }
.incident-detail h1 { font-size: 1.75rem; margin: 1rem 0 0.5rem; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--border); }
.timeline li { padding: 0 0 1.25rem 1.25rem; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -8px; top: 0.4rem; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); border: 2px solid var(--surface); }
.tl-status { font-weight: 700; margin: 0; }
.timeline p { margin: 0.25rem 0 0; }

.site-foot { margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; }
.site-foot p { margin: 0.25rem 0; }

@media (max-width: 40rem) {
	.banner { padding: 1rem; }
	.banner h1 { font-size: 1.25rem; }
	.component { padding: 1rem; }
	.bars { gap: 1px; }
}

@media (prefers-reduced-motion: no-preference) {
	.bar { transition: transform 120ms ease-out; }
	.bar:hover { transform: scaleY(1.08); }
}

@media (forced-colors: active) {
	.bar { forced-color-adjust: none; border: 1px solid CanvasText; }
	.tip { forced-color-adjust: auto; }
}

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legend.keys { margin-top: -0.5rem; }