/* Header, native map/content area and navigation each occupy their own row. */
body.app-layout-enabled {
  display: block;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.app-layout-enabled .app-shell.container {
  position: relative;
  display: grid;
  /* Loaded weather text must not enlarge the implicit auto-sized column. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.app-layout-enabled #app-top-stack,
body.app-layout-enabled #app-bottom-nav {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  transform: none;
  flex-shrink: 0;
}

body.app-layout-enabled #app-top-stack { grid-row: 1; }
body.app-layout-enabled #app-bottom-nav { grid-row: 3; }

body.app-layout-enabled #app-screen-stack {
  position: relative;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

body.app-layout-enabled #app-screen-stack > .app-screen {
  min-height: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
body.app-layout-enabled #app-screen-stack > #app-screen-diary { max-width: none; }
body.app-layout-enabled[data-app-screen="map"] #app-screen-stack { overflow: hidden; }

body.app-layout-enabled #map-overlay {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 900;
  container: map-section / size;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.app-layout-enabled #map-overlay > #map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The top-left HUD uses normal flow: tracker first, diagnostics underneath. */
.map-top-left-hud {
  position: absolute;
  z-index: 1210;
  top: 12px;
  left: 8px;
  right: 78px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
#map-overlay .map-top-left-hud > .map-quest-tracker {
  position: static;
  inset: auto;
  order: 0;
  width: 100%;
  max-width: none;
  pointer-events: auto;
}
#map-overlay .map-top-left-hud > .map-performance-control {
  position: static;
  inset: auto;
  order: 1;
  max-width: 100%;
  pointer-events: auto;
}
#map-overlay .movement-map-controls { top: 12px; }

/* Only the map section's own edges matter for its controls. */
#map-overlay #movement-status-badge { bottom: 8px; }
#map-overlay .base-reach-bar { position: absolute; bottom: 30px; }
#map-overlay .relation-task-panel--map { max-height: calc(100% - 132px); }

/* A short map section keeps its corner controls from colliding. */
@container map-section (max-height: 280px) {
  #map-overlay .movement-map-controls { flex-direction: row; gap: 6px; }
  #map-overlay .movement-map-controls button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 4px;
  }
  #map-overlay .movement-map-controls span { display: none; }
  #map-overlay .map-top-left-hud { right: 102px; }
  #map-overlay > #map-task-toggle { right: 56px; bottom: 30px; }
  #map-overlay .base-reach-bar { right: 100px; }
  #map-overlay .zoom-slider-container { top: 45%; }
  #map-overlay .zoom-slider-track,
  #map-overlay .zoom-slider { height: 60px; }
}