/* WDBS Radio RX-01, browser companion. Design primitives come from tokens.css (generated from
   design/rx01-tokens.json, shared with the CYD firmware). Fonts: SIL OFL 1.1 (fonts/OFL.txt) -
   WDBS wordmark (Titan One) + WDBS Channel 3 family. */
@font-face { font-family: "Titan One"; src: url("/web/fonts/TitanOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("/web/fonts/grenze-gotisch-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/web/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/web/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/web/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil Display"; src: url("/web/fonts/big-shoulders-stencil-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Knewave"; src: url("/web/fonts/knewave-latin-400-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --rx-music: var(--rx-cream);       /* set from state.mx (music layer) */
  --rx-music-depth: var(--rx-navy);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--rx-cream);
  font: 600 15px/1.4 "Barlow Semi Condensed", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  background:
    radial-gradient(60vmax 50vmax at 50% 42%, color-mix(in srgb, var(--rx-music) 14%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--rx-navy) 70%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px,
    var(--rx-ink);
  transition: background 1s ease;
}

#stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* The device: the CYD's 3:4 face in an appliance bezel with a hard navy offset shadow. */
#device {
  position: relative;
  width: min(calc(100vw - 40px), calc((100dvh - 110px) * 0.75), 720px);
  aspect-ratio: 3 / 4;
  border: 3px solid var(--rx-ink);
  outline: 2px solid var(--rx-cream-dim);
  outline-offset: 0;
  box-shadow: 8px 8px 0 var(--rx-navy), 8px 8px 0 3px var(--rx-ink), 0 30px 80px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  overflow: hidden;
  container-type: inline-size;
}
#face { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }

/* Sign-in card: printed flyer on the chassis */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9%;
  background: color-mix(in srgb, var(--rx-ink) 86%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#overlay[hidden] { display: none; }
#overlay p { margin: 0; }
.brand { font: 400 clamp(20px, 8cqw, 40px)/1 "Titan One", system-ui; color: var(--rx-cream); text-shadow: 2px 2px 0 var(--rx-navy-hi), 4px 4px 0 var(--rx-navy-hi); }
.brand em { font: 800 0.9em "Grenze Gotisch", serif; font-style: normal; margin-left: 0.25em; text-shadow: 2px 2px 0 var(--rx-navy); }
#overlay-title { font: 700 clamp(26px, 10cqw, 52px)/1 "Barlow Semi Condensed", system-ui; margin-top: 0.7em !important; text-transform: uppercase; text-shadow: 3px 3px 0 var(--rx-navy); }
#overlay-text { color: var(--rx-cream-dim); margin-top: 0.8em !important; font-size: clamp(14px, 4cqw, 19px); font-weight: 600; }
.btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1.4em;
  padding: 0.7em 1.3em;
  background: var(--rx-cream);
  color: var(--rx-ink);
  font: 700 clamp(15px, 4.2cqw, 20px) "Barlow Semi Condensed", system-ui;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 2px solid var(--rx-ink);
  box-shadow: 4px 4px 0 var(--rx-navy);
  transform: rotate(-1.5deg);
}
.btn:active { transform: rotate(-1.5deg) translate(3px, 3px); box-shadow: 1px 1px 0 var(--rx-navy); background: var(--rx-red); color: var(--rx-cream); }
.btn:focus-visible, #bar button:focus-visible, #md button:focus-visible { outline: 2px solid var(--rx-red); outline-offset: 3px; }
.fine { margin-top: 1.4em !important; }

/* System component: the utility label strip (same as the CYD) */
.label-strip {
  display: inline-block;
  background: var(--rx-navy);
  color: var(--rx-cream);
  font: 700 13px/1 "Barlow Semi Condensed", system-ui;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 7px 3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Companion controls under the unit: molded keys */
#bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  max-width: 100%;
}
#bar[hidden] { display: none; }
#bar button, #md-top button, .md-ctl button {
  font: 700 13px/1 "Barlow Semi Condensed", system-ui;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rx-cream);
  background: var(--rx-navy);
  border: 2px solid var(--rx-ink);
  border-radius: 4px;
  box-shadow: inset 0 2px 0 var(--rx-navy-hi), 0 3px 0 var(--rx-navy-lo);
  padding: 8px 12px 7px;
  cursor: pointer;
}
.bar-link { color: var(--rx-cream); font: 700 13px/1 "Barlow Semi Condensed", system-ui; text-transform: uppercase; padding: 9px 11px; border: 1px solid var(--rx-cream-dim); text-decoration: none; }
.bar-link:focus-visible { outline: 2px solid var(--rx-red); outline-offset: 3px; }
#bar button:active, #md-top button:active, .md-ctl button:active {
  transform: translateY(3px);
  box-shadow: none;
  background: var(--rx-red);
  border-color: var(--rx-cream);
}
#bar button[aria-pressed="true"] { background: var(--rx-cream); color: var(--rx-ink); box-shadow: 0 3px 0 var(--rx-navy-lo); }
#who { width: 100%; text-align: center; }

:fullscreen #bar { display: none; }
:fullscreen #device { width: min(100vw, 100dvh * 0.75); border: 0; outline: 0; box-shadow: none; border-radius: 0; }
:fullscreen #stage { padding: 0; }

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

/* ---- MilkDrop view (Channel 5's Butterchurn visualizer, sandboxed in an iframe) ---- */
#md { position: fixed; inset: 0; background: #000; z-index: 5; }
#md[hidden] { display: none; }
#md-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; } /* input stays on this page */
body.md #device, body.md #bar { display: none; }
.md-ui { position: absolute; left: 16px; right: 16px; transition: opacity 0.6s ease, transform 0.6s ease; }
#md.idle .md-ui { opacity: 0; pointer-events: none; }
#md.idle #md-np { transform: translateY(12px); }
#md.idle { cursor: none; }
#md-top {
  top: max(14px, env(safe-area-inset-top));
  display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
}
#md-preset { margin-right: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#md-np {
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
  max-width: 780px; margin: 0 auto; padding: 12px;
  background: var(--rx-ink);
  border: 2px solid var(--rx-cream-dim);
  box-shadow: 6px 6px 0 var(--rx-navy);
}
#md-art { width: 76px; height: 76px; object-fit: cover; background: var(--rx-navy); flex: none; border: 2px solid var(--rx-cream); box-shadow: 3px 3px 0 var(--rx-navy); transform: translate(-1px, -1px); }
.md-meta { flex: 1; min-width: 0; }
.md-meta p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#md-title { font: 700 26px/1.05 "Barlow Semi Condensed", system-ui; color: var(--rx-cream); text-shadow: 2px 2px 0 var(--rx-navy); }
#md-artist { color: var(--rx-music); font-weight: 600; font-size: 17px; margin-top: 1px !important; }
#md-label { margin-top: 5px; }
#md-prog { height: 6px; background: var(--rx-navy); margin-top: 8px; overflow: hidden; box-shadow: inset 0 1px 0 var(--rx-navy-hi); }
#md-prog i { display: block; height: 100%; width: 0; background: var(--rx-cream); }
.md-ctl { display: flex; gap: 8px; flex: none; }
.md-ctl button { width: 50px; height: 42px; padding: 0; display: grid; place-items: center; }
.md-ctl svg { width: 22px; height: 22px; fill: var(--rx-cream); }
@media (max-width: 520px) {
  #md-art { width: 54px; height: 54px; }
  #md-title { font-size: 20px; }
  .md-ctl button { width: 42px; height: 38px; }
  #md-np { gap: 10px; padding: 10px; }
}
@media (max-width: 420px) {
  #md-np { flex-wrap: wrap; }
  .md-meta { flex-basis: calc(100% - 66px); }
  .md-ctl { width: 100%; justify-content: center; gap: 18px; }
  #md-preset { max-width: 100%; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) { body { transition: none; } .btn { transform: none; } }