/* ==========================================================================
   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. */
.cp .section-head{max-width:66ch;}
.cp .section-head .lead{line-height:1.6;max-width:64ch;}
.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.8rem 0 0;}
.cp svg.cp-desk{min-width:980px;}
.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{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.10em;fill:var(--ink);
}
.cp .fig .cpd{font-family:var(--mono);font-size:10px;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:9.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;}
  .cp .section-head .lead{max-width:none;}
}