/* ── The podcast player — ONE canonical stylesheet ───────────────────────────
   Injected by build.mjs into every artifact carrying
   <meta name="pf-surface" content="podcast">. Do not paste a copy into an
   artifact; see the header of podcast-player.js for why this file exists.

   The component owns the TRANSPORT — the bar, the buttons, their layout. The
   page owns only the title, the description and the <audio>. That split is
   deliberate: this restyle touched one file instead of four, which is the
   whole point of having a component at all.

   Every colour goes through the artifact's own palette vars, so this inherits
   whatever the page defines and follows the site theme toggle with no JS.
   The names used here — --panel --border --text --muted --accent
   --accent-soft --warn --warn-soft --mono — are the house set from
   templates/house-shell.html. */

.player{border:1px solid var(--border);border-radius:14px;background:var(--panel);
  padding:1.4rem 1.5rem;margin:0 0 2rem}

/* ── phones: the card runs to the edges ──────────────────────────────────────
   At 390px the page gutter (16px a side) plus the card's own 1.5rem padding
   (24px a side) spent 80px — a fifth of the screen — before the waveform even
   started, so the transport stopped visibly short of the card it sits in and
   the bars were squeezed into 308px of a 390px screen.

   `calc(50% - 50vw)` is the full-bleed idiom: it cancels whatever horizontal
   padding the PAGE happens to put on its wrapper, which matters because this
   one stylesheet is injected into thirteen podcast pages that do not all use
   the same gutter. The side borders and the corner radius go with it — a
   rounded box clipped at both screen edges reads as a rendering fault. */
@media(max-width:640px){
  .player{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-left:0;border-right:0;border-radius:0;padding:1.25rem 1rem}
}
.player h3{margin:0 0 .3rem;font-size:1.05rem}
.player .meta{color:var(--muted);font-size:.85rem;margin:0 0 1.1rem}
.player audio{width:100%;display:block}
.pending{border-left:3px solid var(--warn);background:var(--warn-soft);
  padding:.85rem 1.05rem;border-radius:0 8px 8px 0;font-size:.92rem;line-height:1.6}

/* A neutral that reads as "track" against both themes without needing a var
   the artifacts do not define. */
.pl{--pl-track:rgba(127,133,153,.32);display:block;margin-top:.35rem}

/* ── the scrub bar, drawn as a waveform ──────────────────────────────────────
   Two identical bar fields stacked: the lower one neutral, the upper one in
   the accent and clipped from the right to the played fraction. Progress is
   therefore one clip-path change rather than a walk over every bar.

   The native range input sits on top at full size and zero opacity. It is
   still the control — drag, keyboard, and the whole scrub path are unchanged;
   the bars are what you see. Styling the range's own track away and drawing
   beside it is what keeps this accessible for free. */
.pl-wave{position:relative;height:2.5rem;margin:.2rem 0 0}
.pl-bars{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;pointer-events:none}
.pl-bars > i{display:block;width:3px;min-height:3px;border-radius:999px;
  background:var(--pl-track)}
.pl-bars-played > i{background:var(--accent)}
/* Clipped by JS to the played fraction; declared here so the first paint
   before any timeupdate shows nothing played rather than everything. */
.pl-bars-played{clip-path:inset(0 100% 0 0)}

.pl-seek{position:absolute;inset:0;-webkit-appearance:none;appearance:none;
  width:100%;height:100%;margin:0;padding:0;background:transparent;
  opacity:0;cursor:pointer;touch-action:none}
.pl-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:100%}
.pl-seek::-moz-range-thumb{width:14px;height:100%;border:0}
/* The input is invisible, so the focus ring has to be drawn on the wrapper —
   otherwise keyboard users get a control with no visible focus at all.

   :focus-within would also fire on a MOUSE or TOUCH seek, which drew an accent
   ring around the whole waveform every time someone tapped a spot in the
   episode — redundant, because the position they just picked is already shown
   inside the bar by the played/unplayed split, and loud enough that it read as
   the page selecting itself. :has(:focus-visible) narrows it to the keyboard
   case the ring exists for; a pointer seek now shows nothing extra.
   (Gera, 2026-09-09: "it does a border around like a purple border … we want
   to remove that purple border because it's already highlighted … inside".) */
.pl-seek:focus{outline:0}
.pl-wave:has(.pl-seek:focus-visible){outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ── times ───────────────────────────────────────────────────────────────────
   NO --mono anywhere in this component. Every number — the clock, the speed,
   the digit inside the skip arrows — is set in the page's own face, the one
   the standfirst under the title uses. The monospace read as a terminal
   dropped into a reading page. `tabular-nums` keeps the digits from jittering
   as the clock ticks, which is the only thing the mono was really buying. */
.pl-times{margin:.15rem .1rem 0}
.pl-time{font-size:.85rem;font-weight:600;line-height:1;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ── transport ───────────────────────────────────────────────────────────────
   1fr auto 1fr keeps play dead-centre no matter how wide the speed label gets
   — "1.25×" is three characters wider than "2.0×", and a flex row would shift
   the play button every time the speed changed. */
.pl-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.5rem;margin-top:.5rem}
.pl-transport{display:inline-flex;align-items:center;gap:1.1rem;justify-self:center}

.pl-btn{font:inherit;border:0;background:transparent;color:var(--muted);
  cursor:pointer;padding:.35rem;line-height:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .14s ease,background .14s ease}
.pl-btn:hover{color:var(--accent);background:var(--accent-soft)}
.pl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The "10" inside the arrows is <text> in an inline SVG, so it takes its face
   from here rather than from a font-family attribute on the element. */
.pl-btn svg text{font-family:inherit;font-variant-numeric:tabular-nums}

.pl-play{width:2.9rem;height:2.9rem;background:var(--accent);color:#fff;padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pl-play:hover{background:var(--accent);color:#fff;opacity:.9}
/* The play glyph is a triangle, so it reads as off-centre when centred by
   geometry. Nudge it back by an optical hair; pause is symmetrical and stays. */
.pl-play[data-state="paused"] svg{margin-left:2px}

/* The speed pill, taken from the call player's. Every label sits in the SAME
   grid cell; only the current one is visible and the rest hold the box open at
   the widest label's width as the real font renders it — so cycling can never
   resize the chip and shove the controls beside it. `min-width` is a floor
   only; the stack already pins the width. */
.pl-rate{display:grid;place-items:center;justify-self:start;
  font-size:.82rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  border:0;cursor:pointer;padding:0 .7rem;height:1.9rem;min-width:3rem;
  border-radius:999px;background:var(--accent-soft);color:var(--accent);
  transition:opacity .14s ease}
.pl-rate > span{grid-area:1/1}
.pl-rate:hover{opacity:.8}
.pl-rate:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── the read-along ──────────────────────────────────────────────────────────
   Opens when playback starts and shows the transcript as a slowly moving
   column, current line lit. Present only when the page supplies a VTT.

   The COLUMN moves; the line does not. An earlier version swapped a single
   centred sentence in place, which read as text jumping around rather than as
   something you could follow. Here every line keeps its position and the whole
   column walks down — the same thing a lyrics view does, and the reason it is
   restful to read.

   Scrolling is owned by this box (overflow-y + its own scrollTo), never by
   scrollIntoView, which would drag the surrounding article around every few
   seconds while you were trying to read it. */
.pl-reader{position:relative;margin:1rem 0 .1rem;max-height:13.5rem;overflow-y:auto;
  border-radius:10px;background:var(--accent-soft);
  padding:1rem 1.1rem;scrollbar-width:thin;
  /* Fade both edges so lines enter and leave instead of being chopped. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%)}
/* Fades and lifts in; deliberately does NOT animate height. An opening
   animation on max-height means the box is still growing when the first
   auto-scroll measures clientHeight to find its centre, so the opening line
   lands at the top of the panel and stays there until the next cue boundary
   corrects it. Height is settled from the first frame; only paint moves. */
.pl-reader.open{animation:pl-open .28s ease}
@keyframes pl-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Top and bottom padding of half the box, so the FIRST and LAST lines can
   still reach the middle — without it the column stops short and the active
   line sits against an edge at both ends of the episode. */
.pl-lines{padding:5.2rem 0}
.pl-line{margin:0;padding:.34rem .5rem;border-radius:7px;cursor:pointer;
  font-size:.95rem;line-height:1.55;color:var(--muted);opacity:.55;
  transition:opacity .25s ease,color .25s ease,background .25s ease}
.pl-line:hover{opacity:.85;background:rgba(127,133,153,.12)}
.pl-line.on{opacity:1;color:var(--text);font-weight:600;background:var(--panel)}

@media (max-width:560px){
  .pl-reader{max-height:11rem}
  .pl-lines{padding:4rem 0}
  .pl-line{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .pl-reader{scroll-behavior:auto}
  .pl-reader.open{animation:none}
  .pl-line{transition:none}
}

/* ── follow-along ───────────────────────────────────────────────────────────
   Applied only when the page supplies a VTT; a transcript without one keeps
   its plain styling and none of these rules ever match. */
.tx-seekable{cursor:pointer;border-radius:6px;margin-left:-.55rem;padding-left:.55rem;
  border-left:2px solid transparent;transition:background .18s,border-color .18s}
.tx-seekable:hover{background:var(--accent-soft)}
.tx-now{background:var(--accent-soft);border-left-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .tx-seekable{transition:none}
}