/* larger content panel than the wheel app — this variant has screen space to spare
   since there's no need to leave the whole surface free for an invisible wheel input.
   Previously scoped to `@media (orientation: portrait)` only, on the assumption that
   landscape/wider viewports were exclusively a phone rotated sideways (short on
   height, so a smaller fixed card made sense there). That assumption breaks for a
   plain resizable desktop/browser window: widening it past the point where width
   overtakes height flips `orientation` to landscape, which dropped all of this
   sizing and snapped the card back down to carousel.css's small fallback
   (.carousel-item max-width:220px) — a sudden shrink with more width, not less.
   Applied unconditionally instead: width: min(75vw, var(--carousel-stage-h)) below
   already derives the right size from whichever of viewport width/height is
   actually tight, so it doesn't need an orientation gate to do the right thing on
   a short landscape phone too. */

/* leaves headroom below the image for the title, so image + title together fit
   inside the 75vw-square #podcasts-carousel without overflowing into the index label */
.carousel-item > img {
  width: calc(75vw - 40px);
}
/* size every nav/playing carousel to the card itself instead of stretching
   to fill the screen, so the "x / N" counter sits right under the card
   instead of near the bottom of the available area — shared by all three
   (podcasts, episode-nav, playing) so the focused card lands at the exact
   same size/position regardless of which one is showing. */
.carousel {
  flex: 0 0 auto;
  /* the smaller of "75% of viewport width" or "the vertical space actually
     available" (--carousel-stage-h, base.css) — on tall viewports the width
     cap wins as before; on short viewports the height-derived value wins,
     shrinking the square (both dimensions, via aspect-ratio deriving height
     from this already-capped width) so it fits without overflowing into the
     metadata/scrub/controls rows below it */
  width: min(75vw, var(--carousel-stage-h));
  aspect-ratio: 1 / 1;
}

/* the pos-prev/pos-next translate() percentages below are resolved against
   .carousel-item's own max-width, but the visible artwork inside is capped
   separately at min(50vw, 200px) (carousel.css) — past ~400px wide that img
   stops growing while the uncapped 75vw wrapper keeps growing, so the
   translate offset (a % of the wrapper) drifts away from the image's actual
   edge and the gap balloons with viewport width. Capping the wrapper at the
   same point the image caps keeps the offset meaningful (and therefore the
   visible spacing constant) at any width, not just the widths this was
   eyeballed at. */
.carousel-item {
  max-width: min(75vw, 300px);
}
/* adjacent cards pulled in from the shared 92% offset (carousel.css) so
   they actually peek out from behind the enlarged focused card instead of
   sitting almost entirely off-screen — the gradient fade (carousel.css)
   handles the fade-to-invisible look at any offset, no opacity override
   needed here. Playing mode never renders a pos-prev/pos-next item, so
   these are inert there. */
.carousel-item.pos-prev {
  transform: translate(calc(-50% - 70%), -50%) scale(.72);
  filter: none;
}
.carousel-item.pos-next {
  transform: translate(calc(-50% + 70%), -50%) scale(.72);
  filter: none;
}
/* matches the offset above so a drag doesn't visibly pop the neighbor over */
.carousel.dragging .carousel-item.pos-prev {
  transform: translate(calc(-50% - 70% + var(--drag-x, 0px)), -50%) scale(.72);
}
.carousel.dragging .carousel-item.pos-next {
  transform: translate(calc(-50% + 70% + var(--drag-x, 0px)), -50%) scale(.72);
}

/* feint border around the podcast artwork, so it reads as a distinct panel
   against the black background rather than just floating imagery — the
   episode/playing artwork already gets its own border via .artwork (playing.css) */
#podcasts-carousel .carousel-item > img {
  border: 1px solid var(--border-soft);
}

/* live finger-tracking during a panel swipe (see panelPointerMove/End in app.js) —
   while .dragging is set, the whole 3-item track shifts by --drag-x with no easing
   so it follows the finger 1:1; removing .dragging (on release) re-enables the
   transition so the swipe either continues into the next slide or eases back to rest */
.carousel.dragging .carousel-item {
  transition: none;
}
/* matches the pos-current size bump (carousel.css) so the focused card
   doesn't visibly jump in size when a drag starts/ends — shared by podcasts
   and episode-nav (playing mode never enters .dragging, no carousel there) */
.carousel.dragging .carousel-item.pos-current {
  transform: translate(calc(-50% + var(--drag-x, 0px)), -50%) scale(1.265);
}
.carousel.dragging .carousel-item.pos-prev {
  transform: translate(calc(-50% - 92% + var(--drag-x, 0px)), -50%) scale(.72);
}
.carousel.dragging .carousel-item.pos-next {
  transform: translate(calc(-50% + 92% + var(--drag-x, 0px)), -50%) scale(.72);
}

/* off-screen start/end points for the sliding carousel transition (see stepCarousel
   in app.js) — an entering item starts here then transitions to pos-prev/pos-next,
   an exiting item transitions here before being removed */
.carousel-item.pos-prev-far {
  transform: translate(calc(-50% - 160%), -50%) scale(.6);
  opacity: 0;
  filter: blur(1px);
  z-index: 0;
}
.carousel-item.pos-next-far {
  transform: translate(calc(-50% + 160%), -50%) scale(.6);
  opacity: 0;
  filter: blur(1px);
  z-index: 0;
}

/* #controls is the *active touch area*, deliberately much bigger than the visible
   dial — full viewport width, taller — so the corner-background tap (see
   controlsBg* in input.js) is easy to hit without precision. .controls-visual is
   sized/positioned exactly as .controls used to be, so the ring/center/back appear
   in exactly the same place as before this change. As the last permanent flex
   child of #app, it sits flush with the bottom edge by ordinary flex layout —
   no position:fixed needed (nothing else depends on it being fixed/z-indexed;
   .menu-overlay and .header both stack above it via their own higher z-index
   regardless, since they're separately position:fixed). */
.controls {
  flex: none;
  height: var(--controls-h);
  width: 100%;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 10px);
}

.controls-visual {
  position: relative;
  flex: none;
  width: 220px;
  height: 220px;
}

.dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* clip-path (not just border-radius, which only affects painting) restricts this
     element's hit-area to the visible circle, so the square's corners fall through
     to #controls itself instead of being (invisibly) part of the ring's rotation gesture */
  clip-path: circle(50%);
  border: 2px solid var(--dim);
  background: transparent;
  touch-action: none;
  transition: background .1s ease, border-color .1s ease;
}

.dial-ring.pressed {
  background: var(--control-pressed);
  border-color: var(--fg);
}

.dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--control-fill);
  border: 1px solid var(--dim); /* matches the outer ring; .playing (audio actually playing) turns it blue */
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  transition: border-color .15s ease;
}

.dial-center.playing {
  border-color: var(--accent);
}

.dial-center:active {
  background: rgba(62, 166, 255, 0.18);
}

.dial-back {
  /* floats clear of the ring, out between the 10 and 11 o'clock positions (315°
     clockwise from 12, radius ~160px from the .controls-visual center), nudged
     up 10px from that trig position */
  position: absolute;
  left: -3px;
  top: -13px;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--control-fill);
  border: 1px solid var(--dim);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
}

.dial-back:active {
  background: var(--control-pressed);
}

.dial-back.hidden {
  display: none;
}

.dial-share {
  /* mirrors .dial-back across the vertical axis — between 1 and 2 o'clock (45°,
     same ~160px radius) — playing screen only, see setScreen()'s visibility toggle,
     nudged up 10px from that trig position */
  position: absolute;
  left: 223px;
  top: -13px;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--control-fill);
  border: 1px solid var(--dim);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
}

.dial-share:active {
  background: var(--control-pressed);
}

.dial-share.hidden {
  display: none;
}