/* Synthkin GVM UX Density 2B
   CSS-only density optimisation.
   No audio, station loader, auth or payment logic changed.
*/

/* ===== Desktop sidebar: frozen, compact, independently scrollable ===== */
@media (min-width: 821px) {
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 16px 11px 18px !important;
    scrollbar-width: thin;
  }

  html[data-skin="glass"] .sidebar {
    top: 14px !important;
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
  }

  .brand {
    padding: 0 6px 12px !important;
    font-size: 18px;
  }

  .nav-label,
  .nav-section-toggle {
    margin: 7px 8px 3px !important;
    font-size: 9px !important;
  }

  .nav-list {
    gap: 1px !important;
  }

  .nav-item {
    gap: 8px !important;
    min-height: 34px;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }

  .nav-item .icon {
    width: 17px;
    height: 17px;
  }

  .eco-card {
    margin-top: auto !important;
    padding: 9px 11px !important;
  }

  .eco-card p {
    display: none;
  }

  .eco-top,
  .switch-row {
    font-size: 10px !important;
  }

  .switch-row {
    margin-top: 7px;
  }
}


/* ===== Worldwide radio: compact visual-first grid ===== */
@media (min-width: 1101px) {
  .sa-grid.station-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 9px !important;
  }
}

.sa-grid .station-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 88px auto;
  overflow: hidden;
}

.sa-grid .station-visual {
  aspect-ratio: auto !important;
  width: 100%;
  height: 88px !important;
  min-height: 0 !important;
  padding: 7px !important;
}

.sa-grid .station-logo {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.sa-grid .station-monogram {
  max-width: 70%;
  max-height: 70%;
}

.sa-grid .station-info {
  min-width: 0;
  padding: 8px 9px 9px !important;
}

.sa-grid .station-title-row {
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.sa-grid .station-title {
  min-width: 0;
}

.sa-grid .station-title h3 {
  margin: 0;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-grid .station-title p {
  margin-top: 2px !important;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detailed information remains available after selection / Now Playing. */
.sa-grid .station-meta,
.sa-grid .station-site {
  display: none !important;
}

.sa-grid .card-play {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
}

.sa-grid .station-fav {
  top: 6px !important;
  right: 6px !important;
  width: 27px !important;
  height: 27px !important;
}

/* Keep Share available without permanently cluttering every card. */
.sa-grid .station-share {
  top: 39px !important;
  right: 6px !important;
  width: 27px !important;
  height: 27px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.sa-grid .station-card:hover .station-share,
.sa-grid .station-card:focus-within .station-share {
  opacity: 1;
  pointer-events: auto;
}


/* ===== Tablet ===== */
@media (min-width: 821px) and (max-width: 1100px) {
  .sa-grid.station-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .sa-grid .station-card {
    grid-template-rows: 92px auto;
  }

  .sa-grid .station-visual {
    height: 92px !important;
  }
}


/* ===== Mobile: compact horizontal station rows ===== */
@media (max-width: 820px) {
  .sa-grid.station-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .sa-grid .station-card {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    min-height: 80px;
  }

  .sa-grid .station-visual {
    width: 86px !important;
    height: 100% !important;
    min-height: 80px !important;
    padding: 6px !important;
  }

  .sa-grid .station-info {
    align-self: center;
    padding: 8px 9px !important;
  }

  .sa-grid .station-title h3 {
    font-size: 12px !important;
  }

  .sa-grid .station-title p {
    font-size: 9px !important;
  }

  .sa-grid .station-share {
    display: none !important;
  }

  .sa-grid .station-fav {
    top: 5px !important;
    right: 5px !important;
    width: 25px !important;
    height: 25px !important;
  }

  .sa-grid .card-play {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px;
  }
}


/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .station-card,
  .station-share {
    transition: none !important;
  }

  .station-card:hover {
    transform: none !important;
  }
}

/* ===== UX Density 2B.1 corrective overrides ===== */

@media (min-width: 821px) {
  /*
   * overflow-x:hidden on the root can create a scroll container that
   * interferes with position:sticky. "clip" prevents horizontal spill
   * without becoming the sidebar's scrolling ancestor.
   */
  html,
  body {
    overflow-x: clip !important;
  }

  .app-shell {
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* Larger station actions */
.sa-grid .station-fav {
  width: 34px !important;
  height: 34px !important;
  font-size: 19px !important;
}

.sa-grid .station-share {
  width: 34px !important;
  height: 34px !important;
}

.sa-grid .station-share .icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 821px) {
  .sa-grid .station-fav {
    top: 7px !important;
    right: 7px !important;
  }

  .sa-grid .station-share {
    top: 47px !important;
    right: 7px !important;
  }
}

@media (max-width: 820px) {
  .sa-grid .station-fav {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }
}


/* MOBILE_TOPBAR_FREEZE_2B2 */
@media (max-width:820px){html,body{overflow-x:clip!important}.topbar{position:sticky!important;top:0!important;z-index:60!important}}