/* The lens deck — the pill row, the swipe track, its six panels and the
   ‹ › arrows. Linked after dashboard.css (src/assets.js, page.js), so a rule
   here wins a tie on specificity by source order, exactly as it did when
   these were lines of that file. Moved out for F-15 / F-16 (ch. 16 §6c):
   styles.css sits on its ratchet (tests/unit/monolith-budget.test.mjs) and
   the deck's layout needed room. */

/* --- Lens pills + swipe pager: Games / Conflicts / Root For / Root Against.
   One screen at a time on mobile (swipe or tap a pill); on wide screens the
   three player columns sit side by side. Edge chevrons are colored by the
   screen they lead to (blue games, amber conflicts, green for, red against). */
.lens-pills {
  display: flex;
  gap: 6px;
  /* F-44/F-79 (ch. 16 E-31): the visible pill stays this
     height; the strip gains 9px of padding above and below so a
     transparent ::before can carry each pill's tap target to 44px, and
     gives the same 9px back in a negative top margin so the visible pill
     sits at its old y. The seat above the strip sets a different bottom
     margin, and the margins collapse, so the negative offset that cancels
     it out depends on that margin, not on which seat it is: THIS WEEK is
     16px wide and 10px at <=768 (styles.css's own phone rule for the plain
     strip), RIGHT NOW is 10px at every width. -9px holds the 16px case;
     the <=768 override below holds every 10px case, RIGHT NOW included
     (harmless there — same value either way). */
  margin: -9px 0 1px;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.verdict-strip.right-now + .lens-pills {
  margin-top: -5px;
}
@media (max-width: 768px) {
  .lens-pills {
    margin-top: -5px;
  }
}
/* Blocking review finding on F-79: the offsets above assume a
   visible strip sits right before .lens-pills for the negative margin to
   collapse against. An empty guide (client.js: no conflict, no root
   for/against, no game left to play) hides the strip via .is-empty
   (a class client.js toggles — styles.css is on its own ratchet and has no
   room for the rule, so both live here) rather than remove it from the DOM,
   so it no longer contributes a margin to collapse with — the negative
   offset then pulled the pills row up by the FULL 9px/5px and its enlarged
   tap targets covered the pills below the strip's old bottom edge. Three
   classes beat every selector above at any width, so one rule holds for
   320 through 1440. */
.verdict-strip.is-empty {
  display: none;
}
.verdict-strip.is-empty + .lens-pills {
  margin-top: 5px;
}
.lens-pills::-webkit-scrollbar {
  display: none;
}
.lens-pills.more-end {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 56px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.lens-pills.more-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
  mask-image: linear-gradient(to right, transparent, #000 56px);
}
.lens-pills.more-start.more-end {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 56px,
    #000 calc(100% - 56px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 56px,
    #000 calc(100% - 56px),
    transparent
  );
}
.lens-pill {
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--muted);
}
.lens-pill::before {
  content: '';
  position: absolute;
  /* inset is measured from the PADDING edge of the positioned ancestor,
     one pixel inside its 1px border on every side — so -10px/-4px here is
     what actually nets out to 9px/3px beyond the pill's own (border) box. */
  inset: -10px -4px;
}
.lens-pill.active.scores {
  color: #8b7cf6;
  border-color: rgba(139, 124, 246, 0.65);
  background: rgba(139, 124, 246, 0.1);
}
.lens-pill.active.games {
  color: #4f8ff7;
  border-color: rgba(79, 143, 247, 0.65);
  background: rgba(79, 143, 247, 0.1);
}
.lens-pill.active.conflict {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.65);
  background: rgba(245, 158, 11, 0.1);
}
.lens-pill.active.for {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.1);
}
.lens-pill.active.against {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.65);
  background: rgba(239, 68, 68, 0.1);
}
.lens-pill.active.played {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.65);
  background: rgba(148, 163, 184, 0.12);
}
/* --- The deck's viewport, its track and the arrows (F-15, F-16).

   .lens-wrap is the VIEWPORT: a flex row of [‹ arrow] [track] [› arrow]
   that clips (overflow: clip — not hidden, so it is never a scroll
   container and a focus or scrollIntoView inside it cannot drag it). The
   track (.lens-pager) is the horizontal scroller that swipes and snaps.

   F-15 — the six panels are laid side by side, so the track is as tall
   as the TALLEST of them: at 320 the CONFLICTS screen was three cards and
   then ~2,000 px of clipped ROOT FOR / ROOT AGAINST strips scrolling past
   below (probe: 2,465 px of panel under a 2,782 px document). Below the
   three-column width the panels no longer stretch (align-items:
   flex-start), and deck.js sets the viewport's height from the ACTIVE
   panel on every screen change and content resize, so the document ends
   where the screen on show ends and an inactive panel adds nothing to
   it. The same probe put the neighbours at x -272..16 and 304..592 — 16 px
   inside each viewport edge, the body's gutter. At <=768 the viewport is
   drawn full-bleed (margin 0 -16px, the panels carrying the gutter as
   padding), so a neighbour starts exactly at the viewport edge: nothing
   of it is inside the viewport, at rest or mid-swipe. The cards keep the
   width they had. At >=980 the three player columns are as they were:
   stretched, no height set, the arrows in their gutters. */
.lens-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: clip;
}
.lens-pager {
  flex: 1 1 auto;
  min-width: 0;
  /* The panels' offsetParent, so deck.js's offsetLeft/scrollLeft
     arithmetic measures from the track's own edge — not from the
     viewport row, which starts an arrow column to the left of it. */
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lens-pager::-webkit-scrollbar {
  display: none;
}
.lens-panel {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 2px 2px 8px;
}
@media (max-width: 979px) {
  /* One screen at a time: the active panel's own height is the deck's
     (deck.js reads it), so the others must not stretch to the tallest. */
  .lens-pager {
    align-items: flex-start;
  }
  /* F-44 (ch. 16 E-31): the strip runs into the page's 16px gutter, so a
     pill that does not fit is cut by the screen edge, not by an invisible
     box short of it. */
  .lens-pills {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-inline: 16px;
  }
}
@media (max-width: 768px) {
  .lens-wrap {
    margin: 0 -16px;
  }
  .lens-panel {
    padding: 2px 18px 8px;
  }
}
@media (min-width: 980px) {
  .lens-panel.panel-players {
    flex: 0 0 33.3333%;
    padding: 2px 8px 8px;
  }
}

/* F-16 — the arrows used to be position: fixed at the viewport's edges,
   over whatever happened to be under them: a card's number at 768, the
   hero's buttons at 320 with the Menu open (a hit-test at the arrow's
   centre returned the arrow, so the button beneath was not tappable).

   Which of the two fixes, and why:
   - At <=768 the arrows are NOT shown (display: none). Swipe and the
     pill row already navigate there, the track is full-bleed, and there
     is no 32 px of a 320 px screen that is not a card or a control.
   - At >=769 they stay, in a COLUMN OF THEIR OWN: flex items of the
     viewport row beside the track (the › after it by `order`), so the
     track is narrower by two gutters and an arrow is never over a card,
     a number or a control — it stands on nothing. They are sticky at the
     viewport's vertical middle rather than fixed, which also solves what
     the old IntersectionObserver did: an arrow rides with the deck and
     leaves the screen when the deck does. An arrow that is not offered
     (‹ on the first screen, › on the last) keeps its column with
     visibility: hidden, so the track does not shift by 40 px between
     screens. deck.js toggles .on; it never sets display. */
.lens-arrow {
  display: none;
  flex: 0 0 32px;
  align-self: flex-start;
  position: sticky;
  top: calc(50vh - 32px);
  width: 32px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(10, 14, 24, 0.72);
  border-radius: 12px;
  cursor: pointer;
  z-index: 60;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
  padding: 0;
  visibility: hidden;
}
.lens-arrow.on {
  visibility: visible;
}
.lens-arrow:hover {
  opacity: 1;
}
.lens-arrow.left {
  margin-right: 8px;
}
.lens-arrow.right {
  order: 1;
  margin-left: 8px;
}
@media (min-width: 769px) {
  .lens-arrow {
    display: flex;
  }
}

/* The decided fold (ch. 16 E-30): a muted card and a 44 px control — this
   also lifts today's "Show N more" (styles.css's own .pp-more), measured at
   32 px, since both share the selector and styles.css is at its ceiling.
   Muting is per-part, not a single opacity on .pp-card: CSS opacity on an
   ancestor caps the whole subtree at that alpha regardless of a child's own
   opacity, and .55 on --muted (#9aa4b2) over the card's surface measures
   ~2.9:1 (mm-accessibility-audit's 4.5:1 floor) on the .pp-meta line that
   carries the actual reason ("FINAL" / "no leagues at stake") — a real
   reader-facing regression, not a design nit (review finding, PR #261). The
   name/total/rows keep Final Drive's own .55 (its styles.css:740); .pp-meta
   gets 0.8, measured 4.7:1. */
.pp-decided .pp-card .pp-top,
.pp-decided .pp-card .pp-rows {
  opacity: 0.55;
}
.pp-decided .pp-card .pp-meta {
  opacity: 0.8;
}
.pp-more {
  min-height: 44px;
}