/* maptolaserexpress.css — Phase 364 CSS extraction.
   This file is the FORMER inline <style> block of web/maptolaserexpress.html
   (head lines 8-2627 pre-364), moved verbatim. Cascade contract: it MUST
   load after vendor leaflet.css and BEFORE the p208/p209/p210/p212 mtle
   override sheets - the <link> in maptolaserexpress.html sits at the old
   <style> position to preserve rule order. Only deliberate edit vs the
   inline original: the two Inter @font-face url()s were rewritten from
   HTML-relative 'vendor/fonts/...' to app-local absolute
   '/web/vendor/fonts/...' because relative url()s in CSS resolve against
   THIS file's URL (/web/mtle/css/), not the page URL. No remote assets;
   no @import. */
    /* Inter webfont (vendored) */
    @font-face {
      font-family: 'Inter';
      src: url('/web/vendor/fonts/Inter-Regular.woff2') format('woff2'),
           url('/web/vendor/fonts/Inter-Regular.otf') format('opentype');
      font-weight: 400 600;
      font-style: normal;
      font-display: swap;
    }

    /* ===== THEME VARIABLES (matching styles.css) ===== */
    :root {
      --bg-primary: #111111;
      --bg-secondary: #1a1a1a;
      --bg-tertiary: #222222;
      --border-color: #303030;
      --border-hover: #404040;
      --text-primary: #ededed;
      --text-secondary: #a0a0a0;
      --text-muted: #666666;
      --accent-primary: #3b82f6;
      --accent-hover: #2563eb;
      --accent-light: #60a5fa;
      --accent-bg: rgba(59, 130, 246, 0.08);
      --success: #10b981;
      --success-hover: #059669;
      --success-bg: rgba(16, 185, 129, 0.08);
      --warning: #f59e0b;
      --warning-bg: rgba(245, 158, 11, 0.08);
      --danger: #ef4444;
      --mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

      /* Phase 96 (A): Compatibility aliases for legacy tokens */
      --accent: var(--accent-primary);
      --bg: var(--bg-primary);
      --card-bg: var(--bg-tertiary);
      --border: var(--border-color);
      --text: var(--text-primary);
      --text-dim: var(--text-secondary);
    }

    /* ===== RESET & BASE ===== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 13px;
      line-height: 1.5;
    }

    /* ===== APP LAYOUT ===== */
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* --- Header --- */
    .header {
      height: 48px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      flex-shrink: 0;
      z-index: 100;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header-title {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.3px;
    }
    .header-badge {
      font-size: 10px;
      font-weight: 500;
      color: var(--accent-light);
      background: var(--accent-bg);
      border: 1px solid rgba(59, 130, 246, 0.2);
      padding: 2px 7px;
      border-radius: 10px;
      letter-spacing: 0.3px;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* --- Main Body --- */
    .main-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* --- Left Panel (Wizard) --- */
    .wizard-panel {
      width: 420px;
      min-width: 360px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    /* Step Indicator Bar */
    .step-bar {
      display: flex;
      padding: 12px 16px;
      gap: 4px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      flex-shrink: 0;
    }
    .step-indicator {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      border: 1px solid transparent;
      background: transparent;
      font-family: inherit;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 500;
    }
    .step-indicator:hover {
      background: var(--bg-secondary);
      color: var(--text-secondary);
    }
    .step-indicator.active {
      background: var(--accent-bg);
      border-color: rgba(59, 130, 246, 0.25);
      color: var(--accent-light);
    }
    .step-indicator.completed {
      color: var(--success);
    }
    /* Phase 479 (WS4): Steps 3-5 read as locked until a U.S. location is
       committed.  aria-disabled (not disabled) — the chip stays focusable
       and clickable so activation lands on the navigation guard and yields
       the inline guidance instead of a silent dead-end. */
    .step-indicator.p479-locked {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .step-indicator.p479-locked:hover {
      background: transparent;
      color: var(--text-muted);
    }
    #btnNext[aria-disabled="true"] {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .step-num {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      border: 1.5px solid currentColor;
      flex-shrink: 0;
    }
    .step-indicator.active .step-num {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #fff;
    }
    .step-indicator.completed .step-num {
      background: var(--success);
      border-color: var(--success);
      color: #fff;
    }
    .step-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Step Content Area */
    .step-content-area {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }
    .step-content-area::-webkit-scrollbar {
      width: 6px;
    }
    .step-content-area::-webkit-scrollbar-track {
      background: transparent;
    }
    .step-content-area::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }
    .step-content-area::-webkit-scrollbar-thumb:hover {
      background: var(--border-hover);
    }

    .step-panel {
      display: none;
    }
    .step-panel.active {
      display: block;
    }

    /* Step title */
    .step-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
      letter-spacing: -0.3px;
    }
    .step-description {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }

    /* Navigation Buttons */
    .nav-buttons {
      display: flex;
      gap: 8px;
      padding: 12px 20px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
      flex-shrink: 0;
    }
    .nav-buttons .btn {
      flex: 1;
    }

    /* --- Right Panel (Map / Preview) --- */
    .right-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--bg-primary);
      overflow: hidden;
      position: relative;
    }

    /* Map panel (Steps 1-4) */
    #map-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
    }
    #map-panel.hidden { display: none; }

    .map-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      min-height: 40px;
    }
    .map-header-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .map-readouts {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-muted);
    }
    .map-readout-value {
      font-family: var(--mono);
      color: var(--accent-light);
    }

    #mte-map-full {
      flex: 1;
      width: 100%;
    }

    /* AOI overlay rectangle */
    .aoi-overlay {
      position: absolute;
      border: 2px dashed var(--accent-primary);
      background: rgba(59, 130, 246, 0.06);
      pointer-events: none;
      z-index: 600;
    }
    /* Phase 46: Tone down AOI overlay in boundary-backed modes */
    .aoi-overlay.boundary-mode {
      border: 1px dashed rgba(59, 130, 246, 0.35);
      background: rgba(59, 130, 246, 0.02);
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
    }

    /* MapChanged warning banner */
    .map-changed-banner {
      display: none;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 700;
      background: var(--warning-bg);
      border: 1px solid var(--warning);
      color: var(--warning);
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
    .map-changed-banner.visible { display: block; }

    /* ---- Phase 351 continuation FU1 (operator paused review 2026-05-29) ----
       Hide the legacy "Label style" / "Clipart style" segmented control rows
       and the "Additional cut pieces for glue-up" auxiliary strip when the
       wizard is in customer mode.  Both surfaces duplicate canonical
       Phase 351 contracts (FU5 + FU6 three-question card flows + the FU1
       AccentPiecePlan tile that already appears in the Design Preview piece
       list).  Operator / debug / Playwright callers retain access via
       ``?debug=1`` or ``?e2e=1`` which switch the body class to
       ``p351-debug-mode``. */
    html.p351-customer-mode .p351-legacy-segmented-row,
    html.p351-customer-mode .p351-legacy-aux-strip {
      display: none !important;
    }

    /* Phase 351 continuation FU11 (Workstream B, 2026-05-30):
       new Water Style customer card grid replaces the legacy pills
       in customer mode.  The new component is hidden by default;
       ``html.p351-customer-mode`` reveals it.  The legacy
       ``#waterLookCard`` is hidden in customer mode now that the
       replacement is in place (FU6 reverted FU5's hide because there
       was no replacement; FU11 ships it).  Operator / debug /
       Playwright callers retain access to the legacy pills under
       ``?debug=1`` / ``?e2e=1``. */
    .p351-contfu11-water-style-card {
      display: none;
    }
    html.p351-customer-mode .p351-contfu11-water-style-card {
      display: block;
    }
    html.p351-customer-mode .p351-legacy-water-look-card {
      display: none !important;
    }
    /* Phase 352 (water-style unification): in customer mode the Water
       Style is picked ONCE via the FU11 card grid above, so the redundant
       per-surface style dropdown is hidden — the customer's card choice
       seeds ``style_vector_default_style``.  Debug mode keeps the raw
       dropdown for operator triage.  The customer-only hint that replaces
       it is shown only in customer mode. */
    html.p351-customer-mode .p352-redundant-style-row { display: none !important; }
    .p352-same-style-customer-hint { display: none; }
    html.p351-customer-mode .p352-same-style-customer-hint { display: block; }
    /* Phase 352: in customer mode the per-piece water-depth flow
       (#p352WaterDepthFlow) supersedes the legacy global question card +
       flat per-layer dropdown rows.  Both stay visible in debug/e2e mode
       so the existing onP349FugStyleRowChange / onP350WaterStyleModeChange
       contract suites keep working. */
    html.p351-customer-mode #p350WaterStyleQuestionCard { display: none !important; }
    html.p351-customer-mode #p349FugPerLayerStyleRows { display: none !important; }
    /* Phase 352 (depth-flow pager): the customer pager renders ONE depth
       question per screen inside #p352WaterDepthFlow, and the per-layer
       "Vector Style Distance" (Near/Regular/Far) it surfaces on each
       per-layer screen supersedes the legacy GLOBAL "Water texture spacing"
       card (#p347SpacingRow).  Hide that global card in customer mode so the
       pager reads as one-question-per-screen (resolves the streamlining
       plan's "distance asked twice" finding).  Debug/e2e keep the global
       card so the phase347 spacing specs are untouched. */
    html.p351-customer-mode #p347SpacingRow { display: none !important; }
    /* Phase 352 (depth-flow pager): in customer mode the pager
       (#p352WaterDepthFlow: gate → layers → boundary → per-layer → frame) is
       the ONLY depth UI.  Force its container visible (it lives inside
       #p346DepthControls, which _p346SyncControls hides while depth is OFF —
       the GATE must show with depth off), and hide the legacy controls the
       pager replaces: the raw "Depth Map (water)" checkbox row label, the
       glossary blurb (the gate body covers it), and the budget hint (the
       "Add Frame Plate" affordance is now the frame screen).  The checkbox
       itself stays in the DOM (hidden) — the gate drives it programmatically.
       Debug/e2e keeps all of them (the all-at-once render + the layer-function
       specs are untouched). */
    html.p351-customer-mode #p346DepthControls { display: block !important; }
    html.p351-customer-mode .p352-depth-legacy-toggle,
    html.p351-customer-mode .p352-depth-legacy-glossary,
    html.p351-customer-mode #p299fu12BudgetHint { display: none !important; }
    /* Phase 352 cont (b): the "Water depth" question screen.  In customer
       mode hide the developer chrome on the Layer Functions card — the
       card title "Layer Functions", the "exportable" stage badges, and the
       "Derived layer geometry…" engineering blurb — and show a plain
       customer question heading instead.  Debug/e2e mode keeps every label
       so the phase272 / phase273 layer-function specs are untouched. */
    html.p351-customer-mode .p352-depth-dev-chrome { display: none !important; }
    .p352-depth-customer-head { display: none; }
    html.p351-customer-mode .p352-depth-customer-head { display: block; }
    /* Phase 352 (F8, browser-QA loop-5): the depth pager is driven by the OUTER
       wizard Back/Next (see nextStep/prevStep) — hide the duplicate per-screen
       nav row in customer mode so there is ONE Next and the customer cannot
       bypass the pager.  Class-based (not a [data-testid] selector) to avoid
       leaking the string into <style> ahead of the rendered row. */
    html.p351-customer-mode .p352-pager-nav-row { display: none !important; }
    /* Phase 352 (F10, browser-QA loop-5): F1 hid the manual "Refresh Overlay"
       button in customer mode, so the stale-overlay banner must not tell the
       customer to click it — hide that clause (debug keeps it; the button
       exists there). */
    html.p351-customer-mode .p352-stale-refresh-hint { display: none; }
    /* Phase 352 (b) — F1 fix (browser-QA): the Location "Map changed → Refresh"
       banner and the manual "Refresh Overlay" button both fire the LEGACY
       ``refreshOverlay()`` overlay-sampling path.  Every AUTOMATIC caller of it
       was gated to debug/E2E at Phase 76, and Phase 167 moved freshness to the
       P220/P221 preview pipeline (preview auto-refreshes on success), so these
       two manual surfaces are the only live customer entry points to the dead
       path.  Hide them in customer mode; operators keep them under
       ?debug=1 / ?e2e=1. */
    html.p351-customer-mode #mapChangedBanner,
    html.p351-customer-mode #refreshOverlayBtn { display: none !important; }
    /* Phase 363 (customer-wizard UX rebaseline): the legacy "Preview Mode"
       <select> (#previewModeRow → #previewModeSelect, onPreviewModeChange) is
       a SECOND, overlapping way to pick a preview mode that duplicates the
       canonical Phase-209/239 "View" segmented control (#p209-display-mode-row:
       Design Preview / Assembly / Linework Review).  Two pickers for one choice
       is the "conflicting controls" the customer wizard should not show.  Hide
       the legacy row in customer mode — the segmented control becomes the single
       customer-facing preview-mode picker.  The <select> stays in the DOM (only
       display:none) so the Phase-203 segmented↔select sync, and the
       debug/e2e/Playwright specs that read its options/value, are untouched;
       operators keep it under ?debug=1 / ?e2e=1 (p351-debug-mode). */
    html.p351-customer-mode #previewModeRow { display: none !important; }
    /* Active-state styling for the new water style cards mirrors the
       parksStyleCard ``.choice-card.active`` look so the customer's
       eye reads the chosen style immediately. */
    .p351-contfu11-water-style-choice .choice-card-desc {
      color: #9ca3af;
    }
    .p351-contfu11-water-style-choice.active .choice-card-desc {
      color: #93c5fd;
    }

    /* Phase 351 continuation FU6 (paused-review #3, 2026-05-30):
       UN-HIDE the legacy ``waterLookCard`` that continuation FU5 had
       suppressed.  The operator's 2026-05-30 follow-up was clear:
       "Dev AI hid the water feature cards instead of scaling them
       into the wizard flow."  Reverting the hide restores the
       customer's access to water style choices while the proper
       customer-card rebuild (continuation FU7, in flight) is built.
       The ``.p351-legacy-water-look-card`` class hook is preserved
       on ``#waterLookCard`` so a future PR can re-apply a targeted
       hide once the canonical card flow is shipping.

       The FU5 hint copy continues to render in customer mode — it's
       now framing the legacy card with context rather than replacing
       it. */
    .p351-contfu5-water-style-hint {
      display: none;
    }
    html.p351-customer-mode .p351-contfu5-water-style-hint {
      display: block;
      margin: 8px 0 4px;
      padding: 10px 12px;
      font-size: 12px;
      line-height: 1.5;
      color: #cbd5e1;
      background: rgba(35, 50, 65, 0.55);
      border: 1px solid rgba(80, 130, 170, 0.35);
      border-left: 3px solid rgba(80, 130, 170, 0.85);
      border-radius: 4px;
    }
    html.p351-customer-mode .p351-contfu5-water-style-hint-title {
      font-weight: 600;
      color: #93c5fd;
      margin-bottom: 3px;
    }

    /* ---- Phase 351 continuation FU4 (paused-review §E, 2026-05-29) ----
       Debug strip overlay.  Default hidden; ``html.p351-debug-mode``
       (set by ?debug=1 or ?e2e=1 via the continuation-FU1 toggle)
       flips it to a fixed-position bottom-right card.  Customer mode
       never sees it.  The strip is also hidden if the operator
       clicks the close × — the customer-mode rule still wins so a
       customer-mode session cannot accidentally re-show it. */
    .p351-contfu4-debug-strip {
      display: none;
    }
    html.p351-debug-mode .p351-contfu4-debug-strip {
      display: block;
      position: fixed;
      bottom: 8px;
      right: 8px;
      z-index: 99999;
      width: 280px;
      max-width: calc(100vw - 16px);
      font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
      font-size: 11px;
      color: #cbd5e1;
      background: rgba(15, 23, 32, 0.94);
      border: 1px solid rgba(80, 130, 170, 0.55);
      border-radius: 4px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
      pointer-events: auto;
    }
    .p351-contfu4-debug-strip[data-collapsed="true"] {
      display: none !important;
    }
    .p351-contfu4-debug-strip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;
      background: rgba(35, 50, 65, 0.95);
      border-bottom: 1px solid rgba(80, 130, 170, 0.45);
      border-radius: 4px 4px 0 0;
    }
    .p351-contfu4-debug-strip-title {
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #93c5fd;
    }
    .p351-contfu4-debug-strip-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 0 4px;
    }
    .p351-contfu4-debug-strip-close:hover {
      color: #f1f5f9;
    }
    .p351-contfu4-debug-strip-body {
      padding: 6px 8px;
    }
    .p351-contfu4-debug-strip-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 2px 0;
      border-bottom: 1px dotted rgba(80, 130, 170, 0.22);
    }
    .p351-contfu4-debug-strip-row:last-child {
      border-bottom: none;
    }
    .p351-contfu4-debug-strip-label {
      color: #94a3b8;
      flex-shrink: 0;
    }
    .p351-contfu4-debug-strip-value {
      color: #f1f5f9;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      max-width: 60%;
    }
    /* Phase 351 continuation FU8: action row hosts two tiny buttons
       used by an operator to verify the stale-localStorage hypothesis
       for the paused-review #3 complaint #2.  Buttons are scoped to
       the debug strip so they never leak into customer mode. */
    .p351-contfu4-debug-strip-row.p351-contfu8-actions {
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
    }
    .p351-contfu8-clear-btn,
    .p351-contfu8-copy-btn {
      background: rgba(231, 76, 60, 0.18);
      color: #fca5a5;
      border: 1px solid rgba(231, 76, 60, 0.45);
      padding: 2px 6px;
      font-size: 10px;
      border-radius: 3px;
      cursor: pointer;
      font-family: inherit;
    }
    .p351-contfu8-copy-btn {
      background: rgba(59, 130, 246, 0.18);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, 0.45);
    }
    .p351-contfu8-clear-btn:hover {
      background: rgba(231, 76, 60, 0.36);
    }
    .p351-contfu8-copy-btn:hover {
      background: rgba(59, 130, 246, 0.36);
    }

    /* Preview panel (Step 5) */
    #preview-panel {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
    }
    #preview-panel.visible { display: flex; }

    .preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      min-height: 40px;
    }
    .preview-header-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .preview-status {
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .preview-status .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-muted);
    }
    .preview-status.loading .dot {
      background: var(--warning);
      animation: pulse 1s infinite;
    }
    .preview-status.ready .dot {
      background: var(--success);
    }
    .preview-status.error .dot {
      background: var(--danger);
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* Phase 18: Preview mode selector */
    .preview-mode-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }
    .preview-mode-row label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .preview-mode-row select {
      flex: 1;
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
    }
    .preview-mode-row select:hover {
      border-color: var(--border-hover);
    }

    .preview-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      background: #2a2a2a;
      background-image:
        linear-gradient(45deg, #252525 25%, transparent 25%),
        linear-gradient(-45deg, #252525 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #252525 75%),
        linear-gradient(-45deg, transparent 75%, #252525 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    .preview-area img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.4);
    }
    .preview-placeholder {
      text-align: center;
      color: var(--text-muted);
    }
    .preview-placeholder-icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.3;
    }
    .preview-placeholder p {
      font-size: 13px;
    }
    .preview-error {
      color: var(--danger);
      font-size: 12px;
      text-align: center;
      max-width: 300px;
    }

    /* Phase 80: MTE Preview Viewer styles */
    .mte-pv-wrapper {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
    }
    .mte-pv-canvas {
      flex: 1;
      overflow: hidden;
      position: relative;
      cursor: grab;
    }
    .mte-pv-canvas:active { cursor: grabbing; }
    .mte-pv-svg-host {
      position: absolute;
      top: 0; left: 0;
      will-change: transform;
    }
    .mte-pv-svg-host svg {
      display: block;
      background: #ffffff;
      box-shadow: 0 2px 16px rgba(0,0,0,0.35);
      border-radius: 2px;
    }
    .mte-pv-veil {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(30,30,30,0.45);
      z-index: 10;
      pointer-events: none;
    }
    .mte-pv-veil-pill {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 12px;
      padding: 6px 16px;
      border-radius: 16px;
      border: 1px solid var(--border-color);
    }
    .mte-pv-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      background: var(--bg-tertiary);
      border-top: 1px solid var(--border-color);
      flex-shrink: 0;
    }
    .mte-pv-btn {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 3px 10px;
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.12s;
    }
    .mte-pv-btn:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-color: var(--border-hover);
    }
    /* Phase 82 (A1): Annotation focus context buttons */
    .mte-pv-focus-btn {
      font-size: 10px;
      padding: 2px 8px;
      color: var(--text-muted);
      border-color: transparent;
      background: transparent;
    }
    .mte-pv-focus-btn:hover {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--bg-secondary);
    }
    .mte-pv-sep {
      color: var(--border-color);
      font-size: 10px;
      margin: 0 2px;
      user-select: none;
    }
    .mte-pv-zoom-indicator {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--mono);
    }

    /* ===== Phase 96 (A/B): Shared utility classes for safe rendering ===== */
    .mte-badge {
      display: inline-block; padding: 1px 6px; border-radius: 3px;
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      background: var(--accent-primary); color: var(--bg-primary); flex-shrink: 0;
    }
    .mte-boundary-bar {
      margin-top: 8px; padding: 8px 10px;
      background: var(--bg-tertiary); border: 1px solid var(--accent-primary); border-radius: 6px;
    }
    .mte-planner-grid {
      display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px;
    }
    .mte-planner-dim { color: var(--text-secondary); }

    /* ===== FORM COMPONENTS ===== */

    /* Card */
    .card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }
    .card-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Section Label */
    .section-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      margin-top: 16px;
    }
    .section-label:first-child {
      margin-top: 0;
    }

    /* Form Row */
    .form-row {
      margin-bottom: 12px;
    }
    .form-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    /* Input */
    .form-input {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 13px;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--accent-primary);
    }
    .form-input::placeholder {
      color: var(--text-muted);
    }
    .form-input:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Select */
    .form-select {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .form-select:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    /* Inline inputs */
    .inline-inputs {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .inline-inputs .form-input {
      width: auto;
      flex: 1;
    }
    .inline-inputs .sep {
      color: var(--text-muted);
      font-size: 13px;
      flex-shrink: 0;
    }

    /* Button */
    .btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .btn-primary {
      background: var(--accent-primary);
      color: #fff;
      border-color: var(--accent-primary);
    }
    .btn-primary:hover:not(:disabled) {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
    }
    .btn-secondary {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    .btn-secondary:hover:not(:disabled) {
      background: var(--border-color);
      border-color: var(--border-hover);
    }
    .btn-success {
      background: var(--success);
      color: #fff;
      border-color: var(--success);
    }
    .btn-success:hover:not(:disabled) {
      background: var(--success-hover);
      border-color: var(--success-hover);
    }
    .btn-warning {
      background: var(--warning);
      color: #000;
      border-color: var(--warning);
    }
    .btn-warning:hover:not(:disabled) {
      background: #d97706;
      border-color: #d97706;
    }
    .btn-danger-outline {
      background: transparent;
      color: var(--danger);
      border-color: var(--danger);
    }
    .btn-danger-outline:hover:not(:disabled) {
      background: rgba(239, 68, 68, 0.1);
    }
    .btn-block {
      width: 100%;
    }
    .btn-lg {
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
    }
    .btn-sm {
      padding: 5px 10px;
      font-size: 11px;
    }

    /* Hint */
    .hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Help icon */
    .help-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
      line-height: 1;
    }
    .help-btn:hover {
      background: var(--accent-bg);
      border-color: var(--accent-primary);
      color: var(--accent-light);
    }

    /* Popover */
    .popover {
      display: none;
      position: fixed;
      z-index: 9999;
      max-width: 280px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 12px;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      pointer-events: none;
    }
    .popover.visible {
      display: block;
    }

    /* Segment Selector (radio group) */
    .segment-group {
      display: flex;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      overflow: hidden;
    }
    .segment-btn {
      flex: 1;
      padding: 8px 12px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s;
      border-right: 1px solid var(--border-color);
      text-align: center;
    }
    .segment-btn:last-child {
      border-right: none;
    }
    .segment-btn:hover {
      color: var(--text-secondary);
      background: var(--bg-tertiary);
    }
    .segment-btn.active {
      background: var(--accent-primary);
      color: #fff;
    }

    /* Toggle Switch */
    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
    }
    .toggle-row + .toggle-row {
      border-top: 1px solid rgba(48,48,48,0.5);
    }
    .toggle-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    .toggle-switch {
      width: 36px;
      height: 20px;
      background: var(--border-color);
      border-radius: 10px;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    button.toggle-switch { border: 0; padding: 0; }
    .mtle-p256-locked { opacity: 0.55; cursor: wait; }
    .toggle-switch.active {
      background: var(--accent-primary);
    }
    .toggle-switch::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform 0.2s;
    }
    .toggle-switch.active::after {
      transform: translateX(16px);
    }
    /* Phase 35: Checkbox-based toggle (for boundary suggest) */
    label.toggle-switch { display:inline-block; width:36px; height:20px; position:relative; cursor:pointer; flex-shrink:0; }
    label.toggle-switch input { opacity:0; width:0; height:0; }
    .toggle-slider { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--border-color); border-radius:10px; transition:background .2s; }
    .toggle-slider::after { content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; top:2px; left:2px; transition:transform .2s; }
    label.toggle-switch input:checked + .toggle-slider { background:var(--accent-primary); }
    label.toggle-switch input:checked + .toggle-slider::after { transform:translateX(16px); }

    /* Piece selector */
    .piece-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .piece-card {
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 8px;
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
    }
    .piece-card:hover {
      border-color: var(--border-hover);
    }
    .piece-card.active {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
    }
    .piece-card-num {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: 4px;
    }
    .piece-card.active .piece-card-num {
      color: var(--accent-light);
    }
    .piece-card-label {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.3;
    }
    .piece-card.active .piece-card-label {
      color: var(--text-secondary);
    }
    /* Piece layer icons */
    .piece-layers {
      display: flex;
      justify-content: center;
      gap: 2px;
      margin-bottom: 6px;
      height: 20px;
      align-items: flex-end;
    }
    .piece-layer-bar {
      width: 20px;
      border-radius: 2px 2px 0 0;
      background: var(--border-color);
    }
    .piece-card.active .piece-layer-bar {
      background: var(--accent-primary);
    }

    /* Phase 89/91 (B1): Intent preset selector — enhanced prominence */
    .intent-preset-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .intent-preset-card {
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 10px;
      padding: 14px 10px 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
    }
    .intent-preset-card:hover {
      border-color: var(--border-hover);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .intent-preset-card.active {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
      box-shadow: 0 0 0 1px var(--accent-primary), 0 2px 8px rgba(0,0,0,0.1);
    }
    .intent-preset-icon {
      display: block;
      width: 100%;
      max-width: 220px;
      height: auto;
      margin: 0 auto 6px;
      stroke: var(--text-secondary);
      fill: none;
      transition: stroke 0.15s;
    }
    .intent-preset-card:hover .intent-preset-icon {
      stroke: var(--accent-light);
    }
    .intent-preset-card.active .intent-preset-icon {
      stroke: var(--accent-light);
    }
    .intent-preset-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .intent-preset-card.active .intent-preset-label {
      color: var(--accent-light);
    }
    .intent-preset-desc {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.35;
      margin-bottom: 4px;
    }
    .intent-preset-bestfor {
      font-size: 9px;
      color: var(--text-muted);
      font-style: italic;
      margin-bottom: 4px;
    }
    .intent-preset-pieces {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .intent-preset-card.active .intent-preset-pieces {
      color: var(--text-secondary);
    }
    /* Phase 91: Smooth hide for controls overridden by preset */
    .preset-hidden {
      display: none !important;
    }
    .preset-coerced-note {
      font-size: 9px;
      color: var(--text-muted);
      font-style: italic;
      padding: 4px 0 0;
    }
    /* Phase 153: Recommendation badge on piece cards and intent presets */
    .piece-card-badge {
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--accent-primary);
      margin-top: 3px;
    }
    .piece-card.active .piece-card-badge {
      color: var(--accent-light);
    }
    /* Phase 153: Build guidance card */
    .build-guidance-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 12px;
      margin-top: 8px;
    }
    .build-guidance-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .build-guidance-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 12px;
      font-size: 11px;
    }
    .build-guidance-dim {
      color: var(--text-muted);
    }
    .build-guidance-val {
      color: var(--text-secondary);
      font-weight: 500;
    }
    .build-guidance-note {
      font-size: 10px;
      color: var(--text-muted);
      font-style: italic;
      margin-top: 8px;
      line-height: 1.4;
    }

    /* Geocode results */
    .geocode-results {
      display: none;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-primary);
      max-height: 200px;
      overflow-y: auto;
      margin-top: 4px;
    }
    .geocode-results.visible {
      display: block;
    }
    .geocode-result-item {
      padding: 8px 12px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      border-bottom: 1px solid var(--border-color);
      transition: background 0.1s;
    }
    .geocode-result-item:last-child {
      border-bottom: none;
    }
    .geocode-result-item:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
    }

    /* Diagonal display */
    .diag-display {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 12px;
    }
    .diag-value {
      font-family: var(--mono);
      font-weight: 600;
      color: var(--accent-light);
    }

    /* Feature toggles */
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }
    .feature-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      font-size: 12px;
      min-width: 0;
      overflow: hidden;
    }
    .feature-item:hover {
      border-color: var(--border-hover);
    }
    .feature-item.active {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
    }
    .feature-item-icon {
      font-size: 14px;
      width: 16px;
      text-align: center;
      flex-shrink: 0;
    }
    .feature-item-text {
      flex: 1;
      min-width: 0;
    }
    .feature-item-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }
    .feature-item .toggle-switch {
      flex-shrink: 0;
    }

    /* Clipart Grid */
    .clipart-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      /* Phase 446: the browser now holds ~1512 icons — scroll it within the panel
         instead of blowing out the wizard height (search box stays fixed above). */
      max-height: 320px;
      overflow-y: auto;
    }
    .clipart-card {
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 6px 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
    }
    .clipart-card:hover {
      border-color: var(--border-hover);
    }
    .clipart-card.active {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
    }
    .clipart-card svg {
      width: 36px;
      height: 36px;
      margin-bottom: 4px;
    }
    .clipart-card-label {
      font-size: 9px;
      color: var(--text-muted);
      line-height: 1.2;
    }
    .clipart-card.active .clipart-card-label {
      color: var(--text-secondary);
    }

    /* Phase 446 (operator batch B+C): "controls-top, browser-below" clip-art panel.
       The everyday controls (placement / size / rotation) sit in a bar at the top;
       the icon browser scrolls below and lazy-renders in batches. */
    .clipart-controls-top {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      margin-bottom: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }
    .clipart-controls-top .form-row { margin: 0; }
    /* Placement = a 2x2 corner grid (the backend supports the four corners). It
       reuses .segment-group for the active-state system, but the p210 theme
       (`html[data-p210="v1"] .segment-group`, specificity 0,2,1) forces
       `display:inline-flex` + a 999px pill + wide button padding, which collapsed
       the grid into a single clipped row.  The layout-critical props are therefore
       forced with !important so the 2x2 wins in every theme (p210 pill AND base). */
    .clipart-placement-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      max-width: 116px;
      border-radius: 10px !important;
      overflow: visible !important;
    }
    .clipart-placement-grid .segment-btn {
      font-size: 15px;
      line-height: 1;
      padding: 9px 0 !important;
      border-radius: 7px !important;
      border-right: none;
    }
    /* Lazy-render "Show more" control appended below the capped batch. */
    .clipart-grid-more {
      grid-column: 1 / -1;
      margin: 8px 2px 2px;
      padding: 8px;
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      text-align: center;
    }
    .clipart-grid-more:hover {
      border-color: var(--border-hover);
      color: var(--text-primary);
    }

    /* Slider */
    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .slider-input {
      flex: 1;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: var(--border-color);
      border-radius: 2px;
      outline: none;
    }
    .slider-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      background: var(--accent-primary);
      border-radius: 50%;
      cursor: pointer;
    }
    .slider-input::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: var(--accent-primary);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }
    .slider-value {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--accent-light);
      min-width: 48px;
      text-align: right;
    }

    /* Derived dimensions */
    .dims-display {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px 14px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 12px;
    }
    .dims-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .dims-label {
      color: var(--text-muted);
    }
    .dims-value {
      color: var(--text-primary);
      font-family: var(--mono);
      font-weight: 500;
    }

    /* Review summary */
    .summary-table {
      width: 100%;
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 6px 0;
      border-bottom: 1px solid rgba(48,48,48,0.4);
      font-size: 12px;
    }
    .summary-row:last-child {
      border-bottom: none;
    }
    .summary-key {
      color: var(--text-muted);
      flex-shrink: 0;
      margin-right: 12px;
    }
    .summary-val {
      color: var(--text-primary);
      font-family: var(--mono);
      text-align: right;
      word-break: break-all;
    }

    /* Export buttons area */
    .export-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }

    /* Leaflet overrides for dark theme */
    .leaflet-container {
      background: var(--bg-primary) !important;
    }
    .leaflet-tile-pane {
      filter: brightness(0.75) contrast(1.1) saturate(0.5);
    }
    .leaflet-control-zoom {
      border: 1px solid var(--border-color) !important;
      border-radius: 6px !important;
      overflow: hidden;
    }
    .leaflet-control-zoom a {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--border-color) !important;
      width: 30px !important;
      height: 30px !important;
      line-height: 30px !important;
      font-size: 16px !important;
    }
    .leaflet-control-zoom a:hover {
      background: var(--bg-tertiary) !important;
    }

    /* Rotate control styling */
    .mte-rotate-control {
      background: var(--bg-secondary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 6px !important;
      overflow: hidden;
    }
    .mte-rotate-control a {
      display: block;
      width: 30px !important;
      height: 30px !important;
      line-height: 30px !important;
      text-align: center;
      color: var(--text-primary) !important;
      background: var(--bg-secondary) !important;
      border-bottom: 1px solid var(--border-color) !important;
      text-decoration: none;
      font-size: 14px;
      cursor: pointer;
    }
    .mte-rotate-control a:last-of-type {
      border-bottom: none !important;
    }
    .mte-rotate-control a:hover {
      background: var(--bg-tertiary) !important;
    }
    .mte-rotate-control .bearing-readout {
      font-size: 10px;
      color: var(--text-muted);
      padding: 2px 0 3px 0;
      text-align: center;
      min-width: 30px;
      display: block;
    }

    /* Nav inputs grid (Step 2 Center + Scale) */
    .nav-inputs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 8px;
    }
    .nav-inputs-grid .form-row { margin-bottom: 0; }
    .nav-inputs-actions {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }

    /* Style overlay markers (Step 4 live preview) */
    .style-label-marker {
      background: transparent !important;
      border: none !important;
      white-space: nowrap;
      pointer-events: none;
      line-height: 1.3;
    }
    .style-label-marker .style-label-title {
      font-weight: 600;
      color: #ededed;
      text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
    }
    .style-label-marker .style-label-subtitle {
      font-size: 0.85em;
      color: #a0a0a0;
      text-shadow: 0 0 4px rgba(0,0,0,0.8);
    }
    .style-label-marker .style-label-latlon {
      font-size: 0.75em;
      color: #666;
      font-family: var(--mono);
      text-shadow: 0 0 4px rgba(0,0,0,0.8);
    }
    .style-label-box {
      border: 1px solid rgba(255,255,255,0.4);
      padding: 4px 8px;
      border-radius: 3px;
      background: rgba(0,0,0,0.3);
    }

    /* Stale sample warning (Step 4) */
    .stale-sample-warning {
      display: none;
      padding: 8px 12px;
      background: var(--warning-bg);
      border: 1px solid var(--warning);
      border-radius: 6px;
      font-size: 11px;
      color: var(--warning);
      margin-bottom: 12px;
    }
    .stale-sample-warning.visible { display: block; }

    /* Phase 146: Unified water look pill selector */
    .water-look-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .water-look-pill {
      flex: 1 1 auto;
      min-width: 80px;
      padding: 7px 10px;
      border: 1px solid #555;
      border-radius: 6px;
      background: #2a2a2a;
      color: #b0b0b0;
      font-size: 11px;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      user-select: none;
      line-height: 1.3;
    }
    .water-look-pill:hover {
      background: #333;
      border-color: #777;
      color: #e0e0e0;
    }
    .water-look-pill.active {
      background: rgba(60,140,180,0.25);
      border-color: #58a0e8;
      color: #e8f4f8;
      font-weight: 600;
    }
    .water-look-pill .pill-label {
      display: block;
      font-size: 12px;
    }
    .water-look-pill .pill-desc {
      display: block;
      font-size: 9px;
      color: #888;
      margin-top: 2px;
    }
    .water-look-pill.active .pill-desc { color: #8cc; }

    /* MTLE-UIR-01: Choice-card grid for railway/parks style sub-panels.
       Large card-style buttons with an inline SVG preview of each style.
       Lives inside the left-sidebar card — 2 columns at 420px width. */
    .choice-card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      margin-top: 4px;
    }
    .choice-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 6px;
      border: 1.5px solid #555;
      border-radius: 6px;
      background: #2a2a2a;
      color: #b0b0b0;
      font-family: inherit;
      font-size: 11px;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .choice-card:hover {
      background: #333;
      border-color: #777;
      color: #e0e0e0;
    }
    .choice-card.active {
      background: rgba(60,140,180,0.25);
      border-color: #58a0e8;
      color: #e8f4f8;
    }
    .choice-card svg {
      width: 40px;
      height: 24px;
      flex-shrink: 0;
    }
    .choice-card .choice-card-label {
      font-weight: 600;
      font-size: 11px;
      margin-top: 2px;
    }
    .choice-card .choice-card-desc {
      font-size: 9px;
      color: #888;
      line-height: 1.2;
    }
    .choice-card.active .choice-card-desc { color: #8cc; }

    .water-advanced-toggle {
      font-size: 11px;
      color: #6b7280;
      cursor: pointer;
      margin-top: 6px;
      user-select: none;
    }
    .water-advanced-toggle:hover { color: #9ca3af; }
    .water-advanced-body {
      display: none;
      margin-top: 8px;
      padding: 8px;
      border: 1px solid #3a3a3a;
      border-radius: 6px;
      background: #1e1e1e;
    }
    .water-advanced-body.open { display: block; }

    /* ===== Phase 152: Progressive disclosure — reusable advanced section pattern ===== */
    .advanced-toggle {
      font-size: 11px;
      color: #6b7280;
      cursor: pointer;
      margin-top: 6px;
      user-select: none;
    }
    .advanced-toggle:hover { color: #9ca3af; }
    .advanced-body {
      display: none;
      margin-top: 8px;
      padding: 8px;
      border: 1px solid #3a3a3a;
      border-radius: 6px;
      background: #1e1e1e;
    }
    .advanced-body.open { display: block; }

    #labelMarqueeStatus { margin: 6px 0; }
    #labelMarqueeRetry { margin-top: 6px; }
    #labelMarqueeStatus[hidden],
    #labelMarqueeRetry[hidden] { display: none !important; }

    /* Phase 152: Export summary card */
    .export-summary-card {
      background: rgba(59,130,246,0.06);
      border: 1px solid rgba(59,130,246,0.15);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }
    .export-summary-card .export-summary-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }
    .export-summary-card .export-summary-item {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* Phase 154: Export Confidence card */
    .export-confidence-card {
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 12px;
      border: 1.5px solid;
    }
    .export-confidence-card.status-ready {
      background: rgba(34,197,94,0.06);
      border-color: rgba(34,197,94,0.25);
    }
    .export-confidence-card.status-advisory {
      background: rgba(234,179,8,0.06);
      border-color: rgba(234,179,8,0.3);
    }
    .export-confidence-card.status-blocked {
      background: rgba(239,68,68,0.06);
      border-color: rgba(239,68,68,0.25);
    }
    .export-confidence-card.status-unknown {
      background: rgba(107,114,128,0.06);
      border-color: rgba(107,114,128,0.2);
    }
    .export-confidence-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .export-confidence-header .ec-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }
    .export-confidence-header .ec-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .ec-badge.badge-ready { background: rgba(34,197,94,0.15); color: #15803d; }
    .ec-badge.badge-advisory { background: rgba(234,179,8,0.15); color: #a16207; }
    .ec-badge.badge-blocked { background: rgba(239,68,68,0.15); color: #dc2626; }
    .ec-badge.badge-unknown { background: rgba(107,114,128,0.15); color: #4b5563; }
    .ec-status-line {
      font-size: 12px;
      margin-bottom: 6px;
      line-height: 1.5;
    }
    .ec-status-line.status-ready { color: #15803d; }
    .ec-status-line.status-advisory { color: #a16207; }
    .ec-status-line.status-blocked { color: #dc2626; }
    .ec-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 10px;
      font-size: 12px;
      margin-top: 6px;
    }
    .ec-grid .ec-dim { color: var(--text-muted); font-weight: 500; }
    .ec-grid .ec-val { color: var(--text); }
    .ec-pieces-list {
      margin: 6px 0 2px 0;
      padding: 0 0 0 16px;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .ec-advisory-box {
      margin-top: 8px;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 12px;
    }
    .ec-advisory-box.box-advisory {
      background: rgba(234,179,8,0.08);
      border: 1px solid rgba(234,179,8,0.2);
      color: #92400e;
    }
    .ec-advisory-box.box-blocked {
      background: rgba(239,68,68,0.08);
      border: 1px solid rgba(239,68,68,0.2);
      color: #991b1b;
    }
    .ec-next-action {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-muted);
      font-style: italic;
    }
    /* Phase 155 Track C: Blocked export button */
    .btn-blocked {
      opacity: 0.55;
      cursor: not-allowed;
      background: #6c757d !important;
      border-color: #6c757d !important;
    }

    /* =====================================================================
       MTLE-UIR-02: Wizard Shell Recovery + Pseudo-3D Visual Language
       =====================================================================
       Additive CSS block that:
         - lifts the step bar to feel like a real wizard (larger circles,
           progress rail, active-step emphasis)
         - adds a per-step "hero" header (step N • title • subtitle)
         - applies pseudo-3D treatment (soft elevation, layered plate look)
           to piece cards, intent preset cards, choice cards, and the
           export confidence card
         - introduces a layered preview frame so the right-side stage reads
           as a physical product stage, not a plain rectangle
       No paint-only SVG tricks (no gradients/patterns/filters in the actual
       LightBurn export); everything here is pure UI chrome. */

    /* ---- Wizard step bar (recovered feel) ---- */
    .step-bar {
      padding: 14px 16px 16px;
      gap: 6px;
      background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
      border-bottom: 1px solid var(--border-color);
      position: relative;
    }
    .step-bar::after {
      /* Subtle progress rail behind the step circles */
      content: '';
      position: absolute;
      left: 32px; right: 32px; top: 28px;
      height: 2px;
      background: linear-gradient(90deg, var(--border-color), var(--border-color));
      border-radius: 1px;
      z-index: 0;
      pointer-events: none;
    }
    .step-indicator {
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 4px 4px 6px;
      position: relative;
      z-index: 1;
      min-width: 0;
    }
    .step-indicator .step-num {
      width: 26px;
      height: 26px;
      font-size: 12px;
      border-width: 2px;
      background: var(--bg-secondary);
      box-shadow: 0 2px 4px rgba(0,0,0,0.35);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .step-indicator:hover .step-num {
      transform: translateY(-1px);
    }
    .step-indicator.active {
      background: transparent;
      border-color: transparent;
    }
    .step-indicator.active .step-num {
      width: 30px;
      height: 30px;
      font-size: 13px;
      box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.22),
        0 4px 10px rgba(59, 130, 246, 0.35);
      transform: translateY(-1px);
    }
    .step-indicator.completed .step-num {
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }
    .step-indicator .step-label {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.2px;
      max-width: 100%;
      color: var(--text-muted);
    }
    .step-indicator.active .step-label {
      color: var(--accent-light);
    }
    .step-indicator.completed .step-label {
      color: var(--success);
    }

    /* ---- Wizard step hero header (large number + title + subtitle) ---- */
    .wizard-hero {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 18px 16px;
      margin: -20px -20px 18px;
      background: linear-gradient(180deg, rgba(59,130,246,0.09) 0%, rgba(59,130,246,0.02) 100%);
      border-bottom: 1px solid rgba(59,130,246,0.18);
    }
    .wizard-hero-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-hover) 100%);
      color: #fff;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 14px rgba(59,130,246,0.28),
        0 2px 4px rgba(0,0,0,0.35);
      flex-shrink: 0;
      position: relative;
    }
    .wizard-hero-number::after {
      /* Thin highlight along the bottom edge = layered plate look */
      content: '';
      position: absolute;
      left: 6px; right: 6px; bottom: -3px;
      height: 3px;
      border-radius: 2px;
      background: rgba(0,0,0,0.45);
      filter: blur(2px);
      z-index: -1;
    }
    .wizard-hero-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .wizard-hero-kicker {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--accent-light);
      opacity: 0.85;
    }
    .wizard-hero-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.4px;
      color: var(--text-primary);
      line-height: 1.15;
    }
    .wizard-hero-subtitle {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.45;
      max-width: 42ch;
    }

    /* Hide the legacy .step-title/.step-description once a hero exists — the
       step panels still carry them for test compatibility, but they become
       screen-reader context only. */
    .step-panel .wizard-hero + .step-title,
    .step-panel .wizard-hero ~ .step-title {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      overflow: hidden;
    }
    .step-panel .wizard-hero ~ .step-description {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      overflow: hidden;
    }

    /* ---- Pseudo-3D card treatment ---- */
    .card {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        0 1px 2px rgba(0,0,0,0.25);
    }

    /* Intent preset cards feel like stacked material swatches */
    .intent-preset-card {
      background: linear-gradient(180deg, #1b1b1b 0%, #161616 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 2px 6px rgba(0,0,0,0.35),
        0 1px 2px rgba(0,0,0,0.4);
    }
    .intent-preset-card:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 6px 14px rgba(0,0,0,0.45),
        0 2px 4px rgba(0,0,0,0.35);
    }
    .intent-preset-card.active {
      background: linear-gradient(180deg, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0.04) 100%);
    }

    /* Piece cards — layered plate look */
    .piece-card {
      background: linear-gradient(180deg, #151515 0%, #101010 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 2px 4px rgba(0,0,0,0.35);
      position: relative;
    }
    .piece-card::before {
      /* Phantom back-plate for a "stacked sheet" hint */
      content: '';
      position: absolute;
      left: 6px; right: 6px; bottom: -4px;
      height: 6px;
      border-radius: 0 0 6px 6px;
      background: rgba(0,0,0,0.45);
      z-index: -1;
      opacity: 0.6;
      pointer-events: none;
    }
    .piece-card:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 6px 12px rgba(0,0,0,0.45);
    }
    .piece-card.active {
      background: linear-gradient(180deg, rgba(59,130,246,0.14) 0%, rgba(59,130,246,0.04) 100%);
    }

    /* Layer bars become tilted rectangles = tiny physical stack */
    .piece-layers {
      height: 26px;
      gap: 3px;
      align-items: center;
      perspective: 180px;
    }
    .piece-layer-bar {
      width: 22px;
      height: 5px;
      border-radius: 1.5px;
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 1px 2px rgba(0,0,0,0.45);
      transform: rotateX(55deg);
      position: relative;
    }
    .piece-layer-bar + .piece-layer-bar {
      margin-left: -18px;
      margin-top: -1px;
    }
    .piece-card.active .piece-layer-bar {
      background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 2px 4px rgba(59,130,246,0.45);
    }

    /* Choice cards (railways/parks style family) — slightly elevated */
    .choice-card {
      background: linear-gradient(180deg, #222 0%, #1a1a1a 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 1px 3px rgba(0,0,0,0.35);
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
    }
    .choice-card:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 4px 10px rgba(0,0,0,0.45);
    }
    .choice-card.active {
      background: linear-gradient(180deg, rgba(88,160,232,0.25) 0%, rgba(88,160,232,0.1) 100%);
      box-shadow:
        0 0 0 1px #58a0e8,
        0 3px 10px rgba(88,160,232,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }

    /* Shape-outcome segment group — add soft depth */
    .segment-group {
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
    }
    .segment-btn.active {
      background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-hover) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 1px 2px rgba(0,0,0,0.35);
    }

    /* ---- Export confidence card: layered feel ---- */
    .export-confidence-card {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 4px 12px rgba(0,0,0,0.35);
    }
    .export-confidence-card.status-ready {
      background: linear-gradient(180deg, rgba(34,197,94,0.1) 0%, rgba(34,197,94,0.03) 100%);
    }
    .export-confidence-card.status-advisory {
      background: linear-gradient(180deg, rgba(234,179,8,0.12) 0%, rgba(234,179,8,0.04) 100%);
    }
    .export-confidence-card.status-blocked {
      background: linear-gradient(180deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
    }

    /* Advisory/blocked text legibility on dark theme */
    .export-confidence-card.status-ready .ec-status-line { color: #4ade80; }
    .export-confidence-card.status-advisory .ec-status-line { color: #fbbf24; }
    .export-confidence-card.status-blocked .ec-status-line { color: #f87171; }
    .ec-badge.badge-ready { background: rgba(34,197,94,0.22); color: #86efac; }
    .ec-badge.badge-advisory { background: rgba(234,179,8,0.22); color: #fde047; }
    .ec-badge.badge-blocked { background: rgba(239,68,68,0.22); color: #fca5a5; }
    .ec-advisory-box.box-advisory { color: #fde68a; }
    .ec-advisory-box.box-blocked { color: #fecaca; }

    /* ---- Stack summary block (Step 5 review) ---- */
    .stack-summary {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
      border: 1px solid var(--border-color);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 3px 10px rgba(0,0,0,0.35);
    }
    .stack-summary-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 10px;
    }
    .stack-visual {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 6px 0 10px;
      perspective: 320px;
    }
    .stack-plate {
      width: 150px;
      height: 12px;
      border-radius: 3px;
      background: linear-gradient(180deg, #3a3a3a 0%, #232323 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 2px 4px rgba(0,0,0,0.55);
      transform: rotateX(55deg) translateZ(0);
      transform-origin: center bottom;
    }
    .stack-plate.plate-water { background: linear-gradient(180deg, #1e4a6b 0%, #0f2a43 100%); }
    .stack-plate.plate-land { background: linear-gradient(180deg, #5a4a2e 0%, #3a2f1e 100%); }
    .stack-plate.plate-overlay { background: linear-gradient(180deg, #6b4a1e 0%, #3e2a0f 100%); }
    .stack-plate.plate-label { background: linear-gradient(180deg, #4a5a6b 0%, #2a3543 100%); }
    .stack-labels {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    .stack-labels .stack-line {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }
    .stack-labels .stack-line-name {
      color: var(--text-primary);
      font-weight: 600;
    }
    .stack-labels .stack-line-desc {
      color: var(--text-muted);
    }

    /* ---- Right-side preview stage: frame it like a physical stage ---- */
    .right-panel {
      background:
        radial-gradient(circle at 50% 40%, #161616 0%, var(--bg-primary) 72%),
        var(--bg-primary);
    }
    .right-panel::before {
      /* Corner vignette makes the preview area read as a staged piece */
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 6px;
      box-shadow: inset 0 0 80px 20px rgba(0,0,0,0.45);
      pointer-events: none;
      z-index: 0;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {  /* 422A: aligned with the p208 stack point */
      .main-body {
        flex-direction: column;
        /* Phase 457 (Loop-315 round-2 audit 🟠): the stacked column OWNS
           vertical scroll. Before this, .wizard-panel was capped at 55vh —
           at 832×700 that left a ~167px porthole for 600px+ substeps behind
           a 6px transparent-track scrollbar, so "only the heading showed"
           and core controls (size selector, geocode results, toggles) sat
           below an invisible fold. Natural panel heights + one page-like
           scroll is the standard phone stacking; the preview sits below. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .wizard-panel {
        width: 100%;
        min-width: unset;
        max-height: none;   /* Phase 457: unclamped — was 55vh (the porthole) */
        flex-shrink: 0;
      }
      .nav-buttons {
        /* Phase 457: Back/Next stays at hand while the tall panel scrolls;
           opaque bg + border-top already set on the base rule. */
        position: sticky;
        bottom: 0;
        z-index: 5;
      }
      .right-panel {
        min-height: 35vh;
        flex-shrink: 0;
        /* Sec-review U-04: give the stacked right panel a scroll owner at phone
           widths so the step-1 template gallery (a tall single column) is
           reachable instead of clipped by the base overflow:hidden.  min-height
           above already overrides the flexbox min-height:auto that would
           otherwise let content overflow the flex container instead of
           scrolling here.  Vertical only — overflow-x stays hidden. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .step-label {
        display: none;
      }
      .step-indicator {
        justify-content: center;
        padding: 6px 4px;
      }
    }
    /* Phase 48: Overlay loading status */
    .overlay-status {
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 4px;
      margin: 8px 0;
      text-align: center;
      transition: opacity 0.3s;
    }
    .overlay-status-loading {
      background: var(--surface-hover, #2a2a3e);
      color: var(--text-muted, #aaa);
      animation: pulse-opacity 1.5s ease-in-out infinite;
    }
    .overlay-status-ready {
      background: rgba(40, 167, 69, 0.15);
      color: #28a745;
    }
    .overlay-status-error {
      background: rgba(220, 53, 69, 0.15);
      color: #dc3545;
    }
    @keyframes pulse-opacity {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    /* ===== Phase 162: Question-first wizard layout modes ===== */

    /* --- Fullscreen question mode (Steps 1-2): wizard centered, no preview --- */
    .main-body[data-wizard-mode="fullscreen"] {
      flex-direction: column;
      align-items: center;
    }
    .main-body[data-wizard-mode="fullscreen"] .wizard-panel {
      width: 100%;
      max-width: 640px;
      min-width: unset;
      min-height: 0;       /* allow flex shrink below content height */
      border-right: none;
      flex: 1;
    }
    .main-body[data-wizard-mode="fullscreen"] .right-panel {
      display: none;
    }

    /* --- Substep system (Phase 162): one question at a time inside a step --- */
    .wizard-substep {
      display: none;
    }
    .wizard-substep.active {
      display: block;
    }
    /* Phase 352 cont (b): in debug / e2e / operator mode, show ALL substeps
       stacked so operators + Playwright specs can reach every control without
       walking the customer's one-question-at-a-time flow.  Customer mode keeps
       one substep per screen (.active) — the smart-wizard behavior. */
    html.p351-debug-mode .wizard-substep {
      display: block !important;
    }
    .substep-nav {
      /* Phase 162: hidden — main Back/Next handles substep navigation */
      display: none;
    }
    .substep-progress {
      display: flex;
      gap: 4px;
      margin-bottom: 14px;
      justify-content: center;
    }
    .substep-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border-color);
      transition: background 0.2s;
    }
    .substep-dot.active {
      background: var(--accent-primary);
    }
    .substep-dot.done {
      background: var(--success);
    }

    /* --- Yes/No decision card (Phase 162) --- */
    .wizard-decision {
      padding: 20px;
      border-radius: 10px;
      border: 1.5px solid var(--border-color);
      background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
      text-align: center;
      margin-bottom: 16px;
    }
    .wizard-decision-question {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.2px;
      margin-bottom: 6px;
    }
    .wizard-decision-hint {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }
    .wizard-decision-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .wizard-decision-btn {
      flex: 1;
      max-width: 180px;
      padding: 12px 10px;
      border-radius: 10px;
      border: 1.5px solid var(--border-color);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .wizard-decision-btn svg.map-type-icon {
      width: 80px;
      height: 64px;
      stroke: var(--text-secondary);
      fill: none;
      transition: stroke 0.15s;
    }
    .wizard-decision-btn:hover svg.map-type-icon {
      stroke: var(--accent-light);
    }
    .wizard-decision-btn.selected svg.map-type-icon {
      stroke: var(--accent-light);
    }
    .wizard-decision-btn-label {
      font-size: 13px;
      font-weight: 600;
      /* Phase 353 (Team B): widen the hit target — clicks on the inner
         label/desc must latch on the parent button's data-action, not the
         span, so the action bridge sees evt.target === the button. Fixes the
         "Raised glue-up cutout only latches on the title" report. */
      pointer-events: none;
    }
    .wizard-decision-btn-desc {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-secondary);
      line-height: 1.3;
      pointer-events: none;  /* Phase 353 (Team B): see -btn-label above */
    }
    .wizard-decision-btn:hover {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
    }
    .wizard-decision-btn.selected {
      border-color: var(--accent-primary);
      background: var(--accent-bg);
      color: var(--accent-light);
      box-shadow: 0 0 0 1px var(--accent-primary);
    }
    .wizard-decision-btn.selected-no {
      border-color: var(--text-muted);
      background: rgba(100,100,100,0.1);
      color: var(--text-secondary);
    }


    /* ---------------------------------------------------------------
     * Phase 213 modularization — the Phase 208/209/210/212 CSS layers
     * that used to live inline below this point have moved to
     * /web/mtle/css/*.css.  External link tags are emitted
     * after the inline style element closes so the cascade still
     * evaluates core -> p208 -> p209 -> p210 -> p212 in order.
     * --------------------------------------------------------------- */

    /* ---------------------------------------------------------------
     * Phase 221 — unified progress strip + customer-mode debug-gating
     * of manual refresh controls.  Kept inline because the strip lives
     * inside the existing preview header and references the same
     * design tokens as the surrounding Phase 208 status row.
     * --------------------------------------------------------------- */
    .p221-progress-strip {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-left: 0.5rem;
      font-size: 0.82rem;
      color: var(--text-secondary, #555);
      min-height: 18px;
    }
    .p221-progress-strip .p221-stage-label {
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .p221-progress-strip .p221-bar {
      position: relative;
      width: 72px;
      height: 4px;
      border-radius: 2px;
      background: rgba(0,0,0,0.08);
      overflow: hidden;
      display: inline-block;
    }
    .p221-progress-strip .p221-bar::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 35%;
      background: rgba(10, 122, 31, 0.55);
      border-radius: 2px;
      animation: p221-bar-slide 1.8s linear infinite;
    }
    @keyframes p221-bar-slide {
      from { transform: translateX(-100%); }
      to   { transform: translateX(300%); }
    }
    .p221-progress-strip[data-p221-stage="idle"]          .p221-bar,
    .p221-progress-strip[data-p221-stage="ready"]         .p221-bar,
    .p221-progress-strip[data-p221-stage="needs_review"]  .p221-bar,
    .p221-progress-strip[data-p221-stage="error"]         .p221-bar {
      display: none;
    }
    .p221-progress-strip[data-p221-stage="ready"]        { color: #0a7a1f; }
    .p221-progress-strip[data-p221-stage="needs_review"] { color: #b07200; }
    .p221-progress-strip[data-p221-stage="error"]        { color: #b00020; }
    .p221-progress-strip .p221-elapsed {
      font-variant-numeric: tabular-nums;
      color: var(--text-muted, #888);
    }

    /* Phase 221 customer-mode: manual refresh controls hidden by
       default.  Debug gate class is stamped on <html> by the
       `_p221InstallDebugControlsGate` bootstrap helper when the
       `?debug=1` or `?perf=1` query params are present.  */
    [data-p221-manual-refresh] { display: none !important; }
    html.mtle-debug-controls [data-p221-manual-refresh] {
      display: inline-block !important;
    }
    html.mtle-debug-controls .btn.btn-block[data-p221-manual-refresh] {
      display: block !important;
    }
    /* Phase 350 FU9 (operator v2 report 2026-05-28): customer mode
       hides every ``.debug-only-section`` regardless of the inline
       ``style="display:..."`` the element shipped with.  Debug mode
       (``?debug=1`` → ``html.mtle-debug-controls``) reveals them as
       ``display:flex`` (most are control rows with gap-spaced
       labels and inputs).  Elements that need ``display:block``
       instead must carry ``data-debug-only-display="block"``. */
    html:not(.mtle-debug-controls) .debug-only-section { display: none !important; }
    html.mtle-debug-controls .debug-only-section { display: flex !important; }
    html.mtle-debug-controls .debug-only-section[data-debug-only-display="block"] { display: block !important; }

    /* Phase 365: template-first Step-1 card layer (first slice).  The
       template grid is the customer-facing primary picker; the raw product
       grid (#intentPresetCard) STAYS IN THE DOM but hides in customer mode
       until "Custom" opts into the raw flow (html.p365-custom-flow, set by
       selectTemplate).  Operators always see both surfaces (?debug=1 is not
       customer mode).  Cards ride the existing .choice-card system per the
       UI_CARD_SYSTEM_AUDIT §3 anatomy. */
    #templateCardGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }
    .p365-template-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 4px;
    }
    html.p351-customer-mode #intentPresetCard { display: none; }
    html.p351-customer-mode.p365-custom-flow #intentPresetCard { display: block; }

    /* Phase 413E §WS-A — Woo gate overlay. INERT BY DEFAULT: these rules do nothing
       unless JS (or the pre-paint guard in maptolaserexpress.html) adds `.mtle-gating`
       to <html>, which only happens for a real WordPress `#gate_token` handoff or an
       enforced opt-in. So live :8000 / local dev render byte-identically to the
       no-gate page. This sheet is a render-blocking <link> in <head>, so the hide is
       applied BEFORE first paint (no protected-payload flash). While gating, the
       wizard is hidden and only the centred gate card shows; mtle-woo-gate-session.js
       removes the class on a confirmed ALLOW. */
    html.mtle-gating body { visibility: hidden !important; }
    html.mtle-gating #mtle-gate-root:not([hidden]) {
      visibility: visible !important;
      position: fixed;
      inset: 0;
      z-index: 2147483000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: #0e0e0e;
      color: #f4f4f4;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    #mtle-gate-root .mtle-gate-card {
      max-width: 28rem;
      text-align: center;
      padding: 28px 24px;
      border: 1px solid #2a2a2a;
      border-radius: 10px;
      background: #161616;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    }
    #mtle-gate-root .mtle-gate-message { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.5; }
    #mtle-gate-root .mtle-gate-cta {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2d7ff9;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
    }
    #mtle-gate-root .mtle-gate-cta:hover { background: #1f6fe0; }

    /* Phase 415B (audit C1): the feature chips are keyboard-operable now
       (role=switch + tabindex) — give keyboard focus a visible ring.
       Focus-visible only: mouse interaction stays visually unchanged. */
    .feature-item:focus-visible {
      outline: 2px solid #58a6ff;
      outline-offset: 2px;
    }

    /* Phase 445 U06 (Loop-247): the Location search-result rows + clip-art cards are
       keyboard-operable now (role=button + tabindex) — give keyboard focus the same
       visible ring. Focus-visible only, so mouse interaction stays unchanged. */
    .geocode-result-item:focus-visible,
    .clipart-card:focus-visible {
      outline: 2px solid #58a6ff;
      outline-offset: 2px;
    }

    /* ==========================================================================
       Loop-235 (operator 2026-07-10): the ONE unified map-status bar.
       Reads _p221GetProgressModel() (preview lifecycle) + the export gate; the
       redundant legacy status widgets are hidden in customer mode below.
       ========================================================================== */
    .mtle-status-bar {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 1 1 auto;
      min-width: 0;
      margin-left: 14px;
      font-size: 13px;
      color: #e7edf5;
      position: relative;
      overflow: hidden;
    }
    /* Phase 484R (Loop-346 🟡): while the blank-board warn is visible it
     * takes its own full-width row instead of squeezing the status strip
     * in the nowrap header (the export copy lost ~133px under it). The
     * wrap is SCOPED to the warn-open state so the header row's normal
     * nowrap behavior is untouched everywhere else. */
    .preview-header.p453-warn-open { flex-wrap: wrap; }
    .preview-header.p453-warn-open #p453BlankBoardWarn { flex-basis: 100%; }
    /* indeterminate activity sweep — only while working; NOT a progress bar */
    .mtle-status-bar::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 34%;
      background: linear-gradient(90deg, transparent, #5aa2ff, transparent);
      opacity: 0;
      transform: translateX(-120%);
      pointer-events: none;
    }
    .mtle-status-bar[data-busy="1"]::after {
      opacity: 0.9;
      animation: msbSweep 1.35s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }
    @keyframes msbSweep { to { transform: translateX(380%); } }

    .msb-glyph {
      width: 13px;
      height: 13px;
      flex: 0 0 13px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
    }
    .mtle-status-bar[data-msb-state="stale"] .msb-glyph { background: #f5a524; box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.18); }
    .mtle-status-bar[data-msb-state="error"] .msb-glyph { background: #f7768e; box-shadow: 0 0 0 4px rgba(247, 118, 142, 0.18); }
    .mtle-status-bar[data-busy="1"] .msb-glyph {
      background: none;
      box-shadow: none;
      border: 2px solid rgba(90, 162, 255, 0.3);
      border-top-color: #5aa2ff;
      animation: msbSpin 0.8s linear infinite;
    }
    @keyframes msbSpin { to { transform: rotate(360deg); } }

    .msb-state { font-weight: 600; color: #e7edf5; white-space: nowrap; }
    .msb-sub { color: #93a1b4; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .msb-sub .msb-elapsed { color: #5d6b7d; font-variant-numeric: tabular-nums; }
    .msb-act {
      border: 0;
      background: none;
      color: #58a6ff;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      padding: 0 2px;
      white-space: nowrap;
      font-family: inherit;
    }
    .msb-act:hover { text-decoration: underline; }
    .msb-act[hidden] { display: none; }
    .msb-spacer { flex: 1 1 auto; }

    .msb-facts { display: inline-flex; align-items: center; color: #5d6b7d; font-size: 12px; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
    /* Phase 484R (Loop-347 🟡5): the export copy was hard-capped at 34ch and
     * self-ellipsized even with spare room in the strip ("…to look over
     * bel…"). The copy now FLEXES into the row's spare space and only
     * ellipsizes under real pressure — and the informational chips yield
     * first (3x shrink with their own ellipsis) so the copy keeps its line. */
    #msbPieces, #msbMode, #msbTreatment { flex: 0 3 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; }
    .msb-fact { padding: 0 9px; border-left: 1px solid rgba(34, 48, 67, 0.5); }
    .msb-fact:first-child { border-left: 0; padding-left: 0; }
    .msb-fact[hidden] { display: none; }

    .msb-export { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding-left: 13px; border-left: 1px solid #1f2a3a; flex: 1 1 auto; min-width: 0; }
    .msb-export[hidden] { display: none; }
    .msb-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 6px;
      color: #06251a;
      background: #34d399;
    }
    .mtle-status-bar[data-msb-export="checking"] .msb-badge { color: #0a1830; background: #5aa2ff; }
    .mtle-status-bar[data-msb-export="advisory"] .msb-badge { color: #2a1a02; background: #f5a524; }
    .mtle-status-bar[data-msb-export="blocked"] .msb-badge,
    .mtle-status-bar[data-msb-export="retryable_error"] .msb-badge { color: #2c0910; background: #f7768e; }
    .msb-export-copy { color: #93a1b4; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }

    @media (prefers-reduced-motion: reduce) {
      .mtle-status-bar[data-busy="1"]::after { animation: none; opacity: 0.5; }
      .mtle-status-bar[data-busy="1"] .msb-glyph { animation: none; }
    }

    /* Retire the redundant legacy status surfaces in customer mode — the unified
       bar above is now the single source.  Kept in the DOM (JS + tests + as data
       sources); only their VISIBILITY is removed here. */
    html.p351-customer-mode #p209-customer-status,
    html.p351-customer-mode #previewStatus,
    html.p351-customer-mode #p221ProgressStrip,
    html.p351-customer-mode #mtle-stage-hint-pill,
    html.p351-customer-mode #mapChangedBanner,
    html.p351-customer-mode #staleSampleWarning,
    html.p351-customer-mode #overlayLoadingStatus,
    html.p351-customer-mode #waterTreatmentBadge {
      display: none !important;
    }

    /* Phase 445 (U07): the cowork QA loop runs with ?e2e=1, which today also
       turns on p351-debug-mode — so the legacy PHASE 351 DEBUG strip AND the
       status surfaces the unified bar (#1860) replaced showed in every QA
       screenshot as "old UI".  ?e2e=1 WITHOUT ?debug=1 now also carries
       `p445-e2e-clean`, which hides that clutter for a clean, customer-like QA
       view.  ?debug=1 is unaffected — developers keep the triage tools + the
       p351-debug-mode show rule above stays intact.  `!important` beats that
       (non-important) show rule at equal specificity.  Elements stay in the DOM
       (JS drivers + text-reading e2e specs are unaffected). */
    html.p445-e2e-clean .p351-contfu4-debug-strip,
    html.p445-e2e-clean #p209-customer-status,
    html.p445-e2e-clean #previewStatus,
    html.p445-e2e-clean #p221ProgressStrip,
    html.p445-e2e-clean #mtle-stage-hint-pill,
    html.p445-e2e-clean #mapChangedBanner,
    html.p445-e2e-clean #staleSampleWarning,
    html.p445-e2e-clean #overlayLoadingStatus,
    html.p445-e2e-clean #waterTreatmentBadge {
      display: none !important;
    }

    /* ---- Phase 452 (OI-2026-07-17-A): per-add intent flow stages ----
       The label / clip-art panels sequence through explicit stages so the
       add-vs-method ordering can never be held wrong (operator 2026-07-17:
       the sticky method default and the routed-edit surface shared one
       panel — map-label.png showed four contradictory truths at once).
       The stage attribute lives on #labelFields / #clipartFields and is
       written by _p448SyncAddAnotherButtons:
         rest   — committed items only; the summary note + the add button
                  are the whole surface (the method card waits for an arm).
         prompt — an add is armed; the method card is THE step: content,
                  advanced and the commit button wait for the answer.
         draft  — method picked; content + the commit button surface.
         routed — a placed item is being edited; every draft surface hides
                  so only the routed banner + routed controls remain.
       Rules use !important so the stage beats inline accordion/renderer
       display state without JS fights; leaving a stage re-exposes the
       inline state untouched. */
    #labelFields[data-p452-stage="prompt"] #p351fu5LabelContentFields,
    #labelFields[data-p452-stage="prompt"] [data-testid="label-advanced-toggle"],
    #labelFields[data-p452-stage="prompt"] #labelAdvancedBody,
    #labelFields[data-p452-stage="prompt"] #p429bFrameStyleRow,
    #labelFields[data-p452-stage="prompt"] #p447dAddAnotherLabel,
    #labelFields[data-p452-stage="rest"] #p351fu5LabelIntentCard,
    #labelFields[data-p452-stage="rest"] #p351fu5LabelContentFields,
    #labelFields[data-p452-stage="rest"] [data-testid="label-advanced-toggle"],
    #labelFields[data-p452-stage="rest"] #labelAdvancedBody,
    #labelFields[data-p452-stage="rest"] #p429bFrameStyleRow,
    #labelFields[data-p452-stage="routed"] #p351fu5LabelIntentCard,
    #labelFields[data-p452-stage="routed"] #p351fu5LabelContentFields,
    #labelFields[data-p452-stage="routed"] #p447dAddAnotherLabel,
    #labelFields[data-p452-stage="routed"] #p452LabelFlowNote {
      display: none !important;
    }
    #clipartFields[data-p452-stage="prompt"] #p351fu6ClipartContentFields,
    #clipartFields[data-p452-stage="prompt"] #p430cAddAnother,
    #clipartFields[data-p452-stage="rest"] #p351fu6ClipartIntentCard,
    #clipartFields[data-p452-stage="rest"] #p351fu6ClipartContentFields,
    #clipartFields[data-p452-stage="routed"] #p351fu6ClipartIntentCard,
    #clipartFields[data-p452-stage="routed"] #p430cAddAnother,
    #clipartFields[data-p452-stage="routed"] #p452ClipartPlacementRow,
    #clipartFields[data-p452-stage="routed"] #p452ClipartBrowse,
    #clipartFields[data-p452-stage="routed"] #p452ClipartFlowNote {
      display: none !important;
    }
    /* The flow note (✓ N added · cancel-add link) shares the wizard's
       quiet-hint look; hidden while empty so resting fresh panels stay clean. */
    .p452-flow-note {
      display: none;
      margin: 2px 0 8px;
      padding: 6px 10px;
      border: 1px solid #2e4257;
      border-radius: 8px;
      background: rgba(46, 125, 79, 0.10);
      color: #9fc3aa;
      font-size: 12px;
    }
    .p452-flow-note.p452-visible { display: flex; align-items: center; gap: 8px; }
    .p452-flow-note .p452-cancel-add {
      margin-left: auto;
      background: none;
      border: none;
      color: #8fa7bd;
      font-size: 11.5px;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      white-space: nowrap;
    }

    /* Phase 453 (Loop-305 🟡32): the basemap provenance badge is an
       operator/debug surface — "GeoServer WMS" means nothing to a
       customer and reads as leftover scaffolding. Debug mode keeps it. */
    html.p351-customer-mode #basemapBadge {
      display: none !important;
    }