/* THE LINEUP GENERATOR WALKTHROUGH (2026-10-05).

   One player, on two pages: the front page, under the tools, and How it works, under the
   Generator's heading. The video is our own 1:50 recording of a full build:
   reserve the entries on DraftKings, download the file, build here, upload it back.

   THE SCREEN IS SELF-CONTAINED. The front page styles itself from home.css (--fp-*) and How it
   works from style.css (--gold, --line, and a real light theme), and the two do not share names.
   So the frame and the play button bring their own values under --wp-* and read nothing from
   either page: the screen looks the same on both and neither stylesheet can repaint it.

   WHAT SITS ON THE PAGE FOLLOWS THE PAGE. The rail and the chapters under the screen take
   style.css's --gold, --line and --bg when the page has them, so they stay legible in How it
   works' light theme, and fall back to the dark values on the front page, which defines none of
   the three. Text colour is inherited.

   THE FRAME IS DARK IN EVERY THEME because the video is: a light frame around a black recording
   reads as a hole in the page.

   PROGRESSIVE. Without script this is a plain <video controls> with a poster, which plays fine.
   walkthrough.js adds .is-ready, and only then do the play puck, the rail and the chapter
   buttons appear, since none of them does anything without it. */

.walk-player {
  --wp-ground: #0c0c09;
  --wp-gold: #c9a961;
  --wp-gold-lit: #e6c97c;
  --wp-gold-deep: #6e5730;
  --wp-gilt: linear-gradient(176deg, #f0d693 0%, #d4b26a 38%, #b8954d 70%, #8d6f36 100%);
  --wp-gilt-ink: #17130a;
  --wp-edge: rgba(201, 169, 97, 0.34);
  --wp-glow: 0 0 0 1px rgba(230, 201, 124, 0.16), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 24px 70px -36px rgba(230, 201, 124, 0.32);
  --wp-ui: "Inter", "Libre Franklin", "Segoe UI", Arial, sans-serif;
  --wp-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Under the screen, on the page: the page's own values when it has them. */
  --wp-label: var(--gold, #c9a961);
  --wp-rule: var(--line, rgba(201, 169, 97, 0.26));
  --wp-hole: var(--bg, #0a0a09);
  margin: 0;
}

/* ---- the screening frame ------------------------------------------------------------------ */

.walk-player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--wp-edge);
  border-radius: 18px;
  background: var(--wp-ground);
  box-shadow: var(--wp-glow);
}
.walk-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--wp-ground);
}

/* The whole poster is the button, so a click anywhere on it plays. The puck sits in the clear
   lower third of the poster, under the title rather than over it: the title card puts its words
   in the middle of the frame, and a centred play button would cover them. */
.walk-player__play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 9%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--wp-gilt-ink);
  font: inherit;
  cursor: pointer;
}
.walk-player.is-ready .walk-player__play { display: flex; }
.walk-player.is-playing .walk-player__play,
.walk-player.is-error .walk-player__play { display: none; }

.walk-player__puck {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--wp-gold-deep);
  border-radius: 999px;
  background: var(--wp-gilt);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 40px -16px rgba(230, 201, 124, 0.6);
  font: 600 15px/1 var(--wp-ui);
  letter-spacing: 0.01em;
  transition: transform 160ms ease, filter 160ms ease;
}
.walk-player__disc {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wp-gilt-ink);
  color: var(--wp-gold-lit);
}
.walk-player__disc svg { width: 16px; height: 16px; margin-left: 3px; }
.walk-player__len { font-family: var(--wp-mono); font-weight: 500; opacity: 0.72; }
.walk-player__play:hover .walk-player__puck { filter: brightness(1.07); transform: translateY(-1px); }
.walk-player__play:focus-visible { outline: none; }
.walk-player__play:focus-visible .walk-player__puck { outline: 2px solid var(--wp-gold-lit); outline-offset: 4px; }

/* ---- the rail: where each step falls in the 1:50, and how far the video has got ----------- */

.walk-player__rail {
  position: relative;
  display: none;
  height: 3px;
  margin: 22px 6px 0;
  border-radius: 2px;
  background: var(--wp-rule);
}
.walk-player.is-ready .walk-player__rail { display: block; }
.walk-player__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wp-gold-deep), var(--wp-gold));
  transform: scaleX(0);
  transform-origin: left center;
}
.walk-player__tick {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 1.5px solid var(--wp-label);
  border-radius: 50%;
  background: var(--wp-hole);
  transform: translateY(-50%);
}
.walk-player__tick.is-past { background: var(--wp-label); }

/* ---- the chapters ------------------------------------------------------------------------- */

.walk-player__chapters {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.walk-player.is-ready .walk-player__chapters { display: grid; }
.walk-player__chapter {
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px 14px 13px;
  border: 1px solid var(--wp-rule);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.walk-player__chapter:hover { border-color: var(--wp-label); background: rgba(201, 169, 97, 0.06); }
/* The front page gives every focused element a 4px radius (.fp :focus-visible); a chapter keeps its
   own corners rather than squaring off when the keyboard reaches it. */
.walk-player__chapter:focus-visible { outline: 2px solid var(--wp-label); outline-offset: 2px; border-radius: 12px; }
.walk-player__chapter[aria-current="true"] { border-color: var(--wp-label); background: rgba(201, 169, 97, 0.1); }
.walk-player__at { font: 500 12px/1 var(--wp-mono); color: var(--wp-label); letter-spacing: 0.02em; }
.walk-player__verb { font: 600 15px/1.25 var(--wp-ui); }
.walk-player__where { font: 400 13px/1.35 var(--wp-ui); opacity: 0.68; }

.walk-player__caption { margin-top: 12px; font: 400 13px/1.4 var(--wp-ui); opacity: 0.68; }

/* ---- smaller screens ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  .walk-player__frame { border-radius: 14px; }
  .walk-player__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  /* The poster's clear band is a few dozen pixels tall on a phone: the puck drops its words and
     keeps the disc, which still says play and still carries the full label for a screen reader.
     Padding in percent is a share of the WIDTH, so 3% sits the disc in the band below the
     poster's last line of words at every phone width. */
  .walk-player__play { padding-bottom: 3%; }
  .walk-player__puck { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .walk-player__puck-text { display: none; }
  .walk-player__disc { width: 40px; height: 40px; background: var(--wp-gilt); color: var(--wp-gilt-ink); box-shadow: 0 10px 28px -10px rgba(230, 201, 124, 0.7); }
  .walk-player__chapter { padding: 10px 12px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .walk-player__puck,
  .walk-player__chapter { transition: none; }
  .walk-player__play:hover .walk-player__puck { transform: none; }
}