/* Chrome Blaster: Radio's design framework.
   A 90s boombox: chrome case, punched grilles, a green LCD and rubber keys.
   Every class is prefixed bb-. Tokens live on :root; components read only tokens.
   See DESIGN.md at the repo root for when to use what. */

/* Fonts: load in the page <head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Michroma&family=VT323&family=IBM+Plex+Sans+Condensed:wght@400;500;600&display=swap"> */

:root {
  /* Surfaces */
  --bb-gunmetal: #1b1c1f;        /* page ground */
  --bb-gunmetal-raised: #232428; /* panels sitting on the ground */
  --bb-well: #111214;            /* recessed: tuner scale, band switch track */
  --bb-grille: #3a3d42;
  --bb-grille-hole: #0b0c0d;
  --bb-line: #33363b;

  /* Chrome (always used as the gradient, never flat, except --bb-chrome for strokes) */
  --bb-chrome: #c9cdd2;
  --bb-chrome-hi: #f1f3f5;
  --bb-chrome-mid: #c3c8cd;
  --bb-chrome-lo: #949aa1;
  --bb-chrome-lip: #d6dade;
  --bb-chrome-edge: #9aa0a6;
  --bb-chrome-gradient: linear-gradient(180deg, var(--bb-chrome-hi) 0%, var(--bb-chrome-mid) 42%, var(--bb-chrome-lo) 52%, var(--bb-chrome-lip) 100%);

  /* LCD */
  --bb-lcd: #a9c48f;
  --bb-lcd-ink: #1e2a16;
  --bb-lcd-ghost: rgba(30, 42, 22, 0.14); /* unlit segments */

  /* Accent: the record button. One per screen, for the main action. */
  --bb-record: #ff6a13;
  --bb-record-text: #ff8a3d;    /* orange text on gunmetal (7:1) */
  --bb-on-record: #1b1c1f;      /* text on a record fill; never white */

  /* Text */
  --bb-text: #e6e8eb;
  --bb-text-muted: #b4b9bf;
  --bb-text-faint: #8b9198;     /* smallest text allowed on gunmetal (5.4:1) */
  --bb-ink: #2b2d31;            /* text printed on chrome */

  --bb-focus: #ff8a3d;

  /* Type */
  --bb-font-label: "Michroma", "Eurostile", "Arial Narrow", sans-serif;
  --bb-font-lcd: "VT323", "Courier New", monospace;
  --bb-font-body: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;

  --bb-text-xs: 0.75rem;   /* 12 */
  --bb-text-sm: 0.875rem;  /* 14 */
  --bb-text-md: 1rem;      /* 16 */
  --bb-text-lg: 1.25rem;   /* 20 */
  --bb-text-xl: 1.75rem;   /* 28 */
  --bb-text-2xl: 2.5rem;   /* 40 */
  --bb-text-display: clamp(2.5rem, 6vw, 3.75rem);

  --bb-track-label: 0.28em; /* section labels */
  --bb-track-key: 0.12em;   /* text on keys */

  /* Space */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-7: 48px;
  --bb-space-8: 64px;

  /* Radii */
  --bb-radius-sm: 7px;
  --bb-radius-md: 10px;
  --bb-radius-lg: 20px;
  --bb-radius-case: 32px;
  --bb-radius-pill: 999px;

  /* Depth */
  --bb-shadow-case: 0 30px 60px rgba(0, 0, 0, 0.55);
  --bb-shadow-key: inset 0 -4px 0 rgba(0, 0, 0, 0.35), 0 3px 0 #000;
  --bb-shadow-key-pressed: inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 0 0 #000;
  --bb-shadow-lcd: inset 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 0 22px rgba(30, 42, 22, 0.35);

  /* Motion */
  --bb-ease-needle: cubic-bezier(0.2, 0.8, 0.2, 1); /* fast start, settles onto the station */
  --bb-dur-press: 60ms;
  --bb-dur-ui: 160ms;
  --bb-dur-tune: 1200ms; /* default sweep; a spin passes its own durationMs */
}

/* ---------- Base ---------- */

.bb {
  margin: 0;
  min-height: 100vh;
  background: var(--bb-gunmetal);
  color: var(--bb-text);
  font-family: var(--bb-font-body);
  font-size: var(--bb-text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }
.bb [hidden] { display: none !important; } /* layout classes set display; hidden must still win */
.bb a { color: var(--bb-record-text); }
.bb a:hover { color: #ffb07a; }
.bb :focus-visible { outline: 3px solid var(--bb-focus); outline-offset: 3px; }

/* ---------- Type ---------- */

.bb-display {
  margin: 0;
  font-family: var(--bb-font-label);
  font-weight: 400;
  font-size: var(--bb-text-display);
  line-height: 1;
}
.bb-label {
  font-family: var(--bb-font-label);
  font-size: var(--bb-text-xs);
  letter-spacing: var(--bb-track-label);
  text-transform: uppercase;
  color: var(--bb-text-faint);
}
.bb-label--accent { color: var(--bb-record-text); }
.bb-section-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bb-line);
  font-family: var(--bb-font-label);
  font-size: var(--bb-text-xs);
  font-weight: 400;
  letter-spacing: var(--bb-track-label);
  text-transform: uppercase;
  color: var(--bb-text-faint);
}
.bb-muted { color: var(--bb-text-muted); }
.bb-faint { color: var(--bb-text-faint); font-size: var(--bb-text-sm); }

/* ---------- Case: the chrome body everything sits in ---------- */

.bb-case {
  position: relative;
  background: var(--bb-chrome-gradient);
  color: var(--bb-ink);
  border-radius: var(--bb-radius-case);
  padding: var(--bb-space-5);
  box-shadow: var(--bb-shadow-case);
}
.bb-case__handle {
  width: min(380px, 60%);
  height: 44px;
  margin: 0 auto;
  border: 14px solid var(--bb-chrome-edge);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
}
.bb-case__brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bb-space-4);
  font-family: var(--bb-font-label);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.bb-case__brand strong { font-weight: 400; font-size: 18px; letter-spacing: 0.4em; }

/* ---------- Grille and speaker ---------- */

.bb-grille {
  background-color: var(--bb-grille);
  background-image: radial-gradient(circle, var(--bb-grille-hole) 0 2.2px, transparent 2.8px);
  background-size: 9px 9px;
}
.bb-speaker {
  --size: 184px;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  padding: calc(var(--size) * 0.065);
}
.bb-speaker__cone {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #3b3e43 0 14%, #0e0f10 15% 19%, #2a2c30 20% 38%, #121314 39% 43%, #33363b 44% 70%, #1a1b1d 71% 100%);
}
.bb-speaker.is-playing .bb-speaker__cone { animation: bb-thump 0.46s ease-in-out infinite alternate; }
@keyframes bb-thump { to { transform: scale(1.035); } }

/* ---------- LCD ---------- */

.bb-lcd {
  background: var(--bb-lcd);
  color: var(--bb-lcd-ink);
  border-radius: var(--bb-radius-md);
  box-shadow: var(--bb-shadow-lcd);
  padding: 14px 16px;
  font-family: var(--bb-font-lcd);
  font-size: 24px;
  line-height: 1.1;
  overflow: hidden;
}
.bb-lcd__small { font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.bb-lcd__big { font-size: clamp(36px, 7vw, 56px); line-height: 1; text-transform: uppercase; }
.bb-lcd__ghost { color: var(--bb-lcd-ghost); }
.bb-lcd__marquee { white-space: nowrap; overflow: hidden; }
.bb-lcd__marquee > span { display: inline-block; padding-left: 100%; animation: bb-marquee 14s linear infinite; }
@keyframes bb-marquee { to { transform: translateX(-100%); } }

/* LCD text input (room codes, nicknames) */
.bb-lcd-input {
  width: 100%;
  min-height: 56px;
  border: none;
  background: var(--bb-lcd);
  color: var(--bb-lcd-ink);
  border-radius: var(--bb-radius-md);
  box-shadow: var(--bb-shadow-lcd);
  padding: 0 16px;
  font-family: var(--bb-font-lcd);
  font-size: 36px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bb-lcd-input::placeholder { color: var(--bb-lcd-ghost); }

/* ---------- Keys: rubber buttons ---------- */

.bb-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  min-height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: var(--bb-radius-md);
  background: var(--bb-grille);
  color: var(--bb-text);
  box-shadow: var(--bb-shadow-key);
  font-family: var(--bb-font-label);
  font-size: 11px;
  letter-spacing: var(--bb-track-key);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bb-dur-press), box-shadow var(--bb-dur-press);
  -webkit-tap-highlight-color: transparent;
}
.bb-key:active:not(:disabled), .bb-key.is-pressed {
  transform: translateY(3px);
  box-shadow: var(--bb-shadow-key-pressed);
}
.bb-key:disabled { opacity: 0.45; cursor: not-allowed; }
.bb-key--record { background: var(--bb-record); color: var(--bb-on-record); }
.bb-key--chrome { background: var(--bb-chrome-gradient); color: var(--bb-ink); }
.bb-key--lg { min-height: 64px; padding: 0 32px; font-size: 13px; }
.bb-key--block { width: 100%; }

/* ---------- Knob ---------- */
/* Set --value from 0 to 1. Pair with a visually hidden <input type="range"> for access. */

.bb-knob {
  --value: 0.5;
  --size: 64px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--bb-chrome-lip), #7d838a, #eef0f2, #6f757c, var(--bb-chrome-lip));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transform: rotate(calc(-135deg + var(--value) * 270deg));
}
.bb-knob::after {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  top: 9%;
  width: 4px;
  height: 25%;
  border-radius: 2px;
  background: var(--bb-record);
}

/* ---------- Band switch: segmented control built on radio inputs ---------- */

.bb-band {
  display: inline-flex;
  gap: var(--bb-space-1);
  padding: var(--bb-space-1);
  background: var(--bb-well);
  border-radius: var(--bb-radius-md);
  border: 0;
  margin: 0;
}
.bb-band input { position: absolute; opacity: 0; pointer-events: none; }
.bb-band label > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text-faint);
  font-family: var(--bb-font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--bb-dur-ui);
}
.bb-band input:checked + span { background: var(--bb-chrome-gradient); color: var(--bb-gunmetal); }
.bb-band input:focus-visible + span { outline: 3px solid var(--bb-focus); outline-offset: 2px; }

/* ---------- Chips: reactions and toggles ---------- */

.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--bb-chrome);
  border-radius: var(--bb-radius-pill);
  background: transparent;
  color: var(--bb-text);
  font-family: var(--bb-font-label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--bb-dur-ui), color var(--bb-dur-ui);
}
.bb-chip[aria-pressed="true"] { background: var(--bb-chrome-gradient); color: var(--bb-gunmetal); border-color: transparent; }
.bb-chip__count { font-family: var(--bb-font-lcd); font-size: 20px; letter-spacing: 0; line-height: 1; }

/* Tag: non-interactive pill */
.bb-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #4a4e54;
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-text-sm);
  color: var(--bb-chrome);
}

/* ---------- Tuner: the frequency scale with its needle ---------- */
/* Set --tune from 0 to 1 to move the needle; add .is-sweeping for the spin easing. */

.bb-tuner {
  --tune: 0.34;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px;
  background: var(--bb-well);
  border-radius: 8px;
}
.bb-tuner__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--bb-font-label);
  font-size: 9px;
  color: var(--bb-chrome);
}
.bb-tuner__ticks {
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--bb-chrome) 0 1px, transparent 1px 11px);
}
.bb-tuner__needle {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(12px + var(--tune) * (100% - 27px));
  width: 3px;
  border-radius: 2px;
  background: var(--bb-record);
  box-shadow: 0 0 8px rgba(255, 106, 19, 0.6);
  transition: left var(--bb-dur-ui) linear;
}
.bb-tuner.is-sweeping .bb-tuner__needle { transition: left var(--bb-dur-tune) var(--bb-ease-needle); }

/* ---------- LED ---------- */

.bb-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5a2a10;
}
.bb-led.is-on { background: var(--bb-record); box-shadow: 0 0 8px var(--bb-record); }
.bb-led.is-blinking { animation: bb-blink 0.6s steps(1) infinite; }
@keyframes bb-blink { 50% { background: #5a2a10; box-shadow: none; } }

/* ---------- Boombox layout: speaker | deck | speaker ---------- */

.bb-boombox {
  display: flex;
  align-items: center;
  gap: var(--bb-space-5);
}
.bb-boombox__deck { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bb-space-3); }
.bb-controls { display: flex; align-items: center; gap: var(--bb-space-3); flex-wrap: wrap; }

/* Phones: the speakers fold into a grille strip above the deck. */
@media (max-width: 720px) {
  .bb-case { border-radius: var(--bb-radius-lg); padding: var(--bb-space-4); }
  .bb-boombox { flex-direction: column; align-items: stretch; gap: var(--bb-space-3); }
  .bb-boombox > .bb-speaker { display: none; }
  .bb-boombox::before { content: ""; height: 28px; border-radius: var(--bb-radius-sm); background-color: var(--bb-grille); background-image: radial-gradient(circle, var(--bb-grille-hole) 0 2.2px, transparent 2.8px); background-size: 9px 9px; }
}

/* ---------- Utilities ---------- */

.bb-stack { display: flex; flex-direction: column; gap: var(--bb-space-4); }
.bb-row { display: flex; align-items: center; gap: var(--bb-space-3); flex-wrap: wrap; }
.bb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .bb-speaker.is-playing .bb-speaker__cone,
  .bb-lcd__marquee > span,
  .bb-led.is-blinking { animation: none; }
  .bb-tuner.is-sweeping .bb-tuner__needle { transition-duration: var(--bb-dur-ui); }
  .bb-key { transition: none; }
}