/* =========================================================
   OUTLXW — VAULT PAGE ONLY (MODE-AWARE)
   Uses global tokens from style.css:
   --bg, --panel, --panel2, --stroke, --text, --muted,
   --accent, --accent2, --spot-1, --spot-2, --glow
   ========================================================= */

.vault-page{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ---------- HEADER ---------- */

.vault-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vault-title{
  margin:0;
  font-size:22px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
}

.vault-subtitle{
  margin:0;
  font-size:13px;
  color:var(--muted);
  max-width:720px;
}

/* ---------- FILTER BAR ---------- */

.vault-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.vault-filter-btn{
  padding:7px 16px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;

  border:1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--muted);

  cursor:pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease, background 180ms ease;
}

.vault-filter-btn:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  color: var(--accent);
  box-shadow: 0 0 14px var(--glow);
  transform: translateY(-1px);
}

.vault-filter-btn.active{
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent2));
  color: rgba(245,247,250,0.92);
border-color: color-mix(in srgb, var(--accent) 65%, var(--stroke));
  box-shadow: 0 0 18px var(--glow);
}

/* ---------- TRACK LIST ---------- */

.vault-track-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

/* single row */
.vault-track{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 18px;
  border-radius:999px;

  background: color-mix(in srgb, var(--panel2) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--stroke) 78%, transparent);

  box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.vault-track:hover{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 70%, transparent);
  transform: translateY(-1px);
}

/* left text */
.vault-track-main{
  flex:1;
  min-width:0;
}

.vault-track-title{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vault-track-meta{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* right actions */
.vault-track-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

/* ---------- PLAY BUTTON ---------- */

.vault-play-btn{
  padding:6px 16px;
  border-radius:999px;

  border:1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--muted);

  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;

  cursor:pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease, background 180ms ease;
}

.vault-play-btn:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  color: var(--accent);
  box-shadow: 0 0 14px var(--glow);
  transform: translateY(-1px);
}

.vault-play-btn.playing{
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent2));
  color: rgba(0,0,0,0.85);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--stroke));
  box-shadow: 0 0 18px var(--glow);
}

/* ---------- TWO COLUMN (ALL TRACKS MODE) ---------- */

.vault-two-col .vault-track-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:26px 32px;
}

.vault-two-col .vault-track{
  width:100%;
}

/* ---------- SEARCH BAR ---------- */

.vault-search{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.vault-search-input{
  flex:1;
  min-width:220px;
  border-radius:999px;

  border:1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 82%, transparent);

  padding:8px 16px;
  font-size:12px;
  color:var(--text);

  outline:none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.vault-search-input::placeholder{
  color:var(--muted);
}

.vault-search-input:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 55%, transparent);
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
}

/* ---------- MOBILE ---------- */

@media (max-width: 720px){
  .vault-two-col .vault-track-list{
    grid-template-columns: 1fr;
  }

  .vault-track{
    padding: 10px 14px;
  }
}


/* =========================
   FIXES (Mode-consistent)
   ========================= */

/* Active album chip text should be readable (was black) */
.vault-filter-btn.active{
  color: rgba(245,247,250,0.92);
}

/* "Open on SC" hover background must follow current mode accent */
.track-row .btn.btn-ghost{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(245,247,250,0.88);
}
.track-row .btn.btn-ghost:hover{
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 0 18px var(--glow);
}

/* Keep Play button consistent too */
.track-row .btn.btn-primary:hover{
  box-shadow: 0 0 18px var(--glow);
}