/* ============================================================================
   borough_list.css — the "pick a place" picker for /planning/boroughs/.

   A two-panel browser: a greater-area RAIL on the left (the 9 English regions),
   a prominent live SEARCH + a monogrammed accordion on the right. All 88
   boroughs stay in the DOM (filtered via CSS display) so the SEO surface is
   intact. Scoped under `.bpx`. Colours map to the ASTOR tokens.
   ========================================================================== */

.bpx { --incard: rgba(26,26,26,0.12); }
.bpx *, .bpx *::before, .bpx *::after { box-sizing: border-box; }

.bpx-shell { display: grid; grid-template-columns: 232px 1fr; gap: clamp(20px,3vw,40px); align-items: start; margin-top: 22px; }

/* ── Region rail (the greater-area picker) ─────────────────────────────── */
.bpx-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
.bpx-rail__eyebrow {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-pale); font-weight: 600; padding: 0 0 10px 2px;
}
.bpx-region {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent;
  border-left: 2px solid transparent; color: var(--c-muted); cursor: pointer;
  font-family: inherit; font-size: 13.5px; letter-spacing: -.01em; transition: none;
}
.bpx-region:hover { background: var(--c-bone); color: var(--c-ink); }
.bpx-region__n { font-family: var(--font-mono); font-size: 11px; color: var(--c-pale); font-variant-numeric: tabular-nums; }
.bpx-region.is-active { background: var(--c-bone); border-left-color: var(--c-ink); color: var(--c-ink); font-weight: 600; }
.bpx-region.is-active .bpx-region__n { color: var(--c-oxblood); }

/* ── Main column ───────────────────────────────────────────────────────── */
.bpx-main { min-width: 0; }
.bpx-searchbar {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--c-ink); padding-bottom: 10px; margin-bottom: 6px;
}
.bpx-searchbar svg { flex: none; color: var(--c-pale); }
.bpx-searchbar input {
  flex: 1; border: 0; background: transparent; outline: none; min-width: 0;
  font-family: inherit; font-size: clamp(1rem,1.7vw,1.25rem); font-weight: 300; color: var(--c-ink);
  padding: 0; border-radius: 0;
}
.bpx-searchbar input::placeholder { color: var(--c-pale); }
.bpx-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--c-muted); white-space: nowrap; }
.bpx-count b { color: var(--c-ink); font-weight: 600; }
.bpx-metastrip { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 2px 16px; flex-wrap: wrap; }
.bpx-active-region { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-pale); font-weight: 600; }
.bpx-active-region b { color: var(--c-ink); }

/* ── Monogram tile (the "logo" stand-in — a clean ASTOR crest) ─────────── */
.bpx-mono {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-rule); background: var(--c-white);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.bpl-accordion-row.is-open .bpx-mono { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }

@media (max-width: 760px) {
  .bpx-shell { grid-template-columns: 1fr; gap: 14px; }
  .bpx-rail {
    position: static; flex-direction: row; overflow-x: auto; gap: 0;
    border-bottom: 1px solid var(--c-rule); padding-bottom: 2px;
  }
  .bpx-rail__eyebrow { display: none; }
  .bpx-region { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; padding: 8px 13px; }
  .bpx-region.is-active { border-left: 0; border-bottom-color: var(--c-ink); }
}