/* ==========================================================================
   exp32 . hero promise lifecycle (.lc)
   Everything the component needs beyond assets/site.css. Load AFTER
   site.css and themes.css.
   Contract: partials/lifecycle.html. No JS of its own: the draw comes from
   the shell mechanism (site.js adds .in to [data-reveal]; strokes carry
   pathLength="1" + .dr with --d/--dur, text carries .fx with --td).
   Colour is tokens only, so all seven themes follow.
   ========================================================================== */

.lc{
  /* role colours, indirected once so a theme can substitute a legible cousin */
  --lc-sig:var(--signal);
  --lc-fail:var(--fail);
  --lc-pass:var(--pass);
  /* rhythm */
  --lc-lh:1.74rem;      /* one step row = one line box */
  --lc-num:2.1rem;      /* step-number column */
  --lc-mark:1.6rem;     /* glyph + arrow column (the rail) */
  --lc-gap:.78rem;
  --lc-state:6.3rem;    /* PROMISE / ENFORCED / ... column */
  --lc-arrow-h:3.2rem;  /* connector height */

  margin:clamp(2.1rem,3.4vw,3rem) auto 0;
  /* the block hugs its own longest sentence, so it stays optically centred
     under a centred hero and re-sizes itself if a theme changes the prose
     face. The cap is roughly the h1 measure. */
  width:fit-content;
  max-width:min(100%,782px);
  text-align:left;      /* the hero copy is centred; the figure is not */
}

/* ---------- rows ---------- */
.lc-steps{list-style:none;margin:0;padding:0;}
.lc-step{margin:0;}
.lc-row,.lc-link{
  display:grid;
  grid-template-columns:var(--lc-num) var(--lc-mark) minmax(0,1fr);
  column-gap:var(--lc-gap);
}
.lc-row{align-items:start;}
.lc-link{align-items:center;}

.lc-n{
  font-family:var(--mono);font-size:.76rem;font-weight:500;
  line-height:var(--lc-lh);letter-spacing:.05em;
  color:var(--ink-40);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---------- the rail glyphs ---------- */
.lc-glyph{display:block;width:var(--lc-mark);height:var(--lc-lh);overflow:visible;}
.lc-arrow{display:block;width:var(--lc-mark);height:var(--lc-arrow-h);overflow:visible;}
.lc [class*="lc-dr-"],.lc-hair{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.lc-ring{stroke-width:1.35;}
.lc-ring2{stroke-width:1;stroke-opacity:.5;}
.lc-mark-in{stroke-width:1.5;}
.lc-hair{stroke:var(--ink);stroke-opacity:.4;stroke-width:1.15;}

.lc-dr-sig{stroke:var(--lc-sig);}
.lc-dr-ink{stroke:var(--ink);stroke-opacity:.6;}
.lc-dr-fail{stroke:var(--lc-fail);}
.lc-dr-pass{stroke:var(--lc-pass);}

/* ---------- the sentence pair ---------- */
.lc-text{
  display:grid;
  grid-template-columns:var(--lc-state) minmax(0,1fr);
  column-gap:.9rem;align-items:baseline;
}
.lc-state{
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  line-height:var(--lc-lh);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.lc-s1 .lc-state{color:var(--lc-sig);}
.lc-s2 .lc-state{color:var(--ink);}
.lc-s3 .lc-state{color:var(--lc-fail);}
.lc-s4 .lc-state,.lc-s5 .lc-state{color:var(--lc-pass);}

.lc-say{
  margin:0;
  /* the human layer: --prose is the shell's readable sans, which the terminal
     theme keeps as a real sans while every display role there goes mono */
  font-family:var(--prose);font-size:1.06rem;line-height:var(--lc-lh);
  letter-spacing:-.005em;color:var(--ink);
  text-wrap:pretty;
}
.lc-say code{font-family:var(--mono);font-size:.94em;letter-spacing:0;}

/* the receipt slot. It hides itself while empty, so emptying the span is the
   whole revert: drop a real <a> in to publish a resolving receipt, or clear it
   and step 04 reads without a number. */
.lc-receipt{display:none;}
.lc-receipt:not(:empty){
  display:inline-block;margin-left:.62em;
  font-family:var(--mono);font-size:.8em;letter-spacing:.02em;
  color:var(--lc-pass);
}
.lc-receipt a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;}

/* ---------- transition labels ---------- */
.lc-lab{
  display:flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:.7rem;line-height:1.4;
  letter-spacing:.03em;color:var(--muted);
}
.lc-flourish{flex:0 0 auto;width:46px;height:13px;overflow:visible;}
.lc-flourish .lc-dr-sig{stroke-width:1.15;stroke-opacity:.85;}

/* ---------- caption ---------- */
.lc-cap{
  margin:1.1rem 0 0;padding-left:calc(var(--lc-num) + var(--lc-mark) + 2 * var(--lc-gap));
  font-family:var(--mono);font-size:.7rem;line-height:1.65;
  color:var(--ink-40);max-width:100%;
}
.lc-cap b{color:var(--ink-60);font-weight:500;}

/* ---------- theme patches (legibility only, still token driven) ----------
   olo paints --signal / --pass the same mint that is unreadable on paper;
   the theme already ships --signal-ink for exactly this. */
html[data-theme="olo"] .lc{--lc-sig:var(--signal-ink);--lc-pass:var(--signal-ink);}
/* terminal: saturated hairlines read better than alpha'd phosphor */
html[data-theme="terminal"] .lc-hair{stroke:var(--signal);stroke-opacity:.5;}
html[data-theme="terminal"] .lc-dr-ink{stroke:var(--ink);stroke-opacity:.75;}
/* the terminal theme left-aligns the hero, so the figure follows it. The mount
   is a sibling of .hero-copy, so the shell's `.hero-copy > *` centring rules
   never reach this block: it centres itself, and un-centres here. */
html[data-theme="terminal"] .lc{margin-inline:0;}
/* brutal: no half tones anywhere else on the page either */
html[data-theme="brutal"] .lc-hair{stroke-opacity:.8;stroke-width:1.4;}
html[data-theme="brutal"] .lc-ring{stroke-width:1.9;}
html[data-theme="brutal"] .lc-mark-in{stroke-width:2;}

/* ---------- stacked layout ---------- */
@media (max-width: 719px){
  .lc{
    /* one shared line box keeps the number, the glyph and the state word on
       the same optical centre once the sentence drops to its own line */
    --lc-lh:1.5rem;
    --lc-num:1.7rem;--lc-mark:1.35rem;--lc-gap:.6rem;
    --lc-arrow-h:2.6rem;
    margin-top:2rem;
  }
  .lc-text{grid-template-columns:minmax(0,1fr);row-gap:.05rem;}
  .lc-state{font-size:.72rem;}
  .lc-say{font-size:1.05rem;line-height:1.55;padding-bottom:.55rem;}
  .lc-lab{font-size:.68rem;}
  .lc-flourish{width:38px;}
  .lc-cap{padding-left:0;font-size:.68rem;}
}

/* ---------- settled state ----------
   site.css already pins [data-reveal] / .fx / .dr for html.qa, html.reduced
   and prefers-reduced-motion. Nothing to add: this component owns no
   animation of its own. */