/* ==========================================================================
   exp35 . s35-compound.css
   Owned by the compound builder. Styles exactly one partial:

     partials/compound.html   page section 8, compounding knowledge
                              (PLAN-35-IA.md §7 Section 8 + §3.3)

   Contract with the shell:
     - colour comes ONLY from tokens, so all seven themes follow. State colour
       is semantic, never decorative:
         verified / proven again              var(--pass)
         violated / open known issue          var(--fail)
         inactive, recessive labels           var(--unknown, var(--muted))
         structure: spine, lanes, band, box   .st -> var(--fig-st, var(--ink))
       var(--signal) is never used here: nothing in this section is an
       affordance, and an affordance colour must never carry a state.
     - typography obeys the two-layer rule: var(--mono) for the diagram's
       labels, var(--prose) for the two sentences a visitor reads.
     - motion reuses the shell's arrival system only: site.js adds .in to
       .fig, strokes are pathLength="1" + .dr with --d/--dur, text is .fx with
       --td. There is no script and no timeline, so reduced motion and the QA
       pin both settle on the final frame through site.css alone.
   Every class is prefixed .cp / .cp-, so it can never collide with site.css,
   sections.css, graph-sections.css or agent-sections.css.
   ========================================================================== */

/* ---------- the section shell -------------------------------------------
   The mount marker for this section sits inside the previous section's .wrap,
   so the two rules below make the same markup correct in both places it is
   rendered: standalone (the builder preview, where it is a top-level section
   and needs its own gutter) and nested (index.html, where the gutter and the
   bottom padding are already paid for by the section it is mounted into). */
.cp{border-top:1px solid var(--hair);}
.wrap .cp{padding-bottom:0;}
.wrap .cp > .wrap{max-width:none;padding-left:0;padding-right:0;}

/* body copy: the plan writes two paragraphs, and both are sentences a human
   reads, so both sit in the prose layer at the reading floor. (This section's
   old 66/64ch widen-the-head caps were scar tissue over the shell's narrow
   52ch measure; the 2026-08-27 sitewide measure carries the width now and the
   craft layer's section-head rules outranked them anyway — removed.) */
.cp .section-head .lead{line-height:1.6;}
.cp .cp-say{margin-top:.9rem;}

/* ---------- the figure ---------------------------------------------------
   Two variants of one drawing. The phone variant drops the muted descriptor
   column, which is the only thing that cannot survive a 390px measure; every
   label of the plan's chain is present in both. */
.cp-fig{margin:2.4rem 0 0;}
/* exp38 distill: the section is the aphorism plus ONE SMALL FIGURE, so the
   desktop drawing is capped at 940px instead of filling the wrap. The label
   sizes below are raised to compensate for the ~6% smaller render, keeping
   every layer inside the figure system's 10-13px band. */
.cp svg.cp-desk{min-width:880px;max-width:940px;}
.cp svg.cp-mob{display:none;}

/* figure text layers. Chain labels, descriptors and headers are machine text,
   so all three are mono; the only sentence in the figure is the caption, and
   that lives in HTML as .fig-cap. */
.cp .fig .cpn{
  /* caps is presentation (declared, not typed): these are short chain labels
     and the tracking is label tracking */
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;fill:var(--ink);
}
.cp .fig .cpd{font-family:var(--mono);font-size:11px;letter-spacing:.015em;fill:var(--muted);}
/* The two figure headers are recessive metadata, so they take the text-tier
   recessive token. They deliberately do NOT take --unknown: in the verified
   theme --unknown is #3A403B, a structure value that is legible as a stroke
   and illegible as 9.5px type. --unknown reaches this section the way the
   shell intends it to, through --fig-st on .st. */
.cp .fig .cpl{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;fill:var(--muted);
}

/* the spine nodes carry the only state in the section: the requirement is
   proven, then violated while the issue is open, then proven again. */
.cp .fig .cp-nd{fill:var(--ink);}
.cp .fig .cp-nd.is-pass{fill:var(--pass);}
.cp .fig .cp-nd.is-fail{fill:var(--fail);}

/* the lanes are texture, not structure: one hairline per thing the graph
   keeps, so seven of them read as a bundle rather than as seven diagrams.
   The return band is the opposite: it is the whole bundle carried back, so it
   is the heaviest stroke in the section. Both are written with .st in the
   selector, because themes.css re-keys .fig .st and a weight that carries
   meaning must out-rank a theme's line-work. */
.cp .fig .st.cp-lane{stroke-width:1;stroke-opacity:.72;}
.cp .fig .st.cp-band{stroke-width:3.4;}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1020px){
  .cp-fig{margin-top:2.2rem;}
}
@media (max-width:820px){
  .cp .fig-scroll svg{min-width:0;}
  .cp svg.cp-desk{display:none;}
  .cp svg.cp-mob{display:block;}
  .cp .fig .cpn{font-size:10.5px;letter-spacing:.08em;}
  .cp .fig .cpl{font-size:8.5px;letter-spacing:.12em;}
  .cp .fig .st.cp-band{stroke-width:2.8;}
}
@media (max-width:600px){
  .cp-fig{margin-top:1.8rem;}
}