/* Elson Motion Lab - warm-light tokens and neutral lab chrome (surgical repair v3). */

:root {
  --canvas: #F4F0E8;
  --paper: #FFFDF8;
  --ink: #173126;
  --ink-soft: #3D5349;
  --muted: #66766E;
  --forest: #173A2D;
  --forest-deep: #102A20;
  --coral: #EB6B50;
  --coral-ink: #A8402D;
  --coral-soft: #F5DDD3;
  --sage: #C9D8C7;
  --line: #D8D1C5;
  --line-dark: #AFA69A;
  --reach: #315F78;
  --reach-deep: #285468;
  --reach-soft: #DDEBED;
  --worked: #2F7651;
  --unworked: #668696;

  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); }
body { min-height: 100vh; }

/* Lab chrome (defect 12): wraps to prevent horizontal overflow, cannot alter frame width. */
.lab-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
}
.lab-bar__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; font-size: 14px; }
.lab-bar__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--coral); display: inline-block; }
.lab-bar__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.seg { display: inline-flex; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.seg > button {
  min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 0; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer;
}
.seg > button[aria-selected="true"], .seg > button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(23,49,38,.08); }

.btn-ghost {
  min-height: 44px; min-width: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--forest); color: var(--paper); border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
}
.btn-ghost:focus-visible { outline: 3px solid #F1B24A; outline-offset: 2px; }
.btn-ghost[aria-pressed="true"] { background: var(--coral-ink); }
.btn-ghost[hidden] { display: none; }

.lab-stage {
  padding: 12px; display: grid; place-items: start center;
  /* V8 repair 3: use svh so mobile chrome expansion never crops. */
  min-height: calc(100svh - 61px);
  max-width: 100%; min-width: 0;
}

/* V6 repair B / V8 repair 3: --lab-topbar-budget is written by syncFrameBudget()
   in index.html from the measured lab-bar bottom + visualViewport.height.
   Fallback uses 100svh minus a safe allowance so the hero fits without JS.
   Safe-area insets subtracted to keep clear of notches/home indicator. */
.mount-frame {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; width: 100%; max-width: 100%; position: relative;
  box-shadow: 0 20px 60px rgba(23, 49, 38, .08);
  container-type: inline-size;
  --lab-topbar-budget: calc(100svh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.mount-frame[data-viewport="1440x900"] { width: min(1440px, 100%); height: min(900px, var(--lab-topbar-budget)); }
.mount-frame[data-viewport="1365x768"] { width: min(1365px, 100%); height: min(768px, var(--lab-topbar-budget)); }
.mount-frame[data-viewport="1024x768"] { width: min(1024px, 100%); height: min(768px, var(--lab-topbar-budget)); }
.mount-frame[data-viewport="390x844"]  { width: min(390px, 100%);  height: min(844px, var(--lab-topbar-budget)); }
.mount-frame[data-viewport="fluid"]    { width: 100%; max-width: 1440px; height: var(--lab-topbar-budget); min-height: 480px; }

/* ================================================================
   Defect 1 repair: hero reference is a SIBLING of #elson-motion.
   The engine mount is a child of .hero-reference__stage. The engine
   only clears #elson-motion; the copy column is never touched.
   ================================================================ */
.hero-reference {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; padding: clamp(20px, 4svh, 40px) clamp(28px, 4.4cqi, 60px);
  align-items: center;
}
.hero-reference[data-mode="explanatory"] {
  grid-template-columns: 1fr;
  padding: 24px 40px 32px;
}
.hero-reference[data-mode="explanatory"] .hero-reference__copy { display: none; }
.hero-reference__copy { max-width: 560px; }
.hero-reference__stage {
  position: relative; height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px;
}
.motion-chrome { display: grid; gap: 8px; min-width: 0; }
.hero-reference__viewport {
  position: relative; min-width: 0; min-height: 200px;
  overflow: hidden;
}

/* V15: semantic heading in normal flow, structurally above the canvas. */
.motion-tam-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy metric" "bar bar";
  align-items: end; column-gap: 18px; row-gap: 5px;
  min-height: 52px; padding: 0 4px 8px;
  color: var(--forest-deep); text-align: left;
}
.motion-tam-rail__copy { grid-area: copy; display: grid; gap: 2px; min-width: 0; }
.motion-tam-rail__heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.motion-tam-rail__copy h2 {
  margin: 0; font: inherit; font-size: 15px; line-height: 1.2; font-weight: 650;
}
.motion-tam-rail__copy p {
  margin: 0; color: var(--muted); font-size: 12px; line-height: 1.2;
}
.motion-tam-rail__metric {
  grid-area: metric; display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--ink-soft); white-space: nowrap; font-size: 11px;
}
.motion-tam-rail__metric strong { color: var(--forest-deep); font-size: 12px; }
.motion-tam-rail > .em-tam-progress { grid-area: bar; margin: 0; height: 3px; }
.motion-tam-rail__info {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-dark);
  border-radius: 999px; background: transparent; color: var(--muted);
  font: 650 11px/1 var(--sans); cursor: help;
}
.motion-tam-rail__info:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.hero-reference[data-mode="explanatory"] .motion-tam-rail { display: none; }

/* V16: every persistent explanation lives in normal flow above the canvas.
   The motion engine owns the interactive nodes and may append its Reach team,
   Signal team and ambient legend to this semantic rail. */
.motion-meta-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "reach signal" "legend legend";
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
  min-height: 58px;
  padding: 0 4px 5px;
  border-bottom: 1px solid rgba(216, 209, 197, .72);
  color: var(--ink-soft);
  position: relative;
  z-index: 3;
}
.motion-meta-rail:empty { display: none; }
.motion-meta-rail > .em-team {
  position: static;
  inset: auto;
  transform: none;
  min-width: 0;
  padding: 5px 9px;
  gap: 7px;
  border-color: rgba(216, 209, 197, .82);
  box-shadow: none;
  background: rgba(255, 253, 248, .76);
}
.motion-meta-rail > .em-team--reach {
  grid-area: reach;
  justify-self: start;
}
.motion-meta-rail > .em-team--signal {
  grid-area: signal;
  justify-self: end;
}
.motion-meta-rail > .em-legend {
  grid-area: legend;
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
}
.motion-meta-rail > .em-legend .em-legend__row { gap: 6px; white-space: nowrap; }
.motion-meta-rail > .em-legend .em-legend__mark { width: 9px; height: 9px; }
.motion-meta-rail > .em-legend .em-legend__mark--scan { width: 14px; height: 7px; }
.hero-reference[data-mode="explanatory"] .motion-meta-rail {
  min-height: 38px;
  grid-template-areas: "reach signal";
  border-bottom-color: transparent;
}
.hero-reference[data-mode="explanatory"] .motion-meta-rail > .em-legend--ambient { display: none; }

.hero-reference__kicker {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: #8A2E1D;
  letter-spacing: .02em; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.hero-reference__kicker::before { content: ""; width: 22px; height: 2px; background: var(--coral); border-radius: 2px; }
.hero-reference__h1 {
  font-family: var(--serif); font-size: clamp(30px, 3.6cqi, 54px);
  line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 14px;
  color: var(--forest-deep);
}
.hero-reference__h1 span { display: block; color: var(--coral-ink); font-style: italic; }
.hero-reference__support {
  font-family: var(--sans); font-size: 15px; line-height: 1.45;
  color: var(--ink-soft); max-width: 480px; margin: 0 0 16px;
}
.hero-reference__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.hero-reference__cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 22px; border-radius: 999px; background: var(--forest); color: var(--paper);
  font: inherit; font-weight: 600; font-size: 14px; border: 0; cursor: default;
  text-decoration: none;
}
.hero-reference__link {
  font-size: 14px; font-weight: 600; color: var(--forest-deep); text-decoration: underline;
  text-decoration-color: var(--line-dark); text-underline-offset: 4px; cursor: default;
}
.hero-reference__promise { font-size: 12px; color: var(--muted); margin: 0; }

/* ================================================================
   Engine mount - owns canvas / SVG / poster / overlays / markers.
   ================================================================ */
.elson-motion {
  position: relative; width: 100%; height: 100%;
  background: transparent; color: var(--ink); overflow: hidden;
  container-type: inline-size;
}
.elson-motion__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.elson-motion__route  { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.elson-motion__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.elson-motion.is-poster .elson-motion__poster,
.elson-motion.is-reduced .elson-motion__poster { opacity: 1; }
.elson-motion.is-poster .elson-motion__canvas,
.elson-motion.is-reduced .elson-motion__canvas { opacity: 0; }
.elson-motion.is-reduced .elson-motion__route  { opacity: 0; }
.elson-motion__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* -------- Team labels (anchors) -------- */
.em-team {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 12px 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(23,49,38,.06);
}
.em-team__cluster { display: inline-flex; align-items: center; gap: 2px; }
.em-team__cluster > span { width: 8px; height: 8px; border-radius: 999px; }
.em-team--reach  .em-team__cluster > span { background: var(--reach); }
.em-team--signal .em-team__cluster > span { background: transparent; border: 1.5px solid var(--coral); }
/* V10.5: Reach icon is a mini wave, not three dots. */
.em-team__cluster--wave { color: var(--reach); line-height: 0; }
.em-team--reach .em-team__cluster--wave > svg { display: block; }
.em-team__text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.em-team__text b { font-weight: 600; }
.em-team__text span { font-weight: 400; color: var(--muted); font-size: 11px; }

.elson-motion[data-mode="ambient"] .em-team--reach  { top: 4%; left: 4%; right: auto; }
.elson-motion[data-mode="ambient"] .em-team--signal { top: 4%; right: 4%; bottom: auto; left: auto; }
.elson-motion[data-mode="explanatory"] .em-team--reach  { top: 6%; left: 6%; }
.elson-motion[data-mode="explanatory"] .em-team--signal { top: 6%; right: 6%; }

/* -------- Anchor / forest bracket -------- */
/* Persistent supervisory anchor: quiet canopy, always present, meets AA size. */
.em-anchor {
  position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
  font-size: 14px; font-weight: 600; color: var(--forest-deep);
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 12px; opacity: 1;
}
.em-anchor::before, .em-anchor::after { content: ""; width: 60px; height: 1px; background: var(--line-dark); }
.elson-motion[data-mode="ambient"] .em-anchor { display: none; }

/* -------- Explanatory-only overlays: hide the Signal message surface in ambient. -------- */
.elson-motion[data-mode="ambient"] .em-stage-label,
.elson-motion[data-mode="ambient"] .em-approval,
.elson-motion[data-mode="ambient"] .em-endpoint,
.elson-motion[data-mode="ambient"] .em-event-chip { display: none !important; }

/* V9: legacy explanatory legend hidden in ambient; ambient legend shown. */
.elson-motion[data-mode="ambient"] .em-legend:not(.em-legend--ambient) { display: none; }
.elson-motion[data-mode="explanatory"] .em-legend--ambient { display: none; }

.em-legend {
  position: absolute; top: 20%; left: 4%; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 12px; display: grid; gap: 6px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(23,49,38,.05);
}
.em-legend--ambient { top: auto; bottom: 12%; left: 4%; }
.em-legend__row { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.em-legend__mark { width: 12px; height: 12px; border-radius: 999px; display: inline-block; box-sizing: border-box; }
.em-legend__mark--blue  { background: #687773; }
.em-legend__mark--green { background: #27E879; }
/* V17: the buying-signal legend mark is the SAME open-arc reticle the canvas
   renders (an inline SVG) — never a filled coral disc, never a closed ring. */
.em-legend__mark--reticle {
  background: transparent; border-radius: 0;
  width: 14px; height: 14px;
  display: inline-grid; place-items: center;
}
.em-legend__mark--reticle > svg { display: block; }
.em-legend__mark--ring  { background: transparent; border: 2px solid #286A9A; }
/* V10.5: Reach coverage marker is a horizontal wave, not a ring. */
.em-legend__mark--scan  {
  background: transparent; border: none; border-radius: 0;
  width: 18px; height: 8px;
  background-image: linear-gradient(90deg, transparent 0%, #286A9A 30%, #286A9A 70%, transparent 100%);
  mask: linear-gradient(90deg, #000 0, #000 100%);
}

/* V10: compact TAM identifier, top-center of ambient scene. Hidden in explanatory. */
.em-tam-id {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,253,248,.72);
  border: 1px solid var(--line);
  color: var(--forest-deep); font-size: 12px; line-height: 1.25;
  box-shadow: 0 4px 12px rgba(23,49,38,.05);
  pointer-events: none; text-align: center;
  min-width: 252px;
}
.em-tam-id b { font-weight: 600; font-size: 13px; }
.em-tam-id span { color: var(--muted); font-size: 11px; }
.em-tam-progress__labels {
  width: 100%; margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  line-height: 1.1;
}
.em-tam-progress__labels .em-tam-progress__label { color: var(--ink-soft); font-size: 10px; font-weight: 600; }
.em-tam-progress__labels .em-tam-progress__value { color: var(--forest-deep); font-size: 10px; font-weight: 700; }
.em-tam-progress {
  display: block; width: 100%; height: 3px; margin-top: 4px;
  overflow: hidden; border-radius: 999px; background: rgba(140,153,150,.25);
}
.em-tam-progress .em-tam-progress__fill {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; background: #27E879;
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}
.elson-motion[data-mode="explanatory"] .em-tam-id { display: none; }

.em-caption { position: absolute; bottom: 4%; left: 4%; font-size: 12px; color: var(--muted); }
.elson-motion[data-mode="ambient"] .em-caption { left: auto; right: 4%; }

/* V8 repair 1: single Signal message surface with a reserved footprint so
   text changes across event -> execute never shift layout. Explanatory only. */
.em-stage-label {
  position: absolute;
  left: 50%; top: 86%;
  transform: translate(-50%, -50%);
  width: 224px; min-height: 48px; max-height: 56px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 14px; font-weight: 600;
  color: var(--forest-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(23,49,38,.08);
  transition: opacity .3s var(--ease);
  pointer-events: none;
  text-align: center;
}
.em-stage-label__text {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-stage-label__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--coral); flex: 0 0 auto; }

/* Legacy Signal surfaces permanently retired for explanatory mode too. */
.em-event-chip, .em-approval, .em-endpoint { display: none !important; }

/* V9: single ambient buying-signal bubble. Position set by JS from target. */
.em-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  width: min(252px, calc(100vw - 24px));
  height: 92px;
  min-height: 92px;
  max-width: none;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px; font-weight: 600; color: var(--forest-deep);
  display: inline-flex; align-items: flex-start; gap: 8px;
  box-shadow: 0 10px 26px rgba(23,49,38,.10);
  /* Opacity is driven by the deterministic Signal FSM; a CSS transition here
     would double-ease the fade and can leave the previous bubble lingering. */
  transition: none;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
  will-change: transform, opacity;
}
/* V17: the bubble marker is the same open-arc reticle as the canvas beacon,
   never a filled coral disc (no coral disc may read as a company state). */
.em-bubble__dot { width: 14px; height: 14px; background: transparent; flex: 0 0 auto; display: inline-grid; place-items: center; }
.em-bubble__dot > svg { display: block; }
.em-bubble__copy { display: grid; gap: 2px; min-width: 0; }
.em-bubble__eyebrow { color: var(--coral); font-size: 9px; line-height: 1.1; letter-spacing: .10em; font-weight: 700; }
.em-bubble__text { line-height: 1.25; }
.em-bubble__status { color: var(--muted); font-size: 11px; line-height: 1.25; font-weight: 500; }
.elson-motion[data-mode="explanatory"] .em-bubble { display: none !important; }

/* V19.2 persistent signal message cards: dark contrast + slight blur so the
   two lines stay readable over the moving sphere. Coral lives only on the
   reticle pill inside the card, never on a company dot. */
.em-bubble[data-em-variant="card"] {
  background: rgba(15, 26, 20, 0.90);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F2F5EF;
  box-shadow: 0 8px 22px rgba(10, 20, 15, 0.30);
}
.em-bubble[data-em-variant="card"] .em-bubble__text {
  color: #F5F7F2;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.em-bubble[data-em-variant="card"] .em-bubble__status {
  color: rgba(242, 245, 239, 0.72);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Small leader line from the card edge to the anchored dot (JS-positioned). */
.em-bubble__leader {
  position: absolute;
  width: 1.5px;
  border-radius: 1px;
  background: rgba(15, 26, 20, 0.45);
  pointer-events: none;
  display: none;
}
.em-bubble[data-em-variant="card"] .em-bubble__leader {
  display: block;
  background: rgba(15, 26, 20, 0.55);
}

/* Semantic triggers open the viewport-level inspector below. */
.em-team { cursor: help; }
.em-team:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* Viewport-level semantic inspector: never clipped by the motion stage. */
.em-tam-id,
.em-legend__row { pointer-events: auto; cursor: help; }
.em-tam-id:focus-visible,
.em-legend__row:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.em-inspector-layer {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
}
.em-inspector {
  position: absolute; display: grid; gap: 5px;
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 14px 38px 14px 16px;
  border: 1px solid rgba(216,209,197,.92); border-radius: 14px;
  background: rgba(16,42,32,.97); color: var(--paper);
  box-shadow: 0 16px 44px rgba(16,42,32,.24);
  pointer-events: auto;
}
.em-inspector[hidden] { display: none !important; }
.em-inspector__eyebrow { color: #F29A83; font-size: 10px; line-height: 1.1; letter-spacing: .10em; font-weight: 700; }
.em-inspector__title { font-size: 14px; line-height: 1.25; }
.em-inspector__body { color: rgba(255,253,248,.78); font-size: 12px; line-height: 1.42; }
.em-inspector__close {
  position: absolute; top: 7px; right: 8px; width: 28px; height: 28px;
  border: 0; border-radius: 999px; background: transparent; color: var(--paper);
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.em-inspector__close:hover { background: rgba(255,255,255,.10); }
.em-inspector__close:focus-visible { outline: 2px solid #F29A83; outline-offset: 1px; }
.em-inspector[data-mobile-sheet="true"] {
  width: auto; max-width: none;
  padding: 16px 42px 18px 18px;
  border-radius: 18px;
}

/* Focus indicator on Pause. */
#motion-toggle:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* -------- Agent markers on top of canvas -------- */
.em-marker {
  position: absolute; width: 14px; height: 14px; border-radius: 999px;
  transform: translate(-50%, -50%); pointer-events: none;
  transition: opacity .3s var(--ease), box-shadow .3s var(--ease);
  box-sizing: border-box;
}
/* V8 explanatory: solid filled markers */
.elson-motion[data-mode="explanatory"] .em-marker {
  width: 10px; height: 10px;
  box-shadow: 0 2px 6px rgba(23,49,38,.15);
}
.elson-motion[data-mode="explanatory"] .em-marker--reach  { background: var(--reach); }
.elson-motion[data-mode="explanatory"] .em-marker--signal { background: var(--coral); }
.elson-motion[data-mode="explanatory"] .em-marker--mirror { opacity: 0; }

/* Ambient agents and the target beacon are drawn on the WebGL/Canvas surface.
   Keep the DOM nodes hidden (they remain for explanatory mode). */
.elson-motion[data-mode="ambient"] .em-marker,
.elson-motion[data-mode="ambient"] .em-target-ring {
  display: none !important;
}

/* V9 corrective: transform-positioned ambient DOM. Reset left/top so
   translate3d(x,y,0) is the source of truth for position. */
.elson-motion[data-mode="ambient"] .em-marker,
.elson-motion[data-mode="ambient"] .em-bubble,
.elson-motion[data-mode="ambient"] .em-target-ring {
  left: 0; top: 0;
  will-change: transform, opacity;
}

/* Legacy target node retained for older embeds; V15 renders a four-point
   beacon in WebGL/Canvas and keeps this node hidden. */
.em-target-ring {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px solid var(--coral);
  background: transparent;
  box-shadow: 0 0 0 4px rgba(235,107,80,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
  transform: translate3d(0,0,0) translate(-50%,-50%);
}
.elson-motion[data-mode="explanatory"] .em-target-ring { display: none !important; }

/* Reduced motion is applied by the engine's .is-reduced class. This keeps an
   explicit `motion=play` demo animated even when the host OS prefers less
   motion, while `motion=reduced` and `motion=system` remain available. */
.elson-motion.is-reduced .em-marker,
.elson-motion.is-reduced .em-bubble,
.elson-motion.is-reduced .em-target-ring { display: none; }

/* -------- Mobile: copy above animation (defect 12) -------- */
@container (max-width: 720px) {
  .hero-reference {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(338px, 1fr);
    padding: 20px 20px 16px;
    gap: 10px;
    align-items: start;
  }
  .hero-reference__h1 { font-size: 30px; line-height: 1.06; margin-bottom: 10px; }
  .hero-reference__support { font-size: 13px; margin-bottom: 12px; }
}
.elson-motion { container-type: inline-size; }
@container (max-width: 720px) {
  .elson-motion[data-mode="ambient"] .em-team--reach  { top: 3%; left: 3%; right: auto; font-size: 12px; padding: 5px 9px; }
  .elson-motion[data-mode="ambient"] .em-team--signal { top: 3%; right: 3%; bottom: auto; left: auto; font-size: 12px; padding: 5px 9px; }
  /* V17 fix: scope the legacy overlay-legend rule to the in-canvas legend so
     grid-auto-flow:column can never leak into the normal-flow meta-rail
     legend (the <=560px collision Charles's audit flagged on mobile). */
  .elson-motion > .em-legend { top: auto; bottom: 12%; left: 4%; right: 4%; grid-auto-flow: column; justify-content: start; }
  .em-anchor { bottom: 2%; font-size: 12px; }
  .em-anchor::before, .em-anchor::after { width: 24px; }
}
/* V10.1: <=560px keep TAM identifier BELOW the two team labels with a safe gap. */
@container (max-width: 560px) {
  .motion-tam-rail { min-height: 48px; padding: 0 2px 7px; column-gap: 10px; }
  .motion-tam-rail__copy h2 { font-size: 14px; }
  .motion-tam-rail__copy p { font-size: 12px; }
  .motion-meta-rail {
    min-height: 70px;
    padding: 0 2px 5px;
    gap: 4px 6px;
  }
  .motion-meta-rail > .em-team { padding: 4px 7px; gap: 5px; font-size: 11px; }
  .motion-meta-rail .em-team__text span { font-size: 9px; }
  .motion-meta-rail > .em-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
    gap: 4px 8px;
    width: 100%;
    font-size: 10px;
  }
  /* V19.2: <=560px the signal message stays a full two-line card anchored on
     its dot (JS-sized, max-width 210px, up to 3 concurrent). No truncation:
     the pairs are written to fit two wrapped lines at this width. */
  .em-bubble {
    font-size: 12px;
  }
  .em-bubble__eyebrow { display: none; }
  .em-bubble__text { line-height: 1.2; }
  .em-bubble__status { font-size: 10.5px; line-height: 1.2; }
  .elson-motion[data-mode="ambient"] .em-tam-id {
    top: 44px;
    max-width: calc(100% - 24px);
    font-size: 11px;
    padding: 5px 12px;
    background: rgba(255,253,248,.9);
  }
  .elson-motion[data-mode="ambient"] .em-tam-id b { font-size: 12px; }
}
/* V8 repair 3: mobile bands active through 480px (covers 428/430px iPhones).
   Priority when vertical space is tight: hide subtitles -> hide legend ->
   hide helper copy -> reduce inter-band gaps to 8px -> reduce illustration
   height, keeping all six agents visible. Type floor: 13px mobile / 14px desktop. */
@container (max-width: 480px) {
  .hero-reference {
    padding: 14px 16px 12px;
    gap: 8px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(338px, 1fr);
  }
  .hero-reference__kicker { font-size: 13px; margin-bottom: 6px; }
  .hero-reference__h1 { font-size: 26px; line-height: 1.08; margin-bottom: 6px; }
  .hero-reference__support { font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
  .hero-reference__ctas { gap: 10px; margin-bottom: 4px; }
  .hero-reference__cta { min-height: 44px; padding: 8px 16px; font-size: 14px; }
  .hero-reference__link { font-size: 13px; }
  .hero-reference__promise { font-size: 13px; }
  /* Keep the four essential states legible on mobile. */
  .em-caption { display: none !important; }
  .elson-motion > .em-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    left: 8px; right: 8px; bottom: 4px;
    padding: 7px 9px; gap: 5px 8px;
    font-size: 11px;
    background: rgba(255,253,248,.90);
  }
  .em-legend__row { gap: 6px; min-width: 0; white-space: nowrap; }
  .em-legend__mark { width: 9px; height: 9px; }
  .em-legend__mark--scan { width: 14px; height: 7px; }
  .em-team__text span { display: block; font-size: 10px; }
  .em-team { font-size: 13px; padding: 5px 9px; gap: 6px; }
  .em-team__cluster > span { width: 6px; height: 6px; }
  .em-marker { width: 8px; height: 8px; }
  /* Team labels above the market rim, outside the point field. */
  .elson-motion[data-mode="ambient"] .em-team--reach,
  .elson-motion[data-mode="explanatory"] .em-team--reach  { top: 4px; left: 6px; right: auto; bottom: auto; }
  .elson-motion[data-mode="ambient"] .em-team--signal,
  .elson-motion[data-mode="explanatory"] .em-team--signal { top: 4px; right: 6px; left: auto; bottom: auto; }
  /* Keep the semantic legend clear of the non-essential agency anchor. */
  .em-anchor { display: none; }
  /* Signal surface: mobile footprint per spec. */
  .em-stage-label {
    width: calc(100% - 20px);
    min-height: 52px; max-height: 60px;
    top: auto; bottom: 32px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 13px;
  }
}

/* -------- Debug panel (defect 11): only when motionDebug=1 -------- */
.motion-debug {
  position: fixed; right: 12px; bottom: 12px; z-index: 20;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 12px; color: var(--ink);
  box-shadow: 0 8px 24px rgba(23,49,38,.12); max-width: 340px; width: 340px;
  max-height: 80vh; overflow: auto;
}
.motion-debug h3 { margin: 0 0 8px; font-size: 13px; }
.motion-debug__grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.motion-debug__grid label { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 6px; font-size: 11px; }
.motion-debug__grid input[type=range] { width: 100%; }
.motion-debug__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.motion-debug pre { margin: 8px 0 0; font-size: 11px; white-space: pre-wrap; color: var(--ink-soft); }