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

     changes.html   "Every change should carry its proof."  (PLAN-35-IA §8.2)

   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).
     - typography obeys the two-layer rule: var(--prose) for every sentence a
       visitor reads, var(--mono) for IDs, record labels, values and counts.
     - 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, 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)
     stale evidence, and the one line
       on the page that is not settled  var(--stale)
     nothing claimed yet / structure    var(--unknown, var(--muted))
     hairlines                          var(--hair) / var(--hair-strong)
     var(--signal)                      affordance only: the contents rail,
                                        links and focus. It never paints a
                                        state on this page.

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

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

/* one prose measure for the whole page */
.pc-body{
  margin:0;max-width:60ch;
  font-family:var(--prose);font-size:1.06rem;line-height:1.65;color:var(--ink-60);
  text-wrap:pretty;
}
.pc-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,3rem);margin-top:clamp(1.6rem,2.8vw,2.4rem);
}

/* an inline record chip inside a sentence */
.pc-ic{
  display:inline-block;padding:.1rem .38rem;
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  border:1px solid currentColor;border-radius:calc(var(--radius) - 3px);
  white-space:nowrap;vertical-align:.05em;
}
.pc-ic.is-stale{color:var(--stale,var(--muted));}

/* ==========================================================================
   1. HERO
   Sparse: kicker, headline, one paragraph, and the rail. Left aligned, so the
   nine sections below read as a document rather than a pitch.
   ========================================================================== */
.pc-hero{padding:clamp(2.8rem,5.6vw,4.6rem) 0 clamp(2.4rem,4.4vw,3.6rem);}
.pc-hero h1{max-width:17ch;text-wrap:balance;}
.pc-hero-sub{
  margin:1.4rem 0 0;max-width:60ch;
  font-family:var(--prose);font-size:clamp(1.1rem,1.5vw,1.26rem);line-height:1.5;
  color:var(--ink-60);text-wrap:pretty;
}

/* the contents rail: the only affordance in the hero, so it is the only thing
   allowed to reach for --signal */
.pc-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);
}
.pc-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;
}
.pc-rail a i{
  flex:0 0 auto;font-style:normal;font-weight:600;letter-spacing:.08em;
  color:var(--unknown,var(--muted));
}
.pc-rail a span{min-width:0;}
.pc-rail a:hover{color:var(--signal);background:var(--card);}
.pc-rail a:hover i{color:var(--signal);}

/* ==========================================================================
   2. THE CORE COMPARISON  (§8.2)
   Two columns, one hairline between them. GIT gets one line and keeps the
   whole column, because the emptiness is the argument.
   ========================================================================== */
.pc-cmp{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:0;border:1px solid var(--hair-strong);border-radius:var(--radius);
  background:var(--card);overflow:hidden;
}
.pc-col{padding:clamp(1.2rem,2.2vw,1.9rem) clamp(1.2rem,2.2vw,1.9rem) clamp(1.4rem,2.6vw,2.2rem);min-width:0;}
.pc-col-proof{border-left:1px solid var(--hair-strong);}
.pc-col-h{
  margin:0 0 1.1rem;max-width:none;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-col-proof .pc-col-h{color:var(--ink);}
.pc-lines{list-style:none;margin:0;padding:0;max-width:none;}
.pc-lines li{
  font-family:var(--mono);font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.75;
  color:var(--ink);
}
.pc-col:not(.pc-col-proof) .pc-lines li{color:var(--ink-60);}

/* the sixth line. It is the one claim on the page that is deliberately not
   settled, so it is --stale, it is set larger, and it gets a rule above it. */
.pc-unc{
  position:relative;margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--hair);
  color:var(--stale,var(--muted)) !important;
  font-weight:500;font-size:clamp(1.02rem,1.35vw,1.16rem);letter-spacing:.01em;
}
.pc-unc::after{
  content:"";position:absolute;left:0;bottom:-.35rem;width:2.4rem;height:2px;
  background:var(--stale,var(--muted));opacity:.5;
}

.pc-unc-note{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.4rem clamp(1.2rem,2.4vw,2.4rem);
  margin:clamp(1.4rem,2.4vw,2rem) 0 0;padding-top:clamp(1.2rem,2vw,1.6rem);
  border-top:1px solid var(--hair);
}
.pc-unc-lab{
  grid-column:1;margin:0;max-width:none;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--stale,var(--muted));
}
.pc-unc-say{
  grid-column:2;margin:0;max-width:56ch;
  font-family:var(--prose);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.12rem,1.7vw,1.36rem);line-height:1.42;color:var(--ink);
  text-wrap:pretty;
}
.pc-unc-fine{
  grid-column:2;margin:.9rem 0 0;max-width:56ch;
  font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--muted);
}
.pc-unc-fine a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.pc-unc-fine a:hover{color:var(--signal);border-bottom-color:var(--signal);}

/* ==========================================================================
   3. THE SPLIT: a record on the left, what it must carry on the right
   ========================================================================== */
.pc-split{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.4rem,2.8vw,3rem);align-items:start;
}
.pc-split-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.pc-split-h{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}

/* ---------- the record card ---------- */
.pc-rec{
  display:flex;flex-direction:column;min-width:0;
  background:var(--card);
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 22px 48px -30px rgba(var(--ink-rgb),.42);
  overflow:hidden;
}
.pc-rh{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem 1.25rem;background:var(--paper);border-bottom:1px solid var(--hair);
}
.pc-id{
  font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);overflow-wrap:anywhere;
}
.pc-chip{
  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);
  border:1px solid currentColor;
}
.pc-chip svg{display:block;width:11px;height:11px;flex:0 0 auto;}
.pc-chip svg path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.pc-chip.is-ok{color:var(--pass);}
/* an open issue is a requirement being violated right now, so it is --fail */
.pc-chip.is-bad{color:var(--fail);}
/* a shape, not a state: nothing is claimed about it */
.pc-chip.is-neutral{color:var(--unknown,var(--muted));border-style:dashed;}

.pc-kind{
  display:flex;align-items:baseline;gap:1rem;margin:0;max-width:none;
  padding:.6rem 1.25rem;border-bottom:1px solid var(--hair);
}
.pc-klab{
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-kval{font-family:var(--mono);font-size:.82rem;color:var(--ink);}

.pc-fields{display:flex;flex-direction:column;flex:1;}
.pc-f{padding:.85rem 1.25rem .9rem;min-width:0;border-bottom:1px solid var(--hair);}
.pc-fields-tight .pc-f{padding:.66rem 1.25rem .7rem;}
.pc-f:last-child{border-bottom:0;}
.pc-lab{
  display:flex;align-items:center;gap:.55em;margin:0 0 .45rem;max-width:none;
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-lab::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.pc-f.is-ok .pc-lab{color:var(--pass);}
.pc-f.is-ok .pc-lab::before{background:var(--pass);}
.pc-f.is-bad .pc-lab{color:var(--fail);}
.pc-f.is-bad .pc-lab::before{background:var(--fail);}
.pc-fields-tight .pc-lab{margin-bottom:.28rem;}

.pc-val{
  margin:0;max-width:none;font-family:var(--mono);font-size:.84rem;line-height:1.5;
  color:var(--ink);overflow-wrap:anywhere;
}
/* the open-issue card prints the SHAPE of a value, never an invented one */
.pc-val-q{color:var(--ink-60);font-size:.8rem;}
.pc-val-ok{display:flex;align-items:center;gap:.45em;color:var(--pass);}
.pc-sep{font-style:normal;color:var(--unknown,var(--muted));padding:0 .1em;}
.pc-path{border-bottom:1px solid var(--hair);padding-bottom:.05em;}
.pc-n{
  font-size:1.16rem;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.pc-f.is-ok .pc-n{color:var(--pass);}
.pc-mark{width:12px;height:12px;flex:0 0 auto;}
.pc-mark path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.pc-say{
  margin:0;max-width:32ch;
  font-family:var(--prose);font-weight:500;letter-spacing:-.018em;
  font-size:1.08rem;line-height:1.36;color:var(--ink);text-wrap:pretty;
}

/* ---------- the provenance footer on every record card ----------
   One shape, three jobs, and it is the reader-visible label -- a source
   comment is not a label. It follows the house convention already used on
   audit.html ("Example, hand drawn", "Counts are illustrative"):
     Example     an invented specimen; nothing here is claimed as a fact
     Blank form  the shape of a record with no values filled in
     Real record one of ours, and the line carries the route to it, which is
                 what plan §9 rule 4 requires of anything shown in --pass
   The tag is --unknown by default: a provenance stamp is not a state. Only
   the real-record tag takes --pass, because that card is a verified thing. */
.pc-cap{
  margin:0;padding:.72rem 1.25rem .78rem;max-width:none;
  border-top:1px solid var(--hair);background:var(--paper);
  font-family:var(--mono);font-size:.72rem;line-height:1.6;
  color:var(--ink-60);overflow-wrap:anywhere;
}
.pc-cap-t{
  display:inline-block;margin-right:.7em;
  font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--unknown,var(--muted));
  border-bottom:1px solid currentColor;
}
.pc-cap-t.is-real{color:var(--pass-text,var(--pass));}
.pc-cap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.pc-cap a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.pc-cap a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
/* the card header wraps rather than crushing the chip on a narrow screen */
.pc-rh{flex-wrap:wrap;}

/* ---------- the column beside the record ---------- */
.pc-recs{min-width:0;padding-top:.2rem;}
.pc-recs-h{
  display:flex;align-items:center;gap:.55em;margin:0 0 1rem;max-width:none;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-recs-h::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.pc-recs-l{
  list-style:none;counter-reset:pcl;margin:0;padding:0;max-width:52ch;
  border-top:1px solid var(--hair);
}
.pc-recs-l li{
  counter-increment:pcl;position:relative;
  padding:.52rem 0 .52rem 2.4rem;border-bottom:1px solid var(--hair);
  font-family:var(--prose);font-size:1rem;line-height:1.45;color:var(--ink);
}
.pc-recs-l li::before{
  content:counter(pcl,decimal-leading-zero);position:absolute;left:0;top:.62rem;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;
  color:var(--unknown,var(--muted));
}
.pc-recs-p{
  margin:0 0 .9rem;max-width:52ch;
  font-family:var(--prose);font-size:1.05rem;line-height:1.6;color:var(--ink-60);
  text-wrap:pretty;
}
.pc-recs-fine{
  margin:1.1rem 0 0;max-width:52ch;
  font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--muted);
}
.pc-recs-fine + .pc-recs-fine{margin-top:.5rem;}
.pc-recs-l + .pc-recs-fine{margin-top:1.3rem;}

/* the counting rule of §9 rule 5, set apart because it is a promise */
.pc-guard{
  margin:1.6rem 0 0;padding:1rem 1.15rem 1.1rem;
  border:1px solid var(--hair-strong);border-left-width:3px;
  border-radius:calc(var(--radius) - 2px);background:var(--card);
}
.pc-guard-lab{
  margin:0 0 .4rem;max-width:none;
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-guard-say{
  margin:0;max-width:46ch;
  font-family:var(--prose);font-size:1.02rem;line-height:1.5;color:var(--ink);
  text-wrap:pretty;
}

/* ==========================================================================
   4. CLOSURE  (§2.4) . the page's centre of gravity
   Two rungs, never merged. Rung 1 is earned by one passing reproducer, so it
   is --pass. Rung 2 is a condition rather than a claim, so it stays
   --unknown and dashed no matter how good the fix looks.
   ========================================================================== */
/* the one banded section on the page: the ground steps from --paper to --card
   so the landmark is visible in every theme, and the two rungs step back to
   --paper so they still read as objects sitting on it */
.pc-sec-key{background:var(--card);padding-top:clamp(4.4rem,7vw,7rem);padding-bottom:clamp(4.4rem,7vw,7rem);}
.pc-sec-key .section-head{max-width:none;margin-bottom:clamp(2rem,3.4vw,3rem);}
.pc-lead-key{
  max-width:48ch;
  font-family:var(--prose);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.32rem,2.4vw,1.86rem);line-height:1.28;color:var(--ink);
}
.pc-tiers{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,2.4rem);margin-top:clamp(.6rem,1.4vw,1.2rem);
}
.pc-tier{
  min-width:0;padding:clamp(1.2rem,2.2vw,1.8rem) clamp(1.2rem,2.2vw,1.8rem) clamp(1.4rem,2.4vw,2rem);
  background:var(--paper);
  border:1px solid var(--hair-strong);border-radius:var(--radius);
}
.pc-tier-n{
  display:flex;align-items:center;gap:.7em;
  margin:0 0 1.2rem;max-width:none;
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-tier-n::after{content:"";flex:1 1 auto;height:1px;background:var(--hair);}
.pc-tier-body{
  display:grid;grid-template-columns:minmax(0,1fr) 64px auto;
  align-items:center;gap:.6rem;
  padding-bottom:clamp(1rem,1.8vw,1.4rem);margin-bottom:clamp(1rem,1.8vw,1.4rem);
  border-bottom:1px solid var(--hair);
}
.pc-in{
  list-style:none;margin:0;padding:0 0 0 1.05em;max-width:none;
  font-family:var(--mono);font-size:.7rem;line-height:1.85;letter-spacing:.1em;
  color:var(--ink-60);
}
.pc-in li{position:relative;}
.pc-in li + li::before{
  content:"+";position:absolute;left:-1.05em;top:0;color:var(--unknown,var(--muted));
}
.pc-arw{display:block;width:64px;height:12px;}
.pc-st{fill:none;stroke:var(--hair-strong);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.pc-out{
  display:inline-flex;align-items:center;gap:.5em;margin:0;max-width:none;
  padding:.46rem .72rem;border-radius:calc(var(--radius) - 3px);
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.11em;
  border:1px solid var(--hair-strong);color:var(--unknown,var(--muted));
}
.pc-out.is-ok{color:var(--pass);border-color:var(--pass);}
/* not yet earned: dashed and --unknown, so the eye never reads it as verified */
.pc-out.is-open{border-style:dashed;}
.pc-tier-say{
  margin:0;max-width:52ch;
  font-family:var(--prose);font-size:1.02rem;line-height:1.6;color:var(--ink-60);
  text-wrap:pretty;
}
.pc-key-line{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;max-width:60ch;
  padding-top:clamp(1.3rem,2.2vw,1.8rem);border-top:1px solid var(--hair-strong);
  font-family:var(--prose);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.14rem,1.75vw,1.4rem);line-height:1.45;color:var(--ink);
  text-wrap:pretty;
}

/* ==========================================================================
   5. BLAST RADIUS readout
   ========================================================================== */
.pc-radius{
  margin:0;padding:clamp(1.2rem,2.2vw,1.8rem) clamp(1.2rem,2.2vw,1.8rem) clamp(1.3rem,2.4vw,2rem);
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
}
.pc-radius-h{
  margin:0 0 1.1rem;max-width:none;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.pc-radius-l{list-style:none;margin:0;padding:0;max-width:none;border-top:1px solid var(--hair);}
.pc-radius-l li{
  display:flex;align-items:baseline;gap:.6em;
  padding:.62rem 0;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.88rem;line-height:1.4;color:var(--ink);
}
.pc-radius-l li:last-child{border-bottom:0;color:var(--ink-60);}
.pc-radius-cap{
  margin:.9rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--muted);
}

/* ==========================================================================
   6. INVALIDATION strip
   Three states and two arrows. The middle state is --stale: doubt, not
   failure. Nothing here is --fail, because a stale obligation is not a
   violated requirement.
   ========================================================================== */
.pc-strip{margin:0 0 clamp(.4rem,1vw,.8rem);}
.pc-strip-l{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;gap:clamp(.8rem,1.8vw,1.6rem);
}
.pc-strip-l > li{min-width:0;}
.pc-strip-s{
  display:inline-flex;align-items:center;gap:.45em;margin:0;max-width:none;
  padding:.36rem .6rem;border-radius:calc(var(--radius) - 3px);
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  border:1px solid currentColor;
}
.pc-strip-s.is-ok{color:var(--pass);}
.pc-strip-s.is-stale{color:var(--stale,var(--muted));border-style:dashed;}
.pc-strip-c{
  margin:.7rem 0 0;max-width:34ch;
  font-family:var(--prose);font-size:.98rem;line-height:1.5;color:var(--ink-60);
  text-wrap:pretty;
}
.pc-strip-a{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding-top:.45rem;
}
.pc-strip-t{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;
  color:var(--unknown,var(--muted));white-space:nowrap;
}

/* ==========================================================================
   7. THE RETAINED LOOP  (§3.3)
   ========================================================================== */
.pc-loop{
  list-style:none;margin:0;padding:0 0 0 1.6rem;max-width:none;
  border-left:1px solid var(--hair-strong);
}
.pc-loop li{
  position:relative;padding:.5rem 0;
  font-family:var(--mono);font-size:.82rem;line-height:1.5;letter-spacing:.04em;
  color:var(--ink-60);
}
.pc-loop li::before{
  content:"";position:absolute;left:-1.6rem;top:1.02rem;width:1rem;height:1px;
  background:var(--hair-strong);
}
.pc-loop-end{
  margin-top:.5rem;padding-top:.9rem !important;
  border-top:1px solid var(--hair);
  font-family:var(--prose) !important;font-size:1.08rem !important;
  letter-spacing:-.018em !important;font-weight:600;color:var(--ink) !important;
  max-width:30ch;
}
.pc-loop-end::before{top:1.5rem;background:var(--ink);}

/* ==========================================================================
   8. RELEASE RECEIPT
   A template, not a fabricated release: every row is a shape the records
   fill. The last row is the sixth line of section 01, coming back, so it is
   --stale like its origin.
   ========================================================================== */
.pc-receipt{
  min-width:0;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);
}
.pc-rc-l{margin:0;}
.pc-rc-l > div{
  display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
  gap:.25rem 1.2rem;align-items:baseline;
  padding:.72rem 1.25rem;border-bottom:1px solid var(--hair);
}
.pc-rc-l > div:last-child{border-bottom:0;}
.pc-rc-l dt{
  margin:0;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.pc-rc-l dd{
  margin:0;font-family:var(--prose);font-size:1rem;line-height:1.45;color:var(--ink);
}
.pc-rc-last dt{color:var(--stale,var(--muted));}
.pc-rc-last dd{color:var(--stale,var(--muted));}

/* ==========================================================================
   9. CTA
   ========================================================================== */
.pc-cta{padding-top:clamp(3rem,5vw,4.4rem);}
.pc-cta-lead{
  margin:0;max-width:36ch;
  font-family:var(--prose);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.2;color:var(--ink);
  text-wrap:balance;
}
.pc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;margin-top:1.6rem;}
/* the shared control is nowrap by default and this label is long, so it is
   allowed to wrap here rather than push the page sideways on a phone */
.pc-cta .pctl{max-width:100%;}
.pc-cta-fine{
  margin:1.5rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.74rem;line-height:1.8;color:var(--muted);
}
.pc-cta-fine a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.pc-cta-fine a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.pc-cta-sep{color:var(--hair-strong);padding:0 .35em;}

/* ==========================================================================
   10. THEME HOOKS
   One only: the verified theme paints every proven mark with its own paint
   server, so the ticks join it instead of sitting flat green.
   ========================================================================== */
html[data-theme="verified"] .pc-chip.is-ok svg path,
html[data-theme="verified"] .pc-mark path{stroke:url(#tv-hdr-green) #91FF65;}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .pc-rail{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pc-tier-body{grid-template-columns:minmax(0,1fr) 44px auto;}
  .pc-arw{width:44px;}
  .pc-rc-l > div{grid-template-columns:minmax(0,11rem) minmax(0,1fr);}
}
@media (max-width:900px){
  .pc-split,.pc-split-r,.pc-split-h{grid-template-columns:1fr;gap:1.8rem;}
  .pc-two{grid-template-columns:1fr;}
  .pc-tiers{grid-template-columns:1fr;}
  .pc-cmp{grid-template-columns:1fr;}
  .pc-col-proof{border-left:0;border-top:1px solid var(--hair-strong);}
  /* the strip cannot hold five columns, so it turns into a ladder and the
     arrows take a quarter turn with it */
  .pc-strip-l{grid-template-columns:1fr;gap:.4rem;justify-items:start;}
  .pc-strip-a{flex-direction:row;align-items:center;gap:.8rem;padding:.5rem 0 .5rem .2rem;}
  .pc-strip-a .pc-arw{transform:rotate(90deg);width:34px;}
  .pc-strip-c{max-width:46ch;}
}
@media (max-width:640px){
  .pc-rail{grid-template-columns:1fr;}
  .pc-unc-note{grid-template-columns:1fr;gap:.5rem;}
  .pc-unc-lab,.pc-unc-say,.pc-unc-fine{grid-column:1;}
  .pc-rh,.pc-kind{padding-left:1.05rem;padding-right:1.05rem;}
  .pc-f{padding:.8rem 1.05rem .85rem;}
  .pc-cap{padding-left:1.05rem;padding-right:1.05rem;}
  .pc-rh{flex-wrap:wrap;gap:.5rem;}
  .pc-rc-l > div{grid-template-columns:1fr;gap:.2rem;padding:.7rem 1.05rem;}
  /* the rung turns the corner: input, a quarter turn of the same arrow,
     output. Rotating a 64x12 box about its centre pushes 26px past the box
     top and bottom, so the margins clear exactly that much. */
  .pc-tier-body{grid-template-columns:1fr;justify-items:start;gap:0;}
  .pc-tier-body .pc-arw{transform:rotate(90deg);margin:1.9rem 0 1.9rem .9rem;}
  .pc-recs-l li{padding-left:2.1rem;}
  .pc-cta .pctl{
    white-space:normal;align-items:flex-start;
    padding:.7rem 1rem .8rem .95rem;line-height:1.55;
  }
  .pc-cta .pctl .pctl-lamp{margin-top:.55rem;}
  .pc-cta .pctl .pctl-key{margin-top:.14rem;}
}