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

     partials/changes.html   page section 4  "Every change should explain
                                              itself."  (PLAN-35-IA §7 §4)

   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 --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.

   SEMANTIC COLOUR (exp33/exp35 rule) — state is never carried by the accent:
     verified / instance fixed        var(--pass)
     violated intent                  var(--fail)
     nothing claimed / inactive kind  var(--unknown, var(--muted))
     plain structure and rules        var(--hair) / var(--hair-strong)
     var(--signal)                    absent by design. Nothing in this section
                                      is an affordance, and it must never paint
                                      a state.

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

/* (The old 68ch head/lead wideners were this section's opt-out from the
   shell's narrow measure; the 2026-08-27 sitewide measure carries the width
   now and the craft layer's section-head rules outranked them anyway —
   removed.) */

/* ==========================================================================
   1. THE FAN . one record type, four kinds
   Deliberately quiet: a hairline bus, mono labels, no fill. It exists to say
   that the two records below are the same object, so it must never out-shout
   them.
   ========================================================================== */
.cl-fan{margin:0 0 clamp(1.2rem,2.2vw,1.8rem);}
.cl-fan-svg{display:block;width:100%;height:auto;overflow:visible;}
.cl-st{fill:none;stroke:var(--hair-strong);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cl-st.thin{stroke-width:1.2;}
.cl-tb{
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.18em;
  fill:var(--ink);
}
.cl-tk{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;fill:var(--ink-60);}
/* the two kinds not shown below are inactive, so they are --unknown, never dim
   --pass and never the accent */
.cl-tk-off{fill:var(--unknown,var(--muted));}
.cl-fan-cap{
  margin:.5rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.66rem;line-height:1.6;letter-spacing:.04em;
  color:var(--unknown,var(--muted));text-align:center;
}

/* the phone form of the same statement: the descenders cannot point at two
   columns once the records stack, so the diagram becomes a rail */
.cl-fan-m{display:none;}
.cl-fan-k{
  display:inline-block;margin:.34rem .3rem 0 0;padding:.18rem .44rem;
  border:1px solid var(--hair);border-radius:2px; /* control radius */
  font-size:.68rem;letter-spacing:.04em;color:var(--ink-60);white-space:nowrap;
}
.cl-fan-k.is-off{color:var(--unknown,var(--muted));}

/* ==========================================================================
   2. THE TWO RECORDS
   Side by side, never tabbed: the claim is that a feature change and a defect
   fix are the same record type, and that claim cannot be read while half of it
   is hidden behind a click.
   ========================================================================== */
.cl-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.9vw,1.6rem);align-items:stretch;
}
.cl-rec{
  display:flex;flex-direction:column;min-width:0;
  background:var(--card);
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  /* the card commits to its hairline edge, so the shadow drops to the
     resting-card register (DESIGN.md elevation): near-ambient, not a pool */
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 18px 44px -28px rgba(var(--ink-rgb),.11);
  overflow:hidden;
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
@media (hover:hover){
  .cl-rec:hover{
    transform:translateY(-2px);border-color:var(--ink);
    box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 26px 56px -30px rgba(var(--ink-rgb),.24);
  }
}
@media (prefers-reduced-motion:reduce){
  .cl-rec,.cl-rec:hover{transition:none;transform:none;}
}

/* header: the identity row */
.cl-h{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem 1.25rem;background:var(--paper);border-bottom:1px solid var(--hair);
}
.cl-id{
  font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);overflow-wrap:anywhere;
}
/* VERIFIED is proven knowledge, so it is --pass and nothing else in the header
   is */
.cl-ok{
  display:inline-flex;align-items:center;gap:.45em;flex:0 0 auto;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:2px; /* control radius (DESIGN.md scale) */
  color:var(--pass);border:1px solid var(--pass);
}
.cl-ok svg{display:block;width:11px;height:11px;flex:0 0 auto;}
.cl-ok svg path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}

/* the kind strip: the one inline label/value row, exactly as the record prints
   it, and the row that pairs each card back to the fan above */
.cl-kind{
  display:flex;align-items:baseline;gap:1rem;margin:0;max-width:none;
  padding:.6rem 1.25rem;border-bottom:1px solid var(--hair);
}
.cl-klab{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.cl-kval{font-family:var(--mono);font-size:.82rem;color:var(--ink);}

/* the field stack */
.cl-fields{display:flex;flex-direction:column;flex:1;}
.cl-f{padding:.85rem 1.25rem .9rem;min-width:0;border-bottom:1px solid var(--hair);}
.cl-f:last-child{border-bottom:0;flex:1;}
.cl-lab{
  display:flex;align-items:center;gap:.55em;margin:0 0 .45rem;max-width:none;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--unknown,var(--muted));
}
.cl-lab::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.cl-f.is-ok .cl-lab{color:var(--pass);}
.cl-f.is-ok .cl-lab::before{background:var(--pass);}
/* the requirement this fix violated: --fail is the honest colour for it, and
   the record's own VERIFIED chip is what says the violation is over */
.cl-f.is-bad .cl-lab{color:var(--fail);}
.cl-f.is-bad .cl-lab::before{background:var(--fail);}

.cl-val{
  margin:0;max-width:none;font-family:var(--mono);font-size:.84rem;line-height:1.5;
  color:var(--ink);overflow-wrap:anywhere;
}
.cl-val-ok{display:flex;align-items:center;gap:.45em;color:var(--pass);}
.cl-sep{font-style:normal;color:var(--unknown,var(--muted));padding:0 .1em;}
.cl-path{border-bottom:1px solid var(--hair);padding-bottom:.05em;}
.cl-n{
  font-size:1.16rem;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.cl-f.is-ok .cl-n{color:var(--pass);}
.cl-mark{width:12px;height:12px;flex:0 0 auto;}
.cl-mark path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}

/* the one sentence inside a record: prose, never mono */
.cl-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;
}

/* ==========================================================================
   2b. POINT-OF-USE GLOSSES
   One dim mono line under the few values that need it, on BOTH records.
   Three per card is the noise budget; fields that explain themselves get
   none.
   ========================================================================== */
.cl-gloss{
  margin:.35rem 0 0;max-width:44ch;
  font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.01em;
  color:var(--muted);
}

/* ==========================================================================
   3. THE CORE COPY
   ========================================================================== */
.cl-core{
  margin:clamp(1.6rem,2.8vw,2.3rem) 0 0;max-width:64ch;
  font-family:var(--prose);font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.62;
  color:var(--ink);text-wrap:pretty;
}
/* the closing clause carries weight, never colour */
.cl-core-em{font-weight:600;}

/* ==========================================================================
   4. THE TRUST LINE  (plan §2.4)
   Set apart above a rule, because it is the sentence that keeps the section
   honest. The ladder spells out what "broader evidence" costs; DEFECT CLASS
   CLOSED stays --unknown and dashed, because it is a condition here, not a
   claim.
   ========================================================================== */
.cl-trust{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);align-items:start;
  margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding-top:clamp(1.4rem,2.4vw,2rem);
  border-top:1px solid var(--hair-strong);
}
.cl-trust-l{min-width:0;}
/* the block gets a title so the sentence and the ladder read as one unit */
.cl-trust-lab{
  display:flex;align-items:center;gap:.55em;margin:0 0 .7rem;max-width:none;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.cl-trust-lab::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.cl-trust-say{
  margin:0;max-width:30ch;
  font-family:var(--prose);font-weight:500;letter-spacing:-.02em;
  /* argument prose wraps to three lines at this measure; 1.3 read crushed */
  font-size:clamp(1.22rem,2vw,1.58rem);line-height:1.42;color:var(--ink);
  text-wrap:pretty;
}
.cl-ladder{display:grid;gap:1rem;align-content:start;}
.cl-rung{
  display:grid;grid-template-columns:minmax(0,1fr) 48px auto;
  align-items:center;gap:.5rem;
}
.cl-in{
  list-style:none;margin:0;padding:0 0 0 1.05em;max-width:none;
  /* short machine labels: caps is presentation, declared here rather than
     typed, so the tracking is read as label tracking */
  font-family:var(--mono);font-size:.67rem;line-height:1.8;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60);
}
.cl-in li{position:relative;}
.cl-in li + li::before{
  content:"+";position:absolute;left:-1.05em;top:0;color:var(--unknown,var(--muted));
}
.cl-ar{display:block;width:48px;height:12px;}
.cl-out{
  display:inline-flex;align-items:center;gap:.45em;margin:0;max-width:none;
  padding:.32rem .55rem;border-radius:2px; /* control radius */
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;
  border:1px solid var(--hair-strong);color:var(--unknown,var(--muted));
}
.cl-out.is-ok{color:var(--pass);border-color:var(--pass);border-style:solid;}
/* not yet earned: dashed and --unknown, so the eye never reads it as verified */
.cl-out.is-open{border-style:dashed;}

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

/* terminal: the pale ink-tinted ambient shadow reads as a phosphor halo on
   the near-black ground; the tube's card physics is the inner wash
   (themes.css §cards), so the record takes that instead. */
html[data-theme="terminal"] .cl-rec,
html[data-theme="terminal"] .cl-rec:hover{
  box-shadow:inset 0 0 32px rgba(43,255,111,.04);
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .cl-rung{grid-template-columns:minmax(0,1fr) 40px auto;}
  .cl-ar{width:40px;}
}
/* below this the two records cannot hold a column each, so they stack and the
   fan becomes the rail */
@media (max-width:860px){
  .cl-pair{grid-template-columns:1fr;}
  .cl-fan-svg,.cl-fan-cap{display:none;}
  .cl-fan-m{
    display:block;margin:0;max-width:none;
    font-family:var(--mono);font-size:.66rem;font-weight:600;
    color:var(--ink);
  }
  /* the caps + wide tracking belong to the short label only; the kind chips
     that follow keep their own .04em tracking */
  .cl-fan-m .cl-fan-m-t{text-transform:uppercase;letter-spacing:.16em;margin-right:.5rem;}
  .cl-trust{grid-template-columns:1fr;}
  .cl-trust-say{max-width:36ch;}
}
@media (max-width:560px){
  .cl-h,.cl-kind{padding-left:1.05rem;padding-right:1.05rem;}
  .cl-f{padding:.8rem 1.05rem .85rem;}
  .cl-h{flex-wrap:wrap;gap:.5rem;}
  /* the rung turns the corner: input, a quarter turn of the same arrow, output.
     rotating a 48x12 box about its centre pushes 18px past the box top and
     bottom, so the margins clear exactly that much and nothing collides */
  .cl-rung{grid-template-columns:1fr;justify-items:start;gap:0;}
  .cl-ar{transform:rotate(90deg);margin:1.35rem 0 1.35rem 1.1rem;}
}

/* link out to the full /changes page (added by the orchestrator after an
   independent review found the homepage never offered it). */
.cl-more{margin:2.2rem 0 0;}

/* The defect card prints the record's own disposition, not a verdict we chose.
   It is deliberately NOT --pass: covered_by_requirement is a state, not a pass.
   Geometry matches the feature card's .cl-ok chip (same row grammar, one line,
   never wraps) so both headers read as the same object; only the colour
   authority differs -- state keeps the label voice, pass keeps green. */
.cl-state{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label-text);
  border:1px solid var(--hair-strong,var(--hair,currentColor));
  border-radius:2px;padding:.24rem .5rem;} /* control radius */
.cl-id a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair,currentColor);}

/* House provenance caption: an invented specimen must be marked in the RENDERED
   page, not only in a source comment. Matches .pc-cap on /changes. */
.cl-eg{margin:.9rem 0 0;font-size:.82rem;line-height:1.5;color:var(--label-text);max-width:60ch;}
.cl-eg-t{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  margin-right:.5rem;padding:.1rem .4rem;border:1px solid var(--hair,currentColor);border-radius:2px;}


/* ==========================================================================
   SITE V9 . the landing page's section 02 (the received issue) and the
   closure chain in section 06. Everything below is additive: no existing
   selector is redeclared, so /changes and the other pages that load this
   sheet are untouched.
   ========================================================================== */

/* ---- the one wide record ------------------------------------------------
   The .cl-rec chassis was solved for a half-width card in a two-up .cl-pair.
   Section 02 shows ONE record at full column width, so a seven-field stack
   would read as a scroll rather than as an object. Above 900px the field
   stack goes to two columns, with the title spanning both: the reader takes
   the record in one look, which is the whole claim of the section.
   The border bookkeeping below is what a grid costs -- .cl-f:last-child
   drops its bottom rule in the flex stack, and in a grid the LAST ROW is two
   cells, not one. */
.q-rec{margin:clamp(1.9rem,3.2vw,2.7rem) 0 0;}
@media (min-width:900px){
  .q-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .q-fields > .cl-f{border-bottom:1px solid var(--hair);flex:none;}
  .q-fields > .cl-f:first-child{grid-column:1 / -1;}
  .q-fields > .cl-f:nth-child(2n){border-left:1px solid var(--hair);}
  .q-fields > .cl-f:nth-last-child(-n+2){border-bottom:0;}
}
/* the record's provenance caption. .fig-cap carries the register; this only
   opens the measure, because the caption has to name three public files. */
.q-cap{margin:1.1rem 0 0;max-width:78ch;}
.q-cap .t{margin-right:.4rem;}

/* ---- the two intakes ----------------------------------------------------
   .ag-cmp is the existing two-column chassis. Only the top margin is set
   here, so the comparison sits a clear beat below the record it supports. */
.q-cmp{margin:clamp(2.2rem,3.6vw,3.2rem) 0 0;}

/* ---- the closure chain (section 06) -------------------------------------
   Five stages, one per row, drawn as a descent rather than a rail: the
   stages are ordered in time and the fourth is the one that does not
   complete on its own. The left rule is the spine; --pass marks the two
   stages that produce evidence, and the class stage stays dashed and
   --unknown because it is a condition, not a result. */
.q-chain{
  list-style:none;margin:clamp(1.9rem,3.2vw,2.7rem) 0 0;padding:0;
  display:grid;gap:0;
}
.q-ch{
  display:grid;
  grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr);
  gap:.4rem 1.1rem;align-items:baseline;
  padding:.85rem 0 .9rem 1.1rem;
  border-left:2px solid var(--hair-strong);
  border-top:1px solid var(--hair);
}
.q-ch:first-child{border-top:0;}
.q-ch.is-ok{border-left-color:var(--pass);}
.q-ch.is-open{border-left-style:dashed;}
.q-ch-n{
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.q-ch-t{
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.055em;
  color:var(--ink);
}
.q-ch.is-ok .q-ch-t{color:var(--pass);}
.q-ch.is-open .q-ch-t{color:var(--unknown,var(--muted));}
.q-ch-d{
  font-family:var(--prose);font-size:1rem;line-height:1.55;color:var(--ink-60);
  max-width:52ch;
}
.q-chain-note{
  margin:1.3rem 0 0;max-width:64ch;
  font-family:var(--prose);font-size:1.02rem;line-height:1.6;color:var(--ink-60);
}
.q-recwrap{margin:clamp(1.8rem,3vw,2.5rem) 0 0;max-width:34rem;}
@media (max-width:760px){
  .q-ch{grid-template-columns:2.4rem minmax(0,1fr);}
  .q-ch-d{grid-column:2;}
  .q-recwrap{max-width:none;}
}

/* #work . the With column (2026-09-04). Six rows face the Without column's
   nine, and the two cards stretch to one height (.ag-cmp align-items:stretch),
   so the sixth row was followed by about 125px of empty card at desk width.
   The list now grows to the card and every row takes an equal share of the
   height, so the hairlines stay contiguous and the space is spread, not
   pooled at the bottom. Where the columns stack the card is as tall as its
   list and these rules are inert. Copy is untouched: the six rows are the
   brief's six. */
#work .q-cmp .ag-col-new .ag-ticks{flex:1 1 auto;display:flex;flex-direction:column;}
#work .q-cmp .ag-col-new .ag-ticks li{flex:1 1 auto;align-content:center;}