/* ═══════════════════════════════════════════════════════════════
   2.0 TRAIN (user, 2026-10-02: direction C, "Coach"; js/ctrain.js).
   The setup (Spots / Weakest lines + the Session panel), the hand (one top
   row, the table, one verdict line, the buttons, one question slot, the
   session panel on the right) and the block summary. Built on the frame's
   tokens (--c-*) and pieces (.cx-card, .cx-btn, .cx-tag ...) in index.html.
   Loaded after index.html's own styles; the in-hand rules carry
   body.cx-hand so they outrank the trainer's #app.pf-mode rules, and they
   apply to the single table only - the 2/4-table frames keep their layout.
   ═══════════════════════════════════════════════════════════════ */

/* ---- shared pieces ---------------------------------------------------------------- */
.cx-toggle { position:relative; width:36px; height:20px; flex:none; padding:0; border-radius:999px; border:1px solid var(--c-line); background:var(--c-s3); cursor:pointer; }
.cx-toggle::after { content:''; position:absolute; left:3px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--c-faint); transition:left .15s, background .15s; }
.cx-toggle.on { background:color-mix(in srgb, var(--c-acc) 35%, var(--c-s3)); border-color:var(--c-acc); }
.cx-toggle.on::after { left:19px; background:var(--c-acc); }
.cx-toggle:disabled { opacity:.45; cursor:default; }
.cx-toggle:focus-visible { outline:2px solid var(--c-acc); outline-offset:2px; }
.cx-ck { position:relative; display:block; width:16px; height:16px; padding:0; border-radius:4px; border:1.5px solid var(--c-faint); background:transparent; cursor:pointer; }
.cx-ck:hover { border-color:var(--c-dim); }
.cx-ck.on { background:var(--c-acc); border-color:var(--c-acc); }
.cx-ck.on::after { content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--c-acc-tx); border-width:0 2px 2px 0; transform:rotate(45deg); }
.cx-num.good, td.good { color:var(--c-good); }
.cx-num.bad, td.bad { color:var(--c-bad); }
.cx-num.warn, td.warn { color:var(--c-warn); }
.cx-num.elo, td.elo { color:var(--c-elo); }
kbd { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:5px;
  border:1px solid var(--c-line); background:var(--c-s2); color:var(--c-dim); font:600 10px var(--c-mono); }
.cx-btn.cx-gold { background:var(--gold); border-color:var(--gold); color:#2a1e05; font-weight:800; }
.cx-btn.cx-gold:hover { background:#f0c264; border-color:#f0c264; }
.cx-vs > span { width:auto; white-space:nowrap; }

/* ---- the setup ------------------------------------------------------------------------ */
#pf-select.cx-train { padding:0; max-width:none; margin:0; align-items:stretch; gap:0; overflow-y:auto; box-sizing:border-box; }
#pf-select.cx-train .cx-tr-wrap { max-width:1400px; }
.cx-tr-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.cx-tr-head .cx-h1 { margin:0 6px 0 0; }
#pf-select.cx-train .cx-tr-status { margin:0 0 0 6px; padding:0; border:0; background:none; font-size:11.5px; color:var(--c-faint); gap:7px; }
.cx-tr-next { display:flex; align-items:center; gap:8px; margin-left:8px; font-size:12px; }
.cx-tr-next .cx-btn { max-width:360px; overflow:hidden; text-overflow:ellipsis; }
#pf-select.cx-train .pf-top2 { margin-bottom:12px; }
#pf-select.cx-train .pf-top2:has(> [style*="none"]:only-child), #pf-select.cx-train .pf-err:empty { display:none; }
#pf-select.cx-train .pf-err { margin:0 0 12px; max-width:none; }
.cx-tr-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:20px; align-items:start; }
#pf-select.cx-train .pf-plan { display:flex; flex-direction:column; gap:12px; min-width:0; margin:0; padding:0; background:none; border:0; border-radius:0; }
.cx-tr-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cx-search { display:flex; align-items:center; gap:8px; width:200px; height:36px; padding:0 12px; box-sizing:border-box; flex:none;
  border-radius:999px; border:1px solid var(--c-line); background:var(--c-s1); color:var(--c-faint); }
.cx-search:focus-within { border-color:var(--c-acc); }
.cx-search svg { display:block; flex:none; }
.cx-search input { flex:1; min-width:0; padding:0; border:0; outline:none; background:none; color:var(--c-tx); font:600 12.5px 'Manrope', sans-serif; }
.cx-search input::placeholder { color:var(--c-faint); }
.cx-search input::-webkit-search-cancel-button { filter:invert(.6); }
.cx-tr-tcard { padding:0; overflow:auto; }
.cx-t tr[data-k] { cursor:pointer; }
.cx-t tbody tr[data-k]:hover td { background:rgba(255,255,255,.022); }
.cx-t tbody tr.sel td { background:color-mix(in srgb, var(--c-acc) 9%, transparent); }
.cx-t tbody tr.dim td { opacity:.5; }
.cx-t .ck { width:18px; padding-left:16px; padding-right:4px; }
.cx-t .sp b { font-weight:700; margin-right:4px; }
.cx-t td.dim { color:var(--c-dim); }
.cx-t td.thin { color:var(--c-faint); }
.cx-t td .cx-tag { vertical-align:middle; }
.cx-t-note td { text-align:center; color:var(--c-faint); font-size:12px; }
.cx-seatname { margin-left:6px; font-size:11.5px; }
.cx-share { display:flex; align-items:center; gap:8px; }
.cx-share-bar { position:relative; width:80px; height:6px; flex:none; border-radius:3px; background:var(--c-s3); }
.cx-share-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--c-good); }
.cx-share-bar i.warn { background:var(--c-warn); }
.cx-share-bar em { position:absolute; top:-3px; width:2px; height:12px; margin-left:-1px; background:var(--c-tx); }
.cx-share span { font-size:11px; color:var(--c-dim); }
.cx-prov { font-style:normal; color:var(--c-faint); margin-left:1px; }
.cx-chipbtn { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--c-line); background:var(--c-s2); color:var(--c-tx); font:600 11.5px var(--c-mono); }
.cx-chipbtn:hover { border-color:var(--c-acc); color:var(--c-acc); }
.cx-chipbtn svg { display:block; }
.cx-t .cx-btn svg { display:block; }
.cx-linek { color:var(--c-acc); font-weight:600; }
.cx-linek.flag::after { content:''; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background:var(--c-bad); vertical-align:2px; }
.cx-t-lines td.nm b { font-weight:600; }
.cx-t-lines .cx-vs-bar { width:110px; }
/* at 1280 the row ran 12px past its card and a white scrollbar showed under
   the table: the spot may wrap, and a scrollbar, when one is needed, is the app's (2026-10-02) */
.cx-t-lines td.dim { white-space:nowrap; }
.cx-t-lines th.cx-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.cx-t-lines th.cx-sortable:hover, .cx-t-lines th.cx-sortable.on { color:var(--c-tx); }
.cx-t-lines .cx-sortdir { font-style:normal; font-size:8px; margin-left:4px; color:var(--c-acc); }
.cx-tr-tcard { scrollbar-width:thin; scrollbar-color:#333 transparent; }
.cx-t-lines .cx-vs > span { font-size:11.5px; color:var(--c-dim); }
.cx-t-lines .cx-vs > span i { font-style:normal; color:var(--c-faint); }
.cx-score { font-weight:700; }
.cx-tr-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font-size:11.5px; color:var(--c-dim); }
.cx-tr-foot b { margin-right:5px; color:var(--c-tx); font-weight:500; font-size:13px; }
.cx-tr-foot b i { font-style:normal; color:var(--c-faint); }
.cx-leg { display:inline-flex; align-items:center; gap:6px; }
.cx-leg i { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--c-acc); }
.cx-leg i.gto { width:2px; height:12px; border-radius:1px; background:var(--c-tx); }
.cx-tr-none { display:flex; flex-direction:column; gap:12px; padding:28px 30px; }
.cx-tr-none h2 { margin:0; font-size:26px; color:var(--c-tx); }

/* the Session panel */
.cx-sess { position:sticky; top:12px; display:flex; flex-direction:column; gap:16px; }
.cx-sess:empty { display:none; }
.cx-sess-h { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cx-sess-h b { font-size:15px; color:var(--c-tx); line-height:1.3; overflow-wrap:anywhere; }
.cx-sess-h .cx-faint { font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.cx-sess-f { display:flex; flex-direction:column; gap:6px; }
.cx-sess-f > span { font-size:12px; }
.cx-sess-tg { display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--c-tx); }
.cx-sess-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cx-sess > .cx-tag { align-self:flex-start; }
.cx-btn.cx-sess-go { height:50px; font-size:15px; }
.cx-btn.cx-sess-go svg { display:block; }

/* ---- the summary (on the Train page) --------------------------------------------------- */
#pf-select.cx-sum-on .cx-tr-grid { grid-template-columns:minmax(0, 1fr); }
#pf-select.cx-sum-on #cx-sess, #pf-select.cx-sum-on .pf-top2 { display:none; }
.cx-sum { width:100%; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; }
.cx-sum-head { display:flex; flex-direction:column; align-items:center; gap:6px; margin:4px 0 24px; text-align:center; }
.cx-sum-head h1 { margin:0; font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--c-tx); }
.cx-sum-head .cx-faint { font-size:13px; }
.cx-sum-row { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap:16px; }
.cx-sum-row .cx-card { padding:22px; display:flex; flex-direction:column; gap:10px; }
.cx-sum-rate .cx-big { margin:4px 0 0; gap:12px; }
.cx-sum-rate .cx-big b { font-size:44px; font-weight:600; }
.cx-sum-d { font-size:18px; }
.cx-bar.cx-tier { height:8px; margin-top:4px; }
.cx-sum-rk { font-size:12px; }
.cx-gbar { display:flex; height:10px; margin-top:6px; border-radius:5px; overflow:hidden; background:var(--c-s3); }
.cx-gbar i { display:block; height:100%; }
.cx-gbar i.best, .cx-gleg .best i { background:#3ccf7c; }
.cx-gbar i.good, .cx-gleg .good i { background:#62dccf; }
.cx-gbar i.size, .cx-gleg .size i { background:#f2b13a; }
.cx-gbar i.action, .cx-gleg .action i { background:#f06a5a; }
.cx-gleg { display:flex; flex-wrap:wrap; gap:12px; font:500 12px var(--c-mono); color:var(--c-dim); }
.cx-gleg span { display:inline-flex; align-items:center; gap:5px; }
.cx-gleg i { display:inline-block; width:9px; height:9px; border-radius:2px; }
.cx-sum-leaks { margin-top:6px; }
.cx-sum-sets { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cx-sum-set { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; font-size:12px;
  background:var(--c-s1); border:1px solid var(--c-line); color:var(--c-dim); }
.cx-sum-set b { font-weight:600; color:var(--c-tx); }
.cx-sum-set i { font-style:normal; color:var(--c-elo); }
.cx-sum-set em { font-style:normal; }
.cx-sum-set em.up { color:var(--c-good); } .cx-sum-set em.down { color:var(--c-bad); }
.cx-sum-mh { display:flex; align-items:center; gap:10px; margin:26px 0 10px; }
.cx-sum-h3 { margin:0; font-size:16px; font-weight:700; color:var(--c-tx); }
.cx-sum-h3 .cx-num { font-size:13px; font-weight:500; margin-left:4px; }
.cx-misses { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.cx-miss { display:flex; flex-direction:column; gap:10px; padding:18px; }
.cx-miss-h { display:flex; align-items:center; gap:8px; font-size:12px; }
.cx-miss-cards { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.cx-card-s { display:inline-block; width:30px; height:42px; flex:none; border-radius:5px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.cx-miss-gap { width:10px; }
.cx-miss-t { font-size:12.5px; color:var(--c-tx); }
.cx-miss-btns { display:flex; gap:6px; }
.cx-sum-notice { margin-top:16px; font-size:12px; color:var(--c-dim); }
.cx-sum-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.cx-btn.cx-sum-next { padding:0 28px; height:50px; }
@media (max-width: 1100px) {
  .cx-tr-grid { grid-template-columns:minmax(0, 1fr); }
  .cx-sess { position:static; }
  .cx-sum-row, .cx-misses { grid-template-columns:minmax(0, 1fr); }
}


/* ---- the hand ------------------------------------------------------------------------- */
#cx-htop, #cx-hside, .cx-q { display:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .stats-bar,
body.cx-hand #app:is(.pf-mode, .pre-drill) .scenario-title,
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-history { display:none !important; }
body.cx-hand #app:is(.pf-mode, .pre-drill) { background:radial-gradient(ellipse at 38% 35%, #1c1c1c 0%, #111111 70%); }
body.cx-hand #app:is(.pf-mode, .pre-drill) .game-area {
  display:grid; grid-template-columns:minmax(0, 1fr) 360px; grid-template-rows:auto auto auto minmax(0, 1fr);
  grid-template-areas:"top side" "table side" "row side" ". side";
  gap:0; align-items:start; width:100%; height:100%; max-width:none; margin:0; padding:0; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; }

/* the top row */
body.cx-hand #cx-htop { grid-area:top; display:flex; align-items:center; gap:10px; min-width:0; padding:12px 20px 4px; box-sizing:border-box; }
body.cx-hand #cx-htop > .cx-btn svg { display:block; }
.cx-ht-mid { flex:0 1 auto; max-width:48%; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; }
.cx-ht-mid b { font-size:15px; font-weight:700; color:var(--c-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-ht-mid .cx-tag { flex:none; }
.cx-swap s { opacity:.5; }
/* the hand's line (testers 2026-10-04): one row of the Study viewer's navigator
   chips - seat, then action, in its button's colour; the cards as chips of
   their own. In the row's own height: it never takes room from the table. */
.cx-ht-line { flex:1 1 0; min-width:0; display:flex; align-items:center; }
body.cx-hand #app #cx-htop .pf-line { position:static; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; width:auto; min-width:0; max-width:100%;
  margin:0; padding:0 0 0 10px; border:0; border-left:1px solid var(--c-line); border-radius:0; background:none; box-shadow:none; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; pointer-events:auto; z-index:auto; }
body.cx-hand #app #cx-htop .pf-line::-webkit-scrollbar { display:none; }
body.cx-hand #app #cx-htop .pf-line.clip { -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px); mask-image:linear-gradient(90deg, transparent 0, #000 28px); }
body.cx-hand #app #cx-htop .pf-line .pf-line-row { display:contents; }
body.cx-hand #app #cx-htop .pf-line .pf-line-st { flex:none; min-width:0; margin-right:2px; font:700 10.5px 'Manrope', sans-serif; letter-spacing:.08em; color:var(--c-faint); }
/* filled chips, the viewer's navigator look (Deeepz 2026-10-05: the 20% tints blended into the
   background): the action's colour, white ink - dark on a pale one (.lt) - the seat a little dimmer */
body.cx-hand #app #cx-htop .pf-line .pf-line-act { --ac:#3a3a3a; flex:none; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; margin:0;
  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; box-shadow:none; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.lt { color:#14100a; text-shadow:none; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act i { font-style:normal; font-size:10px; font-weight:700; color:inherit; opacity:.72; }
/* your own actions: an orange ring clear of the fill */
body.cx-hand #app #cx-htop .pf-line .pf-line-act.me { box-shadow:inset 0 0 0 2px var(--c-acc); }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.me:not(.cx-lnc) { color:var(--c-acc); }
/* the board: a raised card plate with a clear edge (the suits are coloured for a dark ground) */
body.cx-hand #app #cx-htop .pf-line .pf-line-act.card { padding:0 7px; gap:3px; font:700 13px var(--c-mono, monospace); letter-spacing:0;
  background:#2c2c2c; border-color:#5c5c5c; color:#f2efea; text-shadow:none; box-shadow:0 1px 3px rgba(0,0,0,.5); }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.dim { background:none; border-color:var(--c-line); color:var(--c-faint); text-shadow:none; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.nav { cursor:pointer; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.nav:hover { background:var(--ac); border-color:rgba(255,255,255,.45); }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.card.nav:hover { background:#363636; border-color:#888; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.nav:focus-visible { outline:2px solid var(--c-acc); outline-offset:1px; }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.at { box-shadow:inset 0 0 0 2px var(--c-tx); }
body.cx-hand #app #cx-htop .pf-line .pf-line-act.ahead { opacity:.4; }
body.cx-hand #app #cx-htop .pf-line.tight { gap:3px; }
body.cx-hand #app #cx-htop .pf-line.tight .pf-line-act { padding:0 6px; gap:4px; }
.cx-ht-menu { position:relative; flex:none; }
.cx-hmenu { position:absolute; right:0; top:40px; z-index:80; width:290px; padding:14px; box-sizing:border-box; display:flex; flex-direction:column; gap:14px;
  border-radius:14px; background:var(--c-s1); border:1px solid var(--c-line); box-shadow:0 18px 40px rgba(0,0,0,.6); }
.cx-hmenu[hidden] { display:none; }
.cx-hm-sec { display:flex; flex-direction:column; gap:8px; }
body.cx-hand #app.pf-mode .cx-hm-sess .pf-opts { display:flex; flex-direction:column; gap:6px; }
body.cx-hand .cx-hm-sess .pf-opt { width:100%; height:32px; box-sizing:border-box; justify-content:space-between; padding:0 10px 0 12px; margin:0;
  border-radius:10px; border:1px solid var(--c-line); background:var(--c-s2); color:var(--c-dim); font:700 10.5px 'Manrope', sans-serif; letter-spacing:.06em; }
body.cx-hand .cx-hm-sess .pf-opt select { color:var(--c-tx); font-size:12.5px; background:transparent; }
body.cx-hand .cx-hm-sess .pf-opt select option { background:var(--c-s1); }
body.cx-hand .cx-hm-sess .pf-opt-elo { justify-content:flex-start; gap:8px; }
.cx-hm-open { display:flex; flex-wrap:wrap; gap:6px; }
body.cx-hand .cx-hm-open .home-btn { height:30px; padding:0 12px; border-radius:var(--c-rs); border:1px solid var(--c-line); background:var(--c-s2);
  color:var(--c-tx); font:600 12px 'Manrope', sans-serif; }
body.cx-hand .cx-hm-open .home-btn:hover { border-color:#444; color:var(--c-tx); }
.cx-hm-more { flex-direction:row; flex-wrap:wrap; gap:4px; padding-top:10px; border-top:1px solid var(--c-line); }
.cx-hm-more .cx-btn { gap:6px; }
.cx-hm-more kbd { height:16px; font-size:9.5px; }

/* the felt and the row under it */
body.cx-hand #app:is(.pf-mode, .pre-drill) .table-wrap { grid-area:table; justify-self:center; align-self:start; margin:0; transform-origin:top center; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-wrap { grid-area:row; display:grid; grid-template-columns:auto auto; grid-template-areas:"fb fb" "rng btn" "q q";
  justify-content:center; justify-items:center; align-items:center; gap:10px 16px; width:auto; max-width:calc(100% - 32px); height:auto;
  margin:4px auto 0; padding:0; position:relative; z-index:20; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb { grid-area:fb; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px;
  max-width:min(900px, 100%); min-height:42px; padding:6px 16px; box-sizing:border-box; border-radius:14px; font-size:14px;
  background:var(--c-s1); border:1px solid var(--c-line); zoom:1 !important; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb:empty { visibility:hidden; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-fb { padding:3px 10px; }
/* the verdict at reading size (user, 2026-10-02: "way too small ... compared to old format") */
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-fb { gap:10px; font-size:15px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-pill { font-size:15px; padding:4px 11px; border-radius:7px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-freq { font-size:15px; font-weight:700; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-ico { font-size:18px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-bar { flex:0 0 auto; width:220px; min-width:0; max-width:none; height:14px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-bar i { height:14px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-bar i:first-child { border-radius:5px 0 0 5px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-bar i:last-of-type { border-radius:0 5px 5px 0; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-bar u { width:3px; top:-3px; bottom:-3px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-note { font-size:13px; }
/* the range hands a reviewed node asked sit BESIDE your plate, two to a column,
   not stacked under it: under it they ran off the table's lower edge and the
   review row (the bigger verdict box) covered them (user, 2026-10-03) */
body.cx-hand #app.pf-mode .pf-alt-strip { top:50%; left:calc(100% + 20px); transform:translateY(-50%);
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto); gap:3px 4px; }
/* an extra range hand's box reads at the same size as your own verdict in that place */
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-extra-cap { font-size:11px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-extra-cards { font-size:17px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-extra-roll { font-size:14px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-extra-v { font-size:15px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-fb .pf-fb.wide { flex-basis:100%; justify-content:center; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-slot { grid-area:rng; justify-self:end; margin:0; visibility:visible !important; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-number { font-size:30px; min-width:52px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-number::before { content:'Roll'; text-transform:uppercase; font-size:9.5px; color:var(--c-dim); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #action-buttons { grid-area:btn; justify-self:start; margin:0; gap:12px; max-width:none; min-height:54px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-btn { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto; align-content:center; align-items:center;
  column-gap:10px; height:54px; min-width:0; padding:0 12px 0 16px; border-radius:12px; text-align:left; font-size:15px; line-height:1.15; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-btn .pf-b1 { grid-column:1; grid-row:1; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-btn .pf-b2 { grid-column:1; grid-row:2; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-btn .key-hint { position:static; grid-column:2; grid-row:1 / 3; width:auto; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
  border-radius:5px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85); font:600 10.5px var(--c-mono); }
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-btn.pf-continue { grid-column:1 / -1; }
/* the preflop drill's buttons are the hand's (2026-10-02) */
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-slot-empty { height:54px; }
/* A question on screen holds the buttons: they stay where they are, dimmed
   (the guess is asked after you acted - your pick stays outlined) - except
   under the river size question, where the kept sizes ARE the answer: there
   they are not shown at all (no spoilers before a decision). */
body.cx-hand #app:is(.pf-mode, .pre-drill) .action-buttons.pf-held { display:grid !important; opacity:.35; pointer-events:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-wrap:has(#pf-predict.pf-sizes) .action-buttons.pf-held { visibility:hidden; }

/* the one question slot */
body.cx-hand .cx-q { display:block; grid-area:q; max-width:min(860px, 100%); }
body.cx-hand .cx-q:empty { display:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict { grid-area:q; justify-self:center; width:auto; max-width:min(860px, 100%); margin:0; box-sizing:border-box;
  padding:10px 14px; border-radius:12px; border:1px dashed #3a3a3a; background:color-mix(in srgb, var(--c-s1) 70%, transparent); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict.pf-sizes { width:min(720px, 100%); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict .pf-predict-row { flex-wrap:wrap; row-gap:8px; justify-content:center; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .rng-wrap:has(#pf-predict.pf-sizes) .rng-slot { visibility:visible; }
body.cx-hand .cx-q > .pf-fb { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; padding:10px 14px; border-radius:12px;
  border:1px dashed rgba(192,132,252,.5); background:rgba(192,132,252,.06); color:var(--c-tx); font-size:13.5px; }
.cx-qtag { flex:none; }
.pf-pred-top { justify-content:center; }
.pf-sizes-top { flex-wrap:wrap; justify-content:center; }
/* the size question (2026-10-02): "Pick K" up front, K slots that fill, a count,
   Lock in only at exactly K, the picked chips badged */
.pf-sizes .pf-predict-q { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.pf-predict-q b.pf-pick-k { font:800 17px 'Manrope', sans-serif; color:var(--c-acc); white-space:nowrap; }
.pf-predict-q .pf-pred-any { color:var(--c-dim); font-weight:500; } .pf-predict-q .pf-pred-any b { color:var(--c-tx); }
.pf-pick-of { font-size:13px; color:var(--c-dim); }
.pf-pick-of i { font-style:normal; color:var(--c-faint); }
.pf-pick-slots { display:flex; align-items:center; gap:6px; flex:none; }
.pf-pick-slot { min-width:56px; height:28px; padding:0 8px; box-sizing:border-box; border-radius:8px; border:1.5px dashed var(--c-faint);
  background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:5px; font:600 12px var(--c-mono); color:var(--c-tx); }
.pf-pick-slot.full { border-style:solid; border-color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 14%, transparent); cursor:pointer; }
.pf-pick-slot.full i { font-style:normal; font-size:13px; color:var(--c-dim); }
.pf-pick-slot.full:hover i { color:var(--c-tx); }
.pf-pick-n { font:600 12px var(--c-mono); color:var(--c-dim); margin-left:2px; }
.pf-pick-n.done { color:var(--c-good); }
.pf-sizes .pf-qlock:disabled { opacity:.4; cursor:default; }
.pf-sizes .pf-qlock:not(:disabled) { background:var(--c-acc); border-color:var(--c-acc); color:var(--c-acc-tx); font-weight:800; }
.pf-sizes .pf-sizechip.on::after { content:'\2713'; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 1px 4px rgba(0,0,0,.4); }

/* the session panel */
body.cx-hand #cx-hside { grid-area:side; grid-row:1 / -1; align-self:start; position:sticky; top:0; display:flex; flex-direction:column; gap:14px; height:100vh; box-sizing:border-box;
  padding:16px 16px 16px; overflow-x:hidden; overflow-y:auto; border-left:1px solid var(--c-line); background:var(--c-s1); }
.cx-side-head { display:flex; flex-direction:column; gap:10px; flex:none; }
.cx-sh-top { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.cx-bar.cx-sh-bar { height:6px; margin:0; }
.cx-cts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.cx-ct { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; background:var(--c-s2); }
.cx-ct b { font-size:17px; font-weight:600; color:var(--c-tx); }
.cx-ct.good b { color:var(--c-good); } .cx-ct.elo b { color:var(--c-elo); } .cx-ct.warn b { color:var(--c-warn); } .cx-ct.bad b { color:var(--c-bad); }
.cx-ct span { font-size:10.5px; color:var(--c-dim); }
.cx-sh-rate { display:flex; align-items:center; gap:6px; font-size:12px; }
.cx-sh-rate svg { display:block; flex:none; }
.cx-sh-rate b { font-size:14px; font-weight:600; }
.cx-sh-rate .cx-num.up { color:var(--c-good); } .cx-sh-rate .cx-num.down { color:var(--c-bad); }
.cx-side-body { display:flex; flex-direction:column; gap:10px; min-width:0; padding-top:12px; border-top:1px solid var(--c-line); }
/* the panel doesn't scroll (user 2026-10-05): the hands list holds the bottom and scrolls on its
   own, giving way down to two hands; the range above is never cut (2026-10-06) - only a very short
   window scrolls the panel */
body.cx-hand #cx-side { flex:1 1 auto; min-height:0; }
body.cx-hand #cx-side > :not(#result-section):not(#pf-blocklist) { flex-shrink:0; }
.cx-side-cap { margin-top:4px; }
.cx-dec-cap { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; padding-top:10px; border-top:1px solid var(--c-line); }
/* the strip: the old session strip's figures, small */
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip { display:flex; flex-wrap:wrap; gap:10px 16px; width:auto; height:auto; min-height:0; max-width:none; margin:0; padding:0;
  background:none; border:0; border-radius:0; overflow:visible; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip > .pf-meta:first-child:not(:only-child),
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip > .pf-planchip { display:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip .pf-meta > span { font-size:9.5px; color:var(--c-faint); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip .pf-meta b { font-size:12.5px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip .pf-meta:only-child { flex:1; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-strip .pf-meta:only-child b { white-space:normal; color:var(--c-tx); }
/* this decision: the range, behind its veil until you act */
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section { width:auto; height:auto; min-height:220px; margin:0; padding:0; overflow:visible; box-sizing:border-box;
  background:none; border:0; border-radius:12px; gap:8px; align-self:auto; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section.villain { padding:6px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .range-veil { border-radius:12px; background:color-mix(in srgb, var(--c-s1) 55%, transparent); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #eq-chart { max-height:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #eq-chart .eq-svg { width:100%; height:auto; }
/* the hands played this block */
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blocklist { display:none; flex:1 1 0; flex-direction:column; max-height:none !important; height:auto !important; width:auto;
  min-height:var(--bl-min, 330px); margin:0 !important; padding:12px 0 0; background:none; border:0; border-top:1px solid var(--c-line); border-radius:0; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blocklist.show { display:flex; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-bl-head { flex:none; flex-wrap:wrap; gap:4px 10px; margin-bottom:6px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-bl-head .pf-flabel { flex-basis:100%; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--c-dim); font-weight:700; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-bl-scroll { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overflow-x:hidden; padding-right:2px;
  scrollbar-width:thin; scrollbar-color:#333 transparent; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blc-row { padding:6px 8px; border-radius:10px; background:var(--c-s2); }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blc-row.miss { background:color-mix(in srgb, var(--c-bad) 8%, var(--c-s2)); }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blc-btns .pf-bl-view { height:22px; padding:0 8px; border-radius:7px; border:1px solid var(--c-line); background:var(--c-s1); color:var(--c-tx); font-size:11px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blc-btns .pf-bl-view:hover { border-color:var(--c-acc); }

@media (max-width: 1150px) {
  body.cx-hand #app:is(.pf-mode, .pre-drill) .game-area { grid-template-columns:minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  body.cx-hand #app:is(.pf-mode, .pre-drill) .game-area { grid-template-columns:minmax(0, 1fr); grid-template-areas:"top" "table" "row" "side"; overflow-y:auto; }
  body.cx-hand #cx-hside { grid-row:auto; height:auto; overflow:visible; border-left:0; border-top:1px solid var(--c-line); }
  body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-blocklist { flex:none; }
  body.cx-hand #app:is(.pf-mode, .pre-drill) .pf-bl-scroll { max-height:calc(var(--bl-min, 330px) - 50px); }
}

/* in a hand the gear and the window button sit in the menu (they covered the panel) */
body.cx-hand:has(#trainer-view:not([style*="none"]) #app:not([style*="none"])) #global-settings-btn,
body.cx-hand:has(#trainer-view:not([style*="none"]) #app:not([style*="none"])) #smpt-winbtn { display:none !important; }
body.cx-hand #cx-hside { scrollbar-width:thin; scrollbar-color:#333 transparent; }
.cx-inf { font-size:16px; line-height:1; }
/* ---- 2 / 4 tables (2026-10-02): the parent page of the table frames, in C ---------------- */
#pf-multi.cx-multi { background:var(--bg, #121212); font-family:'Manrope', sans-serif; }
#pf-multi.cx-multi .cx-mtop { gap:14px; padding:10px 16px; border-bottom:1px solid var(--c-line); flex-wrap:nowrap; }
#pf-multi.cx-multi .pf-multi-strip { display:flex !important; align-items:center; gap:24px; min-height:0; padding:0; background:none; border:0; flex:1 1 auto; overflow:hidden; }
#pf-multi.cx-multi .cx-mset { font-size:14px; font-weight:800; color:var(--c-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:340px; }
#pf-multi.cx-multi .pf-multi-strip .pf-meta { flex-direction:row; align-items:baseline; gap:7px; }
#pf-multi.cx-multi .pf-multi-strip .pf-meta span { font-size:10.5px; letter-spacing:.09em; font-weight:700; color:var(--c-dim); }
#pf-multi.cx-multi .pf-multi-strip .pf-meta b { font:600 14px var(--c-mono); color:var(--c-tx); }
#pf-multi.cx-multi .pf-multi-strip .pf-meta.elo b { color:var(--c-elo); }
#pf-multi.cx-multi .pf-multi-strip .pf-meta i { font:500 11.5px var(--c-mono); color:var(--c-dim); }
#pf-multi.cx-multi .pf-multi-strip .pf-meta i.up { color:var(--c-good); }
#pf-multi.cx-multi .pf-multi-strip .pf-meta i.down { color:var(--c-bad); }
#pf-multi.cx-multi .pf-multi-ctl { gap:12px; flex:none; flex-wrap:nowrap; }
#pf-multi.cx-multi .cx-msel, #pf-multi.cx-multi .cx-mrated { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--c-dim); cursor:pointer; }
#pf-multi.cx-multi .cx-msel select { height:30px; padding:0 8px; border-radius:var(--c-rs); background:var(--c-s1); border:1px solid var(--c-line); color:var(--c-tx);
  font:600 12px 'Manrope', sans-serif; cursor:pointer; }
#pf-multi.cx-multi .pf-multi-grid { gap:10px; padding:12px 16px 0; }
#pf-multi.cx-multi .pf-multi-cell { border:1px solid var(--c-line); border-radius:var(--c-r); background:var(--c-s1); }
#pf-multi.cx-multi .pf-multi-cell.hot { border-color:var(--c-acc); box-shadow:0 0 0 1px var(--c-acc); }
#pf-multi.cx-multi .pf-multi-frame { background:var(--c-s1); }
#pf-multi.cx-multi .pf-multi-tag { top:10px; left:12px; padding:3px 9px; border-radius:999px; background:var(--c-s3); color:var(--c-dim);
  font:700 10px 'Manrope', sans-serif; letter-spacing:.09em; }
#pf-multi.cx-multi .pf-multi-cell.hot .pf-multi-tag { color:var(--c-acc-tx); background:var(--c-acc); }
#pf-multi.cx-multi .pf-multi-wait { border-radius:var(--c-rs); background:var(--c-s2); border:1px solid var(--c-line); }
#pf-multi.cx-multi .pf-multi-hands { margin:12px 16px 16px; padding:12px 16px; border-radius:var(--c-r); background:var(--c-s1); border:1px solid var(--c-line); }
#pf-multi.cx-multi .pf-bl-head { display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:800; color:var(--c-tx); text-transform:none; letter-spacing:0; }
#pf-multi.cx-multi .pf-bl-head .pf-dim { font:500 11.5px var(--c-mono); color:var(--c-faint); }
#pf-multi.cx-multi .pf-mhands-tog { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--c-dim); text-decoration:none; }
#pf-multi.cx-multi .pf-mhands-tog:hover { color:var(--c-tx); }
#pf-multi.cx-multi .pf-bl-empty { color:var(--c-faint); font-size:12.5px; padding-top:8px; }
#pf-multi.cx-multi .pf-bl-tbl.cx-t { font-size:12.5px; }
#pf-multi.cx-multi .pf-bl-tbl.cx-t th { padding:8px 10px; }
#pf-multi.cx-multi .pf-bl-tbl.cx-t td { padding:6px 10px; }
#pf-multi.cx-multi .pf-bl-scroll { scrollbar-width:thin; scrollbar-color:#333 transparent; }
/* the window and Settings buttons are in the bar here */
body:has(:is(#pf-multi, #pf-watch):is([style*="flex"], [style*="block"])) :is(#smpt-winbtn, #global-settings-btn) { display:none !important; }
.pw-top .cx-barbtn { width:28px; height:28px; border-radius:8px; }
/* the weekly report: one row in a card - caption, four numbers, Got it (2026-10-02) */
#pf-select.cx-train .pf-weekly { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:14px 20px; border-radius:var(--c-r);
  background:var(--c-s1); border:1px solid var(--c-line); }
#pf-select.cx-train .pf-weekly[style*="none"] { display:none; }
#pf-select.cx-train .pf-weekly .cx-kvs { margin:0; flex:1; gap:32px; }
#pf-select.cx-train .pf-weekly .cx-kv b { font-size:18px; }
#pf-select.cx-train .pf-weekly .cx-kv b i { font-size:12px; font-style:normal; margin-left:2px; }
#pf-select.cx-train .pf-weekly .cx-kv span { font-size:10px; }
/* two rows of buttons (five actions or more) are a little shorter */
body.cx-hand #app:is(.pf-mode, .pre-drill) #action-buttons:has(> :nth-child(5)) .action-btn,
body.cx-hand #app:is(.pf-mode, .pre-drill) #action-buttons:has(> :nth-child(5)) .action-slot-empty { height:48px; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #action-buttons:has(> :nth-child(5)) { row-gap:8px; }
#cx-cap-dec:has(+ .result-section:not(.blurred)) #cx-dec-note { display:none; }
/* Hide sits in the caption's row, where the note was - over the mix bar it covered the last action (user, 2026-10-03) */
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section .range-hide { top:-25px; right:0; padding:1px 9px; }
/* the frequency guess, compact: each answer's name beside its number */
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict .pf-pred-pair { row-gap:4px; max-width:560px; }
/* the number sits centred over its own slider; the label keeps to the left edge (user, 2026-10-02) */
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict .pf-pred-head { flex-direction:row; justify-content:center; position:relative; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict .pf-pred-head .pf-pred-lab { position:absolute; left:0; top:50%; transform:translateY(-50%); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict { gap:6px; padding:8px 14px; }
/* the panel is a column of its own: the combos card and the equity curve take
   the height they need, so the hands below are not pushed out of reach */
body.cx-hand #app:is(.pf-mode, .pre-drill) { --pf-info-h:auto; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section .hand-info-card { min-height:0; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #eq-chart { max-height:190px; overflow:hidden; }
body.cx-hand #app:is(.pf-mode, .pre-drill) #eq-chart svg { max-height:180px; }
/* once the strategy is shown the curve takes the panel's whole width (testers
   2026-10-04: it was a 180px postage stamp with room to spare below it) */
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section.show:not(.blurred) #eq-chart { max-height:none; overflow:hidden; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section.show:not(.blurred) #eq-chart .eq-head { flex:none; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section.show:not(.blurred) #eq-chart svg { flex:1 1 auto; min-height:0; max-height:none; width:100%; height:auto; }
/* the range and its combos are never cut (user 2026-10-06: the A2o row and the combo viewer were
   clipped): the hands list below gives way first, down to two hands; the curve is capped */
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section { flex:none; overflow:visible; }
body.cx-hand #app:is(.pf-mode, .pre-drill) .result-section.show:not(.blurred) #eq-chart { max-height:min(260px, 24vh); }
body.cx-hand #app:is(.pf-mode, .pre-drill) #pf-predict:not(.pf-donk):not(.pf-sizes) { width:min(620px, 100%); }

/* a leak drill's scope in the hand's top row: Node / Street / Rest of hand */
.cx-scope { margin-left:2px; }
.cx-scope button { height:22px; padding:0 9px; font:600 11px 'Manrope', sans-serif; }

/* the block summary's drilled line: normal play -> this drill, the solver beside */
.cx-sum-drill { margin-top:16px; }
.cx-sum-dr { display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; margin-top:8px; }
.cx-sum-arrow { color:var(--c-faint); font-size:20px; padding-bottom:16px; }
.cx-sum-dr .cx-gto { color:var(--c-acc); }

/* ---- the Preflop Trainer's drill in this hand (js/parts/pretrain.js, 2026-10-02) ----------
   Everything above applies to it (#app.pre-drill); these are the few pieces it has of its own:
   its Stop and sim picker in the menu, who the verdict is about with the hand's mix in words,
   and an orbit's decisions in its row of the hands list. */
.pre-opts { display:none; }
body.cx-hand #app.pre-drill .cx-hm-sess .pre-opts { display:flex; flex-direction:column; gap:6px; }
body.cx-hand .cx-hm-sess .sol-select { width:100%; height:32px; padding:0 8px; box-sizing:border-box; font:600 12.5px 'Manrope', sans-serif; }
.pre-fb-who { font:600 12px var(--c-mono); color:var(--c-dim); white-space:nowrap; }
.pre-mix { flex-basis:100%; text-align:center; font:600 11.5px var(--c-mono); color:var(--c-dim); }
.pf-blc-row.pre { grid-template-areas:'n hand board pct' 'decs decs decs decs' 'tags tags tags btns'; }
.pf-blc-row.pre .pf-blc-board { color:var(--c-dim); font-size:12px; }
.pre-blc-decs { grid-area:decs; display:flex; flex-wrap:wrap; gap:3px 4px; }
.pre-dec { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:6px; font:500 11px var(--c-mono); color:var(--c-dim);
  background:var(--c-s1); border-left:2px solid var(--c-faint); white-space:nowrap; }
.pre-dec b { color:var(--c-tx); font-weight:600; }
.pre-dec.best { border-left-color:#3ccf7c; } .pre-dec.good { border-left-color:#62dccf; }
.pre-dec.size { border-left-color:#f2b13a; } .pre-dec.action { border-left-color:#f06a5a; }
/* Drill a line (2026-10-07): the spots on the left, the line built street by street on the right */
.cx-pk { display:grid; grid-template-columns:minmax(260px, 38%) 1fr; min-height:100%; }
.cx-pk-spots { border-right:1px solid var(--c-line); overflow:auto; }
.cx-pk-build { display:flex; flex-direction:column; gap:12px; padding:14px 16px; min-width:0; }
.cx-pk-streets { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.cx-pk-st { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--c-line); border-radius:10px; background:var(--c-s1); min-height:96px; }
.cx-pk-st.on { border-color:color-mix(in srgb, var(--c-acc) 55%, var(--c-line)); }
.cx-pk-st.dim { opacity:.45; }
.cx-pk-sth { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.cx-pk-bl { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.cx-pk-b { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; font-size:11.5px; font-weight:600; background:var(--c-s3); color:var(--c-dim); }
.cx-pk-b.h { background:color-mix(in srgb, var(--c-acc) 16%, var(--c-s2)); color:var(--c-tx); }
.cx-pk-b.at { outline:1px dashed var(--c-acc); background:none; color:var(--c-acc); }
.cx-pk-ar { font-style:normal; color:var(--c-faint); font-size:11px; }
.cx-pk-next { display:flex; flex-wrap:wrap; gap:4px; width:100%; margin-top:2px; }
.cx-pk-next .cx-chipbtn { font-family:inherit; height:22px; }
.cx-pk-x { display:inline-flex; padding:2px; border:0; background:none; color:var(--c-faint); cursor:pointer; border-radius:4px; }
.cx-pk-x:hover { color:var(--c-bad); }
.cx-pk-now { display:flex; align-items:center; gap:10px; min-height:28px; font-size:12px; }
.cx-pk-list { display:flex; flex-wrap:wrap; gap:6px; }
.cx-chipbtn.on { border-color:var(--c-acc); color:var(--c-acc); }
@media (max-width: 1100px) { .cx-pk { grid-template-columns:1fr; } .cx-pk-spots { border-right:0; border-bottom:1px solid var(--c-line); max-height:240px; } }
.cx-pk-now { flex-wrap:wrap; }
.cx-pk-name { display:inline-flex; align-items:baseline; gap:8px; font-size:13px; }
.cx-pk-name .cx-num { font-size:11.5px; }

/* the session card's one-line summary, and the Start box (2026-10-08) */
.cx-sess-sum { font-size:12.5px; margin:-2px 0 4px; }
.cx-startbox { width:min(640px, 94vw); max-width:none; display:flex; flex-direction:column; gap:14px; }
.cx-startbox-h { display:flex; align-items:center; gap:10px; }
.cx-startbox-h b { font-size:17px; }
.cx-startbox-h .cx-faint { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-sf { display:flex; flex-direction:column; gap:6px; }
.cx-sf2 { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; }
.cx-startbox .cx-sess-row { flex-direction:row; align-items:center; justify-content:space-between; }
.cx-startline { padding:10px 12px; border-radius:10px; background:var(--c-s2); border:1px solid var(--c-line); }
.cx-startnote { font-size:12px; }
/* the flop filter: suits in the row, the rest in a menu under it (2026-10-08) */
.cx-bfrow { position:relative; }
.cx-bfrow > .cx-cap .cx-num { margin-left:6px; text-transform:none; letter-spacing:0; }
.cx-bfline { display:flex; align-items:center; gap:8px; }
.cx-bfline .cx-seg { flex:1; }
.cx-bfline > .cx-btn { white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.cx-bfline > .cx-btn.on { color:var(--c-acc); border-color:var(--c-acc); }
.cx-bfpop { position:absolute; left:0; right:0; bottom:calc(100% - 22px); z-index:5; display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:12px; background:var(--c-s1); border:1px solid var(--c-line); box-shadow:0 18px 44px rgba(0,0,0,.6); }
.cx-bfg { display:flex; flex-direction:column; gap:6px; }
.cx-bfg input { padding:7px 10px; border-radius:8px; border:1px solid var(--c-line); background:var(--c-s2); color:var(--c-tx); font:inherit; font-family:var(--c-mono); }
.cx-bfg input:focus { outline:none; border-color:var(--c-acc); }
.cx-bfhint { font-size:11.5px; }
.cx-bfft { display:flex; align-items:center; gap:8px; }
.cx-bfnote { margin-left:6px; text-transform:none; letter-spacing:0; font-weight:500; }