/* ==========================================================================
   product-mockups.css — Animated product mockups (marketing site, Task T6)

   Six self-contained DOM/CSS mockups (M1–M6) that reproduce real Alembic
   screens for marketing use: extraction run, source grounding, profile
   assembly, standup/briefing card, DISTLR conversation, Analyst answer.

   Scope: this file owns ALL styling for public/scroll-experience/mockups/*.js
   and public/mockups.html. It does not touch marketing.css or
   scroll-experience/styles.css (owned by concurrent tasks).

   Token strategy: mockups may render standalone (public/mockups.html, no
   app shell) or embedded inside pages that already load public/style.css
   (features.html, the scroll experience). Per the T6 brief, the token
   block below re-declares the SAME custom property names used in
   public/style.css (--color-*) and react-islands/src/shared/tokens.css
   (--ri-prov-* provenance ramp), scoped to `.pm-root`, so the values are
   correct either way — if the real stylesheet is already on the page its
   cascade wins (identical values); if not, this block supplies them. Every
   hex value in this file lives in this one block; everything below it is
   var()-only. Quality/status language matches the product exactly (High /
   Review chips, Needs you / Working / Done phrasing) — never a numeric or
   percentage confidence score anywhere in this file or the modules that
   consume it.
   ========================================================================== */

.pm-root {
  /* Brand */
  --color-action: #4A8B6A;
  /* Green as TEXT. Same split marketing.css uses: --color-action decorates and fills, this reads.
     Declared here in .pm-root rather than :root because .pm-root's tokens sit on the mounted
     element itself and would win over any inherited value. */
  --color-action-text: #35684E;
  --color-action-hover: #3F7D5E;
  --color-action-soft: rgba(74, 139, 106, 0.08);
  --color-action-glow: rgba(74, 139, 106, 0.2);
  --alembic: #1F7AD4;

  /* Ink scale */
  --color-ink-900: #16130E;
  --color-ink-700: #3D3730;
  --color-ink-600: #655D53;
  --color-ink-500: #7A7168;
  --color-ink-400: #9B9289;
  --color-ink-300: #B5ADA5;
  --color-ink-200: #CFC9C2;
  --color-ink-100: #E6E2DD;
  --color-ink-50: #F2F0ED;
  --color-ink-03: #F8F6F3;
  --color-white: #FFFFFF;

  /* Blue (grounding / DISTLR accent — data, never a CTA) */
  --color-blue-700: #1A6FC2;
  --color-blue-600: #1F7AD4;
  --color-blue-500: #4A9BE8;
  --color-blue-100: #E8F2FC;
  --color-blue-50: #F4F8FD;

  /* Green (done / high quality) */
  --color-green-700: #1E7E34;
  --color-green-600: #34A853;
  --color-green-100: #DCFCE7;
  --color-green-text: #1E7E34;

  /* Amber (needs a look / review) */
  --color-amber-600: #D97706;
  --color-amber-100: #FEF3C7;
  --color-amber-text: #8B6914;
  --color-amber-bg: #FEF3CD;

  /* Red (reserved — used only for the rare "error" pipeline state) */
  --color-red-600: #DC2626;
  --color-red-100: #FEE2E2;
  --color-red-text: #C5221F;

  /* Provenance ramp — mirrors react-islands/src/shared/tokens.css exactly
     (deterministic per-document tone; never rainbow; amber is reserved
     separately for conflict-winner badges and is not part of this rotation). */
  --pm-prov-sand-fg: #6B5F4C;   --pm-prov-sand-bg: rgba(120, 104, 72, 0.12);
  --pm-prov-clay-fg: #6E574A;   --pm-prov-clay-bg: rgba(126, 92, 74, 0.12);
  --pm-prov-sage-fg: #556052;   --pm-prov-sage-bg: rgba(90, 104, 88, 0.12);
  --pm-prov-slate-fg: #525A63;  --pm-prov-slate-bg: rgba(84, 94, 105, 0.12);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px;

  /* Shadow */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.24);

  /* Motion — spring/decelerate only, never linear */
  --pm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pm-decel: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Cinema backdrop — mirrors scroll-experience/styles.css's .scroll-sections
     --se-bg-deepest exactly, so the standalone harness page (which never
     loads that stylesheet) still matches the landing's dark narrative mood. */
  --pm-cinema-bg: #060810;
  --pm-cinema-bg-alt: #0a0d14;

  /* These mockups are embedded in columns of varying width (the harness gives
     them ~700px; a features.html feature-block column is ~470px; mobile is
     ~340px). Size-query the mockup itself rather than the viewport, so a narrow
     column adapts the same way a narrow phone does. See the @container rules
     at the end of this file. */
  container-type: inline-size;
  container-name: pm;
}

/* ==========================================================================
   Base — mockup shell
   ========================================================================== */

.pm-mock {
  font-family: var(--font-body);
  color: var(--color-ink-900);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.pm-mock * { box-sizing: border-box; }

/* The "device": a light product surface floating on the harness/section's
   dark backdrop — how the real (light-mode) app is meant to look when
   marketed, independent of the visitor's OS theme. */
.pm-panel {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.pm-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-ink-50);
  background: var(--color-ink-03);
}

.pm-panel-dots { display: flex; gap: 5px; }
.pm-panel-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-ink-100); }

.pm-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-panel-sub {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* E12: was --color-ink-400 (2.84 on the panel head, 3.96 under the landing brightness wrapper). */
  color: var(--color-ink-500);
}

/* Document-level status pill — the product's own three-state vocabulary
   (space-page WorkBand: Needs you / Working / Done). Distinct from the
   per-step pipeline states above it. */
.pm-doc-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  transition: background 0.3s var(--pm-ease-out), color 0.3s var(--pm-ease-out);
}
.pm-doc-status--working { background: var(--color-blue-100); color: var(--color-blue-700); }
.pm-doc-status--done { background: var(--color-green-100); color: var(--color-green-700); }

.pm-panel-body { padding: var(--space-5); }

/* ==========================================================================
   Shared — status dot (mirrors doc-extraction FieldStatusIndicator)
   ========================================================================== */

.pm-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}
.pm-status-dot--uncertain { background: var(--color-amber-600); }
.pm-status-dot--corrected { background: var(--color-blue-600); }
.pm-status-dot--extracting {
  background: var(--color-blue-500);
  animation: pm-status-pulse 1.4s var(--pm-ease-out) infinite;
}

@keyframes pm-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ==========================================================================
   Shared — quality chip (mirrors space-page DocumentTable sp-quality-chip:
   internal categorical judgment is high/medium/low; the chip LABEL follows
   the real product's own text exactly — "High" / "Review" — never a number)
   ========================================================================== */

.pm-quality-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pm-quality-chip--high { background: var(--color-green-100); color: var(--color-green-text); }
.pm-quality-chip--review { background: var(--color-amber-100); color: var(--color-amber-text); }

/* ==========================================================================
   M1 — Pipeline stepper (mirrors PipelineStepper: circle -> rounded-square
   morph as nodes go pending -> active -> done)
   ========================================================================== */

.pm-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 0 var(--space-5);
}

.pm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 76px;
}

.pm-step-ring {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-ink-200);
  background: var(--color-white);
  border-radius: 50%;
  color: var(--color-ink-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  transition: border-radius 0.5s var(--pm-spring), background 0.4s var(--pm-ease-out),
    border-color 0.4s var(--pm-ease-out), color 0.4s var(--pm-ease-out), box-shadow 0.4s var(--pm-ease-out);
  position: relative;
}

.pm-step-ring svg { width: 14px; height: 14px; }

.pm-step[data-state="active"] .pm-step-ring {
  border-radius: 30%;
  border: 1.5px solid var(--color-blue-600);
  background: var(--color-blue-50);
  color: var(--color-blue-600);
  box-shadow: 0 0 0 5px rgba(31, 122, 212, 0.08);
}
.pm-step[data-state="active"] .pm-step-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 35%;
  border: 1.5px solid var(--color-blue-500);
  opacity: 0;
  animation: pm-active-pulse 2.2s var(--pm-ease-out) infinite;
}

.pm-step[data-state="done"] .pm-step-ring {
  border-radius: 22%;
  border: 1.5px solid transparent;
  background: var(--color-green-100);
  color: var(--color-green-700);
}

.pm-step-check { stroke-dasharray: 22; stroke-dashoffset: 22; }
.pm-step[data-state="done"] .pm-step-check { animation: pm-draw-check 0.4s var(--pm-decel) forwards; }

.pm-step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-500);
  text-align: center;
  transition: color 0.3s var(--pm-ease-out), font-weight 0.3s var(--pm-ease-out);
}
.pm-step[data-state="active"] .pm-step-label { color: var(--color-blue-700); font-weight: 700; }
.pm-step[data-state="done"] .pm-step-label { color: var(--color-ink-600); }

.pm-wire {
  flex: 1;
  height: 2px;
  margin-top: 15px;
  min-width: 20px;
  background: repeating-linear-gradient(90deg, var(--color-ink-100) 0, var(--color-ink-100) 4px, transparent 4px, transparent 9px);
  transition: background 0.4s var(--pm-ease-out), opacity 0.4s var(--pm-ease-out);
}
.pm-wire[data-state="active"] { background: var(--color-ink-50); }
.pm-wire[data-state="done"] { background: var(--color-green-600); opacity: 0.5; }

.pm-stepper-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-600);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 var(--space-4);
  transition: color 0.3s var(--pm-ease-out);
}
.pm-stepper-status--done { color: var(--color-green-700); }
.pm-stepper-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: pm-status-pulse 1.6s var(--pm-ease-out) infinite;
}
.pm-stepper-status--done .pm-stepper-status-dot { animation: none; }

@keyframes pm-active-pulse {
  0% { opacity: 0; transform: scale(0.96); }
  40% { opacity: 0.35; }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes pm-draw-check { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   Shared — section card + field grid + field cell (mirrors SectionCard +
   FieldCell from doc-extraction)
   ========================================================================== */

.pm-section {
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pm-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink-03);
  border-bottom: 1px solid var(--color-ink-50);
}

.pm-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-900);
}

.pm-source-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-500);
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}

.pm-field-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-500);
}

.pm-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-ink-50);
}

.pm-field {
  background: var(--color-white);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 62px;
  transition: background 0.5s var(--pm-ease-out);
}

.pm-field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-500);
}

.pm-field-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 20px;
}

.pm-field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-900);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s var(--pm-decel), transform 0.35s var(--pm-decel);
}

.pm-field--filled .pm-field-value { opacity: 1; transform: translateY(0); }

.pm-field-skeleton {
  height: 12px;
  width: 68%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-ink-50) 25%, var(--color-ink-100) 50%, var(--color-ink-50) 75%);
  background-size: 200% 100%;
  animation: pm-shimmer 1.6s ease-in-out infinite;
  transition: opacity 0.25s var(--pm-ease-out);
}
.pm-field--filled .pm-field-skeleton { opacity: 0; }

@keyframes pm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pm-field-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.3s var(--pm-decel) 0.1s, transform 0.3s var(--pm-decel) 0.1s;
}
.pm-field--filled .pm-field-meta { opacity: 1; transform: translateY(0); }

.pm-source-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-ink-500);
  background: var(--color-ink-50);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  cursor: default;
}

/* Correction flash: the validator briefly amends a value (mirrors
   de-field-cell--just-filled's settle pulse) */
.pm-field--corrected .pm-field-value { color: var(--color-blue-700); }
.pm-field--flash { animation: pm-field-flash 0.6s var(--pm-ease-out); }
@keyframes pm-field-flash {
  0% { background: rgba(31, 122, 212, 0.10); }
  100% { background: var(--color-white); }
}

/* ==========================================================================
   M2 — Document viewer + cursor (mirrors DocumentViewer + a clicked source
   badge drawing a highlight box around the exact line)
   ========================================================================== */

.pm-m2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0;
}
@media (max-width: 560px) {
  .pm-m2-layout { grid-template-columns: 1fr; }
}

.pm-m2-fields {
  padding: var(--space-4);
  border-right: 1px solid var(--color-ink-50);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
@media (max-width: 560px) {
  .pm-m2-fields { border-right: none; border-bottom: 1px solid var(--color-ink-50); }
}

.pm-m2-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.3s var(--pm-ease-out);
}
.pm-m2-field--target { background: var(--color-action-soft); }

.pm-m2-field-label { font-size: 11px; color: var(--color-ink-500); }
.pm-m2-field-value-row { display: flex; align-items: center; gap: 8px; }
.pm-m2-field-value { font-size: 14px; font-weight: 500; color: var(--color-ink-900); }

.pm-m2-source-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-ink-500);
  background: var(--color-ink-50);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  position: relative;
  transition: background 0.25s var(--pm-ease-out), color 0.25s var(--pm-ease-out), box-shadow 0.25s var(--pm-ease-out);
}
.pm-m2-source-badge--clicked {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  box-shadow: 0 0 0 3px rgba(31, 122, 212, 0.14);
}

.pm-m2-viewer {
  background: var(--color-ink-03);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.pm-m2-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-ink-100);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-500);
}
.pm-m2-toolbar-page {
  margin-left: auto;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.pm-m2-page-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.pm-m2-page {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 8.5 / 11;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  opacity: 0;
  transform: translateX(10px) scale(0.98);
  transition: opacity 0.5s var(--pm-decel), transform 0.5s var(--pm-decel);
}
.pm-m2-page--in { opacity: 1; transform: translateX(0) scale(1); }

.pm-m2-line { height: 6px; border-radius: 2px; background: var(--color-ink-100); }
.pm-m2-line--short { width: 55%; }
.pm-m2-line--gap { margin-bottom: 6px; }

/* The page's heading block — a sheet that starts with a title reads as a
   document rather than as a placeholder of grey bars. */
.pm-m2-line--title { height: 9px; width: 68%; background: var(--color-ink-300); border-radius: 2px; }
.pm-m2-line--rule { height: 1px; width: 100%; background: var(--color-ink-100); border-radius: 0; }

.pm-m2-page-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 11px;
}

/* The body column fills the rest of the sheet, so the highlighted line sits
   inside a page of text instead of floating in white space. */
.pm-m2-page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-m2-target-wrap {
  position: relative;
  margin-top: var(--space-2);
}


.pm-m2-target-line {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: var(--color-ink-200);
  width: 72%;
}

.pm-m2-highlight {
  position: absolute;
  inset: -4px -6px;
  border-radius: 5px;
  border: 1.5px solid var(--color-action);
  background: var(--color-action-soft);
  clip-path: inset(0 100% 0 0 round 5px);
  transition: clip-path 0.55s var(--pm-decel);
  box-shadow: 0 0 0 0 var(--color-action-glow);
}
.pm-m2-highlight--drawn {
  clip-path: inset(0 0 0 0 round 5px);
  box-shadow: 0 0 0 6px var(--color-action-glow);
  animation: pm-highlight-settle 1.2s var(--pm-ease-out) 0.55s;
}
@keyframes pm-highlight-settle {
  0% { box-shadow: 0 0 0 6px var(--color-action-glow); }
  60% { box-shadow: 0 0 0 3px rgba(74, 139, 106, 0.1); }
  100% { box-shadow: 0 0 0 3px rgba(74, 139, 106, 0.1); }
}

.pm-m2-source-tag {
  position: absolute;
  /* Offsets are relative to `.pm-m2-target-wrap` now, not to the highlight it
     labels. The highlight is inset -4px/-6px from the wrap, so these carry the
     tag's previous visual position across the reparent. */
  top: -15px;
  left: -8px;
  background: var(--color-action);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.3s var(--pm-decel) 0.5s, transform 0.3s var(--pm-decel) 0.5s;
}
/* Driven from the WRAP, not from the highlight: `.pm-m2-highlight` draws
   itself with clip-path, and a clip-path clips every descendant — which cut
   the top off this tag (it is positioned at top:-11px, deliberately outside
   the box it labels) in every frame this panel has ever rendered. The tag is
   now a sibling; see buildPage() in source-grounding.js. */
.pm-m2-target-wrap--drawn .pm-m2-source-tag { opacity: 1; transform: translateY(0); }

.pm-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-2px, -2px);
  transition: left 0.6s var(--pm-decel), top 0.6s var(--pm-decel), opacity 0.25s var(--pm-ease-out);
}
.pm-cursor--visible { opacity: 1; }
.pm-cursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.pm-cursor-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px solid var(--color-action);
  opacity: 0;
  transform: scale(0.6);
}
.pm-cursor--click .pm-cursor-ring { animation: pm-cursor-click-ring 0.55s var(--pm-ease-out); }
@keyframes pm-cursor-click-ring {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ==========================================================================
   M3 — Profile page (mirrors entity-page: CompletenessBar, RequiredDocChecklist,
   ContributingRail, EntityFieldCell + ProvenanceBadge)
   ========================================================================== */

.pm-m3-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pm-m3-entity-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.pm-m3-noun {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.pm-completeness-bar {
  display: flex;
  gap: var(--space-1);
  width: 100%;
  max-width: 320px;
  height: 8px;
  margin-bottom: var(--space-5);
}
.pm-completeness-seg {
  flex: 1;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px dashed var(--color-ink-200);
  transition: background 0.4s var(--pm-spring), border-color 0.4s var(--pm-spring);
}
.pm-completeness-seg--filled { background: var(--color-action); border-color: transparent; }
.pm-completeness-seg--flip { animation: pm-seg-flip 0.4s var(--pm-spring); }
.pm-completeness-seg--attention { border-color: var(--color-amber-600); animation: pm-breathe 2.6s var(--pm-ease-out) infinite; }
@keyframes pm-seg-flip { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1); } }
@keyframes pm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.pm-m3-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-6);
}
@media (max-width: 620px) {
  .pm-m3-body { grid-template-columns: 1fr; }
}

.pm-m3-block-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-600);
  margin-bottom: var(--space-2);
}

.pm-checklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-5); }
.pm-checklist-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s var(--pm-decel), transform 0.4s var(--pm-decel);
}
.pm-checklist-row--in { opacity: 1; transform: translateX(0); }

.pm-checklist-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px dashed var(--color-ink-200);
  color: transparent;
  transition: border-color 0.35s var(--pm-decel), background 0.35s var(--pm-decel), color 0.2s var(--pm-decel) 0.15s;
}
.pm-checklist-row--present .pm-checklist-mark {
  border: 1.5px solid transparent;
  background: var(--color-green-100);
  color: var(--color-green-700);
}
.pm-checklist-row--missing .pm-checklist-mark { border-color: var(--color-amber-600); }
.pm-checklist-mark svg { width: 10px; height: 10px; }
.pm-checklist-check { stroke-dasharray: 16; stroke-dashoffset: 16; }
.pm-checklist-row--present .pm-checklist-check { animation: pm-draw-check 0.35s var(--pm-decel) 0.15s forwards; }

.pm-checklist-label { font-size: 13px; color: var(--color-ink-700); }
.pm-checklist-filename { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-500); }
/* Sits between a 13px ink-700 label and an 11px ink-500 filename; it must not out-rank either. */
.pm-checklist-sep { font-size: 11px; color: var(--color-ink-500); }
.pm-checklist-suggestion { font-size: 13px; color: var(--color-amber-text); }

.pm-m3-fields { display: flex; flex-direction: column; gap: 1px; background: var(--color-ink-50); border-radius: var(--radius-md); overflow: hidden; }

.pm-m3-field {
  background: var(--color-white);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s var(--pm-decel), transform 0.4s var(--pm-spring);
}
.pm-m3-field--in { opacity: 1; transform: scale(1); }
.pm-m3-field-label { font-size: 11px; color: var(--color-ink-500); width: 40%; flex-shrink: 0; }
.pm-m3-field-value { font-size: 13px; font-weight: 500; color: var(--color-ink-900); min-width: 0; }
.pm-m3-field-prov {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  /* The provenance badge is the whole point of the row — it names the document
     the value came from. `white-space: nowrap` alone did not protect it: as a
     flex item it still had the default `flex-shrink: 1`, so a long value (the
     contact email) squeezed it until "COI · p.2" rendered as "COI ·" with the
     page number clipped off. A truncated citation is worse than none. */
  flex-shrink: 0;
}

.pm-rail { display: flex; flex-direction: column; }
.pm-rail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-ink-50);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--pm-decel), transform 0.45s var(--pm-decel);
}
.pm-rail-row--in { opacity: 1; transform: translateY(0); }
.pm-rail-row-l1 { display: flex; align-items: center; gap: var(--space-2); }
.pm-rail-tone-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.pm-rail-filename { font-size: 12px; font-weight: 500; color: var(--color-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-rail-detail { font-size: 11px; color: var(--color-ink-500); padding-left: 12px; }

/* ==========================================================================
   M4 — Standup / briefing card (mirrors Masthead + HandledLine +
   DecisionFocusCard: eyebrow -> headline -> receipts -> options -> CTA)
   ========================================================================== */

.pm-m4-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); }
.pm-m4-space { font-size: 12px; font-weight: 600; color: var(--color-ink-600); }
.pm-priority-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-amber-600); }
.pm-priority-dot--pulse { animation: pm-breathe 2.2s var(--pm-ease-out) infinite; }

.pm-m4-summary {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-ink-900);
  margin-bottom: var(--space-4);
  min-height: 1.4em;
}
.pm-m4-summary::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 15px;
  margin-left: 2px;
  background: var(--color-action);
  vertical-align: -2px;
  animation: pm-caret-blink 0.9s step-end infinite;
}
.pm-m4-summary--done::after { display: none; }
@keyframes pm-caret-blink { 50% { opacity: 0; } }

.pm-handled {
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--pm-decel), transform 0.4s var(--pm-decel);
  overflow: hidden;
}
.pm-handled--in { opacity: 1; transform: translateY(0); }

.pm-handled-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--color-ink-700);
}
.pm-handled-check {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--color-green-100);
  color: var(--color-green-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pm-handled-check svg { width: 9px; height: 9px; }
.pm-handled-check--beat { animation: pm-pop 0.4s var(--pm-spring); }
@keyframes pm-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pm-handled-review { margin-left: auto; font-size: 11px; color: var(--color-action-text); font-weight: 600; }

.pm-receipts {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--pm-decel);
  border-top: 1px solid transparent;
}
.pm-receipts--open { max-height: 140px; border-top-color: var(--color-ink-50); }
.pm-receipt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--space-3);
  font-size: 12px;
  color: var(--color-ink-600);
}
.pm-receipt-row + .pm-receipt-row { border-top: 1px solid var(--color-ink-50); }
.pm-receipt-undo { margin-left: auto; font-size: 11px; color: var(--color-action); font-weight: 600; }

.pm-decision {
  border-top: 1px solid var(--color-ink-100);
  padding-top: var(--space-4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--pm-decel), transform 0.5s var(--pm-decel);
}
.pm-decision--in { opacity: 1; transform: translateY(0); }

.pm-decision-eyebrow { font-size: 11px; color: var(--color-ink-500); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pm-decision-headline { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: var(--space-3); line-height: 1.35; }

.pm-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.pm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--space-3);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-ink-700);
}
.pm-option--selected { border-color: var(--color-action); background: var(--color-action-soft); }
.pm-option-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-ink-300); flex-shrink: 0; position: relative; }
.pm-option--selected .pm-option-radio { border-color: var(--color-action); }
.pm-option--selected .pm-option-radio::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--color-action);
}

.pm-cta-row { display: flex; align-items: center; gap: var(--space-3); }
.pm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-action);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}
.pm-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-white); }
.pm-cta-quiet { font-size: 12px; color: var(--color-ink-500); }

/* ==========================================================================
   M5 — DISTLR conversation + canvas stat tile
   ========================================================================== */

.pm-chat { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

.pm-msg { display: flex; gap: 8px; max-width: 88%; }
.pm-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.pm-msg-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(from 180deg, var(--alembic), var(--color-action), var(--alembic));
}
.pm-msg-bubble {
  background: var(--color-ink-50);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-700);
}
.pm-msg--user .pm-msg-bubble { background: var(--color-action); color: var(--color-white); }
.pm-msg--assistant .pm-msg-bubble { background: var(--color-ink-50); color: var(--color-ink-700); }

.pm-msg-bubble--typing::after {
  content: '';
  display: inline-block;
  width: 2px; height: 12px;
  margin-left: 2px;
  background: currentColor;
  opacity: 0.6;
  vertical-align: -1px;
  animation: pm-caret-blink 0.9s step-end infinite;
}

.pm-canvas-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-action-text);
  background: var(--color-action-soft);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  margin-left: 28px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--pm-decel), transform 0.35s var(--pm-decel);
}
.pm-canvas-chip--in { opacity: 1; transform: translateY(0); }

.pm-space-mini {
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-ink-03);
}
.pm-space-mini-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: var(--space-3); }
.pm-space-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (max-width: 480px) { .pm-space-mini-grid { grid-template-columns: repeat(2, 1fr); } }

.pm-stat-tile {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.pm-stat-tile--new {
  opacity: 0;
  transform: scale(0.85);
  border-color: var(--color-action);
  box-shadow: 0 0 0 0 var(--color-action-glow);
  transition: opacity 0.4s var(--pm-spring), transform 0.4s var(--pm-spring), box-shadow 0.6s var(--pm-ease-out) 0.4s, border-color 1s var(--pm-ease-out) 0.6s;
}
.pm-stat-tile--new.pm-stat-tile--in {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 6px var(--color-action-glow);
}
.pm-stat-tile--new.pm-stat-tile--settled {
  box-shadow: 0 0 0 0 rgba(74, 139, 106, 0);
  border-color: var(--color-ink-100);
}
.pm-stat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-600); margin-bottom: 4px; }
.pm-stat-value { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-ink-900); }
.pm-stat-caption { font-size: 10px; color: var(--color-ink-500); margin-top: 2px; }

/* ==========================================================================
   M6 — Analyst answer (invented UI — no shipped screen exists yet; styled
   consistent with the product's status-line / source-badge vocabulary)
   ========================================================================== */

.pm-m6-question {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink-900);
  margin-bottom: var(--space-3);
}

.pm-m6-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-600);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
  min-height: 14px;
  opacity: 0;
  transition: opacity 0.3s var(--pm-ease-out);
}
.pm-m6-status--in { opacity: 1; }
.pm-m6-status--done { opacity: 0; }

.pm-m6-table {
  display: inline-grid;
  grid-template-columns: repeat(3, 16px);
  grid-auto-rows: 8px;
  gap: 2px;
}
.pm-m6-cell { background: var(--color-blue-100); border-radius: 1px; opacity: 0.4; }
.pm-m6-table--flash .pm-m6-cell { animation: pm-table-flash 1s var(--pm-ease-out); }
.pm-m6-cell:nth-child(2) { animation-delay: 0.06s !important; }
.pm-m6-cell:nth-child(3) { animation-delay: 0.12s !important; }
.pm-m6-cell:nth-child(4) { animation-delay: 0.18s !important; }
.pm-m6-cell:nth-child(5) { animation-delay: 0.24s !important; }
.pm-m6-cell:nth-child(6) { animation-delay: 0.3s !important; }
.pm-m6-cell:nth-child(7) { animation-delay: 0.36s !important; }
.pm-m6-cell:nth-child(8) { animation-delay: 0.42s !important; }
.pm-m6-cell:nth-child(9) { animation-delay: 0.48s !important; }
@keyframes pm-table-flash {
  0% { opacity: 0.4; }
  40% { opacity: 1; background: var(--color-blue-500); }
  100% { opacity: 0.4; background: var(--color-blue-100); }
}

.pm-m6-answer {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-900);
  margin-bottom: var(--space-4);
  min-height: 1.6em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s var(--pm-decel), transform 0.45s var(--pm-decel);
}
.pm-m6-answer--in { opacity: 1; transform: translateY(0); }
.pm-m6-answer strong { color: var(--color-action-text); font-weight: 700; }

.pm-citations { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-citation {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-600);
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-full);
  padding: 3px 8px;
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition: opacity 0.3s var(--pm-decel), transform 0.3s var(--pm-spring);
}
.pm-citation--in { opacity: 1; transform: translateY(0) scale(1); }
.pm-citation-page { color: var(--color-ink-500); }

/* ==========================================================================
   Shared — generic fade/rise entrance (reused by M4/M5 chat + CTA reveals)
   ========================================================================== */

.pm-fade-in {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--pm-decel), transform 0.35s var(--pm-decel);
}
.pm-fade-in--in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Harness page (public/mockups.html) — kicker + heading utility classes,
   scoped to .pm-root so they carry the same token set.
   ========================================================================== */

.pm-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-action);
}
.pm-heading {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-white);
  margin: 6px 0 4px;
}
.pm-heading-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 60ch;
}

.pm-harness-body {
  background: var(--pm-cinema-bg);
  min-height: 100vh;
  margin: 0;
}

.pm-harness-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: rgba(6, 8, 16, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-harness-brand {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
}

.pm-harness-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Simplified al-btn-styled control, no canvas dot — per plan §6, marketing
   surfaces may use .al-btn's visual language without the dot-morph engine
   dependency. Not a labeled product action, so it intentionally does not
   claim the .al-btn class itself. */
.pm-harness-restart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--pm-ease-out), color 0.2s var(--pm-ease-out);
}
.pm-harness-restart:hover,
.pm-harness-restart:focus-visible {
  border-color: var(--color-action);
  color: var(--color-action-hover, var(--color-action));
}
.pm-harness-restart-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-action);
}

.pm-harness-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 120px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.pm-harness-section { scroll-margin-top: 84px; }
.pm-harness-host { margin-top: var(--space-6); }

.pm-harness-empty {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-8) 0;
}

@media (max-width: 640px) {
  .pm-harness-toolbar { padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
  .pm-harness-note { display: none; }
  .pm-harness-main { padding: var(--space-6) var(--space-4) 96px; gap: 72px; }
}

/* ==========================================================================
   Responsive floor — mockups keep their shape down to 360px
   ========================================================================== */

@media (max-width: 420px) {
  .pm-panel-body { padding: var(--space-4); }
  .pm-field-grid { grid-template-columns: 1fr; }
  .pm-step { min-width: 56px; }
  .pm-step-label { font-size: 10px; }
  .pm-m3-body { gap: var(--space-4); }
  .pm-space-mini-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion — freeze at the final resolved frame, no motion at all
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pm-root *,
  .pm-root *::before,
  .pm-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pm-field-skeleton,
  .pm-m4-summary::after,
  .pm-msg-bubble--typing::after,
  .pm-priority-dot--pulse,
  .pm-completeness-seg--attention,
  .pm-step[data-state="active"] .pm-step-ring::after,
  .pm-cursor {
    animation: none !important;
  }
  .pm-cursor { display: none !important; }
}

/* ==========================================================================
   Container-width adaptations
   --------------------------------------------------------------------------
   The @media rules above key off the VIEWPORT, which is wrong for an embedded
   mockup: on a 1280px desktop, a features.html feature-block column is only
   ~470px wide, so the two-column internal layouts stayed side-by-side and
   overflowed (a field row needed 324px of content in a 227px track, and the
   parent's overflow:hidden clipped it into an empty grey block).
   .pm-root declares container-type: inline-size, so these rules respond to the
   mockup's own width and a narrow column now adapts exactly like a narrow
   phone. Mirrors the viewport breakpoints above rather than inventing new ones.
   ========================================================================== */

@container pm (max-width: 620px) {
  .pm-m3-body { grid-template-columns: 1fr; }
}

@container pm (max-width: 560px) {
  .pm-m2-layout { grid-template-columns: 1fr; }
}

@container pm (max-width: 520px) {
  /* Field rows are label + value + provenance on one line. Below this width
     there isn't room, so stack the label above the value and let the
     provenance badge sit with the value instead of being pushed off the end. */
  .pm-m3-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label label" "value prov";
    align-items: baseline;
    row-gap: 2px;
  }
  .pm-m3-field-label { grid-area: label; width: auto; }
  .pm-m3-field-value { grid-area: value; min-width: 0; }
  .pm-m3-field-prov { grid-area: prov; margin-left: 0; }
}

@container pm (max-width: 420px) {
  .pm-panel-body { padding: var(--space-4); }
  .pm-field-grid { grid-template-columns: 1fr; }
  .pm-space-mini-grid { grid-template-columns: 1fr; }
  /* These two were in the viewport 420px block but missing from this mirrored
     one, so a narrow *container* on a wide viewport — which is what the landing
     page's tray is at 900-1100px, and what a features.html column always is —
     kept the full-width stepper and overflowed its four nodes. The whole point
     of this block is that a narrow column adapts like a narrow phone; an
     omission here is a rule that only ever fires on actual phones. */
  .pm-step { min-width: 56px; }
  .pm-step-label { font-size: 10px; }
  .pm-m3-body { gap: var(--space-4); }
}