/* Google Maps pane (js/maps.js). Only map- classes live here; colours and components come from base.css. */

/* ---------- header (pane__tools) ---------- */
.map-tools {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vmin, 12px);                            /* >= 8px between touch targets */
  margin-right: 3px;                                         /* keeps the last button >= 8px from the shell's maximise button */
}
.map-field__icon { flex: none; display: grid; place-items: center; }
/* Safari keeps a bezel on type=search unless the native look is switched off. */
.map-input { -webkit-appearance: none; appearance: none; }
/* base.css sizes the in-field button at field height - 8px (41px here); a touch target needs 44px. */
.map-field { height: max(var(--field-h), 48px); }
.map-field .map-clear { width: 44px; height: 44px; }
.map-title { flex: 1 1 auto; min-width: 0; padding-left: 4px; color: var(--text); font-weight: 600; }
.map-tools[data-size="xs"] .map-field__icon { display: none; }
.map-tools[data-size="xs"] .map-field { padding-left: 12px; }
/* A pane squeezed below ~260px keeps a usable search field: the clear button is dropped (the locate button already moved
   into the quick bar, or is a maximise away when the pane is short too). */
.map-tools[data-narrow="true"] .map-locate,
.map-tools[data-narrow="true"] .map-clear { display: none; }
/* A tight pane (<400px): the clear button shows only while typing, and the other header buttons step aside meanwhile so
   the field gets the whole row. Sibling selectors (not :focus-within on the toolbar) so tapping a button never hides it. */
.map-tools[data-tight="true"] .map-field:not(:focus-within) .map-clear { display: none; }
.map-tools[data-tight="true"] .map-field:focus-within ~ .map-locate,
.map-tools[data-tight="true"] .map-field:focus-within ~ .map-srcbtn { display: none; }

.map-locate.is-busy, .map-chip--locate.is-busy { background: var(--accent-soft); color: var(--accent); }
.map-locate.is-busy .icon, .map-chip--locate.is-busy .icon { animation: map-pulse 1s ease-in-out infinite; }
/* Stop casting asks for a second tap: the armed state is loud on purpose. */
.map-stop.is-armed { background: var(--danger); color: var(--surface); }   /* surface = dark icon on the light dark-theme red, white on the deep light-theme red: both >= 4.5:1 */
@keyframes map-pulse { 50% { transform: scale(.72); opacity: .5; } }

/* ---------- body: quick bar, directions row, stage ---------- */
.map-root {
  --map-ctl: max(44px, calc(var(--tap) - 4px));             /* one touch-target height for the whole quick bar */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.map-quick {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vmin, 10px);
  padding: 4px clamp(8px, 1.4vmin, 14px);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.map-seg { padding: 2px; }
.map-seg-opt, .map-chip { min-height: var(--map-ctl); }
/* The extra padding keeps focus rings from being clipped by the scroller; the negative margin gives it back. */
.map-chips { flex: 1 1 auto; min-width: 0; padding: 6px 4px; margin: -6px -4px; scroll-padding: 0 4px; }   /* snap to the padded edge, not past it */
.map-sep { flex: none; width: 1px; height: 24px; margin: 0 2px; background: var(--border); }

/* Soft edges tell the driver there are more chips off screen. */
.map-chips[data-fade="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.map-chips[data-fade="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}
.map-chips[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Narrow pane: icons only; on a small one the source switch keeps just the label of the active side.
   The locate chip is always icon only (its name is the hidden label, title and the header button's twin). */
.map-root[data-size="xs"] .map-label,
.map-root[data-size="s"] .map-seg-opt[aria-pressed="false"] .map-label,
.map-root[data-size="m"] .map-seg-opt[aria-pressed="false"] .map-label,
.map-chip--locate .map-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.map-root[data-size="xs"] .map-chip,
.map-chip--locate,
.map-root[data-size="xs"] .map-seg-opt,
.map-root[data-size="s"] .map-seg-opt[aria-pressed="false"],
.map-root[data-size="m"] .map-seg-opt[aria-pressed="false"] { width: var(--map-ctl); padding: 0; justify-content: center; }

.map-route {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vmin, 12px);
  padding: 4px clamp(8px, 1.4vmin, 14px);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.map-from .icon { color: var(--accent); }

.map-notices:empty { display: none; }
.map-notice { margin: 8px clamp(8px, 1.4vmin, 14px) 0; padding: 4px 4px 4px 14px; align-items: center; }
.map-notice__text { flex: 1 1 auto; min-width: 0; }
/* base.css gives every .notice .icon the accent colour and a 22px box; the close button wants neither. */
.map-notice .map-notice__close .icon { margin: 0; color: currentColor; }

.map-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}
.map-frame, .map-cast, .map-state, .map-host {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.map-frame { z-index: 1; background: var(--surface); }

/* Night map: the embed has no dark style, so invert it. Satellite is never inverted (the class is not set). */
.map-root.is-night .map-frame { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.9); }

/* Loading / slow / failed / offline cover. Empty and see-through when everything is fine. */
.map-state {
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text-2);
  background: var(--surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.map-state.is-on { opacity: 1; pointer-events: auto; }
.map-state > .icon { --icon: 48px; color: var(--muted); }
.map-state__title { color: var(--text); font-size: 1.1em; font-weight: 600; }
.map-state__hint { max-width: 34ch; color: var(--muted); }

/* ---------- phone cast ---------- */
.map-cast { z-index: 3; background: var(--surface); }
/* Hidden, not removed: the receiver keeps its connection while the map is shown. */
.map-root[data-source="map"] .map-cast { visibility: hidden; pointer-events: none; }
.map-root[data-source="phone"] .map-frame,
.map-root[data-source="phone"] .map-stage > .map-state { visibility: hidden; pointer-events: none; }

.map-host { overflow: hidden; background: var(--surface); }
.map-receiver { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

.map-intro {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 2.4vmin, 24px) clamp(14px, 2.4vmin, 24px) 0;
}
/* Auto margins centre short content and let tall content scroll from the top. */
.map-intro__col {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.map-intro__actions {
  position: sticky;
  bottom: 0;
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0 clamp(14px, 2.4vmin, 24px);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.map-intro__actions .btn--primary { flex: 1 1 220px; }

.map-flow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.map-flow__node {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px var(--accent-glow);
}
.map-flow__node .icon { --icon: 28px; }
.map-flow__link { flex: 0 1 72px; height: 0; border-top: 3px dotted var(--muted); }

.map-intro__title { color: var(--text); font-size: 1.3em; text-align: center; }
.map-intro__lead { color: var(--text-2); text-align: center; }
.map-platform { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.map-platform__label { color: var(--text-2); font-weight: 600; }
.map-platform .seg { padding: 2px; }
.map-platform .seg__opt { min-height: var(--tap); }

.map-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.map-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; }
.map-steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.map-steps__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 3px; color: var(--text); }
.map-note { color: var(--muted); }