/*!
 * Phase 213 extraction — layer: p208-shell
 * ----------------------------------------
 * Owner        : MTLE Phase 208 (UI Redesign #2 visual shell)
 * Scope attr   : html[data-mtle-shell="v2"] (set by /web/mtle/js/p208-shell.js)
 * Public hook  : window._p208
 * Contract     : Additive CSS only; core wizard styles live inline in
 *                maptolaserexpress.html.  Cascade expects this file to
 *                load BEFORE p209/p210/p212 CSS so later rules can layer.
 * Do NOT edit  : tokens, selectors, or declaration order as part of the
 *                Phase 213 extraction — this is a verbatim move-out.
 *                Future visual edits belong in their own phase PR.
 */

/* =====================================================================
 * PHASE 208 — MTLE UI Redesign #2 visual shell (additive, token-driven)
 * Goal: polished graphite shell, refined sidebar rhythm, paper/basswood
 * preview stage, calmer status strip, stronger focus rings.  All rules
 * are scoped to [data-mtle-shell="v2"] on <html> so existing tests and
 * DOM anchors cannot regress — the Phase 208 bootstrap script flips
 * that attribute after load.
 * =================================================================== */
:root {
  /* Phase 208.1 — deeper stage contrast + real basswood paper for a
   * visible Redesign #2 read. Push black-near on the graphite floor so
   * the paper pieces really float; make the paper warm enough that it
   * reads as wood, not bleached poster. */
  --p208-graphite-0:    #05070b;
  --p208-graphite-1:    #0b0f16;
  --p208-graphite-2:    #12171f;
  --p208-graphite-3:    #1b2230;
  --p208-graphite-4:    #232a3a;
  --p208-hairline:      rgba(255,255,255,0.07);
  --p208-hairline-hi:   rgba(255,255,255,0.14);
  --p208-paper:         #ecd9a6;            /* basswood tan */
  --p208-paper-hi:      #f4e7be;            /* inner highlight */
  --p208-paper-lo:      #c9b074;            /* outer edge warmth */
  --p208-paper-edge:    #8c7641;            /* sharp paper edge line */
  --p208-paper-shadow:  rgba(0,0,0,0.80);
  --p208-accent:        #58a0e8;  /* 422D: ONE blueprint blue */
  --p208-accent-strong: #8fc0ff;
  --p208-accent-soft:   rgba(94,160,255,0.16);
  --p208-accent-glow:   rgba(94,160,255,0.40);
  --p208-good:          #34d399;
  --p208-warn:          #f5b547;
  --p208-bad:           #ef6b6b;
  --p208-radius-sm: 6px;
  --p208-radius-md: 10px;
  --p208-radius-lg: 14px;
  --p208-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35);
  --p208-shadow-2: 0 12px 28px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.32);
  --p208-focus-ring: 0 0 0 2px rgba(94,160,255,0.55), 0 0 0 4px rgba(94,160,255,0.18);
  /* Richer stage: cool overhead spotlight + deeper corner vignette.
   * Multiple layered radials sell the depth without a bitmap. */
  --p208-stage-radial:
    radial-gradient(1500px 900px at 45% -8%, rgba(120,170,255,0.10), transparent 58%),
    radial-gradient(1200px 800px at 110% 120%, rgba(92,160,255,0.06), transparent 55%),
    radial-gradient(1200px 900px at 10% 110%, rgba(0,0,0,0.55), transparent 60%);
}

/* Header refinement */
html[data-mtle-shell="v2"] .header {
  background: linear-gradient(180deg, var(--p208-graphite-2), var(--p208-graphite-1));
  border-bottom-color: var(--p208-hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 10px rgba(0,0,0,0.35);
}
html[data-mtle-shell="v2"] .header-title {
  font-weight: 600;
  letter-spacing: -0.25px;
  color: #eef2f8;
}
html[data-mtle-shell="v2"] .header-badge {
  background: var(--p208-accent-soft);
  color: var(--p208-accent-strong);
  border-color: rgba(94,160,255,0.28);
}

/* Sidebar + step bar refinement */
html[data-mtle-shell="v2"] .wizard-panel {
  background: linear-gradient(180deg, var(--p208-graphite-2) 0%, var(--p208-graphite-1) 140px, var(--p208-graphite-1) 100%);
  border-right-color: var(--p208-hairline);
}
html[data-mtle-shell="v2"] .step-bar {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  border-bottom-color: var(--p208-hairline);
}
html[data-mtle-shell="v2"] .step-indicator {
  transition: all 0.18s ease;
  position: relative;
}
html[data-mtle-shell="v2"] .step-indicator:focus-visible {
  outline: none;
  box-shadow: var(--p208-focus-ring);
}
html[data-mtle-shell="v2"] .step-indicator.active {
  background: linear-gradient(180deg, rgba(94,160,255,0.24), rgba(94,160,255,0.08));
  border-color: rgba(94,160,255,0.55);
  color: var(--p208-accent-strong);
  box-shadow: 0 0 0 1px rgba(94,160,255,0.35), 0 6px 18px -6px var(--p208-accent-glow);
}
html[data-mtle-shell="v2"] .step-indicator.active .step-num {
  background: var(--p208-accent);
  color: #05070b;
  border-color: var(--p208-accent);
  box-shadow: 0 0 10px var(--p208-accent-glow);
}
html[data-mtle-shell="v2"] .step-indicator.completed .step-num {
  background: rgba(52,211,153,0.18);
  border-color: var(--p208-good);
  color: var(--p208-good);
}
html[data-mtle-shell="v2"] .step-indicator[aria-current="step"] {
  /* Matches .active; keeps the ring on keyboard navigation. */
}

/* Wizard panel scrollbar polish (WebKit) */
html[data-mtle-shell="v2"] .step-content-area { scrollbar-width: thin; scrollbar-color: var(--p208-graphite-4) transparent; }
html[data-mtle-shell="v2"] .step-content-area::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-mtle-shell="v2"] .step-content-area::-webkit-scrollbar-track { background: transparent; }
html[data-mtle-shell="v2"] .step-content-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--p208-graphite-3), var(--p208-graphite-4));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-mtle-shell="v2"] .step-content-area::-webkit-scrollbar-thumb:hover {
  background: var(--p208-graphite-4);
  background-clip: padding-box;
}

/* Card / chip polish */
html[data-mtle-shell="v2"] .card {
  box-shadow: var(--p208-shadow-1);
  border-color: var(--p208-hairline);
}
html[data-mtle-shell="v2"] .card:hover { border-color: var(--p208-hairline-hi); }
html[data-mtle-shell="v2"] .wizard-decision-btn,
html[data-mtle-shell="v2"] .segment-btn,
html[data-mtle-shell="v2"] .btn {
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
}
html[data-mtle-shell="v2"] .wizard-decision-btn:focus-visible,
html[data-mtle-shell="v2"] .segment-btn:focus-visible,
html[data-mtle-shell="v2"] .btn:focus-visible,
html[data-mtle-shell="v2"] .chip:focus-visible {
  outline: none;
  box-shadow: var(--p208-focus-ring);
  z-index: 1;
}
html[data-mtle-shell="v2"] .btn-success {
  background: linear-gradient(180deg, #16a34a, #128a3e);
  border-color: #0f6b30;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 4px 10px -4px rgba(22,163,74,0.55);
}
html[data-mtle-shell="v2"] .btn-success:hover:not(:disabled) {
  background: linear-gradient(180deg, #22c55e, #16a34a);
}

/* Wizard hero refinement */
html[data-mtle-shell="v2"] .wizard-hero-number {
  background: linear-gradient(135deg, rgba(94,160,255,0.18), rgba(94,160,255,0.03));
  color: var(--p208-accent-strong);
  border: 1px solid rgba(94,160,255,0.28);
  border-radius: var(--p208-radius-md);
  box-shadow: 0 6px 18px -8px var(--p208-accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Header brand accent bar */
html[data-mtle-shell="v2"] .header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p208-accent) 30%, var(--p208-accent) 70%, transparent);
  opacity: 0.45;
  pointer-events: none;
}
html[data-mtle-shell="v2"] .header { position: relative; }

/* Sidebar rhythm — a vertical separator hairline gradient */
html[data-mtle-shell="v2"] .wizard-panel {
  position: relative;
}
html[data-mtle-shell="v2"] .wizard-panel::after {
  content: "";
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(94,160,255,0.12) 20%, rgba(94,160,255,0.18) 50%, rgba(94,160,255,0.10) 80%, transparent);
  pointer-events: none;
}

/* Stronger secondary-text contrast */
html[data-mtle-shell="v2"] {
  --text-secondary: #b4bac6;
  --text-muted: #8189a0;
}

/* Preview stage — paper/basswood frame (applies when panel is visible) */
html[data-mtle-shell="v2"] #preview-panel.visible {
  background: var(--p208-graphite-0);
}
html[data-mtle-shell="v2"] #preview-panel .preview-header {
  background: linear-gradient(180deg, var(--p208-graphite-2), var(--p208-graphite-1));
  border-bottom-color: var(--p208-hairline);
  padding-left: 18px; padding-right: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
html[data-mtle-shell="v2"] #preview-panel .preview-header-label {
  color: #dde3ec;
  font-weight: 600;
  letter-spacing: 0.2px;
}
html[data-mtle-shell="v2"] #preview-panel .preview-header-label::before {
  /* Small accent bar next to "Live Preview" for the Redesign #2 read. */
  content: "";
  display: inline-block;
  width: 3px; height: 12px;
  background: var(--p208-accent);
  border-radius: 2px;
  margin-right: 8px;
  box-shadow: 0 0 6px var(--p208-accent-glow);
  vertical-align: -1px;
}
html[data-mtle-shell="v2"] #preview-panel .preview-status {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--p208-hairline);
  background: rgba(255,255,255,0.02);
}
html[data-mtle-shell="v2"] #preview-panel .preview-mode-row {
  background: var(--p208-graphite-1);
  border-bottom-color: var(--p208-hairline);
}
html[data-mtle-shell="v2"] #preview-panel .preview-area {
  /* Deeper graphite floor with a cool overhead spotlight + darker
   * lower-left vignette + a subtle diagonal stipple pattern. */
  background-color: var(--p208-graphite-0);
  background-image: var(--p208-stage-radial),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
  background-size: auto, 26px 26px, 26px 26px;
}
html[data-mtle-shell="v2"] #preview-panel .preview-area::after {
  /* Edge vignette — pulls the corners into the shell without hiding
   * the scale pattern in the middle of the stage. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}
html[data-mtle-shell="v2"] #preview-panel .mte-pv-svg-host {
  z-index: 1;
}
html[data-mtle-shell="v2"] #preview-panel .mte-pv-svg-host svg {
  /* Basswood paper — warm tan + soft inner highlight + crisp edge. */
  background:
    radial-gradient(120% 140% at 50% 0%, var(--p208-paper-hi) 0%, var(--p208-paper) 45%, var(--p208-paper-lo) 100%);
  box-shadow:
    0 48px 90px -30px var(--p208-paper-shadow),
    0 14px 28px rgba(0,0,0,0.55),
    0 2px 4px rgba(0,0,0,0.45),
    0 0 0 1px var(--p208-paper-edge),
    inset 0 0 0 1px rgba(255,255,255,0.25);
  border-radius: 4px;
}
/* Phase 208.2/208.3 — the server-injected preview SVGs paint opaque
 * white backdrop rects with a `data-role` ending in `-canvas`:
 *   - `composite-canvas-vector` (single-piece /preview/svg output)
 *   - `review-layout-canvas`    (three-piece review_layout assembly)
 *   - `assembly-canvas-*`       (future assembled views)
 * CSS `fill` wins over the `fill="#ffffff"` attribute, so we repaint
 * any canvas-role rect with the basswood paper tone in the wizard
 * preview only.  Production export uses separate per-piece SVGs +
 * the LightBurn-safe subset audit; this rule is scoped under
 * `#preview-panel .mte-pv-svg-host` so it cannot reach exported bytes. */
html[data-mtle-shell="v2"] #preview-panel .mte-pv-svg-host svg rect[data-role*="canvas"] {
  fill: var(--p208-paper);
}

/* Phase 208 runtime-trace hint pill */
.p208-runtime-hint {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--p208-hairline);
  background: rgba(255,255,255,0.02);
  margin-left: 10px;
  white-space: nowrap;
}
html[data-mtle-shell="v2"] .p208-runtime-hint.p208-has-data { display: inline-flex; }
.p208-runtime-hint .p208-rt-label { color: var(--text-secondary); }
.p208-runtime-hint .p208-rt-val { color: var(--p208-accent-strong); }

/* Phase 208 stage status bar (additive bottom strip) */
.p208-stage-statusbar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 4px 16px;
  background: linear-gradient(180deg, var(--p208-graphite-1), var(--p208-graphite-0));
  border-top: 1px solid var(--p208-hairline);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-height: 26px;
}
html[data-mtle-shell="v2"] #preview-panel.visible .p208-stage-statusbar { display: flex; }
.p208-stage-statusbar .p208-sb-group { display: inline-flex; align-items: center; gap: 4px; }
.p208-stage-statusbar .p208-sb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  display: inline-block;
}
.p208-stage-statusbar .p208-sb-dot.ready { background: var(--p208-good); }
.p208-stage-statusbar .p208-sb-dot.loading { background: var(--p208-warn); }
.p208-stage-statusbar .p208-sb-dot.error { background: var(--p208-bad); }
.p208-stage-statusbar .p208-sb-val { color: #cbd1dd; font-family: var(--mono); }
.p208-stage-statusbar .p208-sb-sep { color: rgba(255,255,255,0.08); }

/* Phase 208 preview recovery banner */
.p208-recovery-banner {
  display: none;
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  z-index: 25;
  background: linear-gradient(180deg, #3a2a0a, #2a1f0a);
  border: 1px solid var(--p208-warn);
  color: #ffe7bc;
  padding: 10px 14px;
  border-radius: var(--p208-radius-md);
  box-shadow: var(--p208-shadow-2);
  font-size: 12px;
  gap: 12px;
  align-items: center;
  max-width: 520px;
}
.p208-recovery-banner.visible { display: inline-flex; }
.p208-recovery-banner .p208-rb-title { font-weight: 600; color: #ffd899; }
.p208-recovery-banner .p208-rb-msg { color: #f3dfb9; flex: 1; }
.p208-recovery-banner .p208-rb-btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: var(--p208-warn); color: #1b1406;
  border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.p208-recovery-banner .p208-rb-btn:focus-visible { box-shadow: var(--p208-focus-ring); outline: none; }
.p208-recovery-banner .p208-rb-dismiss {
  background: transparent; color: #d1b07b; border: 1px solid rgba(255,220,160,0.3);
  padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 11px;
}

/* Responsive polish — no overflow at laptop viewports */
@media (max-width: 1440px) {
  html[data-mtle-shell="v2"] .wizard-panel { width: 400px; min-width: 340px; }
}
@media (max-width: 1280px) {
  html[data-mtle-shell="v2"] .wizard-panel { width: 380px; min-width: 320px; }
  html[data-mtle-shell="v2"] .step-indicator .step-label { font-size: 10.5px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html[data-mtle-shell="v2"] .step-indicator,
  html[data-mtle-shell="v2"] .wizard-decision-btn,
  html[data-mtle-shell="v2"] .segment-btn,
  html[data-mtle-shell="v2"] .btn,
  html[data-mtle-shell="v2"] .mte-pv-btn { transition: none !important; }
  html[data-mtle-shell="v2"] .preview-status.loading .dot { animation: none !important; }
}

/* Phase 421C (Loop-171 #6): the shell had no breakpoint below 1280 — at
 * ~830px the rail stayed 380px beside dead space while the stacked media
 * rule lost specificity. Full-width rail + single-column feature chips. */
@media (max-width: 1024px) {  /* 422A: was 900 — the ~980px band kept a cramped two-column (Codex) */
  /* Phase 457 (Loop-315 round-2 audit 🟠): the old viewport-fraction clamp made a ~167px
   * porthole (at 832×700) for 600px+ substeps behind a 6px transparent
   * scrollbar — "only the heading showed". This v2-shell rule was the
   * winning clamp (it shadowed the base-sheet fix by specificity). The
   * stacked column now owns scroll (main-body), panels take natural
   * height, Back/Next sticks — declared here so v2 wins coherently. */
  html[data-mtle-shell="v2"] .wizard-panel { width: 100%; min-width: unset; max-height: none; flex-shrink: 0; }
  html[data-mtle-shell="v2"] .main-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  html[data-mtle-shell="v2"] .nav-buttons { position: sticky; bottom: 0; z-index: 5; }
  html[data-mtle-shell="v2"] .right-panel { flex-shrink: 0; }
  html[data-mtle-shell="v2"] .p209-feature-group-chips,
  html[data-p210="v1"] .p209-feature-group-chips { grid-template-columns: 1fr 1fr !important; }
}

/* Phase 422A (Codex): phone-width — a taller preview area, and the rail
 * scroll content clears the sticky nav. */
@media (max-width: 640px) {
  html[data-mtle-shell="v2"] .right-panel { min-height: 46vh; }
  html[data-mtle-shell="v2"] .step-content-area { padding-bottom: 96px; }
}