/*
 * Agent figure, v2.1. Copied from niklausgerber.com assets/css/site.css (11 November 2026; scripts/check.sh keeps it in step); spec in README.md beside this file.
 * An illustration of how an agent works. The stage is sharp like the page; everything inside is rounded
 * (the only rounding in the system), so it reads as a picture of software. Sizes are in em: font-size scales the
 * whole figure. Five modes: exchange, measure, ledger, app, build. Without JS, under reduced motion and in print
 * it shows its end state; agent-figure.js steps it through once it is 40% in view.
 * Needs: tokens/tokens.css (or the site's stylesheet) for --ink, --ink-2, --link, --accent, --font-read,
 * and an ancestor with `container: page / inline-size` for the phone size (.page on the site).
 */
.agf {
    --agf-stage: #ffffff; --agf-sub: #5a564f; --agf-line: #d6d3cd; --agf-tint: #eceef8;
    --agf-on: #f7f6ff; --agf-on-soft: rgba(247, 246, 255, 0.2); --agf-link: #26357a;
    --agf-block: #e6e4de; --agf-phone: #141414; --agf-scan: rgba(38, 53, 122, 0.12);
    margin: 48px 0 8px;
    font-size: 16px;
    line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
    .agf {
        --agf-stage: #1e1e1c; --agf-sub: #a8a399; --agf-line: #33312e; --agf-tint: #272b45;
        --agf-link: #aab4f0; --agf-block: #33312e; --agf-phone: #0b0b0b; --agf-scan: rgba(170, 180, 240, 0.16);
    }
}
@container page (max-width: 767px) { .agf { font-size: 13px; } }
.agf-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10 / 7;
    min-height: 30em;
    padding: 1.75em 2em;
    background: var(--agf-stage);
    color: var(--ink);
}
@container page (max-width: 767px) { .agf-stage { aspect-ratio: auto; padding: 1.5em 1.25em; } }
.agf-cap { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 0.5em; font-size: 0.875em; line-height: 1.5; color: var(--ink-2); }
.agf-btn { min-width: 44px; min-height: 44px; padding: 0 0.5em; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.agf-btn[hidden] { display: none; }
.agf-pill { display: inline-flex; align-items: center; gap: 0.5em; border-radius: 999px; padding: 0.35em 0.9em 0.35em 0.5em; font-weight: 500; }
.agf-pill::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: currentColor; }
.agf-pill-a { background: var(--accent); color: var(--agf-on); }
.agf-pill-b { background: var(--agf-tint); }
.agf-pill-b::before { background: var(--agf-link); }

/* Exchange */
.agf-ex { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }

.agf-ex-head { display: flex; justify-content: space-between; gap: 1em; }
.agf-msg { max-width: 70%; padding: 0.75em 1em; border-radius: 1.25em 1.25em 1.25em 0.4em; background: var(--accent); color: var(--agf-on); align-self: flex-start; text-wrap: pretty; overflow-wrap: anywhere; }
.agf-msg-b { align-self: flex-end; border-radius: 1.25em 1.25em 0.4em 1.25em; background: var(--agf-tint); color: var(--ink); }
.agf-dots { display: flex; gap: 0.4em; padding: 0.5em 0.25em; }
.agf-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--agf-link); animation: agf-pulse 1.2s infinite; }
.agf-dots i:nth-child(2) { animation-delay: 0.2s; }
.agf-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes agf-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Measure */
.agf-me { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-phone { position: relative; flex: none; width: 13em; height: 23em; overflow: hidden; border: 0.55em solid var(--agf-phone); border-radius: 2.4em; background: var(--agf-stage); }
.agf-bar { display: block; height: 0.6em; border-radius: 0.4em; background: var(--agf-block); }
.agf-phone-top { display: flex; justify-content: space-between; margin: 1.4em 1em 0; }
.agf-phone-top .agf-bar { width: 4em; height: 0.65em; }
.agf-phone-top .agf-bar + .agf-bar { width: 1.3em; }
.agf-h { position: relative; margin: 1.6em 1em 0; font-size: 1.55em; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.agf-box { position: absolute; inset: -0.3em -0.45em; border: 0.15em solid var(--agf-link); border-radius: 0.5em; }
.agf-badge { display: inline-block; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--agf-link); color: var(--agf-stage); font-size: 0.8em; line-height: 1.4em; text-align: center; font-weight: 500; }
.agf-h .agf-badge { position: absolute; right: -0.6em; top: -0.75em; font-size: 0.55em; }
.agf-phone .agf-bar.l1 { margin: 1.4em 1em 0; }
.agf-phone .agf-bar.l2 { width: 68%; margin: 0.5em 1em 0; }
.agf-phone .agf-bar.l3 { height: 2.4em; margin: 1.5em 1em 0; border-radius: 1.2em; }
.agf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 1.1em 1em 0; }
.agf-cards .agf-bar { height: 4.8em; border-radius: 0.9em; }
.agf-cards .agf-bar + .agf-bar { margin-top: 1em; }
.agf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2.1em; background: var(--agf-scan); border-bottom: 0.12em solid var(--agf-link); opacity: 0; }
.agf-side { display: flex; flex: 1; flex-direction: column; gap: 1em; min-width: 14em; }
.agf-flag { padding: 0.9em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-flag-t { display: flex; align-items: center; gap: 0.6em; font-weight: 500; }
.agf-sub { margin-top: 0.2em; color: var(--agf-sub); }
.agf-ticket { padding: 0.9em 1em; border-radius: 1em; background: var(--accent); color: var(--agf-on); }
.agf-ticket-t { display: flex; justify-content: space-between; gap: 0.6em; font-weight: 500; }
.agf-tag { padding: 0 0.8em; border-radius: 999px; background: var(--agf-on); color: var(--accent); font-size: 0.85em; line-height: 1.7em; font-weight: 500; }
.agf-shot { display: block; height: 2.6em; margin-top: 0.7em; border-radius: 0.6em; background: var(--agf-on-soft); }

/* Ledger */
.agf-le { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }
.agf-le-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 0.5em; }
.agf-le-head .agf-chip { padding: 0.3em 0.9em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-le-head .agf-sub { margin: 0; text-align: right; }
.agf-row { display: flex; align-items: center; gap: 0.9em; padding: 0.85em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-row-tag { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--agf-tint); font-weight: 500; font-size: 0.9em; }
.agf-row-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agf-state { position: relative; flex: none; width: 4.8em; height: 1.8em; }
.agf-state span { position: absolute; inset: 0; border-radius: 999px; text-align: center; line-height: 1.8em; transition: opacity 300ms ease-out; }
.agf-open { background: var(--accent); color: var(--agf-on); }
.agf-closed { background: var(--agf-block); }

.agf-row[data-close] .agf-open { opacity: 0; }
.agf-row[data-close] .agf-closed { opacity: 1; }
.agf-note { margin-top: auto; padding: 0.8em 1em; border-radius: 0.9em; background: var(--agf-tint); text-wrap: pretty; }

/* App (a phone runs through its screens; a step list beside it marks the current one).
   Screens are stacked in order and each covers the one before, so the end state
   shows the last screen. */
.agf-app { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-app .agf-phone { width: 14em; height: 26em; }
.agf-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--agf-stage); font-size: 0.8em; }
.agf-scr-page { flex: 1; padding: 2em 1.2em 0; opacity: 0.45; }
.agf-scr-page .agf-bar { margin-top: 0.7em; }
.agf-sheet { padding: 1.1em 1.1em 1.6em; border-radius: 1.4em 1.4em 0 0; background: var(--agf-tint); }
.agf-sheet-t { font-weight: 500; }
.agf-sheet-link { margin-top: 0.6em; padding: 0.6em 0.8em; border-radius: 0.8em; background: var(--agf-stage); }
.agf-apps { display: flex; justify-content: space-between; margin-top: 1em; }
.agf-apps span { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 0.9em; background: var(--agf-block); font-size: 0.85em; }
.agf-apps .agf-apps-me { background: var(--accent); color: var(--agf-on); font-weight: 500; }
.agf-scr-head { padding: 2.2em 1.1em 0.9em; border-radius: 0 0 1.2em 1.2em; background: var(--agf-phone); color: var(--agf-on); font-family: var(--font-read); font-size: 1.35em; }
.agf-scr-body { flex: 1; padding: 0.9em 0.8em 0; }
.agf-card { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-card + .agf-card, .agf-card + .agf-bar { margin-top: 0.6em; }
.agf-card-i { flex: none; width: 1.8em; height: 1.8em; border-radius: 0.5em; background: var(--agf-stage); }
.agf-card-t { flex: 1; min-width: 0; }
.agf-card-t b { display: block; font-weight: 500; }
.agf-card-t span { display: block; color: var(--agf-sub); font-size: 0.9em; }
.agf-card-n { flex: none; color: var(--agf-sub); font-size: 0.85em; }
.agf-card-dim { opacity: 0.6; }
.agf-ask { margin: 2.2em 0.8em 0; padding: 0.7em 0.9em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-ans { margin: 0.8em 0.8em 0; overflow: hidden; border-radius: 0.9em; border: 1px solid var(--agf-line); }
.agf-ans-h { padding: 0.45em 0.9em; background: var(--agf-phone); color: var(--agf-on); font-size: 0.8em; font-weight: 500; letter-spacing: 0.06em; }
.agf-ans-t { padding: 0.7em 0.9em; }
.agf-ans .agf-card { margin: 0 0.6em; }
.agf-ans-f { padding: 0.6em 0.9em; color: var(--agf-sub); font-size: 0.85em; }
.agf-tabs { display: flex; gap: 0.3em; margin: auto 0.8em 1.2em; padding: 0.3em; border-radius: 1.1em; background: var(--agf-phone); color: var(--agf-on); }
.agf-tabs span { flex: 1; padding: 0.5em 0; border-radius: 0.9em; text-align: center; }
.agf-tabs .agf-tab-on { background: var(--agf-stage); color: var(--ink); }
.agf-steps { display: flex; flex: 1; flex-direction: column; gap: 0.7em; min-width: 14em; }
.agf-step { display: flex; gap: 0.7em; padding: 0.75em 0.9em; border: 1px solid var(--agf-line); border-radius: 1em; transition: border-color 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out; }
.agf-step .agf-badge { margin-top: 0.1em; }
.agf-step-t { font-weight: 500; }
.agf-on .agf-step.is-now { border-color: var(--agf-link); box-shadow: inset 0 0 0 1px var(--agf-link); }

/* Build (a brief becomes a wireframe: the key points are pulled out, then the
   blocks arrive one by one with the real copy in them). */
.agf-bd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5em; align-items: start; height: 100%; }
@container page (max-width: 767px) { .agf-bd { grid-template-columns: minmax(0, 1fr); } }
.agf-doc { padding: 1em; border: 1px solid var(--agf-line); border-radius: 1em; font-size: 0.85em; }
.agf-doc p + p { margin-top: 0.5em; }
.agf-doc .agf-chip { display: inline-block; margin-bottom: 0.7em; padding: 0.2em 0.8em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-pulled { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.9em; }
.agf-pulled span { padding: 0.2em 0.7em; border-radius: 999px; background: var(--accent); color: var(--agf-on); }
.agf-wf { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-wf-top { display: flex; gap: 0.35em; }
.agf-wf-top i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--agf-block); }
.agf-blk { padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--agf-block); }
.agf-blk-l { display: block; color: var(--agf-sub); font-size: 0.75em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.agf-blk-h { display: block; margin-top: 0.2em; font-size: 1.15em; font-weight: 500; line-height: 1.2; }
.agf-blk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; margin-top: 0.4em; font-size: 0.85em; }
.agf-blk-row span { padding: 0.4em 0.5em; border-radius: 0.4em; background: var(--agf-stage); }
.agf-verify { padding: 0 0.5em; border-radius: 999px; background: var(--agf-tint); color: var(--agf-link); font-size: 0.8em; font-weight: 500; }
.agf-cta { display: inline-block; margin-top: 0.4em; padding: 0.35em 1em; border-radius: 999px; background: var(--accent); color: var(--agf-on); font-size: 0.9em; }
.agf-bd .agf-note { grid-column: 1; margin-top: 0; }
.agf-bd .agf-wf { grid-row: span 2; }


/* Steps: only while site.js plays the figure (.agf-on). */
.agf [data-s], .agf-scan { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.agf-on [data-s]:not(.is-in) { opacity: 0; transform: translateY(0.4em); }
.agf-on .agf-ticket[data-s]:not(.is-in) { transform: translateX(-0.6em); }
.agf-on[data-step="1"] .agf-scan { opacity: 1; transform: translateY(19em); transition: transform 1.4s ease-out, opacity 300ms ease-out; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-open { opacity: 1; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-closed { opacity: 0; }
@media print {
    .agf-on [data-s] { opacity: 1 !important; transform: none !important; }
    .agf-btn { display: none; }
}

@media (forced-colors: active) {
    .agf-stage { border: 1px solid CanvasText; }
    .agf-msg, .agf-ticket, .agf-row, .agf-flag, .agf-note, .agf-pill, .agf-card, .agf-blk, .agf-step { border: 1px solid CanvasText; }
    .agf-on .agf-step.is-now { border-width: 3px; }
}
.agf .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }