/* Handoff flow (F2, A12). Root: .mmc-handoff. Two vertical chains side by side at EVERY width:
   broken (left), fixed (right), dot beside label. No width/height changes across states (A3). */
.mmc-handoff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-space-4); margin-top: var(--mm-space-2); }
/* Beats a generic parent-theme spacing reset on this box's first child (0,1,1 specificity: a lone
   class loses, (0,1,0)); Replay's inline-flex margin adds instead of collapsing, so the old gap
   was ~48px. Doubling the class (0,2,0) fixes it, no !important; margin-top below is also cut to
   12px, for a true 12px gap (A16). */
.mmc-handoff.mmc-handoff { margin-bottom: 0; }
.mmc-handoff-replay { margin-top: var(--mm-space-3); } /* 12px, was --mm-space-5/24px (A16 parity) */

.mmc-handoff__chain { display: flex; flex-direction: column; gap: var(--mm-space-3); min-width: 0; }
.mmc-handoff__head { margin: 0; padding-bottom: 0; } /* .mm-kicker is the eyebrow type/color; zeroed, it's a <p> */
.mmc-handoff__list { display: flex; flex-direction: column; gap: var(--mm-space-3); min-width: 0; }
.mmc-handoff__group { display: flex; flex-direction: column; min-width: 0; }
.mmc-handoff__item { display: flex; flex-direction: row; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.mmc-handoff__dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.2rem; border-radius: var(--mm-radius-round); border: 2px solid var(--mm-gray-500); background: var(--mm-bg-alt); }
.mmc-handoff__chain--fixed .mmc-handoff__dot { border-color: var(--mm-border-strong); background: var(--mm-bg); }
.mmc-handoff__dot--lone { border-style: dashed; }
.mmc-handoff__dot--final { width: 1rem; height: 1rem; margin-top: 0.125rem; background: var(--mm-accent); border-color: var(--mm-accent); }
/* Two classes each: beats chain--fixed on specificity (a one-class rule lost this). */
.mmc-handoff__chain--fixed .mmc-handoff__dot--final { background: var(--mm-accent); border-color: var(--mm-accent); }
.mmc-handoff__label { font: 500 var(--mm-font-size-xs)/1.3 var(--mm-font-ui); max-width: 9rem; text-wrap: balance; color: var(--mm-text-muted); }
.mmc-handoff__chain--fixed .mmc-handoff__label { color: var(--mm-text); }
.mmc-handoff__label--final { font-weight: var(--mm-weight-semibold); }
.mmc-handoff__chain--fixed .mmc-handoff__label--final { color: var(--mm-accent); }

/* Connectors: always vertical (a border on the dashed variant, so the dash pattern renders). */
.mmc-handoff__link { flex: none; width: 2px; height: 1.25rem; margin-left: 0.3125rem; background: var(--mm-border-strong); transform-origin: top center; }
.mmc-handoff__link--final { background: var(--mm-accent); }
.mmc-handoff__link--dashed { position: relative; width: 0; height: 1.25rem; margin-left: 0.3125rem; background: none; border-left: 2px dashed var(--mm-gray-500); }
.mmc-handoff__crack { position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate(-50%, -50%); color: var(--mm-text-muted); } /* A4: muted, not red */

/* F2 loop redraw (2026-09-27): a bracket, not one line -- full "why" in handoff-flow.php's own
   comment. align-self below makes the fixed list's right edge = "the widest label's edge." */
.mmc-handoff__chain--fixed .mmc-handoff__list { position: relative; align-self: flex-start; }
.mmc-handoff__loop-slack { flex: 1 0 0%; align-self: stretch; position: relative; }
.mmc-handoff__loop-slack::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--mm-text); translate: 0 -50%; }
.mmc-handoff__loop-slack--bottom::after { transform-origin: left; }
.mmc-handoff__loop-slack--top::after { transform-origin: right; }
.mmc-handoff__loop-slack--top::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 4px solid transparent; border-right: 6px solid var(--mm-text); translate: -1px -50%; }
.mmc-handoff__loop-bracket { position: absolute; left: 100%; width: 1rem; top: 9px; bottom: 9px; border: 1.5px solid var(--mm-text); border-left: 0; border-radius: 0 0.5rem 0.5rem 0; }

/* ---- Beats (assets/js/mmc-reveal.js). Every selector requires .is-anim: without it (no JS, or
   reduced motion) only the plain rules above exist -- the resolved frame. ---- */
/* Scoped to .is-anim, NOT .is-armed (gone up to 1000ms before is-beat-3): an armed-scoped rule
   would leave every fixed item visible for that whole gap once it's removed. */
.mmc-handoff.is-anim .mmc-handoff__group,
.mmc-handoff.is-anim .mmc-handoff__chain--fixed .mmc-handoff__item { opacity: 0; transform: translateY(6px); }
.mmc-handoff.is-anim .mmc-handoff__link,
.mmc-handoff.is-anim .mmc-handoff__link--dashed { transform: scaleY(0); }
.mmc-handoff.is-anim .mmc-handoff__crack { opacity: 0; }
.mmc-handoff.is-anim .mmc-handoff__loop-slack::after,
.mmc-handoff.is-anim .mmc-handoff__loop-slack--top::before { scale: 0; }
.mmc-handoff.is-anim .mmc-handoff__loop-bracket { opacity: 0; }

.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--broken .mmc-handoff__group {
  opacity: 1; transform: translateY(0); transition: opacity var(--mm-dur-slow) var(--mm-ease), transform var(--mm-dur-slow) var(--mm-ease);
}
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__link,
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__link--dashed,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--broken .mmc-handoff__link,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--broken .mmc-handoff__link--dashed {
  transform: scaleY(1); transition: transform 180ms var(--mm-ease);
}
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__crack,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--broken .mmc-handoff__crack {
  opacity: 1; transition: opacity 150ms var(--mm-ease);
}
/* Scoped to .is-beat-1, not unconditional (same fix as above). */
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(1) .mmc-handoff__link,
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(1) .mmc-handoff__link--dashed { transition-delay: 200ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(1) .mmc-handoff__crack { transition-delay: 320ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(2) { transition-delay: 130ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(2) .mmc-handoff__link,
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(2) .mmc-handoff__link--dashed { transition-delay: 330ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(2) .mmc-handoff__crack { transition-delay: 450ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(3) { transition-delay: 260ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(3) .mmc-handoff__link,
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(3) .mmc-handoff__link--dashed { transition-delay: 460ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(3) .mmc-handoff__crack { transition-delay: 580ms; }
.mmc-handoff.is-anim.is-beat-1 .mmc-handoff__chain--broken .mmc-handoff__group:nth-child(4) { transition-delay: 390ms; } /* the lone group: no link/crack */

.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--fixed .mmc-handoff__item {
  opacity: 1; transform: translateY(0); transition: opacity var(--mm-dur-slow) var(--mm-ease), transform var(--mm-dur-slow) var(--mm-ease);
}
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link,
.mmc-handoff.is-anim.is-done .mmc-handoff__chain--fixed .mmc-handoff__link {
  transform: scaleY(1); transition: transform 150ms var(--mm-ease);
}
/* Scoped to .is-beat-3, same fix and reason as the broken-chain delays above. */
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(1) { transition-delay: 0ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(2) { transition-delay: 100ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(3) { transition-delay: 200ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(4) { transition-delay: 300ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(5) { transition-delay: 400ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(6) { transition-delay: 500ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(7) { transition-delay: 600ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(8) { transition-delay: 700ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(9) { transition-delay: 800ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(10) { transition-delay: 900ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(11) { transition-delay: 1000ms; }
/* A18: item7 (Optimization) continues the same 100ms ladder; the loop pieces are appended AFTER it
   in the DOM so it never shifts these nth-child positions. */
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__link:nth-child(12) { transition-delay: 1100ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__chain--fixed .mmc-handoff__item:nth-child(13) { transition-delay: 1200ms; }
/* Draw, Optimization toward Strategy, after item7 lands: bottom hook, bracket, top hook+arrow. */
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__loop-slack--bottom::after,
.mmc-handoff.is-anim.is-done .mmc-handoff__loop-slack--bottom::after { scale: 1; transition: scale 180ms var(--mm-ease); transition-delay: 1550ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__loop-bracket,
.mmc-handoff.is-anim.is-done .mmc-handoff__loop-bracket { opacity: 1; transition: opacity 260ms var(--mm-ease); transition-delay: 1730ms; }
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__loop-slack--top::after,
.mmc-handoff.is-anim.is-done .mmc-handoff__loop-slack--top::after,
.mmc-handoff.is-anim.is-beat-3 .mmc-handoff__loop-slack--top::before,
.mmc-handoff.is-anim.is-done .mmc-handoff__loop-slack--top::before { scale: 1; transition: scale 180ms var(--mm-ease); transition-delay: 1990ms; }

/* Split row (A12): centers the figure against the text at desktop; text first when stacked. 999px
   not 690px: the parent theme's own grid stacks builder columns through 691-999px too. */
.wpb_row.mm-handoff-split .row_col_wrap_12 { display: flex; flex-wrap: wrap; align-items: center; }
.wpb_row.mm-handoff-split .row_col_wrap_12 > .wpb_column { float: none; }
@media (max-width: 999px) {
  .wpb_row.mm-handoff-split .row_col_wrap_12 > .wpb_column { width: 100%; }
  .wpb_row.mm-handoff-split .row_col_wrap_12 > .mmc-handoff-figure-col { order: 2; }
  .wpb_row.mm-handoff-split .row_col_wrap_12 > .mmc-handoff-text-col { order: 1; }
}