/* ==========================================================================
   filter-bar.css - the toolbar: dropdown filters, search, count, sort, and a
   row of applied filters that can be dismissed one at a time.

   WHY THIS IS A NEW FILE AND NOT A REUSE, recorded because it is a real cost.
   index.html's directory already has this control, as .svc-select / .svc-toggle
   / .svc-menu / .svc-opt in hero-map.css, and its .is-set state is already the
   dismissible pill this bar wanted. Sharing it would have been correct in
   principle. It was not done because those rules sit in a 74KB index-only sheet
   with at least one cascade resolution that works by accident: a bare .svc-menu
   at the top of the block sets left:0 and a second bare .svc-menu 80 lines later
   sets right:0, and the layout survives only because an over-constrained
   absolute box drops `right` in LTR. Moving that block to a new file changes
   source order, and the page it would break is the one with the 3D plate on it.

   So this is a SECOND pill component that looks like the first. That is
   duplication of appearance, deliberately, and the debt is named: when the
   directory controls are next touched, both should converge on this file and
   hero-map.css should lose its copy. Until then, a visual change to one has to
   be made to the other by hand.
   ========================================================================== */

.fbar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s5) 0;
}
.fbar-filters{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0}
/* Two anchored ends rather than a row trailing into empty space - the same
   shape .dir-controls makes, and for the same reason. Everything left of this
   decides what is in the set; everything right of it reports or presents the
   set. */
.fbar-right{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.fbar-count{
  color:var(--gray);font-size:13px;line-height:18px;white-space:nowrap;text-align:right;
  /* ORDER, AND IT IS THE WHOLE FIX. A ::before is generated as its parent's
     FIRST child, so the hairline below could only ever land left of the count -
     which is where it has been, fencing the count off from the filters on the
     other side of the bar instead of separating it from the sort. Ordering the
     count ahead of it is what puts the rule between the two things it was
     always described as being between. The sort keeps the default 0 and needs
     nothing. */
  order:-1;
}
/* A hairline between the count and the sort. They are the only two things on
   this side and without it "13 notes Latest" reads as one string.

   No margin of its own: .fbar-right's --s4 gap now falls on BOTH sides of it,
   which is what a divider between two items wants. The old --s2 margin-right
   existed to pad one side of a rule that only had a neighbour on one side. */
.fbar-right::before{
  content:"";align-self:stretch;width:1px;background:var(--line);
}

/* --- the pill ------------------------------------------------------------
   Wrapper, with the toggle and the clear as transparent targets inside it, so
   the clear is a real button rather than a click zone inside another button.

   Filled at both ends, and the fill is what carries the state. It used to be
   outlined at rest and filled when set, which meant the control changed kind
   between states rather than changing value - and it left the one hairline on a
   row of otherwise solid pills. Neutral --mist at rest, lavender when set: the
   step is a ground getting louder, not an edge appearing.

   The 1px is kept as a transparent border rather than removed, for the reason
   the old comment gave and which still holds: dropping it outright shrinks the
   pill by 2px and nudges the search field beside it. */
.fbar-sel{
  position:relative;display:inline-flex;align-items:center;
  background:var(--mist);
  border:1px solid transparent;border-radius:var(--r-pill);
  transition:background-color 200ms ease-in-out;
}
/* With no edge to darken, hover has to move the ground. .05 is the smallest
   step that registers on either fill without reading as a second state. */
.fbar-sel:hover{box-shadow:inset 0 0 0 999px rgb(58 35 100 / .05)}
/* Lavender, not the signature purple. This is a state, and a saturated fill
   here would out-shout "Brief the network" at the foot of the page. Plum on
   lavender is 7.6:1, so the label stays the strongest thing in the pill - which
   matters, because the label is the state. */
.fbar-sel.is-set{background:var(--lavender)}

.fbar-toggle{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:9px 16px;
  border:0;border-radius:var(--r-pill);background:none;
  font-family:var(--font);font-size:14px;line-height:normal;color:var(--slate);
  cursor:pointer;white-space:nowrap;
}
.fbar-sel.is-set .fbar-toggle{color:var(--plum);font-weight:500;padding-right:6px}
.fbar-toggle:focus-visible,.fbar-clear:focus-visible,.fbar-opt:focus-visible{
  outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-off);
}

.fbar-caret{
  width:14px;height:14px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 200ms cubic-bezier(.2,.7,.3,1);
}
.fbar-toggle[aria-expanded="true"] .fbar-caret{transform:rotate(180deg)}
/* The chevron's seat is the clear button's seat. One says "there is more to
   choose", the other "you have chosen" - they are never both true. */
.fbar-sel.is-set .fbar-caret{display:none}

.fbar-clear{
  display:grid;place-items:center;
  width:20px;height:20px;margin-right:9px;padding:0;flex:none;
  border:0;border-radius:50%;
  background:var(--plum);color:var(--white);cursor:pointer;
  transition:background-color 200ms ease-in-out;
}
.fbar-clear svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fbar-clear:hover{background:var(--purple-deep)}

/* The count rides in its own well so it reads as a quantity rather than part of
   the label - "Brand & campaigns 2" would otherwise scan as a version number. */
.fbar-n{
  min-width:20px;padding:1px 6px;
  border-radius:var(--r-pill);
  background:rgb(58 35 100 / .07);
  font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;
  text-align:center;color:var(--gray);
}

/* --- the menu ------------------------------------------------------------
   Not a modal. Outside click or Escape dismisses it and the page underneath
   stays live. Opens under its own left edge, because these pills lead a row and
   an anchored-right menu would spill across the search field beside them. */
.fbar-menu{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;
  width:min(320px,86vw);max-height:min(60vh,420px);overflow-y:auto;
  padding:6px;
  background:var(--white);
  border:1px solid rgb(58 35 100 / .1);border-radius:var(--r-md);
  box-shadow:0 18px 48px -12px rgb(28 16 54 / .28), 0 2px 8px rgb(28 16 54 / .06);
}
/* The sort menu is the one pill on the right-hand end, so its menu is the one
   that would hang off the viewport if it opened leftward. */
.fbar-sort .fbar-menu{left:auto;right:0}

.fbar-opt{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:9px 12px;
  border:0;border-radius:12px;
  background:none;text-align:left;cursor:pointer;
  font-family:var(--font);font-size:15px;line-height:22px;color:var(--slate);
  transition:background-color 160ms ease-in-out;
}
.fbar-opt + .fbar-opt{margin-top:2px}
.fbar-opt:hover,.fbar-opt:focus-visible{background:rgb(58 35 100 / .05)}
.fbar-opt.is-on{background:var(--pale);color:var(--plum)}
.fbar-opt .fbar-n{margin-left:auto}

/* --- search --------------------------------------------------------------
   Same field as the directory's, at the same height as the pills beside it so
   the row sits on one line rather than two things of similar size. */
.fbar-search{position:relative;display:flex;align-items:center}
.fbar-search-i{
  position:absolute;left:12px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:var(--gray);stroke-width:1.6;stroke-linecap:round;
}
/* Filled to match the select pills either side of it. A field is the one place
   a keyline is arguably load-bearing - it is what says "type here" - but that
   argument only holds when the field is the only outlined thing in the row.
   With the pills filled it was the last hairline on the bar, and a --mist
   ground states "you can put something in this" at least as clearly.

   The 1px is kept transparent rather than removed: the field sits in a flex row
   at a fixed height with the pills, and losing 2px would break that alignment.

   Focus is an outline, not a border colour, because there is no longer a border
   to colour. --focus-w of --focus-c is the exact ring .fbar-toggle and
   .fbar-clear already use, so every focusable thing on this bar lights the same
   way. The width growth stays - it is the field's own signature. */
.fbar-search input{
  width:min(260px,50vw);
  padding:9px 32px 9px 34px;
  font-family:var(--font);font-size:14px;color:var(--slate);
  background:var(--mist);
  border:1px solid transparent;border-radius:var(--r-pill);
  transition:background-color 200ms ease-in-out,width 240ms cubic-bezier(.2,.7,.3,1);
}
.fbar-search input::placeholder{color:var(--gray)}
.fbar-search input:hover{box-shadow:inset 0 0 0 999px rgb(58 35 100 / .05)}
.fbar-search input:focus{
  outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-in);
  box-shadow:none;
  width:min(320px,60vw);
}
.fbar-search input:focus ~ .fbar-search-i{stroke:var(--purple-deep)}
/* The browser's own cancel button is suppressed because there is a real one. */
.fbar-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fbar-search-x{
  position:absolute;right:8px;
  display:grid;place-items:center;width:20px;height:20px;padding:0;
  border:0;border-radius:50%;background:rgb(58 35 100 / .1);color:var(--plum);
  cursor:pointer;
}
.fbar-search-x svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fbar-search-x:hover{background:var(--plum);color:var(--white)}

/* The applied-filter row that stood here was removed on request. It restated
   what the pills above it already say: each one turns its value into its own
   label with an x beside it, and the search field carries its own x. "Clear
   all" went with it - the one thing the row had that the pills do not - so
   clearing three filters is now three clicks. If it comes back, the cheaper
   form is a single Clear in the right-hand group rather than a second row.
   .fbar-chip, .fbar-clear-all, .fbar-applied and .fbar-sr went with it; nothing
   else referenced them. */

@media (max-width:760px){
  /* The right-hand group drops to its own line and loses the divider, which was
     separating two things that are no longer beside each other. */
  .fbar-right{margin-left:0;width:100%;justify-content:space-between}
  .fbar-right::before{display:none}
  .fbar-search input,.fbar-search input:focus{width:100%}
  .fbar-search{flex:1 1 100%}

  /* THE MENU ANCHORS TO THE ROW, NOT TO ITS PILL, and this was a real bug
     rather than a refinement. A 320px menu hung from `left:0` of whichever pill
     opened it, and once the pills started wrapping, the third one sat far
     enough right that its menu ran off the edge and gave the page a horizontal
     scrollbar. Measured: broken at 520 and 390, fine at 640 and at 360, which is
     the signature of a position that depends on where a pill happens to land
     rather than on the viewport.

     Moving the containing block up to .fbar-filters makes the menu span the row
     and stop being able to overflow at any width. Only one menu is ever open,
     so the shared containing block cannot collide. Scoped to .fbar-filters: the
     sort pill is in the other group and is already right-anchored, which is
     correct for the one control at the right-hand end. */
  .fbar-filters{position:relative}
  .fbar-filters .fbar-sel{position:static}
  .fbar-filters .fbar-menu{left:0;right:0;width:auto}
}