/* Tour labels: shared by the editor and the published tour. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/jost/jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/jost/jost-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/jost/jost-latin-600-normal.woff2') format('woff2');
}

:root {
  --jl-orange: #f97b22;
  --jl-grey: #6e747c;
  --jl-dark: #1d2126;
  --jl-line: rgba(255, 255, 255, 0.95);
  --jl-font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Main places are JetaLink orange chips with a white icon (words on orange were hard
   to read); their name shows in the card. The house keeps its dark pill with an
   orange home icon. --c is the accent (dot ring, card icons); --pill-bg / --pill-fg
   colour the label itself. */
.jl-main { --c: var(--jl-orange); --pill-bg: var(--jl-orange); --pill-fg: #fff; }
.jl-minor { --c: var(--jl-grey); --pill-bg: var(--jl-grey); --pill-fg: #fff; }
.jl-house { --c: var(--jl-dark); --pill-bg: var(--jl-dark); --pill-fg: #fff; }
.jl-text { --c: var(--jl-orange); --pill-bg: transparent; --pill-fg: #fff; }

/* ---- layer ---- */

.jl-overlay {
  position: absolute;
  inset: 0;
  /* Its own stack: labels order among themselves (nearer ones on top) but all stay
     under the buttons, the compass and the credit. */
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--jl-font);
  -webkit-tap-highlight-color: transparent;
}

/* Each label's origin is the dot, i.e. the exact spot in the 360. */
.jl-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
.jl-label.jl-off { display: none; }

.jl-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--c), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.jl-stem {
  position: absolute;
  left: -0.75px;
  bottom: 0;
  width: 1.5px;
  height: var(--stem);
  background: var(--jl-line);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.jl-pill {
  position: absolute;
  left: 0;
  bottom: var(--stem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font: 500 13px/1 var(--jl-font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.jl-pill .jl-ico { width: 14px; height: 14px; }
.jl-house .jl-pill { padding-left: 10px; }

/* Places are round icon chips. */
.jl-main .jl-pill,
.jl-minor .jl-pill {
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
}
.jl-main .jl-pill .jl-ico { width: 22px; height: 22px; }
/* Grey on its own disappears into roofs and roads, so minor chips get a white ring. */
.jl-minor .jl-pill { width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.28); }
.jl-minor .jl-pill .jl-ico { width: 18px; height: 18px; }
.jl-house .jl-pill .jl-ico { color: var(--jl-orange); }

.jl-label.jl-open .jl-pill { visibility: hidden; }

/* Text only: a bare name centred on its spot, for distant mountains and water.
   No line or dot; a soft shadow keeps it readable over sky, haze and sea. */
.jl-text .jl-stem,
.jl-text .jl-dot { display: none; }
.jl-text .jl-pill {
  top: 0;
  bottom: auto;
  transform: translate(-50%, -50%);
  height: auto;
  padding: 2px 5px;
  border-radius: 5px;
  box-shadow: none;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.45);
}
.jl-label.jl-text.jl-open .jl-pill { visibility: visible; }
.jl-label.jl-nocard .jl-pill { cursor: default; }
.jl-overlay[data-mode='edit'] .jl-text .jl-pill { cursor: move; }

/* ---- editing ---- */

.jl-overlay[data-mode='edit'] .jl-pill { cursor: ns-resize; }
.jl-overlay[data-mode='edit'] .jl-dot { pointer-events: auto; cursor: move; touch-action: none; }
.jl-overlay[data-mode='edit'] .jl-dot::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.jl-pill.jl-untitled { font-style: italic; }
.jl-label.jl-selected .jl-pill { outline: 2px solid #3fa9f5; outline-offset: 2px; }
.jl-label.jl-selected .jl-dot { box-shadow: 0 0 0 2px #3fa9f5, 0 1px 3px rgba(0, 0, 0, 0.45); }
.jl-label.jl-dragging .jl-dot { transform: scale(1.4); }

/* ---- card ---- */

.jl-card {
  position: absolute;
  left: 0;
  bottom: var(--stem);
  width: 260px;
  transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0px));
  transform-origin: 50% 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--jl-dark);
  font-family: var(--jl-font);
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  animation: jl-card-in 0.18s ease-out;
}
@keyframes jl-card-in {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0px)) scale(0.6);
  }
}

.jl-card-photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #e9ecef;
}
.jl-card-body { padding: 12px 14px 14px; }
.jl-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.jl-card-title .jl-ico { width: 16px; height: 16px; flex: none; color: var(--c); }
.jl-house .jl-card-title .jl-ico { color: var(--jl-orange); }
.jl-card-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}
.jl-card-dists {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}
.jl-dist {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.3;
}
.jl-times { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.jl-time { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; }
.jl-time .jl-ico { width: 16px; height: 16px; color: var(--c); }
.jl-dist-time { font-weight: 500; }
.jl-dist-km { margin-top: 4px; font-size: 13.5px; color: #6e747c; }
.jl-card-desc {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #41464d;
  white-space: pre-line;
}
.jl-card-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 11px -14px -14px;
  padding: 10px 14px;
  border-top: 1px solid #eceef1;
  color: var(--jl-dark);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.jl-card-link-text { flex: 1; }
.jl-card-link .jl-ico { width: 15px; height: 15px; color: var(--c); }
.jl-card-link:hover { background: #f6f7f9; }
.jl-card-link:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.jl-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.jl-card-close .jl-ico { width: 16px; height: 16px; }

/* A card shown outside the 360, e.g. the editor's preview. */
.jl-card.jl-card-static {
  position: relative;
  bottom: auto;
  transform: none;
  animation: none;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* ---- bottom bar: labels on/off switch and the places list button ---- */

.jl-bar {
  position: absolute;
  left: 50%;
  /* Lifted when a long credit wraps onto more lines (see --jl-credit-extra). */
  bottom: calc(18px + var(--jl-credit-extra, 0px));
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.jl-toggle,
.jl-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px 0 11px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--jl-dark);
  font: 500 14px/1 var(--jl-font);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jl-list-btn { padding: 0 14px 0 12px; }
.jl-list-btn .jl-ico { width: 18px; height: 18px; color: var(--jl-orange); }
.jl-toggle-box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--jl-orange);
  color: var(--jl-dark);
}
.jl-toggle-box .jl-ico { width: 13px; height: 13px; }
.jl-toggle[aria-pressed='false'] .jl-toggle-box { background: transparent; box-shadow: inset 0 0 0 2px #9aa0a6; }
.jl-toggle[aria-pressed='false'] .jl-toggle-box .jl-ico { visibility: hidden; }
.jl-bar [hidden] { display: none; }

/* Bus stops: just the icon, orange when they show, grey and crossed out when hidden. */
.jl-bus-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--jl-orange);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.jl-bus-toggle .jl-ico { width: 20px; height: 20px; }
.jl-bus-toggle[aria-pressed='false'] { color: #9aa0a6; }
.jl-bus-toggle[aria-pressed='false']::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.96);
  transform: rotate(-45deg);
}

/* ---- map data credit (OpenStreetMap's licence asks for it) ---- */

.jl-credit {
  position: absolute;
  left: 8px;
  right: 8px;
  text-align: right;
  bottom: 4px;
  z-index: 4;
  font: 400 10px/1.3 var(--jl-font);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.jl-credit[hidden] { display: none; }
.jl-credit [hidden] { display: none; }
.jl-credit-note:not([hidden]) + .jl-credit-sources:not([hidden])::before { content: ' · '; }
/* On a phone the credits fold into an (i) button after a few seconds. */
.jl-credit-info {
  display: none;
  align-items: center;
  justify-content: center;
  /* A small mark with a bigger area to tap. */
  width: 28px;
  height: 28px;
  margin: -8px -8px -8px -2px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  vertical-align: middle;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.jl-credit-info .jl-ico { width: 14px; height: 14px; }
.jl-credit.jl-compact .jl-credit-info { display: inline-flex; }
.jl-credit.jl-folded .jl-credit-sources { display: none; }

/* ---- Property lines and street names (drawn on the ground, under the labels) ---- */

.jl-ground {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--jl-font);
  -webkit-tap-highlight-color: transparent;
}
.jl-lot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jl-lot path {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* A dark edge keeps the orange line visible on pale roofs and bright lawns alike. */
.jl-lot-halo { stroke: rgba(0, 0, 0, 0.35); stroke-width: 6.5; }
.jl-lot-line { stroke: var(--jl-orange); stroke-width: 3.5; }
.jl-lot-corner,
.jl-lot-mid {
  fill: #fff;
  stroke: var(--jl-orange);
  pointer-events: all;
  touch-action: none;
}
.jl-lot-corner { stroke-width: 3; cursor: move; }
.jl-lot-mid { fill-opacity: 0.8; stroke-width: 2; cursor: copy; }

/* Street names follow their street, quieter than the labels. */
.jl-street {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.jl-street.jl-off { display: none; }
.jl-ground[data-editable] .jl-street {
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}
.jl-street.jl-dragging { outline: 1px dashed rgba(255, 255, 255, 0.8); outline-offset: 3px; }

/* ---- Nearby places list ---- */

.jl-places {
  position: absolute;
  left: 50%;
  bottom: calc(68px + var(--jl-credit-extra, 0px));
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100% - 24px));
  max-height: min(62%, 440px);
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--jl-dark);
  font-family: var(--jl-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.jl-places[hidden] { display: none; }
.jl-places-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 8px 16px;
  font-size: 16px;
  font-weight: 600;
}
.jl-places-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6e747c;
  cursor: pointer;
}
.jl-places-close .jl-ico { width: 18px; height: 18px; }
.jl-places-list { overflow-y: auto; padding: 0 6px 8px; }
.jl-places-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.jl-places-row:hover { background: #f4f5f7; }
.jl-places-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 11px;
  font-weight: 600;
}
.jl-places-badge .jl-ico { width: 16px; height: 16px; }
.jl-text .jl-places-badge { background: #eceef1; color: var(--jl-dark); }
.jl-places-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; }
.jl-places-away { flex: none; font-size: 13px; color: #6e747c; }
.jl-places-empty { margin: 4px 10px 10px; color: #6e747c; font-size: 14px; }

/* ---- compass strip ---- */

.jl-compass {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 34px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
.jl-compass > div { position: absolute; left: 0; will-change: transform; }
.jl-compass-dot {
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.jl-compass-letter {
  top: 7px;
  font: 600 12px/1 var(--jl-font);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.jl-compass-north {
  top: 5px;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--jl-orange);
  color: #fff;
  text-shadow: none;
}

/* ---- "Drag to look around" hint ---- */

.jl-intro-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20, 23, 27, 0.72);
  color: #fff;
  font: 500 15px/1 var(--jl-font);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.35s, transform 0.35s;
}
.jl-intro-hint.jl-show { opacity: 1; transform: translate(-50%, -50%); }
.jl-intro-hint .jl-ico { width: 20px; height: 20px; }

/* ---- icons (Lucide, ISC licence), drawn in the current text colour ---- */

.jl-ico {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.jl-ico-house { --i: url('/vendor/lucide/house.svg'); }
.jl-ico-footprints { --i: url('/vendor/lucide/footprints.svg'); }
.jl-ico-bike { --i: url('/vendor/lucide/bike.svg'); }
.jl-ico-car { --i: url('/vendor/lucide/car.svg'); }
.jl-ico-x { --i: url('/vendor/lucide/x.svg'); }
.jl-ico-info { --i: url('/vendor/lucide/info.svg'); }
.jl-ico-check { --i: url('/vendor/lucide/check.svg'); }
.jl-ico-map-pin { --i: url('/vendor/lucide/map-pin.svg'); }
.jl-ico-arrow-up-right { --i: url('/vendor/lucide/arrow-up-right.svg'); }
.jl-ico-list { --i: url('/vendor/lucide/list.svg'); }
.jl-ico-bus { --i: url('/vendor/lucide/bus.svg'); }
.jl-ico-hand { --i: url('/vendor/lucide/hand.svg'); }
.jl-ico-undo-2 { --i: url('/vendor/lucide/undo-2.svg'); }
.jl-ico-redo-2 { --i: url('/vendor/lucide/redo-2.svg'); }
.jl-ico-settings { --i: url('/vendor/lucide/settings.svg'); }
.jl-ico-search { --i: url('/vendor/lucide/search.svg'); }
.jl-ico-refresh-cw { --i: url('/vendor/lucide/refresh-cw.svg'); }