/* ==========================================================================
   exp35 . s35-stale.css
   Section stylesheet owned by the stale builder. Styles exactly one partial:

     partials/stale.html      page section 5  self-invalidation

   PLAN-35-IA §7 Section 5 asks for three states standing side by side, each
   one a tree with the requirement as the parent. So the figure is three small
   SVGs on one grid, not one animated figure that changes under the reader, and
   not three cards: there is no panel, no border and no fill anywhere below, so
   the tree shape is the only thing carrying structure.

   COLOUR IS THE CONTRACT OF THIS SECTION.
     var(--pass)     verified      the tick, and the rule over a settled state
     var(--stale)    changed,      the ?, the *, the word STALE, the rule over
                     suspect       the middle state, and the tree lines the
                                   doubt travelled along
     var(--unknown)  structure     every tree line in a settled state
                     at rest
     var(--fail)     violated      not used: nothing here is violated, which is
                                   the precise claim the lead makes
     var(--signal)   affordance    not used: nothing here is interactive
   The three states are decodable from the header rule alone, before a single
   glyph is read: green, amber, green.

   Loaded after themes.css and agent-sections.css, so a plain class selector
   already out-ranks a theme repaint of .fig .st. State strokes still carry
   .st in the selector, because a state must never be re-keyed by a theme.
   Tokens only, no hard-coded colours. All 7 themes.
   ========================================================================== */

/* ---------- the two lead paragraphs -------------------------------------
   The second one is the precision claim (what Proof does NOT do). It is the
   same tier as the first, not a footnote, so it keeps .lead's size and colour
   and only takes air above it. */
.ag-sec-stale .section-head{max-width:64ch;}
.ag-sec-stale .s5-lead2{margin-top:.85rem;}

/* ---------- the three states ------------------------------------------- */
.s5-fig{margin:2.6rem 0 0;}

.s5-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3.2vw,2.8rem);align-items:start;
}
/* 260 viewBox units drawn at up to 340px is a 1.31 scale: the 12.5px node
   labels land at about 16px, the same optical size as the record row under
   them. Wider than that and the figure starts shouting over the lead. */
.ag .fig .s5-grid > .s5-svg{
  display:block;width:100%;max-width:340px;height:auto;justify-self:start;
}

/* the state header, and the rule that is the whole legend */
.ag .fig .s5-hd{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
}
.ag .fig .s5-svg.is-ok .s5-hd{fill:var(--pass);}
.ag .fig .s5-svg.is-changed .s5-hd{fill:var(--stale,var(--fail));}

.ag .fig .st.s5-rule{stroke-width:2.6;}
.ag .fig .s5-svg.is-ok .st.s5-rule{stroke:var(--pass);}
.ag .fig .s5-svg.is-changed .st.s5-rule{stroke:var(--stale,var(--fail));}

/* the tree. A settled tree is structure at rest, so it is --unknown in every
   theme, never the ink colour and never the accent. The middle tree is the one
   place where an edge carries a state: the doubt reached the document and the
   evidence by travelling the relationships, which is what the lead claims. */
.ag .fig .st.s5-tr{stroke:var(--unknown,var(--muted));stroke-width:1.3;}
.ag .fig .st.s5-tr-x{stroke:var(--stale,var(--fail));stroke-width:1.6;}

/* the marks in the right-hand gutter */
.ag .fig .s5-mk{
  font-family:var(--mono);font-size:19px;font-weight:600;
  fill:var(--stale,var(--fail));
}
.ag .fig .s5-word{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  fill:var(--stale,var(--fail));
}

/* ---------- the change record ------------------------------------------
   Same three columns, same gap, so each state of the record sits under the
   tree state it belongs to. One row of mono; it is a caption to the tree. */
.s5-rec{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3.2vw,2.8rem);align-items:center;
  margin:1.5rem 0 0;padding-top:.95rem;border-top:1px solid var(--hair);
}
.s5-rec p{
  display:flex;align-items:center;gap:.62em;flex-wrap:wrap;min-width:0;margin:0;
  font-family:var(--mono);font-size:.72rem;line-height:1.6;
}
.s5-rec-k{color:var(--ink-40);letter-spacing:.13em;text-transform:uppercase;}
.s5-rec-id{color:var(--ink);font-weight:600;letter-spacing:.07em;}
.s5-rec-v{font-weight:600;letter-spacing:.12em;}
.s5-rec-v.is-stale{color:var(--stale,var(--fail));}
.s5-rec-v.is-pass{color:var(--pass);}

/* the arrow is drawn, not typed: a unicode arrow in a line of record text
   would read as prose punctuation. It is structure, so it is --unknown. */
.s5-rec .s5-arw{flex:0 0 auto;width:26px;height:10px;overflow:visible;}
.ag .fig .s5-arw .st{stroke:var(--unknown,var(--muted));stroke-width:1.4;}

/* the caption sits below the record, not against it */
.s5-fig .fig-cap{margin-top:1.35rem;}

/* ---------- the line the section is really about ------------------------ */
.ag-sec-stale .ag-big{max-width:36ch;}

/* ---------- phone -------------------------------------------------------
   The three states stack, so the story runs top to bottom instead of left to
   right, and each record line follows its own tree. Nothing scrolls sideways. */
@media (max-width:820px){
  .s5-grid{grid-template-columns:1fr;gap:2rem;}
  .ag .fig .s5-grid > .s5-svg{max-width:none;}
  .s5-rec{grid-template-columns:1fr;gap:.45rem;padding-top:.85rem;margin-top:1.2rem;}
}

/* ---------- reduced motion ---------------------------------------------
   site.css already pins .dr and .fx to the finished frame. Nothing in this
   section moves on its own, so there is nothing further to hold. */

/* ---------- themes ------------------------------------------------------
   Only the two themes that re-key structure need a word here; the rest follow
   the tokens. brutal thickens every .fig .st, so the tree would out-weigh the
   state rule; keep the rule the heaviest line in the figure. */
html[data-theme="brutal"] .ag .fig .st.s5-rule{stroke-width:4;}
html[data-theme="brutal"] .ag .fig .st.s5-tr{stroke-width:2;}
html[data-theme="brutal"] .s5-rec{border-top:2px solid #000;}
/* terminal re-keys --fig-st to --unknown for every figure. The tree already
   asks for --unknown by name, so it agrees; the state strokes must not. */
html[data-theme="terminal"] .ag .fig .s5-svg.is-ok .st.s5-rule{stroke:var(--pass);}
html[data-theme="terminal"] .ag .fig .st.s5-tr-x{stroke:var(--stale,var(--fail));}

/* House provenance caption: invented specimens are marked in the RENDERED page. */
.s5-eg{margin:.9rem 0 0;font-size:.82rem;line-height:1.5;color:var(--label-text);max-width:62ch;}
.s5-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;}