/* flat/pages/ai-knowledge-management.css — local rules the system doesn't provide.
   Tokens only, prefix .pg-akm-, no shadows. Linked after flat/flat.css. */

/* The hero is drawn 430 units wide. flat.css's default --viz-pin of 440 would enlarge it; this
   pins it at its drawn width so a 14-unit label never renders under 14 px. */
.pg-akm-svg { --viz-pin: 430px; }

/* Behaviour 1: five bubbles drifted on `lp-float` (6s, staggered 0.8s apart). Drift is banned;
   the brief's substitute is a pulse ring. Same period, same stagger, opacity only — no
   transform, no glow, no blur. */
.pg-akm-ring { opacity: 0; animation: pg-akm-ring 6s var(--ease) infinite; }
@keyframes pg-akm-ring { 0%, 62%, 100% { opacity: 0; } 8%, 34% { opacity: 0.55; } }
.pg-akm-bubble[data-step="2"] .pg-akm-ring { animation-delay: 0.8s; }
.pg-akm-bubble[data-step="3"] .pg-akm-ring { animation-delay: 1.6s; }
.pg-akm-bubble[data-step="4"] .pg-akm-ring { animation-delay: 2.4s; }
.pg-akm-bubble[data-step="5"] .pg-akm-ring { animation-delay: 3.2s; }

/* The other half of the substitution: the spine and its feeds flow into the catch-net, which is
   what "Certant reads it as it happens" claims. flat.css has no SVG dash-flow utility. */
.pg-akm-feed, .pg-akm-spine { animation: pg-akm-dash 1.6s linear infinite; }
@keyframes pg-akm-dash { to { stroke-dashoffset: -12; } }

/* Behaviours 3–5 (the FAQ disclosure) now use the system's `.disclosure` component
   (flat.css §7c) directly — no page-local styling needed. */

/* PROMOTE: .flow-step's tile and connector hardcode teal; they should follow the block's
   --_hue so a flow on a green (Understand) page reads green instead of stranding a teal
   (Act) band between two green sections. Hue Budget Rule: carried via the tile and
   connector only, no new hued ground (the wrapper stays `tint tint--panel` cloud). */
.pg-akm-flow .flow-step .tile { background: var(--green-tint); color: var(--green-deep); }
.pg-akm-flow .flow-step + .flow-step::before { background: var(--green); }

/* flat.css collapses every animation to 0.01ms / 1 iteration under reduce, which lands each
   element on its 100% frame. `pg-akm-ring` ends at opacity 0, which is the correct rest state —
   the bubbles are fully legible without their rings. Pinned here so it cannot drift. */
@media (prefers-reduced-motion: reduce) {
  .pg-akm-ring { animation: none; opacity: 0; }
  .pg-akm-feed, .pg-akm-spine { animation: none; stroke-dashoffset: 0; }
}