/* Full-screen map workspace shared by every Lab map. Page CSS owns the data. */
.lab-map {
  --lab-map-edge: var(--space-3);
  --lab-map-top: max(var(--space-3), env(safe-area-inset-top));
  --lab-map-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  --lab-map-content-top: calc(var(--lab-map-top) + var(--lab-ui-control-size) + var(--space-3));
  --lab-map-min-height: calc(var(--space-8) * 2);
  --lab-map-rail-width: 352px;
  --lab-map-footer-space: 0px;
  --lab-map-panel-axis: x;
  --lab-map-surface: var(--lab-panel, var(--experience-panel));
  --lab-map-border: var(--lab-line, var(--experience-border));
  --lab-map-ink: var(--lab-ink, var(--experience-ink));
  --lab-map-muted: var(--lab-muted, var(--experience-muted));
}

.lab-map .lab-map-shell { height: 100dvh; min-height: 0; }

.lab-map .lab-map-topbar {
  position: fixed;
  z-index: 20;
  top: var(--lab-map-top);
  left: max(var(--lab-map-edge), env(safe-area-inset-left));
  right: max(var(--lab-map-edge), env(safe-area-inset-right));
  display: flex;
  width: auto;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.lab-map .lab-map-topbar > * { pointer-events: auto; }
body.lab-map :is(.lab-map-topbar, .lab-map-controls) { transform: none; }
body.lab-map .lab-map-panel { transform: none; transition: opacity 160ms ease; transition-delay: 0s; }

.lab-map .lab-map-brand {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  align-content: center;
  gap: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--lab-map-border);
  border-radius: var(--radius-md);
  background: var(--lab-map-surface);
}

.lab-map .lab-map-brand strong {
  overflow: hidden;
  color: var(--lab-map-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-map .lab-map-brand span {
  display: block;
  overflow: hidden;
  color: var(--lab-map-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-map .lab-map-controls {
  position: fixed;
  z-index: 20;
  top: var(--lab-map-content-top);
  left: max(var(--lab-map-edge), env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  display: flex;
  width: 96px;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
}

.lab-map .lab-map-controls > :is(div, .metro-more-popover-group) {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.lab-map .lab-map-controls .metro-more-popover-group {
  grid-template-columns: 1fr;
}

.lab-map .lab-map-controls .metro-more-popover-group > div {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
}

.lab-map .lab-map-controls button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--lab-map-border);
  background: var(--lab-map-surface);
  color: var(--lab-map-ink);
  box-shadow: none;
}

.lab-map .lab-map-controls button:is(.is-active, [aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--lab-ui-focus) 60%, var(--lab-map-border));
  background: color-mix(in srgb, var(--lab-ui-focus) 12%, var(--lab-map-surface));
}

.lab-map .lab-map-controls button:hover {
  background: color-mix(in srgb, var(--lab-ui-focus) 16%, var(--lab-map-surface));
}

.lab-map .lab-map-panel {
  position: fixed;
  z-index: 15;
  top: var(--lab-map-content-top);
  left: auto;
  right: max(var(--lab-map-edge), env(safe-area-inset-right));
  bottom: auto;
  display: block;
  width: var(--lab-map-rail-width);
  height: auto;
  max-width: none;
  max-height: calc(100dvh - var(--lab-map-content-top) - var(--lab-map-bottom));
  margin: 0;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid var(--lab-map-border);
  border-radius: var(--radius-lg);
  background: var(--lab-map-surface);
  transform: none;
}

body.lab-map.is-panel-collapsed .lab-map-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
}

body.lab-map.is-panel-collapsed .lab-map-controls {
  top: var(--lab-map-content-top);
  bottom: auto;
  transform: none;
}

.lab-map .lab-map-panel > :is(section, .lab-map-summary, .metro-search, .udd-area-switcher, .experience-tool-controls, .experience-hud-head, .experience-metrics) {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-3);
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--lab-map-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  contain: none;
}

.lab-map .lab-map-panel > :last-child { border-bottom: 0; }

.lab-map .lab-map-summary {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
}

.lab-map .lab-map-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: auto;
  align-items: start;
  align-content: start;
  justify-content: normal;
  text-align: left;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 0;
  border-right: 1px solid var(--lab-map-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lab-map .lab-map-summary > div:first-child { padding-left: 0; }
.lab-map .lab-map-summary > div:last-child { border-right: 0; padding-right: 0; }
.lab-map .lab-map-panel > .lab-map-summary { width: 100%; justify-self: stretch; }
.lab-map .lab-map-summary:has(> div:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  row-gap: var(--space-2);
}
.lab-map .lab-map-summary:has(> div:nth-child(4)) > div:nth-child(odd) { padding-left: 0; }
.lab-map .lab-map-summary:has(> div:nth-child(4)) > div:nth-child(even) { border-right: 0; padding-right: 0; }
.lab-map .lab-map-summary > div dt {
  display: block;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  margin: 0;
  color: var(--lab-map-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  text-align: left;
}
.lab-map .lab-map-summary > div dd { margin: 0; color: var(--lab-map-ink); font-size: var(--fs-sm); line-height: var(--lh-body); text-align: left; white-space: nowrap; }

.lab-map .metro-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-column: auto; height: auto; }
.lab-map .metro-search input { width: 100%; min-width: 0; min-height: 40px; }
.lab-map .metro-search-clear { width: 40px; height: 40px; }
.lab-map .metro-search-panel { position: relative; inset: auto; grid-column: 1 / -1; max-height: min(320px, 40dvh); box-shadow: none; }
.lab-map .metro-panel-section { display: block; }
.lab-map .metro-section-head { margin-bottom: var(--space-2); }
.lab-map .metro-route-list { max-height: none; overflow: visible; }
.lab-map .metro-line-diagram { max-height: 320px; }
.lab-map .metro-vehicle-list { max-height: 320px; }
.lab-map .metro-inspector { max-width: none; opacity: 1; }
.lab-map .udd-area-switcher { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: var(--space-2); }
.lab-map .udd-area-switcher select { min-height: 44px; }
.lab-map .metro-tracker { grid-template-columns: minmax(0, 1fr) auto auto; max-width: none; }
.lab-map .metro-tracker-stats { grid-column: 1 / -1; }
.lab-map .experience-tool-controls { display: grid; grid-template-columns: repeat(3, 44px); gap: var(--space-2); }
.lab-map .experience-map-controls { display: grid; grid-template-columns: repeat(2, 44px); gap: var(--space-1); }
.lab-map .experience-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lab-map .lilo-audio { position: relative; inset: auto; flex: 0 0 auto; height: 44px; gap: var(--space-1); margin-left: auto; padding: 0; border: 1px solid var(--lab-map-border); border-radius: var(--radius-md); background: var(--lab-map-surface); }
.lab-map .lilo-audio-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.lab-map .lilo-audio-volume { display: flex; }

.lab-map :is(.lab-panel-drag-handle, .lab-panel-edge-handle) {
  appearance: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--lab-map-muted);
  background: var(--lab-map-surface);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.lab-map :is(.lab-panel-drag-handle, .lab-panel-edge-handle)[hidden] { display: none !important; }
.lab-map .lab-panel-drag-handle { display: none; }
.lab-map .lab-panel-edge-handle {
  position: fixed;
  z-index: 30;
  left: 50%;
  border: 1px solid var(--lab-map-border);
  border-radius: var(--radius-md);
  transform: translateX(-50%) translateY(var(--lab-panel-edge-offset, 0));
}

.lab-map :is(.lab-panel-drag-handle, .lab-panel-edge-handle) span {
  display: block;
  width: 38px;
  height: 4px;
  border-radius: var(--radius-md);
  background: var(--lab-map-muted);
}

.lab-map .lab-mobile-panel-dragging {
  transform: translateY(var(--lab-panel-drag-offset, 0)) !important;
  transition: none !important;
}

.lab-map .lab-map-footer {
  position: fixed;
  z-index: 20;
  top: auto;
  left: max(var(--lab-map-edge), env(safe-area-inset-left));
  right: calc(max(var(--lab-map-edge), env(safe-area-inset-right)) + var(--lab-map-rail-width) + var(--space-3));
  bottom: var(--lab-map-bottom);
  width: auto;
  transform: none;
}

body.lab-map.is-panel-collapsed .lab-map-footer {
  right: max(var(--lab-map-edge), env(safe-area-inset-right));
  bottom: var(--lab-map-bottom);
}
.lab-map .metro-help { top: var(--lab-map-content-top); left: 120px; right: auto; bottom: auto; width: min(320px, calc(100vw - 144px)); }

@media (max-width: 1024px) {
  .lab-map { --lab-map-panel-axis: y; }
  .lab-map .lab-map-brand span { display: none; }
  .lab-map .lab-map-controls {
    width: max-content;
    max-width: calc(100vw - var(--lab-map-edge) * 2);
    flex-direction: row;
    gap: var(--space-2);
  }
  .lab-map .lab-map-controls > div { display: flex; gap: var(--space-1); }
  .lab-map .experience-map-controls { display: flex; }
  .lab-map .lab-map-controls .metro-more-popover-group { display: none; }
  .lab-map .metro-more-toggle { display: flex; }
  .lab-map .lab-map-controls.is-more-open .metro-more-popover-group {
    position: absolute;
    top: calc(44px + var(--space-2));
    left: 0;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--space-2);
    border: 1px solid var(--lab-map-border);
    border-radius: var(--radius-md);
    background: var(--lab-map-surface);
  }
  .lab-map .lab-map-panel {
    top: auto;
    left: max(var(--lab-map-edge), env(safe-area-inset-left));
    right: max(var(--lab-map-edge), env(safe-area-inset-right));
    bottom: calc(var(--lab-map-bottom) + var(--lab-map-footer-space));
    width: auto;
    max-height: min(46dvh, calc(100dvh - var(--lab-map-content-top) - var(--lab-ui-control-size) - var(--space-3) * 2 - var(--lab-map-bottom) - var(--lab-map-min-height) - var(--lab-map-footer-space)));
  }
  body.lab-map.is-panel-collapsed .lab-map-panel { transform: none; }
  .lab-map .lab-panel-drag-handle {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--lab-map-surface);
    touch-action: none;
    cursor: grab;
  }
  .lab-map .lab-panel-edge-handle { display: flex; width: 96px; height: 44px; bottom: calc(var(--lab-map-bottom) + var(--lab-map-footer-space)); }
  .lab-map .lab-map-footer { right: max(var(--lab-map-edge), env(safe-area-inset-right)); }
  .lab-map .lilo-audio-volume { width: 80px; }
  .lab-map .lilo-audio-volume input { width: 48px; }
  .lab-map .metro-search input { font-size: var(--fs-body-lg); }
  .lab-map .metro-help { top: calc(var(--lab-map-content-top) + 52px); left: var(--lab-map-edge); width: calc(100vw - var(--lab-map-edge) * 2); }
}

@media (min-width: 641px) and (max-width: 1024px) and (max-height: 560px) {
  .lab-map { --lab-map-panel-axis: x; --lab-map-rail-width: min(352px, 40vw); }
  .lab-map .lab-map-panel {
    top: var(--lab-map-content-top);
    left: auto;
    bottom: auto;
    width: var(--lab-map-rail-width);
    max-height: calc(100dvh - var(--lab-map-content-top) - var(--lab-map-bottom));
  }
  .lab-map .lab-map-footer { right: calc(max(var(--lab-map-edge), env(safe-area-inset-right)) + var(--lab-map-rail-width) + var(--space-3)); }
}

@media (max-width: 360px) {
  .lab-map .lab-map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; row-gap: var(--space-2); }
  .lab-map .lab-map-summary > div:nth-child(odd) { padding-left: 0; }
  .lab-map .lab-map-summary > div:nth-child(even) { border-right: 0; padding-right: 0; }
  .lab-map .lab-map-summary > div:last-child { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.lab-map .lab-map-panel { transition: none; }
}