/* =========================================================
   ASKR RADIO — compact Win95/98 player
   Built on the approved primitives (.btn98, bevel tokens, .ie__grip).
   Nothing here touches the desktop, the taskbar, SHOP, CREATE or LOOKBOOK.
   ========================================================= */
.rd {
  /* Bitmap-ish stack for the values and the clock, kept local so base.css is untouched. */
  --rd-mono: "VT323", "Share Tech Mono", "Courier New", "DejaVu Sans Mono", monospace;

  /* The panel fills the window and grows with it, but never shrinks past the size the
     layout was drawn at — that floor is what keeps the content inside the frame, together
     with minWidth / minHeight in the registry. In design units: 604 - 8 of window padding,
     and 472 - 4 - 28 title - 2 body margin - 4.

     It is also the size container the pieces below measure themselves against, so growth
     is real layout rather than a transform: no blurred text, no soft bevels, hitboxes
     exactly where they are drawn. */
  container-type: size;

  /* One number drives the whole panel. It is the size of the cover: a share of the panel's
     width, or the panel's height minus the 16.7rem of fields, progress bar and status bar
     underneath — whichever is smaller, floored at the size everything was approved at.
     Every piece below is a fixed fraction of it, so a window that grows in one direction
     only cannot push one part out of proportion with the rest, and the right-hand column
     is always shorter than the cover, which keeps the top row exactly as tall as it. */
  --grow: clamp(26.4rem, min(50cqw, 100cqh - 16.7rem), 72rem);

  flex: 1;
  width: 100%;
  min-width: 59.6rem;
  min-height: 43.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.4rem 0;
}

/* ---------- top half: cover + the gear on the right ----------
   The row takes whatever height is left once the fields, progress bar and status bar have
   had theirs, and the two columns sit centred in it. At 604 x 472 that lands on exactly the
   height the cover already had, so nothing moves; a window made taller without being made
   wider shares the extra space above and below instead of dropping it all in one gap over
   the status bar. */
.rd__top {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  min-height: calc(100cqh - 17rem);
}

/* The cover is the growth factor made visible, and stays square whatever the window does:
   `align-self` keeps the row from stretching it, which is what turned it into a rectangle
   when the window was widened without being made taller. */
.rd__cover {
  position: relative;
  width: var(--grow);
  flex: none;
  align-self: center;
  aspect-ratio: 1 / 1;
  padding: 0.6rem;
  background: var(--face);
  box-shadow: var(--sh-field);
}
.rd__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1a1c;
  /* The stills are built as small, damaged pixel grids blown back up. Keeping the
     scaling hard is what preserves that; smoothing would hand back a modern blur. */
  image-rendering: pixelated;
}

/* ---------- the small fault in the cover ----------
   Two layers sitting exactly over the image, inside the bevel, so nothing in the layout
   moves. Both are inert to the pointer: the controls behave as before. See coverGlitch.js
   for when they fire — irregularly, briefly, and never under prefers-reduced-motion. */
.rd__cover-band,
.rd__cover-fx {
  position: absolute;
  inset: 0.6rem;
  pointer-events: none;
}

/* A copy of the same image, revealed one slice at a time and pushed sideways. */
.rd__cover-band {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  will-change: opacity, transform;
}
.rd__cover-band.is-on { opacity: 0.92; }
/* Colour arriving out of register. */
.rd__cover-band.is-rgb {
  background-color: #ff2a4a;
  background-blend-mode: screen;
  opacity: 0.5;
  mix-blend-mode: screen;
}
/* The bright bar of an untuned television. */
.rd__cover-band.is-roll {
  background-color: #cfd6d2;
  background-blend-mode: soft-light;
  opacity: 0.38;
}

/* Screen texture. Static by default; while a voice plays it breathes so slowly that you
   only notice it is gone when it stops. */
.rd__cover-fx {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.11) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
  opacity: 0.45;
}
.rd.is-playing .rd__cover-fx { animation: rd-lines 9.3s ease-in-out infinite; }
@keyframes rd-lines {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.56; }
}
@media (prefers-reduced-motion: reduce) {
  .rd.is-playing .rd__cover-fx { animation: none; }
}

/* The transport sits at the bottom of the column, level with the foot of the cover. */
.rd__right {
  flex: 1;
  min-width: 0;
  /* Exactly as tall as the cover, so the transport always lines up with its foot. */
  align-self: center;
  height: var(--grow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}

.rd__gear { display: flex; align-items: flex-start; gap: 1.1rem; }
.rd__stack { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.rd-cd { width: clamp(5.8rem, calc(var(--grow) * 0.22), 16rem); height: auto; aspect-ratio: 1 / 1; }
.rd-tape { width: clamp(11.4rem, calc(var(--grow) * 0.43), 30rem); height: auto; aspect-ratio: 110 / 50; }
.rd-tape__label {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 1px;
  fill: #d8d5cc;
}
/* The disc and the reels only turn while something is actually playing. */
.rd-cd, .rd-tape__reel { animation: rd-spin 2.4s linear infinite; animation-play-state: paused; }
.rd-tape__reel { transform-box: fill-box; transform-origin: 50% 50%; animation-duration: 1.6s; }
.rd-tape__reel--b { animation-duration: 2.8s; }
.rd.is-playing .rd-cd,
.rd.is-playing .rd-tape__reel { animation-play-state: running; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rd.is-playing .rd-cd, .rd.is-playing .rd-tape__reel { animation-play-state: paused; }
}

.rd__vol { display: flex; flex-direction: column; gap: 0.8rem; }
.rd-vol-btn {
  width: 5rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  line-height: 1;
  padding-bottom: 0.3rem;
}
.rd-vol-btn:active { padding: 0.2rem 0 0.1rem 0.2rem; }

/* Hard-segmented bar, the way an old level meter reads. */
.rd__meter {
  width: 2.6rem;
  height: clamp(9.6rem, calc(var(--grow) * 0.364), 26rem);
  flex: none;
  display: flex;
  align-items: flex-end;
  padding: 0.3rem;
  background: #2a2c28;
  box-shadow: var(--sh-field);
}
.rd__meter-fill {
  width: 100%;
  height: 70%;
  background:
    repeating-linear-gradient(to top, #2f9b3e 0 0.5rem, #2a2c28 0.5rem 0.7rem);
  transition: height 0.08s linear;
}

/* ---------- transport ---------- */
.rd__keys { display: flex; flex-direction: column; gap: 0.7rem; }
.rd__keys-row { display: flex; gap: 0.6rem; }
.rd-key {
  flex: 1;
  height: clamp(4.4rem, calc(var(--grow) * 0.167), 9rem);
  display: grid;
  place-items: center;
  padding: 0;
  color: #111;
}
.rd-key--wide { flex: 2.4; }
.rd-key svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.rd-key:active svg { transform: translate(1px, 1px); }

/* ---------- Artist / Title ---------- */
.rd__fields { position: relative; display: flex; flex-direction: column; gap: 0.7rem; }
.rd-field { display: flex; align-items: center; gap: 1rem; }
.rd-field__label { width: 6.4rem; flex: none; text-align: right; font-size: 1.7rem; }
.rd-field__box {
  flex: 1;
  min-width: 0;
  height: 3.2rem;
  display: flex;
  align-items: center;
  padding: 0.3rem 0.3rem 0.3rem 0.8rem;
  background: var(--white);
  box-shadow: var(--sh-field);
}
.rd-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 2.1rem;
  letter-spacing: 0.08rem;
  color: #000;
}
.rd-field__drop {
  width: 2.6rem;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
}
.rd-field__drop svg { width: 0.8rem; height: 0.5rem; fill: #000; }

/* Track picker behind either caret. It opens upward: the fields sit low in a compact
   window, so a list dropping down would hang outside the frame. */
.rd__list {
  position: absolute;
  z-index: 5;
  left: 7.4rem;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.3rem;
  list-style: none;
  background: var(--white);
  box-shadow: var(--sh-window);
  padding: 0.3rem;
}
.rd__list-item {
  width: 100%;
  display: flex;
  gap: 0.9rem;
  padding: 0.5rem 0.7rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
  text-align: left;
}
.rd__list-item span { color: #666; }
.rd__list-item:hover { background: var(--navy); color: #fff; }
.rd__list-item:hover span { color: #c6ccff; }
.rd__list-item.is-current { box-shadow: var(--sh-thin-in); }

/* ---------- progress ---------- */
.rd__progress { display: flex; align-items: center; gap: 1.2rem; }
.rd__time {
  width: 5.4rem;
  flex: none;
  font-family: var(--rd-mono);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}
.rd__time--total { text-align: right; }

.rd__seek { flex: 1; min-width: 0; appearance: none; height: 2.8rem; background: transparent; }
.rd__seek::-webkit-slider-runnable-track {
  height: 1.8rem;
  background: var(--face);
  box-shadow: var(--sh-field);
}
.rd__seek::-webkit-slider-thumb {
  appearance: none;
  width: 2rem;
  height: 2.6rem;
  margin-top: -0.4rem;
  background: var(--face);
  box-shadow: var(--sh-raised);
}
.rd__seek::-moz-range-track { height: 1.8rem; background: var(--face); box-shadow: var(--sh-field); }
.rd__seek::-moz-range-thumb {
  width: 2rem;
  height: 2.6rem;
  border: 0;
  border-radius: 0;
  background: var(--face);
  box-shadow: var(--sh-raised);
}

/* ---------- status ---------- */
.rd__status {
  height: 2.6rem;
  flex: none;
  display: flex;
  gap: 0.3rem;
  margin: auto -1.4rem 0;
  padding: 0.2rem 0.2rem 0.3rem;
}
.rd__status-panel {
  box-shadow: var(--sh-thin-in);
  padding: 0 0.6rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
}
.rd__status-panel--state { width: 13rem; flex: none; }
.rd__status-panel--info { flex: 1; }

/* =========================================================
   MOBILE — ASKR RADIO (ver el bloque equivalente en window.css)

   Medido antes de tocar nada, y las dos causas son los mismos dos suelos:
     vertical    min-width: 59.6rem obliga al panel a 444-596 px dentro de un cuerpo de
                 295-396 -> +148 a +200 px de desbordamiento y 33 elementos fuera.
     horizontal  min-height: 43.4rem obliga a 394 px de alto dentro de 281 -> +113 px y
                 18 elementos fuera, que son los campos, el progreso y el status.

   Esos suelos existen para proteger el layout del escritorio, donde la ventana tiene un
   mínimo de 604 x 472 en el registry. En un teléfono no hay mínimo que valga: lo que hay
   que hacer es recomponer el panel al tamaño que existe.

   El glitch de la portada no necesita nada: coverGlitch.js coloca la banda con
   inset(...%) en porcentajes sobre .rd__cover-band, que está anclado a la portada con
   inset: 0.6rem. Es independiente del tamaño y se realinea solo.
   ========================================================= */

/* ---------- vertical (y teléfono pequeño tumbado) ---------- */
@media (max-aspect-ratio: 199/100) {

  /* Teléfono de pie: MISMA composición que el escritorio, en pequeño. Portada a la
     izquierda, aparato y controles a la derecha, y debajo —a todo el ancho— Artist,
     Title, progreso y status. No es una app móvil alta: es el programa de siempre
     abierto en una ventana pequeña. */

  [data-mobile] .rd {
    min-width: 0;
    min-height: 0;
    /* La portada ocupa el 42 % del ancho del panel; el resto se lo queda la columna
       derecha. El segundo término solo muerde si la pantalla es tan corta que ni eso
       cabe, y entonces la portada cede antes que el status. */
    --grow: min(42cqw, 100cqh - 24rem);
    gap: 0.7rem;
    /* El padding LATERAL se queda en 1,4rem a propósito: .rd__status usa
       `margin: auto -1.4rem 0` para ir a ras del panel, y con 1,2rem se salía 2 px. */
    padding: 0.9rem 1.4rem 0;
    overflow-x: hidden;
    overflow-y: auto;      /* si el conjunto no cupiera, se desplaza en vertical */
    scrollbar-width: none;
  }
  [data-mobile] .rd::-webkit-scrollbar { display: none; }

  /* Sin esto el `overflow-y: auto` de arriba no llega a usarse nunca: .rd tiene una
     altura fija, así que sus hijos flex se ENCOGEN para caber en vez de desplazarse, y
     como .rd__top no recorta, sus controles se salían por debajo y quedaban tapados por
     los campos. Medido en su día a 320x568: el botón PLAY estaba dibujado en su sitio
     pero quien recibía el toque en su centro era .rd-field__box. */
  [data-mobile] .rd > * { flex: none; }

  /* ---------- la fila de arriba ---------- */
  [data-mobile] .rd__top { gap: 0.9rem; min-height: 0; align-items: flex-start; }
  [data-mobile] .rd__cover { align-self: flex-start; }

  /* La columna derecha ya no mide lo que la portada: mide lo que necesita. */
  [data-mobile] .rd__right {
    flex: 1;
    min-width: 0;
    height: auto;
    gap: 0.7rem;
  }

  /* Dos cambios que devuelven la altura que hace falta para que la ventana no sea un
     rectángulo alto: el volumen pasa a fila, y el meter deja su suelo fijo de 9,6rem
     para estirarse al alto real de su fila. Los gráficos no cambian. */
  [data-mobile] .rd__gear { align-items: stretch; gap: 0.7rem; }
  [data-mobile] .rd__stack { gap: 0.5rem; }
  [data-mobile] .rd__vol { gap: 0.5rem; }
  [data-mobile] .rd__meter { width: 2.2rem; height: auto; align-self: stretch; }
  [data-mobile] .rd-vol-btn { width: 4.4rem; }

  /* El CD y el cassette traen suelos pensados para el escritorio —5,8rem y 11,4rem— que
     en una columna estrecha son enormes: solo ellos inflaban la fila de arriba de 130 a
     215 unidades. Aquí se atan a la portada, como todo lo demás. Mismos gráficos. */
  [data-mobile] .rd-cd { width: clamp(3.4rem, calc(var(--grow) * 0.34), 16rem); }
  [data-mobile] .rd-tape { width: clamp(6rem, calc(var(--grow) * 0.62), 30rem); }

  [data-mobile] .rd__keys { gap: 0.5rem; }
  [data-mobile] .rd__keys-row { gap: 0.5rem; }

  /* ---------- lo que va debajo, a todo el ancho ---------- */
  [data-mobile] .rd__fields { gap: 0.6rem; }
  /* El alto en rem encoge con la escala; el mínimo en píxeles es para que la flecha del
     desplegable de voces no baje de ~33 px de área táctil en el teléfono de 320. */
  [data-mobile] .rd-field__box { height: 3.4rem; min-height: 32px; }
  [data-mobile] .rd-field__label { width: 5.4rem; }

  /* Tamaños de dedo, en píxeles y no en rem, porque el rem encoge con la escala y el
     dedo no. El alto de las teclas sale de `--grow * 0,167`, que sin suelo se quedaba
     en 37 px en el teléfono de 320. */
  [data-mobile] .rd-key { min-height: 40px; }
  [data-mobile] .rd-vol-btn { min-height: 34px; }
  [data-mobile] .rd__seek { min-height: 32px; }

  /* Cinco botones en una columna estrecha dan dibujos de 21-29 px de ancho. El área
     táctil se estira a los lados hasta donde llega el hueco que los separa —0,5rem—,
     sin llegar a tocarse, y hacia arriba y abajo, donde solo hay hueco entre filas. */
  /* La barra de estado: el panel de PLAYING/STOPPED se lleva 13rem para una palabra que
     mide 50-67 px, y ahogaba al de información, que se cortaba en "VOICE 01 OF 0".
     Medido: el texto largo pide el 64 % de la barra, así que el de estado se queda en
     10rem y el tipo baja lo justo para que quepa con holgura en los siete viewports. */
  [data-mobile] .rd__status-panel { font-size: 1.35rem; }
  [data-mobile] .rd__status-panel--state { width: 10rem; }

  [data-mobile] .rd-key { position: relative; }
  [data-mobile] .rd-key::after {
    content: "";
    position: absolute;
    inset: -2px;
  }
}

/* ---------- teléfono ancho tumbado (844x390, 932x430) ----------
   Aquí la fila horizontal se conserva: lo que no cabe es el ALTO. Se recupera poniendo
   en fila lo que estaba apilado y dejando que el meter y la portada se ajusten a la
   altura real de su fila en vez de traer un suelo fijo de 9,6rem. */
@media (min-aspect-ratio: 2/1) {

  [data-mobile] .rd {
    min-width: 0;
    min-height: 0;
    --grow: min(50cqw, 100cqh - 17rem);
    gap: 0.7rem;
    padding: 0.8rem 1.4rem 0;   /* lateral intacto: ver la nota de arriba sobre .rd__status */
  }

  /* La portada llena el alto de su fila y su lado sale del aspect-ratio 1:1 que ya tiene:
     así es tan grande como el aparato de al lado, sin empujarlo. */
  [data-mobile] .rd__cover {
    width: auto;
    height: 100%;
    align-self: stretch;
  }

  [data-mobile] .rd__right { height: auto; gap: 0.7rem; }
  [data-mobile] .rd__gear { align-items: stretch; gap: 0.8rem; }
  [data-mobile] .rd__stack { flex-direction: row; align-items: center; justify-content: center; gap: 1.2rem; }
  [data-mobile] .rd__vol { flex-direction: row; gap: 0.6rem; }
  [data-mobile] .rd__meter { height: auto; align-self: stretch; }

  /* Campos, progreso y status, apretados lo justo para devolver ~24 px al reproductor. */
  [data-mobile] .rd__fields { gap: 0.8rem; }
  /* 3,4rem y no 2,8: con 2,8 la flecha del desplegable se quedaba en 26 px de área
     táctil. Los 11 px que cuesta caben en el presupuesto vertical. */
  [data-mobile] .rd-field__box { height: 3.4rem; }
  [data-mobile] .rd__seek { height: 2.4rem; min-height: 30px; }
}


/* ---------- táctil en las dos orientaciones ----------
   El desplegable de voces medía 19 px de ancho y 20-27 de alto. El dibujo crece lo justo
   y el área táctil se estira por FUERA, sobre el campo de texto, que es de solo lectura:
   así no cuesta ni un píxel de alto, que en horizontal es lo que no sobra. */
[data-mobile] .rd-field__drop { position: relative; min-width: 32px; }
[data-mobile] .rd-field__drop::after {
  content: "";
  position: absolute;
  /* Casi todo el crecimiento va a la IZQUIERDA, sobre el campo de texto, que es de solo
     lectura y no hace nada al tocarlo. A lo alto apenas 3 px: las flechas de Artist y de
     Title están a menos de 7 px una de otra y con 6 px por lado sus áreas se tocaban. */
  inset: -3px -3px -3px -14px;
}