/* Deck skin: studio (plans/looks-plan.md, "Player, booth and tuner skins"; deck-skins.js).
   A broadcast studio desk: a studio clock with 60 second dots in place of the platter, an ON AIR box
   in it, two VU meters, cart machine pads and flat console keys.
   Linked after deck.css only when the look picks this skin, and every rule is scoped by
   html[data-deck-skin="studio"], so the turntable is untouched even where the file is linked.
   deck.css keeps the layout: the heights in every band (--deck-h), the 720 and 1200 px drawer
   breakpoints, every control and its 44 px target, the focus rings and the forced-colours marking.
   This file only changes how things are drawn.
   The ON AIR box is the only thing here that uses --onair. It is lit, steady, only while the DJ's
   own show is on air on the station playing (.deck[data-show][data-source="radio"], set by deck.js
   from the published schedule), dark otherwise, and it never flashes, pulses or fades. */

/* ---- the studio clock, in place of the platter ------------------------------------------------ */

html[data-deck-skin="studio"] .deck .dk-platter {
  background: radial-gradient(circle closest-side, var(--void) 0 88%, var(--booth-2) 90% 100%);
  box-shadow: 0 2px 10px var(--dk-shadow), inset 0 0 0 1px var(--dk-edge);
}

html[data-deck-skin="studio"] .deck .dk-platter > :is(.dk-dots, .dk-disc, .dk-sheen, .dk-lamp) { display: none; }

html[data-deck-skin="studio"] .deck .dk-clock {
  --sec: -1;  /* deck.js writes the second (0 to 59); none lit until it does, and under reduced motion */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 50%;
}

/* The twelve hour markers, inside the seconds ring. */
html[data-deck-skin="studio"] .deck .dk-clock::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, rgb(var(--ink-rgb) / .5) 0 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 2px), #000 calc(100% - 1.5px) 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 2px), #000 calc(100% - 1.5px) 100%);
}

/* Sixty second dots round the rim, lit up to the current second: the ring's mask makes the band,
   the dot mask below makes the dots, and a conic split at --sec colours them. */
html[data-deck-skin="studio"] .deck .dk-clock-ring {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 2.5px) 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 2.5px) 100%);
}

html[data-deck-skin="studio"] .deck .dk-clock-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Dot k spans k * 6deg +- 1.5deg, so it is lit exactly when k <= --sec. */
  background: conic-gradient(var(--lamp) 0 calc(var(--sec) * 6deg + 4.5deg), rgb(var(--smoke-rgb) / .3) 0);
  -webkit-mask: repeating-conic-gradient(from -1.5deg, #000 0 3deg, transparent 3deg 6deg);
  mask: repeating-conic-gradient(from -1.5deg, #000 0 3deg, transparent 3deg 6deg);
}

html[data-deck-skin="studio"] .deck .dk-clock-time {
  position: relative;
  font: 700 13px/1 var(--f-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
}

/* ON AIR: dark unless the DJ's own show is on air on the station playing. */
html[data-deck-skin="studio"] .deck .dk-clock-onair {
  position: relative;
  padding: 2px 3px 1.5px;
  border: 1px solid var(--dk-edge);
  border-radius: 2px;
  background: var(--booth);
  color: var(--smoke);
  font: 800 6.5px/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: none;
  animation: none;
}

html[data-deck-skin="studio"] .deck[data-show][data-source="radio"] .dk-clock-onair {
  border-color: var(--onair);
  background: var(--onair);
  color: var(--void);
  box-shadow: 0 0 8px rgb(var(--onair-rgb) / .55);
}

/* ---- VU meters, in place of the LED ladders ------------------------------------------------------ */

html[data-deck-skin="studio"] .deck .dk-meters {
  flex-direction: column;
  gap: 6px;
}

html[data-deck-skin="studio"] .deck .dk-meter {
  --vu-r: 21px;     /* the scale's radius round the needle's pivot */
  --vu-drop: 4px;   /* how far below the window the pivot sits */
  flex: 1 1 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 3px;
  background: radial-gradient(120% 150% at 50% 100%, rgb(var(--lamp-rgb) / .16), rgb(var(--lamp-rgb) / .04) 72%), var(--void);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The scale: an arc round the needle's pivot (just below the window), the top fifth in --lamp. */
html[data-deck-skin="studio"] .deck .dk-meter::before {
  inset: auto;
  left: calc(50% - var(--vu-r));
  bottom: calc(-1 * (var(--vu-r) + var(--vu-drop)));
  width: calc(2 * var(--vu-r));
  height: calc(2 * var(--vu-r));
  border-radius: 50%;
  opacity: 1;
  background: conic-gradient(from -45deg, rgb(var(--ink-rgb) / .5) 0 72deg, var(--lamp) 72deg 90deg, transparent 90deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 1.5px), #000 calc(100% - 1px) 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 1.5px), #000 calc(100% - 1px) 100%);
}

/* Six ticks along the scale, just inside the arc. */
html[data-deck-skin="studio"] .deck .dk-meter::after {
  content: '';
  position: absolute;
  left: calc(50% - var(--vu-r));
  bottom: calc(-1 * (var(--vu-r) + var(--vu-drop)));
  width: calc(2 * var(--vu-r));
  height: calc(2 * var(--vu-r));
  border-radius: 50%;
  background: conic-gradient(from -45.75deg,
    rgb(var(--ink-rgb) / .5) 0 1.5deg, transparent 0 18deg,
    rgb(var(--ink-rgb) / .5) 0 19.5deg, transparent 0 36deg,
    rgb(var(--ink-rgb) / .5) 0 37.5deg, transparent 0 54deg,
    rgb(var(--ink-rgb) / .5) 0 55.5deg, transparent 0 72deg,
    var(--lamp) 0 73.5deg, transparent 0 90deg,
    var(--lamp) 0 91.5deg, transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 4.5px) calc(100% - 1.5px), transparent calc(100% - 1px));
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 4.5px) calc(100% - 1.5px), transparent calc(100% - 1px));
}

html[data-deck-skin="studio"] .deck .dk-meter-lit { display: none; }

/* The needle: from the pivot, a little past the scale; full scale is 90 degrees (deck.js writes --v,
   40 steps). */
html[data-deck-skin="studio"] .deck .dk-vu-needle {
  position: absolute;
  left: calc(50% - .75px);
  bottom: calc(-1 * var(--vu-drop));
  width: 1.5px;
  height: calc(var(--vu-r) + 5px);
  border-radius: 1px;
  background: var(--ink);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--v) * 90deg - 45deg));
}

/* The peak lamp: lit while the held peak is within the top tenth of the scale. */
html[data-deck-skin="studio"] .deck .dk-meter-peak {
  inset: auto;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  background: var(--lamp);
  opacity: clamp(.18, calc(var(--p) - 35), 1);
}

/* ---- cart machine pads ------------------------------------------------------------------------ */

html[data-deck-skin="studio"] .deck .dk-pad {
  position: relative;
  border-color: var(--line);
  border-radius: 5px;
  background: var(--booth-2);
  box-shadow: none;
}

/* The cart's ready lamp across the top: lit while the pad is hit. */
html[data-deck-skin="studio"] .deck .dk-pad::before {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  top: 3px;
  height: 2px;
  border-radius: 1px;
  background: rgb(var(--lamp-rgb) / .22);
  transition: background-color .25s ease-out, box-shadow .25s ease-out;
}

html[data-deck-skin="studio"] .deck .dk-pad.is-hit {
  border-color: var(--lamp);
  box-shadow: inset 0 0 10px rgb(var(--lamp-rgb) / .22);
}

html[data-deck-skin="studio"] .deck .dk-pad.is-hit::before {
  background: var(--lamp);
  box-shadow: 0 0 6px var(--dk-glow);
  transition-duration: 0s;
}

/* ---- flat console keys ----------------------------------------------------------------------- */

html[data-deck-skin="studio"] .deck .dk-key {
  background: var(--booth-2);
  box-shadow: none;
}

html[data-deck-skin="studio"] .deck .dk-key:active:not(:disabled) { box-shadow: inset 0 1px 3px var(--dk-shadow); }

/* One corner for every console key, pads included. The ids match deck.css's own id rules for the
   phone sheet's keys, which would otherwise keep their rounder corners beside the square pads. */
html[data-deck-skin="studio"] .deck :is(.dk-key, .dk-tl-step, #deck-prev, #deck-next, #deck-club, #deck-booth, #deck-queue, #deck-share) {
  border-radius: 5px;
}

html[data-deck-skin="studio"] .deck .dk-play {
  box-shadow: 0 2px 12px rgb(var(--lamp-rgb) / .28);
}

html[data-deck-skin="studio"] .deck .dk-seg { border-radius: 4px; }
html[data-deck-skin="studio"] .deck .dk-seg-btn { border-radius: 3px; }

html[data-deck-skin="studio"] .deck .dk-seg-btn[aria-pressed="true"] {
  background: var(--booth-2);
  box-shadow: inset 0 0 0 1px var(--dk-edge);
}

html[data-deck-skin="studio"] .deck .dk-lcd { border-radius: 4px; }

/* ---- bands ------------------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  html[data-deck-skin="studio"] .deck .dk-meters { width: 48px; }
}

/* 960 to 1199 px (the meters are hidden below 960): narrower meters, so the title keeps its room. */
@media (min-width: 720px) and (max-width: 1199.98px) {
  html[data-deck-skin="studio"] .deck .dk-meters { width: 34px; }
  html[data-deck-skin="studio"] .deck .dk-meter { --vu-r: 15px; --vu-drop: 1px; }
}

/* 720 to 959 px: the 56 px platter. */
@media (min-width: 720px) and (max-width: 959.98px) {
  html[data-deck-skin="studio"] .deck .dk-clock::before { inset: 7px; }
  html[data-deck-skin="studio"] .deck .dk-clock-time { font-size: 11.5px; }
  html[data-deck-skin="studio"] .deck .dk-clock-onair { font-size: 6px; }
}

/* Phones: the 44 px platter keeps the ring and the time; the ON AIR box becomes a lamp bar. */
@media (max-width: 719.98px) {
  html[data-deck-skin="studio"] .deck .dk-clock { gap: 3px; }
  html[data-deck-skin="studio"] .deck .dk-clock::before { display: none; }
  html[data-deck-skin="studio"] .deck .dk-clock-ring { inset: 2px; }
  html[data-deck-skin="studio"] .deck .dk-clock-time { font-size: 10px; }

  html[data-deck-skin="studio"] .deck .dk-clock-onair {
    width: 16px;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgb(var(--smoke-rgb) / .3);
    font-size: 0;
  }
}

/* ---- forced colours --------------------------------------------------------------------------- */
/* Backgrounds are dropped, which would take the second dots, the needle and a lit ON AIR box with
   them: they are drawn in system colours instead. The pressed key keeps deck.css's Highlight fill
   (the flat key rule above is more specific than deck.css's forced-colours rule, so it is restated). */
@media (forced-colors: active) {
  html[data-deck-skin="studio"] .deck .dk-seg-btn[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    box-shadow: none;
  }

  html[data-deck-skin="studio"] .deck .dk-clock-ring::before {
    forced-color-adjust: none;
    background: conic-gradient(Highlight 0 calc(var(--sec) * 6deg + 4.5deg), GrayText 0);
  }

  html[data-deck-skin="studio"] .deck .dk-vu-needle {
    forced-color-adjust: none;
    background: CanvasText;
  }

  html[data-deck-skin="studio"] .deck[data-show][data-source="radio"] .dk-clock-onair {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* ---- reduced motion: the clock stands still (deck.js stops the second dots), no fades ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-deck-skin="studio"] .deck .dk-pad::before { transition: none; }
}