/* ============================================================
   PXMap — shared map + map-control styles.
   One look for every map on the site: the US / Canada / World law
   maps and the Range Finder. Colours come from /shared/tokens.css.
============================================================ */

/* ---------- The map frame ---------- */
.pxm-card {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #fbfaf6 0%, #f3f1ea 100%);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-xl, 28px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 24px 48px -32px rgb(var(--charcoal-2-rgb) / .35);
  overflow: hidden;
}
.pxm-card::before {                 /* faint survey grid — reads as "map" without noise */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgb(var(--charcoal-rgb) / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--charcoal-rgb) / .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(90% 80% at 50% 50%, #000 40%, transparent 100%);
}

.pxm-canvas {
  position: relative;
  aspect-ratio: 960 / 600;
  width: 100%;
  max-height: min(66vh, 700px);    /* the whole card — search, chips, map, legend — fits a laptop screen */
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;              /* a zoomed map never spills over the toolbar or legend */
}
.pxm-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.pxm-canvas.is-zoomed .pxm-svg { cursor: grab; }
.pxm-canvas.is-zoomed .pxm-svg:active { cursor: grabbing; }

/* Regions */
.pxm-sphere { fill: rgb(var(--charcoal-rgb) / .035); stroke: rgb(var(--charcoal-rgb) / .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pxm-region {
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .35s var(--ease-out), opacity .25s var(--ease-out), filter .15s;
  outline: none;
}
.pxm-region.is-selectable { cursor: pointer; }
.pxm-region.is-inert { opacity: .55; }
.pxm-region.is-nodata { fill: #dcd8cd; pointer-events: none; }
@media (hover: hover) {
  .pxm-region.is-selectable:hover { filter: brightness(1.07) saturate(1.08); stroke: var(--charcoal); stroke-width: 1.6; }
}
.pxm-region:focus-visible { stroke: var(--orange); stroke-width: 3; }
.pxm-region.is-dimmed { opacity: .18; }
.pxm-region.is-selected { filter: brightness(1.04); }
.pxm-selected-outline {
  fill: none; stroke: var(--charcoal); stroke-width: 2.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgb(var(--charcoal-rgb) / .35));
  animation: pxm-pop .35s var(--ease-out);
}
@keyframes pxm-pop { from { stroke-width: 7; opacity: 0; } }

/* Labels */
.pxm-label {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .04em;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  paint-order: stroke;
  stroke-linejoin: round;
  transition: opacity .2s;
}
.pxm-label.on-dark  { fill: #fff; stroke: rgb(0 0 0 / .28); }
.pxm-label.on-light { fill: var(--charcoal); stroke: rgb(255 255 255 / .85); }
.pxm-label.is-hidden, .pxm-label.is-dimmed { opacity: 0; }
.pxm-leader { stroke: var(--charcoal-3); fill: none; }

/* Loading / error */
.pxm-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
}
.pxm-loading.is-error { color: var(--tier-1); text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 14px; }
.pxm-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule-2); border-top-color: var(--orange); animation: pxm-spin .8s linear infinite; }
@keyframes pxm-spin { to { transform: rotate(360deg); } }

/* Zoom controls */
.pxm-zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1.5px solid var(--rule); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px -10px rgb(var(--charcoal-rgb) / .45);
}
.pxm-zoom-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--charcoal); background: #fff; transition: background .15s; }
.pxm-zoom-btn + .pxm-zoom-btn { border-top: 1px solid var(--rule); }
.pxm-zoom-btn:hover { background: var(--paper-warm); }
.pxm-zoom-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.pxm-zoom-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.pxm-zoom-btn[hidden] { display: none; }

.pxm-gesture-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: rgb(var(--charcoal-2-rgb) / .88); color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--r-pill); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.pxm-gesture-hint.is-on { opacity: 1; }

/* Tooltip */
.pxm-tooltip {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  min-width: 170px; max-width: 280px;
  background: var(--charcoal-2); color: #fff;
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / .5);
  font-size: 13px; line-height: 1.4;
}
.pxm-tooltip[hidden] { display: none; }
.pxm-tt-title { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; margin-bottom: 4px; }
.pxm-tt-row { display: flex; align-items: center; gap: 7px; color: rgb(255 255 255 / .88); }
.pxm-tt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .35); }
.pxm-tt-hint { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .55); }

/* Markers (range pins, city anchors, "you are here") */
.pxm-marker { transition: opacity .2s; }
circle.pxm-marker { stroke: #fff; }
.pxm-marker[role="button"] { cursor: pointer; }
.pxm-marker[role="button"]:focus-visible { outline: none; stroke: var(--orange); }

/* ---------- Map chrome: overlays inside the card ---------- */
.pxm-overlay { position: absolute; z-index: 3; pointer-events: none; }
.pxm-overlay > * { pointer-events: auto; }
.pxm-overlay--tl { left: 14px; top: 14px; right: 70px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pxm-overlay--tr { right: 14px; top: 14px; }
.pxm-overlay--bl { left: 14px; bottom: 14px; max-width: min(360px, 60%); }

.pxm-badge {
  display: inline-flex; flex-direction: column; gap: 1px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--rule); border-radius: 12px; padding: 7px 12px;
}
.pxm-badge-eye { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pxm-badge-value { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--charcoal); letter-spacing: -.01em; }
.pxm-badge--count { align-items: flex-end; }
.pxm-badge--count .pxm-badge-value { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }

.pxm-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--charcoal); color: #fff; border-radius: var(--r-pill);
  padding: 8px 14px 8px 11px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45);
}
.pxm-back svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.pxm-back:hover { background: var(--charcoal-2); color: #fff; }
.pxm-back[hidden] { display: none; }

.pxm-watermark { position: absolute; right: 64px; bottom: 16px; width: 88px; opacity: .22; pointer-events: none; z-index: 1; }

/* ---------- Legend ---------- */
.pxm-legend {
  background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--rule); border-radius: 14px; padding: 10px 12px;
}
.pxm-legend-title { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.pxm-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pxm-legend-item {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px;
  padding: 4px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13px; color: var(--charcoal);
  cursor: default; outline: none;
}
.pxm-legend-item:hover, .pxm-legend-item:focus-visible { background: var(--paper-warm); }
.pxm-legend-swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.pxm-legend-label { line-height: 1.25; }
.pxm-legend-count { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--charcoal-3); font-variant-numeric: tabular-nums; }

/* ---------- Toolbar above the map: search · jump-to · actions ---------- */
.pxm-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px; border-bottom: 1.5px solid var(--rule);
  background: rgb(255 255 255 / .72);
  position: relative; z-index: 5;
}
.pxm-search { position: relative; flex: 1 1 320px; min-width: 0; }
.pxm-search-icon { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pxm-search input {
  width: 100%; height: 44px; padding: 0 40px 0 42px;
  border: 1.5px solid var(--rule); border-radius: var(--r-pill);
  background: #fff; font-size: 15px; color: var(--charcoal); outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.pxm-search input::placeholder { color: var(--muted); }
.pxm-search input:focus { border-color: var(--orange); box-shadow: var(--focus-ring); }
.pxm-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: none; place-items: center;
  color: var(--charcoal-3); font-size: 18px; line-height: 1;
}
.pxm-search-clear:hover { background: var(--paper-warm); color: var(--charcoal); }
.pxm-search.has-text .pxm-search-clear { display: grid; }
.pxm-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1.5px solid var(--rule); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgb(var(--charcoal-rgb) / .45);
  max-height: 340px; overflow-y: auto; padding: 6px;
}
.pxm-results[hidden] { display: none; }
.pxm-result {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: 10px; color: var(--charcoal); font-size: 14px;
}
.pxm-result:hover, .pxm-result.is-active { background: var(--paper-warm); }
.pxm-result-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--paper-warm); color: var(--charcoal-3); flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.pxm-result-icon svg { width: 15px; height: 15px; }
.pxm-result-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pxm-result-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm-result-label mark { background: var(--orange-tint); color: inherit; border-radius: 3px; padding: 0 1px; }
.pxm-result-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm-result-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.pxm-result-empty { padding: 12px; color: var(--muted); font-size: 14px; }

.pxm-select { position: relative; flex: 0 1 240px; min-width: 170px; }
.pxm-select select {
  width: 100%; height: 44px; padding: 0 36px 0 16px;
  border: 1.5px solid var(--rule); border-radius: var(--r-pill);
  background: #fff; font-size: 15px; color: var(--charcoal); cursor: pointer;
  -webkit-appearance: none; appearance: none; outline: none;
}
.pxm-select select:focus { border-color: var(--orange); box-shadow: var(--focus-ring); }
.pxm-select-chev { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); pointer-events: none; color: var(--charcoal-3); }

.pxm-btn {
  height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1.5px solid var(--rule); background: #fff; color: var(--charcoal);
  transition: background .15s, border-color .15s, color .15s;
}
.pxm-btn:hover { border-color: var(--charcoal); }
.pxm-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.pxm-btn--dark { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.pxm-btn--dark:hover { background: var(--charcoal-2); color: #fff; }
.pxm-btn[aria-expanded="true"] { border-color: var(--charcoal); background: var(--paper-warm); }
.pxm-btn-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.pxm-btn-count[hidden] { display: none; }

/* ---------- Chip bar: "Colour the map by" and range filters ---------- */
.pxm-chipbar[hidden] { display: none !important; }
.pxm-chipbar {
  display: flex; gap: 14px 22px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1.5px solid var(--rule); background: rgb(255 255 255 / .55);
  position: relative; z-index: 4;
}
.pxm-chipbar-label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-deep); font-weight: 700; align-self: center; }
.pxm-chipgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pxm-chipgroup-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pxm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pxm-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1.5px solid var(--rule); background: #fff; color: var(--charcoal);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.pxm-chip:hover { border-color: var(--charcoal-3); }
.pxm-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pxm-chip.is-active, .pxm-chip[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.pxm-chip-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; color: var(--orange-deep); }
.pxm-chip.is-active .pxm-chip-icon, .pxm-chip[aria-pressed="true"] .pxm-chip-icon { color: var(--orange); }
.pxm-chip-icon svg { width: 15px; height: 15px; }
.pxm-chip-count { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 700; }
.pxm-chip.is-active .pxm-chip-count, .pxm-chip[aria-pressed="true"] .pxm-chip-count { color: rgb(255 255 255 / .7); }

/* Panel under the map: what the colours mean (law maps) */
.pxm-note {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1.5px solid var(--rule); background: rgb(255 255 255 / .6);
  font-size: 14px; color: var(--charcoal-3); position: relative; z-index: 2;
}
.pxm-note strong { color: var(--charcoal); font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.pxm-note-hint { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .pxm-card { border-radius: 20px; margin: 0 calc(var(--gutter) * -1 + 8px); }
  .pxm-toolbar { padding: 12px; gap: 8px; }
  .pxm-search { flex-basis: 100%; }
  .pxm-select { flex: 1 1 0; min-width: 0; }
  .pxm-btn { flex: 0 0 auto; }
  /* chips scroll sideways instead of wrapping into a wall of buttons */
  .pxm-chipbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 16px; padding: 10px 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .pxm-chipbar::-webkit-scrollbar { display: none; }
  .pxm-chips { flex-wrap: nowrap; }
  .pxm-chipgroup { flex-shrink: 0; }
  .pxm-canvas { aspect-ratio: 960 / 640; }
  .pxm-overlay--tl { left: 10px; top: 10px; }
  .pxm-overlay--tr { right: 10px; top: 10px; }
  .pxm-badge { padding: 5px 9px; }
  .pxm-badge-value { font-size: 13px; }
  .pxm-badge--count .pxm-badge-value { font-size: 17px; }
  .pxm-zoom { right: 10px; bottom: 10px; }
  .pxm-zoom-btn { width: 40px; height: 40px; }
  .pxm-watermark { display: none; }
  /* the legend leaves the map and sits under it as a compact grid */
  .pxm-overlay--bl { position: static; max-width: none; padding: 0; }
  .pxm-overlay--bl .pxm-legend { border-radius: 0; border: 0; border-top: 1.5px solid var(--rule); background: rgb(255 255 255 / .75); padding: 10px 14px; }
  .pxm-legend-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
  .pxm-legend-item { font-size: 12.5px; }
  .pxm-note { font-size: 13px; padding: 10px 14px; }
  .pxm-note-hint { margin-left: 0; width: 100%; }
}

/* ---------- Page section + stage + legend strip ---------- */
.pxm-section { padding: 8px 0 var(--s-9); }
.pxm-stage { position: relative; }
.pxm-legendbar { padding: 10px 16px; border-top: 1.5px solid var(--rule); background: rgb(255 255 255 / .8); position: relative; z-index: 2; }
.pxm-legendbar.pxm-legend { background: rgb(255 255 255 / .8); border: 0; border-top: 1.5px solid var(--rule); border-radius: 0; backdrop-filter: none; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.pxm-legendbar .pxm-legend-title { margin: 0 4px 0 0; }
.pxm-legendbar .pxm-legend-list { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
.pxm-legendbar .pxm-legend-item { grid-template-columns: 14px auto auto; margin: 0; }
@media (max-width: 760px) {
  .pxm-section { padding-bottom: var(--s-7); }
  .pxm-legendbar.pxm-legend { display: block; padding: 10px 14px; }
  .pxm-legendbar .pxm-legend-title { margin-bottom: 6px; }
  .pxm-legendbar .pxm-legend-list { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .pxm-legendbar .pxm-legend-item { grid-template-columns: 14px 1fr auto; }
}
.pxm-tooltip--fixed { position: fixed; z-index: 60; }

/* ============================================================
   Range Finder layer — dots, "you" pin, city anchors, popover
============================================================ */
circle.rx-dot { stroke: #fff; transition: opacity .2s; }
circle.rx-dot.is-strong     { fill: #2e9864; }
circle.rx-dot.is-moderate   { fill: var(--orange-deep); }
circle.rx-dot.is-unconfirmed{ fill: #d99a3e; }
circle.rx-dot.is-fuzzy      { fill-opacity: .6; }
@media (hover: hover) { circle.rx-dot:hover { stroke: var(--charcoal); } }
.rx-you-halo { fill: rgb(59 130 246 / .18); stroke: rgb(59 130 246 / .35); stroke-width: 1; animation: rx-pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.rx-you-core { fill: #3b82f6; stroke: #fff; stroke-width: 2; }
@keyframes rx-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.rx-city circle { fill: var(--charcoal-3); stroke: #fff; stroke-width: 1; }
.rx-city text { font-family: var(--body); font-size: 11px; font-weight: 600; fill: var(--charcoal-2); paint-order: stroke; stroke: rgb(255 255 255 / .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.rx-city { pointer-events: none; }
.pxm-stage .dir-pin-popover { transform: none; animation: none; z-index: 8; }
.pxm-stage .dir-pin-popover::after { display: none; }
.pxm-stage .dir-pin-popover.is-shown { animation: pxm-fade .16s ease; }
@keyframes pxm-fade { from { opacity: 0; transform: translateY(4px); } }

.pxm-legend-swatch--dot { border-radius: 50%; width: 11px; height: 11px; margin: 0 1.5px; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgb(0 0 0 / .08); }
.pxm-ramp { display: inline-flex; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.pxm-ramp i { width: 11px; height: 12px; display: block; }
.pxm-legend-item.pxm-legend-ramp { grid-template-columns: auto auto; }
.pxm-chip.is-disabled { opacity: .38; }
.pxm-chip.is-disabled:hover { border-color: var(--rule); cursor: default; }
.pxm-status { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: rgb(59 130 246 / .1); color: #1d4ed8; font-size: 13px; font-weight: 600; }
.pxm-status.is-shown { display: inline-flex; }
.pxm-status button { width: 24px; height: 24px; border-radius: 50%; color: inherit; font-size: 16px; line-height: 1; }
.pxm-status button:hover { background: rgb(59 130 246 / .15); }
.pxm-link { font-size: 13px; font-weight: 600; color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.pxm-link[hidden] { display: none; }
.rx-active-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 14px; }
.rx-active-row:has(.dir-filter-active:empty):has(.pxm-link[hidden]) { display: none; }
.rx-active-row:not(:empty) { padding-top: 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--rule); background: rgb(255 255 255 / .55); }
.pxm-btn.is-loading { opacity: .7; pointer-events: none; }
.pxm-btn.is-active.pxm-btn--dark { background: #1d4ed8; border-color: #1d4ed8; }
@media (max-width: 760px) {
  .pxm-toolbar #filter-toggle { flex: 0 0 auto; }
  .pxm-toolbar #locate-me { flex: 1 1 100%; justify-content: center; }
  .pxm-status { flex-basis: 100%; justify-content: space-between; }
  .rx-filters { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .rx-filters .pxm-chips { flex-wrap: wrap; }
  .pxm-stage .dir-pin-popover { width: calc(100% - 20px); left: 10px !important; right: 10px; top: auto !important; bottom: 10px; max-height: 70%; overflow: auto; }
}
/* Range Finder's rich suggestion list rides the shared dropdown slot. */
.pxm-search .search-autocomplete { position: absolute; left: 0; right: 0; top: calc(100% + 6px); width: auto; z-index: 20; }
.pxm-search input::-webkit-search-cancel-button, .pxm-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.pxm-status { font-family: var(--body); letter-spacing: 0; text-transform: none; border: 0; }
.pxm-status::before { display: none !important; }
.pxm-marker:focus { outline: none; }
circle.rx-dot:focus { stroke: var(--charcoal); stroke-width: 2px; }

/* Static locator map (each range's page) */
.pxm-canvas.is-static .pxm-region { cursor: default; }
.pxm-mini { position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #fbf6ee, #f6ecde); }
.pxm-mini .pxm-canvas { aspect-ratio: 400 / 280; max-height: none; }
.pxm-mini .pxm-region { fill: #ece5d8; stroke: #fff; }
.pxm-mini .pxm-region.is-home { fill: #f6d3b0; }
.pxm-mini .pxm-selected-outline { stroke: var(--orange-deep); stroke-width: 2; filter: none; animation: none; }
.pxm-mini-pin .rx-pin-body { fill: var(--orange-deep); stroke: #fff; stroke-width: 2; }
.pxm-mini-pin.is-strong .rx-pin-body { fill: #2e9864; }
.pxm-mini-pin.is-unconfirmed .rx-pin-body { fill: #d99a3e; }
.pxm-mini-pin .rx-pin-dot { fill: #fff; }
.pxm-mini-pin .rx-pin-pulse { fill: rgb(var(--orange-rgb) / .18); animation: rx-pulse 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.pxm-mini-note { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }