/*
 * The fixtures list as a pager over the date window.
 *
 * One transform layer, not the story viewer's three: there is no morph and no
 * dismiss here, only the horizontal chain. Outgoing runs slightly ahead of the
 * finger and incoming lags behind it, so the days read as layered rather than
 * as one flat filmstrip.
 *
 * These rates were the story viewer's too until its chain became a 3D hinge.
 * They stayed here deliberately: the thresholds are still shared, so both
 * gestures commit under the same thumb, but a day of fixtures is a page you
 * turn past, not a card you turn over. The shared part is the physics, not
 * the figure it draws.
 *
 * Pulled out to the shell edge so a day slides in from off-screen rather than
 * from the content gutter; the gutter is given back on the panes themselves.
 *
 * The pull-out is exactly `.app__main`'s side padding (layout.css), no more:
 * it was --space-4 while the main's gutter was --space-3, which left the
 * pager 4px past *both* shell edges and gave every screen on iOS a sideways
 * wobble — the document was 398px wide on a 390px phone, and because the
 * pages stack over this list as fixed overlays, the wobble followed the user
 * onto every one of them. Keep the two numbers in step.
 */
.fixture-pager {
  --rate-outgoing: 1.05;
  --rate-incoming: 0.85;

  position: relative;
  overflow: hidden;
  margin-inline: calc(-1 * var(--space-3));
  /*
   * Vertical belongs to the page. Claiming it here would make the fixtures
   * list resist its own scroll, which costs far more than the swipe is worth.
   */
  touch-action: pan-y;
  /*
   * Load-bearing, not hygiene: left on, the browser starts a native selection
   * drag on a team name and fires pointercancel mid-gesture — killing the
   * swipe silently, and only on the second one.
   */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/*
 * Each pane sits at its own base offset and moves at its own rate, both driven
 * by the single --dx the drag writes onto the pager.
 */
.fixture-pane {
  /* Gives the main's gutter back — the same --space-3 the pager pulled out. */
  padding-inline: var(--space-3);
  transform: translateX(calc(var(--pane-base, 0%) + var(--dx, 0px) * var(--pane-rate, 1)));
  will-change: transform;
  transition:
    transform var(--spring-duration) var(--spring),
    opacity var(--duration) var(--easing);
}

/* A class rule would beat the UA [hidden] rule, so ends of the window opt out here. */
.fixture-pane[hidden] {
  display: none;
}

/*
 * Only the current pane is in flow — it is what gives the pager its height.
 * The neighbours overlay it, so a day with three fixtures and a day with ten
 * do not fight over the page length mid-drag.
 */
.fixture-pane--current {
  position: relative;
  --pane-base: 0%;
  --pane-rate: var(--rate-outgoing);
}

.fixture-pane--prev,
.fixture-pane--next {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  --pane-rate: var(--rate-incoming);
  /* Never the pane under the thumb; the current one owns every tap. */
  pointer-events: none;
}

.fixture-pane--next {
  --pane-base: 100%;
}

.fixture-pane--prev {
  --pane-base: -100%;
}

/*
 * While the finger is down the panes track it 1:1. No transition, or the list
 * lags the thumb by a whole spring.
 */
.fixture-pager[data-dragging="true"] .fixture-pane {
  transition: none;
}

/*
 * Re-indexing after a committed page: the panes jump from their committed
 * offsets back to prev/current/next, and that bookkeeping must not be
 * something the user can see.
 */
.fixture-pager[data-settling="true"] .fixture-pane {
  transition: none;
}

/*
 * Committed to the neighbouring day. The parallax rates are dropped here on
 * purpose: they describe how a pane tracks a finger, not where it comes to
 * rest, and leaving them in would land the incoming day 15% short of centre.
 */
.fixture-pager[data-committing] .fixture-pane,
.fixture-pager[data-jump] .fixture-pane,
.fixture-pager[data-jump-from] .fixture-pane {
  --pane-rate: 0;
}

.fixture-pager[data-committing="forward"] .fixture-pane--current {
  --pane-base: -100%;
}

.fixture-pager[data-committing="forward"] .fixture-pane--next {
  --pane-base: 0%;
}

.fixture-pager[data-committing="back"] .fixture-pane--current {
  --pane-base: 100%;
}

.fixture-pager[data-committing="back"] .fixture-pane--prev {
  --pane-base: 0%;
}

/*
 * A tap on a day further off than the neighbours. It starts a short distance
 * out and transparent rather than a full width away, so the transition still
 * says which way time moved without pretending to travel through every day in
 * between — and on --duration rather than the spring, because a jump that
 * takes as long as a page reads as the wrong distance.
 */
.fixture-pager[data-jump-from="forward"] .fixture-pane--next {
  --pane-base: 30%;
  opacity: 0;
}

.fixture-pager[data-jump-from="back"] .fixture-pane--prev {
  --pane-base: -30%;
  opacity: 0;
}

.fixture-pager[data-jump] .fixture-pane {
  transition:
    transform var(--duration) var(--easing),
    opacity var(--duration) var(--easing);
}

.fixture-pager[data-jump="forward"] .fixture-pane--current {
  --pane-base: -30%;
  opacity: 0;
}

.fixture-pager[data-jump="forward"] .fixture-pane--next {
  --pane-base: 0%;
}

.fixture-pager[data-jump="back"] .fixture-pane--current {
  --pane-base: 30%;
  opacity: 0;
}

.fixture-pager[data-jump="back"] .fixture-pane--prev {
  --pane-base: 0%;
}