/* fcc.cc/music — 2026 redesign chrome
 *
 * Loaded alongside the legacy styles.20260215h.css during phases 1–3.
 * EVERY rule in this file is gated under [data-app="music"] and either
 * [data-ui-shell="2026"] or one of the .mus-* class scopes that only
 * exist inside the 2026 shell. So this file is a no-op when the user
 * is on the legacy UI (?ui=classic or no flag).
 *
 * Phase 4 deletes styles.20260215h.css and unwraps these rules so the
 * 2026 chrome becomes the only chrome.
 *
 * Reference: var/www/fcc-library/styles.css (chrome patterns) and
 * design_handoff_fcc_music_redesign/screenshots/01-home.png …
 * 08-settings.png + 15-mobile-home.png … 18-mobile-saved.png.
 */

/* ── Shell visibility gates ──────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] [data-ui-shell="classic"]    { display: none !important; }
[data-app="music"][data-ui="classic"] [data-ui-shell="2026"]    { display: none !important; }
[data-app="music"]:not([data-ui]) [data-ui-shell="2026"]        { display: none !important; }

/* ── Body / canvas (2026 only) ───────────────────────────────────────── *
 * The legacy styles.20260215h.css carries this rule:
 *   .topbar, .topbar-shell, .wrap, body, html {
 *     background: none rgb(0,0,0) !important;
 *   }
 * which forces the body black regardless of specificity. We override
 * the BACKGROUND with our own !important to win that fight.
 *
 * For COLOR we deliberately do NOT use !important — child elements like
 * .mus-rail-item set their own color, and an !important on the body
 * inherits-and-wins against unimportant child rules in some browsers'
 * computed-style tracebacks (observed in Chromium during Phase 1).
 * The legacy `body { color: var(--text); }` is non-important and we
 * beat it with normal specificity.
 */
[data-app="music"][data-ui="2026"],
[data-app="music"][data-ui="2026"] body,
[data-app="music"][data-ui="2026"] html {
  background: var(--bg-canvas) !important;
  background-image: none !important;
}
[data-app="music"][data-ui="2026"] body {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[data-app="music"][data-ui="2026"] [data-ui-shell="2026"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Unified topbar (<header data-fcc-topbar>) lives at the top of the
   * 2026 shell in normal flow, so the shell no longer needs a fixed-
   * header offset. --fcc-music-shell-offset is left here for any
   * legacy app.new.js measurement path that might still set it,
   * with a 0 fallback so an unset variable doesn't reintroduce the
   * old 100px gap. */
  padding-top: var(--fcc-music-shell-offset, 0px);
  box-sizing: border-box;
}

/* ── Top ecosystem bar (kept; restyled to match) ─────────────────────── */
/* The legacy stylesheet pins `.site-header { position: fixed }` at
 * @media (min-width: 901px) but without left/right anchoring — so on
 * 2026 mode the header collapses to width=0 (no anchor, no intrinsic
 * width inside the grid). Pin it left:0/right:0 so the FCC ecosystem
 * nav + brand + theme picker + Sign-in actually render. */
[data-app="music"][data-ui="2026"] [data-ui-shell="2026"] .site-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
[data-app="music"][data-ui="2026"] [data-ui-shell="2026"] .site-header .topbar-content {
  max-width: none;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Main shell grid: rail + main column ─────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
}

/* ── Left rail / sidebar ─────────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-rail {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

[data-app="music"][data-ui="2026"] .mus-rail-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 18px 18px;
}
[data-app="music"][data-ui="2026"] .mus-rail-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bg-canvas);
  background: var(--accent-music);
  padding: 4px 6px;
  border-radius: var(--radius-stamp);
}
[data-app="music"][data-ui="2026"] .mus-rail-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-rail-wordmark-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-top: 2px;
}

[data-app="music"][data-ui="2026"] .mus-rail-section {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 18px 18px 6px;
  font-weight: 600;
}

[data-app="music"][data-ui="2026"] .mus-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px * var(--density-scale)) 18px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: color var(--motion-fast), background var(--motion-fast);
}
[data-app="music"][data-ui="2026"] .mus-rail-item:hover {
  color: var(--text-primary);
  background: var(--bg-surface-2);
}
/* Bump specificity past the base .mus-rail-item rule (and past any
 * legacy `a {…}` rules) by stacking both class names. Equal-specificity
 * source-order should be enough, but Chrome sometimes resolves CSS
 * variables on the wrong matched rule when two rules share specificity
 * and target the same property; the doubled class makes the cascade
 * unambiguous. */
[data-app="music"][data-ui="2026"] .mus-rail-item.mus-rail-item--active {
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border-left-color: var(--accent-music);
}
[data-app="music"][data-ui="2026"] .mus-rail-item-label {
  display: flex;
  flex-direction: column;
}
[data-app="music"][data-ui="2026"] .mus-rail-item-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 1px;
}

[data-app="music"][data-ui="2026"] .mus-rail-footer {
  margin-top: auto;
  padding: 18px;
  border-top: 1px solid var(--border);
}
[data-app="music"][data-ui="2026"] .mus-rail-footer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
[data-app="music"][data-ui="2026"] .mus-rail-footer-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Main column ─────────────────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* ── Top toolbar / search ────────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-toolbar {
  height: 60px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) auto;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  background: var(--bg-canvas);
  position: sticky;
  top: 0;
  z-index: 10;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-crumb-sep { color: var(--text-faint); opacity: 0.5; }
[data-app="music"][data-ui="2026"] .mus-toolbar-crumb-here { color: var(--text-primary); }

[data-app="music"][data-ui="2026"] .mus-toolbar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-search {
  flex: 1 1 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-stamp);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-search-submit {
  flex: 0 0 auto;
  height: 32px;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-search::placeholder {
  color: var(--text-faint);
  font-family: var(--font-mono);
}
[data-app="music"][data-ui="2026"] .mus-toolbar-search:focus {
  outline: 2px solid var(--accent-music);
  outline-offset: 1px;
  border-color: transparent;
}

[data-app="music"][data-ui="2026"] .mus-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
}
[data-app="music"][data-ui="2026"] .mus-toolbar-btn:hover { color: var(--text-primary); border-color: var(--text-faint); }
[data-app="music"][data-ui="2026"] .mus-toolbar-btn--accent,
[data-app="music"][data-ui="2026"] .mus-toolbar-btn--primary {
  background: var(--accent-music);
  color: #fff;
  border-color: var(--accent-music);
}
[data-app="music"][data-ui="2026"] .mus-toolbar-btn--primary:hover {
  background: var(--accent-music);
  color: #fff;
  filter: brightness(1.08);
}
[data-app="music"][data-ui="2026"] .mus-toolbar-btn--primary[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ── Main content well ───────────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-main #app {
  flex: 1;
  min-height: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}

[data-app="music"][data-ui="2026"] .mus-view {
  padding: 28px 32px 96px;
  min-height: calc(100vh - 60px - 96px);
}
[data-app="music"][data-ui="2026"] .mus-view-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-music);
  font-weight: 600;
  margin-bottom: 6px;
}
[data-app="music"][data-ui="2026"] .mus-view-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.0;
  margin: 0 0 14px;
  color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-view-lede {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 0 18px;
}

/* Phase-1 stub block (used by all stub views) */
[data-app="music"][data-ui="2026"] .mus-stub {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-stub-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--label-warn);
  margin-bottom: 8px;
}
[data-app="music"][data-ui="2026"] .mus-stub-text {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── MiniPlayer (bottom-docked default; positions handled in Phase 3) ── */
[data-app="music"][data-ui="2026"] .mus-miniplayer {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
  padding: 10px 18px;
  display: grid;
  /* stamp / meta / vote / controls */
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  z-index: 5;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-vote {
  display: flex;
  align-items: center;
  min-width: 0;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-vote:empty { display: none; }
/* Compact the base vote cluster from stamp.js for the miniplayer's
   tighter envelope. 26px buttons + 34px score = ~86px total. */
[data-app="music"][data-ui="2026"] .mus-miniplayer-vote .mus-vote { height: 26px; }
[data-app="music"][data-ui="2026"] .mus-miniplayer-vote .mus-vote-btn {
  width: 26px;
  height: 26px;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-vote .mus-vote-score {
  padding: 0 8px;
  height: 26px;
  min-width: 34px;
  font-size: 12px;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer[hidden] { display: none; }
[data-app="music"][data-ui="2026"] .mus-miniplayer-stamp {
  width: 56px;
  height: 36px;
  background: var(--accent-music);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  border-radius: var(--radius-stamp);
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-meta {
  min-width: 0;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-title a,
[data-app="music"][data-ui="2026"] .mus-miniplayer-sub a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-title a:hover,
[data-app="music"][data-ui="2026"] .mus-miniplayer-title a:focus-visible,
[data-app="music"][data-ui="2026"] .mus-miniplayer-sub a:hover,
[data-app="music"][data-ui="2026"] .mus-miniplayer-sub a:focus-visible {
  color: var(--accent-music);
  border-bottom-color: currentColor;
  outline: none;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-stamp-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-stamp-link:focus-visible {
  outline: 2px solid var(--accent-music);
  outline-offset: 2px;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-app="music"][data-ui="2026"] .mus-miniplayer-progress {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
[data-app="music"][data-ui="2026"] .mus-mp-time {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
[data-app="music"][data-ui="2026"] #mus-mp-seek {
  width: 100%;
  accent-color: var(--accent-music);
}
[data-app="music"][data-ui="2026"] #mus-audio { display: none; }

/* ── Mobile tab bar (only shown on mobile breakpoint) ────────────────── */
[data-app="music"][data-ui="2026"] .mus-tabbar {
  display: none;
}

/* ── Hatch ribbon for section toppers ────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-hatch-top {
  height: 4px;
  background: var(--ed-hatch);
  opacity: 0.55;
}

/* ── Mono-caps stamp primitive (used everywhere) ─────────────────────── */
[data-app="music"][data-ui="2026"] .mus-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: var(--radius-stamp);
  color: var(--text-dim);
}
[data-app="music"][data-ui="2026"] .mus-stamp--ok    { color: var(--label-ok); }
[data-app="music"][data-ui="2026"] .mus-stamp--warn  { color: var(--label-warn); }
[data-app="music"][data-ui="2026"] .mus-stamp--error { color: var(--label-error); }

/* ── Focus rings (A9: 2px in --accent-music) ─────────────────────────── */
[data-app="music"][data-ui="2026"] :focus-visible {
  outline: 2px solid var(--accent-music);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
 * PHASE 2 — Browse-surface primitives + view layouts
 * ────────────────────────────────────────────────────────────────────── */

/* TapeCard hover lift (the card itself is built inline in lib/tape-card.js;
 * here we add hover affordance for cards wrapped in <a>). */
[data-app="music"][data-ui="2026"] a.mus-tape-link {
  display: inline-block; text-decoration: none; color: inherit;
  transition: transform var(--motion-fast) var(--motion-easing);
}
[data-app="music"][data-ui="2026"] a.mus-tape-link:hover { transform: translateY(-2px); }

/* VoteCluster */
[data-app="music"][data-ui="2026"] .mus-vote {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-stamp);
  background: var(--bg-surface); height: 30px; overflow: hidden;
}
[data-app="music"][data-ui="2026"] .mus-vote-btn {
  width: 30px; height: 30px;
  background: transparent; border: 0;
  color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center;
}
[data-app="music"][data-ui="2026"] .mus-vote-btn:hover { color: var(--text-primary); }
[data-app="music"][data-ui="2026"] .mus-vote-btn--on   { color: var(--accent-music); }
[data-app="music"][data-ui="2026"] .mus-vote-score {
  padding: 0 12px; height: 30px;
  display: grid; place-items: center; min-width: 50px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--accent-music);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}

/* ChainOfCustody */
[data-app="music"][data-ui="2026"] .mus-chain {
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-chain-kicker {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
[data-app="music"][data-ui="2026"] .mus-chain-list { display: flex; flex-direction: column; gap: 0; }
[data-app="music"][data-ui="2026"] .mus-chain-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
  font-family: var(--font-mono); font-size: 11px;
}
[data-app="music"][data-ui="2026"] .mus-chain-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(201, 122, 42, .15); color: var(--accent-music);
  display: grid; place-items: center; font-size: 9px; font-weight: 600;
}
[data-app="music"][data-ui="2026"] .mus-chain-node { color: var(--text-primary); flex: 1; }
[data-app="music"][data-ui="2026"] .mus-chain-node--unknown {
  color: var(--label-warn); font-style: italic;
}
[data-app="music"][data-ui="2026"] .mus-chain-arrow { color: var(--text-faint); }
[data-app="music"][data-ui="2026"] .mus-chain-meta {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); line-height: 1.7;
}

/* LabelMeter */
[data-app="music"][data-ui="2026"] .mus-labels {
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-labels-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10px;
}
[data-app="music"][data-ui="2026"] .mus-labels-kicker {
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
[data-app="music"][data-ui="2026"] .mus-labels-count { color: var(--text-faint); }
[data-app="music"][data-ui="2026"] .mus-labels-row {
  display: grid; grid-template-columns: 70px 1fr 30px; gap: 8px;
  align-items: center; padding: 4px 0;
}
[data-app="music"][data-ui="2026"] .mus-labels-key {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-primary); letter-spacing: 0.06em;
}
[data-app="music"][data-ui="2026"] .mus-labels-bar {
  height: 4px; background: var(--border); border-radius: 1px; overflow: hidden;
}
[data-app="music"][data-ui="2026"] .mus-labels-bar-fill {
  display: block; height: 100%; background: var(--accent-music);
}
[data-app="music"][data-ui="2026"] .mus-labels-num {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); text-align: right;
}
[data-app="music"][data-ui="2026"] .mus-labels-empty {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
  font-style: italic; padding: 6px 0;
}
[data-app="music"][data-ui="2026"] .mus-labels-add {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-music);
  background: transparent; border: 0; cursor: pointer; padding: 0;
  letter-spacing: 0.06em;
}

/* ── Home view layout ── */
[data-app="music"][data-ui="2026"] .mus-home-hero {
  display: grid; grid-template-columns: 280px 1fr; gap: 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-card);
  margin-bottom: 28px; position: relative; overflow: hidden;
}
[data-app="music"][data-ui="2026"] .mus-home-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--ed-hatch); opacity: 0.55;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-home-hero {
    grid-template-columns: 1fr; padding: 18px;
  }
}
[data-app="music"][data-ui="2026"] .mus-home-hero-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint);
}
[data-app="music"][data-ui="2026"] .mus-home-hero-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 64px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 0.98; margin: 6px 0 6px;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-home-hero-title { font-size: 40px; }
}
[data-app="music"][data-ui="2026"] .mus-home-hero-sub {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 14px;
}
[data-app="music"][data-ui="2026"] .mus-home-hero-blurb {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: var(--text-primary); line-height: 1.5;
  border-left: 2px solid var(--accent-music); padding-left: 14px;
  margin: 14px 0 18px; max-width: 560px;
}
[data-app="music"][data-ui="2026"] .mus-home-hero-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}

/* Section header */
[data-app="music"][data-ui="2026"] .mus-section { margin-top: 28px; }
[data-app="music"][data-ui="2026"] .mus-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-bottom: 14px; flex-wrap: wrap;
}
[data-app="music"][data-ui="2026"] .mus-section-tabs { display: flex; gap: 14px; }
[data-app="music"][data-ui="2026"] .mus-section-tab {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--text-dim);
  background: transparent; border: 0; padding: 0 0 4px;
  cursor: pointer; border-bottom: 2px solid transparent;
}
[data-app="music"][data-ui="2026"] .mus-section-tab--active {
  color: var(--text-primary); border-bottom-color: var(--accent-music);
}

/* Tape grid */
[data-app="music"][data-ui="2026"] .mus-tape-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
[data-app="music"][data-ui="2026"] .mus-tape-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  [data-app="music"][data-ui="2026"] .mus-tape-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-tape-grid--4,
  [data-app="music"][data-ui="2026"] .mus-tape-grid {
    grid-template-columns: 1fr;
  }
}
[data-app="music"][data-ui="2026"] .mus-tape-cell { display: flex; flex-direction: column; gap: 6px; }
/* Whole-cell link — strips default <a> styling so the caption + meta
   text underneath the tape don't get an underline and stay readable
   while the entire surface remains clickable. */
[data-app="music"][data-ui="2026"] .mus-tape-cell--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease;
}
[data-app="music"][data-ui="2026"] .mus-tape-cell--link:hover { transform: translateY(-2px); }
[data-app="music"][data-ui="2026"] .mus-tape-cell--link:hover .mus-tape-caption { color: var(--accent-music); }
[data-app="music"][data-ui="2026"] .mus-tape-caption {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-tape-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-dim); letter-spacing: 0.04em;
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Collection rail */
[data-app="music"][data-ui="2026"] .mus-rail-pills {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
[data-app="music"][data-ui="2026"] .mus-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  text-decoration: none; white-space: nowrap;
  background: var(--bg-surface); letter-spacing: 0.04em;
}
[data-app="music"][data-ui="2026"] .mus-pill:hover {
  color: var(--text-primary); border-color: var(--text-faint);
}

/* Mono-tabular row list */
[data-app="music"][data-ui="2026"] .mus-table {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-surface); overflow: hidden;
}
[data-app="music"][data-ui="2026"] .mus-table-head,
[data-app="music"][data-ui="2026"] .mus-table-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px 80px;
  gap: 14px; align-items: center; padding: 9px 14px;
}
[data-app="music"][data-ui="2026"] .mus-table-head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--border); background: var(--bg-surface-2);
}
[data-app="music"][data-ui="2026"] .mus-table-row + .mus-table-row {
  border-top: 1px solid var(--border);
}
[data-app="music"][data-ui="2026"] .mus-table-row:hover { background: var(--bg-surface-2); }
[data-app="music"][data-ui="2026"] .mus-table-cell-mono {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
[data-app="music"][data-ui="2026"] .mus-table-cell-italic {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; color: var(--text-primary);
}

/* Buttons */
[data-app="music"][data-ui="2026"] .mus-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-button);
  background: var(--bg-surface); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
}
[data-app="music"][data-ui="2026"] .mus-btn:hover { border-color: var(--text-faint); }
[data-app="music"][data-ui="2026"] .mus-btn--primary {
  background: var(--accent-music); border-color: var(--accent-music);
  color: #fff; font-weight: 600;
}
[data-app="music"][data-ui="2026"] .mus-btn--primary:hover { filter: brightness(1.08); }

/* Artists letter-grouped index */
[data-app="music"][data-ui="2026"] .mus-artists {
  display: grid; grid-template-columns: 1fr 32px; gap: 14px; position: relative;
}
[data-app="music"][data-ui="2026"] .mus-artists-letter-rail {
  position: sticky;
  top: calc(var(--fcc-music-shell-offset, 100px) + 70px);
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint);
  text-align: center; align-self: start;
}
[data-app="music"][data-ui="2026"] .mus-artists-letter-rail a {
  color: inherit; text-decoration: none; padding: 3px 0;
}
[data-app="music"][data-ui="2026"] .mus-artists-letter-rail a:hover { color: var(--accent-music); }
[data-app="music"][data-ui="2026"] .mus-artists-group { margin-bottom: 24px; }
[data-app="music"][data-ui="2026"] .mus-artists-letter {
  font-family: var(--font-display); font-style: italic;
  font-size: 40px; line-height: 1; margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-artists-letter-count {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
}
[data-app="music"][data-ui="2026"] .mus-artists-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px 18px; margin-top: 12px;
}
@media (max-width: 980px) {
  [data-app="music"][data-ui="2026"] .mus-artists-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-artists-list { grid-template-columns: 1fr; }
  [data-app="music"][data-ui="2026"] .mus-artists-letter-rail { display: none; }
  [data-app="music"][data-ui="2026"] .mus-artists { grid-template-columns: 1fr; }
}
[data-app="music"][data-ui="2026"] .mus-artists-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; padding: 6px 0;
  border-bottom: 1px dotted var(--border);
  font-family: var(--font-display); font-style: italic;
}
[data-app="music"][data-ui="2026"] .mus-artists-row a {
  color: var(--text-primary); text-decoration: none;
}
[data-app="music"][data-ui="2026"] .mus-artists-row a:hover { color: var(--accent-music); }
[data-app="music"][data-ui="2026"] .mus-artists-row-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
  font-style: normal;
}
[data-app="music"][data-ui="2026"] .mus-artists-row-era {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.04em;
  font-style: normal;
}

/* Explore facets */
[data-app="music"][data-ui="2026"] .mus-explore {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
}
@media (max-width: 920px) {
  [data-app="music"][data-ui="2026"] .mus-explore { grid-template-columns: 1fr; }
}
[data-app="music"][data-ui="2026"] .mus-facet { margin-bottom: 18px; }
[data-app="music"][data-ui="2026"] .mus-facet-kicker {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 8px;
}
[data-app="music"][data-ui="2026"] .mus-facet-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
[data-app="music"][data-ui="2026"] .mus-facet-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-stamp);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  background: transparent; cursor: pointer; letter-spacing: 0.04em;
}
[data-app="music"][data-ui="2026"] .mus-facet-chip--on {
  background: var(--accent-music); border-color: var(--accent-music); color: #fff;
}
[data-app="music"][data-ui="2026"] .mus-facet-range {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
[data-app="music"][data-ui="2026"] .mus-facet-range input[type="range"] { flex: 1; }
[data-app="music"][data-ui="2026"] .mus-facet-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  cursor: pointer;
}

/* Most-Played: heat map + ranked list */
[data-app="music"][data-ui="2026"] .mus-mp {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px;
}
@media (max-width: 920px) { [data-app="music"][data-ui="2026"] .mus-mp { grid-template-columns: 1fr; } }
[data-app="music"][data-ui="2026"] .mus-heatmap {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-heatmap-cell {
  aspect-ratio: 1 / 1; border-radius: 2px;
  background: rgba(201, 122, 42, 0.06);
}

/* Saved tabs */
[data-app="music"][data-ui="2026"] .mus-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
[data-app="music"][data-ui="2026"] .mus-tab-btn {
  padding: 10px 18px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-style: italic; font-size: 17px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
[data-app="music"][data-ui="2026"] .mus-tab-btn--active {
  color: var(--text-primary); border-bottom-color: var(--accent-music);
}

/* History sparkline */
[data-app="music"][data-ui="2026"] .mus-spark {
  display: flex; gap: 3px; align-items: flex-end;
  height: 80px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-surface); margin-bottom: 22px;
}
[data-app="music"][data-ui="2026"] .mus-spark-bar {
  flex: 1; background: var(--accent-music); opacity: 0.85;
  border-radius: 1px; min-height: 1px;
}

/* History day grouping */
[data-app="music"][data-ui="2026"] .mus-history-day { margin-bottom: 22px; }
[data-app="music"][data-ui="2026"] .mus-history-day-head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 8px;
}

/* Empty / loading shell */
[data-app="music"][data-ui="2026"] .mus-loading,
[data-app="music"][data-ui="2026"] .mus-empty {
  padding: 40px; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.06em;
  border: 1px dashed var(--border); border-radius: var(--radius-card);
  background: var(--bg-surface);
}

/* Item view + reel animation (Phase 3) */
@keyframes mus-reel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-app="music"][data-ui="2026"] .mus-reel-spokes { animation: none !important; }
}

/* Item view body (jcard + console use this) */
[data-app="music"][data-ui="2026"] .mus-item-view {
  padding: 0 32px 96px;
}

/* Trim editor — collapsible track-trim row. Hidden by default via
   editor.hidden = true; class + :not([hidden]) avoids the trap where an
   inline `display:flex` would override the user-agent stylesheet's
   `[hidden]{display:none}` and leak the editor open. */
[data-app="music"][data-ui="2026"] .mus-trim-editor {
  padding: 10px 12px 14px 60px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
}
[data-app="music"][data-ui="2026"] .mus-trim-editor:not([hidden]) {
  display: flex;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-item-view { padding: 0 14px 110px; }
  [data-app="music"][data-ui="2026"] .mus-item-hero {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  [data-app="music"][data-ui="2026"] .mus-item-body {
    grid-template-columns: 1fr !important;
  }
  [data-app="music"][data-ui="2026"] .mus-deck { padding: 14px !important; }
}

/* Markdown body inside V2 liner notes */
[data-app="music"][data-ui="2026"] .mus-notes-body p { margin: 0 0 14px; text-wrap: pretty; }
[data-app="music"][data-ui="2026"] .mus-notes-body blockquote {
  margin: 18px 0; padding-left: 18px;
  border-left: 2px solid var(--accent-music);
  font-size: 32px; font-style: italic;
  font-family: var(--font-display);
  color: var(--text-primary); line-height: 1.3;
}
[data-app="music"][data-ui="2026"] .mus-notes-body a {
  color: var(--accent-music); text-decoration: underline;
  text-decoration-color: rgba(201,122,42,.4); text-underline-offset: 2px;
}
[data-app="music"][data-ui="2026"] .mus-notes-body code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--bg-surface-2); padding: 1px 5px;
  border-radius: 2px;
}
[data-app="music"][data-ui="2026"] .mus-notes-body ul,
[data-app="music"][data-ui="2026"] .mus-notes-body ol {
  padding-left: 22px; margin: 0 0 14px;
}

/* Player positions (Phase 3 A6) — bottom is default; side rail; floating */
[data-app="music"][data-ui="2026"] .mus-main--player-side {
  position: relative;
}
[data-app="music"][data-ui="2026"] .mus-main--player-side .mus-miniplayer {
  position: fixed; right: 0; top: var(--fcc-music-shell-offset, 100px);
  bottom: 0; width: 320px; left: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  border-left: 1px solid var(--border); border-top: 0;
  padding: 18px;
  z-index: 6;
}
[data-app="music"][data-ui="2026"] .mus-main--player-side .mus-main-content,
[data-app="music"][data-ui="2026"] .mus-main--player-side #app {
  padding-right: 320px;
}
[data-app="music"][data-ui="2026"] .mus-main--player-floating .mus-miniplayer {
  position: fixed;
  bottom: 24px; right: 24px;
  left: auto; top: auto;
  width: 360px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 50px rgba(0, 0, 0, .55);
  cursor: grab;
  z-index: 12;
}
[data-app="music"][data-ui="2026"] .mus-main--player-floating .mus-miniplayer:active { cursor: grabbing; }

/* Settings layout (Phase 3) */
[data-app="music"][data-ui="2026"] .mus-settings {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  margin-top: 14px;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-settings { grid-template-columns: 1fr; }
}
[data-app="music"][data-ui="2026"] .mus-settings-nav {
  position: sticky; top: calc(var(--fcc-music-shell-offset, 100px) + 70px);
  align-self: start;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
}
[data-app="music"][data-ui="2026"] .mus-settings-nav a {
  display: block; padding: 6px 10px; color: var(--text-dim); text-decoration: none;
  border-left: 2px solid transparent;
}
[data-app="music"][data-ui="2026"] .mus-settings-nav a:hover { color: var(--text-primary); }
[data-app="music"][data-ui="2026"] .mus-settings-nav a.mus-settings-nav--active {
  color: var(--text-primary); border-left-color: var(--accent-music);
  background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-settings-section {
  margin-bottom: 32px;
}
[data-app="music"][data-ui="2026"] .mus-settings-section h2 {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; font-weight: 500; margin: 0 0 4px;
}
[data-app="music"][data-ui="2026"] .mus-settings-section .sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.06em;
  margin-bottom: 14px;
}
[data-app="music"][data-ui="2026"] .mus-settings-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 20px;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-settings-row { grid-template-columns: 1fr; }
}
[data-app="music"][data-ui="2026"] .mus-settings-label {
  font-size: 13px; color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-settings-hint {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint); margin-top: 2px;
}

/* Archives editorial entry */
[data-app="music"][data-ui="2026"] .mus-pick-entry {
  display: grid; grid-template-columns: 80px 220px 1fr;
  gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-pick-entry {
    grid-template-columns: 1fr; gap: 12px;
  }
}
[data-app="music"][data-ui="2026"] .mus-pick-date {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--text-faint);
  text-transform: uppercase; line-height: 1.4;
}
[data-app="music"][data-ui="2026"] .mus-pick-body {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--text-primary); line-height: 1.55; max-width: 640px;
}
[data-app="music"][data-ui="2026"] .mus-pick-body-title {
  font-family: var(--font-display); font-style: italic; font-size: 22px;
  font-weight: 500; margin: 0 0 6px;
}
[data-app="music"][data-ui="2026"] .mus-pick-body-sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 8px;
  font-style: normal;
}

/* ──────────────────────────────────────────────────────────────────────
 * MOBILE BREAKPOINT — match /library's hard 700px breakpoint.
 * Sidebar collapses, tab bar appears, miniplayer stays docked above tabs.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  [data-app="music"][data-ui="2026"] .mus-shell {
    grid-template-columns: 1fr;
  }
  [data-app="music"][data-ui="2026"] .mus-rail {
    display: none;
  }
  [data-app="music"][data-ui="2026"] .mus-toolbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 14px;
  }
  [data-app="music"][data-ui="2026"] .mus-toolbar-crumb { display: none; }
  [data-app="music"][data-ui="2026"] .mus-view { padding: 18px 16px 110px; }
  [data-app="music"][data-ui="2026"] .mus-view-title { font-size: 38px; }
  [data-app="music"][data-ui="2026"] .mus-tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-canvas);
    border-top: 1px solid var(--border);
    padding: 6px 0 22px; /* iOS home indicator clearance */
    z-index: 11;
  }
  [data-app="music"][data-ui="2026"] .mus-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-faint);
    text-decoration: none;
    padding: 8px 4px;
    min-height: 44px;  /* A8: hit targets ≥ 44px */
    justify-content: center;
  }
  /* SVG tab-icon MUST be sized unconditionally — without this, when the
     tabbar is visible (any narrow viewport) but data-mobile-c isn't set
     (e.g. landed via ?ui=2026, or auto-detect didn't fire), the SVGs
     scale to fill their flex column = giant icons. The mobile-c block
     further down adds polish (bigger labels, stronger weights). */
  [data-app="music"][data-ui="2026"] .mus-tab .mus-tab-icon {
    width: 22px;
    height: 22px;
    display: block;
  }
  [data-app="music"][data-ui="2026"] .mus-tab--active { color: var(--accent-music); }
  [data-app="music"][data-ui="2026"] .mus-tab-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-app="music"][data-ui="2026"] .mus-miniplayer {
    position: fixed;
    /* Sit FULLY above the tab bar, including iPhone safe-area-inset.
       The previous hardcoded 56px was less than --tabbar-h (64px) and
       ignored the home-indicator inset, so the mini-player's bottom
       rows (artist/seek) got buried under the tab bar when scrolled. */
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    /* Stack above the tab bar (z-index 25 elsewhere) so the playing
       track is always visible. */
    z-index: 30;
    /* Drop BOTH the stamp column (the redundant SBD/UNKN tag — same
       info appears in the source ribbon on the item page and isn't
       worth screen space here) AND the vote column (no room on phone
       — voting still works from the item page's track list and from
       the Guided view). 2-column layout: title/sub meta on the left,
       transport on the right, leaving more room for both. */
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 16px;
    gap: 12px;
  }
  [data-app="music"][data-ui="2026"] .mus-miniplayer-stamp { display: none; }
  [data-app="music"][data-ui="2026"] .mus-miniplayer-vote { display: none; }
  /* Bump text sizes — bigger now that we have the freed stamp width. */
  [data-app="music"][data-ui="2026"] .mus-miniplayer-title {
    font-size: 18px;
    line-height: 1.2;
  }
  [data-app="music"][data-ui="2026"] .mus-miniplayer-sub {
    font-size: 12px;
    margin-top: 3px;
  }
  [data-app="music"][data-ui="2026"] .mus-mp-time {
    font-size: 11px;
  }
  /* Bigger transport buttons — 44px square is the iOS tap-target
     floor. Increase gap so they don't feel cramped either. */
  [data-app="music"][data-ui="2026"] .mus-miniplayer-controls {
    gap: 4px;
  }
  [data-app="music"][data-ui="2026"] .mus-miniplayer-controls .mus-toolbar-btn {
    width: 44px;
    height: 44px;
    font-size: 14px;
    padding: 0;
  }
  /* Center "play" visually since it's the action button. */
  [data-app="music"][data-ui="2026"] #mus-mp-play {
    font-size: 16px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Guided Tracks "now playing" view (#/guided)
 *
 * Three-column stage with a cover-derived backdrop:
 *   ┌─────────── backdrop (blurred cover) ───────────┐
 *   │  PREVIOUSLY   │   NOW PLAYING (huge)   │  UP NEXT  │
 *   └────────────────────────────────────────────────┘
 *
 * Falls back to a single column on mobile.
 * ────────────────────────────────────────────────────────────────────── */
[data-app="music"][data-ui="2026"] .mus-guided {
  position: relative;
  display: grid;
  /* Mode bar spans the full width, then the 3 column stage below. */
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2.4fr) minmax(220px, 1fr);
  gap: 28px;
  align-items: start;
  padding: 32px 18px 60px;
  min-height: 60vh;
  isolation: isolate;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-stamp);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-surface-2) 75%, transparent);
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn:first-child { border-left: 0; }
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn:focus-visible {
  outline: 2px solid var(--accent-music);
  outline-offset: -2px;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn--on {
  background: var(--accent-music);
  color: #fff;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn--on:hover {
  background: var(--accent-music);
  color: #fff;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
}
[data-app="music"][data-ui="2026"] .mus-guided-modebar-btn-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}
[data-app="music"][data-ui="2026"] .mus-guided-backdrop {
  position: absolute;
  inset: -20px -40px;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(48px) saturate(1.15);
  opacity: 0.42;
  transform: scale(1.08);
}
[data-app="music"][data-ui="2026"] .mus-guided::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-surface) 70%, transparent) 0%,
    color-mix(in srgb, var(--bg-surface) 92%, transparent) 100%);
  pointer-events: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-stage {
  display: grid;
  gap: 14px;
  align-content: start;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.06;
  margin: 6px 0 2px;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-title a:hover,
[data-app="music"][data-ui="2026"] .mus-guided-track-title a:focus-visible {
  color: var(--accent-music);
  border-bottom-color: currentColor;
  outline: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--text-dim);
  margin: 0;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-byline a:hover,
[data-app="music"][data-ui="2026"] .mus-guided-track-byline a:focus-visible {
  color: var(--accent-music);
  border-bottom-color: currentColor;
  outline: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
[data-app="music"][data-ui="2026"] .mus-guided-track-source a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
[data-app="music"][data-ui="2026"] .mus-guided-track-source a:hover,
[data-app="music"][data-ui="2026"] .mus-guided-track-source a:focus-visible {
  color: var(--accent-music);
  outline: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-art {
  margin-top: 18px;
  max-width: 380px;
  border-radius: var(--radius-stamp);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
}
[data-app="music"][data-ui="2026"] .mus-guided-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
[data-app="music"][data-ui="2026"] .mus-guided-side {
  display: grid;
  gap: 10px;
  align-content: start;
}
[data-app="music"][data-ui="2026"] .mus-guided-side-empty {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  font-style: italic;
}
[data-app="music"][data-ui="2026"] .mus-guided-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: guided-row;
}
[data-app="music"][data-ui="2026"] .mus-guided-list li { counter-increment: guided-row; }
[data-app="music"][data-ui="2026"] .mus-guided-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-surface-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
[data-app="music"][data-ui="2026"] .mus-guided-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-guided-row-thumb--blank {
  display: grid;
  place-items: center;
  background: var(--bg-surface);
}
[data-app="music"][data-ui="2026"] .mus-guided-row-meta { min-width: 0; }
[data-app="music"][data-ui="2026"] .mus-guided-row-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-app="music"][data-ui="2026"] .mus-guided-row-title a,
[data-app="music"][data-ui="2026"] .mus-guided-row-byline a {
  color: inherit;
  text-decoration: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-row-title a:hover,
[data-app="music"][data-ui="2026"] .mus-guided-row-title a:focus-visible,
[data-app="music"][data-ui="2026"] .mus-guided-row-byline a:hover,
[data-app="music"][data-ui="2026"] .mus-guided-row-byline a:focus-visible {
  color: var(--accent-music);
  outline: none;
}
[data-app="music"][data-ui="2026"] .mus-guided-row-byline {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1000px) {
  [data-app="music"][data-ui="2026"] .mus-guided {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  [data-app="music"][data-ui="2026"] .mus-guided-art { max-width: 280px; }
}

/* ============================================================
   Variant C · Console mobile — hide existing desktop chrome on
   mobile-c viewports. The desktop unified topbar (.umb) and the
   music in-shell toolbar (.mus-toolbar, .mus-rail, the editorial
   meta-bar) all render above the mobile masthead by default; we
   suppress them so the .fcc-mtop + .mmob-mast surface owns the
   entire chrome below 700px.

   Outside the @media wrapper so data-mobile-c hides desktop chrome
   at every viewport — useful when a tester resizes devtools wider
   than 700px without dropping the URL flag. The hidden state is
   triggered solely by [data-mobile-c="1"], which only ever lands
   when the user explicitly asked for Variant C.
   ============================================================ */
/* .site-rail is INTENTIONALLY NOT hidden — the design (HANDOFF §9)
   specifies that the .fcc-mtop topbar's [grid] icon opens the
   existing data-fcc-site-rail drawer. The rail's own CSS collapses
   it to 0 width by default at mobile widths and reveals it when the
   .is-mobile-open class is added by the topbar JS. Hiding it here
   would break that path — which is exactly what happened during
   the original mobile-c port and forced me to invent a parallel
   nav sheet (since reverted). */
html[data-mobile-c="1"] .umb,
html[data-mobile-c="1"] .mus-toolbar,
html[data-mobile-c="1"] .mus-rail,
html[data-mobile-c="1"] .mus-shell-rail,
html[data-mobile-c="1"] .fcc-meta-bar,
html[data-mobile-c="1"] [data-ui-shell="2026"] .site-header {
  display: none !important;
}
/* The /music/ 2026 shell reserves vertical space via
   --fcc-music-shell-offset (set by app.new.js measureFccTopOffset).
   On mobile-c that offset is meaningless — zero it out so the
   .mmob-mast sits flush against the .fcc-mtop. */
html[data-mobile-c="1"] {
  --fcc-music-shell-offset: 0 !important;
}

/* Strengthen the existing .mus-tabbar tab labels on mobile-c.
   Reported as too faint to read at a glance — bump contrast +
   add icons + bump size + add a safe-area inset so iOS Safari's
   home indicator doesn't sit on top of the labels. */
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar {
  height: auto;
  min-height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
}
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar .mus-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 10px;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
}
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar .mus-tab .mus-tab-icon {
  width: 22px; height: 22px;
  display: block;
  color: inherit;
}
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar .mus-tab .mus-tab-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
}
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar .mus-tab.mus-tab--active {
  color: var(--accent);
}
html[data-mobile-c="1"] [data-ui-shell="2026"] .mus-tabbar .mus-tab.mus-tab--active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--accent);
}

/* ============================================================
   Variant C · Console mobile — ported from
   design_handoff_music_mobile/music-mobile.css §2-§19.

   Activation: <html> must carry [data-app="music"][data-ui="2026"]
   (existing) AND [data-mobile-c="1"] (set by lib/boot.js when the
   ?ui=2026-mobile flag is present). Wrapping @media gate at 700px
   ensures the desktop chrome is untouched. Promotion (Phase 6)
   drops the boot-flag check so all mobile users get Variant C.

   §1 (shared mobile topbar) lives in /shared/fcc-unified-topbar.css.
   Container queries (§19) drive deck/queue layout at 600/760-wide
   viewports; the view-layer mobile branches add class="mmob-root"
   wrappers with container-type: inline-size so they fire.
   ============================================================ */

/* Token alias map: handoff CSS speaks --paper / --ink / --accent etc;
   /music/'s tokens.css speaks --bg-canvas / --text-primary / --accent-music.
   This block makes the handoff CSS work verbatim by mapping one onto
   the other. Same alias would work on any /music/ surface — but only
   the [data-mobile-c="1"] scope opts in so the desktop chrome's
   declarations aren't perturbed. */
html[data-mobile-c="1"] {
  --paper:        var(--bg-canvas);
  --paper-2:      var(--bg-surface);
  --paper-3:      var(--bg-surface-2);
  --paper-4:      color-mix(in srgb, var(--bg-surface-2) 70%, var(--bg-canvas));
  --ink:          var(--text-primary);
  --ink-2:        color-mix(in srgb, var(--text-primary) 78%, transparent);
  --ink-3:        var(--text-dim);
  --ink-4:        var(--text-faint);
  --rule:         var(--border);
  --rule-2:       color-mix(in srgb, var(--border) 160%, transparent);
  --accent:       var(--accent-music);
  --accent-2:     color-mix(in srgb, var(--accent-music) 70%, white);
  --accent-wash:  color-mix(in srgb, var(--accent-music) 14%, transparent);
  --accent-ink:   #fbf6e6;
  --label-ok:     #7a8b3a;
  --label-warn:   #d2a050;
  --label-err:    #c33a2a;
  --hatch:        var(--ed-hatch);
  --serif:        var(--font-display);
  --sans:         var(--font-body);
  --mono:         var(--font-mono);
  --gutter:       18px;
  --gutter-lg:    22px;
  --tabbar-h:     64px;
  --mini-h:       62px;
}
html[data-mobile-c="1"][data-theme="light"],
html[data-mobile-c="1"][data-mode="light"],
html[data-mobile-c="1"].fcc-v2-light {
  --accent-ink:   #fbf6e6;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {

/* ============================================================
   Surface shell — scroll, mini-player, tab bar are absolutely
   positioned relative to the html[data-mobile-c="1"] root so the surface
   stays inside a phone frame.
   ============================================================ */
.mmob-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: calc(var(--tabbar-h) + var(--mini-h) + 12px);
}
.mmob-scroll::-webkit-scrollbar { width: 0; height: 0; }
.mmob-scroll[data-no-tabbar="1"] { padding-bottom: calc(var(--mini-h) + 16px); }
.mmob-scroll[data-no-mini="1"]   { padding-bottom: calc(var(--tabbar-h) + 16px); }
.mmob-scroll[data-no-tabbar="1"][data-no-mini="1"] { padding-bottom: 24px; }

/* Every mobile view's outermost element gets this class. The page-level
   scroll happens at the .mus-main / #app container, not on .mmob-root,
   so we need bottom-padding here so the last bit of content (liner
   notes, footer, end-of-rail) isn't buried under the absolutely-
   positioned mini-player + tab bar overlays. */
.mmob-root {
  padding-bottom: calc(var(--tabbar-h) + var(--mini-h) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ============================================================
/* ============================================================
   §2 MASTHEAD — italic-serif "music" wordmark + tape-archive meta
   ============================================================ */
.mmob-mast {
  padding: 16px var(--gutter) 14px;
  position: relative;
  border-bottom: 1px solid var(--ink);
}
.mmob-mast::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hatch);
  opacity: 0.55;
}
.mmob-mast-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mmob-mast h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(36px, 13cqi, 56px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink);
  flex: 0 0 auto;
}
.mmob-mast .ornament {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  flex: 0 0 auto;
  align-self: center;
  margin-top: 4px;
}
.mmob-mast .sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: 1;
  text-align: right;
  min-width: 0;
}
.mmob-mast .sub b { color: var(--ink-3); font-weight: 600; }
.mmob-mast .crumb {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  gap: 8px;
  align-items: center;
}
.mmob-mast .crumb .sep { color: var(--ink-4); }

/* ============================================================
   §3 SEARCH ROW — mono inline pill, opens explore on tap
   ============================================================ */
.mmob-search {
  padding: 14px var(--gutter) 6px;
}
.mmob-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
}
.mmob-search-pill:hover,
.mmob-search-pill:focus-visible {
  border-color: var(--ink-4);
  color: var(--ink-2);
}
.mmob-search-pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
.mmob-search-pill .placeholder { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmob-search-pill .shortcut {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* ============================================================
   §4 SECTION HEADS
   ============================================================ */
.mmob-sec {
  margin-top: 22px;
}
.mmob-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--gutter) 10px;
  border-bottom: 1px solid var(--ink);
  position: relative;
  margin-bottom: 14px;
}
.mmob-sec-head::after {
  content: "";
  position: absolute;
  left: var(--gutter); bottom: -2px;
  height: 3px; width: 32px;
  background: var(--accent);
}
.mmob-sec-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.mmob-sec-head .hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mmob-sec-head a.hint:hover { color: var(--accent); }

/* Pills row (horiz scroll) */
.mmob-pills {
  display: flex;
  gap: 6px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mmob-pills::-webkit-scrollbar { display: none; }
.mmob-pill {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  text-transform: none;
}
.mmob-pill[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.mmob-pill:hover { border-color: var(--ink-4); }

/* ============================================================
   §5 HERO — Riker's Pick / Featured tape
   ============================================================ */
.mmob-hero {
  margin: 14px var(--gutter) 0;
  border-radius: 6px;
  padding: 18px;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background:
    radial-gradient(120% 100% at 0% 0%, var(--hero-c, var(--paper-2)) 0%, var(--paper-2) 70%),
    var(--paper-2);
}
.mmob-hero[data-tinted="1"] {
  background:
    linear-gradient(160deg, var(--hero-c) 0%, color-mix(in srgb, var(--hero-c) 60%, var(--paper)) 70%),
    var(--paper);
  color: var(--hero-ink, #f8efd8);
  border-color: color-mix(in srgb, var(--hero-c) 30%, var(--rule));
}
.mmob-hero[data-tinted="1"]::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 32px, rgba(0,0,0,.05) 32px 33px);
  pointer-events: none;
}
.mmob-hero .kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mmob-hero .kicker .ink { color: var(--accent); opacity: 1; }
.mmob-hero h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 8.5cqi, 42px);
  line-height: 0.98;
  text-wrap: balance;
}
.mmob-hero .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.mmob-hero .blurb {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  opacity: 0.92;
  text-wrap: pretty;
  max-width: 32ch;
}
.mmob-hero-art {
  margin: 14px -4px 0;
  display: flex;
  justify-content: center;
}
.mmob-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.mmob-hero .stamps {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.mmob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.mmob-btn:hover { border-color: var(--ink-3); }
.mmob-btn:active { transform: scale(0.98); }
.mmob-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mmob-btn.primary:hover { filter: brightness(1.08); }
.mmob-btn.ghost {
  border-style: solid;
  background: transparent;
  color: var(--ink-2);
}
.mmob-btn.ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.mmob-btn svg { width: 13px; height: 13px; }

/* Stamp — mono caps small label */
.mmob-stamp {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-3);
}
.mmob-stamp.ok    { color: var(--label-ok); }
.mmob-stamp.warn  { color: var(--label-warn); }
.mmob-stamp.error { color: var(--label-err); }
.mmob-stamp.accent { color: var(--accent); }
.mmob-stamp.solid {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   §6 TAPE ROWS — list cards across variants
   ============================================================ */
.mmob-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mmob-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.mmob-row:last-child { border-bottom: 0; }
.mmob-row .body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mmob-row .body h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}
.mmob-row .body .when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.mmob-row .body .where {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.mmob-row .body .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.mmob-row .body .meta .score { color: var(--accent); font-weight: 600; }
.mmob-row.compact { grid-template-columns: 60px 1fr; padding: 10px var(--gutter); gap: 12px; }
.mmob-row.compact .body h3 { font-size: 15px; }

/* Continue listening — has a progress bar */
.mmob-prog {
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
}
.mmob-prog::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 35%);
  background: var(--accent);
}

/* ============================================================
   §7 MINI PLAYER — bottom-docked, floating, collapsed
   ============================================================ */
.mmob-mini {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--tabbar-h);
  z-index: 30;
  background: color-mix(in srgb, var(--paper-2) 96%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: var(--mini-h);
}
.mmob-mini[data-no-tabbar="1"] { bottom: 0; border-bottom: 0; }
.mmob-mini::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent) 0 6px, transparent 6px 12px);
  opacity: 0.6;
}
.mmob-mini .stamp {
  width: 44px; height: 36px;
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--mp-c, var(--accent));
}
.mmob-mini .meta { min-width: 0; }
.mmob-mini .meta .t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.mmob-mini .meta .s {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.mmob-mini .meta .barwrap {
  margin-top: 6px;
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  position: relative;
}
.mmob-mini .meta .barwrap::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 42%);
  background: var(--accent);
}
.mmob-mini .ctl {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mmob-mini .ctl button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.mmob-mini .ctl button:hover { color: var(--ink); background: var(--paper-3); }
.mmob-mini .ctl button.play {
  background: var(--accent);
  color: #fff;
}
.mmob-mini .ctl button.play:hover { filter: brightness(1.08); background: var(--accent); color: #fff; }
.mmob-mini .ctl svg { width: 18px; height: 18px; }

/* FLOATING variant */
.mmob-mini[data-pos="floating"] {
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 14px 38px -16px rgba(0,0,0,.7);
}
.mmob-mini[data-pos="floating"][data-no-tabbar="1"] { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.mmob-mini[data-pos="floating"]::before { display: none; }

/* COLLAPSED variant — just a thin strip */
.mmob-mini[data-pos="collapsed"] {
  min-height: 36px;
  padding: 4px 12px;
  grid-template-columns: 1fr auto;
}
.mmob-mini[data-pos="collapsed"] .stamp { display: none; }
.mmob-mini[data-pos="collapsed"] .meta .s { display: none; }
.mmob-mini[data-pos="collapsed"] .meta .barwrap { display: none; }
.mmob-mini[data-pos="collapsed"] .meta .t { font-size: 12.5px; }
.mmob-mini[data-pos="collapsed"] .ctl button:not(.play) { display: none; }
.mmob-mini[data-pos="collapsed"] .ctl button.play { width: 28px; height: 28px; }
.mmob-mini[data-pos="collapsed"] .ctl button.play svg { width: 12px; height: 12px; }

/* Nothing-playing state */
.mmob-mini[data-empty="1"] .stamp { background: var(--paper-3); color: var(--ink-3); }
.mmob-mini[data-empty="1"] .meta .t { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mmob-mini[data-empty="1"] .meta .s { color: var(--ink-4); }
.mmob-mini[data-empty="1"] .meta .barwrap { display: none; }
.mmob-mini[data-empty="1"] .ctl button.play { background: var(--paper-3); color: var(--ink-3); }

/* ============================================================
   §8 TAB BAR — Home · Explore · Listen · Saved
   ============================================================ */
.mmob-tabs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  height: var(--tabbar-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mmob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-4);
  text-decoration: none;
  position: relative;
}
.mmob-tab svg { width: 20px; height: 20px; }
.mmob-tab .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mmob-tab[aria-current="page"] {
  color: var(--accent);
}
.mmob-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--accent);
}

/* ============================================================
   §9 EXPLORE / SAVED — additional shells
   ============================================================ */
.mmob-segctl {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin: 0 var(--gutter) 14px;
}
.mmob-segctl button {
  flex: 1;
  padding: 12px 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mmob-segctl button[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.mmob-tally {
  padding: 6px var(--gutter) 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.mmob-tally b { color: var(--ink); font-weight: 600; }

.mmob-facetbar {
  display: flex;
  gap: 6px;
  padding: 0 var(--gutter) 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mmob-facetbar::-webkit-scrollbar { display: none; }
.mmob-facet {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  white-space: nowrap;
}
.mmob-facet[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Ranked list (Explore) */
.mmob-rank {
  display: grid;
  grid-template-columns: 28px 80px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--rule);
}
.mmob-rank:first-of-type { border-top: 0; }
.mmob-rank .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  font-weight: 500;
}
.mmob-rank .body h4 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.15;
}
.mmob-rank .body .meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.mmob-rank .body .meta2 {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.mmob-rank .play {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.mmob-rank .play:hover { color: var(--accent); border-color: var(--accent); }
.mmob-rank .play svg { width: 11px; height: 11px; }

/* Saved · playlists */
.mmob-pl {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.mmob-pl-art {
  width: 60px; height: 60px;
  border-radius: 4px;
  background: var(--pl-c, var(--paper-3));
  position: relative;
  overflow: hidden;
}
.mmob-pl-art::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px);
}
.mmob-pl .body h4 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
}
.mmob-pl .body .meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.mmob-pl .body .meta-2 {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* ============================================================
   §10 VARIANT B (dense) — horizontal scroll rails
   ============================================================ */
.mmob-rail {
  padding: 0 0 18px;
}
.mmob-rail-strip {
  display: flex;
  gap: 12px;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.mmob-rail-strip::-webkit-scrollbar { display: none; }
.mmob-rail-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mmob-rail-card .cap {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}
.mmob-rail-card .meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.mmob-rail-card.lg { width: 240px; }

/* Collection chip (sized poster) */
.mmob-coll {
  flex: 0 0 auto;
  width: 180px;
  height: 96px;
  scroll-snap-align: start;
  border-radius: 6px;
  background: var(--cc, var(--paper-3));
  color: var(--ci, var(--ink));
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.mmob-coll::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 5px, transparent 5px 9px);
}
.mmob-coll .k {
  position: relative;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
}
.mmob-coll .t {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.05;
  text-wrap: balance;
}
.mmob-coll .m {
  position: relative;
  font-family: var(--mono);
  font-size: 9.5px;
  opacity: 0.78;
}

/* ============================================================
   §11 VARIANT C (console) — now-playing first
   ============================================================ */
.mmob-console {
  padding: 0 var(--gutter) 16px;
}
.mmob-deck {
  margin: 14px 0 0;
  padding: 18px 16px;
  background:
    linear-gradient(160deg, var(--deck-c, #3a2a1a), color-mix(in srgb, var(--deck-c, #3a2a1a) 70%, #000)),
    var(--paper-2);
  color: var(--deck-ink, #f0e6c8);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--deck-c, #3a2a1a) 35%, var(--rule));
}
.mmob-deck::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 36px, rgba(0,0,0,.07) 36px 37px);
  pointer-events: none;
}
.mmob-deck-window {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 8px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.28);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
}
.mmob-deck-reel {
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.6) 0 30%, transparent 31%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0deg 12deg, transparent 12deg 24deg),
    #111;
  margin: 0 auto;
  position: relative;
  border: 1px solid rgba(255,255,255,.1);
}
.mmob-deck-reel::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
}
.mmob-deck-reel::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.mmob-deck-reel.spin { animation: mmob-spin 4s linear infinite; }
@keyframes mmob-spin { to { transform: rotate(360deg); } }

.mmob-deck-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 0;
}
.mmob-deck-info .kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mmob-deck-info .t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  text-wrap: balance;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mmob-deck-info .a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mmob-deck-wave {
  position: relative;
  height: 36px;
  background: rgba(0,0,0,.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.mmob-deck-wave svg { width: 100%; height: 100%; display: block; }
.mmob-deck-wave .head {
  position: absolute;
  top: -2px; bottom: -2px;
  left: var(--p, 38%);
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.mmob-deck-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.mmob-deck-ctl {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: center;
}
.mmob-deck-ctl button {
  height: 44px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  color: inherit;
}
.mmob-deck-ctl button:hover { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.18); }
.mmob-deck-ctl button.play {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mmob-deck-ctl button svg { width: 16px; height: 16px; }

.mmob-deck-vu {
  display: flex;
  gap: 4px;
  margin-top: 14px;
}
.mmob-deck-vu .ch {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 22px;
}
.mmob-deck-vu .bar {
  flex: 1;
  background: var(--accent);
  border-radius: 1px;
}

/* ============================================================
   §12 ITEM PAGE (Listen) — collapsible header, tabs, list
   ============================================================ */
.mmob-item-head {
  padding: 18px var(--gutter) 16px;
  background:
    linear-gradient(180deg, var(--hero-c, var(--paper-2)), color-mix(in srgb, var(--hero-c, var(--paper-2)) 30%, var(--paper)) 90%, var(--paper) 100%),
    var(--paper);
  color: var(--hero-ink, var(--ink));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.mmob-item-head .crumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 14px;
}
.mmob-item-head .crumb a:hover { color: var(--accent); }
.mmob-item-head .art {
  display: flex;
  justify-content: center;
  padding: 6px 0 12px;
}
.mmob-item-head .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 9cqi, 40px);
  line-height: 0.95;
  margin: 6px 0 2px;
  text-wrap: balance;
}
.mmob-item-head .venue {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  opacity: 0.85;
}
.mmob-item-head .ribbon {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mmob-item-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px var(--gutter);
}
.mmob-item-stats .cell {
  text-align: center;
  padding: 10px 4px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-2);
}
.mmob-item-stats .cell .k {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mmob-item-stats .cell .v {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin-top: 2px;
}

.mmob-item-actions {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  gap: 8px;
  padding: 0 var(--gutter) 16px;
}
.mmob-item-actions .icon {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: grid; place-items: center;
  color: var(--ink-2);
  /* iOS Safari + most mobile browsers stamp a default light/white
     background on bare <button> elements via -webkit-appearance.
     Without these resets the icons rendered as blank white squares
     because the (correctly drawn) SVG was the same color as the
     default button background. */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
.mmob-item-actions .icon:hover { color: var(--ink); border-color: var(--ink-3); }
.mmob-item-actions .icon:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mmob-item-actions .icon[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.mmob-item-actions .icon svg { width: 18px; height: 18px; display: block; }

.mmob-item-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--gutter);
}
.mmob-item-tabs button {
  padding: 12px 14px 10px;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mmob-item-tabs button[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.mmob-set { padding: 16px var(--gutter) 4px; }
.mmob-set-head {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--accent);
  margin-bottom: 8px;
}
.mmob-track {
  display: grid;
  grid-template-columns: 24px 1fr 36px auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--serif);
}
.mmob-track .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.mmob-track .t {
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mmob-track .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mmob-track .mmob-track-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  margin: -10px 0;
  background: none;
  border: 0;
  color: var(--ink-4);
  cursor: pointer;
  padding: 0;
  transition: color .12s ease;
}
.mmob-track .mmob-track-save svg {
  width: 16px;
  height: 16px;
  display: block;
}
.mmob-track .mmob-track-save:hover,
.mmob-track .mmob-track-save:focus-visible { color: var(--ink); }
.mmob-track .mmob-track-save[aria-pressed="true"] { color: var(--accent); }
.mmob-track.playing .t { color: var(--accent); }

/* ============================================================
   §13 EMPTY STATES
   ============================================================ */
.mmob-empty {
  padding: 32px var(--gutter);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  margin: 16px var(--gutter);
}
.mmob-empty .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.mmob-empty h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.mmob-empty p {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============================================================
   §14 SHEET — used for filter/sitemap
   ============================================================ */
.mmob-sheet-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  animation: mmob-fade .18s ease;
}
@keyframes mmob-fade { from { opacity: 0; } to { opacity: 1; } }
.mmob-sheet {
  width: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  padding: 14px 0 24px;
  max-height: 86%;
  overflow-y: auto;
  animation: mmob-up .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes mmob-up { from { transform: translateY(24%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mmob-sheet-handle {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--rule);
  margin: 0 auto 14px;
}
.mmob-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--gutter) 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
.mmob-sheet-head .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mmob-sheet-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

/* ============================================================
   §15 RADIO DIAL — Variant C Explore hero
   Tape-archive tuning. Year ticks + source carousel.
   ============================================================ */
.mmob-dial {
  margin: 8px var(--gutter) 18px;
  padding: 16px;
  background:
    linear-gradient(160deg, #2a1a10, #150e0a),
    var(--paper-2);
  color: #f0e6c8;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-2);
}
.mmob-dial::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,0,0,.08) 28px 29px);
  pointer-events: none;
}
.mmob-dial .head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mmob-dial .head .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,230,200,.6);
}
.mmob-dial .head .v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-2);
}
.mmob-dial-window {
  position: relative;
  background: rgba(0,0,0,.32);
  border-radius: 4px;
  padding: 14px 12px 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.mmob-dial-readout {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,230,200,.65);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.mmob-dial-readout .now { color: var(--accent-2); }

.mmob-dial-ticks {
  position: relative;
  height: 36px;
  overflow: hidden;
}
.mmob-dial-ticks svg {
  position: absolute;
  left: var(--shift, 0px);
  top: 0;
  display: block;
  height: 100%;
}
.mmob-dial-needle {
  position: absolute;
  left: 50%; top: -4px; bottom: -4px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transform: translateX(-50%);
  z-index: 2;
}
.mmob-dial-needle::before,
.mmob-dial-needle::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
}
.mmob-dial-needle::before { top: -8px; border-bottom-color: var(--accent); }
.mmob-dial-needle::after  { bottom: -8px; border-top-color: var(--accent); }

.mmob-dial-sources {
  position: relative;
  display: flex;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mmob-dial-sources::-webkit-scrollbar { display: none; }
.mmob-dial-sources button {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: rgba(255,255,255,.03);
  color: rgba(240,230,200,.7);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.mmob-dial-sources button[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================================================
   §16 QUEUE STRIP — Variant C Saved/queue first
   Compact queue list with current playing inline
   ============================================================ */
.mmob-queue-now {
  margin: 6px var(--gutter) 0;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.mmob-queue-now .stamp {
  width: 48px; height: 36px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.mmob-queue-now .meta { min-width: 0; }
.mmob-queue-now .meta .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1px;
}
.mmob-queue-now .meta .t {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.mmob-queue-now .meta .a {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmob-queue-now .ctl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mmob-queue-now .ctl .head { color: var(--accent); }

.mmob-queue-list {
  margin-top: 10px;
}
.mmob-q-row {
  display: grid;
  grid-template-columns: 22px 1fr auto 28px;
  gap: 10px;
  align-items: center;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
}
.mmob-q-row .n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.mmob-q-row .t {
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmob-q-row .t .sub {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.mmob-q-row .d {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mmob-q-row .grip {
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 12px;
  cursor: grab;
}
.mmob-q-row.playing {
  background: var(--accent-wash);
  border-top-color: var(--accent);
}
.mmob-q-row.playing .t { color: var(--accent); font-weight: 600; }
.mmob-q-row.playing .n::before { content: "▶ "; color: var(--accent); }

/* ============================================================
   §17 SEGUE MARKER — Variant C listen-page track list
   ============================================================ */
.mmob-segue {
  position: relative;
  text-align: center;
  margin: 6px 0;
  height: 14px;
}
.mmob-segue::before {
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.mmob-segue span {
  position: relative;
  background: var(--paper);
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Track row variant — inline now-playing within list */
.mmob-track.inline-deck {
  display: block;
  padding: 14px var(--gutter);
  background:
    linear-gradient(160deg, var(--deck-c, #3a2a1a), color-mix(in srgb, var(--deck-c, #3a2a1a) 70%, #000));
  color: var(--deck-ink, #f0e6c8);
  border-bottom: 0;
  margin: 6px 0;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.mmob-track.inline-deck::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(0,0,0,.07) 30px 31px);
  pointer-events: none;
}
.mmob-track.inline-deck .head-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mmob-track.inline-deck .head-row .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.mmob-track.inline-deck .head-row .d {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.7;
}
.mmob-track.inline-deck .t-row {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 10px;
}
.mmob-track.inline-deck .wave-row {
  position: relative;
  height: 24px;
  background: rgba(0,0,0,.28);
  border-radius: 2px;
  overflow: hidden;
}
.mmob-track.inline-deck .wave-row svg { width: 100%; height: 100%; }
.mmob-track.inline-deck .wave-row .head {
  position: absolute; top: -2px; bottom: -2px;
  left: var(--p, 38%);
  width: 2px;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
}
.mmob-track.inline-deck .time-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  opacity: 0.78;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   §18 SETTINGS — Display section · option cards
   ============================================================ */
.mmob-set-section {
  padding: 22px var(--gutter) 6px;
}
.mmob-set-section .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.mmob-set-section h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
}
.mmob-set-section .sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.mmob-set-row {
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.mmob-set-row .label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
}
.mmob-set-row .hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.mmob-set-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.mmob-set-card {
  padding: 12px 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.mmob-set-card .viz {
  height: 56px;
  border-radius: 4px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.mmob-set-card .viz .phone-frame {
  position: absolute;
  inset: 6px;
  background: var(--paper);
  border-radius: 3px;
}
.mmob-set-card .viz .phone-frame::after {
  content: "";
  position: absolute; left: 0; right: 0;
  background: var(--accent);
}
.mmob-set-card[data-vis="dock"]      .viz .phone-frame::after { bottom: 0; height: 22%; }
.mmob-set-card[data-vis="floating"]  .viz .phone-frame::after { bottom: 8px; left: 6px; right: 6px; height: 18%; border-radius: 3px; }
.mmob-set-card[data-vis="collapsed"] .viz .phone-frame::after { bottom: 0; height: 10%; }
.mmob-set-card[data-vis="dark"]      .viz .phone-frame { background: #0e0c09; }
.mmob-set-card[data-vis="light"]     .viz .phone-frame { background: #f4ecd8; }
.mmob-set-card[data-vis="auto"]      .viz .phone-frame { background: linear-gradient(90deg, #0e0c09 50%, #f4ecd8 50%); }
.mmob-set-card[data-vis="dark"]      .viz .phone-frame::after,
.mmob-set-card[data-vis="light"]     .viz .phone-frame::after,
.mmob-set-card[data-vis="auto"]      .viz .phone-frame::after { display: none; }
.mmob-set-card[data-vis="compact"]  .viz::before,
.mmob-set-card[data-vis="regular"]  .viz::before,
.mmob-set-card[data-vis="comfy"]    .viz::before {
  content: "";
  position: absolute; left: 10px; right: 10px; top: 8px; bottom: 8px;
  background: repeating-linear-gradient(180deg, var(--ink-3) 0 1px, transparent 1px var(--rh, 6px));
  opacity: 0.5;
}
.mmob-set-card[data-vis="compact"] .viz::before { --rh: 4px; }
.mmob-set-card[data-vis="regular"] .viz::before { --rh: 6px; }
.mmob-set-card[data-vis="comfy"]   .viz::before { --rh: 9px; }

.mmob-set-card .name { color: var(--ink-2); text-transform: uppercase; font-weight: 700; letter-spacing: 0.16em; font-size: 9.5px; }
.mmob-set-card[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
}
.mmob-set-card[aria-current="true"] .name { color: var(--accent); }

.mmob-set-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}
.mmob-set-toggle .label-block { display: flex; flex-direction: column; gap: 2px; }
.mmob-set-toggle .hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-style: normal;
}
.mmob-set-switch {
  width: 44px; height: 26px;
  border-radius: 13px;
  background: var(--paper-3);
  position: relative;
  flex: 0 0 auto;
  transition: background .15s;
  border: 1px solid var(--rule);
}
.mmob-set-switch::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  background: var(--ink-3);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .15s, background .15s;
}
.mmob-set-switch[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.mmob-set-switch[aria-pressed="true"]::after {
  transform: translateX(18px);
  background: #fff;
}

/* ============================================================
   Container queries — bump density on wider phones / tablet
   ============================================================ */
@container mmob (min-width: 600px) {
  html[data-mobile-c="1"] { --gutter: 28px; }
  .mmob-mast h1 { font-size: 72px; }
  .mmob-hero h2 { font-size: 48px; }
  .mmob-row { grid-template-columns: 160px 1fr; }
}
@container mmob (min-width: 760px) {
  html[data-mobile-c="1"] { --gutter: 36px; }
  .mmob-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
  }
  .mmob-hero-art { margin: 0; justify-content: flex-start; }
  .mmob-mast h1 { font-size: 96px; }
}

}

/* Reduced motion — applies regardless of viewport (motion preference is viewport-independent). */
@media (prefers-reduced-motion: reduce) { .mmob-deck-reel.spin { animation: none; } }
html[data-mobile-c="1"][data-reduced-motion="1"] .mmob-deck-reel.spin { animation: none; }
html[data-mobile-c="1"][data-reduced-motion="1"] .mmob-deck-reel { position: relative; }
html[data-mobile-c="1"][data-reduced-motion="1"] .mmob-deck-reel::after { background: var(--accent); border-color: var(--accent); }

/* High-contrast labels — boosts lineage stamps and small mono labels on
   tinted backgrounds so the SBD / Sony PCM-D50 / FLAC / verified chips in
   the item-page ribbon and the deck "Now playing · SBD" kicker stay
   legible in low light + on darker tinted hero colors. Mobile-only;
   user-toggled via Settings → Display → Console. */
html[data-mobile-c="1"][data-high-contrast-labels="1"] .mmob-stamp {
  font-weight: 700;
  border-width: 1.5px;
}
html[data-mobile-c="1"][data-high-contrast-labels="1"] .mmob-item-head .mmob-stamp {
  color: var(--hero-ink, var(--ink));
  border-color: var(--hero-ink, var(--ink));
  background: color-mix(in srgb, var(--hero-c, var(--paper)) 50%, transparent);
}
html[data-mobile-c="1"][data-high-contrast-labels="1"] .mmob-deck .kicker,
html[data-mobile-c="1"][data-high-contrast-labels="1"] .mmob-track.inline-deck .head-row .n {
  font-weight: 700;
  color: var(--deck-ink, var(--ink));
  opacity: 1;
}