/* ==========================================================================
   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. The sentence is long (it lists six things the agent gets),
   so the measure opens past the shell's 60ch or it sets in five ragged
   lines. */
.p35-hero .hero-sub{max-width:66ch;}
.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;max-width:52ch;}
/* 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. */
.p35-copy > p{max-width:54ch;font-size:1.05rem;line-height:1.62;color:var(--ink-60);}
.p35-copy .lead{max-width:52ch;}
.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;}
.p35-link-wide{margin-top:2.4rem;}


/* ==========================================================================
   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.
   ========================================================================== */
.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
   ========================================================================== */
.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{margin-top:1.8rem;}
.p35-close-u{margin:1.15rem 0 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;}
  .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. */