/* ─── MUSIC DOMAIN ───────────────────────────────────────────── */
.music-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  padding-top: var(--nav-h);
}

/* Atmospheric background — same system as Photos'/Movies' own (.photos-bg
   /.movies-bg): fixed, blurred/dimmed backdrop, custom property rather
   than a hardcoded background-image. Legibility over it comes from the
   header text-shadow below, same approach as the other two pages. */
:root {
  --music-bg-image: url('/assets/backgrounds/music.jpg');
}

.music-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--music-bg-image);
  background-size: cover;
  background-position: center;
  filter: blur(0.5px) brightness(0.55) saturate(1.05);
  transform: scale(1.02);
}

.music-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,14,0.25), rgba(6,6,10,0.42));
}

/* Both themes stay dark enough for the always-white control/list text
   below to read clearly — this page is deliberately image-forward (per
   the visual reference), unlike Photos/Movies which keep card-boxed
   content and can afford a lighter backdrop in light theme. */
[data-theme="light"] .music-bg { filter: blur(0.5px) brightness(0.65) saturate(1); }
[data-theme="light"] .music-bg::after { background: linear-gradient(180deg, rgba(10,9,14,0.3), rgba(6,6,10,0.44)); }

/* ─── LEFT: Upload + player controls — no boxed card, sits directly on
   the background per the visual reference. Always light text/icons
   (not theme-variable colors) since this column always overlays the
   same dark image regardless of site theme, same reasoning the Photos
   viewer already uses for its own always-dark surface. ────────────── */
.music-side {
  /* Stays visible while the (often long) library scrolls — the sidebar
     sticks within its own grid cell, which is as tall as the library
     next to it, so this holds for the whole list, not just near the
     top. Desktop only: overridden back to normal flow on mobile below,
     where the stacked single-column layout would otherwise make the
     sticky sidebar overlap the list scrolling underneath it. */
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 2rem 0 1.5rem 6%;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* Upload Music tile — matches the Movies Upload card's visual style
   exactly (same values, mirrored under Music-scoped class names so the
   two pages stay independent). Functionality is untouched: this only
   restyles the existing #uploadTile button, still bound by the same
   click handler in music.js. */
.music-tile {
  position: relative;
  width: 56%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-md);
  border: 1.5px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.music-tile:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}

.music-tile-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-tile-upload {
  background: linear-gradient(155deg, #3b7dd8, #2c5fa8);
  border-color: rgba(255,255,255,0.25);
}

.music-ctrl-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  touch-action: manipulation;
}

.music-ctrl-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  /* #muteBtn is a <button class="music-ctrl-icon"> now (was a plain
     <span>) so it's a real click target — padding:0 keeps it visually
     identical to the span it replaced; base.css's global button reset
     (border:none;background:none) already covers the rest. */
  padding: 0;
  touch-action: manipulation;
}

.music-ctrl-icon-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  transition: background var(--transition), border-color var(--transition);
}

.music-ctrl-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.music-ctrl-row:hover { color: #fff; }
.music-ctrl-row:hover .music-ctrl-icon-ring { background: rgba(255,255,255,0.12); }
.music-ctrl-row.active .music-ctrl-icon-ring,
.music-ctrl-row.active { color: var(--accent); }
.music-ctrl-row.active .music-ctrl-icon-ring { border-color: var(--accent); background: rgba(255,255,255,0.08); }

.music-upload-row { margin-bottom: 0.4rem; }
.music-upload-row .music-ctrl-label { text-transform: none; letter-spacing: -0.01em; font-size: 0.85rem; }

.music-player {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.music-now-playing {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -0.6rem;
}

.music-progress-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.music-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  touch-action: none;
}

.music-progress-bar:hover { height: 6px; }

.music-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: #fff;
}

.music-progress-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-variant-numeric: tabular-nums;
}

.music-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.music-volume-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.music-volume-row-label { gap: 0.7rem; cursor: default; }

.music-volume-slider {
  flex: 1;
  max-width: 130px;
  accent-color: #fff;
  cursor: pointer;
}

.music-volume-caption {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  padding-left: calc(22px + 0.85rem);
}

/* ─── CENTER: Library ─────────────────────────────────────────── */
.music-main {
  padding: 1.5rem 5% 2.5rem 0;
  min-width: 0;
}

.music-header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.4rem;
}

.music-header-icon {
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.15rem;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

.music-header h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.35);
}

.music-count {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.3);
}

.music-state {
  padding: 3rem 1rem;
  text-align: center;
  color: rgba(255,255,255,0.6);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-size: 0.85rem;
}

/* Compact list — not cards, built for hundreds of rows. */
/* No boxed card — rows sit directly on the shared background, per the
   visual reference. A subtle per-row divider (not a container border)
   keeps a large list scannable. */
.music-list {
  display: flex;
  flex-direction: column;
}

.music-row {
  position: relative; /* anchors the ⋮ menu popover */
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background var(--transition);
}
.music-row:hover { background: rgba(255,255,255,0.06); }
.music-row.active { background: rgba(255,255,255,0.1); }

.music-row-art {
  width: 48px; height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}

.music-row-art-placeholder {
  width: 48px; height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A plain author-origin `display` declaration on either element above
   otherwise always beats the browser's built-in [hidden]{display:none}
   rule regardless of specificity, since that UA-origin rule is
   outranked by any normal-weight author rule. Explicit [hidden]
   overrides restore real hiding for both the artwork image and its
   fallback placeholder. */
.music-row-art[hidden],
.music-row-art-placeholder[hidden] {
  display: none;
}

.music-row-text {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.music-row-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-row-artist {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.62);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-row-duration {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  flex-shrink: 0;
  padding-left: 0.5rem;
}

/* Per-row ⋮ menu — deliberately not a permanent trash icon on the row
   (too easy to hit by accident, especially on mobile). Compact button,
   comfortable tap target; the popover itself is reused for both the
   Delete menu item and, in place, the Cancel/Delete confirmation. */
.music-row-menu-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 0.2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.music-row-menu-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.music-row-menu {
  position: absolute;
  top: calc(100% - 0.3rem);
  right: 0.4rem;
  z-index: 20;
  min-width: 160px;
  background: #24242c;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 0.4rem;
  cursor: default;
}
.music-row-menu[hidden] { display: none; }

.music-row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: #fff;
  font-size: 0.82rem;
  cursor: pointer;
}
.music-row-menu-item:hover { background: rgba(255,255,255,0.1); }

.music-row-menu-prompt {
  padding: 0.4rem 0.5rem 0.6rem;
  font-size: 0.8rem;
  color: #fff;
  line-height: 1.35;
}
.music-row-menu-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.3rem 0.2rem;
}
.music-row-menu-cancel,
.music-row-menu-confirm {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.music-row-menu-cancel {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.music-row-menu-cancel:hover { background: rgba(255,255,255,0.16); }
.music-row-menu-confirm {
  background: #d64545;
  color: #fff;
}
.music-row-menu-confirm:hover { background: #e05555; }

/* ─── FOOTER (same pattern as Home/Photos/Movies) ────────────── */
.principles-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  padding: 1.5rem 5%;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.principle-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.principle-item svg { flex-shrink: 0; opacity: 0.7; }

@media (max-width: 700px) {
  .principle-item { font-size: 0.66rem; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Split-pane layout: LEFT = stationary player controls, RIGHT =
     independently scrolling playlist (up to hundreds of tracks). The
     page itself is bounded to the viewport height below the wrapped
     mobile navbar and never scrolls — only .music-main scrolls
     internally, so the left column never moves. Upload Music stays in
     its own full-width row above the split, in the same visual position
     it already had; .music-side is unwrapped via display:contents so
     its children (uploadTile, .music-player) can be placed independently
     in this grid without any HTML change.

     html/body must also be pinned to the viewport here: .principles-strip
     (the footer) is a sibling of .music-page, not a child of it, so
     without this, its extra height below the viewport-height page still
     makes body itself scrollable by a few dozen pixels — enough for a
     touch-scroll gesture anywhere on the page to move the whole document
     instead of the intended internal list, since that stray scroll
     capture wins over .music-main's own. Scoped safely: music.css is
     only ever loaded by music.html, so this can't affect other pages. */
  html, body { overflow: hidden; height: 100%; overscroll-behavior-x: none; }
  .principles-strip { display: none; }

  .music-page {
    grid-template-columns: 108px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 0.6rem;
    row-gap: 0;
    height: 100vh;
    padding-top: 5.5rem;
    overflow: hidden;
  }

  .music-side {
    display: contents;
  }

  /* Compact Upload button confined to the left column only (not
     spanning the playlist) — narrower AND shorter than the earlier
     full-width bar, same blue tile style/icon/text, just much smaller
     so it sits naturally above the player controls. */
  .music-tile {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin: 0.6rem 0.4rem 0.5rem;
    flex: none;
    aspect-ratio: auto;
    flex-direction: column;
    padding: 0.45rem 0.3rem;
    font-size: 0.55rem;
    gap: 0.3rem;
  }
  .music-tile-icon { width: 20px; height: 20px; }

  /* The stationary left column. overflow-y:auto is a safety net for
     unusually short viewports — normal phone heights fit all of this
     without ever needing to scroll. */
  .music-player {
    grid-column: 1;
    grid-row: 2;
    min-width: 0; /* grid items default to a content-based min-width floor that would otherwise let this overflow its 108px track */
    overflow-x: hidden; /* setting only overflow-y left overflow-x at its CSS-spec-mandated auto-computed "auto" — genuinely scrollable given the volume row's real overflow below, which is what made the whole column horizontally draggable */
    overflow-y: auto;
    align-items: stretch;
    gap: 0.8rem;
    padding: 0.4rem 0.3rem 1rem;
  }
  /* Now Playing (+ its progress bar) moved to the very end of the
     column, after Volume — order only, DOM/HTML unchanged, so desktop
     (which never applies this media query) keeps its original order. */
  .music-now-playing {
    order: 10;
    text-align: center;
    margin-top: 0;
    font-size: 0.6rem;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .music-progress-block { order: 10; }

  /* One control per row, same order as desktop (Play/Pause, Stop, Next,
     Previous, Shuffle, Repeat, Volume) — just narrower and icon-only to
     fit the stationary column. */
  .music-ctrl-group {
    flex-direction: column;
    gap: 0.6rem;
  }
  /* Tighten vertical spacing among Next/Previous/Shuffle/Repeat only —
     these are the 4th and 5th children of .music-player (after
     nowPlaying, progress-block, the Play/Pause+Stop group), so this
     doesn't touch the gap around Play/Pause, Stop, or Volume. The
     negative margin pulls the Shuffle/Repeat group closer to the
     Next/Previous group without changing .music-player's own uniform
     gap (which still governs the untouched Stop→Next and Repeat→Volume
     spacing). Volume moves up as a natural side effect. */
  .music-player > .music-ctrl-group:nth-child(4),
  .music-player > .music-ctrl-group:nth-child(5) {
    gap: 0.4rem;
  }
  .music-player > .music-ctrl-group:nth-child(5) {
    margin-top: -0.2rem;
  }
  .music-ctrl-row { justify-content: center; }
  .music-ctrl-icon, .music-ctrl-icon-ring { width: 40px; height: 40px; }
  .music-ctrl-group .music-ctrl-label { display: none; }
  .music-volume-block { align-items: center; }
  /* Root cause of the overflow: this row's own icon+gap+slider content
     (125px measured) is wider than the 108px column, and — being a flex
     row itself — defaults to a content-based min-width floor that let it
     force that width regardless of its parent, the same category of bug
     already fixed for .music-player against .music-page in an earlier
     task. min-width:0 makes it respect the column; the icon is sized
     down specifically for this row only (it's a small label icon next
     to the actual slider control, not a tappable button, so it doesn't
     need to match the transport buttons' larger size) so the slider has
     room to stay a real, usable width. */
  .music-volume-row-label {
    justify-content: center;
    min-width: 0;
    /* .music-ctrl-row (shared with the transport buttons) sets
       touch-action:manipulation on this row. Per spec, a touch gesture's
       effective touch-action is the intersection of the target and all
       its ancestors, so that restriction can reach the nested native
       <input type="range"> even though the input itself declares
       touch-action:auto — a known real-device (particularly mobile
       Safari) cause of a native slider's drag gesture not registering,
       even when taps on sibling buttons work fine. Restoring auto here
       only for this one row (not .music-ctrl-row generally, so the
       transport buttons keep their tap-optimized behavior). */
    touch-action: auto;
  }
  .music-volume-row-label .music-ctrl-icon { width: 20px; height: 20px; }
  .music-volume-slider {
    max-width: 58px;
    min-width: 0;
    touch-action: auto;
    /* Taller interactive box for a more reliable real-finger touch
       target — native range inputs hit-test their full layout box, not
       just the thin visual track, so this doesn't make the track itself
       look thicker, only easier to actually grab. */
    height: 28px;
  }
  .music-volume-caption { padding-left: 0; font-size: 0.6rem; }

  /* The independently scrolling right column — the playlist. Spans both
     rows (not just row 2) since Upload no longer spans the full width
     above it — the playlist now runs the full height on the right. */
  .music-main {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 4% 1.5rem;
  }

  /* Same reasoning as Photos/Movies: the shared navbar hides its center
     nav below 900px, but here it holds the Photos/Movies/Music/Books
     domains, so it needs to stay visible. */
  .navbar { flex-wrap: wrap; height: auto; padding: 0.55rem 4%; row-gap: 0.4rem; }
  .navbar-nav {
    display: flex;
    position: static;
    left: auto;
    transform: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
    gap: 0.3rem;
  }
  .navbar-nav .nav-item { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .music-row-art, .music-row-art-placeholder { width: 38px; height: 38px; }
  .music-row-title { font-size: 0.78rem; }
  .music-row-artist { font-size: 0.68rem; }
  .music-ctrl-icon-ring { width: 34px; height: 34px; }
}