/* ===== Livestream — vertical video pillars (one per race) + year switcher pill ===== */
body{background:#000}

/* floating control pill (LIVESTREAM · ‹ year › · jump-to-race dropdown) — shared look with Photos */
.phbar{position:fixed;top:118px;left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:min(92vw,420px);
  display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:11px 22px 13px;border-radius:22px;box-shadow:0 4px 18px rgba(0,0,0,.55)}
.phbar .lbl{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:5px;font-size:30px;color:var(--leaf)}
.phrow{display:flex;align-items:center;justify-content:center;gap:18px}
.phbar .ybtn,.phbar .ybtn:hover,.phbar .ybtn:focus,.phbar .ybtn:focus-visible,.phbar .ybtn:active{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;box-shadow:none;
  cursor:pointer;color:var(--leaf);font-size:26px;line-height:1;font-family:Arial,sans-serif;padding:2px 6px}
.phbar .ybtn:disabled{opacity:.2;cursor:default}
.phbar .ynow{font-family:var(--inline);font-size:34px;line-height:1;color:var(--cream);min-width:2.6ch;text-align:center}

/* the pillars */
.pillarwrap{padding:0}
.pillars{display:flex;gap:5px;height:calc(100dvh - 108px);padding:0 5px 5px;
  transition:opacity .28s ease,transform .28s ease}
.pillars.out-l{opacity:0;transform:translateX(-34px)}
.pillars.out-r{opacity:0;transform:translateX(34px)}
/* Equal pillars (flex-basis:0 + grow:1). Opening one animates its flex-basis 0 → 62%; grow shares the
   rest, so it lands ~70% of the row and the others shrink smoothly. Uses longhands (not the `flex`
   shorthand) + a flex-basis transition, which Chrome animates reliably. */
.pillar{position:relative;flex-grow:1;flex-shrink:1;flex-basis:0;min-width:0;overflow:hidden;cursor:pointer;
  background:#0b0b0b;border-radius:8px;transition:flex-basis .55s cubic-bezier(.22,1,.36,1);
  container-type:inline-size}   /* so the title scales to THIS pillar's width (cqi) — uniform across any pillar count */
.pillars.in .pillar{animation:pillIn .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes pillIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.pillar.open{flex-basis:62%}

/* native <video> — background loop covers the pillar; graded + softly blurred so titles read over it.
   In watch mode the grade/grain/tint all drop away for a clean, full-frame video. */
.pv{position:absolute;inset:0;overflow:hidden;background:#0b0b0b}
.pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;background:#0b0b0b;pointer-events:none;
  filter:saturate(1.12) contrast(1.05) brightness(.94) blur(.6px);transition:filter .4s ease}
.pillar.watch .pvid{object-fit:contain;background:#000;pointer-events:auto;filter:none}
/* mild dark-green cinematic tint (no centre vignette now the title lives in the bottom bar) */
.pshade{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .4s ease;
  background:linear-gradient(180deg, rgba(6,18,11,.30) 0%, rgba(6,18,11,.12) 42%, rgba(6,18,11,.34) 100%)}
.pillar.watch .pshade{opacity:0}
/* animated film grain (self-contained SVG noise) */
.pillar::after{content:"";position:absolute;inset:-60%;z-index:2;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:130px 130px;animation:grain 1s steps(5) infinite}
.pillar.watch::after{opacity:0}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-8%,4%)}40%{transform:translate(6%,-6%)}60%{transform:translate(-4%,8%)}80%{transform:translate(8%,-2%)}100%{transform:translate(0,0)}}

/* upcoming races (2026 placeholders): animated diagonal orange→green gradient instead of a video */
.pgrad{position:absolute;inset:0;background:linear-gradient(135deg,var(--orange) 0%,var(--leaf) 38%,var(--orange) 68%,var(--leaf) 100%);
  background-size:300% 300%;animation:gradShift 14s ease infinite}
@keyframes gradShift{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
/* title BAR — black, edge-to-edge along the BOTTOM of each pillar; a green top line with a soft black
   gradient blending up into the video; [MGP logo] + race name in white on one line. */
.pt{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;transition:opacity .3s ease;
  display:flex;flex-direction:column;align-items:center;
  background:rgba(0,0,0,.85);border-top:10px solid var(--leaf);padding:14px 18px 16px}   /* thick brand-green top line */
.pt-c{display:flex;flex-direction:column;align-items:center;gap:4px}
.pt::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% + 10px);height:90px;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0))}   /* +10px so it sits ABOVE the green line, never over it */
/* logo + name on ONE line, sized in cqi (relative to the pillar) so it scales uniformly with any pillar
   count/width and the logo/name relationship is identical on every pillar (no uneven wrapping). */
.pt-in{display:flex;align-items:center;gap:clamp(6px,2cqi,14px);flex-wrap:nowrap;white-space:nowrap;max-width:100%}
.pt-logo{height:clamp(14px,7cqi,34px);width:auto;display:block;flex:0 0 auto}
/* name + (upcoming) date stack in a column beside the logo, so the date centres under the race NAME only */
.pt-col{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pt-name{font-family:var(--inline);text-transform:uppercase;letter-spacing:1px;line-height:1;white-space:nowrap;
  font-size:clamp(15px,10cqi,44px);
  background:linear-gradient(90deg,#fff 0%,var(--leaf) 30%,#fff 55%,var(--leaf) 78%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));animation:nameFlow 24s linear infinite}   /* very slow white↔green shimmer */
@keyframes nameFlow{from{background-position:0% 50%}to{background-position:250% 50%}}
.pt-time{text-align:center;font-family:var(--data);font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;font-size:clamp(11px,1.05vw,14px);color:#fff;opacity:.85}
.pillar.watch .pt{opacity:0}

.pclose{position:absolute;top:14px;right:14px;z-index:6;display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:var(--cream);font-size:18px;cursor:pointer;
  transition:background .2s ease,transform .25s ease}
.pclose:hover{background:rgba(243,146,0,.7);transform:rotate(90deg)}
.pillar.watch .pclose{display:flex}

.ls-empty{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--cream);opacity:.6}
.ls-empty[hidden]{display:none}

/* mobile: the nav pill sits IN FLOW (not floating) so the pillars start below it — otherwise the first
   pillar hides behind the logo + pill and can't be tapped. Pillars stack as full-width bars that grow in
   height on tap; the page scrolls. Titles go horizontal. */
@media(max-width:760px){
  .phbar{position:static;left:auto;transform:none;margin:16px auto 12px}
  .pillarwrap{padding:0 6px 60px}
  .pillars{flex-direction:column;height:auto;gap:8px}
  /* taller pillar so the video isn't letterboxed by the title bar */
  .pillar{flex:0 0 auto;height:34vh;min-height:210px;transition:height .5s cubic-bezier(.22,1,.36,1)}
  .pillar.open{flex-basis:auto;height:72vh}
  /* the title-bar name/logo are sized in cqi (fine for narrow desktop pillars, but a full-width mobile
     pillar makes 10cqi ≈ 37px → the bar eats half the pillar). Cap them small + slim the bar so the
     video gets the height. */
  .pt{padding:8px 14px 10px;border-top-width:5px}
  .pt-name{font-size:clamp(15px,5cqi,20px)}
  .pt-logo{height:clamp(14px,5cqi,22px)}
  .pt-c{gap:2px}
}

@media(prefers-reduced-motion:reduce){
  .pillar,.pillars,.pt-name,.pt-logo,.pshade{transition:none}
  .pillars.in .pillar{animation:none;opacity:1}
  .pillar::after{animation:none;opacity:.08}
  .pgrad{animation:none}
  .pt-name{animation:none;background:none;color:#fff;-webkit-text-fill-color:#fff}
}

/* race-sponsor chip — TOP-centre of each pillar (the black .pt title bar owns the bottom at z3 —
   a bottom chip sat hidden behind it). z4 = above shade+bar, below .pclose (z6). Same tile
   treatment as the partners sheet: white tile, .dark = dark green for white-ink logos (Okell's).
   Display-only; fades out with the title bar while watching. */
.psp{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
  background:#fff;border-radius:11px;padding:8px 14px;box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:opacity .3s ease}
.psp.dark{background:#11281B}
.psp img{display:block;height:44px;width:auto;max-width:170px;object-fit:contain}
.pillar.watch .psp{opacity:0}
@media(max-width:760px){.psp{top:12px}.psp img{height:34px;max-width:130px}}