/* Footprints map and sidebar. */
#travel-app.ft-app {
  box-sizing: border-box;
  position: relative;
  left: 50%;
  width: min(1320px, calc(100vw - 36px));
  max-width: none;
  transform: translateX(-50%);
  margin: 0 auto 3rem;
  color: #dbe9fa;
  font-family: inherit;
  --ft-bg: #101d2b;
  --ft-panel: #111e2b;
  --ft-stroke: #2c455b;
  --ft-text: #e6f2ff;
  --ft-muted: #95aabf;
  --ft-cyan: #17cedf;
}
#travel-app *, #travel-app *::before, #travel-app *::after { box-sizing: border-box; }
#travel-app button, #travel-app input { font-family: inherit; }
#travel-app [hidden] { display: none !important; }
#travel-app .ft-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding: 6px 3px 25px; }
#travel-app .ft-intro { min-width: 0; }
#travel-app .ft-kicker { margin: 0 0 9px; color: #39c8d7; letter-spacing: .22em; font-size: .66rem; font-weight: 750; }
#travel-app .ft-header h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.18; letter-spacing: -.045em; color: var(--global-text-color, #e8f4fd); font-weight: 750; }
#travel-app .ft-accent { color: var(--ft-cyan); }
#travel-app .ft-description { margin: 12px 0 0; font-size: .85rem; color: var(--global-text-color-light, #99aac1); line-height: 1.7; }
#travel-app .ft-stats { flex-shrink: 0; display: flex; gap: 36px; text-align: center; }
#travel-app .ft-stats div { display: flex; flex-direction: column; gap: 6px; }
#travel-app .ft-stats strong { font-size: 2rem; font-weight: 750; line-height: 1; color: #26cfe1; font-variant-numeric: tabular-nums; }
#travel-app .ft-stats span { font-size: .65rem; letter-spacing: .02em; color: var(--global-text-color-light, #a0b1c8); }
#travel-app .ft-demo-notice { padding: 10px 14px; margin: 0 0 14px; background: #163b4740; border: 1px solid #277f927a; border-radius: 9px; color: var(--global-text-color, #c6d9ee); font-size: .79rem; line-height: 1.6; }
#travel-app .ft-demo-notice code { color: #61dbf3; overflow-wrap: anywhere; font-size: .78rem; }
#travel-app .ft-layout { display: grid; grid-template-columns: minmax(0, 1.66fr) minmax(285px, .94fr); gap: 14px; align-items: stretch; }
#travel-app .ft-map-frame { height: 640px; position: relative; isolation: isolate; overflow: hidden; min-width: 0; border: 1px solid var(--ft-stroke); background: #081923; border-radius: 15px; box-shadow: 0 9px 36px #00000012; }
#travel-app .ft-map-top { position: absolute; z-index: 800; top: 15px; left: 15px; right: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
#travel-app .ft-legend, #travel-app button.ft-map-action { pointer-events: auto; border: 1px solid #426278 !important; background: #0e293bdc !important; border-radius: 9px !important; color: #e8f8fb !important; font-size: .74rem !important; line-height: 1.15 !important; backdrop-filter: blur(9px); box-shadow: 0 3px 18px #00000016; }
#travel-app .ft-legend { display: flex; align-items: center; gap: 9px; padding: 11px 13px; white-space: nowrap; }
#travel-app .ft-legend-dot { display: block; width: 10px; height: 10px; border-radius: 100%; background: #26e0eb; box-shadow: 0 0 10px #02c9dc, 0 0 17px #17d7e5; }
#travel-app .ft-map-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
#travel-app button.ft-map-action { padding: 10px 12px !important; margin: 0 !important; min-width: 44px; cursor: pointer; font-family: inherit; font-weight: 620; text-transform: none; }
#travel-app button.ft-map-action:hover, #travel-app button.ft-map-action.is-active { border-color: #44d9e9 !important; background: #195169e8 !important; color: #a8fbff !important; }
#travel-app .ft-map-status { position: absolute; bottom: 138px; left: 50%; transform: translateX(-50%); z-index: 890; max-width: calc(100% - 24px); padding: 10px 14px; background: #0c2435e9; border: 1px solid #36657b; border-radius: 9px; color: #e6f7fc; text-align: center; font-size: .72rem; pointer-events: none; }
#travel-app .ft-map-status.is-error { color: #ffcfb6; border-color: #a97456; }
#travel-app .ft-timeline { position: absolute; bottom: 16px; left: 15px; right: 15px; z-index: 800; background: #0b2233e8; backdrop-filter: blur(12px); border: 1px solid #365669; border-radius: 12px; padding: 12px 17px 9px; color: #d5ecf3; box-shadow: 0 8px 22px #0003; }
#travel-app .ft-year-head { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: #99baca; }
#travel-app .ft-year-head strong { color: #7bf1f4; font-size: .85rem; }
#travel-app #ft-year-range { display: block; width: 100%; height: 23px; margin: 5px 0 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; accent-color: #09cfe0; }
#travel-app #ft-year-range::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: #3e6476; }
#travel-app #ft-year-range::-moz-range-track { height: 3px; border-radius: 999px; background: #3e6476; }
#travel-app #ft-year-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; border: 2px solid #b5ffff; background: #10d6e3; box-shadow: 0 0 7px #0ccbd7; }
#travel-app #ft-year-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #b5ffff; background: #10d6e3; }
#travel-app .ft-year-ends { display: flex; justify-content: space-between; color: #7e9ba9; font-size: .64rem; }
#travel-app .ft-sidebar { height: 640px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #111e2d; border: 1px solid #31485e; border-radius: 15px; padding: 21px 18px 17px; }
#travel-app .ft-sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 15px; }
#travel-app .ft-sidebar h3 { margin: 0; color: #f0f8ff !important; font-size: 1.18rem; font-weight: 750; }
#travel-app .ft-sidebar-heading p { color: #93a9bc; font-size: .76rem; margin: 5px 0 0; }
#travel-app .ft-visible-count { display: inline-flex; justify-content: center; align-items: center; background: #173746; color: #59dde7; border: 1px solid #26576a; border-radius: 999px; min-width: 31px; height: 29px; font-variant-numeric: tabular-nums; font-size: .79rem; }
#travel-app .ft-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#travel-app input.ft-search { display: block !important; width: 100%; margin: 0 0 14px !important; padding: 11px 13px !important; border: 1px solid #3b586c !important; border-radius: 9px !important; background: #192d40 !important; color: #eaf9ff !important; outline: none !important; font-size: .81rem !important; line-height: 1.5; box-shadow: none !important; }
#travel-app input.ft-search::placeholder { color: #829caf; }
#travel-app input.ft-search:focus { border-color: #22c6d3 !important; box-shadow: 0 0 0 2px #12c9de24 !important; }
#travel-app .ft-city-list { flex: 1 1 auto; min-height: 110px; overflow-y: auto; padding: 2px 3px 2px 0; scrollbar-width: thin; scrollbar-color: #41627a transparent; }
#travel-app button.ft-city-card { appearance: none !important; -webkit-appearance: none !important; display: flex !important; flex-direction: column !important; text-align: left !important; width: 100% !important; min-height: 85px; height: auto !important; padding: 12px 14px !important; margin: 0 0 9px !important; border-radius: 11px !important; border: 1px solid #35546a !important; background: #182d42 !important; color: #eaf8ff !important; line-height: 1.4 !important; box-shadow: none !important; text-shadow: none !important; white-space: normal !important; font-size: .84rem !important; cursor: pointer; transition: border-color .15s ease, background .15s ease !important; }
#travel-app button.ft-city-card:hover, #travel-app button.ft-city-card.is-selected { background: #194051 !important; border-color: #2bd0dc !important; }
#travel-app .ft-city-card-top { display: flex; align-items: center; gap: 10px; width: 100%; }
#travel-app .ft-city-no { color: #5edce5; font-size: .73rem; font-variant-numeric: tabular-nums; }
#travel-app .ft-city-name { color: #f4ffff; font-size: .97rem; font-weight: 700; }
#travel-app .ft-demo-tag { font-size: .60rem; color: #82e9e9; border: 1px solid #3f9ba5; border-radius: 999px; padding: 1px 6px; }
#travel-app .ft-city-meta, #travel-app .ft-city-date { display: block; margin: 5px 0 0 27px; color: #acc0d0; font-size: .73rem; }
#travel-app .ft-city-date { color: #52b9cb; font-variant-numeric: tabular-nums; }
#travel-app .ft-detail { flex: 0 0 auto; max-height: 265px; overflow-y: auto; border-top: 1px solid #365268; padding: 15px 3px 2px; scrollbar-width: thin; scrollbar-color: #41627a transparent; }
#travel-app .ft-empty { color: #9ab1c2; margin: 0; font-size: .79rem; line-height: 1.75; }
#travel-app .ft-detail-title { display: flex; gap: 9px; align-items: center; }
#travel-app .ft-detail-title h4 { font-size: 1.08rem; font-weight: 720; color: #f2fbff; margin: 0; }
#travel-app .ft-detail-demo { font-size: .64rem; background: #1b606b; color: #b6f8fa; border-radius: 7px; padding: 2px 7px; }
#travel-app .ft-detail-subtitle { color: #a6bdcb; font-size: .76rem; margin: 5px 0 12px; }
#travel-app .ft-detail-info { display: flex; flex-wrap: wrap; gap: 7px; }
#travel-app .ft-detail-info span { color: #b5eaf0; background: #1b4255; border-radius: 6px; font-size: .7rem; padding: 5px 8px; }
#travel-app .ft-detail-description { margin: 12px 0 0; font-size: .79rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; color: #cadce8; }
#travel-app .ft-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
#travel-app .ft-photo { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 7px; }
#travel-app .ft-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
#travel-app .ft-photo:hover img { transform: scale(1.06); }
#travel-app .ft-attribution-note { font-size: .67rem; color: var(--global-text-color-light, #889cae); line-height: 1.75; margin: 13px 3px 0; }
#travel-app .ft-attribution-note a { color: var(--global-theme-color, #28c9d9); }
@media (max-width: 900px) {
  #travel-app .ft-header { align-items: flex-start; flex-direction: column; gap: 20px; }
  #travel-app .ft-stats { gap: 35px; text-align: left; }
  #travel-app .ft-layout { grid-template-columns: minmax(0, 1fr); }
  #travel-app .ft-map-frame { height: 510px; }
  #travel-app .ft-sidebar { height: 470px; }
}
@media (max-width: 530px) {
  #travel-app.ft-app { width: calc(100vw - 18px); }
  #travel-app .ft-header { padding: 0 3px 17px; }
  #travel-app .ft-header h2 { font-size: 1.75rem; }
  #travel-app .ft-description { font-size: .78rem; }
  #travel-app .ft-stats strong { font-size: 1.55rem; }
  #travel-app .ft-map-frame { height: 450px; border-radius: 11px; }
  #travel-app .ft-sidebar { height: 450px; padding: 17px 13px 13px; border-radius: 11px; }
  #travel-app .ft-map-top { top: 9px; left: 9px; right: 9px; }
  #travel-app .ft-legend { font-size: .64rem; padding: 10px 8px; gap: 6px; }
  #travel-app button.ft-map-action { padding: 10px 9px !important; font-size: .70rem !important; min-width: 38px; }
  #travel-app .ft-timeline { bottom: 12px; left: 9px; right: 9px; padding: 10px 12px 7px; }
  #travel-app .ft-map-status { bottom: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  #travel-app *, #travel-app *::before, #travel-app *::after { transition-duration: 0s !important; }
}

/* MapLibre overlays. */
#travel-app .ft-map-frame { background: #091c29; }
#travel-app .ft-map-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; background: #102634;
}
#travel-app .ft-map-canvas[hidden] { display: none !important; }
#travel-app #ft-world-map { z-index: 1; }
#travel-app .ft-map-top, #travel-app .ft-timeline, #travel-app .ft-map-status { z-index: 710; }
#travel-app .ft-setup-notice {
  margin: 0 0 14px; padding: 11px 14px;
  background: #193442; border: 1px solid #36788b;
  color: #c8eff8; border-radius: 9px; font-size: .78rem; line-height: 1.75;
}
#travel-app .ft-setup-notice[hidden] { display: none !important; }
#travel-app .ft-world-marker {
  display: flex !important; flex-direction: column-reverse;
  align-items: center; justify-content: center;
  width: auto !important; min-width: 0 !important; height: auto !important;
  padding: 0 !important; margin: 0 !important; background: none !important;
  border: 0 !important; box-shadow: none !important; outline-offset: 6px;
  cursor: pointer;
}
#travel-app .ft-world-marker[hidden] { display: none !important; }
#travel-app .ft-world-dot {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #e6ffff; background: #08d3df;
  box-shadow: 0 0 8px #00d5df, 0 0 18px #00cddb99;
}
#travel-app .ft-world-label {
  display: none; margin-bottom: 6px; white-space: nowrap;
  color: #f0fcff; font-weight: 730; font-size: 12px;
  text-shadow: 0 1px 4px #06121e, 0 1px 8px #06121e;
}
#travel-app .ft-world-marker:hover .ft-world-dot { transform: scale(1.18); }
@media (max-width: 530px) {
  #travel-app .ft-setup-notice { font-size: .72rem; }
}

#travel-app .ft-world-marker.ft-marker-distant { opacity: 0; pointer-events: none; }
#travel-app .ft-world-marker.is-selected .ft-world-dot { background: #fff; transform: scale(1.35); }

#travel-app .ft-list-switch { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; background: #142838; border: 1px solid #304d61; border-radius: 10px; }
#travel-app .ft-list-switch button { flex: 1; border: 0; border-radius: 7px; padding: 8px; background: transparent; color: #a5bac9; cursor: pointer; font-size: .76rem; }
#travel-app .ft-list-switch button.is-active { background: #235064; color: #e9fcff; }
#travel-app .ft-list-switch button:focus-visible { outline: 2px solid #78f4ff; outline-offset: 2px; }
#travel-app .ft-wish-tag { font-size: .65rem; color: #ffd18a; border: 1px solid #ac8048; border-radius: 999px; padding: 1px 7px; }
#travel-app .ft-wish-legend-dot { width: 10px; height: 10px; border: 2px solid #ffe0a2; border-radius: 50%; background: #e9a640; margin-left: 4px; }
#travel-app .ft-wish-marker .ft-world-dot { background: #e9a640; border-color: #fff0cd; box-shadow: 0 0 8px #efb454, 0 0 16px #efb45499; }
#travel-app .ft-wish-marker.is-selected .ft-world-dot { background: #fff3d5; }
#travel-app .ft-story { margin-top: 12px; }
#travel-app .ft-story-heading { margin: 0; color: #80dfe7; font-size: .73rem; font-weight: 700; }
#travel-app .ft-story .ft-detail-description { margin-top: 5px; }
#travel-app .ft-story-extra { margin: 7px 0 0; font-size: .75rem; color: #b5cdd9; line-height: 1.6; }