/* Opt-in compact filter workspace. No global form/filter selectors. */
.filter-workspace{position:relative;display:grid;gap:var(--space-2);margin-bottom:var(--space-3)}
.filter-workspace-disclosure{position:relative;min-width:0}
.filter-workspace-disclosure>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 10px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--panel);cursor:pointer;font-weight:700;list-style:none}
.filter-workspace-disclosure>summary::-webkit-details-marker{display:none}
.filter-workspace-disclosure>summary::before{content:"\203a";font-size:1.4em;line-height:1;transition:transform .12s ease}
.filter-workspace-disclosure[open]>summary::before{transform:rotate(90deg)}
/* One rule for both: these were byte-identical copies of the same floating
   card, declared ~50 lines apart in this file. */
.filter-workspace-card,.ui-popout-card{margin-top:4px;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--r-3);background:var(--bg);box-shadow:0 8px 28px rgba(var(--shadow-color)/.18)}
.filter-workspace-disclosure.is-anchored-popover>.filter-workspace-card{box-sizing:border-box;position:fixed;z-index:900;width:min(34rem,calc(100vw - 16px));max-height:min(70vh,36rem);overflow:auto;margin:0}
.filter-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.filter-workspace-grid label{display:grid;gap:4px;min-width:0}
.filter-workspace-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.filter-workspace-dirty{flex-basis:100%;color:var(--warn-ink);font-weight:700}
.summary-rail,.flexi-summary-rail{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;font-weight:400}
/* `white-space:nowrap` is the fix for the owner's headline example, and it is
   NOT the height floor. The three disclosure buttons on the build-a-list page
   measured 56 / 44 / 40px against a 33px number field because the summary
   chip INSIDE each button wrapped onto two or three lines and pushed the
   button open -- at 1024px the tallest reached 92px, a 59px spread in one
   row. `.flexi-summary-chip` already had this rule via tables.css:129; the
   criterion chip never got it. Now the whole family shares it.

   S9 UPDATE: `white-space:nowrap` is no longer stated here or in tables.css.
   Both were deleted because `.badge` declares it, and the chips are badges
   now -- the fix above is intact, it simply has one owner instead of two. */
/* S9: the filter chips are FAMILY 1 -- `.badge` -- and now say so in markup.
   They were the one family S5b missed, so they kept a private geometry that
   disagreed with every badge beside them on five axes at once: no border,
   weight 700 against 600, line-height 1 against 1.4, a 26px floor against
   24.8px, and the page EDGE colour as a FILL, which made a neutral filter
   render DARKER than the surface under it while a neutral badge rendered
   lighter. Padding, radius, typography, border and the neutral fill all come
   from `.badge` now; what stays here is only what is genuinely about filters.

   `display:inline-flex` is restated deliberately -- `.badge` is inline-block,
   and a chip is the one badge that reliably carries a second element (the
   remove control), which inline-block lays out on the text baseline.

   Hence the COMPOUND selector. `.criterion-chip` alone would be a second bare
   class rule disagreeing with `.badge` about `display`, decided by nothing but
   which sheet loads last -- ClassCollisionTests rejected exactly that, on all
   ten call sites, and it was right to. `.badge.criterion-chip` wins on
   specificity instead, and it also states the truth: these are badges that
   are additionally filters. */
.badge.criterion-chip,.badge.criterion-badge,.badge.flexi-summary-chip,.badge.flexi-toggle-btn{display:inline-flex;align-items:center;box-sizing:border-box;gap:2px;min-width:0;max-width:min(100%,28rem);overflow:hidden;text-overflow:ellipsis}
.criterion-badge,.flexi-toggle-btn{justify-self:start;justify-content:center;width:max-content;max-width:100%;box-shadow:none;appearance:none;cursor:pointer}
/* Polarity is a FILTER word (include / exclude / neither), so it stays a class
   rather than becoming a `data-tone` -- the tone table describes what a thing
   IS, and "excluded" is not a tone. What changes is which colours it reaches:
   these read the pipeline's --st-accepted/--st-rejected, i.e. "this candidate
   was accepted", which is a meaning a filter chip has never had. They were
   also a SECOND green and red (#dcfce7/#fee2e2 against #e7f7e9/#fdecec) --
   near-duplicates, close enough to read as a rendering fault. One green, one
   red. Neutral needs no rule at all now: it is what `.badge` already is. */
.criterion-chip.is-positive,.criterion-badge.is-positive,.flexi-toggle-btn.is-yes,.flexi-toggle-btn.is-on,.flexi-summary-chip.is-positive{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-ink)}
.criterion-chip.is-negative,.criterion-badge.is-negative,.flexi-toggle-btn.is-no,.flexi-summary-chip.is-negative{background:var(--tone-danger);color:var(--tone-danger-ink);border-color:var(--tone-danger-ink)}
.criterion-badge:focus-visible,.flexi-toggle-btn:focus-visible{outline:3px solid var(--focus-ring,var(--accent));outline-offset:2px}
@media(max-width:560px){
  .filter-workspace-grid{grid-template-columns:minmax(0,1fr)}
  .filter-workspace-disclosure.is-anchored-popover>.filter-workspace-card{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .filter-workspace-actions>.btn,.filter-workspace-actions>button{width:100%}
}

/* ---------------------------------------------------------------------------
   Neutral anchored popout (ui/popout.html). The third copy of these rules and
   the first with no ancestor requirement: tables.css gates the same geometry on
   .flexi-filter-group and the block above gates it on
   .filter-workspace-disclosure, so a page outside those two families could not
   reuse it. Consumers here need only this sheet plus anchored_popover.js.

   Appended at END OF FILE deliberately: tests_flexi_filter_ui.py asserts the
   relative order of rules in this sheet with .index(), so inserting above
   would break assertions that have nothing to do with popouts.

   Tokens only, zero hex literals — this sheet's HEX_BUDGETS entry is 0 and
   test_no_hex_budget_is_slack pins budget == actual, so a single #rrggbb here
   fails the suite in both directions.

   No SINGLE-COMPOUND selector below sets a visible `display`. That is a
   guard requirement, not a style preference: HiddenAttributeTests indexes
   such selectors by class token and matches them against every element that
   carries a literal `hidden` anywhere in first-party markup, ignoring which
   page it is on, at budget 0. `display:none` is exempt (it reinforces hidden),
   which is why .ui-popout-close may state it bare while its visible
   counterpart is scoped under .is-popover-enhanced.
   --------------------------------------------------------------------------- */
.ui-popout{position:relative;min-width:0}
.ui-popout>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 10px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--panel);cursor:pointer;font-weight:700;list-style:none}
.ui-popout>summary::-webkit-details-marker{display:none}
.ui-popout>summary::before{content:"\203a";flex:0 0 auto;font-size:1.4em;line-height:1;transition:transform .12s ease}
.ui-popout[open]>summary::before{transform:rotate(90deg)}
.ui-popout>summary:hover{border-color:var(--accent)}
.ui-popout>summary:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}
.ui-popout-label{flex:0 0 auto}
.ui-popout.is-popover-enhanced>.ui-popout-card{box-sizing:border-box;position:fixed;z-index:900;width:min(34rem,calc(100vw - 16px));max-height:min(70vh,36rem);overflow:auto;margin:0}
.ui-popout .ui-popout-head{position:sticky;top:calc(var(--space-3) * -1);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);padding:var(--space-3);border-bottom:1px solid var(--border);background:var(--bg)}
/* Without JS the card renders inline under the summary, where a floating
   card's close button would be a dead control — so it appears only once the
   popover enhancement has actually run. */
.ui-popout-close{display:none}
.ui-popout.is-popover-enhanced .ui-popout-close{display:inline-flex;flex:0 0 auto;min-width:36px}
@media(max-width:560px){
  .ui-popout.is-popover-enhanced>.ui-popout-card{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
}