/* ═══════════════════════════════════════════════════════════════
   2.0 STUDY + STATS (direction C "Coach", user 2026-10-02)
   Stats (#pf-stats, js/pfstats.js), Study (#pf-report, js/pfreport.js) and
   Hands played (#pf-hands, PF.renderHands). Loaded after index.html's own
   styles, on the frame's tokens (--c-*, .cx-*): graphite grounds, the orange
   accent, teal for the rating, Manrope with DM Mono numbers, and the real
   bet-size colours wherever an action is drawn.
   ═══════════════════════════════════════════════════════════════ */

/* ---- shared ------------------------------------------------------------------ */
.cs-seg { display:inline-flex; align-items:center; padding:3px; gap:2px; border-radius:13px; background:var(--c-s1); border:1px solid var(--c-line); flex:none; }
.cs-seg button { height:26px; padding:0 11px; border:0; border-radius:var(--c-rs); background:transparent; color:var(--c-dim);
  font:600 12px 'Manrope', sans-serif; white-space:nowrap; cursor:pointer; }
.cs-seg button:hover { color:var(--c-tx); }
.cs-seg button.on { background:color-mix(in srgb, var(--c-acc) 20%, transparent); color:var(--c-acc); }   /* selected reads orange (user, 2026-10-08) */
.cs-seg button:disabled { opacity:.35; cursor:default; }
.cs-seg.sm { padding:2px; border-radius:11px; }
.cs-seg.sm button { height:22px; padding:0 9px; font-size:11.5px; border-radius:8px; }
.cs-seg button:focus-visible, .cs-chip:focus-visible, .cs-more > summary:focus-visible { outline:2px solid var(--c-acc); outline-offset:2px; }
.cs-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; color:var(--c-dim); font:600 12px 'Manrope', sans-serif; white-space:nowrap; cursor:pointer; }
.cs-chip:hover { color:var(--c-tx); border-color:#3a3a3a; }
.cs-chip.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
.cs-chip .cx-num { font-size:11px; color:var(--c-faint); }
.cs-chip.on .cx-num { color:inherit; opacity:.8; }
/* a menu behind a button: the rest of a page's controls, one click away */
.cs-more { position:relative; flex:none; }
.cs-more > summary { list-style:none; cursor:pointer; }
.cs-more > summary::-webkit-details-marker { display:none; }
.cs-more[open] > summary { color:var(--c-tx); background:var(--c-s2); }
.cs-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:80; min-width:210px; display:flex; flex-direction:column; gap:1px;
  padding:6px; border-radius:12px; background:var(--c-s2); border:1px solid #333; box-shadow:0 14px 36px rgba(0,0,0,.55); }
.cs-menu > button, .cs-menu .cs-mi { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 10px; border:0; border-radius:8px;
  background:transparent; color:var(--c-tx); font:600 12.5px 'Manrope', sans-serif; text-align:left; cursor:pointer; white-space:nowrap; }
.cs-menu > button:hover, .cs-menu .cs-mi:hover { background:var(--c-s3); }
.cs-menu > button.danger { color:var(--c-bad); }
.cs-menu > button:disabled { opacity:.4; cursor:default; }
.cs-menu .cs-msep { height:1px; background:var(--c-line); margin:4px 2px; }
.cs-menu .cs-mcap { font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--c-faint); font-weight:700; padding:6px 10px 2px; }
.cs-menu .cs-mrow { display:flex; align-items:center; gap:6px; padding:4px 6px; }
.cs-menu input[type="checkbox"] { accent-color:var(--c-acc); }

/* ════════════════════════════════════════════════════════════════
   STATS
   ════════════════════════════════════════════════════════════════ */
#pf-stats { background:var(--bg); color:var(--c-tx); padding:0 0 48px; font-family:'Manrope', sans-serif; }
#pf-stats .pfs-top { width:100%; max-width:1240px; margin:0 auto; padding:24px 32px 16px; box-sizing:border-box; gap:12px; flex-wrap:nowrap; }
#pf-stats .pfs-top > .back-btn { flex:none; }
.cs-head { display:flex; align-items:center; gap:10px; min-width:0; }
.cs-head .cx-h1, #pf-stats .cs-head h1.cx-h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--c-tx); text-transform:none; }
#pf-stats .pfs-top .pfs-note { font-size:12px; color:var(--c-acc); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-acts { margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
#pf-stats .pfs-app { width:100%; max-width:1240px; margin:0 auto; padding:0 32px; box-sizing:border-box; border-top:0; gap:24px; align-items:flex-start; }
#pf-stats .pfs-main { padding:0 0 32px; }
/* the overview: cards, no page list */
#pf-stats.cs-ov .pfs-side { display:none; }
/* the full tables: the page list on the left */
#pf-stats .pfs-side { width:180px; position:sticky; top:12px; background:transparent; border:0; padding:4px 0; }
#pf-stats .pfs-item { text-transform:none; letter-spacing:0; font:600 13px 'Manrope', sans-serif; color:var(--c-dim); border-left:0; border-radius:10px;
  padding:8px 12px; margin-bottom:2px; }
#pf-stats .pfs-item:hover { color:var(--c-tx); background:var(--c-s1); }
#pf-stats .pfs-item.active { color:var(--c-tx); background:var(--c-s2); }
#pf-stats .pfs-cnt { font-family:var(--c-mono); font-size:11px; color:var(--c-faint); }
#pf-stats .pfs-div { border-top-color:var(--c-line); margin:8px 12px; }
#pf-stats .pfs-sidenote { font-size:11px; color:var(--c-faint); padding:8px 12px; }

/* the rating and the lines */
.cs-top2 { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:16px; align-items:start; }
.cs-hero { padding:24px; display:flex; flex-direction:column; gap:14px; }
.cs-hero-top { display:flex; align-items:center; gap:14px; min-height:60px; }
.cs-badge { display:flex; flex:none; }
.cs-badge svg { display:block; }
.cs-elo { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cs-elo > b { font-size:44px; font-weight:600; line-height:1; letter-spacing:-.01em; }
.cs-elo > b .pf-prov { font-size:22px; font-style:normal; color:var(--c-faint); margin-left:2px; }
.cs-elo > span { font-size:13px; }
.cs-hero-spark { margin-left:auto; flex:none; }
.cs-hero-spark svg { display:block; }
.cs-tier { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.cs-tier > b { font-weight:700; }
.cs-tierbar { flex:1; max-width:260px; height:6px; border-radius:3px; background:var(--c-s3); overflow:hidden; }
.cs-tierbar i { display:block; height:100%; border-radius:3px; min-width:3px; }
.cs-tier .cx-num { font-size:11.5px; }
#pf-stats .pfs-grades { margin:0; }
#pf-stats .pfs-gbar { height:10px; border-radius:5px; background:var(--c-s3); }
#pf-stats .pfs-gbar i.best, #pf-stats .pfs-glegend .best b { background:#3ccf7c; }
#pf-stats .pfs-gbar i.good, #pf-stats .pfs-glegend .good b { background:#62dccf; }
#pf-stats .pfs-gbar i.size, #pf-stats .pfs-glegend .size b { background:#f2b13a; }
#pf-stats .pfs-gbar i.action, #pf-stats .pfs-glegend .action b { background:#f06a5a; }
#pf-stats .pfs-glegend { gap:14px; margin-top:10px; font-size:12px; color:var(--c-dim); }
#pf-stats .pfs-glegend b { width:9px; height:9px; border-radius:3px; }
#pf-stats .pfs-glegend em { color:var(--c-tx); font-family:var(--c-mono); font-weight:500; }
#pf-stats .pfs-glegend u { font-family:var(--c-mono); color:var(--c-faint); font-size:11px; }
.cs-splits { display:flex; flex-wrap:wrap; gap:6px; }
.cs-splits .pf-rk-cell { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:7px; background:var(--c-s2);
  border:1px solid var(--c-line); font-size:11.5px; color:var(--c-dim); }
.cs-splits .pf-rk-cell b { font:500 12px var(--c-mono); color:var(--c-tx); }
.cs-splits .pf-rk-cell.worst b { color:var(--c-bad); }
.cs-splits .pf-rk-cell.gap { margin-left:8px; }
.cs-hero-f { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cs-hero-f .cx-faint { font-size:11.5px; }
.cs-hero-n { margin-left:auto; }
.cs-lines { padding-top:6px; padding-bottom:6px; }
.cs-lines > .cx-line:first-child { border-top:0; }
.cs-lines > .cs-lines-cap:first-child { margin-top:10px; }
.cs-lines > .cx-empty { padding:10px 0; }
.cs-lines-cap { display:flex; align-items:center; justify-content:space-between; margin:14px 0 0; padding-bottom:4px; }
.cs-line-tag { font-size:11px; color:var(--c-faint); width:52px; text-align:right; flex:none; }
.cs-line .cx-btn { flex:none; }

/* the spot families */
.cs-sech { display:flex; align-items:center; gap:8px; margin:28px 0 12px; }
.cs-sech h3 { margin:0; flex:1; font-size:16px; font-weight:700; color:var(--c-tx); }
.cs-fam { padding:18px; display:flex; flex-direction:column; gap:10px; }
.cs-fam-h { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
.cs-fam-h b { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-fam-n { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.cs-fam-n > span:first-child { font-size:26px; font-weight:600; line-height:1; }
.cs-fam-n > span + span { font-size:12px; }
.cs-fam-n > span.up { color:var(--c-good); }
.cs-fam-lk { flex:none; font:600 11px 'Manrope', sans-serif; color:var(--c-bad); }
.cs-fam-lk.none { color:var(--c-faint); font-weight:500; }
#pf-stats .cs-fam-g { height:6px; border-radius:3px; display:flex; overflow:hidden; }
.cs-fam-st { display:flex; gap:12px; font-size:11.5px; color:var(--c-faint); min-height:16px; }
.cs-fam-st b { font-weight:500; color:var(--c-tx); margin-left:2px; }
.cs-sech-n { flex:none; font-size:11.5px; }
.cs-chart { padding:14px 18px 10px; }
/* the Rating view: the leaderboard beside the rating (full width for the owner's view), the ranks in a card */
.cs-board { padding:20px 22px; display:flex; flex-direction:column; min-width:0; }
.cs-board .cx-card-h { margin-bottom:8px; }
.cs-board .cx-card-h h3 { margin:0; }
#pf-stats .cs-board .pf-board-rows { max-height:330px; overflow:auto; }
#pf-stats .cs-board .pf-board-tbl { width:100%; }
#pf-stats .cs-board .pf-board-msg { font-size:12.5px; color:var(--c-faint); }
.cs-top2 > .cs-board.pf-board-own { grid-column:1 / -1; }
#pf-stats .cs-board.pf-board-own .pf-board-rows { max-height:60vh; }
.cs-ranks { padding:4px 18px 18px; }
.cs-chart .pf-rk-chartwrap { border:0; background:none; padding:0; margin:0; }
.cs-empty { padding:24px; }
#pf-stats .pf-rk-wins { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
#pf-stats .pf-rk-win { height:24px; padding:0 9px; border-radius:8px; border:0; background:transparent; color:var(--c-dim); font:600 11.5px 'Manrope', sans-serif; cursor:pointer; }
#pf-stats .pf-rk-win:hover { color:var(--c-tx); }
#pf-stats .pf-rk-win.on { background:var(--c-s3); color:var(--c-tx); }
#pf-stats .pf-rk-chart { color:var(--c-tx); }
/* the folds: ranks by spot, how the rating works, sessions, baselines */
#pf-stats .pfs-foldbox { margin:16px 0 0; padding:2px 18px; border-radius:var(--c-r); background:var(--c-s1); border:1px solid var(--c-line); }
#pf-stats .pfs-foldbox[open] { padding-bottom:18px; }
#pf-stats .pfs-foldbox > summary.pfs-sect { margin:0; padding:14px 0; font:700 14px 'Manrope', sans-serif; letter-spacing:0; text-transform:none; color:var(--c-tx); }
#pf-stats .pfs-foldbox > summary.pfs-sect::before { color:var(--c-faint); }
#pf-stats .pfs-foldbox > summary .pfs-no { font-family:var(--c-mono); font-weight:500; font-size:12px; color:var(--c-faint); }
#pf-stats .pf-rkc { border-color:var(--c-line); border-radius:12px; }
#pf-stats .pf-rk-sect { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--c-dim); font-weight:700; margin:16px 0 8px; }
#pf-stats .pf-rk-tbl, #pf-stats .pfs-sess { font-family:'Manrope', sans-serif; }
#pf-stats #pfs-trend { background:var(--c-s2); border-color:var(--c-line); border-radius:12px; }
#pf-stats .pfs-need { color:var(--c-faint); font-size:12.5px; }
#pf-stats #pfs-rescore:empty { display:none; }
#pf-stats #pfs-rescore { margin-bottom:12px; font-size:12px; color:var(--c-dim); }

/* the full tables: role pages and the tendencies */
#pf-stats .pfs-pgtitle { color:var(--c-tx); font-size:22px; font-weight:700; letter-spacing:-.01em; margin:2px 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* the leak colours, on the C tokens: the cell ground above would otherwise paint over them */
#pf-stats .pfs-leakchip { border-radius:999px; }
#pf-stats .pfs-panel { border-radius:12px; overflow:hidden; background:var(--c-s1); border:1px solid var(--c-line); max-width:980px; }
#pf-stats .pfs-ss .mxhead { background:var(--c-s2); color:var(--c-dim); font-family:'Manrope', sans-serif; }
#pf-stats .pfs-ss .ssname { background:var(--c-s2); color:var(--c-dim); font-family:'Manrope', sans-serif; }
#pf-stats .pfs-ss .ssnum { font-family:var(--c-mono); background:#121212; }
#pf-stats .pfs-ss td { border-color:#242424; }
#pf-stats .pfs-ss tr.ovtotal td, #pf-stats .pfs-ss tr.ovtotal .ssnum { background:color-mix(in srgb, var(--c-acc) 10%, #161616); border-top:1px solid var(--c-acc); border-bottom:1px solid var(--c-acc); }
#pf-stats .pfs-ss tr.ovtotal .ssname { color:var(--c-acc); }
.cs-tbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:10px 12px; border-top:1px solid var(--c-line); }
.cs-tbar-g { display:inline-flex; align-items:center; gap:8px; }
.cs-tbar-l { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--c-faint); font-weight:700; }
#pf-stats .pfs-sect { font-size:10.5px; letter-spacing:.09em; color:var(--c-dim); font-weight:700; }

@media (max-width: 1100px) {
  .cs-top2 { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #pf-stats .pfs-top, #pf-stats .pfs-app { padding-left:16px; padding-right:16px; }
  #pf-stats .pfs-top { flex-wrap:wrap; }
  #pf-stats .pfs-app { flex-direction:column; }
  #pf-stats .pfs-side { position:static; width:100%; display:flex; flex-wrap:wrap; gap:2px; }
  .cs-hero-spark { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   STUDY (Viewer · Reports · Heatmaps · Tree)
   ════════════════════════════════════════════════════════════════ */
#pf-report { background:var(--bg); color:var(--c-tx); padding:0; font-family:'Manrope', sans-serif; }
body.pf-popout #pf-report { padding-top:0; }
#pf-report .cs-stop { flex:none; display:flex; align-items:center; gap:12px; flex-wrap:nowrap; margin:0; padding:16px 24px 12px; }
#pf-report .cs-stop > .back-btn { flex:none; }
#pf-report .cs-head h1.cx-h1 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--c-tx); text-transform:none; }
#pf-report .cs-head { gap:14px; flex:none; }
#pf-report .pfr-note { flex:1; min-width:0; margin:0; font-size:12px; color:var(--c-acc); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pf-report .cs-acts { gap:8px; }
/* the spot picker: one button (the header's, or the top of the Viewer's
   column) and its popout - a search, Train's pot / side / depth filters and
   every seat of every spot, grouped by matchup (pfreport.js spotPopHtml) */
.cs-spotwrap { position:relative; flex:none; min-width:0; }
.cs-spotbtn { display:flex; align-items:center; gap:8px; height:34px; max-width:100%; padding:0 12px 0 14px; box-sizing:border-box; border-radius:999px;
  background:var(--c-s1); border:1px solid var(--c-line); color:var(--c-tx); font:600 13px 'Manrope', sans-serif; cursor:pointer; }
.cs-spotbtn > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-spotbtn svg { flex:none; margin-left:auto; color:var(--c-dim); }
.cs-spotbtn:hover { border-color:#3a3a3a; }
.cs-spotbtn.on { border-color:var(--c-acc); }
.cs-spotbtn:focus-visible { outline:2px solid var(--c-acc); outline-offset:2px; }
.cs-spotpop { position:absolute; top:calc(100% + 8px); left:0; z-index:95; width:440px; max-height:min(540px, 72vh); box-sizing:border-box; padding:12px;
  display:flex; flex-direction:column; gap:10px; background:var(--c-s2); border:1px solid #333; border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.55); }
.cs-spotpop[hidden] { display:none !important; }
.cs-sphead { flex:none; display:flex; flex-wrap:wrap; gap:8px; }
.cs-sphead .cx-search { width:100%; height:34px; }
.cs-sphead .cx-seg button { height:24px; padding:0 10px; font-size:11.5px; }
.cs-splist { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--c-line); padding-top:4px; }
/* the spot's matchup heading stands out from its rows (user, 2026-10-08) */
.cs-spgrp { margin-top:6px; padding:7px 10px; font:800 13px 'Manrope', sans-serif; letter-spacing:.02em; color:var(--c-acc); background:var(--c-s2); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.cs-spgrp:first-child { margin-top:0; }
.cs-sprow { flex:none; display:flex; align-items:center; gap:12px; height:32px; padding:0 10px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--c-tx); font:600 12.5px 'Manrope', sans-serif; text-align:left; cursor:pointer; }
.cs-sprow:hover, .cs-sprow.hi { background:var(--c-s3); }
.cs-sprow.hi { border-color:#444; }
.cs-sprow.on { background:color-mix(in srgb, var(--c-acc) 10%, transparent); border-color:color-mix(in srgb, var(--c-acc) 40%, transparent); color:var(--c-acc); }
.cs-sprow:disabled { opacity:.4; cursor:default; background:transparent; }
.cs-sprow:focus-visible { outline:2px solid var(--c-acc); outline-offset:-2px; }
.cs-spd { width:44px; font-size:12px; }
.cs-spf { color:var(--c-dim); }
.cs-sprow.on .cs-spf { color:inherit; }
.cs-spwhy { margin-left:auto; font-size:11px; color:var(--c-faint); }
.cs-spnone { padding:18px 10px; font-size:12px; color:var(--c-faint); }
#pf-report .pfr-body { border-top:0; padding:0 24px 14px; }
#pf-report .pfr-main { padding:0; }
/* the front page: Train's filters and Train's table (cx-tr-filters, cx-t),
   the spots grouped by matchup (testers, 2026-10-04) */
#pf-report .pfr-main.cs-front { display:flex; flex-direction:column; gap:12px; overflow:auto; padding:2px 0 24px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.cs-frhead { display:flex; align-items:center; gap:12px; }
.cs-frhead .cx-tr-filters { flex:1; min-width:0; }
.cs-frn { font-size:12px; white-space:nowrap; }
.cx-card.cs-frcard { flex:none; overflow:visible; }
.cs-frt th:first-child, .cs-frt td.sp { padding-left:18px; }
.cs-frt th:last-child, .cs-frt td:last-child { padding-right:16px; }
.cs-frt tr.cs-frgrp td { padding:16px 18px 6px; font:700 11.5px 'Manrope', sans-serif; letter-spacing:.04em; color:var(--c-dim);
  border-bottom:1px solid var(--c-line); background:none; }
.cs-frt tbody tr.cs-frgrp:hover td { background:none; }
.cs-frt tr[data-pfr="fr-row"] { cursor:pointer; }
.cs-frbtns { white-space:nowrap; }
.cs-frbtns .cx-btn + .cx-btn { margin-left:6px; }
/* the old chips, where they are left (the flop picker, the river panel, the tree) */
#pf-report .pf-chip { height:26px; padding:0 10px; border-radius:8px; background:var(--c-s2); border:1px solid var(--c-line); color:var(--c-tx);
  font:600 11.5px 'Manrope', sans-serif; display:inline-flex; align-items:center; gap:5px; }
#pf-report .pf-chip:hover { border-color:#444; }
#pf-report .pf-chip.active, #pf-report .pf-chip.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
#pf-report .pfr-info { width:16px; height:16px; border-color:#4a4a4a; background:transparent; color:var(--c-dim); font-size:10px; }
/* inputs */
.cs-inp { display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:var(--c-rs); background:var(--c-s2); border:1px solid var(--c-line);
  color:var(--c-faint); min-width:0; box-sizing:border-box; }
.cs-inp:focus-within { border-color:color-mix(in srgb, var(--c-acc) 70%, var(--c-line)); }
.cs-inp input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--c-tx); font:500 12.5px 'Manrope', sans-serif; padding:0; }
.cs-inp input::placeholder { color:var(--c-faint); }
.cs-inp svg { flex:none; }
.cs-nid { width:220px; height:28px; padding:0 8px; border-radius:8px; background:var(--c-s3); border:1px solid var(--c-line); color:var(--c-tx);
  font:500 12px var(--c-mono); outline:0; }
.cs-select { height:30px; margin:6px 8px 2px; padding:0 8px; border-radius:8px; background:var(--c-s3); border:1px solid var(--c-line); color:var(--c-tx);
  font:600 12px 'Manrope', sans-serif; }

/* ---- the Viewer, PioViewer's layout: a band of the decision (spot, flop,
   the node's numbers) and the navigator, then the grid with its panel on
   the right ---- */
#pf-report .pfr-main.pfr-vw { display:flex; flex-direction:column; gap:10px; overflow:hidden; padding:0 0 24px; }
/* the band is as tall as the decision panel or the navigator, whichever is
   taller; the navigator's options list is held to whole rows (sizeNavList) */
.cs-vband { flex:none; display:flex; align-items:stretch; gap:12px; min-width:0; }
.cs-vdec { flex:none; width:280px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; gap:6px; padding:9px 10px;
  border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); }
.cs-vdec .cs-spotbtn { width:100%; height:32px; border-radius:10px; flex:none; }
.cs-vdec .cs-spotpop { width:460px; }
.cs-vinfo { display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:var(--c-faint); }
.cs-vinfo > div { display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; }
.cs-vinfo b { color:var(--c-tx); font-size:12px; text-transform:capitalize; }
.cs-vdec .cs-vflop { display:flex; align-items:center; gap:4px; }
.cs-vdec .cs-vflop .pfr-flopwrap { flex:1; min-width:0; }
.cs-vdec .cs-vflop .pfr-flopbtn { height:32px; }
.cs-vinfo .cx-num { font-size:11px; white-space:nowrap; }
/* PioViewer's navigator over the grid: the line left to right, the node's
   options stacked at its end, each chip in its action's colour */
.cs-vnav { flex:1; box-sizing:border-box; display:flex; align-items:flex-start; gap:6px; padding:8px 10px; border-radius:14px; background:var(--c-s1);
  border:1px solid var(--c-line); min-width:0; overflow:hidden; }
.cs-vnwait { font-size:12px; padding:4px; }
#pfr-edhost { flex:none; }
.cs-vnline { flex:0 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
/* each chip filled with its action's colour, a touch muted, as the trainer's
   action buttons and the action boxes are - no dark wash over it (testers,
   2026-10-04); light fills (the small bets' yellows) take dark text */
.cs-vnc { --ac:#3a3a3a; display:inline-flex; align-items:center; gap:6px; height:23px; padding:0 9px; box-sizing:border-box; border-radius:6px;
  border:1px solid transparent; background:color-mix(in srgb, var(--ac) 86%, #000); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.45);
  font:700 11.5px 'Manrope', sans-serif; letter-spacing:.02em; white-space:nowrap; cursor:pointer; }
.cs-vnc.lt { color:#14100a; text-shadow:none; }
button.cs-vnc:hover { background:var(--ac); border-color:rgba(255,255,255,.45); }
button.cs-vnc:focus-visible { outline:2px solid var(--c-acc); outline-offset:1px; }
/* the node on screen: a light ring clear of the fill */
.cs-vnc.on { box-shadow:0 0 0 2px var(--c-s1), 0 0 0 3.5px var(--c-tx); }
.cs-vnc i { font-style:normal; font-size:10px; font-weight:700; color:inherit; opacity:.72; }
.cs-vnroot, .cs-vncard, .cs-vnend { background:var(--c-s2); border-color:var(--c-line); color:var(--c-dim); text-shadow:none; }
button.cs-vnroot:hover, button.cs-vncard:hover { background:var(--c-s3); border-color:#555; }
.cs-vncard { padding:0 7px; }
.cs-vncard .pfr-card { font-size:14px; margin:0; }
.cs-vnend { cursor:default; }
.cs-vnopts { flex:none; display:flex; flex-direction:column; gap:2px; min-width:200px; }
.cs-vnact { flex:none; height:23px; display:inline-flex; align-items:center; padding:0 2px 0 6px; font:700 10.5px 'Manrope', sans-serif; letter-spacing:.06em; color:var(--c-faint); }
.cs-vnact::after { content:'\203a'; margin-left:6px; font-size:13px; }
.cs-vnopts > .cs-vnc, .cs-vnlist > .cs-vnc { width:100%; justify-content:flex-start; }
/* the node's options: when there are more than the band holds, only this
   list scrolls (thin), the river editor's head pinned above it */
.cs-vnlist { flex:none; max-height:116px; overflow-y:auto; scroll-snap-type:y mandatory; display:flex; flex-direction:column; gap:2px; padding-right:3px; scrollbar-width:thin; scrollbar-color:#4a4a4a transparent; }
.cs-vnlist > .cs-vnc { flex:none; scroll-snap-align:start; }
.cs-vnlist > .cs-vnc b, .cs-vnopts > .cs-vnc b { margin-left:auto; padding-left:12px; font-size:11px; font-weight:600; color:inherit; opacity:.85; }
.cs-vnc.dead { opacity:.4; }
.cs-vnoh { display:flex; align-items:center; gap:2px; height:22px; padding-left:2px; font:700 10.5px 'Manrope', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--c-faint); }
.cs-vnoh span { flex:1; }
.cs-vnoh .cx-iconbtn { width:22px; height:22px; }
.cs-vnoh .cx-iconbtn.on { color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
.cs-vsw { flex:none; width:10px; height:10px; border-radius:3px; background:var(--c-s3); }
.cs-vnhint { font-size:12px; color:var(--c-faint); }
/* the river editor, GTO Wizard's: the pencil's sizes box and the brush's
   nodelock dialog */
.cs-edpop { position:fixed; z-index:200; width:380px; max-width:calc(100vw - 16px); display:flex; flex-direction:column; gap:10px; padding:14px; box-sizing:border-box;
  border-radius:12px; background:var(--c-s2); border:1px solid #333; box-shadow:0 14px 36px rgba(0,0,0,.55); font-size:12px; color:var(--c-tx); }
.cs-edpop-h { display:flex; align-items:center; justify-content:space-between; font:800 13px 'Manrope', sans-serif; }
.cs-edrows { display:flex; flex-direction:column; gap:6px; }
.cs-edrow { display:flex; align-items:center; gap:8px; }
.cs-edsl { flex:1; min-width:0; accent-color:var(--c-acc); }
.cs-edrow .cx-in.num { width:64px; height:28px; padding:0 6px; font-size:12px; }
select.cs-edunit.cx-in { flex:none; width:74px; min-width:0; height:28px; padding:0 4px; font-size:12px; }
.cs-edrow .cx-in.num { flex:none; }
.cs-edai { flex:1; font-weight:700; }
.cs-edrowbtns { display:flex; flex-wrap:wrap; gap:6px; }
.cs-edbl { margin-left:4px; font:600 10.5px var(--c-mono); color:var(--c-faint); }
#pf-report .cs-edpop .pfr-edres, #pf-report .cs-edbox .pfr-edres { margin:0; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; }
#pf-report .cs-edpop .pfr-szfoot, #pf-report .cs-edbox .pfr-szfoot { margin:0; }
.cs-edbox { width:min(1320px, 97vw); max-width:none; max-height:94vh; }
.cs-edsub { margin-left:8px; font:500 12px var(--c-mono); color:var(--c-faint); }
/* the nodelock (2026-10-07): laid out as the viewer - the range left, the tools right */
.cs-edbody { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:18px; overflow:hidden; }
.cs-edleft { min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px; }
.cs-edrbar { flex:none; display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--c-s3); }
.cs-edrbar i { display:block; height:100%; }
.cs-edgridwrap { flex:1; min-height:0; display:flex; flex-direction:column; aspect-ratio:1; max-height:calc(94vh - 150px); max-width:100%; }
.cs-edgridwrap .pfr-vgrid { flex:1; border-collapse:collapse; border-spacing:0; background:#383838; user-select:none; }
.cs-edgridwrap .pfr-vcell { position:relative; border-radius:0; border:1px solid #121212; cursor:crosshair; }
.cs-edgridwrap .pfr-vcell.off { background:#383838; border:none; cursor:default; }
.cs-edgridwrap .pfr-vcell.off.pp { background:#454545; }
.cs-edgridwrap .pfr-vcell span { color:#fff; text-shadow:0 0 3px #000, 0 1px 2px rgba(0,0,0,.9); position:relative; z-index:1; }
.cs-edgridwrap .pfr-vcell.dim { filter:saturate(.25) brightness(.7); }
.cs-edgridwrap .pfr-vcell.sel { box-shadow:inset 0 0 0 2px var(--c-acc); }
.cs-edgridwrap .pfr-vcell.sel.part { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c-acc) 50%, transparent); }
.cs-edgridwrap .pfr-vcell.painting { box-shadow:inset 0 0 0 2px #fff; }
.cs-edgridwrap .pfr-vcell:hover { box-shadow:inset 0 0 0 1px #fff; }
.cs-edlk2 { position:absolute; top:2px; right:2px; display:flex; color:#fff; opacity:.75; font-style:normal; }
.cs-edlk3 { display:inline-flex; vertical-align:-1px; color:var(--c-faint); font-style:normal; }
.cs-edexp { position:absolute; right:1px; bottom:1px; z-index:2; display:none; padding:2px; border:0; border-radius:3px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; }
.cs-edgridwrap .pfr-vcell:hover .cs-edexp { display:flex; }
.cs-edcmb-h { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12px; }
.cs-edcmb { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; align-content:start; }
.cs-edcmbt { position:relative; aspect-ratio:1.4; border:1px solid #121212; border-radius:4px; padding:6px; cursor:crosshair; user-select:none; }
.cs-edcmbt span { font:800 15px var(--c-mono); color:#fff; text-shadow:0 0 3px #000; }
.cs-edcmbt span i { font-style:normal; }
.cs-edcmbt.dim { filter:saturate(.25) brightness(.7); }
.cs-edcmbt.painting { box-shadow:inset 0 0 0 2px #fff; }
.cs-edtools { min-width:0; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:14px; padding-right:4px; scrollbar-width:thin; }
.cs-edsect { display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--c-line); }
.cs-edtabs .cx-seg { width:100%; }
.cs-edtabs .cx-seg button { flex:1; }
.cs-edhist { display:inline-flex; gap:2px; }
.cs-edpbar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--c-s3); }
.cs-edpbar i { display:block; height:100%; }
.cs-edact.on .cs-edan { color:var(--c-acc); }
button.cs-edan { padding:0; border:0; background:none; text-align:left; cursor:pointer; font:inherit; font-weight:700; }
.cs-edquick { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:11.5px; }
.cs-edquick .cx-faint { min-width:72px; }
.cs-edsuitrow { display:flex; flex-wrap:wrap; gap:6px 14px; }
.cs-edrmix { display:inline-flex; width:34px; height:8px; margin-right:6px; vertical-align:0; border-radius:2px; overflow:hidden; }
.cs-edrmix i { display:block; height:100%; }
.cs-edselbtns { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cs-edeq { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--c-faint); }
.cs-edsum { margin-right:auto; font-size:11.5px; color:var(--c-dim); }
.cs-edeq .cx-in.num, .cs-edtol .cx-in.num { width:52px; height:28px; padding:0 6px; font-size:12px; }
#pf-report .cs-edbox .pfr-edwho { font-size:12px; color:var(--c-dim); }
.cs-edstep { display:flex; align-items:center; gap:10px; }
.cs-edstep .cx-cap { flex:1; }
.cs-edtol { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:var(--c-faint); }
.cs-edhint { font-size:12px; color:var(--c-faint); }
.cs-edacts { display:flex; flex-direction:column; gap:6px; }
.cs-edact { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--c-faint); }
.cs-edan { width:128px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--c-tx); }
.cs-ednow { width:44px; flex:none; text-align:right; font-size:11px; }
.cs-edact .cx-in.num { width:56px; height:28px; padding:0 6px; font-size:12px; }
#pf-report .cs-edbox .pfr-edrules { margin:0; max-height:160px; overflow:auto; border-top-color:var(--c-line); }
#pf-report .cs-edbox .pfr-edrule { border-bottom-color:var(--c-line); font-size:11.5px; }

/* ---- the line bar (Heatmaps) and the flop picker (both) ---- */
#pf-report .pfr-main.pfr-ro { padding:0; }
.cs-vline { flex:none; display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); min-width:0; }
:is(.cs-vline, .cs-vflop) .pfr-flopwrap { margin:0; flex:none; gap:4px; }
:is(.cs-vline, .cs-vflop) .pfr-flopstep { width:24px; height:24px; padding:0; justify-content:center; margin:0; font-size:9px; }
:is(.cs-vline, .cs-vflop) .pfr-flopbtn { height:36px; padding:0 10px; border-radius:10px; background:var(--c-s2); }
:is(.cs-vline, .cs-vflop) .pfr-flopbtn .pfr-card { font-size:19px; margin-right:3px; }
:is(.cs-vline, .cs-vflop) .pfr-flopbtn small { font-family:var(--c-mono); color:var(--c-faint); }
:is(.cs-vline, .cs-vflop) .pfr-flopspop { left:0; right:auto; top:calc(100% + 8px); z-index:90; background:var(--c-s2); border-color:#333; border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.55); }
.cs-vflop { flex:none; }
.cs-vflop .pfr-flopwrap { display:flex; }
.cs-vflop .pfr-flopbtn { flex:1; height:38px; justify-content:flex-start; }
.cs-vflop .pfr-flopbtn small { margin-left:auto; }
/* the turn and river after the flop, each set off by a rule: flop | turn | river */
.pfr-flopbtn .cs-flop3 { display:inline-flex; align-items:center; }
.pfr-flopbtn .cs-vrun { display:inline-flex; align-items:center; margin-left:1px; padding-left:7px; border-left:1px solid #4a4a4a; }
:is(.cs-vline, .cs-vflop) .pfr-flopbtn.cs-hasrun { gap:5px; padding:0 8px; }
:is(.cs-vline, .cs-vflop) .pfr-flopbtn.cs-hasrun .pfr-card { font-size:16px; margin-right:1px; }
.pfr-flopbtn small { white-space:nowrap; }
.cs-vpath { flex:1; min-width:0; overflow-x:auto; }
.cs-vpath .pfr-tree { margin:0; padding:2px 0; flex-wrap:wrap; align-items:center; gap:6px; overflow:visible; }
.cs-vpath .pfr-tc { height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--c-line); border-left:3px solid #3a3a3a; background:transparent;
  color:var(--c-tx); font:600 12px 'Manrope', sans-serif; align-items:center; gap:5px; }
.cs-vpath .pfr-tc:hover { background:var(--c-s2); }
.cs-vpath .pfr-tc.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
.cs-vpath .pfr-tc i { color:var(--c-faint); font-size:10px; }
.cs-vpath .pfr-tc small { font-family:var(--c-mono); color:var(--c-dim); font-size:10.5px; }
.cs-vpath .pfr-tc .pfr-card { font-size:14px; margin:0; }
.cs-vpath .pfr-troot { border-left-color:var(--c-line); color:var(--c-dim); }
.cs-vpath .pfr-tend { color:var(--c-dim); font-weight:600; cursor:default; }
.cs-vpath .pfr-tsep { padding:0; align-self:center; color:var(--c-faint); }
.cs-vpath .pfr-tcol { flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
.cs-vpath .pfr-tcol .pfr-tc { min-width:0; justify-content:flex-start; }
.cs-vpath .pfr-tcolhd { height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:999px; background:var(--c-s3);
  color:var(--c-tx); font:700 10.5px 'Manrope', sans-serif; letter-spacing:.06em; }
.cs-vpath .pfr-tdead { height:26px; padding:0 9px; border-radius:999px; }
.cs-vshow { flex:none; display:flex; align-items:center; gap:8px; }
/* the view buttons over the range explorer, as PioViewer has them */
.cs-vmodes .cs-vshow .cs-seg { padding:2px; }
.cs-vmodes .cs-vshow .cs-seg button { height:24px; padding:0 9px; }
.cs-vmeta { flex:none; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 4px 10px; font-size:11.5px; color:var(--c-faint); min-height:20px; }
.cs-warn { color:var(--c-bad); font-weight:700; }
.cs-tagx { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px; background:var(--c-s3); color:var(--c-dim); font-size:11px; font-weight:600; }
.cs-vdeal { flex:none; margin-bottom:10px; }
.cs-vdeal .pfr-cardgrid { margin-top:8px; }
.cs-vdeal .cs-vcard-h { margin:0; }

/* ---- the viewer's body ---- */
.cs-vbody { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) clamp(400px, 30vw, 440px); gap:14px; }
.cs-vgrid { min-height:0; min-width:0; display:flex; }
/* PioViewer's grid (user, 2026-10-07; greys toned to the theme the same day): one grey ground, the hands out of
   the range part of it (no square, no name; the pairs' diagonal a lighter grey),
   dark lines between the live hands, their names in black */
.cs-vgrid .pfr-vgrid { border-collapse:collapse; border-spacing:0; background:#383838; }
.cs-vgrid .pfr-vcell { border-radius:0; border:1px solid #121212; }
.cs-vgrid .pfr-vcell.off { background:#383838; border:none; cursor:default; }
.cs-vgrid .pfr-vcell.off.pp { background:#454545; }
.cs-vgrid .pfr-vcell span, .cs-vgrid .pfr-vcell b { color:#fff; text-shadow:0 0 3px #000, 0 1px 2px rgba(0,0,0,.9); }
/* the cell under the pointer darkens (GTO Wizard's), its name and number
   kept on top; the kept / locked outline is drawn over it */
.cs-vgrid .pfr-vcell::after { content:''; position:absolute; inset:0; border-radius:inherit; background:#000; opacity:0; pointer-events:none; transition:opacity .08s; }
.cs-vgrid .pfr-vcell:hover::after { opacity:.34; }
.cs-vgrid .pfr-vcell.off:hover::after { opacity:0; }
.cs-vgrid .pfr-vcell span { position:relative; z-index:1; }
.cs-vgrid .pfr-vcell b { z-index:1; }
.cs-vside { min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.cs-vside > * { flex:none; }
.cs-vcard { background:var(--c-s1); border:1px solid var(--c-line); border-radius:14px; padding:14px 16px; flex:none; }
.cs-vcard-h { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.cs-vcard-h .cx-cap { flex:1; min-width:0; }
/* the actions, PioViewer's: a box per action side by side in its colour,
   one thin bar of the shares under them */
.cs-vas { display:flex; gap:4px; }
.cs-va { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:4px 3px; box-sizing:border-box;
  border-radius:9px; border:2px solid transparent; background:var(--ac); color:#fff; text-align:center; cursor:pointer; transition:opacity .12s, border-color .12s;
  text-shadow:0 1px 2px rgba(0,0,0,.6); }
.cs-va.lt { color:#14100a; text-shadow:none; }
.cs-va b { font:800 11px/1.2 'Manrope', sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cs-vas.short .cs-va b { font-size:10.5px; }
.cs-vabb { font-size:9.5px; font-weight:700; opacity:.85; line-height:1.1; margin-top:-1px; }
.cs-va span { font-size:10px; line-height:1.25; opacity:.9; }
.cs-valn { display:flex; align-items:baseline; gap:5px; }
/* five or more actions: the combos and the share each on a line of their own */
.cs-vas.short .cs-valn { flex-direction:column; align-items:center; gap:0; }
.cs-va .cs-vapct { font-size:11.5px; font-weight:700; opacity:1; }
.cs-va:hover { border-color:rgba(255,255,255,.4); }
.cs-va:focus-visible { outline:none; border-color:#fff; }
.cs-va.on { border-color:#fff; }
.cs-va.dim { opacity:.42; }
.cs-vabar { display:flex; height:6px; margin-bottom:5px; border-radius:3px; overflow:hidden; background:var(--c-s2); }
.cs-vabar i { display:block; height:100%; min-width:0; }
.cs-vactnote { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; color:var(--c-dim); }
.cs-vactnote span { flex:1; min-width:0; }
.cs-hd { height:100%; display:flex; flex-direction:column; min-height:0; }
.cs-hd-h { flex:none; display:flex; align-items:center; gap:5px; margin-bottom:3px; min-height:20px; min-width:0; }
.cs-hd-h b { font-size:14px; font-weight:700; }
.cs-hd-h .cx-btn.sm { height:22px; padding:0 8px; }
.cs-hd-h .cx-faint { font-size:10.5px; }
.cs-hd-empty { color:var(--c-faint); font-size:12px; }
.cs-hd-kv { margin-left:auto; font-size:10px; color:var(--c-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cs-hd-h .cx-iconbtn { width:20px; height:20px; flex:none; }
.cs-hd-kv span { color:var(--c-dim); }
.cs-hd-kv b { font-weight:500; color:var(--c-tx); }
/* the combos, each filled like a grid cell (its mix left to right, up to its
   weight) with its cards on top; the class's shapes - offsuit 4 x 3 (3 x 4
   in a tall box), pairs 3 x 2, suited 2 x 2 */
#pfr-vcomboswrap { container-type:size; }
#pf-report .cs-hd .pfr-vcgrid { flex:1; min-height:0; gap:3px; grid-auto-rows:minmax(0, 1fr); }
#pf-report .cs-hd .cs-cg-off { grid-template-columns:repeat(4, minmax(0, 1fr)); }
#pf-report .cs-hd .cs-cg-pair { grid-template-columns:repeat(3, minmax(0, 1fr)); }
#pf-report .cs-hd .cs-cg-suited { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@container (max-aspect-ratio: 1/1) { #pf-report .cs-hd .cs-cg-off { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
#pf-report .cs-hd .pfr-vcblock { border-radius:5px; border-color:transparent; background:#333; padding:2px 4px; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; }
#pf-report .cs-hd .pfr-vchd { margin:0; }
#pf-report .cs-hd .pfr-vchd .pfr-card { font-size:11.5px; text-shadow:0 0 3px #000, 0 1px 2px rgba(0,0,0,.95); }
/* a combo the board blocks (or the range does not hold) keeps its place, greyed */
#pf-report .cs-hd .pfr-vcblock.blank { opacity:.4; filter:grayscale(1); background:var(--c-s1, #141414); border-style:dashed; }
.cs-vmodes { flex:none; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cs-vmodes .cs-vshow { flex:1; min-width:0; }
.cs-vhfbtn.on { color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
.cs-vcls { position:relative; }
.cs-vcls > .cs-vfilter { position:absolute; left:10px; right:10px; top:44px; z-index:6; margin:0; box-shadow:0 10px 26px rgba(0,0,0,.55); background:var(--c-s2); }
.cs-vcls > .cs-vfilter[hidden] { display:none; }
/* the range explorer, PioViewer's: OOP's bar grows left, IP's right, the
   acting side's split by its mix */
.cs-rx { display:grid; grid-template-columns:30px minmax(0, 1fr) 118px minmax(0, 1fr) 30px; gap:5px; align-items:center; }
.cs-rxsec { padding:3px 0; border-top:1px solid var(--c-line); }
.cs-rx { height:19px; padding:0 2px; border-radius:5px; cursor:pointer; }
.cs-rx:hover { background:var(--c-s2); }
.cs-rx:focus-visible { outline:2px solid var(--c-acc); outline-offset:-1px; }
.cs-rx.on { background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
.cs-rx.on .cs-rxl { color:var(--c-acc); font-weight:700; }
.cs-rxn { font-size:10.5px; color:var(--c-dim); }
.cs-rxn:first-child { text-align:right; }
.cs-rxl { font-size:11px; color:var(--c-tx); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-rxb { display:flex; height:11px; min-width:0; }
.cs-rxb.l { justify-content:flex-end; }
.cs-rxb > span { position:relative; display:flex; height:100%; min-width:2px; border-radius:2px; overflow:hidden; }
.cs-rxlk { position:absolute; left:0; top:0; bottom:0; background:repeating-linear-gradient(135deg, rgba(0,0,0,.55) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.cs-edrx { grid-template-columns:112px minmax(0, 1fr) 34px; }
.cs-edrx .cs-rxl { text-align:left; }
.cs-rxb.l > span { flex-direction:row-reverse; }
.cs-rxb i { display:block; height:100%; min-width:0; background:#6b6b6b; }
.cs-rxfoot { flex:none; padding:4px 2px 0; border-top:1px solid var(--c-line); font-size:10.5px; color:var(--c-dim); text-align:center; }
.cs-suits { display:inline-flex; align-items:center; gap:3px; }
.cs-suits .cx-cap { margin-right:4px; }
#pf-report .cs-suits .pfr-vsuit { width:22px; height:22px; border-radius:6px; background:var(--c-s2); border-color:var(--c-line); font-size:13px; }
#pf-report .cs-suits .pfr-vsuit.on { border-color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
#pf-report #pfr-veqgwrap .pfr-veqg { border:0; background:none; padding:0; margin:0; }
#pf-report #pfr-veqgwrap .pfr-veqg { height:100%; display:flex; flex-direction:column; }
#pf-report #pfr-veqgwrap .pfr-veqg svg { flex:1; min-height:0; height:auto; }
#pf-report #pfr-veqgwrap .pfr-veqhd { flex:none; flex-wrap:wrap; gap:0 8px; font-size:10px; margin:0 0 2px; }
#pf-report #pfr-veqgwrap .pfr-veqhd span:first-child { display:none; }
#pf-report #pfr-veqgwrap .pfr-navhint { display:none; }
.cs-vside > .cs-vhrow { flex:1 1 0; min-height:150px; display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:8px; }
.cs-vhrow > .cs-vcard { min-height:0; overflow:hidden; padding:7px 9px; }
.cs-vhrow .cs-hd-empty { font-size:11px; }
/* the view buttons and the explorer, rows packed; the combos + graph row
   under them takes what the column has left (and the explorer gives way to
   it, down to its rows' readable least, on a short window) */
.cs-vside > .cs-vcls { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; padding:9px 12px; }
#pfr-vclswrap { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
.cs-rxbody { flex:0 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.cs-rxbody .cs-rxsec { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; padding:2px 0; }
.cs-rxbody .cs-rx { flex:0 1 18px; height:18px; min-height:12px; }
.cs-rxbody .cs-rxl, .cs-rxbody .cs-rxn { line-height:1; }

/* ---- Reports ---- */
.pfr-main.cs-rep { overflow:auto; padding:0 0 40px; }
.cs-repnav .pfr-nav { padding:0; margin:0; }
.cs-repnav .pfr-navrow { margin:6px 0; }
.cs-repnav .pfr-crumb { height:26px; padding:0 10px; border-radius:999px; background:transparent; border:1px solid var(--c-line); color:var(--c-tx); font:600 12px 'Manrope', sans-serif; }
.cs-repnav .pfr-crumb.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
.cs-repnav .pfr-crumb i { color:var(--c-faint); }
.cs-repnav .pfr-navmeta { font-size:12.5px; color:var(--c-dim); }
.cs-repnav .pfr-navmeta b { font-weight:700; }
.cs-repnav .pfr-act { height:32px; padding:0 12px; border-radius:9px; background:var(--c-s2); border:1px solid var(--c-line); border-left-width:4px;
  color:var(--c-tx); font:700 12.5px 'Manrope', sans-serif; display:inline-flex; align-items:center; gap:6px; }
.cs-repnav .pfr-act small { font:500 11px var(--c-mono); color:var(--c-dim); }
.cs-repnav .pfr-act.leaf { opacity:.55; cursor:default; }
.cs-ck { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c-tx); cursor:pointer; white-space:nowrap; }
.cs-ck input { accent-color:var(--c-acc); margin:0; }
.cs-tblwrap { display:block; width:fit-content; max-width:100%; overflow-x:auto; box-sizing:border-box; padding:4px 12px 8px; border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); }
#pf-report .cs-tblwrap .pfr-tbl { margin:0; font-family:'Manrope', sans-serif; }
#pf-report .cs-tblwrap .pfr-tbl th { font:700 10px 'Manrope', sans-serif; letter-spacing:.08em; color:var(--c-faint); border-bottom-color:var(--c-line); padding:8px 8px; vertical-align:bottom; }
#pf-report .cs-tblwrap .pfr-tbl th.on, #pf-report .cs-tblwrap .pfr-tbl th[data-pfr="sort"]:hover { color:var(--c-acc); }
#pf-report .cs-tblwrap .pfr-tbl td { border-bottom-color:#1f1f1f; padding:4px 8px; }
#pf-report .cs-tblwrap .pfr-tbl .pfr-num { font-family:var(--c-mono); font-size:12px; }
#pf-report .cs-tblwrap tr.pfr-all td { background:color-mix(in srgb, var(--c-acc) 9%, var(--c-s1)); border-top:1px solid var(--c-acc); border-bottom:1px solid var(--c-acc); font-weight:700; }
#pf-report .cs-tblwrap .pfr-bar.txt { height:20px; border-radius:5px; }
#pf-report .cs-tblwrap .pfr-card { font-size:13px; }
#pf-report .cs-tblwrap .pfr-open .pf-chip { height:22px; font-size:10.5px; padding:0 8px; }
.cs-sortk { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 7px; margin-right:2px; border-radius:6px; border:0; background:transparent;
  color:var(--c-dim); font:700 10.5px 'Manrope', sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }
.cs-sortk i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.cs-sortk:hover { color:var(--c-tx); background:var(--c-s2); }
.cs-sortk.on { color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
#pf-report .pfr-empty { color:var(--c-dim); font-size:13px; padding:20px 4px; }

/* ---- Heatmaps ---- */
#pf-report .pfr-ro { display:flex; flex-direction:column; overflow:hidden; padding:0 0 10px; }
.cs-hfsm { width:230px; height:28px; }
.cs-heathead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 8px; }
.cs-heathead .pfr-legend { margin:0; }

#pf-report .pfr-prog { color:var(--c-acc); }
#pf-report .pfr-progbar { background:var(--c-s3); }
#pf-report .pfr-progbar i { background:var(--c-acc); }

/* ---- Tree ---- */
#pf-report .pfr-tv { overflow:auto; padding:0 0 40px; }
.cs-tvhead { display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.cs-tvhead h2 { margin:0; font-size:18px; font-weight:700; }
#pf-report .pfr-tvtree { margin:0; padding:6px; border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); }
#pf-report .pfr-tvrow { border-radius:8px; padding:4px 8px; }
#pf-report .pfr-tvrow:hover { background:var(--c-s2); }
#pf-report .pfr-tvrow.on { background:color-mix(in srgb, var(--c-acc) 9%, transparent); border-color:color-mix(in srgb, var(--c-acc) 35%, transparent); }
#pf-report .pfr-tva { border-radius:6px; background:var(--c-s2); }
#pf-report .pfr-tvopen .cx-btn { height:24px; font-size:11px; }

/* a short window (1366x768 and the like): the Viewer's band and the right
   column's fixed parts give the explorer's rows their room */
@media (max-height: 820px) {
  .cs-vdec { gap:4px; padding:6px 9px; }
  .cs-vdec .cs-spotbtn, .cs-vdec .cs-vflop .pfr-flopbtn { height:30px; }
  .cs-rxbody .cs-rx { flex-basis:14px; height:14px; min-height:13px; }
  .cs-rxbody .cs-rxl, .cs-rxbody .cs-rxn { font-size:9.5px; }
  .cs-vside > .cs-vhrow { min-height:112px; }
  .cs-vside { gap:6px; }
  .cs-rxbody .cs-rxsec { padding:1px 0; }
  .cs-vnc { height:20px; }
  .cs-vnoh { height:18px; }
  .cs-vside > .cs-vcls { padding:7px 10px; }
  .cs-vmodes { margin-bottom:3px; }
  .cs-vmodes .cs-vshow .cs-seg button { height:22px; padding:0 8px; }
  #pf-report .cs-suits .pfr-vsuit { width:19px; height:19px; font-size:11px; }
  .cs-rxfoot { padding-top:2px; font-size:10px; }
}
@media (max-width: 1100px) {
  .cs-vbody { grid-template-columns:minmax(0, 1fr) 320px; }
  .cs-vdec { width:240px; }
  .cs-vline { flex-wrap:wrap; }
}
@media (max-width: 860px) {
  #pf-report .cs-stop { flex-wrap:wrap; padding:12px 16px; }
  #pf-report .pfr-body { padding:0 16px 12px; }
  #pf-report .pfr-main.pfr-vw { display:flex; flex-direction:column; overflow:auto; }
  .cs-edbody { grid-template-columns:1fr; }
  .cs-vband { flex-direction:column; }
  .cs-vdec { width:auto; }
  .cs-vdec .cs-spotpop { width:min(440px, calc(100vw - 32px)); }
  .cs-vbody { display:flex; flex-direction:column; }
  .cs-vgrid { height:min(92vw, 560px); flex:none; }
  .cs-vside { overflow:visible; }
}
/* the flop picker's popup in the C colours */
#pf-report .pfr-fflist { border-right-color:var(--c-line); }
#pf-report .pfr-ffitem { border-radius:8px; }
#pf-report .pfr-ffitem:hover { background:var(--c-s3); }
#pf-report .pfr-ffitem.on { background:color-mix(in srgb, var(--c-acc) 10%, transparent); outline-color:color-mix(in srgb, var(--c-acc) 40%, transparent); }
#pf-report .pfr-ffr { background:var(--c-s1); border-color:var(--c-line); border-radius:6px; color:var(--c-dim); font-family:'Manrope', sans-serif; }
#pf-report .pfr-ffr:hover { color:var(--c-tx); background:var(--c-s3); }
#pf-report .pfr-ffr.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
#pf-report .pfr-fftitle { color:var(--c-faint); font-weight:700; }
#pf-report .pfr-cardbtn { border-radius:8px; background:var(--c-s2); border-color:var(--c-line); }
#pf-report .pfr-cardbtn:hover { border-color:var(--c-acc); }

/* ════════════════════════════════════════════════════════════════
   HANDS PLAYED
   ════════════════════════════════════════════════════════════════ */
#pf-hands { max-width:none; margin:0; padding:0 0 40px; gap:0; background:var(--bg); color:var(--c-tx); font-family:'Manrope', sans-serif; }
#pf-hands .cs-htop { width:100%; max-width:1040px; margin:0 auto; padding:24px 32px 18px; box-sizing:border-box; height:auto; display:flex; align-items:center; gap:12px; flex:none; }
#pf-hands .cs-htop h1.cx-h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; }
#pf-hands .pf-hands-count { font-size:12px; color:var(--c-faint); margin-right:auto; }
.cs-hsearch { width:250px; border-radius:999px; height:34px; padding:0 14px; background:var(--c-s1); }
#pf-hands-list { width:100%; max-width:1040px; margin:0 auto; padding:0 32px; box-sizing:border-box; background:none; border:0; border-radius:0; }
.cs-hday { display:block; margin:6px 0 10px; }
.cs-hday:not(:first-child) { margin-top:22px; }
.cs-hgroup { padding:0; overflow:hidden; margin-bottom:12px; }
.cs-hgroup-h { display:flex; align-items:center; gap:12px; padding:14px 20px; cursor:pointer; user-select:none; }
.cs-hgroup-h:hover { background:color-mix(in srgb, var(--c-s2) 60%, transparent); }
.cs-hgroup-h:focus-visible { outline:2px solid var(--c-acc); outline-offset:-2px; }
.cs-hgroup-t { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.cs-hgroup-t b { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-hgroup-t span { font-size:12px; color:var(--c-dim); }
.cs-hacc { font-size:18px; font-weight:500; }
.cs-hacc.up { color:var(--c-good); } .cs-hacc.down { color:var(--c-bad); }
.cs-hchev { color:var(--c-dim); display:flex; transition:transform .15s; }
.cs-hchev svg { width:16px; height:16px; }
.cs-hgroup.shut .cs-hchev { transform:rotate(-90deg); }
.cs-hgroup.shut .cs-hrows { display:none; }
.cs-hrow { display:flex; align-items:center; gap:10px; padding:8px 20px; border-top:1px solid var(--c-line); font-size:13px; min-height:30px; }
.cs-hrow:hover { background:color-mix(in srgb, var(--c-s2) 50%, transparent); }
.cs-htime { width:66px; flex:none; font-size:12px; color:var(--c-dim); }
.cs-hcards { font-weight:700; font-size:14px; white-space:nowrap; min-width:46px; }
.cs-hon { color:var(--c-faint); font-size:12px; }
.cs-hboard { font-weight:700; font-size:14px; white-space:nowrap; letter-spacing:.02em; }
.cs-hboard span + span { margin-left:3px; }
.cs-hspot { font-size:11.5px; color:var(--c-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cs-hgrow { flex:1; }
.cs-htag { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px; font:700 11px 'Manrope', sans-serif; white-space:nowrap; }
.cs-htag.good { background:color-mix(in srgb, var(--c-good) 14%, transparent); color:var(--c-good); }
.cs-htag.warn { background:color-mix(in srgb, #f2b13a 14%, transparent); color:#f2b13a; }
.cs-htag.bad { background:color-mix(in srgb, var(--c-bad) 15%, transparent); color:var(--c-bad); }
.cs-hdec { width:22px; text-align:right; font-size:11px; color:var(--c-faint); }
.cs-hrow .cx-btn.ghost { color:var(--c-dim); }
.cs-hrow .cx-btn.ghost:hover { color:var(--c-tx); }
.cs-hico { padding:0 7px; }
.cs-hnone { display:inline-flex; width:28px; justify-content:center; color:#3a3a3a; }
.cs-hrow > .cs-hnone:first-of-type { width:74px; }
.cs-hmark { width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent;
  color:var(--c-faint); font-size:16px; cursor:pointer; flex:none; }
.cs-hmark:hover { color:var(--c-tx); background:var(--c-s2); }
.cs-hmark.on { color:var(--gold, #e9b955); }
.cs-hmark:focus-visible { outline:2px solid var(--c-acc); outline-offset:1px; }
.cs-hmore { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0 0; font-size:12px; }
.cs-hempty { padding:24px; }
@media (max-width: 760px) {
  #pf-hands .cs-htop { flex-wrap:wrap; padding:16px; }
  #pf-hands-list { padding:0 16px; }
  .cs-hsearch { width:100%; }
  .cs-hrow { flex-wrap:wrap; padding:8px 14px; }
}

/* How the rating works: a few lines above its parts */
#pf-stats .cs-how { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 18px; margin:4px 0 14px; }
#pf-stats .cs-how > div { display:flex; flex-direction:column; gap:3px; }
#pf-stats .cs-how b { font:700 12.5px 'Manrope', sans-serif; color:var(--c-tx); }
#pf-stats .cs-how span { font:500 12px/1.45 'Manrope', sans-serif; color:var(--c-dim); max-width:60ch; }

/* ---- a spot's page (the stat checker): one band - the spot, its score, its
   node tabs and filters, the colours' key - then its line groups as cards.
   Every row in every card is the same grid, so the codes, hands, mixes,
   verdicts, numbers and markers line up down the page. ---- */
/* the section's head: the config's card, and beside it the tabs, Play hands, the filters and the key */
.cs-shead { display:grid; grid-template-columns:minmax(260px, 300px) minmax(0, 1fr); gap:16px; align-items:start; margin:0 0 16px; }
.cs-sband { display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.cs-sband-f { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cs-tleak { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; margin-left:6px; padding:0 4px; box-sizing:border-box;
  border-radius:8px; background:color-mix(in srgb, var(--c-bad) 18%, transparent); color:var(--c-bad); font:500 10px var(--c-mono); }
.cs-key { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--c-faint); }
.cs-key i { width:8px; height:8px; border-radius:2px; margin-left:8px; }
.cs-key i.agg { background:var(--c-bad); } .cs-key i.pas { background:var(--c-good); }
/* the spot pages run wider than the overview, for a row of boxes: 3 at 1400, 4 at 1920 */
#pf-stats:not(.cs-ov) .pfs-top, #pf-stats:not(.cs-ov) .pfs-lead, #pf-stats:not(.cs-ov) .pfs-app { max-width:1560px; }
/* above the checker: Weakest lines, full width, and the checker's title */
#pf-stats .pfs-lead { width:100%; max-width:1240px; margin:0 auto; padding:0 32px; box-sizing:border-box; }
#pf-stats .pfs-lead > #pfs-rescore + .cs-sech { margin-top:4px; }
/* a Weakest line's code and spot: a link to it in the checker */
.cs-goline { display:flex; align-items:center; gap:14px; flex:1; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.cs-goline:hover .cx-line-spot { text-decoration:underline; }
/* the config list: name, proven leaks, decisions */
#pf-stats .pfs-item { gap:8px; }
#pf-stats .pfs-item .cs-side-l { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pf-stats .pfs-item .cs-tleak { margin-left:0; }
/* a group of leak boxes under its title (the template's groups), and the boxes in one grid */
.cs-bgrp { margin:20px 0 0; }
.cs-bgrp > .cx-cap { display:block; margin:0 0 8px; }
.cs-bgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; align-items:start; }
/* one confirmed leak: the old leak box - a strip with the line, its cells over its actions, its sizes and textures off */
.cs-box { min-width:0; border:1px solid var(--c-line); border-radius:12px; background:var(--c-s1); overflow:hidden; }
.cs-box.leak { border-color:color-mix(in srgb, var(--c-bad) 35%, var(--c-line)); }
.cs-box.open { grid-column:1 / -1; }
.cs-box-top { padding:0 0 12px; cursor:pointer; }
.cs-box-top:hover .cs-box-k { text-decoration:underline; }
.cs-box-h { display:flex; align-items:baseline; gap:10px; padding:10px 14px; background:var(--c-s2); border-bottom:1px solid var(--c-line); }
.cs-box-k { font-size:15px; font-weight:500; color:var(--c-acc); }
.cs-box-n { font-size:11px; color:var(--c-faint); }
.cs-box-m { margin-left:auto; font:600 11px 'Manrope', sans-serif; color:var(--c-acc); white-space:nowrap; }
.cs-box-m.agg { color:var(--c-bad); } .cs-box-m.pas { color:var(--c-good); }
.cs-box-t { border-collapse:collapse; margin:10px 14px 0; }
.cs-box-t td, .cs-box-t th { padding:0; }
.cs-box-t tr.sub.dim { opacity:.4; }
.cs-box-t td.rn { padding-right:14px; font-size:11.5px; color:var(--c-dim); white-space:nowrap; }
.cs-box-t td.rn:empty { padding:0; }
.cs-box-t td.rn .cx-num { margin-left:6px; font-size:10.5px; color:var(--c-faint); }
.cs-box-t th { padding:2px 0 4px 6px; font:600 10px 'Manrope', sans-serif; color:var(--c-faint); text-align:left; }
.cs-box-t tr.sub td { height:28px; }
.cs-box-t tr.lab + tr.sub td { padding-top:8px; }
/* a cell: yours in large type, the solver's beside it; coloured when off, filled when far off */
.cs-v { width:84px; white-space:nowrap; }
.cs-v b { display:inline-block; padding:0 6px; border-radius:6px; font:500 22px var(--c-mono); color:var(--c-tx); }
.cs-v i { margin-left:2px; font:400 13px var(--c-mono); font-style:normal; color:var(--pfs-gto, #e8923a); }
.cs-box-t tr.sub .cs-v b { font-size:14px; } .cs-box-t tr.sub .cs-v i { font-size:11.5px; }
.cs-v.agg b { color:var(--c-bad); } .cs-v.pas b { color:var(--c-good); }
.cs-v.strong.agg b { color:#fff; background:color-mix(in srgb, var(--c-bad) 70%, transparent); }
.cs-v.strong.pas b { color:#06200f; background:var(--c-good); }
/* opened: what else is off in the line, then the balance and the drill */
.cs-box-d { padding:0 14px 14px; border-top:1px solid var(--c-line); }
.cs-box-more { display:flex; flex-wrap:wrap; gap:4px 48px; }
.cs-box-more .cs-box-t { margin:12px 0 0; }
.cs-box-t td.rn.cx-cap { padding-bottom:4px; font-size:10.5px; color:var(--c-dim); }
.cs-box-none { padding:14px 0 0; font-size:12px; }
.cs-bdot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.cs-lfoot { display:flex; align-items:center; gap:12px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--c-line); }
.cs-lfoot-n { font-size:11px; }
.cs-bal { display:inline-flex; align-items:baseline; gap:14px; font-size:12px; color:var(--c-dim); }
.cs-bal b { font-weight:500; color:var(--c-tx); }
.cs-bal i { font-style:normal; color:var(--c-faint); }
.cs-bal em { font-style:normal; } .cs-bal em.agg { color:var(--c-bad); } .cs-bal em.pas { color:var(--c-good); }

/* Reports: one box on top - the line and its actions left, the filters right */
.cs-reptop { display:grid; grid-template-columns:minmax(340px, 1fr) minmax(0, 780px); gap:6px 28px; align-items:start;
  border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); padding:10px 16px; margin:0 0 12px; }
.cs-reptop .cs-repnav { min-width:0; }
.cs-repn { display:block; margin-top:6px; font-size:11.5px; }
/* the controls: three rows of fields, each a caption over its control, on
   one 12px rhythm and one 32px control height - segments, two menus, the
   two text filters */
.cs-reptop .cs-repctl { display:flex; flex-direction:column; gap:12px; min-width:0; }
.cs-crow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; }
.cs-cfield { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cs-cfield > .cx-cap { font-size:10px; color:var(--c-faint); }
.cs-cseg { padding:2px; }
.cs-cseg button { height:26px; padding:0 11px; font:600 12px 'Manrope', sans-serif; }
.cs-cpop > summary.cx-btn { height:32px; gap:8px; padding:0 12px; border-radius:999px; font:600 12px 'Manrope', sans-serif; color:var(--c-tx); }
.cs-cpop > summary.cx-btn svg { color:var(--c-faint); }
.cs-cpop > summary.cx-btn.on { border-color:var(--c-acc); color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 10%, transparent); }
.cs-cpop[open] > summary.cx-btn { border-color:#444; }
.cs-pmenu { left:0; right:auto; min-width:0; padding:12px 14px; gap:0; }
.cs-pgrid { display:grid; grid-auto-flow:column; grid-auto-columns:max-content; gap:0 28px; }
.cs-pgrp { display:flex; flex-direction:column; gap:8px; }
.cs-pgrp > .cs-mcap { padding:0 0 2px; }
.cs-pfoot { display:flex; align-items:center; justify-content:flex-end; margin-top:12px; padding-top:10px; border-top:1px solid var(--c-line); font-size:11.5px; }
.cs-pfoot.cx-faint { justify-content:flex-start; }
.cs-cfilt { flex-wrap:wrap; gap:8px 12px; }
.cs-cfilt .cs-inp { flex:1 1 170px; min-width:140px; max-width:220px; height:28px; }
.cs-cfilt { align-items:center; }
.cs-cfilt .cs-inp input { font-size:12px; }
@media (max-width:1300px) { .cs-reptop { grid-template-columns:minmax(0, 1fr); } }
/* Compare: a + where the next spot's columns go */
.cs-addspot { display:inline-block; }
.cs-addspot > summary { list-style:none; gap:4px; text-transform:none; letter-spacing:0; font-size:12px; height:26px; }
.cs-addmenu .cs-mi, .cs-addmenu .cs-mcap { text-transform:none; letter-spacing:normal; }
.cs-addmenu .cs-mcap { text-transform:uppercase; letter-spacing:.06em; }
.cs-addspot > summary::-webkit-details-marker { display:none; }
.cs-addmenu { min-width:200px; display:flex; flex-direction:column; gap:2px; }
.cs-addmenu .cs-mi { text-align:left; }
.cs-addspot select option { background:var(--c-s1); color:var(--c-tx); }
#pf-report .pfr-tbl th.pfr-addh { vertical-align:middle; }
#pf-report .pfr-tbl .pfr-sph .cx-iconbtn { vertical-align:middle; margin-left:4px; }
/* boards the line never reaches: under a rule, at the bottom */
#pf-report .pfr-tbl tr.pfr-unhd td { padding:12px 8px 4px; font:700 10px 'Manrope', sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-faint); border-bottom:1px solid var(--c-line); }
.cs-reptop .pfr-nav { border:0; background:none; padding:0; margin:0; box-shadow:none; }
/* the suit filter: the viewed player only, the higher card's suit over the lower card's (2026-10-07) */
.cs-edstep .cx-faint { font-size:11px; }
/* the flop report's head - the columns and the overall row - stays put while
   the boards scroll under it (2026-10-07); fitTable sizes the box to the window */
#pf-report .cs-tblwrap { overflow:auto; scrollbar-width:thin; }
#pf-report .cs-tblwrap .pfr-tbl thead { position:sticky; top:-4px; z-index:3; }
#pf-report .cs-tblwrap .pfr-tbl thead th { background:var(--c-s1); }
#pf-report .cs-tblwrap .pfr-tbl thead tr.pfr-all td { box-shadow:0 6px 8px -6px rgba(0,0,0,.7); }
/* the viewer's rank columns in the report's Boards menu */
#pf-report .cs-pranks { margin-top:10px; padding-top:10px; border-top:1px solid var(--c-line); }
#pf-report .cs-pranks .pfr-ffcols { margin-top:6px; }
/* the line's chips are short (navShort); the options follow the line, not the far edge */
.cs-vnline .cs-vnc { padding:0 7px; gap:4px; }
.cs-vheat { height:22px; padding:0 8px; gap:5px; margin-left:4px; }
/* the line, clicked where you want to be (2026-10-07): each step a column - its
   chip and the space under it - that opens the decision it was taken at */
.cs-vnline { align-self:stretch; align-items:stretch; }
.cs-vncol { display:flex; flex-direction:column; align-items:flex-start; padding:3px; margin:-3px 0; border:0; border-radius:8px; background:none; cursor:pointer; font:inherit; }
.cs-vncol:hover { background:rgba(255,255,255,.045); }
.cs-vncol:hover .cs-vnc { background:var(--ac); border-color:rgba(255,255,255,.45); }
.cs-vncol:focus-visible { outline:2px solid var(--c-acc); outline-offset:1px; }
.cs-vncol.ahead .cs-vnc { opacity:.55; }
.cs-vncol .cs-vncard { background:var(--c-s2); }
/* a cell's background covers its border box: drawn from the padding box it
   tiled into the 1px border, and the foot of the bar showed as a sliver over
   the top row and over each combo (user, 2026-10-07) */
#pf-report .pfr-vcell, #pf-report .pfr-vcblock, #pf-report .cs-edcmbt { background-origin:border-box !important; background-repeat:no-repeat !important; }
/* the range explorer's rows keep their height; a node with more classes than
   the box holds scrolls inside it instead of squeezing rows over each other
   (2026-10-07: "king high" printed over "combo draw") */
.cs-rxbody { overflow-y:auto; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.cs-rxbody .cs-rxsec { flex:none; }
.cs-rxbody .cs-rx { flex:none; height:18px; min-height:18px; }
@media (max-height: 820px) { .cs-rxbody .cs-rx { height:15px; min-height:15px; } }
/* the spot's name stands out: larger and in the accent (testers 2026-10-07) */
.cs-spotbtn > span { color:var(--c-acc); font-size:14px; font-weight:800; letter-spacing:.01em; }
.cs-vdec .cs-spotbtn { height:34px; }   /* smaller again (user, 2026-10-08) */
/* the combo under the pointer darkens too (testers 2026-10-07) */
#pf-report .cs-hd .pfr-vcblock:not(.blank) { position:relative; }
#pf-report .cs-hd .pfr-vcblock:not(.blank):hover::after { content:''; position:absolute; inset:0; border-radius:inherit; background:#000; opacity:.3; pointer-events:none; }
.cs-vgrid .pfr-vcell.off { cursor:default; }
/* the flop filter's ranks as cards, and a dark scrollbar on the flop list (testers 2026-10-07) */
#pf-report .pfr-fflist, #pf-report .pfr-flopspop { scrollbar-width:thin; scrollbar-color:#3a3a3a transparent; }
#pf-report .pfr-ffcol { gap:2px; align-items:center; }
#pf-report .pfr-ffr { width:26px; height:19px; padding:0; border-radius:3px; border:1px solid #d6d1c6; background:#f3efe6; color:#1c1a17;
  font:800 12px 'Manrope', sans-serif; line-height:1; box-shadow:0 1px 0 rgba(0,0,0,.35); }
#pf-report .pfr-ffr:hover { background:#fffaf0; color:#000; }
#pf-report .pfr-ffr.on { background:var(--c-acc); border-color:var(--c-acc); color:#1a0e04; box-shadow:0 0 0 2px color-mix(in srgb, var(--c-acc) 40%, transparent); }
/* the line's next action, ringed in the node's options (it is taken there) */
.cs-vnlist > .cs-vnc.next { box-shadow:0 0 0 2px var(--c-s1), 0 0 0 3.5px var(--c-tx); }
/* Rating: the spots holding the rating back (coverage, 2026-10-08) */
.cs-sech > .cx-faint { margin-left:12px; font-size:12px; }
.cs-gaps { display:flex; flex-direction:column; gap:6px; padding:12px 16px; }
.cs-gap { display:grid; grid-template-columns:minmax(0, 1fr) 140px 84px 52px auto; align-items:center; gap:12px; font-size:13px; }
.cs-gapname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.cs-gapbar { height:6px; border-radius:3px; background:var(--c-s3); overflow:hidden; }
.cs-gapbar i { display:block; height:100%; background:var(--c-acc); }
.cs-gapgain { color:var(--c-good, #22c55e); font-weight:800; text-align:right; }
.cs-gapmore { font-size:12px; padding-top:2px; }
.cs-gap > .cx-num { white-space:nowrap; }
/* How the rating works: each part's explanation under its name (2026-10-08) */
.pf-rk-brk td .pf-rk-part { display:block; font-weight:700; color:var(--c-tx); }
.pf-rk-brk td .pf-rk-why { display:block; max-width:620px; margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--c-faint); white-space:normal; }
.pf-rk-brk td { vertical-align:top; padding-top:8px; padding-bottom:8px; }
/* Heatmaps: the viewer's navigator in the bar beside the flop */
.cs-vline .cs-ronav { flex:1; min-width:0; padding:4px 6px; border:0; background:none; }
/* the card to come, picked in place in the line (2026-10-08) */
.cs-vndeal .pfr-cardgrid { display:grid; grid-template-columns:repeat(13, 24px); gap:2px; }
.cs-vndeal .pfr-cardbtn { width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.cs-vndeal .pfr-cardbtn .pfr-card { font-size:11px; margin:0; }
.cs-vndeal .pfr-cardgap { width:24px; height:24px; }
.pfr-cardbtn.on { outline:2px solid var(--c-tx); outline-offset:-1px; background:var(--c-s3); }

/* nodelock (2026-10-08, Deeepz): cards + SPR in the head, the ? card, held
   brush actions, highlighted hand classes, combos in a box over the grid */
.cs-edhead { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cs-edhead .cs-edsub { margin-left:0; }
.cs-edcards { display:inline-flex; gap:3px; }
.cs-edcards .pfr-card { font-size:15px; margin:0; }
.cs-edspr { padding:2px 8px; border-radius:6px; background:var(--c-s2); border:1px solid var(--c-line); font:600 12px var(--c-mono); color:var(--c-dim); }
.cs-edtabs { display:flex; align-items:center; gap:8px; }
.cs-edtabs .cx-seg { flex:1; }
.cs-edq { flex:none; width:26px; height:26px; font:700 13px var(--c-font, inherit); }
.cs-edq.on { color:var(--c-acc); border-color:var(--c-acc); }
.cs-edhelp { margin-top:8px; padding:10px 12px; border-radius:8px; background:var(--c-s2); border:1px solid var(--c-line); font-size:12.5px; line-height:1.55; color:var(--c-dim); }
.cs-edhelp b { color:var(--c-tx); }
.cs-edplk { flex:none; color:var(--c-faint); }
.cs-edplk.on { color:var(--c-acc); }
.cs-edact.held .cs-edsl { opacity:.55; }
.cs-edrx.on { background:color-mix(in srgb, var(--c-acc) 14%, transparent); border-radius:4px; }
.cs-edrx.on .cs-rxl { color:var(--c-acc); font-weight:700; }
.cs-edgridwrap { position:relative; }
.cs-edgridwrap .pfr-vcell.dim { filter:saturate(0) brightness(.45); }
.cs-edcpop { position:absolute; z-index:6; width:min(420px, 92%); padding:10px; border-radius:10px; background:var(--c-s1); border:1px solid var(--c-line); box-shadow:0 14px 40px rgba(0,0,0,.6); }
.cs-edcpop .cs-edcmb-h { justify-content:space-between; }
.cs-edcpop .cs-edcmb-h .cx-faint { flex:1; }
.cs-edcpop .cs-edcmbt { aspect-ratio:1.25; }

/* the report's way into the trainer (2026-10-08) */
.cs-reptrain { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cs-reptrain .cx-cap { margin-right:2px; }

/* the report: one flop's range beside the table, Up / Down through the flops (2026-10-08) */
.cs-repbody { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.cs-repbody > .cs-tblwrap { flex:0 1 auto; min-width:0; }
.cs-rgrid { flex:1 1 360px; min-width:300px; align-self:flex-start; display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:var(--c-r); background:var(--c-s1); border:1px solid var(--c-line); }
.cs-rghead { display:flex; align-items:center; gap:8px; }
.cs-rgflop .pfr-card { font-size:15px; }
.cs-rgsub { font-size:11.5px; }
.cs-rgmsg { padding:30px 0; text-align:center; }
.cs-rgtbl { width:100%; height:100%; table-layout:fixed; border-collapse:collapse; background:#383838; }
.cs-rgtbl .pfr-vcell { border:1px solid #121212; border-radius:0; padding:2px 3px; vertical-align:top; font:700 10.5px var(--c-mono); }
.cs-rgtbl .pfr-vcell span { color:#fff; text-shadow:0 0 3px #000, 0 1px 2px rgba(0,0,0,.9); }
.cs-rgtbl .pfr-vcell.off { background:#383838; border:none; }
.cs-rgtbl .pfr-vcell.off.pp { background:#454545; }
.cs-rgtbl .pfr-vcell.off span { color:#6a6a6a; text-shadow:none; }
/* a hand's combos over the grid (2026-10-08) */
.cs-rggridwrap { position:relative; flex:1 1 auto; min-height:0; }
.cs-rgtbl .pfr-vcell[data-pfr="rg-cell"] { cursor:pointer; }
.cs-rgtbl .pfr-vcell.on { outline:2px solid var(--c-acc); outline-offset:-2px; }
.cs-rgpop .cs-edcmbt { cursor:default; aspect-ratio:auto; min-height:46px; display:flex; flex-direction:column; justify-content:space-between; }
.cs-rgpct { font:600 9.5px var(--c-mono); font-style:normal; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9); line-height:1.25; }
#pfr-tbl tr[data-rgrow] { cursor:pointer; }
#pfr-tbl tr.rg-on > td { background:color-mix(in srgb, var(--c-acc) 12%, transparent); }
#pfr-tbl tr.rg-on > td.pfr-board { box-shadow:inset 3px 0 0 var(--c-acc); }
/* dark scrollbars in the report's table (user, 2026-10-08: the white one) */
.cs-tblwrap { scrollbar-width:thin; scrollbar-color:#3a3a3a #141414; }
.cs-tblwrap::-webkit-scrollbar { width:10px; height:10px; }
.cs-tblwrap::-webkit-scrollbar-track { background:#141414; }
.cs-tblwrap::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:6px; border:2px solid #141414; }
.cs-tblwrap::-webkit-scrollbar-corner { background:#141414; }


/* every grid keeps its shape whatever a filter leaves (user, 2026-10-08): thirteen
   equal rows - a table otherwise hands its height to the rows with names in them */
.pfr-vgrid { table-layout:fixed; }
.pfr-vgrid tr { height:calc(100% / 13); }
.pfr-vgrid td { overflow:hidden; }
/* the explorer's suits, one row in the modes' line: the higher card's, a rule, the lower card's */
.cs-suitline { display:inline-flex; align-items:center; gap:6px; }
.cs-suitsep { width:1px; height:16px; background:var(--c-line); }
.cs-vshow { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; min-width:0; }
.cs-suitline { gap:3px; flex:none; }
.cs-suitline .cs-suits { gap:1px; }
.cs-vshow > .cx-btn.ghost { height:22px; padding:0 6px; flex:none; }
.cs-vshow .cs-vclr { flex:none; width:22px; height:22px; color:var(--c-acc); }

#pf-report .cs-vshow > .cs-seg button { padding:0 5px; font-size:12px; }
#pf-report .cs-suitline .pfr-vsuit { width:19px; min-width:0; height:20px; padding:0; font-size:11px; border-radius:5px; }

.cs-rxfoot .cs-vclr { height:20px; padding:0 6px; margin-right:8px; color:var(--c-acc); }
/* a flop the line barely reaches: faded, out of the Total (2026-10-08) */
#pfr-tbl tr.lowreach > td { opacity:.35; }
#pfr-tbl tr.lowreach.rg-on > td { opacity:.7; }
/* the villain's decision before this one, above the report's grid (2026-10-08) */
.cs-rgprev { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11.5px; }
.cs-rgpv { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:5px; border:1px solid var(--c-line); background:var(--c-s2); }
.cs-rgpv b { color:var(--ac); font-weight:700; }
.cs-rgpv.on { border-color:var(--ac); box-shadow:inset 0 0 0 1px var(--ac); }
/* the same, under a report's name on the compare table */
.cs-sphprev { justify-content:center; margin-top:5px; font-size:10.5px; font-weight:500; gap:4px; }
.cs-sphprev .cs-rgpv { padding:1px 6px; }
/* the grid's report when several are compared (2026-10-09) */
.cs-rgspot { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.cs-rgspot b { color:var(--c-acc); }