/* ==========================================================================
   exp33 . agent-sections.css
   Owned by the agent-sections builder. Styles exactly four partials:

     partials/stale.html      page section 5  self-invalidation
     partials/agents.html     page section 6  the agent asks Proof
     partials/agentuse.html   page section 7  understand / change / fix / verify
     partials/queue.html      page section 8  the work entering the queue

   Contract with the shell:
     - colour comes ONLY from tokens, so all themes follow. State colour is
       semantic, never decorative:
         verified / proven / passing        var(--pass)
         violated / broken                  var(--fail)
         changed / stale / needs re-proving  var(--stale, var(--fail))
         inactive / unknown / not yet proven var(--unknown, var(--muted))
         structure, rules, hairlines         var(--ink) / var(--hair)
       var(--signal) is reserved for interactive affordances and emphasis. It
       never carries a state in these four sections.
     - typography obeys the two-layer rule (site.css section 20):
       var(--prose) for every sentence a visitor reads, var(--mono) for IDs,
       labels, code, status, counts and metadata.
     - motion reuses the shell's arrival system: site.js adds .in to .fig and
       to [data-reveal]; strokes are pathLength="1" + .dr, text is .fx.
       The one exception is the three-state stale figure, which needs a
       timeline: assets/stale.js flips [data-state] on #ag-stale and every
       state is a CSS rule below. It runs once per arrival, never loops, and
       the Replay button is the only way to see it again.
     - the transcript panel reuses .sx-win / .sx-chrome / .sx-dots / .sx-win-t /
       .sx-win-p / .sx-cap from assets/sections.css unchanged, so it carries the
       same theme polish as the other product surfaces on the page.
   Every class here is prefixed .ag- (plus the figure-internal .agn .ags .agp
   .agq .aga .agb .n-ok .n-q .n-star .ev .bd .qe .tstale .stale-s), so it can
   never collide with site.css or sections.css.
   ========================================================================== */

/* ---------- shared ------------------------------------------------------- */

/* ==========================================================================
   THESIS TWO  (the transition INTO the agents material)
   The three sections above built the graph; this sentence hands the same graph
   to the agent, so it sits above the section head rather than inside it. Set
   just under the H2's weight: it is a hinge, not a headline.
   ========================================================================== */
.ag-bridge{
  margin:0 0 clamp(2.2rem,4vw,3.2rem);padding-bottom:clamp(1.4rem,2.4vw,2rem);
  border-bottom:1px solid var(--hair);
  font-family:var(--prose);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.24rem,2.1vw,1.68rem);line-height:1.32;
  max-width:46ch;color:var(--ink);text-wrap:pretty;
}
html[data-theme="riso"] .ag-bridge,
html[data-theme="brutal"] .ag-bridge{font-family:"Bricolage Grotesque",var(--sans);font-weight:700;}

/* a small mono label that titles a single artifact */
.ag-tag{
  display:flex;align-items:center;gap:.55em;margin:2.8rem 0 .9rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.ag-tag::before{content:"";flex:0 0 auto;width:7px;height:7px;background:var(--hair-strong);}

/* desktop / phone figure variants */
.ag svg.ag-mob{display:none;}
.ag .ag-fig{margin:2.4rem 0 0;}

/* figure text layers. Node names, paths and status are machine text (mono);
   only whole sentences inside a figure use --prose. */
.ag .fig .agn{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;fill:var(--ink);
}
.ag .fig .ags{font-family:var(--mono);font-size:10px;letter-spacing:.02em;fill:var(--muted);}
.ag .fig .agp{
  font-family:var(--prose);font-size:13px;font-weight:400;
  letter-spacing:-.005em;fill:var(--ink);
}
.ag .fig .agb{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
}
.ag .fig .agq,.ag .fig .aga{
  font-family:var(--mono);font-size:23px;font-weight:600;
  fill:var(--stale,var(--fail));
}
.ag .fig .tstale{fill:var(--stale,var(--fail));}
/* state strokes are written with .st in the selector on purpose. themes.css
   repaints every .fig .st in one theme, and a stroke that carries a state has
   to out-rank that: a state is never a theme accent. */
.ag .fig .st.stale-s{stroke:var(--stale,var(--fail));}
.ag .fig .st.good{stroke:var(--pass);}
.ag .fig .st.ag-tick{stroke:var(--pass);stroke-width:2.8;}

/* ==========================================================================
   SECTION 5 . self-invalidation  (partials/stale.html)
   ========================================================================== */

.ag-stale{position:relative;}

/* the plain-language state read-out + the replay affordance */
.ag-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 0 1rem;min-height:30px;
}
.ag-bar-s{display:grid;margin:0;min-width:0;}
.ag-bar-s b{
  grid-area:1 / 1;display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .3s ease-out;
}
.ag-bar-s b::before{content:"";flex:0 0 auto;width:9px;height:9px;background:currentColor;}
.ag-bar-s b[data-when="ok"],.ag-bar-s b[data-when="verified"]{color:var(--pass);}
.ag-bar-s b[data-when="stale"]{color:var(--stale,var(--fail));}

.ag-replay{
  flex:0 0 auto;appearance:none;cursor:pointer;
  background:var(--card);border:1px solid var(--hair-strong);
  border-radius:calc(var(--radius) - 2px);padding:.34rem .7rem;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ag-replay:hover{color:var(--ink);border-color:var(--ink);}
.ag-replay:focus-visible{outline:2px solid var(--signal);outline-offset:1px;}

/* ---- the three states -------------------------------------------------- */
/* every state group starts hidden and fades in on its own beat (--sd), so the
   doubt spreads outwards from the code that changed instead of appearing all
   at once. */
.ag-stale .n-ok,.ag-stale .n-q,.ag-stale .n-star,.ag-stale .ev,.ag-stale .bd,.ag-stale .qe{
  opacity:0;transition:opacity .32s ease-out,transform .32s ease-out;
  transition-delay:var(--sd,0s);
}
.ag-stale .n-q,.ag-stale .n-star{transform-box:fill-box;transform-origin:center;transform:scale(.5);}
.ag-stale .qe{stroke-dasharray:6 5;stroke-width:2.2;}

/* box outlines carry the state colour, so the state is readable without
   reading a glyph */
.ag-stale .ag-cs{transition:stroke .34s ease-out;transition-delay:var(--sd,0s);}
.ag .fig.ag-stale[data-state="ok"] .st.ag-cs,
.ag .fig.ag-stale[data-state="verified"] .st.ag-cs{stroke:var(--pass);}
.ag .fig.ag-stale[data-state="stale"] .st.ag-cs{stroke:var(--stale,var(--fail));}

.ag-stale[data-state="ok"] .n-ok,
.ag-stale[data-state="verified"] .n-ok{opacity:1;}
.ag-stale[data-state="stale"] .n-q,
.ag-stale[data-state="stale"] .n-star{opacity:1;transform:none;}
.ag-stale[data-state="stale"] .qe{opacity:1;}
.ag-stale[data-state="ok"] .ev-ok,
.ag-stale[data-state="stale"] .ev-push,
.ag-stale[data-state="verified"] .ev-ver{opacity:1;}
.ag-stale[data-state="ok"] .bd-ok,
.ag-stale[data-state="stale"] .bd-q,
.ag-stale[data-state="verified"] .bd-ver{opacity:1;}
.ag-stale[data-state="ok"] .ag-bar-s b[data-when="ok"],
.ag-stale[data-state="stale"] .ag-bar-s b[data-when="stale"],
.ag-stale[data-state="verified"] .ag-bar-s b[data-when="verified"]{opacity:1;}

/* ---- the same three moments as a log ----------------------------------
   Kept alongside the canonical tree, trimmed to exactly one row per state, and
   demoted to micro mono. It does not compete with the tree because it is not a
   second picture of the same thing: the tree shows the CURRENT state, and once
   the sequence has settled (or a visitor arrives after it played, or reduced
   motion pins the final frame) the log is the only thing that still carries the
   order the three states happened in. */
.ag-log{
  list-style:none;margin:1.5rem 0 0;padding:0;
  border-top:1px solid var(--hair);
}
.ag-log li{
  display:grid;grid-template-columns:3.6rem minmax(0,9.5rem) minmax(0,1fr);
  gap:.3rem 1.4rem;align-items:baseline;padding:.46rem 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.73rem;line-height:1.5;
  opacity:0;transition:opacity .4s ease-out;transition-delay:var(--sd,0s);
}
.ag-log .t{color:var(--muted);font-variant-numeric:tabular-nums;}
.ag-log .e{color:var(--ink);}
.ag-log .r{letter-spacing:.01em;}
.ag-log .r.is-ok{color:var(--pass);}
.ag-log .r.is-stale{color:var(--stale,var(--fail));}
.ag-stale[data-state="ok"] .ag-log li[data-at="1"],
.ag-stale[data-state="stale"] .ag-log li[data-at="1"],
.ag-stale[data-state="stale"] .ag-log li[data-at="2"],
.ag-stale[data-state="verified"] .ag-log li{opacity:1;}

/* the line the section is really about */
.ag-big{
  font-family:var(--prose);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.36rem,2.5vw,2rem);line-height:1.26;
  margin:3rem 0 0;max-width:32ch;color:var(--ink-60);text-wrap:pretty;
}
.ag-big .ag-turn{display:block;color:var(--ink);margin-top:.3em;}

/* ==========================================================================
   SECTION 6 . the agent asks Proof  (partials/agents.html)
   ========================================================================== */
/* The chain is vertical now (canonical), so the figure is 540 viewBox units
   wide, not 940. Capping the rendered width holds it at roughly 1:1.33 — the
   scale the type was drawn for — instead of stretching it to the 1180px column
   and leaving a third of the figure as dead margin. min-width stays 0 so it can
   never out-run its own scroller at the 821px edge of the desktop band. */
.ag-ask-fig .fig-scroll svg{min-width:0;max-width:720px;}
.ag-tx-win{margin:0;max-width:880px;}
.ag-tx{padding:1.15rem 1.25rem 1.2rem;}

.ag-cwd{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin:0 0 .9rem;}
.ag-cwd::after{content:" $";color:var(--hair-strong);}

.ag-who,.ag-from{
  display:block;font-family:var(--mono);font-size:.64rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 .34rem;
}
.ag-who{color:var(--muted);}
.ag-ask{
  font-family:var(--prose);font-size:1.06rem;line-height:1.5;color:var(--ink);
  margin:0 0 1.35rem;max-width:54ch;
}
.ag-ask code{font-family:var(--mono);font-size:.9em;}

.ag-ans{border-left:2px solid var(--hair-strong);padding-left:1.1rem;}
.ag-from{color:var(--ink);}
.ag-blk{margin:1rem 0 0;}
.ag-blk:first-of-type{margin-top:.1rem;}
.ag-h{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .35rem;
}
.ag-ki{list-style:none;margin:0;padding:0;}
.ag-ki li{
  display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:.9rem;
  align-items:baseline;font-family:var(--mono);font-size:.8rem;line-height:1.85;
}
.ag-ki b{font-weight:600;color:var(--unknown,var(--muted));}
.ag-ki span{color:var(--ink);}
.ag-rad{font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--muted);margin:0;}
.ag-rad b{font-weight:600;color:var(--ink);}
.ag-known{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.1rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--fail);margin:0;
}
.ag-known b{font-weight:600;}
.ag-known-sub{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:.3rem 0 0;}
.ag-repro{
  font-family:var(--prose);font-size:.9rem;font-weight:500;color:var(--signal);
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.ag-meta{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin:1.2rem 0 0;}
.ag s{text-decoration:none;color:var(--hair-strong);}

/* ==========================================================================
   SECTION 7 . understand / change / fix / verify  (partials/agentuse.html)
   ========================================================================== */
.ag-use{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.ag-use li{
  display:grid;grid-template-columns:7.5rem minmax(0,19rem) minmax(0,1fr);
  gap:.35rem 2.2rem;align-items:baseline;padding:1.15rem 0;
  border-bottom:1px solid var(--hair);
}
.ag-verb{
  font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin:0;
}
.ag-vow{
  font-family:var(--prose);font-size:1.06rem;font-weight:500;letter-spacing:-.012em;
  line-height:1.4;color:var(--ink);margin:0;
}
.ag-vs{
  font-family:var(--prose);font-size:1.02rem;line-height:1.6;color:var(--ink-60);
  margin:0;max-width:54ch;
}
.ag-cycle{margin-top:2.8rem;}
.ag-cycle .fig-scroll svg{min-width:0;max-width:640px;}

/* ==========================================================================
   SECTION 8 . the work entering the queue  (partials/queue.html)
   ========================================================================== */
.ag-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;align-items:stretch;}
.ag-col{
  display:flex;flex-direction:column;min-width:0;
  background:var(--card);border:1px solid var(--hair);border-radius:10px;
  padding:1.2rem 1.3rem 1.25rem;
}
.ag-col-h{
  display:flex;align-items:center;gap:.55em;margin:0 0 1rem;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;
}
.ag-col-h::before{content:"";flex:0 0 auto;width:8px;height:8px;background:currentColor;}
.ag-col-old .ag-col-h{color:var(--unknown,var(--muted));}
.ag-col-new .ag-col-h{color:var(--pass);}

.ag-ticket{
  border:1px solid var(--hair);border-radius:var(--radius);background:var(--paper);
  padding:.8rem .9rem .85rem;
}
.ag-col-new .ag-ticket{border-color:var(--hair-strong);}
.ag-tid{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink);margin:0 0 .4rem;
}
.ag-tq{
  font-family:var(--prose);font-size:1.02rem;line-height:1.4;color:var(--ink);
  margin:0;max-width:36ch;
}
.ag-col-old .ag-tq{color:var(--ink-60);font-style:italic;}
.ag-tsub{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fail);margin:.55rem 0 0;}

/* seven questions nobody answered */
.ag-qs{list-style:none;margin:1.15rem 0 0;padding:0;}
.ag-qs li{
  position:relative;padding:.52rem 1.9rem .52rem 0;border-top:1px dashed var(--hair);
  font-family:var(--prose);font-size:1rem;line-height:1.45;
  color:var(--unknown,var(--muted));
}
.ag-qs li::after{
  content:"?";position:absolute;right:.1rem;top:.42rem;
  font-family:var(--mono);font-size:1.1rem;font-weight:600;line-height:1;
  color:var(--unknown,var(--muted));
}

/* the same seven, answered */
.ag-ticks{list-style:none;margin:1.15rem 0 0;padding:0;}
.ag-ticks li{
  display:grid;grid-template-columns:14px minmax(0,9.6rem) minmax(0,1fr);
  gap:.5rem .8rem;align-items:baseline;padding:.52rem 0;
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.78rem;line-height:1.5;
}
.ag-ticks svg{width:12px;height:12px;display:block;align-self:center;}
.ag-ticks svg path{fill:none;stroke:var(--pass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ag-ticks .k{color:var(--muted);letter-spacing:.03em;}
.ag-ticks .v{color:var(--ink);}

.ag-lands{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .7rem;
  margin:1.3rem 0 0;padding-top:.95rem;border-top:1px solid var(--hair);
  margin-top:auto;
}
.ag-lands .ag-arrow{font-family:var(--mono);font-size:.9rem;color:var(--muted);}
.ag-lands b{
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--unknown,var(--muted));
}
.ag-lands.is-ok b{color:var(--pass);}
.ag-lands s{text-decoration:none;font-family:var(--prose);font-size:.92rem;color:var(--muted);}
.ag-cmp-cap{
  margin:1.4rem 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.7;
  color:var(--muted);max-width:74ch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1020px){
  .ag-use li{grid-template-columns:7rem minmax(0,1fr);}
  .ag-use .ag-vs{grid-column:2;max-width:60ch;}
  .ag-cmp{grid-template-columns:1fr;gap:1.2rem;}
  .ag-lands{margin-top:1.3rem;}
}
@media (max-width:820px){
  .ag .fig-scroll svg{min-width:0;}
  .ag-ask-fig .fig-scroll svg{min-width:0;}
  .ag svg.ag-desk{display:none;}
  .ag svg.ag-mob{display:block;}
}
@media (max-width:600px){
  .ag-use li{grid-template-columns:1fr;padding:1rem 0;}
  .ag-use .ag-vs{grid-column:1;}
  .ag-tx{padding:1rem .9rem 1.05rem;}
  .ag-ans{padding-left:.8rem;}
  .ag-ki li{grid-template-columns:3.3rem minmax(0,1fr);gap:.6rem;font-size:.76rem;}
  .ag-log li{grid-template-columns:3.2rem minmax(0,1fr);gap:.1rem .9rem;}
  .ag-log .r{grid-column:2;}
  .ag-col{padding:1.05rem 1rem 1.1rem;}
  .ag-ticks li{grid-template-columns:14px minmax(0,1fr);gap:.1rem .6rem;}
  .ag-ticks .v{grid-column:2;color:var(--muted);}
  .ag-bar{flex-wrap:wrap;gap:.6rem;}
}

/* ==========================================================================
   REDUCED MOTION . the settled state, never a transition
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ag-stale .n-ok,.ag-stale .n-q,.ag-stale .n-star,.ag-stale .ev,
  .ag-stale .bd,.ag-stale .qe,.ag-stale .ag-cs,.ag-log li,.ag-bar-s b{
    transition:none !important;
  }
  .ag-stale .n-q,.ag-stale .n-star{transform:none !important;}
}
html.qa .ag-stale .n-ok,html.qa .ag-stale .ev,html.qa .ag-stale .bd,
html.qa .ag-stale .ag-cs,html.qa .ag-log li,html.qa .ag-bar-s b{transition:none !important;}

/* ==========================================================================
   THEME POLISH
   Geometry and weight only. Colour still comes from tokens.
   ========================================================================== */

/* ---- brutal: hard plates, no radius ---- */
html[data-theme="brutal"] .ag-col,
html[data-theme="brutal"] .ag-tx-win{border:3px solid #000;border-radius:0;box-shadow:8px 8px 0 #000;}
html[data-theme="brutal"] .ag-ticket{border:3px solid #000;border-radius:0;}
html[data-theme="brutal"] .ag-replay{border:2px solid #000;border-radius:0;box-shadow:3px 3px 0 #000;font-weight:700;}
html[data-theme="brutal"] .ag-use li,
html[data-theme="brutal"] .ag-log li{border-bottom:2px solid #000;}
html[data-theme="brutal"] .ag-use,
html[data-theme="brutal"] .ag-log{border-top:2px solid #000;}
html[data-theme="brutal"] .ag-ticks li,
html[data-theme="brutal"] .ag-qs li{border-top:2px solid #000;}
html[data-theme="brutal"] .ag-lands{border-top:2px solid #000;}
html[data-theme="brutal"] .ag-big{
  font-family:"Bricolage Grotesque",var(--sans);font-weight:800;
  text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;
}
html[data-theme="brutal"] .ag-tag::before{border:2px solid #000;}
/* the marker swipe reaches p b globally; the mock surfaces stay clean */
html[data-theme="brutal"] .ag-ki b,html[data-theme="brutal"] .ag-rad b,
html[data-theme="brutal"] .ag-known b,html[data-theme="brutal"] .ag-lands b,
html[data-theme="brutal"] .ag-bar-s b{background:none;box-shadow:none;}

/* ---- terminal: square, flat, phosphor ---- */
html[data-theme="terminal"] .ag-col,
html[data-theme="terminal"] .ag-ticket,
html[data-theme="terminal"] .ag-tx-win,
html[data-theme="terminal"] .ag-replay{border-radius:0;}
html[data-theme="terminal"] .ag-col{box-shadow:inset 0 0 34px rgba(43,255,111,.04);}
html[data-theme="terminal"] .ag-tx-win{box-shadow:0 0 26px rgba(43,255,111,.1);}
html[data-theme="terminal"] .ag-ticket{background:#050807;}
html[data-theme="terminal"] .ag-col-old .ag-tq{font-style:normal;}

/* ---- riso + brutal display face for the one large line ---- */
html[data-theme="riso"] .ag-big{font-family:"Bricolage Grotesque",var(--sans);font-weight:700;}

/* ---- night: a touch more separation from the ground ---- */
html[data-theme="night"] .ag-tx-win{box-shadow:0 18px 40px -24px rgba(0,0,0,.8);}
html[data-theme="night"] .ag-ticket{background:#0B0C10;}