/* ==========================================================================
   exp35 . p35-method.css
   Owned by the /methodology builder. Styles exactly one page:

     method.html   "What "verified" means here."   (PLAN-35-IA §8.7)

   The page is a reference document, not a pitch. It reads top to bottom as
   one argument: what the word means, the six clauses that make it mean that,
   how the evidence gets made, what a record must carry, and where the bar
   stops. The rail in the hero is the only navigation.

   Contract with the shell
     - colour comes ONLY from tokens, so all seven themes follow
       (--paper --card --ink --ink-rgb --ink-60 --ink-40 --muted --hair
        --hair-strong --pass --fail --stale --unknown --signal --radius
        --sans --mono --prose), plus the text-weight variants that
        s35-a11y.css derives (--pass-text --fail-text --stale-text
        --label-text) wherever a state token paints small TEXT.
     - typography obeys the two-layer rule: var(--prose) for every sentence a
       visitor reads, var(--mono) for IDs, clause labels, record fields,
       values and status chips.
     - motion reuses the shell's arrival system: site.js adds .in to
       [data-reveal] and to .fig; strokes are pathLength="1" + .dr, text is
       .fx with --td. No script of its own, and prefers-reduced-motion holds
       the finished frame through site.css.

   SEMANTIC COLOUR (exp33/exp35 rule) — state is never carried by the accent:
     verified / instance fixed              var(--pass)
     violated requirement / open issue      var(--fail)
     evidence stale, withdrawn confidence   var(--stale)
     nothing claimed yet / structure /
       a condition that is not yet met      var(--unknown, var(--muted))
     hairlines                              var(--hair) / var(--hair-strong)
     var(--signal)                          affordance only: the rail, links
                                            and focus. It never paints a
                                            state on this page.

   Every class is prefixed .mp- so nothing can collide with site.css,
   sections.css, agent-sections.css or the s35-* / p35-* sheets.
   ========================================================================== */

/* ==========================================================================
   0. SHARED PAGE FURNITURE
   ========================================================================== */
.mp-sec .section-head{max-width:64ch;}
.mp-k-sep{color:var(--hair-strong);padding:0 .15em;}

/* one prose measure for the whole document */
.mp-body{
  margin:0;max-width:62ch;
  font-family:var(--prose);font-size:1.06rem;line-height:1.65;color:var(--ink-60);
  text-wrap:pretty;
}
.mp-body p{margin:0 0 1.05rem;}
.mp-body p:last-child{margin-bottom:0;}
.mp-body strong,.mp-body b{color:var(--ink);font-weight:600;}
.mp-links{margin:1.7rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;}
.mp-fine{margin:1.1rem 0 0;max-width:70ch;}
.mp-note{
  margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hair);
  max-width:68ch;font-family:var(--mono);font-size:.78rem;line-height:1.75;color:var(--muted);
}
.mp-note b{color:var(--ink);font-weight:500;}

/* an inline mono value inside a sentence */
.mp-mono{font-family:var(--mono);font-size:.88em;color:var(--ink);}

/* ==========================================================================
   1. HERO
   Sparse by contract: kicker, the H1 the plan specifies, one sentence, and
   the rail. The rail is the only affordance up here, so it is the only thing
   allowed to reach for --signal.
   ========================================================================== */
.mp-hero{padding:clamp(2.8rem,5.6vw,4.6rem) 0 clamp(2.4rem,4.4vw,3.6rem);}
.mp-hero h1{max-width:16ch;text-wrap:balance;}
.mp-hero-sub{
  /* rides the sitewide hero-lead scale (2026-08-27 leads-fill-the-column
     ruling) — this page-owned sub must not lag the shell's .hero-sub */
  margin:1.4rem 0 0;max-width:var(--measure-hero,58ch);
  font-family:var(--prose);font-size:clamp(1.2rem,1rem + .6vw,1.38rem);line-height:1.5;
  color:var(--ink-60);text-wrap:pretty;
}
.mp-rail{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:clamp(2rem,3.6vw,3rem) 0 0;
  border-top:1px solid var(--hair-strong);border-left:1px solid var(--hair);
}
.mp-rail a{
  display:flex;align-items:baseline;gap:.7em;min-width:0;
  padding:.72rem .9rem;text-decoration:none;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.72rem;line-height:1.45;letter-spacing:.01em;
  color:var(--ink-60);transition:color .18s ease,background .18s ease;
}
/* --unknown is a STROKE token; at label size it fails the contrast floor in
   four themes. Small text that a human reads takes --label-text, the
   text-weight variant s35-a11y.css derives per theme. */
.mp-rail a i{
  flex:0 0 auto;font-style:normal;font-weight:600;letter-spacing:.08em;
  color:var(--label-text,var(--muted));
}
.mp-rail a span{min-width:0;}
.mp-rail a:hover{color:var(--signal);background:var(--card);}
.mp-rail a:hover i{color:var(--signal);}

/* ==========================================================================
   2. THE SIX CLAUSES
   A clause is a commitment with an enforcement mechanism, so the card is
   built as a two-column record: the label on the left in mono, the sentence
   on the right in prose. Structure only — a clause is not a state, so
   nothing in here is painted --pass / --fail / --stale.
   ========================================================================== */
.mp-clauses{margin:clamp(1.8rem,3vw,2.4rem) 0 0;display:grid;gap:1rem;}
.mp-clause{
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  overflow:hidden;
}
.mp-clause-head{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;
  padding:.6rem clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--label-text,var(--muted));
}
.mp-clause-body{padding:clamp(1.1rem,2vw,1.5rem);}
.mp-clause-h{
  margin:0 0 1rem;max-width:none;
  font-family:var(--prose);font-weight:600;
  font-size:clamp(1.06rem,1.35vw,1.16rem);line-height:1.35;letter-spacing:-.01em;
}
.mp-cp{
  display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
  gap:.3rem clamp(1rem,2vw,2rem);
  padding:.85rem 0;border-top:1px solid var(--hair);
}
.mp-cp:first-of-type{border-top:0;padding-top:0;}
.mp-cp>b{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-text,var(--muted));padding-top:.18em;
}
/* THE MEASURE. Uncapped, this span filled its whole grid cell: 933.2px at
   1440, which renders 116.3 characters per line (mean over the 18 clause
   spans, range 111-122). That is well past the readable band and the copy
   was hard to track back to the next line.

   The cap is written in em, not ch. `ch` is the advance of the digit zero,
   which in Space Grotesk is .813em against an average character advance of
   .497em, so a ch figure reads about 1.64x narrower than the text really is
   -- 933.2px is 71ch but 116 characters. 29em = 468.6px = 56.8 characters
   mean, 52.0 to 60.5 across all 18 spans, every one inside the 50-62 band.
   em rather than rem so the measure tracks this copy's own size.

   The cap is on the span, not on .mp-cp: the row is a two-column grid and
   capping the row would pull its top hairline in off the card edge, breaking
   the rules that separate the three clause parts. Capping the span leaves
   the card's structure alone and only shortens the line. */
.mp-cp>span{
  font-family:var(--prose);font-size:1.01rem;line-height:1.6;color:var(--ink-60);
  text-wrap:pretty;max-width:29em;
}
.mp-cp>span strong{color:var(--ink);font-weight:600;}

/* ==========================================================================
   3. THE SIX STEPS  (carried from the built page; figures unchanged)
   ========================================================================== */
.mp-steps{border-top:1px solid var(--hair);margin-top:clamp(1.6rem,2.8vw,2.4rem);}
.mp-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem 4.5rem;align-items:center;padding:3.4rem 0;border-bottom:1px solid var(--hair);}
.mp-step:last-child{border-bottom:0;}
.mp-step:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
.mp-step:nth-child(even) .mp-copy{order:2;}
.mp-copy{max-width:32rem;}
.mp-num{display:flex;align-items:center;gap:.8rem;margin:0;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--label-text,var(--muted));}
.mp-num::after{content:"";flex:0 0 auto;width:2.2rem;height:1px;background:var(--hair-strong);}
.mp-copy h2{margin:1rem 0 .8rem;}
.mp-copy .lead{margin:0;}
.mp-keep{margin:1.3rem 0 0;font-family:var(--mono);font-size:.74rem;line-height:1.6;letter-spacing:.02em;color:var(--muted);}
.mp-keep b{color:var(--ink);font-weight:500;}
.mp-step .fig{margin:0;}
.mp-plate{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:1.4rem 1.5rem 1rem;}
.mp-plate .fig-scroll{padding-bottom:.3rem;}
.mp-fig text{font-size:12.5px;}
.mp-fig .lbl{font-size:11px;letter-spacing:.09em;}
.mp-fig .big{font-size:15px;}
.mp-flow svg,.mp-wide svg{max-width:1000px;margin:0 auto;}
.mp-flow text{font-size:11.5px;}
.mp-flow .lbl{font-size:10.5px;}
.mp-flow .big{font-size:15px;}
.mp-hint{display:none;margin:.6rem 0 0;}
.mp-after{margin:2rem 0 0;max-width:62ch;}

/* ==========================================================================
   4. TWO-COLUMN FIELD LISTS  (change evidence, agent policy)
   Record fields are mono. The marker carries no state: a field list is a
   specification of what must be present, not a claim that it is.
   ========================================================================== */
.mp-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:clamp(1.8rem,3vw,2.4rem) 0 0;
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  overflow:hidden;
}
.mp-col{padding:clamp(1.1rem,2.2vw,1.7rem);min-width:0;}
.mp-col+.mp-col{border-left:1px solid var(--hair-strong);}
.mp-col-h{
  margin:0 0 .3rem;max-width:none;
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);
}
.mp-col-sub{
  margin:0 0 1.1rem;
  font-family:var(--mono);font-size:.7rem;line-height:1.6;letter-spacing:.02em;
  color:var(--label-text,var(--muted));
}
.mp-list{list-style:none;margin:0;padding:0;max-width:none;}
.mp-list li{
  position:relative;padding:.32rem 0 .32rem 1.15rem;
  font-family:var(--mono);font-size:.86rem;line-height:1.55;color:var(--ink-60);
}
.mp-list li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:.42rem;height:1px;background:var(--hair-strong);
}
.mp-list li b{color:var(--ink);font-weight:500;}
/* A prohibition is a rule, not a violated state, so the "may not" marker is
   NOT --fail. It is a neutral cross in --unknown. */
.mp-list.is-no li::before{
  content:"\00d7";left:0;top:0;
  width:auto;height:auto;background:none;
  font-family:var(--mono);font-size:.92rem;line-height:1.68;
  color:var(--label-text,var(--muted));
}

/* the kinds strip under the change-evidence columns */
.mp-kinds{
  margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;
}
.mp-kind{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);
  border:1px solid var(--hair-strong);border-radius:calc(var(--radius) - 3px);
  padding:.18rem .5rem;
}
.mp-kind-lab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label-text,var(--muted));margin-right:.4rem;
}

/* ==========================================================================
   5. STALE VERSUS INVALIDATED
   Three states, three tokens, one row each. This is the sharpest place on
   the page where colour is a contract: the middle row is --stale and it is
   deliberately neither of its neighbours.
   ========================================================================== */
.mp-states{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;
  border-top:1px solid var(--hair-strong);
}
.mp-state{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.5rem clamp(1.2rem,2.6vw,2.6rem);
  padding:clamp(1rem,2vw,1.4rem) 0;border-bottom:1px solid var(--hair);
}
.mp-state-k{display:flex;align-items:flex-start;gap:.6rem;min-width:0;}
.mp-state-m{
  flex:0 0 auto;width:.62rem;height:.62rem;margin-top:.34rem;border-radius:50%;
  background:var(--unknown,var(--muted));
}
/* Three tokens AND three forms. In the terminal and acid palettes --stale and
   --fail sit in the same hue family, so colour alone would not separate a
   withdrawn claim from a contradicted one. Filled disc = verified, open ring =
   stale (a question), filled square = violated (an answer). */
.mp-state.is-pass .mp-state-m{background:var(--pass);}
.mp-state.is-stale .mp-state-m{
  background:none;border:2px solid var(--stale,var(--muted));
}
.mp-state.is-fail .mp-state-m{background:var(--fail);border-radius:1px;}
.mp-state-n{
  margin:0;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;color:var(--label-text,var(--muted));
}
.mp-state.is-pass .mp-state-n{color:var(--pass-text,var(--pass));}
.mp-state.is-stale .mp-state-n{color:var(--stale-text,var(--stale));}
.mp-state.is-fail .mp-state-n{color:var(--fail-text,var(--fail));}
.mp-state-d{
  margin:0;font-family:var(--prose);font-size:1.01rem;line-height:1.6;color:var(--ink-60);
  text-wrap:pretty;
}
.mp-state-d b{color:var(--ink);font-weight:600;}
.mp-state-d .mp-state-cost{
  display:block;margin-top:.5rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);
}

/* the one-line summary under the three states */
.mp-cut{
  margin:clamp(1.4rem,2.4vw,2rem) 0 0;max-width:46ch;
  font-family:var(--prose);font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.35;
  font-weight:600;letter-spacing:-.015em;color:var(--ink);
}

/* ==========================================================================
   6. THE CLOSURE LADDER  (plan §2.4)
   Two rungs, never merged. Rung 1 is earned by one passing reproducer and is
   --pass. Rung 2 is a CONDITION, not a claim: it stays --unknown and its
   frame is dashed until all four inputs are in.
   ========================================================================== */
.mp-rungs{margin:clamp(1.8rem,3vw,2.4rem) 0 0;display:grid;gap:1rem;}
.mp-rung{
  display:grid;grid-template-columns:minmax(0,24rem) auto minmax(0,1fr);
  align-items:center;gap:clamp(1rem,2.4vw,2rem);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
}
.mp-rung.is-open{border-style:dashed;}
.mp-rung-n{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.mp-in{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:.34rem;}
.mp-in li{
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;color:var(--ink-60);
}
.mp-arw{width:3.4rem;height:.7rem;flex:0 0 auto;}
.mp-arw path{fill:none;stroke:var(--hair-strong);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.mp-out{
  margin:0;font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.45;
}
.mp-out-lab{
  display:block;margin-bottom:.3rem;
  font-size:.66rem;font-weight:500;letter-spacing:.16em;color:var(--label-text,var(--muted));
}
.mp-rung .mp-out{color:var(--pass-text,var(--pass));}
.mp-rung.is-open .mp-out{color:var(--label-text,var(--muted));}
.mp-rung-note{
  margin:.9rem 0 0;font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--muted);
  max-width:66ch;
}

/* ==========================================================================
   7. THE RECORD  (a real known issue, measured against the plan's field list)
   Left column: what a complete defect record must carry. Right column: what
   this record actually carries. A field the record does not carry is marked
   --stale, because an incomplete record is exactly a withdrawn claim.
   ========================================================================== */
.mp-rec{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  overflow:hidden;
}
.mp-rec-head{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;align-items:baseline;
  padding:.6rem clamp(1rem,2vw,1.5rem);border-bottom:1px solid var(--hair-strong);
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--label-text,var(--muted));
}
.mp-rec-head b{color:var(--ink);font-weight:600;}
.mp-rec-src{text-transform:none;letter-spacing:.04em;}
.mp-rec-row{
  display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);
  gap:.3rem clamp(1.2rem,2.6vw,2.4rem);
  padding:.7rem clamp(1rem,2vw,1.5rem);border-top:1px solid var(--hair);
}
.mp-rec-row:first-of-type{border-top:0;}
.mp-rec-f{
  margin:0;font-family:var(--mono);font-size:.76rem;line-height:1.6;letter-spacing:.02em;
  color:var(--label-text,var(--muted));
}
.mp-rec-v{
  margin:0;font-family:var(--mono);font-size:.82rem;line-height:1.65;color:var(--ink);
  overflow-wrap:anywhere;
}
.mp-rec-v.is-gap{color:var(--stale-text,var(--stale));}
.mp-rec-foot{
  padding:.9rem clamp(1rem,2vw,1.5rem);border-top:1px solid var(--hair-strong);
  font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--muted);
}
.mp-rec-foot b{color:var(--ink);font-weight:500;}

/* ==========================================================================
   8. THE LIMITS TABLE
   ========================================================================== */
.mp-tscroll{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hair-strong);border-radius:var(--radius);background:var(--card);
}
.mp-tbl{border-collapse:collapse;width:100%;min-width:44rem;}
.mp-tbl th,.mp-tbl td{
  text-align:left;vertical-align:top;padding:.8rem clamp(.8rem,1.6vw,1.2rem);
  border-bottom:1px solid var(--hair);
}
.mp-tbl thead th{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label-text,var(--muted));
  border-bottom:1px solid var(--hair-strong);white-space:nowrap;
}
.mp-tbl tbody tr:last-child td{border-bottom:0;}
.mp-tbl .mp-t-class{
  font-family:var(--mono);font-size:.82rem;line-height:1.55;color:var(--ink);width:16rem;
}
.mp-tbl .mp-t-cov{width:10rem;}
.mp-cov{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;color:var(--label-text,var(--muted));
}
.mp-cov.is-yes{color:var(--pass-text,var(--pass));}
.mp-cov.is-part{color:var(--stale-text,var(--stale));}
.mp-tbl .mp-t-note{
  font-family:var(--prose);font-size:.98rem;line-height:1.55;color:var(--ink-60);
}

/* ==========================================================================
   9. THE RECEIPT AND THE CLOSE  (carried from the built page)
   ========================================================================== */
.mp-receipt{margin-top:2.4rem;max-width:720px;background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:1.4rem 1.5rem;}
.mp-receipt .kicker{margin:0;}
.mp-receipt p.mp-miss{margin:.9rem 0 0;font-size:1.02rem;line-height:1.55;}
.mp-receipt .cta-quiet{margin-top:1.1rem;}
.mp-signed{display:flex;align-items:center;gap:1.1rem;margin-top:2.4rem;}
.mp-signed svg{height:44px;width:auto;overflow:visible;flex:0 0 auto;}
.mp-signed path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mp-signed .fine{margin:0;}

/* ==========================================================================
   10. RESPONSIVE — one pass at 1440, stacks clean at 390
   ========================================================================== */
@media (max-width:1020px){
  .mp-rail{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mp-rec-row{grid-template-columns:minmax(0,14rem) minmax(0,1fr);}
}
@media (max-width:900px){
  .mp-step,.mp-step:nth-child(even){grid-template-columns:1fr;gap:1.6rem;padding:2.8rem 0;}
  .mp-step:nth-child(even) .mp-copy{order:0;}
  .mp-copy{max-width:none;}
  .mp-two{grid-template-columns:1fr;}
  .mp-col+.mp-col{border-left:0;border-top:1px solid var(--hair-strong);}
  .mp-rung{grid-template-columns:1fr;gap:.9rem;}
  .mp-arw{transform:rotate(90deg);width:2.4rem;}
  .mp-state{grid-template-columns:1fr;gap:.5rem;}
  .mp-cp{grid-template-columns:1fr;gap:.35rem;}
  .mp-rec-row{grid-template-columns:1fr;gap:.25rem;}
  .mp-rec-f{font-size:.72rem;}
}
@media (max-width:760px){
  .mp-rail{grid-template-columns:1fr;}
  .mp-plate{padding:.9rem .5rem .4rem;}
  .mp-fig text{font-size:15.5px;}
  .mp-fig .lbl{font-size:13px;letter-spacing:.07em;}
  .mp-fig .big{font-size:18px;}
  .mp-hint{display:block;}
}
@media (max-width:430px){
  .mp-hero h1{max-width:none;}
  .mp-list li{font-size:.82rem;}
  .mp-in li{font-size:.72rem;letter-spacing:.1em;}
  .mp-rec-v{font-size:.78rem;}
  /* site.css sets .btn{white-space:nowrap}. In the terminal theme at 320
     "Prove a public repository" holds the button at 332.72px inside a 272px
     column and scrolled the whole page sideways by 37px. A CTA that wraps to
     two lines on a 320px phone is correct; a page that scrolls sideways is
     not. Measured after: scrollWidth === clientWidth at 320 / 360 / 390 in
     all eight themes. */
  #start .btn{white-space:normal;}
}