/* S5 · Agents at work (SITE-23). Styles for [data-section="agents"] only; built from the v2 tokens and surfaces.
   Measured from Superscale's live section (design/review/v2/SITE-23/round-1/README.md): a 9:16 front card with the
   stack peeking behind it, a logo tile on a thin orange line above, 44px pixel avatars in loose arcs either side, and
   one chip at a time (a warm pill, radius 40, padding 6, gap 10, a pixel label) opening beside its avatar. */

/* No section numerals (founder, 2026-10-31 ~01:43): the heading is one column until .sec-head's numeral is opt-in. */
.ag .sec-head { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.ag .sec-head > * { grid-column: 1; }

.ag { --ag-step: 150px; --ag-top: 72px; padding-bottom: var(--s-12); }
/* The stage stays put while the stack turns: the pin is one screen plus a step per carousel. */
.ag-pin { position: relative; height: calc(100svh + (var(--n) - 1) * var(--ag-step) + 120px); margin-top: var(--s-8); }
.ag-stage { position: sticky; top: 0; height: 100svh; min-height: 680px; max-height: 1000px; }
.ag-stage__in { position: relative; height: 100%; }

/* ── The centre: line, logo, stack, pager ─────────────────────────────── */
/* Nothing in the centre is interactive, so it takes no pointer events: scrolling then doesn't re-hit-test or re-hover the
   cards moving under a still mouse. */
.ag-center { pointer-events: none; }
.ag-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: var(--ag-top); }
/* The card's width follows the screen's height, so the whole stage fits a laptop screen. */
.ag { --cw: clamp(220px, calc((100svh - 300px) * .5625), 340px); }
.ag-wire { position: relative; display: block; width: 1px; height: 44px; flex: none; }
.ag-wire__line { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(255 90 36 / 0), var(--orange)); }
.ag-wire--short { height: 18px; }
.ag-wire--short .ag-wire__line { background: var(--hairline-strong); }
/* Replo's streak: a bright head with a soft tail, down the line into the logo (agents.js runs it). */
.ag-wire__light { position: absolute; left: -1px; top: 0; width: 3px; height: 18px; border-radius: 2px; opacity: 0;
  background: linear-gradient(to bottom, rgb(255 90 36 / 0), rgb(255 90 36 / .22) 70%, #FFB08F 92%, #fff);
  filter: drop-shadow(0 0 3px rgb(255 90 36 / .45)); }
.ag-logo { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-lg); background: var(--canvas);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
.ag-logo > span { display: block; line-height: 0; }

.ag-stack { position: relative; width: var(--cw); aspect-ratio: 9 / 16; flex: none; margin-top: 2px; }
/* Every card keeps its own layer: a turn then only moves layers (no layerisation churn mid-scroll). */
.ag-card { position: absolute; inset: 0; border-radius: var(--r-lg); transform-origin: 50% 60%; will-change: transform, opacity; }
/* The front card is its own layer, so its progress, caret and swipes never repaint the rotated cards behind it. */
.ag-card.is-front .ck-track, .ag-card.is-front .ck-prog i { will-change: transform; }
.ag-card__screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--paper-2);
  box-shadow: 0 0 0 1px rgb(21 19 15 / .06), 0 2px 4px rgb(60 40 20 / .05), 0 24px 48px -18px rgb(60 40 20 / .30); }
.ag-card:not(.is-front) .ag-card__screen { box-shadow: 0 0 0 1px rgb(21 19 15 / .06), 0 10px 24px -14px rgb(60 40 20 / .28); }
.ag-card .ck-s { --ck-r: 0; }
/* Only the front card's later slides load and show; the rest of the stack is covers. */
.ag-card:not(.is-front) .ck-cell[data-later] { display: none; }
.ag-card .ck-prog { opacity: 0; transition: opacity 240ms var(--ease-out); }
.ag-card.is-front .ck-prog { opacity: 1; }
/* The hook, written word by word by the Hook Writer (agents.js wraps the words). */
/* (The kit styles every span in a TikTok text box as a box; the word spans inside it are plain text.) */
.ag-card .ck-tt .ag-w { padding: 0; border-radius: 0; background: none; }
/* While the researcher works the caption is gone (the cover is its photo); when the writer starts, only typed words
   show, so the caption box grows word by word from the caret. */
.ag-card.is-blank:not(.is-writing) .ck-cell:first-child [data-target="hook"] { visibility: hidden; }
.ag-card.is-writing .ag-w:not(.is-typed) { display: none; }
.ag-card.is-writing .ck-b:not(:has(.is-typed)) { display: none; }
.ag-caret { display: inline-block; width: max(2px, .09em); height: 1.05em; margin-inline: .04em; vertical-align: -.16em; background: var(--orange); animation: ag-blink 1s steps(1) infinite; }
@keyframes ag-blink { 50% { opacity: 0; } }

/* The Scheduler's time: a small chip that lands on the card's bottom edge. */
.ag-when { position: absolute; left: 50%; bottom: 10px; z-index: 3; translate: -50% 50%; opacity: 0; white-space: nowrap;
  transition: opacity 260ms var(--ease-out), bottom 500ms var(--ease-out);
  background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
.ag-when .pixel-ui { text-transform: none; color: var(--ink); }
.ag-card.is-scheduled .ag-when { opacity: 1; bottom: 0; }

.ag-pager { display: flex; gap: 5px; align-items: center; margin-top: 26px; padding: 6px 9px; border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 0 0 1px var(--hairline); }
.ag-pager i { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--ink-32); transition: width 320ms var(--ease-out), background-color 320ms; }
.ag-pager i.is-on { width: 18px; background: var(--orange); }

/* ── The agents ───────────────────────────────────────────────────────── */
.ag-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* A spot is a zero-size anchor at the avatar's centre; the button hangs off it (left side: the chip opens rightward;
   right side: leftward), so GSAP's drift can own the button's transform. */
.ag-spot { --av: 44px; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
/* The agents by the stack are placed from the card's edge (the deepest peek, its turn and 12 px clear), not as a % of the
   column, so they never touch a card at any width. */
.ag-spot.is-inner { left: calc(50% + var(--side) * (var(--cw) * .66 + 40px)); }
.ag-spot:has(.ag-disc) { --av: 36px; }
.ag-agent { position: absolute; left: calc(-6px - var(--av) / 2); top: calc(-6px - var(--av) / 2); display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 40px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: default; opacity: 0; visibility: hidden;
  transition: opacity 900ms linear, visibility 0s 900ms, background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
button.ag-agent { pointer-events: auto; }
.ag-agent--r { left: auto; right: calc(-6px - var(--av) / 2); flex-direction: row-reverse; text-align: right; }
.ag-agent.is-in { opacity: 1; visibility: visible; transition: opacity 900ms linear, visibility 0s, background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
/* A slow drift on the compositor (Superscale: ~10 px over 7 s), each avatar on its own phase; only while seen. */
/* A slow drift on the compositor (Superscale: ~10 px over 7 s), each avatar on its own phase; only while seen. The
   keyframes hold literal values: keyframes that read var() fail to composite and restyle every frame. */
.is-drifting .ag-agent { animation: ag-drift-a var(--dd, 8s) var(--dl, 0s) infinite ease-in-out; }
/* While the stack turns it is the one moving focus: the avatars hold their drift where it is. */
.is-turning .ag-agent { animation-play-state: paused; }
.is-drifting .ag-agent[data-k="1"], .is-drifting .ag-agent[data-k="4"], .is-drifting .ag-agent[data-k="7"], .is-drifting .ag-agent[data-k="10"], .is-drifting .ag-agent[data-k="13"] { animation-name: ag-drift-b; }
.is-drifting .ag-agent[data-k="2"], .is-drifting .ag-agent[data-k="5"], .is-drifting .ag-agent[data-k="8"], .is-drifting .ag-agent[data-k="11"] { animation-name: ag-drift-c; }
@keyframes ag-drift-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(3px, -5px, 0); } }
@keyframes ag-drift-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-3px, 5px, 0); } }
@keyframes ag-drift-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-3px, -5px, 0); } }
.ag-agent:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ag-agent__av { display: block; width: var(--av); height: var(--av); flex: none; border-radius: 50%; padding: 1px; transition: transform 560ms cubic-bezier(.16, 1, .3, 1); }
.ag-av { display: block; width: 100%; height: 100%; }
.ag-av__disc { fill: color-mix(in oklab, var(--tone-soft) 85%, #fff); }
.ag-av__ring { fill: var(--tone); }
.ag-av__mark { fill: var(--tone-ink); }
/* The chip: the label opens out of the avatar (Superscale: max-width and opacity over 300ms). */
.ag-agent__label { display: grid; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; padding-inline: 0 14px;
  transition: max-width 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.ag-agent--r .ag-agent__label { padding-inline: 14px 0; }
.ag-agent__name { white-space: nowrap; font: 400 var(--t-pixel-md)/1 var(--font-pixel-ui); letter-spacing: -2px; /* one font pixel: tighter, as Superscale, still on the grid */ color: var(--ink); }
.ag-agent__did { font: 400 var(--t-small)/1.2 var(--font-body); letter-spacing: var(--track-body); color: var(--ink-64); }
.ag-agent.is-open { transition: opacity 300ms var(--ease-out), visibility 0s, background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.ag-agent.is-open { background: var(--paper-2); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-xs); z-index: 2; }
.ag-agent.is-open .ag-agent__label { max-width: 420px; opacity: 1; }

/* The researcher's report (SITE-28's report()): in the left-hand space under the researcher's chip, while it works.
   The avatars it would sit on step back. */
.ag-reports { position: absolute; z-index: 4; left: max(0px, calc(4% - 28px)); top: calc(13% + 40px); width: min(316px, calc(36% - 24px)); pointer-events: none; }
.ag-report { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s 320ms; }
.ag-report.is-on { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
.ag-report .rp { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-md); }
@media (max-height: 860px) { .ag-report .rp-table { display: none; } }
.ag-field .ag-spot--l { transition: opacity 400ms var(--ease-out); }
.ag-field.is-reporting .ag-spot--l:not(:has(.is-open)) { opacity: 0; }

/* Small screens: the chip opens in one place, under the stack, so it never covers a carousel. */
.ag-slot { display: none; }

.ag-note { margin-top: var(--s-6); max-width: 62em; color: var(--ink-58); }

@media (max-width: 959px) { .ag-reports { display: none; } }
@media (max-width: 1219px) {
  .ag-field.is-reporting .ag-spot--l { opacity: 0; transition: opacity 400ms var(--ease-out); }
  .ag-spot:not(.is-m) { display: none; }
  .ag-agent__label { display: none; }
  .ag-agent.is-open { background: transparent; box-shadow: none; }
  .ag-agent.is-open .ag-agent__av { transform: scale(1.12); }
  .ag-slot { display: flex; align-items: center; gap: 10px; min-height: 56px; margin-top: 14px; padding: 6px 16px 6px 6px; border-radius: 40px; background: var(--paper-2);
    box-shadow: 0 0 0 1px var(--hairline); transition: opacity 300ms var(--ease-out); }
  .ag-slot:empty { opacity: 0; }
  .ag-slot { --av: 44px; }
  .ag-slot__t { display: grid; gap: 5px; white-space: nowrap; }
  /* One width for every agent (SITE-25, G3 CLS): a centred slot that sized to its text slid sideways at each change. */
  .ag-slot { width: min(100%, 22rem); }
  .ag-slot__t { min-width: 0; }
  .ag-slot__t .ag-agent__did { overflow: hidden; text-overflow: ellipsis; }
}
/* Phones and small tablets (≤ 768 px, the same breakpoint as agents.js): a slightly narrower card so the avatars sit
   beside it, hand-placed (--xm, --ym) clear of the peeking cards and of the chip slot below; they're pictures here
   (the chips open in the slot), so they take no taps. */
@media (max-width: 768px) {
  .ag { --ag-step: 120px; --ag-top: 64px; --cw: clamp(200px, calc((100svh - 330px) * .5625), min(300px, 55vw)); }
  .ag-stage { min-height: 600px; }
  .ag-spot, .ag-spot.is-inner, .ag-spot:has(.ag-disc) { --av: 28px; left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
  .ag-agent { pointer-events: none; }
  /* M4 (SITE-25): a 44 px hit area round the 28 px avatar (8 px padding instead of 6), its centre where it was. */
  .ag-agent { padding: 8px; left: calc(-8px - var(--av) / 2); top: calc(-8px - var(--av) / 2); }
  .ag-agent--r { left: auto; right: calc(-8px - var(--av) / 2); }
  .ag-wire { height: 28px; }
  .ag-pager { margin-top: 22px; }
  .ag-slot__t .ag-agent__name { font-size: var(--t-pixel-md); }
}

/* Reduced motion: no pin; the stage takes its content's height; the stack holds its first carousel, and two agents
   show what they did (agents.js). */
@media (prefers-reduced-motion: reduce) {
  .ag-pin { height: auto; }
  .ag-stage { position: relative; height: auto; min-height: 0; max-height: none; }
  .ag-stage__in, .ag-center { height: auto; }
  .ag-center { padding-bottom: var(--s-6); }
  .ag-agent, .ag-agent__label, .ag-agent__av, .ag-pager i, .ag-slot, .ag-when { transition: none; }
}
html[data-motion="reduce"] .ag-pin { height: auto; }
html[data-motion="reduce"] .ag-stage { position: relative; height: auto; min-height: 0; max-height: none; }
html[data-motion="reduce"] .ag-stage__in, html[data-motion="reduce"] .ag-center { height: auto; }
html[data-motion="reduce"] .ag-center { padding-bottom: var(--s-6); }