/* wtpp-rocker-egg.css — v3.7.781
 *
 * Scoped styling for the audio-page Easter egg: a circular rocker-hand button that sits
 * immediately before each episode's native <audio controls>, and a historical-figure image
 * that rises from behind the player when the button is pressed.
 *
 * Everything here is namespaced under .wtpp-rocker* so it cannot touch the rest of the audio
 * page. The reveal is built to be reflow-safe (WCAG 2.1 SC 1.4.10): the figure is clipped by
 * an overflow:hidden wrapper constrained to max-width:100%, and it animates with transform
 * (which does not participate in layout), so it can never create horizontal scroll at 320px.
 */

/* --- the row that holds [rocker button] [native audio player] ------------------------- */
.wtpp-rocker-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;            /* at narrow widths the player drops below the button, no overflow */
}
.wtpp-rocker-row audio {
  flex: 1 1 240px;           /* player takes remaining width, can shrink, min 240px then wraps */
  min-width: 0;              /* critical: lets the native player shrink instead of forcing width */
}

/* --- the circular rocker button, matched to the play-button screenshot ---------------- */
/* v3.7.784: fixed dark chrome matching the native <audio> play button. That control is
   browser chrome and does NOT follow the site theme, so these must not come from --ink-*,
   which invert between light and dark mode. That inversion is exactly why the button
   previously rendered as a light tan circle beside a dark player. */
.wtpp-rocker-row {
  --rocker-btn-bg: #2f2f2f;
  --rocker-btn-bg-hover: #3f3f3f;
  --rocker-btn-fg: #ffffff;
  --rocker-btn-on: #b22234;
}
.wtpp-rocker-btn {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  /* v3.7.790: the supplied artwork carries its own disc, so the control itself is
     transparent and the image IS the button face. */
  background: transparent;
  color: var(--rocker-btn-fg);
  overflow: hidden;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.wtpp-rocker-btn:hover .wtpp-rocker-face { filter: brightness(1.18); }
.wtpp-rocker-btn:active { transform: scale(0.94); }
.wtpp-rocker-face {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transition: filter 0.15s ease;
  -webkit-user-drag: none;
  user-select: none;
}
.wtpp-rocker-btn:focus-visible {
  outline: var(--btn-focus-ring); outline-width: 3px;          /* visible keyboard focus (AA) */
  outline-offset: 2px;
}
/* Pressed / active state. The artwork now covers the button's own background, so the active
   cue is a ring drawn OUTSIDE the disc plus a slight scale, neither of which relies on colour
   alone (WCAG 1.4.1). overflow is unset here so the ring is not clipped by the button. */
.wtpp-rocker-btn[aria-pressed="true"] {
  overflow: visible;
}
.wtpp-rocker-btn[aria-pressed="true"] .wtpp-rocker-face {
  transform: scale(0.92);
}
.wtpp-rocker-btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.15rem;
  height: 3.15rem;
  /* v3.7.793: the ring used to sit 2px low and right. The button is border-box but this
     pseudo-element was not, so its declared width excluded the 2px border on each side, and
     the old negative margin of half the DECLARED width centred the content box rather than
     the visible border box. Fixed twice over so it cannot drift again: box-sizing makes the
     declared width the outer size, and translate(-50%, -50%) offsets by the border box
     itself, which stays correct even if the border width is ever changed. */
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--rocker-btn-on);
  pointer-events: none;
}
.wtpp-rocker-btn { position: relative; }

/* No dark-theme override: this control intentionally matches the native player chrome,
   which is the same dark pill in both themes. */

/* --- the figure reveal ---------------------------------------------------------------- */
/* The stage is anchored to the top of the episode head / player and is the CLIP MASK. Its
 * own overflow:hidden + max-width:100% is what guarantees no 2-D scroll at any viewport. */
.wtpp-rocker-stage {
  /* Declared here with its closed value so the token has a definition in the stylesheet
     rather than existing only as a fallback. JS overrides it per element, inline, with the
     figure's measured height when the stage opens. */
  --rocker-h: 0px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;                    /* THE reflow guarantee: nothing escapes horizontally */
  margin: 0 0 0.4rem 0;
  /* collapsed by default; JS sets --rocker-h to the image height to open */
  height: 0;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* v3.7.795: when the figure is anchored above a panel rather than above a player, its bottom
   edge should meet the panel exactly, so the usual separating margin is removed. */
.wtpp-rocker-stage--flush { margin-bottom: 0; }

.wtpp-rocker-stage.is-open {
  height: var(--rocker-h, 0);
}
.wtpp-rocker-figure-wrap {
  position: relative;
  /* v3.7.786: no fixed size. The figure renders at its natural 702px where there is room,
     shrinks with the window, and stops shrinking at a floor so it never becomes a smudge.
     The floor is written as min(260px, 100%) rather than a bare 260px on purpose: a hard
     minimum wider than the column would force horizontal scrolling and break WCAG 1.4.10 at
     320px, whereas this clamps to the container when the container is the smaller of the two.
     padding-top reserves a gutter for the close button so it never sits over the artwork. */
  box-sizing: border-box;
  width: 100%;
  max-width: 702px;
  min-width: min(260px, 100%);
  padding-top: 2.2rem;
  /* the figure starts fully translated down (hidden below the clip line) and rises up */
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.wtpp-rocker-stage.is-open .wtpp-rocker-figure-wrap {
  transform: translateY(0);
}
.wtpp-rocker-figure {
  display: block;
  width: 100%;
  height: auto;                        /* intrinsic scale to column; landscape shrinks, never widens */
  max-width: 100%;
  /* v3.7.789: every figure is 702x328, so declaring the ratio gives the element its correct
     height BEFORE the bytes arrive. That is what lets the reveal open instantly instead of
     waiting on the network, and it also prevents layout shift when the image does land. */
  aspect-ratio: 702 / 328;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.wtpp-rocker-figure.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wtpp-rocker-figure { transition: none; }
}

/* the close X — small, semi-transparent, top-right of the figure */
/* v3.7.786: sits in the padding-top gutter ABOVE the image, not on top of it. The figures
   reach the top-right corner (the raised hand), so an overlaid button covered the artwork. */
.wtpp-rocker-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: none;
  background: var(--glass-surface);
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.wtpp-rocker-close:hover { background: var(--ink-11); }
.wtpp-rocker-close:focus-visible {
  outline: var(--btn-focus-ring); outline-width: 3px;
  outline-offset: 2px;
}

/* the touch long-press name label */
.wtpp-rocker-name {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  background: var(--glass-surface);
  color: var(--paper);
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wtpp-rocker-name.is-visible { opacity: 1; }

/* Respect reduced-motion: no slide, just appear/disappear. (AA courtesy for animation.) */
@media (prefers-reduced-motion: reduce) {
  .wtpp-rocker-stage,
  .wtpp-rocker-figure-wrap { transition: none; }
}

/* At the narrowest widths, keep the button comfortably tappable (min 44px target ~ 2.75rem) */
@media (max-width: 480px) {
  .wtpp-rocker-btn { width: 2.75rem; height: 2.75rem; }
}