/* =============================================================================
   Animated method diagram: faithful re-draw of the iVGR slide-7 figure.
   HTML nodes positioned (by JS) as % of a 1280x680 grid; SVG connector layer.
   Text scales with the stage via container-query units.
   ============================================================================= */

.mdgm { margin: var(--s-6) auto 0; max-width: var(--container-wide); }
.mdgm__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); padding-bottom: 4px; }

.mdgm__stage {
  position: relative; width: 100%; min-width: 940px;
  aspect-ratio: 1280 / 680;
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.mdgm__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }

/* ---- node base ---- */
.mdgm__node {
  position: absolute; box-sizing: border-box; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.12em;
  background: var(--surface); border: 0.14em solid var(--ink-900); border-radius: 0.5em;
  padding: 0.3em 0.4em; font-size: 1.04cqw; line-height: 1.2; color: var(--ink-900);
  font-family: "Chalkboard", "Chalkboard SE", "Comic Sans MS", "Comic Neue", system-ui, sans-serif;
}
.mdgm__node .ttl { font-weight: 700; }
.mdgm__node small { font-size: 0.82em; color: var(--ink-500); font-weight: 500; line-height: 1.12; }

/* stacked sub/superscript: o_1^b → 'b' over '1', to the right of o (no overlap) */
.ss { display: inline-flex; flex-direction: column; vertical-align: middle;
      font-family: "Times New Roman", Times, Georgia, serif; font-style: italic;
      font-size: 0.6em; line-height: 0.88; margin-left: 0.04em; }
.ss .su { color: inherit; } .ss .sl { color: inherit; }

/* prompts (full text) */
.mdgm__node.is-prompt {
  align-items: flex-start; justify-content: flex-start; text-align: left;
  font-size: 1.0cqw; line-height: 1.34; color: var(--ink-700); font-weight: 500;
  padding: 0.5em 0.6em; overflow: hidden; border-width: 0.12em;
}
.mdgm__node.is-note { border: none; background: none; color: var(--ink-900); font-weight: 700; font-size: 0.94cqw; padding: 0; }
.mdgm__node.is-plain { font-weight: 600; }
.mdgm__node.is-policy { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); font-weight: 800; }
.mdgm__node.is-streamlabel { border: none; background: none; color: var(--ink-900); font-weight: 800; font-size: 0.92cqw; }
.mdgm__node.is-gray { background: var(--surface-sunken); border-color: #c2cad8; color: var(--ink-700); font-weight: 600; }
.mdgm__node.is-rfn { font-weight: 700; }
.mdgm__node.is-reward { font-size: 0.86cqw; font-weight: 600; border-width: 0.12em; border-radius: 0.45em; }
.mdgm__node.is-consistency.is-shown { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); font-weight: 700; }
.mdgm__node.is-gn { font-weight: 700; }

/* rollout / reward / advantage stacks */
.mdgm__node.is-stack { background: var(--brand-50); border-color: var(--brand-200); gap: 0.25em; padding: 0.4em 0.3em; justify-content: space-evenly; }
.mdgm__node.is-astack { background: var(--brand-100); }
.mdgm__node.is-stack .cell {
  background: #fff; border: 0.1em solid var(--ink-700); border-radius: 0.4em;
  padding: 0.1em 0.5em; font-family: "Times New Roman", Times, Georgia, serif; font-style: italic;
  font-weight: 600; color: var(--ink-900); font-size: 1.06cqw; line-height: 1;
}
.mdgm__node.is-stack .vd { color: var(--ink-400); font-weight: 700; line-height: 0.6; }

/* archive / reference CoT / textual CoT / judge / select */
.mdgm__node.is-archive { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); }
.mdgm__node.is-archive .rows { width: 86%; display: flex; flex-direction: column; gap: 0.2em; margin-top: 0.3em; }
.mdgm__node.is-archive .rows i { height: 0.32em; background: var(--amber-200); border-radius: 2px; }
.mdgm__node.is-archive .rows i:nth-child(2) { width: 78%; } .mdgm__node.is-archive .rows i:nth-child(3) { width: 58%; }
.mdgm__node.is-cot { background: var(--amber-50); border-color: var(--amber-200); color: var(--ink-700); gap: 0.2em; }
.mdgm__node.is-cot b { color: #c2410c; font-weight: 700; }
.mdgm__node.is-cot .mono { font-family: var(--font-mono); font-size: 0.74cqw; line-height: 1.25; color: #8a5a00; }
.mdgm__node.is-judge { border-color: var(--green-500); color: var(--green-600); }
.mdgm__node.is-judge .ttl { color: var(--green-600); }
.mdgm__node.is-select { border-color: var(--green-500); }

/* green band */
.mdgm__band {
  position: absolute; z-index: 1; background: var(--green-50);
  border: 0.12em dashed var(--green-500); border-radius: 0.7em; font-size: 1.0cqw;
  font-family: "Chalkboard", "Chalkboard SE", "Comic Sans MS", "Comic Neue", system-ui, sans-serif;
}
.mdgm__band .band-tag {
  position: absolute; top: -0.85em; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--green-500); color: #fff;
  font-size: 0.78em; font-weight: 800; letter-spacing: 0.04em; padding: 0.15em 0.8em; border-radius: var(--radius-pill);
}

/* ---- reveal: components fade/pop in one-by-one ---- */
.mdgm__node { opacity: 0; transform: scale(.9); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1.2); }
.mdgm__node.is-shown { opacity: 1; transform: none; }
.mdgm__node.instant { transition: none !important; }
.mdgm__band { opacity: 0; transition: opacity .45s ease; }
.mdgm__band.is-shown { opacity: 1; }
.mdgm__band.instant { transition: none !important; }

/* ---- wires: fade in one-by-one, then keep a slow flowing dash (dynamic) ---- */
/* opacity gate also hides the arrowhead marker when the wire is not shown */
.mdgm__wire-g { opacity: 0; transition: opacity .35s ease; }
.mdgm__wire-g.is-shown { opacity: 1; }
.mdgm__wire-g.instant { transition: none !important; }
.mdgm__wire-g path {
  fill: none; stroke: var(--ink-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* only the step that is currently appearing flows; earlier wires stay solid/static */
.mdgm__wire-g.is-current path { stroke-dasharray: 7 6; animation: mdgm-flow 2.6s linear infinite; }
@keyframes mdgm-flow { to { stroke-dashoffset: -78; } }
.mdgm__wire-g.is-green path { stroke: var(--green-500); }
.mdgm__wire-g.is-orange path { stroke: #e8902a; }

/* ---- caption ---- */
.mdgm__caption {
  text-align: center; color: var(--ink-700); font-size: 1.02rem; max-width: 820px;
  margin: var(--s-5) auto 0; min-height: 3.1em; display: flex; align-items: center; justify-content: center; gap: 0.5em;
}
.mdgm__caption .step-no { flex: none; font-family: var(--font-mono); font-weight: 800; color: var(--brand-500); background: var(--brand-50); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 0.86rem; }

/* ---- controls ---- */
.mdgm__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-4); }
.mdgm__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-700); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mdgm__btn:hover { background: var(--brand-50); color: var(--brand-500); border-color: var(--brand-200); }
.mdgm__btn svg { width: 18px; height: 18px; }
.mdgm__dots { display: flex; gap: 8px; align-items: center; list-style: none; padding: 0; margin: 0 var(--s-2); }
.mdgm__dots button { width: 11px; height: 11px; border-radius: 50%; padding: 0; background: var(--surface-sunken); border: 1px solid var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.mdgm__dots button[aria-selected="true"] { background: var(--brand-500); border-color: var(--brand-500); transform: scale(1.25); }

/* ---- reduced-motion static mode: show full diagram, no animation ---- */
.mdgm--static .mdgm__node { opacity: 1 !important; transform: none !important; }
.mdgm--static .mdgm__band { opacity: 1 !important; }
.mdgm--static .mdgm__wire-g { opacity: 1 !important; }
.mdgm--static .mdgm__wire-g path { animation: none !important; stroke-dasharray: none !important; }
.mdgm--static .mdgm__btn[data-act="play"] { display: none; }

/* ===================== TEASER diagram variants ===================== */
.mdgm[data-diagram="teaser"] { max-width: 700px; }
.mdgm[data-diagram="teaser"] .mdgm__stage { aspect-ratio: 700 / 632; min-width: 600px; }
.mdgm[data-diagram="teaser"] .mdgm__node { font-size: 1.7cqw; }

/* robot / MLLM icon */
.mdgm__node.is-robot { border: none; background: none; padding: 0; overflow: visible; }
.mdgm__node.is-robot .mdgm-robot { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; }

/* chain-of-thought output box (cream, Chalkboard, red tags; wraps to a snug box) */
.mdgm__node.is-cotbox {
  background: var(--amber-50); border-color: var(--amber-200); color: var(--ink-900);
  font-size: 1.7cqw; line-height: 1.3; padding: 0.3em 0.7em;
  align-items: center; justify-content: center; text-align: left;
  white-space: normal; overflow-wrap: break-word; overflow: hidden;
}
.mdgm__node.is-cotbox .rd { color: #d6453d; }
.cot-cursor { display: inline-block; width: 0; height: 1.05em; border-right: 0.14em solid var(--ink-700);
  vertical-align: -0.2em; margin-left: 0.06em; animation: cot-blink 1s steps(1) infinite; }
@keyframes cot-blink { 50% { opacity: 0; } }

/* (a)/(b)/(c) figure captions */
.mdgm__node.is-figcap { border: none; background: none; color: var(--ink-700); font-weight: 600; font-size: 1.5cqw; line-height: 1.3; }
.mdgm__node.is-figcap .cap-sub { display: block; font-weight: 600; font-size: 0.82em; color: var(--ink-500); margin-top: 0.18em; }
.mdgm__node.is-figcap .cap-sub .oai { color: #10a37f; font-weight: 800; }
.mdgm__node.is-figcap .cap-sub .dsk { color: #4d6bfe; font-weight: 800; }

/* consistency-reward label (paradigm c): the original outlined ⇕ double-arrow glyph, elongated */
.mdgm__node.is-conslabel { border: none; background: none; color: var(--green-600); font-weight: 700; font-size: 1.6cqw; flex-direction: row; gap: 0.5em; }
.mdgm__node.is-conslabel .dbl { display: inline-block; font-size: 2.6em; line-height: 1; color: var(--green-500); transform: scaleY(1.55); transform-origin: center; }

/* "crops" loop label (paradigm a) */
.mdgm__node.is-crops { border: none; background: none; color: #e8902a; font-weight: 700; font-size: 1.5cqw; }