/* =====================================================================
 * Phase 394A → 400 — Choice Stage / Vector Style Studio (flag-gated: ?choiceStage=1)
 * ---------------------------------------------------------------------
 * A transient, in-step, SOLID card surface for the migrated visual
 * questions (water style / spacing / depth, parks, railways, …).  When a
 * visual question is active the stage takes the FULL preview area — the
 * operator-chosen "focused" geometry (2026-06-14) — and hands it back on
 * Done.  The live preview is full-size before and after, only covered
 * transiently; the earlier "split Choice Stage" geometry (docking BESIDE
 * the preview and stealing its width) was REJECTED and is gone.
 * Everything here is inert unless the boot code adds
 * `html.p394a-choice-stage` (set only when the URL carries
 * `?choiceStage=1`), so the default customer flow is byte-for-byte
 * unchanged.
 *
 * Guardrail notes (MISSION #5):
 *   - NOT a bottom-under-preview tray and NOT a side-split — it is a
 *     full-area focused takeover that restores the full-size preview on
 *     Done.
 *   - NOT a sixth step, NOT a parallel question flow — it is opened from
 *     and writes through the SAME step + the SAME handlers the old inline
 *     controls used (single write path; no overlay state model).
 *   - Solid (not translucent) surfaces — no thumbnail-over-map clash.
 *   - Transient — opened by the question entry, closed on Done / Esc /
 *     step change.
 *
 * The Phase 399 Vector Style Studio (the water-depth per_layer screen)
 * and its Phase 400 internal two-column desktop layout live in the
 * dedicated Phase 399/400 block lower in this file.
 * ===================================================================== */

/* ---- Focused geometry: full-area takeover of the preview area ---- */
/* Operator-chosen 2026-06-14: while a visual question is active the stage
   takes the FULL preview area, then hands it back on Done.  The preview is
   NEVER squashed — it is full-size before and after, only covered
   transiently (the earlier side-split stole preview width).  The cards
   themselves are the output-faithful comparison; the applied result shows on
   the live preview the instant the stage closes. */
#choiceStagePanel {
  position: absolute;
  inset: 0;                 /* full preview-area cover — no preview shrink */
  display: none;            /* shown only when .right-panel.p394a-stage-open */
  flex-direction: column;
  background: var(--bg-secondary, #161616);
  z-index: 30;              /* above the preview overlays (max z used there ~10) */
  overflow: hidden;
}

/* When open: reveal the focused stage. The preview keeps its full size
   underneath (no `right`/width override) and reappears intact on Done. */
.right-panel.p394a-stage-open #choiceStagePanel {
  display: flex;
}

/* ---- Stage chrome ---- */
.p394a-stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  flex-shrink: 0;
}
.p394a-stage-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #e8e8e8);
  margin: 0 0 2px;
}
.p394a-stage-sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted, #9ca3af);
  margin: 0;
}
.p394a-stage-close {
  flex-shrink: 0;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  color: var(--text-muted, #9ca3af);
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-family: inherit;
}
.p394a-stage-close:hover { color: #e8e8e8; border-color: #777; }
.p394a-stage-close:focus-visible {
  outline: 2px solid var(--wd-select);
  outline-offset: 2px;
}

.p394a-stage-body {
  flex: 1;
  min-height: 0;             /* P397 FU3 (BUG 2): allow this flex child to shrink
                                below content height so overflow-y can SCROLL
                                inside the column (header/body/footer) layout —
                                without this a tall grid (e.g. parks = 7 cards)
                                pushes the body past the panel and the bottom
                                cards are unreachable. */
  overflow-y: auto;
  /* P397 FU3 (BUG 2): top-align the cards (was justify-content:center) so an
     over-tall grid scrolls from the first row instead of being vertically
     centered with both ends clipped + the stray cut-off bottom row.  Short
     grids (2–5 cards) still read fine — they sit at the top of a tall area
     and the grid stays horizontally centered via `margin: 0 auto`. */
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* keep the (max-width-capped) grid horizontally centered */
}

/* The card grid — output-faithful cards that own the full preview area
   (focused geometry).  P397 FU3 (BUG 2): auto-fit columns with a smaller min
   track so common option counts (5–7, e.g. parks) flow into more columns and
   fit WITHOUT oversized cards; when they still can't fit, the body scrolls. */
.p394a-choice-card-grid {
  display: grid;
  /* FU3.3: a FIXED track width so EVERY card is the SAME size on EVERY question
     (operator: "UI elements should be uniform") — a 2-card gate and a 7-card
     parks screen now show identical-size cards, instead of the FU3.2 range that
     ballooned 2-card screens to 330px. ~244px is comfortably large + scannable;
     many-card questions flow into rows and SCROLL (the body is a scroll
     container). justify-content:center keeps the packed track group centered. */
  grid-template-columns: repeat(auto-fit, 244px);
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 620px) {
  .p394a-choice-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    max-width: 360px;
  }
}

/* =====================================================================
 * Phase 400 FU — ROOMY feature cards on the depth QUESTION screens.
 * ---------------------------------------------------------------------
 * The depth gate / layer-count / frame / boundary / textures screens carry
 * only 2–3 cards, so the fixed-244px uniform grid left them SMALL and floating
 * at the TOP of the full-area panel with a large empty area below (operator:
 * "the feature cards are too small / too much wasted space"). On these screens
 * the cards grow to fill the row (responsive, capped so a 2-card screen stays
 * readable) and the short grid is VERTICALLY CENTERED so it uses the empty
 * space instead of hugging the top. Scoped to `p400-depth-cards` — set by
 * `_p397RenderDepthStage` for the non-per_layer depth screens — so the
 * per_layer Vector Style Studio (`.p399-studio`) and the 5–7-card registry
 * questions (water style / parks / railways) keep their own layouts. The
 * uniform-244px choice still applies to those many-card questions, where a
 * fixed track keeps a 7-card screen from oversizing.
 * ===================================================================== */
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards .p394a-stage-body {
  justify-content: safe center;   /* vertically center the short 2–3 card grid */
}
/* Rows of TWO: the depth questions lay their cards two-per-row (operator: "more
   than 2 options should start a new row, like the linework preview") so the cards
   stay LARGE instead of stretching thin across one long line. 2 cards → one row;
   3 → 2+1; 4 → 2+2; etc. An ODD last card spans the row and centers under the pair
   above it (`data-p400-cols` is stamped by _p397RenderDepthStage). */
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 760px;
}
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid[data-p400-cols="3"] .p394a-choice-card:last-child,
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid[data-p400-cols="5"] .p394a-choice-card:last-child {
  grid-column: 1 / -1;            /* span the row … */
  justify-self: center;          /* … and center the lone odd card under the pair */
  width: calc(50% - 14px);       /* match one column (gap 28 → half-gap 14) */
}
/* Scale the card chrome with the bigger thumbnail so the text doesn't look lost. */
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid .p394a-choice-card {
  padding: 14px;
  gap: 9px;
}
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid .p394a-choice-card__title {
  font-size: 15px;
}
html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid .p394a-choice-card__desc {
  font-size: 12px;
}

.p394a-stage-footer {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-color, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.p394a-stage-footer-current {
  font-size: 11.5px;
  color: var(--text-muted, #9ca3af);
}
.p394a-stage-footer-current b { color: #cbd5e1; font-weight: 600; }
.p394a-stage-done {
  appearance: none;
  background: #2563a8;
  border: 1px solid #2f6fb8;
  border-radius: 6px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  font-family: inherit;
}
.p394a-stage-done:hover { background: #2c70bd; }
.p394a-stage-done:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }

/* Phase 397: Back control on the focused depth stage (revealed only while the
   _p352 pager drives the panel — hidden for single-question cards). */
.p394a-stage-back {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  color: var(--text-secondary, #cbd5e1);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  font-family: inherit;
}
.p394a-stage-back:hover { background: rgba(255, 255, 255, 0.08); border-color: #6b7785; }
.p394a-stage-back:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }

/* =====================================================================
 * ChoiceCard component — reusable card anatomy (button + a11y).
 * thumbnail · title · one-line effect description · selected · focus ·
 * disabled-with-reason.
 * ===================================================================== */
.p394a-choice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 10px;
  border: 2px solid var(--border-color, #3a3a3a);
  border-radius: 10px;
  background: #1f1f1f;
  color: var(--text-secondary, #cbd5e1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, background 0.12s, transform 0.05s;
}
.p394a-choice-card:hover {
  border-color: #5a6b78;
  background: #242424;
}
.p394a-choice-card:active { transform: translateY(1px); }

/* Thumbnail — output-faithful static SVG, decorative (aria-hidden). */
.p394a-choice-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 140;
  border-radius: 6px;
  background: #f5ecd6;            /* paper, so a slow/failed load still reads */
  object-fit: cover;
  /* Phase 395B FU1 (Loop-81 🟡): the decorative thumbnail must not be its own
     pointer target — clicks on the image area pass through to the <button> so
     the whole card is one click target (fixes the parks first-click dead-zone). */
  pointer-events: none;
}
.p394a-choice-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #e8e8e8);
}
.p394a-choice-card__desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted, #9ca3af);
}
.p394a-choice-card__reason {
  display: none;
  font-size: 10.5px;
  line-height: 1.35;
  color: #d8a24a;
  margin-top: 2px;
}

/* ---- Selected state: ring + check, driven by aria-pressed ---- */
.p394a-choice-card[aria-pressed="true"] {
  border-color: var(--wd-select);
  background: rgba(88, 160, 232, 0.18);
}
.p394a-choice-card[aria-pressed="true"] .p394a-choice-card__title { color: #e8f4f8; }
.p394a-choice-card[aria-pressed="true"]::after {
  content: "\2713";              /* ✓ */
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: var(--wd-select);
  color: #06222e;
  font-size: 13px;
  font-weight: 700;
}

/* ---- Keyboard focus ring (always visible, never suppressed) ---- */
.p394a-choice-card:focus-visible {
  outline: 3px solid #9ec9ef;
  outline-offset: 2px;
}

/* ---- Disabled-with-reason: customer-readable, still in the DOM ----
   (Structurally invalid options are HIDDEN by the JS, never rendered as
   a disabled card — preserves Phase-392 FU1.) */
.p394a-choice-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: #3a3a3a;
  background: #1a1a1a;
}
.p394a-choice-card[aria-disabled="true"]:hover {
  border-color: #3a3a3a;
  background: #1a1a1a;
}
.p394a-choice-card[aria-disabled="true"] .p394a-choice-card__reason {
  display: block;
}

/* =====================================================================
 * Left-rail entry point — the "Choose visually" question navigator row.
 * Shown ONLY under the flag (html.p394a-choice-stage) and only when the
 * spacing question is reachable (depth map on + a water style on); JS
 * mirrors the old #p347SpacingRow gating onto it.  Default flow (flag
 * off) never renders it.
 * ===================================================================== */
#p394aSpacingNav {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #2a3a44;
  border-radius: 8px;
  background: #14202a;
  font-size: 12px;
}
html.p394a-choice-stage #p394aSpacingNav.p394a-nav-visible {
  display: block;
}
.p394a-nav-label {
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 2px;
}
.p394a-nav-current {
  color: #9ca3af;
  margin-bottom: 8px;
}
.p394a-nav-current b { color: #7fd4c8; font-weight: 600; }
.p394a-choose-visually {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d2d3a;
  border: 1px solid #356;
  border-radius: 6px;
  color: #cfe8ff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
}
.p394a-choose-visually:hover { background: #24384a; border-color: #4a7fa0; }
.p394a-choose-visually:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }

/* No-duplicate guarantee: when the flag is ON, suppress the legacy global
   spacing card grid in BOTH customer and debug mode so the Choice Stage is
   the single surface for this question (customer mode already hides it via
   maptolaserexpress.css:392; this also covers ?debug=1&choiceStage=1). */
html.p394a-choice-stage #p347SpacingRow {
  display: none !important;
}

/* Phase 395B (feature-card expansion): the water / parks / railways STYLE
   questions are auto-presented as the focused card screen, so hide their legacy
   inline rail cards in customer+flag mode (debug / flag-off keep them). One
   surface per choice. (Relief / Contours is debug-only — not a customer
   question — so it is not listed here.) */
html.p394a-choice-stage.p351-customer-mode #p351fu11WaterStyleCard,
html.p394a-choice-stage.p351-customer-mode #parksStyleCard,
html.p394a-choice-stage.p351-customer-mode #railwaysStyleCard,
/* Phase 450: the Line-Spacing flow question follows the same one-surface
   rule — its inline substep card is the debug/flag-off fallback only. */
html.p394a-choice-stage.p351-customer-mode #p450SpacingCard {
  display: none !important;
}

/* (Phase 451 R1: the Phase-450b stage close-up styles were removed with the
   feature — operator review: redundant on single-layer stages; the depth
   studio keeps its own close-up surface.) */

/* =====================================================================
 * Phase 398 / 400 — "Check on my map" sample + highlight (flag-gated).
 * ---------------------------------------------------------------------
 * A VIEW/FOCUS layer on the water-DEPTH per_layer Studio screen. The
 * Studio's central area shows the canonical specimen by default; the
 * single SECONDARY "Check on my map" button (`p399-check-map-btn`, in
 * the Phase 399 block below) swaps it for a cropped, highlighted live
 * sample of the customer's OWN rendered map, focused on the active
 * styleable depth layer's `water_depth_cut_NN` boundary.  The sample is a
 * CLONE of the already-mounted composite preview SVG — not a second
 * render engine.  The highlight/dim classes apply ONLY to that cloned
 * sample DOM inside the panel and are NEVER emitted into export SVG/DXF
 * (no .py / export-byte change).  Everything is scoped under
 * `html.p394a-choice-stage`, so flag-off is byte-for-byte unchanged.
 *
 * Phase 400 FU4: the obsolete `[Compare examples | Show on my map]`
 * segmented-toggle rules (`p398-mode-toggle` / `p398-mode-btn`) were
 * REMOVED here.  Phase 399 collapsed the view to specimen|map driven by
 * the secondary button, so nothing emits a toggle any more; a source
 * guard (tests/test_phase399_vector_style_studio.py) keeps it from
 * returning.
 * ===================================================================== */

/* Sample wrap — controls + viewport, capped to the card-grid width */
html.p394a-choice-stage .p398-sample-wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 16px;
  flex-shrink: 0;
}
html.p394a-choice-stage .p398-sample-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--text-muted, #9ca3af);
}
html.p394a-choice-stage .p398-sample-showing b { color: #cbd5e1; font-weight: 600; }
html.p394a-choice-stage .p398-sample-ctrl-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  color: var(--text-secondary, #cbd5e1);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
html.p394a-choice-stage .p398-sample-ctrl-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #6b7785; }
html.p394a-choice-stage .p398-sample-ctrl-btn:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }

/* Viewport — the cropped clone fills this; paper background matches the house
   thumbnail style so a slow/empty sample still reads as a map area. */
html.p394a-choice-stage .p398-sample-viewport {
  position: relative;
  width: 100%;
  height: 240px;
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 10px;
  background: #f5ecd6;
  overflow: hidden;
}
html.p394a-choice-stage .p398-sample-svg { display: block; width: 100%; height: 100%; }
/* FU6: the zoomed Close-up swatch — a pre-rendered SVG <img> centered in the
   viewport (object-fit:contain keeps the preset shape un-stretched). */
html.p394a-choice-stage .p398-closeup-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Phase 398: the Close-up box hugs the preset-lake aspect (~1.21:1 — the bbox of
   the LARGEST water body, after the smaller ponds are dropped) and centers,
   instead of the shared 240px-tall full-width viewport — otherwise the lake
   floats in a wide cream letterbox (operator: "wasted space … zoom in on the
   vector styles more").  Sized up so the engraved vectors read large and fill
   the box edge-to-edge.  Scoped to the close-up viewport by its data-testid
   (more specific than the base .p398-sample-viewport rule). */
html.p394a-choice-stage .p398-sample-viewport[data-testid="p398-closeup-viewport"] {
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 1.21 / 1;
  margin-left: auto;
  margin-right: auto;
}
html.p394a-choice-stage .p398-sample-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  text-align: center;
  color: #6b6357;
  font-size: 12.5px;
}
html.p394a-choice-stage .p398-sample-updating {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(20, 32, 42, 0.92);
  color: #cfe8ff;
  border: 1px solid #356;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

/* UI-ONLY sample highlight: the active layer's water_depth_cut_NN boundary is
   emphasized (constant-width stroke via vector-effect so it reads at any crop
   zoom); sibling depth-cut groups are dimmed.  These classes live ONLY on the
   cloned sample SVG in the panel — never in any exported artifact. */
html.p394a-choice-stage .p398-sample-highlight-current-boundary,
html.p394a-choice-stage .p398-sample-highlight-current-boundary path {
  stroke: #d8472b !important;
  stroke-width: 2px !important;
  stroke-opacity: 1 !important;
  vector-effect: non-scaling-stroke !important;
}
html.p394a-choice-stage .p398-sample-dim-other-layer,
html.p394a-choice-stage .p398-sample-dim-other-layer path {
  opacity: 0.28 !important;
}

/* =====================================================================
 * Phase 399 — Vector Style Studio.  One studio per editable water layer:
 * layer chip rail · large production-faithful specimen · compact
 * "Engraving pattern" cards (5 in a row) · separate "Line spacing" (3 in a
 * row) · the secondary "Check on my map" action.  All scoped under
 * html.p394a-choice-stage so flag-off is byte-identical.
 * ===================================================================== */

/* Layer chip rail — editable water layers; current is dominant. */
html.p394a-choice-stage .p399-studio-context {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 6px;
  flex-shrink: 0;
}
html.p394a-choice-stage .p399-layer-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
html.p394a-choice-stage .p399-layer-chip {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color, #3a4654);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-muted, #9fb3c8);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
html.p394a-choice-stage .p399-layer-chip:hover { border-color: #5a6b78; background: rgba(255, 255, 255, 0.06); }
html.p394a-choice-stage .p399-layer-chip:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }
html.p394a-choice-stage .p399-layer-chip--current {
  background: #1f3a52;
  border-color: #3f78ad;
  color: #e8f4f8;
  cursor: default;
}
html.p394a-choice-stage .p399-layer-chip__name { font-weight: 600; font-size: 12px; }
html.p394a-choice-stage .p399-layer-chip__summary { font-size: 10.5px; opacity: 0.85; }
html.p394a-choice-stage .p399-nonstyleable-note {
  font-size: 10.5px;
  color: #7e8a98;
  text-align: center;
  margin-top: 6px;
}

/* Large production-faithful specimen — sized up so the engraved vectors read
   large; the lake-aspect hug is inherited from the close-up viewport rule. */
html.p394a-choice-stage .p399-studio-specimen { margin-bottom: 6px; }
html.p394a-choice-stage .p399-specimen-caption { justify-content: center; }
/* Sized so the WHOLE studio (chip rail + specimen + both card rows + actions)
   fits common laptop heights without page-length scrolling: cap the specimen
   to ~42% of the viewport height (it still carries the explanatory load). */
html.p394a-choice-stage .p399-studio-specimen .p399-specimen-viewport {
  max-width: 480px;
  max-height: 42vh;
}

/* The secondary actions row (Check on my map · Reset this layer). */
html.p394a-choice-stage .p399-studio-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 4px;
  flex-shrink: 0;
}
html.p394a-choice-stage .p399-check-map-btn,
html.p394a-choice-stage .p399-reset-layer-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  color: var(--text-secondary, #cbd5e1);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
}
html.p394a-choice-stage .p399-check-map-btn:hover,
html.p394a-choice-stage .p399-reset-layer-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #6b7785; }
html.p394a-choice-stage .p399-check-map-btn:focus-visible,
html.p394a-choice-stage .p399-reset-layer-btn:focus-visible { outline: 2px solid #9ec9ef; outline-offset: 2px; }
html.p394a-choice-stage .p399-check-map-btn[aria-pressed="true"] { background: #1f3a52; border-color: #3f78ad; color: #e8f4f8; }

/* Section labels + notes. */
html.p394a-choice-stage .p399-studio-section-label {
  width: 100%;
  max-width: 1040px;
  margin: 12px auto 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #bcd;
  text-align: left;
}
html.p394a-choice-stage .p399-studio-note { font-size: 10.5px; color: #7e8a98; margin-top: 8px; text-align: center; }
html.p394a-choice-stage .p399-spacing-section { width: 100%; max-width: 1040px; margin: 0 auto; }
html.p394a-choice-stage .p399-spacing-disabled {
  font-size: 11.5px;
  color: #8a96a4;
  padding: 12px;
  border: 1px dashed var(--border-color, #3a4654);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

/* Compact card layout — 5 patterns / 3 spacing in one row each (ONLY in the
   studio; the other depth screens keep the 244px card grid). */
html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1040px;
  gap: 10px;
}
html.p394a-choice-stage .p399-spacing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
/* compact card chrome + lake-aspect thumbnails (the canonical specimen) */
html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid .p394a-choice-card,
html.p394a-choice-stage .p399-spacing-cards .p394a-choice-card { padding: 8px; gap: 5px; }
html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid .p394a-choice-card__thumb,
html.p394a-choice-stage .p399-spacing-cards .p394a-choice-card__thumb {
  aspect-ratio: 1.21 / 1;
  object-fit: contain;
}
html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid .p394a-choice-card__desc,
html.p394a-choice-stage .p399-spacing-cards .p394a-choice-card__desc { font-size: 10.5px; }

/* "Recommended" badge on the optimal pattern card. */
html.p394a-choice-stage .p394a-choice-card[data-p399-recommended="true"]::before {
  content: 'Recommended';
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0f1620;
  background: #9ec9ef;
  border-radius: 4px;
  padding: 1px 5px;
}

/* Responsive — narrower desktop / laptop: patterns wrap to 3 columns, the
   specimen shrinks; everything stays understandable without page-length scroll. */
@media (max-width: 820px) {
  html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html.p394a-choice-stage .p399-studio-specimen .p399-specimen-viewport { max-width: 440px; }
}

/* Reduced motion — no specimen/card transitions (FU2: include the choice cards,
   which the prior rule's comment claimed but its selector list omitted). */
@media (prefers-reduced-motion: reduce) {
  html.p394a-choice-stage .p399-layer-chip,
  html.p394a-choice-stage .p399-check-map-btn,
  html.p394a-choice-stage .p399-reset-layer-btn,
  html.p394a-choice-stage .p394a-choice-card { transition: none; }
}

/* =====================================================================
 * Phase 400 — internal two-column desktop Studio + a11y polish.
 * ---------------------------------------------------------------------
 * FU1: the per_layer Studio body splits into a LEFT specimen column and a
 * RIGHT controls column so the specimen, all five pattern cards, all three
 * spacing cards, and the footer Next fit a 1366×768 laptop with no internal
 * scrolling.  The two-column grid lives INSIDE the full-area Studio (never a
 * side-by-side live-preview split).  At ≤1120px the columns stack back into
 * the original single vertical flow.  Scoped to `#choiceStagePanel.p399-studio`
 * so only the per_layer screen is two-column; the other depth screens keep the
 * single centered card grid.
 * ===================================================================== */

/* Wide desktop default: two independent columns inside the stage body. */
html.p394a-choice-stage #choiceStagePanel.p399-studio .p394a-stage-body {
  flex-direction: row;
  align-items: stretch;     /* let each column own its own height (was center) */
  justify-content: center;
  gap: 26px;
  padding: 16px 24px;
}
html.p394a-choice-stage .p399-studio-left,
html.p394a-choice-stage .p399-studio-right {
  display: flex;
  flex-direction: column;
  min-width: 0;             /* allow the 5-card grid to shrink within the column */
}
html.p394a-choice-stage .p399-studio-left {
  flex: 0 1 460px;          /* the specimen column — visually dominant but capped */
  max-width: 480px;
  align-items: center;
}
html.p394a-choice-stage .p399-studio-right {
  flex: 1 1 560px;
  max-width: 640px;
}
/* In two-column mode the chrome stretches to its column (no 1040px centering). */
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-context,
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-actions,
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-section-label,
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-spacing-section {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-section-label {
  margin-top: 0;
}
/* The specimen owns its left column: fill the width, allow a touch more height
   than the stacked fallback (it has its own column now, not a shared stack). */
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-left .p399-specimen-viewport {
  max-width: 100%;
  max-height: 46vh;
}
/* Right-column pattern grid + spacing cards are sized to the COLUMN (the shared
   max-width:1040 / 560 caps are wider than the column, so the column wins). */
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-right #p394aChoiceCardGrid {
  max-width: 100%;
}
html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-right .p399-spacing-cards {
  max-width: 100%;
}
/* Short explanatory copy at the foot of the right column. */
html.p394a-choice-stage .p399-studio-help {
  font-size: 11px;
  line-height: 1.4;
  color: #8a96a4;
  margin-top: 12px;
}

/* Stack back to the single vertical flow on narrow desktops / tablets, where
   two columns would crush the 5-card row.  Evidence-based breakpoint: the panel
   measures ~900px wide at a 1280 viewport (two columns fit) but ~644px at 1024
   (it must stack) — so 1120px cleanly splits 1280 (two-column) from 1024 (stack). */
@media (max-width: 1120px) {
  html.p394a-choice-stage #choiceStagePanel.p399-studio .p394a-stage-body {
    flex-direction: column;
    align-items: center;
  }
  html.p394a-choice-stage .p399-studio-left,
  html.p394a-choice-stage .p399-studio-right {
    flex: none;
    width: 100%;
    max-width: 1040px;
  }
  html.p394a-choice-stage #choiceStagePanel.p399-studio .p399-studio-left .p399-specimen-viewport {
    max-height: 42vh;
  }
}

/* FU2 — visually-hidden live region (announced, never seen). */
html.p394a-choice-stage .p399-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
   Phase 415A (audit A2) — honest in-stage preview-freshness note.
   Painted by _p415aSyncStageFreshness into the stage footer; amber pulse
   while a render is in flight behind the takeover, quiet green check when
   the mounted preview matches the current design.  Inert without the
   root flag class (the stage never opens flag-off).
   ===================================================================== */
html.p394a-choice-stage .p394a-stage-freshness {
  font-size: 12px;
  color: #9fb0c0;
  margin-right: 12px;
  white-space: nowrap;
}
html.p394a-choice-stage .p394a-stage-freshness[data-freshness="updating"] {
  color: #e8c15a;
}
html.p394a-choice-stage .p394a-stage-freshness[data-freshness="updating"]::before {
  content: '● ';
  animation: p415a-freshness-pulse 1.2s ease-in-out infinite;
}
html.p394a-choice-stage .p394a-stage-freshness[data-freshness="current"]::before {
  content: '✓ ';
  color: #58b98a;
}
@keyframes p415a-freshness-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.p394a-choice-stage .p394a-stage-freshness[data-freshness="updating"]::before {
    animation: none;
  }
}

/* =====================================================================
   Phase 415B (audit B2) — stage-header layer badge.  Small eyebrow chip
   naming the physical map layer the current question affects.  Painted
   only by _p415bSetLayerBadge (flag-gated); inert markup otherwise.
   ===================================================================== */
html.p394a-choice-stage .p415b-layer-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ecbff;
  background: rgba(56, 112, 168, 0.22);
  border: 1px solid rgba(96, 156, 212, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 5px;
}

/* Phase 415B (audit B1) — substep "page X of N" label beside the dots.
   Painted only under the flag (CHOICE_STAGE guard in
   _updateSubstepProgress); flag-off dots stay byte-identical. */
html.p394a-choice-stage .substep-progress-label {
  font-size: 11px;
  color: #8fa3b8;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* =====================================================================
   Phase 415D (audit A4) — visible credit-quote breakdown + disclaimer.
   Injected by _p409RenderCreditQuote only under the flag; flag-off Step 5
   never renders these nodes.
   ===================================================================== */
html.p394a-choice-stage #p415dQuoteBreakdown {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(120, 144, 168, 0.25);
}
html.p394a-choice-stage .p415d-quote-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  color: #9fb0c0;
  padding: 2px 0;
}
html.p394a-choice-stage .p415d-quote-disclaimer {
  font-size: 11px;
  color: #8fa3b8;
  margin-top: 5px;
  line-height: 1.4;
}

/* Phase 415D (OI-2026-07-02-A / P6) — export-button gate honesty.  Visual
   only: the click path fail-closes independently via the soft gate. */
html.p394a-choice-stage #exportZipBtn[data-p415d-gate="checking"] {
  opacity: 0.55;
}
html.p394a-choice-stage #exportZipBtn[data-p415d-gate="blocked"],
html.p394a-choice-stage #exportZipBtn[data-p415d-gate="retryable_error"] {
  opacity: 0.55;
  filter: saturate(0.35);
}

/* =====================================================================
   Phase 415E (operator feedback 2026-07-02) — depth-studio stack locator.
   Side-view of the physical stack beside the layer chips; the plate being
   styled is highlighted.  Decorative (aria-hidden) — chips stay the
   accessible controls.
   ===================================================================== */
html.p394a-choice-stage .p415e-stack-locator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px auto 2px;
  max-width: 340px;
}
html.p394a-choice-stage .p415e-stack-plate {
  box-sizing: border-box;
  border: 1px solid rgba(120, 144, 168, 0.55);
  border-radius: 6px;
  background: #8fbcdc33;
  color: #9fb0c0;
  font-size: 10.5px;
  line-height: 1;
  padding: 5px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
html.p394a-choice-stage .p415e-stack-plate--top {
  width: 100%;
  background: #f4ead622;
  color: #cbb98d;
  cursor: default;
}
html.p394a-choice-stage .p415e-stack-plate--current {
  background: rgba(88, 166, 255, 0.28);
  border-color: #58a6ff;
  color: #dce9f7;
  font-weight: 600;
  cursor: default;
}

/* =====================================================================
   Phase 415G (415F audit §2.5) — freshness semantics unification.
   1) `.p415g-updating` is stamped on the legacy #previewStatus chip by
      _p415gReconcileChip while the chip class is `ready` but the 415A
      probe says a change is pending — the dot goes amber and pulses so
      the chip can never *present* "Ready" beside the note's "Updating".
      Visual only: owners keep the class machinery; flag-off inert (the
      class is only ever added under CHOICE_STAGE).
   2) `.p415g-step3-freshness` is the Step-3 status line (same voice as
      the stage-footer note) painted by _p415gSyncStep3Freshness.
   ===================================================================== */
html.p394a-choice-stage .preview-status.ready.p415g-updating .dot {
  background: var(--warning, #e8c15a);
  animation: p415a-freshness-pulse 1.2s ease-in-out infinite;
}
html.p394a-choice-stage .p415g-step3-freshness {
  display: inline-block;
  font-size: 12px;
  color: #9fb0c0;
  margin: 6px 0 2px;
}
html.p394a-choice-stage .p415g-step3-freshness[data-freshness="updating"] {
  color: #e8c15a;
}
html.p394a-choice-stage .p415g-step3-freshness[data-freshness="updating"]::before {
  content: '● ';
  animation: p415a-freshness-pulse 1.2s ease-in-out infinite;
}
html.p394a-choice-stage .p415g-step3-freshness[data-freshness="current"]::before {
  content: '✓ ';
  color: #58b98a;
}

/* Phase 415G (415F audit §2.9-part): "More options ↓" cue while the stage
   body has unscrolled rows.  Decorative overlay pill above the footer;
   pointer-events none so it never intercepts a click; painted only by
   _p415gSyncMoreBelow (flag-gated) — inert markup otherwise. */
html.p394a-choice-stage .p415g-more-below {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;  /* 419B: raised from 58px — cleared of card captions (Loop-162 overlap) */
  padding: 4px 12px;
  border-radius: 999px;
  /* 415H polish (operator shot boundary-distance.png): the pill can sit over
     card text while rows remain below the fold — stronger backdrop separation
     so it reads as an overlay, not part of the card. */
  background: rgba(16, 24, 34, 0.96);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(159, 176, 192, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  color: #cdd9e5;
  font-size: 11.5px;
  pointer-events: none;
  z-index: 5;
}

/* =====================================================================
 * Phase 417A — layout/mobile pass (the 415F §2.11 + mobile deferrals).
 * ---------------------------------------------------------------------
 * 1) Rail context box: the left rail idled on every stage screen; it now
 *    mirrors the open stage's badge/question/current pick (pure DOM mirror,
 *    synced by the stage chrome painters).  Desktop-only — on stacked
 *    (narrow) layouts the stage heading is already adjacent, so the mirror
 *    would be a duplicate line, not a fix.
 * 2) Phone (<=480px): question cards go SINGLE-COLUMN so the thumbnails
 *    keep the visual language they were designed at (~340px wide instead
 *    of ~157px).  Uniform card size preserved per screen (FU3.3 rule).
 *    The 415G "More options" pill already cues below-fold rows.
 * 3) Phone studio: the texture card grid goes 2-col so cards stay
 *    comfortably tappable instead of 107px slivers.
 * ===================================================================== */
html.p394a-choice-stage .p417a-rail-context {
  margin: 14px 16px 0;
  padding: 12px 14px;
  background: rgba(56, 132, 255, 0.06);
  border: 1px solid rgba(56, 132, 255, 0.22);
  border-radius: 10px;
}
html.p394a-choice-stage .p417a-rail-context__kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f87a8;
  margin-bottom: 6px;
}
html.p394a-choice-stage .p417a-rail-context__q {
  font-size: 13px;
  line-height: 1.4;
  color: #d5dfeb;
}
html.p394a-choice-stage .p417a-rail-context__cur {
  margin-top: 8px;
  font-size: 12px;
  color: #58b98a;
}
html.p394a-choice-stage .p417a-rail-context__cur:empty { display: none; }
@media (max-width: 900px) {
  /* stacked layout: the stage heading sits right there — the mirror would
     duplicate it, so the rail box steps aside (display trumps the JS show). */
  html.p394a-choice-stage .p417a-rail-context { display: none !important; }
}

@media (max-width: 480px) {
  /* 2) single-column question cards — full-width thumbs, uniform size */
  html.p394a-choice-stage .p394a-choice-card-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
  }
  html.p394a-choice-stage #choiceStagePanel.p400-depth-cards #p394aChoiceCardGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 3) studio: pattern cards 2-col (vs 3-col at 820px), spacing row stays 3
     narrow cards but with a taller touch target via padding. */
  html.p394a-choice-stage #choiceStagePanel.p399-studio #p394aChoiceCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.p394a-choice-stage .p399-spacing-cards .p394a-choice-card { min-height: 44px; }
  /* single-column exception: the studio pattern grid above wins over the
     generic 1-col rule via specificity — restate the generic grids only. */
}

/* =====================================================================
 * Phase 417F — "Glue-up items" pill + pop-up (operator: the on-map
 * accent preview was still too intrusive; show an icon that opens a
 * pop-up with the glue-up label / clip art instead).
 * ===================================================================== */
html.p394a-choice-stage .p417f-glueup-pill {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 7;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(56, 132, 255, 0.45);
  background: rgba(18, 28, 38, 0.92);
  color: #cfe1f3;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
html.p394a-choice-stage .p417f-glueup-pill:hover { border-color: #58a0e8; color: #fff; }
html.p394a-choice-stage .p417f-glueup-modal { position: fixed; inset: 0; z-index: 60; }
html.p394a-choice-stage .p417f-glueup-modal__backdrop {
  position: absolute; inset: 0; background: rgba(6, 10, 15, 0.62);
}
html.p394a-choice-stage .p417f-glueup-modal__box {
  position: relative;
  margin: 7vh auto 0;
  width: min(720px, 92vw);
  max-height: 82vh;
  overflow: auto;
  background: #121c26;
  border: 1px solid #3d5570;
  border-radius: 12px;
  padding: 14px 16px 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
html.p394a-choice-stage .p417f-glueup-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  color: #9fb0c0; font-size: 13px; margin-bottom: 12px; gap: 12px;
}
html.p394a-choice-stage .p417f-glueup-modal__x {
  background: none; border: 1px solid #3d5570; border-radius: 6px;
  color: #9fb0c0; font-size: 13px; cursor: pointer; padding: 2px 9px;
}
html.p394a-choice-stage .p417f-glueup-modal__x:hover { color: #fff; border-color: #58a0e8; }
html.p394a-choice-stage .p417f-glueup-modal__body {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
html.p394a-choice-stage .p417f-glueup-tile { max-width: 320px; flex: 1 1 260px; }
html.p394a-choice-stage .p417f-glueup-tile__cap {
  color: #8fa7bd; font-size: 12px; margin-bottom: 6px; text-align: center;
}
html.p394a-choice-stage .p417f-glueup-tile__art {
  background: #f6ecc7; border: 1px solid #b9a86d; border-radius: 8px; padding: 10px;
}
html.p394a-choice-stage .p417f-glueup-tile__art svg { width: 100%; height: auto; display: block; }

/* 417F FU (self-QA finding): while a choice-stage question covers the
   preview, the stage body intercepts pointer events over the pill — hide it
   there instead of letting it peek through unclickable. It returns the
   moment the stage closes. */
html.p394a-choice-stage .right-panel.p394a-stage-open .p417f-glueup-pill {
  visibility: hidden;
}

/* =====================================================================
 * Phase 417G — frame border picker (operator round 6): ONE example of the
 * actual piece (two squares) + a size dropdown; no card wall.
 * ===================================================================== */
html.p394a-choice-stage .p417g-frame-picker {
  grid-column: 1 / -1;  /* span the full card-grid width */
  justify-self: stretch !important;  /* beats the p400 odd-last-card centering rule */
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin: 3vh auto 0;
}
/* Operator 2026-07-03: the example renders LARGE like the main-page product
   board (the 418B empty stage) — the piece is the screen's dominant element,
   the dropdown sits under it and redraws it live. */
html.p394a-choice-stage .p417g-frame-example {
  width: min(92%, 680px);  /* the LARGE board-scale example (operator ask) */
  background: #2a2118;
  border: 1px solid #4a3a26;
  border-radius: 12px;
  padding: 3.5%;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
}
html.p394a-choice-stage .p417g-frame-example svg { width: 100%; height: auto; display: block; }
html.p394a-choice-stage .p417g-frame-caption { color: #9fb0c0; font-size: 12.5px; min-height: 16px; }
html.p394a-choice-stage .p417g-frame-label {
  align-self: flex-start; color: #8fa7bd; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
html.p394a-choice-stage .p417g-frame-picker .form-select { width: min(100%, 420px); font-size: 14px; padding: 9px 12px; }

/* =====================================================================
 * Phase 418B — the PERSISTENT SHELL (Loop-157-confirmed rollup format).
 * Under the flag: step 1 lives in the same left rail as every step; the
 * preview panel exists from boot (empty product stage until a style is
 * picked); one nav geometry; the step-1 plan-card underlap is fixed.
 * ===================================================================== */
html.p394a-choice-stage .p418b-empty-board {
  margin: 8vh auto 0;
  width: min(62%, 560px);
  aspect-ratio: 7 / 5;
  background: #2a2118;
  border: 1px solid #4a3a26;
  border-radius: 12px;
  padding: 4.5%;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
}
html.p394a-choice-stage .p418b-empty-board__inner {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, #191f28 0 12px, #161c24 12px 24px);
  border: 1px dashed #3d5570;
  border-radius: 6px;
}
html.p394a-choice-stage .p418b-empty-caption {
  text-align: center; color: #7d8ea0; font-size: 13.5px; margin-top: 18px;
}
/* step-1 rail: single-column template cards (the 2-col grid was sized for a
   640px centered column) + breathing room above the fixed nav so the plan
   card never underlaps (the Loop-157 cosmetic bug). */
html.p394a-choice-stage .main-body:not([data-wizard-mode="fullscreen"]) #templateCardGrid,
html.p394a-choice-stage .main-body:not([data-wizard-mode="fullscreen"]) #intentPresetGrid {
  grid-template-columns: minmax(0, 1fr);
}
html.p394a-choice-stage .step-content-area { padding-bottom: 74px; }  /* the rail scroller — last card scrolls fully clear of the fixed nav */

/* =====================================================================
 * Phase 418C — stage chrome unified into the persistent bar (approved).
 * The stage footer slims to a status strip (its own Back/Done hide — the
 * persistent bar drives); within-stage dots replace the second 'step n of
 * m' counter; the covered VIEW/zoom rows hide during stage takeover.
 * ===================================================================== */
html.p394a-choice-stage .right-panel.p394a-stage-open .p394a-stage-back,
html.p394a-choice-stage .right-panel.p394a-stage-open .p394a-stage-done {
  display: none !important;
}
html.p394a-choice-stage .p418c-stage-dots {
  letter-spacing: 4px; color: #58a0e8; font-size: 11px; margin-right: auto; padding-left: 2px;
}
html.p394a-choice-stage .right-panel.p394a-stage-open .mte-pv-toolbar,
html.p394a-choice-stage .right-panel.p394a-stage-open .p209-dm-row {
  visibility: hidden;  /* covered + inert during takeover (Loop-157: dead weight) */
}

/* Phase 451 R3 (operator magnify.png / hand-drawn.png): the annotation
   editor's chrome and the 429O loupe belong to the PREVIEW — while a
   choice stage covers it they floated ABOVE the cards (grip pills over
   the card grid; the loupe lens showing the hidden map under the
   cursor). Page-aware rule: everything preview-scoped hides during the
   stage takeover, same as the toolbar rows above. The stage-open JS also
   switches an ACTIVE loupe off (CSS alone would leave it armed for the
   moment the stage closes). */
html.p394a-choice-stage .right-panel.p394a-stage-open .mtle-ann-pill,
html.p394a-choice-stage .right-panel.p394a-stage-open .mtle-ann-selection,
html.p394a-choice-stage .right-panel.p394a-stage-open .mtle-loupe,
html.p394a-choice-stage .right-panel.p394a-stage-open #p429oLoupeBtn,
html.p394a-choice-stage .right-panel.p394a-stage-open #p448dInspector,
html.p394a-choice-stage .right-panel.p394a-stage-open #p448PlacedItemsPill,
html.p394a-choice-stage .right-panel.p394a-stage-open #p448PlacedItemsPanel {
  visibility: hidden !important;
}

/* =====================================================================
 * Phase 418D — ONE question grammar (the final program item, approved).
 * One skin: decision buttons adopt the card family's tokens under the
 * flag; one typography scale (kicker / section-title / question-heading).
 * ===================================================================== */
html.p394a-choice-stage {
  --mtle-kicker-font: 700 10px/1.3 system-ui, sans-serif;
  --mtle-kicker-tracking: 0.08em;
  --mtle-section-title-font: 700 11px/1.3 system-ui, sans-serif;
  --mtle-question-heading-size: 17px;
}
html.p394a-choice-stage .wizard-decision-btn {
  border: 1px solid #2e3f52;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.12s ease;
}
html.p394a-choice-stage .wizard-decision-btn:hover { border-color: #58a0e8; }
html.p394a-choice-stage .wizard-decision-btn.selected,
html.p394a-choice-stage .wizard-decision-btn.selected-no {
  border-color: #58a0e8;
  box-shadow: 0 0 0 1px #58a0e8 inset;
}
html.p394a-choice-stage .wizard-hero-kicker,
html.p394a-choice-stage .p209-receipt-section-title {
  font: var(--mtle-section-title-font);
  letter-spacing: var(--mtle-kicker-tracking);
  text-transform: uppercase;
}
html.p394a-choice-stage #p394aStageHeading,
html.p394a-choice-stage .p417a-rail-context__q {
  font-size: var(--mtle-question-heading-size);
}

/* =====================================================================
 * Phase 419A — Loop-162 #1: the restart CTA sheds the primary skin so a
 * finished design can't be wiped by Next-slot muscle memory (plus the JS
 * confirm). Secondary outline look, clearly not "Next".
 * ===================================================================== */
html.p394a-choice-stage #btnNext.p419a-restart {
  background: transparent;
  border: 1px solid #4a5a6e;
  color: #9fb0c0;
}
html.p394a-choice-stage #btnNext.p419a-restart:hover {
  border-color: #e8a0a0;
  color: #e8c4c4;
}

/* =====================================================================
 * Phase 419C — Loop-162 theme note: the step-2 map read like "a GIS debug
 * tool" (blue linework / gray water / black bg) against the warm product
 * world. Flag-scoped, display-only: warm the basemap tiles toward the
 * board palette and give the container a warm deep ground while tiles load.
 * ===================================================================== */
html.p394a-choice-stage #mte-map-full { background: #1d1712; }
html.p394a-choice-stage #mte-map-full .leaflet-tile-pane {
  filter: sepia(0.28) saturate(0.85) hue-rotate(-8deg) brightness(1.06);
}
html.p394a-choice-stage #p419cMapPrompt { display: flex; }
html.p394a-choice-stage #p419cMapPrompt[style*="display: none"],
html.p394a-choice-stage #p419cMapPrompt[style*="display:none"] { display: none !important; }

/* Phase 419C-FU2 (Loop-165): the warm ground must BEAT the legacy
 * `.leaflet-container { background: var(--bg-primary) !important }` — same
 * !important, higher specificity. And the duplicate legacy Diag readout
 * hides under the flag (the customer-words readout owns it now). */
html.p394a-choice-stage #mte-map-full.leaflet-container,
html.p394a-choice-stage #mte-map-full .leaflet-container,
html.p394a-choice-stage #mte-map-full { background: #1d1712 !important; }
html.p394a-choice-stage #p419cLegacyDiag { display: none; }

/* Phase 421D (Loop-171): ONE dot vocabulary per screen — the stage header
 * dots own progress while a stage is open; the rail's substep cluster
 * hides so two mismatched dot rows never sit side by side. */
html.p394a-choice-stage.p394a-stage-open .substep-progress-label { display: none !important; }

/* =====================================================================
 * Phase 422 — the Codex-review batch + Workshop Drafting tokens.
 * A: overlap clearance, template thumbs, family labels.
 * B: step-2 declutter (lighter outside dim, grouped attribution).
 * C: one blueprint-blue selection token + semantic status colors.
 * ===================================================================== */
html.p394a-choice-stage {
  --wd-select: #58a0e8;        /* blueprint blue — THE selected-state accent */
  --wd-ready: #7bc47f;         /* muted green — ready/valid */
  --wd-attn: #f59e0b;          /* amber — needs attention/updating */
  --wd-risk: #e05252;          /* soft red — destructive/production risk only */
}
/* C: the p394a card family adopts the same blue as the decision buttons */
html.p394a-choice-stage .p394a-choice-card.selected,
html.p394a-choice-stage .p394a-choice-card[aria-pressed="true"] {
  border-color: var(--wd-select) !important;
  box-shadow: 0 0 0 1px var(--wd-select) inset !important;
}
/* A: template card thumbnails */
html.p394a-choice-stage .p422a-template-thumb {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
  display: block;
}
/* A: the substep family label */
html.p394a-choice-stage .p422a-substep-family {
  color: var(--text-muted, #9fb0c0);
  font-size: 11px;
  letter-spacing: 0.04em;
}
/* B: lighter outside dim in boundary mode (was 0.3 — read as a heavy slab) */
html.p394a-choice-stage .aoi-overlay.boundary-mode {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.16);
}
/* B: quiet, grouped attribution — one small line, no stacked chrome */
html.p394a-choice-stage .leaflet-control-attribution {
  background: rgba(16, 24, 34, 0.75);
  color: #8093a5;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 6px 0 0 0;
}
html.p394a-choice-stage .leaflet-control-attribution a { color: #8093a5; }
/* C: the two-line copy pattern — small technical second line */
html.p394a-choice-stage .p422c-tech {
  display: block;
  font-size: 10.5px;
  color: #7d8ea0;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* Phase 423A — the operator's second review: template cards were too tall
 * (the full-width thumb); two cards visible on desktop. Global footer
 * clearance so the sticky nav never covers content on ANY step. */
html.p394a-choice-stage .p422a-template-thumb { height: 110px; object-fit: cover; }
html.p394a-choice-stage .choice-card.p365-template-card { padding: 10px 12px; }
html.p394a-choice-stage .step-panel { padding-bottom: 90px; }

/* Phase 423B — the novice/advanced split (operator-authorized). SIMPLE mode
 * hides the method questions (auto-engrave rides the canonical setters) and
 * styles the reveal link; ADVANCED restores the full flow. */
/* 425B: method-question visibility is TEMPLATE-owned now. */
html[data-p425b-label-method="silent"] #p351fu5LabelIntentCard { display: none !important; }
html[data-p425b-clipart-method="silent"] #p351fu6ClipartIntentCard { display: none !important; }
html.p394a-choice-stage .p423b-advanced-link {
  display: block;
  margin: 6px auto 0;
  background: none;
  border: none;
  color: #7d8ea0;
  font-size: 11px;
  text-decoration: underline dotted;
  cursor: pointer;
}
html.p394a-choice-stage .p423b-advanced-link:hover { color: var(--wd-select); }

/* =====================================================================
 * Phase 425A — the operator's showcase: the template GALLERY owns the
 * main panel on step 1 (large cards, real art in 425C); the km readout
 * hides while empty; the footer clearance audit rides every scroller.
 * ===================================================================== */
html.p394a-choice-stage .p425a-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  width: min(92%, 1080px);
  margin: 4vh auto 12px;
}
html.p394a-choice-stage .p425a-gallery-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2e3f52;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
html.p394a-choice-stage .p425a-gallery-card:hover {
  border-color: var(--wd-select);
  transform: translateY(-2px);
}
/* Phase 415F (sec-review U-07): the clicked gallery card shows its selection.
   Ring via box-shadow (not border-width) so the card does not shift. */
html.p394a-choice-stage .p425a-gallery-card.active {
  border-color: var(--wd-select);
  box-shadow: 0 0 0 2px var(--wd-select);
}
html.p394a-choice-stage .p425a-gallery-card img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
html.p394a-choice-stage .p425a-gallery-label {
  display: block;
  margin-top: 8px;
  color: #cdd9e5;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
/* Phase 453 (Loop-305 🔴11): the authored template description, finally
 * visible on the card the customer actually sees. */
html.p394a-choice-stage .p425a-gallery-desc {
  display: block;
  margin-top: 4px;
  color: #8fa7bd;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
/* the km readout hides while empty (Codex: '-- km looks unfinished') */
html.p394a-choice-stage #diagKm[data-p425a-empty="1"],
html.p394a-choice-stage #diagKm[data-p425a-empty="1"] + span { visibility: hidden; }
/* the footer-clearance audit: the search dropdown clears the sticky nav;
 * stacked-mode scrollers reserve space */
html.p394a-choice-stage #geocodeResults { z-index: 1200; max-height: 46vh; overflow-y: auto; }
@media (max-width: 1024px) {
  html.p394a-choice-stage .wizard-panel { padding-bottom: 84px; }
}

/* Phase 425A-FU (the operator's duplicate-cards catch): the GALLERY owns
 * picking on step 1 — the rail's card grids hide; the compact echo stays. */
html[data-p425a-gallery-owns-picking="1"] #templateCardGrid { display: none !important; }

/* Phase 426B — glue-up visibility in both views (operator-approved).
 * The TRAY: small angled pieces beside the board in Finished Look.
 * The DOCK: the cut sheet alongside the piece grid in Cut Pieces. */
#p426bGlueUpTray {
  position: absolute; right: 18px; bottom: 52px; z-index: 640;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  pointer-events: none;
}
#p426bGlueUpTray .p426b-tray-cell {
  width: 148px; background: #efe6d4; border-radius: 6px; padding: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
#p426bGlueUpDock {
  position: absolute; right: 14px; top: 64px; z-index: 640;
  width: 200px; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
#p426bGlueUpDock .p426b-dock-cell {
  background: #efe6d4; border: 1px solid #8a7658; border-radius: 6px; padding: 8px;
}
#p426bGlueUpTray svg, #p426bGlueUpDock svg { width: 100%; height: auto; display: block; }
.p426b-caption { font-size: 11px; color: #cdd9e5; background: rgba(16,24,34,0.8);
  padding: 2px 8px; border-radius: 999px; }
.p426b-label { font-size: 10px; color: #6d5e46; margin-top: 3px; text-align: center; }

/* Phase 427B: the 426D stack look is retired (operator: first item +
 * the count, exactly like the pill). */
#p426bGlueUpTray:hover .p426b-tray-cell, #p426bGlueUpDock:hover .p426b-dock-cell {
  box-shadow: 0 4px 14px rgba(88,160,232,0.35);
}

/* Phase 426E — the depth stage owns the screen: the glue-up tray/dock never
 * bleed through the stage overlay (operator's depth.png catch). */
html.p394a-choice-stage .right-panel.p394a-stage-open ~ * #p426bGlueUpTray,
html.p394a-choice-stage .right-panel.p394a-stage-open #p426bGlueUpTray,
html.p394a-choice-stage .right-panel.p394a-stage-open ~ * #p426bGlueUpDock,
html.p394a-choice-stage .right-panel.p394a-stage-open #p426bGlueUpDock,
html.p394a-choice-stage:has(.right-panel.p394a-stage-open) #p426bGlueUpTray,
html.p394a-choice-stage:has(.right-panel.p394a-stage-open) #p426bGlueUpDock {
  display: none !important;
}

/* Phase 426C (re-applied after the 1734 merge race ate it) — the tray/dock
 * plaques read as the FINISHED piece: sand board, BLACK engraving; the raw
 * sheet SVG carries production layer colors (#D0D000 engrave / #FF0000 cut). */
#p426bGlueUpTray .p426b-tray-cell, #p426bGlueUpDock .p426b-dock-cell {
  background: #e6d7b8;
}
#p426bGlueUpTray svg [stroke="#D0D000"], #p426bGlueUpDock svg [stroke="#D0D000"] {
  stroke: #1c1610 !important;
}
#p426bGlueUpTray svg [fill="#D0D000"], #p426bGlueUpDock svg [fill="#D0D000"] {
  fill: #1c1610 !important;
}
#p426bGlueUpTray svg [stroke="#FF0000"], #p426bGlueUpDock svg [stroke="#FF0000"] {
  stroke: #8a7658 !important;
}

/* Phase 424C-1 — preview confidence, the layout tier (operator decision 4:
 * layout first). Finished Look reads as a product photo: a bigger stage,
 * the board on a workbench, quiet chrome. Display-only; other modes keep
 * their working layout. */
html[data-p209-display-mode="design_preview"] #p350fu12AuxiliaryPiecesStrip,
html[data-p209-display-mode="design_preview"] #p352AccentPiecePreview {
  display: none !important;  /* the 426B tray carries the glue-up story now */
}
html[data-p209-display-mode="design_preview"] .preview-header {
  padding-top: 4px;
  padding-bottom: 4px;
}
html[data-p209-display-mode="design_preview"] .p209-display-mode-row {
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 2px;
}
html[data-p209-display-mode="design_preview"] .mte-pv-wrapper {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(122, 96, 62, 0.16), transparent 68%),
    linear-gradient(180deg, #10151d 0%, #151a21 55%, #191d23 100%);
}
html[data-p209-display-mode="design_preview"] .mte-pv-canvas svg {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}
html[data-p209-display-mode="design_preview"] .mte-pv-toolbar {
  opacity: 0.22;
  transition: opacity 0.25s ease;
}
html[data-p209-display-mode="design_preview"] .mte-pv-toolbar:hover,
html[data-p209-display-mode="design_preview"] .mte-pv-toolbar:focus-within {
  opacity: 1;  /* hover/keyboard reveals the working chrome */
}

/* Phase 425C — the blessed real art + the hover-zoom loupe (decision 2).
 * The zoom crop fades in over the card on hover — a closer look at the
 * actual engraving, not just a bigger thumbnail. */
.p425a-gallery-card { position: relative; overflow: hidden; }
.p425a-gallery-card .p425c-zoom {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.22s ease;
  pointer-events: none;
}
.p425a-gallery-card:hover .p425c-zoom,
.p425a-gallery-card:focus-visible .p425c-zoom { opacity: 1; }

/* Phase 427B (operator: glue-up.png) — contrast: the tray/dock preview
 * engraving reads at a glance (the raw sheet hairlines are production-thin). */
#p426bGlueUpTray svg [stroke], #p426bGlueUpDock svg [stroke] {
  stroke-width: 0.45 !important;
}
#p426bGlueUpTray svg [stroke="#FF0000"], #p426bGlueUpDock svg [stroke="#FF0000"] {
  stroke-width: 0.3 !important;  /* the cut edge stays lighter than the engraving */
}

/* Phase 453 Wave 4 (Loop-305 🔴23, operator-approved 2026-07-18): the
 * "Your map" thumbnail — a live clone of the customer's own render docked
 * top-right of any OPEN chooser stage. The stage body RESERVES the space
 * (the prototype overlapped the third card — the approval noted it), and
 * narrow viewports drop the thumbnail rather than crush the cards. */
#p453StageThumb {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 232px;
  z-index: 30;
  border: 1px solid #58a0e8;
  border-radius: 10px;
  background: rgba(10, 18, 28, 0.92);
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#p453StageThumb .p453-thumb-label {
  color: #a9c6e8;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: center;
}
#p453StageThumb .p453-thumb-svg svg {
  /* Loop-309 🟠: !important so a cloned inline px size (the P326
   * scroll-mode viewer state) can never beat the dock. */
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 6px;
  background: #f0ebe3;
}
/* the reserve: cards reflow clear of the docked thumbnail */
html[data-p453-thumb="1"] .right-panel.p394a-stage-open .p394a-stage-body {
  padding-right: 262px;
}
/* Phase 484R (Loop-345 🟡10): the HEADER block gets the same reserve — a
 * long stage subtitle (the inlay-material stage's "…recommended pairing…"
 * line) wrapped UNDER the thumbnail because only the body reserved space. */
html[data-p453-thumb="1"] .right-panel.p394a-stage-open .p394a-stage-header {
  padding-right: 262px;
}
@media (max-width: 1100px) {
  #p453StageThumb { display: none; }
  html[data-p453-thumb="1"] .right-panel.p394a-stage-open .p394a-stage-body {
    padding-right: 0;
  }
  html[data-p453-thumb="1"] .right-panel.p394a-stage-open .p394a-stage-header {
    padding-right: 0;
  }
}