/* Mood-switcher sidebar: hamburger toggle + left-side drawer listing playlists
   from data/playlists.json. Uses each page's own --auto-yellow/--ink/etc custom
   properties (defined in that page's <style>), so it re-skins itself per page. */

.header-left{ display:flex; align-items:center; gap:12px; }

/* Kept in the DOM for crawlers/screen readers as a real internal link between
   the two playlist pages, without competing for space in the fixed footer
   (the JS drawer is the visible way to switch playlists). */
.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;
}

.nav-toggle{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--auto-yellow);
  background:rgba(244,196,48,0.06); cursor:pointer; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:background .15s ease;
}
.nav-toggle:hover{ background:rgba(244,196,48,0.16); }
.nav-toggle span{ width:16px; height:2px; background:var(--auto-yellow); border-radius:2px; }

.nav-overlay{
  position:fixed; inset:0; background:rgba(6,5,3,.62); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;
}
.nav-overlay.open{ opacity:1; pointer-events:auto; }

/* No flat panel behind the list — a soft fade of the page's own backdrop instead,
   so the sidebar reads as floating glass rather than a solid sidebar block. */
.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; width:290px; max-width:84vw;
  background:linear-gradient(105deg, rgba(8,7,5,.62) 0%, rgba(8,7,5,.4) 60%, rgba(8,7,5,.12) 100%);
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:61; display:flex; flex-direction:column; padding:20px 16px 24px;
  overflow:hidden; /* only .nav-list scrolls — header/subtitle stay put, never the whole drawer */
}
.nav-drawer.open{ transform:translateX(0); }

.nav-drawer-head{ display:flex; align-items:center; justify-content:center; gap:10px; position:relative; flex:none; }
.nav-drawer-title{
  font-family:'Fraunces',serif; font-weight:700; font-size:19px; color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.6); text-align:center;
}
.nav-close{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,.06);
  color:var(--cream); font-size:18px; cursor:pointer; line-height:1;
}
.nav-close:hover{ background:rgba(255,255,255,.14); }
.nav-drawer-sub{
  font-size:10.5px; color:var(--chrome); margin:5px 0 18px; font-family:'Space Mono',monospace;
  text-align:center; letter-spacing:.03em; text-shadow:0 1px 6px rgba(0,0,0,.6); flex:none;
}

.nav-list-wrap{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.nav-list{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px;
  flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; padding-right:6px; margin-right:-6px;
}
.nav-list::-webkit-scrollbar{ width:5px; }
.nav-list::-webkit-scrollbar-track{ background:transparent; }
.nav-list::-webkit-scrollbar-thumb{ background:rgba(143,138,120,.5); border-radius:3px; }
.nav-list-wrap::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34px;
  background:linear-gradient(to bottom, transparent, rgba(8,7,5,.5));
  pointer-events:none;
}

/* ---------- premium card ---------- */
@keyframes navCardIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

a.nav-item, div.nav-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:18px 14px 14px; border-radius:18px; position:relative; overflow:hidden;
  flex-shrink:0;
  /* Own frosted backing (not just the drawer's diagonal wash) so contrast stays
     even no matter where a card sits in the sidebar or how bright the photo
     behind it is — badge/description text needs to read reliably either way. */
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 18%, transparent), transparent 60%),
    rgba(10,9,6,.42);
  backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
  animation:navCardIn .5s cubic-bezier(.2,.8,.2,1) backwards;
}
a.nav-item:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 65%, transparent);
  box-shadow:0 16px 34px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 45%, transparent) inset;
}
.nav-item.active{
  border-color:var(--tag-color, var(--auto-yellow));
  box-shadow:0 0 0 1.5px var(--tag-color, var(--auto-yellow)), 0 14px 30px rgba(0,0,0,.35),
    0 0 24px color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 30%, transparent);
}
.nav-item.locked{ opacity:.45; cursor:not-allowed; }
.nav-item.locked:hover{ transform:none; border-color:rgba(255,255,255,.09); box-shadow:0 10px 24px rgba(0,0,0,.28); }

.nav-item-badge{
  position:absolute; top:10px; right:10px;
  font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; line-height:1.4;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.nav-item-badge.now{
  background:var(--tag-color, var(--auto-yellow)); color:var(--ink);
  box-shadow:0 0 12px color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 65%, transparent);
}
.nav-item-badge.soon{ background:rgba(255,255,255,.08); color:var(--chrome); }
.nav-item.locked .nav-item-badge.soon{ background:rgba(255,255,255,.06); }
a.nav-item .nav-item-badge:not(.now){ background:rgba(255,255,255,.08); color:var(--cream); opacity:.75; }

.nav-item-icon{
  position:relative; width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tag-color, var(--auto-yellow)) 38%, transparent), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
}
.nav-item-emoji{ font-size:20px; }
.nav-item-eq{
  position:absolute; right:-4px; bottom:-4px; display:flex; align-items:flex-end; gap:2px;
  height:12px; padding:3px 4px 2px; border-radius:6px;
  background:var(--ink); box-shadow:0 0 0 2px var(--ink);
}
.nav-item-eq span{
  width:2.5px; border-radius:1px; background:var(--tag-color, var(--auto-yellow));
  animation:navEqBounce .9s ease-in-out infinite;
}
.nav-item-eq span:nth-child(1){ animation-delay:0s; }
.nav-item-eq span:nth-child(2){ animation-delay:.18s; }
.nav-item-eq span:nth-child(3){ animation-delay:.36s; }
@keyframes navEqBounce{ 0%,100%{ height:3px; } 50%{ height:9px; } }

.nav-item-title{
  font-family:'Fraunces',serif; font-weight:700; font-size:14.5px; color:var(--cream);
  margin-top:4px; line-height:1.25;
}
.nav-item.active .nav-item-title{ color:var(--tag-color, var(--auto-yellow)); }
.nav-item-desc{
  font-size:10.5px; color:var(--chrome); line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.5);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nav-item-count{
  display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.03em; color:var(--chrome);
}
.nav-item-count::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--tag-color, var(--auto-yellow)); box-shadow:0 0 6px var(--tag-color, var(--auto-yellow));
}

body.nav-open{ overflow:hidden; }

@media (max-width:480px){
  .nav-drawer{ width:82vw; }
}

/* ---------- persistent sidebar on screens with room for it ---------- */
/* Below this width the drawer stays a hamburger-triggered overlay (the compact
   mobile player layout has no spare width for a permanent 290px rail). At and
   above it, the same drawer markup becomes an always-visible left sidebar —
   only the list itself scrolls, capped to roughly 3 cards, so switching mood
   never requires opening a menu. */
@media (min-width:680px){
  .nav-toggle{ display:none; }
  .nav-overlay{ display:none; }
  .nav-close{ display:none; }
  .nav-drawer{
    transform:none;
  }
  .nav-list{
    max-height:526px; /* exactly 3 cards (166.5px each + 12px gap) before scrolling kicks in */
  }
  body{ padding-left:290px; }
}