/* Broadcast — standby holding page.
   One card, always fitting the viewport: every height, pad, gap and size is
   clamped against vh so the card never grows an internal scrollbar. */

html, body { height: 100%; }
body {
  display: block;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- the screen: full-bleed CRT ----------
   The whole viewport is the tube, not a framed card sitting on a page. The bezel
   border and --radius-crt come off with it — there's no frame left to round — and
   .bx-vignette carries the CRT edge falloff on its own. */
.card {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* mobile: discounts the browser chrome, so nothing hides below the fold */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0;
  border-radius: var(--radius-0);
  overflow: hidden;
  background: var(--bg-inset);
}

.bars { display: flex; height: clamp(40px, 14vh, 120px); }
.bars > i { flex: 1; }
.bars--foot { height: clamp(18px, 5vh, 40px); }

/* ---------- content ---------- */
.card__body {
  padding: clamp(18px, 4vh, 44px) clamp(24px, 5vw, 48px);
  display: grid;
  align-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  text-align: center;
  overflow: hidden;
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  color: var(--text-3);
}

/* Bigger now there's a whole screen to fill. Capped against both vw and vh so the
   mark can never outrun its width or push the form off a short viewport. */
.card__mark {
  font-size: clamp(38px, min(10vw, 15vh), 150px);
  justify-self: center;
}

.standby {
  font-family: var(--font-terminal);
  font-size: clamp(20px, 3.6vh, 28px);
  color: var(--text-1);
}

.blurb {
  font-size: var(--text-sm);
  color: var(--text-2);
  max-width: 48ch;
  margin: 0 auto;
}

/* ---------- signup ---------- */
.tune {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tune__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: var(--border-thin) solid var(--line-strong);
  padding: 9px 12px;
  width: min(320px, 55vw);
}
.tune__field:focus-within { border-color: var(--accent); }
.tune__prompt {
  font-family: var(--font-terminal);
  font-size: 18px;
  color: var(--positive);
  line-height: 1;
}
.tune__input {
  all: unset;
  flex: 1;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text-1);
  caret-color: var(--accent);
}
.tune__send {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  background: transparent;
  color: var(--accent);
  border: var(--border-thick) solid var(--accent);
  border-radius: var(--radius-0);
  padding: 9px 20px;
  cursor: pointer;
}
.tune__send:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--glow-accent);
}

/* visibility, not display — revealing this must not reflow the card */
.locked { visibility: hidden; font-size: var(--text-sm); color: var(--text-1); }
.locked__tag { font-family: var(--font-terminal); font-size: 18px; color: var(--positive); }

/* ---------- grain ---------- */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
  opacity: .055;
  mix-blend-mode: screen;
}