/* ============================================================================
   LocalLights — the tour: the builder, the tour screen and the recap card.
   Tokens only, every class tour- prefixed. The shared .seg / .bsheet / .btn
   classes come from css/style.css; the markup carries them and the rules
   below restyle only what the tour needs its own way (the sheet must leave
   the map visible, the Now card wants big type, the numbers must glow).
   ========================================================================= */

/* ------------------------------------------------------------- builder --- */

.tour-builder { padding: 10px 14px 28px; display: grid; gap: 12px; }
@media (min-width: 720px) { .tour-builder { max-width: 640px; margin: 0 auto; } }

/* picks: a horizontal row of named tours, present only when the bouncer has
   made some */
.tour-picks { display: grid; gap: 8px; }
.tour-picks-title {
  font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding-left: 2px;
}
.tour-picks-row {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.tour-pick {
  flex: 0 0 auto; min-height: 56px; scroll-snap-align: start;
  display: grid; gap: 2px; text-align: left; padding: 9px 14px;
  border-radius: 14px; background: var(--night-2); border: 1px solid var(--line);
  color: var(--text); cursor: pointer;
}
.tour-pick b { font-family: var(--display); font-weight: 600; font-size: 15px; }
.tour-pick span { font-size: 12px; color: var(--text-3); }
.tour-pick:active { background: var(--night-3); }

/* The segmented controls (modes on top, minutes below) are style.css's .seg
   as they come; the budget buttons carry aria-checked for the radio group
   and .is-on for the shared selected style. */

/* the builder's map */
.tour-maphost {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: var(--night-2);
}
/* z-index: 0 fences Leaflet's own panes (z 400) and controls (z 1000) inside
   the map, so the hint, the tools and the tour's overlays can sit above it
   with small numbers of their own. */
.tour-map { position: relative; z-index: 0; height: 46vh; min-height: 280px; background: var(--night-2); }
.tour-map.leaflet-container,
.tour-screen-map.leaflet-container { background: var(--night); font-family: var(--body); }
.tour-map .leaflet-control-attribution,
.tour-screen-map .leaflet-control-attribution {
  background: var(--night-2); color: var(--text-3); font-size: 10px; opacity: .85;
}
.tour-map .leaflet-control-attribution a,
.tour-screen-map .leaflet-control-attribution a { color: var(--text-2); }
.tour-map.is-drawing { touch-action: none; cursor: crosshair; }
.tour-maphint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: var(--night-2); border: 1px solid var(--line); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; pointer-events: none; white-space: nowrap;
}
.tour-maptools { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; }
.tour-tool {
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--night-2); border: 1px solid var(--line); color: var(--text);
  font: 600 14px var(--display); cursor: pointer;
}
.tour-tool:active { background: var(--night-3); }

/* shapes on the map. Leaflet writes stroke and fill as attributes, so a class
   wins without !important. */
.tour-circle  { stroke: var(--amber); stroke-width: 2; fill: var(--amber); fill-opacity: .12; }
.tour-polygon { stroke: var(--amber); stroke-width: 2.5; fill: var(--amber); fill-opacity: .14; stroke-linejoin: round; }
.tour-stroke  { stroke: var(--amber); stroke-dasharray: 6 6; fill: none; }
.tour-abline  { stroke: var(--text-3); fill: none; }
.tour-route   { stroke: var(--amber); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.tour-route-glow {
  stroke: var(--amber); stroke-linecap: round; stroke-linejoin: round; fill: none;
  filter: blur(5px);
}

/* markers */
.tour-num-icon, .tour-dot-icon { background: none; border: 0; }
.tour-num {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--amber); color: var(--night); font: 700 14px/1 var(--display);
  box-shadow: 0 0 0 3px var(--night), 0 0 16px var(--glow);
}
.tour-num.is-done { background: var(--night-3); color: var(--text-2); box-shadow: 0 0 0 3px var(--night); }
.tour-num.is-now { animation: tour-pulse 1.6s ease-in-out infinite; }
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--night), 0 0 14px var(--glow); }
  50%      { box-shadow: 0 0 0 3px var(--night), 0 0 30px var(--amber); }
}
.tour-center {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--text); box-shadow: 0 0 18px var(--glow);
  cursor: grab;
}
.tour-origin {
  display: block; width: 18px; height: 18px; margin: 4px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--night); box-shadow: 0 0 12px var(--glow);
}
.tour-ep {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--text); color: var(--night); font: 700 13px/1 var(--display);
  border: 2px solid var(--night); box-shadow: 0 0 12px var(--glow);
}
/* the plain dot used when the sleigh module is not around */
.tour-me {
  display: block; width: 22px; height: 22px; margin: 2px; border-radius: 50%;
  background: var(--bulb-blue); border: 3px solid var(--text); box-shadow: 0 0 14px var(--bulb-blue);
}

/* the peek popup */
.tour-popup .leaflet-popup-content-wrapper {
  background: var(--night-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.tour-popup .leaflet-popup-tip { background: var(--night-2); }
.tour-popup .leaflet-popup-content { margin: 8px 10px; font-size: 13px; line-height: 1.3; }
.tour-popup img { width: 160px; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.tour-popup b { display: block; font-family: var(--display); font-weight: 600; }
.tour-popup span { color: var(--text-3); font-size: 12px; }

/* controls under the map */
.tour-controls { display: grid; gap: 14px; }
.tour-pane { display: grid; gap: 10px; }
.tour-range { display: grid; gap: 6px; }
.tour-range-label { font-size: 14px; color: var(--text-2); }
.tour-range-label b { color: var(--text); font-family: var(--display); font-weight: 600; }
.tour-range input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--amber); background: transparent; }
.tour-help { margin: 0; font-size: 14px; color: var(--text-2); }
.tour-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-shortcuts button {
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--night-3); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.tour-shortcuts button:active { background: var(--line); }
.tour-shortcuts .tour-quietsc { background: transparent; color: var(--text-3); border-color: transparent; }
.tour-endpoint { display: flex; align-items: center; gap: 10px; }
.tour-ep-tag {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--text); color: var(--night); font: 700 14px var(--display);
}
.tour-ta { flex: 1 1 auto; min-width: 0; }
.tour-ta .input {
  width: 100%; min-height: 44px; background: var(--night-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 12px; padding: 0 12px; box-shadow: none;
}
.tour-ta .input:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--glow); }

/* "Back where I started" */
.tour-toggle { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--text); }
.tour-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tour-switch {
  flex: 0 0 auto; position: relative; width: 48px; height: 28px; border-radius: 999px;
  background: var(--night-3); border: 1px solid var(--line); transition: background .15s ease;
}
.tour-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-2); transition: transform .15s ease, background .15s ease;
}
.tour-toggle input:checked + .tour-switch { background: var(--amber); border-color: var(--amber); }
.tour-toggle input:checked + .tour-switch::after { transform: translateX(20px); background: var(--night); }
.tour-toggle input:focus-visible + .tour-switch { outline: 3px solid var(--amber); outline-offset: 2px; }

.tour-budget { display: grid; gap: 8px; }
.tour-budget-label { font-size: 14px; color: var(--text-2); }

.tour-build {
  min-height: 60px; border-radius: 16px; background: var(--amber); color: var(--night); border: 0;
  font: 700 22px var(--display); box-shadow: 0 0 28px var(--glow); cursor: pointer;
}
.tour-build:active { background: var(--amber-2); }
.tour-build:disabled { opacity: .6; box-shadow: none; }
.tour-empty {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--night-2); border: 1px solid var(--line); color: var(--text-2); font-size: 14px;
}

/* the result: a name, the stops, Save & share, Start */
.tour-result { display: grid; gap: 12px; }
.tour-name {
  width: 100%; min-height: 50px; background: var(--night-2); border: 1px solid var(--line);
  border-radius: 14px; color: var(--text); padding: 0 14px; font: 600 20px var(--display); box-shadow: none;
}
.tour-name:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--glow); }
.tour-name-ro { margin: 0; font: 700 24px/1.15 var(--display); color: var(--text); }
.tour-pickline { margin: -6px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.tour-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tour-stops li {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 10px;
  border-radius: 14px; background: var(--night-2); border: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.tour-stops li.is-dragging { background: var(--night-3); border-color: var(--amber); box-shadow: 0 0 18px var(--glow); }
.tour-stops .tour-num { flex: 0 0 auto; width: 30px; height: 30px; box-shadow: none; }
.tour-stop-text {
  flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; text-align: left;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.tour-stop-label { font: 600 16px/1.2 var(--display); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-stop-city { font-size: 12.5px; color: var(--text-3); }
.tour-stop-x {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 0; color: var(--text-3); font-size: 24px; line-height: 1; cursor: pointer;
}
.tour-stop-x:active { color: var(--danger); }
.tour-grab {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--text-3); font-size: 22px; cursor: grab; touch-action: none;
}
.tour-actions { display: flex; gap: 10px; }
.tour-actions .btn { flex: 1 1 0; min-height: 56px; border-radius: 16px; font: 700 18px var(--display); }
.tour-btn-save { background: var(--night-3); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.tour-btn-save:active { background: var(--line); }
.tour-btn-start { background: var(--amber); color: var(--night); border: 0; box-shadow: 0 0 24px var(--glow); }
.tour-btn-start:active { background: var(--amber-2); }
.tour-links { display: grid; gap: 6px; justify-items: start; }
.tour-link {
  background: none; border: 0; padding: 8px 0; color: var(--text-2); font: inherit; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tour-gm { font-size: 13px; color: var(--text-3); }
.tour-gm a { color: var(--text-2); }

/* --------------------------------------------------------- tour screen --- */
/* Above the dock and the app bar, below the report grid's sheet and the
   toasts. The map is the screen; everything else floats on it. */

body.tour-active { overflow: hidden; }
.tour-screen {
  position: fixed; inset: 0; z-index: 80;
  background: var(--night); color: var(--text); font-family: var(--body);
}
.tour-screen-map { position: absolute; inset: 0; z-index: 0; }
.tour-top {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.tour-top-btn {
  pointer-events: auto; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--night-2); border: 1px solid var(--line); color: var(--text); font-size: 18px;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.tour-top-name {
  pointer-events: auto; flex: 1 1 auto; min-width: 0; text-align: center; padding: 10px 12px;
  border-radius: 999px; background: var(--night-2); border: 1px solid var(--line);
  font: 600 15px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-recenter-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--text);
  box-shadow: 0 0 0 3px var(--night-2), 0 0 0 4px var(--text-3);
}

/* the bottom sheet: collapsed shows the Now card, open adds Up next; either
   way the map keeps the top of the screen */
.tour-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; max-height: 62vh;
  background: var(--night-2); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: max-height .25s ease;
}
.tour-sheet.is-open { max-height: 78vh; }
/* the handle is a button for the screen reader; style.css draws its bar */
.tour-sheet-handle { width: 100%; background: none; border: 0; padding: 0; color: inherit; }
.tour-sheet-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px; overscroll-behavior: contain;
}
.tour-upnext { display: none; padding-top: 14px; }
.tour-sheet.is-open .tour-upnext { display: block; }
/* the report button rides on the sheet, bottom right, under the thumb */
.tour-fabhost { position: absolute; right: 14px; top: -74px; z-index: 4; }
.tour-fabhost:empty { display: none; }

/* the Now card: one house, big */
.tour-now { display: grid; gap: 12px; }
.tour-now-head { display: flex; align-items: center; gap: 12px; }
.tour-now-head .tour-num { flex: 0 0 auto; width: 40px; height: 40px; font-size: 18px; }
.tour-now-text { min-width: 0; }
.tour-now-label { font: 700 26px/1.1 var(--display); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-now-city { margin-top: 3px; font-size: 15px; color: var(--text-2); }
.tour-now-media { border-radius: 14px; overflow: hidden; background: var(--night-3); aspect-ratio: 16 / 9; max-height: 30vh; }
.tour-now-media img { width: 100%; height: 100%; object-fit: cover; }
.tour-now-note { margin: 0; font-size: 15px; color: var(--amber); font-weight: 600; }
.tour-now-actions { position: relative; display: flex; gap: 10px; }
.tour-now-actions .btn { flex: 1 1 0; min-height: 64px; border-radius: 16px; font: 700 20px var(--display); padding: 0 8px; }
.tour-btn-maps { background: var(--night-3); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.tour-btn-maps:active { background: var(--line); }
.tour-btn-here { background: var(--amber); color: var(--night); border: 0; box-shadow: 0 0 26px var(--glow); }
.tour-btn-here:active { background: var(--amber-2); }
.tour-skip { justify-self: center; padding: 10px 16px; }

/* long-press on Open in Maps: pick the app once, it is remembered */
.tour-provmenu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5;
  display: grid; gap: 4px; padding: 6px;
  background: var(--night-3); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.tour-provmenu button {
  min-height: 48px; border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font: 600 17px var(--display); cursor: pointer;
}
.tour-provmenu button[aria-current="true"] { background: var(--amber); color: var(--night); }

/* after "We're here": what the house has */
.tour-gallery { min-height: 48px; }
.tour-gallery-wait, .tour-gallery-empty { margin: 0; font-size: 14px; color: var(--text-3); }
.tour-gallery-row {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.tour-gallery-item {
  flex: 0 0 82%; margin: 0; scroll-snap-align: center; position: relative;
  aspect-ratio: 4 / 3; max-height: 34vh; border-radius: 14px; overflow: hidden; background: var(--night-3);
}
.tour-gallery-item img, .tour-gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-clip { cursor: pointer; }
.tour-clip-sound {
  position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--night-2); display: grid; place-items: center; font-size: 16px;
}
.tour-clip.is-loud .tour-clip-sound { background: var(--amber); }

.tour-upnext-title { font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.tour-upnext-empty { margin: 0; color: var(--text-3); font-size: 14px; }
.tour-stops-next li { background: var(--night-3); }

/* --------------------------------------------------------------- recap --- */

.tour-recap {
  position: absolute; inset: 0; z-index: 5; background: var(--night); overflow-y: auto;
  display: grid; place-items: center;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.tour-recap-inner { display: grid; gap: 16px; justify-items: center; width: 100%; max-width: 420px; }
.tour-recap-wait { color: var(--text-2); font: 600 18px var(--display); }
.tour-recap-card {
  width: 100%; max-width: min(300px, 31.5vh);
  border-radius: 18px; overflow: hidden; box-shadow: 0 0 40px var(--glow);
}
.tour-recap-canvas { width: 100%; height: auto; display: block; }
.tour-recap-actions { display: grid; gap: 6px; width: 100%; justify-items: center; }
.tour-recap-actions .btn { width: 100%; min-height: 60px; border-radius: 16px; font: 700 20px var(--display); }