/* ==========================================================================
   exp34 . v2-selfinv.css
   Styles for partials2/04-self-invalidation.html (.si- prefix): the
   three-phase self-invalidation figure (healthy, stale, verified).
   The phase lives in [data-si-phase] on .si-fig (1, 2 or 3); every
   color and visibility difference is CSS keyed off that attribute,
   so the inline script only flips the attribute, the rail and the
   caption. Tokens, layout, stage, rail and the reveal mechanism all
   come from site.css. No tokens are redefined here. Semantic colors
   are read through the --sem-* custom properties defined by
   v2-top.css at :root (re-keyed per theme, see THEME-VERIFIED.md);
   each use carries a fallback so the section renders correctly
   without v2-top.css.
   ========================================================================== */

/* ---------- artifact frame ---------- */
.si-art{margin-top:2.6rem;}
.si-rail{max-width:none;}
.si-cap{margin-top:1.05rem;}

/* ---------- node cards + edges (base state: verified) ---------- */
.si-svg .si-n{
  fill:var(--card);
  stroke:var(--sem-verified,var(--pass));stroke-width:1.6;
  transition:stroke .45s ease;
}
.si-svg .si-e{
  fill:none;stroke:var(--sem-verified,var(--pass));stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s ease;
}
.si-svg .si-name{font-size:12px;letter-spacing:.09em;fill:var(--ink);}
.si-svg .si-st{font-size:11px;letter-spacing:.04em;}
.si-svg .si-g-ok{fill:var(--sem-verified,var(--pass));opacity:1;transition:opacity .4s ease;}
.si-svg .si-g-q{fill:var(--sem-unknown,#6B6F66);opacity:0;transition:opacity .4s ease;}
.si-svg .si-g-ch{fill:var(--sem-changed,#B45309);opacity:0;transition:opacity .4s ease;}

/* ---------- phase chips + scan line ---------- */
.si-push,.si-staleb,.si-verify,.si-allv{opacity:0;transition:opacity .45s ease;}
.si-svg .si-chip{fill:var(--card);stroke-width:1.4;}
.si-svg .si-chip-t{font-size:11px;letter-spacing:.06em;}
.si-svg .si-chip-a{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.si-push .si-chip{stroke:var(--sem-changed,#B45309);}
.si-push .si-chip-t{fill:var(--sem-changed,#B45309);}
.si-push .si-chip-a{stroke:var(--sem-changed,#B45309);}
.si-staleb .si-chip{stroke:var(--sem-stale,var(--fail));}
.si-staleb .si-chip-t{fill:var(--sem-stale,var(--fail));font-size:10.5px;letter-spacing:.12em;}
/* VERIFY is the one action in the figure, so it takes the interactive
   chrome accent; everything semantic stays on the --sem-* contract */
.si-verify .si-chip{stroke:var(--signal);}
.si-verify .si-chip-t{fill:var(--signal);letter-spacing:.16em;}
.si-allv .si-chip{stroke:var(--sem-verified,var(--pass));}
.si-allv .si-chip-t{fill:var(--sem-verified,var(--pass));font-size:10.5px;letter-spacing:.1em;}
.si-svg .si-scan{stroke:var(--signal);stroke-width:1.6;opacity:0;}

/* ---------- phase 2 . a change lands ---------- */
.si-fig[data-si-phase="2"] .si-svg .si-g-ok{opacity:0;}
.si-fig[data-si-phase="2"] .si-svg .si-g-q,
.si-fig[data-si-phase="2"] .si-svg .si-g-ch{opacity:1;}
.si-fig[data-si-phase="2"] .si-svg [data-si-node="code"] .si-n,
.si-fig[data-si-phase="2"] .si-eg-code .si-e{stroke:var(--sem-changed,#B45309);}
.si-fig[data-si-phase="2"] .si-svg [data-si-node="req"] .si-n,
.si-fig[data-si-phase="2"] .si-svg [data-si-node="docs"] .si-n,
.si-fig[data-si-phase="2"] .si-svg [data-si-node="test"] .si-n,
.si-fig[data-si-phase="2"] .si-eg-docs .si-e,
.si-fig[data-si-phase="2"] .si-eg-test .si-e{stroke:var(--sem-unknown,#6B6F66);}
/* the change lands on code first, suspicion spreads outward */
.si-fig[data-si-phase="2"] .si-svg [data-si-node="code"] .si-g-ch{transition-delay:.15s;}
.si-fig[data-si-phase="2"] .si-svg [data-si-node="req"] .si-g-q{transition-delay:.5s;}
.si-fig[data-si-phase="2"] .si-svg [data-si-node="docs"] .si-g-q{transition-delay:.7s;}
.si-fig[data-si-phase="2"] .si-svg [data-si-node="test"] .si-g-q{transition-delay:.9s;}
.si-fig[data-si-phase="2"] .si-push{opacity:1;transition-delay:.1s;}
.si-fig[data-si-phase="2"] .si-staleb{opacity:1;transition-delay:1.1s;}

/* ---------- phase 3 . verification runs ---------- */
.si-fig[data-si-phase="3"] .si-verify{opacity:1;transition-delay:.05s;}
.si-fig[data-si-phase="3"] .si-allv{opacity:1;transition-delay:1.4s;}
/* checks repopulate as the scan passes their row */
.si-fig[data-si-phase="3"] .si-svg .si-g-ok{transition-delay:.45s;}
.si-fig[data-si-phase="3"] .si-svg [data-si-node="code"] .si-g-ok{transition-delay:.95s;}
.si-fig[data-si-phase="3"] .si-svg [data-si-node="docs"] .si-g-ok{transition-delay:1.1s;}
.si-fig[data-si-phase="3"] .si-svg [data-si-node="test"] .si-g-ok{transition-delay:1.25s;}
.si-fig[data-si-phase="3"] .si-scan{
  animation:si-scan 1.3s cubic-bezier(.35,.6,.35,1) .15s both;
}
@keyframes si-scan{
  0%{opacity:0;transform:translateY(0);}
  12%{opacity:.85;}
  78%{opacity:.85;}
  100%{opacity:0;transform:translateY(250px);}
}

/* ---------- rail progress follows the phase ---------- */
.si-fig .rail-line i{--p:100%;}
.si-fig[data-si-phase="1"] .rail-line i{--p:5%;}
.si-fig[data-si-phase="2"] .rail-line i{--p:52%;}

/* ---------- the differentiator line ---------- */
.si-sign{
  margin:2.8rem 0 0;
  font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.4;
  font-weight:600;letter-spacing:-.018em;color:var(--ink);
  max-width:56ch;text-wrap:balance;
}

/* ---------- before the arrival draw ---------- */
.js .si-stage:not(.in) .si-g-ok,
.js .si-stage:not(.in) .si-g-q,
.js .si-stage:not(.in) .si-g-ch,
.js .si-stage:not(.in) .si-push,
.js .si-stage:not(.in) .si-staleb,
.js .si-stage:not(.in) .si-verify,
.js .si-stage:not(.in) .si-allv{opacity:0 !important;}

/* ---------- settled states: qa pin + reduced motion (phase 3) ---------- */
html.qa .si-svg .si-g-ok,html.reduced .si-svg .si-g-ok{opacity:1 !important;transition:none !important;}
html.qa .si-svg .si-g-q,html.qa .si-svg .si-g-ch,html.qa .si-push,html.qa .si-staleb,
html.reduced .si-svg .si-g-q,html.reduced .si-svg .si-g-ch,html.reduced .si-push,html.reduced .si-staleb{opacity:0 !important;transition:none !important;}
html.qa .si-verify,html.qa .si-allv,html.reduced .si-verify,html.reduced .si-allv{opacity:1 !important;transition:none !important;}
html.qa .si-scan,html.reduced .si-scan{animation:none !important;opacity:0 !important;}
html.qa .si-svg .si-n,html.qa .si-svg .si-e,
html.reduced .si-svg .si-n,html.reduced .si-svg .si-e{transition:none !important;}
@media (prefers-reduced-motion:reduce){
  .si-svg .si-g-ok{opacity:1 !important;transition:none !important;}
  .si-svg .si-g-q,.si-svg .si-g-ch,.si-push,.si-staleb{opacity:0 !important;transition:none !important;}
  .si-verify,.si-allv{opacity:1 !important;transition:none !important;}
  .si-scan{animation:none !important;opacity:0 !important;}
  .si-svg .si-n,.si-svg .si-e{transition:none !important;}
  .rail-line i{transition:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .si-art{margin-top:2rem;}
  .si-sign{font-size:1.12rem;}
}