/* Design tokens: broadcast test-signal palette. The bar colours are the
   75% SMPTE values, so they read as a real test pattern rather than neon.
   The page black is video black (8-bit code 16, #101010), the same black
   as bar 8, so the page itself sits at the signal's black level. */
:root {
  --bg: #101010;
  --bg-2: #1a1a1a;
  --fg: #ececec;
  --fg-dim: #a8a8a8;
  --line: #3a3a3a;

  --bar-white: #c0c0c0;
  --bar-yellow: #c0c000;
  --bar-cyan: #00c0c0;
  --bar-green: #00c000;
  --bar-magenta: #c000c0;
  --bar-red: #c00000;
  --bar-blue: #0000c0;
  --bar-black: var(--bg);

  /* The one accent, used sparingly: focus rings and live indicators. */
  --accent: #ffd400;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 6vw, 3.5rem);
  --step-4: clamp(2.5rem, 9vw, 6rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --measure: 64rem;
  --radius: 0;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--fg);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: #000;
}

.skip:focus {
  top: var(--space-3);
}

/* The test card and the headline share one grid cell, so the card
   sits behind the words once its part arrives. */
.masthead {
  display: grid;
  min-height: min(100svh, 56rem);
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.masthead > * {
  grid-area: 1 / 1;
}

.masthead-text {
  position: relative;
  z-index: 2;
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
  border: 2px solid var(--fg);
  text-align: center;
  max-width: calc(100% - 2 * var(--space-3));
}

.masthead h1 {
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.masthead-sub {
  margin: 0;
  color: var(--fg-dim);
}

.masthead-channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
}

/* Wide enough for the longest channel name, so the button never shifts. */
.channel-name {
  min-width: 22ch;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-dim);
}

/* Sections pad themselves out to the measure, so their children keep
   their own margins and alignment. */
main > section {
  padding: var(--space-6) max(var(--space-3), (100% - var(--measure)) / 2);
  border-bottom: 1px solid var(--line);
}

button {
  font: inherit;
  font-size: var(--step--1);
  color: var(--fg);
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}

button:hover {
  color: var(--bg);
  background: var(--fg);
}

button:disabled {
  color: var(--fg-dim);
  background: var(--bg);
  border-color: var(--line);
  cursor: not-allowed;
}

/* Toggles keep one accessible name and show on or off in a state word. */
button[aria-pressed] [aria-hidden] {
  display: inline-block;
  min-width: 2.5ch;
  margin-left: var(--space-1);
  font-family: var(--font-mono);
}

button[aria-pressed="true"] {
  border-color: var(--accent);
}

button[aria-pressed="true"]:not(:hover) [aria-hidden] {
  color: var(--accent);
}

.foot {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--fg-dim);
}

.foot p {
  margin: 0;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}