/* ==========================================================================
   exp35 . PAGE stylesheet for /agents  (PLAN-35-IA §8.3)
   Owned by the agents-page builder. Tokens only, no hard-coded colours,
   all 7 themes.

   Everything already built in assets/site.css, assets/exp33.css and
   assets/agent-sections.css is reused unchanged: the .ag scope, the figure
   type layers (.agn / .ags / .lbl / .tstale), the return blocks
   (.ag-blk / .ag-h / .ag-rad), the signature type (.ag-big / .ag-turn), the
   arrival ink (.dr / .fx / [data-reveal]) and the .fig chassis. This file
   adds only what the page's own shapes need, every class prefixed .p35- so
   no section builder can collide with it.

   It is linked LAST, after themes.css and hdr-event.css, so no rule here may
   out-rank a theme rule: themes still win. That is why states are written as
   var(--stale,var(--fail)) / var(--unknown,var(--muted)) rather than as
   fixed values, exactly as the shipped section stylesheets do. The two
   fallbacks exist because assets/theme-verified.css, which defines --stale
   and --unknown for every theme, is loaded on index.html only.

   SEMANTIC COLOUR, as applied on this page:
     --pass     verified                CHANGE-1042 "Verified", its evidence row
     --fail     violated                the known issue's "Violated" chip
     --stale    changed, must re-prove   the ? and STALE marks in section 05
     --unknown  nothing claimed yet      dim structure in both figures
     --signal   affordance ONLY          links, the two CTA controls. Never a
                                         state, anywhere on this page.

   LAYOUT MODEL. Two families only:
     .p35-row    sections 01 to 05 . copy left, one artifact right
     .p35-wide   sections 06 to 08 . full measure, because a boundary, a
                 signature and an interface are statements, not exhibits
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */
/* The plan wants the hero sparse. One kicker, one headline, one sentence,
   two controls. (Its old 66ch sub-widener was an opt-out from the shell's
   narrow measure; it never beat the terminal fork's (0,2,1) cap and the
   2026-08-27 sitewide --measure-hero carries the width now — removed.) */
.p35-hero h1{max-width:17ch;}


/* ==========================================================================
   2. THE TWO SECTION LAYOUTS
   ========================================================================== */
.p35-row{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,4vw,4.4rem);
  align-items:start;
}

/* the copy column. .lead keeps its own colour and size from site.css; the
   paragraphs under it are one tier quieter, at the shell's reading size. */
.p35-copy .section-head{margin-bottom:1.5rem;}
/* the child combinator matters: the lead lives inside .section-head and must
   keep its own larger size from site.css. Only the paragraphs under the head
   drop to reading size. (The old 52ch head/lead caps were the narrow-measure
   era's numbers; the craft layer's rules outranked them and the split column
   itself is narrower than the 2026-08-27 measure — removed.) */
.p35-copy > p{max-width:54ch;font-size:1.05rem;line-height:1.62;color:var(--ink-60);}
.p35-copy > p:last-child{margin-bottom:0;}

/* the artifact column */
.p35-art{min-width:0;}
.p35-art > :first-child{margin-top:.35rem;}

/* the full-measure sections */
.p35-head-wide{max-width:58ch;margin-bottom:1.5rem;}
.p35-copy-wide p{max-width:64ch;font-size:1.05rem;line-height:1.62;color:var(--ink-60);}
.p35-copy-wide p:last-child{margin-bottom:0;}

/* the quiet link that closes a column */
.p35-link{margin:1.5rem 0 0;line-height:1;}
/* the wide variant can carry two quiet links (§08 pairs the product cross-ref
   with the methodology route); flex spaces them and changes nothing for one */
.p35-link-wide{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;}


/* ==========================================================================
   3. FIGURES  (sections 01 and 05)
   ========================================================================== */
/* No .fig-scroll: site.css floors a scrolling figure at 660px, which would
   put a horizontal scrollbar inside a 460px column. These two figures are
   drawn narrow enough to scale instead. */
.p35-fig{margin:0;}
/* drawn at 400 units wide and read at roughly 340 to 500 CSS px, so the type
   is set a little above the shell default to land near 11px on a phone. */
.p35-fig text{font-size:12.4px;}
.p35-fig .lbl{font-size:10.8px;letter-spacing:.1em;}
.ag .p35-fig .ags{font-size:10.6px;}

/* structure that carries no claim. Written with .st in the selector so it
   out-ranks themes.css's own .fig .st repaint, the same technique
   agent-sections.css uses for its state strokes. */
.p35-fig .st.p35-dim{stroke:var(--unknown,var(--muted));stroke-opacity:.75;}

/* the two stale marks: a ? on what may no longer be true, a * on what moved,
   and the word STALE on evidence that must run again. .tstale supplies the
   fill; these rules only set the size. */
.p35-fig .p35-mark{font-family:var(--mono);font-size:15px;font-weight:600;}
.p35-fig .p35-word{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;fill:var(--stale-text,var(--stale,var(--fail)));}


/* ==========================================================================
   4. THE RETURN BLOCK  (section 02)
   What Proof hands back before the first edit. A document, not a screenshot
   of a product surface: real markup, so every theme restyles it.
   ========================================================================== */
.p35-ret{
  margin:0;padding:1.15rem 1.25rem 1.2rem;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.p35-ret-h{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .1rem;
}
/* the three identifiers. No invented titles hang off them: the plan supplies
   the ids and nothing else, so nothing else is shown. */
.p35-ids{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .55rem;margin:0;
  font-family:var(--mono);font-size:.8rem;line-height:1.7;letter-spacing:.02em;
  color:var(--ink);
}
.p35-ret-cap{
  margin:1.25rem 0 0;padding-top:.9rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--muted);
}
.p35-ret-cap i{font-style:normal;color:var(--ink);}


/* ==========================================================================
   5. RECORDS  (sections 03 and 04)
   One chassis, two records: an open known issue and a verified change.
   ========================================================================== */
.p35-rec{
  margin:0;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.p35-rec-h{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--hair);
}
.p35-id{
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  color:var(--ink);
}
.p35-state{
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;
}
.p35-state svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* state, not decoration: a violated requirement is --fail, a verified change
   is --pass. Nothing else on either record carries a hue. */
/* the -text variants come from assets/s35-a11y.css, which derives a
   text-weight luminance per theme for state colour used as words. The
   fallback keeps the mark correct if that sheet is ever absent. */
.p35-state.is-bad{color:var(--fail-text,var(--fail));}
.p35-state.is-ok{color:var(--pass-text,var(--pass));}

.p35-rows{margin:0;padding:.35rem 1.25rem 1.1rem;}
.p35-row-f{
  display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.25rem 1.4rem;
  align-items:baseline;padding:.72rem 0;border-top:1px solid var(--hair);
}
.p35-row-f:first-child{border-top:0;}
.p35-row-f dt{
  margin:0;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.p35-row-f dd{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink);}
.p35-row-f dd b{font-weight:600;}
.p35-mono{font-family:var(--mono);font-size:.86em;letter-spacing:.04em;}
.p35-row-f.is-ok dd{color:var(--pass-text,var(--pass));}

/* ---------- the provenance label on an invented record ----------
   CHANGE-1042 in section 04 is the plan's own specimen. A source comment is
   not a label, so the card says it in reader-visible copy, in the house
   convention used on audit.html ("Example, hand drawn" / "Counts are
   illustrative"), and points at a record that is real.
   The tag is --unknown: provenance is not a state, and it must never take
   --signal, which is reserved for affordances. */
.p35-eg{
  margin:0;padding:.75rem 1.25rem .85rem;
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--ink-60);
}
.p35-eg-t{
  display:inline-block;margin-right:.7em;
  font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--unknown,var(--muted));
  border-bottom:1px solid currentColor;
}
.p35-eg a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.p35-eg a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.p35-eg a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* the plan's evidence standard, quoted under the known issue */
.p35-say{
  margin:1.4rem 0 0;padding-left:1rem;
  border-left:2px solid var(--hair-strong);
  font-family:var(--prose);font-size:1.12rem;line-height:1.42;
  font-weight:500;letter-spacing:-.015em;color:var(--ink);
}


/* ==========================================================================
   6. THE APPROVAL BOUNDARY  (section 06)
   A list, not a diagram, so it stays legible at 390 with no second SVG.
   The dashed rule between the columns IS the boundary.
   ========================================================================== */
.p35-bound{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.6rem);
  margin-top:2.6rem;
}
.p35-bound-col.is-human{
  border-left:1px dashed var(--hair-strong);
  padding-left:clamp(1.6rem,3.4vw,3.6rem);
}
.p35-bound-h{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--unknown,var(--muted));margin:0 0 .9rem;
}
/* the human side is ink, because it is the side that carries the authority.
   Neither side is --pass: an action is not a verified thing. */
.p35-bound-col.is-human .p35-bound-h{color:var(--ink);}
.p35-bound-list{list-style:none;margin:0;padding:0;}
.p35-bound-list li{
  display:flex;align-items:baseline;gap:.7rem;
  padding:.62rem 0;border-top:1px solid var(--hair);
  font-size:1.02rem;line-height:1.45;color:var(--ink-60);
}
.p35-bound-list li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;
  background:var(--hair-strong);transform:translateY(-2px);
}
.p35-bound-col.is-human .p35-bound-list li{color:var(--ink);}


/* ==========================================================================
   7. YOUR AGENT, AND THE SIGNATURE  (section 07)
   ========================================================================== */
.p35-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0;}
.p35-chip{
  display:inline-block;padding:.34rem .72rem;
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--ink);
}
.p35-chips-cap{
  margin:.85rem 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.7;
  color:var(--muted);
}
/* .ag-big already carries the type and the two-clause turn. It is capped at
   32ch for the shorter lines elsewhere; this one is a full sentence pair. */
.p35-sig{margin:3.2rem 0 0;max-width:44ch;}


/* ==========================================================================
   8. THE MECHANISM  (section 08)
   The page's densest block, and the last one, per the plan's scroll ramp.

   THE TRY-OUT PLATE RIDES THE HERO (founder 2026-08-27, superseding the
   2026-08-26 head band): the live endpoint is the second beat of the page,
   mounted in the hero right under the CTA row, and #connect moved with it
   so every cross-page link lands there. Section 08 keeps the wide head and
   the architecture columns. MCP is now named in the open (hero, section
   copy); the plate stays the one place the endpoint itself is printed.
   ========================================================================== */

/* the try-out plate. Chassis is .p35-ret (card, mono header, bordered cap);
   this adds only the offer sentence and the endpoint well. #connect is the
   stable anchor other pages land on; the offset clears the sticky bar. */
.p35-mcp{scroll-margin-top:92px;}
/* hero mount: the plate is prominent but not a billboard — capped at the
   hero-sub's reading column, a step more inner air than the card default */
.p35-mcp-hero{margin:2.2rem 0 0;max-width:720px;padding:1.3rem 1.4rem 1.35rem;}
.p35-mcp-p{margin:0 0 .9rem;font-size:.98rem;line-height:1.55;color:var(--ink);}
/* the endpoint, as a copyable line: a paper well inside the card, the page's
   prompt glyph outside the selection, and user-select:all so one click takes
   the whole URL. overflow-wrap keeps 390px honest without hyphens. */
.p35-mcp-url{
  display:flex;align-items:baseline;gap:.6rem;
  margin:0;padding:.66rem .85rem .72rem;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
}
.p35-mcp-ps{
  flex:0 0 auto;font-family:var(--mono);font-size:.78rem;line-height:1.5;
  color:var(--muted);user-select:none;-webkit-user-select:none;
}
.p35-mcp-url code{
  font-family:var(--mono);font-size:.78rem;line-height:1.5;letter-spacing:.01em;
  color:var(--ink);min-width:0;overflow-wrap:anywhere;
  user-select:all;-webkit-user-select:all;
}
/* the seeded-branch caveat is its own line of the cap, not a trailing clause
   left to the wrap point. */
.p35-mcp .p35-ret-cap .portal-note{display:block;margin:.15rem 0 0;}

.p35-arch{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,2.6vw,2.4rem);
  margin-top:2.4rem;
}
.p35-surf{
  padding:1.15rem 1.25rem 1.25rem;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
}
.p35-surf-h{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .2rem;
}
.p35-surf-s{
  font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--muted);
  margin:0 0 .9rem;
}
.p35-surf-list{list-style:none;margin:0;padding:0;}
.p35-surf-list li{
  display:flex;align-items:baseline;gap:.65rem;
  padding:.44rem 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.8rem;line-height:1.55;color:var(--ink);
}
.p35-surf-list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;
  background:var(--hair-strong);transform:translateY(-2px);
}
/* the one thing the action surface does NOT contain. --unknown, because it is
   the absence of a capability, not a failure. */
.p35-surf-no{
  margin:1rem 0 0;padding-top:.85rem;border-top:1px dashed var(--hair-strong);
  font-size:.96rem;line-height:1.5;color:var(--ink);
}

.p35-fields{margin:1.6rem 0 0;padding:0;border-top:1px solid var(--hair);}
.p35-field{
  display:grid;grid-template-columns:13rem minmax(0,1fr);gap:.3rem 2.2rem;
  align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--hair);
}
.p35-field dt{
  margin:0;font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
}
.p35-field dd{margin:0;max-width:62ch;font-size:1rem;line-height:1.58;color:var(--ink-60);}

/* the honest note. It is not fine print: it says in visible copy that this
   section describes a shape and not a published API. */
.p35-note{
  margin:1.6rem 0 0;max-width:70ch;
  font-family:var(--mono);font-size:.76rem;line-height:1.75;color:var(--muted);
}


/* ==========================================================================
   9. CLOSE
   Recomposed 2026-08-26: the old .cta-row scattered pctl / caveat / demo
   across one line and let the quiet link float. The group is now an
   inline-grid so text-align:center on .p35-close-in centers the COMPOSED
   block, not each fragment: the portal control (primary) with its caveat as
   fine print directly under its own left edge, the demo ask (secondary)
   centered beside the control, and the quiet link on the page axis below.
   ========================================================================== */
.p35-close-in{text-align:center;}
.p35-close-h{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;max-width:22ch;margin:0 auto;}
.p35-close-p{margin:1rem auto 0;max-width:52ch;font-size:1.05rem;line-height:1.6;color:var(--ink-60);}
.p35-close-cta{
  display:inline-grid;grid-template-columns:auto auto;
  column-gap:1.5rem;row-gap:.6rem;
  align-items:center;justify-items:start;
  margin-top:1.9rem;text-align:left;
}
.p35-close-cta .pctl{grid-column:1;grid-row:1;}
.p35-close-cta .btn{grid-column:2;grid-row:1;}
.p35-close-note{grid-column:1;grid-row:2;margin:0;line-height:1.5;}
.p35-close-note .portal-note{margin-left:0;}
/* auto margins: the shell caps every <p> at the prose measure, and a capped
   box with zero side margins parks the quiet link left of the page axis —
   the exact float the recomposition removes. */
.p35-close-u{margin:1.5rem auto 0;line-height:1;}


/* ==========================================================================
   10. RESPONSIVE
   Reads in one pass at 1440, stacks cleanly at 390, no horizontal scroll.
   ========================================================================== */
@media (max-width:1080px){
  .p35-row{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:2.4rem;}
  .p35-field{grid-template-columns:11rem minmax(0,1fr);gap:.3rem 1.6rem;}
}
@media (max-width:920px){
  .p35-row{grid-template-columns:1fr;gap:2.2rem;}
  .p35-copy .section-head,.p35-copy p,.p35-copy .lead{max-width:62ch;}
  .p35-art{max-width:620px;}
  .p35-arch{grid-template-columns:1fr;}
  /* the boundary turns from a rule between two columns into a rule under the
     first one. It is still one line, still dashed, still the boundary. */
  .p35-bound{grid-template-columns:1fr;gap:1.6rem;}
  .p35-bound-col.is-human{
    border-left:0;padding-left:0;
    border-top:1px dashed var(--hair-strong);padding-top:1.6rem;
  }
}
@media (max-width:640px){
  /* the machine control is the only element on this page with a mono label
     long enough to overflow 390. It wraps instead of scrolling the page. */
  .cta-row .pctl{
    white-space:normal;align-items:flex-start;text-align:left;
    padding:.7rem 1rem .8rem .95rem;line-height:1.55;
  }
  .cta-row .pctl .pctl-lamp{margin-top:.55rem;}
  .cta-row .pctl .pctl-key{margin-top:.14rem;}
  /* the close group stacks: control, its caveat, then the secondary — the
     caveat stays glued to the control it qualifies. */
  .p35-close-cta{
    display:grid;grid-template-columns:1fr;justify-items:stretch;
    width:100%;row-gap:.7rem;
  }
  .p35-close-cta .pctl{grid-column:1;grid-row:1;}
  .p35-close-note{grid-column:1;grid-row:2;justify-self:start;}
  .p35-close-cta .btn{grid-column:1;grid-row:3;margin-top:.45rem;}
  .p35-eg{padding:.7rem 1rem .8rem;}
  .p35-row-f{grid-template-columns:1fr;gap:.2rem;padding:.62rem 0;}
  .p35-field{grid-template-columns:1fr;gap:.25rem;}
  .p35-rec-h{padding:.75rem 1rem;}
  .p35-rows{padding:.3rem 1rem 1rem;}
  .p35-ret,.p35-surf{padding:1rem 1rem 1.05rem;}
  .p35-sig{max-width:none;}
  .p35-say{font-size:1.06rem;}
}

/* Reduced motion is handled globally in site.css: .dr holds its final frame
   and .fx holds full opacity, so every figure and record on this page settles
   on one legible frame with no extra rule here. */