/* ==========================================================================
   NewsAudio — UI polish layer (2026)
   Additive only. Loaded last, uses the existing Aurora-Metro design tokens
   (--accent, --surface, --text-*). No structural or class changes, so the
   audio player / queue / session JS is unaffected.
   ========================================================================== */

/* ---- Keyboard accessibility: visible focus rings (mouse users unaffected) -- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.card:focus-visible,
.sidebar-link:focus-visible {
  outline: 2px solid var(--accent, #0078D4);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- Card micro-interaction: gentle lift + accent glow on hover ---------- */
.card,
.radio-card {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s ease,
              filter .25s ease;
  will-change: transform;
}
.card:hover,
.radio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px var(--accent-glow, rgba(0, 120, 212, .35));
}

/* Cover art subtle zoom inside cards */
.card .card-img,
.radio-card .card-img {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .card-img,
.radio-card:hover .card-img {
  transform: scale(1.03);
}

/* ---- Control buttons: tactile press feedback ----------------------------- */
.control-btn,
.np-control-btn,
.sidebar-link,
.speed-opt,
.sleep-opt {
  transition: transform .12s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.control-btn:active,
.np-control-btn:active,
.play-btn:active,
.np-play-btn:active {
  transform: scale(.92);
}

/* Play button gets a soft accent halo */
.play-btn,
.np-play-btn {
  transition: transform .15s ease, box-shadow .25s ease;
}
.play-btn:hover,
.np-play-btn:hover {
  box-shadow: 0 8px 24px -6px var(--accent-glow, rgba(0, 120, 212, .35));
}

/* ---- Refined custom scrollbars (matches theme) --------------------------- */
.sidebar-scroll,
.queue-list,
.np-chapter-sheet-list,
.main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted, #94A3B8) transparent;
}
.sidebar-scroll::-webkit-scrollbar,
.queue-list::-webkit-scrollbar,
.np-chapter-sheet-list::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sidebar-scroll::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-thumb,
.np-chapter-sheet-list::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .45);
  border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.queue-list::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #0078D4);
}
.sidebar-scroll::-webkit-scrollbar-track,
.queue-list::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Progress bar: slightly larger hit area + smoother handle ------------ */
.progress-bar:hover .progress-handle,
.now-playing-progress-bar:hover .now-playing-progress-handle {
  transform: translateY(-50%) scale(1.25);
  transition: transform .15s ease;
}

/* ---- Sidebar active link: subtle accent bar ------------------------------ */
.sidebar-link.active {
  position: relative;
}
.sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent, #0078D4), #00B0FF);
}

/* ---- Content fade-in on load (perceived speed) --------------------------- */
@keyframes na-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.main-content > *:not(.content-spacer) {
  animation: na-fade-in .5s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---- Respect reduced-motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  .card, .radio-card, .card-img,
  .main-content > * {
    animation: none !important;
    transition: none !important;
  }
}