/* Waveform — page layout only. Component styling comes from dssoca (theme.css + vanilla.css). */

:root {
  /* Player bar height: one control row + one range row + padding, so it tracks the size axis. */
  --music-player-h: calc(var(--ss-control-font) + var(--ss-control-py) * 2 + var(--ss-s-12));
  --music-cover: clamp(140px, 18vw, 232px);
}

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-fg);
  padding-bottom: var(--music-player-h);
}

.music-defs {
  position: absolute;
}

.music-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- shell: sidebar | main ---------- */
.music-shell {
  display: grid;
  grid-template-columns: var(--ss-side-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--music-player-h));
}

.music-shell > .ss-side {
  position: sticky;
  top: 0;
  height: calc(100vh - var(--music-player-h));
  overflow-y: auto;
  box-sizing: border-box;
}

.music-brand {
  display: flex;
  align-items: center;
  gap: var(--ss-s-2);
  padding: var(--ss-s-2) var(--ss-row-px) var(--ss-s-4);
  font-family: var(--ss-font-display);
  font-size: var(--ss-ui-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.music-brand-mark {
  width: var(--ss-icon);
  height: var(--ss-icon);
  flex: none;
}

.music-side-actions {
  padding: var(--ss-s-1) var(--ss-s-2);
}

.music-side-foot {
  margin-top: auto;
  padding: var(--ss-s-3) var(--ss-s-2) 0;
  border-top: 1px solid var(--ss-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-gap-sm);
}

.music-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.music-main > main {
  flex: 1 1 auto;
}

.music-main > .ss-footer {
  margin: var(--ss-block-gap) var(--ss-main-px) var(--ss-s-4);
}

/* ---------- hero ---------- */
.music-hero {
  display: grid;
  grid-template-columns: var(--music-cover) minmax(0, 1fr);
  gap: var(--ss-gap);
  align-items: end;
  padding: var(--ss-main-py) var(--ss-main-px) var(--ss-s-6);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ss-magenta) 26%, var(--ss-bg)) 0%,
    color-mix(in oklab, var(--ss-blue) 10%, var(--ss-bg)) 70%,
    var(--ss-bg) 100%
  );
}

.music-hero-cover {
  width: var(--music-cover);
  height: var(--music-cover);
  display: block;
  box-shadow: var(--ss-shadow-pop);
}

.music-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ss-s-2);
}

.music-eyebrow {
  margin: 0;
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ss-fg-muted);
}

.music-title {
  margin: 0;
  font-family: var(--ss-font-display);
  font-size: var(--ss-size-display);
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.music-desc {
  margin: 0;
  max-width: 60ch;
  color: var(--ss-fg-muted);
  font-size: var(--ss-size-sm);
}

.music-stats {
  margin: var(--ss-s-1) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ss-s-2);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-md);
}

.music-stats-sep {
  color: var(--ss-fg-faint);
}

/* ---------- action row ---------- */
.music-actions {
  display: flex;
  align-items: center;
  gap: var(--ss-gap-sm);
  padding: 0 var(--ss-main-px) var(--ss-s-5);
}

.music-actions-note {
  margin-left: auto;
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-sm);
  color: var(--ss-fg-faint);
}

.music-actions-note strong {
  color: var(--ss-fg-muted);
  font-weight: 500;
}

/* ---------- track list ---------- */
.music-tracks {
  padding: 0 var(--ss-main-px);
  overflow-x: auto;
}

.music-track {
  display: flex;
  align-items: center;
  gap: var(--ss-gap-sm);
  min-width: 0;
}

.music-thumb {
  width: var(--ss-s-10);
  height: var(--ss-s-10);
  flex: none;
  display: block;
}

.music-track-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-track-title {
  font-size: var(--ss-ui-md);
  color: var(--ss-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-track-artist {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-xs);
  color: var(--ss-fg-muted);
}

.music-playing .music-track-title {
  color: var(--ss-primary);
}

.music-num {
  font-variant-numeric: tabular-nums;
  color: var(--ss-fg-muted);
}

.music-num[hidden],
.music-eq[hidden] {
  display: none;
}

/* ---------- player bar ---------- */
.music-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  box-sizing: border-box;
  min-height: var(--music-player-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--ss-gap);
  padding: var(--ss-s-3) var(--ss-main-px);
  background: var(--ss-bg-elev);
  border-top: 1px solid var(--ss-line);
}

.music-now {
  display: flex;
  align-items: center;
  gap: var(--ss-gap-sm);
  min-width: 0;
}

.music-now-cover {
  width: var(--ss-s-12);
  height: var(--ss-s-12);
  flex: none;
  display: block;
}

.music-now-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-now-title {
  font-size: var(--ss-ui-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-now-artist {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-xs);
  color: var(--ss-fg-muted);
}

.music-transport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ss-s-2);
  min-width: 0;
}

.music-transport-row {
  display: flex;
  align-items: center;
  gap: var(--ss-gap-xs);
}

.music-progress {
  display: flex;
  align-items: center;
  gap: var(--ss-gap-sm);
  width: 100%;
  max-width: 640px;
}

.music-time {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ss-fg-muted);
  min-width: 4ch;
  text-align: center;
}

.music-volume {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ss-gap-sm);
  min-width: 0;
}

.music-volume-icon {
  color: var(--ss-fg-muted);
  flex: none;
}

.music-volume .music-range {
  max-width: 140px;
}

/* Range inputs: a token-driven track with a square thumb (Chromium honours the square;
   Firefox keeps its UA thumb shape since the page never writes a radius). */
.music-range {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--ss-primary) var(--music-fill, 0%),
    var(--ss-line-strong) var(--music-fill, 0%)
  );
}

.music-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--ss-fg);
  border: 0;
}

.music-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--ss-fg);
  border: 0;
}

.music-range:focus-visible {
  outline: 2px solid var(--ss-primary);
  outline-offset: 4px;
}

/* ---------- responsive ---------- */
.music-bottom-nav {
  display: none;
}

@media (max-width: 1000px) {
  .music-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .music-volume {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --music-cover: 140px;
  }
  body {
    padding-bottom: calc(var(--music-player-h) + max(var(--ss-shell-top-h), 44px));
  }
  .music-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .music-shell > .ss-side {
    display: none;
  }
  .music-bottom-nav {
    display: block;
  }
  .music-player {
    bottom: calc(max(var(--ss-shell-top-h), 44px) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ss-gap-sm);
    padding-left: var(--ss-s-3);
    padding-right: var(--ss-s-3);
  }
  .music-transport {
    align-items: flex-end;
  }
  .music-progress {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    max-width: none;
  }
  .music-progress .music-time {
    display: none;
  }
  .music-transport-row [data-shuffle],
  #music-repeat {
    display: none;
  }
  .music-tracks [data-col='album'],
  .music-tracks [data-col='added'] {
    display: none;
  }
  .music-actions {
    flex-wrap: wrap;
  }
  .music-actions-note {
    display: none;
  }
}

@media (max-width: 520px) {
  .music-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .music-title {
    font-size: var(--ss-size-h1);
  }
}

/* The playlist menu hangs off an icon-only trigger; give its panel a readable width. */
.music-actions .ss-menu {
  --ss-menu-min-w: calc(var(--ss-s-16) * 3.5);
}