/* ============================================================
   Garbedge Time — site.css
   Loaded after main.css. Replaces the icon rail with a top header,
   remaps main.css tokens to the redesign palette, and neutralises the
   per-page amber header bar. Light theme only.
   ============================================================ */

:root, [data-theme="light"], [data-theme="dark"] {
  /* redesign tokens */
  --paper:   #fff;
  --ink:     #111;
  --ink-2:   #5c5c5a;
  --ink-3:   #9a9a96;
  --rule:    #e7e6e2;
  --wash:    #f6f5f2;
  --sc:      #b5533a;
  --rb:      #4f93ba;
  --pm:      #2f5a45;
  --sh:      #c2932c;
  --pos:     #2f5a45;
  --neg:     #b5533a;
  --heat-hi: #4f9e63;
  --heat-lo: #d2603f;
  --display: 'Tanker', sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* main.css tokens, remapped */
  --bg:        var(--paper);
  --bg2:       var(--wash);
  --surface:   var(--paper);
  --surface2:  var(--wash);
  --bg-card:   var(--paper);
  --border:    var(--rule);
  --border2:   #d6d4ce;
  --text:      var(--ink);
  --muted:     var(--ink-2);
  --dim:       var(--ink-3);
  --sc-color:  var(--sc);
  --sc-bg:     rgba(181, 83, 58, .1);
  --rb-color:  var(--rb);
  --rb-bg:     rgba(79, 147, 186, .12);
  --pm-color:  var(--pm);
  --pm-bg:     rgba(47, 90, 69, .1);
  --sh-color:  var(--sh);
  --sh-bg:     rgba(194, 147, 44, .12);
  --font-disp: var(--display);
  --font-cond: var(--body);
  --font-mono: var(--mono);
  color-scheme: light;
}

/* ── Shell: header on top, page scrolls below ── */
.shell { flex-direction: column; }
.main { min-height: 0; display: flex; flex-direction: column; }
.main > * { flex-shrink: 0; }

/* ── Site header ── */
.gt-head { flex-shrink: 0; background: var(--paper); border-bottom: 1px solid var(--ink); }
.gt-head-in { display: flex; align-items: center; gap: 8px 22px; padding: 9px 16px; flex-wrap: wrap; }
.gt-word { font: 400 20px/1 var(--display); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.gt-nav { display: flex; gap: 4px 16px; font-size: 13px; font-weight: 500; }
.gt-nav a { padding-block: 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.gt-nav a:hover { border-color: var(--ink-3); }
.gt-nav a.on { border-color: var(--ink); }
.gt-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.gt-league { display: inline-flex; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; font: 600 10px var(--mono); letter-spacing: .04em; }
.gt-league a { padding: 3px 8px; }
.gt-league a + a { border-left: 1px solid var(--rule); }
.gt-league a.on { background: var(--ink); color: var(--paper); }
.gt-league a:not(.on):hover { background: var(--wash); }
.is-landing .gt-nav { display: none; }

@media (max-width: 640px) {
  .gt-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .gt-nav::-webkit-scrollbar { display: none; }
}

/* ── Footer ── */
.gt-foot { margin-top: auto; border-top: 1px solid var(--rule); }
.gt-foot-in { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px 16px 22px; font-size: 12px; color: var(--ink-2); }
.gt-foot-in a:hover { color: var(--ink); text-decoration: underline; }

/* ── Per-page header bar: was amber, now a plain title row ── */
.page-header { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 16px; }
.page-header .ph-brand,
.page-header .ph-divider,
.page-header .mobile-menu-btn,
.page-header .theme-toggle-header { display: none; }
.page-title { font: 400 18px/1 var(--display); letter-spacing: .02em; text-transform: none; color: var(--ink); opacity: 1; }
.page-meta { color: var(--ink-2); opacity: 1; font-weight: 400; letter-spacing: 0; }
.count-badge { color: var(--ink); background: var(--paper); border: 1px solid var(--ink); }
.page-header .run-btn { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.page-header .run-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* rail and flyout are gone from the markup; keep them hidden if a page adds one */
.rail, .flyout, .flyout-overlay, .mobile-menu-btn { display: none !important; }

/* ── Landing ── */
.lp { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px 24px; }
.lp-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 22px 16px; border-bottom: 1px solid var(--ink); }
.lp-art { width: 92px; height: auto; mix-blend-mode: multiply; display: block; }
.lp-top p { margin: 0 0 10px; font-size: 14px; }
.lp-search { display: flex; gap: 6px; max-width: 480px; }
.lp-search-box { flex: 1; min-width: 0; position: relative; }
.lp-search input { width: 100%; font: 14px var(--body); border: 1.5px solid var(--ink); border-radius: 3px; padding: 7px 10px; color: var(--ink); background: var(--paper); }
.lp-search button { font: 600 13px var(--body); padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); cursor: pointer; }
.lp-results { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; background: var(--paper); }
.lp-results:not(:empty) { border: 1px solid var(--ink); border-radius: 3px; }
.lp-results .search-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--rule); }
.lp-results .search-item:last-child { border-bottom: 0; }
.lp-results .search-item:hover { background: var(--wash); }
.lp-results .search-item-name { font-weight: 600; }
.lp-results .search-item-meta { font: 11px var(--mono); color: var(--ink-2); }
.lp-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-block: 12px; }
.lp-quick a { font-size: 13px; font-weight: 600; border: 1px solid var(--ink); border-radius: 3px; padding: 5px 12px; }
.lp-quick a:hover { background: var(--ink); color: var(--paper); }
.lp-about { font-size: 13px; color: var(--ink-2); margin: 0 0 18px; }
.lp-col { max-width: 640px; margin: 0 auto; }

.lp-nm { margin-bottom: 18px; }
.lp-nm-top { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.lp-nm-top h2 { font: 400 22px/1 var(--display); }
.lp-nm-top span { font-size: 12px; color: var(--ink-2); }
.lp-nm-top a { margin-left: auto; font-size: 12px; font-weight: 600; }
.lp-nm-top a:hover { text-decoration: underline; }
.lp-nm .lp-col { padding-top: 6px; }
.nm-t { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.nm-t th { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); background: var(--c); padding: 7px 10px; text-align: right; white-space: nowrap; }
.nm-t th.ttl { text-align: left; font: 400 17px var(--display); letter-spacing: .02em; text-transform: none; color: #fff; }
.nm-t td { padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-t tbody tr { cursor: pointer; }
.nm-t tbody tr:hover td { background: var(--wash); }
.nm-t td.tm { padding-right: 0; }
.nm-t td.tm span { display: block; text-align: center; font: 700 11px var(--mono); padding: 3px 0; border-radius: 2px; color: #fff; }
.nm-t td.pl a { font-weight: 600; }
.nm-t td.rk small { display: block; margin-top: 1px; font: 11px var(--mono); color: var(--ink-3); }
.nm-t td.r { text-align: right; font-family: var(--mono); }
.nm-t td.adj { font-weight: 700; }
.nm-t td.adj.up, .nm-t td.rk.most { color: var(--pos); }
.nm-t td.adj.dn, .nm-t td.rk.fewest { color: var(--neg); }
.nm-t.sc { --c: var(--sc); } .nm-t.rb { --c: var(--rb); } .nm-t.pm { --c: var(--pm); } .nm-t.sh { --c: var(--sh); }

.lp-panel { margin-top: 18px; border: 1px solid var(--rule); border-radius: 3px; }
.lp-panel h2 { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.lp-panel h2 a { color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.lp-panel h2 a:hover { color: var(--ink); text-decoration: underline; }
.lp-tabs { display: flex; gap: 14px; font-size: 13px; font-weight: 600; padding: 8px 10px 0; }
.lp-tabs button { font: inherit; background: none; border: 0; padding: 0 0 3px; border-bottom: 2px solid transparent; cursor: pointer; color: var(--ink-2); }
.lp-tabs button.on { border-color: var(--ink); color: var(--ink); }
.lp-panel table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.lp-panel td { padding: 4px 10px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.lp-panel tr:last-child td { border-bottom: 0; }
.lp-panel td.l { text-align: left; }
.lp-panel td.n { font-family: var(--mono); }
.lp-panel td.b { font-weight: 700; }
.lp-panel td.dim { color: var(--ink-2); font: 11px var(--mono); }
.lp-panel td.pl { width: 100%; }
.lp-panel td.pl a { font: 600 12px var(--body); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.lp-panel td.pl a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .lp-nm-top a { margin-left: 0; }
  .lp-art { width: 64px; }
}

/* ── Page shell + title row (redesigned pages) ── */
.pg { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px 24px; }
.pg-top { padding-block: 14px 10px; display: flex; gap: 8px 20px; align-items: end; flex-wrap: wrap; }
.pg-top h1 { font: 400 26px/1 var(--display); }
.pg-sub { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.pg-stamp { margin-left: auto; font: 11px var(--mono); color: var(--ink-2); text-align: right; }
.pg-badge { display: inline-block; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 2px; padding: 1px 6px; vertical-align: 3px; margin-left: 8px; }

/* type chip (dot + label) */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--mono); white-space: nowrap; color: var(--ink); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.chip.sc { --c: var(--sc); } .chip.rb { --c: var(--rb); } .chip.pm { --c: var(--pm); } .chip.sh { --c: var(--sh); }
button.chip { background: none; border: 0; padding: 0; cursor: pointer; }
button.chip:hover, button.chip.on { text-decoration: underline; text-underline-offset: 2px; }

/* ── Slate ── */
.sl-dim { color: var(--ink-2); }
.sl-notes { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; padding: 6px 0 10px; color: var(--ink-2); }
.sl-notes b { color: var(--ink); font-weight: 600; }
.sl-dates, .sl-games { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sl-dates { margin-bottom: 6px; }
.sl-date, .sl-game { flex: none; border: 1px solid var(--rule); border-radius: 3px; padding: 5px 9px; font: 12px/1.35 var(--mono); background: var(--paper); cursor: pointer; color: var(--ink); text-align: left; }
.sl-date { font-size: 11px; padding: 3px 8px; }
.sl-game small { display: block; color: var(--ink-2); font-size: 10px; }
.sl-date.on, .sl-game.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sl-date:hover, .sl-game:hover { border-color: var(--ink-3); }
.sl-filters { display: flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; padding-block: 8px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.sl-seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.sl-seg button { font: 500 12px/1 var(--body); padding: 6px 10px; background: var(--paper); color: var(--ink); border: 0; border-right: 1px solid var(--rule); cursor: pointer; }
.sl-seg button:last-child { border-right: 0; }
.sl-seg button.on { background: var(--ink); color: var(--paper); }
.sl-reset { font: 500 12px var(--body); background: none; border: 1px solid var(--ink); border-radius: 3px; padding: 4px 8px; cursor: pointer; color: var(--ink); }
.sl-search { margin-left: auto; font: 12px var(--body); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 8px; width: 180px; max-width: 100%; color: var(--ink); background: var(--paper); }
.sl-search:focus { border-color: var(--ink); outline: none; }
.sl-wrap { overflow-x: auto; }
.sl-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); padding-top: 10px; }
.sl-legend .up { color: var(--pos); } .sl-legend .dn { color: var(--neg); }
.sl-empty { padding: 40px 0; text-align: center; }

table.sl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.sl.proj-only { max-width: 760px; }
.sl th { font-family: var(--mono); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.sl thead tr.grp th { font-size: 11px; letter-spacing: .06em; color: var(--ink); text-align: center; padding: 8px 4px 2px; border-left: 1px solid var(--rule); }
.sl thead tr.grp th.blank { border-left: 0; }
.sl thead tr.sub th { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; text-align: right; padding: 8px 8px 5px; border-bottom: 1px solid var(--ink); cursor: pointer; user-select: none; }
.sl thead tr.sub th.nosort { cursor: default; }
.sl thead tr.sub th:not(.nosort):hover, .sl th.sorted { color: var(--ink); }
.sl th.sorted::after { content: "↓"; margin-left: 2px; }
.sl td { padding: 4px 7px; border-bottom: 1px solid var(--rule); text-align: right; font-family: var(--mono); white-space: nowrap; }
.sl .gs { border-left: 1px solid var(--rule); }
.sl th.l, .sl td.l, .sl thead tr.sub th.l { text-align: left; }
.sl th:first-child, .sl td:first-child { padding-left: 0; }
.sl td.pl { font-family: var(--body); }
.sl td.pl .pn { font: 600 13px var(--body); color: var(--ink); }
.sl td.pl .pn:hover { text-decoration: underline; }
.sl td.pl small { display: block; font: 10px var(--mono); color: var(--ink-3); margin-top: 1px; }
.sl td.mn { padding-block: 2px; }
.sl .min-in { width: 3.4em; font: 12px var(--mono); text-align: right; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 2px; padding: 2px 3px; -moz-appearance: textfield; }
.sl .min-in::-webkit-inner-spin-button, .sl .min-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sl .min-in:hover { border-color: var(--rule); }
.sl .min-in:focus { border-color: var(--ink); outline: none; background: var(--paper); }
.sl .min-in.edited { border-color: var(--sh); background: rgba(194, 147, 44, .1); font-weight: 700; }
.sl td.st { color: var(--ink); }
.sl td.pra { font-weight: 700; }
.sl td.adj { font-size: 11px; padding-left: 2px; color: var(--ink-3); cursor: help; }
.sl td.adj.up { color: var(--pos); } .sl td.adj.dn { color: var(--neg); }
.sl td.adj.big { font-weight: 700; }
.sl td.ty .chip { font-size: 10px; gap: 3px; }
.sl td.ty .chip::before { width: 6px; height: 6px; }
.sl td.ty .rk { color: var(--ink-3); margin-left: 3px; }
.sl td.ty .rk.soft { color: var(--pos); font-weight: 700; }
.sl td.ty .rk.tough { color: var(--neg); }
.sl tbody tr:not(.xp):hover td { background: var(--wash); }
.sl tr.empty td { text-align: left; color: var(--ink-2); padding: 16px 0; font-family: var(--body); }
.sl tr.xp > td { background: var(--wash); padding: 8px 10px 10px; text-align: left; white-space: normal; }
.xp-body { display: grid; gap: 6px; font: 12px var(--body); }
.xp-body table { border-collapse: collapse; font: 11px var(--mono); max-width: 520px; }
.xp-body th, .xp-body td { padding: 3px 8px; border-bottom: 1px solid var(--rule); text-align: right; background: none; }
.xp-body .l { text-align: left; }
.xp-body tr.self td { font-weight: 700; }
.xp-body .up { color: var(--pos); } .xp-body .dn { color: var(--neg); }

@media (max-width: 640px) {
  .pg-stamp { margin-left: 0; text-align: left; }
  .sl-search { margin-left: 0; width: 100%; }
}
.xp-scroll { max-height: 240px; overflow-y: auto; max-width: 540px; }

/* ── Player Types ── */
.ty-head { display: flex; gap: 6px 18px; align-items: baseline; flex-wrap: wrap; padding-block: 14px 10px; }
.ty-head h1 { font: 400 clamp(26px, 4vw, 36px)/1 var(--display); }
.ty-code { font: 13px var(--mono); color: var(--ink-2); }
.ty-pick { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; padding-block: 8px; border-block: 1px solid var(--ink); }
.ty-groups { display: flex; gap: 4px; flex-wrap: wrap; }
.ty-groups button { font: 500 11px var(--mono); padding: 4px 7px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); cursor: pointer; }
.ty-groups button:hover { border-color: var(--ink-3); }
.ty-groups button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ty-groups button small { color: var(--ink-3); margin-right: 3px; font-size: 11px; }
.ty-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding-top: 16px; align-items: start; }
.ty-radar svg { width: 100%; height: auto; display: block; overflow: visible; }
.ty-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11px; color: var(--ink-2); justify-content: center; margin-top: 4px; }
.ty-lg i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--c); vertical-align: 3px; margin-right: 5px; }
.ty-lg .dim { color: var(--ink-3); }
.ty-lg button { font: 500 11px var(--body); border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); padding: 1px 7px; cursor: pointer; }
.ty-lg button:hover { border-color: var(--ink); }
.ty-desc { font-size: 14px; max-width: 46em; margin: 0 0 14px; }
.ty-sec h2 { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.ty-sec h2 .n { color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.ty-sec .note { font-size: 11px; color: var(--ink-2); margin: 5px 0 0; }
.ty-tag { font: 500 9px var(--mono); border: 1px solid var(--ink); border-radius: 2px; padding: 0 3px; margin-left: 5px; vertical-align: 1px; }
.ty-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ty-tbl th { font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); text-align: right; padding: 6px 7px 4px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ty-tbl td { font-family: var(--mono); text-align: right; padding: 3px 7px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ty-tbl th:first-child, .ty-tbl td:first-child { text-align: left; padding-left: 0; }
.ty-tbl .l { text-align: left; }
.ty-tbl td.nm { font-family: var(--body); }
.ty-tbl tr.cur td { background: var(--wash); font-weight: 700; }
.ty-tbl tr.click { cursor: pointer; }
.ty-tbl tr.click:hover td { background: var(--wash); }
.ty-tbl td.hi { font-weight: 700; }
.ty-tbl td.up { color: var(--pos); } .ty-tbl td.dn { color: var(--neg); }
.ty-tbl td.soft { color: var(--pos); font-weight: 700; } .ty-tbl td.tough { color: var(--neg); }
.ty-tbl td.dim { color: var(--ink-3); }
.ty-tbl button.pk { font: 600 12px var(--body); background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; }
.ty-tbl button.pk:hover { text-decoration: underline; }
.ty-tbl button.pk.on { text-decoration: underline; text-decoration-thickness: 2px; }
.ty-tbl tr.sel td { background: var(--wash); }
.ty-tbl tr.plrow td { font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.ty-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-top: 24px; align-items: start; }
.ty-stack { display: grid; gap: 24px; }
.ty-scroll { max-height: 440px; overflow: auto; }
.ty-scroll thead th { position: sticky; top: 0; background: var(--paper); }
.ty-tw { overflow-x: auto; }
@media (max-width: 860px) { .ty-top, .ty-bottom { grid-template-columns: minmax(0, 1fr); } .ty-radar { max-width: 320px; margin-inline: auto; } }

/* ── Player page ── */
.pp-crumb { font-size: 12px; color: var(--ink-2); padding-top: 12px; }
.pp-crumb a:hover { text-decoration: underline; }
.pp-head { display: flex; gap: 8px 24px; align-items: end; justify-content: space-between; flex-wrap: wrap; padding-block: 4px 10px; border-bottom: 1px solid var(--ink); }
.pp-head h1 { font: 400 clamp(28px, 4vw, 40px)/1 var(--display); }
.pp-head .m { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.pp-head .m b { color: var(--ink); font-weight: 600; }
.pp-head .m a { text-decoration: underline; }
.pp-head .pp-inj { color: var(--neg); }
.pp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0 2px; font-size: 12px; color: var(--ink-2); }
.pp-pick select { font: 500 12px var(--mono); padding: 5px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); }
.pp-pick .n { font: 11px var(--mono); }
.pp-h2h .ty-tbl { margin-top: 6px; max-width: 720px; }
.pp-h2h .ty-tbl + .ty-tbl { margin-top: 14px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
a.chip:hover { text-decoration: underline; text-underline-offset: 2px; }
.pp-proj { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.pj { padding: 10px 12px 10px 0; border-right: 1px solid var(--rule); min-width: 0; }
.pj + .pj { padding-left: 12px; }
.pj:last-child { border-right: 0; }
.pj .k { font: 11px var(--mono); letter-spacing: .06em; color: var(--ink-2); }
.pj .v { font: 400 28px/1.05 var(--display); }
.pj .r { font: 11px var(--mono); color: var(--ink-2); }
.pj .pp-q1 { margin-top: 8px; }
.range { position: relative; height: 5px; margin: 5px 0 4px; background: var(--wash); border-radius: 3px; }
.range i { position: absolute; top: 0; bottom: 0; background: var(--rule); border-radius: 3px; }
.range b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; padding-top: 16px; align-items: start; }
.pp-grid.solo { grid-template-columns: minmax(0, 1fr); }
.pp-chart-card { border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px 12px; min-width: 0; }
.pp-stats, .pp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-tabs { margin: 8px 0 6px; }
.pp-stats button, .pp-tabs button { font: 500 11px var(--mono); padding: 3px 7px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); cursor: pointer; }
.pp-stats button:hover, .pp-tabs button:hover { border-color: var(--ink-3); }
.pp-stats button.on, .pp-tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#ppChart { width: 100%; height: auto; display: block; margin: 8px 0 6px; }
.pp-ctrl2 { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pp-ctrl2 .sl-seg button { font-size: 11px; padding: 5px 8px; }
.pp-thr { display: flex; align-items: center; gap: 6px; font: 12px var(--mono); }
.pp-thr button { font: 700 14px/1 var(--mono); width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); cursor: pointer; }
.pp-thr input { width: 64px; font: 700 13px var(--mono); text-align: center; border: 1px solid var(--rule); border-radius: 3px; padding: 4px; color: var(--ink); background: var(--paper); }
.pp-thr .under { color: var(--neg); font-weight: 700; }
.pp-thr .over { color: var(--pos); font-weight: 700; }
.pp-reset { font: 500 11px var(--body); background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.pp-side { display: grid; gap: 20px; min-width: 0; }
.pp-sec { margin-top: 22px; }
.steps { display: grid; font-size: 13px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) 60px 56px; gap: 8px; padding: 4px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.step:first-child { border-top: 0; }
.step .v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.step .d { text-align: right; font: 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.step .d.up { color: var(--pos); } .step .d.dn { color: var(--neg); }
.step.total { border-top: 1.5px solid var(--ink); font-weight: 700; }
.step .why { display: block; font-size: 11px; color: var(--ink-2); font-weight: 400; }
.pp-log td.h { --t: 0; background: color-mix(in srgb, var(--heat-hi) calc(var(--t) * 100%), transparent); }
.pp-log td.c { --t: 0; background: color-mix(in srgb, var(--heat-lo) calc(var(--t) * 100%), transparent); }
.pp-log td.win { color: var(--pos); } .pp-log td.loss { color: var(--neg); }
.tr-grid { max-width: 820px; }
.tr-grid td.rk { --t: 0; text-align: center; background: color-mix(in srgb, var(--hc) calc(var(--t) * 100%), transparent); }
.tr-grid td.rk.g { --hc: var(--heat-hi); } .tr-grid td.rk.r { --hc: var(--heat-lo); }
.tr-grid th { text-align: center; cursor: pointer; }
.tr-grid th:first-child { text-align: left; }
.tr-grid th.sorted { color: var(--ink); } .tr-grid th.sorted::after { content: "↑"; }
.tr-grid th .chip { font-size: 10px; text-transform: none; letter-spacing: 0; }
.tr-grid tr.opp td { font-weight: 700; box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink); }
.tr-grid td.avg { font-weight: 700; text-align: center; }
@media (max-width: 860px) { .pp-grid { grid-template-columns: minmax(0, 1fr); } .pp-proj { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pj:nth-child(3) { border-right: 0; } .pj:nth-child(4) { padding-left: 0; } .pj:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .pp-proj { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj:nth-child(n) { border-right: 1px solid var(--rule); padding-left: 12px; border-top: 0; } .pj:nth-child(odd) { padding-left: 0; } .pj:nth-child(even) { border-right: 0; } .pj:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.pp-grid.solo .pp-chart-card { max-width: 820px; }
.sl-seg button.active { background: var(--ink); color: var(--paper); }

/* Player Types: team drill-down */
.ty-tbl tr.dr > td { background: var(--wash); padding: 8px 10px 10px; text-align: left; white-space: normal; }
.dr-body { display: grid; gap: 6px; font-family: var(--body); }
.dr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-head .pp-tabs { margin: 0; }
.dr-x { margin-left: auto; font: 16px/1 var(--body); background: none; border: 0; cursor: pointer; color: var(--ink-2); }
.dr-sum { font-size: 12px; color: var(--ink-2); }
.dr-sum .up { color: var(--pos); } .dr-sum .dn { color: var(--neg); }
.dr-scroll { max-height: 260px; overflow-y: auto; }
.dr-scroll table { background: var(--paper); }
.dr-scroll tr.self td { font-weight: 700; }