/* ==========================================================================
   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.
   ========================================================================== */

.cl .section-head{max-width:62ch;}

/* ==========================================================================
   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:calc(var(--radius) - 3px);
  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);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 22px 48px -30px rgba(var(--ink-rgb),.42);
  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 30px 60px -30px rgba(var(--ink-rgb),.5);
  }
}
@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:.63rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:calc(var(--radius) - 3px);
  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:.63rem;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:.63rem;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;
}

/* ==========================================================================
   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;
  font-size:clamp(1.22rem,2vw,1.58rem);line-height:1.3;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;
  font-family:var(--mono);font-size:.67rem;line-height:1.8;letter-spacing:.1em;
  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:calc(var(--radius) - 3px);
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;
  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;}

/* ==========================================================================
   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;letter-spacing:.16em;
    color:var(--ink);
  }
  .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. */
.cl-state{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--label-text);
  border:1px solid var(--hair,currentColor);border-radius:2px;padding:.18rem .5rem;}
.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;}

/* The chip is the record's real disposition, which is product jargon. Plan §2.3:
   "the website must avoid making visitors decode the terminology". */
.cl-state-gloss{display:block;margin-top:.35rem;font-size:.78rem;line-height:1.5;
  color:var(--label-text);max-width:44ch;text-transform:none;letter-spacing:0;}