/* ../../ui/theme/index.css */
/* Statuz Glass. Tokens first (the only file with raw values), then base, then one file per component group. */
/* ./tokens.css */
/* generated by just ds gen — edit src/ds/tokens.ts */

:root {
	--font-ui: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--text-display-size: 48px;
	--text-display-leading: 56px;
	--text-display-weight: 600;
	--text-display-tracking: -0.02em;
	--text-display-small-size: 34px;
	--text-display-small-leading: 41px;
	--text-display-small-weight: 600;
	--text-display-small-tracking: -0.015em;
	--text-title-size: 22px;
	--text-title-leading: 28px;
	--text-title-weight: 400;
	--text-title3-size: 15px;
	--text-title3-leading: 20px;
	--text-title3-weight: 600;
	--text-headline-size: 13px;
	--text-headline-leading: 16px;
	--text-headline-weight: 600;
	--text-body-size: 13px;
	--text-body-leading: 16px;
	--text-body-weight: 400;
	--text-subheadline-size: 11px;
	--text-subheadline-leading: 14px;
	--text-subheadline-weight: 400;
	--text-page-title-size: 28px;
	--text-page-title-leading: 34px;
	--text-page-title-weight: 600;
	--text-page-title-tracking: -0.02em;
	--text-lede-size: 14px;
	--text-lede-leading: 21px;
	--text-lede-weight: 400;
	--text-copy-size: 13px;
	--text-copy-leading: 20px;
	--text-copy-weight: 400;
	--text-caption-size: 10px;
	--text-caption-leading: 13px;
	--text-caption-weight: 500;
	--text-hero-size: 80px;
	--text-hero-leading: 84px;
	--text-hero-weight: 600;
	--text-hero-tracking: -0.035em;
	--text-hero-medium-size: 60px;
	--text-hero-medium-leading: 64px;
	--text-hero-medium-weight: 600;
	--text-hero-medium-tracking: -0.03em;
	--text-hero-compact-size: 40px;
	--text-hero-compact-leading: 44px;
	--text-hero-compact-weight: 600;
	--text-hero-compact-tracking: -0.025em;
	--text-feature-size: 21px;
	--text-feature-leading: 30px;
	--text-feature-weight: 400;
	--text-feature-compact-size: 17px;
	--text-feature-compact-leading: 25px;
	--text-feature-compact-weight: 400;
	--space-1: 4px;
	--space-1-5: 6px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--size-control-sm: 22px;
	--size-control: 28px;
	--size-control-lg: 32px;
	--size-row: 30px;
	--size-row-lg: 36px;
	--size-icon-sm: 12px;
	--size-icon: 16px;
	--size-icon-lg: 20px;
	--size-sidebar: 220px;
	--size-inspector: 260px;
	--size-popover: 340px;
	--size-window: 900px;
	--size-border: 1px;
	--size-focus-ring: 3px;
	--size-dot: 8px;
	--size-page: 1080px;
	--size-prose: 680px;
	--size-column: 680px;
	--size-tile: 26px;
	--size-card-min: 196px;
	--size-footer-column: 96px;
	--size-composer: 112px;
	--size-sheet: 400px;
	--size-header: 52px;
	--size-stage-window: 640px;
	--size-stage-window-lg: 560px;
	--size-tile-lg: 44px;
	--size-flow-node: 300px;
	--size-logo: 22px;
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-full: 9999px;
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-shimmer: 1400ms;
	--duration-spin: 800ms;
	--duration-slow: 500ms;
	--duration-pulse: 2800ms;
	--duration-drift: 26000ms;
	--duration-float: 6000ms;
	--duration-tick: 1ms;
	--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
	--layer-behind: -1;
	--layer-lift: 1;
	--layer-header: 10;
	--layer-popover: 20;
	--layer-sheet: 30;
	--opacity-disabled: 0.4;
	--opacity-pressed: 0.8;
	--stage-perspective: 2400px;
	--stage-depth: 260px;
	--stage-depth-open: 120px;
	--stage-travel: 560px;
	--stage-pen: 180px;
	--stage-rise: 64px;
	--stage-lean: 18deg;
	--stage-turn: 26deg;
	--stage-turn-open: 12deg;
	--stage-side: 0.78;
	--stage-spread: 34%;
	--stage-spread-open: 52%;
	--stage-fit: 1.3;
	--stage-step: 80vh;
	--stage-backdrop: 1280px;
	--stage-glow: 760px;
	--stage-drift: 56px;
	--stage-dot: 24px;
	--stage-float: 8px;
	--stage-parallax: 96px;
}

:root,
[data-theme='light'] {
	color-scheme: light;
	--color-label: rgb(0 0 0 / 0.85);
	--color-label-secondary: rgb(0 0 0 / 0.5);
	--color-label-tertiary: rgb(0 0 0 / 0.26);
	--color-separator: rgb(0 0 0 / 0.1);
	--color-fill: rgb(0 0 0 / 0.05);
	--color-background-window: #ececec;
	--color-background-content: #ffffff;
	--color-accent: #007aff;
	--color-on-accent: #ffffff;
	--color-status-good: #34c759;
	--color-status-warning: #ffcc00;
	--color-status-critical: #ff3b30;
	--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
	--color-link: var(--color-accent);
	--color-glow: rgb(0 122 255 / 0.16);
	--color-grid-dot: rgb(0 0 0 / 0.13);
	--syntax-keyword: #9b2393;
	--syntax-function: #326d74;
	--syntax-string: #c41a16;
	--syntax-constant: #1c00cf;
	--syntax-parameter: #0f68a0;
	--syntax-comment: #5d6c79;
	--material-glass-background: color-mix(
		in srgb,
		var(--color-background-window) 55%,
		transparent
	);
	--material-glass-filter: blur(24px) saturate(180%);
	--material-glass-border: transparent;
	--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.6);
	--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
	--material-glass-label: var(--color-label);
	--material-glass-prominent-background: var(--color-accent);
	--material-glass-prominent-filter: none;
	--material-glass-prominent-border: transparent;
	--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.25);
	--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
	--material-glass-prominent-label: var(--color-on-accent);
	--material-solid-background: var(--color-background-content);
	--material-solid-filter: none;
	--material-solid-border: var(--color-separator);
	--material-solid-highlight: 0 0 transparent;
	--material-solid-shadow: 0 0 transparent;
	--material-solid-label: var(--color-label);
}

[data-theme='dark'] {
	color-scheme: dark;
	--color-label: rgb(255 255 255 / 0.85);
	--color-label-secondary: rgb(255 255 255 / 0.55);
	--color-label-tertiary: rgb(255 255 255 / 0.25);
	--color-separator: rgb(255 255 255 / 0.1);
	--color-fill: rgb(255 255 255 / 0.08);
	--color-background-window: #282828;
	--color-background-content: #1e1e1e;
	--color-accent: #0a84ff;
	--color-on-accent: #ffffff;
	--color-status-good: #30d158;
	--color-status-warning: #ffd60a;
	--color-status-critical: #ff453a;
	--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
	--color-link: color-mix(in srgb, var(--color-accent) 75%, white);
	--color-glow: rgb(10 132 255 / 0.3);
	--color-grid-dot: rgb(255 255 255 / 0.14);
	--syntax-keyword: #fc5fa3;
	--syntax-function: #67b7a4;
	--syntax-string: #fc6a5d;
	--syntax-constant: #d0bf69;
	--syntax-parameter: #41a1c0;
	--syntax-comment: #6c7986;
	--material-glass-background: color-mix(
		in srgb,
		var(--color-background-window) 55%,
		transparent
	);
	--material-glass-filter: blur(24px) saturate(180%);
	--material-glass-border: transparent;
	--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
	--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.36);
	--material-glass-label: var(--color-label);
	--material-glass-prominent-background: var(--color-accent);
	--material-glass-prominent-filter: none;
	--material-glass-prominent-border: transparent;
	--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
	--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.24);
	--material-glass-prominent-label: var(--color-on-accent);
	--material-solid-background: var(--color-background-content);
	--material-solid-filter: none;
	--material-solid-border: var(--color-separator);
	--material-solid-highlight: 0 0 transparent;
	--material-solid-shadow: 0 0 transparent;
	--material-solid-label: var(--color-label);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme='system'],
	:root:not([data-theme]) {
		color-scheme: dark;
		--color-label: rgb(255 255 255 / 0.85);
		--color-label-secondary: rgb(255 255 255 / 0.55);
		--color-label-tertiary: rgb(255 255 255 / 0.25);
		--color-separator: rgb(255 255 255 / 0.1);
		--color-fill: rgb(255 255 255 / 0.08);
		--color-background-window: #282828;
		--color-background-content: #1e1e1e;
		--color-accent: #0a84ff;
		--color-on-accent: #ffffff;
		--color-status-good: #30d158;
		--color-status-warning: #ffd60a;
		--color-status-critical: #ff453a;
		--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
		--color-link: color-mix(in srgb, var(--color-accent) 75%, white);
		--color-glow: rgb(10 132 255 / 0.3);
		--color-grid-dot: rgb(255 255 255 / 0.14);
		--syntax-keyword: #fc5fa3;
		--syntax-function: #67b7a4;
		--syntax-string: #fc6a5d;
		--syntax-constant: #d0bf69;
		--syntax-parameter: #41a1c0;
		--syntax-comment: #6c7986;
		--material-glass-background: color-mix(
			in srgb,
			var(--color-background-window) 55%,
			transparent
		);
		--material-glass-filter: blur(24px) saturate(180%);
		--material-glass-border: transparent;
		--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
		--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.36);
		--material-glass-label: var(--color-label);
		--material-glass-prominent-background: var(--color-accent);
		--material-glass-prominent-filter: none;
		--material-glass-prominent-border: transparent;
		--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
		--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.24);
		--material-glass-prominent-label: var(--color-on-accent);
		--material-solid-background: var(--color-background-content);
		--material-solid-filter: none;
		--material-solid-border: var(--color-separator);
		--material-solid-highlight: 0 0 transparent;
		--material-solid-shadow: 0 0 transparent;
		--material-solid-label: var(--color-label);
	}
}

@media (prefers-contrast: more) {
	:root,
	[data-theme='light'] {
		--color-separator: rgb(0 0 0 / 0.3);
		--color-label-secondary: rgb(0 0 0 / 0.7);
		--color-label-tertiary: rgb(0 0 0 / 0.5);
	}

	[data-theme='dark'] {
		--color-separator: rgb(255 255 255 / 0.3);
		--color-label-secondary: rgb(255 255 255 / 0.75);
		--color-label-tertiary: rgb(255 255 255 / 0.5);
	}
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	:root[data-theme='system'],
	:root:not([data-theme]) {
		--color-separator: rgb(255 255 255 / 0.3);
		--color-label-secondary: rgb(255 255 255 / 0.75);
		--color-label-tertiary: rgb(255 255 255 / 0.5);
	}
}

@media (prefers-reduced-transparency: reduce) {
	:root:root,
	[data-theme][data-theme] {
		--material-glass-background: var(--material-solid-background);
		--material-glass-filter: none;
		--material-glass-border: var(--material-solid-border);
		--material-glass-highlight: var(--material-solid-highlight);
		--material-glass-shadow: var(--material-solid-shadow);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root:root,
	[data-theme][data-theme] {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}


/* ./base.css */
/* Element defaults and text styles. Tokens only: raw values live in tokens.css. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

html,
body {
	margin: 0;
	background: var(--color-background-window);
	color: var(--color-label);
	font-family: var(--font-ui);
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	font-weight: var(--text-body-weight);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Thin scrollbars inside components; the page keeps the browser's own */
body * {
	scrollbar-width: thin;
	scrollbar-color: var(--color-label-tertiary) transparent;
}

button,
input,
textarea,
select {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	padding: 0;
	border: 0;
	background: none;
	cursor: default;
}

button:disabled {
	opacity: var(--opacity-disabled);
}

h1,
h2,
h3,
h4,
p,
figure,
pre,
dl,
dd {
	margin: 0;
}

code,
kbd,
pre {
	font-family: var(--font-mono);
}

:focus-visible {
	outline: var(--size-focus-ring) solid var(--color-focus);
	outline-offset: var(--size-border);
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Text styles (macOS): title 22/28, title3 15/20, headline 13/16, body 13/16, subheadline 11/14, caption 10/13. */
.text-display {
	font-size: var(--text-display-size);
	line-height: var(--text-display-leading);
	font-weight: var(--text-display-weight);
	letter-spacing: var(--text-display-tracking);
}
.text-display-small {
	font-size: var(--text-display-small-size);
	line-height: var(--text-display-small-leading);
	font-weight: var(--text-display-small-weight);
	letter-spacing: var(--text-display-small-tracking);
}
.text-title {
	font-size: var(--text-title-size);
	line-height: var(--text-title-leading);
	font-weight: var(--text-title-weight);
}
.text-title3 {
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
}
.text-headline {
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
}
.text-body {
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	font-weight: var(--text-body-weight);
}
.text-subheadline {
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	font-weight: var(--text-subheadline-weight);
}
.text-caption {
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
}

/* Times, money and counts line up. */
.num {
	font-variant-numeric: tabular-nums;
}

.mono {
	font-family: var(--font-mono);
}

.secondary {
	color: var(--color-label-secondary);
}

.tertiary {
	color: var(--color-label-tertiary);
}

.sr-only {
	position: absolute;
	width: var(--size-border);
	height: var(--size-border);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ./components/controls.css */
/* Controls: Icon, Button, PrimaryButton, IconButton, Segmented, Switch, Checkbox, LinkAction, TextField, Select, Calendar. Tokens only. */

/* Icon */
.icon {
	flex-shrink: 0;
	display: block;
}
.icon-sm {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
.icon-md {
	width: var(--size-icon);
	height: var(--size-icon);
}
.icon-lg {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

/* Glass on controls. Inside another glass surface they go plain (never glass on glass). */
.btn,
.icon-btn,
.seg,
.select-input {
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
	color: var(--material-glass-label);
}

/* Button and PrimaryButton: capsules */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1-5);
	height: var(--size-control);
	padding: 0 var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-body-size);
	font-weight: var(--font-weight-medium);
	line-height: var(--text-body-leading);
	white-space: nowrap;
	user-select: none;
	transition:
		background-color var(--duration-fast) var(--ease-spring),
		transform var(--duration-fast) var(--ease-spring);
}
.btn-sm {
	height: var(--size-control-sm);
	padding: 0 var(--space-2);
	gap: var(--space-1);
	font-size: var(--text-subheadline-size);
}
.btn-sm .icon {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
.btn-lg {
	height: var(--size-control-lg);
	padding: 0 var(--space-4);
}
.btn:hover:not(:disabled) {
	background: color-mix(
		in srgb,
		var(--material-glass-background),
		var(--color-label) 6%
	);
}
.btn:active:not(:disabled) {
	opacity: var(--opacity-pressed);
}
.btn-destructive {
	color: var(--color-status-critical);
}
.btn-primary {
	background: var(--material-glass-prominent-background);
	-webkit-backdrop-filter: var(--material-glass-prominent-filter);
	backdrop-filter: var(--material-glass-prominent-filter);
	box-shadow:
		var(--material-glass-prominent-highlight),
		var(--material-glass-prominent-shadow);
	color: var(--material-glass-prominent-label);
}
.btn-primary:hover:not(:disabled) {
	background: color-mix(
		in srgb,
		var(--material-glass-prominent-background),
		var(--color-label) 10%
	);
}

/* Busy: working on it, at full strength, the spinner after the label */
.btn.is-busy {
	cursor: progress;
}

/* iOS's activity indicator: eight spokes, each fading as the next lights up */
.spinner {
	position: relative;
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
}

.spinner i {
	position: absolute;
	top: 0;
	left: calc(50% - 0.0625em);
	width: 0.125em;
	height: 0.3em;
	border-radius: var(--radius-full);
	background: currentColor;
	transform-origin: 50% 0.5em;
	animation: spinner-fade var(--duration-spin) linear infinite;
}

.spinner i:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: calc(var(--duration-spin) * -7/8);
}
.spinner i:nth-child(2) {
	transform: rotate(45deg);
	animation-delay: calc(var(--duration-spin) * -6/8);
}
.spinner i:nth-child(3) {
	transform: rotate(90deg);
	animation-delay: calc(var(--duration-spin) * -5/8);
}
.spinner i:nth-child(4) {
	transform: rotate(135deg);
	animation-delay: calc(var(--duration-spin) * -4/8);
}
.spinner i:nth-child(5) {
	transform: rotate(180deg);
	animation-delay: calc(var(--duration-spin) * -3/8);
}
.spinner i:nth-child(6) {
	transform: rotate(225deg);
	animation-delay: calc(var(--duration-spin) * -2/8);
}
.spinner i:nth-child(7) {
	transform: rotate(270deg);
	animation-delay: calc(var(--duration-spin) * -1/8);
}
.spinner i:nth-child(8) {
	transform: rotate(315deg);
	animation-delay: calc(var(--duration-spin) * 0/8);
}

@keyframes spinner-fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.2;
	}
}

/* IconButton: circles */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--size-control);
	height: var(--size-control);
	border-radius: var(--radius-full);
	color: var(--color-label-secondary);
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.icon-btn-sm {
	width: var(--size-control-sm);
	height: var(--size-control-sm);
}
.icon-btn-sm .icon {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
.icon-btn-lg {
	width: var(--size-control-lg);
	height: var(--size-control-lg);
}
.icon-btn:hover:not(:disabled) {
	color: var(--color-label);
}
/* A toggle that's on (a calendar shown) */
.icon-btn[aria-pressed='true'] {
	color: var(--color-accent);
}

:is(.toolbar, .popover, .menu)
	:is(.btn:not(.btn-primary), .icon-btn, .select-input) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
:is(.toolbar, .popover, .menu)
	:is(.btn:not(.btn-primary), .icon-btn, .select-input):hover {
	background: var(--color-fill);
}

/* Segmented: a glass capsule with a solid thumb on the choice */
.seg {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--size-border);
	height: var(--size-control);
	padding: calc(var(--space-1) / 2);
	border-radius: var(--radius-full);
}
.seg-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	height: 100%;
	min-width: var(--size-control);
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	color: var(--color-label-secondary);
	font-size: var(--text-body-size);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transition:
		background-color var(--duration-fast) var(--ease-spring),
		color var(--duration-fast) var(--ease-spring);
}
.seg-option:hover {
	color: var(--color-label);
}
/* Segmented's hint: a thumb that slides behind the labels, placed and faded
   by the component. A tint of the label, not the choice's thumb: dark glass
   and the dark thumb are too close to tell apart. */
.seg-hint {
	position: absolute;
	top: calc(var(--space-1) / 2);
	bottom: calc(var(--space-1) / 2);
	left: 0;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-label) 16%, transparent);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	opacity: 0;
	pointer-events: none;
}
.seg-option.is-selected {
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label);
}
.seg-sm {
	height: var(--size-control-sm);
}
.seg-sm .seg-option {
	font-size: var(--text-subheadline-size);
	padding: 0 var(--space-1-5);
}
:is(.toolbar, .popover, .menu) .seg {
	background: var(--color-fill);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

/* Switch */
.switch-field {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.switch-field.is-disabled {
	opacity: var(--opacity-disabled);
}
.switch {
	position: relative;
	flex-shrink: 0;
	width: calc(var(--size-control-sm) * 1.75);
	height: var(--size-control-sm);
	padding: calc(var(--space-1) / 2);
	border-radius: var(--radius-full);
	background: var(--color-fill);
	box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
	transition: background-color var(--duration-base) var(--ease-spring);
}
.switch:disabled {
	opacity: 1;
}
.switch-thumb {
	display: block;
	width: calc(var(--size-control-sm) - var(--space-1));
	height: calc(var(--size-control-sm) - var(--space-1));
	border-radius: var(--radius-full);
	background: var(--color-on-accent);
	box-shadow: var(--material-glass-prominent-shadow);
	transition: transform var(--duration-base) var(--ease-spring);
}
.switch[aria-checked='true'] {
	background: var(--color-accent);
	box-shadow: none;
}
.switch[aria-checked='true'] .switch-thumb {
	transform: translateX(calc(var(--size-control-sm) * 0.75));
}

/* Checkbox */
.check {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-2);
}
.check.is-disabled {
	opacity: var(--opacity-disabled);
}
.check-input {
	position: absolute;
	opacity: 0;
	width: var(--size-icon);
	height: var(--size-icon);
	margin: 0;
}
.check-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(var(--size-icon) - var(--space-1) / 2);
	height: calc(var(--size-icon) - var(--space-1) / 2);
	margin-top: calc(var(--space-1) / 4);
	border-radius: var(--radius-xs);
	background: var(--color-background-content);
	box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
	color: transparent;
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.check-input:checked + .check-box {
	background: var(--color-accent);
	box-shadow: none;
	color: var(--color-on-accent);
}
.check-input:focus-visible + .check-box {
	outline: var(--size-focus-ring) solid var(--color-focus);
	outline-offset: var(--size-border);
}
/* The box at the trailing edge: the row reads glyph, label, then the box */
.check-end {
	display: flex;
	width: 100%;
}
.check-end .check-input {
	right: 0;
}
.check-end :is(.check-input, .check-box) {
	order: 1;
	margin-left: auto;
}
.check-end .check-text {
	flex: 1;
}
.check-trailing {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	align-self: center;
}
.check-leading {
	display: inline-flex;
	flex-shrink: 0;
}
.check-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.check-detail {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}

/* LinkAction */
.link-action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-link);
	font-weight: var(--font-weight-medium);
}
.link-action:hover {
	text-decoration: underline;
	text-underline-offset: var(--space-1-5);
}
.link-action .icon {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
/* The arrow leans the way the link goes on hover (instant under Reduce Motion: durations are 0) */
.link-action-arrow {
	transition: transform var(--duration-fast) var(--ease-spring);
}
.link-action:hover .link-action-arrow {
	transform: translateX(calc(var(--space-1) / 2));
}
.link-action:hover .link-action-arrow.is-external {
	transform: translate(calc(var(--space-1) / 2), calc(var(--space-1) / -2));
}

/* Choice grid: pick one option, see what to do for it */
.choice {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-md);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.choice-head,
.choice-panel {
	padding: var(--space-4);
}
/* The hairline under the options; a panel used on its own has none */
.choice-head ~ .choice-panel {
	border-top: var(--size-border) solid var(--color-separator);
}
.choice-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}
.choice-note {
	margin: var(--space-3) 0 0;
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.choice-title {
	margin: 0;
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
}
.choice-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(calc(var(--size-sidebar) / 2), 1fr)
	);
	gap: var(--space-1-5);
}
.choice-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	height: var(--size-control);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label-secondary);
	font: inherit;
	font-size: var(--text-subheadline-size);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color var(--duration-fast) var(--ease-spring),
		box-shadow var(--duration-fast) var(--ease-spring);
}
.choice-option .icon,
.choice-option .brand-mark {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	flex-shrink: 0;
}
.choice-option > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.choice-option:hover {
	color: var(--color-label);
	background: var(--color-fill);
}
.choice-option.is-selected {
	color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	box-shadow: 0 0 0 var(--size-border) var(--color-accent);
}
.choice-option:focus-visible {
	outline: var(--size-focus-ring) solid var(--color-focus);
	outline-offset: var(--size-border);
}
.choice-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.choice-panel[hidden] {
	display: none;
}

/* TextField and TextArea: content, so solid, with a hairline ring */
.field {
	width: 100%;
	min-width: 0;
	height: var(--size-control);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label);
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	transition: box-shadow var(--duration-fast) var(--ease-spring);
}
.field::placeholder {
	color: var(--color-label-tertiary);
}
.field:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 var(--size-border) var(--color-accent),
		0 0 0 var(--size-focus-ring) var(--color-focus);
}
.field:disabled {
	opacity: var(--opacity-disabled);
}
.field-multiline {
	height: auto;
	padding: var(--space-2);
	resize: vertical;
	field-sizing: content;
	min-height: calc(var(--text-body-leading) * 4 + var(--space-4));
}
/* No chrome: reads as a subject line (a required title above a body), not a boxed input. */
.field-plain {
	height: auto;
	padding: 0;
	background: none;
	box-shadow: none;
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
}
.field-plain:focus-visible {
	box-shadow: none;
}

/* Select: a glass pop-up button with a chevron */
.select {
	position: relative;
	display: inline-flex;
	min-width: 0;
}
.select-input {
	appearance: none;
	width: 100%;
	min-width: 0;
	height: var(--size-control);
	padding: 0 calc(var(--space-3) + var(--size-icon-sm)) 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-full);
	font-size: var(--text-body-size);
	font-weight: var(--font-weight-medium);
	text-overflow: ellipsis;
}
.select-input:disabled {
	opacity: var(--opacity-disabled);
}
.select-chevron {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	transform: translateY(-50%);
	color: var(--color-label-secondary);
	pointer-events: none;
}

/* Quiet Select: its text in secondary, the list over it, unseen until open */
.select-quiet {
	align-items: center;
	gap: var(--space-1);
	align-self: flex-start;
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.select-quiet .select-input {
	position: absolute;
	inset: 0;
	height: 100%;
	padding: 0;
	opacity: 0;
}
.select-display {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}
.select-display-main {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.select-quiet .select-chevron {
	position: static;
	transform: none;
}
.select-quiet:hover {
	color: var(--color-label);
}
.select-quiet:has(.select-input:focus-visible) {
	border-radius: var(--radius-xs);
	outline: var(--size-focus-ring) solid var(--color-focus);
	outline-offset: var(--size-border);
}

/* Calendar: a month of days; today in accent, the pick on an accent circle.
   Seven day columns wide: a table at 100% would ask a shrink-to-fit parent
   (a popover) for all the room there is. */
.calendar {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	width: calc(var(--size-control) * 7);
}
.calendar-head {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding-left: var(--space-1);
}
.calendar-title {
	flex: 1;
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
}
.calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.calendar-weekday {
	height: var(--size-control-sm);
	padding: 0;
	color: var(--color-label-tertiary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
	text-align: center;
}
.calendar-cell {
	height: var(--size-control);
	padding: 0;
	text-align: center;
}
.calendar-day {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--size-control);
	height: var(--size-control);
	border-radius: var(--radius-full);
	color: var(--color-label);
	font-size: var(--text-body-size);
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.calendar-day:hover:not([aria-disabled='true']) {
	background: var(--color-fill);
}
.calendar-day.is-today {
	color: var(--color-accent);
	font-weight: var(--font-weight-semibold);
}
.calendar-day.is-selected,
.calendar-day.is-selected:hover {
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: var(--font-weight-semibold);
}
.calendar-day[aria-disabled='true'] {
	color: var(--color-label-tertiary);
}


/* ./components/content.css */
/* Content: Row, Disclosure, SectionHeader, Status, HomeIcon, PlatformGlyph, PostCard, Counter, EmptyState, CodeBlock, Logo. Tokens only. */

/* Row */
.row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--size-row);
	padding: 0 var(--space-2);
	border-radius: var(--radius-md);
	color: var(--color-label);
}
.row-lg {
	min-height: var(--size-row-lg);
}
.row.has-subtitle {
	padding-block: var(--space-1-5);
}
.row.is-link {
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.row.is-link:hover,
.row.is-selected {
	background: var(--color-fill);
}
.row-leading {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-label-secondary);
}
.row-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: calc(var(--space-1) / 2);
}
.row-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row-subtitle {
	overflow: hidden;
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row-trailing {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	color: var(--color-label-secondary);
}

/* RowGroup: rows in one frame, hairlines between. The first and last rows
   take the frame's corners (no clipping, so a row's menu can open past it). */
.row-group {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.row-group > * {
	border-radius: initial;
}
.row-group > * + * {
	border-top: var(--size-border) solid var(--color-separator);
}
.row-group > :first-child {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
}
.row-group > :last-child {
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}
/* A row's own buttons are borderless; the fill shows on hover */
.row-group :is(.icon-btn, .btn:not(.btn-primary), .select-input) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.row-group :is(.icon-btn, .btn:not(.btn-primary), .select-input):hover {
	background: var(--color-fill);
}
.row-group > .row {
	min-height: var(--size-row-lg);
	padding-inline: var(--space-3);
}
.row-group > .row.has-subtitle {
	padding-block: var(--space-2);
}

/* Disclosure */
.disclosure-summary {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	min-height: var(--size-row);
	padding: 0 var(--space-2);
	border-radius: var(--radius-md);
	list-style: none;
	font-weight: var(--font-weight-semibold);
	user-select: none;
}
.disclosure-summary::-webkit-details-marker {
	display: none;
}
.disclosure-summary:hover {
	background: var(--color-fill);
}
.disclosure-chevron {
	color: var(--color-label-secondary);
	transition: transform var(--duration-fast) var(--ease-spring);
}
.disclosure[open] > .disclosure-summary .disclosure-chevron {
	transform: rotate(90deg);
}
.disclosure-title {
	flex: 1;
	min-width: 0;
}
.disclosure-count {
	color: var(--color-label-secondary);
	font-weight: var(--font-weight-regular);
}
.disclosure[open] > .disclosure-summary .disclosure-count {
	display: none;
}
.disclosure-body {
	padding: var(--space-1) 0 var(--space-2) var(--space-5);
}

/* DisclosureGroup: one frame, hairlines between rows, square rows clipped
   by the frame's corners */
.disclosure-group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.disclosure-group > .disclosure + .disclosure {
	border-top: var(--size-border) solid var(--color-separator);
}
.disclosure-group > .disclosure > .disclosure-summary {
	min-height: var(--size-row-lg);
	padding: 0 var(--space-3);
	border-radius: initial;
}

/* SectionHeader */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: var(--size-control-sm);
	padding: 0 var(--space-2);
}
.section-header-title {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1-5);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	font-weight: var(--font-weight-semibold);
}
.section-header-title .icon {
	align-self: center;
}
.section-header-count {
	font-weight: var(--font-weight-regular);
}

/* Status: shape and color, so it reads without color too */
.status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.status-dot {
	width: var(--size-dot);
	height: var(--size-dot);
	border-radius: var(--radius-full);
	background: currentColor;
}
.status-good {
	color: var(--color-status-good);
}
.status-warning {
	color: var(--color-status-warning);
}
.status-critical {
	color: var(--color-status-critical);
}
.status-label {
	color: var(--color-label);
}

/* HomeIcon */
.home-icon {
	display: inline-flex;
	color: var(--color-label-secondary);
}

/* PlatformGlyph */
.glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	border-radius: var(--radius-xs);
	background: var(--color-fill);
	color: var(--color-label-secondary);
}
.glyph svg {
	width: 62%;
	height: 62%;
}
.glyph-sm {
	width: var(--size-icon);
	height: var(--size-icon);
}
.glyph-lg {
	width: var(--size-control);
	height: var(--size-control);
	border-radius: var(--radius-sm);
}

/* PostCard: content, so solid */
.post-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.post-card.is-selected {
	box-shadow: 0 0 0 var(--size-focus-ring) var(--color-focus);
}
.post-card-text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	white-space: pre-line;
}
.post-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.post-card-platforms {
	display: inline-flex;
	gap: var(--space-1);
}
.post-card-extra {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
.post-card-counter {
	margin-left: auto;
}

/* Counter */
.counter {
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
}
.counter.is-critical {
	color: var(--color-status-critical);
}

/* Table: a rounded hairline frame that clips its cells, so the header fill
   follows the corners. The scroller leaves room for the frame's ring. */
.table-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	max-width: 100%;
}
.table-scroll {
	align-self: stretch;
	max-width: 100%;
	padding: var(--size-border);
	overflow-x: auto;
}
/* A long table's first rows (tableRowsShown in Table.tsx is 7) */
.table-scroll.is-collapsed tbody tr:nth-child(n + 8) {
	display: none;
}
.table {
	width: 100%;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-md);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-body-leading);
}
.table th,
.table td {
	padding: var(--space-2) var(--space-3);
	border-top: var(--size-border) solid var(--color-separator);
	text-align: left;
	vertical-align: top;
}
.table > :first-child > tr:first-child > * {
	border-top: 0;
}
.table thead th {
	background: var(--color-fill);
	color: var(--color-label-secondary);
	font-weight: var(--font-weight-medium);
}
.table tbody th {
	color: var(--color-label-secondary);
	font-weight: var(--font-weight-regular);
}
/* Numbers line up on the right. */
.table :is(th, td).table-end {
	text-align: right;
	white-space: nowrap;
}

/* EmptyState */
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1-5);
	padding: var(--space-10) var(--space-4);
	text-align: center;
}
.empty-icon {
	margin-bottom: var(--space-1);
	color: var(--color-label-tertiary);
}
.empty-title {
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
}
.empty-description {
	max-width: var(--size-popover);
	color: var(--color-label-secondary);
}
.empty-action {
	margin-top: var(--space-2);
}

/* CodeBlock: content, so solid */
.code {
	position: relative;
	min-width: 0;
	max-width: 100%;
	border-radius: var(--radius-lg);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.code-label {
	padding: var(--space-2) var(--space-3) 0;
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.code-body {
	overflow-x: auto;
	padding: var(--space-3);
	padding-right: calc(var(--size-control-sm) + var(--space-4));
	font-size: var(--text-body-size);
	line-height: var(--text-title3-leading);
	white-space: pre;
}
.code-copy {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
}

/* Inline code: a mono chip in running text. A chip that wraps keeps its
   padding and corners on both lines. */
.inline-code {
	padding: 0.1em 0.4em;
	border-radius: var(--radius-xs);
	background: var(--color-fill);
	font-family: var(--font-mono);
	font-size: 0.9em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.table .inline-code {
	font-size: 1em;
}

/* Highlighted code (codeHighlight.ts): the syntax tokens, gray punctuation */
.code-keyword {
	color: var(--syntax-keyword);
}
.code-function {
	color: var(--syntax-function);
}
/* Bare words: shell arguments and subcommands */
.code-string {
	color: var(--color-label);
}
.code-constant {
	color: var(--syntax-constant);
}
.code-quoted {
	color: var(--syntax-string);
}
.code-parameter {
	color: var(--syntax-parameter);
}
.code-comment {
	color: var(--syntax-comment);
}
.code-punctuation {
	color: var(--color-label-secondary);
}
.code-link {
	color: var(--color-link);
}

/* Logo */
.logo {
	display: block;
	height: var(--size-logo);
	width: auto;
	overflow: visible;
	color: inherit;
}
.logo-mark {
	width: var(--size-logo);
}

/* Row meta: the small line above a title (category · date · read time) */
.row-meta {
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Icon tile: a glyph on a fill square */
.icon-tile {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--size-tile);
	height: var(--size-tile);
	border-radius: var(--radius-sm);
	background: var(--color-fill);
	color: var(--color-label-secondary);
	transition:
		color var(--duration-fast) var(--ease-spring),
		background-color var(--duration-fast) var(--ease-spring);
}
.icon-tile .brand-mark,
.icon-tile .glyph svg {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
.brand-mark {
	display: block;
	flex-shrink: 0;
	width: var(--size-icon);
	height: var(--size-icon);
}

/* Tag: quiet mono label */
.tag {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--color-label-secondary);
	font-family: var(--font-mono);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
}

/* A Tag riding right after a name in plain flowing text (a row's title or
   subtitle, a menu item) needs a gap of its own: unlike a flex row, there's
   no `gap` to lean on here. */
.row-title .tag,
.row-subtitle .tag,
.menu-item-label .tag {
	margin-left: var(--space-1-5);
}

/* Card: hairline, tile, title, a line or two */
.card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-1) var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label);
	text-decoration: none;
}
.card > .icon-tile {
	margin-top: calc(var(--space-1) / -2);
}
.card-text {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-1) / 2);
	min-width: 0;
	grid-column: 2;
}
.card:not(:has(> .icon-tile)) .card-text {
	grid-column: 1 / 3;
}
.card-title {
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
}
.card-body {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-body-leading);
}
.card-tag {
	grid-column: 3;
	grid-row: 1;
}
.card-extra {
	grid-column: 1 / -1;
	min-width: 0;
	padding-top: var(--space-2);
}
.card.is-link {
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.card.is-link:hover {
	background: color-mix(
		in srgb,
		var(--color-background-content) 92%,
		var(--color-label)
	);
}
.card.is-link:hover .icon-tile {
	background: color-mix(in srgb, var(--color-accent) 14%, transparent);
	color: var(--color-accent);
}
.card.is-selected {
	box-shadow: 0 0 0 var(--size-border) var(--color-accent);
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, var(--size-card-min)), 1fr)
	);
	gap: var(--space-2);
}
.card-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) {
	.card-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Check list: done steps behind a green check */
.check-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
.check-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
}
.check-list li > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.check-list-icon {
	flex-shrink: 0;
	margin-top: calc(var(--space-1) - var(--size-border));
	color: var(--color-status-good);
}

/* Copy field: one command with a Copy text button */
.copy-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
	min-width: 0;
}
.copy-field-label {
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.copy-field-box {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.copy-field-value {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	font-family: var(--font-mono);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
	white-space: pre;
}
.copy-field-button {
	flex-shrink: 0;
	align-self: flex-start;
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-xs);
	background: none;
	color: var(--color-label-secondary);
	font: inherit;
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
	cursor: pointer;
}
.copy-field-button:hover {
	background: var(--color-fill);
	color: var(--color-label);
}

/* Skeleton: the shape of what's loading, a soft shine sweeping across. Lines
   are one line of their text tall, with a rounded bar in the middle. */
.skeleton {
	display: block;
	flex-shrink: 0;
	max-width: 100%;
}
.skeleton-block,
.skeleton-circle,
.skeleton-line::before {
	background:
		linear-gradient(90deg, transparent, var(--color-separator) 50%, transparent)
			0 0 / 200% 100% no-repeat,
		var(--color-fill);
	animation: skeleton-shine var(--duration-shimmer) ease-in-out infinite;
}
@keyframes skeleton-shine {
	from {
		background-position:
			150% 0,
			0 0;
	}
	to {
		background-position:
			-50% 0,
			0 0;
	}
}
.skeleton-line {
	display: flex;
	align-items: center;
	width: 100%;
	height: 1lh;
}
.skeleton-line::before {
	content: '';
	width: 100%;
	height: 0.75em;
	border-radius: var(--radius-xs);
}
.skeleton-block {
	border-radius: var(--radius-sm);
}
.skeleton-circle {
	border-radius: var(--radius-full);
}
.skeleton-end {
	margin-left: auto;
}
.skeleton-text-caption {
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
}
.skeleton-text-subheadline {
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.skeleton-text-body {
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
}
.skeleton-text-title3 {
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
}
.skeleton-text-page-title {
	font-size: var(--text-page-title-size);
	line-height: var(--text-page-title-leading);
}
.skeleton-text-display-small {
	font-size: var(--text-display-small-size);
	line-height: var(--text-display-small-leading);
}
@media (prefers-reduced-motion: reduce) {
	.skeleton-block,
	.skeleton-circle,
	.skeleton-line::before {
		background: var(--color-fill);
		animation: none;
	}
}

/* StatStrip: numbers side by side; the gap shows the hairline between them,
   and the last row's stats grow so no empty cell shows. */
.stat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-border);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-separator);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.stat {
	display: flex;
	flex: 1 1 calc(var(--size-sidebar) / 2);
	flex-direction: column;
	gap: calc(var(--space-1) / 2);
	min-width: 0;
	padding: var(--space-3);
	background: var(--color-background-content);
}
.stat > * {
	margin: 0;
}
.stat-label {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.stat-value {
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
}
.stat-note {
	color: var(--color-label-tertiary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
}

/* DataState: no box of its own; an earlier answer dims while the new one
   loads, and a failed refresh says so above the data it keeps. */
.data-state {
	display: contents;
}
.data-state.is-refreshing > * {
	opacity: var(--opacity-pressed);
	transition: opacity var(--duration-base) var(--ease-spring);
}
.data-state-note {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	padding: 0 var(--space-3);
	color: var(--color-label);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
.data-state-note .icon {
	flex-shrink: 0;
	color: var(--color-status-warning);
}
.data-state-note.is-critical .icon {
	color: var(--color-status-critical);
}
.data-state-detail {
	color: var(--color-label-secondary);
}
.data-state-note .link-action {
	margin-left: auto;
}


/* ./components/overlays.css */
/* Overlays and bars: Toolbar, Popover, Menu, Sheet, Sidebar, Inspector. Tokens only. */

.toolbar,
.popover,
.menu {
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
	color: var(--material-glass-label);
}

/* Toolbar */
.toolbar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: calc(var(--size-control) + var(--space-2));
	padding: var(--space-1);
	border-radius: var(--radius-full);
}
.toolbar-group {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.toolbar-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: var(--font-weight-semibold);
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.toolbar-trailing {
	margin-left: auto;
}

/* Popover: concentric — radius 2xl around space-2 padding leaves lg inside */
.popover {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-2);
	border-radius: var(--radius-2xl);
}
.popover-popover {
	width: min(100%, var(--size-popover));
}
.popover-auto {
	width: max-content;
	max-width: 100%;
}

/* Menu: as wide as its longest item; concentric — radius xl around space-1
   padding leaves lg for the items. */
.menu {
	display: flex;
	flex-direction: column;
	padding: var(--space-1);
	border-radius: var(--radius-xl);
}
.menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	min-height: var(--size-control);
	padding: 0 var(--space-3) 0 var(--space-1);
	border-radius: var(--radius-lg);
	text-align: left;
	white-space: nowrap;
}
.menu-item:hover:not(:disabled),
.menu-item:focus-visible {
	background: var(--color-fill);
	outline: none;
}
.menu-item-check {
	display: inline-flex;
	justify-content: center;
	width: var(--size-icon);
	color: var(--color-label);
}
.menu-item-label {
	flex: 1;
}
.menu-item-shortcut {
	color: var(--color-label-secondary);
	font-family: var(--font-ui);
}
.menu-separator {
	height: var(--size-border);
	margin: var(--space-1) var(--space-2);
	background: var(--color-separator);
}
/* A label and a control (the theme switch); its label lines up with the items' icons. */
.menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--size-control);
	padding: 0 var(--space-1) 0
		calc(var(--space-1) + var(--size-icon) + var(--space-1-5));
}
.menu-row-label {
	color: var(--color-label-secondary);
	white-space: nowrap;
}

/* Sheet: solid */
.sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--layer-sheet);
	display: grid;
	place-items: center;
	padding: var(--space-4);
	background: color-mix(
		in srgb,
		var(--color-background-window) 50%,
		transparent
	);
}
.sheet {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: min(100%, var(--size-sheet));
	padding: var(--space-4);
	border-radius: var(--radius-2xl);
	background: var(--material-solid-background);
	box-shadow:
		0 0 0 var(--size-border) var(--material-solid-border),
		var(--material-glass-shadow);
	color: var(--material-solid-label);
}
.sheet-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.sheet-text {
	color: var(--color-label-secondary);
}
.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.sheet-title {
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
}
.sheet-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}

/* MenuButton and PopoverButton: a menu or popover anchored to its button,
   under it (or above it, for buttons at the bottom of the window). */
.anchor {
	position: relative;
	display: inline-flex;
}
.anchor .btn-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}
.anchor-chevron {
	margin-right: calc(var(--space-1) / -2);
	color: var(--color-label-secondary);
}
.anchor-popover {
	position: absolute;
	z-index: var(--layer-popover);
	width: max-content;
	min-width: 100%;
}
.anchor-below {
	top: calc(100% + var(--space-1));
}
.anchor-above {
	bottom: calc(100% + var(--space-1));
}
.anchor-popover-start {
	left: 0;
}
.anchor-popover-end {
	right: 0;
}

/* InfoPopover: ⓘ after a label, the fine print in a popover of text. The
   button is the bare glyph (no glass), in the label's tertiary color. */
.info {
	vertical-align: middle;
}
.info-button {
	display: inline-grid;
	place-items: center;
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	border-radius: var(--radius-full);
	color: var(--color-label-tertiary);
	transition: color var(--duration-fast) var(--ease-spring);
}
.info-button:hover,
.info-button[aria-expanded='true'] {
	color: var(--color-accent);
}
/* As wide as its text, wrapping at the popover width */
.info-popover {
	width: max-content;
	max-width: min(var(--size-popover), calc(100vw - var(--space-8)));
	padding: var(--space-3);
	color: var(--color-label-secondary);
	font-size: var(--text-copy-size);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-copy-leading);
	letter-spacing: normal;
	text-align: start;
	white-space: normal;
}
.info-popover p {
	margin: 0;
}

/* Sidebar and Inspector: glass panes inset from the window, radius xl.
   Controls inside lose their own glass (never glass on glass). */
.sidebar,
.inspector {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	padding: var(--space-3) var(--space-2);
	border-radius: var(--radius-xl);
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
	color: var(--material-glass-label);
}
.sidebar {
	width: var(--size-sidebar);
}
.inspector {
	width: var(--size-inspector);
	padding: var(--space-3);
}
.sidebar-group {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-1) / 2);
}
.sidebar-heading {
	padding: 0 var(--space-2) var(--space-1);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	font-weight: var(--font-weight-semibold);
}
.sidebar-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--size-control);
	padding: 0 var(--space-2);
	border-radius: var(--radius-md);
	color: var(--color-label);
	transition: background-color var(--duration-fast) var(--ease-spring);
}
.sidebar-item .icon {
	color: var(--color-accent);
}
.sidebar-item:hover {
	background: var(--color-fill);
}
.sidebar-item[aria-current='page'] {
	background: var(--color-fill);
	font-weight: var(--font-weight-medium);
}
.sidebar-item-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sidebar-item-trailing {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
}
:is(.sidebar, .inspector)
	:is(.btn:not(.btn-primary), .icon-btn, .select-input) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
:is(.sidebar, .inspector)
	:is(.btn:not(.btn-primary), .icon-btn, .select-input):hover {
	background: var(--color-fill);
}
/* Collapsed: a rail of icons. Names leave the layout but stay readable. */
.sidebar {
	transition: width var(--duration-base) var(--ease-spring);
}
.sidebar.is-collapsed {
	width: calc(var(--size-control-lg) + var(--space-4));
	align-items: center;
}
.sidebar.is-collapsed .sidebar-item {
	justify-content: center;
	width: var(--size-control-lg);
	padding: 0;
}
.sidebar.is-collapsed .sidebar-item-label {
	position: absolute;
	width: var(--size-border);
	height: var(--size-border);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sidebar.is-collapsed :is(.sidebar-heading, .sidebar-item-trailing) {
	display: none;
}
/* The rail's icons are gray, like its toggle; the current one in label. */
.sidebar.is-collapsed .sidebar-item .icon {
	color: var(--color-label-secondary);
}
.sidebar.is-collapsed .sidebar-item[aria-current='page'] .icon {
	color: var(--color-label);
}
/* A menu or popover opened from a pane goes solid over it. */
:is(.sidebar, .inspector) :is(.menu, .popover) {
	background: var(--material-solid-background);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow:
		0 0 0 var(--size-border) var(--material-solid-border),
		var(--material-glass-shadow);
	color: var(--material-solid-label);
}
:is(.sidebar, .inspector) .seg {
	background: var(--color-fill);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

/* A sheet's last word: a fine-print line (an icon, then small text), and the
   "done" view after an action (a round badge, a centered lede, fine print).
   statuz.cloud's feedback and invite sheets, statuz.app's download. */
.sheet-fine {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
}

.sheet-fine .icon {
	flex-shrink: 0;
	color: var(--color-label-tertiary);
}

.sheet-done {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-4);
	text-align: center;
}

.sheet-done-badge {
	align-self: center;
	display: grid;
	place-items: center;
	width: var(--size-tile-lg);
	height: var(--size-tile-lg);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-status-good) 16%, transparent);
	color: var(--color-status-good);
}

.sheet-done-lede {
	color: var(--color-label-secondary);
	line-height: var(--text-copy-leading);
	text-wrap: pretty;
}

.sheet-done-lede strong {
	color: var(--color-label);
	font-weight: var(--font-weight-medium);
}

.sheet-done .sheet-fine {
	justify-content: center;
}


/* ./components/connect.css */
/* The Statuz browser extension's handshake: the local loopback connect page
   and the extension's own Allow popup. Tokens only. */

.connect-card {
	width: min(100%, calc(var(--size-popover) + var(--space-16)));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-8) var(--space-6) var(--space-6);
	background: var(--material-solid-background);
	box-shadow: 0 0 0 var(--size-border) var(--material-solid-border);
	border-radius: var(--radius-2xl);
	text-align: center;
}

.connect-icon {
	display: grid;
	place-items: center;
	width: var(--size-tile-lg);
	height: var(--size-tile-lg);
	flex: none;
	border-radius: var(--radius-lg);
	background: var(--color-fill);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label-secondary);
}

.connect-icon svg {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

/* How it ended: the platform glyph gives way to a plain check or x. */
.connect-icon.is-good {
	background: color-mix(in srgb, var(--color-status-good) 16%, transparent);
	box-shadow: none;
	color: var(--color-status-good);
}

.connect-icon.is-critical {
	background: color-mix(in srgb, var(--color-status-critical) 14%, transparent);
	box-shadow: none;
	color: var(--color-status-critical);
}

.connect-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

/* "Connect Reddit", centered as plain text; Beta rides its top-right corner,
   out of flow, so it never pulls the title off-center. */
.connect-title {
	position: relative;
	display: inline-block;
}

.connect-title .tag {
	position: absolute;
	top: 0;
	right: 0;
	translate: 100% -50%;
}

.connect-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-fill);
	color: var(--color-label);
}

.connect-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.connect-pill .spinner {
	font-size: var(--size-icon-sm);
}

.connect-pill.is-good {
	background: color-mix(in srgb, var(--color-status-good) 16%, transparent);
	color: var(--color-status-good);
}

.connect-pill.is-critical {
	background: color-mix(in srgb, var(--color-status-critical) 14%, transparent);
	color: var(--color-status-critical);
}

.connect-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	text-align: left;
	width: 100%;
}

.connect-steps li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.connect-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-control-sm);
	height: var(--size-control-sm);
	flex: none;
	border-radius: var(--radius-full);
	background: var(--color-fill);
	font-size: var(--text-subheadline-size);
	font-weight: var(--text-headline-weight);
	color: var(--color-label-secondary);
}

.connect-step-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* The first line's middle on the number's middle, whatever the line height */
	padding-top: calc((var(--size-control-sm) - 1lh) / 2);
}

/* The extension's own Allow popup: who's signed in, where it connects. */
.connect-rows {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	text-align: left;
}

.connect-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.connect-row + .connect-row {
	box-shadow: 0 calc(var(--size-border) * -1) 0 var(--color-separator) inset;
}

/* The tile is .icon-tile from content.css. */
.connect-row-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.connect-row-text > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ./components/site.css */
/*
 * Marketing pages (statuz.app, statuz.cloud): one 680 column, a quiet header,
 * a footer, the page intro and titled blocks. Tokens only.
 */

.site {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	width: min(100%, calc(var(--size-column) + var(--space-8) * 2));
	min-height: 100vh;
	margin: 0 auto;
	padding: var(--space-8) var(--space-8) var(--space-6);
}
.site.is-page {
	width: min(100%, calc(var(--size-page) + var(--space-8) * 2));
}
.site-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	min-width: 0;
}

/* Header: logo left, quiet links right, one capsule */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
.site-logo {
	display: inline-flex;
	color: var(--color-label);
}
.site-logo .logo {
	height: var(--size-icon-lg);
}
.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-width: 0;
}
.site-nav-link {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-spring);
}
.site-nav-link:hover,
.site-nav-link[aria-current='page'] {
	color: var(--color-label);
}
.site-nav-action {
	margin-left: var(--space-1);
}
/* A count riding a header or footer link's top-right corner (SiteLinkBadge): out of flow, so the label never moves */
.site-nav-link.has-badge,
.site-footer-column a.has-badge {
	position: relative;
}
/* A footer link hugs its label (not the column), so the badge rides the label */
.site-footer-column a.has-badge {
	align-self: flex-start;
}
.site-link-badge {
	position: absolute;
	/* The capitals' top, whatever the line height: the badge rides the label's corner */
	top: calc(50% - 0.5cap);
	left: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	padding: 0 calc(var(--space-1) / 2);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: calc(var(--text-caption-size) * 0.9);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transform: translate(calc(var(--space-1) * -0.25), -70%);
	pointer-events: none;
}
.site-link-badge[hidden] {
	display: none;
}

/* Footer: brand left, a 2×2 of link groups right, a hairline base */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-8) var(--space-6);
	padding-top: var(--space-8);
	border-top: var(--size-border) solid var(--color-separator);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
.site-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	max-width: var(--size-inspector);
}
.site-footer-brand p {
	margin: 0;
}
.site-footer-links {
	display: grid;
	grid-template-columns: repeat(
		2,
		minmax(var(--size-footer-column), max-content)
	);
	gap: var(--space-6) var(--space-10);
}
.site-footer-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
}
.site-footer-column h2,
.block-title,
.copy-label {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.site-footer-column a {
	color: var(--color-label);
}
.site-footer-column a:hover {
	color: var(--color-link);
}
.site-footer-base {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: var(--size-border) solid var(--color-separator);
	font-size: var(--text-caption-size);
}
.site-footer-base a:hover {
	color: var(--color-label);
}
/* The base line's right end: an optional aside (statuz.app's PartnerChip), then the X mark */
.site-footer-end {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}
.site-footer-social {
	display: inline-flex;
	color: var(--color-label-secondary);
}
.site-footer-social .brand-mark {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

/* Page intro: crumb, title, lede, hairline */
.intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-bottom: var(--space-6);
	border-bottom: var(--size-border) solid var(--color-separator);
}
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
	font-weight: var(--text-caption-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.crumb {
	display: inline-flex;
	gap: var(--space-1);
}
.crumbs a:hover {
	color: var(--color-label);
}
.crumb-separator {
	color: var(--color-label-tertiary);
}
.intro-title {
	margin: var(--space-1) 0 0;
	font-size: var(--text-page-title-size);
	line-height: var(--text-page-title-leading);
	font-weight: var(--text-page-title-weight);
	letter-spacing: var(--text-page-title-tracking);
	text-wrap: balance;
}
.intro-lede {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
	text-wrap: pretty;
}
.intro-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

/* Blocks: a small uppercase heading over its content */
.block {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}
.block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}
.block-head .link-action {
	font-size: var(--text-subheadline-size);
}

.hint,
.secondary {
	color: var(--color-label-secondary);
}
.hint {
	margin: 0;
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.visually-hidden {
	position: absolute;
	width: var(--size-border);
	height: var(--size-border);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Platforms under the home title */
.platform-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1-5) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.platform-row li {
	display: inline-flex;
	align-items: center;
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	transition: color var(--duration-fast) var(--ease-spring);
}
/* Logos only; a name slides out beside its logo on hover */
.platform-name {
	display: grid;
	grid-template-columns: 0fr;
	margin-left: 0;
	opacity: 0;
	transition:
		grid-template-columns var(--duration-base) var(--ease-spring),
		margin-left var(--duration-base) var(--ease-spring),
		opacity var(--duration-fast) var(--ease-spring);
}
.platform-name-text {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.platform-row li:hover {
	color: var(--color-label);
}
.platform-row li:hover .platform-name {
	grid-template-columns: 1fr;
	margin-left: var(--space-1-5);
	opacity: 1;
}

/* Compare: Local and Cloud, Cloud raised (on the DS Table) */
.compare thead th {
	color: var(--color-label);
	font-weight: var(--font-weight-semibold);
}
.compare .is-raised {
	background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.compare thead .is-raised {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.compare-head {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
}
.compare-head .home-icon {
	color: var(--color-label-secondary);
}

/* Where #id links land: the same room above as prose headings */
.anchor-target,
.block-title,
.choice[id] {
	scroll-margin-top: var(--space-6);
}

/* Questions */
.questions .disclosure-body {
	padding: 0 var(--space-3) var(--space-3)
		calc(var(--space-3) + var(--size-icon-sm) + var(--space-2));
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}

/* A control's ring fits; its drop shadow would be clipped square, so it has none here */
.scroll-x > .seg {
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator);
}
/* Room for a control's 1px ring, which overflow would otherwise clip */
.scroll-x {
	max-width: calc(100% + var(--size-border) * 2);
	margin: calc(var(--size-border) * -1);
	padding: var(--size-border);
	overflow-x: auto;
	scrollbar-width: none;
}
.questions .disclosure-body p,
.card-body p {
	margin: 0;
}

@media (max-width: 640px) {
	.site {
		padding: var(--space-5) var(--space-4) var(--space-5);
		gap: var(--space-8);
	}
	.site-nav {
		gap: var(--space-3);
	}
	.site-nav-link.is-secondary {
		display: none;
	}
	.intro-title {
		font-size: var(--text-title-size);
		line-height: var(--text-title-leading);
	}
}

@media (max-width: 420px) {
	.site-nav-link.is-tertiary {
		display: none;
	}
}


/* ./components/stage.css */
/*
 * Home pages (statuz.app, statuz.cloud) on the 1080 frame: the page and its
 * ambient backdrop, section headlines, the quiet part and the closing call,
 * then the pictures: Mac windows (WindowFrame) around real screenshots, a
 * terminal and an agent chat, and glass chips floating around them. The
 * sections themselves are in stage-sections.css. Motion only moves
 * transform, translate and opacity, and only with motion allowed; every
 * picture is complete without it. Tokens only.
 */

/* Every glow (home pages, the sign-in card): the accent, eased out so no edge shows */
:root {
	--stage-glow-fill: radial-gradient(
		closest-side,
		var(--color-glow),
		color-mix(in srgb, var(--color-glow) 55%, transparent) 30%,
		color-mix(in srgb, var(--color-glow) 20%, transparent) 60%,
		color-mix(in srgb, var(--color-glow) 5%, transparent) 85%,
		transparent
	);
}

.stage-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-width: 0;
	padding-top: var(--space-8);
}

/* html and body both paint the window color, so the backdrop needs body as
   its stacking context: above body's background, under all of its content */
body:has(.stage-backdrop) {
	isolation: isolate;
}

/* No positioned ancestor: it spans the page itself and never scrolls sideways */
.stage-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--layer-behind);
	width: 100%;
	height: var(--stage-backdrop);
	overflow: hidden;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, black 50%, transparent);
}
.stage-backdrop .glow {
	position: absolute;
	width: var(--stage-glow);
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background: var(--stage-glow-fill);
}
/* Centered on the headline and the buttons, wider than tall */
.stage-backdrop .glow.is-main {
	top: -8%;
	left: 50%;
	translate: -50% 0;
	scale: 1.6 1;
}
/* A smaller one behind the right-hand window */
.stage-backdrop .glow.is-side {
	top: 34%;
	left: 62%;
	scale: 0.9;
	opacity: 0.9;
}
/* Dots lit around the headline and windows, gone toward the edges */
.stage-backdrop .dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle,
		var(--color-grid-dot) var(--size-border),
		transparent calc(var(--size-border) * 1.5)
	);
	background-position: center top;
	background-size: var(--stage-dot) var(--stage-dot);
	mask-image: radial-gradient(
		ellipse 60% 45% at 50% 32%,
		black 25%,
		transparent 75%
	);
}

/* A section's big headline, with the hero's light fainter behind it */
.stage-heading {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	max-width: var(--size-column);
	margin: 0 auto;
	text-align: center;
}
/* As wide as the headline (so never a sideways scroll), under everything */
.stage-heading::before {
	content: '';
	position: absolute;
	inset: -80% 0;
	z-index: var(--layer-behind);
	background: var(--stage-glow-fill);
	opacity: 0.55;
	pointer-events: none;
}
/* A soft patch of the hero's dot grid under the glow */
.stage-heading::after {
	content: '';
	position: absolute;
	inset: -70% 0;
	z-index: var(--layer-behind);
	background-image: radial-gradient(
		circle,
		var(--color-grid-dot) var(--size-border),
		transparent calc(var(--size-border) * 1.5)
	);
	background-position: center;
	background-size: var(--stage-dot) var(--stage-dot);
	mask-image: radial-gradient(closest-side, black 20%, transparent);
	pointer-events: none;
}
.stage-heading .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	margin: 0 0 var(--space-1);
	padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	font-weight: var(--font-weight-semibold);
}
.stage-heading h2 {
	margin: 0;
	font-size: var(--text-display-size);
	line-height: var(--text-display-leading);
	font-weight: var(--text-display-weight);
	letter-spacing: var(--text-display-tracking);
	text-wrap: balance;
}
.stage-heading p {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-feature-size);
	line-height: var(--text-feature-leading);
	text-wrap: pretty;
}
.stage-heading .link-action {
	font-size: var(--text-feature-compact-size);
}
.stage-heading.is-start {
	align-items: flex-start;
	margin: 0;
	text-align: start;
}

/* The quiet part: the 680 column's blocks, after the big sections */
.stage-quiet {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	width: 100%;
	max-width: var(--size-column);
	margin: 0 auto;
}

/* The closing call */
.stage-start {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding-bottom: var(--space-12);
	text-align: center;
}
/* The hero's light behind the closing call, so the page ends where it began */
.stage-start::before {
	content: '';
	position: absolute;
	inset: -40% 0 0;
	z-index: var(--layer-behind);
	background: var(--stage-glow-fill);
	opacity: 0.8;
	pointer-events: none;
}
.stage-start::after {
	content: '';
	position: absolute;
	inset: -30% 0 0;
	z-index: var(--layer-behind);
	background-image: radial-gradient(
		circle,
		var(--color-grid-dot) var(--size-border),
		transparent calc(var(--size-border) * 1.5)
	);
	background-position: center;
	background-size: var(--stage-dot) var(--stage-dot);
	mask-image: radial-gradient(closest-side, black 25%, transparent);
	pointer-events: none;
}
.stage-start .platform-row {
	justify-content: center;
}
.stage-start h2 {
	margin: 0;
	font-size: var(--text-hero-medium-size);
	line-height: var(--text-hero-medium-leading);
	font-weight: var(--text-hero-medium-weight);
	letter-spacing: var(--text-hero-medium-tracking);
	text-wrap: balance;
}
.stage-start p {
	max-width: var(--size-column);
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-feature-size);
	line-height: var(--text-feature-leading);
	text-wrap: balance;
}
.stage-start .actions,
.stage-hero .actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}
.stage-start .copy-field {
	width: min(100%, var(--size-sheet));
	text-align: start;
}

/*
 * A Mac window: rounded body, a title bar with the three buttons, the
 * screen. Sizes follow its width (cqi), so the same window works at 300 and
 * at 640. The screen is 16:10, a screenshot's shape; anything fills it.
 */
.window-frame {
	width: var(--window-width, 100%);
	container-type: inline-size;
	text-align: start;
}
.window-frame-body {
	overflow: hidden;
	border-radius: 1.4cqi;
	background: var(--color-background-window);
	box-shadow:
		0 0 0 var(--size-border) var(--color-separator),
		0 3cqi 8cqi color-mix(in srgb, black 22%, transparent),
		0 0.6cqi 1.6cqi color-mix(in srgb, black 10%, transparent);
}
.window-frame-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.4cqi;
	padding: 0 1.8cqi;
	background: var(--color-background-window);
	box-shadow: inset 0 calc(var(--size-border) * -1) 0 var(--color-separator);
	color: var(--color-label-secondary);
	font-size: 1.8cqi;
	font-weight: var(--font-weight-semibold);
}
.window-frame-lights {
	position: absolute;
	left: 1.8cqi;
	display: flex;
	gap: 0.8cqi;
}
.window-frame-lights span {
	width: 1.2cqi;
	height: 1.2cqi;
	border-radius: var(--radius-full);
	background: var(--color-status-critical);
}
.window-frame-lights span:nth-child(2) {
	background: var(--color-status-warning);
}
.window-frame-lights span:nth-child(3) {
	background: var(--color-status-good);
}
.window-frame-address {
	display: inline-flex;
	align-items: center;
	gap: 0.6cqi;
	height: 2.8cqi;
	padding: 0 2.4cqi;
	border-radius: var(--radius-full);
	background: var(--color-fill);
	font-weight: var(--font-weight-medium);
}
.window-frame-address .icon {
	width: 1.4cqi;
	height: 1.4cqi;
}
.window-frame-screen {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-background-content);
}

/* A screenshot in the page's appearance: the system's, or the one the footer forces */
.screenshot,
.screenshot picture,
.screenshot img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
}
.screenshot .is-light,
.screenshot .is-dark {
	display: none;
}
:root[data-theme='light'] .screenshot .is-auto,
:root[data-theme='dark'] .screenshot .is-auto {
	display: none;
}
:root[data-theme='light'] .screenshot .is-light,
:root[data-theme='dark'] .screenshot .is-dark {
	display: block;
}

/* A real window as macOS drew it (its own corners and title bar): a soft shadow under the shape */
.screenshot.is-window img {
	filter: drop-shadow(
			0 var(--space-6) var(--space-12)
				color-mix(in srgb, black 24%, transparent)
		)
		drop-shadow(
			0 var(--space-1) var(--space-2) color-mix(in srgb, black 12%, transparent)
		);
}
/* The menu bar popover: a small panel, centered where a window would be */
.screenshot.is-popover {
	width: 62%;
	margin: 0 auto;
}

/* A terminal session, in the window's scale */
.terminal {
	height: 100%;
	margin: 0;
	padding: 3cqi 3.4cqi;
	overflow: hidden;
	background: var(--color-background-content);
	color: var(--color-label);
	font-family: var(--font-mono);
	font-size: 2.05cqi;
	line-height: 1.6;
	white-space: pre;
}
.terminal-line {
	display: block;
	min-height: 1.6em;
}
.terminal-line.is-output {
	color: var(--color-label-secondary);
}
.terminal-prompt {
	color: var(--color-label-tertiary);
}
.terminal .is-command {
	color: var(--syntax-function);
}
.terminal .is-flag {
	color: var(--syntax-parameter);
}
.terminal .is-string {
	color: var(--syntax-string);
}
.terminal-check {
	color: var(--color-status-good);
}

/* An agent conversation, in the window's scale */
.agent-chat {
	display: flex;
	flex-direction: column;
	gap: 1.8cqi;
	height: 100%;
	margin: 0;
	padding: 3cqi 3.4cqi;
	overflow: hidden;
	list-style: none;
	background: var(--color-background-content);
	font-size: 2.1cqi;
	line-height: 1.45;
}
.agent-chat-line.is-you {
	align-self: flex-end;
	max-width: 78%;
	padding: 1.2cqi 2cqi;
	border-radius: 2.4cqi;
	border-bottom-right-radius: 0.6cqi;
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.agent-chat-line.is-agent {
	max-width: 88%;
	color: var(--color-label);
}
.agent-chat-line.is-tool {
	display: flex;
	flex-direction: column;
	gap: 0.6cqi;
	align-self: flex-start;
	padding: 1.2cqi 1.8cqi;
	border-radius: 1.4cqi;
	background: var(--color-fill);
	color: var(--color-label-secondary);
}
.agent-chat-tool {
	display: inline-flex;
	align-items: center;
	gap: 0.8cqi;
	color: var(--color-label);
	font-family: var(--font-mono);
	font-size: 1.9cqi;
}
.agent-chat-tool .icon {
	width: 1.8cqi;
	height: 1.8cqi;
	color: var(--color-accent);
}
.agent-chat-detail {
	font-size: 1.8cqi;
}

/* Glass chips, floating around the hero's windows or beside a headline */
.stage-floats {
	position: absolute;
	inset: 0;
	z-index: var(--layer-lift);
	pointer-events: none;
}
.stage-floats .float {
	position: absolute;
}
.stage-floats .chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	height: var(--size-control-lg);
	padding: 0 var(--space-3) 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
	color: var(--material-glass-label);
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.stage-floats .chip > .icon {
	color: var(--color-accent);
}
.stage-floats .chip.is-good > .icon {
	color: var(--color-status-good);
}
.stage-floats .chip.is-warning > .icon {
	color: color-mix(
		in srgb,
		var(--color-status-warning) 70%,
		var(--color-label)
	);
}
.stage-floats .chip.is-critical > .icon {
	color: var(--color-status-critical);
}
.stage-floats .chip-platforms {
	display: inline-flex;
	gap: var(--space-1);
}
.stage-floats .value {
	color: var(--color-accent);
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}
.stage-floats .time {
	color: var(--color-label-secondary);
	font-weight: var(--font-weight-regular);
	font-variant-numeric: tabular-nums;
}
/* A bar under the words: how much of a limit a post uses */
.stage-floats .chip.has-meter {
	display: inline-grid;
	grid-template-columns: auto auto auto;
	row-gap: var(--space-1-5);
	height: auto;
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
	border-radius: var(--radius-lg);
}
.stage-floats .meter {
	grid-column: 1 / -1;
	height: var(--space-1);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-fill);
}
.stage-floats .meter span {
	display: block;
	width: calc(var(--meter) * 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--color-accent);
}

/* Hero chips: two on a narrower window, none on a phone */
@media (max-width: 1023px) {
	.stage-floats.is-hero .float:nth-child(n + 3) {
		display: none;
	}
}
@media (max-width: 640px) {
	.stage-floats.is-hero {
		display: none;
	}
}

/* Section chips: in the room either side of the column, on a wide window */
.stage-floats.is-section .float {
	--side: calc(100% + var(--space-10) + var(--offset) * var(--space-1));
}
.stage-floats.is-section .float.is-start {
	right: var(--side);
}
.stage-floats.is-section .float.is-end {
	left: var(--side);
}
@media (max-width: 1199px) {
	.stage-floats.is-section {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.stage-backdrop .glow {
		animation: stage-drift var(--duration-drift) ease-in-out infinite alternate;
	}
	.stage-backdrop .glow.is-side {
		animation-direction: alternate-reverse;
		animation-delay: calc(var(--duration-drift) / -3);
	}
	.stage-floats .chip {
		animation: stage-bob var(--duration-float) ease-in-out infinite alternate;
		animation-delay: calc(var(--duration-float) * var(--i) / -3);
	}

	/* A scene that plays once: hidden below the fold, then line by line */
	[data-reveal='armed'] .terminal-line,
	[data-reveal='armed'] .agent-chat-line {
		opacity: 0;
	}
	[data-reveal='playing'] .terminal-line {
		animation: stage-appear var(--duration-tick) both;
		animation-delay: calc(var(--at) * var(--duration-tick));
	}
	[data-reveal='playing']
		.terminal-line:is(.is-command, .is-more)
		.terminal-typed {
		display: inline-block;
		overflow: hidden;
		vertical-align: bottom;
		animation: stage-type both steps(var(--chars), end);
		animation-duration: calc(var(--typing) * var(--duration-tick));
		animation-delay: calc(var(--at) * var(--duration-tick));
	}
	[data-reveal='playing'] .agent-chat-line {
		animation: stage-arrive var(--duration-slow) var(--ease-spring) both;
		animation-delay: calc(var(--i) * var(--duration-slow) * 1.4);
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.stage-floats.is-hero .float {
			animation: stage-float-rise linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 var(--stage-travel);
		}
		.stage-floats.is-section .float {
			animation: stage-float-pass linear both;
			animation-timeline: view();
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.stage-backdrop,
	.stage-heading::before,
	.stage-heading::after,
	.stage-start::before,
	.stage-start::after {
		display: none;
	}
}

@media (max-width: 640px) {
	.stage-page {
		gap: var(--space-16);
		padding-top: var(--space-4);
	}
	.stage-heading h2 {
		font-size: var(--text-display-small-size);
		line-height: var(--text-display-small-leading);
		letter-spacing: var(--text-display-small-tracking);
	}
	.stage-heading p,
	.stage-start p {
		font-size: var(--text-feature-compact-size);
		line-height: var(--text-feature-compact-leading);
	}
	.stage-start h2 {
		font-size: var(--text-hero-compact-size);
		line-height: var(--text-hero-compact-leading);
		letter-spacing: var(--text-hero-compact-tracking);
	}
	.stage-start {
		padding-bottom: var(--space-6);
	}
}

@keyframes stage-drift {
	from {
		transform: translate(calc(var(--stage-drift) * -1), 0);
	}
	to {
		transform: translate(var(--stage-drift), calc(var(--stage-drift) / 2));
	}
}

@keyframes stage-bob {
	from {
		translate: 0 calc(var(--stage-float) * -1);
	}
	to {
		translate: 0 var(--stage-float);
	}
}

@keyframes stage-float-rise {
	to {
		translate: 0 calc(var(--stage-parallax) * var(--depth) * -1);
	}
}

/* Across its pass through the window: from a little low to a little high */
@keyframes stage-float-pass {
	from {
		translate: 0 calc(var(--stage-parallax) * var(--depth) / 2);
	}
	to {
		translate: 0 calc(var(--stage-parallax) * var(--depth) / -2);
	}
}

@keyframes stage-appear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes stage-type {
	from {
		max-width: 0;
	}
	to {
		max-width: calc(var(--chars) * 1ch);
	}
}

@keyframes stage-arrive {
	from {
		opacity: 0;
		translate: 0 var(--space-3);
	}
}

/* A window or a line rising into place as it scrolls in */
@keyframes stage-rise {
	from {
		translate: 0 var(--stage-rise);
	}
}


/* ./components/stage-sections.css */
/*
 * The home sections (StageHero, StageStory, StageMoment, StageTrust). The
 * page, headings, windows and chips are in stage.css. Scroll motion lives
 * only inside @supports (animation-timeline) with motion allowed, and moves
 * transform, translate and opacity; without it each section shows its rest
 * pose. Tokens only.
 */

/*
 * Hero: big centered type, then three windows fanned on a 3D stage. At rest
 * the fan leans back with the side windows turned in behind the front one;
 * the first stretch of scroll lifts it, stands it up and spreads the sides.
 */
.stage-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding-top: var(--space-12);
	text-align: center;
}
.stage-hero .copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}
.stage-hero .title {
	margin: 0;
	font-size: var(--text-hero-size);
	line-height: var(--text-hero-leading);
	font-weight: var(--text-hero-weight);
	letter-spacing: var(--text-hero-tracking);
	text-wrap: balance;
}
.stage-hero .title-mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}
.stage-hero .title-stroke {
	position: absolute;
	left: -2%;
	bottom: -0.16em;
	width: 104%;
	height: 0.3em;
	overflow: visible;
	color: var(--color-accent);
	pointer-events: none;
}
.stage-hero .title-stroke path {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.075em;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.stage-hero .lede {
	max-width: var(--size-column);
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-feature-size);
	line-height: var(--text-feature-leading);
	text-wrap: balance;
}
.stage-hero .platform-row {
	justify-content: center;
}
/* The side windows reach past the page: the stage bleeds through the page
   padding so the clip falls on the window's edge, and nothing scrolls sideways */
.stage-hero .stage {
	position: relative;
	width: calc(100% + var(--space-8) * 2);
	margin-inline: calc(var(--space-8) * -1);
	overflow-x: clip;
	padding: 0 var(--space-8);
	margin-bottom: calc(var(--stage-rise) * -1);
	perspective: var(--stage-perspective);
	perspective-origin: 50% 0%;
}
.stage-hero .fan {
	display: grid;
	place-items: center;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	transform: rotateX(var(--stage-lean));
}
.stage-hero .pane {
	grid-area: 1 / 1;
	width: min(100%, var(--size-stage-window));
}
.stage-hero .pane.is-center {
	z-index: var(--layer-lift);
}
.stage-hero .pane.is-left {
	transform: translateX(calc(var(--stage-spread) * -1))
		translateZ(calc(var(--stage-depth) * -1)) rotateY(var(--stage-turn))
		scale(var(--stage-side));
}
.stage-hero .pane.is-right {
	transform: translateX(var(--stage-spread))
		translateZ(calc(var(--stage-depth) * -1))
		rotateY(calc(var(--stage-turn) * -1)) scale(var(--stage-side));
}

/*
 * Story: wide, the window is pinned in the left column for as long as the
 * steps scroll by on the right, each about a browser window tall, and it
 * crossfades to the step in the middle. Narrow: each step is its window,
 * then its words, and nothing pins.
 */
.stage-story {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}
.stage-story .body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	column-gap: var(--space-12);
}
.stage-story .pin {
	position: sticky;
	top: 0;
	align-self: start;
	display: grid;
	place-items: center;
	height: 100vh;
}
.stage-story .layers {
	display: grid;
	width: min(
		100%,
		var(--size-stage-window-lg),
		calc((100vh - var(--space-16) * 2) * var(--stage-fit))
	);
}
.stage-story .layer {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-spring);
}
.stage-story .layer.is-active {
	opacity: 1;
}
/* Half a spare window above and below, so the first and last step center under the pin */
.stage-story .steps {
	margin: 0;
	padding: calc((100vh - var(--stage-step)) / 2) 0;
	list-style: none;
}
.stage-story .step {
	display: flex;
	align-items: center;
	min-height: var(--stage-step);
}
.stage-story .step .visual {
	display: none;
}
.stage-story .copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	transition: opacity var(--duration-slow) var(--ease-spring);
}
.stage-story .count {
	display: grid;
	place-items: center;
	width: var(--size-control);
	height: var(--size-control);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
	font-size: var(--text-headline-size);
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}
.stage-story .copy h3 {
	margin: 0;
	font-size: var(--text-display-small-size);
	line-height: var(--text-display-small-leading);
	font-weight: var(--text-display-small-weight);
	letter-spacing: var(--text-display-small-tracking);
	text-wrap: balance;
}
.stage-story .copy p {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-feature-size);
	line-height: var(--text-feature-leading);
	text-wrap: pretty;
}
@media (min-width: 900px) {
	.stage-story[data-live] .step:not(.is-active) .copy {
		opacity: var(--opacity-disabled);
	}
}

/*
 * Moment: the words on one side and a big window on the other, glass
 * bubbles at its edges. On a narrow screen it stacks and the bubbles line
 * up under the window.
 */
.stage-moment {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: center;
	gap: var(--space-16);
}
.stage-moment.is-reverse {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.stage-moment.is-reverse > .stage-heading {
	order: 1;
}
.stage-moment .stage {
	position: relative;
}
.stage-moment .bubbles {
	margin: 0;
	padding: 0;
	list-style: none;
}
.stage-moment .bubble {
	position: absolute;
	z-index: var(--layer-lift);
	width: max-content;
	max-width: var(--size-inspector);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-2xl);
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
	color: var(--material-glass-label);
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
}
/* Left, tail toward the window; then right */
.stage-moment .bubble:nth-child(odd) {
	left: calc(var(--space-8) * -1);
	border-bottom-right-radius: var(--radius-sm);
}
.stage-moment .bubble:nth-child(even) {
	right: calc(var(--space-8) * -1);
	border-bottom-left-radius: var(--radius-sm);
}
.stage-moment .bubble:nth-child(1) {
	top: 4%;
}
.stage-moment .bubble:nth-child(2) {
	top: 30%;
}
.stage-moment .bubble:nth-child(3) {
	top: 58%;
}
.stage-moment .bubble:nth-child(4) {
	top: 84%;
}

/*
 * Trust: a solid panel (content) lit by a faint accent glow, the path on the
 * left and the headline over a 2×2 of points on the right; on a narrow
 * screen it stacks headline, path, points.
 */
.stage-trust {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-areas:
		'path head'
		'path points';
	align-items: start;
	gap: var(--space-10) var(--space-16);
	padding: var(--space-16);
	border-radius: var(--radius-2xl);
	background:
		radial-gradient(
			ellipse 60% 70% at 18% 22%,
			color-mix(in srgb, var(--color-accent) 12%, transparent),
			transparent 70%
		),
		radial-gradient(
			ellipse 55% 60% at 100% 100%,
			color-mix(in srgb, var(--color-status-good) 7%, transparent),
			transparent 70%
		),
		var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.stage-trust > .stage-heading {
	grid-area: head;
	align-self: end;
}
/* The panel already glows: no second light behind its headline */
.stage-trust > .stage-heading::before,
.stage-trust > .stage-heading::after {
	display: none;
}
.stage-trust .path {
	grid-area: path;
	align-self: center;
	display: flex;
	justify-content: center;
	margin: 0;
}
.stage-trust .copy {
	grid-area: points;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}
.stage-trust .icon-tile {
	width: var(--size-tile-lg);
	height: var(--size-tile-lg);
	border-radius: var(--radius-lg);
}
.stage-trust .icon-tile .icon,
.stage-trust .icon-tile .glyph svg {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}
.stage-trust .icon-tile .glyph {
	background: none;
	color: inherit;
}
.stage-trust .icon-tile.is-accent {
	background: color-mix(in srgb, var(--color-accent) 14%, transparent);
	color: var(--color-accent);
}
.stage-trust .icon-tile.is-good {
	background: color-mix(in srgb, var(--color-status-good) 16%, transparent);
	color: var(--color-status-good);
}
.stage-trust .icon-tile.is-warning {
	background: color-mix(in srgb, var(--color-status-warning) 22%, transparent);
	color: color-mix(
		in srgb,
		var(--color-status-warning) 55%,
		var(--color-label)
	);
}
.stage-trust .icon-tile.is-critical {
	background: color-mix(in srgb, var(--color-status-critical) 14%, transparent);
	color: var(--color-status-critical);
}
.stage-trust .flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--size-flow-node);
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.stage-trust .stop-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.stage-trust .node {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
	border-radius: var(--radius-xl);
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow:
		var(--material-glass-highlight),
		0 0 0 var(--size-border) var(--color-separator),
		var(--material-glass-shadow);
}
.stage-trust .label {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.stage-trust .label strong {
	color: var(--color-label);
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--font-weight-semibold);
}
.stage-trust .label span {
	color: var(--color-label-secondary);
	font-size: var(--text-body-size);
	line-height: var(--text-copy-leading);
}
.stage-trust .node.is-blocked {
	background: color-mix(in srgb, var(--color-status-critical) 5%, transparent);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 0 0 var(--size-border)
		color-mix(in srgb, var(--color-status-critical) 30%, transparent);
}
.stage-trust .node.is-blocked s {
	text-decoration-color: var(--color-status-critical);
	text-decoration-thickness: calc(var(--size-border) * 2);
}
.stage-trust .link {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--space-16);
}
.stage-trust .wire {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(var(--size-border) * 2);
	translate: -50% 0;
	transform-origin: 50% 0%;
	border-radius: var(--radius-full);
	background: var(--color-label-tertiary);
}
.stage-trust .note {
	position: absolute;
	left: calc(50% + var(--space-3));
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	white-space: nowrap;
}
.stage-trust .link.is-live .wire {
	background: linear-gradient(
		var(--color-accent),
		color-mix(in srgb, var(--color-accent) 45%, transparent)
	);
}
.stage-trust .chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border)
		color-mix(in srgb, var(--color-accent) 40%, transparent);
	color: var(--color-accent);
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
}
.stage-trust .pulse {
	position: absolute;
	top: calc(var(--size-dot) / -2);
	left: calc(50% - var(--size-dot) / 2);
	width: var(--size-dot);
	height: var(--size-dot);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	box-shadow: 0 0 0 var(--space-1)
		color-mix(in srgb, var(--color-accent) 22%, transparent);
	opacity: 0;
}
.stage-trust .link.is-blocked .wire {
	background: repeating-linear-gradient(
		to bottom,
		color-mix(in srgb, var(--color-status-critical) 70%, transparent) 0
			var(--space-1),
		transparent var(--space-1) var(--space-2)
	);
}
.stage-trust .cross {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--size-control-sm);
	height: var(--size-control-sm);
	border-radius: var(--radius-full);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border)
		color-mix(in srgb, var(--color-status-critical) 45%, transparent);
	color: var(--color-status-critical);
}
.stage-trust .points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.stage-trust .point {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}
.stage-trust .point .icon-tile {
	margin-bottom: var(--space-2);
}
.stage-trust .point h3 {
	margin: 0;
	font-size: var(--text-title-size);
	line-height: var(--text-title-leading);
	font-weight: var(--font-weight-semibold);
}
.stage-trust .point p {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-feature-compact-size);
	line-height: var(--text-feature-compact-leading);
	text-wrap: pretty;
}
.stage-trust .copy > .link-action {
	font-size: var(--text-feature-compact-size);
}

@media (max-width: 1023px) {
	.stage-hero .title {
		font-size: var(--text-hero-medium-size);
		line-height: var(--text-hero-medium-leading);
		letter-spacing: var(--text-hero-medium-tracking);
	}
	.stage-trust {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'head'
			'path'
			'points';
		gap: var(--space-10);
	}
	.stage-trust > .stage-heading {
		align-self: auto;
	}
}

@media (max-width: 899px) {
	.stage-story {
		gap: var(--space-12);
	}
	.stage-story .body {
		grid-template-columns: minmax(0, 1fr);
	}
	.stage-story .pin {
		display: none;
	}
	.stage-story .steps {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
		padding: 0;
	}
	.stage-story .step {
		flex-direction: column;
		gap: var(--space-8);
		min-height: 0;
		text-align: center;
	}
	.stage-story .step .visual {
		display: block;
		width: min(100%, var(--size-stage-window));
	}
	.stage-story .copy {
		align-items: center;
		max-width: var(--size-column);
	}
	.stage-story .copy h3 {
		font-size: var(--text-page-title-size);
		line-height: var(--text-page-title-leading);
		letter-spacing: var(--text-page-title-tracking);
	}
	.stage-story .copy p {
		font-size: var(--text-feature-compact-size);
		line-height: var(--text-feature-compact-leading);
	}
	.stage-moment,
	.stage-moment.is-reverse {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}
	.stage-moment.is-reverse > .stage-heading {
		order: 0;
	}
	.stage-moment .stage-heading.is-start {
		align-items: center;
		margin: 0 auto;
		text-align: center;
	}
	.stage-moment .stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-6);
	}
	.stage-moment .bubbles {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2);
	}
	.stage-moment .bubble {
		position: static;
		max-width: none;
	}
}

@media (max-width: 640px) {
	.stage-hero {
		gap: var(--space-10);
		padding-top: var(--space-6);
	}
	.stage-hero .title {
		font-size: var(--text-hero-compact-size);
		line-height: var(--text-hero-compact-leading);
		letter-spacing: var(--text-hero-compact-tracking);
	}
	.stage-hero .lede {
		font-size: var(--text-feature-compact-size);
		line-height: var(--text-feature-compact-leading);
	}
	.stage-hero .stage {
		width: calc(100% + var(--space-4) * 2);
		margin-inline: calc(var(--space-4) * -1);
		padding: 0 var(--space-4) var(--space-8);
	}
	/* One window on a phone: the sides would only peek in at the edges */
	.stage-hero .pane.is-left,
	.stage-hero .pane.is-right {
		display: none;
	}
	.stage-trust {
		padding: var(--space-10) var(--space-5);
	}
	.stage-trust .points {
		grid-template-columns: minmax(0, 1fr);
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.stage-hero .fan,
		.stage-hero .pane.is-left,
		.stage-hero .pane.is-right {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root block);
			animation-range: 0 var(--stage-travel);
		}
		.stage-hero .fan {
			animation-name: stage-hero-fan;
		}
		.stage-hero .pane.is-left {
			animation-name: stage-hero-left;
		}
		.stage-hero .pane.is-right {
			animation-name: stage-hero-right;
		}
		/* Hidden at the top; the first stretch of scroll draws it, left to right.
		   The gap (2) is longer than the path, so no second dash shows at its end. */
		.stage-hero .title-stroke path {
			stroke-dasharray: 1 2;
			animation: stage-hero-pen linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 var(--stage-pen);
		}
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.stage-moment .stage > .window-frame {
			animation: stage-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
		.stage-moment .bubble {
			animation: stage-bubble linear both;
			animation-timeline: view();
			animation-range: entry 40% cover 35%;
		}
		.stage-trust .node,
		.stage-trust .wire,
		.stage-trust .chip,
		.stage-trust .cross {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
		}
		.stage-trust .node {
			animation-name: stage-trust-rise;
			animation-range: entry 10% entry 90%;
		}
		.stage-trust .wire {
			animation-name: stage-trust-draw;
			animation-range: entry 50% cover 45%;
		}
		.stage-trust .chip,
		.stage-trust .cross {
			animation-name: stage-trust-pop;
			animation-range: entry 80% cover 50%;
		}
		.stage-trust .pulse {
			animation: stage-trust-pulse var(--duration-pulse) ease-in-out infinite;
		}
	}
}

@media (max-width: 899px) {
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.stage-story .step .visual {
				animation: stage-rise linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 80%;
			}
		}
	}
}

@keyframes stage-hero-fan {
	to {
		transform: translateY(calc(var(--stage-rise) * -1)) rotateX(0deg);
	}
}

@keyframes stage-hero-left {
	to {
		transform: translateX(calc(var(--stage-spread-open) * -1))
			translateZ(calc(var(--stage-depth-open) * -1))
			rotateY(var(--stage-turn-open)) scale(var(--stage-side));
	}
}

@keyframes stage-hero-right {
	to {
		transform: translateX(var(--stage-spread-open))
			translateZ(calc(var(--stage-depth-open) * -1))
			rotateY(calc(var(--stage-turn-open) * -1)) scale(var(--stage-side));
	}
}

/* Invisible until the pen moves: a round cap would leave a dot at rest */
@keyframes stage-hero-pen {
	from {
		stroke-dashoffset: 1;
		opacity: 0;
	}
	3% {
		opacity: 1;
	}
	to {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes stage-bubble {
	from {
		opacity: 0;
		translate: 0 var(--stage-rise);
	}
}

@keyframes stage-trust-rise {
	from {
		opacity: 0;
		translate: 0 var(--space-4);
	}
}

@keyframes stage-trust-draw {
	from {
		scale: 1 0;
	}
}

@keyframes stage-trust-pop {
	from {
		opacity: 0;
		scale: var(--stage-side);
	}
}

/* Down the live wire, behind the chip, then gone; a beat of rest before the next */
@keyframes stage-trust-pulse {
	0% {
		opacity: 0;
		translate: 0 0;
	}
	12% {
		opacity: 1;
	}
	62% {
		opacity: 1;
		translate: 0 var(--space-16);
	}
	74%,
	100% {
		opacity: 0;
		translate: 0 var(--space-16);
	}
}




/* ./site.css */
/*
 * statuz.app's own blocks and pages. The page frame, header, footer, intro and
 * blocks it shares with statuz.cloud live in the design system
 * (src/ui/theme/components/site.css). Statuz Glass tokens only.
 */

/* Composer: write, pick platforms and time, copy the command */
.composer {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-md);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.composer > * + * {
	border-top: var(--size-border) solid var(--color-separator);
}
.composer-posts {
	display: flex;
	flex-direction: column;
}
.composer-post + .composer-post {
	border-top: var(--size-border) dashed var(--color-separator);
}
.composer-text {
	display: block;
	width: 100%;
	min-height: var(--size-composer);
	padding: var(--space-3) var(--space-4);
	border: 0;
	resize: vertical;
	background: none;
	color: var(--color-label);
	font: inherit;
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
}
.composer-text:focus {
	outline: none;
}
.composer-post:focus-within {
	box-shadow: inset var(--size-focus-ring) 0 0 var(--color-focus);
}
.composer-post-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-3) var(--space-2) var(--space-4);
	font-size: var(--text-caption-size);
}
.composer-bar,
.composer-when,
.composer-output {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-2) var(--space-3);
}
.composer-bar {
	justify-content: space-between;
}
/* Flat switchers on the composer's surface, like in a toolbar: no glass */
.composer .seg {
	background: var(--color-fill);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.composer-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1-5);
}
.composer-platform {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: var(--size-control-sm);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-full);
	background: none;
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label-tertiary);
	font: inherit;
	cursor: pointer;
	transition:
		color var(--duration-fast) var(--ease-spring),
		background-color var(--duration-fast) var(--ease-spring);
}
.composer-platform .counter {
	color: inherit;
}
/* Same ring on and off; on adds the fill, like a selected segment */
.composer-platform.is-on {
	background: var(--color-fill);
	color: var(--color-label);
}
.composer-platform .glyph {
	background: none;
	color: inherit;
}
.composer-platform.is-on .counter.is-critical {
	color: var(--color-status-critical);
}
.composer-platform:focus-visible {
	outline: var(--size-focus-ring) solid var(--color-focus);
}
.composer-warning {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
}
.composer-label {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
}
.composer-output {
	flex-direction: column;
	align-items: stretch;
	padding: var(--space-3);
	background: var(--color-fill);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.composer-output > .seg {
	align-self: flex-start;
}
.copy-field.is-wrapped .copy-field-value {
	white-space: pre-wrap;
}

/* Rows of entries (posts, docs): tile, meta, title, two lines */
.entry-rows {
	display: flex;
	flex-direction: column;
}
.entry-rows > .entry-row {
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-2);
	/* Square, so the separators between rows run straight to the ends */
	border-radius: initial;
}
.entry-rows > .entry-row + .entry-row {
	box-shadow: 0 calc(var(--size-border) * -1) 0 var(--color-separator);
}
.entry-row .row-text {
	gap: calc(var(--space-1) / 2);
}
.entry-row .row-title {
	white-space: normal;
	font-weight: var(--font-weight-semibold);
}
.entry-row .row-subtitle {
	display: -webkit-box;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: var(--text-copy-leading);
}
/* Hover lights the tile and title, not the row: a fill fights the separators */
.entry-rows > .entry-row.is-link:hover {
	background: none;
}
.entry-row .row-title {
	transition: color var(--duration-fast) var(--ease-spring);
}
.entry-row:hover .row-title {
	color: var(--color-accent);
}
.entry-row:hover .icon-tile {
	background: color-mix(in srgb, var(--color-accent) 14%, transparent);
	color: var(--color-accent);
}

/* Docs: next and previous as cards; on-this-page list */
.pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}
.pager .card.is-next {
	grid-column: 2;
	text-align: right;
}
.pager .card.is-next .card-text {
	align-items: flex-end;
}
.toc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-subheadline-size);
}
.toc a {
	color: var(--color-accent);
}
.toc a:hover {
	text-decoration: underline;
	text-underline-offset: var(--space-1);
}

/* CLI reference */
.cli-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}
.cli-search {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	flex: 1;
	min-width: var(--size-sidebar);
	height: var(--size-control);
	padding: 0 var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label-secondary);
}
.cli-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--color-label);
	font: inherit;
}
.cli-search input:focus {
	outline: none;
}
.cli-search:focus-within {
	box-shadow: 0 0 0 var(--size-border) var(--color-accent);
}
.cli-commands > .disclosure > .disclosure-summary {
	padding-block: var(--space-1-5);
}
.cli-commands .disclosure-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 0 var(--space-3) var(--space-3)
		calc(var(--space-3) + var(--size-icon-sm) + var(--space-2));
}
.cli-command-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	min-width: 0;
}
.cli-command-name {
	font-family: var(--font-mono);
	font-size: var(--text-subheadline-size);
	font-weight: var(--font-weight-medium);
}
.cli-command-summary {
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
}
.cli-command-where {
	display: inline-flex;
	gap: var(--space-1);
	margin-left: auto;
	color: var(--color-label-tertiary);
}
.flag-list {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: var(--space-1) var(--space-4);
	margin: 0;
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
.flag-list dt {
	font-family: var(--font-mono);
	white-space: nowrap;
}
.flag-list.is-flags dt {
	color: var(--syntax-parameter);
}
.flag-list dd {
	margin: 0;
	color: var(--color-label-secondary);
}
.cli-empty {
	padding: var(--space-6) var(--space-3);
	color: var(--color-label-secondary);
	font-size: var(--text-subheadline-size);
	text-align: center;
}

/* Changelog timeline: a heading where it crosses into a major version, then its releases */
.release-era {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-2) 0 var(--space-6);
}
.release-era h2 {
	margin: 0;
	font-size: var(--text-title-size);
	line-height: var(--text-title-leading);
	font-weight: var(--font-weight-semibold);
}
.release-era p {
	margin: 0;
	color: var(--color-label-secondary);
}
.timeline {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.release {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 0 0 var(--space-10) var(--space-6);
	/* statuz.app/changelog#v2.1.0 lands with room above the release */
	scroll-margin-top: var(--space-6);
}
.release::before {
	content: '';
	position: absolute;
	/* From under the dot (it centers on the first row) to the next release */
	top: var(--space-5);
	bottom: 0;
	left: calc(var(--size-dot) / 2 - var(--size-border) / 2);
	width: var(--size-border);
	background: var(--color-separator);
}
.release:last-child::before,
.release:has(+ .release-era)::before {
	display: none;
}
/* Centered on the version row, whatever its height, in the release's left gutter */
.release-dot {
	position: absolute;
	top: 50%;
	left: calc(var(--space-6) * -1);
	transform: translateY(-50%);
	width: var(--size-dot);
	height: var(--size-dot);
	border-radius: var(--radius-full);
	background: var(--color-label-tertiary);
}
.release.is-latest .release-dot {
	background: var(--color-accent);
	box-shadow: 0 0 0 var(--space-1)
		color-mix(in srgb, var(--color-accent) 18%, transparent);
}
/* The latest release breathes: a ring grows out of its dot and fades (only when motion is welcome) */
.release.is-latest .release-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--color-accent);
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.release.is-latest .release-dot::after {
		animation: release-pulse calc(var(--duration-shimmer) * 1.5) ease-out
			infinite;
	}
}
@keyframes release-pulse {
	from {
		opacity: 0.6;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(3);
	}
}
.release-meta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.release-title {
	margin: 0;
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
}
.release-summary {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-copy-size);
	line-height: var(--text-copy-leading);
}
/* A release's banner (ReleaseCover); with a video it's a button that opens the player */
.release-cover {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.release-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--duration-base) var(--ease-spring);
}
.release-cover.is-playable {
	cursor: pointer;
}
.release-cover.is-playable:focus-visible {
	outline: var(--size-focus-ring) solid var(--color-focus);
	outline-offset: var(--size-border);
}
/* "Watch the video", in the corner: a cover's middle is usually its words */
.release-cover-play {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--size-control);
	padding: 0 var(--space-4) 0 var(--space-3);
	border-radius: var(--radius-full);
	background: var(--material-glass-background);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
	box-shadow: var(--material-glass-highlight), var(--material-glass-shadow);
	color: var(--material-glass-label);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
	font-weight: var(--font-weight-semibold);
	transition: transform var(--duration-base) var(--ease-spring);
}
.release-cover.is-playable:hover img,
.release-cover.is-playable:focus-visible img {
	transform: scale(1.02);
}
.release-cover.is-playable:hover .release-cover-play,
.release-cover.is-playable:focus-visible .release-cover-play {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.release-cover img,
	.release-cover-play {
		transition: none;
	}
}
/* The player: a native <dialog> over the page */
/* Modal, so the browser keeps it fixed and centered; as wide as fits a 16:9 video in the window */
.release-video {
	width: min(
		100% - var(--space-8),
		var(--size-page),
		(100dvh - var(--space-8)) * 16 / 9
	);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--color-background-window);
	box-shadow: var(--material-glass-shadow);
	overflow: hidden;
}
.release-video::backdrop {
	background: color-mix(
		in srgb,
		var(--color-background-window) 80%,
		transparent
	);
	-webkit-backdrop-filter: var(--material-glass-filter);
	backdrop-filter: var(--material-glass-filter);
}
.release-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-background-window);
}
.release-video-close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
}
.release-counts {
	margin: 0;
}

/* Download */
/* Download cards: Statuz for Mac (MacDownload) and the browser extension (/extension). An icon, a title, one line, the downloads, one quiet line under them */
.download-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
/* The home's accent light, soft behind the icon */
.download-card::before {
	content: '';
	position: absolute;
	top: calc(var(--space-24) * -1);
	left: calc(var(--space-24) * -1);
	z-index: var(--layer-behind);
	width: calc(var(--space-24) * 3);
	height: calc(var(--space-24) * 3);
	background: var(--stage-glow-fill);
	opacity: 0.7;
	pointer-events: none;
}
/* A fixed box: the image component fills whatever holds it */
.download-card-icon {
	flex: 0 0 var(--space-16);
	width: var(--space-16);
	height: var(--space-16);
}
.download-card img {
	width: var(--space-16);
	height: var(--space-16);
}
.download-card-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
}
.download-card-copy h2 {
	margin: 0;
	font-size: var(--text-title-size);
	line-height: var(--text-title-leading);
	font-weight: var(--font-weight-semibold);
}
.download-card-copy p {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
}
.download-card .actions {
	margin-top: var(--space-3);
}
.download-card-copy .download-card-meta {
	margin-top: var(--space-1);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}
@media (prefers-reduced-transparency: reduce) {
	.download-card::before {
		display: none;
	}
}
@media (max-width: 640px) {
	.download-card {
		flex-direction: column;
		padding: var(--space-5);
	}
}

/* Reading: docs, posts, legal */
.prose {
	min-width: 0;
	font-size: var(--text-copy-size);
	line-height: var(--text-copy-leading);
	text-wrap: pretty;
}
/* RouteLoading: prose lines while a page loads, spaced like paragraphs */
.prose-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.prose > :first-child,
.prose div > :first-child,
.prose h2:first-child,
.prose h3:first-child {
	margin-top: 0;
}
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .code,
.prose .table-block {
	margin: 0 0 var(--space-4);
}
.prose h2 {
	margin: var(--space-8) 0 var(--space-2);
	font-size: var(--text-title3-size);
	line-height: var(--text-title3-leading);
	font-weight: var(--text-title3-weight);
	scroll-margin-top: var(--space-6);
}
.prose h3 {
	margin: var(--space-6) 0 var(--space-2);
	font-size: var(--text-headline-size);
	line-height: var(--text-headline-leading);
	font-weight: var(--text-headline-weight);
	scroll-margin-top: var(--space-6);
}
.prose h4 {
	margin: var(--space-4) 0 var(--space-1);
	font-weight: var(--font-weight-semibold);
}
.prose ul,
.prose ol {
	padding-left: var(--space-5);
}
.prose li + li {
	margin-top: var(--space-1);
}
.prose a {
	color: var(--color-link);
}
/* Links in markdown end with their arrow: → another page here, ↗ another site.
   Centered on the capitals as SF Symbols are, at any text size (on the
   baseline it rode 1.4px high in 13px text). It leans that way on hover
   (instant under Reduce Motion: durations are 0). */
.link-arrow {
	display: inline-block;
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	margin-left: calc(var(--space-1) / 2);
	vertical-align: calc(0.5cap - var(--size-icon-sm) / 2);
	transition: transform var(--duration-fast) var(--ease-spring);
}
a:hover > .link-arrow {
	transform: translateX(calc(var(--space-1) / 2));
}
a:hover > .link-arrow.is-external {
	transform: translate(calc(var(--space-1) / 2), calc(var(--space-1) / -2));
}
.prose a:hover {
	text-decoration: underline;
	text-underline-offset: var(--space-1);
}
.prose blockquote {
	padding-left: var(--space-3);
	border-left: var(--size-focus-ring) solid var(--color-separator);
	color: var(--color-label-secondary);
}
.prose hr {
	margin: var(--space-6) 0;
	border: 0;
	border-top: var(--size-border) solid var(--color-separator);
}
.prose strong {
	font-weight: var(--font-weight-semibold);
}
.prose .code-body {
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}

.legal-also {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	font-size: var(--text-subheadline-size);
}

@media (max-width: 640px) {
	.pager {
		grid-template-columns: minmax(0, 1fr);
	}
	.pager .card.is-next {
		grid-column: 1;
	}
	.cli-command-where {
		margin-left: 0;
	}
}

.flag-row {
	display: contents;
}
.composer > *,
.composer-output > * {
	min-width: 0;
}
.composer-output {
	flex-wrap: nowrap;
}
.prose .copy-field {
	margin: 0 0 var(--space-4);
}
.cli-commands .code-body,
.copy-field .code-body {
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
/* Plain text blocks (sample posts) wrap; code keeps its lines */
.prose .code:not([data-language]) .code-body,
.prose .code:not([data-language]) .code-body code {
	white-space: pre-wrap;
	font-family: var(--font-ui);
}

.choice-panel-part {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.choice-panel-part[hidden] {
	display: none;
}

/* Home: the audience switch (Mac app, Agents & CLI) above the hero, and its panels */
.audience-switch {
	display: flex;
	justify-content: center;
	margin-bottom: calc(var(--space-16) * -1);
}
/* The welcome for one referrer (`?ref=producthunt`): above the switch, in
   the window's width so a command fits on one line in each card. The stage's
   gap under it is taken back, so the hero still follows close. */
.welcome {
	width: 100%;
	max-width: var(--size-window);
	margin: 0 auto calc(var(--space-16) - var(--space-24));
}
.welcome .block-head {
	align-items: center;
}
.welcome .block-title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.welcome .block-title .brand-mark {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}
/* Both footers sit on the card's bottom edge, whatever the text above */
.welcome .card {
	grid-template-rows: auto 1fr;
}
.welcome .card-extra {
	align-self: end;
	padding-top: var(--space-3);
}
/* The code and Redeem, in the copy field's box: two lines like the commands beside it */
.welcome-offer {
	align-items: flex-start;
}
.welcome-offer-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: var(--text-subheadline-size);
	line-height: var(--text-copy-leading);
}
.welcome-offer-code {
	font-family: var(--font-mono);
}
/* Centered on the code's line, as Copy is on the first command */
.welcome-offer .btn {
	margin-top: calc((var(--text-copy-leading) - var(--size-control-sm)) / 2);
}
.welcome-offer-note {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-label-secondary);
}

/* The agent picker's install link ("Add to Cursor"): a label over one button, like a copy field */
.agent-install {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1-5);
}
.agent-install-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}

/* Where `/#mac`, `/#agents` and `/#cloud` scroll: the switch, with room above it */
.audience-anchor {
	scroll-margin-top: var(--space-6);
}
.audience-panel {
	display: contents;
}
.audience-panel[hidden] {
	display: none;
}
.audience-teaser {
	display: contents;
}
.audience-teaser[hidden] {
	display: none;
}
/* A link to `/#agents` or `/#cloud`: the server drew the default panel, and
   client/index.html marks <html> with the linked one before the first paint.
   Show that panel, its thumb and (except for Cloud) the Cloud teaser until
   React shows the same and drops the mark. */
html[data-audience] .audience-panel {
	display: none;
}
html[data-audience='mac'] .audience-panel[data-audience='mac'],
html[data-audience='agents'] .audience-panel[data-audience='agents'],
html[data-audience='cloud'] .audience-panel[data-audience='cloud'],
html[data-audience]:not([data-audience='cloud']) .audience-teaser {
	display: contents;
}
html[data-audience='cloud'] .audience-teaser {
	display: none;
}
html[data-audience] .audience-switch .seg-option.is-selected {
	background: transparent;
	box-shadow: none;
	color: var(--color-label-secondary);
}
html[data-audience='mac'] .audience-switch .seg-option[data-value='mac'],
html[data-audience='agents'] .audience-switch .seg-option[data-value='agents'],
html[data-audience='cloud'] .audience-switch .seg-option[data-value='cloud'] {
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	color: var(--color-label);
}

/* Tools: the thread splitter (ThreadSplitter), text in, posts out, then the command */
.splitter {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.splitter-input {
	min-height: calc(var(--size-composer) * 2);
}
.splitter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.splitter-posts {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--radius-md);
	background: var(--color-background-content);
	box-shadow: 0 0 0 var(--size-border) var(--color-separator);
}
.splitter-post {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
}
.splitter-post + .splitter-post {
	border-top: var(--size-border) dashed var(--color-separator);
}
.splitter-post p {
	margin: 0;
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* LinkedIn post preview: the feed's card, author first, folded at "…see more" */
.linkedin-preview {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	border: var(--size-border) solid var(--color-separator);
	border-radius: var(--radius-lg);
}

.linkedin-preview-head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-subheadline-size);
	line-height: var(--text-subheadline-leading);
}

.linkedin-preview-head > span:last-child {
	display: flex;
	flex-direction: column;
}

.linkedin-preview-avatar {
	width: var(--size-control);
	height: var(--size-control);
	border-radius: var(--radius-full);
	background: var(--color-fill);
	flex: none;
}

.linkedin-preview-meta {
	color: var(--color-label-secondary);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-leading);
}

.linkedin-preview p {
	white-space: pre-wrap;
}

.linkedin-preview-more {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-label-secondary);
	font: inherit;
	cursor: pointer;
}

.linkedin-preview-more:hover {
	color: var(--color-label);
	text-decoration: underline;
}

.splitter-post-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-caption-size);
}

/* Download: the sheet before the DMG (DownloadSheet), an optional name and email */
.download-sheet-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.download-sheet-lede {
	margin: 0;
	color: var(--color-label-secondary);
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-leading);
}
.download-sheet-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--text-subheadline-size);
	font-weight: var(--font-weight-medium);
	color: var(--color-label-secondary);
}
.download-sheet-field .field {
	width: 100%;
}
/* The bot trap: out of view and out of the tab order, but still in the form */
.download-sheet-trap {
	position: absolute;
	width: var(--size-border);
	height: var(--size-border);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.download-sheet-error {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	margin: 0;
	color: var(--color-status-critical);
	font-size: var(--text-subheadline-size);
}
.download-sheet .sheet-actions {
	margin-top: var(--space-2);
}

/* Footer: "Featured on <directory>", one name at a time (PartnerChip) */
.partner-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	color: var(--color-label-secondary);
	white-space: nowrap;
}
.partner-chip .icon {
	color: var(--color-accent);
}
.partner-chip-names {
	display: grid;
	overflow: hidden;
	color: var(--color-label);
	font-weight: var(--font-weight-medium);
	transition: width var(--duration-slow) var(--ease-spring);
}
/* Each name keeps its own width, so the chip can measure the current one */
.partner-chip-name {
	grid-area: 1 / 1;
	justify-self: start;
	color: var(--color-label);
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
}
/* Names waiting their turn don't size the chip, so before the first measure it hugs the name on screen */
.partner-chip-name:not(.is-on):not(.is-off) {
	position: absolute;
}
.partner-chip-name.is-on,
.partner-chip-name.is-off {
	transition:
		opacity var(--duration-slow) ease,
		transform var(--duration-slow) var(--ease-spring);
}
.partner-chip-name.is-on {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.partner-chip-name.is-on:hover {
	color: var(--color-link);
}
.partner-chip-name.is-off {
	transform: translateY(-100%);
}
/* Phones: the copyright and X keep the first line, the chip takes a line of its own */
@media (max-width: 640px) {
	.site-footer-base:has(.partner-chip) {
		flex-wrap: wrap;
		row-gap: 0;
	}
	.site-footer-base:has(.partner-chip) .site-footer-end {
		display: contents;
	}
	/* A zero-height break between the first line and the chip */
	.site-footer-base:has(.partner-chip)::after {
		content: '';
		order: 1;
		flex-basis: 100%;
	}
	.site-footer-base .partner-chip {
		order: 2;
		margin-top: var(--space-2);
	}
}