/* Copyright Ayers Electronics Inc. All rights reserved. */
/* Music Mode's Home (js/music-home.js): On Demand's rails, laid in the main area beside the side column
   (css/components/side-column.css). Only layout: the rails and cards keep On Demand's own look. */

#musicHome {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg);
}
#musicRows {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0 32px;
}
#musicHomeEmpty {
  margin: 0;
  padding: 0 var(--page-margin);
  font-size: var(--type-body);
  color: var(--muted);
}

/* The Music Mode and Sync TVs toggles lit while on: the accent's fill, the way the lit segment wears it. */
#guideHead .head-icon.active,
#modeSettings[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

@keyframes surprise-roll {
  to {
    transform: rotate(360deg);
  }
}
#headSurpriseMe.rolling .ico {
  animation: surprise-roll 360ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #headSurpriseMe.rolling .ico {
    animation: none;
  }
}

/* At Music Home's root Back stays in place but has no earlier Music screen to open. */
#guideCloseBtn[aria-disabled="true"] {
  opacity: 0.45;
}

@media (min-width: 900px) {
  #musicRows .rail > h3 {
    font-size: var(--type-body);
    letter-spacing: 0.01em;
  }
  #musicRows .card .meta {
    padding-top: 5px;
  }
}