/* ========================================
   MarkitPlace — Public Map Page
   Design-system tokens come from design-tokens.css (linked in map.html
   after styles.css). Pin status tokens (--pin-open/closed/unavailable) and
   the warm palette/typography/spacing all resolve from there.
   ======================================== */

.map-page {
  overflow: hidden;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.map-nav {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 0; /* compact utility header (overrides .nav's 16px) */
}

/* Smaller logo so the map banner is minimal-height (keeps the 3.75:1 ratio) */
.map-nav .brand-logo {
  width: 150px;
  height: 40px;
}

.map-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.map-canvas {
  position: absolute;
  inset: 0;
}

/* ---------- Floating search ---------- */
.map-search {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 20;
  width: min(372px, calc(100vw - 32px));
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  font-family: var(--font-body);
}

/* Stores / Products — design-system SegmentedControl: a sunken track with a
   raised pill for the active segment. */
.map-search__modes {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.map-search__mode {
  flex: 1;
  padding: 7px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.map-search__mode:hover { color: var(--text-primary); }

.map-search__mode.is-active {
  background: var(--surface-raised);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.map-search__form {
  display: flex;
  gap: var(--space-2);
}

.map-search__input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.map-search__input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.map-search__submit {
  flex: 0 0 auto;
  width: 42px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-on-brand);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.map-search__submit:hover { background: var(--brand-hover); }

.map-search__status {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0 4px;
}

/* ---------- Results list ---------- */
.map-results {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--border-hairline);
  max-height: min(46vh, 420px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-results__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.map-results__item:hover { background: var(--surface-hover); }
.map-results__item--active { background: var(--brand-soft); }

/* Design-system CategoryPin in a result row: status-tinted circle (fill =
   open/closed/sold-out, same tokens as the map balloon) + white category glyph. */
.map-row-pin {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  background: var(--brand);
}

.map-row-pin--open { background: var(--pin-open); }
.map-row-pin--closed { background: var(--pin-closed); }
.map-row-pin--sold-out { background: var(--pin-unavailable); }

.map-row-pin img { width: 20px; height: 20px; object-fit: contain; }

.map-results__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.map-results__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.map-results__price {
  color: var(--pin-open);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Detail panel ---------- */
.map-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

.map-panel__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.map-panel__close:hover { background: var(--surface-hover); }

.map-panel__body {
  overflow-y: auto;
  padding: 18px;
}

.map-panel__category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-on-soft);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin-bottom: 8px;
}

.map-panel__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 24px 4px 0;
}

.map-panel__subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 10px;
}

/* Place photo gallery — horizontal scroll-snap strip in the place panel */
.map-place__gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 4px 0 10px;
  padding-bottom: 4px;
}

.map-place__photo {
  flex: 0 0 auto;
  width: 78%;
  max-width: 320px;
  height: 190px;
  object-fit: cover;
  border-radius: var(--card-radius);
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  scroll-snap-align: start;
}

.map-place__gallery--single .map-place__photo {
  width: 100%;
  max-width: 100%;
}

.map-place__gallery::-webkit-scrollbar {
  height: 6px;
}

.map-place__gallery::-webkit-scrollbar-thumb {
  background: var(--border-glass);
  border-radius: 6px;
}

.map-place__photo {
  cursor: pointer;
}

/* Full-viewport photo lightbox (parity with iOS full-screen viewer) */
.map-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 24px;
}

/* The class rule sets display:flex, so the hidden attribute needs an explicit
   override to win over it (see web-map CSS gotcha in CLAUDE.md). */
.map-lightbox[hidden] {
  display: none;
}

.map-lightbox__img {
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
}

.map-lightbox__close,
.map-lightbox__nav {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.map-lightbox__close:hover,
.map-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.map-lightbox__close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.map-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}

.map-lightbox__nav[hidden] {
  display: none;
}

.map-lightbox__nav--prev { left: 16px; }
.map-lightbox__nav--next { right: 16px; }

.map-lightbox__count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.map-panel__row {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.map-panel__open {
  font-weight: 600;
  color: var(--pin-open);
}

.map-panel__closed {
  font-weight: 600;
  color: var(--pin-closed);
}

.map-panel__section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}

.map-panel__section h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.map-inventory {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-inventory__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 8px 10px;
}

/* display:flex above beats the UA [hidden] rule, so re-hide explicitly
   (paginated rows beyond the first 5 are rendered hidden) */
.map-inventory__item[hidden] { display: none; }

/* Inventory row whose product matched the active search (yellow on iOS;
   the web theme highlights in green) */
.map-inventory__item--match {
  border-color: var(--green-400);
  background: var(--green-glow);
}

.map-inventory__more {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  border-radius: 10px;
  border: 1px dashed var(--border-glass);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-inventory__more:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.map-inventory__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-card-hover);
  flex: 0 0 auto;
}

.map-inventory__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.map-inventory__detail {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.map-inventory__price {
  margin-left: auto;
  font-weight: 600;
  color: var(--pin-open);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Sold-out inventory item: carrot "Sold out" chip + struck name, so the
   place panel reads the same status language as the pins and product rows. */
.map-inventory__soldout {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pin-unavailable-soft);
  color: var(--pin-unavailable-ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.map-inventory__item--out .map-inventory__name {
  text-decoration: line-through;
  text-decoration-color: var(--border-strong, rgba(0, 0, 0, 0.25));
  color: var(--text-muted);
}

/* ---------- Item detail panel ---------- */
.map-panel__back {
  display: block;
  margin-bottom: 10px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  max-width: calc(100% - 36px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-panel__back:hover { background: var(--bg-card-hover); }

.map-item__image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--bg-card-hover);
}

.map-item__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 8px;
}

.map-item__qty {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.05rem;
}

.map-item__price-badge {
  background: var(--pin-open);
  color: #fff;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

.map-item__price-badge span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.9;
}

.map-inventory__item--link { cursor: pointer; }
.map-inventory__item--link:hover { background: var(--bg-card-hover); }

.map-inventory__chevron {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.map-inventory__item--link .map-inventory__price { margin-left: auto; }

.map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-chip {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
}

.map-chip--allergen {
  color: var(--accent-on-soft);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* display rules above would override the hidden attribute */
.map-panel[hidden],
.map-results[hidden],
.map-toast[hidden],
.map-search__status[hidden] {
  display: none;
}

/* ---------- Toast / loading ---------- */
.map-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .map-panel {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: 58vh;
  }

  .map-results { max-height: 34vh; }
}

/* ---------- Auth: nav button ---------- */
.map-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-auth-btn:hover { background: var(--bg-card-hover); }

.map-auth-btn--user { padding: 5px 14px 5px 6px; }

.map-auth-btn__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.map-auth-btn__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-500);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Display name in the nav button — truncate so a long name can't widen it */
.map-auth-btn__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Auth: sign-in modal ---------- */
/* display:flex below beats the UA [hidden] rule, so re-hide explicitly */
.map-auth[hidden] { display: none; }

.map-auth {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.map-auth__card {
  position: relative;
  width: min(380px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.map-auth__card .brand-logo { margin: 0 auto 12px; }

.map-auth__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.map-auth__close:hover { color: var(--text-primary); }

.map-auth__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.map-auth__subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.map-auth__form {
  display: grid;
  gap: 10px;
}

.map-auth__form input {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card-hover);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
}

.map-auth__form input:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.map-auth__submit {
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--green-500);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-auth__submit:hover { background: var(--green-600); }

.map-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.map-auth__divider::before,
.map-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}

.map-auth__provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-auth__provider:hover { background: var(--bg-card-hover); }

.map-auth__provider[hidden] { display: none; }

.map-auth__error {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--status-danger);
}

.map-auth__toggle {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.map-auth__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--green-500);
  cursor: pointer;
}

.map-auth__link:hover { text-decoration: underline; }

/* ---------- Profile panel ---------- */
.map-profile { text-align: center; }

.map-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 4px auto 12px;
  background: var(--bg-card-hover);
}

.map-profile__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-500);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.8rem;
}

.map-profile__stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}

.map-profile__stats div {
  display: grid;
  gap: 2px;
}

.map-profile__stats strong {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-primary);
}

.map-profile__stats span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.map-profile__signout {
  margin-top: 12px;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--status-danger);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-profile__signout:hover { background: var(--bg-card-hover); }

/* The marketing pages collapse .nav__links behind a hamburger at ≤768px, but
   the map page has no hamburger — inheriting that would hide the sign-in /
   profile button (the entry point to the whole producer flow) on phones. So
   on the map page the nav stays an inline row; the text links are dropped to
   keep the compact header uncluttered, leaving the auth button reachable. */
@media (max-width: 768px) {
  .map-nav .nav__links {
    display: flex;
    position: static;
    inset: auto;
    flex-direction: row;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 12px;
  }
  .map-nav .nav__link,
  .map-nav .nav__cta { display: none; }
}

@media (max-width: 640px) {
  .map-auth-btn span:not(.map-auth-btn__avatar) { display: none; }
  .map-auth-btn--user { padding: 5px 6px; }
}

/* ---------- First-visit welcome ---------- */
.map-welcome[hidden] { display: none; }

.map-welcome {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
}

.map-welcome__card {
  width: min(400px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 30px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.map-welcome__card .brand-logo { margin: 0 auto 12px; }

.map-welcome__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.map-welcome__subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.map-welcome__form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.map-welcome__form input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card-hover);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
}

.map-welcome__form input:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.map-welcome__form button {
  padding: 11px 18px;
  border-radius: 10px;
  border: none;
  background: var(--green-500);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-welcome__form button:hover { background: var(--green-600); }

.map-welcome__locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--green-400);
  background: var(--green-glow);
  color: var(--green-600);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-welcome__locate:hover { background: var(--green-400); color: #fff; }

.map-welcome__links {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.map-welcome__link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.map-welcome__link:hover { color: var(--text-primary); }

/* ---------- Terms gate (mirrors iOS TermsAgreementView) ---------- */
/* A native <dialog> opened with showModal(): the top layer renders above
   everything (no z-index needed) and the browser makes the rest of the
   page inert — no click, Tab, or focus escape behind the gate. */
.map-terms {
  position: fixed;
  inset: 0;
  margin: auto; /* the global reset zeroes margins, which kills the UA's dialog centering */
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 30px 28px;
  text-align: center;
  color: inherit;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.map-terms::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.map-terms .brand-logo { margin: 0 auto 12px; }

.map-terms__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--green-600);
  margin-bottom: 6px;
}

.map-terms__subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.map-terms__summary {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.map-terms__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.map-terms__row svg {
  flex: none;
  margin-top: 2px;
  color: var(--green-500);
}

.map-terms__row h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.map-terms__row p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.map-terms__doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--green-glow);
  color: var(--green-600);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-fast);
}

.map-terms__doc:hover { background: var(--green-400); color: #fff; }

.map-terms__doc-arrow { margin-left: auto; }

.map-terms__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-primary);
  cursor: pointer;
}

.map-terms__agree input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--green-500);
  cursor: pointer;
}

.map-terms__continue {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: var(--green-500);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-terms__continue:hover:not(:disabled) { background: var(--green-600); }

.map-terms__continue:disabled {
  background: var(--text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Profile menu ---------- */
.map-menu {
  list-style: none;
  margin: 14px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.map-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.map-menu__item:hover { background: var(--bg-card-hover); }

.map-menu__item--signout { color: var(--status-danger); }

/* ---------- Profile dropdown (anchored under the avatar button) ---------- */
.map-auth-wrap { position: relative; }

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

.map-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0; /* anchors the menu's right edge to the button's — no JS coords */
  z-index: 90; /* above the detail panel (20) + floating controls (25) */
  width: min(280px, calc(100vw - 24px));
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.22));
}

/* Caret pointing up to the avatar button */
.map-profile-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-glass);
  border-top: 1px solid var(--border-glass);
  transform: rotate(45deg);
}

.map-profile-menu__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-profile-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.map-profile-menu__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-500);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}

.map-profile-menu__name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.map-profile-menu__sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.map-profile-menu__stats {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.map-profile-menu__stats div {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: var(--bg-card-hover);
}

.map-profile-menu__stats strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.map-profile-menu__stats span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.map-profile-menu .map-menu { margin-bottom: 0; }

/* ---------- Edit profile form ---------- */
.map-profile-edit {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  text-align: left;
}

.map-profile-edit label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.map-profile-edit input {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
}

.map-profile-edit input:focus,
.map-profile-edit textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.map-profile-edit textarea {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.map-edit-counter {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
}

.map-edit-section {
  margin: 6px 0 -2px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.map-edit-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.map-edit-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green-500);
  flex: 0 0 auto;
}

.map-edit-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: -4px;
}

.map-profile-edit select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
}

/* "Edit" chip on My Business place rows */
.map-edit-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.map-edit-chip:hover { background: var(--bg-card-hover); }

/* ---------- Edit Profile tabs (Profile / Business / Account) ---------- */
.map-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 2px;
  padding: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
}

.map-tabs__btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.map-tabs__btn:hover { color: var(--text-primary); }

.map-tabs__btn.is-active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Tab sections toggle via the hidden attribute; the display rule would beat
   the UA stylesheet without the [hidden] pair (see the .map-auth gotcha). */
.map-tab-panel { display: grid; gap: 12px; }
.map-tab-panel[hidden] { display: none; }

/* ---------- Brand-color swatches (curated palette, no free picker) ---------- */
.map-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0;
}

.map-swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-glass);
  border-radius: 50%;
  background: var(--swatch);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.map-swatch:hover { transform: scale(1.08); }

.map-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--swatch);
}

.map-swatch svg { width: 16px; height: 16px; }

.map-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Account tab: verification + Danger Zone ---------- */
.map-verify { margin: 0; font-size: 0.88rem; }
.map-verify--ok { color: var(--green-600); font-weight: 600; }
.map-verify--warn { color: var(--status-warning); }

.map-edit-section--danger { color: var(--status-danger); }

.map-danger-btn {
  padding: 11px 14px;
  border: 1px solid var(--status-danger);
  border-radius: 10px;
  background: transparent;
  color: var(--status-danger);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.map-danger-btn:hover { background: var(--bg-card-hover); }

.map-danger-btn--solid {
  background: var(--status-danger);
  color: #fff;
}

.map-danger-btn--solid:hover { background: var(--status-danger); filter: brightness(0.92); }

.map-danger-btn[disabled] { opacity: 0.6; cursor: default; }

.map-danger-confirm {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--status-danger);
  border-radius: 10px;
  background: var(--bg-card);
}

.map-danger-confirm[hidden] { display: none; }

.map-danger-error {
  margin: 0;
  color: var(--status-danger);
  font-size: 0.82rem;
}

/* ---------- Notifications: menu badge + inbox rows ---------- */
.map-menu__badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--status-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.map-inbox {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

.map-inbox__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.map-inbox__count {
  margin-right: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.map-inbox__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.map-inbox__row:hover { background: var(--bg-card-hover); }

.map-inbox__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-inbox__icon svg { width: 15px; height: 15px; }

.map-inbox__main { flex: 1; min-width: 0; }

.map-inbox__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.map-inbox__row--unread .map-inbox__title { font-weight: 700; }

/* Bodies clamp to two lines; report/unknown rows expand inline on tap
   (web has no report-detail screen yet). */
.map-inbox__body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-inbox__row--expanded .map-inbox__body { -webkit-line-clamp: unset; }

.map-inbox__time {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.map-inbox__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

.map-inbox__row--unread .map-inbox__dot { background: var(--status-danger); }

.map-inbox__delete {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.map-inbox__delete:hover {
  background: var(--bg-card-hover);
  color: var(--status-danger);
}

/* ---------- Place panel: owner actions + contributor ---------- */
.map-owner-note {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-600);
  margin: 8px 0 6px;
}

.map-owner-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.map-owner-actions button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-owner-actions__edit {
  flex: 1;
  background: var(--green-500);
  color: #fff;
}

.map-owner-actions__edit:hover { background: var(--green-600); }

.map-owner-actions__delete {
  flex: 0 0 auto;
  background: var(--status-danger);
  color: #fff;
}

.map-owner-actions__delete:hover { filter: brightness(0.92); }

.map-contributor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-contributor__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.map-contributor__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-500);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.map-contributor__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.map-contributor__sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ---------- Anchored pin callout (Apple-Maps-inspired summary card) ---------- */
.map-callout {
  position: relative;
  width: 256px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(0, 0, 0, 0.26));
  overflow: hidden;
  font-family: var(--font-body);
  /* lift the bubble off the pin so the caret has room */
  margin-bottom: 12px;
}

.map-callout__hero {
  height: 124px;
  background: var(--bg-card-hover);
}

.map-callout__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-callout__body { padding: 12px 14px 14px; }

.map-callout__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.map-callout__meta {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.map-callout__hours {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.map-callout__hours.is-open { color: var(--green-600); }
.map-callout__hours.is-closed { color: var(--status-danger); }

.map-callout__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.map-callout__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 11px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-callout__btn--primary {
  background: var(--green-500);
  color: #fff;
}

.map-callout__btn--primary:hover { background: var(--green-600); }

.map-callout__btn--edit {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
}

.map-callout__btn--edit:hover { background: var(--bg-card); }

.map-callout__btn-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* Close (×) — top-right of the bubble (mirrors the iOS callout dismiss) */
.map-callout__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.map-callout__close:hover { background: rgba(0, 0, 0, 0.6); }

/* Caret pointing down to the marker */
.map-callout__caret {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  transform: translate(-50%, 50%) rotate(45deg);
}

/* ---------- Place editor photos ---------- */
.map-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-glass);
}

.map-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.map-photo-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px dashed var(--border-glass);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}

.map-photo-add:hover { background: var(--bg-card-hover); }

/* ---------- Avatar editor ---------- */
.map-avatar-edit {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 16px;
}

.map-avatar-edit__preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--bg-card-hover);
  display: grid;
  place-items: center;
}

.map-avatar-edit__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-avatar-edit__preview .map-profile__avatar--initial {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 1.5rem;
}

.map-avatar-edit__btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.map-avatar-edit__btn:hover { background: var(--bg-card-hover); }

/* ---------- Geocode navigation control ---------- */
.map-goto[hidden] { display: none; }

.map-goto {
  position: absolute;
  right: 16px;
  bottom: 28px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Add-a-place FAB (mirrors the iOS "+" button) ---------- */
/* Stacked above the radar; denim blue is a deliberate off-ramp literal so the
   create action reads distinctly from the carrot radar + green locate pin and
   is unaffected by the dark-mode token cascade. display:grid beats [hidden]. */
.map-add[hidden] { display: none; }

.map-add {
  position: absolute;
  right: 16px;
  bottom: 144px; /* stacked above the radar (86px) */
  z-index: 25;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #2f6fb0;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.map-add:hover { background: #296298; }

/* Delete FAB — contextual red trash at bottom-LEFT (away from the right-side
   discovery stack), shown only when the selected place is owned. */
.map-delete-fab[hidden] { display: none; }

.map-delete-fab {
  position: absolute;
  left: 16px;
  bottom: 28px;
  z-index: 25;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: var(--status-danger);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.map-delete-fab:hover { filter: brightness(0.92); }

/* ---------- Radar (mirrors the iOS orange radar button) ---------- */
/* display:grid below beats the UA [hidden] rule, so re-hide explicitly */
.map-radar[hidden] { display: none; }

.map-radar {
  position: absolute;
  right: 16px;
  bottom: 86px; /* stacked above the goto pin button */
  z-index: 25;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent); /* carrot — the design-system harvest accent */
  color: var(--text-on-brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.map-radar:hover { background: var(--accent-hover); }

.map-radar.is-scanning {
  animation: radar-pulse 1.1s ease-out infinite;
  pointer-events: none;
}

@keyframes radar-pulse {
  0% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(210, 106, 40, 0.55); }
  100% { box-shadow: var(--shadow-md), 0 0 0 18px rgba(210, 106, 40, 0); }
}

.map-goto__btn {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: var(--transition-fast);
}

.map-goto__btn:hover { background: var(--green-600); }

.map-goto__form[hidden] { display: none; }

.map-goto__form {
  display: flex;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 6px;
  box-shadow: var(--shadow-lg);
}

.map-goto__form input {
  width: min(240px, calc(100vw - 160px));
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
}

.map-goto__form input:focus { outline: 2px solid var(--green-400); }

.map-goto__form button {
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--green-500);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.map-goto__form button:hover { background: var(--green-600); }

/* ---------- Product result rows (mirrors iOS results sheet) ---------- */
.map-results__item--product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-results__body { flex: 1; min-width: 0; }

.map-results__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-card-hover);
  flex: 0 0 auto;
}

.map-results__badge {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--pin-open);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.map-results__badge small {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.9;
}

.map-results__badge--out {
  background: var(--pin-unavailable-soft);
  color: var(--pin-unavailable-ink);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Sold-out product row: strike the name to match the carrot "Out of stock"
   badge (mirrors the design system's struck-through sold-out treatment). */
.map-results__item--out .map-results__title span {
  text-decoration: line-through;
  text-decoration-color: var(--border-strong, rgba(0, 0, 0, 0.25));
  color: var(--text-muted);
}

/* ---------- Panel action row: Save / Share / Directions (W0.3-W1.2) ---------- */
.map-panel-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 4px;
}

.map-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-action-btn:hover { background: var(--bg-card-hover); }

.map-action-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Filled heart = favorited (mirrors iOS heart.fill vs heart). The CSS fill
   overrides the SVG's fill="none" presentation attribute. */
.map-action-btn.is-active {
  color: var(--status-danger);
  border-color: var(--status-danger);
}

.map-action-btn.is-active svg { fill: currentColor; }

/* Callout: compact icon actions row (heart / share / directions) below the
   stacked primary buttons — same button vocabulary, icon-only. */
.map-callout__icon-row { display: flex; gap: 8px; }

.map-callout__btn--icon {
  flex: 1 1 0;
  padding: 8px 0;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  text-decoration: none;
}

.map-callout__btn--icon:hover { background: var(--bg-card); }

.map-callout__btn--icon svg { width: 17px; height: 17px; }

.map-callout__btn--icon.is-active { color: var(--status-danger); }

.map-callout__btn--icon.is-active svg { fill: currentColor; }

/* ---------- Report entry link (low-key, mirrors iOS bottom placement) ---------- */
.map-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.map-report-link:hover { color: var(--status-danger); }

.map-report-link svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------- Report dialog (native <dialog>, like the terms gate) ---------- */
.map-report {
  position: fixed;
  inset: 0;
  margin: auto; /* the global reset zeroes margins (see .map-terms) */
  width: min(430px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 22px;
  color: inherit;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.map-report::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.map-report__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.map-report__target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  margin-bottom: 12px;
}

.map-report__kicker,
.map-report__at {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.map-report__section {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 12px 0 6px;
}

.map-report__choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-report__choice {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-report__choice:hover { background: var(--bg-card-hover); }

.map-report__choice.is-selected {
  border-color: var(--brand);
  background: var(--bg-card-hover);
  font-weight: 600;
}

.map-report__hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

.map-report__details {
  display: block;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.map-report__details textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

.map-report__error {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--status-danger);
}

.map-report__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.map-report__cancel {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.map-report__cancel:hover { background: var(--bg-card-hover); }

.map-report__submit { flex: 1; }

.map-report__footnote {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* ---------- My Favorites screen (tabs + rows + empty state, W1.1) ---------- */
.map-fav-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 14px;
  padding: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.map-fav-tab {
  flex: 1;
  padding: 7px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.map-fav-tab:hover { color: var(--text-primary); }

.map-fav-tab.is-active {
  background: var(--surface-raised);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.map-fav-row__body { flex: 1; min-width: 0; }

/* Remove chip — the edit-chip pattern in the danger accent */
.map-remove-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--status-danger);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.map-remove-chip:hover { background: var(--bg-card-hover); }

.map-fav-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 22px 8px;
  font-size: 0.88rem;
}

.map-fav-empty strong { color: var(--text-primary); }

/* ========================================
   Cart + ordering (W1.3) and buyer orders (W1.4)
   ======================================== */

/* Floating cart FAB — right stack, above the radar button. The [hidden]
   pair is required: display:grid otherwise beats the UA hidden rule. */
.map-cart-fab[hidden] { display: none; }

.map-cart-fab {
  position: absolute;
  right: 16px;
  bottom: 144px; /* stacked above the radar (bottom 86 + 46 + gap) */
  z-index: 25;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.map-cart-fab:hover { background: var(--brand-hover); }

.map-cart-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-brand);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Item-panel order box (mirrors iOS InventoryItemInfoView's ordering card) */
.map-order-box {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-order-box__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.map-order-box__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-order-variants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-order-variant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-order-variant:hover { background: var(--bg-card-hover); }

.map-order-variant.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.map-order-variant__dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent;
}

.map-order-variant.is-selected .map-order-variant__dot {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 2.5px var(--bg-card);
}

.map-order-variant__name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.map-order-variant__price {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Quantity stepper (item panel + cart lines) */
.map-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  background: var(--bg-card);
  padding: 2px;
}

.map-qty__btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.map-qty__btn:hover { background: var(--bg-card-hover); }

.map-qty__value {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.map-order-box__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-order-box__add:hover { background: var(--brand-soft); }

.map-order-box__add svg { width: 18px; height: 18px; }

.map-order-box__note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

/* Seller-paused soft banner (item panel + cart; iOS accent-tinted note) */
.map-order-paused {
  margin: 8px 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  font-size: 0.8rem;
}

/* Cart screen */
.map-cart-lines {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.map-cart-line__body { flex: 1; min-width: 0; }

.map-cart-line__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.map-cart-line__remove:hover {
  background: var(--bg-card-hover);
  color: var(--status-danger);
}

.map-cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-top: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.map-cart-subtotal strong {
  color: var(--text-primary);
  font-size: 1.05rem;
}

.map-cart-checkout { width: 100%; }

.map-cart-clear {
  display: block;
  width: 100%;
  margin: 8px 0 10px;
  padding: 9px 14px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--status-danger);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.map-cart-clear:hover { background: var(--bg-card-hover); }

.map-cart-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 22px 8px;
  font-size: 0.88rem;
}

.map-cart-empty strong { color: var(--text-primary); }

/* Order status panel (mirrors iOS OrderStatusView) */
.map-order-status {
  text-align: center;
  padding: 8px 4px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.map-order-status__icon svg {
  width: 56px;
  height: 56px;
}

.map-order-status--completed .map-order-status__icon { color: var(--status-success); }
.map-order-status--refunded .map-order-status__icon { color: var(--accent); }
.map-order-status--expired .map-order-status__icon { color: var(--text-muted); }
.map-order-status--pending .map-order-status__icon { color: var(--brand); }

.map-order-status__subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  max-width: 34ch;
}

.map-order-status__place {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.map-order-lines {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.map-order-lines__count {
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.map-order-status__amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary);
}

.map-order-status__refunded {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-on-soft);
}

/* Pickup lifecycle stepper: Received › Preparing › Ready › Picked up
   (Android FulfillmentRow visuals; active steps tinted, current bold) */
.map-order-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.map-order-stepper__step.is-active { color: var(--brand); font-weight: 600; }
.map-order-stepper__step.is-current { font-weight: 800; }
.map-order-stepper__sep { color: var(--text-muted); }

.map-order-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border-glass);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: map-order-spin 0.8s linear infinite;
}

@keyframes map-order-spin { to { transform: rotate(360deg); } }

/* My Orders rows */
.map-order-row { align-items: flex-start; }

.map-order-row__body { flex: 1; min-width: 0; }

.map-order-row__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.map-order-row__amount {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.map-order-row__fulfillment {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
}

.map-order-row__fulfillment.is-ready { color: var(--status-success); }

.map-order-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.map-order-badge--pending { background: var(--brand-soft); color: var(--brand-on-soft); }
.map-order-badge--completed { background: var(--brand-soft); color: var(--brand-on-soft); }
.map-order-badge--refunded { background: var(--accent-soft); color: var(--accent-on-soft); }
.map-order-badge--incomplete { background: var(--surface-sunken); color: var(--text-muted); }

/* ========================================
   My Business tabs + producer orders (W2.4)
   ======================================== */

/* Segmented tab bar (iOS MyBusinessView's Picker) */
.map-biz-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.map-biz-tabs__tab {
  flex: 1;
  padding: 7px 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.map-biz-tabs__tab:hover { color: var(--text-primary); }

.map-biz-tabs__tab.is-active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Picked-up stage chip on producer order rows (ready reuses .is-ready) */
.map-order-row__fulfillment.is-done { color: var(--text-muted); }

/* Accepting-orders pause switch on Places rows */
.map-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 2px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.map-switch[disabled] { opacity: 0.55; cursor: default; }

.map-switch.is-on { color: var(--status-success); }

.map-switch__track {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-glass);
  transition: var(--transition-fast);
  flex: none;
}

.map-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.map-switch.is-on .map-switch__track {
  background: var(--status-success);
  border-color: var(--status-success);
}

.map-switch.is-on .map-switch__track::after { transform: translateX(12px); }

/* Producer order detail: label/value rows */
.map-biz-detail { display: grid; gap: 6px; }

.map-biz-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
}

.map-biz-detail__label { color: var(--text-muted); flex: none; }

.map-biz-detail__value {
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Refund controls */
.map-biz-danger-btn {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--status-danger);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--status-danger);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-biz-danger-btn:hover:not([disabled]) { background: var(--bg-card-hover); }

.map-biz-danger-btn[disabled] { opacity: 0.55; cursor: default; }

.map-biz-refund { display: grid; gap: 8px; }

.map-biz-refund__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.map-biz-refund__row input {
  width: 110px;
  padding: 8px 10px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  text-align: right;
}

.map-biz-refund__error {
  margin: 0;
  font-size: 0.8rem;
  color: var(--status-danger);
}

.map-biz-refund__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-biz-refund__actions .map-biz-danger-btn { flex: 1; width: auto; }

/* ---------- Product editor (W2.2, mirrors iOS ProductEditView) ---------- */

/* "Synced from Square" banner (iOS orange info section → accent tokens) */
.map-sync-banner {
  margin: 10px 0 2px;
  padding: 11px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.map-sync-banner strong {
  display: block;
  font-size: 0.86rem;
  margin-bottom: 2px;
}

/* Inline caption under a field the Square sync will overwrite */
.map-sync-hint {
  margin: -6px 0 0;
  font-size: 0.75rem;
  color: var(--accent-on-soft);
}

/* Removable chip (keyword/ingredient editors) */
.map-chip--removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-chip__x {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
}

.map-chip__x:hover { opacity: 1; }

/* Tappable suggestion chip (mirrors iOS's green "+ keyword" chips) */
.map-chip--suggest {
  background: var(--brand-soft);
  color: var(--brand-on-soft);
  border-color: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.map-chip--suggest:hover { filter: brightness(0.97); }

/* Allergen quick-add toggles (active = allergen accent, like iOS's orange) */
.map-chip--toggle {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.map-chip--toggle.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-on-soft);
  font-weight: 600;
}

/* Product image preview (X remove reuses .map-photo-remove positioning) */
.map-pe-image {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 8px;
}

.map-pe-image img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}

.map-pe-image .map-photo-remove {
  width: 24px;
  height: 24px;
  top: 6px;
  right: 6px;
}

/* Ingredient add row (input + Add button) */
.map-pe-ing-add {
  display: flex;
  gap: 8px;
}

.map-pe-ing-add input { flex: 1; }

/* ---------- Place editor: hours, keywords chips, photos, pin-drop (W2.3)
   + inventory editor (W2.1) ---------- */

/* The photo-add tile hides at the 5-photo cap; it sets display, so it needs
   the [hidden] pairing (see the dark-mode/display gotcha in CLAUDE.md).
   Same for the editor's hidden form labels (quantity/custom-unit rows). */
.map-photo-add[hidden] { display: none; }
.map-profile-edit label[hidden] { display: none; }

.map-loc-actions {
  display: flex;
  gap: 8px;
  margin-top: -4px;
}

/* Hours editor: one row per day */
.map-hours {
  display: grid;
  gap: 6px;
}

.map-hours[hidden] { display: none; }

.map-hours-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-hours-row__day {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.map-hours-row__day input {
  width: 16px;
  height: 16px;
  accent-color: var(--green-500);
  flex: 0 0 auto;
}

.map-hours-row input[type="time"] {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
}

.map-hours-row input[type="time"]:disabled { opacity: 0.45; }

.map-hours-row__dash { color: var(--text-muted); }

/* Keywords chips (removable) + tappable category suggestions */
.map-kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
}

.map-kw-chip button {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
}

.map-kw-chip button:hover { color: var(--status-danger); }

.map-kw-chip--suggest {
  background: var(--bg-card);
  color: var(--green-600);
  border: 1px dashed var(--green-400);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}

.map-kw-chip--suggest:hover { background: var(--bg-card-hover); }

.map-kw-add {
  display: flex;
  gap: 8px;
}

.map-kw-add input { flex: 1; }

/* Photo thumb extras: framing (crop) button + reorder arrows share the
   photo-remove scrim treatment so the tile reads as one control set. */
.map-photo-crop {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.map-photo-order {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
}

.map-photo-order button {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.map-photo-order button:disabled { opacity: 0.35; cursor: default; }

/* Focal-point picker overlay (drag the dot → imageFocalPoints {x,y}) */
.map-focal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
}

.map-focal[hidden] { display: none; }

.map-focal__card {
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.map-focal__hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.map-focal__hint--sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: -6px;
}

.map-focal__stage {
  position: relative;
  justify-self: center;
  touch-action: none; /* the drag gesture owns the pointer */
  cursor: crosshair;
  line-height: 0;
}

.map-focal__img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 10px;
}

.map-focal__dot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green-500);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-focal__preview {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
}

.map-focal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Pin-drop confirm bar — floats over the map while the editor is minimized */
.map-pickbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 950; /* above map controls, below modals */
  width: min(400px, calc(100vw - 32px));
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}

.map-pickbar[hidden] { display: none; }

.map-pickbar__hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.map-pickbar__address {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-height: 1.1em;
}

.map-pickbar__actions {
  display: flex;
  gap: 8px;
}

.map-pickbar__actions .map-auth__submit { flex: 1; width: auto; margin: 0; }

/* Inventory section rows (inside the place editor) */
.map-inv-list { margin-bottom: 10px; }

.map-inv-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--status-danger);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: auto;
}

.map-inv-remove:hover { background: var(--bg-card-hover); }

.map-inv-square-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Add/edit item dialog */
.map-inv-sheet {
  position: fixed;
  inset: 0;
  margin: auto; /* the global reset zeroes margins (see .map-terms) */
  width: min(430px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 22px;
  color: inherit;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.map-inv-sheet::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.map-inv-sheet__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.map-inv-form [data-single-fields] {
  display: grid;
  gap: 12px;
}

.map-inv-form [data-single-fields][hidden] { display: none; }

.map-inv-product-line {
  display: grid;
  gap: 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.map-inv-product-line span {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.map-inv-variant {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  background: var(--surface-sunken);
}

.map-inv-variant__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-inv-variant__head input { flex: 1; }

.map-inv-cancel {
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.map-inv-cancel:hover { background: var(--bg-card-hover); }

.map-pickbar .map-inv-cancel,
.map-focal .map-inv-cancel { width: auto; }

/* ========================================
   Square connect (W2.5) — Edit Profile Business tab block + the place
   editor's "Square integration" section. Token-only; field/button styling
   rides the existing .map-profile-edit / .map-edit-chip / .map-danger-btn.
   ======================================== */

.map-square { display: grid; gap: 10px; }

.map-square__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}

.map-square__name { font-weight: 600; }

.map-square__state {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.map-square__state.is-connected {
  color: var(--green-600);
  font-weight: 600;
}

/* Inline result/error line under the sync + location controls. */
.map-sq-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.map-sq-status--ok { color: var(--green-600); }
.map-sq-status--error { color: var(--status-danger); }

/* ========================================
   Producer Dashboard (W3.1) — claim-gated premium screen + paywall.
   Token-only; the funnel/metric "charts" are plain DOM. Bars follow the
   DS chart specs: ≤24px thick, 4px rounded data-end (square baseline),
   values/labels in text tokens (never the mark color).
   ======================================== */

.map-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-dash__head .map-panel__title { margin: 0; }

.map-dash-period {
  display: inline-flex;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-sunken);
  flex: none;
}

.map-dash-period__btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.map-dash-period__btn.is-active {
  background: var(--brand);
  color: var(--text-on-brand);
}

.map-dash__body { position: relative; }

.map-dash-updating {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.map-dash-updating__spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  animation: map-dash-spin 0.8s linear infinite;
}

@keyframes map-dash-spin { to { transform: rotate(360deg); } }

.map-dash-card {
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px;
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}

.map-dash-card--accent { border-color: var(--carrot-300); }

.map-dash-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.map-dash-card--accent .map-dash-card__title { color: var(--carrot-600); }

.map-dash-card__sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.map-dash-card__sub--head {
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}

.map-dash-empty { display: grid; gap: 4px; padding: 6px 0; }
.map-dash-empty strong { font-size: 0.88rem; color: var(--text-primary); }
.map-dash-empty p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

.map-dash-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--carrot-300);
  background: var(--carrot-50);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.map-dash-error p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

.map-dash-freshness {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

.map-dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.map-dash-metrics:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, 1fr);
}

.map-dash-metric {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.map-dash-metric strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.map-dash-metric span {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.map-dash-metric--accent strong { color: var(--carrot-600); }

.map-dash-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.map-dash-delta__arrow { display: inline-flex; width: 10px; height: 10px; }
.map-dash-delta__arrow svg { width: 100%; height: 100%; }
.map-dash-delta--up .map-dash-delta__arrow { color: var(--status-success); }
.map-dash-delta--down .map-dash-delta__arrow { color: var(--status-danger); }
.map-dash-delta--new { color: var(--brand); }

.map-dash-revenue {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 4px 0 8px;
}

.map-dash-revenue__amount {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}

.map-dash-revenue__label { font-size: 0.72rem; color: var(--text-secondary); }
.map-dash-revenue__net { font-size: 0.72rem; color: var(--status-danger); }

/* Funnel — single-hue ramp (one measure across ordered stages), label
   above each bar so long labels never clip inside short bars. */
.map-funnel { display: grid; gap: 4px; }

.map-funnel__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 4px;
}

.map-funnel__rate {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-left: 8px;
  margin-top: 2px;
}

.map-funnel__bar {
  height: 20px;
  border-radius: 0 4px 4px 0;
  min-width: 6px;
}

.map-funnel__bar--1 { background: var(--green-500); }
.map-funnel__bar--2 { background: var(--green-400); }
.map-funnel__bar--3 { background: var(--green-300); }
.map-funnel__bar--4 { background: var(--green-200); }

.map-dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.map-dash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-dash-list__name {
  font-size: 0.85rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-dash-list__stats {
  display: inline-flex;
  gap: 10px;
  flex: none;
}

.map-dash-list__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.map-dash-list__stat svg { width: 13px; height: 13px; }

.map-dash-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.map-dash-legend__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  flex: none;
}

.map-dash-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.map-dash-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.map-dash-term__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-dash-term__n {
  flex: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.map-dash-term--missed,
.map-dash-term--missed .map-dash-term__n { color: var(--carrot-600); }

.map-dash-nolocation {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 26px 10px;
}

.map-dash-nolocation__icon {
  width: 44px;
  height: 44px;
  color: var(--text-muted);
}

.map-dash-nolocation__icon svg { width: 100%; height: 100%; }
.map-dash-nolocation strong { font-size: 0.95rem; color: var(--text-primary); }

.map-dash-nolocation p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  max-width: 300px;
}

.map-dash-nolocation .map-auth__submit { width: auto; padding: 10px 22px; }

/* ---- Paywall (non-premium) ---- */

.map-paywall {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.map-paywall > .map-dash-card,
.map-paywall__plans { width: 100%; text-align: left; }

.map-paywall__hero {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-100);
  color: var(--green-700);
  margin-top: 6px;
}

.map-paywall__hero svg { width: 30px; height: 30px; }
.map-paywall__title { margin: 0; }
.map-paywall__sub { margin: 0; font-size: 0.88rem; color: var(--text-secondary); }

.map-paywall__trial {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-100);
  border-radius: 999px;
  padding: 5px 12px;
}

.map-paywall__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.map-paywall__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.map-paywall__features li { display: grid; gap: 2px; }
.map-paywall__features strong { font-size: 0.86rem; color: var(--text-primary); }
.map-paywall__features span { font-size: 0.78rem; color: var(--text-secondary); }

.map-paywall__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.map-paywall__plan {
  position: relative;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px 12px 12px;
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.map-paywall__plan-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-on-brand);
  background: var(--carrot-500);
  border-radius: 999px;
  padding: 3px 8px;
}

.map-paywall__plan-name { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); }
.map-paywall__plan-price { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.map-paywall__plan-per { font-size: 0.72rem; color: var(--text-muted); }

.map-paywall__cta {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 320px;
}

.map-paywall__foot { text-align: center; }

.map-paywall__refresh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Screen-reader-only helper (first needed by the dashboard's delta
   badges; generic on purpose). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== Onboarding tour (W4.1) ==================== */
/* A full-viewport transparent <dialog> (top layer, page inert — the web
   analogue of Android's tap-swallowing overlay). The dim + spotlight
   cutouts are ONE evenodd SVG path; the scrim/ring colors are deliberate
   theme-invariant literals like the .map-welcome / .map-lightbox scrims. */

dialog.map-tour {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  font-family: var(--font-body);
}

dialog.map-tour::backdrop { background: transparent; }

.map-tour__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.map-tour__dim { fill: rgba(0, 0, 0, 0.72); } /* Android's 72% black scrim */

.map-tour__ring {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px; /* matches the cutout corner in tour.js */
  pointer-events: none;
  animation: map-tour-pulse 1.6s ease-out infinite;
}

@keyframes map-tour-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

.map-tour__card {
  position: absolute;
  width: min(340px, calc(100vw - 32px)); /* Android's 340dp card */
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 20px;
  outline: none;
}

.map-tour__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.map-tour__text {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 12px;
}

/* Role self-ID options (Android RoleSelectionCard) */
.map-tour__role {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-hover);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.map-tour__role:hover { border-color: var(--brand); }

.map-tour__role strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.map-tour__role span {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.map-tour__guides {
  display: block;
  text-align: center;
  border: 1px solid var(--brand);
  border-radius: var(--radius-pill);
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  margin: 0 0 12px;
}

.map-tour__guides:hover { background: var(--brand-soft); }

.map-tour__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-tour__dots { display: flex; gap: 6px; }

.map-tour__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-hairline);
}

.map-tour__dot.is-active { background: var(--brand); }

.map-tour__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.map-tour__link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
}

.map-tour__link:hover { color: var(--text-primary); }

.map-tour__next {
  background: var(--brand);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
}

.map-tour__next:hover { background: var(--brand-hover); }

/* ==================== A11y + mobile polish (W4.2) ==================== */

/* Visible keyboard focus across the map chrome (mouse focus untouched;
   inputs keep their existing :focus box-shadow treatments on top). */
.map-page :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The card glide between tour steps is decoration — motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .map-tour__card {
    transition: left 0.25s var(--ease-out), top 0.25s var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-tour__ring { animation: none; }
  .map-radar.is-scanning { animation: none; } /* status line still says "Scanning…" */
}

/* Keep the floating chrome above the phone home-indicator safe area
   (viewport-fit=cover is set on the page; env() is 0 on desktop). */
.map-goto { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.map-radar { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.map-add { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
.map-delete-fab { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.map-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* The cart FAB shipped at the SAME bottom:144 as the add-place FAB and the
   two overlapped whenever a buyer had a cart (the + shows for everyone once
   MapKit is up) — stack the cart above the + instead. */
.map-cart-fab { bottom: calc(202px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 640px) {
  .map-panel { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom-sheet affordance: a visual-only drag pill on the panel's top
     edge (the panel is not draggable — the × and Escape close it). */
  .map-panel::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-hairline);
    z-index: 3;
    pointer-events: none;
  }

  .map-panel__body {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}