/* ===========================
   utils
   =========================== */
[hidden]{display:none!important;}
.hidden{display:none!important;}

/* Keep normal flow under hero */
section.bucket-hero{ position:relative; }

/* The music section should not force a stacking context */
#music.music-player{
  position:relative;
  inset:auto;
  clear:both;
  display:flow-root;
  contain: layout paint;
  z-index:auto !important;
}

/* ===========================
   MUSIC PLAYER WRAPPER
   =========================== */
.music-player{
  margin-top: clamp(24px, 8vh, 120px);
  margin-bottom: 10vh;
  padding: 0 8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.music-shell{
  width:100%;
  margin:0 auto;
  border-radius:28px;
  position:relative;
  background: radial-gradient(120% 120% at 60% 20%, rgba(255,255,255,.04), rgba(0,0,0,.45));
  border:1px solid var(--color-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  height: clamp(560px, 72vh, 860px);
  padding:2.25rem 2rem 1.25rem;
  overflow:hidden;                 /* contain internals */
}
@media (min-width:1024px){ .music-shell{ width:75%; } }

.page-header{ text-align:center; margin-bottom: 2rem; }

/* ===========================
   VIEW SWITCH
   =========================== */
.mode-lights{
  position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; align-items:center; z-index:2;
}
.mode-lights .light{
  width:12px; height:12px; border-radius:999px; border:0; cursor:pointer;
  background: radial-gradient(circle at 35% 35%, #7ab8ff 10%, #1f6fff 70%, #0036e8 100%);
  box-shadow: 0 0 10px rgba(47,132,255,.9), 0 0 18px rgba(47,132,255,.5);
  opacity:.65; transition:opacity .2s ease, transform .08s ease;
}
.mode-lights .light.on{ opacity:1; }
.mode-lights .light:active{ transform:scale(.92); }
.mode-lights .hint{
  position:absolute; top:1.6rem; left:50%; transform:translateX(-50%);
  padding:.35rem .6rem; font-size:.72rem; border-radius:10px;
  background: rgba(255,255,255,.12); color: var(--color-primary);
  border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mode-lights:hover .hint{ opacity:1; }

/* ===========================
   LAYERS (z-index order)
   =========================== */
.views-wrap{
  flex:1; overflow:auto; padding-top:.25rem; position:relative;
  overflow-x:hidden;                 /* prevent horiz scroll on mobile */
}
.views-wrap.no-scroll{ overflow:hidden; }

/* aurora behind album art, above list */
.aurora-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; opacity:1;
}
.aurora-layer canvas{ width:100%; height:100%; display:block; }

.track-stage .stage-art-wrap{ z-index:2; position:relative; }
/* player bar at top of stack within shell */
.player-bar{ position:relative; z-index:3; }

/* ===========================
   LIST VIEW
   =========================== */
.albums-view{ display:grid; gap:1.5rem; }
.album-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:1rem;
  background: rgba(255,255,255,.03);
  border:1px solid var(--color-border);
  border-radius:18px; padding:1rem;
}
.album-art-col{ width:100%; }
.album-art{
  width:120px; height:120px;
  border-radius:12px; object-fit:cover;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.playlist-col{ display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.playlist-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.playlist-head h3{ margin:0; font-size:1.1rem; }
.icon-btn.play-all{
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--icon-color);               /* same icon color logic */
  backdrop-filter: blur(6px);
}
.track-list{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.track-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:.45rem .6rem; border-radius:10px; transition:background .2s ease;
}
.track-row:hover{ background: rgba(255,255,255,.05); }
.track-row.active .t-title{ font-weight:700; }
.t-title{ text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-time{ text-align:right; opacity:.82; min-width:3.2rem; }

/* ---------- MOBILE fixes (no horizontal scroll; comfy layout) ---------- */
@media (max-width:720px){
  .music-player{ padding: 0 4vw; }
  .music-shell{ padding:1rem .9rem .9rem; height:auto; }
  .albums-view{ gap:1rem; }

  /* shrink left column and make art fit column */
  .album-row{
    grid-template-columns: min(28vw, 108px) 1fr;
    padding:.75rem;
    gap:.75rem;
  }
  .album-art{
    width:100%; height:auto; aspect-ratio:1/1; /* no overflow */
  }

  .playlist-head h3{ font-size:1rem; }
  .track-row{ padding:.4rem .5rem; }
  .t-title{ font-size:.95rem; }
}

/* ===========================
   TRACK VIEW (art only)
   =========================== */
.music-shell.track-bg{
  background: var(--stage-bg, radial-gradient(120% 140% at 50% 25%, rgba(0,0,0,.36), rgba(0,0,0,.9)));
}
.track-view{ border-radius:22px; padding:2rem 1.25rem; }
.track-stage{
  display:grid; justify-items:center; align-items:start; z-index:2; position:relative;
}
.stage-art-wrap{
  width:min(42%, 440px); aspect-ratio:1/1; border-radius:18px;
  box-shadow:0 14px 32px rgba(0,0,0,.32);
}
#stage-art{ width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; }

/* Center + scale art on mobile */
@media (max-width:720px){
  .track-view{ padding:1.25rem .75rem; }
  .track-stage{ align-items:center; }
  .stage-art-wrap{
    width:min(84vw, 420px);
    margin: 0 auto;                 /* centered within app window */
  }
}

/* Keep art above list within the shell only */
.music-shell.track-bg .views-wrap{ z-index: 1; }
.music-shell.track-bg .track-view .stage-art-wrap{
  position: relative;
  z-index: 3;
  pointer-events: none;
}

/* ===========================
   PLAYER BAR (base)
   =========================== */
.player-bar{
  margin-top:1rem;
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  padding:.85rem 1rem; border-radius:16px; border:1px solid var(--glass-border);
  background: var(--glass-bg); backdrop-filter: blur(10px);
}
@media (min-width:760px){ .player-bar{ grid-template-columns:auto auto 1fr; } }

.now{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:center; min-width:0; }
.now-art{ width:40px; height:40px; border-radius:8px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.now-meta{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.now-meta small{ opacity:.75; }

/* Controls + buttons */
.controls{ display:flex; gap:.5rem; align-items:center; }
.icon-btn{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  border:1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--icon-color);                        /* ← theme drives this */
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
  line-height:0;
}
.icon-btn:hover{ border-color: rgba(0,110,255,.5); box-shadow: 0 0 12px rgba(47,132,255,.35); }
.icon-btn:active{ transform:scale(.97); }

/* Primary = same icon color logic (no hardcoded white) */
.icon-btn.primary{
  width:42px; height:42px;
  color: var(--icon-color);                        /* ← fix: match others */
  background: rgba(0,110,255,.18);
  border-color: rgba(0,110,255,.55);
}
.icon-btn.active{ box-shadow: 0 0 16px rgba(47,132,255,.6); }

/* Generic SVG/IMG sizes (colors come from theme + rules below) */
.icon-btn svg,
.icon-btn img{ display:block; width:20px; height:20px; }

/* Toggle SVG / IMG icons — ONLY show the active one */
.icon-btn .toggle-icon{ display:none !important; }
.icon-btn .toggle-icon.active{ display:inline-block !important; }

/* Remote Iconify images: unify color behavior
   - Light theme: turn black source icons white
   - Dark theme: show as-is (dark) */
.icon-btn img.remote-icon{ filter: brightness(0) invert(1); }
body[data-theme="dark"] .icon-btn img.remote-icon{ filter:none; }

/* ===========================
   PLAYER BAR (50/50 compact)
   =========================== */
.player-bar{
  grid-template-columns: 1fr 1fr !important;
}
.player-left{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:.75rem;
  align-items:center;
  min-width:0;
  font-size:0.5em;
}
.player-left .controls{
  margin-left:auto;
  display:flex;
  gap:.35rem;
  align-items:center;
  flex-shrink:0;
}
.player-right{ min-width:0; }

/* Smaller art + buttons in compact bar */
.player-bar.compact .now-art{ width:32px; height:32px; }
.player-bar.compact .now-meta{ font-size:.78rem; line-height:1.1; }
.player-bar.compact .icon-btn{ width:28px; height:28px; border-radius:10px; }
.player-bar.compact .icon-btn.primary{ width:34px; height:34px; }

/* Ellipsis + hover tooltips (use title attr) */
.player-bar .now-meta span,
.player-bar .now-meta small{
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative;
}
.player-bar .now-meta [title]:hover::after{
  content: attr(title);
  position:absolute; left:0; top:120%;
  max-width: min(60vw, 520px);
  padding:.45rem .6rem; font-size:.9em; white-space:normal; line-height:1.2;
  border-radius:10px; background: rgba(0,0,0,.85); color:#fff;
  border:1px solid rgba(255,255,255,.18); box-shadow: 0 8px 22px rgba(0,0,0,.35);
  z-index: 9;
}

/* Stack on very narrow screens */
@media (max-width:640px){
  .player-bar{ grid-template-columns: 1fr !important; }
  .player-right{ order:2; }
  .player-left{ order:1; justify-content:space-between; }
}

/* ===========================
   PROGRESS
   =========================== */
.progress{ display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; }
.time{ font-variant-numeric: tabular-nums; opacity:.85; min-width:3ch; text-align:right; }
.bar{ position:relative; height:18px; display:flex; align-items:center; }
.bar-track{ position:absolute; left:0; right:0; height:8px; border-radius:999px; background: rgba(255,255,255,.18); }
.neon{
  --pct:0;
  position:absolute; left:0; height:6px; width: calc(var(--pct) * 1%); border-radius:999px;
  background: linear-gradient(90deg, #0a5bff, #2f84ff);
  box-shadow: 0 0 18px #2f84ff, 0 0 36px rgba(47,132,255,.5);
}
#seek{
  -webkit-appearance:none; appearance:none; width:100%; height:18px; margin:0; background:transparent; position:relative; z-index:1;
}
#seek::-webkit-slider-runnable-track{ height:18px; background:transparent; }
#seek::-moz-range-track{ height:18px; background:transparent; }
#seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; margin-top:1px;
  background:#fff; border:1px solid rgba(47,132,255,.95); box-shadow:0 0 12px rgba(47,132,255,.9);
}
#seek::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid rgba(47,132,255,.95); box-shadow:0 0 12px rgba(47,132,255,.9);
}

/* ===========================
   SCROLLBARS (minimal)
   =========================== */
.views-wrap::-webkit-scrollbar{ width:6px; height:6px; }
.views-wrap::-webkit-scrollbar-track{ background: transparent; }
.views-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius:999px;
}
.views-wrap{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }