/* Catalog filter pillbar.
   The /stays /vibes /pros catalog page replaces its old four-control filter
   bar with a single pillbar: a search input plus one pill per filter
   (Neighborhood, Capacity, Price, Sort). Each pill is a native <details>
   element whose <summary> is the chip and whose body is a popover with the
   choices. Native toggle + keyboard support comes for free; the
   pill_popover_controller layers on outside-click / Escape / one-at-a-time
   dismissal. Active pills surface their value in the label and swap to the
   filled accent state. */

.bido-pillbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper);
}

.bx-dark .bido-pillbar {
  background: rgba(var(--bx-white-rgb), 0.04);
  border-color: rgba(var(--bx-white-rgb), 0.10);
}

.bido-pillbar-search {
  position: relative;
  flex: 1 1 240px;
  min-inline-size: 200px;
  display: flex;
}

.bido-pillbar-search-input {
  inline-size: 100%;
  min-block-size: var(--bx-control-h-sm);
  border-radius: var(--bx-r-pill);
  padding-inline-start: 32px;
}

.bido-pill {
  position: relative;
  flex: 0 0 auto;
}

.bido-pill > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-block-size: var(--bx-control-h-sm);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper);
  color: var(--bx-ink);
  font-size: var(--bx-text-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.bido-pill > summary::-webkit-details-marker { display: none; }
.bido-pill > summary::marker { content: ""; }

/* Keep a long active label (a verbose neighborhood, "Sort: Price ↑") from
   blowing out the inline row — truncate the summary text rather than let one
   pill push its siblings off the line. */
.bido-pill > summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 10rem;
}

.bido-pill > summary:focus-visible {
  outline: 2px solid var(--bx-accent);
  outline-offset: 2px;
}

.bido-pill > summary svg {
  color: var(--bx-ink-3);
  transition: transform 120ms ease;
}

.bido-pill[open] > summary svg {
  transform: rotate(180deg);
}

.bido-pill-active > summary {
  border-color: var(--bx-accent);
  background: rgba(var(--bx-accent-rgb), 0.10);
  color: var(--bx-accent-ink);
  font-weight: 700;
}

.bx-dark .bido-pill > summary {
  background: rgba(var(--bx-white-rgb), 0.05);
  border-color: rgba(var(--bx-white-rgb), 0.12);
  color: var(--bx-ink);
}

.bx-dark .bido-pill-active > summary {
  background: rgba(var(--bx-accent-rgb), 0.16);
  border-color: var(--bx-accent);
  color: var(--bx-accent);
}

.bido-pill-popover {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 12rem;
  padding: 6px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: var(--bx-paper);
  box-shadow: var(--bx-shadow-soft);
}

.bx-dark .bido-pill-popover {
  background: var(--bido-charcoal);
  border-color: rgba(var(--bx-white-rgb), 0.14);
}

.bido-pill-popover-wide { min-inline-size: 18rem; }

/* On desktop the search grows inline and pushes the pills against the right
   edge, so the trailing pills — Price (the wide popover) and Sort — would open
   left-aligned and spill past the right edge, which the page clips
   (overflow-x: hidden). Anchor the last two pills' popovers to the pill's right
   edge so they expand inward. Below the wrap breakpoint the pills no longer hug
   the right edge, so this is overridden (see the @media foot). */
.bido-pill:nth-last-of-type(-n+2) .bido-pill-popover {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.bido-pill-option {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--bx-r-sm);
  color: var(--bx-ink);
  font-size: var(--bx-text-sm);
  text-decoration: none;
}

.bido-pill-option:hover { background: var(--bx-fill); }
.bx-dark .bido-pill-option:hover { background: var(--bx-fill-2); }

.bido-pill-option:focus-visible {
  outline: 2px solid var(--bx-accent);
  outline-offset: 2px;
}

.bido-pill-option.selected {
  background: rgba(var(--bx-accent-rgb), 0.12);
  color: var(--bx-accent-ink);
  font-weight: 700;
}

.bx-dark .bido-pill-option.selected {
  background: rgba(var(--bx-accent-rgb), 0.18);
  color: var(--bx-accent);
}

.bido-pill-price-form { display: grid; gap: 8px; }

.bido-pill-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bido-pill-price-input {
  flex: 1;
  min-block-size: var(--bx-control-h-sm);
  padding: 6px 10px;
  font-size: var(--bx-text-sm);
}

/* A pillbar dropped on a light surface inside a .bx-dark page (the builder
   picker) keeps the light treatment. The .bx-dark overrides above paint with
   literal rgba(white, …) / charcoal, which the .bx-light-surface token island
   can't neutralise on its own; re-assert the token-driven look here. These sit
   after the dark rules so they win when both ancestors are present, and never
   match a pillbar on a genuinely dark page. */
.bx-light-surface .bido-pillbar {
  background: var(--bx-paper);
  border-color: var(--bx-line);
}

.bx-light-surface .bido-pill > summary {
  background: var(--bx-paper);
  border-color: var(--bx-line);
  color: var(--bx-ink);
}

.bx-light-surface .bido-pill-active > summary {
  background: rgba(var(--bx-accent-rgb), 0.10);
  border-color: var(--bx-accent);
  color: var(--bx-accent-ink);
}

.bx-light-surface .bido-pill-popover {
  background: var(--bx-paper);
  border-color: var(--bx-line);
}

.bx-light-surface .bido-pill-option.selected {
  background: rgba(var(--bx-accent-rgb), 0.12);
  color: var(--bx-accent-ink);
}

/* Below ~53rem the search input + four inline pills can no longer share one
   line once an active filter lengthens a label (the trailing Sort pill would
   orphan onto a cramped second row — the "off the screen a little bit" report).
   Drop the search onto its own full-width top row before that happens so the
   four pills sit tidily on the row beneath. Above this width the search grows
   inline and the whole bar reads as one tidy chip row. */
@media (max-width: 64rem) {
  .bido-pillbar-search {
    flex: 1 1 100%;
    order: -1;
  }

  /* With the search on its own row the pills wrap below it from the left, so a
     pill can sit anywhere in a row — the desktop "anchor the trailing popovers
     to the right" rule would then push the wide Price panel off the LEFT edge
     and clip it. Make the bar the positioning context and open every popover
     from the bar's left edge, capped to the bar width, so the Price and Sort
     popovers both stay fully on screen at phone/tablet widths. */
  .bido-pillbar { position: relative; }
  .bido-pill { position: static; }
  .bido-pill .bido-pill-popover,
  .bido-pill:nth-last-of-type(-n+2) .bido-pill-popover {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}

@media (max-width: 48rem) {
  .bido-pillbar { border-radius: var(--bx-r-lg); }
}

@media (pointer: coarse) {
  .bido-pill > summary,
  .bido-pill-option { padding-block: 10px; }
}