/*
 * Walk / Bike pin mockups (template-walkbike-pins.php, assets/walkbike-pins.js).
 * Loads after home.css and walkbike-nearest.css, so the map stage, rings,
 * pins and route tags look exactly like the live section; this file only
 * adds the page shell and each variant's own controls.
 */

.wp-page {
  --wp-bar-h: 60px;
  --wp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wp-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  margin: 0;
  background: var(--mist, #f6f4ef);
  color: var(--ink);
  font-family: var(--font-body);
  padding-top: var(--wp-bar-h);
}

/* ---- Page shell ---- */

.wp-bar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wp-bar-h);
  background: rgba(31, 36, 25, 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
}
.wp-bar__inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.wp-bar__title {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wp-bar__title b { opacity: 0.55; font-weight: 700; }
.wp-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
}
.wp-page .wp-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.wp-page .wp-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.wp-page .wp-tab[aria-selected='true'] { background: #fff; color: var(--ink); }
.wp-tab__key {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
}
.wp-tab[aria-selected='true'] .wp-tab__key { background: var(--green); color: #fff; }

.wp-main { max-width: 1400px; margin: 0 auto; }
.wp-note {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff;
}
.wp-note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--warm-gray); }
.wp-note .wp-note__name {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--green-dark);
}
.wp-section.walkbike-section { padding-top: 70px; }

/* Each variant fades in once its tiles are in, like the live section. */
.wp-mount { opacity: 0; transition: opacity 400ms ease; }
.wp-mount.is-loaded { opacity: 1; }

/* ---- Shared on the map ---- */

.wp-stage {
  height: 660px;
  border-radius: var(--fc-radius-stage);
  border: 1px solid var(--line);
}
.wp-top {
  position: absolute;
  z-index: 12;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.walkbike-section .wp-stage .map-cta-pill.wp-pill { top: 16px; right: 16px; bottom: auto; }

/* Walk / Bike sized like the Explore Full Map pill beside it: 34px tall,
   12px type (the live section's switch is 48px, built for the card rail). */
.wp-top .wv-seg { padding: 3px; }
.wp-top .wv-seg__thumb { top: 3px; bottom: 3px; }
.walkbike-section .wp-top .wv-seg__btn { min-height: 26px; padding: 0 12px; gap: 6px; font-size: 12px; }
.wp-top .wv-seg__btn .wv-icon { font-size: 11px; }

/* The route and its time sit above every pin (walkbike-pins.js Stage), with
   a soft white halo so the dots read over the green badges. */
.wv-svg.wv-svg--top { z-index: 4; }
.wv-pins.wv-pins--top { z-index: 5; }
.wv-svg--top .wv-route { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }

.wv-pin.is-hidden { display: none; }
.wv-pin.is-dim .wv-pin__badge { opacity: 0.32; transform: scale(0.78); }
.wv-pin.is-spot { z-index: 4; }
.wv-pin.is-spot .wv-pin__badge { transform: scale(1.12); }
/* Spotlit names in the dock variant get a slightly smaller label. */
.wp-a .wv-pin.has-label:not(.is-selected) .wv-pin__label { padding: 4px 8px; font-size: 11.5px; }
@media (hover: hover) and (pointer: fine) {
  .wv-pin:hover .wv-pin__label { opacity: 1; }
  .wv-pin:hover { z-index: 8; }
}

/* ---- A: legend dock ---- */

.wp-dock {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 20px;
  max-width: calc(100% - 24px);
}
.wp-dock__glide {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 0 2px 8px rgba(31, 36, 25, 0.25);
}
.wp-dock.is-ready .wp-dock__glide { transition: transform 380ms var(--wp-spring), width 380ms var(--wp-spring); }
.walkbike-section .wp-dock__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 180ms ease, transform 140ms ease-out;
}
.walkbike-section .wp-dock__item:active { transform: scale(0.96); }
.wp-dock__item.is-active { color: #fff; }
.wp-dock__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 0 0 2px #fff;
  transition: transform 300ms var(--wp-spring);
}
.wp-dock__all { font-size: 12px; font-weight: 700; }
.wp-dock__item.is-active .wp-dock__icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
@media (hover: hover) and (pointer: fine) {
  .wp-dock__item:not(.is-active):hover .wp-dock__icon { transform: translateY(-3px) scale(1.08); }
}
.wp-dock__count {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(31, 36, 25, 0.08);
  font-size: 11px;
  text-align: center;
  transition: background-color 180ms ease;
}
.wp-dock__item.is-active .wp-dock__count { background: rgba(255, 255, 255, 0.18); }

/* ---- Summary pill ---- */

/* The dock variant's summary pill, above the dock instead of at the top
   (its bottom offset is set from the dock's height in JS). */
.wp-island.wp-island--above-dock { top: auto; }

.wp-island {
  position: absolute;
  z-index: 13;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 52px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 24px rgba(31, 36, 25, 0.28);
  overflow: hidden;
  transition: width 420ms var(--wp-spring), height 420ms var(--wp-spring);
}
.wp-island__inner { position: relative; height: 100%; }
.wp-island__content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 8px;
  white-space: nowrap;
  transition: opacity 200ms ease, filter 200ms ease, transform 260ms var(--wp-ease-out);
}
.wp-island__content.is-entering { opacity: 0; filter: blur(4px); transform: scale(0.96); }
.wp-island__content.is-leaving { opacity: 0; filter: blur(4px); transition-duration: 160ms; }
.wp-island__mode {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  font-size: 15px;
}
.wp-island__idle { font-size: 14px; font-weight: 600; }
/* ---- B: priority pins ----
   Every pin sits on its exact spot (walkbike-pins.js placePriority). A pin
   a full-size one would overlap shrinks to a small marker, drawn below the
   full-size pins; hovering or tapping it makes it full size. */
/* Markers sit above full-size pins for taps (they never share a spot
   after placePriority), and full-size pins keep a 32px tap target here
   rather than 44px, so it never reaches over a marker beside them. */
.wp-b .wv-pin.is-mini { z-index: 3; }
.wp-b .wv-pin:not(.is-mini) .wv-pin__badge::before { inset: -3px; }
.wp-b .wv-pin.is-mini .wv-pin__badge {
  transform: scale(0.42);
  box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(31, 36, 25, 0.35);
}
.wp-b .wv-pin.is-mini .wv-pin__badge > * { opacity: 0; }
/* About 18px tap target round the 11px marker; markers sit 16px apart. */
.wp-b .wv-pin.is-mini .wv-pin__badge::before { inset: 4px; }
.wp-b .wv-pin.is-mini .wv-pin__label { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* Hovering a marker names it; a click makes it the full-size pin. */
  .wp-b .wv-pin.is-mini:hover { z-index: 8; }
  /* Clear of the hovered marker (about 10px across with its ring). */
  .wp-b .wv-pin.is-mini:hover .wv-pin__label { display: block; opacity: 1; left: 14px; }
  .wp-b .wv-pin.is-mini.is-label-left:hover .wv-pin__label { left: auto; right: 14px; }
}
.wp-b .wv-pin .wv-pin__badge > * { transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wp-b .wv-pin.is-mini:hover .wv-pin__badge { transform: scale(0.6); }
}

/* B: zoom buttons, stacked on the right, and a reset pill beside them
   once the viewer has moved the map. Same 34px scale as the other pills. */
.wp-zoom {
  position: absolute;
  z-index: 12;
  right: 16px;
  top: 64px;
  display: flex;
  flex-direction: column;
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--fc-shadow-float);
  overflow: hidden;
}
.walkbike-section .wp-zoom__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease;
}
.walkbike-section .wp-zoom__btn + .wp-zoom__btn { border-top: 1px solid var(--line); }
.wp-zoom__btn svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .walkbike-section .wp-zoom__btn:hover { background: var(--green); color: #fff; }
}
.walkbike-section .wp-zoom__reset {
  position: absolute;
  z-index: 12;
  right: 58px;
  top: 64px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--fc-radius-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--fc-shadow-float);
}
.walkbike-section .wp-zoom__reset[hidden] { display: none; }
.wp-zoom__reset svg { width: 13px; height: 13px; }

/* ---- A: Nearby (walkbike-pins.js buildNearby) ----
   A map with a sheet: a bottom sheet with three heights on phones, a side
   panel from 900px. Pins never move off their place; how much each one
   draws (dot, icon, icon and name) depends on the room around it. */

.at { max-width: 1280px; margin: 0 auto; }
/* Homepage: the map skeleton (walkbike-nearest.css) is sized to the map here,
   not to the old section's full-bleed card layout. */
.at-mount > .wv-skel { margin: 0 auto; }
.at-mount .wv-skel__stage { height: 700px; border-radius: var(--fc-radius-stage); border: 1px solid var(--line); }
.at__map {
  height: 700px;
  border-radius: var(--fc-radius-stage);
  border: 1px solid var(--line);
}
.at-svg { display: inline-grid; place-items: center; line-height: 0; }
.at-svg svg { width: 100%; height: 100%; }

/* Pins: a zero-size anchor on the exact spot; the dot, balloon tip and
   name position themselves off it. Taps are handled by the map (nearest
   place within reach), so the pins themselves never catch pointer events. */
.walkbike-section .at-pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none !important;
}
.at-pin__dot {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  /* Even size, so the square icon sits on whole pixels in the 24px dot. */
  font-size: 12px;
  transform: scale(0.38);
  transition: transform 260ms var(--wp-spring), opacity 160ms ease;
  isolation: isolate;
}
/* The disc and its ring are drawn behind the icon, so hovering grows
   only the disc: the icon is never scaled, so it stays sharp and never
   re-snaps a pixel sideways. */
.at-pin__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(31, 36, 25, 0.3);
  transition: transform 260ms var(--wp-spring), background-color 160ms ease;
}
.at-pin__dot > * { opacity: 0; transition: opacity 160ms ease; }
.at-pin.is-icon { z-index: 2; }
.at-pin.is-icon .at-pin__dot,
.at-pin.is-hot .at-pin__dot { transform: scale(1); }
.at-pin.is-icon .at-pin__dot > *,
.at-pin.is-hot .at-pin__dot > *,
.at-pin.is-sel .at-pin__dot > * { opacity: 1; }
.at-pin.is-hot { z-index: 8; }
.at-pin.is-hot .at-pin__dot::before { transform: scale(1.14); }
/* Places outside the picked category stay as faint dots, so the map still
   shows how much is around. */
.at-pin.is-faint .at-pin__dot { transform: scale(0.3); opacity: 0.35; }
.at-pin.is-faint .at-pin__dot::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.at-pin.is-off { display: none; }
/* The FC badge tucks down to a small black mark while a place right by
   it is hovered (walkbike-pins.js render). */
.at .wv-fc span { transition: transform 260ms var(--wp-spring), color 120ms ease; }
.at .wv-fc.is-tucked span { transform: scale(0.3); color: transparent; }

/* The picked place: a balloon above the spot, its tip on the exact point,
   with a soft shadow where it touches the map. */
.at-pin.is-sel { z-index: 7; }
.at-pin.is-sel .at-pin__dot { transform: translateY(-23px) scale(1.2); }
.at-pin.is-sel .at-pin__dot::before {
  background: var(--ink);
  box-shadow: 0 0 0 1.5px #fff, 0 4px 10px rgba(31, 36, 25, 0.35);
}
.at-pin__tip { display: none; }
.at-pin.is-sel .at-pin__tip {
  display: block;
  position: absolute;
  left: -7px;
  top: -11px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--ink);
  animation: at-drop 320ms var(--wp-spring) both;
}
.at-pin.is-sel::after {
  content: '';
  position: absolute;
  left: -5px;
  top: -2px;
  width: 10px;
  height: 4px;
  border-radius: 50%;
  background: rgba(31, 36, 25, 0.3);
}
@keyframes at-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Names read like map labels: plain type with a white halo, no pill. */
.at-pin__label {
  position: absolute;
  left: 18px;
  top: 0;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff;
  opacity: 0;
  transition: opacity 160ms ease;
}
.at-pin.has-label .at-pin__label { opacity: 1; }
.at-pin.is-left .at-pin__label { left: auto; right: 18px; }
.at-pin.is-sel .at-pin__label { top: -23px; left: 20px; font-size: 13px; font-weight: 700; }
.at-pin.is-sel.is-left .at-pin__label { left: auto; right: 20px; }

/* Map controls: zoom, and a recenter button once the view has moved. */
.at-ctrl {
  position: absolute;
  z-index: 15;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.at-ctrl__zoom {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--fc-shadow-float);
  overflow: hidden;
}
.walkbike-section .at-ctrl__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease, transform 140ms ease-out;
}
.walkbike-section .at-ctrl__btn:active { transform: scale(0.94); }
.at-ctrl__btn .at-svg { width: 16px; height: 16px; }
.walkbike-section .at-ctrl__btn + .at-ctrl__btn { border-top: 1px solid var(--line); }
.walkbike-section .at-ctrl__solo {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--fc-shadow-float);
  color: var(--green-dark);
}
.walkbike-section .at-ctrl__solo[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .walkbike-section .at-ctrl__btn:hover { background: var(--green); color: #fff; }
}

/* The sheet. On phones it is a bottom sheet moved by JS between three
   stops (data-detent: peek / half / full) with the iOS sheet curve. */
.at-sheet {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -2px 6px rgba(31, 36, 25, 0.06), 0 -10px 30px rgba(31, 36, 25, 0.12);
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.at-sheet.is-dragging { transition: none; }
.at-sheet__grab { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.at-sheet__grab::before { content: ''; width: 38px; height: 5px; border-radius: 3px; background: rgba(31, 36, 25, 0.18); }
.at-sheet__head { flex: none; padding: 2px 18px 16px; touch-action: none; }
.at-sheet__head[hidden] { display: none; }

.at-hero { display: flex; align-items: center; gap: 12px; }
.at-hero__num {
  flex: none;
  min-width: 1.1em;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.at-hero__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.at-hero__text { font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.at-hero__sub { font-family: var(--font-body); font-size: 12.5px; line-height: 1.2; color: var(--warm-gray); }
.at-hero .wv-seg { margin-left: auto; padding: 3px; }
.at-hero .wv-seg__thumb { top: 3px; bottom: 3px; }
.walkbike-section .at-hero .wv-seg__btn { min-height: 28px; padding: 0 11px; gap: 5px; font-size: 12px; }
.at-hero .wv-seg__btn .wv-icon { font-size: 11px; }

/* Category chips, Google Maps style; they scroll sideways on phones. */
.at-chips {
  display: flex;
  gap: 8px;
  margin: 14px -18px 0;
  padding: 2px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}
.at-chips::-webkit-scrollbar { display: none; }
/* Overflowing chips fade at the edge where more sit (walkbike-pins.js). */
.at-chips.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.at-chips.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.at-chips.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.at-chips.is-dragging { cursor: grabbing; }
.at-chips.is-dragging .at-chip { pointer-events: none; }
.walkbike-section .at-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--fc-radius-pill);
  background: #f2f0eb;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms ease-out;
}
.walkbike-section .at-chip:has(.at-chip__badge) { padding-left: 5px; }
.walkbike-section .at-chip:active { transform: scale(0.96); }
.at-chip__badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; }
/* proxima-nova sits its figures high in a smaller line box, so the count
   steps down onto the label's baseline. */
.at-chip__count { position: relative; top: 1.5px; font-size: 11.5px; color: var(--warm-gray); font-variant-numeric: tabular-nums; }
.walkbike-section .at-chip.is-on { background: var(--ink); color: #fff; }
.at-chip.is-on .at-chip__count { color: #f2f0eb; }
.at-chip.is-on .at-chip__badge { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.3); }

/* The list, grouped by minutes. */
.at-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.at-sheet[data-detent='peek'] .at-sheet__body { overflow-y: hidden; }
.at-band__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 14px 18px 6px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.at-band__count { font-variant-numeric: tabular-nums; }
.at-list { list-style: none; margin: 0; padding: 0; }
.walkbike-section .at-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  text-align: left;
  transition: background-color 140ms ease;
}
.walkbike-section .at-list li + li .at-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 62px;
  right: 18px;
  height: 1px;
  background: var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .walkbike-section .at-row:hover { background: rgba(31, 36, 25, 0.04); }
}
.walkbike-section .at-row.is-sel { background: rgba(74, 124, 58, 0.1); }
.at-row__badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; }
.at-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.at-row__name { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row__meta { font-family: var(--font-body); font-size: 12.5px; line-height: 1.2; color: var(--warm-gray); }
.at-row__time { font-family: var(--font-body); font-size: 12px; color: var(--green-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-row__time b { font-size: 16px; font-weight: 700; }
.walkbike-section .at-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 18px 20px;
  min-height: 44px;
  border-radius: 12px;
  background: #f2f0eb;
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
}
.at-foot .at-svg { width: 14px; height: 14px; }

/* The place card, in place of the header while a place is picked. */
.at-card { flex: none; padding: 2px 18px 18px; touch-action: none; }
.at-card[hidden] { display: none; }
.at-card__top { display: flex; align-items: center; gap: 12px; }
.at-card__badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-size: 18px; }
.at-card__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.at-card__name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.at-card__meta { font-family: var(--font-body); font-size: 13px; line-height: 1.2; color: var(--warm-gray); }
.walkbike-section .at-card__close {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: #f2f0eb;
  color: var(--warm-gray);
}
.at-card__close .at-svg { width: 13px; height: 13px; }
.at-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.at-stat { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #f5f3ee; }
.at-stat__value { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-body); font-size: 12px; color: var(--ink); white-space: nowrap; }
.at-stat__value b { font-size: 19px; font-weight: 700; line-height: 1; }
.at-stat__value .wv-icon { align-self: center; font-size: 12px; color: var(--warm-gray); }
.at-stat__label { font-family: var(--font-body); font-size: 11.5px; color: var(--warm-gray); }
.at-stat.is-mode { background: rgba(74, 124, 58, 0.12); }
.at-stat.is-mode .at-stat__value,
.at-stat.is-mode .at-stat__value .wv-icon { color: var(--green-dark); }
.at-actions { display: flex; gap: 8px; margin-top: 14px; }
.walkbike-section .at-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  border-radius: 13px;
  background: #f2f0eb;
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 140ms ease-out, filter 160ms ease;
}
.walkbike-section .at-btn:active { transform: scale(0.97); }
.walkbike-section .at-btn--primary { background: var(--green); color: #fff !important; }
.at-btn .at-svg { width: 16px; height: 16px; }

/* "Explore the full map", pinned under the list. */
.at-sheet__foot { flex: none; padding: 10px 18px 14px; border-top: 1px solid var(--line); background: #fff; }
.walkbike-section .at-sheet__foot .at-foot { margin: 0; }

/* C: Dock. The sheet becomes a floating dock along the bottom of the map
   (count, Walk / Bike, chips), and the place card while one is picked. */
.at--dock .at-sheet {
  top: auto;
  bottom: 16px;
  left: 50%;
  right: auto;
  /* As wide as the chip row, so Walk / Bike ends right where the last
     chip does. */
  width: max-content;
  max-width: calc(100% - 32px);
  border-radius: 20px;
  transform: translateX(-50%);
  transition: none;
  box-shadow: var(--fc-shadow-float), 0 0 0 1px rgba(31, 36, 25, 0.04);
}
.at--dock .at-sheet__head { padding: 14px 16px; touch-action: auto; }
.at--dock .at-chips { margin: 12px -16px 0; padding: 2px 16px; }
.at--dock .at-card { padding: 16px; touch-action: auto; }
/* While a place card shows, the header still sets the dock's width (it
   is only collapsed, not removed), and the card fills that width without
   widening it, so the dock keeps its size. */
.at--dock .at-sheet__head[hidden] { display: block; visibility: hidden; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.at--dock .at-card { width: 0; min-width: 100%; box-sizing: border-box; }
.walkbike-section .at--dock .at-card__close { background: var(--ink); color: #fff; }

/* "Zoom in to see more", just above the dock (its bottom offset is
   set from the dock's top in JS). */
.at-hint {
  position: absolute;
  z-index: 16;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--fc-radius-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--fc-shadow-float);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 200ms ease, transform 260ms var(--wp-spring);
}
.at-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.at-hint .at-svg { display: grid; place-items: center; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }

/* From 900px the sheet is a side panel, always open. */
.at.is-desk .at-sheet {
  top: 16px;
  bottom: 16px;
  left: 16px;
  right: auto;
  width: 372px;
  border-radius: 18px;
  box-shadow: var(--fc-shadow-float), 0 0 0 1px rgba(31, 36, 25, 0.04);
  transform: none;
  transition: none;
  overflow: hidden;
}
.at.is-desk .at-sheet__grab { display: none; }
.at.is-desk .at-sheet__head { padding-top: 20px; touch-action: auto; }
.at.is-desk .at-card { padding-top: 20px; touch-action: auto; }
.at.is-desk .at-chips { flex-wrap: wrap; overflow: visible; }

/* ---- Phones and small tablets ---- */

@media (max-width: 719px) {
  .wp-page { --wp-bar-h: 104px; }
  .wp-bar__inner { flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding: 0 16px; }
  .wp-bar__title { text-align: center; }
  .wp-tabs { margin: 0; }
  .wp-page .wp-tab { flex: 1; justify-content: center; padding: 0 6px; gap: 6px; font-size: 12px; }
  .wp-note { margin: 20px 16px 0; }
  .wp-section.walkbike-section { padding: 50px 16px 60px; }

  .wp-stage { height: 600px; }
  .at__map { height: 660px; border-radius: 20px; }
  .at-mount .wv-skel__stage { height: 660px; border-radius: 20px; }
  .at-hero__num { font-size: 42px; }
  .at--dock .at-sheet { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; transform: none; border-radius: 18px; }
  .at--dock .at-hero__num { font-size: 38px; }
  /* Icon-only Walk / Bike on phones, so the headline keeps its width. */
  .walkbike-section .at-hero .wv-seg__btn { padding: 0 10px; }
  .at-hero .wv-seg__btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .at-hero .wv-seg__btn .wv-icon { font-size: 14px; }
  .walkbike-section .wp-stage .map-cta-pill .wv-pill__long { display: none; }

  /* Dock: spans the map. Every entry is icon-only except the picked one,
     which opens up to show its full name, never cut short. The icon-only
     entries are kept compact and the spare room is shared out between
     them, so even "Entertainment" fits on a 360px-wide phone. */
  .wp-dock { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; gap: 0; padding: 4px; justify-content: space-between; }
  .walkbike-section .wp-dock__item { flex: 0 0 auto; padding: 2px; gap: 6px; }
  .walkbike-section .wp-dock__item.is-active { padding-right: 11px; }
  .wp-dock__count { display: none; }
  .wp-dock__label { display: none; font-size: 12px; }
  .wp-dock__item.is-active .wp-dock__label { display: block; white-space: nowrap; }
  .wp-dock__icon { flex: none; width: 28px; height: 28px; font-size: 12px; }
  .wp-dock__glide { top: 4px; bottom: 4px; border-radius: 12px; }

  /* The summary keeps its whole sentence on a phone: the walk / bike
     icon goes (the Walk / Bike switch already shows the mode). */
  .wp-island { height: 44px; }
  .wp-island__content { padding: 0 16px; }
  .wp-island__mode { display: none; }
  .wp-island__idle { font-size: 13px; }
}

/* "Explore Full Map": home.css's map pill, in the map's top-left corner. */
.walkbike-section .at__map .map-cta-pill.at-fullmap { top: 16px; left: 16px; right: auto; bottom: auto; }

@media (max-width: 719px) {
  .walkbike-section .at__map .map-cta-pill.at-fullmap { top: 12px; left: 12px; padding: 9px 12px; }
  .walkbike-section .at__map .map-cta-pill .wv-pill__long { display: none; }
}