/* SWIPE (2026-10-16, live-site/DEBATE-2026-10-16-phone.md): today's prop lines, one card a prop,
 * swiped up like a reel. swipe.html and swipe.js. Every value is a site token (style.css), so the
 * light theme follows.
 *
 * The deck is its own scroller with mandatory vertical snap, so one flick moves exactly one card,
 * with or without script. On a phone it fills the screen between the masthead and the tab bar; on
 * a wider screen it is a phone-width column in the middle of the page.
 */

/* Lifted above the site's glow layer. The deck section, not the page: a z-index on the page would
   trap the join sheet and the toast inside it, under the tab bar. */
.sw { position: relative; z-index: 1; }
.swipe .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sw {
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  height: calc(100dvh - var(--masthead) - var(--s7));
  margin: var(--s4) auto 0;
}
@media (max-width: 760px) {
  .sw { width: 100%; height: calc(100dvh - var(--masthead) - 64px - env(safe-area-inset-bottom, 0px)); margin-top: 0; }
}

/* ---- the strip above the deck: the sports and where you are ------------------------------------ */
.sw__top {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s2) var(--s4);
}
.sw__title { margin: 0 auto 0 0; font: 700 17px/1 var(--display); letter-spacing: -0.01em; color: var(--text); }
.sw__sports { display: flex; gap: 4px; padding: 3px; background: var(--field-bg); border: 1px solid var(--line-soft); border-radius: var(--radius-pill); }
.sw__sports[hidden] { display: none; }
.sw__sport {
  min-height: 30px;
  padding: 0 10px;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.sw__sport[aria-pressed="true"] { color: var(--btn-gilt-text); background: var(--btn-gilt-bg); }
.sw__count { flex: none; min-width: 3.5em; margin: 0; text-align: right; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 360px) { .sw__title { display: none; } }

/* ---- the deck ---------------------------------------------------------------------------------- */
.sw__deck {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
}
.sw__deck::-webkit-scrollbar { display: none; }
.sw__deck:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

.sw-card {
  position: relative;
  height: 100%;
  padding: 0 var(--s3) var(--s3);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.sw-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--s5) var(--s5) var(--s4);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--brass) 22%, transparent), transparent 70%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.sw-card__body--note { justify-content: center; gap: var(--s4); }

.sw-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font: 500 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.sw-chip {
  padding: 4px 8px;
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.08em;
  color: var(--brass);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

/* Who: the face in a gold ring, the team's logo on its shoulder, the name and the stat. */
.sw-card__who { display: grid; justify-items: center; gap: var(--s2); margin-top: var(--s4); }
.sw-face {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 16dvh, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--field-bg);
  box-shadow: 0 0 0 2px var(--brass), 0 14px 40px -12px color-mix(in srgb, var(--brass) 70%, transparent);
  overflow: hidden;
}
.sw-face img { width: 100%; height: 100%; object-fit: cover; }
.sw-face__init { font: 700 34px/1 var(--display); color: var(--brass); }
.sw-face img + .sw-face__init { display: none; }
.sw-card__logo {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: calc(clamp(96px, 16dvh, 136px) - 30px) 0 0 calc(clamp(96px, 16dvh, 136px) - 18px);
  padding: 3px;
  background: var(--panel);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}
.sw-card__name { margin: var(--s1) 0 0; font: 700 clamp(24px, 3.4dvh, 30px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--text); }
.sw-card__team { margin: 0; font: 500 14px/1.3 var(--ui); color: var(--muted); }

/* The line: one big number, both prices side by side, the book under them. */
.sw-line {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--field-bg);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
}
.sw-line__label { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sw-line__value { margin: 0; font: 600 clamp(44px, 7dvh, 60px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--brass-bright); }
.sw-line__prices { display: flex; gap: var(--s2); margin: 0; }
.sw-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  font: 500 13px/1 var(--ui);
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}
.sw-price b { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.sw-line__book { margin: 0; font: 500 13px/1 var(--ui); color: var(--muted); }

/* His last games: locked for a stranger (the logs need an account), a door to Props for a member. */
.sw-lock {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s3);
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.sw-lock__bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.sw-lock__bars i { width: 12px; height: 12px; border-radius: 3px; background: var(--line); }
.sw-lock__text { font: 600 13px/1.3 var(--ui); }
.sw-lock__sub { font: 500 12px/1.2 var(--ui); color: var(--brass); }

.sw-card__fine { margin: auto 0 0; padding-top: var(--s3); font: 400 11px/1.45 var(--ui); color: var(--muted); }
.sw-nowrap { white-space: nowrap; }

/* The first card's nudge. */
.sw-hint { margin: var(--s2) 0 0; font: 600 12px/1 var(--ui); color: var(--brass); animation: sw-nudge 1.6s ease-in-out infinite; }
@keyframes sw-nudge { 50% { transform: translateY(-5px); } }

/* ---- the rail: what you can do with a card ----------------------------------------------------- */
.sw-rail {
  position: absolute;
  right: calc(var(--s3) + 10px);
  bottom: 30%;
  display: grid;
  gap: var(--s3);
}
.sw-act {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  font: 600 10.5px/1 var(--ui);
  cursor: pointer;
}
.sw-act__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sw-act__dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-act__dot img { width: 30px; height: 30px; border-radius: 50%; }
.sw-act[aria-pressed="true"] .sw-act__dot { color: var(--btn-gilt-text); background: var(--btn-gilt-bg); border-color: transparent; }
.sw-act[aria-pressed="true"] .sw-act__dot svg { fill: currentColor; }
.sw-act:focus-visible .sw-act__dot { outline: 2px solid var(--focus); outline-offset: 2px; }

/* With the rail on the right, the card's own content keeps clear of it on a narrow phone. */
@media (max-width: 400px) {
  .sw-card__body { padding-right: calc(var(--s5) + 44px); padding-left: var(--s4); }
}

/* ---- buttons, the join sheet, the toast -------------------------------------------------------- */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s5);
  font: 700 14px/1 var(--ui);
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.sw-btn--gold { color: var(--btn-gilt-text); background: var(--btn-gilt-bg); border-color: transparent; }
.sw-card__seal { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 2px var(--brass); }
.sw-card__lede { margin: 0; max-width: 30ch; font: 400 16px/1.5 var(--ui); color: var(--muted); }
.sw-card__cta { display: grid; gap: var(--s2); width: 100%; max-width: 300px; margin: 0; }

.sw-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.sw-sheet[hidden] { display: none; }
.sw-sheet__panel {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  width: min(100%, 460px);
  padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px -20px var(--shadow);
  animation: sw-up 220ms ease-out;
}
@keyframes sw-up { from { transform: translateY(24px); opacity: 0; } }
.sw-sheet__seal { width: 56px; height: 56px; border-radius: 50%; }
.sw-sheet__title { margin: 0; font: 700 22px/1.2 var(--display); color: var(--text); }
.sw-sheet__body { margin: 0; max-width: 32ch; font: 400 15px/1.5 var(--ui); color: var(--muted); }
.sw-sheet__actions { display: grid; gap: var(--s2); width: 100%; margin: var(--s2) 0 0; }
.sw-sheet__close { min-height: 40px; padding: 0 var(--s4); font: 600 14px/1 var(--ui); color: var(--muted); background: none; border: 0; cursor: pointer; }

.sw-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  margin: 0;
  padding: 10px 16px;
  font: 600 13px/1 var(--ui);
  color: var(--btn-gilt-text);
  background: var(--btn-gilt-bg);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}
.sw-toast[hidden] { display: none; }

.sw-btn:focus-visible,
.sw__sport:focus-visible,
.sw-lock:focus-visible,
.sw-sheet__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sw-hint,
  .sw-sheet__panel { animation: none; }
}

/* The page under the deck: on a phone the footer is a scroll away, below the deck, as on any page. */
.swipe + .site-footer { margin-top: var(--s6); }