/* Auditura desktop polish v3 — deliberately scoped away from mobile UI.
 * Fixes v2's motionless Home mosaic and expensive hidden Home components.
 * Desktop layout and audio-quality labels are not modified.
 */
:is(html:not([data-layout]), html[data-layout="desktop"]) {
  --desk-line: var(--border-subtle, rgba(255,255,255,.12));
  --desk-accent: var(--accent-primary);
}

/* Restore the original compact LEFT indicator; no underline below nav text. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item {
  position: relative;
  border-radius: 5px;
  padding: 11px 14px 11px 16px;
  gap: 12px;
  background: transparent;
  box-shadow: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item::after {
  display: none !important;
  content: none !important;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  pointer-events: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item.active {
  color: var(--desk-accent);
  font-weight: 650;
  background: color-mix(in srgb, var(--desk-accent) 7%, transparent);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item.active::before {
  background: var(--desk-accent);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar .nav-item:hover {
  background: var(--overlay-hover);
}

/* Keep the main action buttons accent-coloured. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar-actions :is(#sidebar-import-btn,#sidebar-cdripper-btn) {
  border: 1px solid var(--desk-accent);
  border-radius: 8px;
  color: var(--text-on-accent, #161616);
  background: var(--desk-accent);
  box-shadow: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .sidebar-actions #sidebar-settings-btn {
  border: 1px solid color-mix(in srgb, var(--desk-accent) 50%, transparent);
  color: var(--desk-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--desk-accent) 8%, transparent);
}

/* Home: THREE animated cover rows, same locally-cached artwork as before.
 * There are 48 original covers and one identical copy for a seamless loop.
 * No animated blur/mask/large-shadow effects, only compositor translation.
 * Hide desktop-only extra buttons/rows regardless of inline display styles.
 */
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] :is(#home-active-row,#home-surprise-btn,#recent-section,#favorites-section) {
  display: none !important;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero {
  position: relative;
  height: clamp(320px, 36vw, 485px);
  min-height: 320px;
  padding: 0;
  margin: 0 0 22px;
  border-radius: 8px;
  background: var(--surface-app);
  overflow: hidden;
  isolation: isolate;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-coverflow {
  display: block;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-coverflow[hidden] {
  display: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-coverflow-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-columns: clamp(105px, 8.8vw, 158px);
  gap: 8px;
  align-items: stretch;
  align-content: stretch;
  height: 100%;
  width: max-content;
  padding: 0;
  animation: auditura-desktop-home-drift 155s linear infinite;
  animation-play-state: running;
  will-change: transform;
}
@keyframes auditura-desktop-home-drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
/* Animate only the visible Home view; save GPU when browsing Library. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"]:not(.active) .home-hero-coverflow-track,
 :is(html:not([data-layout]), html[data-layout="desktop"]) body.booting .home-hero-coverflow-track {
  animation-play-state: paused;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-coverflow:hover .home-hero-coverflow-track {
  animation-play-state: running;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-cover {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  opacity: 1;
  box-shadow: none;
  transform: none;
  transition: none;
  pointer-events: auto;
  background: var(--surface-card);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero::after {
  background: linear-gradient(0deg, rgba(var(--surface-app-rgb), .38), transparent 25%);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero:has(.home-hero-coverflow:not([hidden])) .home-hero-content {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] .home-hero-coverflow-track {
    animation: none;
    will-change: auto;
  }
}

/* Simple stats as on the mobile home; no pills, no overlapping hero. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: 12px;
  margin: 0 0 28px;
  padding: 10px 0 20px;
  border-bottom: 1px solid var(--desk-line);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section[style*="display: none"] { display: none !important; }
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section .stat-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 9px 5px;
  text-align: center;
  transition: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section .stat-card:hover {
  transform: none;
  background: none;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section .stat-icon { display: none; }
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section .stat-value {
  color: var(--desk-accent);
  background: transparent;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(20px,2vw,30px);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .view-section[data-view="home"] #stats-section .stat-label {
  display: inline-block;
  padding: 4px 2px 7px;
  margin-top: 2px;
  border-bottom: 2px solid var(--desk-accent);
  font-size: 12px;
  font-weight: 550;
  color: var(--text-primary);
}

/* Right-album metadata: readable columns, text links, subtle rules. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 14px;
  margin: 14px 0 10px;
  align-items: start;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items .meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 9px 0 11px;
  border: 0;
  border-bottom: 1px solid var(--desk-line);
  border-radius: 0;
  background: transparent;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items .meta-item strong {
  display: block;
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--text-muted);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items .meta-item-value {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items .meta-chip-link {
  margin: 0 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb,var(--desk-accent) 55%,transparent);
  text-underline-offset: 3px;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items .meta-chip-link:hover {
  color: var(--desk-accent);
  background: none;
  text-decoration-color: var(--desk-accent);
}

/* Keep Grouped/Flat underlined, without removing any desktop controls. */
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-view-toggle-btn {
  border-radius: 0;
  background: transparent;
}
:is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-view-toggle-btn.active {
  color: var(--desk-accent);
  background: transparent;
}
@media (max-width: 1000px) {
  :is(html:not([data-layout]), html[data-layout="desktop"]) .album-detail-panel .detail-meta-items { grid-template-columns: minmax(0,1fr); }
}