/* ============================================================
   fcc.cc · /pods/ — Mobile chrome
   Editorial dark · cream ink · violet accent · italic-serif display
   Scoped under .pods-mobile. Matches live /pods/ design language.
   ============================================================ */

@import url("/shared/fonts/fonts.css");

.pods-mobile {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* DARK by default — pulled from screenshots of fcc.cc/pods */
  --paper:    #0a0a0a;
  --paper-2:  #121212;
  --paper-3:  #1a1a1a;
  --paper-4:  #232323;
  --ink:      #f5efe3;
  --ink-2:    rgba(245,239,227,.74);
  --ink-3:    rgba(245,239,227,.55);
  --ink-4:    rgba(245,239,227,.32);
  --rule:     rgba(245,239,227,.08);
  --rule-2:   rgba(245,239,227,.14);
  --accent:   #7c5ff0;
  --accent-2: #a08bf7;
  --accent-ink: #fff;
  --accent-wash: rgba(124,95,240,.14);
  --ok:       #6fa66c;
  --warn:     #d4a04a;
  --err:      #d4593f;

  --gutter: 18px;
  --tabbar-h: 64px;
  --mini-h:   62px;
  --art-radius: 8px;

  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: pmob;
}
.pods-mobile[data-theme="dim"] {
  --paper: #131015;
  --paper-2: #1c1820;
  --paper-3: #251f2c;
  --paper-4: #2e2735;
}
.pods-mobile[data-theme="light"] {
  --paper:    #faf6ee;
  --paper-2:  #ffffff;
  --paper-3:  #f0eadc;
  --paper-4:  #e4dcca;
  --ink:      #15110a;
  --ink-2:    rgba(21,17,10,.78);
  --ink-3:    rgba(21,17,10,.6);
  --ink-4:    rgba(21,17,10,.36);
  --rule:     rgba(21,17,10,.10);
  --rule-2:   rgba(21,17,10,.18);
  --accent:   #5840d8;
  --accent-2: #7c5ff0;
  --accent-wash: rgba(88,64,216,.10);
}
.pods-mobile[data-art="rounded"] .pods-art,
.pods-mobile[data-art="rounded"] .pmob-art { border-radius: 8px; }
.pods-mobile[data-art="square"] .pods-art,
.pods-mobile[data-art="square"] .pmob-art { border-radius: 2px; }
.pods-mobile[data-art="circle"] .pods-art,
.pods-mobile[data-art="circle"] .pmob-art { border-radius: 50%; }

.pods-mobile *,
.pods-mobile *::before,
.pods-mobile *::after { box-sizing: border-box; }
.pods-mobile a { color: inherit; text-decoration: none; }
.pods-mobile button {
  font: inherit; color: inherit; background: none;
  border: 0; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.pods-mobile img { display: block; max-width: 100%; }

/* Scroll shell */
.pmob-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) + 8px);
}
.pmob-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pmob-scroll[data-no-tabbar="1"] { padding-bottom: calc(var(--mini-h) + 16px); }
.pmob-scroll[data-no-mini="1"]   { padding-bottom: calc(var(--tabbar-h) + 16px); }
.pmob-scroll[data-no-tabbar="1"][data-no-mini="1"] { padding-bottom: 24px; }

/* ============================================================
   §2  MASTHEAD — "Podcast Picks" italic + tape-archive meta
   ============================================================ */
.pmob-mast {
  padding: 22px var(--gutter) 18px;
  position: relative;
  border-bottom: 1px solid var(--rule-2);
}
.pmob-mast .kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pmob-mast .kicker .sep { color: var(--ink-4); }
.pmob-mast .kicker .desk { color: var(--ink-3); }
.pmob-mast h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(44px, 14.5cqi, 64px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink);
}
.pmob-mast .blurb {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 34ch;
}
.pmob-mast .factstrip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.pmob-mast .factstrip .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-mast .factstrip .v {
  margin-top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--accent);
}

/* ============================================================
   §3  SECTION HEADS
   ============================================================ */
.pmob-sec {
  padding-top: 22px;
}
.pmob-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--gutter) 10px;
  border-bottom: 1px solid var(--rule-2);
  position: relative;
  margin-bottom: 14px;
}
.pmob-sec-head::after {
  content: "";
  position: absolute;
  left: var(--gutter); bottom: -2px;
  height: 3px; width: 32px;
  background: var(--accent);
}
.pmob-sec-head .kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.pmob-sec-head .kicker b {
  color: var(--accent);
  font-weight: 700;
}
.pmob-sec-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.pmob-sec-head .hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pmob-sec-head a.hint:hover { color: var(--accent); }
.pmob-sec-head .head-block { display: flex; flex-direction: column; }

/* Search row */
.pmob-search {
  padding: 14px var(--gutter) 6px;
}
.pmob-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
}
.pmob-search-pill:hover { border-color: var(--ink-4); color: var(--ink-2); }
.pmob-search-pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pmob-search-pill .placeholder { flex: 1; }
.pmob-search-pill .shortcut {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

/* ============================================================
   §4  ART — square album-art with category gradient
   ============================================================ */
.pmob-art {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--art-bg, var(--paper-3));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.94);
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  text-align: center;
  border-radius: var(--art-radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -10px rgba(0,0,0,.6);
}
.pmob-art .glyph {
  font-size: 38%;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.pmob-art[data-size="xs"] { width: 44px; height: 44px; }
.pmob-art[data-size="sm"] { width: 60px; height: 60px; }
.pmob-art[data-size="md"] { width: 86px; height: 86px; }
.pmob-art[data-size="lg"] { width: 120px; height: 120px; }
.pmob-art[data-size="xl"] { width: 100%; aspect-ratio: 1/1; max-width: 320px; }
.pmob-art[data-size="hero"] { width: 100%; aspect-ratio: 1/1; max-width: 280px; }

/* ============================================================
   §5  HERO — Editor's Pick
   ============================================================ */
.pmob-hero {
  padding: 18px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
}
.pmob-hero .kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pmob-hero .kicker b { color: var(--accent); font-weight: 700; }
.pmob-hero h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
}
.pmob-hero .feature {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  margin: 8px 0 14px;
  align-items: start;
}
.pmob-hero .feature .cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--catColor, var(--accent));
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.pmob-hero .feature .cat::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  display: inline-block;
}
.pmob-hero .feature .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 4px;
  text-wrap: balance;
}
.pmob-hero .feature .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.pmob-hero .actions { display: flex; gap: 8px; margin-top: 12px; }

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

/* ============================================================
   §6  STAMP — small caps mono pill
   ============================================================ */
.pmob-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-3);
}
.pmob-stamp.accent { color: var(--accent); }
.pmob-stamp.ok     { color: var(--ok); }
.pmob-stamp.warn   { color: var(--warn); }
.pmob-stamp.solid  { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============================================================
   §7  SHOW LIST — vertical rows on Shelf / Library
   ============================================================ */
.pmob-list { display: flex; flex-direction: column; }
.pmob-show-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pmob-show-row:last-child { border-bottom: 0; }
.pmob-show-row .body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pmob-show-row .cat {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--catColor, var(--ink-3));
}
.pmob-show-row .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}
.pmob-show-row .pub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
}
.pmob-show-row .meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-top: 2px;
}
.pmob-show-row .meta b { color: var(--ink-2); font-weight: 600; }
.pmob-show-row .more {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
}
.pmob-show-row .more:hover { background: var(--paper-2); color: var(--ink); }
.pmob-show-row .more svg { width: 16px; height: 16px; }
.pmob-show-row.compact { grid-template-columns: 60px 1fr auto; padding: 10px var(--gutter); }
.pmob-show-row.compact .title { font-size: 15px; }

/* ============================================================
   §8  EPISODE ROW — with play/download/queue toggles
   ============================================================ */
.pmob-ep-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.pmob-ep-row .play {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule-2);
  display: grid; place-items: center;
  color: var(--ink-2);
  background: var(--paper-2);
  transition: border-color .15s, color .15s;
}
.pmob-ep-row .play:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pmob-ep-row .play svg { width: 12px; height: 12px; fill: currentColor; }
.pmob-ep-row .body { min-width: 0; }
.pmob-ep-row .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}
.pmob-ep-row .meta {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.pmob-ep-row .meta .pl { color: var(--ok); }
.pmob-ep-row .actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pmob-ep-row .actions button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-3);
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.pmob-ep-row .actions button:hover { color: var(--ink); border-color: var(--rule-2); }
.pmob-ep-row .actions button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.pmob-ep-row .actions button svg { width: 14px; height: 14px; fill: currentColor; }

/* Played row de-emphasized */
.pmob-ep-row.played .title { color: var(--ink-3); }
.pmob-ep-row.played .play { background: var(--paper-3); color: var(--ink-4); }

/* In-progress bar */
.pmob-ep-prog {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}
.pmob-ep-prog::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 30%);
  background: var(--accent);
}

/* ============================================================
   §9  CONTINUE LISTENING — with sync chip
   ============================================================ */
.pmob-continue {
  display: flex; flex-direction: column;
}
.pmob-cont-row {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  gap: 14px;
  align-items: center;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.pmob-cont-row .body { min-width: 0; }
.pmob-cont-row .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
}
.pmob-cont-row .sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 2px;
}
.pmob-cont-row .sync {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pmob-cont-row .sync::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.pmob-cont-row .play-mini {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
}
.pmob-cont-row .play-mini svg { width: 12px; height: 12px; fill: currentColor; }
.pmob-cont-row .prog {
  grid-column: 2 / 3;
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}
.pmob-cont-row .prog::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 30%);
  background: var(--accent);
}

/* ============================================================
   §10  MINI PLAYER
   ============================================================ */
.pmob-mini {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--tabbar-h);
  z-index: 30;
  background: color-mix(in srgb, var(--paper-2) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--rule);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: var(--mini-h);
}
.pmob-mini[data-no-tabbar="1"] { bottom: 0; }
.pmob-mini::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--rule);
}
.pmob-mini::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: var(--p, 38%);
  background: var(--accent);
  z-index: 1;
}
.pmob-mini .meta { min-width: 0; }
.pmob-mini .meta .t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.pmob-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;
}
.pmob-mini .ctl {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pmob-mini .ctl button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.pmob-mini .ctl button:hover { color: var(--ink); background: var(--paper-3); }
.pmob-mini .ctl button.play {
  background: var(--ink);
  color: var(--paper);
}
.pmob-mini .ctl button.play:hover { background: var(--ink); filter: brightness(0.95); }
.pmob-mini .ctl svg { width: 18px; height: 18px; fill: currentColor; }
.pmob-mini[data-empty="1"] .meta .t { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pmob-mini[data-empty="1"] .meta .s { color: var(--ink-4); }
.pmob-mini[data-empty="1"] .ctl button.play { background: var(--paper-3); color: var(--ink-3); }
.pmob-mini[data-empty="1"]::after { display: none; }

/* ============================================================
   §11  TAB BAR
   ============================================================ */
.pmob-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) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pmob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-4);
  text-decoration: none;
  position: relative;
}
.pmob-tab svg { width: 22px; height: 22px; }
.pmob-tab .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pmob-tab[aria-current="page"] { color: var(--accent); }
.pmob-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--accent);
}

/* ============================================================
   §12  SHOW DETAIL HEADER
   ============================================================ */
.pmob-show-head {
  padding: 18px var(--gutter) 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-2);
}
.pmob-show-head::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, var(--showColor, var(--accent)) 0%, transparent 100%);
  opacity: 0.18;
  pointer-events: none;
}
.pmob-show-head .crumb {
  position: relative;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pmob-show-head .crumb .sep { color: var(--ink-4); }
.pmob-show-head .art-row {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 6px 0 12px;
}
.pmob-show-head .cat {
  position: relative;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--catColor, var(--accent));
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.pmob-show-head .cat::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  display: inline-block;
}
.pmob-show-head .title {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--ink);
  text-wrap: balance;
}
.pmob-show-head .by {
  position: relative;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
}
.pmob-show-head .desc {
  position: relative;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.pmob-show-head .stats {
  position: relative;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.pmob-show-head .stats .cell .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-show-head .stats .cell .v {
  margin-top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}
.pmob-show-head .stats .cell .v.accent { color: var(--accent); }
.pmob-show-head .actions {
  position: relative;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  gap: 8px;
}
.pmob-show-head .icon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--ink-2);
}
.pmob-show-head .icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.pmob-show-head .icon-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.pmob-show-head .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Show filter chips */
.pmob-show-filters {
  display: flex;
  gap: 6px;
  padding: 14px var(--gutter) 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pmob-show-filters::-webkit-scrollbar { display: none; }
.pmob-show-filters .chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}
.pmob-show-filters .chip[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ============================================================
   §13  EPISODE DETAIL — show-notes view
   ============================================================ */
.pmob-ep-detail {
  padding: 18px var(--gutter) 12px;
}
.pmob-ep-detail .crumb {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.pmob-ep-detail .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.pmob-ep-detail h1 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  text-wrap: balance;
}
.pmob-ep-detail .show-line {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
}
.pmob-ep-detail .meta-row {
  display: flex;
  gap: 12px;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.pmob-ep-detail .meta-row .sep { color: var(--ink-4); }
.pmob-ep-detail .meta-row b { color: var(--ink-2); font-weight: 600; }
.pmob-ep-detail .actions {
  display: grid;
  grid-template-columns: 1fr 44px 44px 44px;
  gap: 8px;
  margin-top: 16px;
}
.pmob-ep-detail .actions .icon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--ink-2);
}
.pmob-ep-detail .actions .icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.pmob-ep-detail .actions .icon-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.pmob-ep-detail .actions .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.pmob-ep-detail .notes {
  margin: 22px calc(-1 * var(--gutter)) 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--rule-2);
}
.pmob-ep-detail .notes-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.pmob-ep-detail .notes h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.pmob-ep-detail .notes p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pmob-ep-detail .chapters {
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.pmob-ep-detail .chapters .chap {
  display: grid;
  grid-template-columns: 56px 1fr 18px;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.pmob-ep-detail .chapters .chap .ts {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pmob-ep-detail .chapters .chap .t {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}

/* ============================================================
   §14  NOW PLAYING (full sheet)
   ============================================================ */
.pmob-np {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 16px var(--gutter) 28px;
  z-index: 100;
  /* On short shells (mobile browser chrome visible + topbar above)
     the fixed-size hero + controls + extras can exceed the available
     height. Allow internal scrolling so the big play button + the
     Queue/Sleep/Save/Share row never get clipped. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pmob-np::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--showColor, var(--accent)) 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
}
.pmob-np .np-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pmob-np .np-top .ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.pmob-np .np-top .ic:hover { background: var(--paper-2); color: var(--ink); }
.pmob-np .np-top .ic svg { width: 20px; height: 20px; fill: currentColor; }
.pmob-np .np-top .label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.pmob-np .np-top .label .v { color: var(--accent); display: block; margin-top: 2px; font-size: 11px; }
.pmob-np .np-art {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 14px 0 18px;
}
.pmob-np .np-art .pmob-art {
  /* Square hero — set both dims directly so the flex parent can't
     squish the height while the width stays wide. Hero shrinks on
     short viewports so the big play button + Queue/Sleep/Save/Share
     row always fit in one screen without forcing a scroll. The other
     NP sections (top/meta/scrub/ctl/extra + paddings + margins) sum
     to ~426px; 24vh hero keeps total under typical shell heights:
       shell 480px (iPhone SE + URL bar)  → 140 + 426 = 566 (scrolls)
       shell 604px (iPhone in Brave)      → 168 + 426 = 594 ✓
       shell 720px (Safari, chrome shown) → 200 + 426 = 626 ✓
       shell 844px (Safari, chrome hidden)→ 203 + 426 = 629 ✓ */
  width:  clamp(140px, 24dvh, 320px);
  height: clamp(140px, 24dvh, 320px);
  aspect-ratio: 1/1;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px var(--rule-2);
}
/* Safari <15.4 doesn't know dvh — vh fallback via @supports. */
@supports not (height: 100dvh) {
  .pmob-np .np-art .pmob-art {
    width:  clamp(140px, 24vh, 320px);
    height: clamp(140px, 24vh, 320px);
  }
}
.pmob-np .np-meta {
  position: relative;
  margin-bottom: 12px;
  text-align: left;
  min-width: 0;
}
.pmob-np .np-meta .ep {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-np .np-meta .t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 4px;
  text-wrap: balance;
}
.pmob-np .np-meta .s {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--accent);
  margin-top: 4px;
}
.pmob-np .np-scrub {
  position: relative;
  margin: 14px 0 4px;
}
.pmob-np .np-scrub .track {
  height: 4px;
  background: var(--rule-2);
  border-radius: 2px;
  position: relative;
}
.pmob-np .np-scrub .track .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--p, 38%);
  background: var(--ink);
  border-radius: 2px;
}
.pmob-np .np-scrub .track .knob {
  position: absolute;
  left: var(--p, 38%);
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.pmob-np .np-scrub .times {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pmob-np .np-ctl {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  gap: 6px;
  align-items: center;
  margin: 12px 0 14px;
}
.pmob-np .np-ctl button {
  height: 56px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
}
.pmob-np .np-ctl button svg { width: 22px; height: 22px; fill: currentColor; }
.pmob-np .np-ctl button.big {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  justify-self: center;
}
.pmob-np .np-ctl button.big svg { width: 32px; height: 32px; }
.pmob-np .np-ctl button.skip {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  position: relative;
}
.pmob-np .np-ctl button.skip svg { width: 30px; height: 30px; opacity: 0.85; }
.pmob-np .np-ctl button.skip .n {
  position: absolute;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pmob-np .np-extra {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.pmob-np .np-extra button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  color: var(--ink-3);
}
.pmob-np .np-extra button:hover { color: var(--ink); }
.pmob-np .np-extra button[aria-current="true"] { color: var(--accent); }
.pmob-np .np-extra button svg { width: 18px; height: 18px; fill: currentColor; }
.pmob-np .np-extra .lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   §15  QUEUE
   ============================================================ */
.pmob-queue-head {
  padding: 18px var(--gutter) 14px;
  border-bottom: 1px solid var(--rule-2);
}
.pmob-queue-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
}
.pmob-queue-head .sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-q-row {
  display: grid;
  grid-template-columns: 22px 60px 1fr 28px 18px;
  gap: 10px;
  align-items: center;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.pmob-q-row .n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.pmob-q-row .body { min-width: 0; }
.pmob-q-row .t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmob-q-row .s {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmob-q-row .d {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pmob-q-row .grip {
  color: var(--ink-4);
  display: grid;
  place-items: center;
  cursor: grab;
}
.pmob-q-row .grip svg { width: 16px; height: 16px; fill: currentColor; }
.pmob-q-row.playing {
  background: var(--accent-wash);
}
.pmob-q-row.playing .t { color: var(--accent); }
.pmob-q-row.playing .n::before { content: "▶ "; color: var(--accent); }

/* ============================================================
   §16  DOWNLOADS
   ============================================================ */
.pmob-dl-summary {
  margin: 14px var(--gutter) 4px;
  padding: 16px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--paper-2);
}
.pmob-dl-summary .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pmob-dl-summary .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-dl-summary .v {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--accent);
}
.pmob-dl-summary .bar {
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.pmob-dl-summary .bar .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--p, 28%);
  background: var(--accent);
}
.pmob-dl-summary .note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ============================================================
   §17  ADD PODCAST (search/RSS/OPML)
   ============================================================ */
.pmob-add-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule-2);
  margin: 0 var(--gutter) 14px;
}
.pmob-add-tabs button {
  flex: 1;
  padding: 12px 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pmob-add-tabs button[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.pmob-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 12px;
}
.pmob-input::placeholder { color: var(--ink-4); font-family: var(--mono); font-size: 12px; }
.pmob-input:focus { outline: 0; border-color: var(--accent); }
.pmob-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pmob-label::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--accent);
}
.pmob-help {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pmob-opml {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed var(--rule-2);
  border-radius: 6px;
  text-align: center;
  background: var(--paper-2);
}
.pmob-opml .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin: 0 auto 10px;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 50%;
}
.pmob-opml .icon svg { width: 22px; height: 22px; fill: currentColor; }
.pmob-opml h4 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.pmob-opml p {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ============================================================
   §18  SETTINGS
   ============================================================ */
.pmob-set-sec {
  padding: 18px var(--gutter) 6px;
}
.pmob-set-sec .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.pmob-set-sec h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
}
.pmob-set-sec .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pmob-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  gap: 16px;
}
.pmob-set-row .label-block { flex: 1; min-width: 0; }
.pmob-set-row .label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.pmob-set-row .hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  margin-top: 2px;
}
.pmob-set-row .val {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
}
.pmob-switch {
  width: 46px; height: 28px;
  border-radius: 14px;
  background: var(--paper-3);
  border: 1px solid var(--rule-2);
  position: relative;
  flex: 0 0 auto;
  transition: background .15s;
}
.pmob-switch::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background: var(--ink-2);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: left .15s, background .15s;
}
.pmob-switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.pmob-switch[aria-pressed="true"]::after { left: 21px; background: #fff; }

.pmob-sync-card {
  margin: 14px var(--gutter) 4px;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-wash);
  position: relative;
  overflow: hidden;
}
.pmob-sync-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in srgb, var(--accent) 5%, transparent) 12px 13px);
  pointer-events: none;
}
.pmob-sync-card .k {
  position: relative;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pmob-sync-card .k::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2.5s ease-in-out infinite;
}
.pmob-sync-card h4 {
  position: relative;
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.pmob-sync-card p {
  position: relative;
  margin: 0 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.pmob-sync-card .devices {
  position: relative;
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.pmob-sync-card .devices .d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}
.pmob-sync-card .devices .d .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

/* ============================================================
   §19  SEARCH RESULTS
   ============================================================ */
.pmob-search-page {
  padding: 16px var(--gutter) 8px;
}
.pmob-search-page .input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.pmob-search-page .input-row .input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper-2);
}
.pmob-search-page .input-row .input svg { color: var(--ink-3); width: 16px; height: 16px; fill: currentColor; }
.pmob-search-page .input-row .input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.pmob-search-page .input-row .input input::placeholder { color: var(--ink-4); }
.pmob-search-page .input-row .cancel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 4px;
}
.pmob-search-page .recent {
  margin-top: 8px;
}
.pmob-search-page .recent .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.pmob-search-page .recent .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pmob-search-page .recent .pill {
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper-2);
}
.pmob-search-page .group-head {
  margin-top: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pmob-search-page .group-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.pmob-search-page .group-head .hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============================================================
   §20  SHEET — generic modal sheet
   ============================================================ */
.pmob-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  /* Above .pmob-np (100) so the bottom sheet can sit on top of the
     Now Playing overlay — sleep-timer, speed picker, and the "..."
     more menu all open while NP is active. */
  z-index: 120;
  display: flex;
  align-items: flex-end;
}
.pmob-sheet {
  width: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule-2);
  border-radius: 16px 16px 0 0;
  padding: 14px 0 24px;
  max-height: 80%;
  overflow-y: auto;
}
.pmob-sheet-handle {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--rule-2);
  margin: 0 auto 14px;
}
.pmob-sheet-head {
  padding: 0 var(--gutter) 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.pmob-sheet-head .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pmob-sheet-head h3 {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.pmob-sheet-rows .row {
  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: 16px;
  color: var(--ink);
}
.pmob-sheet-rows .row .ic { color: var(--ink-3); display: grid; place-items: center; width: 22px; height: 22px; }
.pmob-sheet-rows .row .ic svg { width: 18px; height: 18px; fill: currentColor; }
.pmob-sheet-rows .row.danger { color: var(--err); }

/* ============================================================
   §21  EMPTY / FOOTER
   ============================================================ */
.pmob-foot {
  padding: 24px var(--gutter) 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-top: 1px solid var(--rule);
  margin-top: 18px;
}
.pmob-foot .sep { color: var(--ink-3); margin: 0 8px; }

/* ============================================================
   §X  SHARED TOPBAR — pin pods violet inside the .pods-mobile scope.
   The design's §1 .fcc-mtop* rules were stripped on port-in; we use
   the shared /shared/fcc-unified-topbar.css topbar instead so /pods/
   matches /music/ and /news/ mobile byte-for-byte. The accent var
   lock below ensures the live chip + active-tab underline render in
   pods violet rather than the inherited site preset.
   ============================================================ */
.pods-mobile .fcc-mtop { --accent: #7c5ff0; }

/* ============================================================
   §Y  MOBILE GATE — hide the desktop shell on phones BEFORE boot.js
   has a chance to drop it. Pure-CSS belt-and-braces so the desktop
   chrome (sec-mast, sec-meta-strip, media-now, media-grid, #app,
   #player) never paints on a 700px-wide viewport, even if the script
   gate races the parser. Boot.js still does the proper drop after
   parse so the dead nodes don't sit in the tree.

   Use `100dvh` (dynamic viewport height) for the shell so the bottom
   tab bar + mini-player aren't hidden behind the mobile browser's
   collapsible bottom toolbar (Safari, Chrome, Brave on iOS/Android
   all paint a bottom chrome that overlaps `100vh` content). `100vh`
   ships as a fallback for older browsers that don't know `dvh`.
   ============================================================ */
html[data-ui="mobile"] [data-ui-shell="desktop"] { display: none !important; }
html[data-ui="desktop"] [data-ui-shell="mobile"] { display: none !important; }

/* Hide sitewide chrome that nginx injects via sub_filter — those
   elements are designed for static pages and don't belong inside
   the mobile pods app shell (which has its own tab bar + Now Playing
   surface). Specifically:
     footer.fineprint    — Search (/) · Report Issue · vN.NN footer
     #fcc-twg-btn        — floating ticket-widget FAB
     #fcc-chat-btn       — chatbot launcher FAB */
html[data-ui="mobile"] footer.fineprint,
html[data-ui="mobile"] #fcc-twg-btn,
html[data-ui="mobile"] #fcc-twg-overlay,
html[data-ui="mobile"] #fcc-chat-btn,
html[data-ui="mobile"] #fcc-chat-panel {
  display: none !important;
}
html[data-ui="mobile"], html[data-ui="mobile"] body {
  margin: 0;
  padding: 0;
  height: 100vh;                       /* fallback */
  height: 100svh;                      /* small viewport — always fits */
  height: var(--pmob-shell-h, 100vh);  /* JS-measured (boot.js) — overrides */
  overflow: hidden;
}
/* Body is a flex column so the shared <header data-fcc-topbar> takes its
   own intrinsic height (~96px for the two-row mobile chrome) and the
   shell flex-fills only the REMAINING space. Without this the shell
   was 100% of viewport tall PLUS the topbar above it — total > viewport
   — and the bottom of the shell (mini-player + tab bar) was pushed
   off-screen, hidden behind the mobile browser's bottom toolbar.
   This is the actual root cause, not browser chrome math or dvh. */
html[data-ui="mobile"] body {
  display: flex;
  flex-direction: column;
}
html[data-ui="mobile"] body > [data-fcc-topbar] {
  flex: 0 0 auto;
}
html[data-ui="mobile"] [data-ui-shell="mobile"] {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;          /* unblock flex shrinking below intrinsic content */
  position: relative;     /* so .pmob-tabs absolute is relative to this */
}