/*
 * Just Works — map module.
 *
 * Everything here reads from the tokens in tokens.css. There is not a single
 * raw colour in this file, so the map follows the site's light/dark themes for
 * free, including the basemap, whose style JSON is generated from the same
 * tokens.
 *
 * Class names are prefixed `jwm-` so this module can never collide with the
 * shared components in components.css.
 *
 * Layout, in one sentence: a fixed bar at the top, a stage that fills the rest,
 * and a results surface that is a dragged bottom sheet on phones and a fixed
 * left rail on desktop.
 */

/* The map page loads tokens.css + components.css but not base.css, so the
   border-box reset must live here — without it every width:100% element with
   padding overflows its container. */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Fiat's own colour: a dollar green, deliberately distinct from both the
   brand mint and Bitcoin orange. Declared theme-aware here rather than in
   tokens.css because it is a map-module concern. */
:root {
  --jwm-fiat: #178a4c;
  --jwm-fiat-soft: rgba(23, 138, 76, 0.14);
  --jwm-bitcoin-soft: rgba(247, 147, 26, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jwm-fiat: #46c97a;
    --jwm-fiat-soft: rgba(70, 201, 122, 0.16);
  }
}

:root[data-theme="dark"] {
  --jwm-fiat: #46c97a;
  --jwm-fiat-soft: rgba(70, 201, 122, 0.16);
}

/* The modal and scrim are siblings of .jwm-app, so the brand type and ink
   must be set at the body — without this they fall back to the UA serif. */
body {
  margin: 0;
  font-family: var(--jw-font-sans);
  color: var(--jw-text-primary);
  background: var(--jw-bg);
}

/* ---------------------------------------------------------------------------
 * Component tokens
 *
 * Scoped to the module rather than added to tokens.css, so the map can be
 * retargeted without touching the global token file.
 * ------------------------------------------------------------------------ */

.jwm-app {
  --jwm-bar-height: 60px;
  /* One height for the bar's controls: field, tabs, dock buttons. */
  --jwm-control-h: 40px;
  --jwm-rail-width: 384px;
  --jwm-gutter: var(--jw-space-4);

  /* Sheet detents. Percentages of the stage, not the viewport — the sheet is
     positioned inside the stage, and viewport units would push its top edge
     underneath the header bar at the full detent. */
  --jwm-sheet-peek: 132px;
  --jwm-sheet-half: 55%;
  --jwm-sheet-full: 100%;

  --jwm-pin-bitcoin: var(--jw-bitcoin);
  --jwm-pin-fiat: var(--jwm-fiat);
  --jwm-pin-ring: var(--jw-surface);

  --jwm-surface: var(--jw-surface-glass);
  --jwm-blur: var(--jw-topbar-blur, 8px);
}

/* ---------------------------------------------------------------------------
 * Shell
 * ------------------------------------------------------------------------ */

.jwm-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--jw-bg);
  color: var(--jw-text-primary);
  font-family: var(--jw-font-sans);
  /* The map owns the viewport; the page itself must never scroll. */
  overflow: hidden;
}

.jwm-bar {
  position: relative;
  z-index: var(--jw-z-sticky);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--jw-space-2);
  padding: var(--jw-space-3) var(--jwm-gutter) var(--jw-space-2);
  background: var(--jwm-surface);
  border-bottom: 1px solid var(--jw-line);
  backdrop-filter: blur(var(--jwm-blur));
}

.jwm-bar-top {
  display: flex;
  align-items: center;
  gap: var(--jw-space-2);
}

/* ---------------------------------------------------------------------------
 * Search field
 * ------------------------------------------------------------------------ */

.jwm-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.jwm-search > svg {
  position: absolute;
  left: var(--jw-space-3);
  top: 50%;
  translate: 0 -50%;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--jw-text-subtle);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.jwm-field {
  width: 100%;
  /* Matches the segmented control beside it: same track height, same sunken
     ground, same hairline — one family of controls in the bar. The min-height
     matters: components.css gives every input a 50px floor, and min-height
     outranks height in the box model no matter the cascade order. */
  height: var(--jwm-control-h);
  min-height: var(--jwm-control-h);
  padding: 0 var(--jw-space-10) 0 var(--jw-space-10);
  font: inherit;
  font-size: var(--jw-text-sm);
  color: var(--jw-field-text);
  background: var(--jw-surface-sunken);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-pill);
  transition: border-color var(--jw-duration-base) var(--jw-ease-out),
              box-shadow var(--jw-duration-base) var(--jw-ease-out);
}

.jwm-field::placeholder { color: var(--jw-field-placeholder); }

.jwm-field:focus {
  /* One change only on focus: the ground lifts. No coloured border, no halo —
     the cursor is the focus indicator a text field already has. */
  outline: none;
  background: var(--jw-surface);
  border-color: var(--jw-line-strong);
  box-shadow: none;
}

/* Search fields get a native clear button in some browsers; ours is consistent
   across all of them and sits inside the pill. */
.jwm-field::-webkit-search-cancel-button { display: none; }

/* The applied-chip token. Sits over the field where typed text would be, so
   there is never a question of what the results are showing. */
.jwm-qpill {
  position: absolute;
  /* Same inset as the field's text padding, so the pill sits exactly where
     the cursor would. */
  left: var(--jw-space-10);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: var(--jw-space-2);
  max-width: calc(100% - var(--jw-space-16) - var(--jw-space-4));
  height: 28px;
  padding: 0 var(--jw-space-3);
  border: 1px solid var(--jw-accent);
  border-radius: var(--jw-radius-pill);
  background: var(--jw-accent-soft);
  color: var(--jw-text-primary);
  font: inherit;
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.jwm-qpill[hidden] { display: none; }

.jwm-qpill span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.jwm-qpill svg { flex: none; opacity: 0.7; }
.jwm-qpill:hover svg { opacity: 1; }

.jwm-qpill:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: 1px;
}

/* The query pill follows the active payment filter, so a chip search inside
   the Fiat tab reads green end to end. */
.jwm-app[data-payment="bitcoin"] .jwm-qpill {
  border-color: var(--jw-bitcoin);
  background: var(--jwm-bitcoin-soft);
}

.jwm-app[data-payment="fiat"] .jwm-qpill {
  border-color: var(--jwm-fiat);
  background: var(--jwm-fiat-soft);
}

/* While the pill is up, the placeholder underneath it goes quiet and the
   plain clear button stands down — the pill's own ✕ does that job. */
.jwm-app[data-query-pill="true"] .jwm-field::placeholder { color: transparent; }
.jwm-app[data-query-pill="true"] .jwm-clear { display: none; }

.jwm-clear {
  position: absolute;
  right: var(--jw-space-2);
  top: 50%;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: var(--jw-radius-pill);
  background: var(--jw-surface-sunken);
  color: var(--jw-text-muted);
  cursor: pointer;
}

.jwm-app[data-has-query="true"] .jwm-clear { display: grid; }
.jwm-clear:hover { color: var(--jw-text-primary); }

/* ---------------------------------------------------------------------------
 * Segmented control — All / Bitcoin / Fiat
 *
 * Modelled on the three-state theme toggle in components.css: one pill track on
 * a sunken ground, the active third lifted onto the raised surface. Reproduced
 * here rather than shared so the map does not have to modify components.css
 * while that file is being worked on.
 * ------------------------------------------------------------------------ */

.jwm-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--jwm-control-h);
  padding: 3px;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-pill);
  background: var(--jw-surface-sunken);
}

.jwm-segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jw-space-2);
  height: 32px;
  line-height: 1;
  padding: 2px var(--jw-space-3) 0;
  border: 0;
  border-radius: var(--jw-radius-pill);
  background: transparent;
  color: var(--jw-text-muted);
  font: inherit;
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--jw-duration-base) var(--jw-ease-out),
              color var(--jw-duration-base) var(--jw-ease-out);
}

.jwm-segmented button:hover { color: var(--jw-text-primary); }

.jwm-segmented button[aria-pressed="true"] {
  background: var(--jw-surface);
  color: var(--jw-text-primary);
  box-shadow: var(--jw-shadow-xs);
}

.jwm-segmented button:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: 1px;
}

/* The payment tabs' active thumb takes the rail colour, softly filled, so
   which money you are looking at is legible from across the room. */
.jwm-segmented button[data-payment="bitcoin"][aria-pressed="true"] {
  background: var(--jwm-bitcoin-soft);
  color: var(--jw-bitcoin);
}

.jwm-segmented button[data-payment="fiat"][aria-pressed="true"] {
  background: var(--jwm-fiat-soft);
  color: var(--jwm-fiat);
}

.jwm-count {
  font-size: var(--jw-text-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--jw-text-subtle);
}

.jwm-segmented button[aria-pressed="true"] .jwm-count { color: inherit; }

/* ---------------------------------------------------------------------------
 * Suggestion chips
 * ------------------------------------------------------------------------ */

.jwm-chips {
  display: flex;
  gap: var(--jw-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  /* Let chips bleed to the screen edge while scrolling, so the row reads as
     continuable rather than clipped. */
  margin: 0 calc(var(--jwm-gutter) * -1);
  padding: 0 var(--jwm-gutter) 2px;
}

.jwm-chips::-webkit-scrollbar { display: none; }
.jwm-chips:empty { display: none; }

.jwm-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 32px;
  padding: 2px var(--jw-space-4) 0;
  font: inherit;
  font-size: var(--jw-text-sm);
  color: var(--jw-chip-text);
  background: var(--jw-chip-bg);
  border: 1px solid var(--jw-chip-border);
  border-radius: var(--jw-radius-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--jw-duration-base) var(--jw-ease-out),
              background var(--jw-duration-base) var(--jw-ease-out);
}

.jwm-chip:hover { border-color: var(--jw-line-strong); }

/* Nothing for it in the current scope — still tappable, visibly quieter. */
.jwm-chip[data-dim="true"] {
  opacity: 0.5;
}

.jwm-chip[aria-pressed="true"] {
  background: var(--jw-accent-soft);
  border-color: var(--jw-accent);
  color: var(--jw-text-primary);
}

.jwm-chip:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * Stage — the map, and what stands in for it
 * ------------------------------------------------------------------------ */

.jwm-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.jwm-map {
  position: absolute;
  inset: 0;
  background: var(--jw-surface-sunken);
}

/*
 * Shown when the map library has not been vendored yet, or fails to load.
 * The directory is fully usable without it, so this states that plainly rather
 * than presenting a broken canvas.
 */
.jwm-mapfallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--jw-space-2);
  padding: var(--jw-space-8);
  text-align: center;
  color: var(--jw-text-muted);
  font-size: var(--jw-text-sm);
  background: var(--jw-surface-sunken);
}

.jwm-mapfallback strong {
  display: block;
  color: var(--jw-text-strong);
  font-family: var(--jw-font-display);
  font-size: var(--jw-text-lg);
}

.jwm-app[data-map-ready="true"] .jwm-mapfallback { display: none; }

/* With no renderer there is no map to toggle to or to search within — those
   controls would be dead weight, so they go. Locate stays: distance sorting
   works from the list alone. */
.jwm-app[data-map-ready="false"] #view { display: none; }

/* Two icons, one visible. Desktop: keyed to the rail view. Phones: keyed to
   whether the card is up — the button means "list", so it shows the list
   glyph when the card is away and the map glyph while the card is up. */
#view .jwm-view-map { display: none; }

@media (min-width: 860px) {
  .jwm-app[data-view="list"] #view .jwm-view-list { display: none; }
  .jwm-app[data-view="list"] #view .jwm-view-map { display: block; }
}

@media (max-width: 859px) {
  .jwm-app:not([data-card="hidden"]) #view .jwm-view-list { display: none; }
  .jwm-app:not([data-card="hidden"]) #view .jwm-view-map { display: block; }
}

/* Floating map controls ---------------------------------------------------- */

.jwm-float {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: var(--jw-space-2);
}

.jwm-float-top {
  top: var(--jw-space-3);
  left: 50%;
  translate: -50% 0;
}

.jwm-float-right {
  right: var(--jw-space-3);
  /* Clear the sheet's peek detent so the buttons never sit under it. */
  bottom: calc(var(--jwm-sheet-peek) + var(--jw-space-3));
  flex-direction: column;
}

.jwm-fab,
.jwm-sheet-toggle,
.jwm-sortwrap {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
}

.jwm-fab {
  display: inline-grid;
  place-items: center;
  width: var(--jw-hitbox-min);
  height: var(--jw-hitbox-min);
  border: 0;
  border-radius: var(--jw-radius-pill);
  background: transparent;
  color: var(--jw-text-strong);
  box-shadow: var(--jw-shadow-sm);
  cursor: pointer;
}

/* The design system's rim: a two-colour gradient painted only onto the border
   band, fill on a separate layer beneath. Same tokens as .button, so light
   gets its two greys and dark gets black-into-accent. */
.jwm-fab::before,
.jwm-dock-btn::before,
.jwm-sheet-toggle::before,
.jwm-sortwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: var(--jw-app-icon-rim-width, var(--jw-button-rim-width));
  border-radius: inherit;
  /* The homepage mobile-menu button's rim: bright at the diagonal corners,
     fading through the middle. */
  background: linear-gradient(
    135deg,
    var(--jw-app-icon-rim-bright, var(--jw-button-secondary-rim-from)) 0%,
    var(--jw-app-icon-rim-fade, var(--jw-button-secondary-rim-to)) 32%,
    var(--jw-app-icon-rim-fade, var(--jw-button-secondary-rim-to)) 68%,
    var(--jw-app-icon-rim-bright, var(--jw-button-secondary-rim-from)) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.jwm-fab::after,
.jwm-dock-btn::after,
.jwm-sheet-toggle::after,
.jwm-sortwrap::after {
  content: "";
  position: absolute;
  inset: var(--jw-app-icon-rim-width, var(--jw-button-rim-width));
  z-index: -2;
  border-radius: var(--jw-radius-pill);
  /* Page ground as the fill, exactly like the homepage's ring button. */
  background: var(--jw-bg);
  transition: background var(--jw-duration-base) var(--jw-ease-out);
}

@media (hover: hover) {
  .jwm-fab:hover::after { background: var(--jw-button-secondary-fill-hover); }
}

.jwm-fab:active::after { background: var(--jw-button-secondary-fill); }

.jwm-fab svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jwm-fab[aria-pressed="true"] { color: var(--jw-accent-strong); }
.jwm-fab[data-busy="true"] { opacity: 0.6; pointer-events: none; }

/* "Search this area" — appears only once the map has moved. */
.jwm-area {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 36px;
  padding: 0 var(--jw-space-4);
  font: inherit;
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-primary);
  background: var(--jw-surface);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-pill);
  box-shadow: var(--jw-shadow-md);
  cursor: pointer;
  animation: jwm-rise var(--jw-duration-slow) var(--jw-ease-out);
}

.jwm-app[data-area-stale="true"] .jwm-area { display: inline-flex; }

@keyframes jwm-rise {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

.jwm-attrib {
  position: absolute;
  right: var(--jw-space-2);
  bottom: calc(var(--jwm-sheet-peek) + var(--jw-space-2));
  z-index: 1;
  padding: 2px var(--jw-space-2);
  font-size: var(--jw-text-2xs);
  color: var(--jw-text-subtle);
  background: var(--jw-surface-veil);
  border-radius: var(--jw-radius-xs);
}

.jwm-attrib a { color: inherit; }

/* ---------------------------------------------------------------------------
 * Results surface
 *
 * Phone: a bottom sheet with three detents, dragged by its handle.
 * Desktop: a fixed rail on the left (see the media query at the end).
 * ------------------------------------------------------------------------ */

.jwm-sheet {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: var(--jwm-sheet-peek);
  /* Opaque ground first, then the theme's raised-surface tint over it — the
     translucent surface tokens alone would let the map bleed through. */
  background: linear-gradient(var(--jw-surface-raised), var(--jw-surface-raised)), var(--jw-bg);
  border-top: 1px solid var(--jw-line-faint);
  border-radius: var(--jw-radius-xl) var(--jw-radius-xl) 0 0;
  box-shadow: var(--jw-shadow-xl);
  transition: height var(--jw-duration-slow) var(--jw-ease-spring);
}

.jwm-sheet[data-detent="half"] { height: var(--jwm-sheet-half); }
.jwm-sheet[data-detent="full"] { height: var(--jwm-sheet-full); }

/* While a finger is down the height follows it directly; a transition here
   would make the drag feel laggy and disconnected. */
.jwm-sheet[data-dragging="true"] { transition: none; }

.jwm-handle {
  flex: none;
  display: grid;
  place-items: center;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.jwm-handle::before {
  content: "";
  width: 38px;
  height: 4px;
  border-radius: var(--jw-radius-pill);
  background: var(--jw-line-strong);
}

.jwm-handle:active { cursor: grabbing; }

.jwm-sheet-toggle {
  position: absolute;
  top: var(--jw-space-2);
  right: var(--jw-space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--jw-radius-pill);
  color: var(--jw-text-muted);
  cursor: pointer;
}

.jwm-sheet-toggle svg {
  transition: rotate var(--jw-duration-base) var(--jw-ease-out);
}

/* Collapsed: the chevron points up — a tap pulls the sheet back up. */
.jwm-sheet[data-detent="peek"] .jwm-sheet-toggle svg { rotate: 180deg; }

/* Parked until the full-screen interaction is settled. */
.jwm-sheet-toggle { display: none; }

/* The rail's own copy of the payment tabs: desktop only, full width, sitting
   above the count and sort. Phones already have them in the dock. */
.jwm-rail-tabs { display: none; }

@media (min-width: 860px) {
  .jwm-rail-tabs {
    display: flex;
    margin: var(--jw-space-3) var(--jwm-gutter) var(--jw-space-1);
  }

  .jwm-rail-tabs [data-payment] { flex: 1 1 0; }
}

.jwm-sheet-head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jw-space-2) var(--jw-space-3);
  /* Right padding clears the collapse chevron on phones. */
  padding: var(--jw-space-1) var(--jw-space-12) var(--jw-space-3) var(--jwm-gutter);
}

@media (min-width: 860px) {
  .jwm-sheet-head { padding-right: var(--jwm-gutter); }
}

@media (max-width: 859px) {
  .jwm-sheet-head { padding-top: var(--jw-space-4); }
}

/* The detail view carries its own heading; repeating the name in the sheet
   header would say everything twice. */
.jwm-app[data-detail="true"] .jwm-sheet-head { display: none; }

.jwm-resultcount {
  /* A status readout, not a heading — it stays in the UI sans. Display type
     in the sheet is reserved for the place name in the detail view. */
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-strong);
  white-space: nowrap;
}

/* Sort: visually a small icon button; the native select sits invisibly on top
   so a click opens the platform's own menu — no custom dropdown to maintain,
   full keyboard and screen-reader behaviour for free. */
.jwm-sortwrap {
  display: inline-flex;
  align-items: center;
  gap: var(--jw-space-2);
  height: 28px;
  padding: 0 var(--jw-space-3);
  border-radius: var(--jw-radius-pill);
  color: var(--jw-text-muted);
}

.jwm-sortwrap svg { flex: none; }

#sortLabel {
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-semibold);
  line-height: 1;
  padding-top: 1px; /* ink centring, as with every pill */
  white-space: nowrap;
}

.jwm-sortwrap[data-active="true"] { color: var(--jw-accent-strong); }
.jwm-sortwrap[data-active="true"]::after { background: var(--jw-accent-soft); }

.jwm-sort {
  position: absolute;
  inset: 0;
  min-height: 0; /* the design system's select floor would burst the button */
  opacity: 0;
  cursor: pointer;
  font: inherit;
}

/* Desktop: docked at the head's right edge. */
@media (min-width: 860px) {
  .jwm-sortwrap { margin-left: auto; }
}

/* The select covers sorting everywhere now; the pill retires. */
.jwm-scopechip[data-act="sort"] { display: none; }

/* On phones it sits where the expand chevron used to live: the card's top
   right corner, on the count's line. */
@media (max-width: 859px) {
  .jwm-sortwrap {
    position: absolute;
    top: var(--jw-space-4);
    right: var(--jw-space-3);
    z-index: 1;
  }
}

.jwm-scope {
  /* Its own full row under the count, so pills never collide with controls. */
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jw-space-1);
  justify-content: flex-start;
}

.jwm-scope:empty { display: none; }

.jwm-scopechip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 24px;
  /* Uneven vertical padding: ink-centring, not box-centring — see note above. */
  padding: 2px var(--jw-space-3) 0;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--jw-duration-fast) var(--jw-ease-out),
              border-color var(--jw-duration-fast) var(--jw-ease-out);
}

.jwm-scopechip[aria-pressed="true"] {
  border-color: var(--jw-accent);
  background: var(--jw-accent-soft);
  color: var(--jw-text-primary);
}

.jwm-scopechip:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * Result list
 * ------------------------------------------------------------------------ */

.jwm-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--jw-space-1) var(--jw-space-3) var(--jw-space-24);
  list-style: none;
  margin: 0;
}

.jwm-list li + li { margin-top: var(--jw-space-1); }

.jwm-item {
  display: flex;
  align-items: center;
  gap: var(--jw-space-4);
  width: 100%;
  padding: var(--jw-space-3) var(--jw-space-3);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--jw-radius-md);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--jw-duration-fast) var(--jw-ease-out);
}

.jwm-item:hover { background: var(--jw-surface-sunken); }

.jwm-item[aria-current="true"] {
  background: var(--jw-accent-soft);
}

.jwm-item:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: -2px;
}

.jwm-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface-sunken);
  font-size: var(--jw-text-lg);
  line-height: 1;
}

.jwm-item[data-payment="bitcoin"] .jwm-icon {
  box-shadow: inset 0 0 0 1.5px var(--jwm-pin-bitcoin);
}

.jwm-item[data-payment="fiat"] .jwm-icon {
  box-shadow: inset 0 0 0 1.5px var(--jwm-fiat);
}

.jwm-fiat-mark {
  flex: none;
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-semibold);
  letter-spacing: var(--jw-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jwm-fiat);
}

.jwm-body { min-width: 0; flex: 1 1 auto; }

.jwm-name {
  display: block;
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jwm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--jw-space-2);
  row-gap: 3px;
  margin-top: 4px;
  font-size: var(--jw-text-xs);
  color: var(--jw-text-muted);
}

.jwm-dot { color: var(--jw-text-subtle); }

.jwm-open { color: var(--jw-success); }
.jwm-shut { color: var(--jw-text-subtle); }

.jwm-sats {
  flex: none;
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-semibold);
  letter-spacing: var(--jw-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jw-bitcoin);
}

.jwm-empty {
  padding: var(--jw-space-8) var(--jwm-gutter);
  text-align: center;
  color: var(--jw-text-muted);
  font-size: var(--jw-text-sm);
}

/* ---------------------------------------------------------------------------
 * Detail
 * ------------------------------------------------------------------------ */

.jwm-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--jw-space-4) var(--jwm-gutter) var(--jw-space-8);
}

.jwm-detail h2 {
  margin: 0 0 var(--jw-space-2);
  font-family: var(--jw-font-display);
  font-size: var(--jw-text-2xl);
  /* One step below bold, with a little air between characters — the display
     face is wide enough that tight tracking reads cramped at this size. */
  font-weight: var(--jw-weight-semibold);
  line-height: var(--jw-leading-snug);
  letter-spacing: 0.01em;
  color: var(--jw-text-primary);
}

.jwm-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jw-space-2);
  margin-bottom: var(--jw-space-5);
  font-size: var(--jw-text-sm);
  color: var(--jw-text-muted);
}

.jwm-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 5px;
  padding: 4px var(--jw-space-3) 3px;
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-semibold);
  letter-spacing: var(--jw-tracking-eyebrow);
  text-transform: uppercase;
  border-radius: var(--jw-radius-pill);
  border: 1px solid var(--jw-line);
  color: var(--jw-text-muted);
}

/* Filled pills, black text: orange = Bitcoin, green = fiat, split = both. */
.jwm-badge[data-payment="bitcoin"] {
  color: var(--jw-black);
  background: var(--jw-bitcoin);
  border-color: var(--jw-bitcoin);
}

.jwm-badge[data-payment="fiat"] {
  color: var(--jw-black);
  background: var(--jwm-fiat);
  border-color: var(--jwm-fiat);
}

.jwm-badge[data-payment="both"] {
  color: var(--jw-black);
  background: linear-gradient(100deg, var(--jw-bitcoin) 0 52%, var(--jwm-fiat) 52%);
  border-color: transparent;
}

.jwm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jw-space-2);
  margin-bottom: var(--jw-space-6);
}

/* The buttons themselves are the design system's .button — only their icon
   sizing and the Zap accent live here. */
.jwm-actions .button {
  width: 100%;
  padding: 0 var(--jw-space-3);
  font-size: var(--jw-text-sm);
  text-decoration: none;
}

/* Secondary actions drop the rim entirely: a quiet sunken fill reads better
   stacked, and the bright ring was shouting in dark mode. Primary keeps the
   full design-system treatment as the one emphatic action. */
.jwm-actions .button:not(.primary)::before { display: none; }

.jwm-actions .button:not(.primary)::after {
  inset: 0;
  border-radius: var(--jw-button-radius);
  background: var(--jw-surface-sunken);
}

.jwm-actions .button svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Payment-rail colour, reserved for the zap action. */
.jwm-zap { color: var(--jw-bitcoin); }
.jwm-zap:hover:not(:disabled) { color: var(--jw-bitcoin); }

.jwm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jw-space-2);
  margin: 0 0 var(--jw-space-6);
  padding: 0;
  list-style: none;
}

.jwm-tag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 4px var(--jw-space-3) 5px;
  font-size: var(--jw-text-xs);
  color: var(--jw-text-body);
  background: var(--jw-surface-sunken);
  border-radius: var(--jw-radius-pill);
}

/*
 * Facts — a quiet card in the site's card language: raised surface, hairline
 * border, generous rows split by faint lines, labels set as eyebrows.
 */
.jwm-facts {
  margin: 0;
  border-radius: var(--jw-radius-lg);
  background: var(--jw-surface-sunken);
  overflow: hidden;
}

.jwm-facts div {
  display: grid;
  gap: 3px;
  padding: var(--jw-space-3) var(--jw-space-4);
}

.jwm-facts div + div { border-top: 1px solid var(--jw-line-faint); }

.jwm-facts dt {
  font-size: var(--jw-text-2xs);
  font-weight: var(--jw-weight-semibold);
  letter-spacing: var(--jw-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jw-text-subtle);
}

.jwm-facts dd {
  margin: 0;
  font-size: var(--jw-text-sm);
  line-height: var(--jw-leading-normal);
  color: var(--jw-text-strong);
}

.jwm-back {
  display: inline-flex;
  align-items: center;
  gap: var(--jw-space-2);
  min-height: var(--jw-hitbox-min);
  margin-bottom: var(--jw-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jw-text-muted);
  font: inherit;
  font-size: var(--jw-text-sm);
  cursor: pointer;
}

.jwm-back:hover { color: var(--jw-text-primary); }

/* ---------------------------------------------------------------------------
 * Reviews — Nostr notes on a place
 * ------------------------------------------------------------------------ */

.jwm-reviews {
  margin-top: var(--jw-space-6);
  padding-top: var(--jw-space-5);
  border-top: 1px solid var(--jw-line-faint);
}

.jwm-reviews h3 {
  margin: 0 0 var(--jw-space-3);
  font-family: var(--jw-font-display);
  font-size: var(--jw-text-lg);
  font-weight: var(--jw-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--jw-text-primary);
}

.jwm-reviews h3 span {
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-normal);
  color: var(--jw-text-subtle);
}

.jwm-review-list {
  display: grid;
  gap: var(--jw-space-3);
  margin: 0 0 var(--jw-space-4);
  padding: 0;
  list-style: none;
}

.jwm-review {
  display: flex;
  gap: var(--jw-space-3);
}

.jwm-review-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--jw-radius-pill);
  background: var(--jw-surface-sunken);
  color: var(--jw-text-muted);
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-semibold);
}

.jwm-review-body { min-width: 0; }

.jwm-review-meta {
  display: flex;
  align-items: baseline;
  gap: var(--jw-space-2);
  font-size: var(--jw-text-xs);
  color: var(--jw-text-subtle);
}

.jwm-review-meta strong {
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-strong);
}

.jwm-review-badge {
  padding: 1px var(--jw-space-2);
  border-radius: var(--jw-radius-pill);
  background: var(--jw-accent-soft);
  color: var(--jw-text-primary);
  font-size: var(--jw-text-2xs);
}

.jwm-review-body p {
  margin: 3px 0 0;
  font-size: var(--jw-text-sm);
  line-height: var(--jw-leading-normal);
  color: var(--jw-text-body);
  overflow-wrap: break-word;
}

.jwm-review-empty {
  margin: 0 0 var(--jw-space-4);
  font-size: var(--jw-text-sm);
  color: var(--jw-text-muted);
}

.jwm-review-form {
  display: grid;
  gap: var(--jw-space-2);
}

.jwm-review-form textarea {
  width: 100%;
  min-height: 0;
  padding: var(--jw-space-3);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface-sunken);
  color: var(--jw-text-primary);
  font: inherit;
  font-size: var(--jw-text-sm);
  resize: vertical;
}

.jwm-review-form textarea:focus {
  outline: none;
  background: var(--jw-surface);
  border-color: var(--jw-line-strong);
}

.jwm-review-signin {
  width: 100%;
  color: var(--jw-white);
}

/* Solid black, no rim — the gradient ring fights the sheet's dark ground. */
.jwm-review-signin::before { display: none; }

.jwm-review-signin::after {
  inset: 0;
  border-radius: var(--jw-button-radius);
  background: var(--jw-neutral-1000);
  border: 1px solid var(--jw-line-faint);
}

.jwm-review-note {
  margin: var(--jw-space-2) 0 0;
  font-size: var(--jw-text-xs);
  color: var(--jw-warning);
}

/* ---------------------------------------------------------------------------
 * Directions modal
 *
 * The create-modal recipe from the main site (modal-bg glass, 22px blur,
 * xl shadow, pop-in) in Archy's shape: centred card, title row with a close
 * ✕, plain option rows. Hairlines drop to the faint step inside, exactly as
 * create.css does.
 * ------------------------------------------------------------------------ */

.jwm-menu {
  position: fixed;
  inset: 0;
  z-index: var(--jw-z-modal);
  display: grid;
  place-items: center;
  padding: var(--jw-space-6);
  pointer-events: none;
}

.jwm-menu[hidden] { display: none; }

.jwm-modal-card {
  width: min(340px, 100%);
  pointer-events: auto;
  border-radius: var(--jw-radius-xl);
  background: var(--jw-modal-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--jw-shadow-xl);
  padding: var(--jw-space-5);
  animation: jwm-modal-pop 0.38s cubic-bezier(0.2, 0.9, 0.2, 1.15) both;
  --jw-line: var(--jw-line-faint);
}

@keyframes jwm-modal-pop {
  from { opacity: 0; scale: 0.95; }
  to   { opacity: 1; scale: 1; }
}

.jwm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-3);
}

.jwm-modal-title {
  margin: 0;
  font-family: var(--jw-font-display);
  font-size: var(--jw-text-xl);
  font-weight: var(--jw-weight-bold);
  letter-spacing: var(--jw-tracking-tight);
  color: var(--jw-text-primary);
}

.jwm-modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--jw-radius-md);
  background: transparent;
  color: var(--jw-text-muted);
  cursor: pointer;
  transition: background var(--jw-duration-base) var(--jw-ease-out),
              color var(--jw-duration-base) var(--jw-ease-out);
}

.jwm-modal-close:hover {
  background: var(--jw-surface-sunken);
  color: var(--jw-text-primary);
}

.jwm-modal-sub {
  margin: 2px 0 var(--jw-space-4);
  font-size: var(--jw-text-sm);
  color: var(--jw-text-muted);
}

.jwm-modal-list {
  display: grid;
  gap: var(--jw-space-1);
}

.jwm-menu-item {
  display: flex;
  align-items: center;
  min-height: var(--jw-hitbox-min);
  padding: 0 var(--jw-space-3);
  border: 0;
  border-radius: var(--jw-radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--jw-text-base);
  font-weight: var(--jw-weight-medium);
  text-align: left;
  color: var(--jw-text-primary);
  cursor: pointer;
  transition: background var(--jw-duration-fast) var(--jw-ease-out);
}

.jwm-menu-item:hover { background: var(--jw-surface-sunken); }

.jwm-menu-item:focus-visible {
  outline: 2px solid var(--jw-field-border-focus);
  outline-offset: -2px;
}

.jwm-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--jw-z-overlay);
  background: var(--jw-scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.jwm-scrim[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * Pin popup — tight card anchored to a tapped pin
 * ------------------------------------------------------------------------ */

.jwm-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: var(--jw-radius-lg);
  background: var(--jw-surface-raised);
  box-shadow: var(--jw-shadow-lg);
  overflow: hidden;
}

.jwm-popup .maplibregl-popup-tip { display: none; }

.jwm-pop {
  display: block;
  width: 224px;
  padding: 0;
  border: 0;
  background: linear-gradient(var(--jw-surface-raised), var(--jw-surface-raised)), var(--jw-bg);
  font: inherit;
  text-align: left;
  color: var(--jw-text-primary);
  cursor: pointer;
}

.jwm-pop-img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
}

.jwm-pop-body {
  display: grid;
  gap: 3px;
  padding: var(--jw-space-3);
}

.jwm-pop-name {
  font-weight: var(--jw-weight-semibold);
  font-size: var(--jw-text-sm);
  color: var(--jw-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jwm-pop-meta {
  display: flex;
  align-items: center;
  gap: var(--jw-space-2);
  font-size: var(--jw-text-xs);
  color: var(--jw-text-muted);
  white-space: nowrap;
}

.jwm-pop-btc {
  font-weight: var(--jw-weight-semibold);
  color: var(--jw-bitcoin);
}

.jwm-pop-fiat {
  font-weight: var(--jw-weight-semibold);
  color: var(--jwm-fiat);
}

.jwm-star { color: var(--jw-highlight); margin-right: 2px; }

/* ---------------------------------------------------------------------------
 * The bitcoiner — your location
 * ------------------------------------------------------------------------ */

.jwm-me {
  position: relative;
  width: 30px;
  height: 38px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.jwm-me-fig {
  /* Rendered at 4x and scaled down, so the browser's raster stays sharp all
     the way through the power-up instead of stretching a 30px bitmap. */
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  display: block;
  translate: -50% 0;
  scale: 0.25;
  transform-origin: 50% 100%;
  cursor: pointer;
}

/* Mario rules: three quick pulses on the way up, a proud hold, then back to
   street size. Steps, not a smooth ramp — that is what sells the power-up. */
.jwm-powerup {
  animation: jwm-powerup 1.5s var(--jw-ease-spring) both;
}

/* Absolute values against the 0.25 resting scale: the same three jumps, but
   the big form now stands 5x street size — twice the old peak. */
@keyframes jwm-powerup {
  0%   { scale: 0.25; }
  12%  { scale: 0.6; }
  20%  { scale: 0.35; }
  32%  { scale: 0.85; }
  40%  { scale: 0.5; }
  52%  { scale: 1.25; }
  78%  { scale: 1.25; }
  100% { scale: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .jwm-powerup { animation: none; }
}

/* The compass wedge: sits behind the figure, pivots at his feet. */
.jwm-me-wedge {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 0;
  width: 54px;
  height: 54px;
  transform: translate(-50%, 0);
  transform-origin: 50% 100%;
  background: conic-gradient(from -30deg at 50% 100%, rgba(247, 147, 26, 0.35) 0deg, rgba(247, 147, 26, 0.35) 60deg, transparent 60deg);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 200ms var(--jw-ease-out);
}

/* ---------------------------------------------------------------------------
 * Search mode — "Search this area" with no query hands over to the keyboard
 * ------------------------------------------------------------------------ */

.jwm-app .jwm-sheet,
.jwm-app .jwm-chips,
.jwm-app .jwm-float-right,
.jwm-app .jwm-attrib {
  transition: opacity var(--jw-duration-slow) var(--jw-ease-out);
}

.jwm-app[data-searching="true"] .jwm-sheet,
.jwm-app[data-searching="true"] .jwm-chips,
.jwm-app[data-searching="true"] .jwm-float-right,
.jwm-app[data-searching="true"] .jwm-attrib {
  opacity: 0.2;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Status line — location errors and other transient messages
 * ------------------------------------------------------------------------ */

.jwm-status {
  padding: var(--jw-space-2) var(--jwm-gutter);
  font-size: var(--jw-text-xs);
  color: var(--jw-warning);
  background: var(--jw-warning-soft);
  border-bottom: 1px solid var(--jw-line);
}

.jwm-status[hidden] { display: none; }

/* Visible only to screen readers — carries the live result count. */
.jwm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * View toggle — map / list
 *
 * On a phone the toggle swaps which surface owns the screen. On desktop both
 * are visible at once, so it only collapses the rail.
 * ------------------------------------------------------------------------ */

@media (min-width: 860px) {
  .jwm-app[data-view="list"] .jwm-sheet {
    height: 100%;
    border-radius: 0;
  }
}



/* ---------------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------------ */

@media (min-width: 860px) {
  .jwm-app { --jwm-gutter: var(--jw-space-5); }

  .jwm-bar {
    flex-direction: row;
    align-items: center;
    gap: var(--jw-space-4);
    height: var(--jwm-bar-height);
    padding: 0 var(--jwm-gutter);
  }

  .jwm-bar-top { flex: 1 1 auto; min-width: 0; }
  .jwm-search { max-width: 420px; }

  .jwm-chips {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
  }

  /* The sheet becomes a rail: full height, docked left, and glass — the
     create-modal surface floating over the map, per the main site. */
  .jwm-sheet {
    top: 0;
    right: auto;
    width: var(--jwm-rail-width);
    height: 100%;
    border-radius: 0;
    border-top: 0;
    border-right: 1px solid var(--jw-line-faint);
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: var(--jw-shadow-xl);
    transition: translate var(--jw-duration-slow) var(--jw-ease-out);
    --jw-line: var(--jw-line-faint);
  }

  .jwm-handle { display: none; }

  .jwm-sheet-head { padding-top: var(--jw-space-4); }

  /* Map view on desktop slides the rail out of the way rather than hiding it,
     so returning to the list keeps its scroll position. */
  .jwm-app[data-view="map"] .jwm-sheet { translate: calc(var(--jwm-rail-width) * -1) 0; }
  .jwm-app[data-view="map"] .jwm-float-top { left: 50%; }

  .jwm-app[data-view="list"] .jwm-float-top {
    left: calc(50% + var(--jwm-rail-width) / 2);
  }

  .jwm-float-right { bottom: var(--jw-space-4); }
  .jwm-attrib { bottom: var(--jw-space-2); }

  /* The map/list toggle lives bottom-left on desktop, sliding out with the
     rail so it always sits at the map's own corner. */
  #view {
    position: fixed;
    left: var(--jw-space-4);
    bottom: var(--jw-space-4);
    z-index: 5;
    transition: left var(--jw-duration-slow) var(--jw-ease-out);
  }

  .jwm-app[data-view="list"] #view {
    left: calc(var(--jwm-rail-width) + var(--jw-space-4));
  }


}

/* ---------------------------------------------------------------------------
 * Floating dock — mobile's command strip
 *
 * A floating glass bar: search on the left (which doubles as the applied-query
 * pill), the payment tabs in the middle. The sheet slides behind it; the
 * suggestion chips float just above it.
 * ------------------------------------------------------------------------ */

.jwm-dock {
  position: fixed;
  left: var(--jw-space-3);
  right: var(--jw-space-3);
  bottom: calc(var(--jw-space-3) + env(safe-area-inset-bottom));
  z-index: var(--jw-z-overlay);
  display: grid;
  /* Search pinned in the left column, tabs dead-centre in the bar. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 58px;
  padding: var(--jw-space-2);
  border-radius: var(--jw-radius-pill);
  background: var(--jw-modal-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--jw-shadow-xl);
  --jw-line: var(--jw-line-faint);
}

.jwm-dock-btn {
  flex: none;
  justify-self: start;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--jwm-control-h);
  height: var(--jwm-control-h);
  border: 0;
  border-radius: var(--jw-radius-pill);
  background: transparent;
  color: var(--jw-text-primary);
  cursor: pointer;
}

.jwm-dock-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* In the dock the view toggle keeps the rimmed look, sized to its row. */
@media (max-width: 859px) {
  .jwm-dock-right .jwm-fab {
    width: var(--jwm-control-h);
    height: var(--jwm-control-h);
    box-shadow: none;
  }
}

@media (min-width: 860px) {
  #locate {
    position: fixed;
    right: var(--jw-space-4);
    bottom: var(--jw-space-4);
    z-index: 5;
  }
}

/* An applied query tints the search button by the active payment filter. */
.jwm-app[data-has-query="true"] #dockSearch {
  border-color: var(--jw-accent);
  background: var(--jw-accent-soft);
  color: var(--jw-accent-strong);
}

.jwm-app[data-has-query="true"][data-payment="bitcoin"] #dockSearch {
  border-color: var(--jw-bitcoin);
  background: var(--jwm-bitcoin-soft);
  color: var(--jw-bitcoin);
}

.jwm-app[data-has-query="true"][data-payment="fiat"] #dockSearch {
  border-color: var(--jwm-fiat);
  background: var(--jwm-fiat-soft);
  color: var(--jwm-fiat);
}

.jwm-dock-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: var(--jw-space-2);
}

.jwm-dock-tabs {
  grid-column: 2;
  border: 0;
  background: transparent;
  padding: 0;
  align-items: center;
}

/* ---------------------------------------------------------------------------
 * Search overlay + autosuggest
 *
 * On phones the top bar hides until the dock's search is tapped, then slides
 * down as a glass panel with the field and suggestions. On desktop the bar is
 * always visible and the suggestions drop down beneath the field.
 * ------------------------------------------------------------------------ */

.jwm-cancel {
  display: none;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--jw-text-body);
  font: inherit;
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-medium);
  cursor: pointer;
}

.jwm-suggest {
  margin: 0;
  padding: var(--jw-space-1) 0 0;
  list-style: none;
}

.jwm-suggest[hidden] { display: none; }

.jwm-suggest button {
  display: flex;
  align-items: baseline;
  gap: var(--jw-space-3);
  width: 100%;
  min-height: var(--jw-hitbox-min);
  padding: var(--jw-space-2) var(--jw-space-3);
  border: 0;
  border-radius: var(--jw-radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--jw-text-base);
  text-align: left;
  color: var(--jw-text-body);
  cursor: pointer;
}

.jwm-suggest button:hover,
.jwm-suggest button:focus-visible {
  background: var(--jw-surface-sunken);
  outline: none;
}

.jwm-suggest strong {
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-primary);
}

.jwm-suggest span {
  font-size: var(--jw-text-xs);
  color: var(--jw-text-subtle);
}

/* Mobile layout: bar hides, dock rules. */
@media (max-width: 859px) {
  .jwm-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--jw-z-modal);
    translate: 0 -110%;
    transition: translate var(--jw-duration-slow) var(--jw-ease-out);
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    padding-bottom: var(--jw-space-3);
  }

  .jwm-app[data-search-open="true"] .jwm-bar { translate: 0 0; }

  /* The bar's tab group lives in the dock on phones. */
  .jwm-bar .jwm-segmented { display: none; }
  .jwm-app[data-search-open="true"] .jwm-cancel { display: inline-flex; }

  .jwm-suggest { max-height: 55svh; overflow-y: auto; }

  /* The results card: floats above the chips and dock, map always visible
     behind. Two sizes (card / full screen) plus hidden; the old drag-sheet
     detents are gone on phones. */
  .jwm-sheet {
    position: fixed;
    left: var(--jw-space-3);
    right: var(--jw-space-3);
    top: auto;
    bottom: calc(58px + var(--jw-space-3) + 44px + var(--jw-space-2) + env(safe-area-inset-bottom));
    height: 40svh;
    border: 0;
    border-radius: var(--jw-radius-xl);
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: var(--jw-shadow-xl);
    transition: height var(--jw-duration-slow) var(--jw-ease-spring),
                opacity var(--jw-duration-base) var(--jw-ease-out),
                translate var(--jw-duration-slow) var(--jw-ease-out);
    --jw-line: var(--jw-line-faint);
  }

  .jwm-app[data-card="full"] .jwm-sheet {
    height: calc(100svh - env(safe-area-inset-top) - var(--jw-space-3) - 58px - var(--jw-space-6) - 44px - env(safe-area-inset-bottom));
  }

  .jwm-app[data-card="hidden"] .jwm-sheet {
    opacity: 0;
    translate: 0 24px;
    pointer-events: none;
  }

  .jwm-handle { display: none; }

  .jwm-attrib {
    top: calc(env(safe-area-inset-top) + var(--jw-space-3));
    left: var(--jw-space-2);
    right: auto;
    bottom: auto;
  }

  /* Chips float just above the dock; when the search overlay has the keyboard
     up they ride above that instead, always within thumb's reach. */
  .jwm-chips {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + var(--jw-space-3) + var(--jw-space-2) + env(safe-area-inset-bottom));
    z-index: var(--jw-z-overlay);
    margin: 0;
    padding: 0 var(--jw-space-3) 2px;
  }

  .jwm-app[data-search-open="true"] .jwm-chips {
    bottom: max(calc(var(--jwm-kb, 0px) + var(--jw-space-3)), calc(58px + var(--jw-space-4)));
    z-index: calc(var(--jw-z-modal) + 1);
  }

  .jwm-chip {
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--jw-shadow-sm);
  }

  .jwm-sheet { z-index: 3; }
  .jwm-list { padding-bottom: var(--jw-space-6); }

}

/* Desktop: no dock, suggestions drop down from the bar's field. */
@media (min-width: 860px) {
  .jwm-dock { display: contents; }
  #dockSearch, .jwm-dock-tabs { display: none; }

  .jwm-chips {
    position: absolute;
    top: calc(var(--jwm-bar-height) + var(--jw-space-3));
    left: calc(var(--jwm-rail-width) + var(--jw-space-4));
    right: var(--jw-space-4);
    z-index: 4;
    margin: 0;
    padding: 0;
  }

  .jwm-app[data-view="map"] .jwm-chips { left: var(--jw-space-4); }

  .jwm-chip {
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--jw-shadow-sm);
  }

  .jwm-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: min(420px, 100%);
    padding: var(--jw-space-2);
    border-radius: var(--jw-radius-lg);
    background: var(--jw-modal-bg);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: var(--jw-shadow-xl);
  }

  .jwm-search { position: relative; }

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .jwm-sheet,
  .jwm-item,
  .jwm-action,
  .jwm-chip,
  .jwm-field {
    transition-duration: 1ms;
  }

  .jwm-area { animation: none; }
}

/* --- PWA install sheet -------------------------------------------------- */

.jwm-install {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-xl);
  background: var(--jw-modal-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--jw-shadow-lg);
  transform: translateY(calc(100% + 20px));
  transition: transform 320ms var(--jw-ease-out);
}

.jwm-install.show { transform: translateY(0); }

.jwm-install img { border-radius: 12px; flex: none; }

.jwm-install-copy { display: grid; gap: 2px; min-width: 0; }

.jwm-install-copy strong {
  font-family: var(--jw-font-display);
  font-size: 1.02rem;
  color: var(--jw-text-primary);
}

.jwm-install-copy span { color: var(--jw-text-body); font-size: 0.82rem; }

.jwm-install-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.jwm-install-go {
  border: 0;
  border-radius: 999px;
  background: var(--jw-text-primary);
  color: var(--jw-bg);
  font: inherit;
  font-weight: 800;
  padding: 10px 18px;
  cursor: pointer;
}

.jwm-install-close {
  border: 0;
  background: none;
  color: var(--jw-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 8px;
}

@media (min-width: 640px) {
  .jwm-install { left: auto; right: 20px; bottom: 20px; max-width: 430px; }
}