/* =====================================================
   warpas.pl — PnP episode page

   Dark, single-column, top-nav. Structurally unrelated to
   podcast_episode.css (WBA) on purpose: two shows, two
   skins, moving independently.

   EVERY selector is scoped to the exact value
   [data-layout="podcast-episode-pnp"] — never a ^= prefix.
   stylesheet_link_tag :app serves every file in
   app/assets/stylesheets on EVERY page, so this scope is
   the only thing keeping these rules off the rest of the
   site. Note that "podcast-episode-pnp" merely *starts
   with* "podcast-episode"; attribute selectors match
   exactly, so podcast_episode.css cannot reach this page
   and this file cannot reach WBA's. See
   drafts/…/05_sandbox_violation.md.

   Base layer (reset, skip-link, visually-hidden) is copied
   from podcast_episode.css rather than shared — P2: copy,
   don't couple.
   ===================================================== */

/* ---------- FONTS ----------
   DM Sans ships as one variable file covering 100–1000.
   DM Mono upstream publishes TTF only and converting needs
   brotli, which is not installed — same trade already live
   for Instrument Serif. Both are unsubsetted and cover the
   Polish diacritics, so no unicode-range split. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/DMSans-Variable-d3bdb131.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/DMMono-Regular-22bb62ad.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/DMMono-Medium-d65a726a.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
[data-layout="podcast-episode-pnp"] {
  --pnp-bg:     #0a1430;
  --pnp-pink:   #f600ac;
  --pnp-blue:   #01acf4;
  --pnp-link:   #4a9eff;
  --pnp-link-h: #7bb8ff;
  --pnp-text:   #f0f3ff;
  --pnp-body:   #cdd5ec;
  --pnp-muted:  #8898c0;
  --pnp-dim:    rgba(255, 255, 255, 0.07);
  --pnp-dim2:   rgba(255, 255, 255, 0.14);
  --pnp-glow:   rgba(246, 0, 172, 0.45);

  --pnp-sans:   "DM Sans", system-ui, sans-serif;
  --pnp-mono:   "DM Mono", ui-monospace, "Courier New", monospace;

  /* The wireframe is full-bleed: a flat 28px pad and text across the whole
     viewport. A 1080px cap turned that into a narrow centred column with
     empty margins either side — the opposite of the design. 1600px keeps
     the full-width feel and only kicks in on very wide displays. */
  --pnp-measure: 1600px;
  --pnp-gutter:  clamp(20px, 4vw, 40px);
  --pnp-ease:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET / BASE ---------- */
[data-layout="podcast-episode-pnp"] *,
[data-layout="podcast-episode-pnp"] *::before,
[data-layout="podcast-episode-pnp"] *::after { box-sizing: border-box; }

/* base_site.css styles a bare `body`/`section` and is served on EVERY page by
   stylesheet_link_tag :app, so its rules land here whether or not they make
   sense. Four of them wrecked this page and every one had to be answered
   explicitly — an attribute selector only beats an element selector for the
   properties it actually names:

     body { text-align: center }   → every paragraph, heading and ref centred
     body { align-items: center }  → flex body shrink-wrapped its children, so
                                     the whole page sat in a content-width column
     body { padding: 2rem }        → a second gutter on top of --pnp-gutter
     section { max-width: 700px }  → .pnp-prose / .pnp-cta / .pnp-refs are
                                     <section>, so the copy was capped at 700px
                                     regardless of --pnp-measure

   podcast_episode.css does the same for WBA (its "RESET / BASE" block). */
[data-layout="podcast-episode-pnp"] {
  margin: 0;
  padding: 0;
  text-align: left;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--pnp-bg);
  color: var(--pnp-text);
  font-family: var(--pnp-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
[data-layout="podcast-episode-pnp"] section { max-width: none; margin-bottom: 0; }

/* fade.js sets header/section/footer to opacity:0 and animates them in via
   .visible. Same neutralisation WBA carries, for the same reason: in-page
   anchors flash. */
[data-layout="podcast-episode-pnp"] header,
[data-layout="podcast-episode-pnp"] section,
[data-layout="podcast-episode-pnp"] footer {
  opacity: 1 !important;
  transform: none !important;
}
[data-layout="podcast-episode-pnp"] img,
[data-layout="podcast-episode-pnp"] svg { display: block; max-width: 100%; }
[data-layout="podcast-episode-pnp"] a { color: var(--pnp-link); text-decoration: none; text-underline-offset: 3px; }
[data-layout="podcast-episode-pnp"] a:hover { color: var(--pnp-link-h); }
[data-layout="podcast-episode-pnp"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[data-layout="podcast-episode-pnp"] ul { margin: 0; padding: 0; list-style: none; }
[data-layout="podcast-episode-pnp"] h1,
[data-layout="podcast-episode-pnp"] h2 { margin: 0; font-weight: 400; }

[data-layout="podcast-episode-pnp"] .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-episode-pnp"] .skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 20;
  background: var(--pnp-text); color: var(--pnp-bg);
  padding: 8px 14px; border-radius: 4px;
  font-family: var(--pnp-mono); font-size: 12px;
}
[data-layout="podcast-episode-pnp"] .skip-link:focus { top: 8px; }

[data-layout="podcast-episode-pnp"] :focus-visible {
  outline: 2px solid var(--pnp-blue);
  outline-offset: 2px;
}

/* ---------- TOP NAV ---------- */
[data-layout="podcast-episode-pnp"] .pnp-nav {
  width: 100%; max-width: var(--pnp-measure); margin: 0 auto;
  padding: 18px var(--pnp-gutter) 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
}
[data-layout="podcast-episode-pnp"] .pnp-nav__left {
  display: flex; align-items: center; gap: 18px; min-width: 0;
}
[data-layout="podcast-episode-pnp"] .pnp-nav__logo { display: flex; align-items: center; }

/* First/prev/next/last jump. Kept quiet on purpose — muted mono at nav-link
   scale, no border until hover, so it reads as chrome rather than a call to
   action. The two edge jumps sit a further step back from prev/next: they are
   the rarer move, and four equally-weighted controls would stop being subtle. */
[data-layout="podcast-episode-pnp"] .pnp-nav__episodes {
  display: flex; align-items: center; gap: 4px;
}
[data-layout="podcast-episode-pnp"] .pnp-nav__ep--edge { opacity: 0.6; }
[data-layout="podcast-episode-pnp"] a.pnp-nav__ep--edge:hover { opacity: 1; }
[data-layout="podcast-episode-pnp"] .pnp-nav__ep {
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--pnp-muted);
  transition: color .15s var(--pnp-ease), border-color .15s var(--pnp-ease),
              background-color .15s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] a.pnp-nav__ep:hover {
  color: var(--pnp-text);
  border-color: var(--pnp-dim2);
  background: rgba(255, 255, 255, 0.04);
}
[data-layout="podcast-episode-pnp"] .pnp-nav__ep.is-disabled { opacity: 0.3; }
/* Top bar shared with the list and "o nas" pages; podcast_show_pnp.css is the
   blueprint. The yin-yang mark's thin border lets its dark square read as a
   tile against --pnp-bg. */
[data-layout="podcast-episode-pnp"] .pnp-nav__logo img {
  width: 45px; height: 45px; border-radius: 8px;
  border: 1px solid var(--pnp-dim2);
}
[data-layout="podcast-episode-pnp"] .pnp-nav__links {
  display: flex; gap: 20px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
[data-layout="podcast-episode-pnp"] .pnp-nav__links a { color: var(--pnp-muted); transition: color .15s var(--pnp-ease); }
[data-layout="podcast-episode-pnp"] .pnp-nav__links a:hover,
[data-layout="podcast-episode-pnp"] .pnp-nav__links a[aria-current="page"] { color: var(--pnp-text); }

/* ---------- PAGE SHELL ---------- */
[data-layout="podcast-episode-pnp"] .pnp-episode {
  width: 100%; max-width: var(--pnp-measure); margin: 0 auto;
  flex: 1;
}

/* ---------- ACCENT ----------
   The cover's yin-yang splash sets the page's highlight colour. Declared once
   here as custom properties so anything downstream (icon buttons today) just
   reads --pnp-accent and needs no per-accent rule of its own.

   Two slots, not one, so "mixed" has somewhere to put its second colour: rows
   of buttons alternate accent / accent-2. On single-colour pages the two are
   identical, so the alternation is invisible and the same rule covers all
   cases without a branch. */
[data-layout="podcast-episode-pnp"] .pnp-episode {
  --pnp-accent:        var(--pnp-pink);
  --pnp-accent-glow:   rgba(246, 0, 172, 0.45);
  --pnp-accent-tint:   rgba(246, 0, 172, 0.08);
  --pnp-accent-2:      var(--pnp-pink);
  --pnp-accent-2-glow: rgba(246, 0, 172, 0.45);
  --pnp-accent-2-tint: rgba(246, 0, 172, 0.08);
}
[data-layout="podcast-episode-pnp"] .pnp-accent--blue {
  --pnp-accent:        var(--pnp-blue);
  --pnp-accent-glow:   rgba(1, 172, 244, 0.45);
  --pnp-accent-tint:   rgba(1, 172, 244, 0.08);
  --pnp-accent-2:      var(--pnp-blue);
  --pnp-accent-2-glow: rgba(1, 172, 244, 0.45);
  --pnp-accent-2-tint: rgba(1, 172, 244, 0.08);
}
[data-layout="podcast-episode-pnp"] .pnp-accent--mixed {
  --pnp-accent:        var(--pnp-blue);
  --pnp-accent-glow:   rgba(1, 172, 244, 0.45);
  --pnp-accent-tint:   rgba(1, 172, 244, 0.08);
  --pnp-accent-2:      var(--pnp-pink);
  --pnp-accent-2-glow: rgba(246, 0, 172, 0.45);
  --pnp-accent-2-tint: rgba(246, 0, 172, 0.08);
}
/* A mentioned Warpas bez agendy episode: its own purple, the on-dark WBA
   accent from podcast_show.css, so its ring doesn't take this page's colours. */
[data-layout="podcast-episode-pnp"] .pnp-accent--wba {
  --pnp-accent:        #a88ef0;
  --pnp-accent-glow:   rgba(168, 142, 240, 0.45);
  --pnp-accent-tint:   rgba(168, 142, 240, 0.08);
  --pnp-accent-2:      #a88ef0;
  --pnp-accent-2-glow: rgba(168, 142, 240, 0.45);
  --pnp-accent-2-tint: rgba(168, 142, 240, 0.08);
}
/* .pnp-accent--pink and .pnp-accent--unknown inherit the pink defaults above.
   Except on a mentioned episode's thumbnail: its ring keeps that episode's
   own colour, so a pink one must not inherit a blue or mixed page's. */
[data-layout="podcast-episode-pnp"] .pnp-mentioned__thumb.pnp-accent--pink,
[data-layout="podcast-episode-pnp"] .pnp-mentioned__thumb.pnp-accent--unknown {
  --pnp-accent:        var(--pnp-pink);
  --pnp-accent-glow:   rgba(246, 0, 172, 0.45);
  --pnp-accent-tint:   rgba(246, 0, 172, 0.08);
  --pnp-accent-2:      var(--pnp-pink);
  --pnp-accent-2-glow: rgba(246, 0, 172, 0.45);
  --pnp-accent-2-tint: rgba(246, 0, 172, 0.08);
}

/* ---------- HERO ---------- */
[data-layout="podcast-episode-pnp"] .pnp-hero {
  padding: 8px var(--pnp-gutter) 26px;
  display: grid;
  /* Fixed cover track, not a fraction: at the wider measure a 0.85fr cover
     would grow to ~700px square and shove the meta column into a gutter. */
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Q2 — every supplied cover is square (3000×3000), so the slot is square too.
   The wireframe's landscape slot would have cropped or letterboxed all of it. */
[data-layout="podcast-episode-pnp"] .pnp-hero__cover {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at 35% 50%, #1a2d5a 0%, var(--pnp-bg) 75%);
}
[data-layout="podcast-episode-pnp"] .pnp-hero__cover img {
  width: 100%; height: 100%; object-fit: cover;
}

[data-layout="podcast-episode-pnp"] .pnp-hero__meta { min-width: 0; }

[data-layout="podcast-episode-pnp"] .pnp-ep-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 10px;
}
[data-layout="podcast-episode-pnp"] .pnp-ep-label {
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pnp-muted);
}
[data-layout="podcast-episode-pnp"] .pnp-ep-number {
  font-family: var(--pnp-mono); font-size: 26px; font-weight: 500;
  color: var(--pnp-pink); line-height: 1;
}
/* Accent modifiers — the cover art's yin-yang splash is blue, pink or both
   depending on who brought the topic, and the number echoes it. The mapping is
   hard-coded in PodcastsHelper for now; see drafts/…/21_hard_coded_color_pnp.md. */
[data-layout="podcast-episode-pnp"] .pnp-ep-number--pink { color: var(--pnp-pink); }
/* Not-yet-classified. Renders pink like everything unclassified always has, but
   as its own rule rather than by falling through to a "pink" the data never
   claimed — so switching unknowns to a neutral colour is a one-line change here
   and needs no Ruby. */
[data-layout="podcast-episode-pnp"] .pnp-ep-number--unknown { color: var(--pnp-pink); }
[data-layout="podcast-episode-pnp"] .pnp-ep-number--blue { color: var(--pnp-blue); }
[data-layout="podcast-episode-pnp"] .pnp-ep-number--mixed {
  background: linear-gradient(100deg, var(--pnp-blue) 15%, var(--pnp-pink) 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-layout="podcast-episode-pnp"] .pnp-ep-dot { color: rgba(255, 255, 255, 0.18); }
[data-layout="podcast-episode-pnp"] .pnp-ep-date {
  font-family: var(--pnp-mono); font-size: 12px;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45);
}

/* The wireframe's 22px title is mockup scale; on a real viewport it needs to
   carry the page. Same lesson as WBA, where 15px body copy read as too small. */
[data-layout="podcast-episode-pnp"] .pnp-ep-title {
  font-family: var(--pnp-sans);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--pnp-text); text-wrap: pretty;
}

/* ---------- LISTEN + SHARE ----------
   D10 kept: circular frames at ONE size, laid out as a labelled row each,
   built by looping a list. Colours are the wireframe's, not WBA's. */
[data-layout="podcast-episode-pnp"] .pnp-actions { margin-top: 26px; }
/* Label sits above its row and starts on the same x as the first circle:
   both are the first thing in a block-level box with no indent, so the only
   thing that could break the line-up is padding — kept at 0 on purpose. */
[data-layout="podcast-episode-pnp"] .pnp-action-label {
  display: block;
  padding: 0; margin: 0 0 10px;
  text-align: left;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pnp-muted);
}
[data-layout="podcast-episode-pnp"] .pnp-action-row {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0; gap: 14px;
}
[data-layout="podcast-episode-pnp"] .pnp-action-row + .pnp-action-label { margin-top: 24px; }
[data-layout="podcast-episode-pnp"] .pnp-action-row--share { position: relative; }

[data-layout="podcast-episode-pnp"] .icon-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--pnp-dim2);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color .15s var(--pnp-ease), background-color .15s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] .icon-btn svg {
  width: 28px; height: 28px;
  fill: var(--pnp-muted);
  transition: fill .3s, filter .3s;
}
/* Share is secondary to listen, so its circles stay a step down. */
[data-layout="podcast-episode-pnp"] .pnp-action-row--share .icon-btn { width: 48px; height: 48px; }
[data-layout="podcast-episode-pnp"] .pnp-action-row--share .icon-btn svg { width: 21px; height: 21px; }
/* Highlight comes from the cover, not from a fixed pink. Odd buttons take the
   first accent slot, even buttons the second — identical on single-colour
   pages, alternating blue/pink on a "mixed" one. */
[data-layout="podcast-episode-pnp"] .icon-btn:hover,
[data-layout="podcast-episode-pnp"] .icon-btn:focus-visible {
  border-color: var(--pnp-accent);
  background: var(--pnp-accent-tint);
}
[data-layout="podcast-episode-pnp"] .icon-btn:hover svg,
[data-layout="podcast-episode-pnp"] .icon-btn:focus-visible svg {
  fill: var(--pnp-accent);
  filter: drop-shadow(0 0 6px var(--pnp-accent-glow));
}
[data-layout="podcast-episode-pnp"] .icon-btn:nth-child(even):hover,
[data-layout="podcast-episode-pnp"] .icon-btn:nth-child(even):focus-visible {
  border-color: var(--pnp-accent-2);
  background: var(--pnp-accent-2-tint);
}
[data-layout="podcast-episode-pnp"] .icon-btn:nth-child(even):hover svg,
[data-layout="podcast-episode-pnp"] .icon-btn:nth-child(even):focus-visible svg {
  fill: var(--pnp-accent-2);
  filter: drop-shadow(0 0 6px var(--pnp-accent-2-glow));
}
/* The copy icon is stroked, not filled */
[data-layout="podcast-episode-pnp"] .icon-btn use { color: var(--pnp-muted); }
[data-layout="podcast-episode-pnp"] .icon-btn:hover use { color: var(--pnp-accent); }
[data-layout="podcast-episode-pnp"] .icon-btn:nth-child(even):hover use { color: var(--pnp-accent-2); }

/* Out of flow, so the "copied!" text never reserves space in the row */
[data-layout="podcast-episode-pnp"] .clipboard-feedback {
  position: absolute; top: calc(100% + 6px); left: 0;
  font-family: var(--pnp-mono); font-size: 10px; letter-spacing: 0.05em;
  white-space: nowrap; pointer-events: none;
  color: var(--pnp-accent);
  opacity: 0; transition: opacity .2s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] .clipboard-feedback--visible { opacity: 1; }

/* ---------- DIVIDERS ---------- */
[data-layout="podcast-episode-pnp"] .pnp-rule-gradient {
  height: 1px; margin: 0 var(--pnp-gutter);
  background: linear-gradient(90deg,
    rgba(1, 172, 244, 0) 0%, rgba(1, 172, 244, 0.45) 25%,
    rgba(246, 0, 172, 0.45) 75%, rgba(246, 0, 172, 0) 100%);
}
[data-layout="podcast-episode-pnp"] .pnp-rule-subtle {
  height: 1px; margin: 26px var(--pnp-gutter) 0;
  background: var(--pnp-dim);
}

/* ---------- CONTENT ---------- */
[data-layout="podcast-episode-pnp"] .pnp-content { padding: 28px var(--pnp-gutter) 8px; }

[data-layout="podcast-episode-pnp"] .pnp-prose p,
[data-layout="podcast-episode-pnp"] .pnp-cta p {
  font-size: 16px; line-height: 1.7; color: var(--pnp-body);
  text-wrap: pretty;
}
[data-layout="podcast-episode-pnp"] .pnp-prose p + p,
[data-layout="podcast-episode-pnp"] .pnp-cta p + p { margin-top: 15px; }
[data-layout="podcast-episode-pnp"] .pnp-prose a,
[data-layout="podcast-episode-pnp"] .pnp-cta a { text-decoration: underline; }

/* Description lists — mainly the Q&A episodes' "Razem przejdziemy przez
   pytania" block. The base reset strips list-style, so without this the
   questions ran together as bare lines. The diamond takes the cover accent;
   on mixed covers items alternate accent / accent-2 like the icon buttons.
   Numbered lists get a zero-padded mono number in the same colours instead
   of a diamond — the markers are split by list type so an <ol> never shows
   both. */
[data-layout="podcast-episode-pnp"] .pnp-prose ul,
[data-layout="podcast-episode-pnp"] .pnp-prose ol { margin: 10px 0 0; padding: 0; list-style: none; }
[data-layout="podcast-episode-pnp"] .pnp-prose ul + p,
[data-layout="podcast-episode-pnp"] .pnp-prose ol + p { margin-top: 15px; }
[data-layout="podcast-episode-pnp"] .pnp-prose li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 16px; line-height: 1.6; color: var(--pnp-body);
  text-wrap: pretty;
}
[data-layout="podcast-episode-pnp"] .pnp-prose ul > li::before {
  content: "";
  position: absolute; left: 5px; top: calc(6px + 0.8em - 3.5px);
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--pnp-accent);
  box-shadow: 0 0 6px var(--pnp-accent-glow);
}
[data-layout="podcast-episode-pnp"] .pnp-prose ul > li:nth-child(even)::before {
  background: var(--pnp-accent-2);
  box-shadow: 0 0 6px var(--pnp-accent-2-glow);
}
/* Emoji bullets (early episodes, see PodcastsHelper#emoji_lines_to_list):
   the item's own emoji replaces the diamond, same spacing otherwise. */
[data-layout="podcast-episode-pnp"] .pnp-prose ul > li[data-marker] { padding-left: 30px; }
[data-layout="podcast-episode-pnp"] .pnp-prose ul > li[data-marker]::before,
[data-layout="podcast-episode-pnp"] .pnp-prose ul > li[data-marker]:nth-child(even)::before {
  content: attr(data-marker);
  left: 0; top: 6px; width: auto; height: auto;
  transform: none; background: none; box-shadow: none;
  font-size: 16px; line-height: 1.6;
}
[data-layout="podcast-episode-pnp"] .pnp-prose ol { counter-reset: pnp-item; }
[data-layout="podcast-episode-pnp"] .pnp-prose ol > li { counter-increment: pnp-item; padding-left: 34px; }
[data-layout="podcast-episode-pnp"] .pnp-prose ol > li::before {
  content: counter(pnp-item, decimal-leading-zero);
  position: absolute; left: 0; top: 6px;
  font-family: var(--pnp-mono); font-size: 13px; line-height: calc(1.6 * 16px);
  color: var(--pnp-accent);
  text-shadow: 0 0 6px var(--pnp-accent-glow);
}
[data-layout="podcast-episode-pnp"] .pnp-prose ol > li:nth-child(even)::before {
  color: var(--pnp-accent-2);
  text-shadow: 0 0 6px var(--pnp-accent-2-glow);
}
[data-layout="podcast-episode-pnp"] .pnp-prose li ul,
[data-layout="podcast-episode-pnp"] .pnp-prose li ol { margin-top: 2px; }

[data-layout="podcast-episode-pnp"] .pnp-cta {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 2px solid var(--pnp-pink);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- REFERENCES ----------
   D2+D3 treatment, in PnP colours: the `↳` marker and the link on its own
   line beneath the text. The wireframe's disc bullets with inline links were
   explicitly overridden. */
[data-layout="podcast-episode-pnp"] .pnp-refs { margin-top: 34px; }
[data-layout="podcast-episode-pnp"] .pnp-refs__heading {
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pnp-muted); margin-bottom: 14px;
}
[data-layout="podcast-episode-pnp"] .pnp-refs ul { margin: 0; padding: 0; }
[data-layout="podcast-episode-pnp"] .pnp-refs li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--pnp-dim);
  font-size: 15px; line-height: 1.55; color: var(--pnp-body);
}
[data-layout="podcast-episode-pnp"] .pnp-refs li::before {
  content: "↳";
  position: absolute; left: 4px; top: 11px;
  font-family: var(--pnp-mono); font-size: 12px;
  color: var(--pnp-pink);
}
[data-layout="podcast-episode-pnp"] .pnp-refs li a {
  display: block; margin-top: 4px;
  font-family: var(--pnp-mono); font-size: 12.5px;
  color: var(--pnp-link);
  text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ---------- MENTIONED EPISODES ----------
   Items that link to another episode get its cover as a thumbnail (added by
   with_episode_thumbnails), so this list reads as "episodes", not as more
   references. The thumbnail ring takes the mentioned episode's own accent,
   not the current page's. */
[data-layout="podcast-episode-pnp"] .pnp-refs li.pnp-mentioned {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 0;
}
[data-layout="podcast-episode-pnp"] .pnp-refs li.pnp-mentioned::before { content: none; }
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-mentioned__thumb {
  display: block; margin: 0;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at 35% 50%, #1a2d5a 0%, var(--pnp-bg) 75%);
  box-shadow: 0 0 0 1px var(--pnp-dim);
  transition: transform 0.2s var(--pnp-ease), box-shadow 0.2s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] .pnp-mentioned__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
[data-layout="podcast-episode-pnp"] .pnp-mentioned:hover .pnp-mentioned__thumb {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--pnp-accent), 0 6px 18px var(--pnp-accent-2-glow);
}
/* Under a category link's text: a row of mini cards, one per episode in the
   category (_pnp_category_shelf), with the "runda N" marker over the shared
   splash, as on the categories page. Same blue/pink
   alternation as the categories page; the episode being viewed gets a solid
   accent border and a "ten odcinek" tag instead of a link. Every rule is
   scoped under .pnp-refs to beat the reference list's link styles. */
/* A category link gets a fanned stack of up to three of that category's
   covers in the same slot, so it reads as "a whole shelf of episodes" next to
   the single covers. Oldest cover at the back; hovering fans them out. */
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-mentioned__stack {
  position: relative;
  overflow: visible;
  background: none;
  box-shadow: none;
}
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack img {
  position: absolute; top: 0; left: 0;
  width: 78%; height: 78%;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--pnp-dim), -4px 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s var(--pnp-ease), box-shadow 0.2s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack img:nth-child(2) { transform: translate(11%, 11%); }
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack img:nth-child(3) { transform: translate(22%, 22%); }
[data-layout="podcast-episode-pnp"] .pnp-mentioned--category:hover .pnp-mentioned__thumb { transform: none; box-shadow: none; }
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack:hover img:nth-child(1) { transform: translate(-6%, 4%) rotate(-6deg); }
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack:hover img:nth-child(2) { transform: translate(11%, 8%); }
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack:hover img:nth-child(3) { transform: translate(28%, 12%) rotate(6deg); }
/* The front cover lights up, whether the category has one, two or three
   episodes. It takes the second accent slot: the stack opens the alternation
   the shelf cards continue, like the share buttons do. On a "mixed" page
   that reads stack pink, round 1 blue, round 2 pink, round 3 blue; on a
   single-colour page everything is that colour. */
[data-layout="podcast-episode-pnp"] .pnp-mentioned__stack:hover img:last-child {
  box-shadow: 0 0 0 2px var(--pnp-accent-2), 0 6px 18px var(--pnp-accent-2-glow);
}

/* The cards sit in the text column, under the text, where the nested
   episode links they replace would have been. */
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-mentioned--category .pnp-shelf {
  margin-top: 14px;
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px;
  max-width: 640px;
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card {
  padding: 0; border: none;
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card::before { content: none; }
/* Even cards (round 2, 4…) swap in the second accent slot, so everything
   inside them follows: border, "runda" label, number, current-card glow. */
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card:nth-child(even) {
  --pnp-accent:      var(--pnp-accent-2);
  --pnp-accent-glow: var(--pnp-accent-2-glow);
  --pnp-accent-tint: var(--pnp-accent-2-tint);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__link {
  display: flex; flex-direction: column; margin: 0;
  border: 1px solid color-mix(in srgb, var(--pnp-accent) 35%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  color: var(--pnp-text);
  font-family: var(--pnp-sans);
  text-decoration: none;
  transition: transform .2s var(--pnp-ease), border-color .2s var(--pnp-ease), box-shadow .2s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] .pnp-refs a.pnp-shelf-card__link:hover,
[data-layout="podcast-episode-pnp"] .pnp-refs a.pnp-shelf-card__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pnp-accent);
  box-shadow: 0 10px 26px -14px var(--pnp-accent-glow);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card--current .pnp-shelf-card__link {
  border-color: var(--pnp-accent);
  background: var(--pnp-accent-tint);
  box-shadow: 0 0 0 1px var(--pnp-accent), 0 10px 26px -14px var(--pnp-accent-glow);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__art {
  position: relative; display: block;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 35% 50%, #1a2d5a 0%, var(--pnp-bg) 75%);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__round {
  position: absolute; left: 7px; bottom: 7px;
  padding: 4px 8px;
  border: 1px solid var(--pnp-accent); border-radius: 999px;
  background: rgba(10, 20, 48, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--pnp-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pnp-text);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 6px;
  padding: 7px 9px 8px;
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__number {
  font-family: var(--pnp-mono); font-size: 13px; font-weight: 500;
  color: var(--pnp-accent);
}
[data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__here {
  white-space: nowrap;
  font-family: var(--pnp-mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pnp-accent);
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="podcast-episode-pnp"] .pnp-mentioned__thumb { transition: none; }
  [data-layout="podcast-episode-pnp"] .pnp-mentioned__stack img { transition: none; }
  [data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf-card__link { transition: none; }
  [data-layout="podcast-episode-pnp"] .pnp-refs a.pnp-shelf-card__link:hover { transform: none; }
  [data-layout="podcast-episode-pnp"] .pnp-mentioned:hover .pnp-mentioned__thumb { transform: none; }
}

/* ---------- GLOSSARY ----------
   Reads as a small dictionary: the term (split off by with_glossary_terms)
   on its own line, its English name in mono beside it, the definition below.
   The "?" marker answers the section's "Gdyby coś zabrzmiało niejasno".
   Nested entries (e.g. the attachment styles) drop the dividers and take a
   quieter dash, so they read as part of their parent term. */
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary li::before {
  content: "?";
  font-weight: 500;
  color: var(--pnp-blue);
}
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary .pnp-term {
  display: block;
  margin-bottom: 3px;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--pnp-text);
}
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary .pnp-term__eng {
  margin-left: 4px;
  font-family: var(--pnp-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--pnp-muted);
}
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary li > ul { margin-top: 8px; }
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary li li {
  padding: 8px 0 8px 20px;
  border-bottom: none;
}
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary li li::before {
  content: "–";
  top: 8px;
  color: var(--pnp-muted);
}
[data-layout="podcast-episode-pnp"] .pnp-refs--glossary li li .pnp-term { font-size: 15px; }

/* ---------- EPISODE NAV ----------
   The shared partial renders five children in DOM order:
   jump · btn · all-episodes link · btn · jump.
   CSS alone turns that into the wireframe's four-button grid with the
   all-episodes link centred underneath — the markup is never forked. */
[data-layout="podcast-episode-pnp"] .pnp-nav-section { padding: 24px var(--pnp-gutter) 10px; }
[data-layout="podcast-episode-pnp"] .pnp-nav-label {
  font-family: var(--pnp-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pnp-muted); margin-bottom: 12px;
}

[data-layout="podcast-episode-pnp"] .ep-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
[data-layout="podcast-episode-pnp"] .ep-nav-jump,
[data-layout="podcast-episode-pnp"] .ep-nav-btn {
  padding: 11px 12px;
  border: 1px solid var(--pnp-dim2);
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0; text-align: left;
  transition: border-color .15s var(--pnp-ease), background-color .15s var(--pnp-ease);
}
[data-layout="podcast-episode-pnp"] a.ep-nav-jump:hover,
[data-layout="podcast-episode-pnp"] a.ep-nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}
[data-layout="podcast-episode-pnp"] .ep-nav-jump.is-disabled,
[data-layout="podcast-episode-pnp"] .ep-nav-btn.is-disabled { opacity: 0.35; }

/* The partial marks the trailing pair `.right`; the wireframe left-aligns all
   four, so that modifier is deliberately not honoured here. */
[data-layout="podcast-episode-pnp"] .ep-nav-direction {
  font-family: var(--pnp-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pnp-muted); white-space: nowrap;
}
[data-layout="podcast-episode-pnp"] .ep-nav-title,
[data-layout="podcast-episode-pnp"] .ep-nav-num {
  font-family: var(--pnp-mono); font-size: 12px;
  color: var(--pnp-body); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Third child in the DOM, last row on screen */
[data-layout="podcast-episode-pnp"] .ep-nav-all {
  order: 9;
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 6px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pnp-blue);
  text-decoration: underline; text-underline-offset: 3px;
}
[data-layout="podcast-episode-pnp"] .ep-nav-all:hover { color: #5cc5f8; }

/* ---------- FOOTER ---------- */
[data-layout="podcast-episode-pnp"] .pnp-footer {
  width: 100%; max-width: var(--pnp-measure); margin: 32px auto 0;
  border-top: 1px solid var(--pnp-dim);
  text-align: center; padding: 26px var(--pnp-gutter);
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--pnp-muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  [data-layout="podcast-episode-pnp"] .pnp-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  [data-layout="podcast-episode-pnp"] .pnp-hero__cover { max-width: 320px; }
  [data-layout="podcast-episode-pnp"] .ep-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-layout="podcast-episode-pnp"] .pnp-nav { flex-wrap: wrap; gap: 12px; }
  [data-layout="podcast-episode-pnp"] .pnp-nav__left { gap: 10px; }
  [data-layout="podcast-episode-pnp"] .pnp-nav__ep { padding: 4px 6px; font-size: 10px; }
  [data-layout="podcast-episode-pnp"] .pnp-nav__links { gap: 14px; font-size: 10px; }
  [data-layout="podcast-episode-pnp"] .pnp-hero__cover { max-width: none; }
  [data-layout="podcast-episode-pnp"] .ep-nav { grid-template-columns: 1fr; }
  [data-layout="podcast-episode-pnp"] .pnp-action-row { flex-wrap: wrap; }
  [data-layout="podcast-episode-pnp"] .pnp-refs li.pnp-mentioned {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }
  [data-layout="podcast-episode-pnp"] .pnp-refs .pnp-shelf__cards {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
  }
}