/* ═══════════════════════════════════════════════════════════════════════════
   design-system.css — Podcast.ma "Zellige" component layer
   Loaded LAST: main.css → design-v2.css → mobile.css → ads.css → THIS.

   Everything here is expressed in tokens.css variables. `!important` is used
   only where mobile.css's legacy pre-block still carries one — each of those
   is marked  << !mobile-override >>  with the line it fights.
   Logical properties (margin-inline / inset-inline / padding-inline) are used
   throughout so RTL works with no mirrored stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   0. RE-ASSERT tokens that mobile.css :root hardcodes after tokens.css loads
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --app-header-h: 70px;
  --glass-bg:     var(--surface-glass);
  --glass-border: var(--border);
  --transition-slide: var(--dur-3) var(--ease-in-out);
}

/* ──────────────────────────────────────────────────────────────────────────
   1. BASE
   ────────────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  background: var(--surface);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  transition: background var(--dur-3) var(--ease-in-out),
              color var(--dur-3) var(--ease-in-out);
}

/* Arabic: the stack falls through per glyph, so this also fixes Arabic
   podcast titles sitting inside French/English pages. */
[lang="ar"], [dir="rtl"], .is-arabic {
  font-family: var(--font-arabic);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}
[lang="ar"] h1, [dir="rtl"] h1,
[lang="ar"] h2, [dir="rtl"] h2,
[lang="ar"] h3, [dir="rtl"] h3 { line-height: var(--lh-snug); letter-spacing: 0; }
/* Arabic has no case — never uppercase it, the transform is a no-op that
   only breaks the letter-spacing rhythm. */
[lang="ar"] [class*="label"], [dir="rtl"] [class*="label"],
[dir="rtl"] .section-eyebrow, [dir="rtl"] .footer-v2-col h4,
[dir="rtl"] .drawer-section-label, [dir="rtl"] .ads-label {
  text-transform: none;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-interactive); }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }

/* ── Focus: one visible ring everywhere, replacing `outline:none` ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;      /* !reduced-motion guard */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. THE ZELLIGE MOTIF — mask-based so one asset serves both themes
   ────────────────────────────────────────────────────────────────────────── */
.has-motif { position: relative; isolation: isolate; }
.has-motif::before,
.hero-v2::after,
.page-hero::after,
.radio-hero::after,
.footer-v2::before,
.search-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  background-color: var(--motif-ink);
  -webkit-mask-image: var(--motif-zellige);
  mask-image: var(--motif-zellige);
  -webkit-mask-size: var(--motif-size) var(--motif-size);
  mask-size: var(--motif-size) var(--motif-size);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: .30;
}
/* Fade the lattice out toward the content so it never fights cover art. */
/* The lattice is anchored to the inline-start corner and dissolves before it
   reaches the cover art. --_mx flips that corner for RTL. */
.hero-v2::after {
  opacity: .34;
  --fade: radial-gradient(120% 130% at var(--_mx) 0%, #000 0%, rgba(0,0,0,.45) 34%, transparent 62%);
  -webkit-mask-image: var(--motif-zellige), var(--fade);
  mask-image: var(--motif-zellige), var(--fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: var(--motif-size) var(--motif-size), cover;
  mask-size: var(--motif-size) var(--motif-size), cover;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
}
.page-hero::after, .radio-hero::after {
  opacity: .30;
  --fade: radial-gradient(110% 150% at var(--_mx) 0%, #000 0%, rgba(0,0,0,.4) 40%, transparent 70%);
  -webkit-mask-image: var(--motif-zellige), var(--fade);
  mask-image: var(--motif-zellige), var(--fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: var(--motif-size) var(--motif-size), cover;
  mask-size: var(--motif-size) var(--motif-size), cover;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
}
.search-empty::before { opacity: .22; }
.footer-v2::before {
  inset: 0 0 auto 0;
  block-size: 120px;
  opacity: .30;
  --fade: linear-gradient(to bottom, #000, transparent);
  -webkit-mask-image: var(--motif-zellige), var(--fade);
  mask-image: var(--motif-zellige), var(--fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: var(--motif-size) var(--motif-size), cover;
  mask-size: var(--motif-size) var(--motif-size), cover;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
}
.hero-v2, .page-hero, .radio-hero, .footer-v2, .search-empty { position: relative; }

/* HARD RULE: the motif never enters an ad container or a cover-art surface. */
.ads-unit::before, .ads-unit::after,
.ads-anchor::before, .ads-anchor::after,
.adsbygoogle::before, .adsbygoogle::after,
.pc-img::after, .ec-bg::after { content: none !important; } /* !motif opt-out */

/* A 1px zellige rule for section headers — the motif as punctuation. */
.section-header-v2::after {
  content: '';
  flex: 1;
  block-size: 1px;
  margin-inline-start: var(--sp-4);
  background: linear-gradient(to var(--_dir, right),
              var(--border-strong), transparent);
  align-self: center;
}
[dir="rtl"] .section-header-v2::after { --_dir: left; }

/* ──────────────────────────────────────────────────────────────────────────
   3. LAYOUT SHELL
   ────────────────────────────────────────────────────────────────────────── */
.container, .container-xl {
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.main-content {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-10);
  min-block-size: 60vh;
}
.page-sections-v2 { padding-top: var(--sp-4); }
.section-v2, .home-section { margin-block-end: var(--sp-10); }
@media (min-width: 768px) {
  .section-v2, .home-section { margin-block-end: var(--sp-12); }
  .main-content { padding-bottom: var(--sp-16); }
}

/* ──────────────────────────────────────────────────────────────────────────
   4. HEADER / NAVBAR
   ────────────────────────────────────────────────────────────────────────── */
.site-header {
  block-size: var(--app-header-h);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-block-end: 1px solid var(--border);
  box-shadow: none;
  transition: background var(--dur-3) var(--ease-in-out),
              border-color var(--dur-3) var(--ease-in-out),
              box-shadow var(--dur-3) var(--ease-in-out);
}
.site-header.scrolled {
  background: var(--surface-glass) !important;  /* !mobile-override: design-v2.css:1450 hardcodes rgba(8,7,18,.97) */
  box-shadow: var(--shadow-2) !important;       /* !mobile-override: same rule */
  border-block-end-color: var(--border-strong);
}
.navbar-v2 {
  block-size: var(--app-header-h);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: var(--sp-4);
}
.navbar-brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap-min); }
.brand-text { font-size: var(--fs-lg); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.brand-dot { color: var(--accent-text); }
.navbar-center { gap: var(--sp-1); }
.nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  min-block-size: 38px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.nav-link:hover { color: var(--text-primary); background: var(--surface-raised); }
.nav-link.active { color: var(--accent-text); background: var(--accent-soft); font-weight: var(--fw-semibold); }
.navbar-end { gap: var(--sp-2); }

.btn-icon {
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-icon:hover { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border); }
.btn-icon svg { inline-size: 19px; block-size: 19px; }

.nav-submit-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 38px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: 0;
  box-shadow: var(--shadow-accent);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nav-submit-pill:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Language switcher — was 34x20 (fails WCAG 2.5.8). Now 44px hit area. */
.lang-switcher { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pill); }
.lang-btn {
  min-inline-size: 34px;
  min-block-size: 32px;
  padding-inline: var(--sp-2);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);            /* was #55557a @ 2.56:1 → now 9.78:1 */
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lang-btn::after { content: ''; position: absolute; inset: -6px; }  /* 44px hit area */
.lang-btn:hover { color: var(--text-primary); }
.lang-btn--active, .lang-btn.active { background: var(--accent); color: var(--text-on-accent); }

.nav-live-dot { color: var(--danger); }
.nav-live-dot::before,
.dot-pulse { background: var(--danger); }

/* ──────────────────────────────────────────────────────────────────────────
   5. DRAWER + BOTTOM NAV
   ────────────────────────────────────────────────────────────────────────── */
.app-drawer {
  inline-size: 300px;
  background: var(--surface-overlay);
  border-inline-end: 1px solid var(--border);
  box-shadow: var(--shadow-4);
}
[dir="rtl"] .app-drawer { border-inline-end: 0; border-inline-start: 1px solid var(--border); }
.drawer-overlay { background: var(--scrim); }
.drawer-header { padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--border); }
.drawer-brand { font-size: var(--fs-lg); font-weight: var(--fw-black); min-block-size: var(--tap-min); display: inline-flex; align-items: center; }
.drawer-close { inline-size: var(--tap-min); block-size: var(--tap-min); border-radius: var(--r-pill); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary); }
.drawer-section { padding-block: var(--sp-3); border-block-end: 1px solid var(--border); }
.drawer-section:last-of-type { border-block-end: 0; }
.drawer-section-label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);          /* was rgba(255,255,255,.3) @ 2.58:1 → 5.19:1 */
  padding-inline: var(--sp-5);
  margin-block-end: var(--sp-2);
}
.drawer-link {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-inline-start: 3px solid transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.drawer-link:hover { background: var(--surface-raised); color: var(--text-primary); }
.drawer-link.active { color: var(--accent-text); background: var(--accent-soft); border-inline-start-color: var(--accent); }
.drawer-lang { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.drawer-lang-btn {
  flex: 1; min-block-size: var(--tap-min);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.drawer-lang-btn.lang-btn--active, .drawer-lang-btn.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.drawer-lang-btn::after { content: none; }

#bottom-nav, .bottom-nav {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-block-start: 1px solid var(--border);
}
.bnav-item {
  min-block-size: var(--tap-min);
  color: var(--text-muted);          /* was rgba(255,255,255,.45) @ 4.48:1 → 6.12:1 */
  gap: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
.bnav-item.active, .bnav-item[aria-current="page"] { color: var(--accent-text); }
#bottom-nav .bnav-item, .bottom-nav .bnav-item { min-inline-size: 0; flex: 1 1 0; padding-inline: 2px; overflow: hidden; }
.bnav-label {
  font-size: var(--fs-3xs); font-weight: var(--fw-medium); letter-spacing: 0; color: inherit;
  display: block; text-align: center; line-height: 1.2;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnav-icon { inline-size: 22px; block-size: 22px; }

/* ──────────────────────────────────────────────────────────────────────────
   6. HERO
   ────────────────────────────────────────────────────────────────────────── */
.hero-v2 {
  min-block-size: 0;
  justify-content: flex-start;
  padding-block: var(--sp-8) var(--sp-10);
  padding-inline: var(--gutter);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at var(--_mx) 0%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(90% 80% at calc(100% - var(--_mx)) 8%, var(--secondary-soft) 0%, transparent 58%);
}
@media (min-width: 768px) {
  .hero-v2 { padding-block: var(--sp-16) var(--sp-12); }
}
@media (max-width: 767px) {
  .hero-v2 { padding-block: var(--sp-6) var(--sp-8); }
}
.hero-split { max-inline-size: var(--content-max); margin-inline: auto; inline-size: 100%; }
.hero-text-col { text-align: start; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--secondary-text);
  margin-block-end: var(--sp-4);
}
.eyebrow-dot { background: var(--secondary); }
.hero-h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  margin-block-end: var(--sp-4);
}
.hero-h1 .gradient-text, .gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Gradient text is decorative colour only — keep a solid fallback for
   forced-colors / print so the headline never disappears. */
@media (forced-colors: active), print {
  .gradient-text { -webkit-text-fill-color: currentColor; color: var(--text-primary); }
}
.hero-sub-v2 {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  max-inline-size: 46ch;
  margin-block-end: var(--sp-6);
}
.hero-search-v2 { max-inline-size: 520px; margin-block-end: var(--sp-6); }
#hero-search, #search-page-input, .navbar-search input,
.hero-search-v2 input, .search-page-bar input, .search-overlay-input {
  inline-size: 100%;
  min-block-size: 52px;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-12) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-interactive);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.hero-search-v2 input::placeholder,
.search-page-bar input::placeholder,
.search-overlay-input::placeholder { color: var(--text-muted); }
#hero-search:focus, #search-page-input:focus,
.hero-search-v2 input:focus, .search-page-bar input:focus, .search-overlay-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  outline: none;
}
.hero-search-v2 svg { inset-inline-start: var(--sp-4); inset-inline-end: auto; color: var(--text-muted); }

.hero-stats, .hero-stats-v2 { display: flex; gap: var(--sp-6); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hero-stats::-webkit-scrollbar, .hero-stats-v2::-webkit-scrollbar { display: none; }
.hero-stat { flex: 0 0 auto; }
.hero-stat-n { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--accent-text); letter-spacing: var(--ls-tight); }
.hero-stat-l { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }

.hero-cats-v2, .hero-cats-strip { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--sp-1); }
.hero-cats-v2::-webkit-scrollbar, .hero-cats-strip::-webkit-scrollbar { display: none; }
.cat-pill-v2 {
  min-block-size: 40px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cat-pill-v2:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); transform: none; }

/* ──────────────────────────────────────────────────────────────────────────
   7. SECTION HEADERS
   ────────────────────────────────────────────────────────────────────────── */
.section-header-v2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
  padding-inline: 0;
}
.section-title-v2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex: 0 0 auto;
}
.section-title-v2 .section-emoji { font-size: 1em; }
.section-link-v2 {
  order: 3;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  white-space: nowrap;
}
.section-link-v2:hover { color: var(--text-primary); }
.section-header-v2::after { order: 2; }

/* ──────────────────────────────────────────────────────────────────────────
   8. CARDS
   ────────────────────────────────────────────────────────────────────────── */
.scroll-row {
  gap: var(--sp-3);
  padding-block-end: var(--sp-2);
  padding-inline: 0;
  scroll-padding-inline-start: var(--gutter);
}
@media (min-width: 768px) { .scroll-row { gap: var(--sp-4); } }
.scroll-row .podcast-card-v2 { inline-size: 156px; }
.scroll-row .episode-card-v2 { inline-size: 268px; }
@media (min-width: 768px) {
  .scroll-row .podcast-card-v2 { inline-size: 180px; }
  .scroll-row .episode-card-v2 { inline-size: 312px; }
}

.podcast-card-v2 {
  border-radius: var(--card-radius);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.podcast-card-v2:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.podcast-card-v2 .pc-img { background: var(--surface-sunken); }
.pc-body { padding: var(--sp-3); gap: var(--sp-1); }
.pc-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-primary); }
.pc-author { font-size: var(--fs-2xs); color: var(--text-muted); }   /* was 2.69:1 → 5.67:1 */
.pc-count { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--secondary-text); }
.pc-play-overlay { background: var(--scrim); }
.pc-play-btn, .ec-play-btn, .episode-play-btn, .episode-list-play-btn {
  background: var(--accent);
  border: 0;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}
.pc-play-btn svg, .ec-play-btn svg, .episode-play-btn svg, .episode-list-play-btn svg { fill: currentColor; }

.episode-card-v2 {
  border-radius: var(--card-radius);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.episode-card-v2:hover { transform: translateY(-4px) scale(1); box-shadow: var(--shadow-3); }
.ec-overlay { background: var(--media-scrim); }
.ec-body { padding: var(--sp-3); }
.ec-podcast { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--secondary-text); }
.ec-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-on-media); }
.ec-meta { font-size: var(--fs-3xs); color: rgba(255,255,255,.82); margin-block-start: var(--sp-1); }
.ec-duration {
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2); inset-inline-start: auto;
  border-radius: var(--r-xs);
  background: rgba(4,4,10,.78);
  color: #fff;
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
  padding: 3px var(--sp-2);
}
.ec-placeholder, .pc-placeholder {
  background: var(--surface-sunken);
  background-image: var(--motif-zellige);
  background-size: var(--motif-size) var(--motif-size);
}

/* Episode rows — home (.episode-list-item) and podcast page (.episode-list-row)
   were two different components. Unified here. */
.episodes-list { display: flex; flex-direction: column; gap: var(--sp-1); inline-size: 100%; }
.episode-list-item, .episode-list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.episode-list-item:hover, .episode-list-row:hover { background: var(--surface-raised); border-color: var(--border); }
.episode-list-img, .episode-list-row-img { inline-size: 52px; block-size: 52px; border-radius: var(--r-sm); flex: 0 0 auto; background: var(--surface-sunken); }
.episode-list-info, .episode-list-row-info { flex: 1 1 0; min-inline-size: 0; }
.episode-list-title, .episode-list-row-title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal;
}
.episode-list-podcast, .episode-list-row-meta {
  font-size: var(--fs-2xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.episode-list-comments { margin-inline-start: auto; font-size: var(--fs-2xs); color: var(--text-muted); flex: 0 0 auto; }
.episode-rank {
  font-size: var(--fs-lg); font-weight: var(--fw-black);
  color: var(--text-muted);                 /* was 2.69:1 → 5.67:1 */
  min-inline-size: 26px; text-align: center; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.episode-list-item:nth-child(-n+3) .episode-rank { color: var(--secondary-text); }

.recent-podcasts { display: flex; flex-direction: column; gap: var(--sp-1); }
.recent-podcast-item {
  display: flex; align-items: center; gap: var(--sp-3);
  inline-size: 100%; box-sizing: border-box;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background var(--dur-1) var(--ease-out);
}
.recent-podcast-item:hover { background: var(--surface-raised); }
.recent-podcast-count { font-size: var(--fs-2xs); color: var(--text-muted); }  /* was 2.69:1 */

.cat-tile {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-block-size: var(--tap-min);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.cat-tile:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.cat-tile-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
.cat-tag {
  display: inline-flex; align-items: center;
  min-block-size: 28px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}

/* ──────────────────────────────────────────────────────────────────────────
   9. PAGE HEROES / GRIDS / PAGINATION
   ────────────────────────────────────────────────────────────────────────── */
.page-hero, .radio-hero {
  padding-block: var(--sp-8) var(--sp-6);
  padding-inline: var(--gutter);
  overflow: hidden;
  background: radial-gradient(110% 100% at var(--_mx) 0%, var(--accent-soft), transparent 60%);
}
@media (min-width: 768px) { .page-hero, .radio-hero { padding-block: var(--sp-12) var(--sp-8); } }
.page-hero-title, .radio-hero-title, .search-page-title {
  font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
}
@media (min-width: 768px) { .page-hero-title, .radio-hero-title, .search-page-title { font-size: var(--fs-3xl); } }
.page-hero-sub, .radio-hero-sub { font-size: var(--fs-md); color: var(--text-secondary); max-inline-size: 56ch; margin-block-start: var(--sp-2); }
.page-info { padding-inline: var(--gutter); color: var(--text-muted); font-size: var(--fs-sm); }

.podcasts-grid-full, .station-grid, .categories-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-10);
  box-sizing: border-box;
  align-items: start;
}
.podcasts-grid-full .podcast-card-v2,
.station-grid .station-card,
.categories-grid-v2 .cat-tile { block-size: auto; }
.podcast-card-v2 .pc-body { flex: 1 1 auto; }
.podcasts-grid-full .ads-unit--infeed-grid,
.station-grid .ads-unit--infeed-grid { align-self: start; }
@media (min-width: 600px) { .podcasts-grid-full, .station-grid, .categories-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1024px) { .podcasts-grid-full { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

.station-card {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; text-align: center;
  gap: var(--sp-3);
  inline-size: 100%; min-inline-size: 0; box-sizing: border-box;
  padding: var(--sp-5) var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  position: relative; overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.station-card:hover { border-color: var(--danger); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.station-card .sc-logo {
  inline-size: 72px; block-size: 72px;
  border-radius: var(--r-lg);
  flex: 0 0 auto;
  background: var(--surface-sunken);
  overflow: hidden; position: relative;
}
.station-card .sc-info { inline-size: 100%; min-inline-size: 0; text-align: center; flex: 0 1 auto; }
.station-card .sc-name {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-primary); line-height: var(--lh-snug);
  margin-block-end: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.station-card .sc-genre {
  font-size: var(--fs-3xs); color: var(--text-muted); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.station-card .sc-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--danger-soft); color: var(--danger);
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  flex: 0 0 auto; position: static;
}
.sc-live-ring { border-color: var(--danger); }
.radio-hero { text-align: start; }
.radio-hero-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
}
.radio-hero-sub { color: var(--text-secondary); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; padding-block: var(--sp-8); }
.page-btn, .pagination-btn {
  min-inline-size: var(--tap-min); min-block-size: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.page-btn:hover, .pagination-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.page-btn.active, .pagination-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.pagination-info { font-size: var(--fs-sm); color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────────────────────
   10. TWO-COLUMN + SIDEBAR  (ads.css owns .ads-unit--sidebar — do not touch)
   ────────────────────────────────────────────────────────────────────────── */
.two-col-section, .episode-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .two-col-section, .episode-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); }
}
.two-col-main, .episode-main { min-inline-size: 0; }
.sidebar-widget {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--sp-4);
  margin-block-end: var(--sp-4);
}
.widget-title { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--sp-3); }
.sidebar-podcast-card { display: flex; gap: var(--sp-3); align-items: center; }
.sidebar-podcast-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.sidebar-podcast-count { font-size: var(--fs-2xs); color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────────────────────
   11. PODCAST + EPISODE DETAIL
   ────────────────────────────────────────────────────────────────────────── */
.breadcrumb { font-size: var(--fs-2xs); color: var(--text-muted); padding-block: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent-text); }

.podcast-header, .episode-header {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding-block: var(--sp-4) var(--sp-6);
}
@media (min-width: 768px) { .podcast-header, .episode-header { gap: var(--sp-6); } }
.podcast-header-img, .episode-header-thumb {
  inline-size: 116px; block-size: 116px; flex: 0 0 auto;
  border-radius: var(--r-lg); background: var(--surface-sunken);
  box-shadow: var(--shadow-2);
}
@media (min-width: 768px) { .podcast-header-img, .episode-header-thumb { inline-size: 190px; block-size: 190px; } }
.podcast-header-info, .episode-header-info { min-inline-size: 0; flex: 1 1 auto; }
.podcast-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.episode-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
@media (min-width: 768px) { .podcast-title { font-size: var(--fs-3xl); } .episode-title { font-size: var(--fs-2xl); } }
.podcast-author, .episode-podcast-link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-text); margin-block-start: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); }
.podcast-desc, .episode-description, .episode-description-text, .episode-description-html {
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); max-inline-size: 72ch;
}
.episode-description-html a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.podcast-stats, .episode-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-2xs); color: var(--text-muted); margin-block-start: var(--sp-3); }
.podcast-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.podcast-social { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.podcast-social a { inline-size: var(--tap-min); block-size: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary); }
.podcast-social a:hover { border-color: var(--accent); color: var(--accent-text); }
.episode-count-badge, .comment-count-badge {
  display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: var(--sp-2);
  border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--border);
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--text-secondary);
}
.episode-player-section { margin-block: var(--sp-6); }

.comments-section { margin-block-start: var(--sp-10); }
.comments-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-block-end: var(--sp-4); }
.comment-form-wrap textarea, .comment-form-wrap input,
.form-input, .submit-form input, .submit-form textarea, .submit-form select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-interactive);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}
.comment-form-wrap textarea:focus, .form-input:focus,
.submit-form input:focus, .submit-form textarea:focus, .submit-form select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.comment-login-prompt { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); color: var(--text-secondary); font-size: var(--fs-sm); }

/* ──────────────────────────────────────────────────────────────────────────
   12. BUTTONS
   ────────────────────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-ghost, .btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-5);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-interactive); color: var(--text-primary); }
.btn-ghost:hover { background: var(--surface-raised); border-color: var(--accent); }
.btn-google { background: var(--surface-raised); border-color: var(--border-interactive); color: var(--text-primary); }
.btn-google:hover { background: var(--surface-overlay); }

/* ──────────────────────────────────────────────────────────────────────────
   13. SEARCH / EMPTY STATES
   ────────────────────────────────────────────────────────────────────────── */
.search-page-header { padding-block: var(--sp-8) var(--sp-4); }
.search-page-bar { max-inline-size: 640px; }
.search-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.search-overlay-inner svg { inset-inline-start: var(--sp-6); inset-inline-end: auto; color: var(--text-muted); }
.search-overlay-close { inset-inline-end: var(--sp-5); inset-inline-start: auto; inline-size: var(--tap-min); block-size: var(--tap-min); border-radius: var(--r-pill); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary); }
.search-results { background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.search-empty { text-align: center; padding: var(--sp-16) var(--gutter); color: var(--text-secondary); overflow: hidden; }
.search-empty-icon { font-size: var(--fs-3xl); opacity: .6; margin-block-end: var(--sp-3); }

/* ──────────────────────────────────────────────────────────────────────────
   14. FOOTER
   ────────────────────────────────────────────────────────────────────────── */
.footer-v2 {
  background: var(--surface-sunken);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--sp-10);
  overflow: hidden;
}
.footer-v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-8);
  position: relative; z-index: var(--z-raised);
}
@media (min-width: 640px) { .footer-v2-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-v2-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-v2-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-v2-brand { grid-column: auto; } }
.footer-v2-brand p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); max-inline-size: 34ch; }
.footer-v2-col h4 {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-muted);            /* was rgba(255,255,255,.35) @ 3.09:1 → 6.12:1 */
  margin-block-end: var(--sp-3);
}
.footer-v2-col a {
  display: flex; align-items: center;
  min-block-size: 36px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-block-end: 0;
}
.footer-v2-col a:hover { color: var(--accent-text); }
.footer-v2-bottom {
  border-block-start: 1px solid var(--border);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  position: relative; z-index: var(--z-raised);
}

/* ──────────────────────────────────────────────────────────────────────────
   15. PLAYER BAR — APPEARANCE ONLY.
   No positioning, no z-index, no display, no ids touched: player.v2.js owns
   #player-bar geometry and its persistence across navigation.
   ────────────────────────────────────────────────────────────────────────── */
.player-bar {
  background: var(--surface-overlay);
  border-block-start: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0,0,0,.32);
}
.player-thumb { border-radius: var(--r-sm); background: var(--surface-sunken); }
.player-podcast-title { font-size: var(--fs-3xs); color: var(--text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.player-episode-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.player-btn, .player-close {
  inline-size: var(--tap-min); block-size: var(--tap-min);
  border-radius: var(--r-pill);
  background: transparent; border: 0;
  color: var(--text-secondary);
}
.player-btn:hover, .player-close:hover { background: var(--surface-raised); color: var(--text-primary); }
.player-play { background: var(--accent); color: var(--text-on-accent); }
.player-play:hover { background: var(--accent-hover); }
.player-progress-wrap { background: var(--border); border-radius: var(--r-pill); }
.player-progress, .player-progress-fill { background: var(--accent); border-radius: var(--r-pill); }
.player-progress-thumb { background: var(--text-primary); box-shadow: var(--shadow-1); }
.player-time { font-size: var(--fs-3xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────────────────────────
   16. MODAL — appearance only. `display` is owned by app.v2.js (.open).
   ────────────────────────────────────────────────────────────────────────── */
.modal-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  color: var(--text-primary);
}
.modal-body { padding: var(--sp-6); }
.modal-close { inline-size: var(--tap-min); block-size: var(--tap-min); border-radius: var(--r-pill); background: transparent; border: 0; color: var(--text-secondary); }
.modal-close:hover { background: var(--surface-raised); color: var(--text-primary); }
.modal-tabs { display: flex; gap: var(--sp-1); border-block-end: 1px solid var(--border); }
.modal-tab {
  flex: 1; min-block-size: var(--tap-min);
  background: transparent; border: 0; border-block-end: 2px solid transparent;
  color: var(--text-muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.modal-tab.active { color: var(--accent-text); border-block-end-color: var(--accent); }
.auth-divider { color: var(--text-muted); font-size: var(--fs-2xs); }
.auth-error { color: var(--danger); font-size: var(--fs-2xs); }

/* ──────────────────────────────────────────────────────────────────────────
   17. RADIO ROOM (live chat panel) — colour only, geometry untouched.
   ────────────────────────────────────────────────────────────────────────── */
.rr-backdrop { background: var(--scrim); }
.rr-panel { background: var(--surface-overlay); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-4); }
.rr-live-badge { background: var(--danger-soft); color: var(--danger); font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); border-radius: var(--r-pill); padding: 3px var(--sp-2); }
.rr-station-name, .rr-chat-title { color: var(--text-primary); font-weight: var(--fw-bold); }
.rr-station-desc, .rr-chat-hint, .rr-msg-time, .rr-listeners { color: var(--text-muted); font-size: var(--fs-2xs); }
.rr-msg-name { color: var(--accent-text); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.rr-msg-text { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.rr-input, .rr-input-msg, .rr-input-name {
  background: var(--bg-input); border: 1px solid var(--border-interactive);
  color: var(--text-primary); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); min-block-size: var(--tap-min);
}
.rr-send-btn, .rr-play-btn { background: var(--accent); color: var(--text-on-accent); border: 0; }
.rr-close { inline-size: var(--tap-min); block-size: var(--tap-min); border-radius: var(--r-pill); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary); }

/* ──────────────────────────────────────────────────────────────────────────
   18. ADSENSE — never restyle the slot, only the chrome around it.
   Min-heights, z-index and the anchor offsets in ads.css stay authoritative.
   ────────────────────────────────────────────────────────────────────────── */
.ads-label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);          /* was #55557a @ 2.85:1 → 5.19:1 */
  opacity: 1;
  text-align: start;                  /* logical: flips in RTL */
  margin-block-end: var(--sp-2);
}
.ads-unit--infeed-grid, .ads-unit--infeed-list {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}
.ads-anchor { background: var(--surface-glass); border-block-start: 1px solid var(--border); }
.ads-anchor-close { background: var(--surface-overlay); border: 1px solid var(--border); color: var(--text-secondary); }

/* House partner ads — align with the new palette (they are ours, not AdSense) */
.partner-ad--key { background: var(--accent-soft); border: 1px solid var(--border); }
.partner-ad--cle { background: var(--secondary-soft); border: 1px solid var(--border); }
.partner-ad-badge { color: var(--text-muted); font-size: var(--fs-3xs); letter-spacing: var(--ls-widest); }
.partner-ad-name { color: var(--text-primary); font-size: var(--fs-sm); }
.partner-ad-desc { color: var(--text-secondary); font-size: var(--fs-2xs); }
.partner-ad-cta { color: var(--accent-text) !important; font-size: var(--fs-2xs); }  /* !override: inline <style> in layout.js hardcodes #8b5cf6 */
.partner-ad--cle .partner-ad-cta { color: var(--secondary-text) !important; }        /* !override: inline <style> hardcodes #06b6d4 */
.submit-cta-banner { background: var(--accent-soft) !important; border-color: var(--border) !important; } /* !override: inline <style> */
.submit-cta-btn { background: var(--accent) !important; color: var(--text-on-accent) !important; }        /* !override: inline <style> */
.inline-partner-ad { background: var(--surface-raised); border-radius: var(--r-sm); font-size: var(--fs-2xs); }

/* ──────────────────────────────────────────────────────────────────────────
   19. ADMIN (styled through the same tokens; admin.css already uses
   var(--font), var(--bg-card), var(--border), var(--accent-green)).
   ────────────────────────────────────────────────────────────────────────── */
.admin-shell, .admin-main { background: var(--surface); color: var(--text-primary); }
.admin-sidebar { background: var(--surface-raised); border-inline-end: 1px solid var(--border); }
.admin-card, .card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); }
.form-group label, .form-grid label { color: var(--text-secondary); font-size: var(--fs-2xs); }

/* ──────────────────────────────────────────────────────────────────────────
   20. RTL — everything above already uses logical properties. These are the
   few places where a physical value is unavoidable, plus the neutralisation
   of design-v2.css's hand-written [dir=rtl] block, which used physical
   left/right and is now redundant.
   ────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .hero-search-v2 input,
[dir="rtl"] .search-page-bar input,
[dir="rtl"] .search-overlay-input { padding-inline: var(--sp-12) var(--sp-4); }
[dir="rtl"] .hero-search-v2 svg,
[dir="rtl"] .search-overlay-inner svg { inset-inline-start: var(--sp-4); inset-inline-end: auto; }
[dir="rtl"] .ec-duration { inset-inline-end: var(--sp-2); inset-inline-start: auto; }
[dir="rtl"] .episode-list-item,
[dir="rtl"] .episode-list-row,
[dir="rtl"] .section-header-v2,
[dir="rtl"] .footer-v2-bottom,
[dir="rtl"] .recent-podcast-item,
[dir="rtl"] .station-card,
[dir="rtl"] .rr-msg-row { flex-direction: row; }   /* logical props already flip these */
[dir="rtl"] .episode-list-comments { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .drawer-link { border-inline-start: 3px solid transparent; }
[dir="rtl"] .drawer-link.active { border-inline-start-color: var(--accent); }
[dir="rtl"] .hero-text-col,
[dir="rtl"] .pc-body,
[dir="rtl"] .ec-body,
[dir="rtl"] .radio-card-info { text-align: start; }
[dir="rtl"] .scroll-row, [dir="rtl"] .hero-cats-v2, [dir="rtl"] .hero-stats { direction: rtl; }
/* Numerals and durations stay LTR inside RTL text. */
[dir="rtl"] .player-time,
[dir="rtl"] .ec-duration,
[dir="rtl"] .hero-stat-n,
[dir="rtl"] .pagination-info { direction: ltr; unicode-bidi: isolate; }

/* ──────────────────────────────────────────────────────────────────────────
   21. TOUCH TARGETS — global safety net for anything not listed above.
   ────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  a:not(.podcast-card-v2):not(.episode-card-v2):not(.station-card):not(.cat-tile):not(.navbar-brand):not(.breadcrumb a),
  button:not(.lang-btn) {
    min-block-size: var(--tap-min);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   22. PRINT
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  .site-header, #bottom-nav, .app-drawer, .player-bar, .footer-v2,
  .hero-search-v2, .search-overlay { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   23. CASCADE REPAIR — re-assert the semantic layer
   main.css declares `:root { --text-muted:#55557a; ... }` AFTER tokens.css,
   and design-v2.css declares `[data-theme="light"] { --text-primary: ... }`
   at the same specificity. Both would otherwise beat tokens.css purely on
   source order. Re-declaring here (last sheet, and 0,2,0 for the theme
   selector) makes the token layer authoritative without touching either file.
   The deploy script ALSO neuters those legacy blocks — this is the belt to
   that braces, so the system is correct even if a legacy block reappears.
   ────────────────────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"] {
  --surface: var(--pm-night-850);
  --surface-sunken: var(--pm-night-900);
  --surface-raised: var(--pm-night-800);
  --surface-overlay: var(--pm-night-750);
  --surface-glass: rgba(14,14,23,.82);
  --border: var(--pm-night-700);
  --border-strong: var(--pm-night-600);
  --border-interactive: var(--pm-night-500);
  --text-primary: var(--pm-night-050);
  --text-secondary: var(--pm-night-200);
  --text-muted: var(--pm-night-300);
  --text-on-accent: #FFFFFF;
  --accent: var(--pm-majorelle-500);
  --accent-hover: var(--pm-majorelle-400);
  --accent-text: var(--pm-majorelle-300);
  --accent-soft: rgba(108,78,232,.18);
  --accent-ring: rgba(169,155,255,.55);
  --secondary: var(--pm-saffron-400);
  --secondary-text: var(--pm-saffron-300);
  --secondary-soft: rgba(237,177,59,.16);
  --success: var(--pm-zellige-400);
  --danger: var(--pm-terracotta-400);
  --danger-soft: rgba(240,131,106,.16);
  --scrim: rgba(4,4,10,.72);
  --motif-ink: rgba(169,155,255,.26);
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-raised);
  --bg-card: var(--surface-raised);
  --bg-card-hover: var(--surface-overlay);
  --bg-input: var(--surface-sunken);
  --border-hover: var(--border-strong);
  --accent-2: var(--secondary);
  --accent-warm: var(--secondary);
  --accent-red: var(--danger);
  --accent-green: var(--success);
  --glass-bg: var(--surface-glass);
  --glass-border: var(--border);
  --gradient: linear-gradient(135deg, var(--pm-majorelle-400), var(--pm-majorelle-600));
  --gradient-warm: linear-gradient(135deg, var(--pm-saffron-300), var(--pm-terracotta-400));
  --glow: var(--shadow-accent);
  --glow-purple: var(--shadow-accent);
  --glow-cyan: var(--shadow-3);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-4);
  --_mx: 0%;
}
:root[data-theme="light"] {
  --surface: var(--pm-plaster-050);
  --surface-sunken: var(--pm-plaster-100);
  --surface-raised: var(--pm-plaster-000);
  --surface-overlay: var(--pm-plaster-000);
  --surface-glass: rgba(251,248,243,.86);
  --border: var(--pm-plaster-200);
  --border-strong: var(--pm-plaster-300);
  --border-interactive: var(--pm-plaster-500);
  --text-primary: var(--pm-plaster-900);
  --text-secondary: var(--pm-plaster-800);
  --text-muted: var(--pm-plaster-700);
  --text-on-accent: #FFFFFF;
  --accent: var(--pm-majorelle-600);
  --accent-hover: var(--pm-majorelle-700);
  --accent-text: var(--pm-majorelle-700);
  --accent-soft: rgba(86,56,201,.10);
  --accent-ring: rgba(86,56,201,.45);
  --secondary: var(--pm-saffron-500);
  --secondary-text: var(--pm-saffron-700);
  --secondary-soft: rgba(217,147,42,.14);
  --success: var(--pm-zellige-700);
  --danger: var(--pm-terracotta-700);
  --danger-soft: rgba(179,58,34,.10);
  --scrim: rgba(26,22,34,.48);
  --motif-ink: rgba(86,56,201,.16);
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-sunken);
  --bg-card: var(--surface-raised);
  --bg-card-hover: var(--surface-sunken);
  --bg-input: var(--pm-plaster-000);
  --border-hover: var(--border-strong);
  --accent-2: var(--secondary);
  --accent-warm: var(--secondary);
  --accent-red: var(--danger);
  --accent-green: var(--success);
  --glass-bg: var(--surface-glass);
  --glass-border: var(--border);
  --gradient: linear-gradient(135deg, var(--pm-majorelle-600), var(--pm-majorelle-800));
  --gradient-warm: linear-gradient(135deg, var(--pm-saffron-500), var(--pm-terracotta-600));
  --glow: var(--shadow-accent);
  --glow-purple: var(--shadow-accent);
  --glow-cyan: var(--shadow-3);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-4);
}
[dir="rtl"] { --_mx: 100%; }

/* Specificity bumps: these components are painted by ID/gradient rules
   upstream, so a plain class selector never reaches them. */
.navbar-brand .brand-dot, .footer-v2-brand .brand-dot { color: var(--accent-text); }
.navbar-end .nav-submit-pill, .navbar-v2 .nav-submit-pill {
  background: var(--accent); background-image: none; color: var(--text-on-accent);
}
.navbar-end .nav-submit-pill:hover { background: var(--accent-hover); }
.lang-switcher .lang-btn--active, .lang-switcher .lang-btn.active { background: var(--accent); color: var(--text-on-accent); }
.user-avatar, .user-avatar-placeholder, .user-btn .avatar { background: var(--accent); color: var(--text-on-accent); }
.btn-primary, .submit-cta-btn, .rr-send-btn { background-image: none; }
.drawer-brand, .drawer-brand span { color: var(--text-primary); }
.app-drawer { color: var(--text-primary); }

/* ──────────────────────────────────────────────────────────────────────────
   24. NAVBAR VISIBILITY
   mobile.css's surviving pre-block hides these with `!important`, so this is
   one of the few places the design system must answer in kind. Owning both
   breakpoints here means the retired MOBILE-FIX-FINAL desktop-restore block
   is no longer needed.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .navbar-v2 .navbar-center { display: flex !important; align-items: center; flex: 1; justify-content: center; gap: var(--sp-1); }
  .navbar-end .nav-submit-pill { display: inline-flex !important; }
  .navbar-v2 .lang-switcher, .navbar-end .lang-switcher { display: inline-flex !important; }
  .navbar-end .user-menu { display: block !important; }
  .navbar-end #theme-toggle { display: inline-flex !important; }
  .navbar-v2 .hamburger, .navbar-v2 .js-drawer-open { display: none !important; }
  #bottom-nav, .bottom-nav { display: none !important; }
}
@media (max-width: 767px) {
  .navbar-v2 .navbar-center,
  .navbar-end .nav-submit-pill,
  .navbar-end .lang-switcher, .navbar-v2 .lang-switcher,
  .navbar-end .user-menu,
  .navbar-end #theme-toggle { display: none !important; }
  .navbar-end #search-toggle, .navbar-end .search-toggle { display: inline-flex !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   25. FORM CONTROLS — element-level baseline.
   Weakest possible specificity (0,0,1) so every class-based rule above still
   wins; this only catches the unclassed <select>/<input> in the views.
   ────────────────────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-interactive);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  min-block-size: var(--tap-min);
  padding: var(--sp-3);
  box-sizing: border-box;
}
textarea { min-block-size: 96px; line-height: var(--lh-normal); }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background: var(--surface-overlay); color: var(--text-primary); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
label { color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); }

/* ──────────────────────────────────────────────────────────────────────────
   26. LIGHT THEME — component overrides.
   design-v2.css ships ~70 hardcoded `[data-theme="light"]` rules (#0f0e1a,
   rgba(139,92,246,…), #eceaff …). Each is answered here in tokens, so the
   light theme is a first-class build of the same system rather than a
   partial re-skin. Measured result: 23 WCAG AA failures → 0.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .site-header,
[data-theme="light"] .site-header.scrolled { background: var(--surface-glass) !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="light"] .site-header.scrolled { box-shadow: var(--shadow-2) !important; }
[data-theme="light"] .nav-link { color: var(--text-secondary); }
[data-theme="light"] .nav-link:hover { color: var(--text-primary); background: var(--surface-sunken); }
[data-theme="light"] .nav-link.active { color: var(--accent-text); background: var(--accent-soft); }
[data-theme="light"] .navbar-brand, [data-theme="light"] .brand-text { color: var(--text-primary); }
[data-theme="light"] .btn-icon { background: transparent; border-color: transparent; color: var(--text-secondary); }
[data-theme="light"] .btn-icon:hover { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border); }
[data-theme="light"] .hamburger { background: var(--surface-sunken); border-color: var(--border); }
[data-theme="light"] .hamburger span { background: var(--text-secondary); }
[data-theme="light"] .hero-v2 {
  background:
    radial-gradient(120% 90% at var(--_mx) 0%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(90% 80% at calc(100% - var(--_mx)) 8%, var(--secondary-soft) 0%, transparent 58%);
}
[data-theme="light"] .hero-v2::before { opacity: 0; }
[data-theme="light"] .aurora { opacity: .18; }
[data-theme="light"] .hero-h1 { color: var(--text-primary); }
[data-theme="light"] .hero-sub-v2 { color: var(--text-secondary); }
[data-theme="light"] .hero-eyebrow { color: var(--secondary-text); }
[data-theme="light"] .hero-stat-l { color: var(--text-muted); }
[data-theme="light"] .hero-stat-n { color: var(--accent-text); }
[data-theme="light"] #hero-search,
[data-theme="light"] .hero-search-v2 input,
[data-theme="light"] .search-overlay-input,
[data-theme="light"] .search-page-bar input { background: var(--surface-raised); border-color: var(--border-interactive); color: var(--text-primary); box-shadow: var(--shadow-1); }
[data-theme="light"] .hero-search-v2 input::placeholder,
[data-theme="light"] .search-overlay-input::placeholder { color: var(--text-muted); }
[data-theme="light"] .hero-search-v2 input:focus { border-color: var(--accent); background: var(--surface-raised); box-shadow: 0 0 0 4px var(--accent-soft); }
[data-theme="light"] .hero-search-v2 svg,
[data-theme="light"] .search-overlay-inner svg { color: var(--text-muted); }
[data-theme="light"] .cat-pill-v2 { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .cat-pill-v2:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); }
[data-theme="light"] .hero-visual-card { box-shadow: var(--shadow-3); }
[data-theme="light"] .section-title-v2 { color: var(--text-primary); }
[data-theme="light"] .section-link-v2 { color: var(--accent-text); }
[data-theme="light"] .podcast-card-v2 { background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .podcast-card-v2:hover { box-shadow: var(--shadow-3); }
[data-theme="light"] .pc-title { color: var(--text-primary); }
[data-theme="light"] .pc-author { color: var(--text-muted); }
[data-theme="light"] .pc-count { color: var(--secondary-text); }
[data-theme="light"] .pc-placeholder,
[data-theme="light"] .ec-placeholder { background: var(--surface-sunken); background-image: var(--motif-zellige); background-size: var(--motif-size) var(--motif-size); }
[data-theme="light"] .episode-card-v2 { border-color: var(--border); background: var(--surface-sunken); }
[data-theme="light"] .ec-title { color: #fff; }
[data-theme="light"] .ec-podcast { color: var(--pm-saffron-300); }
[data-theme="light"] .cat-tile { background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .cat-tile:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
[data-theme="light"] .cat-tile-name { color: var(--text-secondary); }
[data-theme="light"] .episode-list-item,
[data-theme="light"] .episode-list-row { color: var(--text-primary); }
[data-theme="light"] .episode-list-item:hover,
[data-theme="light"] .episode-list-row:hover { background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .episode-list-podcast,
[data-theme="light"] .episode-list-row-meta { color: var(--text-muted); }
[data-theme="light"] .episode-list-title,
[data-theme="light"] .episode-list-row-title { color: var(--text-primary); }
[data-theme="light"] .episode-rank { color: var(--text-muted); }
[data-theme="light"] .episode-list-item:nth-child(-n+3) .episode-rank { color: var(--secondary-text); }
[data-theme="light"] .episode-list-comments { color: var(--text-muted); }
[data-theme="light"] .sidebar-widget { background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .widget-title { color: var(--text-muted); }
[data-theme="light"] .recent-podcast-title { color: var(--text-primary); }
[data-theme="light"] .recent-podcast-count { color: var(--text-muted); }
[data-theme="light"] .search-overlay { background: var(--scrim); }
[data-theme="light"] .search-overlay-close { color: var(--text-secondary); background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .footer-v2 { background: var(--surface-sunken); border-top-color: var(--border); }
[data-theme="light"] .footer-v2-brand p { color: var(--text-muted); }
[data-theme="light"] .footer-v2-col h4 { color: var(--text-muted); }
[data-theme="light"] .footer-v2-col a { color: var(--text-secondary); }
[data-theme="light"] .footer-v2-col a:hover { color: var(--accent-text); }
[data-theme="light"] .footer-v2-bottom { color: var(--text-muted); border-top-color: var(--border); }
[data-theme="light"] .player-bar { background: var(--surface-overlay); border-top-color: var(--border); box-shadow: 0 -8px 32px rgba(26,22,34,.10); }
[data-theme="light"] #bottom-nav, [data-theme="light"] .bottom-nav { background: var(--surface-glass); border-top-color: var(--border); }
[data-theme="light"] .bnav-item, [data-theme="light"] .bottom-nav-item { color: var(--text-muted); }
[data-theme="light"] .bnav-item.active, [data-theme="light"] .bottom-nav-item.active { color: var(--accent-text); }
[data-theme="light"] .ad-container { border-color: var(--border); background: var(--surface-raised); }
[data-theme="light"] .podcast-header, [data-theme="light"] .category-header { background: transparent; border-color: var(--border); }
[data-theme="light"] .filter-pill { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .filter-pill:hover { background: var(--accent-soft); }
[data-theme="light"] .page-btn, [data-theme="light"] .pagination-btn { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .lang-switcher { background: var(--surface-sunken); border-color: var(--border); }
[data-theme="light"] .lang-btn { color: var(--text-secondary); }
[data-theme="light"] .lang-btn:hover { color: var(--text-primary); background: var(--surface-raised); }
[data-theme="light"] .lang-btn--active, [data-theme="light"] .lang-btn.active { background: var(--accent); color: var(--text-on-accent); }
[data-theme="light"] .radio-card, [data-theme="light"] .radio-mini-card, [data-theme="light"] .station-card { background: var(--surface-raised); border-color: var(--border); }
[data-theme="light"] .radio-hero-title { color: var(--text-primary); }
[data-theme="light"] .rr-panel { background: var(--surface-overlay); }
[data-theme="light"] .rr-station { background: var(--surface-sunken); }
[data-theme="light"] .app-drawer { background: var(--surface-raised); }
[data-theme="light"] .modal { background: var(--surface-overlay); }