/* Shuttle-map on the web: the public guest map.
 *
 * Loaded only by the web export (scripts/build-shuttle-web.js puts it right
 * after styles.css and marks <html data-profile="web">); the kiosk never
 * sees it. styles.css is drawn for ~1080p CSS px — what the kiosk shows at
 * its 1.5x zoom, and what a laptop or tablet browser has — so wide screens
 * keep the kiosk's layout. What changes here: the bits only the web shows
 * (Use my location, where to stand, the number to call), a real keyboard
 * and caret, text a guest may copy, and on a phone a stacked page that
 * scrolls — search and chips, then the map, then the list — as the old
 * guest map had it.
 */

html[data-profile="web"] body {
  height: 100dvh;
  user-select: text;
  -webkit-user-select: text;
}
html[data-profile="web"] .search-box input { caret-color: auto; }
html[data-profile="web"] .search-box input:focus-visible { outline: none; }
/* No Home button on the web: the title sits where it would have. */
html[data-profile="web"] .mgw-topbar { gap: 20px; }
/* "★ Near us" stays on one line in a narrow desktop panel. */
html[data-profile="web"] .chip { white-space: nowrap; }

/* ── Use my location ────────────────────────────────────────────────────── */
.locate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  align-self: flex-start;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(242, 178, 33, 0.55);
  border-radius: var(--mgw-radius-pill);
  background: rgba(242, 178, 33, 0.12);
  color: var(--mgw-yellow);
  font: inherit;
  font-family: var(--mgw-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
}
.locate-btn svg { width: 1.25em; height: 1.25em; flex: none; }
.locate-btn:active { background: rgba(242, 178, 33, 0.3); }
.locate-error { font-size: 1.05rem; }

/* ── Where to stand (a stop's pickup line from shuttle-admin) ───────────── */
.pickup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-left: 4px solid var(--mgw-yellow);
  border-radius: 0 10px 10px 0;
  background: rgba(242, 178, 33, 0.1);
}
.pickup-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mgw-yellow);
}
.pickup-text { font-size: 1.1rem; line-height: 1.45; color: var(--mgw-ink); }
.closest .pickup { margin-top: 6px; }

/* ── The number to call ─────────────────────────────────────────────────── */
.phone-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 14px 18px;
  border-radius: var(--mgw-radius-lg);
  background: var(--mgw-yellow);
  color: #2b0f3f;
  text-decoration: none;
  text-align: center;
}
.phone-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.phone-number { font-family: var(--mgw-font-display); font-weight: 900; font-size: 1.5rem; }

/* ── Phones (and short landscape screens): one scrolling column ─────────── */
/* The panel's own scroller gives way to the page's, the side panel's parts
   join the column (display: contents) so the map can sit between the
   search and the list, and the rider notes leave the map for the bottom of
   the page. app.js reads the same query (NARROW) to stop framing the map
   around a notes box that isn't over it. */
@media (max-width: 760px), (max-height: 540px) {
  html[data-profile="web"] body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  html[data-profile="web"] .mgw-topbar {
    position: sticky;
    padding: 12px 16px;
    background: rgba(27, 10, 46, 0.96);
  }
  html[data-profile="web"] .mgw-mode-title { font-size: 1.35rem; }
  html[data-profile="web"] .mgw-topbar-info .mgw-eyebrow { font-size: 0.7rem; }
  html[data-profile="web"] .live-chip { font-size: 0.8rem; padding: 0.45em 0.9em; }

  html[data-profile="web"] .mode-main {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html[data-profile="web"] .side-panel { display: contents; }
  html[data-profile="web"] .search-box { order: 1; }
  html[data-profile="web"] .search-box input { height: 52px; font-size: 1.05rem; }
  html[data-profile="web"] .search-clear { width: 42px; height: 42px; font-size: 1.3rem; }
  html[data-profile="web"] .chips { order: 2; gap: 6px; }
  html[data-profile="web"] .chip { min-height: 44px; font-size: 0.95rem; }
  html[data-profile="web"] .map-stage {
    order: 3;
    flex: none;
    height: 46svh;
    min-height: 260px;
  }
  html[data-profile="web"] .panel {
    order: 4;
    flex: none;
    overflow: visible;
    padding: 16px 14px;
  }
  html[data-profile="web"] .rider-notes {
    order: 5;
    position: static;
    width: auto;
    max-height: none;
    padding: 18px 20px;
  }
  html[data-profile="web"] .panel-title { font-size: 1.45rem; }
  html[data-profile="web"] .panel-lede,
  html[data-profile="web"] .empty { font-size: 1.05rem; }
  html[data-profile="web"] .stop-row-name,
  html[data-profile="web"] .result-name { font-size: 1.1rem; }
  html[data-profile="web"] .stop-row,
  html[data-profile="web"] .result-row { min-height: 60px; }
  html[data-profile="web"] .closest-name { font-size: 1.3rem; }
  html[data-profile="web"] .closest-walk,
  html[data-profile="web"] .card-blurb { font-size: 1.05rem; }
  html[data-profile="web"] .card-back { min-height: 48px; font-size: 1rem; }
  html[data-profile="web"] .notes { font-size: 1rem; }
  html[data-profile="web"] .map-overview-btn { top: 10px; right: 10px; min-height: 44px; font-size: 0.95rem; }
}

/* The venue's name hangs below its star, over the river: above it, at a
   laptop's or a phone's overview zoom, it lands on Lot G just north. */
html[data-profile="web"] .map-here-pill { bottom: auto; top: calc(100% + 5px); }