/* DEAD AIR chassis: minimal modern reset.
   Must be the first stylesheet: it fixes the cascade layer order for the whole site.
   Chassis wins over stations so the dial and static bands look the same everywhere;
   per-station defaults (like the focus ring) live in the reset layer so stations can restyle them.
   `placeholder` (build-generated stand-in windows) sits under `station`; nothing may follow `chassis`. */
@layer reset, placeholder, station, chassis;

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

	* {
		margin: 0;
	}

	/* Dead-air black: transition holes and overscroll read as off-air, never as white page. */
	html {
		background: oklch(14% 0 0);
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		hanging-punctuation: first last;
	}

	body {
		min-block-size: 100svh;
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-inline-size: 100%;
	}

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

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	p,
	li,
	figcaption {
		text-wrap: pretty;
		overflow-wrap: break-word;
	}

	table {
		border-collapse: collapse;
	}

	[hidden]:not([hidden="until-found"]) {
		/* biome-ignore lint/complexity/noImportantStyles: an !important in the lowest layer beats every layer, so [hidden] always hides */
		display: none !important;
	}

	/* Default focus ring. Stations restyle it in their own layer (BRIEF §8: ≥ 3px, visible on their bg). */
	:focus-visible {
		outline: var(--focus-width) solid var(--st-accent, currentColor);
		outline-offset: var(--focus-offset);
	}

	.visually-hidden:not(:focus):not(:active) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: fixed;
		inset-block-start: var(--sp-2);
		inset-inline-start: var(--sp-2);
		z-index: var(--z-skip);
		padding: var(--sp-2) var(--sp-4);
		font: 600 1rem / 1.2 var(--font-ui);
		color: Canvas;
		background: CanvasText;
		translate: 0 calc(-100% - var(--sp-4));
	}

	.skip-link:focus-visible {
		translate: none;
		outline-color: CanvasText;
	}

	/* Home windows are at least a full viewport (BRIEF §2.4); stations may make them taller. */
	#band > [data-station] {
		min-block-size: 100svh;
	}

	/* Home masthead: a slim off-air strip in chassis type (later the power-on stage). */
	.station-id {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-1) var(--sp-4);
		padding: var(--sp-3) var(--sp-4);
		color: oklch(93% 0 0);
		background: oklch(14% 0 0);
		border-block-end: 1px solid oklch(30% 0 0);

		& h1 {
			font: 800 1rem / 1 var(--font-ui);
			letter-spacing: 0.24em;
		}

		& p {
			font: 500 0.6875rem / 1.2 var(--font-mono);
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: oklch(76% 0 0);
		}
	}
}