/* Guided wizard presentation. Loaded last; rendering and export rules stay in
   their owning modules. The single footer occupies layout space, never a map
   or form overlay. The stacked layout keeps one scroll owner. */
html[data-mtle-guided] {
  --guided-panel: #151c25;
  --guided-surface: #1d2733;
  --guided-border: #364353;
  --guided-muted: #a6b3c3;
  --guided-accent: #90c5ff;
  --text-secondary: #bdc8d5;
  --text-muted: #a6b3c3;
}

html[data-mtle-guided] .header {
  min-height: 48px;
  background: #10161e;
  box-shadow: none;
}
html[data-mtle-guided] .header::before,
html[data-mtle-guided] .wizard-panel::after,
html[data-mtle-guided] .right-panel::before { display: none; }
html[data-mtle-guided] .header-title { font-size: 16px; letter-spacing: -.2px; }
html[data-mtle-guided] .header-badge {
  background: transparent;
  border: 0;
  color: var(--guided-muted);
  font-size: 11px;
}

html[data-mtle-guided] .main-body { min-height: 0; }
html[data-mtle-guided] .main-body .wizard-panel {
  width: clamp(370px, 32vw, 460px);
  min-width: 370px;
  min-height: 0;
  padding-bottom: 0;
  background: var(--guided-panel);
  border-right: 1px solid #2b3745;
}
html[data-mtle-guided] .main-body .right-panel {
  min-width: 0;
  background: #0d131b;
}
/* Leaflet's tile/control layers stay inside the map; dialog overlays remain
   outside this context and keep their existing modal ordering. */
html[data-mtle-guided] #map-panel { isolation: isolate; }

/* Five calm milestones; the current question gets the visual emphasis. */
html[data-mtle-guided] .wizard-panel .step-bar {
  gap: 4px;
  padding: 12px 16px;
  background: var(--guided-panel);
  border-bottom: 1px solid #2b3745;
}
html[data-mtle-guided] .step-bar::before,
html[data-mtle-guided] .step-bar::after { display: none; }
html[data-mtle-guided] .step-bar .step-indicator {
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--guided-muted);
  transform: none;
}
html[data-mtle-guided] .step-bar .step-indicator .step-num {
  width: 22px;
  height: 22px;
  font-size: 11px;
  border: 1px solid #536275;
  background: transparent;
  color: var(--guided-muted);
  box-shadow: none;
  transform: none;
}
html[data-mtle-guided] .step-bar .step-indicator .step-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}
html[data-mtle-guided] .step-bar .step-indicator.completed { color: #bed6cd; }
html[data-mtle-guided] .step-bar .step-indicator.completed .step-num {
  color: #bed6cd;
  border-color: #638c80;
}
html[data-mtle-guided] .step-bar .step-indicator.active {
  background: #243548;
  color: #e7f2ff;
}
html[data-mtle-guided] .step-bar .step-indicator.active .step-num {
  color: #142232;
  background: var(--guided-accent);
  border-color: var(--guided-accent);
}
html[data-mtle-guided] .step-bar .step-indicator.p479-locked { opacity: .7; }

html[data-mtle-guided] .wizard-panel .step-content-area {
  min-height: 0;
  padding: 24px 24px 28px;
  scroll-padding: 20px;
}
html[data-mtle-guided] .step-panel .wizard-hero {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-mtle-guided] .wizard-hero-number { display: none; }
html[data-mtle-guided] .wizard-hero-body { gap: 8px; }
html[data-mtle-guided] .wizard-hero-kicker {
  color: var(--guided-muted);
  font: 500 11px/1.4 system-ui, sans-serif;
  letter-spacing: .05em;
  opacity: 1;
}
html[data-mtle-guided] .wizard-hero-title {
  margin: 0;
  color: #f0f4f8;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.5px;
}
html[data-mtle-guided] .wizard-hero-subtitle {
  max-width: 43ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
html[data-mtle-guided] .guided-question-progress {
  justify-content: flex-start;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid #364353;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #c3d7ee;
}
html[data-mtle-guided] #p418cStageDots.guided-question-progress {
  margin: 0 auto 0 0;
  padding: 0;
  border: 0;
  letter-spacing: 0;
}
html[data-mtle-guided] .guided-question-progress[hidden] { display: none !important; }
html[data-mtle-guided] .main-body:has(.right-panel.p394a-stage-open) .p351-contfu5-water-style-hint { display: none; }
html[data-mtle-guided] .p417a-rail-context {
  margin: 0 0 20px;
  padding: 14px 0;
  border: 0;
  border-block: 1px solid #364353;
  border-radius: 0;
  background: none;
}
html[data-mtle-guided] .p417a-rail-context__q { display: none; }

/* Quiet form sections, rather than a box around every box. */
html[data-mtle-guided] .step-content-area .card,
html[data-mtle-guided] .step-content-area .wizard-decision {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border: 0;
  border-bottom: 1px solid #2d3947;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
html[data-mtle-guided] .step-content-area .card-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #e3eaf2;
}
html[data-mtle-guided] .wizard-decision-question {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
html[data-mtle-guided] .wizard-decision-hint,
html[data-mtle-guided] .step-content-area .hint,
html[data-mtle-guided] .step-content-area .step-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
html[data-mtle-guided] .form-input,
html[data-mtle-guided] .form-select {
  min-height: 42px;
  border-radius: 6px;
  border-color: #526175;
  background-color: #101822;
  color: #eef3f8;
  font-size: 14px;
  box-shadow: none;
}
html[data-mtle-guided] .form-input::placeholder { color: #a6b3c3; }
html[data-mtle-guided] .wizard-decision-btn,
html[data-mtle-guided] .segment-btn,
html[data-mtle-guided] .choice-card,
html[data-mtle-guided] .p394a-choice-card {
  border-radius: 7px;
  box-shadow: none;
  transform: none;
}
html[data-mtle-guided] .wizard-decision-btn {
  background: var(--guided-surface);
  border-color: #536275;
  min-height: 44px;
}
html[data-mtle-guided] .wizard-decision-btn.selected,
html[data-mtle-guided] .wizard-decision-btn.selected-no,
html[data-mtle-guided] .segment-btn.active {
  background: #263c53;
  border-color: var(--guided-accent);
  color: #f0f7ff;
  box-shadow: inset 0 0 0 1px var(--guided-accent);
}
html[data-mtle-guided] #p425aGallery .p425a-gallery-card {
  background: var(--guided-surface);
  border: 1px solid #46566a;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
html[data-mtle-guided] #p425aGallery .p425a-gallery-card.active {
  border-color: var(--guided-accent);
  box-shadow: inset 0 0 0 1px var(--guided-accent);
}
html[data-mtle-guided] #p425aGallery .p425a-gallery-label {
  margin-top: 12px;
  text-align: left;
  font-size: 15px;
  color: #edf3f9;
}
html[data-mtle-guided] #p425aGallery .p425a-gallery-desc {
  text-align: left;
  line-height: 1.5;
  color: #b9c7d7;
}
html[data-mtle-guided] .segment-btn { min-height: 40px; font-size: 13px; }
html[data-mtle-guided] .step-content-area .help-btn {
  border-radius: 50%;
  box-shadow: none;
}

html[data-mtle-guided] [data-testid="map-type-decision"] .wizard-decision-actions {
  display: grid;
  grid-template-columns: 1fr;
}
html[data-mtle-guided] [data-testid="map-type-decision"] .wizard-decision-btn {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 4px 12px;
  width: 100%;
  max-width: none;
  text-align: left;
  padding: 12px;
}
html[data-mtle-guided] [data-testid="map-type-decision"] .map-type-icon {
  grid-row: 1 / 3;
  width: 48px;
  height: 42px;
}
html[data-mtle-guided] [data-testid="map-type-decision"] .wizard-decision-btn-label { font-size: 14px; }
html[data-mtle-guided] [data-testid="map-type-decision"] .wizard-decision-btn-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}
html[data-mtle-guided] #boundaryBehaviorGroup > div { flex-wrap: wrap; }
html[data-mtle-guided] #boundaryBehaviorGroup [data-testid="boundary-style-guidance"] {
  flex-basis: 100%;
  margin-left: 0 !important;
  line-height: 1.5;
}

/* One reserved action row; Next/Download keep their place through the flow. */
html[data-mtle-guided] .wizard-panel .nav-buttons {
  position: relative;
  gap: 12px;
  padding: 14px 24px;
  min-height: 72px;
  background: var(--guided-panel);
  border-top: 1px solid #364353;
  box-shadow: none;
  z-index: 50; /* above Choice Stage (30), below modal dialogs (60) */
}
html[data-mtle-guided] .nav-buttons .btn {
  min-height: 44px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  white-space: normal;
  line-height: 1.3;
}
html[data-mtle-guided] .nav-buttons #btnBack {
  flex: 0 0 auto;
  min-width: 66px;
  padding-inline: 10px;
  border-color: transparent;
  background: transparent;
  color: #c4cfdb;
}
html[data-mtle-guided] .nav-buttons #btnNext {
  flex: 1;
  background: #2975bd;
  border-color: #64a5e1;
  color: white;
}
/* The canonical location gate keeps this focusable so activation can explain
   the missing prerequisite. Show that state without suppressing its handler. */
html[data-mtle-guided] .nav-buttons #btnNext[aria-disabled="true"] {
  background: #26313f;
  border-color: #48566a;
  color: #bdc8d5;
  box-shadow: none;
}
html[data-mtle-guided] :is(button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #aad4ff;
  outline-offset: 3px;
}
html[data-mtle-guided] .right-panel .p394a-stage-header { padding: 20px 24px 16px; }
html[data-mtle-guided] .right-panel .p394a-stage-heading { font-size: 22px; line-height: 1.3; }
html[data-mtle-guided] .right-panel .p394a-stage-sub { font-size: 13px; line-height: 1.5; }

@media (max-width: 1024px) {
  /* Mobile vh includes space behind browser toolbars. Keep the scroll owner
     and its real action row within the visible area, including toolbar and
     keyboard resizing. CSS still works before/without the sizing helper. */
  html[data-mtle-guided] .app {
    height: 100vh;
    height: 100dvh;
    height: var(--mtle-visible-height, 100dvh);
  }
  html[data-mtle-guided] .main-body { flex-direction: column; overflow-y: auto; }
  html[data-mtle-guided] .main-body .wizard-panel {
    /* Keep question, choice/preview surface and footer in reading order.
       The former rail's own height put mobile answers below a blank panel. */
    display: contents;
    width: 100%;
    min-width: 0;
    min-height: auto;
    max-height: none;
    padding-bottom: 0;
  }
  html[data-mtle-guided] .wizard-panel .step-bar { order: 0; }
  html[data-mtle-guided] .wizard-panel .step-content-area {
    order: 1;
    flex: none;
    overflow: visible;
    padding: 20px 24px 24px;
  }
  html[data-mtle-guided] .wizard-panel .step-panel {
    /* Navigation owns its space now; the old overlay reserve leaves a gap. */
    padding-bottom: 0;
  }
  html[data-mtle-guided] #p520DepthBoundaryConflict { order: 2; }
  html[data-mtle-guided] .main-body .right-panel {
    order: 3;
    flex: none;
    height: 56vh;
    min-height: 360px;
  }
  html[data-mtle-guided] .wizard-panel .nav-buttons {
    order: 4;
    position: sticky;
    bottom: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  html[data-mtle-guided] #p453WelcomeBack { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  html[data-mtle-guided] #p453WelcomeBack > span:first-child { flex-basis: 100%; }
  html[data-mtle-guided] #p453WelcomeBack button { min-height: 44px; }
  /* The chooser already names the question and explains its controls. On a
     phone give that active surface the remaining room instead of repeating
     the generic wizard introduction above a fixed-height panel. */
  html[data-mtle-guided] .main-body:has(.right-panel.p394a-stage-open) .wizard-hero {
    display: none;
  }
  html[data-mtle-guided] .main-body:has(.right-panel.p394a-stage-open) .step-content-area {
    padding-block: 0;
  }
  html[data-mtle-guided] .main-body .right-panel.p394a-stage-open {
    height: auto;
    flex: 1 0 0;
  }
  html[data-mtle-guided] .right-panel.p394a-stage-open .p394a-stage-header {
    padding: 12px 16px;
  }
  /* iPhone landscape is wider than 480px. Keep text controls at the same
     readable size there so focus does not trigger automatic page zoom. */
  html[data-mtle-guided] .form-input,
  html[data-mtle-guided] .form-select { font-size: 16px; }
}
@media (max-width: 480px) {
  html[data-mtle-guided] .wizard-panel .step-content-area { padding: 20px 18px; }
  html[data-mtle-guided] .wizard-panel .step-bar { padding-inline: 12px; }
  html[data-mtle-guided] .wizard-panel .nav-buttons { padding-inline: 18px; }
  html[data-mtle-guided] .right-panel .p394a-stage-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mtle-guided] *, html[data-mtle-guided] *::before, html[data-mtle-guided] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* Place and boundary search share one calm, readable control on narrow screens. */
html[data-mtle-guided] .location-search-scope {
  display: flex;
  width: 100%;
  padding: 3px;
  gap: 4px;
  border: 1px solid var(--guided-border);
  border-radius: 8px;
  background: var(--guided-panel);
  box-shadow: none;
}
html[data-mtle-guided] .location-search-scope .segment-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
}
html[data-mtle-guided] .location-search-scope .segment-btn.active {
  background: #243548;
  border-color: #587596;
  color: #d6eaff;
}

/* Step 5 keeps the preview's state and review controls readable at narrow
   widths. The selected view is already named by its button and caption. */
html[data-mtle-guided][data-guided-step="5"] .preview-header {
  flex-wrap: wrap;
  gap: 8px 14px;
}
html[data-mtle-guided][data-guided-step="5"] .mtle-status-bar {
  flex: 1 1 480px;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-left: 0;
  padding-block: 3px;
}
html[data-mtle-guided][data-guided-step="5"] #msbMode,
html[data-mtle-guided][data-guided-step="5"] .msb-spacer,
html[data-mtle-guided][data-guided-step="5"] .p209-dm-label { display: none; }
html[data-mtle-guided][data-guided-step="5"] .msb-facts {
  flex: 0 1 auto;
  flex-wrap: wrap;
  color: var(--guided-muted);
}
html[data-mtle-guided][data-guided-step="5"] .msb-export {
  flex: 1 1 210px;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
html[data-mtle-guided][data-guided-step="5"] .msb-badge { flex: none; }
html[data-mtle-guided][data-guided-step="5"] .msb-export-copy,
html[data-mtle-guided][data-guided-step="5"] .msb-sub {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.4;
}
html[data-mtle-guided][data-guided-step="5"] .p209-display-mode-row {
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 8px 16px;
  padding: 10px 16px;
}
html[data-mtle-guided][data-guided-step="5"] .p209-display-mode-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 350px);
  max-width: 100%;
  border-radius: 8px;
}
html[data-mtle-guided][data-guided-step="5"] .p209-dm-btn {
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 5px;
  white-space: normal;
  line-height: 1.3;
}
html[data-mtle-guided][data-guided-step="5"] .p209-dm-caption {
  flex: 1 1 240px;
  min-width: 0;
  margin-left: 0;
  color: var(--guided-muted);
  font-size: 12px;
  line-height: 1.4;
}