/* =====================================================================
   Radio Zebraska launch banner (TEMPORARY) · css/rz-banner.css
   The live station as a strip above the header, so people without
   Fallout can listen. Uses the tokens from site.css.

   To remove the banner: delete the <aside id="rzb"> block in index.html
   and the two lines that load rz-banner.css / rz-banner.js. Nothing else
   depends on it. (Or set hideAfter in js/rz-banner.js.)
   ===================================================================== */

.rzb {
  --rzb-red: var(--signal);                 /* second colour: scope, LIVE, the Nexus button */
  --rzb-scope-h: 3.6rem;                    /* oscilloscope height */
  margin-top: clamp(.6rem, 2vw, 1rem);
  padding: clamp(.9rem, 2.4vw, 1.3rem) clamp(1rem, 3vw, 1.8rem);
  display: grid; gap: .9rem 1.4rem; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(11rem, auto);
  grid-template-areas:
    "id  scope freq  ctl"
    "now now   links links";
}

/* name block: red eyebrow, Zebraskan title, Latin under it */
.rzb-id { grid-area: id; min-width: 0; }
.rzb .eyebrow { color: var(--rzb-red); font-size: .95rem; letter-spacing: .22em; margin-bottom: .55rem; }
.rzb-name { font: 400 clamp(1.5rem, 3.2vw, 2.1rem)/1 var(--f-chrome); color: var(--phos); letter-spacing: .05em;
  text-shadow: var(--glow); white-space: nowrap; }
.rzb .latin { display: block; font-size: .85rem; letter-spacing: .42em; margin: .4rem 0 0; }

/* oscilloscope: same graticule as the full tuner */
.rzb-scope { grid-area: scope; position: relative; height: var(--rzb-scope-h); min-width: 0;
  box-shadow: inset 0 0 0 1px var(--phos-dim);
  background:
    linear-gradient(var(--phos-dim) 1px, transparent 1px) 0 50% / 100% 50%,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--phos-dim) 55%, transparent) 0 1px, transparent 1px 10%); }
.rzb-scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* frequency readout */
.rzb-f { grid-area: freq; display: grid; justify-items: end; gap: .3rem; }
.rzb-f .num { font: 400 clamp(2.6rem, 5.6vw, 3.6rem)/.85 var(--f-read); color: var(--phos); text-shadow: var(--glow);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rzb-f .num small { font-size: .35em; color: var(--phos-mid); letter-spacing: .1em; margin-left: .3rem; }
.rzb-live { font: 1rem/1 var(--f-read); letter-spacing: .2em; color: var(--phos-dim); }
.rzb-live.on { color: var(--rzb-red); text-shadow: 0 0 8px var(--rzb-red); }

/* listen + volume */
.rzb-ctl { grid-area: ctl; display: grid; gap: .55rem; }
.rzb-power { font-size: 1.2rem; text-align: center; }
.rzb-power[aria-pressed="true"] { background: var(--phos); color: var(--ground); }
.rzb-power[aria-pressed="true"]::before, .rzb-power[aria-pressed="true"]::after { color: var(--ground); }
.rzb-vol { display: flex; align-items: center; gap: .6rem; font: 1rem/1 var(--f-read); letter-spacing: .2em; color: var(--phos-mid); }
.rzb-vol input { accent-color: var(--phos); flex: 1; min-width: 0; }

/* now playing line */
.rzb-now { grid-area: now; min-width: 0; display: flex; gap: .7rem; align-items: baseline;
  padding-top: .8rem; border-top: 1px solid var(--phos-dim);
  font: 1.15rem/1.3 var(--f-read); letter-spacing: .05em; color: var(--ink); }
.rzb-now .k { color: var(--rzb-red); letter-spacing: .15em; flex: none; }
.rzb-now #rzb-now { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* links: the Nexus button wears the second colour */
.rzb-links { grid-area: links; display: flex; gap: .9rem; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding-top: .8rem; border-top: 1px solid var(--phos-dim); }
.rzb-nexus { --phos: var(--rzb-red);
  --phos-mid: color-mix(in srgb, var(--rzb-red) 65%, var(--ground));
  --phos-dim: color-mix(in srgb, var(--rzb-red) 40%, var(--ground));
  font-size: 1.15rem; }
.rzb-full { font: 1.05rem/1 var(--f-read); letter-spacing: .14em; text-transform: uppercase; color: var(--phos-mid); white-space: nowrap; }

/* tablet / phone: name + frequency on top, then scope, controls, now playing, links */
@media (max-width: 900px) {
  .rzb { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id freq" "scope scope" "ctl ctl" "now now" "links links"; }
  .rzb-ctl { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
  .rzb-links { justify-content: space-between; padding-top: 0; border-top: 0; }
}
/* phone: name across the top, scope beside the frequency, no volume slider (phones have buttons for that) */
@media (max-width: 560px) {
  .rzb { grid-template-areas: "id id" "scope freq" "ctl ctl" "now now" "links links"; gap: .8rem 1rem; }
  .rzb-name { font-size: 1.35rem; }
  .rzb .eyebrow { font-size: .8rem; letter-spacing: .14em; }
  .rzb-ctl { grid-template-columns: minmax(0, 1fr); }
  .rzb-vol { display: none; }
  .rzb-f .num { font-size: 2.6rem; }
}