/* =====================================================
   warpas.pl — podcast show (episode list) page, production

   Built from drafts/design/wba/wba_odcinki.html (v1) and
   the base layer of podcast_episode.css. Self-contained on
   purpose: fonts, reset, tokens, side nav and footer are
   inlined here rather than shared, because each page-scoped
   sheet must be able to diverge without breaking the others.

   EVERY rule below is scoped to the exact value
   [data-layout="podcast-show"]. Never widen this to a prefix
   match: stylesheet_link_tag :app serves every file in
   app/assets/stylesheets on EVERY page, so the scope is the
   only thing keeping these rules off the rest of the site.
   See drafts/2604141907_podcast_pages_visual_upgrade/
   05_sandbox_violation.md.
   ===================================================== */

/* Instrument Serif shipped as .ttf only — no woff2 available */
@font-face {
  font-family: 'Instrument Serif';
  src: url("/assets/InstrumentSerif-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url("/assets/InstrumentSerif-Italic.ttf") format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-Regular.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-Medium.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-SemiBold.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Regular.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Medium.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
[data-layout="podcast-show"] {
  /* Warm paper palette — "Workshop" aesthetic */
  --paper:       #f7f3ea;
  --paper-2:     #efe8db;
  --ink:         #1a1816;
  --ink-2:       #4a4640;
  --ink-3:       #8a8578;
  --rule:        #d8d0bf;
  --rule-soft:   #e8e1d1;

  /* Accents */
  --accent:      #f600ac;
  --wba:         #5b3eb8;
  --wba-ink:     #efe8df;

  /* Type */
  --serif:  'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --rail-w:    260px;
  --page-pad:  clamp(24px, 4vw, 56px);
  --content-max: 780px;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* Dark palette. The homepage defines the same swap for [data-layout="home"];
   podcast_episode.css omits it, so the detail page's toggle only recolours the
   rail — that gap is its own fix, not this page's. */
[data-theme="dark"] [data-layout="podcast-show"] {
  --paper:       #141311;
  --paper-2:     #1c1a17;
  --ink:         #ede6d6;
  --ink-2:       #b8b0a0;
  --ink-3:       #77716a;
  --rule:        #2a2724;
  --rule-soft:   #232120;
}

/* ---------- RESET / BASE ---------- */
[data-layout="podcast-show"] *, [data-layout="podcast-show"] *::before, [data-layout="podcast-show"] *::after { box-sizing: border-box; }
[data-layout="podcast-show"] {
  display: block;
  padding: 0;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
[data-layout="podcast-show"] img, [data-layout="podcast-show"] svg { display: block; max-width: 100%; }
[data-layout="podcast-show"] a { color: inherit; text-decoration: none; }
[data-layout="podcast-show"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[data-layout="podcast-show"] ul { margin: 0; padding: 0; }

/* base_site.css:36 styles a bare `header` for the old site — `margin: 2rem 0 3rem`,
   unscoped, so it lands on .mobile-header here too. The home page never notices:
   its header is the same colour as the page. This header is the rail's violet, so
   the margin reads as a page-coloured strip above it and a gap between it and the
   open menu. Zeroed so the coloured band is continuous, the way the home page's
   invisible one is. */
[data-layout="podcast-show"] header { margin: 0; }

[data-layout="podcast-show"] .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[data-layout="podcast-show"] .skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 4px;
  font-family: var(--mono); font-size: 12px;
}
[data-layout="podcast-show"] .skip-link:focus { top: 8px; }

/* ---------- SIDE NAV (desktop) ---------- */
[data-layout="podcast-show"] .side-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  padding: 32px 24px 24px;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
  z-index: 20;
}

[data-layout="podcast-show"] .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 20px; line-height: 1;
  color: var(--ink);
  padding: 6px 4px; margin: -6px -4px 24px;
  border-radius: 4px;
  transition: background-color .15s var(--ease);
}
[data-layout="podcast-show"] .brand:focus-visible,
[data-layout="podcast-show"] .brand:hover { background: var(--paper-2); outline: none; }
[data-layout="podcast-show"] .brand-mark { display: grid; place-items: center; width: 28px; height: 28px; }
[data-layout="podcast-show"] .brand-name { letter-spacing: -0.01em; }

[data-layout="podcast-show"] .side-nav__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 2px 14px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
}

[data-layout="podcast-show"] .side-nav__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px;
}
[data-layout="podcast-show"] .side-nav__list a {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: baseline;
  padding: 7px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
[data-layout="podcast-show"] .side-nav__list a:hover,
[data-layout="podcast-show"] .side-nav__list a:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }
[data-layout="podcast-show"] .side-nav__list a.is-active { color: var(--ink); }
[data-layout="podcast-show"] .side-nav__list a.is-active .num { color: var(--ink); }
[data-layout="podcast-show"] .side-nav__list .num { color: var(--ink-3); font-weight: 500; min-width: 24px; flex-shrink: 0; }

[data-layout="podcast-show"] .side-nav__status {
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
[data-layout="podcast-show"] .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #43a047;
  box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.6);
  animation: ps-pulse 2.4s var(--ease) infinite;
}
@keyframes ps-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(67, 160, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0); }
}

/* ---------- MOBILE HEADER (hidden on desktop) ---------- */
[data-layout="podcast-show"] .mobile-header,
[data-layout="podcast-show"] .mobile-menu { display: none; }

/* ---------- LOCALE SWITCH ---------- */
[data-layout="podcast-show"] .locale-switch {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
[data-layout="podcast-show"] .locale-switch__item {
  padding: 2px 4px;
  color: var(--ink-3);
  border-radius: 3px;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="podcast-show"] .locale-switch__item:hover,
[data-layout="podcast-show"] .locale-switch__item:focus-visible {
  color: var(--ink);
  background: var(--paper-2);
  outline: none;
}
[data-layout="podcast-show"] .locale-switch__item.is-active {
  color: var(--ink);
  font-weight: 500;
}
[data-layout="podcast-show"] .locale-switch__sep {
  color: var(--ink-3);
  opacity: 0.6;
  font-size: 10px;
}
[data-layout="podcast-show"] .locale-switch--mobile {
  margin: 0; padding: 0; border-bottom: 0;
}
[data-layout="podcast-show"] .mobile-header__right {
  display: flex; align-items: center; gap: 14px;
}
[data-layout="podcast-show"] .mobile-header__prefs {
  display: flex; align-items: center; gap: 12px;
}

/* ---------- THEME TOGGLE ---------- */
[data-layout="podcast-show"] .theme-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-2);
  transition: border-color .15s var(--ease);
}
[data-layout="podcast-show"] .theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
[data-layout="podcast-show"] .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-layout="podcast-show"] .theme-toggle__icon { width: 18px; display: grid; place-items: center; font-size: 14px; }
[data-theme="light"] [data-layout="podcast-show"] .theme-toggle__icon--sun { color: var(--ink); }
[data-theme="light"] [data-layout="podcast-show"] .theme-toggle__icon--moon { color: var(--ink-3); }
[data-theme="dark"]  [data-layout="podcast-show"] .theme-toggle__icon--sun { color: var(--ink-3); }
[data-theme="dark"]  [data-layout="podcast-show"] .theme-toggle__icon--moon { color: var(--ink); }

/* =====================================================
   RAIL COLOUR  (D12)
   The sidebar has no colours of its own upstream — it reads
   --paper / --ink / --rule directly, so recolouring it there
   would repaint the whole page. These tokens sit in between,
   and only this page defines them.

   #5c3699 is the WBA logo violet sampled straight from the
   artwork (rgb 92, 54, 153) — the rail matches the show's own
   colour, and keeps it in dark mode too: the earlier #1e1452
   made the rail and the artwork two different violets. The ink
   opacities still soften for dark, so both blocks stay.
   ===================================================== */
[data-layout="podcast-show"] {
  --rail-bg:     #5c3699;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.78);
  --rail-ink-3:  rgba(239, 232, 223, 0.45);
  --rail-rule:   rgba(239, 232, 223, 0.14);
  --rail-hover:  rgba(239, 232, 223, 0.08);
}
/* Dark mode takes #5c3699 down to a night value of the same hue rather than
   reusing the light one: the light violet sat at 2.16:1 against #141311 paper
   and read as a lit slab on a dark page. Cream on #2f1b5c is 12.1:1, and the
   ink scale below works in the direction it was built for — brightest for the
   active entry, quietest for the numbers. --rail-ink-3 is lifted from 0.40 so
   the status line stays legible. */
[data-theme="dark"] [data-layout="podcast-show"] {
  --rail-bg:     #2f1b5c;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.76);
  --rail-ink-3:  rgba(239, 232, 223, 0.52);
  --rail-rule:   rgba(239, 232, 223, 0.12);
  --rail-hover:  rgba(239, 232, 223, 0.07);
}

/* --- Sidebar, repointed at the tokens ------------------------------- */
[data-layout="podcast-show"] .side-nav {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-rule);
}
[data-layout="podcast-show"] .brand { color: var(--rail-ink); }
[data-layout="podcast-show"] .brand:hover,
[data-layout="podcast-show"] .brand:focus-visible { background: var(--rail-hover); }

[data-layout="podcast-show"] .side-nav__controls { border-bottom-color: var(--rail-rule); }

[data-layout="podcast-show"] .side-nav__list a { color: var(--rail-ink-2); }
[data-layout="podcast-show"] .side-nav__list a:hover,
[data-layout="podcast-show"] .side-nav__list a:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="podcast-show"] .side-nav__list a.is-active,
[data-layout="podcast-show"] .side-nav__list a.is-active .num { color: var(--rail-ink); }
[data-layout="podcast-show"] .side-nav__list .num { color: var(--rail-ink-3); }

[data-layout="podcast-show"] .side-nav__status {
  border-top-color: var(--rail-rule);
  color: var(--rail-ink-3);
}

/* Locale switch + theme toggle live inside the sidebar */
[data-layout="podcast-show"] .side-nav .locale-switch__item,
[data-layout="podcast-show"] .side-nav .locale-switch__sep { color: var(--rail-ink-3); }
[data-layout="podcast-show"] .side-nav .locale-switch__item:hover,
[data-layout="podcast-show"] .side-nav .locale-switch__item:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="podcast-show"] .side-nav .locale-switch__item.is-active { color: var(--rail-ink); }

[data-layout="podcast-show"] .side-nav .theme-toggle {
  border-color: var(--rail-rule);
  color: var(--rail-ink-2);
}
[data-layout="podcast-show"] .side-nav .theme-toggle:hover {
  border-color: var(--rail-ink-3);
  color: var(--rail-ink);
}
[data-theme="light"] [data-layout="podcast-show"] .side-nav .theme-toggle__icon--sun,
[data-theme="dark"]  [data-layout="podcast-show"] .side-nav .theme-toggle__icon--moon { color: var(--rail-ink); }
[data-theme="light"] [data-layout="podcast-show"] .side-nav .theme-toggle__icon--moon,
[data-theme="dark"]  [data-layout="podcast-show"] .side-nav .theme-toggle__icon--sun { color: var(--rail-ink-3); }

/* The mobile header and menu are recoloured further down, AFTER the responsive
   block that lays them out. Order matters: those rules and these have the same
   specificity, so whichever comes last wins. See the comment there. */

/* =====================================================
   PAGE COMPONENTS
   ===================================================== */

[data-layout="podcast-show"] {
  --wba-dim:    rgba(91, 62, 184, 0.10);
  --icon-hover: #2a1d7e;
  --icon-glow:  rgba(42, 29, 126, 0.45);
  /* WBA violet is too dark to read on the dark paper — lighten it there. */
  --wba-accent: var(--wba);
}
[data-theme="dark"] [data-layout="podcast-show"] {
  --wba-dim:     rgba(139, 112, 232, 0.16);
  --wba-on-dark: #a88ef0;
  --icon-hover:  #a084e8;
  --icon-glow:   rgba(160, 132, 232, 0.55);
  --wba-accent:  #a88ef0;
}

/* ---------- MAIN + FOOTER SHELL ---------- */
[data-layout="podcast-show"] main {
  margin-left: max(var(--rail-w), calc((100vw + var(--rail-w) - var(--content-max) - var(--page-pad) * 2) / 2));
  margin-right: 0;
  padding: 0 var(--page-pad);
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
}
[data-layout="podcast-show"] .site-footer {
  margin-left: max(var(--rail-w), calc((100vw + var(--rail-w) - var(--content-max) - var(--page-pad) * 2) / 2));
  margin-right: 0;
  padding: 24px var(--page-pad) 40px;
  border-top: 1px solid var(--rule);
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
}
[data-layout="podcast-show"] .site-footer__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  padding: 8px 0;
}
[data-layout="podcast-show"] .site-footer__copy {
  margin: 0;
  font-size: 13px; color: var(--ink-2);
}
[data-layout="podcast-show"] .site-footer__links a {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
[data-layout="podcast-show"] .site-footer__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- KICKER ---------- */
[data-layout="podcast-show"] .kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  margin: 0;
}
[data-layout="podcast-show"] .kicker .num { color: var(--ink-2); margin-right: 6px; font-weight: 500; }

/* ---------- HERO ---------- */
[data-layout="podcast-show"] .show-hero { padding: 56px 0 44px; }
[data-layout="podcast-show"] .show-hero__grid {
  margin-top: 24px;
  display: grid; grid-template-columns: 200px 1fr;
  gap: 28px; align-items: start;
}

/* The artwork is the hero — the count line sits above it (D19). */
[data-layout="podcast-show"] .show-hero__art { min-width: 0; }
[data-layout="podcast-show"] .show-hero__count {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
/* The rail behind it is the same #5c3699 the artwork was sampled from, so the
   image needs its own edge to keep from bleeding into the rail (D17). */
[data-layout="podcast-show"] .show-hero__cover {
  width: 100%; height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule);
}

/* The h1 wrapping the artwork carries no text of its own, so it must not carry
   the browser's heading margins either. */
[data-layout="podcast-show"] .show-hero__heading { margin: 0; font: inherit; }

[data-layout="podcast-show"] .show-hero__info {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
/* `margin: 0` is load-bearing — the reset zeroes `ul`, never the headings. */
[data-layout="podcast-show"] .show-hero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty;
}
[data-layout="podcast-show"] .show-hero__intro {
  margin: 0;
  font-size: 15px; line-height: 1.65; color: var(--ink-2);
  max-width: 46ch; text-wrap: pretty;
}

/* Platform pills */
[data-layout="podcast-show"] .show-platforms {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 2px;
}
[data-layout="podcast-show"] .platform-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3); padding: 5px 11px;
  border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="podcast-show"] .platform-link:hover {
  color: var(--ink); border-color: var(--wba-accent); background: var(--wba-dim);
}
[data-layout="podcast-show"] .platform-link svg {
  width: 13px; height: 13px;
  fill: currentColor;
  opacity: 0.75; flex-shrink: 0;
  transition: opacity .15s var(--ease);
}
[data-layout="podcast-show"] .platform-link:hover svg { opacity: 1; }

/* ---------- EPISODES ---------- */
[data-layout="podcast-show"] .episodes { padding: 0 0 8px; }
[data-layout="podcast-show"] .episodes__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}

/* Sort bar */
[data-layout="podcast-show"] .sort-bar {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;
}
[data-layout="podcast-show"] .sort-bar__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 4px;
}
[data-layout="podcast-show"] .sort-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 4px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-3);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
[data-layout="podcast-show"] .sort-btn:hover { color: var(--ink); border-color: var(--ink-3); }
[data-layout="podcast-show"] .sort-btn[aria-pressed="true"] {
  border-color: var(--wba-accent); background: var(--wba-dim); color: var(--wba-accent);
}
[data-layout="podcast-show"] .sort-btn:focus-visible { outline: 2px solid var(--wba-accent); outline-offset: 2px; }

/* Episode rows. No thumbnails (D18) and no play counts (D4) — the count is a
   sort key on the row, never rendered. */
[data-layout="podcast-show"] .episode-list { list-style: none; display: flex; flex-direction: column; }
[data-layout="podcast-show"] .episode-item {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
[data-layout="podcast-show"] .episode-item:first-child { border-top: 1px solid var(--rule-soft); }

[data-layout="podcast-show"] .episode-item__code {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
[data-layout="podcast-show"] .episode-item__body { min-width: 0; }
[data-layout="podcast-show"] .episode-item__title {
  display: block;
  font-family: var(--serif); font-size: 15.5px;
  line-height: 1.3; color: var(--ink); margin-bottom: 4px;
  transition: color .15s var(--ease);
}
[data-layout="podcast-show"] .episode-item__title:hover { color: var(--wba-accent); }
[data-layout="podcast-show"] .episode-item__meta {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.03em;
}
[data-layout="podcast-show"] .episode-item__actions {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}

/* .icon-btn, copied from podcast_episode.css so both pages' platform icons
   behave identically — same circle, same fill swap, same glow per mode. */
[data-layout="podcast-show"] .icon-btn {
  --icon-btn-size: 30px;
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="podcast-show"] .icon-btn svg {
  width: 14px; height: 14px;
  fill: var(--ink-3);
  transition: fill .3s, filter .3s;
}
[data-layout="podcast-show"] .icon-btn:hover { border-color: var(--wba-accent); background: var(--wba-dim); }
[data-layout="podcast-show"] .icon-btn:hover svg {
  fill: var(--icon-hover);
  filter: drop-shadow(0 0 6px var(--icon-glow));
}
[data-layout="podcast-show"] .icon-btn svg[stroke],
[data-layout="podcast-show"] .icon-btn use { color: var(--ink-3); }
[data-layout="podcast-show"] .icon-btn:hover use { color: var(--icon-hover); }

/* notatki pill — only rendered when the show-notes file exists */
[data-layout="podcast-show"] .episode-item__notes {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 4px 10px; border: 1px solid var(--wba-accent); border-radius: 999px;
  color: var(--wba-accent); white-space: nowrap; margin-left: 3px;
  transition: background-color .15s var(--ease);
}
[data-layout="podcast-show"] .episode-item__notes:hover { background: var(--wba-dim); }

/* ---------- FOCUS ---------- */
[data-layout="podcast-show"] a:focus-visible,
[data-layout="podcast-show"] button:focus-visible {
  outline: 2px solid var(--wba-accent); outline-offset: 3px; border-radius: 3px;
}

/* ---------- NEUTRALISE FADE.JS ---------- */
/* fade.js sets header/section/footer to opacity:0 and animates in via .visible.
   The list must be visible with JS off, so the animation is disabled here. */
[data-layout="podcast-show"] header,
[data-layout="podcast-show"] section,
[data-layout="podcast-show"] footer {
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .25s var(--ease), color .25s var(--ease) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  [data-layout="podcast-show"] .side-nav { display: none; }
  [data-layout="podcast-show"] main,
  [data-layout="podcast-show"] .site-footer { margin-left: 0; max-width: 100%; }

  [data-layout="podcast-show"] .mobile-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px var(--page-pad);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    position: sticky; top: 0; z-index: 10;
  }
  [data-layout="podcast-show"] .brand--mobile { font-family: var(--serif); font-size: 22px; }
  [data-layout="podcast-show"] .menu-toggle {
    width: 40px; height: 40px;
    display: grid; grid-template-rows: repeat(3, 2px);
    align-content: center; justify-content: center; gap: 5px;
  }
  [data-layout="podcast-show"] .menu-toggle span { display: block; width: 22px; background: var(--ink); }
  [data-layout="podcast-show"] .mobile-menu {
    display: block;
    padding: 12px var(--page-pad) 20px;
    border-bottom: 1px solid var(--rule);
  }
  [data-layout="podcast-show"] .mobile-menu[hidden] { display: none; }
  [data-layout="podcast-show"] .mobile-menu ul {
    list-style: none;
    display: flex; flex-direction: column; gap: 2px;
  }
  [data-layout="podcast-show"] .mobile-menu a {
    display: block; padding: 10px 4px;
    font-family: var(--mono); font-size: 14px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule-soft);
  }

  [data-layout="podcast-show"] .show-hero { padding-top: 40px; }
  [data-layout="podcast-show"] .show-hero__grid { grid-template-columns: 170px 1fr; gap: 22px; }
}

/* --- Mobile header + menu replace the sidebar under 1024px ----------
   The rail's violet has to follow the layout rules above, not precede them:
   the block above paints .mobile-header with --paper and .mobile-menu a with
   --ink-2, at the same specificity as these rules. Put these first and the
   header ends up light paper with cream --rail-ink text on it, and the menu
   ends up violet with dark --ink-2 text on it — both unreadable in light mode,
   both fine in dark, which is what makes it easy to miss. */
@media (max-width: 1024px) {
  [data-layout="podcast-show"] .mobile-header,
  [data-layout="podcast-show"] .mobile-menu {
    background: var(--rail-bg);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="podcast-show"] .brand--mobile { color: var(--rail-ink); }
  [data-layout="podcast-show"] .menu-toggle span { background: var(--rail-ink); }
  [data-layout="podcast-show"] .mobile-menu a {
    color: var(--rail-ink-2);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="podcast-show"] .mobile-menu a[aria-current="page"] { color: var(--rail-ink); }
  [data-layout="podcast-show"] .mobile-header .locale-switch__item,
  [data-layout="podcast-show"] .mobile-header .locale-switch__sep { color: var(--rail-ink-3); }
  [data-layout="podcast-show"] .mobile-header .locale-switch__item.is-active { color: var(--rail-ink); }
  [data-layout="podcast-show"] .mobile-header .theme-toggle {
    border-color: var(--rail-rule);
    color: var(--rail-ink-2);
  }
}
@media (max-width: 640px) {
  [data-layout="podcast-show"] .show-hero { padding-top: 32px; }
  /* Artwork above the text — 170px of indent is too much to give away here. */
  [data-layout="podcast-show"] .show-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  [data-layout="podcast-show"] .show-hero__art { max-width: 220px; }

  /* The row keeps its platform links; they drop to their own line rather than
     being hidden, which is what the wireframe did. */
  [data-layout="podcast-show"] .episode-item {
    grid-template-columns: 62px 1fr;
    row-gap: 8px;
  }
  [data-layout="podcast-show"] .episode-item__actions { grid-column: 1 / -1; flex-wrap: wrap; }
  [data-layout="podcast-show"] .site-footer__row { flex-direction: column; align-items: flex-start; }
}

/* ---------- PRINT ---------- */
@media print {
  [data-layout="podcast-show"] .side-nav,
  [data-layout="podcast-show"] .mobile-header,
  [data-layout="podcast-show"] .mobile-menu,
  [data-layout="podcast-show"] .sort-bar { display: none; }
  [data-layout="podcast-show"] main, [data-layout="podcast-show"] .site-footer { margin-left: 0; }
}