/* The board filter — one narrowing panel, four boards.
 *
 * The second shared stylesheet on the site, after rail.css, and it follows
 * the same rule: it CONSUMES tokens.css and never redeclares a token.
 *
 * Lifted from two templates that had independently converged on the same
 * pill language: lab.html's `.bfilters`/`.bfpick`/`.bfshell`/`.bfchip` block
 * (the bench's analyst/market/window filters) and run.html's `.bf-panel`/
 * `.bf-fam`/`.bf-preset`/`.bf-more` block (the /portfolio picker + presets +
 * Advanced panel). Both already used `.bfpick`/`.bfshell` with the same
 * intent — this is the union of the two, renamed onto one `.bf-` vocabulary
 * so a fifth board never has to choose which copy to start from.
 *
 * The panel is built from three kinds of control, and which kind a filter
 * gets is a judgement about its VOCABULARY, not a style choice:
 *
 *   chips   independent yes/no switches over a SHORT vocabulary — the six
 *           analysts, which carry logos and stay on one line.
 *   pickers one choice from a LONG vocabulary — the eleven markets, which
 *           as chips wrapped to three lines and made the control block
 *           taller than the rows it was filtering.
 *   floors  numbers, inside a collapsed Advanced panel with a count badge,
 *           because a floor left set inside a closed panel is the one way
 *           to read an empty board as an honest answer.
 */

.bf-panel { border:1px solid var(--hair); border-radius:var(--r-md);
            background:var(--panel); padding:11px 13px; margin:14px 0 10px;
            display:flex; flex-direction:column; gap:9px; }

/* ---- family tabs ---- */
.bf-fams { display:flex; flex-wrap:wrap; gap:6px; }
.bf-fam { cursor:pointer; font:var(--w-mid) var(--fs-1) var(--body);
          border:1px solid var(--hair); border-radius:var(--r-pill);
          background:transparent; color:var(--dim); padding:4px 11px; }
.bf-fam:hover { border-color:var(--duck-deep); color:var(--ink); }
.bf-fam.on { background:var(--duck-deep); border-color:var(--duck-deep);
             color:#fff; }
.bf-fam .bf-n { font-family:var(--mono); font-size:var(--fs-0);
                color:var(--faint); margin-left:5px; }
.bf-fam.on .bf-n { color:rgba(255,255,255,0.75); }
/* A family with nothing under the OTHER filters currently set is a real
   answer, not a broken tab — recede it rather than hide it, the same call
   the chip/disabled rule below makes for a picker combination. */
.bf-fam.is-empty { opacity:0.6; }

/* ---- the control row ----
   One flex run holding the market/side/agreement/category pickers, the
   window segmented control and the search box. `flex-end` so a picker's
   label-over-value stack lines up on its BASELINE with the search box,
   which has no label above it. */
.bf-row { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }

/* A picker wears the chip's own shell (hairline pill) so the two kinds of
   control read as one language, and a SET picker turns solid — the same
   "this one is on" cue the chips use. The option itself cannot carry it. */
.bf-pick { display:inline-flex; flex-direction:column; gap:3px; }
.bf-label { font:var(--w-mid) var(--fs-0) var(--mono); color:var(--faint);
            text-transform:uppercase; letter-spacing:0.04em; }
.bf-shell { position:relative; display:inline-flex; align-items:center;
            gap:6px; border:1px solid var(--hair);
            border-radius:var(--r-pill); background:transparent;
            padding:4px 24px 4px 11px; color:var(--dim);
            font:var(--w-mid) var(--fs-1) var(--body); }
.bf-shell:hover { border-color:var(--duck-deep); color:var(--ink); }
.bf-shell:focus-within { outline:2px solid var(--duck-deep); outline-offset:2px; }
.bf-shell.on { background:var(--duck-deep); border-color:var(--duck-deep);
               color:#fff; }
.bf-shell.on .bf-val { color:#fff; }
.bf-shell.on .bf-caret { border-top-color:#fff; }
/* Absolute across 100% of the shell so ANY tap inside the pill opens the
   select — two boxes drawn as one square reads as a stray box otherwise.
   outline:0 is load-bearing and only safe because of :focus-within above:
   Chrome draws its own square ring tight around a clicked <select>, which
   sat over the shell's own round one — two rings, one square. The shell
   carries the focus indication for both. */
.bf-shell select { position:absolute; inset:0; width:100%; height:100%;
                   appearance:none; -webkit-appearance:none;
                   opacity:0; cursor:pointer; border:0; outline:0;
                   background:transparent; margin:0; color:inherit;
                   font:inherit; z-index:2; }
.bf-val { font:var(--w-mid) var(--fs-1) var(--body); white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis; max-width:320px; }
/* The brand mark follows the SELECTION. A native <option> cannot carry it,
   and the mark is the fastest read of whose calls a picked value means.
   The [hidden] rule must be restated: an author `display` on this same
   element (the line above) always beats the UA sheet's `[hidden]`, so
   without it a mark toggled off would keep rendering. */
.bf-mark { display:inline-flex; align-items:center; gap:3px; flex:none;
           pointer-events:none; }
.bf-mark[hidden] { display:none; }
.bf-mark svg { width:14px; height:14px; display:block; }
/* Caret drawn rather than imported: one triangle, no asset request. */
.bf-caret { position:absolute; right:9px; top:50%; width:0; height:0;
            margin-top:-2px; pointer-events:none;
            border-left:4px solid transparent; border-right:4px solid transparent;
            border-top:4px solid currentColor; opacity:0.6;
            transition:transform 0.2s ease; }
.bf-shell:focus-within .bf-caret { transform:rotate(180deg); }

/* ---- chips ---- */
.bf-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.bf-chip { cursor:pointer; display:inline-flex; align-items:center; gap:5px;
           border:1px solid var(--hair); border-radius:var(--r-pill);
           background:transparent; color:var(--dim); padding:4px 10px;
           font:var(--w-mid) var(--fs-1) var(--body); }
.bf-chip:hover { border-color:var(--duck-deep); color:var(--ink); }
/* Solid fill AND a weight change: never colour alone. */
.bf-chip.on { background:var(--duck-deep); border-color:var(--duck-deep);
              color:#fff; font-weight:var(--w-bold); }
.bf-chip svg { width:14px; height:14px; flex:none; }
/* The count is what makes a chip a filter rather than a guess: it says how
   many rows this chip would show against the OTHER filters already set. */
.bf-chip .bf-n { font-family:var(--mono); font-size:var(--fs-0);
                 color:var(--faint); }
.bf-chip.on .bf-n { color:rgba(255,255,255,0.75); }
/* A filter that would empty the board is disabled rather than hidden: the
   combination stays visible and legibly empty. */
.bf-chip[disabled] { opacity:0.4; cursor:not-allowed; }
.bf-chip[disabled]:hover { border-color:var(--hair); color:var(--dim); }

/* ---- search, window, presets ----
   The search box sits with the chips rather than the pickers: it is the
   same kind of control — a narrowing typed instead of picked. */
.bf-q { border:1px solid var(--hair); border-radius:var(--r-pill);
        background:transparent; color:var(--ink); padding:5px 12px;
        font:var(--w-mid) var(--fs-1) var(--body); min-width:190px;
        flex:1 1 190px; }
.bf-q:focus { outline:2px solid var(--duck-deep); outline-offset:2px; }
.bf-seg { display:inline-flex; border:1px solid var(--hair);
          border-radius:var(--r-pill); overflow:hidden; }
.bf-seg button { font:var(--w-mid) var(--fs-1) var(--mono); border:0;
                 background:transparent; color:var(--dim); cursor:pointer;
                 padding:5px 11px; }
.bf-seg button.on { background:var(--duck-deep); color:#fff; }
.bf-presets { display:flex; flex-wrap:wrap; gap:6px; align-items:center;
              padding-top:8px; border-top:1px solid var(--hair); }
.bf-preset { cursor:pointer; font:var(--w-mid) var(--fs-1) var(--body);
             border:1px solid var(--hair); border-radius:var(--r-pill);
             background:transparent; color:var(--dim); padding:4px 11px; }
.bf-preset:hover { border-color:var(--duck-deep); color:var(--ink); }
/* A preset carries the fill AND a weight change, same as a chip — presets
   and chips both answer "is this on", so they must not disagree about how
   "on" looks. */
.bf-preset.on { background:var(--duck-deep); border-color:var(--duck-deep);
                color:#fff; font-weight:var(--w-bold); }

/* ---- the Advanced panel ---- */
.bf-more { border-top:1px solid var(--hair); padding-top:8px; }
.bf-more > summary { cursor:pointer; font:var(--w-mid) var(--fs-1) var(--body);
                     color:var(--dim); }
.bf-more > summary:hover { color:var(--ink); }
.bf-more-grid { display:grid; gap:9px; margin-top:9px;
                grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.bf-ff { display:flex; flex-direction:column; gap:3px;
         font:var(--fs-0) var(--body); color:var(--faint); }
.bf-ff input, .bf-ff select { border:1px solid var(--hair);
                              border-radius:var(--r-sm); padding:4px 7px;
                              background:transparent; color:var(--ink);
                              font:var(--fs-1) var(--mono); }
.bf-actions { grid-column:1 / -1; display:flex; gap:7px; align-items:center;
              justify-content:flex-end; }
.bf-reset { cursor:pointer; font:var(--fs-1) var(--body);
            border:1px solid var(--hair); border-radius:var(--r-pill);
            background:transparent; color:var(--dim); padding:4px 11px; }
.bf-reset:hover { border-color:var(--duck-deep); color:var(--ink); }
.bf-count { font:var(--fs-1) var(--mono); color:var(--faint); }

/* ---- pagination ---- */
.bf-pagi { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
           justify-content:space-between; margin-top:10px;
           font:var(--w-mid) var(--fs-0) var(--mono); color:var(--dim); }

/* Below the seam the row stacks; every control keeps a full-width tap
   target rather than shrinking to a strip, and the search box takes the
   whole row so it stays the easiest thing to reach with a thumb. */
@media (max-width: 720px) {
  .bf-row { gap:7px; }
  /* iOS zooms the whole page when a focused <select> or <input> renders
     under 16px (--fs-2) — the font-size below is not redundant with the
     --fs-1 base rule above it, it is the fix. Lifted from the 2026-08-21
     mobile audit (lab.html's .bfshell select / .bfq, pinned by
     test_mobile_audit_0821.py::test_filter_selects_are_16px_plus_on_phones
     and, on these renamed selectors, by this file's own
     test_filter_selects_stay_16px_plus_on_phones) — do not "tidy" this away
     as a duplicate declaration. */
  .bf-q { min-width:0; width:100%; flex:1 1 100%; font-size:var(--fs-2); }
  .bf-shell select { font-size:var(--fs-2); }
  .bf-more-grid { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
  .bf-pagi { justify-content:center; text-align:center; }
}