/* Willy Music (public). Greyscale, flat line art, Platinum chrome. Lee's covers are black and white (like Reads, no colour on hover).
   Loads after /css/items.css, the shared item design: list cards for Mine and Playlists, the cover grid for
   liked songs, liked albums and DJ Twist's releases, then Sessions. Spotify art is black and white too (Lee's choice); Admin > "Spotify art in colour"
   (.ui-colour on the Spotify box) shows it as Spotify serves it. */
.music { max-width: 980px; }
.mu-empty { padding: 30px 16px; text-align: center; color: #666; }

/* ---------------------------------------------------------------- deck */
.deck { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px 18px; margin-bottom: 22px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .15); }
@media (max-width: 680px) { .deck { grid-template-columns: 1fr; gap: 14px; padding: 12px; } .tt { max-width: 340px; margin: 0 auto; width: 100%; } }

.tt { position: relative; user-select: none; -webkit-user-select: none; }
.tt__plinth { position: relative; aspect-ratio: 340 / 280; background: #e6e6e6; border: 1.5px solid var(--ink); border-radius: 10px;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b9b9b9, 3px 3px 0 rgba(0, 0, 0, .18); }
.tt__platter { position: absolute; left: 5%; top: 6.5%; width: 69%; aspect-ratio: 1; border-radius: 50%; background: #c4c4c4; border: 1.5px solid var(--ink);
  box-shadow: inset -2px -2px 0 #9a9a9a; }
.tt__rec { position: absolute; inset: 4.5%; border-radius: 50%; cursor: grab; touch-action: none; will-change: transform;
  background:
    radial-gradient(circle, transparent 0 34%, #555 34% 34.8%, transparent 34.8% 58%, #4b4b4b 58% 58.7%, transparent 58.7% 78%, #4b4b4b 78% 78.6%, transparent 78.6%),
    repeating-radial-gradient(circle, #2b2b2b 0 2px, #222 2px 4px);
  box-shadow: 0 0 0 1.5px var(--ink); }
.tt__rec:active { cursor: grabbing; }
.tt__label { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; background: #e6e6e6; border: 1.5px solid #111; display: grid; place-items: center; }
.tt__label img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); pointer-events: none; }
.tt__label::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); pointer-events: none; }
.tt__spindle { position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; margin: -2.5% 0 0 -2.5%; border-radius: 50%; background: #e6e6e6; border: 1.5px solid #111; z-index: 2; }
.tt__sheen { position: absolute; inset: 4.5%; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: conic-gradient(from 20deg, transparent 0 28deg, rgba(255,255,255,.22) 44deg, transparent 62deg 200deg, rgba(255,255,255,.14) 222deg, transparent 244deg);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 32%); mask: radial-gradient(circle, transparent 0 31%, #000 32%); }
.tt__arm { position: absolute; right: 1.5%; top: 3%; height: 88%; width: auto; overflow: visible; transform-origin: 75% 13.64%; pointer-events: none; z-index: 3; }
.tt__pivot { fill: #c4c4c4; stroke: #111; stroke-width: 2.5; }
.tt__pin { fill: #111; }
.tt__rod { fill: none; stroke: #111; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.tt__head { fill: #333; stroke: #111; stroke-width: 2; }
.tt__led { position: absolute; right: 7%; bottom: 8%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.5px solid #111; }
.deck.is-playing .tt__led { background: #111; }
.tt__knob { position: absolute; bottom: 7%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #c4c4c4; border: 1.5px solid #111; box-shadow: inset 1px 1px 0 #fff; }
.tt__knob--a { right: 24%; } .tt__knob--b { right: 15%; }

/* ---------------------------------------------------------- now playing */
.np { min-width: 0; }
.np__t { font: 700 clamp(20px, 2.6vw, 26px)/1.15 var(--font-ui); overflow-wrap: anywhere; }
.np__s { margin-top: 4px; min-height: 1.2em; font: 19px/1.1 var(--font-lcd); color: #555; }
.np__n { margin-top: 10px; font-size: 13.5px; color: #444; white-space: pre-line; }
.np__n:empty { display: none; }
.np__v { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px 3px; font: 700 12px/1.2 var(--font-ui); letter-spacing: .04em;
  color: var(--ink); text-decoration: none; background: linear-gradient(#fafafa, #dcdcdc); border: 1.5px solid var(--ink); border-radius: 6px;
  box-shadow: inset 1px 1px 0 #fff, 0 2px 0 var(--ink); }
.np__v::before { content: ""; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.np__v:hover, .np__v:focus-visible { text-decoration: underline; }
.np__v:active { transform: translateY(2px); box-shadow: inset 1px 1px 0 #a8a8a8; }
.np__v[hidden] { display: none; }
.deck.is-empty .np__t { color: #777; font-weight: 600; }

.ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; }
.ctl__play { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; color: var(--ink); cursor: pointer;
  background: linear-gradient(#fafafa, #dcdcdc); border: 1.5px solid var(--ink); border-radius: 10px;
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 #a8a8a8, 0 3px 0 var(--ink); }
.ctl__play svg { width: 22px; height: 22px; fill: currentColor; }
.ctl__play:active:not([disabled]) { transform: translateY(3px); box-shadow: inset 1.5px 1.5px 0 #a8a8a8; background: #cfcfcf; }
.ctl__play[disabled] { opacity: .45; cursor: default; }
.ctl__i-pause { display: none; } .is-playing .ctl__i-pause { display: inline; } .is-playing .ctl__i-play { display: none; }
.ctl__time { display: inline-flex; gap: 4px; padding: 5px 8px 3px; font: 22px/1 var(--font-lcd); background: #d6d6d6; border: 1.5px solid var(--ink); border-radius: 4px;
  box-shadow: inset 2px 2px 0 #b3b3b3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl__sep { color: #777; }

/* scrubber: Platinum slider. --p = played fraction */
.ctl__scrub { --p: 0%; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ctl__scrub[disabled] { cursor: default; opacity: .5; }
.ctl__scrub::-webkit-slider-runnable-track { height: 12px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: linear-gradient(90deg, #111 0 var(--p), #fff var(--p)); box-shadow: inset 1px 1px 0 #ccc; }
.ctl__scrub::-moz-range-track { height: 9px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; }
.ctl__scrub::-moz-range-progress { height: 9px; background: #111; }
.ctl__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 24px; margin-top: -7.5px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: repeating-linear-gradient(90deg, #e9e9e9 0 3px, #9a9a9a 3px 4px) center / 8px 10px no-repeat, linear-gradient(#fafafa, #d0d0d0);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .35); }
.ctl__scrub::-moz-range-thumb { width: 14px; height: 22px; border: 1.5px solid var(--ink); border-radius: 3px; background: linear-gradient(#fafafa, #d0d0d0); }
@media (max-width: 400px) { .ctl { grid-template-columns: auto minmax(0, 1fr); } .ctl__time { grid-column: 1 / -1; justify-self: start; } }

/* -------------------------------------------------------------- sections (shared .ui-sec headings) */

/* Lee's tracks: list cards that drive the turntable (current one inverted, shared .ui-card[aria-current]) */
.trk__b.is-target, .sp .is-target { outline: 2.5px solid var(--ink); outline-offset: 3px; }   /* opened from a Lately link (#t=<id>, #sp=<id>) */
.is-playing .trk__b[aria-current] .ui-pill__dot { animation: bob .6s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.mu-foot { margin: 6px 4px 0; font-size: 12px; color: #777; text-align: center; }

/* Sessions: a YouTube video as sound only. The YouTube player is there but out of sight; the site's own button, slider and LCD drive it */
.ses { padding: 12px; background: var(--card, #fff); border: 1.5px solid var(--line, #333); border-radius: 10px; }
.ses__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.ses__ctl { grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; }
.ses .ui-card__a a { color: inherit; }
.ses .ctl__i-play { display: inline; } .ses .ctl__i-pause { display: none; }       /* its own state, not the turntable's */
.ses.is-on .ctl__i-play { display: none; } .ses.is-on .ctl__i-pause { display: inline; }
.ses.is-on .ui-pill__dot { animation: bob .6s steps(2) infinite; }
.ses.is-err .ses__ctl { display: none; }
.ses__host { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
@media (max-width: 400px) { .ses__ctl { grid-template-columns: minmax(0, 1fr) auto; } .ses__ctl .ctl__time { grid-column: auto; } }