/* [02] music · the SLYVREN player. Its tokens point at the site theme (assets/css/themes/). */
.sp {
  --sp-void: var(--bg);
  --sp-panel: var(--bg-2);
  --sp-screen: var(--bg-3);
  --sp-line: var(--line-2);
  --sp-line-hi: var(--line);
  --sp-text: var(--text);
  --sp-sub: var(--text-3);
  --sp-dim: var(--text-5);
  --sp-bright: var(--title);
  --sp-accent: var(--accent);
  --sp-video: var(--sky);
  --sp-clip: var(--warm);
  --sp-alert: var(--alert);
  --sp-glitch: var(--cyan);
  --sp-idle: var(--dim);           /* the strip under the screen while paused */
  --sp-ink: var(--accent-ink);      /* icon on the big play button */
  --sp-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sp-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--sp-line);
  background: var(--sp-panel);
  color: var(--sp-text);
  font-family: var(--sp-mono);
  }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button { font-family: inherit; }
.sp :focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* deck */
.sp-deck { display: flex; flex-direction: column; gap: 20px; padding: 26px; border-right: 1px solid var(--sp-line); min-width: 0; }
.sp-screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--sp-screen); border: 1px solid var(--sp-line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sp-screen canvas.sp-viz, .sp-screen .sp-art, .sp-screen video, .sp-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-screen .sp-art { object-fit: cover; filter: saturate(.85) brightness(.82); }
.sp-screen video { object-fit: contain; background: #000; }
.sp-static { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .03;
  background: url(/assets/img/noise.png) 0 0 / 192px 192px; animation: sp-static .1s steps(1) infinite; }
@keyframes sp-static { 0% { background-position: 0 0; } 25% { background-position: -61px 37px; } 50% { background-position: 83px -29px; } 75% { background-position: -17px -91px; } }
.sp-screen canvas.sp-scope { position: absolute; left: 4px; right: 4px; top: 50%; width: calc(100% - 8px); height: auto; transform: translateY(-50%); color: var(--sp-accent); opacity: .7; }
.sp-tag { position: absolute; left: 14px; top: 12px; z-index: 3; font-size: 11px; letter-spacing: .22em; color: var(--sp-dim); text-transform: uppercase; }
.sp-notice { position: relative; z-index: 4; background: var(--sp-screen) !important; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 22px; max-width: calc(100% - 32px); background: rgba(5,5,10,.82); border: 1px solid var(--sp-line-hi); text-align: center; }
.sp-notice b { font-weight: 400; font-size: 13px; letter-spacing: .3em; color: var(--sp-alert); animation: sp-glitch 5s steps(1) infinite; }
.sp-notice span { font-size: 12px; letter-spacing: .22em; color: var(--sp-dim); text-transform: uppercase; }
@keyframes sp-glitch {
  0%, 88%, 100% { transform: none; text-shadow: none; opacity: 1; }
  89% { transform: translateX(-7px); text-shadow: 3px 0 var(--sp-glitch), -3px 0 var(--sp-alert); opacity: .6; }
  90% { transform: translateX(5px); }
  91% { transform: translateX(-2px); text-shadow: -2px 0 var(--sp-glitch); }
  92% { transform: none; text-shadow: none; opacity: 1; }
}
/* audio with a cover: the scope across the screen, the cover centred on top */
.sp-screen .sp-cover { position: absolute; left: 50%; top: 50%; z-index: 4; height: 84%; width: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transform: translate(-50%, -50%); border: 1px solid var(--sp-line); box-shadow: 0 0 0 6px var(--sp-screen), 0 14px 30px rgba(0, 0, 0, .45); }
.sp-screen.has-art .sp-tag { display: none; }
/* videos and YouTube: nothing drawn over the picture */
.sp-screen.is-video .sp-tag, .sp-screen.is-video .sp-static, .sp-screen.is-video .sp-notice { display: none; }
.sp-yt-out { position: absolute; right: 10px; bottom: 10px; z-index: 3; font-size: 12px; letter-spacing: .14em; color: var(--sp-video); background: rgba(5,5,10,.85); padding: 6px 10px; border: 1px solid var(--sp-line-hi); text-decoration: none; }
.sp-yt-out:hover { color: var(--sp-bright); }

.sp-now { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.sp-now > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-kicker { font-size: 12px; letter-spacing: .22em; color: var(--sp-dim); text-transform: uppercase; }
.sp-title { font-family: var(--sp-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: .04em; color: var(--player-title, var(--sp-bright)); overflow-wrap: anywhere; }
.sp-meta { font-size: 14px; color: var(--sp-sub); }
.sp-time { font-size: 14px; color: var(--sp-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sp-wave { width: 100%; height: 60px; display: block; }

.sp-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-line-hi); background: transparent; color: var(--sp-text); cursor: pointer; }
.sp-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-btn.sp-play { width: 64px; height: 64px; background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-ink); }
.sp-btn.sp-play:hover { background: var(--sp-bright); border-color: var(--sp-bright); color: var(--sp-ink); }
.sp-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sp-btn.sp-play svg { width: 22px; height: 22px; }
.sp-seek { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.sp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
.sp-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--sp-accent) 0 var(--fill, 0%), var(--sp-line) var(--fill, 0%) 100%); }
.sp-range::-moz-range-track { height: 2px; background: var(--sp-line); }
.sp-range::-moz-range-progress { height: 2px; background: var(--sp-accent); }
.sp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--sp-bright); border: 0; border-radius: 0; }
.sp-range::-moz-range-thumb { width: 12px; height: 12px; background: var(--sp-bright); border: 0; border-radius: 0; }
.sp-seek-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--sp-dim); font-variant-numeric: tabular-nums; }
.sp-vol { display: flex; align-items: center; gap: 8px; width: 130px; color: var(--sp-dim); }
.sp-vol svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* queue */
.sp-queue { display: flex; flex-direction: column; min-width: 0; }
.sp-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 12px 0; border-bottom: 1px solid var(--sp-line); }
.sp-tab { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--sp-dim); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.sp-tab:hover { color: var(--sp-text); }
.sp-tab[aria-selected="true"] { color: var(--sp-accent); border-bottom-color: var(--sp-accent); }
.sp-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 560px; }
.sp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line-3); background: transparent; color: var(--text-2); text-align: left; cursor: pointer; }
.sp-list li:first-child .sp-row { border-top: 0; }
.sp-row:hover { background: var(--bg-5); }
.sp-row[aria-current="true"] { background: var(--bg-5); color: var(--sp-bright); }
.sp-row[aria-current="true"] .sp-n { color: var(--sp-accent); }
.sp-n { font-size: 13px; color: var(--text-6); font-variant-numeric: tabular-nums; }
.sp-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-row-t b { font-weight: 400; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-t span { font-size: 12px; color: var(--sp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-d { font-size: 12px; color: var(--sp-dim); font-variant-numeric: tabular-nums; }
.sp-badge { font-size: 11px; letter-spacing: .16em; padding: 3px 7px; border: 1px solid var(--line); color: var(--sp-sub); }
.sp-badge.v { border-color: var(--sp-video); color: var(--sp-video); }
.sp-badge.y { border-color: var(--sp-alert); color: var(--sp-alert); }
.sp-badge.c { border-color: var(--sp-clip); color: var(--sp-clip); }
.sp-eq { display: none; gap: 2px; align-items: end; height: 12px; }
.sp-row[aria-current="true"].is-playing .sp-eq { display: inline-flex; }
.sp-n { display: inline-flex; align-items: center; gap: 4px; }   /* the number stays; the bars play beside it */
.sp-eq i { width: 3px; background: var(--sp-accent); animation: sp-eq .9s ease-in-out infinite alternate; }
.sp-eq i:nth-child(2) { animation-delay: -.3s; } .sp-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes sp-eq { from { height: 3px; } to { height: 12px; } }
.sp-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--sp-line); font-size: 12px; letter-spacing: .14em; color: var(--sp-dim); text-transform: uppercase; }

@media (max-width: 600px) {          /* phones: the buttons on one row, then the seek bar with repeat beside it (never wrapped under), then volume */
  .sp-controls { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 14px; }
  .sp-controls > .sp-seek { grid-row: 2; grid-column: 1 / 5; min-width: 0; }
  .sp-controls > .sp-rep { grid-row: 2; grid-column: 5; }
  .sp-controls > .sp-vol { grid-row: 3; grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .sp { grid-template-columns: minmax(0, 1fr); }
  .sp-deck { border-right: 0; border-bottom: 1px solid var(--sp-line); padding: 18px; }
  .sp-vol { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { animation: none !important; }
}
@media (max-width: 520px) {
  .sp-notice { padding: 10px 12px; gap: 6px; }
  .sp-notice b { font-size: 11px; letter-spacing: .16em; }
  .sp-notice span { font-size: 10px; letter-spacing: .14em; }
  .sp-tag { font-size: 10px; }
}

/* the section around the player */
.mu { padding-top: 140px; }
.mu-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.mu-band { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mu-word { display: block; width: 260px; aspect-ratio: 1100 / 288; background: var(--text); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.mu-box { position: relative; margin-top: 44px; }
@media (max-width: 600px) { .mu-word { width: 200px; } }

/* repeat: playlist (lit) · this track (lit, with a 1) · off (dim) */
.sp-btn.sp-rep { position: relative; width: 40px; height: 40px; background: var(--bg-5); border-color: var(--sp-line-hi); color: var(--text-2); }   /* on: a playlist row under the mouse */
.sp-btn.sp-rep:hover { background: var(--bg-5); border-color: var(--sp-accent); color: var(--sp-accent); }   /*   hovered: outline and icon in the accent, like every player button */
.sp-btn.sp-rep svg { width: 18px; height: 18px; }
.sp-btn.sp-rep[data-mode="off"] { background: transparent; border-color: var(--sp-line-hi); color: var(--sp-dim); }
.sp-btn.sp-rep[data-mode="off"]:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-rep1 { display: none; position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%;   /* repeat-one: a 1 in an accent dot */
  background: var(--sp-accent); color: var(--sp-ink); font: 700 9px/13px var(--sp-mono, monospace); font-style: normal; text-align: center; }
.sp-btn.sp-rep[data-mode="one"] .sp-rep1 { display: block; }
.sp-wave[hidden] { display: none; }
.sp-btn.sp-rep[data-mode="one"] svg { transform: translate(-2px, -2px); }   /* room for the 1 */