/* ============================================================
   PS IA-ITB — STATS ZONE
   The performance-analysis dashboard (#/statszone). Load AFTER
   styles.css / mobile.css / light.css.

   EVERYTHING here is scoped to `.szone`. That is not tidiness —
   the source design was a standalone page and styled bare `table`,
   `th`, `td`, `a` and `h1`. Unscoped, those rules would repaint the
   results archive, the squad tables and every heading on the site.
   If you add a rule here, scope it.

   TOKENS. Two families, split on purpose:

     • STRUCTURE — page, surfaces, text, border, brand. These are
       ALIASED to the site's own tokens (--bg, --card, --panel,
       --text, --muted-2, --border, --blue), so the dashboard
       follows light.css for free and can never drift into a
       second, subtly-different palette. Change the site's theme
       and this page changes with it.

     • CHARTS — the role hues, the sequential ramp, grid/axis rules,
       positive/negative. These keep their OWN values, because they
       were picked as an encoding (four categorical hues that stay
       apart for colour-vision deficiency, a monotonic 7-step ramp)
       rather than as chrome. They get their own light-mode block
       below, since a hue that reads on #070C18 does not read on
       white.

   The one token that is NOT an alias is --sz-muted. The site's
   --dim (#828FA8) is a readable body ink; the dashboard wants a
   quieter one for axis ticks and mono labels, which sit next to
   the data rather than in it.
   ============================================================ */

.szone{
  /* ---- structure: aliased to the site's theme ---- */
  --page:var(--bg);
  --surface-1:var(--card);
  --surface-2:var(--panel);
  --text-primary:var(--text);
  --text-secondary:var(--muted-2);
  --brand:var(--blue);
  --brand-fill:var(--blue-fill);
  --ink-accent:var(--blue-light);
  --warning:var(--gold);
  --muted:#5E6A82;

  /* ---- charts: their own encoding ---- */
  --grid:#1B2740; --axis:#2C3A55;
  --def:#5C95F5; --mid:#36D27B; --att:#FF9A3E; --gk:#8E9BB3;
  --neutral:#48587A; --neutral-weak:#2C3A55;
  --pos:#36D27B; --neg:#F0584B; --mid-neutral:#1B2740;
  --good:#36D27B; --serious:#FF9A3E; --critical:#F0584B;
  --seq-1:#0E1E3A; --seq-2:#173257; --seq-3:#22497E; --seq-4:#3167AE;
  --seq-5:#5C95F5; --seq-6:#9DC0FA; --seq-7:#CFE0FA;

  --sz-shadow:0 20px 44px -26px rgba(0,0,0,.85);
  --sz-radius:14px;
}
html[data-theme="light"] .szone{
  --muted:#6A6F79;
  --grid:#E5EAF1; --axis:#C2CBD8;
  --def:#2C6BE0; --mid:#12995A; --att:#D9741A; --gk:#7C8898;
  --neutral:#AEB9C9; --neutral-weak:#DCE3EC;
  --pos:#12995A; --neg:#D3402C; --mid-neutral:#EEF1F6;
  --good:#12995A; --serious:#D9741A; --critical:#D3402C;
  /* the ramp inverts: pale end nearest the white page, dark end for "most" */
  --seq-1:#DCE9FC; --seq-2:#B6D2F8; --seq-3:#8AB5F2; --seq-4:#5C95F5;
  --seq-5:#3167AE; --seq-6:#22497E; --seq-7:#0E1E3A;
  --sz-shadow:0 1px 2px rgba(11,19,38,.05), 0 10px 26px -14px rgba(11,19,38,.18);
}

.szone{font-size:15px;line-height:1.5}
.szone *{box-sizing:border-box}
.szone .mono{font-family:var(--mono)}
/* One measure for the whole view. It is the SITE's --wrap, not the 1420px the
   standalone design used: the header and its nav are capped at --wrap, so a
   wider body would push the KPI cards out past the logo above them. */
.sz-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------------- KPI strip ---------------- */
.szone .strip{background:var(--surface-2);border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.szone .kpis{max-width:var(--wrap);margin:0 auto;padding:26px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.szone .kpi{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.szone .kpi .v{font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.szone .kpi .l{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:9px;text-transform:uppercase;letter-spacing:.16em}
.szone .kpi .s{font-size:12.5px;color:var(--text-secondary);margin-top:8px;line-height:1.45}
.szone .kpi.flag{border-color:color-mix(in srgb, var(--warning) 45%, var(--border))}
.szone .kpi.flag .v{color:var(--warning)}

/* ---------------- filters ----------------
   Sticky BELOW the site header. This used to stick at top:0, which was right
   while the page carried a photo hero: app.js put the header in `over-hero`
   (position:absolute) and it scrolled away with the picture. The redesign's
   .hero-slim has no photo to sit over, so the header stays its ordinary sticky
   self and holds the top --hdr-h — anything sticking at 0 would slide under it
   and vanish. z-index stays under the header's 60. */
.szone .filters{
  position:sticky;top:var(--hdr-h);z-index:40;background:var(--page);
  border-bottom:1px solid var(--border);padding:12px 0;margin-bottom:0;
}
.szone .filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.szone .chip{
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);
  border-radius:999px;padding:7px 14px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.15s;
}
.szone .chip:hover{border-color:var(--brand);color:var(--text-primary)}
.szone .chip[aria-pressed="true"]{background:var(--brand-fill);color:#fff;border-color:var(--brand-fill)}
.szone #szRoleChips .chip[aria-pressed="true"]{background:var(--surface-1);color:var(--text-primary);border-color:var(--axis)}
.szone #szRoleChips .chip[aria-pressed="false"]{opacity:.42}
.szone #szRoleChips .chip[aria-pressed="false"] .dot{filter:grayscale(1)}
.szone .chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.szone .search{
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-primary);
  border-radius:8px;padding:8px 12px;font:inherit;font-size:13.5px;min-width:230px;
}
.szone .search:focus{outline:2px solid var(--brand);outline-offset:1px}
.szone .count{font-family:var(--mono);font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.04em}
.szone .count b{color:var(--text-primary)}
.szone .slider-wrap{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-secondary);white-space:nowrap}
.szone input[type=range]{accent-color:var(--brand);width:132px}
.szone .spacer{flex:1}

/* ---------------- chapters / tabs ---------------- */
.szone .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin;counter-reset:chap}
.szone .tab{
  border:none;background:none;color:var(--text-secondary);font-family:var(--font);font-size:14px;font-weight:700;
  padding:15px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:8px;
}
.szone .tab:before{counter-increment:chap;content:"0" counter(chap);font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.szone .tab:hover{color:var(--text-primary)}
.szone .tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--brand)}
.szone .tab[aria-selected="true"]:before{color:var(--brand)}
.szone .chapter{display:flex;gap:22px;align-items:flex-start;padding:34px 0 26px;max-width:110ch}
.szone .chapter .cnum{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--brand);padding-top:8px}
.szone .chapter h2{font-size:31px;font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0}
.szone .chapter p{font-size:15.5px;color:var(--text-secondary);line-height:1.55;margin:9px 0 0;max-width:76ch}

/* ---------------- figures ---------------- */
.szone .grid{display:grid;gap:18px}
.szone .g2{grid-template-columns:1.55fr 1fr}
.szone .g2e{grid-template-columns:1fr 1fr}
.szone .g1{grid-template-columns:1fr}
@media (max-width:1000px){.szone .g2,.szone .g2e{grid-template-columns:1fr}}
.szone figure.card{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--sz-radius);
  padding:22px 22px 16px;margin:0;box-shadow:var(--sz-shadow);min-width:0;
}
.szone figure.card h3{font-size:19px;margin:0 0 7px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.szone figure.card .howto{font-size:13.5px;color:var(--text-secondary);margin:0 0 6px;max-width:82ch;line-height:1.55}
.szone figure.card .meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0 0 14px;line-height:1.5;letter-spacing:.01em}
.szone .chart{width:100%;min-height:220px}
.szone .ctrl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.szone select.sel{
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-primary);
  border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;max-width:100%;
}
.szone select.sel:focus{outline:2px solid var(--brand);outline-offset:1px}
.szone label.sl{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.szone details.tbl{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.szone details.tbl summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;list-style:none}
.szone details.tbl summary::-webkit-details-marker{display:none}
.szone details.tbl summary:before{content:"▸ ";color:var(--muted)}
.szone details.tbl[open] summary:before{content:"▾ "}
.szone details.tbl .scroll{max-height:290px;overflow:auto;margin-top:9px}

/* ---------------- mobile "not shown here" card ----------------
   The stand-in for a chart that only reads on a wide screen (heat, corr, pca).
   Deliberately short — it names the chart and points at the full table rather
   than pretending to draw anything. */
.szone .sz-card-off{padding:18px 20px}
.szone .sz-card-off h3{margin:0 0 9px}
.szone .sz-off{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin:0}
.szone .sz-off-ic{color:var(--muted);font-size:15px;line-height:1.35;flex:none}
.szone .sz-tablink{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--ink-accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.szone .sz-tablink:hover{color:var(--text-primary)}

/* ---------------- tables ---------------- */
.szone table{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.szone th,.szone td{text-align:right;padding:6px 9px;border-bottom:1px solid var(--grid);white-space:nowrap}
.szone th:first-child,.szone td:first-child{text-align:left;position:sticky;left:0;background:var(--surface-1)}
.szone thead th{
  position:sticky;top:0;background:var(--surface-1);z-index:2;color:var(--muted);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;cursor:pointer;user-select:none;border-bottom:1px solid var(--axis);
}
.szone thead th:first-child{z-index:3}
.szone thead th:hover{color:var(--text-primary)}
.szone thead th .ar{color:var(--brand);font-size:10px}
.szone tbody tr:hover{background:color-mix(in srgb, var(--def) 10%, transparent)}
.szone tbody tr.pinned{background:color-mix(in srgb, var(--def) 16%, transparent)}
.szone tbody tr.unq td{color:var(--muted)}
.szone td.name{font-weight:700;cursor:pointer}
.szone td.name:hover{text-decoration:underline}
.szone .rolebadge{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* ---------------- notes / callouts ---------------- */
.szone .note{
  background:color-mix(in srgb, var(--warning) 9%, var(--surface-1));
  border:1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius:var(--sz-radius);padding:16px 18px;font-size:14px;line-height:1.6;color:var(--text-secondary);
  margin-bottom:18px;
}
.szone .note b{color:var(--text-primary)}
.szone .note.info{
  background:color-mix(in srgb, var(--def) 8%, var(--surface-1));
  border-color:color-mix(in srgb, var(--def) 28%, var(--border));
}
.szone .honesty-block{padding:30px 0 4px}
.szone .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);margin:2px 0 12px}
.szone .legend span{display:inline-flex;align-items:center;gap:5px}
.szone .legend i{width:10px;height:10px;display:inline-block;flex:none}
.szone .pill{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  border:1px solid var(--border);color:var(--text-secondary);letter-spacing:.06em;
}
.szone .pill.hi{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--text-primary)}
.szone .pill.lo{background:color-mix(in srgb,var(--critical) 16%,transparent);border-color:color-mix(in srgb,var(--critical) 45%,transparent);color:var(--text-primary)}
.szone .pill.warn{background:color-mix(in srgb,var(--warning) 20%,transparent);border-color:color-mix(in srgb,var(--warning) 48%,transparent);color:var(--text-primary)}

/* ---------------- compare drawer ----------------
   Lives inside #app, so it is disposed with the view — no orphan panel left
   pinned to the body after routing away. z-index clears the site header (60). */
.szone .drawer{
  position:fixed;top:0;right:0;height:100%;width:min(430px,94vw);background:var(--surface-1);
  border-left:1px solid var(--border);box-shadow:-8px 0 40px rgba(0,0,0,.45);
  transform:translateX(102%);transition:transform .22s ease;z-index:90;overflow-y:auto;padding:22px;
}
.szone .drawer.open{transform:translateX(0)}
/* The drawer OVERLAYS the dashboard; it never pushes it. An earlier version
   shifted .sz-wrap and the KPI strip left by the panel's width on wide screens
   so the two sat side by side — but that reflowed the page and re-fitted every
   chart on each pin, which reads as the graphics "squeezing" in and out. A
   pinned player is a focused, temporary view, so the panel floats over the
   content on its way in and the charts stay exactly where they are. It sits at
   z-index 90, above the sticky filters (40) and the header (60). */
.szone .drawer h2{font-size:22px;margin:0 0 3px;font-weight:900;letter-spacing:-.02em}
.szone .drawer .sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.szone .drawer .close{position:absolute;top:14px;right:16px;border:none;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.szone .drawer .close:hover{color:var(--text-primary)}
.szone .pcard-row{display:flex;gap:10px;align-items:stretch;margin:0 0 15px}
.szone .pcard{
  position:relative;width:138px;flex:none;aspect-ratio:.71;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--pc) 40%,var(--border));
  background:linear-gradient(158deg,color-mix(in srgb,var(--pc) 34%,var(--surface-2)) 0%,var(--surface-2) 58%);
}
.szone .pcard-port{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
/* No photo on file: the initials stand in, on the role-tinted ground the card
   already carries, so the slot never renders as an empty hole. */
.szone .pcard-init{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:900;letter-spacing:.02em;color:color-mix(in srgb,var(--pc) 55%,var(--text-secondary));
}
.szone .pcard:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,12,24,.62) 0%,rgba(7,12,24,.12) 38%,rgba(7,12,24,.55) 74%,rgba(7,12,24,.92) 100%)}
.szone .pcard-rating{position:absolute;left:11px;top:10px;z-index:3;font-size:27px;font-weight:900;line-height:1;letter-spacing:-.035em;color:#EEF3FB;font-variant-numeric:tabular-nums}
.szone .pcard-pos{position:absolute;left:12px;top:41px;z-index:3;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--pc)}
.szone .pcard-crest{position:absolute;right:9px;top:9px;height:21px;width:auto;z-index:3;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
/* The card is a dark island in BOTH themes (it carries a photo under a dark
   scrim), so its name plate keeps literal dark values rather than tokens. */
.szone .pcard-name{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:8px 10px 9px;
  background:linear-gradient(180deg,transparent,#0A1326 42%);
  border-top:1px solid color-mix(in srgb,var(--pc) 55%,transparent);
  font-size:11.5px;font-weight:800;line-height:1.22;text-transform:uppercase;letter-spacing:.02em;color:#EEF3FB;
}
.szone .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.szone .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.szone .pcard-row .statgrid{flex:1;min-width:0;margin:0}
.szone .pcard-row .statgrid div{display:flex;flex-direction:column;justify-content:center}
.szone .pcard-row .statgrid .v{font-size:17px}
.szone .pcard-row .statgrid .l{font-size:9px;letter-spacing:.1em}
.szone .statgrid div{border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.szone .statgrid .v{font-size:19px;font-weight:800;letter-spacing:-.02em}
.szone .statgrid .l{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:3px}
.szone .pinbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:0}
.szone .pinchip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;
  padding:5px 9px 5px 12px;font-size:13px;font-weight:600;background:var(--surface-1);
}
.szone .pinchip button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.szone .pinchip button:hover{color:var(--critical)}


/* ---------------- CHAPTER 00 — player dashboard ----------------
   Everything here is `.szone`-scoped like the rest of this file, and prefixed
   `szp-` on top of that: this chapter mints a lot of small classes (card, chip,
   head, cells) and those are exactly the names the rest of the site already
   uses for other things.

   It adds no colours. The dials, cards and chips all draw on the tokens
   declared at the top of this file, so light mode and the theme flip come for
   free and there is still exactly one place that defines the palette. */

/* The tab badges are a CSS counter, not the `n:` string in CHAPTERS — so a tab
   inserted at the FRONT would silently renumber Standouts to 02 and leave every
   chapter deck on the page contradicting its own tab. Pinning this one at 00
   and skipping the increment keeps 01–06 exactly where the copy says they are. */
.szone .tab[data-t="player"]:before{counter-increment:none;content:"00"}

/* ---- roster strip ----
   Takes over the sticky slot the filter bar vacates on this tab (statszone.js
   hides .filters here), so the way to another player is always one reach away.
   Same z-index: under the site header, over the content. */
.szone .szp-roster{
  position:sticky;top:var(--hdr-h);z-index:40;background:var(--page);
  border-bottom:1px solid var(--border);padding:12px 0 10px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.szone .szp-q{min-width:220px}
.szone .szp-mebtn[hidden]{display:none}
.szone .szp-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;flex:1 1 100%;scrollbar-width:thin}
.szone .szp-fine .szp-chips{flex-wrap:wrap;overflow:visible}
.szone .szp-chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);
  border-radius:999px;padding:4px 12px 4px 4px;font:inherit;font-size:12.5px;font-weight:600;
  white-space:nowrap;transition:.15s;
}
.szone .szp-chip:hover{border-color:var(--brand);color:var(--text-primary)}
.szone .szp-chip[aria-current="true"]{border-color:var(--brand);background:var(--brand-fill);color:#fff}
.szone .szp-chip img,.szone .szp-chip-i{
  width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);font-size:10px;font-weight:800;letter-spacing:.02em;
}
.szone .szp-none{font-size:12.5px;color:var(--muted)}

/* ---- header ---- */
.szone .szp-head{display:flex;gap:20px;align-items:flex-start;padding:26px 0 6px;flex-wrap:wrap}
.szone .szp-id{min-width:0;flex:1 1 260px}
.szone .szp-badge{
  display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--brand-fill);border-radius:999px;
  padding:3px 10px;margin-bottom:9px;
}
.szone .szp-id h2{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1.04;margin:0}
.szone .szp-role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:8px 0 0}
.szone .szp-rating{font-size:16px;color:var(--text-secondary);margin:11px 0 0}
.szone .szp-rating b{font-size:22px;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.szone .szp-vol{font-size:13px;color:var(--text-secondary);margin:7px 0 0;display:flex;gap:9px;
  align-items:center;flex-wrap:wrap}

/* ---- sections ---- */
.szone .szp-sec{padding:26px 0 4px;border-top:1px solid var(--border);margin-top:26px}
.szone .szp-head + .szp-sec{border-top:none;margin-top:8px}
.szone .szp-h{font-size:21px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px}
.szone .szp-h4{font-size:15px;font-weight:800;margin:26px 0 4px}
.szone .szp-sub{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin:0 0 16px;max-width:84ch}
.szone .szp-note-sm{font-size:12.5px;color:var(--muted);line-height:1.55;margin:12px 0 0;max-width:84ch}
.szone .szp-method{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6;
  margin:20px 0 0;max-width:90ch}

/* ---- sub-score dials ----
   Four across on a desktop, two on a phone. The context families keep the same
   footprint as the graded ones rather than being shrunk or tucked away: they
   are part of the picture of the player, they are just not part of his score. */
.szone .szp-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.szone .szp-score{
  display:flex;gap:14px;align-items:center;background:var(--surface-1);
  border:1px solid var(--border);border-radius:12px;padding:15px 16px;
}
.szone .szp-score.ctx{background:transparent;border-style:dashed}
.szone .szp-dial{width:58px;height:58px;flex:none}
.szone .szp-score-t{min-width:0}
.szone .szp-score-t .v{font-size:29px;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.szone .szp-score.ctx .v{color:var(--muted)}
.szone .szp-score-t .l{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--text-secondary);margin-top:7px}
.szone .szp-score-t .s{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}

/* ---- insight cards ----
   Two columns, as long as the findings run — one player's levers reach thirteen.
   The left border is the only signal of polarity,
   and a lever gets --serious rather than --critical on purpose: nothing on this
   page is a failing grade, and the copy says "lever", not "weakness". */
.szone .szp-ins{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.szone .szp-ins-full{grid-column:1 / -1}
.szone .szp-card{
  background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--neutral);
  border-radius:11px;padding:14px 16px;margin:0 0 11px;
}
.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-h{display:flex;gap:9px;align-items:baseline}
.szone .szp-mark{font-size:11px;line-height:1.5;flex:none;color:var(--muted)}
.szone .szp-card.s .szp-mark{color:var(--good)}
.szone .szp-card.f .szp-mark{color:var(--serious)}
.szone .szp-card h4{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.25}
.szone .szp-card-b{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:7px 0 0}
.szone .szp-tip{
  font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin:11px 0 0;
  padding-top:10px;border-top:1px dashed var(--border);
}
.szone .szp-tip span{color:var(--brand);font-weight:700;margin-right:4px}
.szone .szp-empty{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;
  border:1px dashed var(--border);border-radius:11px;padding:15px 16px}
/* What the other column took first, said out loud. Deliberately not a card:
   it is a note ABOUT the column, and giving it the card's surface would make it
   read as one more finding. */
.szone .szp-more{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0;padding:2px 2px 0}

/* ---- match cards ----
   Cards rather than the drawer's table, because a phone reads a stack of eight
   cards far better than a six-column table it has to scroll sideways. */
.szone .szp-matches{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.szone .szp-match{
  position:relative;background:var(--surface-1);border:1px solid var(--border);
  border-radius:12px;padding:14px 15px 12px;
}
.szone .szp-match.nomin{border-style:dashed}
.szone .szp-match header{padding-right:52px}
.szone .szp-match-o{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.szone .szp-gw{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.szone .szp-match-m{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px;letter-spacing:.02em}
.szone .szp-rchip{
  position:absolute;top:12px;right:13px;font-size:17px;font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;border-radius:8px;padding:4px 9px;
  background:var(--mid-neutral);color:var(--text-primary);
}
/* Coloured against HIS OWN season average, not the squad's — this card is about
   whether that was a good day for him, which is a different question. */
.szone .szp-rchip.up{background:color-mix(in srgb,var(--good) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 50%,transparent)}
.szone .szp-rchip.down{background:color-mix(in srgb,var(--critical) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--critical) 45%,transparent)}
.szone .szp-rchip.none{color:var(--muted);font-size:15px}
.szone .szp-cells{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.szone .szp-cells div{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--border);border-radius:8px;padding:5px 9px;min-width:44px;
}
.szone .szp-cells .v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.szone .szp-cells .l{font-family:var(--mono);font-size:8.5px;color:var(--muted);letter-spacing:.14em}
.szone .szp-nodata{font-size:12px;color:var(--muted);margin:11px 0 0;font-style:italic}
.szone .szp-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}

/* ---- locked-lite ---- */
.szone .szp-locked{max-width:74ch}
.szone .szp-prog{height:9px;border-radius:999px;background:var(--mid-neutral);overflow:hidden;margin-top:6px}
.szone .szp-prog-bar{height:100%;background:var(--brand-fill);border-radius:999px}
.szone .szp-prog-l{font-size:12.5px;color:var(--text-secondary);margin:9px 0 0;
  font-variant-numeric:tabular-nums}

/* ---- the way through to CHAPTER 00 ---- */
.szone .szp-open{
  display:block;width:100%;margin-top:4px;cursor:pointer;
  background:var(--brand-fill);color:#fff;border:none;border-radius:10px;
  padding:11px 14px;font:inherit;font-size:14px;font-weight:700;
}
/* In the drawer it now closes a page of numbers rather than standing in for
   one, so it needs air above it — 4px against a table reads as a table row. */
.szone .drawer .szp-open{margin-top:20px}
.szone .szp-open:hover{filter:brightness(1.08)}
.szone .szp-teaser{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin:12px 0 0}
.szone .szp-teaser b{color:var(--text-primary)}

@media (max-width:880px){
  .szone .szp-ins{grid-template-columns:1fr;gap:4px}
  .szone .szp-id h2{font-size:27px}
  .szone .szp-head{gap:15px;padding-top:20px}
  .szone .szp-q{min-width:100%}
  /* the strip is the only way to another player on a phone, so it keeps its
     full width and scrolls rather than wrapping into a wall of faces */
  /* minmax(0,1fr), not 1fr: a plain 1fr floors at min-content, and the longest
     peer line ("central midfielders") is wide enough to pull the two dials out
     of step with each other on a narrow phone. */
  .szone .szp-scores{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .szone .szp-matches{grid-template-columns:1fr}
}


/* ---------------- CHAPTER 07 — metric by metric ----------------
   Adds no colours of its own; the bands, bars and markers all draw on the
   tokens at the top of this file, so light mode and the theme flip are free.
   `szk-` on top of the `.szone` scope for the same reason `szp-` exists: this
   chapter mints card / row / mark / track, and every one of those is a name
   the rest of the site already uses for something else. */

.szone .szk-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0 2px}
.szone .szk-head{display:flex;gap:20px;align-items:flex-start;padding:18px 0 6px;flex-wrap:wrap}

/* Chart (or bar) left, verdict right — the Leetify skill row. Collapses at the
   same 1000px the existing .g2 figures do, and reverses so the card leads on a
   phone: the verdict is the point, the graphic is the evidence. */
.szone .szk-row{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch;margin:0 0 16px}
.szone .szk-vis{min-width:0}
.szone .szk-vis figure.card{height:100%}
@media (max-width:1000px){
  .szone .szk-row{grid-template-columns:1fr;gap:10px}
  .szone .szk-row{display:flex;flex-direction:column-reverse}
}

.szone .szk-card{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--sz-radius);
  padding:16px 18px;display:flex;flex-direction:column;min-width:0;
}
.szone .szk-card.empty{border-style:dashed;background:transparent}
.szone .szk-card h4{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.25}
.szone .szk-band{
  display:inline-block;align-self:flex-start;margin:9px 0 0;font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;border:1px solid var(--border);color:var(--text-secondary);
}
/* A restrained ramp on purpose. "Bottom of the squad" is a position on a
   distribution, not a failure, so nothing here reaches for --critical. */
.szone .szk-band.b0{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent);
  background:color-mix(in srgb,var(--good) 14%,transparent)}
.szone .szk-band.b1{color:var(--good);border-color:color-mix(in srgb,var(--good) 34%,transparent)}
.szone .szk-band.b3{color:var(--serious);border-color:color-mix(in srgb,var(--serious) 34%,transparent)}
.szone .szk-band.b4{color:var(--serious);border-color:color-mix(in srgb,var(--serious) 50%,transparent);
  background:color-mix(in srgb,var(--serious) 12%,transparent)}

.szone .szk-nums{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0}
.szone .szk-nums div{display:flex;flex-direction:column;min-width:0}
.szone .szk-nums .v{font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.szone .szk-nums .l{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:6px;
  text-transform:uppercase;letter-spacing:.12em}
.szone .szk-nums .off .v{color:var(--muted)}
.szone .szk-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:12px 0 0;line-height:1.55}
.szone .szk-why{font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin:11px 0 0;
  padding-top:10px;border-top:1px dashed var(--border)}
.szone .szk-how{font-size:12.5px;color:var(--muted);line-height:1.55;margin:auto 0 0;padding-top:12px}
.szone .szk-none{font-size:13px;color:var(--muted);line-height:1.6;margin:10px 0 0}
.szone .szk-prov{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.65;
  margin:4px 0 0;max-width:92ch}
.szone .szk-prov b{color:var(--text-secondary)}

/* ---- bullet bar ----
   HTML rather than SVG so the track stretches to any column width without
   squashing the markers with it. Every cohort is plotted at once; the picker
   above only decides which one the card beside it argues with. */
.szone .szk-bullet{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--sz-radius);
  padding:26px 22px 16px;height:100%;display:flex;flex-direction:column;justify-content:center;
}
.szone .szk-track{position:relative;height:14px;border-radius:999px;background:var(--mid-neutral);margin:22px 0 0}
.szone .szk-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--brand-fill)}
.szone .szk-you{
  position:absolute;bottom:22px;transform:translateX(-50%);white-space:nowrap;
  font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;
}
.szone .szk-mark{
  position:absolute;top:50%;transform:translate(-50%,-50%);font-size:13px;line-height:1;
  color:var(--text-secondary);cursor:default;
}
.szone .szk-mark.squad{color:var(--text-primary)}
.szone .szk-mark.role{color:var(--att)}
.szone .szk-mark.pro{color:var(--def)}
.szone .szk-mark.twin{color:var(--warning)}
.szone .szk-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  color:var(--muted);margin-top:9px;letter-spacing:.04em}
.szone .szk-legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;
  color:var(--text-secondary)}
.szone .szk-legend span{display:inline-flex;align-items:center;gap:5px}
.szone .szk-legend i{font-style:normal;font-size:12px;line-height:1}
.szone .szk-legend i.you{color:var(--brand-fill)}
.szone .szk-legend i.squad{color:var(--text-primary)}
.szone .szk-legend i.role{color:var(--att)}
.szone .szk-legend i.pro{color:var(--def)}
.szone .szk-legend i.twin{color:var(--warning)}

/* ---- CHAPTER 00's doorway into all of the above ---- */
.szone .szp-ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.szone .szp-ctile{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.szone .szp-ctile.off{background:transparent;border-style:dashed}
.szone .szp-ctile .v{font-size:23px;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.szone .szp-ctile.off .v{color:var(--muted)}
.szone .szp-ctile .l{font-family:var(--mono);font-size:9.5px;color:var(--text-secondary);margin-top:7px;
  text-transform:uppercase;letter-spacing:.11em;line-height:1.35}
.szone .szp-ctile .s{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.szone .szp-ctiles + .szp-open{max-width:320px}

@media (max-width:880px){
  .szone .szk-nums{gap:14px}
  .szone .szk-nums .v{font-size:21px}
  .szone .szk-bullet{padding:22px 16px 14px}
}

/* ---------------- method & sources ---------------- */
.szone .sz-method{border-top:1px solid var(--border);background:var(--surface-2);margin-top:60px;padding:44px 0 40px}
.szone .mono-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);margin-bottom:14px;text-transform:uppercase}
.szone .method{max-width:96ch}
.szone .method p{font-size:12.5px;line-height:1.7;color:var(--text-secondary);margin:0}
.szone .method p b{color:var(--text-primary)}

/* ---------------- misc ---------------- */
.szone .err{background:var(--surface-1);border:1px solid var(--critical);border-radius:var(--sz-radius);padding:20px;margin:20px 0;color:var(--text-primary)}
.szone .sz-loading{color:var(--muted);font-size:13.5px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:60px 0;text-align:center}
.szone :focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.szone *{transition:none !important;animation:none !important}}
@media (max-width:880px){
  .szone .chapter{flex-direction:column;gap:10px}
  .szone .chapter .cnum{padding-top:0}
  .szone .chapter h2{font-size:26px}
  .szone .search{min-width:100%}
  .szone .kpi .v{font-size:27px}
}
@media print{
  .szone .filters,.szone .tabs,.szone .drawer,.szone .ctrl-row,
  .szone .szp-roster,.szone .szk-top{display:none !important}
  .szone figure.card{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  /* Insight cards too, now that a column can run to thirteen of them and a
     printed page break lands in the middle of one. */
  .szone .szp-card{break-inside:avoid;page-break-inside:avoid}
  .szone details.tbl{display:block} .szone details.tbl summary{display:none}
}