/* exp35 . section stylesheet owned by the how+delivery builder.
   Carries BOTH sections this builder owns, because index.html links one file
   for the pair:
     #how       PLAN-35-IA §7 Section 10   .s35h-*
     #delivery  PLAN-35-IA §7 Section 11   .s35d-*

   Rules that bind here:
     - tokens only, no hard-coded colour, so all 7 themes restyle for free;
     - --mono for numbers, step titles, docket fields and the figure label;
       --sans for every sentence a human reads, >= 1.05rem / 1.6 / <= 68ch;
     - --signal is an affordance and NEVER a state: it appears only on the
       primary action, which the shell's .btn already carries;
     - --stale is the change state, and the only state colour in either
       section: the return arc in #how is what a change does to a result;
     - ink draw-on-arrival is the shell mechanism (site.js adds .in to
       [data-reveal]; strokes are pathLength="1" + .dr with --d/--dur, text
       is .fx with --td). site.css pins one legible frame for html.qa,
       html.reduced and prefers-reduced-motion, so nothing is repeated here.
   ========================================================================= */


/* =========================================================================
   1. #how . the four-step chain
   The page is at full technical density by now (plan §10 scroll
   progression), so this section may be dense. It stays legible because the
   density is in the mono layer and the prose layer never crowds.
   ========================================================================= */

#how .s35h{margin-top:clamp(2rem,3vw,2.6rem);}

.s35h-rail{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.4rem,2.4vw,2.2rem);
}
.s35h-step{min-width:0;}

/* the drawn hairline that opens each step */
.s35h-rule{display:block;width:100%;height:auto;overflow:visible;}
.s35h-rule path{
  fill:none;stroke:var(--hair-strong);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}

.s35h-n{
  margin:.95rem 0 0;
  font-family:var(--mono);font-size:.74rem;font-weight:500;line-height:1.2;
  letter-spacing:.14em;color:var(--muted);
}
.s35h-t{
  margin:.55rem 0 .65rem;
  font-family:var(--mono);font-size:.82rem;font-weight:600;line-height:1.4;
  letter-spacing:.055em;color:var(--ink);
}
.s35h-d{
  margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink-60);
  max-width:36ch;
}

/* the return arc. A change withdraws yesterday's result, so the line that
   carries the change is --stale. The caption stays --muted: 11px uppercase
   mono is small text and must clear the text contrast bar on every ground,
   which the amber does not on the paper themes. The stroke is a graphic and
   does clear its own bar. */
.s35h-loop{display:block;width:100%;height:auto;overflow:visible;margin-top:clamp(1rem,1.6vw,1.5rem);}
.s35h-loop path{
  fill:none;stroke:var(--stale);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.s35h-loop text{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;fill:var(--muted);
}
.s35h-loop-mob{display:none;}

/* the instruments strip. Same 11rem + 1fr measure as the shell's .row, so it
   sits in the page's existing rhythm instead of inventing a new one. */
.s35h-tech{
  margin-top:clamp(1.9rem,2.8vw,2.4rem);
  padding-top:1.15rem;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:11rem minmax(0,1fr);
  gap:.5rem 2rem;align-items:baseline;
}
.s35h-tech-lab{
  margin:0;
  font-family:var(--mono);font-size:.72rem;font-weight:500;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.s35h-tech-lines{min-width:0;}
.s35h-tech-line{
  margin:0 0 .3rem;
  font-family:var(--mono);font-size:.88rem;line-height:1.75;
  letter-spacing:.005em;color:var(--ink);
}
.s35h-tech-line:last-child{margin-bottom:0;}
.s35h-tech-line s{text-decoration:none;color:var(--ink-40);padding:0 .1em;}


/* =========================================================================
   2. #delivery . the installation docket
   Nothing here is verified yet, so no state colour appears. The docket is
   structure and the only accent is the primary action.
   ========================================================================= */

.s35d-docket{
  margin-top:clamp(2rem,3vw,2.6rem);
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.35rem clamp(1.15rem,2.2vw,1.8rem) 1.5rem;
}

.s35d-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.35rem 1.6rem;
}
.s35d-title{
  margin:0;
  font-family:var(--mono);font-size:.86rem;font-weight:600;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.s35d-tag{
  margin:0;
  font-family:var(--mono);font-size:.72rem;font-weight:500;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

.s35d-rule{display:block;width:100%;height:auto;overflow:visible;margin:.8rem 0 0;}
.s35d-rule path{
  fill:none;stroke:var(--hair-strong);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}

.s35d-cols{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:1.7rem clamp(2rem,4vw,3.4rem);
  margin-top:1.3rem;
}
.s35d-col{min-width:0;}
.s35d-lab{
  margin:0 0 .85rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.s35d-one{
  margin:0;
  font-family:var(--mono);font-size:clamp(1.02rem,1.7vw,1.28rem);font-weight:600;
  line-height:1.25;letter-spacing:.045em;color:var(--ink);
}
.s35d-terms,.s35d-items{list-style:none;margin:.9rem 0 0;padding:0;}
.s35d-terms li,.s35d-items li{
  font-family:var(--mono);font-size:.88rem;line-height:1.55;color:var(--ink);
  padding:.5rem 0;border-top:1px solid var(--hair);
  break-inside:avoid;
}
/* seven items in one wide column leave a long empty gutter, so the bill runs
   in two at desk width. The rows keep their own hairline, so a column break
   never reads as a missing row. */
@media (min-width:901px){
  .s35d-items{columns:2;column-gap:clamp(2rem,3.4vw,3rem);}
}

.s35d-body{
  margin:clamp(1.5rem,2.2vw,1.9rem) 0 0;
  font-size:1.08rem;line-height:1.65;color:var(--ink);max-width:62ch;
}
.s35d-note{
  margin:.85rem 0 0;
  font-family:var(--mono);font-size:.8rem;line-height:1.7;color:var(--muted);
  max-width:60ch;
}
.s35d-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.8rem;
  margin:clamp(1.5rem,2.4vw,1.95rem) 0 0;
}


/* =========================================================================
   3. RESPONSIVE . one pass at 1440, clean stack at 390, no horizontal scroll
   ========================================================================= */

@media (max-width:1080px){
  .s35h-rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.9rem;}
  .s35h-d{max-width:42ch;}
}
@media (max-width:900px){
  .s35d-cols{grid-template-columns:1fr;gap:1.5rem;}
}
@media (max-width:760px){
  .s35h-loop-desk{display:none;}
  .s35h-loop-mob{display:block;}
  .s35h-tech{grid-template-columns:1fr;gap:.7rem;}
  .s35h-tech-line{font-size:.84rem;}
}
@media (max-width:620px){
  .s35h-rail{grid-template-columns:1fr;row-gap:1.7rem;}
  .s35h-d{max-width:46ch;}
  .s35d-head{gap:.2rem;}
  .s35d-cta{gap:1rem;}
  /* THE FULL-WIDTH ACTION MAY WRAP ITS LABEL.
     MEASURED BUG, terminal theme, 320 CSS px: the page scrolled sideways by
     11 px and #delivery was the whole of it. Bisected by hiding each descendant
     of the section in turn and re-reading the section's own scrollWidth -- the
     only subtree whose removal took it from 331 back to 320 was
     .s35d-cta > a.btn, and the culprit is that action's CONTENT, not its box.
     width:100% sizes the box to the 272 px column correctly, but site.css gives
     every .btn white-space:nowrap, so the label is laid out on one unbreakable
     line and simply hangs out of the box it was given.
     THE ARITHMETIC, so the numbers below are checkable. On the tube the action
     is `[` + gap + `Request confidential scoping ->` + gap + `]`: 10.05 + 8 +
     301 + 8 + 10.05 = 337.1 px of content. The button box is the 24 px-guttered
     column, less 1 px of border each side and 9.6 px of padding each side, so
     it holds V - 69.2. justify-content:center splits whatever will not fit
     between the two ends, which puts the right edge at V/2 + 179.15 -- past the
     viewport whenever V is under 358.3. That is the whole bug, and it is why
     320 scrolled, 360 did not, and 390 looked perfectly healthy while still
     laying 8.15 px of glyphs outside the control on each side.
     WHY ONLY THE TUBE. This is the longest primary action on the site, and
     terminal is the theme that sets --sans to IBM Plex Mono and tracks it to
     .06em, so the same 30 characters run 301 px here against 232 on paper. The
     seven others are nowhere near the edge.
     THE FIX IS TO LET IT WRAP, NOT TO SHRINK IT. Getting 301 px into 241.9 by
     type size alone needs a 20% cut, which would put a primary call to action
     at ~12 px on the narrowest phones. Two lines is the honest answer.
     Only white-space is released: flex-wrap stays nowrap, so the tube's `[` and
     `]` pseudo-elements remain flex items on the outside of a centred two-line
     label rather than wrapping to lines of their own. The block padding and the
     line-height give a second line room, and site.css's 44 px min-height still
     wins for every label that fits on one -- one line is 19.76 + 17.6 = 37.4 px,
     under the floor -- so every button that was not wrapping does not move.
     WHAT ELSE THIS FIXES, SINCE IT IS THE SAME DEFECT. brutal and riso set
     text-transform:uppercase on the action and draw it in Bricolage, which puts
     their label at 280.4 and 286.1 px against a 266 / 268 px content box, so
     both were ALSO laying the label outside the button. They escaped notice
     because the overflow splits between the two ends and 7 px each side stayed
     inside a 320 px viewport. Text hanging out of the control it belongs to is
     the defect whether or not it reaches the edge of the screen, so both now
     wrap under 620 and both keep their single line at 390.
     THE SELECTOR IS `a.btn` AND NOT `.btn` DELIBERATELY. themes.css sets the
     tube's button padding from html[data-theme="terminal"] .btn -- one
     attribute, one class, one element -- so a plain .s35d-cta .btn loses the
     block padding to it, and the tube alone would have got two lines crushed
     into an unpadded 44 px box while the other seven breathed. The element
     selector matches that weight exactly and this file loads later. */
  .s35d-cta a.btn{
    width:100%;justify-content:center;
    white-space:normal;text-align:center;
    line-height:1.3;
    padding-top:.55rem;padding-bottom:.55rem;
  }
  /* AND THE TUBE GETS BACK THE 27 PX ITS OWN CHROME WAS SPENDING, so that
     releasing white-space does not cost it the single line it can still have.
     The label needs 301 px. At 390 the column is 342 wide and the tube spends
     2 on its border, 19.2 on side padding, 20.1 on the two brackets and 16 on
     the two .5rem flex gaps around them, which leaves 284.7 -- 16.3 short, so
     the line would break at 390 where it never had to.
     Nineteen of those pixels are invisible: this theme paints .btn with a
     transparent background and a transparent border, so its side padding
     separates nothing from nothing. The gaps are halved rather than dropped --
     the `[` and `]` carry their own .15em margin, so .25rem leaves 6.3 px
     between bracket and label against the 10.3 px the tube's other bracketed
     actions show, which still reads as the same treatment at a phone's scale
     where a closed-up `[REQUEST` would not.
     Reclaimed, the label gets V - 78.1: 311.9 px at 390, which clears 301 with
     10.9 to spare and keeps the line it had; 281.9 at 360 and 241.9 at 320,
     neither of which can hold it at any spacing, so both wrap -- which is the
     whole point. Scoped to terminal because it is the only theme with a bracket
     to space and the only one whose button box is invisible; the seven with a
     painted box keep every pixel of their padding. */
  html[data-theme="terminal"] .s35d-cta a.btn{
    padding-left:0;padding-right:0;
    gap:.25rem;
  }
}