/* strata.html only. The "Where the rule comes from" section: an annotated
   product screenshot and the four rows its numbers point at. */

/* flat.css has no positioned annotation layer; the pins need one.
   Mirrors .pg-agents-stage in agents.css. */
.pg-strata-stage { position: relative; }
.pg-strata-shot img { border-radius: var(--r-card); display: block; }

/* Pin coordinates measured against the data-model screenshot at 1280px.
   Disc, numeral, paper rim and positioning all come from .callout. */
/* The card's own icon sits right where 26%/18% lands; nudged half a disc-width
   left and up so the ring doesn't eclipse the "A" of "Agreement". */
.pg-strata-pin[data-pin="1"] { top: 17.6%; left: 24.6%; }
/* Same row as the key chip, but clear of it: the disc sits in the dark
   gap between the "v8" badge and the card's right edge, so it covers no
   part of "classification + eff…" or the badges. */
.pg-strata-pin[data-pin="2"] { top: 85.6%; left: 65%; }
/* The tab strip is 16px on the label either side of "Monitors" - too
   narrow for the disc - so it hangs just below the tab in the clear gap
   above the card grid, same fix as agents.html's pins 6/7. */
.pg-strata-pin[data-pin="3"] { top: 13.7%; left: 43.7%; }
/* Centred on the toggle control itself; 85% sat inside "Strata enabled". */
.pg-strata-pin[data-pin="4"] { top: 4.7%;  left: 82.3%; }

/* The pulse ring: the flat replacement for a glow, inset around the 24px disc,
   staggered so the four pins do not beat in unison. */
.pg-strata-pin::after {
  content: ''; position: absolute; inset: -4px; border-radius: var(--r-pill);
  border: 2px solid var(--yellow); opacity: 0;
  animation: pg-strata-ping 2.4s var(--ease) infinite; animation-delay: var(--pin-delay, 0s);
}
.pg-strata-pin[data-pin="2"]::after { --pin-delay: 0.6s; }
.pg-strata-pin[data-pin="3"]::after { --pin-delay: 1.2s; }
.pg-strata-pin[data-pin="4"]::after { --pin-delay: 1.8s; }
@keyframes pg-strata-ping {
  0%        { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(2.4); }
}

/* The row a 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-strata-row { outline: 0; transition: background 0.15s var(--ease); }
.pg-strata-row.is-hot { background: var(--teal-tint); }

/* The rows are the explanation, so they run the full column rather than
   .hue-rows' 820px reading width, matching the screenshot above them. */
.pg-strata-rows { max-width: none; display: flex; flex-direction: column; gap: var(--sp-3); }

/* 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-strata-pin { display: none; } }

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