/* ============================================================================
   ADVANCED FILTER — matches the SmartStats FilterModalV3. Black + red theme
   (implementation-handoff §0 rebuilt, §6.12b). Structure = SmartStats layout:
   title + AI row + 4 top columns + bottom 3-panel band + footer. Twin-only;
   scoped under #rdFilter2. Gold (--s-select) is data-surface only; chrome accent
   is red (--s-accent). Board-filter section (unchanged) kept at the bottom.
   ============================================================================ */
#rdFilter2{
  --s-shell:#07080b; --s-panel:#111318; --s-panel-2:#171a21; --s-control:#20242d;
  --s-line:#282d37; --s-ink:#f2f4f8; --s-muted:#8b93a8;
  --s-accent:#e1261c; --s-accent-ink:#ffffff; --s-accent-text:#ff6b5e; --s-accent-tint:rgba(225,38,28,.13);
  --s-elev:0 22px 60px rgba(0,0,0,.6);
  --disp:'Chakra Petch',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  position:fixed; inset:0; z-index:100000; font-family:var(--body);
}
#rdFilter2[hidden]{ display:none; }
#rdFilter2 *{ box-sizing:border-box; }
#rdFilter2 .rd-fd-scrim{ position:absolute; inset:0; background:rgba(2,3,6,.66); }

/* ---- modal frame ---- */
#rdFilter2 .mw{
  --fd-lmax:340px; --fd-fs:12px;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1264px, 97vw); max-height:84vh; display:flex; flex-direction:column;   /* 84vh (was 94) — lift the bottom edge well off the browser bottom */
  background:var(--s-panel); color:var(--s-ink); border:1px solid var(--s-line);
  border-radius:10px; box-shadow:var(--s-elev); overflow:hidden;
}
/* drag + resize (via window.rdMakeDraggable) — the title bar is the drag handle (cursor:move set in JS) */
#rdFilter2 .rd-resize-h{ position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; z-index:5; }
#rdFilter2 .rd-resize-h::before{ content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px;
  border-right:2px solid var(--s-muted); border-bottom:2px solid var(--s-muted); border-bottom-right-radius:2px; opacity:.7; }
#rdFilter2 .rd-resize-h:hover::before{ border-color:var(--s-ink); opacity:1; }
#rdFilter2 .mw.cd{ --fd-fs:11px; width:min(1080px,97vw); }

/* ---- title bar ---- */
#rdFilter2 .mwt{ display:flex; align-items:center; gap:9px; padding:13px 16px; flex:none;
  background:var(--s-panel-2); border-bottom:1px solid var(--s-line); }
#rdFilter2 .mwt>b{ font:600 17px/1 var(--disp); }
#rdFilter2 .mwt>i{ font-style:normal; font:700 12.5px/1 var(--body); color:#4ade80; }
#rdFilter2 .mwt-r{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; }
#rdFilter2 .mwt-btn{ font:600 11.5px/1 var(--body); color:var(--s-ink); background:var(--s-control);
  border:1px solid var(--s-line); border-radius:6px; padding:7px 11px; cursor:pointer; white-space:nowrap; }
#rdFilter2 .mwt-btn:hover{ border-color:var(--s-muted); }
#rdFilter2 .mwt>u, #rdFilter2 .mwt-r>u{ cursor:pointer; color:var(--s-muted); font-size:16px; line-height:1; padding:2px 4px; }
#rdFilter2 .mwt>u:hover, #rdFilter2 .mwt-r>u:hover{ color:#fff; }

/* help affordance + tooltip */
#rdFilter2 .hlp{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:99px; border:1px solid var(--s-line); background:var(--s-control);
  color:var(--s-muted); font:700 9px/1 var(--body); cursor:help; }
#rdFilter2 .hlp .tip{ display:none; }

/* ---- AI build-filter row ---- */
#rdFilter2 .mwai{ display:flex; align-items:center; gap:9px; padding:11px 16px; flex:none; border-bottom:1px solid var(--s-line); }
#rdFilter2 .spark{ color:var(--s-accent); font-size:15px; }
#rdFilter2 .aiq{ flex:1; height:34px; background:var(--s-shell); border:1px solid var(--s-line); border-radius:7px;
  color:var(--s-ink); font:13px/1 var(--body); padding:0 12px; outline:none; }
#rdFilter2 .aiq::placeholder{ color:var(--s-muted); }
#rdFilter2 .beta{ font:700 8.5px/1 var(--body); letter-spacing:.06em; color:#e8c98a; background:rgba(242,182,50,.14);
  border:1px solid rgba(242,182,50,.4); border-radius:4px; padding:4px 6px; }
#rdFilter2 .aibuild{ background:var(--s-accent); color:var(--s-accent-ink); border:0; border-radius:7px;
  padding:9px 15px; font:700 12.5px/1 var(--body); cursor:pointer; opacity:.55; }

/* ---- 4 top columns ---- */
#rdFilter2 .mwcols{ display:grid; grid-template-columns:1.5fr 0.85fr 1.15fr 1.15fr; flex:1 1 auto; min-height:0; }
#rdFilter2 .col{ background:var(--s-panel); border-left:1px solid var(--s-line); padding:12px 13px;
  display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#rdFilter2 .col:first-child{ border-left:0; }
#rdFilter2 .colh{ display:flex; align-items:center; gap:6px; margin-bottom:8px; flex:none; }
#rdFilter2 .colh>b{ font:600 12.5px/1 var(--disp); color:#fff; text-transform:uppercase; letter-spacing:.03em; }
#rdFilter2 .drv{ font:700 8px/1 var(--body); letter-spacing:.06em; color:#fff; padding:3px 5px; border-radius:3px;
  background:var(--s-accent-tint); border:1px solid rgba(225,38,28,.5); color:var(--s-accent-text); }
#rdFilter2 .aoseg{ margin-left:auto; display:inline-flex; border:1px solid var(--s-line); border-radius:5px; overflow:hidden; background:var(--s-control); }
#rdFilter2 .aoseg span{ font:700 9px/1 var(--body); padding:5px 8px; color:var(--s-muted); cursor:pointer; }
#rdFilter2 .aoseg span.on{ background:var(--s-accent); color:var(--s-accent-ink); }

#rdFilter2 .srch{ position:relative; flex:none; margin-bottom:8px; }
#rdFilter2 .srch input{ width:100%; height:28px; background:var(--s-shell); border:1px solid var(--s-line);
  border-radius:6px; color:var(--s-ink); font:var(--fd-fs)/1 var(--body); padding:0 26px 0 9px; outline:none; }
#rdFilter2 .srch input::placeholder{ color:var(--s-muted); }
#rdFilter2 .srch input:focus{ border-color:var(--s-accent); }
#rdFilter2 .srch u{ position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--s-muted); pointer-events:none; }

/* ODK row (stat column) */
#rdFilter2 .odkrow{ display:flex; align-items:center; gap:5px; flex:none; margin-bottom:8px; }
#rdFilter2 .odkl{ font:600 9px/1 var(--body); letter-spacing:.08em; color:var(--s-muted); margin-right:2px; }
#rdFilter2 .odkrow span{ flex:1; text-align:center; padding:6px 0; border:1px solid var(--s-line); border-radius:5px;
  background:var(--s-control); font:700 10px/1 var(--body); color:var(--s-ink); cursor:pointer; }
#rdFilter2 .odkrow span.on{ background:var(--s-accent-tint); border-color:var(--s-accent); color:var(--s-accent-text); }

/* two-pane (Type→Result, Category→Tags) */
#rdFilter2 .two{ display:grid; grid-template-columns:42% 58%; flex:1 1 auto; min-height:0;
  background:var(--s-shell); border:1px solid var(--s-line); border-radius:6px; overflow:hidden; }
#rdFilter2 .two .tp{ border-right:1px solid var(--s-line); overflow-y:auto; }
#rdFilter2 .two .rp{ overflow-y:auto; }
#rdFilter2 .lsth{ position:sticky; top:0; z-index:1; background:var(--s-panel-2); padding:6px 9px; border-bottom:1px solid var(--s-line);
  font:600 8.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--s-muted); }

/* single-pane list (Players) */
#rdFilter2 .lst{ flex:1 1 auto; min-height:0; overflow-y:auto; background:var(--s-shell); border:1px solid var(--s-line); border-radius:6px; }
#rdFilter2 .grp{ position:sticky; top:0; z-index:1; background:var(--s-panel-2); padding:6px 9px; border-bottom:1px solid var(--s-line);
  font:600 9px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--s-muted); }

/* option / list rows */
#rdFilter2 .li{ display:flex; align-items:center; gap:7px; padding:6px 9px; cursor:pointer; font:500 var(--fd-fs)/1.2 var(--body); color:var(--s-ink); }
#rdFilter2 .li:hover{ background:var(--s-control); }
#rdFilter2 .li.on{ background:var(--s-accent-tint); color:var(--s-accent-text); }
#rdFilter2 .li .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rdFilter2 .li>b{ font:700 10px/1 var(--body); color:var(--s-muted); font-variant-numeric:tabular-nums; }
#rdFilter2 .li.z{ opacity:.5; }
#rdFilter2 .li.dis{ opacity:.5; cursor:not-allowed; }
#rdFilter2 .li.mid{ justify-content:center; color:var(--s-muted); cursor:default; }
#rdFilter2 .li.mid:hover{ background:none; }
#rdFilter2 .li.lite.on{ box-shadow:inset 2px 0 0 var(--s-accent); }   /* type/category selection */
#rdFilter2 .ck{ width:14px; height:14px; flex:none; border:1.5px solid var(--s-muted); border-radius:3px;
  background:var(--s-control); display:inline-flex; align-items:center; justify-content:center; }
#rdFilter2 .ck.on{ background:var(--s-accent); border-color:var(--s-accent); }
#rdFilter2 .ck svg{ fill:none; stroke:var(--s-accent-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#rdFilter2 .dot{ width:8px; height:8px; border-radius:99px; flex:none; }

/* selections block */
#rdFilter2 .sel{ flex:none; margin-top:8px; }
#rdFilter2 .sel em{ display:flex; align-items:center; justify-content:space-between; font-style:normal;
  font:600 8.5px/1 var(--body); letter-spacing:.09em; color:var(--s-muted); margin-bottom:5px; }
#rdFilter2 .sel em s{ text-decoration:none; color:var(--s-accent-text); cursor:pointer; }
#rdFilter2 .sel>s{ text-decoration:none; font:500 11px/1.4 var(--body); color:var(--s-muted); }
#rdFilter2 .sel>span{ display:inline-flex; align-items:center; gap:5px; margin:0 5px 5px 0; padding:4px 7px;
  border:1px solid var(--s-accent); background:var(--s-accent-tint); border-radius:4px; font:600 10px/1 var(--body); color:var(--s-accent-text); }
#rdFilter2 .sel>span u{ cursor:pointer; text-decoration:none; }

/* ---- bottom 3-panel band ---- */
#rdFilter2 .mwband{ display:grid; grid-template-columns:1fr 1.15fr 1.3fr; flex:none;
  border-top:1px solid var(--s-line); background:var(--s-panel-2); }
#rdFilter2 .bp{ padding:11px 14px; border-left:1px solid var(--s-line); }
#rdFilter2 .bp:first-child{ border-left:0; }
#rdFilter2 .bph{ display:flex; align-items:center; gap:6px; font:600 9.5px/1 var(--body); letter-spacing:.08em;
  text-transform:uppercase; color:var(--s-muted); margin-bottom:9px; }
#rdFilter2 .brow{ display:flex; align-items:flex-start; gap:9px; margin-bottom:8px; }
#rdFilter2 .brow:last-child{ margin-bottom:0; }
#rdFilter2 .bl{ font:600 9px/1.3 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--s-muted);
  min-width:52px; padding-top:5px; }
#rdFilter2 .aligngrid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
#rdFilter2 .soonb{ font:700 7px/1 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--s-muted);
  border:1px solid var(--s-line); border-radius:99px; padding:2px 4px; }

/* chips (band + situation) */
#rdFilter2 .chips{ display:flex; flex-wrap:wrap; gap:4px; flex:1; }
#rdFilter2 .chips span{ display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border:1px solid var(--s-line);
  border-radius:99px; background:var(--s-control); font:600 10px/1 var(--body); color:var(--s-ink); cursor:pointer; white-space:nowrap; }
#rdFilter2 .chips span i{ font-style:normal; font:600 9px/1 var(--body); color:var(--s-muted); }
#rdFilter2 .chips span.on{ background:var(--s-accent-tint); border-color:var(--s-accent); color:var(--s-accent-text); }
#rdFilter2 .chips span.on i{ color:var(--s-accent-text); }
#rdFilter2 .chips span.cust{ border-style:dashed; color:var(--s-muted); }
#rdFilter2 .chips span.cust.on{ border-style:solid; border-color:var(--s-accent); color:var(--s-accent-text); }
#rdFilter2 .chips span.cust u{ text-decoration:none; margin-left:2px; }
#rdFilter2 .chips span.soon{ opacity:.5; cursor:default; }
#rdFilter2 .rng{ display:flex; align-items:center; gap:6px; margin-top:6px; width:100%; }
#rdFilter2 .rng input{ width:52px; height:24px; background:var(--s-shell); border:1px solid var(--s-line); border-radius:4px; color:var(--s-ink); padding:0 6px; }

/* ---- footer ---- */
#rdFilter2 .mwf{ display:flex; align-items:center; gap:12px; padding:12px 16px; flex:none;
  background:var(--s-shell); border-top:1px solid var(--s-line); }
#rdFilter2 .mwf .active{ display:inline-flex; align-items:center; gap:6px; font:500 11.5px/1 var(--body); color:var(--s-muted); }
#rdFilter2 .mwf .active em{ font-style:normal; font-weight:700; letter-spacing:.08em; font-size:9px; }
#rdFilter2 .mwf .active b{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  border-radius:99px; background:var(--s-accent); color:var(--s-accent-ink); font:700 10px/1 var(--body); padding:0 5px; }
#rdFilter2 .mwf .sp{ margin-left:auto; }
#rdFilter2 .mwf u{ cursor:pointer; color:var(--s-muted); font:600 12px/1 var(--body); text-decoration:none; }
#rdFilter2 .mwf u:hover{ color:var(--s-ink); }
#rdFilter2 .mwf u.cancel{ padding:9px 14px; border:1px solid var(--s-line); border-radius:6px; background:var(--s-control); color:var(--s-ink); }
#rdFilter2 .mwf .go{ background:var(--s-accent); color:var(--s-accent-ink); border:0; border-radius:7px;
  padding:10px 18px; font:700 12.5px/1 var(--body); cursor:pointer; }
#rdFilter2 .mwf .go:hover{ filter:brightness(1.08); }
#rdFilter2 .mwf .go.inert{ background:var(--s-control); color:var(--s-muted); cursor:default; filter:none; }

/* ============================================================================
   BOARD filter view (unchanged engine side — deployed collapse/expand).
   ============================================================================ */
.rd-boardwrap:not(.rd-fexpanded) #statFrame .each-shot.rd-fout{ display:none !important; }
.rd-boardwrap.rd-fexpanded #statFrame .each-shot.rd-fout{ opacity:.26 !important; }
.rd-boardwrap.rd-fexpanded #statFrame .each-shot.rd-fout:hover{ opacity:.62 !important; }

.rd-board-head .rd-fd-open, .rd-board-head .rd-fexp-toggle, .rd-board-head .rd-legend-open{ display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 11px; border-radius:5px; font:800 10.5px/1 'Inter Tight',system-ui,Arial,sans-serif;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
/* FILTER (§#6): resting = neutral (red is reserved for record/live per §#4); active = gold + count */
.rd-board-head .rd-fd-open{ border:1px solid #2a3352; background:#141a30; color:#c3cad9; }
.rd-board-head .rd-fd-open:hover{ border-color:#3a4468; color:#fff; }
.rd-board-head .rd-fd-open.rd-active{ border-color:#f2b632; background:#f2b632; color:#1a1204; }
.rd-board-head .rd-fd-open.rd-active:hover{ background:#f7c249; }
.rd-board-head .rd-fexp-toggle{ border:1px solid #2a3352; background:#141a30; color:#c3cad9; }
.rd-board-head .rd-fexp-toggle:hover{ border-color:#3a4468; color:#fff; }
/* Legend (§#7): neutral button, starts the right-aligned action cluster */
.rd-board-head .rd-legend-open{ margin-left:auto; border:1px solid #2a3352; background:#141a30; color:#c3cad9; }
.rd-board-head .rd-legend-open:hover{ border-color:#3a4468; color:#fff; }
.rd-board-head .rd-legend-open.on{ border-color:#f2b632; color:#f2b632; }
.rd-board-head .rd-fd-open i, .rd-board-head .rd-fexp-toggle i, .rd-board-head .rd-legend-open i{ font-size:10px; }
/* range readout (§#6): "showing 1–20" */
.rd-board-head .rd-brange{ font-size:10.5px; color:#5b6274; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* §#7 — legend opens as a panel from the header button, not the rotated edge tab */
#legendWrapper .legend-toggle-btn{ display:none !important; }
#legendWrapper{ position:static !important; transform:none !important; }
#legendWrapper .legend-panel{ position:fixed !important; right:172px !important; bottom:70px !important; left:auto !important; top:auto !important;
  width:352px !important; max-width:calc(100vw - 40px) !important; max-height:70vh !important; overflow:auto !important; z-index:7200 !important;
  display:none !important; margin:0 !important; transform:none !important; box-shadow:0 18px 48px rgba(0,0,0,.6) !important; }
#legendWrapper.active .legend-panel{ display:block !important; }
