/* ============================================================
   PS IA-ITB — STATS ZONE · REDESIGN LAYER
   Loaded AFTER statszone.css. Everything the redesign adds or
   overrides lives here so the original file stays intact and the
   diff is legible. Scoped to .szone; tokens from the base file.
   Push: broadcast-grade sports data-viz — bolder type, more depth,
   a hard Player/Team split, and new Metric-by-metric graphics.
   ============================================================ */

.szone .honesty-block[hidden]{display:none}

/* ---------------- slim header (photo hero removed) ---------------- */
.szone .hero-slim{
  height:auto;min-height:0;overflow:visible;
  background:linear-gradient(180deg, var(--surface-2), var(--page));
  border-bottom:1px solid var(--border);
}
.szone .hero-slim .hero-inner{height:auto;padding-top:30px;padding-bottom:24px}
.szone .hero-slim .lower-third{position:static}
.szone .hero-slim .hero-h1{font-size:clamp(32px,4.4vw,50px);margin-top:11px;text-shadow:none}
.szone .hero-slim .hero-sub{color:var(--text-secondary);max-width:620px;margin-top:12px}
@media (max-width:700px){
  .szone .hero-slim .hero-inner{padding-top:22px;padding-bottom:18px}
}

.szone .sz-modebar{display:flex;gap:10px;padding:22px 0 6px;flex-wrap:wrap}
.szone .sz-mode{
  flex:1 1 0;min-width:190px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);
  border-radius:16px;padding:15px 20px;cursor:pointer;font:inherit;text-align:left;
  transition:transform .16s, border-color .16s, box-shadow .16s;position:relative;overflow:hidden;
}
.szone .sz-mode:hover{border-color:var(--brand);color:var(--text-primary);transform:translateY(-1px)}
.szone .sz-mode-l{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1}
.szone .sz-mode-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.szone .sz-mode.on{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--blue-deep,#1B3C8C) 100%);
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--brand) 72%,transparent);
}
.szone .sz-mode.on .sz-mode-s{color:rgba(255,255,255,.82)}
/* a thin ruled accent on the active card, broadcast lower-third flavour */
.szone .sz-mode.on:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}

/* ---------------- tabs: explicit numbers, not a CSS counter ---------------- */
.szone .tabs{counter-reset:none;gap:2px;margin-top:6px}
.szone .tab:before{content:none !important}
.szone .tab{gap:9px;padding:15px 18px;font-size:14.5px}
.szone .tab .tnum{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.szone .tab[aria-selected="true"] .tnum{color:var(--brand)}
.szone .tab[aria-selected="true"]{border-bottom-width:3px}

@media (max-width:700px){
  .szone .sz-mode{min-width:0;flex:1 1 46%;padding:13px 15px}
  .szone .sz-mode-l{font-size:17px}
}

/* ---------------- Player dashboard · insight cards (broadcast-grade) ---------------- */
.szone .szp-ins{grid-template-columns:1fr 1fr;gap:30px 22px}
.szone .szp-inscol{display:flex;flex-direction:column;gap:14px}
.szone .szp-h-s, .szone .szp-h-f{
  display:flex;align-items:center;gap:11px;margin:0 0 2px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.szone .szp-h-s{color:var(--good)}
.szone .szp-h-f{color:var(--serious)}
.szone .szp-h-s:before, .szone .szp-h-f:before{content:"";width:24px;height:3px;border-radius:2px;background:currentColor}
.szone .szp-hcount{
  margin-left:auto;font-size:12px;color:var(--text-secondary);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:2px 10px;letter-spacing:.02em;
}

.szone .szp-card{
  background:linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 80%, var(--page)));
  border:1px solid var(--border);border-left:4px solid var(--neutral);border-radius:14px;
  padding:16px 18px 0;margin:0;box-shadow:var(--sz-shadow);overflow:hidden;
}
.szone .szp-card.s{border-left-color:var(--good)}
.szone .szp-card.f{border-left-color:var(--serious)}
.szone .szp-card.n{border-left-color:var(--def)}
.szone .szp-card-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.szone .szp-card-h{display:flex;gap:9px;align-items:baseline;min-width:0}
.szone .szp-card h4{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.22;margin:0}
.szone .szp-card .szp-mark{font-size:12px;flex:none;line-height:1.5}
.szone .szp-card.s .szp-mark{color:var(--good)}
.szone .szp-card.f .szp-mark{color:var(--serious)}
.szone .szp-card.n .szp-mark{color:var(--def)}
.szone .szp-cardbadge{
  flex:none;display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center;
  padding:7px 11px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);
}
.szone .szp-card.s .szp-cardbadge{border-color:color-mix(in srgb, var(--good) 45%, transparent)}
.szone .szp-card.f .szp-cardbadge{border-color:color-mix(in srgb, var(--serious) 45%, transparent)}
.szone .szp-cardbadge .n{font-size:25px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.szone .szp-card.s .szp-cardbadge .n{color:var(--good)}
.szone .szp-card.f .szp-cardbadge .n{color:var(--serious)}
.szone .szp-cardbadge .u{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;white-space:nowrap}
.szone .szp-card-b{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:11px 0 14px}
.szone .szp-tip{
  margin:0 -18px;padding:11px 18px;border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  font-size:12.5px;color:var(--text-secondary);line-height:1.5;
}
.szone .szp-tip span{
  color:var(--brand);font-weight:700;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-right:7px;
}
/* "assessed, listed as X" — a quiet aside on the role line, never a badge:
   it is a note about where the analysis comes from, not a status to award. */
.szone .szp-asif{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 8px;
  margin-left:8px;white-space:nowrap;
}
/* hero: the top strength gets more presence */
.szone .szp-card--hero{border-left-width:5px}
.szone .szp-card--hero h4{font-size:19px}
.szone .szp-card--hero .szp-cardbadge .n{font-size:31px}
.szone .szp-ins-full .szp-card{border-left-color:var(--def)}

@media (max-width:880px){
  .szone .szp-ins{grid-template-columns:1fr;gap:22px}
}

/* ---------------- player picker · dropdown ---------------- */
.szone .szp-roster--sel{gap:12px;align-items:center;flex-wrap:wrap}
.szone .szp-roster-lab{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.szone .szp-selwrap{position:relative;flex:1 1 320px;max-width:460px}
.szone .szp-selwrap:after{content:"\25be";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:12px}
.szone .szp-select{
  width:100%;-webkit-appearance:none;appearance:none;
  background:var(--surface-1);border:1px solid var(--border);border-radius:10px;
  color:var(--text-primary);font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:11px 40px 11px 14px;cursor:pointer;transition:border-color .15s;
}
.szone .szp-select:hover{border-color:var(--brand)}
.szone .szp-select:focus{outline:2px solid var(--brand);outline-offset:1px}
.szone .szp-select option{background:var(--surface-1);color:var(--text-primary);font-weight:600}
.szone .szp-select optgroup{background:var(--page);color:var(--muted);font-family:var(--mono);font-weight:700}
@media (max-width:700px){
  .szone .szp-roster--sel{gap:8px}
  .szone .szp-selwrap{flex:1 1 100%;max-width:none}
}

/* ---------------- Metric by metric (Chapter 07) ---------------- */
/* The radar is a full-width figure above the metric rows now, and it goes
   through fig() like every other chart — so it inherits the card, the howto
   line and the accessible table, and .szk-radar-card / .szk-radar-h are gone
   with the hand-built markup they styled. Eight spokes need the extra width
   the row grid would not give it. */
.szone #sz-fig-skradar{margin:2px 0 22px}
.szone #sz-fig-skradar .chart{overflow:visible}
.szone .szk-eff .szk-row{align-items:stretch}
.szone .szk-eff .szk-vis figure.card{padding-bottom:8px}
/* dist chart cards get a touch more breathing room for the YOU label */
.szone .szk-vis .chart{overflow:visible}

/* ---------------- the two cohort pickers ----------------
   Chapter 07 carries a second select — WHICH famous name you are held up
   against, once a cohort of named players is chosen. It is emitted into its
   own host so the two rebuild independently (see renderNamePicker), which
   means the row has to hold two label+select pairs without either label
   drifting away from its own control as the row wraps on a phone. */
.szone .szk-top{gap:18px}
.szone .szk-top > span{display:inline-flex;gap:8px;align-items:center;min-width:0}
.szone .szk-top > span:empty{display:none}
.szone .szk-top select.sel{
  font-size:13.5px;font-weight:700;padding:8px 12px;border-radius:9px;
  max-width:min(62vw,320px);
}
.szone .szk-top select.sel:hover{border-color:var(--brand)}
@media (max-width:700px){
  .szone .szk-top{gap:10px}
  .szone .szk-top > span{flex:1 1 100%}
  .szone .szk-top select.sel{flex:1;max-width:none}
}

/* The keeper provenance blocks are the one thing on this page set in mono that
   should not be: `.szk-meta` is mono because it is a label, but these are
   four-sentence paragraphs carrying the caveats behind the derived keeper
   numbers, and 78 characters of 10.5px monospace is the hardest reading here. */
.szone .szk-prov{font-family:var(--font);font-size:11.5px;line-height:1.65;max-width:88ch}

/* ---------------- slim header, light mode ----------------
   The photo is gone, so this text sits on the page instead of on a dark scrim.
   Every other hero on the site still has a photo under it, which is why
   light.css pins .hero-h1 to #EEF3FB and hangs a heavy black shadow on the
   eyebrow and standfirst — correct there, white-on-white here. The scrims go
   in BOTH themes (there is nothing left to cut through) and the ink follows
   the page. */
.szone .hero-slim .hero-eyebrow{text-shadow:none}
.szone .hero-slim .hero-h1{color:var(--text-primary)}
html[data-theme="light"] .szone .hero-slim .hero-h1{color:var(--text-primary);text-shadow:none}
html[data-theme="light"] .szone .hero-slim .hero-sub,
html[data-theme="light"] .szone .hero-slim .hero-eyebrow{text-shadow:none}

/* ---------------- ABOUT THIS PAGE ----------------
   The chapter that took over the standfirst, the caveat block, every
   chapter's deck and the method footnote. It is the only chapter that is
   pure reading, so it is the only one allowed a measure and a rhythm of
   its own rather than a grid of cards. */
.szone .sza-figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin:4px 0 0;
}
.szone .sza-fig{padding:15px 20px;border-left:1px solid var(--border);min-width:0}
.szone .sza-fig:first-child{border-left:none;padding-left:0}
.szone .sza-fig .v{font-size:27px;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums lining-nums}
.szone .sza-fig .l{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:8px;
  text-transform:uppercase;letter-spacing:.15em}
.szone .sza-fig .s{font-size:11.5px;color:var(--text-secondary);margin-top:6px;line-height:1.4}

/* One block per mode, so the guide is laid out the way the tab strip is. */
.szone .sza-mode + .sza-mode{margin-top:22px}
.szone .sza-mode-h{
  display:flex;align-items:baseline;gap:9px;margin:0 0 10px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);
}
.szone .sza-mode-h em{font-style:normal;letter-spacing:.03em;text-transform:none;
  font-size:11px;color:var(--muted)}
.szone .sza-list{display:grid;gap:8px}

/* Each row is a button: reading what a chapter is and then going to it is one
   gesture, not "now find that tab again". */
.szone .sza-item{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  font:inherit;color:inherit;background:var(--surface-1);
  border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  transition:border-color .15s, transform .15s;
}
.szone .sza-item:hover{border-color:var(--brand);transform:translateY(-1px)}
.szone .sza-n{
  flex:none;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--brand);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;padding-top:3px;min-width:18px;
}
.szone .sza-t{min-width:0;display:block}
.szone .sza-t b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.szone .sza-d{display:block;font-size:13px;color:var(--text-secondary);line-height:1.55;margin-top:5px}
.szone .sza-method{font-size:12.5px;line-height:1.75;color:var(--text-secondary);max-width:96ch;margin:0}
.szone .sza-method b{color:var(--text-primary)}

/* About is the one tab with no chapter number, so it does not reserve the gap
   the numbered ones do. */
.szone .tab--plain{gap:0}

@media (max-width:700px){
  .szone .sza-figs{grid-template-columns:1fr 1fr}
  .szone .sza-fig{padding:12px 14px}
  .szone .sza-fig:nth-child(odd){border-left:none;padding-left:0}
  .szone .sza-fig .v{font-size:23px}
}

/* ---------------------------------------------------------------- reference
   values on a Metric-by-metric card.

   Three states now share the number row, and they have to be told apart at a
   glance because they mean different things. A plain number is a verdict — the
   cohort answers the row like for like. A dash means the cohort cannot answer
   it at all. This third one is a professional figure in the same units that is
   NOT a verdict: a per-90 count from a Big-5 league beside a per-90 count from
   fifty-minute matches. It is drawn quieter than a verdict and louder than a
   dash, and it says "reference" on itself so nobody has to remember. */
.szone .szk-nums .ref .v{color:var(--ink-accent)}
.szone .szk-nums .ref .l{color:var(--ink-accent);opacity:.85}
.szone .szk-nums .ref .l em{
  font-style:normal;font-weight:700;letter-spacing:.1em;
  border:1px solid currentColor;border-radius:4px;padding:1px 4px;margin-left:4px;opacity:.75;
}

/* ---------------------------------------------------------------- context row
   A Metric-by-metric row a position is shown but not judged on. It needs to
   read as a deliberate absence rather than a missing verdict — quieter than the
   band it stands in for, and unmistakably a label rather than a result. */
.szone .szk-ctx{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:4px;
  padding:2px 5px;margin-left:8px;vertical-align:middle;white-space:nowrap;
}