/* ============================================================================
   /stem: your stack on one memory, the page's one instrument (sub page system v1.1, 9 Oct 2026).
   Every state of the drawing is drawn here from .bd[data-st] (and [data-s], a moment of the live
   sequence: 0 connect, 1 remember, 2 act); sub.js only sets the attributes. The drawing is
   StemPage.Drawing (stem.aspx.vb), one square of 0..1000 units; its labels are HTML (.fl),
   placed by the .p-* classes below in % of that square (the page may not carry style
   attributes: CSP). Tokens only (no hex outside tos-site.css).
   ============================================================================ */
.sp .bd .ins-c { container-type: inline-size; }
.sp .bd .ly { opacity: 0; transition: opacity .45s ease; }
.sp .bd.reset, .sp .bd.reset * { transition: none !important; animation: none !important; }

/* the parts */
.sp .bd .st-tk .g-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-wire line { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: opacity .45s ease; }
.sp .bd .ly-bnd { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .st-off circle { fill: var(--lp-dot-off); }
.sp .bd .ly-mem { fill: var(--lp-ink); }
.sp .bd .sys { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill .45s ease; }
.sp .bd .ent { fill: var(--lp-accent); opacity: 0; }
.sp .bd .key { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: opacity .45s ease; }
.sp .bd .gate { fill: var(--lp-ink); transition: opacity .4s ease; }
.sp .bd .held { fill: var(--lp-accent); }
.sp .bd .act { fill: var(--lp-accent); opacity: 0; transition: opacity .3s ease, transform 0s linear .3s; }

/* labels: the systems are always named; every other word only in its state */
.sp .bd .fl { opacity: 0; transition: opacity .3s ease; }
.sp .bd .fl-sys { opacity: 1; color: var(--lp-ink); }
.sp .bd .fl-dk { background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-ink { color: var(--lp-ink); }
.sp .bd .fl-top { color: var(--lp-muted); }
.sp .bd .fl-hum { white-space: normal; width: 24%; line-height: 1.15; }
.sp .bd .fl-ctr { display: flex; flex-direction: column; align-items: center; width: 30%; white-space: normal; text-align: center; color: var(--lp-ink); }
.sp .bd .fl-ctr b { font: 600 clamp(14px, 3.4cqw, 20px)/1.15 var(--tos-font-body); letter-spacing: -.015em; }
.sp .bd .fl-ctr .rec { color: var(--lp-muted); }
@media (min-width: 1180px) { .sp .stage .fl { font-size: 14px; } .sp .stage .fl.rec { font-size: 12px; } }

/* ---- the live sequence (seq) ---- */
/* 0 connect: each system wired to the memory */
.sp .bd[data-st="seq"][data-s="0"] .ly-wire,
.sp .bd[data-st="seq"][data-s="0"] .fl-con { opacity: 1; }
/* 1 remember: what they know comes in along the wires, and the memory lights */
.sp .bd[data-st="seq"][data-s="1"] .ly-wire { opacity: 1; }
.sp .bd[data-st="seq"][data-s="1"] .ent { animation: stem-in 2.4s var(--dl-ease) both; }
.sp .bd[data-st="seq"][data-s="1"] .ly-mem { opacity: 1; transition-delay: 1.3s; }
@keyframes stem-in {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  12% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  62% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
/* 2 act: one action goes back out, and waits at the boundary for a named human */
.sp .bd[data-st="seq"][data-s="2"] .ly-wire { opacity: .3; }
.sp .bd[data-st="seq"][data-s="2"] .ly-mem,
.sp .bd[data-st="seq"][data-s="2"] .ly-bnd,
.sp .bd[data-st="seq"][data-s="2"] .ly-gate { opacity: 1; }
.sp .bd[data-st="seq"][data-s="2"] .gate:not(.g3) { opacity: 0; }
.sp .bd[data-st="seq"][data-s="2"] .act { opacity: 1; transform: translate(161.2px, 161.2px); transition: opacity .3s ease .3s, transform 1.4s var(--dl-ease) .3s; }
.sp .bd[data-st="seq"][data-s="2"] .fl-hum { opacity: 1; transition-delay: 1.4s; }

/* ---- 02 the difference: data comes in, and every action out waits at the boundary ---- */
.sp .bd[data-st="dif"] .ly-wire,
.sp .bd[data-st="dif"] .ly-mem,
.sp .bd[data-st="dif"] .ly-bnd,
.sp .bd[data-st="dif"] .ly-gate,
.sp .bd[data-st="dif"] .ly-held,
.sp .bd[data-st="dif"] .fl-top,
.sp .bd[data-st="dif"] .fl-hum { opacity: 1; }

/* ---- 03 who it is for: the systems stay where they are, the memory is added ---- */
.sp .bd[data-st="who"] .sys { fill: var(--lp-ink); }
.sp .bd[data-st="who"] .ly-mem,
.sp .bd[data-st="who"] .fl-mem { opacity: 1; }
.sp .bd[data-st="who"] .ly-wire { opacity: .25; }

/* ---- 04 what is yours: a credential on every connection, one of them removed; a governed index ---- */
.sp .bd[data-st="own"] .ly-wire,
.sp .bd[data-st="own"] .ly-key,
.sp .bd[data-st="own"] .ly-mem,
.sp .bd[data-st="own"] .fl-idx { opacity: 1; }
.sp .bd[data-st="own"] .ly-wire .w7 { opacity: .35; stroke-dasharray: 4 6; }
.sp .bd[data-st="own"] .ly-key .k7 { opacity: 0; }

/* where each entry starts (its system), so it travels in along its own wire */
.sp .bd .e0 { --dx: 0px; --dy: -92px; }
.sp .bd .e1 { --dx: 65.05px; --dy: -65.05px; }
.sp .bd .e2 { --dx: 92px; --dy: 0px; }
.sp .bd .e3 { --dx: 65.05px; --dy: 65.05px; }
.sp .bd .e4 { --dx: 0px; --dy: 92px; }
.sp .bd .e5 { --dx: -65.05px; --dy: 65.05px; }
.sp .bd .e6 { --dx: -92px; --dy: 0px; }
.sp .bd .e7 { --dx: -65.05px; --dy: -65.05px; }
/* staggered arrivals (the mockup set them per element; here by position) */
.sp .bd .st-ent .ent:nth-child(2) { animation-delay: 90ms; }
.sp .bd .st-ent .ent:nth-child(3) { animation-delay: 180ms; }
.sp .bd .st-ent .ent:nth-child(4) { animation-delay: 270ms; }
.sp .bd .st-ent .ent:nth-child(5) { animation-delay: 360ms; }
.sp .bd .st-ent .ent:nth-child(6) { animation-delay: 450ms; }
.sp .bd .st-ent .ent:nth-child(7) { animation-delay: 540ms; }
.sp .bd .st-ent .ent:nth-child(8) { animation-delay: 630ms; }
.sp .bd .ly-wire line:nth-child(2) { transition-delay: 40ms; }
.sp .bd .ly-wire line:nth-child(3) { transition-delay: 80ms; }
.sp .bd .ly-wire line:nth-child(4) { transition-delay: 120ms; }
.sp .bd .ly-wire line:nth-child(5) { transition-delay: 160ms; }
.sp .bd .ly-wire line:nth-child(6) { transition-delay: 200ms; }
.sp .bd .ly-wire line:nth-child(7) { transition-delay: 240ms; }
.sp .bd .ly-wire line:nth-child(8) { transition-delay: 280ms; }

/* ---- where each label sits on the drawing, in % of the square ---- */
.sp .bd .p-s0 { left: 50.00%; top: 14.40%; }
.sp .bd .p-s1 { left: 73.33%; top: 24.07%; }
.sp .bd .p-s2 { left: 83.00%; top: 47.40%; }
.sp .bd .p-s3 { left: 73.33%; top: 75.93%; }
.sp .bd .p-s4 { left: 50.00%; top: 85.60%; }
.sp .bd .p-s5 { left: 26.67%; top: 75.93%; }
.sp .bd .p-s6 { left: 17.00%; top: 47.40%; }
.sp .bd .p-s7 { left: 26.67%; top: 24.07%; }
.sp .bd .p-c { left: 50.00%; top: 50.00%; }
.sp .bd .p-hum { left: 71.20%; top: 67.80%; }
.sp .bd .p-top { left: 50.00%; top: 2.20%; }

/* the hero's copy on a phone: full column, as on /trust */
.sp .inst.is-hero { margin-top: 22px; --ins-w: 560px; }
.sp .inst.is-hero .ro-set { margin-top: 12px; }
.sp .inst.is-hero .ls-x { font-size: 16px; }
/* a small pinned copy (with JavaScript; without it every copy is full size, and keeps every word): the long top label and the human's name give way (the readout says it) */
.sp.js .run .inst:not(.is-hero) .fl-top, .sp.js .run .inst:not(.is-hero) .fl-hum { display: none; }
.sp.js .run .inst:not(.is-hero) .fl { font-size: 12.5px; }
.sp.js .run .inst:not(.is-hero) .fl.rec { font-size: 12px; }

/* ---- the copy ---- */
.sp h1 .ln { display: block; }
.sp .stem-with { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--lp-muted); }
.sp .stem-seal { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--lp-ink); }
.sp .stem-seal::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }
.sp .stem-req .ch-h .body { margin-top: 20px; }
.sp .stem-req .ch-h .body > p { font-size: 17px; }
@media (min-width: 1180px) {
  .sp .run > .ch.hd .hd-b { margin-top: 0; }
  /* the title is two sentences: one step smaller than a one-line title, so it holds four lines at most */
  .sp .run > .ch.hd h1 { font-size: clamp(46px, 4vw, 60px); }
  .sp .stem-req .ch-h .body > p { font-size: 18px; }
}