/* CHANNELROAM — Radio receiver styles. */

.radio-set {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radio-cabinet {
  width: 920px;
  padding: 30px 36px 28px;
  background:
    radial-gradient(ellipse at 50% 5%, #6b4a2b 0%, #432c18 60%, #2b1c0d 100%);
  border-radius: 26px 26px 36px 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.18),
    inset 0 -8px 30px rgba(0,0,0,0.55),
    0 30px 60px rgba(0,0,0,0.55);
  position: relative;
}
.radio-cabinet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 220, 170, 0.05) 0 1px,
      transparent 1px 7px,
      rgba(0,0,0,0.1) 7px 8px,
      transparent 8px 16px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
}

.radio-skin-walnut .radio-cabinet { background: radial-gradient(ellipse at 50% 5%, #5a3a1f 0%, #321f10 70%, #1b1108 100%); }
.radio-skin-cream  .radio-cabinet { background: radial-gradient(ellipse at 50% 5%, #e5d3b3 0%, #b89a76 60%, #7a6043 100%); color: #2a1b0c; }
.radio-skin-cream  .radio-brand-name,
.radio-skin-cream  .radio-brand-model { color: #2a1b0c; }

.radio-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}

.radio-brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: oklch(0.85 0.13 70);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.radio-brand-model {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 220, 170, 0.55);
  margin-top: 2px;
}

.radio-band-switch {
  display: inline-flex;
  background: #0e0805;
  border-radius: 4px;
  padding: 3px;
  gap: 2px;
  border: 1px solid #2a1c10;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.radio-band-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 220, 170, 0.45);
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.radio-band-pill-on {
  color: #1a120a;
  background: oklch(0.82 0.16 70);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

/* DIAL */
.radio-dial {
  position: relative;
  height: 110px;
  background:
    linear-gradient(180deg, #f4d896 0%, #d9b56b 50%, #b4904a 100%);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow:
    inset 0 0 0 2px #2a1c10,
    inset 0 2px 8px rgba(0,0,0,0.4),
    0 0 24px oklch(0.78 0.16 70 / 0.35),
    0 6px 12px rgba(0,0,0,0.4);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.radio-dial-glass {
  position: relative;
  width: 100%;
  height: 100%;
}
.radio-dial-band-label {
  position: absolute;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(30, 20, 8, 0.7);
}
.radio-dial-band-fm { top: -2px; left: 0; }
.radio-dial-band-am { bottom: -2px; left: 0; color: rgba(30, 20, 8, 0.4); }

.radio-dial-scale {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 24px;
}
.radio-tick {
  position: absolute;
  top: 0;
  width: 1px;
  transform: translateX(-50%);
}
.radio-tick-major {
  height: 14px;
  background: #2a1c10;
}
.radio-tick-minor {
  height: 6px;
  background: rgba(42, 28, 16, 0.55);
}
.radio-tick-num {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: #2a1c10;
}

.radio-station-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  height: 30px;
}
.radio-station-mark {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.radio-station-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(0.55 0.21 25);
  box-shadow: 0 0 6px oklch(0.7 0.21 25);
}
.radio-station-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  color: #2a1c10;
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.radio-station-mark:hover .radio-station-pip {
  transform: scale(1.4);
}
/* Stations outside the active language filter — still visible (so the
   geography of the dial doesn't change) but greyed out so the listener
   knows they're not in the current study language. */
.radio-station-mark.dimmed { opacity: 0.32; }
.radio-station-mark.dimmed .radio-station-pip {
  background: oklch(0.45 0 0);
  box-shadow: none;
}
.radio-station-mark.dimmed .radio-station-label {
  color: #5a4a35;
}

.radio-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.radio-needle-line {
  width: 2px;
  height: 100%;
  background: oklch(0.6 0.22 25);
  box-shadow:
    0 0 8px oklch(0.65 0.22 25),
    0 0 16px oklch(0.65 0.22 25 / 0.6);
}
.radio-needle-head {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: oklch(0.65 0.22 25);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}


/* CHANNELROAM — Radio receiver styles (part 2: readout, knobs, grille, presets). */

.radio-readout-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 22px;
  background: linear-gradient(180deg, #0a0604 0%, #1a0e06 100%);
  border-radius: 10px;
  border: 1px solid #2a1c10;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.8);
}

.radio-readout-freq {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 42px;
  color: oklch(0.82 0.18 70);
  text-shadow: 0 0 12px oklch(0.78 0.18 70 / 0.7);
  letter-spacing: 0.02em;
  line-height: 1;
}
.radio-readout-unit {
  font-size: 14px;
  margin-left: 6px;
  color: oklch(0.65 0.13 70 / 0.7);
  letter-spacing: 0.18em;
}
.radio-readout-station {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: oklch(0.85 0.11 70);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.radio-readout-now {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(255, 220, 170, 0.5);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.radio-vu-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.radio-vu-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 220, 170, 0.45);
}
.radio-vu {
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  background: #050302;
  border-radius: 3px;
  border: 1px solid #2a1c10;
}
.radio-vu-bar {
  width: 6px;
  height: 22px;
  background: #1a1208;
  border-radius: 1px;
}
.radio-vu-bar.on { background: oklch(0.7 0.18 145); box-shadow: 0 0 4px oklch(0.7 0.18 145); }
.radio-vu-bar.on.hot { background: oklch(0.7 0.21 25); box-shadow: 0 0 4px oklch(0.7 0.21 25); }
.radio-stereo {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: oklch(0.78 0.16 145);
  margin-top: 2px;
}

/* GRILLE + KNOBS */
.radio-grille-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
}

.radio-knob-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.radio-knob {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #6a4828 0%, #2e1c0c 78%);
  border: 1px solid #4a3320;
  position: relative;
  cursor: ns-resize;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.55),
    inset 0 2px 0 rgba(255,220,170,0.2),
    0 6px 12px rgba(0,0,0,0.5);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.12s ease;
}
.radio-knob::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #2e1c0c 0deg 6deg, #4a3320 6deg 12deg);
  opacity: 0.4;
}
.radio-knob-pointer {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 16px;
  background: oklch(0.85 0.16 70);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px oklch(0.85 0.16 70);
  z-index: 2;
}
.radio-knob-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 220, 170, 0.55);
}

.radio-grille {
  position: relative;
  height: 130px;
  background:
    repeating-linear-gradient(
      90deg,
      #0a0604 0 2px,
      #2a1c10 2px 4px
    );
  border-radius: 10px;
  border: 1px solid #2a1c10;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,220,170,0.08);
  overflow: hidden;
}
.radio-grille-cloth {
  position: absolute;
  inset: 8px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 220, 170, 0.06) 0 1px,
      transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      rgba(255, 220, 170, 0.06) 0 1px,
      transparent 1px 4px);
  border-radius: 6px;
}
.radio-grille-emblem {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: oklch(0.78 0.16 70);
  text-shadow: 0 0 8px oklch(0.78 0.16 70 / 0.6);
}

/* PRESETS */
.radio-preset-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.radio-preset {
  background: linear-gradient(180deg, #3a2818 0%, #1a0e06 100%);
  border: 1px solid #4a3320;
  border-radius: 6px;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255,220,170,0.12), 0 2px 0 rgba(0,0,0,0.5);
  transition: transform 0.06s ease;
}
.radio-preset:hover { background: linear-gradient(180deg, #4a3420 0%, #281608 100%); }
.radio-preset:active { transform: translateY(1px); }
.radio-preset.on {
  background: linear-gradient(180deg, oklch(0.6 0.16 70) 0%, oklch(0.4 0.13 70) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px oklch(0.78 0.18 70 / 0.5);
}
.radio-preset.on .radio-preset-num,
.radio-preset.on .radio-preset-name { color: #1a0e06; }
.radio-preset-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: oklch(0.78 0.16 70);
}
.radio-preset-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 220, 170, 0.7);
  text-transform: uppercase;
}
.radio-preset-power.on {
  background: linear-gradient(180deg, oklch(0.6 0.21 25) 0%, oklch(0.4 0.18 25) 100%);
}
.radio-off .radio-readout-freq,
.radio-off .radio-readout-station,
.radio-off .radio-readout-now { opacity: 0.18; text-shadow: none; }
.radio-off .radio-needle-line { opacity: 0.3; box-shadow: none; }