@import url('/assets/css/bomforge-brand.css?v=20260801e');

/* ============================================================
   Filter panel v2 — collapsible panel, disclosure sections, and
   the searchable country picker. Layered over atlas-shell.css?v=20260731b;
   every color is a token so light and dark both hold.
   ============================================================ */

/* ── Title bar: hero + collapse control ─────────────────────── */
.fp-titlebar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fp-titlebar h1 {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 4px;
}
.fp-collapse-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.fp-collapse-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.fp-collapse-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel-sub {
  margin-bottom: 8px;
}
.panel-stats {
  margin-bottom: 4px;
}

/* Clear filters. Hidden until a filter is actually set so the panel stays
   quiet at rest, which is also why the [hidden] rule is spelled out: a
   display value on the base selector beats the hidden attribute's UA
   display:none, and the button would sit there permanently. */
.fp-clear {
  display: inline-flex;
  align-items: center;
  margin: 2px 0 10px;
  padding: 4px 10px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.08s;
}
.fp-clear[hidden] {
  display: none;
}
@media (hover: hover) {
  .fp-clear:hover {
    border-color: var(--accent);
    color: var(--accent-2);
  }
}
.fp-clear:active {
  transform: scale(0.96);
}
.fp-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Search, promoted above the filters ─────────────────────────
   One field, full width, at the top of the head at every width. The icon
   says "type here" without a label line, and the clear button exists
   because dismissing a query on a phone otherwise means holding backspace
   with the keyboard covering the results you are trying to get back.
   Sizes are set here, not inherited from .search-row: this control is 44px
   (the iOS thumb floor) and 16px (below which iOS zooms the whole page on
   focus, which on a bottom sheet is a layout the visitor cannot undo). */
.fp-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}
.fp-search input[type='text'] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 38px 9px 36px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.fp-search input[type='text']::placeholder {
  color: var(--ink-3);
}
.fp-search input[type='text']:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
  /* color-mix so the ring tracks whatever --accent is in this theme. A UA
     without it drops the declaration and keeps the accent border, which is
     already a sufficient focus signal. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Chrome and Safari both draw their own clear affordance on a search-styled
   field; ours is the one that is 44px and themed. */
.fp-search input[type='text']::-webkit-search-cancel-button {
  display: none;
}
.fp-search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 0.15s;
}
.fp-search:focus-within .fp-search-icon {
  stroke: var(--accent);
}
.fp-search-clear {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.fp-search-clear[hidden] {
  display: none;
}
.fp-search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}
@media (hover: hover) {
  .fp-search-clear:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
}
.fp-search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Disclosure sections ────────────────────────────────────── */
.fp-section {
  margin: 0 -16px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
}
.fp-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.fp-sec-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  transition: color 0.15s;
}
.fp-sec-head:hover .fp-sec-title {
  color: var(--ink);
}
/* The hint summarizes a COLLAPSED section; while the section is open its
   controls already show the value, so the hint would just say it twice. */
.fp-sec-head[aria-expanded='true'] .fp-sec-hint {
  display: none;
}
.fp-sec-hint {
  margin-left: auto;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.fp-sec-chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease-out;
}
.fp-sec-head[aria-expanded='false'] .fp-sec-chev {
  transform: rotate(-90deg);
}

/* Body collapse: grid-rows animation, one wrapper, no JS measuring. */
.fp-sec-clip {
  display: grid;
  grid-template-rows: 1fr;
  /* minmax(0,1fr): an auto track would size to the content's max-content
     width and push the body past the panel edge. */
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows 0.2s ease-out;
}
.fp-section[data-open='false'] .fp-sec-clip {
  grid-template-rows: 0fr;
}
.fp-sec-body {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 10px;
}
/* The clip exists for the vertical collapse and for nothing else, so an OPEN
   section stops clipping. While it applied on both axes, any chip wider than
   the rail was sliced through the middle of a word — silently, because
   `hidden` shows no scrollbar, so the row read as a rendering bug rather than
   as content continuing past the edge. Nothing overflows at the rail widths
   this ships at today; this is the guard for the day a label gets longer, the
   rail gets narrower, or the visitor zooms the browser. */
.fp-section[data-open='true'] .fp-sec-body {
  overflow: visible;
}
/* Chips must wrap on desktop; a clipped row with no scroll affordance
   reads as broken. Mobile keeps its one-line scroll rows. */
@media (min-width: 769px) {
  .fp-sec-body .ts-chips {
    flex-wrap: wrap;
    overflow: visible;
  }
}
.fp-section[data-open='false'] .fp-sec-body {
  padding-bottom: 0;
}
/* While the country popover is open its section must not clip it. */
.fp-section.fp-pop-open .fp-sec-clip,
.fp-section.fp-pop-open .fp-sec-body {
  overflow: visible;
}

/* The section header already says Focus / Where; the old inline labels
   would say it twice. JS still toggles their inline display as a signal,
   so hide them visually instead of touching the wiring. */
#domainChipsLabel,
#countryLabel {
  display: none !important;
}
.fp-sec-body .search-row {
  margin-bottom: 8px;
}
/* The state select is the only thing left in that row now that search leads
   the head, and a lone 132px control floating against the panel's left edge
   reads as a broken layout rather than as a filter. */
.fp-sec-body .search-row select {
  flex: 1 1 auto;
  width: 100%;
}

/* Where: state and country side by side. Promoting search out of this
   section gained the head a row; pairing the two location controls gives it
   back, so the directory does not start any lower down the panel than it
   did before. */
.fp-where-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fp-where-row > .search-row,
.fp-where-row > .fp-combobox {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
/* The label is the section header's job in this layout. */
.fp-where-row > .chips-label {
  display: none;
}
/* Each popover is wider than the half-width column that anchors it, so it
   opens toward the panel's CENTRE: the right-hand column (country) hangs
   left, the left-hand column (region) hangs right. Anchoring both to the
   right edge pushed the region list off the panel's left side, where the
   panel's own border clipped every label. */
.fp-where-row #countryPicker .fp-combo-pop {
  left: auto;
  right: 0;
  width: max(100%, 240px);
}
.fp-where-row #statePicker .fp-combo-pop {
  left: 0;
  right: auto;
  width: max(100%, 260px);
}
@media (max-width: 768px) {
  .fp-where-row {
    display: block;
  }
  .fp-where-row > .search-row {
    margin-bottom: 8px;
  }
  .fp-where-row .fp-combo-pop {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Type pills: "Everything" is FIRST in the DOM because on a phone the row is
   a one-line rail that opens scrolled to the active pill, and the active pill
   at first paint is this one. On desktop the row wraps, there is nothing to
   scroll to, and leading with the catch-all repacked six pills from three
   lines into four — 38px of a head that is already the tightest thing on the
   panel. So desktop keeps the original visual order. */
@media (min-width: 769px) {
  .ts-segments [data-segment='all'] {
    order: 1;
  }
}
.fp-sec-body .country-note {
  margin: 8px 0 0;
}
.fp-sec-body .ts-segments,
.fp-sec-body .ts-legend {
  margin-bottom: 0;
}
.fp-sec-body .ts-legend {
  margin-top: 8px;
}
.fp-sec-body .ts-domains {
  margin-bottom: 8px;
}

/* ── Searchable country picker ──────────────────────────────── */
/* The native select stays in the DOM as the source of truth for
   map-globe.js; it is only removed from the visual and a11y tree. */
.fp-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.fp-combobox {
  position: relative;
}
.fp-combo-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.fp-combo-btn:hover {
  border-color: var(--ink-3);
}
.fp-combo-btn[aria-expanded='true'] {
  border-color: var(--accent);
  background: var(--paper);
}
.fp-combo-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-combo-btn svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease-out;
}
.fp-combo-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.fp-combo-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.fp-combo-search {
  display: block;
  width: 100%;
  padding: 11px 12px;
  background: var(--paper);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
}
.fp-combo-search:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.fp-combo-search::placeholder {
  color: var(--ink-3);
}
.fp-combo-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: min(280px, 32vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fp-combo-list::-webkit-scrollbar {
  width: 8px;
}
.fp-combo-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}
.fp-combo-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.fp-combo-list li .fp-co-n {
  flex-shrink: 0;
  color: var(--ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.fp-combo-list li:hover,
.fp-combo-list li.fp-active {
  background: var(--paper-2);
}
.fp-combo-list li.fp-active {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.fp-combo-list li[aria-selected='true'] {
  font-weight: 700;
  color: var(--accent);
}
.fp-combo-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: default !important;
}
.fp-combo-empty:hover {
  background: none !important;
}
/* Country header inside the worldwide region list. Sticky because the list
   scrolls and a header you have scrolled past stops answering the question
   it was there for: which country's regions am I reading. */
.fp-combo-list li.fp-combo-group {
  position: sticky;
  top: -4px;
  z-index: 1;
  min-height: 0;
  margin: 6px 0 2px;
  padding: 5px 10px 4px;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}
.fp-combo-list li.fp-combo-group:first-child {
  margin-top: 0;
}
.fp-combo-list li.fp-combo-group:hover {
  background: var(--paper);
}

/* atlas-shell bakes a dark-ink chevron into the state select's data URI,
   which vanishes on the dark surface. Re-issue it in light ink for dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .search-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23eef2f8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}
:root[data-theme='dark'] .search-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23eef2f8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Collapsed state + floating pill (desktop only) ─────────── */
@media (min-width: 769px) {
  .panel {
    transition:
      transform 0.2s ease-out,
      opacity 0.2s ease-out;
  }
  .panel.fp-collapsed {
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      transform 0.2s ease-out,
      opacity 0.2s ease-out,
      visibility 0s 0.2s;
  }
  .panel.fp-no-anim {
    transition: none !important;
  }
  .fp-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 18px 10px 15px;
    background: rgba(var(--glass), 0.94);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.1),
      0 14px 40px rgba(0, 0, 0, 0.18);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition:
      border-color 0.15s,
      transform 0.15s;
  }
  .fp-pill:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .fp-pill svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .fp-pill[hidden] {
    display: none;
  }
}

/* Mobile: the bottom sheet already owns collapse behavior. Disclosure
   headers and the pill are desktop affordances — the sheet keeps its
   tuned budget untouched. */
@media (max-width: 768px) {
  .fp-pill {
    display: none !important;
  }
  .fp-sec-head {
    display: none;
  }
  .fp-section {
    border-top: none;
    margin: 0;
    padding: 0;
  }
  .fp-section[data-open='false'] .fp-sec-clip {
    grid-template-rows: 1fr;
  }
  .fp-section[data-open='false'] .fp-sec-body {
    padding-bottom: 0;
  }
  .fp-sec-body {
    padding-bottom: 0;
  }
  .fp-collapse-btn {
    display: none;
  }
  .fp-titlebar h1 {
    font-size: 18px;
  }
  /* 44px: the thumb floor, on the control the sheet is built around. */
  .fp-search {
    margin-bottom: 8px;
  }
  .fp-search input[type='text'] {
    min-height: 44px;
    padding-left: 38px;
    padding-right: 44px;
  }
  .fp-search-clear {
    width: 40px;
    height: 40px;
    right: 2px;
  }
  .fp-search-clear svg {
    width: 16px;
    height: 16px;
  }
  .fp-combo-btn {
    min-height: 40px;
    padding: 7px 11px;
    font-size: 16px; /* iOS: sub-16px focus zooms the page */
  }
  .fp-combo-search {
    font-size: 16px;
  }
  /* This popover is now the ONLY way to pick a region on a phone: the
     native select it replaced opened a full-screen list. 26vh showed four
     rows of 300+, which is a scroll, not a picker. */
  .fp-combo-list {
    max-height: min(320px, 42vh);
  }
  .panel.has-selection .fp-section {
    display: none;
  }
}
.embed-mode .fp-pill {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .fp-sec-clip,
  .fp-sec-chev,
  .fp-combo-btn svg,
  .fp-pill {
    transition: none !important;
  }
}