/* ══ THE SEASON — recomposed (CEO 2026-09-26: "awful legacy design") ═══════════════════════════
   Companion to assets/js/pn-season-page.js. Every rule is scoped to .pnsp-* and written at
   `html body .pnsp…` specificity so the hub-view catch-alls (margin/max-width strip, the 20-deep
   button chain, pn-ds's id-level bumps) cannot repaint it. Tokens are pn-ds's own --ds-* set, so
   Dark and Light both repaint the whole surface (UX Law 5). Headings: Inter 900, sentence case,
   one accent word (SST §5g-ii). Mono only on eyebrow labels. No cards-in-cards. */

html body .pnsp{
  --pnsp-ink:   var(--ds-ink, #eef3fa);
  --pnsp-ink-2: var(--ds-ink-2, #a9b8cc);
  --pnsp-acc:   var(--ds-accent-text, #ff6a2b);
  --pnsp-fill:  var(--ds-accent, #f97316);
  --pnsp-hair:  var(--ds-hair, rgba(255,255,255,.11));
  --pnsp-hair2: var(--ds-hair-2, rgba(255,255,255,.18));
  --pnsp-panel: var(--ds-panel, #0b0f18);
  --pnsp-panel2:var(--ds-panel-2, #10162a);
  --pnsp-good:  var(--ds-good, #2fbf71);
  --pnsp-gold:  #f2c94c;
  --pnsp-face:  var(--pn-type-face, Inter, ui-sans-serif, system-ui, sans-serif);
  --pnsp-body:  IS, 'Instrument Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --pnsp-mono:  var(--mono, JB, ui-monospace, SFMono-Regular, monospace);
  display:flex; flex-direction:column; gap:0;
  color:var(--pnsp-ink); font-family:var(--pnsp-body);
  padding:0 0 28px; max-width:1040px;
  font-variant-numeric:tabular-nums;
}
html.mvc-light body .pnsp, html body.mvc-light .pnsp{ --pnsp-gold:#8a6400; }

/* ── shared type ─────────────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-eye, html body .pnsp .pnsp-k{
  display:block; margin:0;
  font:700 11px/1 var(--pnsp-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--pnsp-ink-2);
}
html body .pnsp h2.pnsp-h, html body .hub-view[data-view] .pnsp h2.pnsp-h{
  margin:0 !important; text-transform:none !important; text-wrap:balance;
  font:900 clamp(24px,2.4vw,32px)/1.05 var(--pnsp-face) !important; letter-spacing:-.03em !important;
  color:var(--pnsp-ink) !important;
}
html body .pnsp .pnsp-acc{ color:var(--pnsp-acc); }
html body .pnsp p.pnsp-p{ margin:8px 0 0; max-width:60ch; font:500 15px/1.5 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp p.pnsp-p b{ color:var(--pnsp-ink); font-weight:700; }
html body .pnsp ::selection{ background:var(--pnsp-fill); color:var(--ds-on-accent,#14060d); }

/* ── 1 · the clock ───────────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-clock{ display:flex; flex-direction:column; gap:10px; padding:4px 0 30px; }
html body .pnsp h2.pnsp-lede, html body .hub-view[data-view] .pnsp h2.pnsp-lede{
  margin:0 !important; text-transform:none !important; text-wrap:balance;
  font:900 clamp(26px,3vw,40px)/1.02 var(--pnsp-face) !important; letter-spacing:-.03em !important;
  color:var(--pnsp-ink) !important;
}
html body .pnsp .pnsp-bar{
  position:relative; height:10px; margin-top:10px; border-radius:999px;
  background:var(--pnsp-panel2); box-shadow:inset 0 0 0 1px var(--pnsp-hair);
  overflow:hidden;
}
html body .pnsp .pnsp-bar > i{
  position:absolute; inset:0 auto 0 0; width:var(--pnsp-pct,0%); border-radius:999px;
  background:var(--pnsp-fill); transition:width .9s cubic-bezier(.22,1,.36,1);
}
html body .pnsp .pnsp-ticks{ position:absolute; inset:0; display:flex; }
html body .pnsp .pnsp-tick{ flex:1 1 0; border-right:2px solid var(--pnsp-panel); }
html body .pnsp .pnsp-tick:last-child{ border-right:0; }
html body .pnsp .pnsp-tick.is-now{ background:color-mix(in srgb, var(--pnsp-fill) 45%, transparent); }
html body .pnsp .pnsp-clock-foot{
  display:flex; justify-content:space-between;
  font:600 12px/1 var(--pnsp-body); color:var(--pnsp-ink-2);
}

/* ── 2 · where you stand ─────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-stand{ padding:26px 0 30px; border-top:1px solid var(--pnsp-hair); }
html body .pnsp .pnsp-stand-grid{
  display:grid; grid-template-columns:minmax(200px,.8fr) minmax(0,2fr); gap:22px 40px; margin-top:18px; align-items:start;
}
html body .pnsp .pnsp-value{ display:flex; flex-direction:column; gap:8px; }
html body .pnsp .pnsp-value-n{
  font:900 clamp(40px,4.6vw,64px)/.95 var(--pnsp-face); letter-spacing:-.04em; color:var(--pnsp-ink);
}
html body .pnsp .pnsp-value-s{ font:500 13px/1.4 var(--pnsp-body); color:var(--pnsp-ink-2); max-width:24ch; }

html body .pnsp .pnsp-track{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 8px;
}
html body .pnsp .pnsp-track::before{
  content:""; position:absolute; left:8px; right:8px; top:7px; height:2px;
  background:var(--pnsp-hair2); z-index:0;
}
html body .pnsp .pnsp-track::after{
  content:""; position:absolute; left:8px; top:7px; height:2px; z-index:0;
  width:calc((100% - 16px) * var(--pnsp-cur,0) / 3);
  background:var(--pnsp-fill);
}
html body .pnsp .pnsp-step{ position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; padding:0 0 0 0; min-width:0; }
html body .pnsp .pnsp-step-dot{
  width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  background:var(--pnsp-panel); border:2px solid var(--pnsp-hair2);
}
html body .pnsp .pnsp-step.is-done .pnsp-step-dot{ background:var(--pnsp-fill); border-color:var(--pnsp-fill); }
html body .pnsp .pnsp-step.is-now .pnsp-step-dot{
  background:var(--pnsp-fill); border-color:var(--pnsp-fill);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pnsp-fill) 28%, transparent);
}
html body .pnsp .pnsp-step-n{
  font:800 15px/1.15 var(--pnsp-face); letter-spacing:-.02em; color:var(--pnsp-ink-2); margin-top:2px;
  overflow-wrap:anywhere;
}
html body .pnsp .pnsp-step.is-now .pnsp-step-n{ color:var(--pnsp-ink); }
html body .pnsp .pnsp-step.is-done .pnsp-step-n{ color:var(--pnsp-ink); }
html body .pnsp .pnsp-step-s{ font:500 12px/1.35 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp .pnsp-step.is-now .pnsp-step-s{ color:var(--pnsp-acc); font-weight:700; }
html body .pnsp .pnsp-step.is-locked{ opacity:.72; }

html body .pnsp .pnsp-need{ margin-top:22px; padding-top:16px; border-top:1px solid var(--pnsp-hair); }
html body .pnsp .pnsp-need-h{ margin:0 0 10px; font:500 14px/1.4 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp .pnsp-need-h b{ color:var(--pnsp-ink); font-weight:800; }
html body .pnsp .pnsp-req{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k v" "b b";
  gap:6px 14px; padding:9px 0; border-top:1px solid var(--pnsp-hair);
}
html body .pnsp .pnsp-req:first-of-type{ border-top:0; }
html body .pnsp .pnsp-req-name{ grid-area:k; font:600 14px/1.2 var(--pnsp-body); color:var(--pnsp-ink); }
html body .pnsp .pnsp-req-v{ grid-area:v; font:700 13px/1.2 var(--pnsp-body); color:var(--pnsp-ink-2); white-space:nowrap; }
html body .pnsp .pnsp-req.is-pass .pnsp-req-v{ color:var(--pnsp-good); }
html body .pnsp .pnsp-req.is-pass .pnsp-req-v::before{ content:"\2713\00a0"; }
html body .pnsp .pnsp-req-bar{ grid-area:b; display:block; height:5px; border-radius:999px; background:var(--pnsp-panel2); box-shadow:inset 0 0 0 1px var(--pnsp-hair); overflow:hidden; }
html body .pnsp .pnsp-req-bar i{ display:block; height:100%; border-radius:999px; background:var(--pnsp-fill); transition:width .8s cubic-bezier(.22,1,.36,1); }
html body .pnsp .pnsp-req.is-pass .pnsp-req-bar i{ background:var(--pnsp-good); }
html body .pnsp .pnsp-need-f{ margin:12px 0 0; font:500 13px/1.4 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp .pnsp-claim{ margin-top:14px; }

/* ── 3 · the public board ────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-board{
  display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap;
  padding:22px 24px; border-radius:14px;
  background:var(--pnsp-panel2); box-shadow:inset 0 0 0 1px var(--pnsp-hair);
}
html body .pnsp .pnsp-board-txt{ flex:1 1 320px; min-width:0; }
html body .pnsp .pnsp-board-txt p.pnsp-p{ margin-top:6px; }
html body .pnsp .pnsp-board-act{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
html body .pnsp a.pn-btn{ text-decoration:none; }

/* ── 4 · the WahWahs ─────────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-ww{
  display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:20px 36px; align-items:center;
  padding:34px 0 30px; margin-top:8px; border-top:1px solid var(--pnsp-hair);
}
html body .pnsp .pnsp-ww-fig{ margin:0; position:relative; display:flex; justify-content:center; }
html body .pnsp .pnsp-ww-fig::before{
  content:""; position:absolute; left:10%; right:10%; bottom:6px; height:18px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pnsp-gold) 38%, transparent), transparent);
  filter:blur(6px);
}
html body .pnsp .pnsp-ww-fig img{
  position:relative; display:block; width:100%; max-width:220px; height:auto;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));
}
html body .pnsp .pnsp-ww-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
html body .pnsp .pnsp-ww-when{ margin:8px 0 0; font:500 15px/1.4 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp .pnsp-ww-when b{ color:var(--pnsp-acc); font-weight:800; }
html body .pnsp .pnsp-ww.is-tonight .pnsp-ww-when b{ text-transform:uppercase; letter-spacing:.02em; }
html body .pnsp .pnsp-ww-nom{ margin:12px 0 0; font:600 14px/1.4 var(--pnsp-body); color:var(--pnsp-ink); }
html body .pnsp .pnsp-ww-txt .pn-btn{ margin-top:14px; }

html body .pnsp .pnsp-shelf{ width:100%; margin-top:22px; padding-top:14px; border-top:1px solid var(--pnsp-hair); }
html body .pnsp .pnsp-shelf-row{
  display:flex; align-items:flex-end; gap:12px; height:56px; padding:0 2px 6px;
  border-bottom:3px solid var(--pnsp-hair2); box-sizing:border-box;
}
html body .pnsp .pnsp-shelf-row img{ display:block; width:42px; height:55px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
html body .pnsp .pnsp-shelf-row b{ font:800 15px/1 var(--pnsp-face); color:var(--pnsp-ink-2); align-self:center; }
html body .pnsp .pnsp-shelf-row i{
  display:block; width:26px; height:34px; border-radius:6px 6px 3px 3px;
  border:1.5px dashed var(--pnsp-hair2); box-sizing:border-box;
}
html body .pnsp .pnsp-shelf-note{ display:block; margin-top:10px; font:600 13px/1.4 var(--pnsp-body); color:var(--pnsp-ink-2); }
html body .pnsp .pnsp-shelf.is-won .pnsp-shelf-note{ color:var(--pnsp-ink); }

/* ── 5 · stats ───────────────────────────────────────────────────────────────────────────── */
html body .pnsp .pnsp-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  padding:22px 0 0; border-top:1px solid var(--pnsp-hair);
}
html body .pnsp .pnsp-stat{ display:flex; flex-direction:column; gap:6px; padding:0 18px; border-left:1px solid var(--pnsp-hair); min-width:0; }
html body .pnsp .pnsp-stat:first-child{ padding-left:0; border-left:0; }
html body .pnsp .pnsp-stat-n{ font:900 clamp(26px,2.6vw,36px)/1 var(--pnsp-face); letter-spacing:-.03em; color:var(--pnsp-ink); }
html body .pnsp .pnsp-stat-s{ font:500 12px/1.3 var(--pnsp-body); color:var(--pnsp-ink-2); }

/* ── focus, motion, reduced motion ───────────────────────────────────────────────────────── */
html body .pnsp .pn-btn:focus-visible{ outline:2px solid var(--ds-focus, var(--pnsp-acc)); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  html body .pnsp .pnsp-bar > i, html body .pnsp .pnsp-req-bar i{ transition:none; }
}

/* ── phone ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  /* the shell's fixed REPORT tab rides the right edge at phone width — keep the row values clear of it */
  html body .pnsp{ padding-bottom:20px; padding-right:22px; }
  html body .pnsp .pnsp-clock{ padding-bottom:24px; }
  html body .pnsp .pnsp-stand{ padding:22px 0 24px; }
  html body .pnsp .pnsp-stand-grid{ grid-template-columns:minmax(0,1fr); gap:20px; margin-top:14px; }
  html body .pnsp .pnsp-track{ gap:0 6px; }
  html body .pnsp .pnsp-step-n{ font-size:13px; }
  html body .pnsp .pnsp-step-s{ font-size:11px; }
  html body .pnsp .pnsp-board{ padding:18px 16px; }
  html body .pnsp .pnsp-board-act{ width:100%; }
  html body .pnsp .pnsp-board-act .pn-btn{ flex:1 1 auto; }
  html body .pnsp .pnsp-ww{ grid-template-columns:minmax(0,1fr); gap:14px; padding:26px 0 24px; }
  html body .pnsp .pnsp-ww-fig img{ max-width:150px; }
  html body .pnsp .pnsp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; padding-top:18px; }
  html body .pnsp .pnsp-stat:nth-child(3){ padding-left:0; border-left:0; }
}