/* THE AGENT POSES (Steven 2026-10-12, 22:25: "the image is always the
   agent's avatar"). Where the agent's record turned, its cut from
   static/cards/agent-poses/ (app/services/agent_poses.py picks it,
   app/services/agent_art.py pose_html draws it). The pose fills the art's
   box, cover-cropped, so the box decides the shape: the full art of a card
   stays a rectangle (its dark shade still under the headline), a round
   slot (.aa-pose--round, the step card's disc) is a circle with the
   record's level bars on its rim. Under the pose, the record itself, still,
   until the pose has painted (agent-poses.js marks it ready) and again if
   it will not load. Reduced motion: the video's first frame, never the
   video. */
.aa-pose {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.aa-pose__under,
.aa-pose__media,
.aa-pose__still {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.aa-pose__under .aa { width: 100%; height: 100%; }
.aa-pose__under .aa,
.aa-pose__under .aa * { animation: none !important; }
.aa-pose__media,
.aa-pose__still {
  object-fit: cover;
  object-position: 50% 30%;
  border: 0;
}
.aa-pose__still { display: none; }
.aa-pose.is-ready > .aa-pose__under { visibility: hidden; }
.aa-pose.is-broken > .aa-pose__media,
.aa-pose.is-broken > .aa-pose__still { display: none; }
.aa-pose.is-broken > .aa-pose__under { visibility: visible; }

/* A round slot: the pose is a circle (radius 42 of 100) centred in the box,
   sized by the box's shorter side (cqmin) so a slot that is not square
   still draws a circle, the record's bars standing on its rim
   (agent_art.ring_svg, which draws on the same shorter side), thin. */
.aa-pose--round { overflow: visible; container-type: size; }
.aa-pose--round > .aa-pose__media,
.aa-pose--round > .aa-pose__still {
  top: 50%;
  left: 50%;
  width: 84cqmin;
  height: 84cqmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.aa-pose--round > .aa-pose__under { clip-path: circle(49cqmin at 50% 50%); }
.aa-pose > .aa--ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.aa--ring .aa-tick { stroke-width: .7px; }

@media (prefers-reduced-motion: reduce) {
  .aa-pose--video > video.aa-pose__media { display: none; }
  .aa-pose--video > .aa-pose__still { display: block; }
  .aa-pose.is-broken > .aa-pose__still { display: none; }
}