/* Drawer captures cropped to the part the caption names (the greeting and picker; the plan card; the chips and Done card) so the panel is not mostly empty drawer; the radius matches the paper card they sit in. */
.pg-ai-fde-shot img { display: block; width: 100%; border-radius: var(--r-card); }
/* The hero drawer crop is 418px at 1x; hold it at its native width, centred, rather than upscale it. */
.pg-ai-fde-shot[data-screen-label="Hero screenshot"] img { max-width: 418px; margin-inline: auto; }
/* Two shots side by side must share a height so the captions line up. */
.pg-ai-fde-shots .viz-frame { display: flex; flex-direction: column; }

/* Annotation pins over the two drawer shots below the §02 table; flat.css has
   no positioned overlay. Mirrors .pg-strata-stage / .pg-agents-stage. */
.pg-ai-fde-stage { position: relative; }
/* Coordinates measured against each screenshot at its native size. Pin 4 sits
   in the clear gap left of the plan panel's checklist icon, just inside the
   panel edge, level with the "Plan · 7 mutating steps" header. */
.pg-ai-fde-pin[data-pin="4"] { top: 43.6%; left: 2.4%; }
/* Pin 3 sits in the clear gap left of the first tool-call chip's check icon,
   level with the top "add_node" row. */
.pg-ai-fde-pin[data-pin="3"] { top: 11.8%; left: 1.8%; }

/* The pulse ring: the flat replacement for a glow, inset around the 24px disc. */
.pg-ai-fde-pin::after {
  content: ''; position: absolute; inset: -4px; border-radius: var(--r-pill);
  border: 2px solid var(--yellow); opacity: 0;
  animation: pg-ai-fde-ping 2.4s var(--ease) infinite;
}
@keyframes pg-ai-fde-ping {
  0%        { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(2.4); }
}

/* The row a shot pin points at, and vice versa: the row takes the page's teal
   tint while its pin goes bronze (.callout.is-hot, already in flat.css). */
.pg-ai-fde-do-row { outline: 0; transition: background 0.15s var(--ease); }
.pg-ai-fde-do-row.is-hot td { background: var(--teal-tint); }

/* Below 700px the pins sit on a screenshot too small to read; the numbered
   rows still carry the sequence on their own. */
@media (max-width: 700px) { .pg-ai-fde-pin { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pg-ai-fde-pin::after { animation: none; opacity: 0.35; transform: none; }
}

/* §02 session strip: five drawn stage cards on a cloud panel, numbered to
   match the rows below. Drawn at 1160 units; below that the frame scrolls. */
.pg-ai-fde-session { --viz-pin: 1160px; max-width: 1160px; margin-inline: auto; }
/* The spine's dash flow is the one continuous movement, bronze like the kb pipeline. */
.pg-ai-fde-flow { animation: pg-ai-fde-flow 1.6s linear infinite; }
@keyframes pg-ai-fde-flow { to { stroke-dashoffset: -24; } }
/* Linked hover: a stage lights its row and vice versa (ai-fde.js). The hot
   card takes a teal stroke, its disc goes bronze, the rest fade. */
.pg-ai-fde-stage { cursor: pointer; outline: 0; transition: opacity 0.18s var(--ease); }
.pg-ai-fde-card { transition: stroke 0.18s var(--ease), stroke-width 0.18s var(--ease); }
.pg-ai-fde-num { transition: fill 0.18s var(--ease); }
.pg-ai-fde-stage.is-dim { opacity: 0.4; }
.pg-ai-fde-stage.is-hot .pg-ai-fde-card, .pg-ai-fde-stage:focus-visible .pg-ai-fde-card { stroke: var(--teal); stroke-width: 2; }
.pg-ai-fde-stage.is-hot .pg-ai-fde-num, .pg-ai-fde-stage:focus-visible .pg-ai-fde-num { fill: var(--yellow); }
/* The detour draws itself once on intro (ai-fde.js sets the offset). */
.pg-ai-fde-detour { stroke-dasharray: 1; }
@media (prefers-reduced-motion: reduce) {
  .pg-ai-fde-flow { animation: none; }
}