/* Nearby — page styles. Implements the Nearby.dc.html design on top of
   modernist.css: tokens and component classes (.btn, .tag, .input, .seg, .hr)
   come from the design system; layout, map chrome and the dark theme live here. */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;   /* iOS must not inflate type on rotate */
}

/* Installed to a home screen this is an app, not a document: no long-press
   callouts or stray text selection on chrome. Inputs and copyable text opt back in. */
.app {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.input, .detail-name, .row-name {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Touch sizing. iOS wants 44pt targets; the design system's desktop metrics are
   tighter than that, so only widen them where there is a finger involved. */
/* example text in a field sits well back from what you type */
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }

@media (pointer: coarse) {
  .input { font-size: 16px; }          /* under 16px and iOS zooms the page */
  .btn { min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn-block { gap: 10px; }
  .seg-opt { padding: 11px 14px; }
  .result { padding: 14px 0; }
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }

[hidden] { display: none !important; }

@keyframes sheetUp { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ── app frame ─────────────────────────────────────────────────────────── */
.app {
  --sheet-h: 214px;
  --kb: 0px;          /* height of the on-screen keyboard, tracked in app.js */
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-settle: var(--ease-ios);
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
  transition: background .25s ease, color .25s ease;
}

@supports (transition-timing-function: linear(0, 1)) {
  .app { --ease-settle: linear(0, 0.4 14%, 0.78 30%, 0.96 45%, 1.012 60%, 0.998 76%, 1); }
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: stretch; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 13px) 14px 0;
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg);
  z-index: 20; flex: none;
}
.brand {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 19px; letter-spacing: -0.01em; padding-bottom: 11px;
}
.topbar-stats {
  margin-left: auto; display: flex; align-items: stretch;
  border-left: 1px solid var(--color-divider);
}
.stat {
  padding: 0 12px 11px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.stat + .stat { border-left: 1px solid var(--color-divider); }
.stat-label {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.stat-value {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-value.is-dim { opacity: .55; }
.theme-btn {
  align-self: stretch; width: 44px; border: 0;
  border-left: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); cursor: pointer;
  display: grid; place-items: center; padding: 0 0 11px;
}
.theme-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.theme-glyph {
  display: block; width: 18px; height: 18px;
  border: 2px solid var(--color-text); position: relative; overflow: hidden;
}
.theme-glyph::before {
  content: ""; position: absolute; inset: 0; width: 50%;
  background: var(--color-text);
}

/* ── map ───────────────────────────────────────────────────────────────── */
.map-wrap { position: relative; flex: 1; min-height: 0; }
.map { position: absolute; inset: 0; z-index: 0; background: #f3f2f2; }
.maplibregl-map { font-family: "Archivo", system-ui, sans-serif; }
.maplibregl-ctrl-attrib { font-size: 9px; line-height: 1.4; background: rgba(243,242,242,.72) !important; padding: 1px 5px !important; }
.maplibregl-ctrl-attrib a { color: #201e1d; text-decoration: none; }
.maplibregl-ctrl-bottom-right { z-index: 5; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
.maplibregl-canvas:focus { outline: none; }

/* markers: HTML elements MapLibre positions for us; they never rotate with the map */
.pin { z-index: 2; cursor: pointer; padding-bottom: 6px; }   /* room for the tail: the marker's bottom edge is its tip */
.pin.is-selected { z-index: 3; }
.user-dot { z-index: 1; pointer-events: none; }

/* sprite icons: sized by the parent, drawn in currentColor */
.ico { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a pin: a dark speech bubble edged in the place's colour, the icon in that
   colour, a tail on the spot. --pin is the place's own colour (set on the
   element by app.js); red unless chosen otherwise. Visited places go dim. */
.pin-box {
  --pin: var(--color-accent);
  --pin-ink: #1c1918;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--pin-ink); color: var(--pin); border: 2px solid var(--pin); border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: width .15s ease, height .15s ease;
}
/* the tail: a rotated square wearing two of the bubble's edges, its top half lost in the bubble */
.pin-box::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--pin-ink); border-right: 2px solid var(--pin); border-bottom: 2px solid var(--pin);
  border-bottom-right-radius: 2px; transform: rotate(45deg);
}
.pin-box.sz-sm { width: 15px; height: 15px; border-radius: 4px; }
.pin-box.sz-sm::after { width: 6px; height: 6px; margin-left: -3px; bottom: -4px; }
.pin-box.sz-md { width: 27px; height: 27px; border-radius: 8px; }
/* the open place: the bubble fills solid in its colour, the icon dark, a little larger; no ring on an outlined shape */
.pin-box.sz-lg { width: 34px; height: 34px; border-radius: 10px; background: var(--pin); color: var(--pin-ink); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.pin-box.sz-lg::after { background: var(--pin); }
.pin-box .ico { width: 15px; height: 15px; stroke-width: 2.25; }
.pin-box.sz-lg .ico { width: 19px; height: 19px; }
.pin-box.sz-sm .ico { display: none; }
.pin-box.is-visited { opacity: .55; }
.pin-box.is-visited.is-selected { opacity: 1; }


/* pin-drop crosshair */
.crosshair {
  position: absolute; inset: 0 0 var(--sheet-h) 0; z-index: 12; pointer-events: none;   /* centred in the visible map, where the map's own centre is */
  display: grid; place-items: center;
}
.crosshair-box { width: 44px; height: 44px; border: 2px solid var(--color-accent); position: relative; }
.crosshair-box i { position: absolute; background: var(--color-accent); }
.crosshair-box .tick-t { left: 50%; top: -14px; width: 2px; height: 12px; transform: translateX(-50%); }
.crosshair-box .tick-b { left: 50%; bottom: -14px; width: 2px; height: 12px; transform: translateX(-50%); }
.crosshair-box .tick-l { top: 50%; left: -14px; height: 2px; width: 12px; transform: translateY(-50%); }
.crosshair-box .tick-r { top: 50%; right: -14px; height: 2px; width: 12px; transform: translateY(-50%); }

.map-note {
  position: absolute; top: 14px; left: 14px; right: 72px; z-index: 15;
  background: var(--color-bg); border: 2px solid var(--color-text);
  padding: 8px 10px; font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow-md);
}
.map-note[role="button"] { cursor: pointer; }
.map-note[role="button"]:hover { background: var(--color-accent-100); }

.recenter {
  position: absolute; top: 14px; right: 14px; z-index: 14;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-text);
  color: var(--color-text); cursor: pointer; padding: 0;
}
.recenter:hover { background: var(--color-accent-100); }
.recenter.is-following { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.recenter.is-following:hover { background: var(--color-accent-600); }
.recenter .ico-heading { display: none; }
.recenter.is-heading .ico-locate { display: none; }
.recenter.is-heading .ico-heading { display: block; }

/* filter: under the crosshair; fills red while the map and list are narrowed */
.filter-btn {
  position: absolute; top: 70px; right: 14px; z-index: 14;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-text);
  color: var(--color-text); cursor: pointer; padding: 0;
}
.filter-btn:hover { background: var(--color-accent-100); }
.filter-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.filter-btn.is-active:hover { background: var(--color-accent-600); }

/* shows only while the map is really turned away from north; tap to reset */
.north {
  position: absolute; top: 126px; right: 14px; z-index: 14;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-text); color: var(--color-text);
  animation: fadeIn .18s ease;
}
.north:hover { background: var(--color-accent-100); }
.north-face {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; line-height: 1;
  transition: transform .25s var(--ease-ios);
}
.north-needle {
  position: absolute; left: 50%; top: 0; width: 0; height: 0; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid var(--color-accent);
}

/* you: the beam is the way you are facing — a soft cone that fades out from
   the dot, so it reads as part of it rather than a marker of its own */
.user-wedge {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  background: conic-gradient(from -33deg at 50% 50%, var(--color-accent) 0deg, var(--color-accent) 66deg, transparent 66deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,.62) 9px, rgba(0,0,0,.3) 22px, rgba(0,0,0,0) 42px);
  mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,.62) 9px, rgba(0,0,0,.3) 22px, rgba(0,0,0,0) 42px);
  transform-origin: 50% 50%; transition: transform .25s var(--ease-ios); pointer-events: none;
}

.fab {
  position: absolute; right: 16px; bottom: calc(var(--sheet-h) + 16px); z-index: 16;
  width: 58px; height: 58px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;        /* a drawn plus, centred by layout — a typed one sits on the x-height */
  background: var(--color-accent); color: var(--color-bg);
  box-shadow: var(--shadow-md);
  transition: bottom .42s var(--ease-settle);
}
.fab svg { display: block; }
.fab:hover { background: var(--color-accent-600); }

/* ── bottom sheet ──────────────────────────────────────────────────────── */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  height: var(--sheet-h);
  background: var(--color-surface); border-top: 2px solid var(--color-text);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transition: height .42s var(--ease-settle);
}
.app.is-dragging .sheet,
.app.is-dragging .fab { transition: none; }
.sheet-grab {
  flex: none; padding: 10px 0 8px;
  display: flex; justify-content: center;
  cursor: grab; touch-action: none;
}
.sheet-grab i { width: 44px; height: 3px; background: color-mix(in srgb, var(--color-text) 45%, transparent); }
.sheet-head {
  flex: none; display: flex; align-items: baseline; gap: 10px;
  padding: 0 16px 10px; border-bottom: 2px solid var(--color-divider);
  touch-action: none; cursor: grab;          /* drag the sheet from its header too */
}
.sheet-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.sheet-sort {
  margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.sheet-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;              /* no rubber-banding the page behind */
  padding-bottom: env(safe-area-inset-bottom);  /* clear of the home indicator */
}

/* place rows */
.row {
  --pin: var(--color-accent);
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-bottom: 1px solid var(--color-divider);
  cursor: pointer; transition: background .15s ease;
}
.row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.row:active, .result:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); transition: none; }
.row.is-visited { opacity: .5; }
.row.is-selected { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.row-n {
  flex: none; width: 22px; padding-top: 2px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--pin);
}
.row-main { flex: 1; min-width: 0; }
.row-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  line-height: 1.2; letter-spacing: -0.01em;
}
.row-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tag .ico { width: 12px; height: 12px; margin-right: 5px; }
.row-note { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.row-side { flex: none; text-align: right; }
.row-dist {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.row-walk { font-size: 11px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* empty state */
.empty { padding: 26px 16px 22px; }
.empty-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  line-height: 1.2; max-width: 16em;
}
.empty-body {
  font-size: 13px; margin: 8px 0 16px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  max-width: 24em;
}

/* ── pin-drop bar ──────────────────────────────────────────────────────── */
.pin-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-bg); border-top: 2px solid var(--color-text);
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; gap: 10px;
  animation: sheetUp .3s var(--ease-ios);
}
.pin-hint { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.pin-actions { display: flex; gap: 10px; }
.pin-actions .btn-primary { flex: 1; justify-content: flex-start; }

/* ── confirm dialog ── */
.confirm { z-index: 60; animation: fadeIn .18s ease; }
.confirm .dialog { animation: sheetUp .22s ease; }
.confirm .dialog-actions .btn { min-width: 96px; justify-content: flex-start; }

/* ── overlays ──────────────────────────────────────────────────────────── */
.scrim {
  position: absolute; inset: 0; z-index: 45;
  background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  animation: fadeIn .18s ease;
  transition: opacity .2s ease;
}

/* Sheets sit on the keyboard, not under it. iOS shrinks the visual viewport
   without moving the layout viewport, so bottom:0 lands behind the keyboard —
   --kb lifts them back into view. */
.overlay {
  position: absolute; left: 0; right: 0; bottom: var(--kb); z-index: 50;
  max-height: calc(100% - var(--kb) - 56px);
  background: var(--color-bg); border-top: 2px solid var(--color-text);
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 18px);
  animation: sheetUp .3s var(--ease-ios);
  transition: transform .3s var(--ease-ios);
  will-change: transform;
}
/* nothing eases while a finger holds it. The entry animation is stopped by
   dismissible() inline, not here: a class toggled back on release would
   restart it, and the sheet would pop up to its start before going. */
.overlay.is-dragging { transition: none; }
/* on its way out: a plain quadratic ease-out, i.e. an even slow-down from
   the speed it sets off at (dismissible() sizes the duration to match) */
.overlay.is-leaving { pointer-events: none; transition-timing-function: cubic-bezier(.33, .66, .66, 1); }
/* the grabber and header rows drag by pointer events (touch-action: none);
   the rest of a sheet drags by touch — see dismissible() */
.overlay-grab { flex: none; display: flex; justify-content: center; padding: 2px 0 10px; cursor: grab; touch-action: none; }
.overlay-grab i { width: 40px; height: 3px; background: color-mix(in srgb, var(--color-text) 35%, transparent); }
.overlay-head, .hero { touch-action: none; }
/* With the keyboard up the home indicator is behind it — drop its inset. */
.app[data-kb="1"] .overlay { padding-bottom: 18px; }

/* Sheets scroll their own content with no bounce at the top: a pull down from
   there is a drag on the sheet, not an overscroll. */
.overlay-detail, .overlay-form, .overlay-filter { overflow-y: auto; overscroll-behavior: none; }

/* Search fills the space between the header and the keyboard, so results have
   somewhere to go instead of being pinned to a sliver above the keys. */
.overlay-search {
  top: calc(env(safe-area-inset-top) + 58px);
  max-height: none;
  display: flex; flex-direction: column;
}

.overlay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.overlay-search .overlay-head { margin-bottom: 12px; }
.overlay-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.overlay-head .btn-icon { margin-left: auto; }

/* detail: the picture up top with the name over it, then the numbers, the
   compass and the actions as rows. The card alone rounds its corners: it
   reads as a card laid over the map, not a panel of it. */
.overlay-detail {
  --radius-md: 14px; --radius-lg: 24px;
  padding-top: 0; border-radius: 24px 24px 0 0;
  /* a hairline along the top edge only: it follows the corners round and fades out where the
     sides begin, light on the dark map and dark on the light one, so the card reads against it */
  border: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent);
  box-shadow: var(--shadow-lg);
  /* opens to about three quarters of the screen, so the map stays in view above it; the rest scrolls inside */
  max-height: min(calc(100% - var(--kb) - env(safe-area-inset-top) - 64px), calc(76% - var(--kb)));
}
.hero {
  --pin: var(--color-accent);
  position: relative; margin: 0 -16px; min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 76px 20px 16px;
  background: linear-gradient(to top, var(--color-bg), color-mix(in srgb, var(--pin) 28%, var(--color-bg)));
  cursor: grab;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.hero.has-photo .hero-img { opacity: 1; }
/* the photo fades into the card, so the words always sit on the card's own colour */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 86%, transparent) 34%,
    color-mix(in srgb, var(--color-bg) 25%, transparent) 62%, transparent 92%);
}
.hero:not(.has-photo)::after { display: none; }
.hero-mark { position: absolute; right: 6px; top: 4px; width: 150px; height: 150px; opacity: .12; pointer-events: none; }
.hero-mark .ico { width: 100%; height: 100%; stroke-width: 1.25; }
.hero.has-photo .hero-mark { display: none; }
.hero-grab { position: absolute; top: 10px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.hero-grab i { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
/* the two round buttons on the picture: close at the top right, edit at the bottom right.
   Frosted glass over a photo: a translucent white disc with a faint rim; ink-tinted
   when there is no photo, so it holds up on the light wash too. The edit button sits
   low, where the photo has faded into the card's own colour, so on the light card it
   is ink-tinted over a photo too: a white disc there is white on white */
.hero-close, .hero-edit {
  position: absolute; right: 14px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff;   /* barely tinted: the blur does the work */
  box-shadow: 0 1px 4px rgba(0,0,0,.2);   /* no rim: the frosted disc alone */
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.hero-close:active, .hero-edit:active { background: rgba(255,255,255,.24); }
.hero:not(.has-photo) .hero-close, .hero:not(.has-photo) .hero-edit,
[data-dark="0"] .hero.has-photo .hero-edit {
  background: color-mix(in srgb, var(--color-text) 12%, transparent); color: var(--color-text);
  box-shadow: none;
}
.hero-close { top: 14px; }
.hero-edit { bottom: 16px; }
.hero-close svg, .hero-edit svg { display: block; }
.hero-text { position: relative; z-index: 1; padding-right: 56px; }   /* clear of the edit button */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--pin); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.pill .ico { width: 14px; height: 14px; stroke-width: 2.25; }
.detail-name { font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; overflow-wrap: anywhere; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-tags:empty { display: none; }
.hero .tag-neutral { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); }

/* the figures sit on a shelf rather than in a box: no fill, a hairline along the top that follows
   the rounded corners and fades down the sides, no bottom edge, and 8px wider than the blocks under
   it, so it reads as the top of a card the rest of the sheet sits in (the first card had this) */
.stats-card {
  display: flex; margin: 8px -8px 0; padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.stat-cell { flex: 1 1 auto; min-width: 0; padding: 0 16px; text-align: center; }   /* each column as wide as its figure needs, the spare shared, so a walking time never breaks across lines; label and figure centred in it */
.stats-card .stat-block-label { justify-content: center; }
.stat-cell + .stat-cell { border-left: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }   /* the lines as faint as the first card drew them */
.stat-block-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.stat-block-label .ico { width: 14px; height: 14px; flex: none; }
.stat-block-value {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.15; margin-top: 4px;   /* quieter than the name above and the direction below */
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* face this way, and the way there: two cards side by side */
/* one card: the compass on the left, which way in the middle, the way there on the right */
.direction {
  display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px;
  background: var(--color-surface); border-radius: var(--radius-md);
}
.direction-arrow {
  flex: none; width: 56px; height: 56px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: var(--radius-md);
  background: transparent; border: 2px solid var(--color-text); color: var(--color-text);
}
.direction-arrow svg { display: block; transition: transform .25s var(--ease-ios); }
.direction-arrow.is-aligned { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.direction-main { flex: 1; min-width: 0; }
/* the way there, in Apple Maps: the arrow with the word close under it, centred on the card's height */
.direction-go {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: 2px;
  color: var(--color-text); text-decoration: none;
}
.direction-go svg { display: block; width: 24px; height: 24px; color: color-mix(in srgb, var(--color-text) 55%, var(--color-surface)); }   /* the colour of its word; mixed opaque, so the stroke over the fill draws no rim */
.direction-go-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.direction-go:active { opacity: .5; }
.direction-value { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.2; margin-top: 3px; }

/* the actions as tiles, in rows: an icon over a short caption, and under a link's caption where it
   goes. Whichever tiles a row shows share its width; a row with nothing to show is hidden. */
.detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tile-row { display: flex; gap: 8px; }
.tile, .tile:hover {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  flex: 1 1 0; min-width: 0; padding: 16px 6px 14px; cursor: pointer;   /* as tall as its icon and caption need, no more; a row shares the tallest */
  background: var(--color-surface); border: 0; border-radius: var(--radius-md); color: var(--color-text);
  font-family: var(--font-body); text-decoration: none;
}
.tile svg { display: block; margin-bottom: 8px; }
.tile-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.25; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tile-sub { max-width: 100%; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.tile:active { background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface)); }
.tile.is-on svg { color: var(--color-accent); }   /* been there: a plain tile, the check in the accent */
/* the reservation tile wears the mark of the service its link opens; the others stay hidden */
.tile .tmark-opentable, .tile .tmark-resy, .tile .tmark-other { display: none; }
.tile[data-via="opentable"] .tmark-opentable, .tile[data-via="resy"] .tmark-resy, .tile[data-via="other"] .tmark-other { display: block; }
.tile .tmark-resy text { fill: var(--color-surface); }   /* the R cut out of the square, in the tile's own colour */
/* Remove keeps the row form: an icon, then the word */
.btn-row { justify-content: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; font-size: 15px; }
.btn-row .row-ico { flex: none; }
.detail-rule { height: 1px; background: var(--color-divider); margin: 16px 0 6px; }
.detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-remove { justify-content: flex-start; padding-left: 4px; }
/* whose picture it is, in the smallest type on the card, to the right of Remove: shown because Google asks, placed to be ignored */
.photo-credit {
  flex: 1; min-width: 0; margin-right: 4px; text-align: right;
  font-size: 8px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-credit a { color: inherit; text-decoration: none; }

/* add + search + link + form */
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
/* the add sheet's three ways in, as tiles abreast */
.add-tiles { display: flex; gap: 8px; }
.add-tile {
  flex: 1 1 0; min-width: 0; min-height: 96px; padding: 12px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text);
}
.add-tile svg { display: block; }
.add-tile span { font-family: var(--font-heading); font-weight: 800; font-size: 12px; line-height: 1.25; text-align: center; }
.add-tile:active { background: color-mix(in srgb, var(--color-text) 9%, var(--color-surface)); }
.search-status {
  flex: none; padding: 10px 0 2px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.search-status:empty { display: none; }
.search-results { flex: 1; overflow-y: auto; overscroll-behavior: none; margin-top: 4px; }
.search-credit {
  flex: none; padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--color-divider);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--color-divider); cursor: pointer;
}
.result-main { flex: 1; min-width: 0; }
.result-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.result-name, .result-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta { font-size: 11px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.result-add { font-size: 12px; color: var(--color-accent); }
.form-field { margin-bottom: 14px; }
/* the video field and its Paste button share a row */
.video-field { display: flex; gap: 8px; }
.video-field .input { flex: 1; min-width: 0; }
.video-field .btn { flex: none; }
/* the category control spans the form, its five choices sharing the width */
.overlay-form .seg { display: flex; width: 100%; }
.overlay-form .seg-opt { flex: 1; justify-content: center; padding-left: 4px; padding-right: 4px; }

/* icon picker: grouped grid of square cells; the chosen one fills red */
.icon-picker { display: flex; flex-direction: column; }
.icon-group-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 4px; }
/* the picker's folds: a header row per group, its grid shown only while open */
.icon-group { border-top: 1px solid var(--color-divider); }
.icon-group:first-child { border-top: 0; }
.icon-group-head {
  width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  background: transparent; border: 0; color: var(--color-text); cursor: pointer; text-align: left;
}
.icon-group-head .icon-group-label { flex: 1; }
.icon-group-n { font-size: 11px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.icon-group-chev { flex: none; opacity: .6; transition: transform .2s var(--ease-ios); }
.icon-group.is-open .icon-group-chev { transform: rotate(180deg); }
.icon-group .icon-grid { margin-top: 0; padding-bottom: 12px; }
.icon-cell {
  aspect-ratio: 1; min-height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text);
}
.icon-cell .ico { width: 22px; height: 22px; }
.icon-cell:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.icon-cell.is-selected, .icon-cell.is-selected:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.form-field-last { margin-bottom: 18px; }
/* the save button floats at the foot of the form as a pill, over whatever is scrolled beneath it */
.overlay-form, .app[data-kb="1"] .overlay-form { padding-bottom: 0; }
.form-foot {
  position: sticky; bottom: 0; z-index: 1; margin: 0 -16px;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px);
  display: flex; justify-content: center;
  pointer-events: none;                     /* only the pill takes taps; the form shows through around it */
}
.form-foot .btn-block {
  pointer-events: auto; width: auto; min-width: 220px; margin-top: 0; padding: 13px 30px;
  border-radius: 999px; justify-content: center; text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.app[data-kb="1"] .form-foot { padding-bottom: 10px; }   /* the home indicator is behind the keyboard */

/* colour swatches: the pin colours in a row, the chosen one ringed in ink */
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 4px; }
.swatch {
  --pin: var(--color-accent); aspect-ratio: 1; min-height: 36px; padding: 0; border: 0; cursor: pointer;
  background: var(--pin);
}
.swatch:active { opacity: .8; }
.swatch.is-selected { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); }

/* filter sheet: category and type chips; the chosen ones fill red */
.filter-section { margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px 0 10px;
  background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; line-height: 1; cursor: pointer;
}
.chip .ico { width: 16px; height: 16px; }
.chip-n {
  font-family: var(--font-body); font-weight: 400; font-size: 11px; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.chip:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.chip.is-on, .chip.is-on:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.chip.is-on .chip-n { color: inherit; opacity: .8; }
.chip:disabled { opacity: .4; cursor: default; }
.filter-note { margin: 8px 0 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.overlay-head-side { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.overlay-head-side .btn-icon { margin-left: 0; }
.filter-clear { padding-left: 10px; padding-right: 10px; }

/* ── account ───────────────────────────────────────────────────────────── */
/* the account button sits with the theme toggle in the top bar */
.account-btn {
  align-self: stretch; width: 44px; border: 0;
  border-left: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); cursor: pointer;
  display: grid; place-items: center; padding: 0 0 11px;
}
.account-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.account-btn svg { display: block; }

/* the gate: sign in, pick a handle — a screen over everything, not a sheet */
.gate {
  position: absolute; inset: 0; z-index: 70;
  background: var(--color-bg); color: var(--color-text);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none;
  animation: fadeIn .18s ease;
}
/* room at the bottom for the keyboard, so a focused field can scroll clear of it */
.gate-inner {
  min-height: 100%; max-width: 440px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 28px + var(--kb));
}
.gate .brand { padding-bottom: 0; }
.gate-panel { padding-top: 40px; animation: sheetUp .3s var(--ease-ios); }
.gate-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; max-width: 10em;
}
.gate-body {
  font-size: 14px; line-height: 1.45; margin: 0 0 22px; max-width: 26em;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.gate-or {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 16px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 2px; background: var(--color-divider); }
/* the links under the form: a centred stack, the password one nearest the field it belongs to */
.gate-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
.gate-links .btn-ghost { padding-inline: 0; }
.gate-links #authForgotBtn { order: -1; }
.gate .btn[aria-busy="true"] { opacity: .6; }
/* the privacy line at the foot of the gate: there, and out of the way */
.gate-foot {
  margin-top: auto; padding-top: 28px; text-align: center;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.9;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.gate-foot a { color: color-mix(in srgb, var(--color-text) 75%, transparent); text-decoration: none; }
.gate-foot a:hover { color: var(--color-accent); }
/* the gate's buttons read as a centred stack, not the app's left-set rows */
.gate .btn-block { justify-content: center; text-align: center; }
/* Google's own look: its mark on a plain field with a firm rule, in both themes */
.btn-google { background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-text); }
.btn-google:hover { background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface)); }
.btn-google:active { background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface)); }
.google-mark { flex: none; }
.form-error { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--color-accent); }
.handle-wrap {
  display: flex; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.handle-wrap:focus-within { border-color: var(--color-accent); }
.handle-at {
  padding-left: 10px; font-family: var(--font-heading); font-weight: 800;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.handle-wrap .input { border: 0; background: transparent; padding-left: 4px; }
.handle-wrap .input:focus-visible { outline: none; }

/* the account sheet */
.account-card { display: flex; align-items: center; gap: 12px; }
.account-avatar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; text-transform: uppercase;
}
.account-main { flex: 1; min-width: 0; }
.account-name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.2; }
.account-handle { font-size: 13px; color: var(--color-accent); margin-top: 2px; }
.account-email { font-size: 11px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.account-name, .account-handle, .account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sync { margin: 12px 0 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.account-sync.is-pending { color: var(--color-text); }
.overlay-account .btn-ghost { justify-content: flex-start; }
.btn-note {
  margin-left: auto; padding-left: 10px;
  font-family: var(--font-body); font-weight: 400; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* something is waiting for you: a friend request, or a place a friend sent */
.account-btn { position: relative; }
.account-btn.has-dot::after {
  content: ""; position: absolute; top: 9px; right: 8px; width: 8px; height: 8px;
  background: var(--color-accent);
}

/* friends: search by handle at the top, requests and the list below */
.overlay-friends {
  top: calc(env(safe-area-inset-top) + 58px);
  max-height: none;
  display: flex; flex-direction: column;
}
.friend-search { flex: none; }
.friends-body { flex: 1; overflow-y: auto; overscroll-behavior: none; margin-top: 4px; }
.friend-section { margin-top: 14px; }
.friend {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--color-divider);
}
.friend-avatar {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; text-transform: uppercase;
}
.friend-main { flex: 1; min-width: 0; }
.friend-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.friend-name, .friend-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-handle { font-size: 11px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.friend-side { flex: none; display: flex; align-items: center; gap: 2px; }
.friend-btn { padding-left: 10px; padding-right: 10px; font-size: 13px; }
.friend-state {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 0 8px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.overlay-friends.is-busy .friend-btn { opacity: .5; pointer-events: none; }

/* ── from friends ──────────────────────────────────────────────────────── */
/* a place a friend sent is blue, the red's classic partner, so your own red
   stays yours — until its owner picks another colour for it (Edit details) */
:root {
  --color-friend: #1d4ed8;
  /* the pin colours a place can be given; red and blue double as the defaults */
  --place-red: #ec3013; --place-blue: #1d4ed8; --place-green: #15803d; --place-amber: #b45309;
  --place-purple: #6d28d9; --place-pink: #be185d; --place-teal: #0f766e; --place-ink: #201e1d;
}
.pin-box.is-friend, .row.is-friend, .hero.is-friend { --pin: var(--color-friend); }
.detail-from { margin-top: 8px; font-size: 15px; line-height: 1.35; }
.detail-from b { font-family: var(--font-heading); font-weight: 800; }
.detail-from q, .rec-note { quotes: "\201C" "\201D"; }
.detail-from q { display: block; margin-top: 3px; font-style: italic; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* a word from the app, over everything but the gate, gone by itself */
.toast {
  position: absolute; left: 14px; right: 14px; top: calc(env(safe-area-inset-top) + 62px); z-index: 65;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 14px; font-size: 13px; line-height: 1.35;
  box-shadow: var(--shadow-md); animation: sheetUp .22s var(--ease-ios); pointer-events: none;
}

/* send: pick friends, add a note */
.overlay-send, .overlay-inbox { overflow-y: auto; overscroll-behavior: none; }
.send-place { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.2; margin-bottom: 6px; }
.friend-pick { cursor: pointer; }
.pick { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--color-text); }
.pick::after { content: ""; width: 10px; height: 10px; background: var(--color-bg); opacity: 0; }
.friend-pick[aria-pressed="true"] .pick { background: var(--color-accent); border-color: var(--color-accent); }
.friend-pick[aria-pressed="true"] .pick::after { opacity: 1; }
.send-note { margin-top: 14px; }

/* the inbox: one card per place waiting for an answer */
.rec { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.rec-head { display: flex; align-items: flex-start; gap: 12px; }
.rec-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--color-text); color: var(--color-bg); }
.rec-ico .ico { width: 22px; height: 22px; }
.rec-ico.has-photo { background: var(--color-surface); overflow: hidden; }
.rec-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-main { flex: 1; min-width: 0; }
.rec-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rec-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; margin-top: 3px; }
.rec-meta { font-size: 11px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rec-note { display: block; margin: 10px 0 0 52px; font-size: 14px; line-height: 1.4; }
.rec-actions { display: flex; gap: 8px; margin-top: 12px; padding-left: 52px; }
.rec-actions .btn-primary { flex: 1; justify-content: flex-start; }
.overlay-inbox.is-busy .rec-actions .btn { opacity: .5; pointer-events: none; }

/* ── dark theme (design tokens flipped, from Nearby.dc.html) ───────────── */
[data-dark="1"] {
  --color-bg: #201e1d; --color-surface: #2d2b2b; --color-text: #f3f2f2;
  --color-accent: #ff563c; --color-friend: #7aa2ff;
  --place-red: #ff563c; --place-blue: #7aa2ff; --place-green: #4ade80; --place-amber: #fbbf24;
  --place-purple: #a78bfa; --place-pink: #f472b6; --place-teal: #2dd4bf; --place-ink: #f3f2f2;
  --color-divider: color-mix(in srgb, #f3f2f2 34%, transparent);
  --color-neutral-100: #444141; --color-neutral-800: #eae7e7;
  --color-accent-100: #4d170e; --color-accent-800: #ffc4b8;
  --shadow-md: 0 3px 12px rgba(0,0,0,.5); --shadow-lg: 0 -10px 34px rgba(0,0,0,.55);
}
[data-dark="1"] .btn-primary { color: #f8f4f4; }
[data-dark="1"] .btn-primary:hover { background: var(--color-accent-400); }
[data-dark="1"] .btn-primary:active { background: var(--color-accent-300); }
[data-dark="1"] .map { background: #201e1d; }
[data-dark="1"] .overlay-detail { border-top-color: color-mix(in srgb, #fff 55%, transparent); }   /* brighter on the dark map, where the edge has to carry itself */
[data-dark="1"] .maplibregl-ctrl-attrib { background: rgba(32,30,29,.72) !important; color: #f3f2f2; }
[data-dark="1"] .maplibregl-ctrl-attrib a { color: #f3f2f2; }


/* ── touch devices: no sticky hover, honest press states ──────────────── */
@media (hover: none) {
  .row:hover:not(.is-selected), .result:hover, .btn-secondary:hover, .btn-ghost:hover, .theme-btn:hover, .account-btn:hover { background: transparent; }
  .btn-primary:hover, [data-dark="1"] .btn-primary:hover, .fab:hover, .recenter.is-following:hover, .filter-btn.is-active:hover { background: var(--color-accent); }
  .recenter:hover, .north:hover, .filter-btn:hover, .map-note[role="button"]:hover { background: var(--color-bg); }
  .fab:active { background: var(--color-accent-600); }
  .recenter:active, .north:active, .filter-btn:active, .theme-btn:active, .account-btn:active, .map-note[role="button"]:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
  .recenter.is-following:active, .filter-btn.is-active:active { background: var(--color-accent-600); }
}

/* ── Reduce Motion: keep the state changes, drop the choreography ──────── */
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}