/*
 * Starbase design tokens: primitives.
 *
 * An Open-Props-like vocabulary, prefixed --sb-. Primitives are raw values
 * (ramps, scales, curves). Components never use them directly: they read the
 * semantic tokens in theme.css, which is what makes components themeable.
 *
 * The first stylesheet on the page declares the cascade layer order.
 */
@layer reset, tokens, theme, base, layout, components, utilities;

@font-face {
	font-family: "Pixelify Sans";
	src: url("/static/starbase/fonts/pixelify-sans.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/static/starbase/fonts/jetbrains-mono.woff2") format("woff2");
	font-weight: 100 800;
	font-display: swap;
}

@layer tokens {
	:root {
		/* ── Ink: the night-sky neutrals (hue ~266) ─────────────────────── */
		--sb-ink-0: oklch(97% 0.008 279);   /* #F3F4FA-ish */
		--sb-ink-1: oklch(88% 0.028 270);
		--sb-ink-2: oklch(79.3% 0.05 268.7); /* #AEBBDD */
		--sb-ink-3: oklch(70% 0.055 268);
		--sb-ink-4: oklch(61.8% 0.056 267.8); /* #7785A8 */
		--sb-ink-5: oklch(50% 0.058 266);
		--sb-ink-6: oklch(40% 0.057 265.5);
		--sb-ink-7: oklch(33.2% 0.055 265.2); /* #283552 */
		--sb-ink-8: oklch(27.5% 0.048 265.5);
		--sb-ink-9: oklch(23.4% 0.043 265.6); /* #141D32 */
		--sb-ink-10: oklch(21.2% 0.04 265.8); /* #10182B */
		--sb-ink-11: oklch(18.6% 0.038 266.6); /* #0B1224 */
		--sb-ink-12: oklch(16.4% 0.035 268.9); /* #080D1D */

		/* ── Violet: primary signal (hue ~290) ──────────────────────────── */
		--sb-violet-0: oklch(96% 0.03 292);
		--sb-violet-1: oklch(90% 0.06 292);
		--sb-violet-2: oklch(82% 0.1 292);
		--sb-violet-3: oklch(74.6% 0.144 292.6); /* #B09AFF */
		--sb-violet-4: oklch(68.5% 0.18 291);
		--sb-violet-5: oklch(63.5% 0.21 289.3); /* #8C6BFF */
		--sb-violet-6: oklch(56% 0.215 288);
		--sb-violet-7: oklch(48% 0.2 287);
		--sb-violet-8: oklch(40% 0.17 286);
		--sb-violet-9: oklch(32% 0.13 285);
		--sb-violet-10: oklch(25% 0.09 284);

		/* ── Green: Datastar / success (hue ~152) ───────────────────────── */
		--sb-green-1: oklch(95% 0.07 152);
		--sb-green-3: oklch(87.2% 0.174 151.8); /* #6EF59A */
		--sb-green-5: oklch(74% 0.17 152);
		--sb-green-7: oklch(55% 0.13 153);
		--sb-green-9: oklch(32% 0.07 154);

		/* ── Cyan: secondary accent (hue ~242) ──────────────────────────── */
		--sb-cyan-1: oklch(93% 0.05 240);
		--sb-cyan-3: oklch(77.5% 0.126 241.8); /* #65BFFF */
		--sb-cyan-5: oklch(66% 0.14 243);
		--sb-cyan-7: oklch(50% 0.12 245);
		--sb-cyan-9: oklch(30% 0.07 248);

		/* ── Status ─────────────────────────────────────────────────────── */
		--sb-amber-3: oklch(84% 0.15 80);
		--sb-amber-7: oklch(55% 0.12 70);
		--sb-red-3: oklch(72% 0.17 22);
		--sb-red-5: oklch(64% 0.2 25);
		--sb-red-7: oklch(50% 0.17 25);

		/* ── Space: 4/8 rhythm ──────────────────────────────────────────── */
		--sb-space-px: 1px;
		--sb-space-1: 0.25rem; /*  4 */
		--sb-space-2: 0.5rem; /*  8 */
		--sb-space-3: 0.75rem; /* 12 */
		--sb-space-4: 1rem; /* 16 */
		--sb-space-5: 1.25rem; /* 20 */
		--sb-space-6: 1.5rem; /* 24 */
		--sb-space-8: 2rem; /* 32 */
		--sb-space-10: 2.5rem; /* 40 */
		--sb-space-12: 3rem; /* 48 */
		--sb-space-16: 4rem; /* 64 */

		/* ── Radius: crisp, never bubbly ────────────────────────────────── */
		--sb-radius-xs: 4px;
		--sb-radius-sm: 6px;
		--sb-radius-md: 8px;
		--sb-radius-lg: 10px;
		--sb-radius-pill: 999px;

		/* ── Type ───────────────────────────────────────────────────────── */
		--sb-font-display: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
		--sb-font-ui: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

		--sb-font-size-00: 0.6875rem; /* 11 */
		--sb-font-size-0: 0.75rem; /* 12 */
		--sb-font-size-1: 0.8125rem; /* 13 */
		--sb-font-size-2: 0.875rem; /* 14 */
		--sb-font-size-3: 1rem; /* 16 */
		--sb-font-size-4: 1.125rem; /* 18 */
		--sb-font-size-5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
		--sb-font-size-6: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
		--sb-font-size-7: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
		--sb-font-size-8: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);

		--sb-font-weight-regular: 400;
		--sb-font-weight-medium: 500;
		--sb-font-weight-semibold: 600;
		--sb-font-weight-bold: 700;

		--sb-line-height-tight: 1.05;
		--sb-line-height-snug: 1.3;
		--sb-line-height-normal: 1.55;
		--sb-letter-spacing-display: 0.02em;
		--sb-letter-spacing-caps: 0.08em;

		/* ── Borders & elevation ────────────────────────────────────────── */
		--sb-border-width: 1px;
		--sb-border-width-thick: 2px;
		--sb-shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 1px 2px oklch(0% 0 0 / 0.35);
		--sb-shadow-2: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 8px 24px -12px oklch(0% 0 0 / 0.6);
		--sb-shadow-3: 0 24px 48px -16px oklch(0% 0 0 / 0.7);

		/* ── Pixel frame ────────────────────────────────────────────────────
		 * A notched 8-bit frame drawn with stepped box-shadows (see
		 * .sb-pixel-frame in utilities.css). The colour comes from the
		 * semantic --sb-frame-color. To tone the whole site down to a plain
		 * hairline, set --sb-frame-step: 1px.
		 */
		--sb-frame-step: 3px;

		/* ── Pixel corners ──────────────────────────────────────────────────
		 * Components notch their corners by --sb-notch "pixels": 1 is the
		 * 8-bit look, 0 turns it off (components then use their normal
		 * border radius). [data-sb-style="smooth"] sets it for you.
		 */
		--sb-notch: 1;

		/* ── Motion ─────────────────────────────────────────────────────── */
		--sb-duration-instant: 80ms;
		--sb-duration-fast: 120ms;
		--sb-duration-base: 180ms;
		--sb-duration-slow: 320ms;
		--sb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
		--sb-ease-out: cubic-bezier(0, 0, 0.2, 1);
		--sb-ease-in: cubic-bezier(0.4, 0, 1, 1);
		--sb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
		--sb-ease-steps: steps(4, end); /* pixel-y motion for illustrations */

		/* ── Layers ─────────────────────────────────────────────────────── */
		--sb-z-base: 0;
		--sb-z-raised: 1;
		--sb-z-sticky: 10;
		--sb-z-dropdown: 20;
		--sb-z-overlay: 40;
		--sb-z-modal: 50;
		--sb-z-toast: 60;
		--sb-z-tooltip: 70;

		/* ── Sizes ──────────────────────────────────────────────────────── */
		--sb-control-height-sm: 2rem;
		--sb-control-height-md: 2.5rem;
		--sb-control-height-lg: 3rem;
		--sb-content-max: 90rem;
		--sb-sidebar-width: 17rem;
	}
}

/* Typed custom properties so they can be transitioned/animated. */
@property --sb-glow-strength {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}
/*
 * Semantic tokens. This is the contract every component styles against.
 * Themes are nothing but a different mapping of these names; they inherit
 * through shadow DOM, so Rocket components pick them up automatically.
 */
@layer theme {
	:root,
	[data-sb-theme="deep-space"] {
		color-scheme: dark;

		--sb-bg: var(--sb-ink-12);
		--sb-bg-glow: oklch(30% 0.12 285 / 0.35);
		--sb-surface-raised: var(--sb-ink-10);
		--sb-surface-card: var(--sb-ink-9);
		--sb-surface-inset: var(--sb-ink-11);
		--sb-surface-hover: oklch(from var(--sb-ink-9) calc(l + 0.03) c h);
		--sb-surface-overlay: oklch(12% 0.03 268 / 0.72);

		--sb-border: var(--sb-ink-7);
		--sb-border-subtle: oklch(from var(--sb-ink-7) l c h / 0.6);
		--sb-border-strong: var(--sb-ink-6);

		--sb-text-1: var(--sb-ink-0);
		--sb-text-2: var(--sb-ink-2);
		--sb-text-muted: var(--sb-ink-4);
		--sb-text-on-brand: var(--sb-ink-0);

		--sb-brand: var(--sb-violet-5);
		--sb-brand-hover: var(--sb-violet-4);
		--sb-brand-light: var(--sb-violet-3);
		--sb-brand-subtle: oklch(from var(--sb-violet-5) l c h / 0.14);
		--sb-accent: var(--sb-cyan-3);
		--sb-datastar: var(--sb-green-3);

		--sb-ok: var(--sb-green-3);
		--sb-ok-subtle: oklch(from var(--sb-green-3) l c h / 0.12);
		--sb-warn: var(--sb-amber-3);
		--sb-warn-subtle: oklch(from var(--sb-amber-3) l c h / 0.12);
		--sb-danger: var(--sb-red-3);
		--sb-danger-subtle: oklch(from var(--sb-red-3) l c h / 0.12);
		--sb-info: var(--sb-cyan-3);
		--sb-info-subtle: oklch(from var(--sb-cyan-3) l c h / 0.12);

		--sb-control-bg: var(--sb-ink-11);
		--sb-control-border: var(--sb-ink-7);
		--sb-control-border-hover: var(--sb-ink-6);
		--sb-control-text: var(--sb-ink-0);
		--sb-control-placeholder: var(--sb-ink-4);
		--sb-control-radius: var(--sb-radius-sm);

		--sb-radius: var(--sb-radius-md);
		--sb-frame-color: var(--sb-violet-3);
		--sb-glow-brand: 0 0 0 1px oklch(from var(--sb-violet-5) l c h / 0.35), 0 8px 32px -8px oklch(from var(--sb-violet-5) l c h / 0.45);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--sb-brand-light);
		--sb-selection: oklch(from var(--sb-violet-5) l c h / 0.4);

		--sb-font-body: var(--sb-font-ui);
		--sb-font-heading: var(--sb-font-ui);

		/* Syntax highlighting (code blocks and sb-code-editor). */
		--sb-code-keyword: var(--sb-violet-3);
		--sb-code-function: var(--sb-violet-2);
		--sb-code-tag: var(--sb-cyan-3);
		--sb-code-string: var(--sb-green-3);
		--sb-code-number: var(--sb-amber-3);
		--sb-text-on-danger: #1B0A0C;
	}

	/* Opt out of the 8-bit details: smooth corners, hairline frames and the
	 * UI font for display text. Combine with any theme. */
	[data-sb-style="smooth"] {
		--sb-notch: 0;
		--sb-frame-step: 1px;
		--sb-font-display: var(--sb-font-ui);
	}
}
/* Daylight (light) theme from Starbase's css/themes/showcase.css, plus its
 * auto.css: the same tokens under prefers-color-scheme: light when no theme
 * is chosen. */
@layer theme {
	[data-sb-theme="daylight"] {
		color-scheme: light;
		--sb-art-star: oklch(42% 0.08 285);
		--sb-art-star-dim: oklch(68% 0.05 280);
		--sb-art-smoke-light: oklch(95% 0.012 280);
		--sb-art-smoke: oklch(87% 0.025 282);
		--sb-art-smoke-shade: oklch(74% 0.04 284);
		--sb-bg: oklch(98.5% 0.005 270);
		--sb-bg-glow: oklch(90% 0.05 290 / 0.5);
		--sb-surface-raised: oklch(100% 0 0);
		--sb-surface-card: oklch(100% 0 0);
		--sb-surface-inset: oklch(96% 0.01 270);
		--sb-surface-hover: oklch(97% 0.012 280);
		--sb-surface-overlay: oklch(30% 0.03 270 / 0.4);
		--sb-border: oklch(88% 0.015 270);
		--sb-border-subtle: oklch(92% 0.01 270);
		--sb-border-strong: oklch(78% 0.02 270);
		--sb-text-1: oklch(22% 0.03 270);
		--sb-text-2: oklch(40% 0.03 270);
		--sb-text-muted: oklch(50% 0.03 270);
		/* Readable on light surfaces (WCAG AA, 4.5:1). */
		--sb-code-keyword: oklch(47% 0.2 288);
		--sb-code-function: oklch(45% 0.17 310);
		--sb-code-tag: oklch(46% 0.13 245);
		--sb-code-string: oklch(45% 0.12 155);
		--sb-code-number: oklch(48% 0.12 60);
		--sb-text-on-danger: #fff;
		--sb-brand: oklch(55% 0.22 288);
		--sb-brand-hover: oklch(50% 0.22 288);
		--sb-brand-light: oklch(55% 0.22 288);
		--sb-brand-subtle: oklch(55% 0.22 288 / 0.1);
		--sb-accent: oklch(55% 0.15 243);
		--sb-datastar: oklch(55% 0.15 152);
		--sb-ok: oklch(55% 0.15 152);
		--sb-ok-subtle: oklch(55% 0.15 152 / 0.1);
		--sb-warn: oklch(62% 0.14 70);
		--sb-danger: oklch(55% 0.2 25);
		--sb-info: oklch(55% 0.15 243);
		--sb-control-bg: oklch(100% 0 0);
		--sb-control-border: oklch(85% 0.015 270);
		--sb-control-border-hover: oklch(75% 0.02 270);
		--sb-control-text: oklch(22% 0.03 270);
		--sb-control-placeholder: oklch(60% 0.02 270);
		--sb-frame-color: oklch(55% 0.22 288);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px oklch(55% 0.22 288);
		--sb-glow-brand: 0 0 0 1px oklch(55% 0.22 288 / 0.2), 0 8px 24px -10px oklch(55% 0.22 288 / 0.35);
	}
}

@layer theme {
	@media (prefers-color-scheme: light) {
		:root:not([data-sb-theme]) {
		color-scheme: light;
		--sb-art-star: oklch(42% 0.08 285);
		--sb-art-star-dim: oklch(68% 0.05 280);
		--sb-art-smoke-light: oklch(95% 0.012 280);
		--sb-art-smoke: oklch(87% 0.025 282);
		--sb-art-smoke-shade: oklch(74% 0.04 284);
		--sb-bg: oklch(98.5% 0.005 270);
		--sb-bg-glow: oklch(90% 0.05 290 / 0.5);
		--sb-surface-raised: oklch(100% 0 0);
		--sb-surface-card: oklch(100% 0 0);
		--sb-surface-inset: oklch(96% 0.01 270);
		--sb-surface-hover: oklch(97% 0.012 280);
		--sb-surface-overlay: oklch(30% 0.03 270 / 0.4);
		--sb-border: oklch(88% 0.015 270);
		--sb-border-subtle: oklch(92% 0.01 270);
		--sb-border-strong: oklch(78% 0.02 270);
		--sb-text-1: oklch(22% 0.03 270);
		--sb-text-2: oklch(40% 0.03 270);
		--sb-text-muted: oklch(50% 0.03 270);
		/* Readable on light surfaces (WCAG AA, 4.5:1). */
		--sb-code-keyword: oklch(47% 0.2 288);
		--sb-code-function: oklch(45% 0.17 310);
		--sb-code-tag: oklch(46% 0.13 245);
		--sb-code-string: oklch(45% 0.12 155);
		--sb-code-number: oklch(48% 0.12 60);
		--sb-text-on-danger: #fff;
		--sb-brand: oklch(55% 0.22 288);
		--sb-brand-hover: oklch(50% 0.22 288);
		--sb-brand-light: oklch(55% 0.22 288);
		--sb-brand-subtle: oklch(55% 0.22 288 / 0.1);
		--sb-accent: oklch(55% 0.15 243);
		--sb-datastar: oklch(55% 0.15 152);
		--sb-ok: oklch(55% 0.15 152);
		--sb-ok-subtle: oklch(55% 0.15 152 / 0.1);
		--sb-warn: oklch(62% 0.14 70);
		--sb-danger: oklch(55% 0.2 25);
		--sb-info: oklch(55% 0.15 243);
		--sb-control-bg: oklch(100% 0 0);
		--sb-control-border: oklch(85% 0.015 270);
		--sb-control-border-hover: oklch(75% 0.02 270);
		--sb-control-text: oklch(22% 0.03 270);
		--sb-control-placeholder: oklch(60% 0.02 270);
		--sb-frame-color: oklch(55% 0.22 288);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px oklch(55% 0.22 288);
		--sb-glow-brand: 0 0 0 1px oklch(55% 0.22 288 / 0.2), 0 8px 24px -10px oklch(55% 0.22 288 / 0.35);
		}
	}
}
/*
 * uptimestatus: console and status pages, on Starbase's design tokens.
 *
 * Served after Starbase's tokens.css, theme.css (Deep Space, dark) and
 * daylight.css (light; also "auto" on light systems), which declare the layer
 * order: reset, tokens, theme, base, layout, components, utilities.
 */

@layer base {
	:root {
		/* Monitor states, used by pills, bars and banners. */
		--up: var(--sb-ok);
		--degraded: var(--sb-warn);
		--pending: oklch(from var(--sb-warn) calc(l - 0.04) calc(c + 0.02) calc(h - 25));
		--down: var(--sb-danger);
		--maintenance: var(--sb-info);
		--paused: var(--sb-text-muted);
		--unknown: var(--sb-border-strong);
		--accent: var(--sb-brand);
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
	}

	/* Hide custom elements until their module defines them (no flash). */
	.sb-cloak :not(:defined) {
		visibility: hidden;
	}

	body {
		margin: 0;
		min-height: 100vh;
		color: var(--sb-text-1);
		background:
			radial-gradient(60rem 30rem at 70% -5%, var(--sb-bg-glow), transparent 70%),
			var(--sb-bg);
		background-attachment: fixed;
		font: var(--sb-font-size-2) / var(--sb-line-height-normal) var(--sb-font-body);
		font-feature-settings: "calt" 0;
		-webkit-font-smoothing: antialiased;
	}

	::selection {
		background: var(--sb-selection, var(--sb-brand-subtle));
	}

	a {
		color: var(--sb-brand-light);
		text-decoration: none;
	}

	a:hover {
		color: var(--sb-brand-hover);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--sb-focus-ring);
		border-radius: var(--sb-radius-xs);
	}

	h1,
	h2,
	h3 {
		line-height: var(--sb-line-height-snug);
		margin: 0 0 var(--sb-space-2);
		font-weight: var(--sb-font-weight-bold);
	}

	h1 {
		font-family: var(--sb-font-display);
		font-size: var(--sb-font-size-6);
		letter-spacing: var(--sb-letter-spacing-display);
	}

	h2 {
		font-size: var(--sb-font-size-3);
	}

	code,
	.mono,
	pre {
		font-family: var(--sb-font-ui);
		font-size: 0.95em;
	}

	code {
		padding: 0.05em 0.35em;
		border-radius: var(--sb-radius-xs);
		background: var(--sb-surface-inset);
		border: 1px solid var(--sb-border-subtle);
	}
}

@layer layout {
	.muted {
		color: var(--sb-text-muted);
	}

	.small {
		font-size: var(--sb-font-size-1);
	}

	.stack > * + * {
		margin-top: var(--sb-space-4);
	}

	.row {
		display: flex;
		gap: var(--sb-space-3);
		align-items: center;
		flex-wrap: wrap;
	}

	.spacer {
		flex: 1;
	}

	/* ── Console chrome ─────────────────────────────────────────────── */

	.topbar {
		position: sticky;
		top: 0;
		z-index: var(--sb-z-sticky);
		background: oklch(from var(--sb-surface-raised) l c h / 0.85);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--sb-border);
	}

	.topbar-inner {
		max-width: 72rem;
		margin: 0 auto;
		padding: var(--sb-space-3) var(--sb-space-5);
		display: flex;
		gap: var(--sb-space-4);
		align-items: center;
		flex-wrap: wrap;
	}

	.brand {
		display: inline-flex;
		align-items: center;
		gap: var(--sb-space-2);
		color: var(--sb-text-1);
		font-family: var(--sb-font-display);
		font-size: 1.35rem;
		font-weight: var(--sb-font-weight-bold);
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.brand:hover {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.brand img {
		width: 28px;
		height: 28px;
		image-rendering: pixelated;
	}

	.nav {
		display: flex;
		gap: var(--sb-space-1);
	}

	.nav a {
		color: var(--sb-text-2);
		padding: var(--sb-space-2) var(--sb-space-2);
		border-bottom: 2px solid transparent;
	}

	.nav a:hover {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.nav a[aria-current="page"] {
		color: var(--sb-text-1);
		border-bottom-color: var(--sb-brand);
	}

	.user {
		color: var(--sb-text-muted);
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
	}

	.user form {
		margin: 0;
	}

	main.shell {
		max-width: 72rem;
		margin: 0 auto;
		padding: var(--sb-space-8) var(--sb-space-5) var(--sb-space-16);
	}

	.page-head {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		margin-bottom: var(--sb-space-6);
		flex-wrap: wrap;
	}

	.page-head h1 {
		margin: 0;
	}

	.page-head form {
		margin: 0;
	}

	.cols {
		display: grid;
		gap: var(--sb-space-5);
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	}

	.center {
		min-height: 100vh;
		display: grid;
		place-items: center;
		padding: var(--sb-space-4);
		position: relative;
		overflow: hidden;
	}

	.center > sb-starfield {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0.8;
	}

	.center > .login {
		position: relative;
		z-index: 1;
	}
}

@layer components {
	/* ── Surfaces ───────────────────────────────────────────────────── */

	.card {
		background: var(--sb-surface-card);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius);
		box-shadow: var(--sb-shadow-1);
		padding: var(--sb-space-5);
	}

	.card + .card,
	.card + section.card {
		margin-top: var(--sb-space-5);
	}

	.cols > .card + .card {
		margin-top: 0;
	}

	.card h2 {
		font-size: var(--sb-font-size-3);
	}

	/* The 16px grid behind hero-ish panels. */
	.grid-bg {
		--_grid: color-mix(in oklch, var(--sb-border) 60%, transparent);
		background:
			radial-gradient(circle at 50% 120%, oklch(from var(--sb-brand) l c h / 0.08), transparent 60%),
			linear-gradient(var(--_grid) 1px, transparent 1px),
			linear-gradient(90deg, var(--_grid) 1px, transparent 1px),
			var(--sb-surface-inset);
		background-size: auto, 16px 16px, 16px 16px, auto;
	}

	.empty {
		text-align: center;
		padding: var(--sb-space-10) var(--sb-space-4);
		color: var(--sb-text-muted);
	}

	.empty strong {
		display: block;
		color: var(--sb-text-1);
		font-family: var(--sb-font-display);
		font-size: var(--sb-font-size-5);
		margin-bottom: var(--sb-space-2);
	}

	/* ── Buttons (native; Starbase look) ────────────────────────────── */

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sb-space-2);
		min-height: var(--sb-control-height-sm);
		padding: 0 var(--sb-space-4);
		border-radius: var(--sb-control-radius);
		border: 1px solid var(--sb-control-border);
		background: transparent;
		color: var(--sb-text-1);
		font: inherit;
		font-weight: var(--sb-font-weight-medium);
		cursor: pointer;
		text-decoration: none;
		transition:
			background var(--sb-duration-fast) var(--sb-ease-standard),
			border-color var(--sb-duration-fast) var(--sb-ease-standard),
			translate var(--sb-duration-instant);
	}

	.btn:hover {
		color: var(--sb-text-1);
		text-decoration: none;
		border-color: var(--sb-control-border-hover);
		background: var(--sb-surface-hover);
	}

	.btn:active {
		translate: 0 1px;
	}

	.btn-primary {
		background: var(--sb-brand);
		border-color: var(--sb-brand);
		color: var(--sb-text-on-brand);
		box-shadow: var(--sb-glow-brand);
	}

	.btn-primary:hover {
		background: var(--sb-brand-hover);
		border-color: var(--sb-brand-hover);
		color: var(--sb-text-on-brand);
	}

	.btn-danger {
		color: var(--sb-danger);
		border-color: oklch(from var(--sb-danger) l c h / 0.45);
	}

	.btn-danger:hover {
		color: var(--sb-text-on-danger);
		background: var(--sb-danger);
		border-color: var(--sb-danger);
	}

	.btn-link {
		border: 0;
		background: none;
		padding: 0;
		min-height: 0;
		color: var(--sb-text-muted);
	}

	.btn-link:hover {
		background: none;
		color: var(--sb-text-1);
	}

	.btn[aria-busy="true"] {
		opacity: 0.6;
		pointer-events: none;
		cursor: progress;
	}

	/* The 8-bit plate with an offset drop (Starbase's "pixel" button). */
	.btn-pixel {
		--_s: var(--sb-frame-step);
		--_c: var(--sb-frame-color);
		border: 0;
		border-radius: 0;
		min-height: var(--sb-control-height-md);
		padding: 0 var(--sb-space-5);
		background: var(--sb-text-1);
		color: var(--sb-bg);
		font-family: var(--sb-font-display);
		font-weight: var(--sb-font-weight-bold);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		margin: var(--_s);
		box-shadow:
			0 calc(-1 * var(--_s)) 0 0 var(--_c),
			0 var(--_s) 0 0 var(--_c),
			calc(-1 * var(--_s)) 0 0 0 var(--_c),
			var(--_s) 0 0 0 var(--_c),
			calc(var(--_s) * 2) calc(var(--_s) * 2) 0 0 color-mix(in oklch, var(--_c) 45%, black);
	}

	.btn-pixel:hover {
		background: var(--sb-text-1);
		color: var(--sb-bg);
		translate: -1px -1px;
		box-shadow:
			0 calc(-1 * var(--_s)) 0 0 var(--_c),
			0 var(--_s) 0 0 var(--_c),
			calc(-1 * var(--_s)) 0 0 0 var(--_c),
			var(--_s) 0 0 0 var(--_c),
			calc(var(--_s) * 3) calc(var(--_s) * 3) 0 0 color-mix(in oklch, var(--_c) 45%, black);
	}

	.btn-pixel:active {
		translate: var(--_s) var(--_s);
		box-shadow:
			0 calc(-1 * var(--_s)) 0 0 var(--_c),
			0 var(--_s) 0 0 var(--_c),
			calc(-1 * var(--_s)) 0 0 0 var(--_c),
			var(--_s) 0 0 0 var(--_c),
			var(--_s) var(--_s) 0 0 color-mix(in oklch, var(--_c) 45%, black);
	}

	/* ── Status pills ───────────────────────────────────────────────── */

	.pill {
		display: inline-flex;
		align-items: center;
		gap: var(--sb-space-2);
		padding: 0.1rem 0.55rem;
		border-radius: var(--sb-radius-xs);
		font-size: var(--sb-font-size-0);
		font-weight: var(--sb-font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
		white-space: nowrap;
		color: var(--pill);
		background: oklch(from var(--pill) l c h / 0.12);
		border: 1px solid oklch(from var(--pill) l c h / 0.3);
	}

	/* A square "pixel" dot. */
	.pill::before {
		content: "";
		width: 0.45rem;
		height: 0.45rem;
		background: var(--pill);
		box-shadow: 0 0 6px oklch(from var(--pill) l c h / 0.6);
	}

	.pill-up { --pill: var(--up); }
	.pill-degraded { --pill: var(--degraded); }
	.pill-pending { --pill: var(--pending); }
	.pill-down { --pill: var(--down); }
	.pill-maintenance { --pill: var(--maintenance); }
	.pill-paused { --pill: var(--paused); }
	.pill-unknown { --pill: var(--unknown); }

	.pill-down::before {
		animation: blink 1.2s var(--sb-ease-steps) infinite;
	}

	@keyframes blink {
		50% { opacity: 0.25; }
	}

	.summary {
		display: flex;
		gap: var(--sb-space-2);
		flex-wrap: wrap;
		margin-bottom: var(--sb-space-4);
	}

	/* ── Tables ─────────────────────────────────────────────────────── */

	table.list {
		width: 100%;
		border-collapse: collapse;
	}

	table.list th {
		text-align: left;
		font-size: var(--sb-font-size-00);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
		color: var(--sb-text-muted);
		font-weight: var(--sb-font-weight-semibold);
		padding: var(--sb-space-2) var(--sb-space-3);
		border-bottom: 1px solid var(--sb-border);
	}

	table.list td {
		padding: var(--sb-space-3);
		border-bottom: 1px solid var(--sb-border-subtle);
		vertical-align: middle;
	}

	table.list tbody tr {
		transition: background var(--sb-duration-fast);
	}

	table.list tbody tr:hover {
		background: var(--sb-surface-hover);
	}

	table.list tr:last-child td {
		border-bottom: 0;
	}

	.name-cell a {
		font-weight: var(--sb-font-weight-semibold);
		color: var(--sb-text-1);
	}

	td.when {
		white-space: nowrap;
	}

	.num,
	table.list th.num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}

	.table-wrap {
		overflow-x: auto;
	}

	.card.table-wrap {
		padding: var(--sb-space-4) var(--sb-space-3) var(--sb-space-2);
	}

	.card.table-wrap > h2 {
		padding: 0 var(--sb-space-3);
	}

	.cols + .card {
		margin-top: var(--sb-space-5);
	}

	.check sb-toggle {
		font-weight: var(--sb-font-weight-medium);
	}

	/* ── Forms ──────────────────────────────────────────────────────── */

	fieldset {
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius);
		padding: var(--sb-space-4) var(--sb-space-5);
		margin: 0 0 var(--sb-space-5);
		background: oklch(from var(--sb-surface-inset) l c h / 0.4);
	}

	legend {
		font-family: var(--sb-font-display);
		font-size: var(--sb-font-size-3);
		letter-spacing: 0.04em;
		padding: 0 var(--sb-space-2);
		color: var(--sb-brand-light);
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: var(--sb-space-1);
		margin-bottom: var(--sb-space-4);
	}

	.field label {
		font-weight: var(--sb-font-weight-semibold);
		font-size: var(--sb-font-size-1);
		color: var(--sb-text-2);
	}

	.field .hint {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-0);
	}

	.field .error {
		color: var(--sb-danger);
		font-size: var(--sb-font-size-1);
	}

	.fields {
		display: grid;
		gap: 0 var(--sb-space-5);
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}

	.check {
		display: flex;
		gap: var(--sb-space-2);
		align-items: center;
		font-weight: var(--sb-font-weight-medium);
		margin-bottom: var(--sb-space-3);
	}

	input[type="text"],
	input[type="url"],
	input[type="number"],
	input[type="email"],
	input[type="password"],
	select,
	textarea {
		font: inherit;
		min-height: var(--sb-control-height-md);
		padding: var(--sb-space-2) var(--sb-space-3);
		border-radius: var(--sb-control-radius);
		border: 1px solid var(--sb-control-border);
		background: var(--sb-control-bg);
		color: var(--sb-control-text);
		width: 100%;
		transition: border-color var(--sb-duration-fast);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--sb-control-placeholder);
	}

	input:hover,
	select:hover,
	textarea:hover {
		border-color: var(--sb-control-border-hover);
	}

	input:focus,
	select:focus,
	textarea:focus {
		outline: none;
		border-color: var(--sb-brand);
		box-shadow: var(--sb-focus-ring);
	}

	input[type="checkbox"] {
		accent-color: var(--sb-brand);
		width: 1rem;
		height: 1rem;
	}

	textarea {
		min-height: 5rem;
		font-size: var(--sb-font-size-1);
		line-height: 1.6;
	}

	[aria-invalid="true"] {
		border-color: var(--sb-danger) !important;
	}

	.actions {
		display: flex;
		gap: var(--sb-space-3);
		align-items: center;
		margin-top: var(--sb-space-2);
	}

	sb-code-editor {
		display: block;
		min-height: 10rem;
	}

	/* ── Messages ───────────────────────────────────────────────────── */

	.flash {
		border-radius: var(--sb-radius);
		padding: var(--sb-space-3) var(--sb-space-4);
		margin-bottom: var(--sb-space-4);
		border: 1px solid var(--sb-border);
		background: var(--sb-info-subtle);
	}

	.error-text {
		color: var(--sb-danger);
	}

	.flash-error {
		border-color: oklch(from var(--sb-danger) l c h / 0.5);
		background: var(--sb-danger-subtle);
		color: var(--sb-danger);
	}

	sb-alert {
		display: block;
		margin-bottom: var(--sb-space-4);
	}

	/* ── Detail page ────────────────────────────────────────────────── */

	dl.facts {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: var(--sb-space-2) var(--sb-space-5);
		margin: 0;
	}

	dl.facts dt {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
	}

	dl.facts dd {
		margin: 0;
		overflow-wrap: anywhere;
	}

	#test-result:empty {
		display: none;
	}

	.result {
		border-left: 3px solid var(--pill, var(--sb-border));
		padding: var(--sb-space-3) var(--sb-space-4);
		background: var(--sb-surface-inset);
		border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
	}

	.trend {
		display: flex;
		align-items: center;
		gap: var(--sb-space-4);
	}

	.trend {
		margin-top: var(--sb-space-4);
	}

	.trend sb-sparkline {
		flex: 1;
		min-width: 0;
	}

	/* ── Login ──────────────────────────────────────────────────────── */

	.login {
		width: min(26rem, 100%);
		text-align: center;
		background: oklch(from var(--sb-surface-card) l c h / 0.88);
		backdrop-filter: blur(6px);
	}

	.login h1 {
		font-size: var(--sb-font-size-7);
		margin-bottom: var(--sb-space-1);
		text-transform: uppercase;
	}

	.login h1 em {
		font-style: normal;
		color: var(--sb-brand);
		text-shadow: 0 0 32px oklch(from var(--sb-brand) l c h / 0.45);
	}

	.login .btn {
		width: calc(100% - 2 * var(--sb-frame-step));
		margin-top: var(--sb-space-4);
	}

	/* ── Public status pages ────────────────────────────────────────── */

	.status-page {
		max-width: 50rem;
		margin: 0 auto;
		padding: var(--sb-space-10) var(--sb-space-5) var(--sb-space-16);
	}

	.status-header {
		display: flex;
		align-items: center;
		gap: var(--sb-space-4);
		margin-bottom: var(--sb-space-8);
		padding: var(--sb-space-6);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius);
	}

	.status-header img {
		height: 36px;
		width: auto;
	}

	.status-header h1 {
		font-size: var(--sb-font-size-7);
		line-height: var(--sb-line-height-tight);
		margin: 0 0 var(--sb-space-2);
	}

	.status-header p {
		margin: 0;
	}

	.banner {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		padding: var(--sb-space-4) var(--sb-space-5);
		border-radius: var(--sb-radius);
		margin-bottom: var(--sb-space-8);
		color: var(--pill);
		background: oklch(from var(--pill) l c h / 0.1);
		border: 1px solid oklch(from var(--pill) l c h / 0.4);
		box-shadow: 0 0 32px -12px oklch(from var(--pill) l c h / 0.6);
	}

	.banner > span:first-child {
		font-family: var(--sb-font-display);
		font-size: var(--sb-font-size-5);
		font-weight: var(--sb-font-weight-bold);
		letter-spacing: 0.03em;
	}

	.banner > span:first-child::before {
		content: "";
		display: inline-block;
		width: 0.7rem;
		height: 0.7rem;
		margin-right: var(--sb-space-3);
		background: var(--pill);
		box-shadow: 0 0 10px var(--pill);
		vertical-align: 0.05em;
	}

	.banner .spacer + span {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
	}

	.section {
		margin-bottom: var(--sb-space-8);
	}

	.section h2 {
		font-size: var(--sb-font-size-0);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
		color: var(--sb-text-muted);
		margin-bottom: var(--sb-space-3);
	}

	.component {
		background: var(--sb-surface-card);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius);
		padding: var(--sb-space-4) var(--sb-space-5);
	}

	.component + .component {
		margin-top: var(--sb-space-3);
	}

	.component-head {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		margin-bottom: var(--sb-space-3);
	}

	.component-head strong {
		flex: 1;
	}

	/* 90 pixel columns. */
	.bars {
		display: flex;
		gap: 2px;
		height: 32px;
		align-items: stretch;
	}

	.bars span {
		flex: 1;
		background: var(--bar, var(--unknown));
		opacity: 0.85;
		transition: opacity var(--sb-duration-instant), translate var(--sb-duration-instant);
	}

	.bars span:hover {
		opacity: 1;
		translate: 0 -2px;
		box-shadow: 0 0 8px var(--bar);
	}

	.bar-up { --bar: var(--up); }
	.bar-warn { --bar: var(--degraded); }
	.bar-down { --bar: var(--down); }
	.bar-none { --bar: var(--sb-border); }

	.bar-legend {
		display: flex;
		justify-content: space-between;
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-00);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
		margin-top: var(--sb-space-2);
	}

	.notice {
		background: var(--sb-surface-card);
		border: 1px solid oklch(from var(--pill) l c h / 0.4);
		border-left: 4px solid var(--pill);
		border-radius: var(--sb-radius);
		padding: var(--sb-space-4) var(--sb-space-5);
		margin-bottom: var(--sb-space-4);
	}

	.notice header {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		flex-wrap: wrap;
	}

	.notice p {
		margin: var(--sb-space-2) 0 0;
	}

	.timeline {
		list-style: none;
		margin: var(--sb-space-3) 0 0;
		padding: 0 0 0 var(--sb-space-4);
		border-left: 2px dotted var(--sb-border-strong);
	}

	.timeline li + li {
		margin-top: var(--sb-space-3);
	}

	.timeline p {
		margin: var(--sb-space-1) 0 0;
	}

	.incidents {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.incidents li {
		padding: var(--sb-space-3) 0;
		border-bottom: 1px solid var(--sb-border-subtle);
	}

	.footer {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-0);
		text-align: center;
		margin-top: var(--sb-space-12);
		text-transform: uppercase;
		letter-spacing: var(--sb-letter-spacing-caps);
	}

	.footer a {
		color: var(--sb-text-2);
	}

	/* ── Custom domains ─────────────────────────────────────────────── */

	#domains h2 {
		margin: 0 0 var(--sb-space-1);
	}

	#domains form.row input {
		flex: 1;
		min-width: 14rem;
	}

	#domains .actions-cell {
		white-space: nowrap;
		text-align: right;
	}

	#domains .actions-cell .btn-link {
		margin-left: var(--sb-space-2);
	}

	details summary {
		cursor: pointer;
		color: var(--sb-text-2);
	}

	pre.dns {
		font-size: var(--sb-font-size-1);
		background: var(--sb-surface-inset);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-sm);
		padding: var(--sb-space-3) var(--sb-space-4);
		overflow-x: auto;
		white-space: pre;
		color: var(--sb-code-string);
	}
}

@layer utilities {
	.pixel-font {
		font-family: var(--sb-font-display);
		letter-spacing: 0.03em;
	}

	.visually-hidden {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

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