/* =============================================================================
   explorer.css  --  the local-rankings map on every region page (v2:explorer)
   ---------------------------------------------------------------------------
   Additive only, linked after the page's own sheets (head_extra). Everything is
   scoped to .rx (the explorer object) or .rx-band (its section), so no owner
   rule is overridden outside the map. Brand values come from the owner's --ds-*
   tokens; the only literal colours are the DATA roles below, each derived and
   checked with the dataviz skill's validator (README.md, "Colour roles"),
   because the owner's token sheet has no data palette.
   ============================================================================= */

.rx{
  /* -- map grounds (owner tokens) -- */
  --rx-ground:var(--ds-bg-surface);          /* #15161a water / outside the data */
  --rx-land:var(--ds-bg-surface-2);          /* #222429 land, "not measured" */
  --rx-edge:rgba(227,227,227,.16);           /* county and state lines */
  --rx-sel:var(--ds-accent-light);           /* #ae76ef hover / selection outline */

  /* -- LEADERS: who holds #1 at a spot. Categorical, 5 slots, validated ALL-PAIRS
        (a map: any two dots can sit side by side) in the dark band on #15161a:
        worst CVD dE 8.1 (deutan), worst normal dE 16.5, all >= 3:1. Slot 1 is the
        brand violet itself. Every listing that ranks can take a slot. -- */
  --rx-lead-1:var(--ds-accent);              /* #8d3fe8 */
  --rx-lead-2:#c27503;
  --rx-lead-3:#0fa181;
  --rx-lead-4:#cf2845;
  --rx-lead-5:#0f92f7;
  --rx-other:#6c6b6e;                        /* a listing outside the named five */

  /* -- RANK: Eagle Eyes' bands 1-3, 4-7, 8-10, 11-15, 16-20 in tones of purple,
        brighter = better, on the SAME one-hue ramp as the store pages' grid
        (site-src/rankings.css .rk-grid --rk-r1..r5): resolves to #e6d7fd #ccacf8
        #ae76ef #8d3fe8 #7731c8; ordinal checks pass on #15161a and #222429.
        Past 20 is not a rank: the neutral, labelled "20+". Change both together. -- */
  --rx-rank-1:color-mix(in oklab,var(--ds-accent-light) 30%,var(--ds-bg-light));
  --rx-rank-2:color-mix(in oklab,var(--ds-accent-light) 62%,var(--ds-bg-light));
  --rx-rank-3:var(--ds-accent-light);
  --rx-rank-4:var(--ds-accent);
  --rx-rank-5:color-mix(in oklab,var(--ds-accent) 72%,var(--ds-accent-deep));
  --rx-rank-x:#403f42;                       /* outside the top 20 / not in a spot's top three */
  --rx-rank-ink:#15161a;                     /* number on r1-r3 (13.35 / 9.32 / 5.71 : 1) */
  --rx-rank-ink-deep:#fff;                   /* number on r4-r5 (5.24 / 6.87 : 1) */

  /* -- CHANGE (diverging, this round against the one before): gains in purple,
        losses in the owner's neutral greys, "no change" a dark neutral midpoint.
        Derived with the dataviz validator (README.md): each arm passes the ordinal
        checks on #15161a; every gain step beside every loss step clears CVD
        dE 14.8 and normal dE 17.6; arm steps >= 3.45:1 on the ground. Four of the
        five are owner tokens. -- */
  --rx-up-2:var(--ds-accent-on-deep);        /* #be91f2 big gain / entered */
  --rx-up-1:var(--ds-accent);                /* #8d3fe8 gain / moved up */
  --rx-same:var(--ds-ink-soft-light);        /* #4a4a52 held / within 1 pt */
  --rx-down-1:#8a8a8a;                       /* loss / slipped */
  --rx-down-2:var(--ds-signature);           /* #e3e3e3 big loss / dropped out */
  --rx-void:#2a2b30;                         /* not in it either time / not compared */
  --rx-ink-dark:#15161a;
  --rx-ink-light:#fff;
  --rx-ink-soft:var(--ds-ink-soft);

  /* -- CHOROPLETHS (state view), 5 fixed classes each, one hue, monotone L,
        darkest step >= 2:1 on the ground. Locked-up = violet; competition takes
        the categorical slot-2 hue (amber), the skill's rule for a second
        sequential context. -- */
  --rx-lock-1:#5c3890; --rx-lock-2:#7b44c4; --rx-lock-3:#9958f1; --rx-lock-4:#b188f6; --rx-lock-5:#cdb6fc;
  --rx-comp-1:#6d4619; --rx-comp-2:#935a10; --rx-comp-3:#b77015; --rx-comp-4:#dc8d31; --rx-comp-5:#f5b575;

  /* -- US view (state status) -- */
  --rx-us-live:var(--ds-accent);             /* live, measured this round */
  --rx-us-landing:#5c3890;                   /* live, not measured this round */
  --rx-us-next:var(--ds-accent-deep);        /* coming next */

  --rx-panel-w:400px;
  --rx-side-w:clamp(256px, 21vw, 332px);     /* the ranking sidebar (2026-10-26) */
  /* the whole band fits the screen under the owner's fixed header (76 px, the band's 88 px scroll margin): bar 76, or
     131 when a store's long trail wraps the search switch under it (the map-mode button adds no row: explorer.js
     fitBar, 2026-10-27), + round strip 49 (one round) or about 87 (the
     slider) + this body + 2 px of rules; 100svh - 120px made the band 907 px on a 900 px screen, so the bar slid under
     the header (owner's test, 2026-10-24) */
  --rx-h:clamp(480px, calc(100svh - 308px), 900px);

  position:relative;
  /* its own stacking context: Leaflet's controls (z 1000) drew over the owner's fixed header (also z 1000) */
  isolation:isolate;
  color:var(--ds-ink);
  font-family:var(--ds-font-body);
  border-top:1px solid var(--ds-line);
  border-bottom:1px solid var(--ds-line);
}

/* the band itself: the map sits flush under the page head */
.rx-band{scroll-margin-top:calc(var(--ds-space-xl) + var(--ds-space-md))}

/* ---------------------------------------------------------------------------
   1 · THE BAR: where you are + which search
   --------------------------------------------------------------------------- */
.rx__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ds-space-sm) var(--ds-space-md);
  padding:var(--ds-space-sm) var(--ds-space-md);
  min-height:76px;
  border-bottom:1px solid var(--ds-line);
  background:var(--ds-bg-surface);
}
/* the trail keeps its own width (the search switch wraps under it when both do not fit); only the current place,
   last, shortens with an ellipsis when the trail alone is wider than the bar */
.rx__crumbs{flex:1 1 auto;min-width:0;max-width:100%}
.rx__crumbs ol{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ds-space-xs);margin:0;padding:0;list-style:none;min-width:0}
.rx__crumbs li{display:flex;align-items:center;gap:var(--ds-space-xs);flex:0 0 auto;min-width:0}
.rx__crumbs li:last-child{flex:0 1 auto;overflow:hidden}
.rx__crumbs a,
.rx__crumbs [aria-current]{
  display:inline-flex;align-items:center;min-height:44px;min-width:0;
  font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;text-decoration:none;
}
.rx__crumbs a{color:var(--ds-accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--ds-dur-fast) var(--ds-ease-out)}
.rx__crumbs a:hover,.rx__crumbs a:focus-visible{color:var(--ds-ink-heading)}
.rx__crumbs a:focus-visible{outline:2px solid var(--ds-accent-ink);outline-offset:3px;border-radius:var(--ds-r-control)}
.rx__crumbs [aria-current]{display:block;line-height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ds-ink-heading)}
.rx__bar > .rx__switch{flex:0 0 auto}
.rx__sep{color:var(--ds-ink-soft);font-size:var(--ds-step-micro)}
/* the map-mode button (explorer.js showMapModeBar; 2026-10-27, the owner: "so you can open it right away"): his ghost
   button with the map-mode control's icon, at the end of the trail's row; the label follows the mode */
.rx .rx__mmb{flex:0 0 auto;margin:0;padding-top:0;padding-bottom:0;min-height:44px;gap:var(--ds-space-xs);white-space:nowrap}
.rx .rx__mmb[hidden]{display:none}
.rx .rx__mmb svg{flex:0 0 auto;width:16px;height:16px}
.rx__mmb-off,.rx--mapmode .rx__mmb-on{display:none}
.rx--mapmode .rx__mmb-off{display:inline}
/* the button never costs the bar a row nor the trail its words (explorer.js fitBar; fix round 1, 2026-10-27): where it
   would, the searches take their short names (as below 1280 px), then the button its icon alone, a 44 px target whose
   words stay for screen readers */
.rx--bar-short .rx__long{display:none}
.rx--bar-short .rx__short{display:inline}
.rx--bar-icon .rx__mmb{width:44px;min-width:44px;padding:0;gap:0;justify-content:center}
.rx--bar-icon .rx__mmb > span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the search switch, the view switch and the colour switch are the owner's
   .ad-choices radio pills, used as they ship; only their placement is set here */
.rx__switch{display:flex;align-items:center;gap:var(--ds-space-sm);margin:0;padding:0;border:0;min-width:0}
.rx__switch[hidden]{display:none}
.rx__switch > legend{float:left;margin:0 var(--ds-space-xs) 0 0;padding:0}
.rx .rx__switch .ad-choices{margin:0;gap:var(--ds-space-xs);flex-wrap:nowrap}
.rx .rx__switch .ad-choice__label{white-space:nowrap}
.rx .rx__switch .ad-choice__input:disabled + .ad-choice__label{opacity:var(--ds-opacity-disabled);cursor:not-allowed}
.rx__short{display:none}

/* ---------------------------------------------------------------------------
   1b · THE TIME STRIP: which scan round, and standing or change
   --------------------------------------------------------------------------- */
.rx__time{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ds-space-xs) var(--ds-space-lg);
  padding:var(--ds-space-xs) var(--ds-space-md) var(--ds-space-sm);
  border-bottom:1px solid var(--ds-line);background:var(--ds-bg-surface)}
.rx__time[hidden]{display:none}
.rx__rounds{flex:1 1 420px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs) var(--ds-space-md)}
.rx__first{margin:0;padding:var(--ds-space-2xs) 0;font-size:var(--ds-step-micro);line-height:1.5;color:var(--ds-ink-soft)}
.rx__first-sub{color:var(--ds-ink-soft)}
.rx__round-h{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0;flex:0 0 auto}
.rx__round-k{font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}
.rx__round-v{font-family:var(--ds-font-display);font-size:var(--ds-step-body);font-weight:700;line-height:1.35;color:var(--ds-ink-heading);font-variant-numeric:tabular-nums}
.rx__round-set{flex:0 1 auto}
.rx__views{flex:0 0 auto}

/* the slider: a native range (drag, click, arrow keys), the owner's violet as the travelled part */
.rx__slider{position:relative;flex:1 1 260px;min-width:200px;padding:6px 10px 30px}
.rx__range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;
  --rx-fill:0%}
.rx__range:focus{outline:none}
.rx__range:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:4px;border-radius:var(--ds-r-control)}
.rx__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--ds-accent) 0,var(--ds-accent) var(--rx-fill),var(--ds-line) var(--rx-fill),var(--ds-line) 100%)}
.rx__range::-moz-range-track{height:4px;border-radius:2px;background:var(--ds-line)}
.rx__range::-moz-range-progress{height:4px;border-radius:2px;background:var(--ds-accent)}
.rx__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:var(--ds-ink-heading);border:3px solid var(--ds-accent);box-shadow:var(--ds-shadow-rest)}
.rx__range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ds-ink-heading);border:3px solid var(--ds-accent);box-shadow:var(--ds-shadow-rest)}
.rx__ticks{position:absolute;left:10px;right:10px;bottom:0;height:28px}
.rx__tick{position:absolute;top:0;transform:translateX(-50%);min-width:44px;min-height:28px;margin:0;padding:4px 2px;border:0;background:none;cursor:pointer;
  font-family:var(--ds-font-body);font-size:12px;line-height:1.2;color:var(--ds-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.rx__tick:first-child{transform:none;text-align:left;margin-left:-10px}
.rx__tick:last-child{transform:translateX(-100%);text-align:right;margin-left:10px}
.rx__tick:hover{color:var(--ds-ink-heading)}
.rx__tick.is-on{color:var(--ds-ink-heading);font-weight:700}
.rx__tick:disabled{opacity:var(--ds-opacity-disabled);cursor:not-allowed}
.rx__tick:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:1px;border-radius:var(--ds-r-control)}
.rx__tick--minor{visibility:hidden}

/* ---------------------------------------------------------------------------
   2 · THE BODY: map stage + panel
   --------------------------------------------------------------------------- */
.rx__body{position:relative}
/* the stage keeps Leaflet's panes and controls (z up to 1000) inside it, so the phone's open sheet (z 700) covers the
   map's credit line instead of the credit floating over the sheet's text (owner's test, 2026-10-24) */
.rx__stage{position:relative;overflow:hidden;background:var(--rx-ground);isolation:isolate}
.rx__map{position:absolute;inset:0}

@media (min-width:1024px){
  .rx__body{display:grid;grid-template-columns:minmax(0,1fr) var(--rx-panel-w);height:var(--rx-h)}
  .rx__stage{grid-column:1;min-height:0}
  .rx__panel{grid-column:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    border-left:1px solid var(--ds-line);background:var(--ds-bg-warm)}
  .rx__handle{display:none}
  /* a county or city map: the ranking sidebar takes the left column (explorer.js renderSide; the owner, 2026-10-26:
     "left hand side bar that ranks most visibility to least visibility") */
  .rx--side .rx__body{grid-template-columns:var(--rx-side-w) minmax(0,1fr) var(--rx-panel-w)}
  .rx--side .rx__side{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;
    border-right:1px solid var(--ds-line);background:var(--ds-bg-warm)}
  .rx--side .rx__stage{grid-column:2;grid-row:1}
  .rx--side .rx__panel{grid-column:3;grid-row:1}
  .rx__side-top{flex:0 0 auto;padding:var(--ds-space-md) var(--ds-space-md) var(--ds-space-sm);border-bottom:1px solid var(--ds-line)}
  .rx__side-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--ds-space-xs) var(--ds-space-md)}
  .rx__side .rx__side-list.tc-sec__rows{margin-top:0}
  .rx__side-none{padding:0 var(--ds-space-md)}
}

/* the fallback shows until the map is up (no JS, or the map library blocked) */
.rx__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--ds-space-lg);text-align:center}
.rx__fallback p{margin:0;max-width:34ch;color:var(--ds-ink-soft);font-size:var(--ds-step-body);line-height:1.6}
.rx--ready .rx__fallback{display:none}
/* the script runs and the data is on its way: a quiet ring instead of the no-JS sentence (explorer.js boot, UX-02) */
.rx--loading .rx__fallback p{display:none}
.rx--loading .rx__fallback::after{content:"";width:36px;height:36px;border-radius:50%;
  border:2px solid var(--ds-line);border-top-color:var(--ds-primary);animation:rx-spin 1s linear infinite}
@keyframes rx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.rx--loading .rx__fallback::after{animation:none}}

/* ---------------------------------------------------------------------------
   3 · LEAFLET, dressed in the owner's tokens (scoped to the explorer)
   --------------------------------------------------------------------------- */
.rx .leaflet-container{background:var(--rx-ground);font-family:var(--ds-font-body);font-size:var(--ds-step-micro);
  -webkit-tap-highlight-color:transparent}
.rx .leaflet-container:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-2px}
.rx .leaflet-container a{color:var(--ds-accent-ink)}
.rx .leaflet-interactive:focus{outline:none}
.rx .leaflet-bar{border:0;border-radius:var(--ds-r-control);box-shadow:var(--ds-shadow-rest);overflow:hidden}
.rx .leaflet-bar a{
  width:44px;height:44px;line-height:42px;cursor:pointer;
  background:var(--ds-bg-surface-2);color:var(--ds-ink);
  border-bottom:1px solid var(--ds-line);
  font:700 20px/42px var(--ds-font-display);
  transition:background-color var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out);
}
.rx .leaflet-bar a:last-child{border-bottom:0}
.rx .leaflet-bar a:hover{background:var(--ds-bg-warm);color:var(--ds-accent-ink)}
.rx .leaflet-bar a:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-2px}
.rx .leaflet-bar a.leaflet-disabled{background:var(--ds-bg-surface-2);color:var(--ds-ink-soft);opacity:var(--ds-opacity-disabled);cursor:not-allowed}
.rx .leaflet-top.leaflet-right{top:var(--ds-space-sm);right:var(--ds-space-sm)}
.rx .leaflet-top .leaflet-control{margin:0}
.rx .leaflet-control-attribution{background:rgba(21,22,26,.82);color:var(--ds-ink-soft);font-size:11px;line-height:1.5;padding:2px 8px;border-top-left-radius:var(--ds-r-control)}
.rx .leaflet-control-attribution a{color:var(--ds-accent-ink)}
.rx .leaflet-control-attribution:empty{display:none}

/* THE BASEMAP: OpenStreetMap's standard tiles, as Eagle Eyes uses them, turned dark with one filter on the tile
   pane so they sit in the owner's dark palette, quieter than the data drawn on them. Measured through this filter
   in Chromium (README.md section 5): OSM land #f2efe9 -> #161517 (the owner's surface is #15161a), water #aad3df ->
   #2c2a2e, road casing #bbbbbb -> #353438, motorway #e892a2 -> #424146, label text #000 -> #a7a2b0 (a soft grey). */
.rx .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.632) contrast(.909) sepia(.18) hue-rotate(218deg) saturate(1.35)}
.rx--vector .rx-tiles{display:none}
.rx .rx-dots{pointer-events:none}

/* state labels on the US view, county labels on a state */
.rx .rx-name:not(.leaflet-interactive){pointer-events:none}
.rx .rx-name.leaflet-interactive{cursor:pointer}
.rx-name__in{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:3px 4px;white-space:nowrap;
  font-family:var(--ds-font-display);font-weight:800;color:var(--ds-ink-heading);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rx-name__abbr{font-size:13px;letter-spacing:.06em;line-height:1}
.rx-name__in--county .rx-name__abbr{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-ink-heading);opacity:.92}
.rx-name__tag{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;
  padding:3px 6px;border-radius:var(--ds-r-pill);background:rgba(21,22,26,.78);color:var(--ds-accent-ink);text-shadow:none}
.rx-name--off .rx-name__in{align-items:flex-start;padding-left:20px}
.rx-name--off .rx-name__in::before{content:"";position:absolute;left:0;top:50%;width:15px;height:1px;background:var(--ds-accent-light)}
/* the small Atlantic states' names in their column off the coast (explorer.js layoutNames, 2026-10-28): one line each,
   the abbreviation then the tag, joined to the state by a drawn line */
.rx-name--call .rx-name__in{flex-direction:row;align-items:center;gap:6px;padding:2px 4px}
/* a US name without room for its tag keeps its abbreviation (layoutNames nameShort) */
.rx-name--short .rx-name__tag{display:none}
.rx .rx-name.leaflet-interactive:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:1px;border-radius:var(--ds-r-control)}

/* city pins (a county map) and store pins (a city map): links to their pages. The marker is a 44 px transparent tap
   target (explorer.js setPins; UX-07) with the 18 px mark at its centre. */
.rx .rx-pin{cursor:pointer}
.rx-pin__in{position:absolute;left:13px;top:13px;display:block;width:18px;height:18px}
.rx-pin__dot{position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--ds-ink-heading);box-shadow:0 0 0 2px var(--rx-ground),0 0 0 3.5px var(--ds-accent-light),0 2px 8px rgba(0,0,0,.6)}
.rx-pin--store .rx-pin__dot{border-radius:2px;transform:rotate(45deg);width:10px;height:10px;left:4px;top:4px}
.rx-pin__label{position:absolute;left:21px;top:50%;transform:translateY(-50%);padding:2px 7px;border-radius:var(--ds-r-pill);white-space:nowrap;
  background:rgba(21,22,26,.86);border:1px solid var(--ds-glass-border);
  font-family:var(--ds-font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--ds-ink-heading)}
.rx-pin--left .rx-pin__label{left:auto;right:21px}
/* a place this round has not measured (yet): the pin still leads to its page, in a quieter grey */
.rx-pin--quiet .rx-pin__dot{background:var(--ds-ink-soft);box-shadow:0 0 0 2px var(--rx-ground),0 0 0 3.5px var(--ds-ink-soft-light),0 2px 8px rgba(0,0,0,.6)}
.rx-pin--quiet .rx-pin__label{color:var(--ds-ink-soft)}
.rx .rx-pin:hover .rx-pin__dot,.rx .rx-pin:focus-visible .rx-pin__dot{background:var(--ds-accent-light)}
.rx .rx-pin:hover .rx-pin__label{color:var(--ds-accent-ink)}
.rx .rx-pin:focus-visible{outline:none}
.rx .rx-pin:focus-visible .rx-pin__in{outline:2px solid var(--ds-accent-light);outline-offset:2px;border-radius:50%}
/* every other listing that ranks here (2026-10-26, the owner: "the location pins of each dispensary on every view"):
   a smaller, quieter mark than a store on the scan list; with a mouse its target is 24 px (explorer.js setPins), so the
   squares between hundreds of pins stay clickable */
.rx-pin--small .rx-pin__in{left:3px;top:3px}
.rx-pin--listing .rx-pin__dot{left:5px;top:5px;width:8px;height:8px;background:var(--ds-ink);
  box-shadow:0 0 0 1.5px var(--rx-ground),0 1px 5px rgba(0,0,0,.65)}
.rx--far .rx-pin--listing:not(.rx-pin--on) .rx-pin__dot{left:6px;top:6px;width:6px;height:6px}
/* the pick: its pin in the accent, ringed, above the rest */
.rx .rx-pin--on .rx-pin__dot{background:var(--ds-accent-light);box-shadow:0 0 0 2px var(--rx-ground),0 0 0 4px var(--ds-ink-heading),0 2px 10px rgba(0,0,0,.7)}
.rx-pin--listing.rx-pin--on .rx-pin__dot{left:3px;top:3px;width:12px;height:12px}
/* a crowd spread apart on its legs (explorer.js spreadPins) */
.rx .rx-pin--spread .rx-pin__dot{box-shadow:0 0 0 2px var(--rx-ground),0 0 0 3.5px var(--ds-accent-light),0 2px 8px rgba(0,0,0,.6)}

/* the pick's popup: Leaflet's popup in the legend card's dress (explorer.js openPop; 2026-10-26) */
.rx .rx-pop{margin-bottom:12px}
.rx .rx-pop .leaflet-popup-content-wrapper{padding:0;border-radius:var(--ds-r-surface);color:var(--ds-ink);text-align:left;
  background:var(--ds-glass-bg);-webkit-backdrop-filter:var(--ds-glass-blur);backdrop-filter:var(--ds-glass-blur);
  border:1px solid var(--ds-glass-border);box-shadow:var(--ds-shadow-card),var(--ds-inset-hi)}
.rx .rx-pop .leaflet-popup-content{margin:0;font-size:var(--ds-step-micro);line-height:1.45;min-height:0}
.rx .rx-pop .leaflet-popup-content p{margin:0}
.rx .rx-pop .leaflet-popup-tip{background:var(--ds-bg-surface-2);border:1px solid var(--ds-glass-border);box-shadow:none}
.rx-pop__in{position:relative;padding:var(--ds-space-sm) var(--ds-space-md) var(--ds-space-md)}
.rx-pop__in .rx__card-eye{padding-right:36px}
.rx-pop__in .rx__card-t{padding-right:28px}
.rx .rx-pop__in .rx__card-meta{margin-top:2px}
.rx-pop__x{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;
  border:0;border-radius:var(--ds-r-control);background:none;cursor:pointer;color:var(--ds-ink-soft);font:400 22px/1 var(--ds-font-body)}
.rx-pop__x:hover{color:var(--ds-ink-heading)}
.rx-pop__x:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-6px}
.rx .rx-pop__h{margin:var(--ds-space-sm) 0 0;font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}
/* his solid button as it ships (Leaflet's link colour would turn its label violet on violet) */
.rx .rx-pop .rx-pop__cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:var(--ds-space-sm);text-decoration:none;
  color:var(--ds-ink-on-dark)}
.rx .rx-pop .rx-pop__cta:hover,.rx .rx-pop .rx-pop__cta:focus-visible{color:var(--ds-ink-on-dark)}
.rx .rx-pop .rx-pop__cta:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:2px}
/* a popup taller than the room above a phone's sheet scrolls inside (Leaflet's leaflet-popup-scrolled): its button
   stays in sight at the bottom (fixer, 2026-10-26: the "of any search" line pushed it under the fold at 375 px) */
.rx .rx-pop .leaflet-popup-scrolled .rx-pop__cta{position:sticky;bottom:0;z-index:1}
.rx .rx-pop .rx-pop__by{margin-top:var(--ds-space-2xs)}

/* map mode: a control under the zoom buttons (explorer.js setMapMode; the owner, 2026-10-26: "a full screen mode/map
   mode") */
.rx .leaflet-top .rx-mm{margin-top:var(--ds-space-xs)}
.rx .rx-mm__b{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;cursor:pointer;
  background:var(--ds-bg-surface-2);color:var(--ds-ink);
  transition:background-color var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out)}
.rx .rx-mm__b:hover{background:var(--ds-bg-warm);color:var(--ds-accent-ink)}
.rx .rx-mm__b:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-2px}
.rx .rx-mm__b svg{width:18px;height:18px}
.rx .rx-mm__out,.rx--mapmode .rx-mm__in{display:none}
.rx--mapmode .rx-mm__out{display:inline}

/* ---------------------------------------------------------------------------
   4 · OVER THE MAP: colour switch, legend, hover card, wheel hint
   --------------------------------------------------------------------------- */
.rx__float{position:absolute;z-index:500;
  background:var(--ds-glass-bg);-webkit-backdrop-filter:var(--ds-glass-blur);backdrop-filter:var(--ds-glass-blur);
  border:1px solid var(--ds-glass-border);border-radius:var(--ds-r-surface);box-shadow:var(--ds-shadow-card),var(--ds-inset-hi)}

.rx__modes{top:var(--ds-space-sm);left:var(--ds-space-sm);padding:var(--ds-space-xs) var(--ds-space-sm)}
.rx__modes[hidden]{display:none}

.rx__legend{right:var(--ds-space-sm);bottom:var(--ds-space-lg);max-width:min(330px,calc(100% - 2 * var(--ds-space-sm)));
  padding:var(--ds-space-sm) var(--ds-space-md) var(--ds-space-sm)}
.rx__legend[hidden]{display:none}
@media (min-width:1024px){.rx__legend--left{left:var(--ds-space-sm);right:auto}}
/* the pick's popup would touch the key in either corner: the key steps out until it closes (explorer.js placeLegend) */
.rx__legend--off{visibility:hidden}
.rx__legend-h{margin:0 0 var(--ds-space-xs);font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}
.rx__keys{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rx__key{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:var(--ds-space-xs);
  font-size:var(--ds-step-micro);line-height:1.35;color:var(--ds-ink)}
.rx__key-name{display:flex;align-items:center;min-width:0}
.rx__key-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx__key-name .rx__tag{flex:0 0 auto}
.rx__key--wrap .rx__key-txt{white-space:normal;overflow:visible}
.rx__key-n{color:var(--ds-ink-soft);font-variant-numeric:tabular-nums}
.rx__sw{display:block;width:12px;height:12px;border-radius:50%;justify-self:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.rx__sw--sq{border-radius:3px;box-shadow:0 0 0 1px var(--rx-edge)}
.rx__sw--rank{width:16px;height:16px;font:700 8px/16px var(--ds-font-mono);text-align:center;color:var(--rx-rank-ink);letter-spacing:-.04em}
.rx__sw--hollow{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ds-ink-soft);color:var(--ds-ink-soft)}
.rx__sw--pin{width:12px;height:12px;background:var(--ds-ink-heading);box-shadow:0 0 0 2px var(--rx-ground),0 0 0 3.5px var(--ds-accent-light)}
.rx__sw--store{border-radius:2px;transform:rotate(45deg);width:10px;height:10px}
.rx__sw--quiet{background:var(--ds-ink-soft);box-shadow:0 0 0 2px var(--rx-ground),0 0 0 3.5px var(--ds-ink-soft-light)}
.rx__sw--listing{width:8px;height:8px;background:var(--ds-ink);box-shadow:0 0 0 1.5px var(--rx-ground),0 0 0 2.5px rgba(255,255,255,.18)}
.rx__legend-note{margin:var(--ds-space-xs) 0 0;font-size:var(--ds-step-micro);line-height:1.45;color:var(--ds-ink-soft)}
.rx__legend-toggle{display:none}

.rx__card{left:0;top:0;width:max-content;max-width:330px;padding:var(--ds-space-sm) var(--ds-space-md);pointer-events:none;
  font-size:var(--ds-step-micro);line-height:1.45}
.rx__card[hidden]{display:none}
.rx__card-eye{margin:0;font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}
.rx__card-t{margin:2px 0 0;font-family:var(--ds-font-display);font-size:var(--ds-step-body);font-weight:700;line-height:1.35;
  letter-spacing:.01em;color:var(--ds-ink-heading)}
.rx__card-meta{margin:2px 0 0;color:var(--ds-ink-soft)}
.rx__card-rows{display:grid;gap:3px;margin:var(--ds-space-xs) 0 0;padding:0;list-style:none}
.rx__card-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--ds-space-xs);align-items:baseline;color:var(--ds-ink)}
.rx__card-row b{font-family:var(--ds-font-display);font-weight:700;color:var(--ds-ink-soft);letter-spacing:.08em}
.rx__card-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx__card-row i{font-style:normal;color:var(--ds-ink-soft);font-variant-numeric:tabular-nums}
.rx__card-rows--pairs .rx__card-row{grid-template-columns:minmax(0,1fr) auto}
.rx__card-row--me{color:var(--ds-ink-heading)}
.rx__card-row--me b{color:var(--ds-accent-ink)}
.rx__card-say{margin:var(--ds-space-xs) 0 0;padding-top:var(--ds-space-xs);border-top:1px solid var(--ds-line);color:var(--ds-ink);
  font-size:var(--ds-step-micro);line-height:1.5}
.rx__card-say:empty{display:none}

/* the lead-gen mark: a neutral tag beside the listing's own name, never a hiding */
.rx__tag{display:inline-block;margin-left:6px;padding:0 6px;vertical-align:.12em;border:1px solid var(--ds-line);border-radius:var(--ds-r-pill);
  font-family:var(--ds-font-body);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
  color:var(--ds-ink-soft);background:transparent;white-space:nowrap;cursor:help}
.hw-cell__title .rx__tag{vertical-align:.3em}

.rx__hint{position:absolute;z-index:600;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:var(--ds-space-sm) var(--ds-space-md);
  border-radius:var(--ds-r-pill);background:var(--ds-scrim);color:var(--ds-ink-heading);font-family:var(--ds-font-display);
  font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;
  opacity:0;transition:opacity var(--ds-dur) var(--ds-ease-out)}
.rx__hint.is-on{opacity:1}

.rx__busy{position:absolute;z-index:550;left:0;right:0;top:0;height:2px;background:var(--ds-grad-brand);
  transform-origin:left;transform:scaleX(0);opacity:0;transition:opacity var(--ds-dur) var(--ds-ease-out)}
.rx--busy .rx__busy{opacity:1;animation:rx-busy 1.1s var(--ds-ease-out) infinite}
@keyframes rx-busy{0%{transform:scaleX(0)}60%{transform:scaleX(.85)}100%{transform:scaleX(1);opacity:0}}

/* ---------------------------------------------------------------------------
   5 · THE PANEL (K23): eyebrow, title, sentence, numbered rows, actions
   --------------------------------------------------------------------------- */
.rx__panel-in{padding:var(--ds-space-lg)}
.rx__panel .hw-cell__title{margin-top:var(--ds-space-xs);overflow-wrap:anywhere}
.rx__panel .hw-cell__lead{margin-top:var(--ds-space-sm)}
.rx__meta{margin:var(--ds-space-sm) 0 0;font-size:var(--ds-step-micro);line-height:1.5;color:var(--ds-ink-soft)}
.rx__more{margin:var(--ds-space-2xs) 0 0;padding-left:var(--ds-space-xs);font-size:var(--ds-step-micro);color:var(--ds-ink-soft)}
.rx__group{margin-top:var(--ds-space-lg)}
.rx__group-h{margin:0 0 var(--ds-space-2xs);font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}

/* rows: the owner's numbered hairlined rows (.tc-sec__rows > .tc-defs), made
   choosable. The pick (a button, or a link to a page) is stretched over the row; a page link sits above it. */
:is(.rx__panel,.rx__side) .tc-sec__rows{margin-top:var(--ds-space-xs)}
:is(.rx__panel,.rx__side) .tc-sec__rows .tc-defs{padding:var(--ds-space-sm) var(--ds-space-xs);
  transition:transform var(--ds-dur-fast) var(--ds-ease-out),background-color var(--ds-dur-fast) var(--ds-ease-out)}
:is(.rx__panel,.rx__side) .tc-defs__t{font-size:var(--ds-step-body);line-height:1.4}
:is(.rx__panel,.rx__side) .tc-defs__d{font-size:var(--ds-step-micro);line-height:1.5}
/* the ranking sidebar's rows: the board's rows, a little tighter (a city lists two hundred and more) */
.rx__side .tc-sec__rows .tc-defs{padding:var(--ds-space-xs) var(--ds-space-xs) var(--ds-space-2xs)}
.rx__side .tc-sec__rows .tc-defs[hidden]{display:none}
.rx__side .rx__row-foot{min-height:24px}
.rx__side-top .rx__group-h{margin:0}
.rx__side-top .rx__meta{margin-top:var(--ds-space-2xs)}
.rx__find.rx__side-find{margin-top:var(--ds-space-sm)}
.rx__side .rx__side-find .ct-input{min-height:44px}
.rx__side-more{margin:var(--ds-space-xs) 0 0}
.rx__side-more[hidden],.rx__side-none[hidden],.rx__side[hidden]{display:none}
.rx__row--pick::before{content:"";position:absolute;left:0;top:var(--ds-space-xs);bottom:var(--ds-space-xs);width:2px;
  background:var(--ds-accent);opacity:0;transition:opacity var(--ds-dur-fast) var(--ds-ease-out)}
.rx__row--pick:hover,.rx__row--pick:focus-within,.rx__row--on{background:var(--ds-bg-surface-2)}
.rx__row--pick:hover::before,.rx__row--pick:focus-within::before,.rx__row--on::before{opacity:1}
.rx__row--pick:hover .tc-row__num,.rx__row--pick:focus-within .tc-row__num,.rx__row--on .tc-row__num{color:var(--ds-accent-ink)}
.rx__pick{position:absolute;inset:0;z-index:1;width:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;color:inherit}
a.rx__pick{display:block}
.rx__pick:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-2px}
.rx__row-t{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--ds-space-xs);min-width:0}
.rx__row-t .rx__sw{flex:0 0 auto;margin-top:.42em}
.rx__row-t .rx__tag{margin-left:0;margin-top:.3em}
.rx__row-name{min-width:0;overflow-wrap:anywhere}
.rx__row-foot{display:flex;align-items:center;gap:var(--ds-space-sm);margin-top:2px;min-height:32px}
.rx__share{flex:1 1 auto;display:block;height:4px;border-radius:2px;background:var(--ds-line);overflow:hidden}
.rx__share > i{display:block;height:100%;border-radius:0 2px 2px 0;background:var(--ds-accent)}
.rx__row-foot .hw-cta,.rx__row-links .hw-cta{position:relative;z-index:2;min-height:32px;flex:0 0 auto}
.rx__row-links{display:flex;flex-wrap:wrap;gap:0 var(--ds-space-md);margin-top:var(--ds-space-xs)}
.rx__row--quiet .tc-defs__t{color:var(--ds-ink-soft)}
/* change rows: the arrow line takes the gain / loss role colour as a mark beside the text (text stays ink) */
.rx__chg{position:relative;padding-left:14px}
.rx__chg::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%}
.rx__chg--up::before{background:var(--rx-up-1)}
.rx__chg--new::before{background:var(--rx-up-2)}
.rx__chg--down::before{background:var(--rx-down-1)}
.rx__chg--gone::before{background:var(--rx-down-2)}

/* the listing finder: the owner's .ct-input, plus a listbox */
.rx__find{position:relative;margin-top:var(--ds-space-lg)}
.rx__find label{display:block;margin:0 0 var(--ds-space-xs);font-family:var(--ds-font-display);font-size:var(--ds-step-micro);
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ds-accent-ink)}
.rx__opts{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;max-height:280px;overflow-y:auto;
  background:var(--ds-bg-surface-2);border:1px solid var(--ds-glass-border);border-radius:var(--ds-r-control);box-shadow:var(--ds-shadow-card)}
.rx__opts[hidden]{display:none}
.rx__opt{display:flex;justify-content:space-between;gap:var(--ds-space-sm);padding:10px var(--ds-space-sm);border-radius:5px;cursor:pointer;
  font-size:var(--ds-step-body);line-height:1.35;color:var(--ds-ink)}
.rx__opt small{flex:0 0 auto;font-size:var(--ds-step-micro);color:var(--ds-ink-soft);align-self:center}
.rx__opt[aria-selected="true"],.rx__opt:hover{background:var(--ds-bg-warm);color:var(--ds-ink-heading)}
.rx__opt--none{cursor:default;color:var(--ds-ink-soft)}
/* the hub's and a state's store finder (explorer.js storeSeek; UX-04): in the bar, between the trail and the searches */
.rx__find.rx__seek{flex:1 1 320px;max-width:440px;margin:0;z-index:6}
.rx__seek label{margin-bottom:2px}
.rx__seek .ct-input{min-height:44px}
.rx__seek .rx__opts{z-index:30}
/* under the page's own heading: his .hw-head clips what overflows it, so there the list opens in the flow */
.rx__find.rx__seek--head{position:relative;margin:var(--ds-space-md) 0 var(--ds-space-md);z-index:auto}
.rx__seek--head .rx__opts{position:static;margin-top:4px}
/* "Skip the map" (explorer.js boot; UX-05): out of sight until the keyboard reaches it, then at the band's top left */
.rx-skip{position:absolute;left:var(--ds-space-sm);top:var(--ds-space-sm);z-index:40;padding:var(--ds-space-xs) var(--ds-space-sm);
  background:var(--ds-bg-surface-2);color:var(--ds-ink-heading);border:1px solid var(--ds-line);border-radius:var(--ds-r-control);font-size:14px;
  text-decoration:none}
.rx-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;border:0;overflow:hidden;white-space:nowrap}
.rx-skip:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:2px}
/* touch: the row's own links are full 44 px targets (UX-07; they were 32) */
@media (pointer:coarse){
  .rx__row-foot,.rx__row-foot .hw-cta,.rx__row-links .hw-cta{min-height:44px}
}
.rx__opt--none:hover{background:none;color:var(--ds-ink-soft)}

.rx__panel .mc-actions{margin-top:var(--ds-space-lg)}
.rx__panel .mc-actions .btn{min-height:44px}
.rx__panel .mc-actions[hidden]{display:none}
.rx__promise{margin:var(--ds-space-lg) 0 0;padding-top:var(--ds-space-md);border-top:1px solid var(--ds-line);
  font-family:var(--ds-font-display);font-size:var(--ds-step-body);font-weight:700;line-height:1.4;color:var(--ds-ink-heading)}
.rx__promise .mc-hero__terms{font-family:var(--ds-font-body);font-weight:400;margin-left:4px}
.rx__panel .loc-cite{margin-top:var(--ds-space-md)}
.rx__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 var(--ds-space-xs);padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-accent-ink)}
.rx__back:hover,.rx__back:focus-visible{color:var(--ds-ink-heading)}
.rx__back:focus-visible{outline:2px solid var(--ds-accent-ink);outline-offset:3px;border-radius:var(--ds-r-control)}
.rx__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rx__err{margin:var(--ds-space-md) 0 0;padding:var(--ds-space-sm) var(--ds-space-md);border:1px solid var(--ds-line);border-radius:var(--ds-r-control);
  color:var(--ds-ink);font-size:var(--ds-step-micro)}

/* ---------------------------------------------------------------------------
   6 · BELOW 1024px: the panel becomes a bottom sheet over the map
   --------------------------------------------------------------------------- */
@media (max-width:1279px){
  .rx__long{display:none}
  .rx__short{display:inline}
}
@media (max-width:1023px){
  .rx{--rx-peek:148px}
  .rx__body{overflow:hidden}          /* the collapsed sheet hangs below the stage: clip it to the band */
  .rx__stage{height:clamp(460px, 72svh, 680px)}
  .rx__panel{
    position:absolute;z-index:700;left:0;right:0;bottom:0;max-height:82%;
    display:flex;flex-direction:column;
    background:var(--ds-bg-warm);border:1px solid var(--ds-glass-border);border-bottom:0;
    border-radius:var(--ds-r-surface) var(--ds-r-surface) 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.45);
    transform:translateY(calc(100% - var(--rx-peek)));transition:transform var(--ds-dur) var(--ds-ease-out);
  }
  .rx--sheet-open .rx__panel{transform:none}
  .rx__panel-in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--ds-space-md) var(--ds-space-lg)}
  .rx:not(.rx--sheet-open) .rx__panel-in{overflow:hidden}
  .rx__handle{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:44px;margin:0;
    padding:10px var(--ds-space-md) 6px;border:0;background:none;cursor:pointer;color:var(--ds-ink-soft);
    font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .rx__handle::before{content:"";width:44px;height:4px;border-radius:2px;background:var(--ds-line)}
  .rx__handle:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:-2px;border-radius:var(--ds-r-surface) var(--ds-r-surface) 0 0}
  .rx__handle-open{display:none}
  .rx--sheet-open .rx__handle-open{display:inline}
  .rx--sheet-open .rx__handle-closed{display:none}
  .rx__panel .hw-cell__title{font-size:24px}
  /* above the sheet's peek AND the map's attribution line (OSM: never hidden under UI), which also sits on the peek */
  .rx__legend{left:var(--ds-space-xs);right:auto;bottom:calc(var(--rx-peek) + 30px)}
  .rx__card{max-width:calc(100% - 2 * var(--ds-space-sm))}
  .rx .leaflet-bottom .leaflet-control-attribution{margin-bottom:var(--rx-peek)}
  /* the ranking sidebar's list lives in the sheet, first (explorer.js placeSide; the sheet scrolls, not the list) */
  .rx__panel .rx__side{margin:0 0 var(--ds-space-md);padding-bottom:var(--ds-space-sm);border-bottom:1px solid var(--ds-line)}
  .rx__panel .rx__side-top{padding:var(--ds-space-2xs) 0 0}
  .rx__panel .rx__side-list{overflow:visible}
  /* map mode on a phone: the stage fills what the bar and the round strip leave; the sheet stays (.rx.rx--mapmode: it
     wins over the store finder's own height below, 2026-10-27) */
  .rx.rx--mapmode .rx__stage{height:100%}
}
@media (max-width:767px){
  /* the map and its sheet fit the screen under the toolbar (header, trail, searches and the round strip take about
     310 px of an 812 px phone), so the sheet's handle is on screen when the map scrolls into view */
  .rx{--rx-peek:132px}
  .rx__stage{height:clamp(400px, calc(100svh - 312px), 640px)}
  /* the hub's and a state's store finder takes its own row (about 66 px), so the map gives that back */
  .rx--seek .rx__stage{height:clamp(400px, calc(100svh - 378px), 640px)}
  .rx__find.rx__seek{flex:1 1 100%;max-width:none}
  .rx__bar{padding:var(--ds-space-xs) var(--ds-space-sm);gap:var(--ds-space-2xs)}
  .rx__crumbs{width:100%;flex-basis:100%}
  /* the map-mode button shares the trail's row (2026-10-27). With its words (190 px) it cut the trail to "‹ JERSE…
     GARDE…" at 390 px, the truncation the owner turned down ("HOBOKEN" to "HOBOK", the way-back rule below), so there
     it shows its icon alone (rx--bar-icon), and its words only where the trail stays as whole beside them as without
     the button: the hub's one-place trail (explorer.js fitBar; fix round 1) */
  .rx--mmb .rx__crumbs{width:auto;flex:1 1 0}
  .rx__crumbs li:last-child{max-width:100%}
  /* on a phone the trail is the way back plus where you are */
  .rx__crumbs li:not(:nth-last-child(-n+2)){display:none}
  .rx__crumbs li:nth-last-child(2) .rx__sep{display:none}
  .rx__crumbs li:nth-last-child(2):not(:first-child) a::before{content:"\2039\00a0"}
  /* the way back keeps its whole name up to 45% of the row (it shrank "HOBOKEN" to "HOBOK" beside a long store name,
     owner's test 2026-10-24); a longer one ends in an ellipsis, which needs a block box, not the inline-flex link */
  .rx__crumbs li:nth-last-child(2){flex:0 0 auto;max-width:45%}
  .rx__crumbs li:nth-last-child(2) a{display:block;line-height:44px}
  /* beside the map-mode button the way back still gets 45% of the bar's row (the icon alone and its gap are 48 px) */
  .rx--mmb .rx__crumbs li:nth-last-child(2){max-width:calc(45% + 22px)}
  .rx-name--next{display:none}
  .rx-name__tag{display:none}
  .rx__switch{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 6px}
  .rx__switch::-webkit-scrollbar{display:none}
  .rx__switch > legend{display:none}
  .rx .rx__switch .ad-choice__label{min-height:44px;padding:0 var(--ds-space-sm);font-size:15px}      /* 44 px targets (UX-07) */
  .rx__long{display:none}
  .rx__short{display:inline}
  .rx__time{padding:var(--ds-space-2xs) var(--ds-space-sm) var(--ds-space-xs);gap:var(--ds-space-2xs)}
  .rx__rounds{flex-basis:100%}
  /* the round's name takes its own row and wraps ("November 21, 2026 (in progress, 57%)" is wider than a phone) */
  .rx__round-h{flex:1 1 100%;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 var(--ds-space-xs)}
  .rx__round-v{min-width:0;font-size:15px;overflow-wrap:anywhere}
  .rx__slider{flex-basis:100%;min-width:0}
  .rx__views{width:auto;padding:0}
  .rx__round-set{width:100%}
  .rx__modes{left:var(--ds-space-xs);top:var(--ds-space-xs);padding:4px 6px;max-width:calc(100% - 70px)}
  .rx__modes .ad-choice__label{min-height:44px;font-size:15px;padding:0 var(--ds-space-sm)}
  .rx .leaflet-top.leaflet-right{top:var(--ds-space-xs);right:var(--ds-space-xs)}
  .rx__legend{left:var(--ds-space-xs);padding:var(--ds-space-xs) var(--ds-space-sm);max-width:calc(100% - 70px)}
  .rx__legend-toggle{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;
    font-family:var(--ds-font-display);font-size:var(--ds-step-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ds-accent-ink)}
  .rx__legend-toggle:focus-visible{outline:2px solid var(--ds-accent-light);outline-offset:2px;border-radius:var(--ds-r-control)}
  .rx__legend:not(.is-open) .rx__legend-body{display:none}
  .rx__legend .rx__legend-h{display:none}
  .rx-pin__label{font-size:10px}
}

/* ---------------------------------------------------------------------------
   6b · MAP MODE (explorer.js setMapMode; the owner, 2026-10-26: "a full screen mode/map mode"): the band on the whole
   screen, the Fullscreen API's or a fixed overlay's; from 1024 px the right panel steps aside, the sidebar stays. On
   every level since 2026-10-27: the US, a state and a store page get their sidebar here (explorer.js sideOn)
   --------------------------------------------------------------------------- */
.rx.rx--mapmode{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;margin:0;background:var(--ds-bg-surface);border:0}
.rx.rx--mapmode-fixed{position:fixed;inset:0;z-index:2147483000}
.rx--mapmode .rx__bar,.rx--mapmode .rx__time{flex:0 0 auto}
.rx--mapmode .rx__body{flex:1 1 auto;min-height:0;height:auto}
html.rx-mapmode-lock,html.rx-mapmode-lock body{overflow:hidden}
/* the page around the band is inert in map mode (explorer.js inertAround), so "Skip the map" has nowhere to go: the
   band is the screen (fix round 2, 2026-10-27) */
.rx--mapmode .rx-skip{display:none}
/* while map mode changes, the map's shapes and pins take no pointer (explorer.js mapModeMoving; fix round 2): a county
   met under a resting pointer on the way kept its card and outline */
.rx--mm-moving .leaflet-interactive{pointer-events:none !important}
@media (min-width:1024px){
  .rx--mapmode .rx__body{grid-template-columns:minmax(0,1fr)}
  .rx--mapmode.rx--side .rx__body{grid-template-columns:var(--rx-side-w) minmax(0,1fr)}
  .rx--mapmode .rx__panel{display:none}
}

/* ---------------------------------------------------------------------------
   7 · REDUCED MOTION: everything still, the map moves without animation (JS)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rx *,.rx *::before,.rx *::after{transition:none !important;animation:none !important}
  .rx__row--pick:hover,.rx__row--pick:focus-within{transform:none}
}

/* the hub directory's one line of counties still being measured (render-hub.mjs directory(); owner's test 2026-10-24) */
.hw-queue{margin-top:var(--ds-space-md);max-width:var(--ds-measure)}
.hw-queue a{color:var(--ds-accent-light);text-decoration:underline;text-underline-offset:2px}