/* ══════════════════════════════════════════════════════════════
   ORDER MODAL — portable extraction (slice 137.1)
   ──────────────────────────────────────────────────────────────
   Lifted from magnetosphere.html (lines ~604–1535) per the
   137 portable order modal sprint. See:
     · output/137_portable_order_modal_plan.md
     · output/137a_verdict_compare_notes.md  (Burka chair verdict)
     · output/138_handoff_vigilant_deliberate_shannon.md
     · output/147_extraction_plan_refinement.md (this slice)

   Two namespaces coexist by design during the rescope:
     · .m-print-* / #mPrintModal — the inline magnetosphere DOM
       still uses these. Backward-compat aliases (the rules below
       hit them via comma'd selectors).
     · .rdom-* / .rd-order-modal — the portable-module DOM injected
       by js/order-modal.js init() will use these. Same rules,
       new selectors. The cutover (slice 137.3) drops the .m-*
       aliases when magnetosphere.html swaps to the shared module.

   Theming is via CSS custom properties on the modal root (or :root
   for site-wide override). Hosts override 8–12 tokens to rebrand
   without forking the stylesheet. .is-inverse (or body.m-inverse,
   the legacy host hook) flips the palette in place.

   The arc is unbroken; the chair-class trust register holds across
   every theme. Per boot.md §16 architecture inversion, the same
   modal serves revealed.design/magnetosphere, photoplate.studio,
   and any future revealed.design license under one stylesheet.

   ══════════════════════════════════════════════════════════════ */

/* ── Custom property surface ───────────────────────────────────
   Hosts override these to rebrand. Defaults match revealed.design
   canon (graphite / cream / flame / bitossi). The 137a verdict
   and Pickering's portability audit gate this surface as the
   load-bearing portability mechanism — change a token, repaint
   the entire modal; no fork. */
:root {
  /* Palette */
  --rdom-graphite:        #2C2C2C;
  --rdom-graphite-deep:   #1A1A1A;
  --rdom-graphite-warm:   #1F1A18;
  --rdom-cream:           #F5F0E8;
  --rdom-cream-warm:      #F0E8D8;
  --rdom-flame:           #E8460A;
  --rdom-flame-warm:      #E85D26;
  --rdom-flame-bright:    #FF5C1F;
  --rdom-flame-soft:      #FF7A40;
  --rdom-bitossi:         #1E5FA8;

  /* Typography */
  --rdom-font:            'Gill Sans MT', 'Gill Sans', sans-serif;
  --rdom-mono:            'Inconsolata', 'SFMono-Regular', monospace;

  /* Structural */
  --rdom-z-modal:         7;
  --rdom-z-lightbox:      8;
  --rdom-radius:          0;
  --rdom-radius-soft:     1px;
  --rdom-radius-bar:      2px;
  --rdom-shell-padding:   30px 36px 32px;
  --rdom-shell-padding-narrow: 22px 20px 26px;
  --rdom-shell-max-w:     880px;
  --rdom-shell-gap:       60px;        /* vertical breathing room */
  --rdom-grid-gap:        22px;
  --rdom-grid-gap-wide:   28px;
  --rdom-transition:      220ms ease;
  --rdom-transition-fast: 140ms ease;
  --rdom-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Surface tokens (default light-on-dark — revealed.design canon) */
  --rdom-bg:              var(--rdom-graphite);
  --rdom-fg:              var(--rdom-cream);
  --rdom-fg-muted:        rgba(245, 240, 232, 0.55);
  --rdom-fg-soft:         rgba(245, 240, 232, 0.92);
  --rdom-rule:            rgba(245, 240, 232, 0.10);
  --rdom-rule-strong:     rgba(245, 240, 232, 0.20);
  --rdom-input-bg:        rgba(245, 240, 232, 0.06);
  --rdom-tile-bg:         rgba(245, 240, 232, 0.04);
  --rdom-tile-bg-hover:   rgba(232, 70, 10, 0.10);
  --rdom-tile-bg-active:  rgba(232, 70, 10, 0.20);
  --rdom-tile-border-active: rgba(232, 70, 10, 0.70);
  --rdom-policy-bg:       rgba(245, 240, 232, 0.02);
  --rdom-preview-bg:      #1a1a1a;
  --rdom-progress-track:  rgba(245, 240, 232, 0.10);
  --rdom-feasibility-bg:  rgba(30, 95, 168, 0.08);
  --rdom-feasibility-rule:rgba(30, 95, 168, 0.55);
  --rdom-volume-bg:       rgba(232, 70, 10, 0.06);

  /* Submit-button state colors */
  --rdom-submit-bg:       var(--rdom-graphite-deep);
  --rdom-submit-bg-hover: var(--rdom-graphite-warm);
  --rdom-submit-fg:       var(--rdom-cream);
  --rdom-submit-border:   rgba(232, 70, 10, 0.55);
}

/* Visually-hidden utility — the assertive aria-live region uses
   this class to announce errors without rendering visible text
   (the visible status region does that, in flame). Per Pickering
   154 §2 + Slice 137.4-full. */
.rdom-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* BW mode — body.rd-bw applies a desaturate filter at the page
   root for the magneatosphere's BW workspace. Modal interior
   surfaces (preview canvas + lightbox stage canvas) must NOT
   inherit the filter, or the customer's preview betrays the
   moment they captured. The legacy inline rules covered the
   .m-print-* selectors; the portable module uses .rd-order-modal
   plus data-rdom hooks. Both ship here as safe duplicates so the
   inline DOM (pre-cutover) and the templated DOM (post-cutover)
   both render correctly. */
body.rd-bw .rd-order-modal,
body.rd-bw .rd-order-modal-lightbox,
body.rd-bw .rdom-shell,
body.rd-bw .rdom-grid,
body.rd-bw .rdom-col-left,
body.rd-bw .rdom-preview,
body.rd-bw .rdom-lightbox-stage,
body.rd-bw [data-rdom="previewCanvas"],
body.rd-bw [data-rdom="lightboxCanvas"],
body.rd-bw .rdom-lightbox-stage canvas { filter: none !important; }

/* Inverse mode — body-class hook (legacy magneto pattern) +
   .is-inverse modifier (the portable module's own toggle).
   Both flip the palette in-place; rules below cascade off them. */
body.m-inverse,
.rd-order-modal.is-inverse {
  --rdom-bg:              var(--rdom-cream);
  --rdom-fg:              var(--rdom-graphite);
  --rdom-fg-muted:        rgba(44, 44, 44, 0.55);
  --rdom-fg-soft:         rgba(44, 44, 44, 0.92);
  --rdom-rule:            rgba(44, 44, 44, 0.10);
  --rdom-rule-strong:     rgba(44, 44, 44, 0.20);
  --rdom-input-bg:        rgba(44, 44, 44, 0.05);
  --rdom-tile-bg:         rgba(44, 44, 44, 0.04);
  --rdom-policy-bg:       rgba(44, 44, 44, 0.025);
  --rdom-preview-bg:      var(--rdom-cream-warm);
  --rdom-progress-track:  rgba(45, 45, 45, 0.10);
  --rdom-feasibility-bg:  rgba(30, 95, 168, 0.07);
  --rdom-volume-bg:       rgba(232, 70, 10, 0.07);

  --rdom-submit-bg:       var(--rdom-graphite);
  --rdom-submit-bg-hover: #2C2622;
}

/* ══════════════════════════════════════════════════════════════
   PRINT ORDER MODAL — root surface
   Lifted verbatim from magnetosphere.html with selectors widened
   to match BOTH the legacy DOM and the portable module's DOM.
   The .rd-order-modal selector is the portable-module root; the
   .m-print-modal selector keeps the magneto inline DOM rendering
   identically until 137.3 cuts over.
   ══════════════════════════════════════════════════════════════ */
.m-print-modal,
.rd-order-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Fully opaque graphite. The host pauses behind the modal; body
     classes that drive CSS-only animations (strobe, kaleido folds,
     dither) can still flicker behind a translucent backdrop and
     bleed into field readability. Solid bg eliminates the leak
     entirely. */
  background: var(--rdom-bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  z-index: var(--rdom-z-modal);
  color: var(--rdom-fg);
  font-family: var(--rdom-font);
}
.m-print-modal.open,
.rd-order-modal.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 220ms ease;
}
/* Exit transition — the modal scales down and fades out toward
   the centre so the customer's eye lands on the resumed surface
   rather than a hard snap to background. The .is-closing class is
   set by the close lifecycle for ~280ms before .open is removed. */
.m-print-modal.is-closing .m-print-modal-inner,
.rd-order-modal.is-closing .rdom-shell {
  transform: scale(0.96);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease;
}
.m-print-modal-inner,
.rd-order-modal .rdom-shell {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease;
  position: relative;
  width: calc(100% - 48px);
  max-width: var(--rdom-shell-max-w);
  max-height: calc(100vh - var(--rdom-shell-gap));
  max-height: calc(100dvh - var(--rdom-shell-gap));
  overflow-y: auto;
  padding: var(--rdom-shell-padding);
}
@media (max-width: 720px) {
  .m-print-modal-inner,
  .rd-order-modal .rdom-shell {
    padding: var(--rdom-shell-padding-narrow);
    width: calc(100% - 24px);
  }
}

/* Modal close — Kare ESC keycap (host injects the SVG). */
.m-print-modal-close,
.rd-order-modal .rdom-close {
  position: absolute;
  top: 14px; right: 18px;
  width: 24px; height: 18px;
  background: transparent; border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--rdom-transition);
}
.m-print-modal-close:hover,
.m-print-modal-close:focus-visible,
.rd-order-modal .rdom-close:hover,
.rd-order-modal .rdom-close:focus-visible {
  opacity: 0.95; outline: none;
}
.m-print-modal-close:focus-visible,
.rd-order-modal .rdom-close:focus-visible {
  outline: 2px solid var(--rdom-flame); outline-offset: 4px;
}
.m-print-modal-close svg,
.rd-order-modal .rdom-close svg {
  display: block; width: 100%; height: 100%;
}

.m-print-modal-title,
.rd-order-modal .rdom-title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-right: 42px;        /* clears absolute esc keycap */
  opacity: 0.7;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
/* Wordmark right-pinned on the title line. Dot is flame, the
   brand's canonical separator. */
.m-print-modal-mark,
.rd-order-modal .rdom-mark {
  font-family: var(--rdom-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  opacity: 0.55;
  white-space: nowrap;
}
.m-print-modal-mark-dot,
.rd-order-modal .rdom-mark-dot {
  color: var(--rdom-flame);
  opacity: 1;
}

.m-print-grid,
.rd-order-modal .rdom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rdom-grid-gap);
}
@media (min-width: 720px) {
  .m-print-grid,
  .rd-order-modal .rdom-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--rdom-grid-gap-wide);
  }
}

/* Preview frame — 3:2 in landscape, 2:3 in portrait. */
.m-print-preview,
.rd-order-modal .rdom-preview {
  background: var(--rdom-preview-bg);
  border: 1px solid var(--rdom-rule-strong);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-print-preview.is-portrait,
.rd-order-modal .rdom-preview.is-portrait { aspect-ratio: 2 / 3; }
.m-print-preview canvas,
.rd-order-modal .rdom-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.m-print-preview.is-clickable,
.rd-order-modal .rdom-preview.is-clickable {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.m-print-preview.is-clickable:hover,
.m-print-preview.is-clickable:focus-visible,
.rd-order-modal .rdom-preview.is-clickable:hover,
.rd-order-modal .rdom-preview.is-clickable:focus-visible {
  border-color: var(--rdom-flame-warm);
  box-shadow: 0 0 0 1px rgba(232, 93, 38, 0.35);
  outline: none;
}

/* Metadata block — Inconsolata, dt/dd grid. */
.m-print-meta,
.rd-order-modal .rdom-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 14px 0 0;
  font-family: var(--rdom-mono);
  font-size: 11px;
  line-height: 1.45;
}
.m-print-meta dt,
.rd-order-modal .rdom-meta dt {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.m-print-meta dd,
.rd-order-modal .rdom-meta dd {
  margin: 0;
  opacity: 0.92;
  word-break: break-word;
}

/* Track / artist / album override — typeset as continuation of
   the metadata dl above. Magneto-vocabulary in the legacy DOM;
   the portable module renames to .rdom-source-override. */
.m-print-track-override,
.rd-order-modal .rdom-source-override {
  margin: 4px 0 0 !important;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
}
.m-print-track-override legend,
.rd-order-modal .rdom-source-override legend {
  grid-column: 1 / 2;
  padding: 0;
  font-family: var(--rdom-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1.45;
  align-self: start;
}
.m-print-track-override input[type="text"],
.rd-order-modal .rdom-source-override input[type="text"] {
  grid-column: 2 / 3;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rdom-rule);
  font-family: var(--rdom-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--rdom-fg-soft);
  letter-spacing: 0;
}
.m-print-track-override input[type="text"]:focus,
.rd-order-modal .rdom-source-override input[type="text"]:focus {
  outline: none;
  border-bottom-color: rgba(232, 70, 10, 0.55);
}
.m-print-track-override input[type="text"]::placeholder,
.rd-order-modal .rdom-source-override input[type="text"]::placeholder {
  color: rgba(245, 240, 232, 0.32);
  font-style: italic;
}
body.m-inverse .m-print-track-override input[type="text"]::placeholder,
.rd-order-modal.is-inverse .rdom-source-override input[type="text"]::placeholder {
  color: rgba(44, 44, 44, 0.36);
}
.m-print-track-override input[type="text"]:not(:first-of-type),
.rd-order-modal .rdom-source-override input[type="text"]:not(:first-of-type) {
  grid-column: 2 / 3;
}

/* Form chrome */
.m-print-modal fieldset,
.rd-order-modal fieldset {
  border: 0; padding: 0;
  margin: 0 0 16px;
}
.m-print-modal legend,
.rd-order-modal legend {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
  padding: 0;
}
.m-print-modal input[type="text"],
.m-print-modal input[type="email"],
.m-print-modal textarea,
.rd-order-modal input[type="text"],
.rd-order-modal input[type="email"],
.rd-order-modal textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--rdom-input-bg);
  border: 1px solid var(--rdom-rule-strong);
  color: inherit;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 6px;
}
.m-print-modal textarea,
.rd-order-modal textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}
.m-print-modal input[type="text"]:focus,
.m-print-modal input[type="email"]:focus,
.m-print-modal textarea:focus,
.rd-order-modal input[type="text"]:focus,
.rd-order-modal input[type="email"]:focus,
.rd-order-modal textarea:focus {
  outline: none;
  border-color: rgba(232, 70, 10, 0.65);
}

/* Orientation toggle — 2-up segmented control. Hidden radios; the
   visible <span> renders the label, .is-active flames it. */
.m-print-orient,
.rd-order-modal .rdom-orient {
  display: flex;
  border: 1px solid var(--rdom-rule-strong);
}
.m-print-orient label,
.rd-order-modal .rdom-orient label {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  transition: background var(--rdom-transition-fast),
              color var(--rdom-transition-fast),
              opacity var(--rdom-transition-fast);
  position: relative;
}
.m-print-orient input,
.rd-order-modal .rdom-orient input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
.m-print-orient label.is-active,
.rd-order-modal .rdom-orient label.is-active {
  background: var(--rdom-tile-bg-active);
  color: var(--rdom-flame);
  opacity: 1;
}

/* Size selector — 5-card grid. */
.m-print-sizes,
.rd-order-modal .rdom-sizes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.m-print-size-opt,
.rd-order-modal .rdom-size-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  background: var(--rdom-tile-bg);
  border: 1px solid rgba(245, 240, 232, 0.16);
  cursor: pointer;
  transition: background var(--rdom-transition-fast),
              border-color var(--rdom-transition-fast);
  position: relative;
}
.m-print-size-opt input,
.rd-order-modal .rdom-size-opt input {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.m-print-size-opt:hover,
.rd-order-modal .rdom-size-opt:hover {
  background: var(--rdom-tile-bg-hover);
  border-color: rgba(232, 70, 10, 0.40);
}
.m-print-size-opt.is-active,
.rd-order-modal .rdom-size-opt.is-active {
  background: var(--rdom-tile-bg-active);
  border-color: var(--rdom-tile-border-active);
}
.m-print-size-opt.is-disabled,
.rd-order-modal .rdom-size-opt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.m-print-size-opt.is-disabled:hover,
.rd-order-modal .rdom-size-opt.is-disabled:hover {
  background: var(--rdom-tile-bg);
  border-color: rgba(245, 240, 232, 0.16);
}
body.m-inverse .m-print-size-opt,
.rd-order-modal.is-inverse .rdom-size-opt {
  border-color: rgba(44, 44, 44, 0.16);
}

.m-print-feasibility-hint,
.rd-order-modal .rdom-feasibility-hint {
  margin: 12px 0 0;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(245, 240, 232, 0.7);
  background: var(--rdom-feasibility-bg);
  border-left: 2px solid var(--rdom-feasibility-rule);
  border-radius: var(--rdom-radius-soft);
}
body.m-inverse .m-print-feasibility-hint,
.rd-order-modal.is-inverse .rdom-feasibility-hint {
  color: rgba(44, 44, 44, 0.7);
}

.m-print-size-name,
.rd-order-modal .rdom-size-name {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  font-family: var(--rdom-mono);
}
.m-print-size-base,
.rd-order-modal .rdom-size-base {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Tier radios */
.m-print-tiers,
.rd-order-modal .rdom-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-print-tier-opt,
.rd-order-modal .rdom-tier-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  background: var(--rdom-tile-bg);
  border: 1px solid rgba(245, 240, 232, 0.16);
  cursor: pointer;
  transition: background var(--rdom-transition-fast),
              border-color var(--rdom-transition-fast);
  position: relative;
}
.m-print-tier-opt input,
.rd-order-modal .rdom-tier-opt input {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.m-print-tier-opt:hover,
.rd-order-modal .rdom-tier-opt:hover {
  background: var(--rdom-tile-bg-hover);
  border-color: rgba(232, 70, 10, 0.40);
}
.m-print-tier-opt.is-active,
.rd-order-modal .rdom-tier-opt.is-active {
  background: var(--rdom-tile-bg-active);
  border-color: var(--rdom-tile-border-active);
}
body.m-inverse .m-print-tier-opt,
.rd-order-modal.is-inverse .rdom-tier-opt {
  border-color: rgba(44, 44, 44, 0.16);
}
.m-print-tier-name,
.rd-order-modal .rdom-tier-name {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  grid-column: 1;
}
.m-print-tier-desc,
.rd-order-modal .rdom-tier-desc {
  font-size: 11px;
  opacity: 0.7;
  grid-column: 1;
}
.m-print-tier-price,
.rd-order-modal .rdom-tier-price {
  font-family: var(--rdom-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* ── Submit — state-machine surface ─────────────────────────────
   "More gleamy than leary" — single-color gleam pulse at rest,
   no chromatic shimmer. The button face becomes the status surface
   during the order flow: PREPARING covers fast steps, UPLOADING
   shows a horizontal flame fill (left → right) driven by R2 onprogress,
   SUCCESS/EMAIL cycle the brand colors slowly with the order id below.
   No separate progress bar, no separate success banner — all on the
   button. Per Henke 137 §3 and the chair-class trust frame. */
.m-print-submit,
.rd-order-modal .rdom-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 22px 24px;
  margin-top: 8px;
  background: var(--rdom-submit-bg);
  border: 1px solid var(--rdom-submit-border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: var(--rdom-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  color: var(--rdom-submit-fg);
  transition: border-color var(--rdom-transition),
              box-shadow var(--rdom-transition),
              background var(--rdom-transition);
  animation: rdom-submit-gleam 5s ease-in-out infinite;
}
.m-print-submit:hover:not(:disabled):not(.is-uploading):not(.is-preparing):not(.is-success):not(.is-email),
.rd-order-modal .rdom-submit:hover:not(:disabled):not(.is-uploading):not(.is-preparing):not(.is-success):not(.is-email) {
  border-color: var(--rdom-flame-bright);
  box-shadow: 0 0 28px rgba(232, 70, 10, 0.40),
              inset 0 0 32px rgba(232, 70, 10, 0.08);
  background: var(--rdom-submit-bg-hover);
}
.m-print-submit:disabled,
.rd-order-modal .rdom-submit:disabled {
  opacity: 0.4; cursor: not-allowed;
  animation: none;
  box-shadow: none;
}
/* Active states pause the resting gleam — only one motion source
   at a time. pointer-events: none replaces the disabled attribute
   (which was tinting the button to opacity 0.4 mid-flight, ghosting
   the very moment we want the button to feel ALIVE). */
.m-print-submit.is-preparing,
.m-print-submit.is-uploading,
.m-print-submit.is-success,
.m-print-submit.is-email,
.rd-order-modal .rdom-submit.is-preparing,
.rd-order-modal .rdom-submit.is-uploading,
.rd-order-modal .rdom-submit.is-success,
.rd-order-modal .rdom-submit.is-email {
  animation: none;
  cursor: wait;
  pointer-events: none;
}
.m-print-submit.is-uploading,
.rd-order-modal .rdom-submit.is-uploading {
  border-color: var(--rdom-flame-bright);
  box-shadow: 0 0 18px rgba(232, 70, 10, 0.55),
              0 0 36px rgba(232, 70, 10, 0.30),
              0 0 64px rgba(232, 70, 10, 0.15),
              inset 0 0 24px rgba(232, 70, 10, 0.10);
  animation: rdom-submit-neon 2.4s ease-in-out infinite;
}
@keyframes rdom-submit-neon {
  0%, 100% {
    box-shadow: 0 0 18px rgba(232, 70, 10, 0.55),
                0 0 36px rgba(232, 70, 10, 0.30),
                0 0 64px rgba(232, 70, 10, 0.15),
                inset 0 0 24px rgba(232, 70, 10, 0.10);
    border-color: var(--rdom-flame-bright);
  }
  50% {
    box-shadow: 0 0 22px rgba(232, 70, 10, 0.75),
                0 0 48px rgba(232, 70, 10, 0.45),
                0 0 84px rgba(232, 70, 10, 0.22),
                inset 0 0 32px rgba(232, 70, 10, 0.18);
    border-color: var(--rdom-flame-soft);
  }
}
.m-print-submit.is-success,
.m-print-submit.is-email,
.rd-order-modal .rdom-submit.is-success,
.rd-order-modal .rdom-submit.is-email {
  cursor: default;
  border-color: var(--rdom-flame);
  box-shadow: 0 0 18px rgba(232, 70, 10, 0.20);
}
.m-print-submit-label,
.rd-order-modal .rdom-submit-label {
  display: inline-block;
  line-height: 1.1;
}
.m-print-submit-state,
.rd-order-modal .rdom-submit-state {
  display: none;
}
.m-print-submit:not(.is-preparing):not(.is-uploading):not(.is-success):not(.is-email)
  .m-print-submit-state-idle,
.rd-order-modal .rdom-submit:not(.is-preparing):not(.is-uploading):not(.is-success):not(.is-email)
  .rdom-submit-state-idle { display: inline; }
.m-print-submit.is-preparing .m-print-submit-state-preparing,
.rd-order-modal .rdom-submit.is-preparing .rdom-submit-state-preparing { display: inline; }
.m-print-submit.is-uploading .m-print-submit-state-uploading,
.rd-order-modal .rdom-submit.is-uploading .rdom-submit-state-uploading {
  display: inline-block;
  background: linear-gradient(
    to right,
    var(--rdom-flame) 0%,
    var(--rdom-flame) var(--progress, 0%),
    var(--rdom-cream) var(--progress, 0%),
    var(--rdom-cream) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-image 200ms linear;
}
.m-print-submit.is-success .m-print-submit-state-success,
.rd-order-modal .rdom-submit.is-success .rdom-submit-state-success { display: inline; }
.m-print-submit.is-email   .m-print-submit-state-email,
.rd-order-modal .rdom-submit.is-email   .rdom-submit-state-email { display: inline; }

/* Color cycle on success + email — slow 4s walk through the brand
   wheel (flame → cream → bitossi → flame). Reads as a quiet
   celebration, not a chromatic strobe. NOTE: per 138 Q-future-2,
   the bitossi-on-graphite contrast at the 66% phase is ~2.9:1
   (fails WCAG AA) — flagged for a Wintour brand-canon gate. */
.m-print-submit.is-success .m-print-submit-state-success,
.m-print-submit.is-email   .m-print-submit-state-email,
.rd-order-modal .rdom-submit.is-success .rdom-submit-state-success,
.rd-order-modal .rdom-submit.is-email   .rdom-submit-state-email {
  animation: rdom-submit-cycle 4s ease-in-out infinite;
}
@keyframes rdom-submit-cycle {
  0%, 100% { color: var(--rdom-flame); }
  33%      { color: var(--rdom-cream); }
  66%      { color: var(--rdom-bitossi); }
}

/* Order id row — sits BELOW the button as a sibling so the button
   itself stays the same height through every state. Always present
   in document flow with reserved height; INVISIBLE until success
   /email state. */
.m-print-submit-orderid,
.rd-order-modal .rdom-submit-orderid {
  display: block;
  margin: 10px 0 0;
  font-family: var(--rdom-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  font-weight: 400;
  text-align: center;
  color: var(--rdom-fg-muted);
  min-height: 1.4em;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--rdom-transition-slow);
}
.m-print-submit.is-success + .m-print-submit-orderid,
.m-print-submit.is-email   + .m-print-submit-orderid,
.rd-order-modal .rdom-submit.is-success + .rdom-submit-orderid,
.rd-order-modal .rdom-submit.is-email   + .rdom-submit-orderid {
  visibility: visible;
  opacity: 1;
}

/* 137.6-MVP — Receipt-share affordance.
   Appended to .rdom-submit-orderid by _showReceiptAffordance after
   submit success. The button reads as a quiet courtesy line, not a
   second CTA — same monospace voice as the order id, slightly
   smaller weight, flame underline-on-hover for affordance. The
   button respects .rdom-submit-orderid's visibility gate (it's
   appended only when the parent is visible during success/email
   states). Per Burka 158 §1 — the customer's exit pattern after
   success is: see the order id, save the URL, leave the modal. */
.rd-order-modal .rdom-receipt-share {
  display: inline-block;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--rdom-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--rdom-flame);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 180ms ease;
  border-bottom: 1px dotted var(--rdom-flame);
}
.rd-order-modal .rdom-receipt-share:hover,
.rd-order-modal .rdom-receipt-share:focus-visible {
  opacity: 1;
  outline: none;
  border-bottom-style: solid;
}

@keyframes rdom-submit-gleam {
  0%, 100% {
    box-shadow: 0 0 14px rgba(232, 70, 10, 0.10),
                inset 0 0 18px rgba(232, 70, 10, 0.04);
    border-color: rgba(232, 70, 10, 0.45);
  }
  50% {
    box-shadow: 0 0 22px rgba(232, 70, 10, 0.20),
                inset 0 0 22px rgba(232, 70, 10, 0.07);
    border-color: rgba(232, 70, 10, 0.70);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-print-submit,
  .m-print-submit.is-success .m-print-submit-state-success,
  .m-print-submit.is-email   .m-print-submit-state-email,
  .rd-order-modal .rdom-submit,
  .rd-order-modal .rdom-submit.is-success .rdom-submit-state-success,
  .rd-order-modal .rdom-submit.is-email   .rdom-submit-state-email {
    animation: none;
  }
}

/* Address row */
.m-print-addr-row,
.rd-order-modal .rdom-addr-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.m-print-addr-row input,
.rd-order-modal .rdom-addr-row input { margin-bottom: 0 !important; }
@media (max-width: 480px) {
  .m-print-addr-row,
  .rd-order-modal .rdom-addr-row { grid-template-columns: 1fr; gap: 0; }
  .m-print-addr-row input,
  .rd-order-modal .rdom-addr-row input { margin-bottom: 6px !important; }
}

/* Volume discount callout — sits in the policy block alongside the
   shipping/payment lines but visually distinguished. */
.m-print-foot-volume,
.rd-order-modal .rdom-foot-volume {
  margin-top: 10px !important;
  padding: 6px 10px;
  border-left: 2px solid var(--rdom-flame);
  background: var(--rdom-volume-bg);
  opacity: 0.72 !important;
  letter-spacing: 0.14em !important;
}

.m-print-status,
.rd-order-modal .rdom-status {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  margin: 8px 0 0;
  text-align: center;
  transition: opacity 200ms ease;
}
.m-print-status.is-shown,
.rd-order-modal .rdom-status.is-shown { opacity: 0.85; }
.m-print-status.is-error,
.rd-order-modal .rdom-status.is-error { color: var(--rdom-flame); opacity: 1; }
.m-print-status.is-ok,
.rd-order-modal .rdom-status.is-ok { color: var(--rdom-bitossi); opacity: 1; }

/* Legacy progress bar (kept for compatibility — the button face
   carries the active progress signal; this is a fallback hook
   for any host that wires its own progress UI). */
.m-print-progress,
.rd-order-modal .rdom-progress {
  margin: 8px 0 0;
  height: 4px;
  background: var(--rdom-progress-track);
  border-radius: var(--rdom-radius-bar);
  overflow: hidden;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.m-print-progress.is-shown,
.rd-order-modal .rdom-progress.is-shown { opacity: 1; }
.m-print-progress-fill,
.rd-order-modal .rdom-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--rdom-flame-warm);
  border-radius: var(--rdom-radius-bar);
  transition: width 180ms ease;
}

.m-print-foot,
.rd-order-modal .rdom-foot {
  margin: 12px 0 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.42;
  text-align: center;
  line-height: 1.5;
}

/* Policy inset — separate block from the metadata above. */
.m-print-policy,
.rd-order-modal .rdom-policy {
  margin-top: 18px;
  padding: 14px 14px 12px;
  border-top: 1px solid var(--rdom-rule);
  background: var(--rdom-policy-bg);
  border-radius: var(--rdom-radius-soft);
}
.m-print-policy .m-print-foot,
.rd-order-modal .rdom-policy .rdom-foot {
  margin-top: 0;
  margin-bottom: 6px;
  text-align: left;
}
.m-print-policy .m-print-foot:last-child,
.rd-order-modal .rdom-policy .rdom-foot:last-child {
  margin-bottom: 0;
}
.m-print-foot-shipping,
.rd-order-modal .rdom-foot-shipping {
  opacity: 0.62 !important;
}

/* Preview action — typeset link, two-line. */
.m-print-preview-action,
.rd-order-modal .rdom-preview-action {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  cursor: pointer;
  text-align: center;
  transition: opacity 150ms ease;
  line-height: 1.6;
}
.m-print-preview-action:hover,
.m-print-preview-action:focus-visible,
.rd-order-modal .rdom-preview-action:hover,
.rd-order-modal .rdom-preview-action:focus-visible {
  opacity: 1;
  outline: none;
}
.m-print-preview-action:hover .m-print-preview-action-line,
.m-print-preview-action:focus-visible .m-print-preview-action-line,
.rd-order-modal .rdom-preview-action:hover .rdom-preview-action-line,
.rd-order-modal .rdom-preview-action:focus-visible .rdom-preview-action-line {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.m-print-preview-action-line,
.rd-order-modal .rdom-preview-action-line { display: block; }
.m-print-preview-action-sub,
.rd-order-modal .rdom-preview-action-sub {
  opacity: 0.7;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  margin-top: 1px;
}

/* Two-line medium label */
.m-print-medium-name,
.rd-order-modal .rdom-medium-name { display: block; }
.m-print-medium-sub,
.rd-order-modal .rdom-medium-sub {
  display: block;
  opacity: 0.6;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   WATERMARK LIGHTBOX — full-bleed preview of the captured moment
   with the studio watermark applied. Layered above the print modal
   so the customer can scrutinise the free version at viewport scale
   without losing their place in the order flow.
   ══════════════════════════════════════════════════════════════ */
.m-watermark-lightbox,
.rd-order-modal-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--rdom-z-lightbox);
  background: rgba(15, 15, 15, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  box-sizing: border-box;
  flex-direction: column;
  gap: 18px;
}
.m-watermark-lightbox.is-open,
.rd-order-modal-lightbox.is-open { display: flex; }

.m-watermark-lightbox-stage,
.rd-order-modal-lightbox .rdom-lightbox-stage {
  flex: 1 1 auto;
  width: 100%;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.m-watermark-lightbox-stage canvas,
.rd-order-modal-lightbox .rdom-lightbox-stage canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  background: var(--rdom-graphite-deep);
}

.m-watermark-lightbox-close,
.rd-order-modal-lightbox .rdom-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--rdom-cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}
.m-watermark-lightbox-close:hover,
.m-watermark-lightbox-close:focus-visible,
.rd-order-modal-lightbox .rdom-lightbox-close:hover,
.rd-order-modal-lightbox .rdom-lightbox-close:focus-visible {
  opacity: 1;
  outline: none;
}

.m-watermark-lightbox-actions,
.rd-order-modal-lightbox .rdom-lightbox-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.m-watermark-action,
.rd-order-modal-lightbox .rdom-lightbox-action {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.4);
  border-radius: var(--rdom-radius-bar);
  color: var(--rdom-cream);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  min-width: 220px;
}
.m-watermark-action:hover,
.m-watermark-action:focus-visible,
.rd-order-modal-lightbox .rdom-lightbox-action:hover,
.rd-order-modal-lightbox .rdom-lightbox-action:focus-visible {
  background: rgba(232, 70, 10, 0.12);
  border-color: var(--rdom-flame-warm);
  color: var(--rdom-cream);
  outline: none;
}

.m-watermark-foot,
.rd-order-modal-lightbox .rdom-lightbox-foot {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.42;
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}

@media (max-width: 540px) {
  .m-watermark-lightbox,
  .rd-order-modal-lightbox { padding: 2vh 2vw; gap: 12px; }
  .m-watermark-action,
  .rd-order-modal-lightbox .rdom-lightbox-action { min-width: 88vw; }
}

/* ── End order-modal.css — slice 137.1 ─────────────────────────
   Per boot.md §15 + §16 + §14: the work is iterative; names
   change; URLs move; files retire; the brand voice tightens with
   use. This file lands as v1 of the portable extraction. The
   swap of magnetosphere.html to the shared module is slice 137.3;
   the photoplate port is slice 137.5. The file lives next to the
   build pipeline's hash discipline (build.js TARGETS includes
   `dir: 'css'`), so the next deploy hashes this asset and rewrites
   every consumer's <link rel> automatically. */