/* css/standalone-mobile.css — Mobile-responsive layout */

@media (max-width: 768px) {

  /* ── Nav ───────────────────────────────────────────────────────────────────── */

  .nav {
    padding: 10px 16px;
  }

  .nav__links {
    display: none;
  }

  .nav__title {
    font-size: 11px;
  }

  /* ── Background glow ─────────────────────────────────────────────────────── */

  .standalone-glow {
    width: 300px;
    height: 200px;
    top: -50px;
  }

  /* ── Main content ─────────────────────────────────────────────────────────── */

  .main {
    padding: 56px 16px calc(var(--player-bar-height) + 16px);
  }

  /* ── Sidebar — horizontal scroll strip on mobile ──────────────────────────── */

  body.has-sidebar .layout {
    flex-direction: column;
    padding-top: 56px;
  }

  body.has-sidebar .sidebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 8px 12px;
    gap: 8px;
    flex-shrink: 0;
  }

  .sidebar__title {
    display: none;
  }

  .sidebar__album {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 6px 8px;
    flex-shrink: 0;
    min-width: 72px;
    max-width: 90px;
  }

  .sidebar__album-art {
    width: 44px;
    height: 44px;
  }

  .sidebar__album-art--placeholder {
    width: 44px;
    height: 44px;
  }

  .sidebar__album-info {
    align-items: center;
  }

  .sidebar__album-title {
    font-size: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: unset;
  }

  .sidebar__album-meta {
    font-size: 9px;
  }

  body.has-sidebar .main {
    padding-top: 16px;
  }

  /* ── Album header — centered vertical stack ──────────────────────────────── */

  .album-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 16px 0;
  }

  .album-header__art,
  .album-header__art--placeholder {
    width: 200px;
    height: 200px;
  }

  .album-header__info {
    align-items: center;
    justify-content: flex-start;
  }

  .album-header__title {
    font-size: var(--font-size-lg);
  }

  .album-header__actions {
    justify-content: center;
  }

  /* ── Tracklist — simplified ──────────────────────────────────────────────── */

  .tracklist__header {
    display: none;
  }

  .track__lore {
    display: none;
  }

  .track__art,
  .track__art--placeholder {
    display: none;
  }

  .track {
    padding: 12px 8px;
  }

  .track__number {
    width: 24px;
    font-size: var(--font-size-xs);
  }

  .track__title {
    font-size: var(--font-size-md);
  }

  /* ── Player bar — mobile optimized ──────────────────────────────────────── */

  .player-bar {
    flex-direction: column;
    height: auto;
    padding: 8px 16px 12px;
    gap: 8px;
  }

  /* Now-playing art + title hidden — album art shown in header above */
  .player-bar__now-playing {
    display: none;
  }

  .player-bar__center {
    width: 100%;
    order: 1;
  }

  /* Hide volume — use device hardware volume on mobile */
  .player-bar__volume {
    display: none;
  }

  /* Larger touch targets for transport buttons */
  .controls__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  .controls__btn--play {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  /* Progress bar gets more vertical breathing room */
  .progress-container {
    padding: 4px 0;
  }

  .progress-bar {
    height: 5px;
  }

  .progress-bar__thumb {
    width: 14px;
    height: 14px;
    right: -7px;
    /* Always visible on touch — no hover state on mobile */
    opacity: 1;
  }

}