/* flat/pages/agents.css — Certant Flat: Agent Builder page-only rules.
   Tokens only, no shadows, prefix .pg-agents-. Linked after flat/flat.css.
   See .impeccable/plans/motion-agents.md. The cert-agent-canvas/cert-workflow-
   showcase display + min-width rule and the two-column table text-align
   reset are now in flat.css (.table--keys); only what flat.css cannot know
   about a specific diagram or annotation layer stays here. */

/* Component explorer. Tiles are compact (icon, name, one line) and reflow from
   five columns down to two; groups are headed by their category swatch or the
   vendor's brand mark. --ce is the group colour (a --cat-* or --brand-* token,
   set per tile by agents.js) and is used only on the icon tile and the swatch. */
.pg-agents-ce-groups { display: flex; flex-direction: column; gap: var(--sp-6); }
.pg-agents-ce-group__h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pg-agents-ce-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--ce); flex: 0 0 auto; }
.pg-agents-ce-mark { flex: 0 0 auto; }
.pg-agents-ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--sp-2); }

/* At >=1100px the grid and its detail panel sit side by side, the panel sticky,
   so a tile click updates a panel already on screen. */
.pg-agents-ce-layout [data-role="detail"] { margin-top: var(--sp-5); }
@media (min-width: 1100px) {
  .pg-agents-ce-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }
  .pg-agents-ce-layout [data-role="detail"] { position: sticky; top: calc(var(--nav-h) + var(--sp-3)); margin-top: 0; }
}

/* The tile is a <button>: reset it, keep it compact, and mark the selected one
   with an outline (not a shadow). Hover is a tone step. */
.pg-agents-ce-tile { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; width: 100%; --pad: 10px 12px; outline: 2px solid transparent; outline-offset: -2px; transition: background var(--dur) var(--ease), outline-color var(--dur) var(--ease); }
.pg-agents-ce-tile:hover { background: var(--bg-sunken); }
.pg-agents-ce-tile[aria-pressed="true"] { outline-color: var(--ce); background: color-mix(in srgb, var(--ce) 10%, var(--paper)); }
.pg-agents-ce-tile__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-agents-ce-tile__text b { font-size: var(--fs-sm); line-height: 1.25; }
.pg-agents-ce-tile__text .caption { font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The icon tile carries the group colour: colour on a light wash of itself. */
.pg-agents-ce-tile__icon { width: 32px; height: 32px; color: var(--ce); background: color-mix(in srgb, var(--ce) 14%, var(--paper)); }
.pg-agents-ce-tile__icon .icon { width: 16px; height: 16px; }
[data-role="detail"] .pg-agents-ce-tile__icon { width: 40px; height: 40px; }
[data-role="detail"] .pg-agents-ce-tile__icon .icon--lg { width: 20px; height: 20px; }
.pg-agents-ce-kicker { color: var(--ce); }

/* the screenshot's own square corners read wrong inside the panel's rounded frame. */
.pg-agents-shot img { border-radius: var(--r-card); display: block; }

/* The hero canvas is drawn at 552 units; below 470px its 12px labels fall
   under the 9.5px floor, so pin it and let the .viz-frame--wide frame scroll.
   max-width caps the other end: a drawing keeps its drawn scale and is never
   stretched to fill a wider panel (700-800px band was rendering it at 1.25x). */
.pg-agents-ac-svg { --viz-pin: 470px; max-width: 552px; margin-inline: auto; }

/* 900-1199px: the .split--lead column is too narrow to hold the 470px pin
   without clipping the canvas (frame content box 351-446px there, drawing
   494px) with no visible scrollbar affordance. Stack the hero so the canvas
   gets the full site width; flat.css already stacks .split at ≤800px, where
   the frame is wide enough that this rule would be a no-op anyway. */
@media (max-width: 1199px) {
  .pg-agents-hero.split--lead { grid-template-columns: 1fr; }
}

/* The workflow canvas varies ~1050-1270 units per persona (secops widest);
   CertWorkflowShowcase._render() sets --viz-pin per render to that
   workflow's own viewBox width (a runtime style on the custom element, not
   baked into agents.html), capped at 1130 so secops still fits the
   [data-role=canvas] frame's own content box (1136px at >=1200px, measured
   inside its padding — its outer clientWidth of 1168px overstates what is
   actually available) instead of forcing an overflow scroll at the two
   widest desktop widths with the hint hidden. max-width turns the same
   value into a ceiling, so a narrower workflow (devops/cio/cto) is never
   stretched past its own drawn scale just because the frame is wider than
   its drawing — 1270px alone was doing that (measured up to 1.206x).
   1130px below is only the fallback before the first render. */
.pg-agents-wf-svg { --viz-pin: 1130px; max-width: var(--viz-pin); margin-inline: auto; }

/* flat.css only shows its scroll hint ≤800px; the hero and workflow frames
   above start clipping well above that (measured hiddenPx: workflow 128 at
   1100px, 328 at 900px; hero 144 at 390px), so extend the hint to where each
   frame actually starts scrolling instead of clipping the drawing with no
   visible affordance. */

/* The knowledge node is where every flow starts; a slow bronze ring says so.
   flat.css has no SVG ring state. Replaces the old ac-pulse glow-scale. */
.pg-agents-ac-ring { transform-box: fill-box; transform-origin: center; animation: pg-agents-ac-ring 2.6s var(--ease) infinite; }
@keyframes pg-agents-ac-ring {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(1.03); }
}

/* Below 800px flat.css floors these ports at 1000px, which would blow the
   hero canvas up to 1.56x its drawn size; --viz-pin above already holds it. */
@media (max-width: 800px) { cert-agent-canvas { min-width: 0; } }

/* Annotation pins over the hero drawing; flat.css has no SVG pin or its
   states. The disc/numeral markup is the .callout SVG twin (agents.js
   acPin()); only the hover/focus/dim behaviour lives here. */
.pg-agents-acpin { cursor: pointer; outline: 0; transition: opacity 0.18s var(--ease); }
.pg-agents-acpin-disc { transition: fill 0.15s var(--ease); }
.pg-agents-acpin.is-dim { opacity: 0.4; }
.pg-agents-acpin.is-hot .pg-agents-acpin-disc,
.pg-agents-acpin:focus-visible .pg-agents-acpin-disc { fill: var(--yellow); }
/* Keyboard focus reused the hover fill alone, so a focused pin measured
   identically to a hovered one; hold the ring open and steady so focus reads
   as a distinct state (the shot pins get the system focus ring instead). */
.pg-agents-acpin:focus-visible .pg-agents-acpin-ring { animation: none; opacity: 1; }
/* The pulse ring replaces the old glow-and-scale dot; it is the one moving mark. */
.pg-agents-acpin-ring { transform-box: fill-box; transform-origin: center; animation: pg-agents-ping 2.4s var(--ease) infinite; animation-delay: var(--pin-delay, 0s); }
.pg-agents-acpin[data-step="2"] .pg-agents-acpin-ring { --pin-delay: 0.6s; }
.pg-agents-acpin[data-step="3"] .pg-agents-acpin-ring { --pin-delay: 1.2s; }
.pg-agents-acpin[data-step="4"] .pg-agents-acpin-ring { --pin-delay: 1.8s; }
@keyframes pg-agents-ping {
  0%       { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0;  transform: scale(2.4); }
}

/* The row a hero pin points at; mirrors .pg-arch-layers-list in architecture.css. */
.pg-agents-step { cursor: pointer; outline: 0; transition: opacity 0.15s var(--ease), background 0.15s var(--ease); }
.pg-agents-step.is-dim { opacity: 0.5; }
.pg-agents-step.is-hot { background: var(--teal-tint); }

/* The screenshot needs an annotation layer; flat.css has no positioned overlay.
   The pin is now `button.callout callout--teal` (disc, numeral, paper rim,
   position/cursor from flat.css); only its coordinates stay page-local. */
.pg-agents-stage { position: relative; }
/* Coordinates measured against the live product screenshot at 1280px. */
.pg-agents-pin[data-pin="1"] { top: 30%;  left: 7%; }
.pg-agents-pin[data-pin="2"] { top: 8%;   left: 38%; }
.pg-agents-pin[data-pin="3"] { top: 36%;  left: 47%; }
.pg-agents-pin[data-pin="4"] { top: 34%;  left: 80%; }
.pg-agents-pin[data-pin="5"] { top: 88%;  left: 21%; }
/* 4.4% sat the 18px pin on top of the Test/Deploy button labels in the app's
   top bar, partly covering the words; 8% hangs the 24px disc just below them. */
.pg-agents-pin[data-pin="6"] { top: 8%;   left: 91.5%; }
.pg-agents-pin[data-pin="7"] { top: 8%;   left: 87%; }
/* The pulse ring, offset per pin so they do not beat in unison; inset
   around the larger .callout disc (24px, was 18px). */
.pg-agents-pin::after {
  content: ''; position: absolute; inset: -4px; border-radius: var(--r-pill);
  border: 2px solid var(--yellow); opacity: 0;
  animation: pg-agents-ping 2.4s var(--ease) infinite; animation-delay: var(--pin-delay, 0s);
}
.pg-agents-pin[data-pin="2"]::after { --pin-delay: 0.35s; }
.pg-agents-pin[data-pin="3"]::after { --pin-delay: 0.7s; }
.pg-agents-pin[data-pin="4"]::after { --pin-delay: 1.05s; }
.pg-agents-pin[data-pin="5"]::after { --pin-delay: 1.4s; }
.pg-agents-pin[data-pin="6"]::after { --pin-delay: 1.75s; }
.pg-agents-pin[data-pin="7"]::after { --pin-delay: 2.1s; }
/* Hot recolour is now .callout.is-hot in flat.css; nothing to add here. */
/* The row a shot pin points at, and vice versa. */
.pg-agents-shot-row { outline: 0; transition: background 0.15s var(--ease); }
.pg-agents-shot-row.is-hot .spec__label { color: var(--teal-text); }
/* Below 700px the pins sit on a screenshot too small to read; the table stands alone. */
@media (max-width: 700px) { .pg-agents-pin { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pg-agents-ac-ring { animation: none; opacity: 0.55; }
  .pg-agents-acpin-ring { animation: none; opacity: 0.35; }
  .pg-agents-pin::after { animation: none; opacity: 0.35; transform: none; }
}