/* Touring panels have their own regions; existing map data and actions remain. */
:root {
  --city-tour-card-width: clamp(280px, 28vw, 380px);
  --city-tour-guide-width: clamp(200px, 21vw, 310px);
}
.city-tour-flow { display: none; }
html.bus-on body #mapwrap {
  height: 100dvh !important;
  max-height: none !important;
}
html.bus-on body #busui .bus-card {
  position: fixed;
  top: 184px;
  left: 16px;
  right: auto;
  width: var(--city-tour-card-width);
  max-width: none;
  max-height: calc(100dvh - 204px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html.bus-on body #busui .bus-card:not(.on) { pointer-events: none; }
html.bus-on body #busui .bc-fig { aspect-ratio: 16 / 7; max-height: 180px; }
html.bus-on body #busui .bc-act > * { min-height: 44px; }
html.bus-on body #guideDock {
  bottom: 20px !important;
  right: 20px !important;
  max-height: calc(100dvh - 204px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: none;
}
html.bus-on body #guideDock:not(.minimized) { width: var(--city-tour-guide-width); }
html.bus-on body #busui .bus-ticket {
  position: fixed;
  left: calc(var(--city-tour-card-width) + 32px);
  right: calc(var(--city-tour-guide-width) + 40px);
  bottom: 20px;
  width: auto;
  max-height: 30dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: none;
}
html.bus-on body #cityExplorer {
  top: 134px !important;
  left: max(380px, calc(var(--city-tour-card-width) + 32px)) !important;
  right: calc(var(--city-tour-guide-width) + 40px) !important;
  width: auto;
  max-width: none;
  flex-wrap: wrap;
}
html.bus-on body #cityExplorer .ce-open {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}
html.bus-on body #cityExplorer button { font-size: 11px; padding: 7px 10px; }
html.bus-on body #busui .bus-aside {
  position: fixed;
  top: 224px;
  left: calc(var(--city-tour-card-width) + 32px);
  right: calc(var(--city-tour-guide-width) + 40px);
  width: auto;
  max-width: none;
}

/* A separate flow host keeps the camera's #mapwrap dimensions independent of
   long stop text. The small layout bridge moves original nodes, never clones. */
@media (max-width: 900px) {
  html.bus-on body #mapwrap {
    height: min(42dvh, 320px) !important;
    max-height: none !important;
  }
  html.bus-on body #city-tour-flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 12px 24px;
    min-width: 0;
    max-width: calc(100% - 24px);
  }
  html.bus-on body #city-tour-flow #cityExplorer {
    position: static !important;
    inset: auto !important;
    width: 100%;
    max-width: none;
    margin: 0;
    flex: none;
    transform: none;
  }
  html.bus-on body #city-tour-flow #busui {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    z-index: auto;
  }
  html.bus-on body #city-tour-flow #busui[hidden] { display: none; }
  html.bus-on body #city-tour-flow #busui .bus-card {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform: none;
  }
  html.bus-on body #city-tour-flow #busui .bus-card:not(.on) { display: none; }
  html.bus-on body #city-tour-flow #busui .bc-fig {
    max-height: none;
    aspect-ratio: 16 / 9;
  }
  html.bus-on body #city-tour-flow #busui .bc-t { max-height: none; overflow: visible; }
  html.bus-on body #city-tour-flow #busui .bc-n { font-size: 22px; }
  html.bus-on body #city-tour-flow #busui .bc-ml { font-size: 12px; }
  html.bus-on body #city-tour-flow #busui .bc-go,
  html.bus-on body #city-tour-flow #busui .bc-cont { font-size: 13px; }
  html.bus-on body #city-tour-flow #busui .bc-act {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  html.bus-on body #city-tour-flow #busui .bc-act > * {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 10px 8px;
    line-height: 1.4;
    white-space: normal;
    justify-content: center;
  }
  html.bus-on body #city-tour-flow #busui .bc-act .bc-go { grid-column: 1 / -1; }
  html.bus-on body #city-tour-flow #busui .bus-ticket {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: none;
    margin: 0;
    overflow: visible;
    transform: none;
    -webkit-mask: none;
    mask: none;
  }
  html.bus-on body #city-tour-flow #busui .bus-aside {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }
  html.bus-on body #city-tour-flow #busui .bus-aside:not(.on) { display: none; }
  html.bus-on body #city-tour-flow #guideDock {
    position: relative !important;
    inset: auto !important;
    flex: none;
    align-self: flex-end;
    width: min(310px, 100%);
    max-width: 100%;
    min-width: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
  }
  html.bus-on body #city-tour-flow #guideDock .gd-portrait {
    height: 200px;
    min-height: 0;
    max-height: none;
  }
  html.bus-on body #city-tour-flow #guideDock.minimized { width: 90px; max-width: 90px; }
  html.bus-on body #city-tour-flow #guideDock.minimized .gd-portrait { height: 98px; }
}