/* ============================================================================
 * 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: 6px; --r-sm: 6px; }

  /* ---- 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: 6px 6px 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: 6px;
    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: 6px; }
  .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: 6px;
    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: 6px;
    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: 6px; 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: 6px; }
}

/* ⋯ 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; }
}

/* ============================================================================
 * v4 — "licensing redesign" skin  (2026-06)
 *  - Brand gold corrected to the muted taupe-gold #a69175 (GLOBAL)
 *  - Mobile goes back to rounded (14px), surfaces the BPM · Key · Time spec
 *    line under each track, and promotes License as the primary row action
 *  - Refines header, tab bar, mini-player and cards
 *  - Honours the existing dark / light toggle (html.theme-light)
 * ========================================================================== */

/* ---- 1. Brand gold correction — GLOBAL (desktop + mobile) -------------------
 * Recolors the whole accent family from the old bright gold to the muted
 * taupe-gold. Remove this :root block if you ever want the change scoped to
 * mobile only. (Two stray hard-coded #E8B968 values remain in app.css line 941
 * and coreui-accent.css — say the word and I'll patch those too.) */
:root{
  --accent:#a69175;
  --accent-hot:#bfa987;
  --accent-deep:#8a7559;
}
html.theme-light{
  --accent:#a69175;
  --accent-hot:#b8a486;
  --accent-deep:#7a6446;   /* deepened so gold TEXT stays readable on cream */
}

/* ---- 2. Mobile licensing skin ---------------------------------------------*/
@media (max-width: 860px) {

  /* back to soft, brand-rounded corners (overrides v3's sharp 4px) */
  :root { --r: 6px; --r-sm: 6px; }
  .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,
  .rh-fields .rh-sec, .rh-fields .rh-badge { border-radius: 6px; }
  .ah-search { padding: 13px 15px; }

  /* header: keep pinned, add a soft frosted feel */
  .app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  /* tab bar: docked, gold active, lifted */
  .mobile-tabbar {
    border-radius: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .30);
  }
  .mtab.on { color: var(--accent); }
  html.theme-light .mtab.on { color: var(--accent-deep); }

  /* mini-player: rounded pill, soft shadow */
  .player {
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
  }
  html.theme-light .player { box-shadow: 0 12px 30px rgba(40, 30, 15, .18); }
  .player .np .art { border-radius: 6px; }

  /* ========================================================================
   * Track rows — licensing-first: spec line + License CTA on their own line
   * ====================================================================== */
  .track .art { border-radius: 6px; }

  /* the metadata block wraps to a full-width line beneath the title, aligned
     under the title text (past the 46px art + 11px gap = 57px) */
  .track .tmeta {
    order: 50;
    flex: 1 0 100%;
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding-left: 57px;
  }
  /* BPM / Key / Time become a compact mono spec line (was hidden in v3) */
  .track .tmeta .m {
    display: flex !important;
    align-items: baseline;
    gap: 5px;
  }
  .track .tmeta .m .lbl {
    font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
  }
  .track .tmeta .m .v {
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }

  /* actions push to the right of the spec line; only License stays visible */
  .track .tmeta .actions {
    margin-left: auto;
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: none;
  }
  .track .tmeta .actions .act { display: none !important; }
  .track .tmeta .actions .act.cart {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto; height: 30px; padding: 0 13px;
    border-radius: 6px;
    background: var(--accent);
    color: #1a1408;
  }
  .track .tmeta .actions .act.cart svg { width: 15px; height: 15px; }
  .track .tmeta .actions .act.cart::after {
    content: "License";
    font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  }

  /* keep the ⋯ menu on the title row for the rest (save / queue / download) */
  .row-menu > summary { border-radius: 6px; }
  .row-menu-pop { border-radius: 6px; }

  /* the row is taller now — give the two stacked bars a touch more breathing
     room so the spec line never collides with the fixed footer */
  #spa-main { padding-bottom: 158px; }
}

@media (max-width: 560px) {
  /* tighten the License CTA so the spec line never overflows on small phones */
  .track .tmeta { gap: 11px; }
  .track .tmeta .actions .act.cart { padding: 0 11px; }
}