/* ============================================================================
 * Listn — mobile "app skin" (v3)
 * Loaded AFTER app.css. Phone-width only; desktop untouched.
 *  - Fixed header (top) + fixed footer (player + tab bar) that never scroll
 *  - Track rows reflow to fit the screen: art + title + a single ⋯ menu
 *    (the four licensing icons collapse into that menu, freeing space)
 *  - Grey (not gold) mini-player, smaller titles, no carousel arrows, 4px corners
 * ========================================================================== */

@media (max-width: 860px) {

  /* Sharp 4px corners (flips radius tokens; circles keep their own 50%) */
  :root { --r: 4px; --r-sm: 4px; }

  /* ---- FIXED top header — always pinned, solid ---- */
  .app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 54px; padding: 0 14px; gap: 10px;
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  /* push the page below the fixed header (auth/app pages only) */
  body.is-auth .content { padding-top: 54px; }

  /* ---- FIXED full-width bottom tab bar ---- */
  .mobile-tabbar {
    left: 0; right: 0; bottom: 0;
    height: 58px;
    border: 0; border-top: 1px solid var(--border);
    border-radius: 4px 4px 0 0;
    background: var(--surface);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .26);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtab { gap: 4px; }
  .mtab svg { width: 22px; height: 22px; }
  .mtab span { font-size: 10px; }
  .mtab.on { color: var(--accent); }

  /* ---- FIXED grey mini-player, just above the tab bar ---- */
  .player {
    left: 10px; right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    height: 58px; padding: 8px 12px; gap: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
  }
  html.theme-light .player { background: #fff; border-color: var(--border); }
  .player .np { width: auto; flex: 1; gap: 10px; }
  .player .np .art { width: 42px; height: 42px; border-radius: 4px; }
  .player .scrub-wave, .player .time, .player .seekwrap, .player .times,
  .player .lic-player, .player .dl-player, .player .chat-player,
  .player .p-stems, .player .vol, #queueBtn { display: none !important; }

  /* room for the two bottom bars */
  #spa-main { padding-bottom: 150px; }

  /* ============================================================
   * Track rows — fit the screen, collapse actions into a ⋯ menu
   * ========================================================== */
  .track, .track.numbered {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 11px;
    padding: 8px 2px;
    position: relative;
    overflow: visible;
  }
  .track .tnum { display: none; }                 /* number eats width; drop it */
  .track .art { width: 46px; height: 46px; flex: none; }
  .track .ti { flex: 1 1 auto; min-width: 0; }    /* title takes the room, truncates */
  .track .ti .t a { font-size: 16px; }            /* a little smaller */
  .track .wave-wrap { display: none !important; } /* waveform + tags off on mobile */
  .track .tmeta { flex: none; gap: 0; }
  .track .tmeta .m { display: none !important; }  /* BPM / Key / Time off */
  .track .actions .act { display: none !important; } /* the 4 spread icons → moved to ⋯ */

  /* the ⋯ trigger */
  .row-menu { display: block; flex: none; position: relative; }
  .row-menu > summary {
    list-style: none; width: 38px; height: 38px; border-radius: 4px;
    display: grid; place-items: center; color: var(--text-dim); cursor: pointer;
  }
  .row-menu > summary::-webkit-details-marker { display: none; }
  .row-menu > summary:hover { background: var(--surface-2); color: var(--text); }
  .row-menu > summary svg { width: 20px; height: 20px; }

  /* the dropdown */
  .row-menu-pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
    min-width: 186px; padding: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    display: flex; flex-direction: column; gap: 1px;
  }
  html.theme-light .row-menu-pop { background: #fff; }
  .row-menu-pop button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 11px; border: 0; border-radius: 4px; cursor: pointer;
    background: transparent; color: var(--text-dim);
    font-size: 13.5px; font-weight: 600; text-align: left;
  }
  .row-menu-pop button:hover { background: var(--surface-3); color: var(--text); }
  .row-menu-pop button svg { width: 17px; height: 17px; flex: none; }

  /* ---- Smaller song titles elsewhere too ---- */
  .track .ti .t a { font-size: 16px; }

  /* ---- No carousel arrows (rows are touch-scrolled) ---- */
  .pl-arrow { display: none !important; }

  /* ---- 4px on remaining hard-coded rounded blocks ---- */
  .card, .fmenu, .fdrop > summary, .la-card, .sub-row, .qa,
  .btn-solid, .btn-ghost, .mk-solid, .mk-ghost, .ah-search,
  .auth-card, .coll-hero, .detail-art, .up-rights, .set-form { border-radius: 4px; }
}

/* ⋯ menu is mobile-only — hidden on desktop */
.row-menu { display: none; }

@media (max-width: 560px) {
  .player { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  #spa-main { padding-bottom: 146px; }
}

/* ---- v3.1: kill the empty scroll-void, tighten gutters, menu flip ---- */
@media (max-width: 860px) {
  /* don't force a full-viewport-tall content box on short pages (created the
     big empty band you could scroll into) — let content define its height */
  body.is-auth .content { min-height: auto; }

  /* tighter mobile gutters so content uses the full width and sticks top-left */
  .disc { padding: 8px 16px 80px !important; }
  .lib { padding: 14px 16px 90px !important; }
  .coll-page { padding: 8px 16px 90px !important; }

  /* empty states read as intentional, not a void */
  .empty { padding: 54px 20px; }

  /* ⋯ menu flips upward when there's no room below (never hides under player) */
  .row-menu.menu-up .row-menu-pop { top: auto; bottom: calc(100% + 4px); }
}

/* ---- v3.2: Library top real-estate + compact playlist strip ---- */
@media (max-width: 860px) {
  /* promo banner off on phones — declutter and reclaim the top */
  .upsell { display: none !important; }

  /* playlist strip starts right under the header */
  .lib { padding-top: 8px !important; }
  .lib .collections { margin-top: 0 !important; margin-bottom: 16px !important; }

  /* hard-constrain the cards to a small square strip so they can NEVER
     balloon into a tall empty band (overrides any aspect-ratio sizing) */
  .collections { gap: 10px; align-items: flex-start; }
  .collections .coll {
    flex: 0 0 132px !important;
    width: 132px !important;
    height: 132px !important;
    min-height: 0 !important;
    max-height: 132px !important;
    aspect-ratio: auto !important;
  }
  .coll .meta .n { font-size: 14px; }
}

/* ---- v3.3: versions/stems BELOW the row + kill top real-estate ---- */
@media (max-width: 860px) {
  /* the row is flex now, so the expand panel (was grid-column:1/-1) must
     wrap to its own full-width line and sit BELOW the track */
  .track, .track.numbered { flex-wrap: wrap; }
  .track .expand-panel {
    flex: 1 0 100%;
    width: 100%;
    order: 99;          /* always last → drops under the row */
    margin-top: 8px;
    grid-column: auto;  /* neutralise the grid-only rule */
  }

  /* content sits right under the fixed 54px header — no top real-estate.
     Not tied to the is-auth body class, so it holds even on a stale view cache */
  .content { padding-top: 54px !important; }
  #spa-main { padding-top: 0 !important; margin-top: 0 !important; }
  .coll-page, .lib, .disc, .wrap, .staff, .new-rel { margin-top: 0 !important; }
  .coll-page { padding-top: 8px !important; }
  .coll-page > .back-link { margin-top: 0 !important; }
  /* first child of the page never adds its own top gap */
  #spa-main > div > *:first-child { margin-top: 0 !important; }
}