/* Music tab (SiriusXM and Spotify), the full player, and the music dock.

   Two colors come from the playing song's art (palette.js): --np-bg, a dark
   tint, and --np-accent, a light tone that reads at 4.5:1 or better on it.
   The values below are the neutral ones for no art, or grey art.

   Motion: transform and opacity only. A press settles in 100 ms; a new song
   crossfades its art in 300 ms and raises its text 8px in 220 ms; a color
   change crossfades in 800 ms; progress moves on a 1 s linear transition so
   the 1 s tick reads as continuous. Reduced motion keeps opacity only. */

:root {
  --np-bg: #161b2b;
  --np-accent: #b9a7ff;
  --np-glow: rgb(124 92 246 / .34);
}

/* ---------- shared now-playing parts ---------- */

.np-tint {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease-in-out);
}
.np-tint.on { opacity: 1; }

.np-art {
  position: relative; width: 120px; aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden;
  background: rgb(255 255 255 / .06);
  box-shadow: 0 10px 28px rgb(0 0 0 / .38);
}
.np-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.np-art-img.on { opacity: 1; }
.np-art-img:not([src]) { visibility: hidden; }

.np-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.np-chip {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%;
  padding: 3px 10px 3px 3px; border-radius: 999px;
  background: rgb(255 255 255 / .09); color: rgb(255 255 255 / .86);
  font-size: 12.5px; font-weight: 620; line-height: 20px;
}
.np-chip-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #0006; flex: 0 0 auto; }

.np-state {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
  min-height: 28px; padding: 3px 11px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn);
  font-size: 12px; font-weight: 750; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .np-state:hover { background: color-mix(in srgb, var(--warn) 26%, transparent); }
}
.np-state.live { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.np-state:disabled { opacity: 1; cursor: default; }
.np-state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.np-state.live .np-state-dot { animation: np-pulse 2s ease-in-out infinite; }
@keyframes np-pulse { 50% { opacity: .35; } }
/* Rewound into the DVR, the pill is the Live now button: filled in the
   album's accent so it reads as the thing to press, with how far behind. */
.np-state-ff, .np-state-behind { display: none; }
.np-state.behind {
  min-height: 36px; padding: 4px 14px 4px 10px; gap: 5px;
  background: var(--np-accent); color: var(--np-bg);
  font-size: 13px; font-weight: 750; letter-spacing: 0;
  box-shadow: 0 6px 16px rgb(0 0 0 / .28);
  animation: np-pop .22s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .np-state.behind:hover { background: var(--np-accent); filter: brightness(1.08); }
}
.np-state.behind:active { transform: scale(.96); }
.np-state.behind .np-state-dot { display: none; }
.np-state.behind .np-state-ff { display: grid; }
.np-state.behind .np-state-behind { display: inline; font-weight: 600; opacity: .72; }
.np-state.behind .np-state-behind::before { content: "\00b7"; margin: 0 5px 0 1px; }
@keyframes np-pop { from { opacity: 0; transform: scale(.9); } }

.np-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-title {
  font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.np-artist { font-size: 15px; font-weight: 580; color: var(--np-accent); min-height: 1.3em; }
.np-show { font-size: 12.5px; color: rgb(255 255 255 / .62); }
.rise { animation: np-rise .22s var(--ease-out); }
@keyframes np-rise { from { opacity: 0; transform: translateY(8px); } }

.np-prog { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-bar { height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: pan-y; outline-offset: 2px; }
.np-track {
  width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgb(255 255 255 / .17);
  transition: transform .15s var(--ease-out);
}
.np-bar.drag .np-track { transform: scaleY(1.6); }
@media (hover: hover) and (pointer: fine) {
  .np-bar:hover .np-track { transform: scaleY(1.6); }
}
.np-fill {
  display: block; width: 100%; height: 100%; background: #fff;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1s linear;
}
.np-fill.jump, .np-bar.drag .np-fill { transition: none; }
.np-bar.idle { opacity: .3; cursor: default; pointer-events: none; }
.np-times {
  display: flex; justify-content: space-between; min-height: 16px;
  font-size: 12px; color: rgb(255 255 255 / .72); font-variant-numeric: tabular-nums;
}

.np-controls { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; align-items: center; gap: 8px; }
.np-controls > :last-child { justify-self: end; }
.np-side { display: flex; align-items: center; gap: 4px; }
.np-transport { display: flex; align-items: center; justify-content: center; gap: 14px; }
.np-btn {
  width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #fff;
  transition: background .12s, transform .1s ease, opacity .12s;
}
@media (hover: hover) and (pointer: fine) {
  .np-btn:hover { background: rgb(255 255 255 / .1); }
}
.np-btn:disabled { opacity: .3; background: transparent; cursor: default; }
.np-btn.on { color: var(--np-accent); }
.np-play {
  position: relative; width: 64px; height: 64px; min-height: 64px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #fff; color: #0b0e14;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35);
  transition: transform .1s ease, filter .12s;
}
@media (hover: hover) and (pointer: fine) {
  .np-play:hover { background: #fff; filter: brightness(.93); }
}
.np-play:active { transform: scale(.94); }
.np-play.error { background: var(--bad); color: #fff; }
.np-spin {
  position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2.5px solid transparent; border-top-color: var(--np-accent); border-right-color: var(--np-accent);
  opacity: 0; transition: opacity .15s;
}
.np-play.loading .np-spin { opacity: 1; animation: np-spin .8s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }

.np-castchip {
  display: flex; align-items: center; gap: 8px; max-width: 100%; width: fit-content;
  margin: 0 auto; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--np-accent) 16%, transparent); color: var(--np-accent);
  font-size: 13px; font-weight: 640;
}
.np-castchip .icon { flex: 0 0 auto; }
.np-castchip-stop {
  width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .12); color: #fff;
}

/* Equalizer bars stop with the music: one class on the view, no repaint. */
.is-paused .eq i { animation: none; transform: scaleY(.35); }

/* ---------- the hero card ---------- */

.radio-hero { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.radio-hero-main, .radio-hero-also { min-width: 0; }
.radio-hero-also:empty { display: none; }
.sxm-shell { position: relative; min-width: 0; }
.sxm-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px 16px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "art meta" "bottom bottom";
  padding: 16px; border-radius: var(--r-lg);
  background: var(--np-bg); border: 1px solid rgb(255 255 255 / .08);
  box-shadow: var(--shadow);
}
.sxm-art-cell { grid-area: art; align-self: start; }
.sxm-meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sxm-bottom { grid-area: bottom; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Spectrum bars sit on the progress bar while the station plays, and rest
   as a low row when it does not. The band keeps its height, so nothing
   moves when play starts. Without bar support it is left out. */
.np-bars {
  --bars-h: 40px;
  display: block; width: 100%; height: var(--bars-h); margin-bottom: -6px; pointer-events: none;
}
.sxm-card.no-bars .np-bars { display: none; }
@media (min-width: 600px) { .np-bars { --bars-h: 52px; } }
@media (min-width: 1100px) { .np-bars { --bars-h: 72px; } }
@media (min-width: 1800px) { .np-bars { --bars-h: 88px; } }
@media (max-width: 379px) {
  .sxm-card { padding: 14px; gap: 12px; }
  .sxm-card .np-art { width: 96px; }
  .sxm-card .np-title { font-size: 17px; }
  .sxm-card .np-artist { font-size: 14px; }
  .np-transport { gap: 8px; }
}
/* The narrowest phones: smaller art, and the Live now button drops its
   behind time so it stays inside the card. */
@media (max-width: 339px) {
  .sxm-card .np-art { width: 76px; }
  .sxm-card .np-state.behind .np-state-behind { display: none; }
}
/* A phone has no room for six controls in a row: previous, play and next
   get the row, and speaker, Spotify and full player go on a row under it. */
@media (max-width: 459px) {
  .sxm-card:not(.sp-hero) .np-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "tr tr tr" "side . end";
    row-gap: 0;
  }
  .sxm-card:not(.sp-hero) .np-controls > .np-side { grid-area: side; }
  .sxm-card:not(.sp-hero) .np-controls > .np-transport { grid-area: tr; }
  .sxm-card:not(.sp-hero) .np-controls > :last-child { grid-area: end; }
}
/* Spotify's row has one button each side, so it fits a phone: the play
   button stays in the middle. */
.sp-hero .np-controls { display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 600px) { .sp-hero .np-controls { justify-content: center; gap: 28px; } }
@media (min-width: 600px) {
  .sxm-card .np-art { width: 160px; }
  .sxm-card .np-title { font-size: 24px; }
  .sxm-card .np-artist { font-size: 16px; }
}
@media (min-width: 1100px) {
  .sxm-card {
    grid-template-areas: "art meta" "art bottom";
    grid-template-rows: 1fr auto;
    padding: 24px; gap: 18px 28px;
  }
  .sxm-art-cell { align-self: center; }
  .sxm-meta { justify-content: flex-end; }
  .sxm-card .np-art { width: 240px; border-radius: 14px; }
  .sxm-card .np-title { font-size: 32px; }
  .sxm-card .np-artist { font-size: 19px; }
  .sxm-card .np-show { font-size: 14px; }
}
@media (min-width: 1800px) {
  .sxm-card { padding: 28px; gap: 20px 36px; }
  .sxm-card .np-art { width: 320px; border-radius: 16px; }
  .sxm-card .np-title { font-size: 40px; }
  .sxm-card .np-artist { font-size: 22px; }
}
/* A phone on its side: the wide layout, art beside everything and a size
   smaller, so the controls are on screen without scrolling. */
@media (min-width: 600px) and (max-width: 1099px) and (max-height: 500px) {
  .sxm-card { grid-template-areas: "art meta" "art bottom"; grid-template-rows: 1fr auto; padding: 12px 14px; gap: 6px 20px; }
  .sxm-art-cell { align-self: center; }
  .sxm-card .np-art { width: 132px; }
  .sxm-card .np-title { font-size: 19px; -webkit-line-clamp: 1; }
  .sxm-card .np-artist { font-size: 15px; }
  .sxm-card .np-show { display: none; }
  .sxm-card .np-bars { --bars-h: 24px; }
  .sxm-card .np-play { width: 56px; height: 56px; min-height: 56px; }
  .sxm-bottom { gap: 4px; }
}

/* Spotify in the hero: the same card, with the device it plays on in the
   chip (a tap moves it), no spectrum band (the audio is not in this page
   unless it plays here), and a volume row. */
.sp-chip { position: relative; border: 0; min-height: 28px; padding: 3px 10px 3px 4px; cursor: pointer; transition: background .12s; }
@media (hover: hover) and (pointer: fine) {
  .sp-chip:hover { background: rgb(255 255 255 / .16); }
}
.sp-chip-logo { display: grid; place-items: center; width: 20px; height: 20px; color: #1ed760; flex: 0 0 auto; }
.sp-chip-dev { display: grid; opacity: .7; flex: 0 0 auto; }
.sp-state { font-size: 12px; font-weight: 700; color: rgb(255 255 255 / .62); }
.sp-bar { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .sp-bar:hover .np-track { transform: none; }
}
.sp-open { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .sp-open:hover { text-decoration: none; }
}
.sp-hero-vol { display: flex; align-items: center; gap: 10px; color: rgb(255 255 255 / .72); min-width: 0; }
.sp-hero-vol .icon { display: grid; flex: 0 0 auto; }
.sp-hero-vol .sp-vol { accent-color: var(--np-accent); }
@media (min-width: 1100px) { .sp-hero-vol { max-width: 420px; } }

/* Nothing playing: resume the last station, resume Spotify, or a hint, in
   a couple of rows rather than a screenful of empty box. */
.music-start {
  display: grid; gap: 10px; padding: 12px; min-width: 0;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--card) 0%, var(--bg-2) 100%);
}
.music-start-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); min-width: 0; }
.music-start-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 76px; padding: 10px 12px 10px 10px;
  text-align: left; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .music-start-opt:hover { background: var(--line); }
}
.music-start-art {
  width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto;
  background: var(--bg-2); box-shadow: 0 4px 12px rgb(0 0 0 / .3);
}
.music-start-art.sp { display: grid; place-items: center; color: #1ed760; background: #0f2418; }
.music-start-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.music-start-kicker {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 640; color: var(--np-accent);
}
.music-start-kicker.sp { color: #1ed760; }
.music-start-kicker .icon { display: inline-grid; vertical-align: -2px; margin-right: 5px; }
.music-start-name { font-size: 16px; font-weight: 700; }
.music-start-sub { font-size: 12.5px; color: var(--muted); }
.music-start-play {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: #fff; color: #0b0e14;
}
.music-start-hint { margin: 0; padding: 0 4px; font-size: 13px; color: var(--muted); }
.music-start-hint a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
@media (pointer: coarse) { .music-start-hint a { min-height: 44px; } }
@media (max-width: 339px) {
  .music-start-play { display: none; }
  .music-start-art { width: 46px; height: 46px; }
}
.music-start.bare { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 14px; }
.music-start-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card-2); color: var(--muted);
}
@media (min-width: 1100px) {
  .music-start { padding: 16px; }
  .music-start-opt { min-height: 88px; }
  .music-start-art { width: 64px; height: 64px; }
}

/* The other source, one line under the hero. */
.music-also {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.music-also-art img, .music-also-noart { display: block; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--card-2); }
.music-also-noart { display: grid; place-items: center; color: #1ed760; }
.music-also-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.music-also-kicker { display: block; font-size: 12px; color: var(--muted); }
.music-also-kicker .icon { display: inline-grid; vertical-align: -2px; margin-right: 5px; }
[data-test="music-also-spotify"] .music-also-kicker .icon { color: #1ed760; }
[data-test="music-also-sxm"] .music-also-kicker .icon { color: #7ea6ff; }
.music-also-title { display: block; font-size: 14px; font-weight: 620; }
.music-also-btn {
  width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--card-2); color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .music-also-btn:hover { background: var(--line-2); }
}

/* ---------- the tab ---------- */

.radio { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.radio-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.radio-side { min-width: 0; }
.radio-sec[hidden] { display: none; }
.radio-sec-head { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; min-width: 0; }
.radio-sec-head h3 { margin: 0; font-size: 16px; font-weight: 680; }
/* Where a section's music comes from. */
.src-mark {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 0 8px 0 6px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; line-height: 20px; color: var(--muted);
}
.src-mark .icon { display: grid; }
.src-mark.sp .icon { color: #1ed760; }
.src-mark.sxm .icon { color: #7ea6ff; }
/* A narrow phone's Stations head has the count and the switch too. */
@media (max-width: 400px) { .radio-stations .src-mark { display: none; } }
.radio-count { font-variant-numeric: tabular-nums; }
.radio-switch { flex: 0 0 auto; }

/* Wide screens: player, favorites and history on the left; every station
   on the right, in a column that scrolls by itself. */
@media (min-width: 1100px) {
  .radio { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
  /* The column stops short of the bottom right corner, where the
     now-playing button lives; it covered the last row's star. */
  .radio-side {
    position: sticky; top: calc(var(--header-h) + 16px);
    height: calc(100vh - var(--header-h) - 96px);
    display: flex; flex-direction: column;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 12px 8px 8px 12px;
  }
  .radio-stations { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .radio-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
}
@media (min-width: 1800px) {
  body[data-tab="radio"] main { max-width: 2400px; }
  .radio { grid-template-columns: minmax(0, 1fr) 480px; gap: 36px; }
}

/* Favorites on now: one row of square cards that scrolls sideways, each
   with the song, the artist and the station. Arrows page it with a mouse. */
.radio-favs-wrap, .radio-live-wrap, .sp-lists-rail { position: relative; min-width: 0; }
.radio-favs {
  --fav-w: 138px;
  display: flex; gap: 12px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 10px 6px 4px;
  margin: 0 -6px;
  /* Snap to the padding, not the edge 6px outside the page's margin. */
  scroll-padding-inline: 6px;
}
.radio-favs::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .radio-favs { --fav-w: 156px; } }
@media (min-width: 1100px) { .radio-favs { --fav-w: 168px; gap: 16px; } }
@media (min-width: 1800px) { .radio-favs { --fav-w: 184px; } }
.radio-fav {
  flex: 0 0 var(--fav-w); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0;
  padding: 0; border: 0; border-radius: var(--r); background: transparent;
  text-align: left; color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .radio-fav:hover { background: transparent; }
}
.radio-fav-media {
  position: relative; display: block; aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; background: var(--card);
  box-shadow: 0 6px 16px rgb(0 0 0 / .35);
  transition: box-shadow .2s, transform .2s var(--ease-out);
}
.radio-fav-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .radio-fav:hover .radio-fav-media { transform: translateY(-3px); }
  .radio-fav:hover .radio-fav-art { transform: scale(1.04); }
}
.radio-fav-logo {
  position: absolute; left: 6px; bottom: 6px; width: 30px; height: 30px;
  border-radius: 50%; object-fit: cover; background: #000;
  box-shadow: 0 0 0 2px rgb(0 0 0 / .55);
}
.radio-fav .eq { right: 6px; bottom: 6px; }
.radio-fav.playing .radio-fav-media { box-shadow: 0 0 0 2px var(--np-accent), 0 0 0 5px color-mix(in srgb, var(--np-accent) 25%, transparent); }
.radio-fav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.radio-fav-title { font-size: 14px; font-weight: 650; line-height: 1.25; }
.radio-fav-artist { font-size: 12.5px; color: var(--muted); }
.radio-fav.playing .radio-fav-artist { color: var(--np-accent); }
.radio-fav-station { font-size: 11.5px; color: var(--muted); }
.radio-favs-wrap .rail-arrow { top: calc(var(--fav-w, 168px) / 2 - 14px); }
.radio-favs-wrap .rail-arrow.prev { left: -6px; }
.radio-favs-wrap .rail-arrow.next { right: -6px; }
.radio-hint { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; }

/* Live now: the games on SiriusXM's play-by-play channels, as wide cards
   (a game's name runs long) that scroll sideways. */
.radio-live-h { display: inline-flex; align-items: center; gap: 8px; }
.radio-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff5a67;
  box-shadow: 0 0 0 3px rgb(255 90 103 / .22); animation: np-pulse 2s ease-in-out infinite;
}
.radio-live {
  display: flex; gap: 10px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 6px 4px; margin: 0 -6px;
  scroll-padding-inline: 6px;
}
.radio-live::-webkit-scrollbar { display: none; }
.radio-live-tile {
  flex: 0 0 min(300px, 80%); scroll-snap-align: start; container-type: inline-size;
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 88px; padding: 10px 12px 10px 10px;
  text-align: left; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .radio-live-tile:hover { background: var(--card-2); }
}
.radio-live-tile.playing { border-color: var(--np-accent); box-shadow: inset 0 0 0 1px var(--np-accent); }
.radio-live-media { position: relative; flex: 0 0 auto; display: block; }
.radio-live-art { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--card-2); }
.radio-live-media .eq { right: 3px; bottom: 3px; }
/* Both teams' logos, offset like a matchup graphic: half-width slices cut a
   wide wordmark (the Lakers') to its middle letters. */
.radio-live-art.pair { position: relative; background: none; }
.radio-live-art.pair img {
  position: absolute; width: 40px; height: 40px; border-radius: 8px;
  object-fit: cover; background: var(--card-2);
}
.radio-live-art.pair img:first-child { left: 0; top: 0; }
.radio-live-art.pair img:last-child { right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--card); }
.radio-live-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.radio-live-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.radio-live-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 0 6px; border-radius: 4px;
  background: #d32f3c; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 18px;
}
.radio-live-badge i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: np-pulse 2s ease-in-out infinite; }
.radio-live-league {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted);
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-live-since { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; margin-left: auto; padding-left: 4px; }
/* A phone's card has room for the badge and the league, not the time. */
/* "Since 6:30 PM" ran past the card on a 411px phone beside "NCAAFB Game":
   the league shortens first, and a narrow card (a phone's 300px) drops the time. */
@container (max-width: 319px) { .radio-live-since { display: none; } }
/* One of Adam's teams: a star by the badge and a gold edge. */
.radio-live-mine { display: inline-grid; flex: none; color: #f5b301; }
.radio-live-tile.mine { border-color: color-mix(in srgb, #f5b301 50%, var(--line)); }
/* A game on several channels: one card, a button per feed. */
.radio-live-tile.multi { cursor: pointer; }
.radio-live-feeds { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 2px; }
.radio-live-feed {
  min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--fg); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.radio-live-feed[aria-current="true"] { border-color: #d32f3c; background: color-mix(in srgb, #d32f3c 22%, var(--bg-2)); }
@media (hover: hover) and (pointer: fine) {
  .radio-live-feed:hover { background: var(--card-2); }
}
@media (pointer: coarse) {
  .radio-live-feed { position: relative; }
  .radio-live-feed::after { content: ""; position: absolute; inset: -8px -3px; }
}
/* A tablet or a desktop has the room for a card that shows the time. */
@media (min-width: 600px) { .radio-live-tile { flex-basis: 360px; } }
.radio-live-title {
  font-size: 14px; font-weight: 650; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.radio-live-ch { display: block; font-size: 12px; color: var(--muted); }
.radio-live-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-right: 5px; background: #000; }
.radio-live-wrap .rail-arrow { top: calc(50% - 20px); }
.radio-live-wrap .rail-arrow.prev { left: -6px; }
.radio-live-wrap .rail-arrow.next { right: -6px; }
@media (min-width: 1800px) { .radio-live-tile { flex-basis: 340px; } }

/* Stations */
.radio-filter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
/* Below 1100px the station list is the page (406 stations, 24,000px on a
   phone), so the search and genres stay under the header while it
   scrolls: a search from the middle of the list needs no trip back up. */
@media (max-width: 1099px) {
  .radio-filter {
    position: sticky; top: var(--header-h); z-index: 15;
    margin: 0 -16px 8px; padding: 8px 16px; background: var(--bg);
    box-shadow: 0 8px 12px -10px rgb(0 0 0 / .6);
  }
}
.radio-search-wrap {
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg);
  color: var(--muted);
}
.radio-search-wrap:focus-within { border-color: var(--accent); }
.radio-search-wrap[hidden] { display: none; }
input.radio-search, input.sp-search { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 10px 0; border-radius: 0; }
input.radio-search:focus, input.sp-search:focus { border: 0; }

.fchips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 4px; overscroll-behavior-x: contain;
}
.fchips::-webkit-scrollbar { display: none; }
.fchips[hidden] { display: none; }
.fchip {
  flex: 0 0 auto; min-height: 34px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 560; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .fchip:hover { background: var(--card); color: var(--fg); }
}
.fchip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); font-weight: 680; }
@media (pointer: fine) {
  .fchips { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
}

.radio-list { display: flex; flex-direction: column; min-width: 0; }
.radio-row {
  display: flex; align-items: center; gap: 2px; min-height: 56px; border-radius: var(--r-sm);
  content-visibility: auto; contain-intrinsic-size: auto 56px;
}
@media (hover: hover) and (pointer: fine) {
  .radio-row:hover { background: var(--card); }
}
.radio-row.playing { background: color-mix(in srgb, var(--np-accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--np-accent); }
.radio-row-main {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 56px;
  padding: 8px; margin: 0; border: 0; background: transparent; color: inherit; text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .radio-row-main:hover { background: transparent; }
}
.radio-row-art { position: relative; flex: 0 0 auto; display: block; }
.radio-row-art img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--card-2); }
.radio-row-art .eq { right: -3px; bottom: -3px; }
.radio-row-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.radio-tile-name { font-size: 14px; font-weight: 620; }
.radio-row-sub { font-size: 12.5px; color: var(--muted); }
.radio-star {
  width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .radio-star:hover { background: var(--card-2); color: var(--warn); }
}
.radio-star.on { color: var(--warn); }

/* On this channel */
.track-list { display: flex; flex-direction: column; min-width: 0; }
/* On this channel runs in columns on a wide screen: one long list left the
   middle of the row empty. */
@media (min-width: 1100px) {
  .radio-tracks .track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
@media (min-width: 1800px) {
  .radio-tracks .track-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.track {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; min-width: 0;
  padding: 8px; margin: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; text-align: left; font: inherit;
}
@media (hover: hover) and (pointer: fine) {
  button.track:hover { background: var(--card); }
}
.track.current { background: color-mix(in srgb, var(--np-accent) 12%, transparent); }
.track.future { opacity: .8; }
.track-art { position: relative; flex: 0 0 auto; display: block; }
.track-art img { display: block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--card-2); }
.track-art .eq { right: -3px; bottom: -3px; }
.track-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.track-title { font-size: 14px; font-weight: 600; }
.track-artist { font-size: 12.5px; color: var(--muted); }
.track-side {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.track-side.now { color: var(--np-accent); font-weight: 750; letter-spacing: .03em; }
.track.future .track-side { color: var(--np-accent); font-weight: 620; }
.radio-more { margin-top: 6px; width: 100%; }
.radio-show-all { min-height: 44px; margin-top: 10px; }

/* Speaker sheet */
.cast-list { display: flex; flex-direction: column; gap: 4px; }
.cast-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 12px; text-align: left; background: transparent; border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .cast-row:hover { background: var(--card-2); border-color: var(--line); }
}
.cast-row.busy { opacity: .6; }
.cast-row-icon { color: var(--muted); display: grid; }
.cast-row-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.cast-row-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); flex: 0 0 auto; text-transform: capitalize; }
.cast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.cast-dot.t-ok { background: var(--ok); }
.cast-dot.t-warn { background: var(--warn); }
.cast-dot.t-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-2); }

/* Kiosk (/radio or ?kiosk=1): no chrome, edge to edge. */
body.kiosk main { padding: 12px 12px 84px; max-width: none; }
/* The sticky search bleeds to the page's edges by the page's own margin:
   16px is the tabs' page, and in the kiosk's 12px it hung 4px off the side. */
@media (max-width: 1099px) { body.kiosk .radio-filter { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } }

/* ---------- full view (#radio/now) ---------- */

html.full-open body { overflow: hidden; }
.sxm-full {
  position: fixed; inset: 0; z-index: 85; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--np-bg); color: #fff;
  opacity: 0; transform: translateY(24px);
  transition: opacity .2s ease-in, transform .2s ease-in;
}
.sxm-full.open {
  opacity: 1; transform: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.full-top { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; align-items: center; gap: 8px; padding: 10px 14px 0; }
.full-chip { display: flex; justify-content: center; min-width: 0; }
.full-cast { display: flex; justify-content: flex-end; gap: 4px; }
.full-main {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3vh, 34px); padding: 8px 24px 72px;
}
.full-main .np-art { width: min(46vh, 80vw); border-radius: 18px; box-shadow: 0 28px 70px rgb(0 0 0 / .55); }
.full-info { width: min(640px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.full-info .np-title { font-size: clamp(28px, 4.5vw, 64px); line-height: 1.08; }
.full-info .np-artist { font-size: clamp(17px, 2.2vw, 30px); }
.full-info .np-show { font-size: clamp(13px, 1.3vw, 17px); }
.full-state { display: flex; }
.full-controls { display: flex; justify-content: center; margin-top: 4px; }
.full-controls .np-play { width: 76px; height: 76px; min-height: 76px; }
.full-controls .np-transport { gap: clamp(14px, 3vw, 32px); }
.full-adj { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 4px; }
.full-adj:empty { display: none; }
.full-adj-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 0;
  padding: 8px; border: 0; border-radius: 12px; text-align: left; color: inherit;
  background: rgb(255 255 255 / .07);
}
@media (hover: hover) and (pointer: fine) {
  button.full-adj-row:hover { background: rgb(255 255 255 / .12); }
}
.full-adj-art img { display: block; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #0004; }
.full-adj-meta { display: flex; flex-direction: column; min-width: 0; }
.full-adj-label { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--np-accent); }
.full-adj-title { font-size: 14px; font-weight: 620; }
.full-adj-artist { font-size: 12.5px; color: rgb(255 255 255 / .66); }
.full-viz {
  position: absolute; left: 0; right: 0; bottom: 56px; z-index: -1;
  width: 100%; height: 84px; pointer-events: none;
}
.full-drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: 760px; margin: 0 auto; height: min(72vh, 660px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--np-bg) 35%, #07090d); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgb(0 0 0 / .4);
  transform: translateY(calc(100% - 56px));
  transition: transform .28s var(--ease-out);
}
.full-drawer.open { transform: none; }
.full-drawer.dragging { transition: none; }
.full-drawer-handle {
  position: relative; flex: 0 0 auto; width: 100%; height: 56px; min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 20px 20px 0 0; background: transparent; color: #fff;
  font-weight: 640; touch-action: none;
}
@media (hover: hover) and (pointer: fine) {
  .full-drawer-handle:hover { background: rgb(255 255 255 / .05); }
}
.full-grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgb(255 255 255 / .28); }
.full-drawer-chev { display: grid; transition: transform .28s var(--ease-out); }
.full-drawer.open .full-drawer-chev { transform: rotate(180deg); }
.full-drawer-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}
.full-drawer-body .track-artist, .full-drawer-body .track-side { color: rgb(255 255 255 / .66); }
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .full-main { flex-direction: row; gap: clamp(28px, 5vw, 96px); padding: 8px clamp(24px, 5vw, 96px) 72px; }
  .full-info { width: min(760px, 48vw); }
  .full-state { justify-content: flex-start; }
  .full-controls { justify-content: flex-start; }
}
/* A TV or a 2000px monitor reads the full view from across the room. */
@media (min-width: 1600px) and (min-height: 800px) {
  .sxm-full .np-chip { font-size: 15px; line-height: 26px; padding-right: 14px; }
  .sxm-full .np-chip-logo { width: 26px; height: 26px; }
  .sxm-full .np-state { font-size: 14px; min-height: 32px; padding: 4px 14px; }
  .sxm-full .np-state.behind { font-size: 16px; min-height: 44px; padding: 6px 18px 6px 14px; }
  .sxm-full .np-times { font-size: 15px; }
  .sxm-full .np-track { height: 6px; border-radius: 3px; }
  .full-controls .np-play { width: 92px; height: 92px; min-height: 92px; }
  .full-controls .np-btn { width: 56px; height: 56px; }
  .full-adj-art img { width: 64px; height: 64px; border-radius: 10px; }
  .full-adj-title { font-size: 17px; }
  .full-adj-artist { font-size: 14.5px; }
  .full-adj-label { font-size: 12px; }
  .full-top { padding: 18px 24px 0; }
}
@media (max-height: 620px) {
  .full-adj, .full-viz { display: none; }
  .full-main { padding-bottom: 64px; }
}
/* A phone on its side: everything beside the art, a size smaller, so the
   play button clears the drawer. */
@media (max-height: 460px) {
  .full-top { padding-top: 6px; }
  .full-main { gap: 8px clamp(20px, 4vw, 48px); padding-top: 0; padding-bottom: 60px; }
  .full-main .np-art { width: min(52vh, 36vw); }
  .full-info { gap: 6px; }
  .full-info .np-title { font-size: clamp(20px, 3.2vw, 30px); -webkit-line-clamp: 1; }
  .full-info .np-artist { font-size: 15px; }
  .full-info .np-show { display: none; }
  .full-controls { margin-top: 0; }
  .full-controls .np-play { width: 60px; height: 60px; min-height: 60px; }
}

/* ---------- the music dock ---------- */

.dock {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60;
  width: min(440px, calc(100vw - 200px)); isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px;
  background: var(--np-bg); border: 1px solid rgb(255 255 255 / .1); border-radius: 16px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(16px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.dock.in { opacity: 1; transform: none; }
.dock-tint { border-radius: inherit; }
.dock-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(255 255 255 / .12); }
.dock-prog i {
  display: block; height: 100%; width: 100%; background: var(--np-accent);
  transform-origin: left center; transform: scaleX(0); transition: transform 1s linear;
}
.dock-prog i.jump { transition: none; }
.dock-art { position: relative; flex: 0 0 auto; display: block; }
.dock-art img { display: block; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--card-2); }
.dock-art img:not([src]) { visibility: hidden; }
.dock-art .eq { right: -3px; bottom: -3px; }
.dock-meta {
  flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  border: 0; background: transparent; text-align: left; color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .dock-meta:hover { background: transparent; }
}
.dock-name { font-size: 13.5px; font-weight: 650; max-width: 100%; }
.dock-text { font-size: 12px; color: var(--np-accent); max-width: 100%; }
.dock.paused .dock-text { color: rgb(255 255 255 / .6); }
.dock-btn {
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center; font-size: 15px;
}
.dock .dock-btn { background: rgb(255 255 255 / .1); border: 0; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .dock .dock-btn:hover { background: rgb(255 255 255 / .18); }
}
.dock .dock-play { background: #fff; color: #0b0e14; }
@media (hover: hover) and (pointer: fine) {
  .dock .dock-play:hover { background: #fff; filter: brightness(.92); }
}
/* Rewound: back to the live edge, in the hero's Live now colors. */
.dock-live {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  height: 40px; min-height: 40px; padding: 0 12px 0 9px; border: 0; border-radius: 999px;
  background: var(--np-accent); color: var(--np-bg); font-size: 13px; font-weight: 750;
}
@media (hover: hover) and (pointer: fine) {
  .dock-live:hover { background: var(--np-accent); filter: brightness(1.08); }
}
.dock-live .icon { display: grid; }
.dock-live-short { display: none; }
@media (max-width: 480px) {
  .dock-live-long { display: none; }
  .dock-live-short { display: inline; }
  /* No room for both on a phone: the way back to live wins over the heart. */
  .dock.behind .dock-heart { display: none; }
}
body.has-dock main { padding-bottom: 150px; }
/* On the Desk the dock stands in for the Music card: it fades away while
   the card's playing row is on screen (desk.js observeMusic), since that row
   has the same controls. */
body.desk-music-seen[data-tab="desk"] .dock {
  opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
}
/* A phone has no now-playing button at the bottom, so the dock spans the
   width at the bottom edge. */
@media (max-width: 700px) {
  .dock { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .dock-btn, .dock .dock-btn { width: 44px; height: 44px; min-height: 44px; }
  .dock-live { height: 44px; min-height: 44px; }
  .np-state.behind { min-height: 44px; padding: 6px 16px 6px 12px; }
  .sp-chip { min-height: 36px; }
  .sp-chip::after { content: ""; position: absolute; inset: -4px 0; }
  .np-castchip-stop { width: 44px; height: 44px; min-height: 44px; }
  .fchip { min-height: 40px; }
  /* Compact pills keep their look; the tap area reaches past them. */
  .np-state, .fchip { position: relative; }
  .np-state::after { content: ""; position: absolute; inset: -8px -4px; }
  .fchip::after { content: ""; position: absolute; inset: -3px 0; }
}

/* ---------- Spotify heart ---------- */
/* Beside the song's title; filled in Spotify's green once saved. */
.np-textrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-textrow > .np-text { flex: 1 1 0; }
.sp-heart {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: rgb(255 255 255 / .75);
}
@media (hover: hover) and (pointer: fine) {
  .sp-heart:hover { background: rgb(255 255 255 / .1); color: #fff; }
}
.sp-heart[aria-pressed="true"] { color: #1ed760; }
@media (hover: hover) and (pointer: fine) {
  .sp-heart[aria-pressed="true"]:hover { color: #1ed760; }
}
.sp-heart.saving { opacity: .6; }
.sp-heart[hidden] { display: none; }
@media (pointer: coarse) { .sp-heart { width: 44px; height: 44px; min-height: 44px; } }
.sp-play[hidden] { display: none; }
.sp-play {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: rgb(255 255 255 / .75);
}
@media (hover: hover) and (pointer: fine) {
  .sp-play:hover { background: rgb(255 255 255 / .1); color: #1ed760; }
}
@media (pointer: coarse) { .sp-play { width: 44px; height: 44px; min-height: 44px; } }

/* The device picker. */
.sp-devs { display: grid; gap: 6px; }
.sp-dev {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .sp-dev:hover { border-color: var(--line-2); }
}
.sp-dev.sel { border-color: #1ed760; }
.sp-dev .icon { display: grid; color: var(--muted); }
.sp-dev-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sp-dev-tag { font-size: 12px; color: #1ed760; }

/* Liked from SiriusXM (Music tab). */
.sp-hearts { display: grid; }
.sp-heart-row { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--line); min-width: 0; }
.sp-heart-row:last-child { border-bottom: 0; }
.sp-heart-icon { display: grid; color: #1ed760; flex: 0 0 auto; }
.sp-heart-text { flex: 1 1 auto; min-width: 0; }
.sp-heart-title { font-weight: 600; font-size: 14px; }
.sp-row-btn {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .sp-row-btn:hover { background: var(--bg-2); color: var(--fg); }
}
@media (pointer: coarse) { .sp-row-btn { width: 44px; height: 44px; min-height: 44px; } }

/* Playlists as stations: a rail on the Music tab, a row on the Desk. */
.sp-lists {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 12px; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: none;
}
.sp-lists::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .sp-lists:not(.compact) { grid-auto-columns: 148px; gap: 14px; } }
.sp-lists-rail .rail-arrow { top: 46px; }
.sp-lists-rail .rail-arrow.prev { left: -6px; }
.sp-lists-rail .rail-arrow.next { right: -6px; }
.sp-lists.compact { grid-auto-columns: 84px; gap: 8px; }
.sp-list {
  display: grid; gap: 6px; align-content: start; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; min-width: 0;
}
.sp-list img, .sp-list-noart {
  width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--bg-2);
  display: grid; place-items: center; color: var(--muted);
}
.sp-list-name { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-lists.compact .sp-list-name { font-size: 12px; }
.sp-lists-wrap { margin-top: 12px; }
.sp-liked-art { background: linear-gradient(135deg, #450af5, #8e8ee5 65%, #c4efd9); color: #fff; }

/* Search Spotify and Up next (Music tab). */
.sp-search-wrap { margin-bottom: 12px; }
.sp-results { display: grid; gap: 16px; }
.sp-res-group .music-head { margin-bottom: 6px; }
.sp-songs { display: grid; }
.sp-song { display: flex; align-items: center; gap: 6px; min-width: 0; border-bottom: 1px solid var(--line); }
.sp-song:last-child { border-bottom: 0; }
.sp-song-main {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 0;
  border: 0; border-radius: 0; background: none; color: var(--fg); text-align: left;
}
.sp-song-art {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  background: var(--bg-2); display: grid; place-items: center; color: var(--muted);
}
.sp-song-text { display: grid; flex: 1 1 auto; min-width: 0; }
.sp-song-name { font-size: 14px; font-weight: 600; }
.sp-song-sub { font-size: 12.5px; color: var(--muted); }
.sp-song-dur { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .sp-song-main:hover { background: none; }
  .sp-song-main:hover .sp-song-name { color: #1ed760; }
}
.sp-result-kind { font-size: 12px; color: var(--muted); }
.sp-list.artist img, .sp-list.artist .sp-list-noart { border-radius: 50%; }

/* A tile that opens a list, with a play button on its picture: always
   there for a finger, on hover for a mouse. */
.sp-tile { position: relative; container-type: inline-size; }
.sp-tile-open {
  display: grid; gap: 6px; align-content: start; min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--fg); text-align: left;
}
.sp-tile-play {
  position: absolute; right: 6px; top: calc(100cqw - 48px);
  display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: #1ed760; color: #000; box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  touch-action: manipulation;
}
.sp-tile-play:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .sp-tile-open:hover { background: none; }
  .sp-tile-open:hover .sp-list-name { color: #1ed760; }
  .sp-tile-play { opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }
  .sp-tile:hover .sp-tile-play, .sp-tile:focus-within .sp-tile-play { opacity: 1; transform: none; }
  .sp-tile-play:hover { background: #3be477; }
}

/* A list opened in a sheet: its picture and name, Play and Shuffle, then
   its songs (an artist: its albums). */
.modal-card:has(.sp-sheet) { width: min(560px, 100%); }
.sp-sheet-head { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 14px; }
.sp-sheet-back { margin-left: -8px; color: var(--fg); }
.sp-sheet-art {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 8px; object-fit: cover;
  background: var(--bg-2); display: grid; place-items: center; color: var(--muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.sp-sheet-art.round { border-radius: 50%; }
.sp-sheet-art.sp-liked-art { color: #fff; }
.sp-chart-art {
  background: linear-gradient(135deg, #1ed760, #0b6e4f); color: #fff;
  place-content: center; text-align: center; font-weight: 800; font-size: 18px; line-height: 1.1;
}
.sp-chart-art .tiny { font-size: 12px; letter-spacing: .08em; }
.sp-sheet-title { display: grid; gap: 2px; min-width: 0; }
.sp-sheet-title h3 { margin: 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.sp-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.sp-sheet-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 22px; }
button.sp-sheet-play { background: #1ed760; border-color: #1ed760; color: #000; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  button.sp-sheet-play:hover { background: #3be477; }
}
.sp-sheet-note { margin: 4px 0 8px; }
.sp-sheet-more { width: 100%; margin-top: 8px; }
.sp-sheet-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 12px; margin-top: 6px; }

/* Top songs · USA: the chart's place and its move since the day before. */
.sp-rank { flex: 0 0 26px; display: grid; justify-items: center; gap: 2px; }
.sp-rank-n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-change { font-size: 9.5px; font-weight: 700; line-height: 1; }
.sp-change.new, .sp-change.up { color: #1ed760; }
.sp-change.down { color: #f0717a; }
.sp-chart-all { margin-top: 8px; }
@media (min-width: 900px) {
  .sp-chart { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 28px; }
  .sp-chart .sp-song:nth-child(5) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .sp-chart .sp-song:nth-child(n+6) { display: none; }
  .sp-chart .sp-song:nth-child(5) { border-bottom: 0; }
}
.sp-queue .sp-song-main { min-height: 46px; }
.sp-queue .sp-song-art { width: 34px; height: 34px; }

/* Shuffle and repeat on the Spotify player: lit while on. */
.sp-mode { color: var(--muted); }
.sp-mode.on { color: #1ed760; }
/* A phone: the five transport buttons take the row. The device chip above
   moves playback, and Spotify's own app opens a song. */
@media (max-width: 479px) {
  .sp-hero .np-controls { grid-template-columns: minmax(0, 1fr); }
  .sp-hero .np-controls .np-side, .sp-hero .np-controls .sp-open { display: none; }
}

/* Spotify on the Desk's Music card. */
.sp-desk { min-width: 0; }
.sp-now {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  margin-top: 12px; padding: 10px; border-radius: var(--r-sm); background: color-mix(in srgb, #1ed760 8%, var(--bg-2));
  border: 1px solid color-mix(in srgb, #1ed760 25%, var(--line));
}
.sp-now[hidden] { display: none; }
.sp-ctrls { display: flex; gap: 6px; }
.sp-where {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; min-height: 0; border: 0; background: none;
  color: #1ed760; font-size: 12.5px; max-width: 100%;
}
.sp-where .icon { display: grid; }
@media (pointer: coarse) { .sp-where { min-height: 44px; } }
.sp-vol-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sp-vol-row .icon { display: grid; }
.sp-vol { flex: 1 1 auto; accent-color: #1ed760; min-width: 0; }
@media (max-width: 420px) {
  .sp-now { grid-template-columns: auto minmax(0, 1fr); }
  .sp-ctrls { grid-column: 1 / -1; justify-content: center; }
}

.sp-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.sp-redirect { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.sp-redirect code {
  overflow-wrap: anywhere; min-width: 0; background: var(--bg-2); padding: 6px 8px; border-radius: 6px; font-size: 12.5px;
}

/* ---------- reduced motion: opacity only, and short ---------- */

@media (prefers-reduced-motion: reduce) {
  .np-tint, .np-art-img { transition: opacity .12s linear; }
  .rise { animation: np-fade .12s linear; }
  .np-fill, .dock-prog i { transition: none; }
  .np-track, .radio-fav-art, .full-drawer, .full-drawer-chev { transition: none; }
  .np-bar.drag .np-track { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .np-bar:hover .np-track, .radio-fav:hover .radio-fav-art { transform: none; }
}
  .np-state.live .np-state-dot, .np-play.loading .np-spin { animation: none; }
  .np-state.behind { animation: np-fade .12s linear; }
  .radio-live-dot, .radio-live-badge i { animation: none; }
  .np-play.loading .np-spin { opacity: .8; }
  .sxm-full, .sxm-full.open, .dock { transform: none; transition: opacity .12s linear; }
  body.desk-music-seen[data-tab="desk"] .dock { transform: none; transition: opacity .12s linear, visibility 0s .12s; }
}
@keyframes np-fade { from { opacity: 0; } }