/* generated by site/build.mjs from sections/guarantee */
/* 03 · The system (guarantee): the heading is the hero, on one line where it fits; under it the readout, one slim line in a
   thin box only as wide as its content, then the lede and the key (sized to its content). Parts: the panel kit (.mp).
   panel.mjs appends its own timing (the diff's schedule, the checks, the readout) after this file. */

/* ---------- the section: the label and heading, the readout, then the lede and the key ---------- */
.gp-g{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.gp-txt{display:contents}
.gp-txt .lbl{margin-bottom:calc(var(--hd,12px) - 16px)}
.gp-txt h2{margin:0;max-width:12em}
.gp-txt .lede{margin:0;max-width:26em;order:2}
.gp-txt .gl1{order:2}
.gp-w{order:1}
/* the three sentences one per line on a phone (the verbs stack like a timeline), on one line from 620 px (the line
   needs 605: from 600 it split in two, "Agents build." over the rest) */
.gp-l{display:block}
@media (min-width:620px){.gp-txt h2{max-width:none}.gp-l{display:inline;white-space:nowrap}}
/* the verbs: dim until their step; the current one in its colour, a bar under it filling over the step */
.gv{position:relative;display:inline;padding:var(--pt) 0 var(--pb);border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--text-3);cursor:pointer;transition:color .35s}
.gv{--tone:#EDEBE6}.gv[data-tone=sys]{--tone:#93A8FF}.gv[data-tone=go]{--tone:#FF5A1F}
.gv[aria-current]{color:var(--tone)}
.gv[data-past]{color:color-mix(in oklab,var(--tone) 62%,var(--text-3))}
.gv:hover{color:var(--tone)}
.gv:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* the tap area reaches 44 px around the word without moving the line: vertical padding on an inline button grows its
   box (what a tap and the phone check measure) and leaves the line box alone (10-18: it was a ::after, which the phone
   oracle cannot see); the ::after only reaches 4 px to each side */
.gv{--pt:7px;--pb:7px;margin:calc(var(--pt) * -1) 0 calc(var(--pb) * -1)} /* a button lays out as inline-block: the margins give the padding back to the line */
.gv::after{content:"";position:absolute;inset:0 -4px}
/* phones: the sentences stack and "build" sits right above "prove" (31 px apart), so the first reaches up and the
   second down; each owns its 44 px instead of "prove" covering the foot of "build" */
@media (max-width:619.98px){.gv[data-step="1"]{--pt:13px;--pb:0px}.gv[data-step="2"]{--pt:0px;--pb:13px}}
/* the bar stays under the word: it hangs from the padding's foot, so it rises by the bottom padding */
.gv-bar{position:absolute;left:0;right:0;bottom:calc(var(--pb) - .08em);height:3px;border-radius:2px;background:color-mix(in oklab,var(--text) 14%,transparent);overflow:hidden}
.gv-bar i{position:absolute;inset:0;background:var(--tone);transform-origin:left;transform:scaleX(0)}
.gv[data-past] .gv-bar i{transform:none;opacity:.5}
@keyframes gvfill{from{transform:scaleX(0)}to{transform:none}}
/* "The system" key: never full width */
#guarantee .gl1{align-self:flex-start;inline-size:fit-content}

/* ---------- the readout: a thin box (the dashed rules' tone) as wide as its content ---------- */
.gp-w{position:relative;inline-size:fit-content;max-inline-size:100%;padding:6px 12px;border:1px solid #2A302D;border-radius:6px}
#guarantee .gp-w{background:none;box-shadow:none}
.gp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
/* each layout is shown at 1:1 (--vw: its drawing's width), so parts keep their size and the box its 12 px margins:
   one line from 900 px (791 px of box in the 40 px gutters, a classic scrollbar included), two rows from 600 (the checks
   on one line), the phone's two rows below (drawn for a 320 phone; narrower, it scales). On a phone the box's margins
   are 6 px all round: the row (the agent's 48 px screen and my key) needs the room, 274 px in a 320 phone. */
.gp-fig{display:none;width:min(var(--vw),calc(100vw - 58px))}
@media (min-width:900px){.gp-wide{display:block}}
@media (min-width:600px) and (max-width:899.98px){.gp-mid{display:block}}
@media (max-width:599.98px){.gp-tall{display:block;width:min(var(--vw),calc(100vw - 46px))}.gp-w{padding-inline:6px}}

/* ---------- legends (12 px HTML, iso-legend.js places them: left edge on the anchor, centred on its line) ---------- */
.gp-fig .lg{border:0;background:none;padding:0;transform:translate(0,-50%)}
.gp-fig .lg::before{display:none}
/* the agent's and the checks' names: dim at rest, lit with their part */
.gp-fig .gp-ag,.gp-fig .gp-cn{color:#7D857F;letter-spacing:0;transition:color .3s}
.gp-fig .gp-ag.lit,.gp-fig .gp-cn.lit{color:#E9E5D8}
/* the readout is a display: a line changes at once (no crossfade), a new one fades in quickly after its delay */
.gp-fig .lg[data-k]{opacity:0;transition:none}
.gp-fig .lg[data-k].on{opacity:1;transition:opacity .15s var(--dl,0s)}
.gp-fig .lg.gp-win.on{transition:none;animation:gpwin var(--len) var(--t) step-end both}
@keyframes gpwin{0%{opacity:0}.01%{opacity:1}100%{opacity:0}}
.gp-fig .gp-st{font-size:15px;font-weight:700;letter-spacing:.1em;color:#E9E5D8}
.gp-fig .gp-dt{color:#A9AFA6;letter-spacing:.02em}
.gp-fig .lg[data-tone=sys]{color:#93A8FF}
/* SIGNED and its ✓: the disc centred on the capitals, 7.5 px after the D (6 + the D's tracking) */
.gp-fig .gp-sg{display:flex;align-items:center}
.gp-fig .gp-tk{flex:none;width:17px;height:17px;margin-left:6px;border-radius:50%;background:#E9E5D8}
.gp-fig .gp-tk svg{display:block;width:17px;height:17px;fill:none;stroke:#0D100F;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* the stamp grows from its left edge, so it never covers my key's LED */
.gp-fig .gp-sg{transform-origin:0 50%}
.gp-fig .gp-sg.on{animation:gpstamp .42s var(--dl) cubic-bezier(.3,.7,.4,1.4) both}
@keyframes gpstamp{from{transform:translate(0,-50%) scale(1.2)}to{transform:translate(0,-50%)}}
/* the kit narrows legends' tracking in containers under 280 px; the readout keeps its own (the phone layout counts on it) */
@container (max-width:280px){.gp-fig .lg.gp-st:not(.x){letter-spacing:.1em}.gp-fig .lg.gp-dt:not(.x){letter-spacing:.02em}.gp-fig .lg[data-k]:not(.x){padding-inline:0}}

/* ---------- the agent's screen: the diff it writes ---------- */
.gp .gp-ctx rect{fill:#4A504C}
.gp .gp-add rect{fill:#EDEBE6}
.gp .gp-plus{fill:none;stroke:#A9AFA6;stroke-width:1.1;vector-effect:non-scaling-stroke}
.gp .gp-car{fill:#EDEBE6;opacity:0}
/* at rest (the work done) the diff stays, dimmed; while the agent works it is bright */
.gp .gp-dg{opacity:.5;transition:opacity .4s}
.gp .gp-dg.lit{opacity:1;transition:none}
/* while it works: each new line's + appears with its caret, its characters are typed behind the caret, the view scrolls */
.gp .gp-dg.lit .gp-t>.gp-plus{animation:gpon .01s var(--tc) both}
.gp .gp-dg.lit .gp-ty{animation:gptype var(--d) var(--t0) steps(var(--n),end) both}
.gp .gp-dg.lit .gp-car{animation:gpcx var(--d) var(--t0) steps(var(--n),end) both,gpcv var(--v) var(--tc) linear both}
.gp .gp-dg.lit .gp-last .gp-car{opacity:1;transform:translateX(var(--tw));animation:gpcx var(--d) var(--t0) steps(var(--n),end) both,gpcv2 .2s var(--tc) linear both}
@keyframes gpon{from{opacity:0}to{opacity:1}}
@keyframes gptype{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes gpcx{from{transform:none}to{transform:translateX(var(--tw))}}
@keyframes gpcv{0%{opacity:0}.01%{opacity:1}99.99%{opacity:1}100%{opacity:0}}
@keyframes gpcv2{0%{opacity:0}.01%,100%{opacity:1}}
/* the checks: in step 2 each LED pops on in turn with its name (panel.mjs sets the stagger); animations, not
   transitions, so they hold off screen with the readout's count. Entering step 3 they are simply on (already proved);
   they fade out when the cycle starts again. */
.gp .mp-chk{transition:opacity .3s}
.gp .mp-chk.lit{transition:none}
.gp-fig .gp-cn.lit{transition:none}
.gp .mp-chk .mp-lens{transform-box:fill-box;transform-origin:center}
@keyframes gpfade{from{opacity:0}to{opacity:1}}
@keyframes gpname{from{color:#7D857F}to{color:#E9E5D8}}
@keyframes gpchk{from{transform:scale(.55)}to{transform:none}}

/* a verb click replays its step from the start: everything goes out at once first */
#guarantee.gp-cut .gp *,#guarantee.gp-cut .gp-fig .lg{transition:none!important;animation:none!important}
/* paused or off screen: the motion holds where it is */
#guarantee.gp-frozen .gp *,#guarantee.gp-frozen .gp-fig .lg{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .gp *,.gp-fig .lg,.gv,.gv-bar i{animation:none!important;transition:none!important}
  .gp-fig .lg.gp-win{display:none}
}

/* generated by panel.mjs: the diff's schedule (step 1 = 3s), the checks' and the readout's timing */
@keyframes gpscroll{0%{transform:none}20.67%{transform:translateY(0px);animation-timing-function:cubic-bezier(.3,.7,.4,1)}25.33%{transform:translateY(-8px)}40%{transform:translateY(-8px);animation-timing-function:cubic-bezier(.3,.7,.4,1)}44.67%{transform:translateY(-16px)}66.33%{transform:translateY(-16px);animation-timing-function:cubic-bezier(.3,.7,.4,1)}71%{transform:translateY(-24px)}100%{transform:translateY(-24px)}}
.gp .gp-dg{transform:translateY(-24px)}
.gp .gp-dg.lit{animation:gpscroll 3s linear both}
.gp .mp-chk,.gp-fig .gp-cn{--cd:calc(0.15s + var(--i) * 0.3s)}
#guarantee[data-gs="2"] .gp .mp-chk.lit{animation:gpfade .3s var(--cd) both}
#guarantee[data-gs="2"] .gp .mp-chk.lit .mp-lens{animation:gpchk .36s var(--cd) cubic-bezier(.3,.7,.4,1.5) both}
#guarantee[data-gs="2"] .gp-fig .gp-cn.lit{animation:gpname .3s var(--cd) both}
.gp .mp-k.lit .mp-cap{animation-delay:0.25s}
.gp .mp-vk.lit .mp-vled,.gp .mp-vk.lit .mp-top{transition-delay:0.4s}