/* ============================================================
   Resonance — CCA Music. Spotify-style layout in the CCA dark
   + lavender palette. All classes are scoped under .rz-* so this
   file can't leak into the rest of the site.
   ============================================================ */

:root{
  --rz-accent: #c79bff;      /* brand lavender (text / highlights) */
  --rz-accent-solid: #ddb1f9;/* solid buttons */
  --rz-bg: #000000;
  --rz-panel: #000000;
  --rz-elev: #141418;   /* faint lift — hover / search / active tab only */
  --rz-text: #f3f1f8;
  --rz-mut: #a3a0b3;
  --rz-line: rgba(255,255,255,.07);
  --rz-player-h: 88px;
}

body[data-ai-context="music"]{ background:var(--rz-bg); }

.rz-main{
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 22px calc(var(--rz-player-h) + 40px);
  color: var(--rz-text);
}

/* ---------------------------------------------------- top bar --------- */
.rz-topbar{
  position: sticky; top: 58px; z-index: 30;
  display:flex; align-items:center; gap:14px;
  padding: 10px 2px; margin-bottom: 8px;
  background: #000;
}
.rz-round{
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(0,0,0,.45); color:var(--rz-text);
  display:grid;place-items:center;cursor:pointer; flex:none;
  transition:background .15s, transform .15s;
}
.rz-round:hover{ background:rgba(0,0,0,.7); transform:scale(1.05); }
.rz-search{
  position:relative; flex:1; max-width:420px;
  display:flex; align-items:center; gap:10px;
  background:var(--rz-elev); border-radius:999px;
  padding:9px 16px; color:var(--rz-mut);
}
.rz-search svg{ flex:none; }
.rz-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--rz-text); font-size:.95rem;
}
.rz-search input::placeholder{ color:var(--rz-mut); }
.rz-tabs{ margin-left:auto; display:flex; gap:8px; }
.rz-tab{
  border:none; background:transparent; color:var(--rz-mut);
  font-weight:700; font-size:.92rem; padding:8px 14px; border-radius:999px;
  cursor:pointer; transition:.15s;
}
.rz-tab:hover{ color:var(--rz-text); }
.rz-tab-active{ background:var(--rz-elev); color:var(--rz-text); }

/* ---------------------------------------------------- views ----------- */
.rz-loading{ display:grid; place-items:center; min-height:50vh; }
.rz-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--rz-accent);
  animation:rz-spin .8s linear infinite;
}
@keyframes rz-spin{ to{ transform:rotate(360deg);} }

.rz-greet{ font-size:1.7rem; font-weight:800; margin:6px 0 18px; letter-spacing:-.01em; }
.rz-sec{ margin: 26px 0 8px; }
.rz-sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.rz-sec-title{ font-size:1.22rem; font-weight:800; letter-spacing:-.01em; }
.rz-sec-sub{ color:var(--rz-mut); font-size:.85rem; }

/* horizontal rail */
.rz-rail{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:6px; scrollbar-width:none;
}
.rz-rail::-webkit-scrollbar{ display:none; }

/* card */
.rz-card{
  flex:none; width:170px; scroll-snap-align:start;
  background:var(--rz-panel); border-radius:12px; padding:14px;
  cursor:pointer; position:relative; transition:background .2s;
}
.rz-card:hover{ background:var(--rz-elev); }
.rz-card-art{
  width:100%; aspect-ratio:1/1; border-radius:8px; object-fit:cover;
  background:#222; box-shadow:0 8px 22px rgba(0,0,0,.45); margin-bottom:12px;
}
.rz-card.rz-artist .rz-card-art{ border-radius:50%; }
.rz-card-title{
  font-weight:700; font-size:.95rem; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rz-card-sub{ color:var(--rz-mut); font-size:.82rem; margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-card.rz-artist .rz-card-title,.rz-card.rz-artist .rz-card-sub{ text-align:center; }

/* floating play FAB on cards */
.rz-fab{
  position:absolute; right:22px; bottom:74px;
  width:46px;height:46px;border-radius:50%;border:none;
  background:var(--rz-accent-solid); color:#0b0b10;
  display:grid;place-items:center; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px); transition:.2s;
}
.rz-card:hover .rz-fab{ opacity:1; transform:translateY(0); }
.rz-fab:hover{ transform:scale(1.06); }

/* mix card — artist name + MIX badge overlaid on the art */
.rz-mix-art{ position:relative; margin-bottom:12px; }
.rz-mix-art .rz-card-art{ margin-bottom:0; }
.rz-mix-name{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-weight:800; font-size:1.05rem; line-height:1.15; color:#c8c8d2;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rz-mix-tag{
  position:absolute; top:10px; left:10px;
  font-size:.6rem; font-weight:900; letter-spacing:.08em; color:#0b0b10;
  background:var(--rz-accent); padding:2px 7px; border-radius:4px;
}
.rz-mix .rz-fab{ bottom:88px; }

/* grid (search / liked) */
.rz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:16px; }

/* ---------------------------------------------- track list ------------ */
.rz-list{ display:flex; flex-direction:column; }
.rz-row{
  display:grid; grid-template-columns:30px 44px 1fr auto auto;
  align-items:center; gap:14px; padding:7px 10px; border-radius:7px;
  cursor:pointer; color:var(--rz-text);
}
.rz-row:hover{ background:var(--rz-elev); }
.rz-row.rz-playing{ color:var(--rz-accent); }
.rz-row-idx{ color:var(--rz-mut); font-size:.9rem; text-align:right; font-variant-numeric:tabular-nums; }
.rz-row:hover .rz-row-idx .rz-num{ display:none; }
.rz-row-idx .rz-mini{ display:none; }
.rz-row:hover .rz-row-idx .rz-mini{ display:inline; }
.rz-row.rz-playing .rz-row-idx .rz-num{ color:var(--rz-accent); }
.rz-row-art{ width:44px;height:44px;border-radius:5px;object-fit:cover;background:#222; }
.rz-row-meta{ min-width:0; }
.rz-row-title{ font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-row-artist{ color:var(--rz-mut); font-size:.83rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-row-artist a:hover{ text-decoration:underline; color:var(--rz-text); }
.rz-row-dur{ color:var(--rz-mut); font-size:.85rem; font-variant-numeric:tabular-nums; }
.rz-heart{ background:none;border:none;color:var(--rz-mut);cursor:pointer;display:grid;place-items:center;opacity:0;transition:.15s; }
.rz-row:hover .rz-heart{ opacity:1; }
.rz-heart.rz-liked{ opacity:1; color:var(--rz-accent); }
.rz-heart.rz-liked svg path{ fill:currentColor; }
.rz-explicit{ font-size:.6rem; background:var(--rz-mut); color:#0b0b10; border-radius:3px; padding:1px 4px; font-weight:800; margin-left:6px; vertical-align:middle; }

/* ---------------------------------------------- detail header --------- */
.rz-hero{
  display:flex; align-items:flex-end; gap:24px; padding:24px 6px 18px;
  background:#000;
  border-radius:14px; margin-bottom:10px;
}
.rz-hero-art{ width:188px;height:188px;border-radius:10px;object-fit:cover;
  box-shadow:0 16px 40px rgba(0,0,0,.6); flex:none; }
.rz-hero.rz-artisthero .rz-hero-art{ border-radius:50%; }
.rz-hero-kind{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rz-mut); }
.rz-hero-name{ font-size:2.6rem; font-weight:900; letter-spacing:-.02em; line-height:1.05; margin:8px 0; }
.rz-hero-sub{ color:var(--rz-mut); font-size:.9rem; }
.rz-playall{
  margin:16px 0 6px; display:inline-flex; align-items:center; gap:9px;
  background:var(--rz-accent-solid); color:#0b0b10; border:none;
  font-weight:800; font-size:.95rem; padding:12px 26px; border-radius:999px; cursor:pointer;
  transition:transform .12s;
}
.rz-playall:hover{ transform:scale(1.04); }

.rz-empty{ color:var(--rz-mut); text-align:center; padding:60px 20px; }

/* ============================================================
   Bottom now-playing bar
   ============================================================ */
.rz-player{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  height:var(--rz-player-h);
  display:grid; grid-template-columns:minmax(180px,30%) 1fr minmax(120px,22%);
  align-items:center; gap:16px; padding:0 16px;
  background:#000; border-top:1px solid var(--rz-line);
  transform:translateY(110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.rz-player.rz-active{ transform:translateY(0); }

.rz-np{ display:flex; align-items:center; gap:12px; min-width:0; }
.rz-np-cover{ width:56px;height:56px;border-radius:6px;object-fit:cover;background:#222;flex:none; }
.rz-np-meta{ min-width:0; }
.rz-np-title{ font-weight:700; font-size:.9rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.rz-np-artist{ color:var(--rz-mut); font-size:.8rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:block; }
.rz-np-artist:hover{ color:var(--rz-text); text-decoration:underline; }
.rz-np-like{ background:none;border:none;color:var(--rz-mut);cursor:pointer;flex:none;display:grid;place-items:center;padding:6px; }
.rz-np-like.rz-liked{ color:var(--rz-accent); }
.rz-np-like.rz-liked svg path{ fill:currentColor; }

.rz-controls{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.rz-buttons{ display:flex; align-items:center; gap:18px; }
.rz-ctl{ background:none;border:none;color:var(--rz-mut);cursor:pointer;display:grid;place-items:center;transition:color .15s, transform .12s; position:relative; }
.rz-ctl:hover{ color:var(--rz-text); }
.rz-ctl.rz-on{ color:var(--rz-accent); }
.rz-play{
  width:38px;height:38px;border-radius:50%;background:#fff;color:#0b0b10;
}
.rz-play:hover{ transform:scale(1.07); color:#0b0b10; }
.rz-repeat-one{ position:absolute; top:-3px; right:-5px; font-size:.6rem; font-weight:800; display:none; }
.rz-repeat.rz-one .rz-repeat-one{ display:inline; }

.rz-scrub{ display:flex; align-items:center; gap:10px; width:100%; max-width:560px; }
.rz-time{ color:var(--rz-mut); font-size:.72rem; font-variant-numeric:tabular-nums; flex:none; min-width:32px; }
.rz-time:last-child{ text-align:left; }
.rz-bar{ position:relative; flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.16); cursor:pointer; }
.rz-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--rz-text); }
.rz-bar:hover .rz-bar-fill{ background:var(--rz-accent); }
.rz-bar-knob{ position:absolute; top:50%; left:0; width:12px;height:12px;border-radius:50%;background:#fff; transform:translate(-50%,-50%) scale(0); transition:transform .12s; }
.rz-bar:hover .rz-bar-knob{ transform:translate(-50%,-50%) scale(1); }

.rz-extra{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.rz-src{ font-size:.6rem; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:4px;
  background:rgba(255,255,255,.08); color:var(--rz-mut); text-transform:uppercase; }
.rz-src.rz-full{ background:rgba(221,177,249,.2); color:var(--rz-accent); }
.rz-vol{ position:relative; width:90px; height:5px; border-radius:3px; background:rgba(255,255,255,.16); cursor:pointer; }
.rz-vol-fill{ position:absolute;left:0;top:0;bottom:0;width:70%;border-radius:3px;background:var(--rz-text); }
.rz-vol:hover .rz-vol-fill{ background:var(--rz-accent); }
.rz-vol-knob{ position:absolute; top:50%; left:70%; width:11px;height:11px;border-radius:50%;background:#fff; transform:translate(-50%,-50%) scale(0); transition:transform .12s; }
.rz-vol:hover .rz-vol-knob{ transform:translate(-50%,-50%) scale(1); }

/* The collapse chevron only exists for the mobile full-screen sheet. */
.rz-collapse{ display:none; }
body.rz-noscroll{ overflow:hidden; }

/* ============================================================
   MOBILE  (≤860px)
   The desktop now-playing bar becomes a phone-native experience:
   a slim "mini bar" docked just above the site bottom-nav that taps
   up into a full-screen Now-Playing sheet (big art + full transport),
   swipe-down or chevron to dismiss. Lists/cards/topbar are retuned for
   touch. Bottom-nav is 56px + safe-area, so the mini bar docks above it.
   ============================================================ */
@media (max-width:860px){
  :root{ --rz-mini-h:60px; }
  .rz-main{
    padding:8px 12px calc(var(--rz-mini-h) + 56px + env(safe-area-inset-bottom) + 16px);
  }

  /* ---- topbar: search-led, compact pill tabs, no iOS zoom ---- */
  .rz-topbar{ top:54px; gap:8px; padding:8px 0 6px; }
  .rz-search{ max-width:none; min-width:0; padding:11px 14px; }
  /* min-width:0 lets the search flex-item shrink so the Home/Liked tabs
     don't get pushed off the right edge (default input min-width is its
     intrinsic size, which overflows narrow phones). */
  .rz-search input{ font-size:16px; min-width:0; }/* ≥16px stops iOS focus-zoom */
  .rz-tabs{ flex:none; }
  .rz-round{ width:34px;height:34px; }
  .rz-tabs{ gap:6px; }
  .rz-tab{ font-size:.85rem; padding:7px 12px; }

  /* ---- content density ---- */
  .rz-greet{ font-size:1.4rem; margin:4px 0 12px; }
  .rz-sec{ margin:20px 0 6px; }
  .rz-sec-title{ font-size:1.06rem; }
  .rz-rail{ gap:12px; }
  .rz-card{ width:140px; padding:10px; }
  .rz-card-art{ margin-bottom:9px; }
  .rz-fab{ display:none; }                        /* touch: tap a card to play */
  .rz-grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }

  .rz-hero{ flex-direction:column; align-items:center; text-align:center; padding:14px 6px 12px; }
  .rz-hero-art{ width:160px;height:160px; }
  .rz-hero-name{ font-size:1.7rem; }
  .rz-playall{ padding:13px 30px; }

  /* track rows: drop the index + hover heart, roomier touch target */
  .rz-row{ grid-template-columns:46px 1fr auto; gap:12px; padding:9px 6px; }
  .rz-row-idx{ display:none; }
  .rz-row .rz-heart{ display:none; }
  .rz-row-art{ width:46px;height:46px; }
  .rz-row-title{ font-size:.96rem; }

  /* ===================== MINI BAR (collapsed) ===================== */
  .rz-player{
    bottom:calc(56px + env(safe-area-inset-bottom));
    left:8px; right:8px;
    height:var(--rz-mini-h);
    display:flex; align-items:center; gap:10px;
    grid-template-columns:none;                   /* drop the desktop grid */
    padding:0 8px; gap:6px;
    background:#101014; border:1px solid var(--rz-line); border-radius:14px;
    box-shadow:0 8px 26px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .rz-np{ flex:1; gap:10px; padding-left:2px; }
  .rz-np-cover{ width:44px;height:44px;border-radius:7px; }
  .rz-np-like{ display:none; }                    /* lives in the expanded sheet */

  .rz-controls{ flex-direction:row; order:0; width:auto; gap:2px; }
  .rz-buttons{ gap:2px; }
  .rz-shuffle, #rzPrev, .rz-repeat{ display:none; }/* mini shows play + next only */
  .rz-scrub, .rz-extra{ display:none; }
  .rz-ctl{ padding:9px; }                         /* ≥40px touch targets */
  .rz-play{ width:42px;height:42px; }

  /* ===================== FULL-SCREEN SHEET (expanded) ===================== */
  .rz-player.rz-expanded{
    position:fixed; inset:0; left:0; right:0; top:0; bottom:0;
    height:auto; border:none; border-radius:0; box-shadow:none; overflow-y:auto;
    z-index:2000;
    display:flex; flex-direction:column; align-items:center;
    gap:0; transform:none;
    background:linear-gradient(180deg,#1a1426 0%, #0a0810 46%, #000 100%);
    padding:calc(14px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom));
  }

  .rz-expanded .rz-collapse{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:calc(12px + env(safe-area-inset-top)); left:12px;
    width:44px;height:44px;border:none;border-radius:50%;
    background:transparent; color:var(--rz-text); cursor:pointer; z-index:3;
  }

  /* artwork + title block */
  .rz-expanded .rz-np{
    flex-direction:column; align-items:center; text-align:center;
    width:100%; flex:none; gap:0; margin-top:18px;
  }
  .rz-expanded .rz-np-cover{
    width:min(76vw,330px); height:min(76vw,330px);
    border-radius:16px; margin:5vh 0 30px;
    box-shadow:0 26px 64px rgba(0,0,0,.65);
  }
  .rz-expanded .rz-np-meta{ width:100%; max-width:520px; }
  .rz-expanded .rz-np-title{ font-size:1.5rem; line-height:1.2; white-space:normal; }
  .rz-expanded .rz-np-artist{ font-size:1rem; margin-top:6px; }
  .rz-expanded .rz-np-like{
    display:grid; position:absolute;
    top:calc(14px + env(safe-area-inset-top)); right:18px;
    width:44px;height:44px; padding:0;
  }
  .rz-expanded .rz-np-like svg{ width:24px;height:24px; }

  /* transport: scrubber above a spread-out button row */
  .rz-expanded .rz-controls{
    width:100%; max-width:520px; margin:6px auto 0;
    flex-direction:column; gap:18px;
  }
  .rz-expanded .rz-scrub{ display:flex; order:-1; width:100%; max-width:none; }
  .rz-expanded .rz-time{ font-size:.74rem; }
  .rz-expanded .rz-bar{ height:6px; }
  .rz-expanded .rz-bar-knob{ transform:translate(-50%,-50%) scale(1); width:14px;height:14px; }
  .rz-expanded .rz-buttons{ width:100%; justify-content:space-between; gap:0; }
  .rz-expanded .rz-shuffle, .rz-expanded #rzPrev, .rz-expanded .rz-repeat{ display:grid; }
  .rz-expanded .rz-ctl{ padding:10px; }
  .rz-expanded .rz-ctl svg{ width:24px;height:24px; }
  .rz-expanded .rz-play{ width:66px;height:66px; }
  .rz-expanded .rz-play svg{ width:28px;height:28px; }

  /* footer of the sheet: just the source badge, centered */
  .rz-expanded .rz-extra{ display:flex; justify-content:center; margin-top:26px; }
  .rz-expanded #rzMute, .rz-expanded .rz-vol{ display:none; }
}

/* ============================================================
   Pure-black everything on the music page — header chrome,
   page surfaces and the mobile bottom nav (footer). Scoped to
   this page so the rest of the site is untouched.
   ============================================================ */
html:has(body[data-ai-context="music"]){ background:#000; }
body[data-ai-context="music"]{ background:#2b1557 !important; }
/* site top navbar: kill the scroll-in backing tint, keep it solid black */
body[data-ai-context="music"] .navbar::before{ background:#000; border-bottom-color:rgba(255,255,255,.05); }
/* mobile bottom nav = the page footer */
body[data-ai-context="music"] .sg-bottom-nav{ background:#000 !important; border-top:1px solid rgba(255,255,255,.05); }
/* flatten the remaining faint-gray fills to black (keep a hairline so they read) */
body[data-ai-context="music"] .rz-search{ background:#000; border:1px solid rgba(255,255,255,.10); }
body[data-ai-context="music"] .rz-tab-active{ background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }