/* App UI primitives used by the hero flow figure (illustrations with sample data). Requires tokens.css.
 * Status colours and agent badges follow the app's DESIGN.md. */
/* ── Shared primitives ── */
.ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-working { color: var(--tp-status-working); }
.s-review { color: var(--tp-status-in-review); }
.s-ready { color: var(--tp-status-ready); }
.s-failed { color: var(--tp-status-failed); }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spin { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.75px solid color-mix(in oklch, currentColor 28%, transparent); border-top-color: currentColor; animation: tp-spin 0.9s linear infinite; }
@keyframes tp-spin { to { transform: rotate(1turn); } }
.av { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; font-style: normal; }
.av b { font-size: 8.5px; font-weight: 700; letter-spacing: -0.02em; }
.av--cc { background: color-mix(in oklch, var(--tp-agent-claude) 22%, transparent); color: var(--tp-agent-claude-ink); }
.av--cx { background: color-mix(in oklch, var(--tp-agent-codex) 22%, transparent); color: var(--tp-agent-codex-ink); }
.av--ki { background: color-mix(in oklch, var(--tp-agent-kiro) 22%, transparent); color: var(--tp-agent-kiro-ink); }
.av--or { background: var(--tp-pine); color: var(--tp-ivory); }
.av--or .pm, .av--or svg { width: 12px; height: 12px; }
.av--or .logo-tile { display: none; }
code { font-size: 0.92em; }
/* Status slot: variants stack in one grid cell; only one is visible at a time. */
.sv { display: inline-grid; flex: none; place-items: center; width: 14px; }
.sv > .v { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
/* ── Playback: a figure plays forward once, then rests on its final state. Variants in an .sv
 * stack carry --in/--out; the last one (.end) is the static frame. */
.play .v { animation: tp-v-in 0.32s var(--tp-ease-out) var(--in, 0s) both, tp-v-out 0.18s ease-in var(--out, 600s) forwards; }
.play .enter { animation: tp-msg-in 0.5s var(--tp-ease-out) var(--in, 0s) both; }
@keyframes tp-v-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tp-v-out { to { opacity: 0; visibility: hidden; } }
@keyframes tp-msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sv > .v:not(.end) { pointer-events: none; }
/* Held while scrolled away (visuals.js), so the session plays when someone is looking at it. */
.play.is-paused, .play.is-paused * { animation-play-state: paused !important; }
.sv:not(.play *) > .v:not(.end) { display: none; }
@media (prefers-reduced-motion: reduce) {
	.play .v, .play .enter { animation: none; }
	.play .v:not(.end) { visibility: hidden; }
	.spin { animation: none; border-top-color: currentColor; border-right-color: currentColor; }
}