/* ==========================================================================
   pgf-board.css — THE BOARD, as it ships on the public site.
   Pete chose this design on 2026-08-22, three times, over Broadcast and Conveyor:
   "A · The Board" / "Its not the Conveyor I want.. I want the BOARD" / "the board is the one".

   ⚠️ EVERY SELECTOR IS SCOPED TO .pgfb. NOTHING HERE IS GLOBAL.
   The design's original stylesheet (/hq/players/pgf-player-brand.css) was written for
   standalone /hq/ pages and carried `:root{...}`, `*{box-sizing:border-box}`,
   `html,body{margin:0;background:var(--bg)}` and a blanket `h1,h2,h3{text-transform:
   uppercase}`. Dropping that onto index.html would have restyled the whole website.
   The tokens it declared are ALREADY in css/site.css :root — verified 2026-08-22, the
   two :root blocks agree value-for-value on every token the board reads — so the board
   CONSUMES them instead of redeclaring them. The `var(--x, fallback)` second argument is
   what lets one of these bands also render on a page that has not loaded site.css.

   Fonts are the site's own, self-hosted via assets/fonts.css, which every page that
   carries a board already links. No webfont is requested by this file.
   ========================================================================== */

.pgfb{
  /* board-local tokens ONLY — scoped, so nothing outside a board can read or be hit by them */
  --pgfb-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --pgfb-head:'Barlow Condensed','BC Fallback','Oswald',sans-serif;
  --pgfb-sweep:.72s;
  --pgfb-plate:radial-gradient(115% 88% at 50% 4%,#fff 0%,#eef2f8 52%,#dbe2ee 100%);
  display:block;
  margin:0 0 clamp(28px,5vw,46px);
  /* the band is a self-contained box: it never widens its parent, whatever the grid does */
  max-width:100%;
  min-width:0;
}
.pgfb *{box-sizing:border-box}

/* ---- head ------------------------------------------------------------- */
.pgfb__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px}
.pgfb__head h2,.pgfb__head h3{
  font:900 clamp(23px,6.2vw,34px)/1 var(--pgfb-head);
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink,#f6f8fc);margin:0;min-width:0}
.pgfb__lead{flex-basis:100%;margin:6px 0 0;max-width:62ch;
  font:400 13.5px/1.55 var(--pgfb-font);color:var(--mute,#aab4c8)}
.pgfb__bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 13px}

/* the WCAG 2.2.2 pause. Anything that auto-updates for more than five seconds needs one. */
.pgfb__pause{appearance:none;-webkit-appearance:none;
  border:1px solid var(--line-2,rgba(255,255,255,.17));background:var(--surface,rgba(255,255,255,.055));
  color:var(--ink-2,#c9d1e0);font:700 11px/1 var(--pgfb-font);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px;border-radius:var(--radius-pill,999px);cursor:pointer;min-height:38px}
/* ⚠️ SMALL, BUT IT CANNOT GO. Pete, 2026-08-23: "Also tqke out - Pause the board!"
   WCAG 2.2.2 requires a mechanism to pause anything that auto-updates for more than five
   seconds, and the board re-flips every six. So it stops being a text pill and becomes a
   36px icon that still carries its accessible name via aria-label. Deleting the control
   outright is the one change that is not ours to make. */
.pgfb__pause--icon{width:36px;height:36px;min-height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;opacity:.62}
.pgfb__pause--icon svg{width:13px;height:13px;fill:currentColor;display:block}
.pgfb__pause--icon:hover,.pgfb__pause--icon:focus-visible{opacity:1}
.pgfb__pause:hover{border-color:var(--accent-line,rgba(75,221,100,.35));color:var(--ink,#f6f8fc)}
.pgfb__pause:focus-visible{outline:2px solid var(--accent,#4bdd64);outline-offset:2px}
.pgfb__rm{flex-basis:100%;margin:0;font:600 11px/1.4 var(--pgfb-font);color:var(--gold,#f0c04a)}

/* the channel switcher — only /exercise-animations renders one */
.pgfb__cats{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.pgfb__cat{appearance:none;-webkit-appearance:none;cursor:pointer;
  border:1px solid var(--line-2,rgba(255,255,255,.17));background:var(--surface,rgba(255,255,255,.055));
  color:var(--ink-2,#c9d1e0);font:800 10.5px/1 var(--pgfb-font);letter-spacing:.11em;text-transform:uppercase;
  padding:10px 12px;border-radius:var(--radius-pill,999px);min-height:38px}
.pgfb__cat:hover{border-color:var(--accent-line,rgba(75,221,100,.35));color:var(--ink,#f6f8fc)}
.pgfb__cat:focus-visible{outline:2px solid var(--accent,#4bdd64);outline-offset:2px}
.pgfb__cat[aria-pressed="true"]{background:var(--grad-green,linear-gradient(135deg,#62ec7e,#38c95b));
  border-color:transparent;color:var(--btn-ink,#06230d)}

/* ---- rows ------------------------------------------------------------- */
.pgfb__rows{display:block;min-height:120px}
.pgfb__loading{margin:0;padding:30px 4px;font:800 11px/1 var(--pgfb-font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-2,#7b86a0)}
.pgfb__row{position:relative;overflow:hidden;
  border:1px solid var(--line,rgba(255,255,255,.10));border-radius:var(--radius-lg,22px);
  padding:11px 11px 12px;margin:0 0 13px;
  background:linear-gradient(180deg,var(--bg-2,#0D1322) 0%,#0a0f1a 100%);
  box-shadow:var(--shadow-card,0 24px 56px -28px rgba(0,0,0,.85))}
.pgfb__row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-green,linear-gradient(135deg,#62ec7e,#38c95b));opacity:.85}
.pgfb__rowhead{display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;
  padding:1px 2px 10px 6px;border-bottom:1px solid var(--line,rgba(255,255,255,.10));margin-bottom:11px}
.pgfb__rowhead h3{font:900 clamp(19px,5.6vw,27px)/1 var(--pgfb-head);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink,#f6f8fc);margin:0;min-width:0}
.pgfb__ct{font:800 10.5px/1 var(--pgfb-font);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute-2,#7b86a0);white-space:nowrap}

/* "on air" pip */
.pgfb__live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;
  font:800 10px/1 var(--pgfb-font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-4,#8bf0a6)}
.pgfb__live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent,#4bdd64);
  box-shadow:0 0 0 0 var(--accent-glow,rgba(85,224,116,.45));animation:pgfbPip 2.4s ease-out infinite}
@keyframes pgfbPip{0%{box-shadow:0 0 0 0 var(--accent-glow,rgba(85,224,116,.45))}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pgfb__live.is-held{color:var(--mute-2,#7b86a0)}
.pgfb__live.is-held::before{background:var(--mute-2,#7b86a0);box-shadow:none;animation:none}

/* ---- the grid of panels: 1 large + 2 small on a phone ------------------ */
.pgfb__grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.pgfb__cell{min-width:0}
.pgfb__cell--lg{grid-column:1 / -1}

/* the lit panel */
.pgfb__screen{position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-sm,13px);aspect-ratio:1/1;
  background:var(--pgfb-plate);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(10,14,23,.30), inset 0 -26px 44px -30px rgba(10,14,23,.55);
  transition:box-shadow .34s ease}
.pgfb__cell--lg .pgfb__screen{aspect-ratio:5/4}
/* LED texture — sells the board without dirtying the figure */
.pgfb__screen::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(0deg,rgba(10,14,23,.055) 0 1px,transparent 1px 3px)}

/* the two crossfade layers. Each is a HOST the core mounts its own element into —
   the board never decides <img> vs <video> itself, PGFPlayer.mountClip does. */
/* ⚠️ THE BLEND LIVES HERE, ON THE LAYER THAT FADES -- NOT ON THE CLIP INSIDE IT.
   The clips are 3D figures keyed on a WHITE studio background, and multiply is the only
   thing melting that white into the plate. It used to sit on the img/video below. An
   opacity under 1 makes an element a GROUP, and a blend mode inside a group multiplies
   against that group's own transparency, never against the plate behind it -- so for the
   entire .48s crossfade the clip drew its raw white background as a hard white rectangle
   and only snapped to blended at the instant opacity reached exactly 1. Pete, 2026-08-23:
   "they are still doing some white background stuff for 1 second or somethign".
   On the fading element itself, multiply composites at whatever alpha the layer has, so
   there is no frame where the white is visible. Reproduced and fixed at 375px the same
   day. DO NOT move it back down to the child. */
.pgfb__lyr{position:absolute;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);
  opacity:0;transition:opacity .48s ease;mix-blend-mode:multiply;
  -webkit-user-select:none;user-select:none;
  font-size:0;color:transparent;line-height:0}
.pgfb__lyr.is-on{opacity:1}
.pgfb__lyr > img,.pgfb__lyr > video{
  display:block;width:100%;height:100%;object-fit:contain;
  background:transparent;
  /* a panel mid-load must never draw its alt text over the plate — the alt stays in the
     accessibility tree, it just does not render */
  font-size:0;color:transparent}

/* gate number — the departure-board slot id. It never changes. */
.pgfb__gate{position:absolute;left:7px;top:7px;z-index:3;
  font:800 9.5px/1 var(--pgfb-font);letter-spacing:.14em;color:#0b1424;
  background:rgba(255,255,255,.74);border:1px solid rgba(10,14,23,.16);
  padding:4px 6px;border-radius:6px}
.pgfb__cell--lg .pgfb__gate{font-size:11px;padding:5px 8px}

/* the announce: a green scanline sweeps the panel as it re-flips */
.pgfb__sweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transform:translate3d(0,-100%,0);
  background:linear-gradient(180deg,
    rgba(75,221,100,0) 0%, rgba(75,221,100,.09) 38%,
    rgba(139,240,166,.45) 46%, rgba(75,221,100,.92) 50%, rgba(139,240,166,.45) 54%,
    rgba(75,221,100,.09) 62%, rgba(75,221,100,0) 100%)}
.pgfb__cell.is-swapping .pgfb__sweep{animation:pgfbSweep var(--pgfb-sweep) cubic-bezier(.35,0,.15,1)}
@keyframes pgfbSweep{
  0%{opacity:0;transform:translate3d(0,-100%,0)}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;transform:translate3d(0,100%,0)}
}
.pgfb__cell.is-swapping .pgfb__screen{
  box-shadow:inset 0 0 0 2px var(--accent,#4bdd64),
             inset 0 0 26px -6px var(--accent-glow,rgba(85,224,116,.45)),
             0 0 0 1px var(--accent-line,rgba(75,221,100,.35))}

/* ---- THE CORNER MARK --------------------------------------------------
 * Pete, 2026-08-22, choosing The Board:
 *   "I would NOT have the logo with the white fitness for this.. find the original
 *    logo with black fitness writing in it.. then its go for this"
 *
 * The panels are near-white plates (the clips are 3D figures keyed on white), so a
 * white wordmark on a dark chip reads as a sticker pasted over the animation. The
 * black-FITNESS lockup sits ON the plate and reads as a watermark, which is what it is.
 *
 * THE FILE: /assets/logo-flat.png — green swoosh, GREEN "Pete Gawtry", BLACK "FITNESS".
 * ⚠️ NOT /assets/logo-wm.png (ALL GREEN — Pete ruled it out; "-wm" reads as watermark
 *    and it is not) and NOT /assets/logo-nav.webp (WHITE "FITNESS" — dark surfaces only).
 * ⛔ NO PILL, NO SCRIM, NO BLUR, NO BORDER. It had a white .34 scrim behind it and Pete
 * ruled it out on sight -- 2026-08-23: "the logo still has what looks like a pill box
 * behind it.. I wanted it compltely transparent". The mark sits directly on the plate at
 * .85 opacity and nothing else. Do not put a chip back under it.
 *
 * SIZE IS MEASURED AGAINST THE PANEL, NOT PICKED. Pete, 2026-08-22: "That goddamn logo
 * best be really small transparent with pill looking background." -- the SIZE half of that
 * held, the pill half did not; see the ⛔ above. The first build was
 * 112px wide on a panel measured at 152px on a live 375px page -- 73% of it. It is now
 * 52px (34%), and 70px on the large panel (311px, 23%). If the grid ever changes,
 * re-derive these from the panel width; do not nudge them by eye.
 *
 * ⚠️ THREE FILES DRAW THIS MARK. Changing one is how Pete got shown an unchanged logo:
 *   this file                              .pgfb__bug   the public site
 *   board-stage/css/pgf-board.css          .pgfb__bug   the preview URL he opens
 *   hq/players/pgf-player-brand.css        .pgf-bug     the /hq/ demos
 * board-stage is a copy OF this file -- refresh it, never edit it. Change the /hq/ one
 * in the same pass or the demos and the site disagree.
 *
 * THE ARTWORK: assets/logo-flat.png, re-rendered 2026-08-22 at 1200x464 with alpha from
 * the vector master Pete named -- "PG Fitness flat.ai" in his iCloud Logos folder (it is
 * a PDF 1.5 inside), via gs -sDEVICE=pngalpha -r900, trimmed to the ink. Verified: the
 * FITNESS word measures rgb(64,64,66), i.e. the BLACK lockup, not the all-green
 * logo-wm.png and not the white-FITNESS logo-nav.webp.
 */
.pgfb__bug{position:absolute;right:6px;bottom:6px;z-index:3;pointer-events:none;
  width:52px;height:17px;opacity:.85;
  background:url("/assets/logo-flat.png") center/42px auto no-repeat;
  font-size:0;line-height:0;color:transparent;text-indent:-9999px;overflow:hidden}
.pgfb__cell--lg .pgfb__bug{width:70px;height:22px;background-size:56px auto;right:8px;bottom:8px}

/* ---- name plate — real DOM text, split-flap roll on change ------------- */
.pgfb__plate{padding:8px 3px 2px}
.pgfb__nm{display:block;overflow:hidden;min-height:32px}
.pgfb__cell--lg .pgfb__nm{min-height:38px}
.pgfb__nm-i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:700 12.5px/1.26 var(--pgfb-font);color:var(--ink-2,#c9d1e0);overflow-wrap:break-word}
.pgfb__cell--lg .pgfb__nm-i{font-size:15px;line-height:1.24;color:var(--ink,#f6f8fc)}

/* ---- footer: the honest tally + the full name list -------------------- */
.pgfb__foot{padding-top:2px}
.pgfb__tally{margin:0 0 7px;font:400 12.5px/1.55 var(--pgfb-font);color:var(--mute,#aab4c8)}
.pgfb__tally b{color:var(--ink,#f6f8fc);font-weight:700}

/* ⚠️ THE NAME LIST IS SERVER-RENDERED AND IS NOT OPTIONAL.
 * The movement names are a real part of why these pages get found. The board only ever
 * NAMES what is on screen, so every movement on the page is written out here as text, in
 * the markup, present with JavaScript off. Do not move this into the board's JS. */
.pgfb__names{margin-top:10px;border:1px solid var(--line,rgba(255,255,255,.10));
  border-radius:var(--radius-sm,13px);background:var(--surface,rgba(255,255,255,.055));padding:10px 12px}
.pgfb__names > summary{cursor:pointer;font:800 10.5px/1.3 var(--pgfb-font);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2,#c9d1e0)}
.pgfb__names > summary:focus-visible{outline:2px solid var(--accent,#4bdd64);outline-offset:3px}
.pgfb__names ul{margin:10px 0 2px;padding:0 0 0 16px;columns:2;column-gap:20px}
/* the category picker is the same <details> treatment as the name list — see the note in
   pgf_board.band(). It sits in the foot, shut, because 63 pills above the board was the
   first thing /exercise-animations showed. */
.pgfb__catpick .pgfb__cats{margin-top:10px}
.pgfb__names li{font:400 11.5px/1.5 var(--pgfb-font);color:var(--mute-2,#7b86a0);
  break-inside:avoid;margin:0 0 2px;overflow-wrap:break-word}

.pgfb__cta{display:inline-block;margin-top:6px;color:var(--accent-4,#8bf0a6);
  font:800 11px/1 var(--pgfb-font);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--accent-line,rgba(75,221,100,.35));padding-bottom:3px}
.pgfb__cta:hover{color:var(--accent,#4bdd64)}
.pgfb__cta:focus-visible{outline:2px solid var(--accent,#4bdd64);outline-offset:3px}

/* JS off: no panels are ever built, so the band must not leave an empty hole. The
   name list above still renders, which is the part that matters. */
.pgfb__rows:empty{min-height:0}

/* ---- tablet: one strip of 3 ------------------------------------------- */
@media (min-width:620px){
  .pgfb__grid{grid-template-columns:1.55fr 1fr 1fr}
  .pgfb__cell--lg{grid-column:auto}
  .pgfb__screen,.pgfb__cell--lg .pgfb__screen{aspect-ratio:auto;height:clamp(178px,25vw,214px)}
  .pgfb__names ul{columns:3}
}
/* ---- desktop: 1 large + 3 small, one row ------------------------------ */
@media (min-width:900px){
  .pgfb__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:9px}
  .pgfb{--pgfb-sweep:.44s}
  .pgfb__screen,.pgfb__cell--lg .pgfb__screen{height:clamp(186px,15.4vw,236px)}
  .pgfb__row{padding:13px 14px 15px;margin-bottom:15px}
  .pgfb__names ul{columns:4}
}
@media (min-width:1180px){ .pgfb__names ul{columns:5} }

@media (prefers-reduced-motion:reduce){
  .pgfb__lyr{transition-duration:.001ms}
  .pgfb__cell.is-swapping .pgfb__sweep{animation:none}
  .pgfb__live::before{animation:none}
}