/* ==========================================================================
   exp35 . p35-pubproof.css
   Owned by the /public-proof builder. Styles exactly one page:

     public-proof.html   PLAN-35-IA §8.4  "Evidence you can inspect.
                                            Misses included."

   THE PAGE'S GOVERNING RULE (plan §8.4): do not turn this into a vanity
   metrics page; lead with inspectability. That rule is enforced here in CSS
   as well as in copy: the largest typographic objects on the page are the
   DOORS (things a visitor can open) and the RECORDS (things a visitor can
   read). The three campaign counts get one quiet mono line, smaller than the
   body copy around them, and no cell, band or divider of their own.

   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 --signal --pass --fail --stale --unknown --radius
        --sans --mono --prose).
     - typography obeys the two-layer rule: var(--prose) for every sentence a
       visitor reads, var(--mono) for IDs, record labels, artifact paths and
       status chips.
     - motion reuses the shell's arrival system: site.js adds .in to
       [data-reveal]; strokes are pathLength="1" + .dr, text is .fx. No script
       of its own.

   SEMANTIC COLOUR (exp33/exp35 contract) — state is never carried by the
   accent:
     verified / fixed / covered      var(--pass)
     violated / escaped / uncovered  var(--fail)
     unproven, unnamed, structural   var(--unknown, var(--muted))
     hairlines and rules             var(--hair) / var(--hair-strong)
     var(--signal)                   affordance only. On this page it appears
                                     on the doors, the quiet links and the CTA,
                                     and it never paints a state.

   Every class is prefixed .pp- so nothing can collide with site.css,
   graph-sections.css, agent-sections.css or any s35-*.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ADDITIVE TOKEN DEFAULTS
   --stale and --unknown are part of the exp35 token contract but are only
   defined in theme-verified.css, which this page does not load (it is an
   index-only stylesheet). The two values below are copied from that file's
   §0 defaults verbatim, including the terminal re-key, so the contract holds
   here without pulling an index-only sheet onto this page. Both are mid-tone
   on purpose: 3.7:1 on the paper ground, 4.2:1 on the night ground.
   -------------------------------------------------------------------------- */
:root{
  --stale:#AF7317;
  --unknown:#7E7E79;
}
html[data-theme="terminal"]{--unknown:#6FAE86;}

/* ==========================================================================
   1. HERO . the doors
   The first object under the H1 is not a number. It is six things a visitor
   can open, in a grid, each one a real artifact on a public host.
   ========================================================================== */
.pp-hero{padding-bottom:clamp(2.4rem,4vw,3.4rem);}
.pp-hero .hero-copy h1{max-width:22ch;}
.pp-hero .hero-sub{max-width:62ch;}

.pp-open{
  list-style:none;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.4vw,1.1rem);
}
.pp-door{display:flex;min-width:0;}
.pp-door > a{
  display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0;
  padding:1.05rem 1.15rem 1.15rem;
  background:var(--card);
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
@media (hover:hover){
  .pp-door > a:hover{
    border-color:var(--signal);transform:translateY(-2px);
    box-shadow:0 22px 44px -32px rgba(var(--ink-rgb),.45);
  }
  .pp-door > a:hover .pp-door-t{color:var(--signal);}
}
@media (prefers-reduced-motion:reduce){
  .pp-door > a,.pp-door > a:hover{transition:none;transform:none;}
}
.pp-door-k{
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pp-door-t{
  font-family:var(--mono);font-size:.92rem;font-weight:600;letter-spacing:0;
  color:var(--ink);overflow-wrap:anywhere;transition:color .28s ease;
}
.pp-door-t::after{content:" \2197";color:var(--signal);}
.pp-door-s{
  font-family:var(--prose,var(--sans));font-size:.94rem;line-height:1.5;
  color:var(--ink-60);text-wrap:pretty;
}
.pp-hero-fine{margin:1.4rem 0 0;text-align:center;}

/* ==========================================================================
   2. SHARED PARTS
   ========================================================================== */

/* the counts. Deliberately small: an index to the artifacts, never a headline.
   One mono line, no cells, no dividers, no band. */
.pp-index{
  display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:1.6rem 0 .4rem;max-width:none;
  font-family:var(--mono);font-size:.78rem;line-height:1.7;letter-spacing:.02em;
  color:var(--muted);
}
.pp-index b{
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
  padding-right:.35em;
}

/* a label/value stack used for the portal surfaces and the ledger's link kinds */
.pp-rows{
  margin:clamp(1.4rem,2.4vw,2rem) 0 0;
  border-top:1px solid var(--hair);
}
.pp-rows > div{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.2rem 1.6rem;
  padding:.85rem 0 .9rem;border-bottom:1px solid var(--hair);
}
.pp-rows dt{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.pp-rows dd{
  margin:0;font-size:1rem;line-height:1.55;color:var(--ink-60);max-width:60ch;
}

/* the standing rule, set as a rule and not as a poster */
.pp-rule{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--hair-strong);max-width:none;
  font-family:var(--mono);font-size:1.06rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink);
}
.pp-rule-s{margin:.35rem 0 0;font-size:1rem;line-height:1.55;color:var(--ink-60);max-width:56ch;}

.pp-after{margin:clamp(1.4rem,2.4vw,1.9rem) 0 0;max-width:60ch;font-size:1.05rem;line-height:1.6;}
.pp-links{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:clamp(1.4rem,2.4vw,1.9rem) 0 0;}

/* ==========================================================================
   3. SECTION 01 . the dashboard
   ========================================================================== */
.pp-shot{margin:0;}
.pp-shot .frame-cap{max-width:66ch;}
/* Section 02 mounts a second real capture above the chain. It needs the
   breathing room the dashboard figure gets from its section-head, and the
   bolded counts in both captions must read as ink, not as muted caption
   grey, because they are the numbers the reader is asked to check. */
#chain .pp-shot{margin:0 0 2.2rem;}
.pp-shot .frame-cap b{color:var(--ink);font-weight:600;}

/* ==========================================================================
   4. SECTION 02 . the chain
   Seven steps down one rail. Every step names the artifact it is, and the
   artifact is a link, because that is the whole argument of the section.
   ========================================================================== */
.pp-chain{margin:0;padding:0;list-style:none;position:relative;max-width:880px;}
.pp-chain::before{
  content:"";position:absolute;left:15px;top:.6rem;bottom:.6rem;width:1px;
  background:var(--hair-strong);
}
.pp-step{
  position:relative;display:grid;
  grid-template-columns:32px minmax(0,1fr);gap:0 1.3rem;
  padding:0 0 1.05rem;
}
.pp-step:last-child{padding-bottom:0;}
.pp-step > .pp-dot{
  grid-row:1 / span 2;align-self:start;
  width:31px;height:31px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--hair-strong);border-radius:50%;
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--ink-60);
  font-variant-numeric:tabular-nums;
}
.pp-step.is-ok > .pp-dot{border-color:var(--pass);color:var(--pass);}
.pp-step.is-bad > .pp-dot{border-color:var(--fail);color:var(--fail);}

.pp-rec{
  min-width:0;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:.85rem 1.1rem .95rem;
}
.pp-stage{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin:0 0 .4rem;max-width:none;
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pp-id{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.03em;
  text-transform:none;color:var(--ink);overflow-wrap:anywhere;
}
/* The unmodified chip is the CANDIDATE state (a requirement still at
   status: review). It carries no state colour of its own: it inherits from
   .pp-stage, its parent, so the per-theme text-contrast corrections in
   s35-a11y.css that land on .pp-stage reach the chip too. .is-ok / .is-bad
   below are the only two states that claim a colour. */
.pp-chip{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.14rem .42rem;border-radius:calc(var(--radius) - 3px);
  font-size:.6rem;font-weight:600;letter-spacing:.14em;
  color:inherit;border:1px solid currentColor;
}
.pp-chip.is-ok{color:var(--pass);}
.pp-chip.is-bad{color:var(--fail);}
.pp-say{
  margin:0;max-width:52ch;
  font-family:var(--prose,var(--sans));font-weight:500;letter-spacing:-.015em;
  font-size:1.06rem;line-height:1.4;color:var(--ink);text-wrap:pretty;
}
.pp-note{margin:.4rem 0 0;max-width:58ch;font-size:.98rem;line-height:1.55;color:var(--ink-60);}
.pp-art{
  display:block;margin:.5rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--muted);
  overflow-wrap:anywhere;
}
.pp-art a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);}
.pp-art a:hover{border-bottom-color:var(--signal);}

/* ==========================================================================
   5. SECTION 03 . the defect record
   Same chassis as the change records on the landing page: identity row, then
   a stack of mono label/value fields. A record is a document, so it is set
   like one.
   ========================================================================== */
.pp-card{
  max-width:820px;background:var(--card);
  border:1px solid var(--hair-strong);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 22px 48px -30px rgba(var(--ink-rgb),.42);
}
.pp-card-h{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem .9rem;
  padding:.8rem 1.25rem;background:var(--paper);border-bottom:1px solid var(--hair);
}
.pp-card-id{
  font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink);overflow-wrap:anywhere;
}
.pp-ok{
  display:inline-flex;align-items:center;gap:.45em;flex:0 0 auto;
  font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:calc(var(--radius) - 3px);
  color:var(--pass);border:1px solid var(--pass);
}
.pp-ok svg{display:block;width:11px;height:11px;flex:0 0 auto;}
.pp-ok svg path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.pp-f{padding:.8rem 1.25rem .85rem;border-bottom:1px solid var(--hair);min-width:0;}
.pp-f:last-child{border-bottom:0;}
.pp-flab{
  display:flex;align-items:center;gap:.55em;margin:0 0 .4rem;max-width:none;
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pp-flab::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.pp-f.is-ok .pp-flab{color:var(--pass);}
.pp-f.is-ok .pp-flab::before{background:var(--pass);}
.pp-f.is-bad .pp-flab{color:var(--fail);}
.pp-f.is-bad .pp-flab::before{background:var(--fail);}
.pp-fval{
  margin:0;max-width:none;font-family:var(--mono);font-size:.84rem;line-height:1.55;
  color:var(--ink);overflow-wrap:anywhere;
}
.pp-fval + .pp-fval{margin-top:.45rem;color:var(--ink-60);}
.pp-fval code{font-family:inherit;font-size:1em;color:var(--ink-60);}
.pp-fval a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);}
.pp-fval .pp-dim{color:var(--unknown,var(--muted));}

/* ==========================================================================
   6. SECTION 05 . the postmortem
   The most important section on the page, so it is the plainest. A dated
   document: labelled rows, one quotation, one diagram, no ornament.
   ========================================================================== */
.pp-pm{
  max-width:900px;margin:0;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.2rem,2.4vw,1.9rem);
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
}
.pp-pm-meta{
  display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0 0 1.2rem;padding-bottom:1rem;
  max-width:none;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--unknown,var(--muted));
}
.pp-pm-meta b{color:var(--ink);font-weight:600;}
.pp-pm-row{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.3rem 1.8rem;padding:0 0 1.15rem;}
.pp-pm-row:last-of-type{padding-bottom:0;}
.pp-pm-lab{
  margin:0;max-width:none;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pp-pm-row.is-bad .pp-pm-lab{color:var(--fail);}
.pp-pm-row.is-ok .pp-pm-lab{color:var(--pass);}
.pp-pm-txt{margin:0;max-width:62ch;font-size:1.05rem;line-height:1.6;}
.pp-pm-txt + .pp-pm-txt{margin-top:.7rem;}
.pp-pm-txt code{font-family:var(--mono);font-size:.9em;}
.pp-quote{
  margin:0;padding-left:1.1rem;border-left:2px solid var(--fail);max-width:60ch;
  font-family:var(--mono);font-size:.92rem;line-height:1.65;color:var(--ink);
}
.pp-quote p{margin:0;max-width:none;font-family:inherit;font-size:inherit;line-height:inherit;}
.pp-quote p + p{margin-top:.5rem;}
.pp-quote cite{
  display:block;margin-top:.55rem;font-style:normal;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pp-hard{
  margin:clamp(1.6rem,2.6vw,2.2rem) 0 0;max-width:44ch;
  font-family:var(--prose,var(--sans));font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink);text-wrap:balance;
}

/* the denominator diagram */
.pp-fig{margin:clamp(1.6rem,2.6vw,2.2rem) 0 0;}
.pp-fig svg{display:block;width:100%;height:auto;overflow:visible;}
.pp-fig .st{fill:none;stroke:var(--hair-strong);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.pp-fig .thin{stroke-width:1.1;}
.pp-fig .dash{stroke-dasharray:5 4;}
.pp-fig .ok{stroke:var(--pass);}
.pp-fig .bad{stroke:var(--fail);}
.pp-fig .t{font-family:var(--mono);font-size:13px;fill:var(--ink);}
.pp-fig .tl{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;fill:var(--unknown,var(--muted));}
.pp-fig .tok{fill:var(--pass);}
.pp-fig .tbad{fill:var(--fail);}
.pp-fig figcaption{
  margin:.7rem 0 0;max-width:64ch;
  font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--muted);
}
/* the phone form of the same statement: two labelled bands cannot be read at
   340px, so the diagram becomes a list */
.pp-fig-m{display:none;margin:0 0 .6rem;padding:0;list-style:none;}
.pp-fig-m li{
  padding:.6rem 0 .65rem;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--ink-60);
}
.pp-fig-m li b{display:block;color:var(--ink);font-weight:600;}
.pp-fig-m li.is-ok b{color:var(--pass);}
.pp-fig-m li.is-bad b{color:var(--fail);}

/* ==========================================================================
   7. SECTION 06 . the limitations
   No cards, no icons, no colour. A numbered list of plain sentences, because
   dressing up a limitation is a way of hiding it.
   ========================================================================== */
.pp-lim{margin:0;padding:0;list-style:none;counter-reset:pplim;border-top:1px solid var(--hair);}
.pp-lim li{
  counter-increment:pplim;
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem 1.2rem;
  padding:1.15rem 0 1.2rem;border-bottom:1px solid var(--hair);
}
.pp-lim li::before{
  content:counter(pplim,decimal-leading-zero);grid-row:1 / span 2;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--unknown,var(--muted));padding-top:.15rem;
}
.pp-lim h3{margin:0;font-size:1.08rem;line-height:1.35;letter-spacing:-.015em;}
.pp-lim p{margin:.35rem 0 0;max-width:64ch;font-size:1.02rem;line-height:1.6;color:var(--ink-60);}
/* the display themes restyle h3 into a headline; hold these at list scale */
html[data-theme="terminal"] .pp-lim h3{font-size:1rem;line-height:1.4;text-shadow:none;}
html[data-theme="riso"] .pp-lim h3,
html[data-theme="acid"] .pp-lim h3{font-size:1.1rem;letter-spacing:0;color:var(--ink);text-shadow:none;}
html[data-theme="brutal"] .pp-lim h3{font-size:1.1rem;letter-spacing:0;}

/* ==========================================================================
   8. SECTION 07 . the methodology links
   ========================================================================== */
.pp-meth{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.3rem);
}
.pp-meth li{
  min-width:0;padding:1.15rem 1.2rem 1.25rem;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
}
.pp-meth h3{margin:0 0 .4rem;font-size:1.02rem;line-height:1.35;}
.pp-meth h3 a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--hair-strong);}
.pp-meth h3 a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.pp-meth p{margin:0;max-width:44ch;font-size:.98rem;line-height:1.55;color:var(--ink-60);}
html[data-theme="terminal"] .pp-meth h3{font-size:.94rem;line-height:1.4;text-shadow:none;}
html[data-theme="riso"] .pp-meth h3,
html[data-theme="acid"] .pp-meth h3{font-size:1.04rem;letter-spacing:0;color:var(--ink);text-shadow:none;}
html[data-theme="brutal"] .pp-meth h3{font-size:1.04rem;letter-spacing:0;}

/* ==========================================================================
   9. SECTION 08 . the standing offer
   ========================================================================== */
.pp-offer{
  max-width:820px;margin:0;padding:clamp(1.2rem,2.2vw,1.6rem) clamp(1.2rem,2.2vw,1.6rem) clamp(1.3rem,2.4vw,1.7rem);
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
}
.pp-offer p{margin:0;max-width:64ch;font-size:1.04rem;line-height:1.6;}
.pp-offer p + p{margin-top:.85rem;}
.pp-back{list-style:none;margin:clamp(1.4rem,2.4vw,2rem) 0 0;padding:0;display:grid;gap:.75rem;}
.pp-back li{
  display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:0 .6rem;
  max-width:62ch;font-size:1.02rem;line-height:1.6;color:var(--ink-60);
}
.pp-back li::before{
  content:"\2713";font-family:var(--mono);font-size:.9rem;color:var(--pass);line-height:1.7;
}
.pp-offer-fine{margin:1.5rem 0 0;}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .pp-open{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pp-meth{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pp-rows > div{grid-template-columns:minmax(0,12rem) minmax(0,1fr);}
  .pp-pm-row{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.3rem 1.2rem;}
}
@media (max-width:720px){
  .pp-open{grid-template-columns:1fr;}
  .pp-meth{grid-template-columns:1fr;}
  .pp-rows > div{grid-template-columns:1fr;gap:.3rem;}
  .pp-pm-row{grid-template-columns:1fr;gap:.35rem;}
  .pp-lim li{grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem .8rem;}
}
@media (max-width:640px){
  .pp-fig svg,.pp-fig figcaption{display:none;}
  .pp-fig-m{display:block;}
  .pp-step{grid-template-columns:26px minmax(0,1fr);gap:0 .9rem;}
  .pp-step > .pp-dot{width:25px;height:25px;font-size:.62rem;}
  .pp-chain::before{left:12px;}
  .pp-card-h,.pp-f{padding-left:1rem;padding-right:1rem;}
}