/* View layout is separate from the original Leaflet/analytics styles. */
[hidden] { display: none !important; }
#viewPanes { position: absolute; inset: 0; }
#builderPane {
  position: absolute; inset: 0; overflow: hidden; background: #121a26;
  color: #e6edf3;
}
#builderPane iframe { width: 100%; height: 100%; display: block; border: 0; }
header { flex-wrap: wrap; padding-right: 40px; }
.view-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-left: auto; pointer-events: auto;
}
body:is([data-mode="3d"], [data-mode="split"]) header {
  flex-wrap: nowrap; gap: 12px; padding: 10px 12px;
  background: rgba(238, 241, 245, .78); border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body:is([data-mode="3d"], [data-mode="split"]) .brand {
  flex: 0 1 auto; min-width: 0; box-shadow: none;
}
body:is([data-mode="3d"], [data-mode="split"]) .brand > div { min-width: 0; }
body:is([data-mode="3d"], [data-mode="split"]) .brand .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:is([data-mode="3d"], [data-mode="split"]) .status-pill {
  flex: none; white-space: nowrap; box-shadow: none;
}
body:is([data-mode="3d"], [data-mode="split"]) .view-controls {
  flex: none; flex-wrap: nowrap; gap: 10px;
}
body:is([data-mode="3d"], [data-mode="split"]) .utility-control {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
}
.view-toggle, .utility-control, #clearDesign, .recovery-action {
  font: inherit; cursor: pointer; touch-action: manipulation;
}
.view-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; min-width: 152px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid #53647b; background: #1c2839; color: #ffffff;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.view-toggle:hover { background: #2b3c54; border-color: #8ba1bc; }
.view-toggle:active { background: #121a26; }
.view-toggle svg { flex: none; }
button:focus-visible, .utility-control:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.utility-control {
  color: var(--ink-2); text-decoration: none; font-size: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; box-shadow: var(--shadow);
}
.design-label {
  display: flex; align-items: center; gap: 6px; max-width: 230px;
  padding: 5px 8px; border-radius: 8px; background: var(--surface);
  color: var(--ink-2); font-size: 11px; pointer-events: auto;
}
#designKey { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clearDesign {
  flex: none; border: 0; color: var(--ink-2); background: transparent;
  width: 24px; height: 24px; border-radius: 5px; font-size: 17px;
}
.builder-message {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 24px; background: #121a26; z-index: 1;
}
.builder-message strong { font-size: 19px; font-weight: 600; }
.builder-message p { color: #aab8ca; max-width: 310px; margin: 0; font-size: 13px; }
.recovery-action {
  border: 1px solid #53647b; color: #e6edf3; border-radius: 9px;
  background: #233044; padding: 8px 18px; font-size: 13px;
  text-decoration: none;
}
.builder-help {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  font: inherit; font-size: 11px; cursor: pointer; padding: 5px 8px;
  border-radius: 6px; border: 1px solid #53647b; background: #10151dcc; color: #d5dfed;
  white-space: nowrap;
}
body[data-mode="3d"] #map { visibility: hidden; pointer-events: none; }
body[data-mode="3d"] .builder-message {
  padding-top: calc(var(--toolbar-bottom, 72px) + 24px);
  padding-bottom: calc(var(--stats-height, 160px) + 40px);
}
body[data-mode="split"] #viewPanes {
  top: calc(var(--toolbar-bottom, 72px) + 12px);
  bottom: calc(var(--stats-height, 160px) + 24px);
  display: grid; grid-template-rows: 1fr 1fr; gap: 2px; background: #394252;
}
body[data-mode="split"] #map, body[data-mode="split"] #builderPane {
  position: relative; inset: auto; min-height: 0; min-width: 0;
}
body[data-mode="split"] .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 12px; right: 12px; bottom: 12px; max-width: none;
}
body[data-mode="split"] #map .leaflet-bottom { max-width: 100%; }
body[data-mode="split"] #map .leaflet-bottom .leaflet-control { max-width: calc(100% - 20px); }
@media (min-width: 1100px) and (orientation: landscape) {
  body[data-mode="split"] #viewPanes {
    bottom: 0; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr;
  }
  body[data-mode="split"] .stats {
    left: 18px; right: auto; bottom: 18px; grid-template-columns: repeat(2, 190px);
  }
  body[data-mode="split"] #map .leaflet-bottom.leaflet-right { bottom: calc(var(--stats-height, 160px) + 24px); }
}
@media (max-width: 600px) {
  body:is([data-mode="3d"], [data-mode="split"]) header {
    top: 4px; left: 6px; right: 6px; padding: 5px 7px; gap: 4px 8px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  }
  body:is([data-mode="3d"], [data-mode="split"]) .brand {
    grid-column: 1; padding: 0; gap: 5px; background: transparent;
  }
  body:is([data-mode="3d"], [data-mode="split"]) .brand svg { width: 26px; height: 24px; }
  body:is([data-mode="3d"], [data-mode="split"]) .brand .name { font-size: 12px; }
  body:is([data-mode="3d"], [data-mode="split"]) .brand .sub { display: none; }
  body:is([data-mode="3d"], [data-mode="split"]) .status-pill {
    grid-column: 2; font-size: 9px; padding: 4px 7px; gap: 4px;
  }
  body:is([data-mode="3d"], [data-mode="split"]) .status-pill .dot { width: 6px; height: 6px; }
  body:is([data-mode="3d"], [data-mode="split"]) .design-label {
    grid-column: 3; max-width: 90px; padding: 0 3px; gap: 3px;
  }
  body:is([data-mode="3d"], [data-mode="split"]) .design-label > span:first-child { display: none; }
  body:is([data-mode="3d"], [data-mode="split"]) .view-controls {
    grid-column: 1 / -1; justify-content: space-between; gap: 8px; margin: 0; width: 100%;
  }
  /* Dock phone stats outside the iframe: Builder's replay/HUD height varies. */
  body[data-mode="3d"] #builderPane {
    bottom: calc(var(--stats-height, 160px) + 24px + env(safe-area-inset-bottom, 0px));
  }
  body[data-mode="3d"] .stats { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="3d"] .builder-message { padding-bottom: 48px; }
  .view-controls { margin-left: 0; gap: 6px; width: 100%; }
  .design-label { max-width: 100%; }
  body:not([data-mode="map"]) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body:not([data-mode="map"]) .tile { padding: 8px 10px; }
  body:not([data-mode="map"]) .tile .value { font-size: 21px; }
  body:not([data-mode="map"]) .tile .label { font-size: 9px; }
}
.fullscreen-notice {
  position: fixed; z-index: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); color: var(--ink); padding: 16px 20px; border-radius: 12px;
  max-width: min(360px, 90vw); box-shadow: var(--shadow);
}
html.kiosk, html.kiosk body { overflow: hidden; user-select: none; -webkit-user-select: none; }
/* The embedded kiosk has an automatic camera. Let the parent receive activity
   over its pane as well; cross-origin iframe pointer events do not bubble. */
html.kiosk #builderPane iframe { pointer-events: none; }
.kiosk-control, .leaflet-control-zoom, #iconToggle, #trafficToggle { transition: opacity .2s; }
.kiosk-idle .kiosk-control, .kiosk-idle .leaflet-control-zoom,
.kiosk-idle #iconToggle, .kiosk-idle #trafficToggle {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.kiosk-idle, .kiosk-idle * { cursor: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kiosk-control, .leaflet-control-zoom, #iconToggle, #trafficToggle { transition: none; }
}