/* The flow builder's logic, data and testing pages (site-src/gen/dm/steps_logic.py, agent J, 2026-10-07). Class prefix
   sl-. Built on system.css tokens and the kit (kit.css); Instagram's colours stay inside depictions (--ig-*). Every
   signature is drawn at one size and scaled as a whole by the kit's fit (data-kit-fit, data-kit-fit-sm up to 860px). */

/* ───────────── the signature frame (shared) ───────────── */
.sl-sig { margin: 0; }
/* Instagram's meta grey on the tinted grounds here, one step darker for AA (as steps-msg.css); a drawn screen keeps its
   own direction whatever the page's is: the canvas, Instagram and the app's panels are drawn left to right */
.sl-sig, .kit-step-v, .sl-rv, .sl-answ { --ig-meta: #6b6b6b; }
.sl-stage, .sl-rv, .sl-answ { direction: ltr; }
.sl-sig [data-in]:not(.on) { display: none; }
.sl-box { position: relative; display: grid; justify-items: center; padding: var(--s-12) var(--s-6) var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: clip; }
.sl-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 32%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); pointer-events: none; }
.sl-stage { font-family: var(--font); text-align: start; color: var(--ink); }
.sl-sig.is-reset .sl-stage { opacity: 0; transition: opacity 0.6s var(--ease); }
.sl-k { margin: 0 0 10px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
.sl-line { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; justify-content: center; min-height: 34px; }
.sl-line span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--canvas); border: var(--hairline) solid var(--line); font-size: 13.5px; font-weight: 550; color: var(--ink-2); animation: sl-in 0.35s var(--ease) backwards; }
.sl-line .i { width: 16px; height: 16px; color: var(--accent-ink); }
@keyframes sl-in { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 640px) { .sl-box { padding: var(--s-8) var(--s-3) var(--s-6); border-radius: var(--r-xl); } }
@media (prefers-reduced-motion: reduce) { .sl-line span, .sl-sig * { animation: none !important; transition: none !important; } }

/* people without photos: a letter on a tint */
.sl-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--instagram) 13%, var(--surface)); color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); }
.sl-av.t1 { background: color-mix(in srgb, var(--step-violet) 14%, var(--surface)); color: color-mix(in srgb, var(--step-violet) 88%, var(--ink)); }
.sl-av.t2 { background: color-mix(in srgb, var(--step-blue) 14%, var(--surface)); color: color-mix(in srgb, var(--step-blue) 78%, var(--ink)); }
.sl-av.t3 { background: color-mix(in srgb, var(--step-teal) 15%, var(--surface)); color: color-mix(in srgb, var(--step-teal) 68%, var(--ink)); }
.sl-av.t4 { background: color-mix(in srgb, var(--step-amber) 18%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sl-av.t5 { background: color-mix(in srgb, var(--step-pink) 14%, var(--surface)); color: color-mix(in srgb, var(--step-pink) 78%, var(--ink)); }
.sl-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--rail); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sl-chip .i { width: 13px; height: 13px; }

/* a capture D has not taken yet (PLAN §5 rule 8b): a quiet frame that names the screen, never an old capture */
.sl-pending-f { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: var(--hairline) dashed var(--line); background: var(--canvas); padding: var(--s-6); }
.sl-pending.is-phone .sl-pending-f { aspect-ratio: 9 / 19.5; width: min(100%, 280px); margin-inline: auto; }
.sl-pending-f span { display: grid; justify-items: center; gap: 10px; max-width: 40ch; text-align: center; font-size: var(--t-small); color: var(--ink-3c); }
.sl-pending-f .i { width: 22px; height: 22px; color: var(--ink-4); }
.sl-pending figcaption { font-size: var(--t-small); color: var(--ink-3c); text-align: center; }

/* ═════════════ /flow-builder/conditions ═════════════ */

.sl-pc { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); animation: sl-in 0.4s var(--ease) backwards; }
.sl-pc-h { display: flex; align-items: center; gap: 10px; }
.sl-pc-h p { flex: 1; margin: 0; display: grid; line-height: 1.25; }
.sl-pc-h b { font-size: 15px; font-weight: 650; }
.sl-pc-h p span { font-size: 12.5px; color: var(--ink-3); }
.sl-pc-ig .i { width: 18px; height: 18px; color: var(--instagram); }
.sl-pc-l { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 9px; border-top: var(--hairline) solid var(--line-soft); }
.sl-pc-l li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.sl-pc-l .i { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.sl-pc-said { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; background: var(--canvas); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.sl-pc-said .i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--ink-3); }

.sl-seg { display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 9px; background: var(--rail); }
.sl-seg b, .sl-seg em { font-style: normal; padding: 4px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--ink-3c); }
.sl-seg b { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }

.sl-rl-i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--ink-3); }
.sl-rl-i .i { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .sl-pc { gap: 10px; padding: 12px; }
  .sl-pc-l { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
  .sl-pc-l li { gap: 5px; padding: 3px 8px; border-radius: 7px; background: var(--canvas); font-size: 12.5px; }
  .sl-pc-l .i { width: 13px; height: 13px; }
  .sl-pc-said { display: none; }


  .sl-line span { font-size: 12.5px; height: auto; min-height: 34px; padding-block: 6px; text-align: center; }
}

/* the catalogue: every check, four groups */
.sl-cat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.sl-cg { border: var(--hairline) solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lift); overflow: clip; }
.sl-cg header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); padding: var(--s-5) var(--s-6); background: var(--canvas); border-bottom: var(--hairline) solid var(--line); }
.sl-cg h3 { margin: 0; font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.012em; }
.sl-cg header span { align-self: center; font-size: 12.5px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 9px; border-radius: var(--r-pill); }
.sl-cg header p { grid-column: 1 / -1; margin: 0; font-size: var(--t-small); color: var(--ink-3c); line-height: 1.5; }
.sl-cg ul { list-style: none; margin: 0; padding: 0; }
.sl-cr { display: flex; gap: 14px; padding: 14px var(--s-6); }
.sl-cr + .sl-cr { border-top: var(--hairline) solid var(--line-soft); }
.sl-cr-i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sl-cr-i .i { width: 15px; height: 15px; }
.sl-cr-b { min-width: 0; display: grid; gap: 6px; }
.sl-cr-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sl-cr-h b { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.sl-where { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3c); white-space: nowrap; }
.sl-where .i { width: 12px; height: 12px; }
.sl-cr-r { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-cr-r span { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sl-cr-r .is-y { background: var(--accent-soft); color: var(--accent-ink); }
.sl-cr-r .is-n { background: var(--rail); color: var(--ink-2); }
.sl-cr-d { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.sl-cat-k { margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--ink-3c); }
.sl-cat-k span { display: inline-flex; align-items: center; gap: 6px; }
.sl-cat-k .i { width: 14px; height: 14px; color: var(--ink-4); }
@media (max-width: 960px) { .sl-cat { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sl-cr { padding: 12px var(--s-4); gap: 12px; } .sl-cg header { padding: var(--s-4); } }

/* "An answer they gave": the rule editor and its comparisons by type */
.sl-answ { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 40%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.sl-ans { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); max-width: 420px; }
.sl-ans-h { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sl-ans-row { display: grid; }
.sl-ans-row.is-two { grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.sl-sel, .sl-in { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 13.5px; }
.sl-sel b { font-weight: 600; }
.sl-sel small { color: var(--ink-3); font-size: 12px; }
.sl-sel .i { margin-inline-start: auto; width: 14px; height: 14px; color: var(--ink-4); }
.sl-sel.is-open { border-color: color-mix(in srgb, var(--step-amber) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-amber) 16%, transparent); }
.sl-in { font-variant-numeric: tabular-nums; font-weight: 600; }
.sl-ans-out { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.sl-ans-out .i { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--accent-soft); stroke-width: 3; }
.sl-ops { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 14px; border: var(--hairline) solid var(--line); background: var(--surface); overflow: clip; }
.sl-ops li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; }
.sl-ops li + li { border-top: var(--hairline) solid var(--line-soft); }
.sl-ops b { font-weight: 650; color: var(--ink); }
.sl-ops span { color: var(--ink-2); }
@media (max-width: 640px) { .sl-answ { padding: var(--s-4); } .sl-ops li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ───────────── shared pieces of the step signatures ───────────── */
.sl-tl-on { display: none !important; }

/* the step that is running (QA pass 3: a pale ring among white cards was too quiet). The cards at rest sit flat on the
   canvas tint; the running one is white and raised, with its family's colour as a rail down its leading edge, a ring
   and a filled tile, and its title heavier: shape, lift and weight, never colour alone */

.sl-mute { color: var(--ink-3c); }
.sl-phone { position: relative; width: 290px; height: 590px; padding: 9px; border-radius: 48px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), inset 0 0 0 5px #0b0c0e, 0 30px 60px -22px rgb(15 23 42 / 0.42), 0 0 0 1px rgb(0 0 0 / 0.55); }
.sl-phone .ps-screen { border-radius: 40px; display: flex; flex-direction: column; overflow: hidden; }
.sl-phone .ig-th, .sl-th { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; overflow: hidden; }
.sl-th .ig-b { font-size: 13px; }
.sl-qr { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-qr span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--ig-blue); color: var(--ig-blue); font-size: 12.5px; font-weight: 600; background: #fff; }
.sl-qr span.tap { background: var(--ig-blue); color: #fff; }
.sl-typing { margin: 0 0 0 34px; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 18px; background: var(--ig-grey); width: max-content; }
.sl-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ig-meta); animation: sl-dot 1s infinite ease-in-out; }
.sl-typing i:nth-child(2) { animation-delay: 0.15s; } .sl-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sl-dot { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
.sl-stamp { margin: 6px 0 2px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ig-meta); }
.sl-photo { width: 150px; height: 112px; object-fit: cover; border-radius: 16px; display: block; }
.sl-btn, .sl-btn-g { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sl-btn { background: var(--accent); color: var(--hero-ink); }
.sl-btn.tap { box-shadow: 0 0 0 4px var(--accent-soft); }
.sl-btn-g { border: var(--hairline) solid var(--line); color: var(--ink-2); background: var(--surface); }
.sl-push { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, var(--canvas)); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); animation: sl-in 0.4s var(--ease) backwards; }
.sl-push-i img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.sl-push p { flex: 1; margin: 0; display: grid; gap: 1px; font-size: 12.5px; line-height: 1.35; min-width: 0; }
.sl-push b { font-weight: 650; }
.sl-push p span { color: var(--ink-2); }
.sl-push time { font-size: 11px; color: var(--ink-3); }
.sl-pp { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.sl-pp-h { display: flex; align-items: center; gap: 10px; }
.sl-pp-h p { margin: 0; display: grid; line-height: 1.3; }
.sl-pp-h b { font-size: 15px; font-weight: 650; }
.sl-pp-h p span { font-size: 12.5px; color: var(--ink-3); }
.sl-pp-d { margin: 0; display: grid; gap: 8px; padding-top: 12px; border-top: var(--hairline) solid var(--line-soft); }
.sl-pp-d > div, .sl-fd { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.sl-pp-d dt, .sl-fd dt { color: var(--ink-3); font-weight: 550; }
.sl-pp-d dd, .sl-fd dd { margin: 0; color: var(--ink); min-width: 0; }
.sl-pp-t { display: grid; gap: 8px; padding-top: 12px; border-top: var(--hairline) solid var(--line-soft); }
.sl-pp-t > p, .sl-pp-k { margin: 0; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.sl-pp-t > div { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 7px; background: color-mix(in srgb, var(--step-teal) 12%, var(--surface)); color: color-mix(in srgb, var(--step-teal) 72%, var(--ink)); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sl-tag.is-new.on { animation: sl-pop 0.45s var(--ease) backwards; }
.sl-tag.is-add { background: none; border: var(--hairline) dashed var(--line); color: var(--ink-3); font-weight: 550; }
.sl-tag .i { width: 12px; height: 12px; }
@keyframes sl-pop { from { opacity: 0; transform: scale(0.85); } }

/* ═════════════ A/B split ═════════════ */

.sl-mshare { width: 100%; max-width: 230px; display: grid; gap: 8px; }
.sl-mshare ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-mshare li { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--ink-3); }
.sl-mshare li b { margin-inline-start: auto; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sl-mshare > p { margin: 0; display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.sl-mshare em { font-style: normal; color: var(--ink-3); }
.sl-mwire { width: 100%; max-width: 230px; display: grid; gap: 10px; }
.sl-mwire .kit-node-t small { white-space: nowrap; }
.sl-mstat { display: grid; gap: 8px; justify-items: start; font-size: 13px; color: var(--ink-2); }
.sl-mstat p { margin: 0; }
.sl-mstat b { color: var(--ink); font-size: 15px; }
.sl-mstat-r { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--rail); }
.sl-mstat-r span { padding: 3px 8px; border-radius: 7px; font-size: 11.5px; color: var(--ink-3c); }
.sl-mstat-r .is-on { background: var(--surface); color: var(--ink); font-weight: 600; }

/* ═════════════ Wait ═════════════ */
.sl-dl .sl-stage { display: grid; grid-template-columns: 236px 410px 300px; gap: 0 36px; justify-content: center; }

.sl-dl-tl ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sl-dl-tl ol::before { content: ''; position: absolute; left: 66px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.sl-tl-r { position: relative; display: grid; grid-template-columns: 48px 38px minmax(0, 1fr); align-items: start; gap: 0 4px; padding: 10px 10px 10px 0; border-radius: 12px; transition: background 0.3s var(--ease); }
.sl-tl-r:has(> .sl-tl-on.on) { background: var(--accent-soft); }
.sl-tl-r time { padding-top: 5px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); text-align: end; font-variant-numeric: tabular-nums; }
.sl-tl-d { position: relative; z-index: 1; width: 28px; height: 28px; margin-inline-start: 5px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: var(--hairline) solid var(--line); color: var(--ink-3); }
.sl-tl-d .i { width: 14px; height: 14px; }
.sl-tl-r:has(> .sl-tl-on.on) .sl-tl-d { background: var(--accent); border-color: var(--accent); color: var(--hero-ink); }
.sl-tl-r p { margin: 0; display: grid; gap: 1px; padding-top: 2px; }
.sl-tl-r b { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.sl-tl-r p span { font-size: 12.5px; color: var(--ink-3); }
.sl-tl-r.is-edge .sl-tl-d { border-style: dashed; color: var(--danger-ink); }
.sl-tl-r.is-edge b { color: var(--ink-2); }
.sl-dl-c { display: grid; justify-items: center; }
@media (max-width: 860px) {
  .sl-dl .sl-stage { grid-template-columns: 340px; gap: 18px 0; }
  .sl-dl-a { display: none; }
  .sl-dl-c { order: -1; }
}
.sl-mchat { width: 100%; display: grid; gap: 6px; color: #000; }
.sl-mchat .ig-b { font-size: 12.5px; }

.sl-mcap { margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sl-mcap .i { width: 14px; height: 14px; }

/* ═════════════ Tags and Notify (a canvas column, a middle, a right) ═════════════ */
.sl-tg .sl-stage { display: grid; grid-template-columns: 260px 380px 330px; gap: 0 36px; justify-content: center; padding-bottom: 50px; }
.sl-tg-o { display: grid; align-content: start; }
.sl-tg-on { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sl-tg-on .i { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .sl-nt .sl-stage { grid-template-columns: 340px; gap: 18px 0; }
}
.sl-pick { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); max-width: 440px; margin-inline: auto; }
.sl-pick-h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sl-pick-h .i { width: 16px; height: 16px; color: color-mix(in srgb, var(--step-teal) 72%, var(--ink)); }
.sl-pick-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; border: var(--hairline) solid color-mix(in srgb, var(--step-teal) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-teal) 14%, transparent); }
.sl-caret { font-size: 13.5px; color: var(--ink); }
.sl-caret::after { content: ''; display: inline-block; width: 1.5px; height: 16px; margin-inline-start: 1px; vertical-align: -3px; background: var(--ink); animation: sl-blink 1s steps(2) infinite; }
@keyframes sl-blink { 50% { opacity: 0; } }
.sl-pick-m { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--step-amber) 10%, var(--surface)); border: var(--hairline) solid color-mix(in srgb, var(--step-amber) 30%, var(--line)); }
.sl-pick-m p { margin: 0; font-size: 13px; color: var(--ink); }
.sl-pick-b { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-pick-b span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sl-pick-b .is-pri { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sl-pick-l { margin: 4px 0 0; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.sl-pick ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ═════════════ Set field ═════════════ */
.sl-sfx .sl-stage { display: grid; grid-template-columns: 250px 450px 320px; gap: 0 32px; justify-content: center; padding-bottom: 54px; }
.sl-sf-said { display: grid; gap: 6px; padding: 14px 12px; border-radius: 16px; background: #fff; border: var(--hairline) solid var(--line); color: #000; }

.sl-sf-said .ig-b { font-size: 12.5px; }

.sl-fds { margin: 0; display: grid; gap: 10px; }
.sl-fd dd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-fd-new.on { font-weight: 650; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--step-teal) 12%, var(--surface)); color: color-mix(in srgb, var(--step-teal) 72%, var(--ink)); animation: sl-pop 0.4s var(--ease) backwards; }
.sl-fd-new.sl-mute.on { background: var(--rail); color: var(--ink-3c); }
.sl-fd-bad { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--danger-ink); }
.sl-fd-bad .i { width: 13px; height: 13px; }
.sl-run { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); animation: sl-in 0.4s var(--ease) backwards; }
.sl-run > span { padding: 7px 14px; border-radius: var(--r-pill); background: var(--canvas); border: var(--hairline) solid var(--line); }
.sl-run .i { width: 16px; height: 16px; color: var(--accent-ink); }
.sl-run b { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .sl-sfx .sl-stage { grid-template-columns: 340px; gap: 18px 0; padding-bottom: 96px; }
  .sl-run { align-items: flex-end; }
  .sl-run .i { display: none; }
  .sl-run > span { border-radius: 14px; text-align: center; line-height: 1.5; }
}

/* ═════════════ Notify ═════════════ */
.sl-nt .sl-stage { display: grid; grid-template-columns: 250px 380px 330px; gap: 0 36px; justify-content: center; padding-bottom: 50px; }
.sl-nt-chat { display: flex; flex-direction: column; height: 400px; border-radius: 16px; background: #fff; border: var(--hairline) solid var(--line); overflow: hidden; color: #000; }
.sl-nt-chat .kit-ig-dmh { padding-top: 12px; }
.sl-lock { display: grid; gap: 10px; padding: 18px 14px 16px; border-radius: 22px; background: var(--hero-ground); }
.sl-lock-t { margin: 0; text-align: center; font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--hero-ink); }
.sl-lock-d { margin: -4px 0 6px; text-align: center; font-size: 12.5px; color: var(--hero-ink-2); }
.sl-mail { margin-top: 14px; display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); animation: sl-in 0.4s var(--ease) backwards; }
.sl-mail p { margin: 0; }
.sl-mail-h { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: var(--hairline) solid var(--line-soft); }
.sl-mail-h b { font-size: 13.5px; }
.sl-mail-h span { font-size: 12px; color: var(--ink-3); }
.sl-mail-b { font-size: 13px; color: var(--ink-2); }
.sl-mail-c { justify-self: start; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: var(--hero-ink); font-size: 12.5px; font-weight: 650; }
@media (max-width: 860px) { .sl-nt-chat { height: 380px; } }

/* ═════════════ Hand to a person ═════════════ */
.sl-ho .sl-stage { display: grid; grid-template-columns: 300px 720px; gap: 0 40px; justify-content: center; padding-bottom: 50px; }
.sl-ho-a { display: grid; justify-items: center; align-content: start; }
.sl-ho-b { position: relative; display: grid; align-content: start; gap: 14px; }
.sl-ho-push { position: absolute; z-index: 2; right: 16px; top: 34px; width: 330px; }
.sl-ib { display: grid; grid-template-columns: 230px minmax(0, 1fr); height: 520px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
.sl-ib-l { border-inline-end: var(--hairline) solid var(--line); background: var(--canvas); }
.sl-ib-lh { margin: 0; padding: 14px 14px 10px; font-size: 14px; font-weight: 650; }
.sl-ib-l ol { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 2px; }
.sl-ib-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 9px 8px; border-radius: 10px; }
.sl-ib-row.is-on { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.sl-ib-row p { margin: 0; display: grid; min-width: 0; line-height: 1.3; }
.sl-ib-row b { font-size: 13px; font-weight: 650; }
.sl-ib-row p span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-ib-st { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--step-amber) 16%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); font-size: 11.5px; font-weight: 650; animation: sl-in 0.35s var(--ease) backwards; }
.sl-ib-st .i { width: 12px; height: 12px; }
.sl-ib-th { display: flex; flex-direction: column; min-width: 0; }
.sl-ib-thh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: var(--hairline) solid var(--line); }
.sl-ib-thh p { flex: 1; margin: 0; display: grid; line-height: 1.3; }
.sl-ib-thh b { font-size: 14px; }
.sl-ib-thh p span { font-size: 12px; color: var(--ink-3); }
.sl-ib-res { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: var(--hairline) solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sl-ib-res .i { width: 13px; height: 13px; }
.sl-ib-state { display: flex; gap: 10px; margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--step-amber) 10%, var(--surface)); border: var(--hairline) solid color-mix(in srgb, var(--step-amber) 30%, var(--line)); animation: sl-in 0.4s var(--ease) backwards; }
.sl-ib-state .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sl-ib-state p { margin: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.sl-ib-state b { font-size: 13px; color: var(--ink); }
.sl-ib-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; }
.sl-ib-m { margin: 0; align-self: flex-end; max-width: 76%; display: grid; gap: 3px; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.sl-ib-m small { font-size: 11px; opacity: 0.75; }
.sl-ib-m.is-auto { background: var(--accent-soft); color: var(--ink); }
.sl-ib-m.is-me { background: var(--ink); color: var(--surface); }
.sl-ib-comp { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 8px 8px 8px 12px; border-radius: 12px; border: var(--hairline) solid var(--line); font-size: 13px; }
.sl-ib-comp > span { flex: 1; min-width: 0; }
.sl-ib-ph { color: var(--ink-3c); }
.sl-ib-comp b { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 7px; background: var(--accent); color: var(--hero-ink); font-size: 12.5px; }
@media (max-width: 860px) {
  .sl-ho .sl-stage { grid-template-columns: 340px; gap: 18px 0; }
  .sl-ho-push { position: relative; right: auto; top: auto; width: auto; }
  .sl-ib { grid-template-columns: minmax(0, 1fr); height: 470px; }
  .sl-ib-l { display: none; }
}

/* ═════════════ Test and versions ═════════════ */
.sl-vs .sl-stage { display: grid; grid-template-columns: 390px 640px; gap: 0 36px; justify-content: center; padding-bottom: 50px; }
.sl-vp { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.sl-vp-h { display: flex; align-items: center; gap: 10px; }
.sl-vp-h p { flex: 1; margin: 0; display: grid; line-height: 1.3; }
.sl-vp-h b { font-size: 14.5px; }
.sl-vp-h p span { font-size: 12.5px; color: var(--ink-3); }
.sl-vl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sl-vr { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border-radius: 11px; border: var(--hairline) solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.sl-vr:has(> .sl-tl-on.on) { background: var(--accent-soft); border-color: var(--accent-line); }
.sl-vr-n { height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--rail); font-size: 11.5px; font-weight: 700; color: var(--ink-3c); font-variant-numeric: tabular-nums; }
.sl-vr p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.sl-vr b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.sl-vr b em { font-style: normal; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: var(--r-pill); background: var(--rail); color: var(--ink-3c); }
.sl-vr b em.is-live { background: var(--accent-soft); color: var(--accent-ink); }
.sl-vr small { font-size: 12px; color: var(--ink-3); }
.sl-vr-c { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sl-vr-c span { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; border: var(--hairline) solid var(--line); color: var(--ink-2); }
.sl-vp-f { margin: 2px 0 0; display: flex; gap: 6px; font-size: 12px; color: var(--ink-3); }
.sl-vp-f .i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.sl-vc { position: relative; display: grid; gap: 14px; align-content: start; padding: 14px; border-radius: 16px; border: var(--hairline) solid var(--line); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.sl-vc-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); }
.sl-vc-h p { flex: 1; margin: 0; display: grid; line-height: 1.3; }
.sl-vc-h b { font-size: 13.5px; }
.sl-vc-h p span { font-size: 12px; color: var(--ink-3); }

/* a removed step: a dashed, flat ghost, its words still at full contrast (opacity 0.6 put them at 2.4:1) */

.sl-vc-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.sl-toast { margin: 0; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 550; box-shadow: var(--shadow-pop); animation: sl-in 0.35s var(--ease) backwards; }
.sl-toast .i { width: 15px; height: 15px; color: var(--accent-bright); }
@media (max-width: 860px) {
  .sl-vs .sl-stage { grid-template-columns: 340px; gap: 18px 0; }
  .sl-vc-h { flex-wrap: wrap; }
  .sl-vc-h p { flex-basis: 100%; }
  .sl-vr:nth-child(n + 5) { display: none; }
}
/* act 1 of the hero: the Test on your phone dialog (as the app draws it) and the run in your own chat */
.sl-vs-a, .sl-vs-b { display: grid; align-content: start; min-width: 0; }
.sl-td { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); animation: sl-in 0.4s var(--ease) backwards; }
.sl-td-h { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: var(--hairline) solid var(--line-soft); }
.sl-td-h .kit-tile { color: var(--accent-ink); }
.sl-td-h p { margin: 0; display: grid; gap: 2px; line-height: 1.4; }
.sl-td-h b { font-size: 15px; font-weight: 650; }
.sl-td-h p span { font-size: 12.5px; color: var(--ink-3); }
.sl-td-q { justify-self: center; padding: 10px; border-radius: 14px; border: var(--hairline) solid var(--line); background: var(--surface); }
.sl-td-q .sl-qrc { box-shadow: none; border-radius: 0; }
.sl-td-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-td-l li { display: flex; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sl-td-l .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-3); }
.sl-td-l u { font-weight: 600; color: var(--ink); text-underline-offset: 2px; }
.sl-td-f { margin: 0; display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: var(--hairline) solid var(--line-soft); }
.sl-vs-t { justify-self: center; width: 340px; animation: sl-in 0.4s var(--ease) backwards; }
.sl-vs-t .sl-k { text-align: center; }
.sl-vs .sl-vp, .sl-vs .sl-vc { animation: sl-in 0.4s var(--ease) backwards; }
.sl-qrc.is-lg { width: 147px; height: 147px; }
.sl-qrc.is-lg i { left: calc(8px + var(--x) * 12px); top: calc(8px + var(--y) * 12px); width: 11px; height: 11px; border-radius: 2px; }
.sl-qrc.is-lg b { width: 42px; height: 42px; border-width: 8px; border-radius: 7px; }
.sl-qrc.is-lg b:nth-of-type(1) { left: 8px; top: 8px; } .sl-qrc.is-lg b:nth-of-type(2) { right: 8px; top: 8px; } .sl-qrc.is-lg b:nth-of-type(3) { left: 8px; bottom: 8px; }
@media (max-width: 860px) {
  .sl-td { gap: 10px; padding: 12px; box-shadow: none; }
  .sl-td-h { padding-bottom: 10px; align-items: center; }
  .sl-td-h p span, .sl-td-f, .sl-td-l li:nth-child(2) { display: none; }
  .sl-td-l li { font-size: 12.5px; }
  .sl-td-q { padding: 8px; }
  .sl-qrc.is-lg { width: 110px; height: 110px; }
  .sl-qrc.is-lg i { left: calc(6px + var(--x) * 9px); top: calc(6px + var(--y) * 9px); width: 8px; height: 8px; }
  .sl-qrc.is-lg b { width: 30px; height: 30px; border-width: 6px; }
  .sl-qrc.is-lg b:nth-of-type(1) { left: 6px; top: 6px; } .sl-qrc.is-lg b:nth-of-type(2) { right: 6px; top: 6px; } .sl-qrc.is-lg b:nth-of-type(3) { left: 6px; bottom: 6px; }
  .sl-vs-t { width: 260px; }
  .sl-vs-t .sl-k { display: none; }
}
.sl-test { display: flex; align-items: center; gap: 14px; }
.sl-qrc { position: relative; width: 92px; height: 92px; flex: none; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-qrc i { position: absolute; left: calc(14px + var(--x) * 7px); top: calc(14px + var(--y) * 7px); width: 6px; height: 6px; background: var(--ink); border-radius: 1px; }
.sl-qrc b { position: absolute; width: 22px; height: 22px; border: 4px solid var(--ink); border-radius: 4px; }
.sl-qrc b:nth-of-type(1) { left: 8px; top: 8px; } .sl-qrc b:nth-of-type(2) { right: 8px; top: 8px; } .sl-qrc b:nth-of-type(3) { left: 8px; bottom: 8px; }
.sl-test p { margin: 0; display: grid; gap: 3px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.sl-test b { font-size: 13.5px; color: var(--ink); }
.sl-test small { color: var(--ink-3); }
.sl-ready { width: 100%; max-width: 240px; display: grid; gap: 10px; }
.sl-ready p { margin: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--surface); border: var(--hairline) solid var(--line); }
.sl-ready .i { width: 16px; height: 16px; }
.sl-ready .is-fix .i { color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); }
.sl-ready .is-fix b { margin-inline-start: auto; font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--rail); }
.sl-ready .is-ok { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.sl-tidy { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 8px; width: 100%; }
.sl-tidy > div { position: relative; height: 96px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-tidy i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 34%; height: 22px; border-radius: 6px; background: var(--rail); box-shadow: inset 0 0 0 1px var(--line); }
.sl-tidy-b i { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sl-tidy > span .i { width: 18px; height: 18px; color: var(--ink-3); }
.sl-tidy p { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.sl-ins { display: grid; gap: 10px; width: 100%; }
.sl-ins > p { margin: 0; justify-self: start; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--rail); }
.sl-ins > p span { padding: 3px 8px; border-radius: 7px; font-size: 11.5px; color: var(--ink-3c); }
.sl-ins > p .is-on { background: var(--surface); color: var(--ink); font-weight: 600; }
.sl-ins ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sl-ins li { padding: 6px 9px; border-radius: 8px; background: var(--surface); border: var(--hairline) solid var(--line); font-size: 12px; color: var(--ink-3); }
.sl-ins li b { display: block; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

.sl-rv { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); }
.sl-rv-h p { margin: 0; display: grid; line-height: 1.35; }
.sl-rv-h b { font-size: 15px; }
.sl-rv-h p span { font-size: 12.5px; color: var(--ink-3); }
.sl-rv-f { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sl-rv-f span { padding: 4px 10px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); font-size: 12px; font-weight: 550; color: var(--ink-3); }
.sl-rv-f .is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sl-rv-run { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--canvas); border: var(--hairline) solid var(--line-soft); }
.sl-rv-who { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-rv-who b { font-size: 14px; }
.sl-rv-who span { font-size: 12.5px; color: var(--danger-ink); font-weight: 600; }
.sl-rv-s { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sl-rv-s li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.sl-rv-s li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.sl-rv-d { width: 12px; height: 12px; margin: 4px 0 0 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sl-rv-s li.is-bad .sl-rv-d { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.sl-rv-s p { margin: 0; display: grid; gap: 2px; }
.sl-rv-s b { font-size: 13.5px; }
.sl-rv-s p span { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sl-rv-s li.is-bad p span { color: var(--danger-ink); }
.sl-rv-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); }
.sl-rv-retry p { flex: 1 1 100%; margin: 0 0 4px; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.sl-rv-retry b { font-size: 13.5px; color: var(--ink); }

.sl-tg-b { display: grid; align-content: start; gap: 16px; }
.sl-tg-ib { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: var(--hairline) solid var(--line); }
.sl-tg-ibr { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.sl-tg-ibr .sl-av { width: 28px; height: 28px; font-size: 12px; }

.sl-sf-a { display: grid; align-content: start; }
.sl-run .i { margin-inline-end: 6px; vertical-align: -3px; }
.sl-run > span { display: inline-block; }
.sl-ib-comp b { margin-inline-start: auto; }

.sl-vr { padding-block: 7px; }

/* the fit measures this box (no padding), so a phone picture never runs past the frame */
.sl-fitbox { width: 100%; display: grid; justify-items: center; }
/* phone layouts last, so they win over every desktop grid above */
@media (max-width: 860px) {
  .sl-dl .sl-stage, .sl-sfx .sl-stage, .sl-nt .sl-stage, .sl-ho .sl-stage, .sl-vs .sl-stage { grid-template-columns: 340px; gap: 18px 0; justify-content: start; }
}

/* ═════════════ A/B split: three surfaces (the split, path 1, path 2) ═════════════ */

.sl-vm { display: none !important; }
.sl-vcap { display: none; }

/* ═════════════ phones: ONE surface at a time (PLAN §2; Anant: everything fits the viewport on a phone) ═════════════
   The stage is 260 wide (never scaled down on a 320 screen, so text stays at its size): the surface the story is on,
   its name under it, then the line that says what is happening. Each surface fits 260 x 316. */
@media (max-width: 860px) {
  .sl-box { padding: var(--s-4) var(--s-3) var(--s-3); }
  .sl-box::before { display: none; }
  .sl-sig .sl-stage { display: grid !important; grid-template-columns: 260px !important; grid-template-rows: 316px auto auto; gap: 8px 0 !important; padding: 0 !important; align-content: start; justify-content: start; }
  .sl-stage > .sl-p { grid-area: 1 / 1; height: 316px; min-width: 0; overflow: hidden; visibility: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
  .sl-stage > .sl-p > .sl-k { display: none; }
  .sl-stage:not(:has(> .sl-vm.on)) > .sl-p1,
  .sl-stage:has(> .sl-v1.on) > .sl-p1, .sl-stage:has(> .sl-v2.on) > .sl-p2, .sl-stage:has(> .sl-v3.on) > .sl-p3 { visibility: visible; animation: sl-in 0.35s var(--ease); }
  .sl-vcap { grid-row: 2; display: grid; justify-items: center; margin: 0; }
  .sl-vcap span { grid-area: 1 / 1; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
  .sl-stage > .sl-line, .sl-stage > .sl-run { position: static; grid-row: 3; display: grid; justify-items: center; min-height: 0; margin: 0; }
  .sl-line span, .sl-run > span { grid-area: 1 / 1; height: auto; min-height: 30px; padding: 5px 12px; font-size: 12.5px; line-height: 1.4; white-space: normal; text-align: center; border-radius: 14px; }
  .sl-line .i { width: 14px; height: 14px; flex: none; }

  /* conditions */
  .sl-cd-who .sl-pc { box-shadow: none; }


  .sl-rl-i { width: 24px; height: 24px; }



  /* A/B split */


  /* the chat surfaces: the phone's screen alone, no frame */
  .sl-phone { width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .sl-phone .ps-btn, .sl-phone .ig-status { display: none; }
  .sl-phone .ps-screen { border-radius: 16px; }
  .sl-phone .kit-ig-dmh, .sl-nt-chat .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .sl-phone .ig-comp { display: none; }
  .sl-dl-c, .sl-ho-a { justify-items: start; }
  .sl-nt-chat { height: 316px; }

  /* wait: the timeline, titles only */
  .sl-tl-r { padding: 6px 8px 6px 0; grid-template-columns: 42px 34px minmax(0, 1fr); }
  .sl-tl-r p span { display: none; }
  .sl-tl-r b { font-size: 12.5px; }
  .sl-dl-tl ol::before { left: 58px; }

  /* tags, set field, notify */
  .sl-tg-ib { display: none; }
  .sl-pp { box-shadow: none; padding: 12px; gap: 10px; }
  .sl-pp-d > div, .sl-fd { grid-template-columns: 82px minmax(0, 1fr); font-size: 12.5px; }

  
  .sl-sf-said { height: 100%; justify-content: flex-end; }
  .sl-lock { padding: 14px 12px; }
  .sl-lock-t { font-size: 38px; }
  .sl-mail { margin-top: 10px; box-shadow: none; }

  /* hand-off: the inbox, the thread alone */
  .sl-ho-b { gap: 8px; }
  .sl-ho-push { position: static; width: auto; }
  .sl-ib { height: auto; flex: 1; min-height: 0; box-shadow: none; }
  .sl-ib-thh { padding: 8px 10px; }
  .sl-ib-res { height: 26px; font-size: 11.5px; padding: 0 8px; }
  .sl-ib-state { margin: 8px 10px 0; padding: 8px 10px; }
  .sl-ib-state span { display: none; }
  .sl-ib-msgs { padding: 8px 10px; }
  .sl-ib-m { font-size: 12.5px; max-width: 88%; }
  .sl-ib-comp { margin: 0 10px 10px; }

  /* versions */
  .sl-vp { box-shadow: none; padding: 12px; gap: 8px; }
  .sl-vr:nth-child(n + 4), .sl-vp-f { display: none; }
  .sl-vc { padding: 10px; gap: 8px; }
  .sl-vc-h .sl-btn-g, .sl-vc-hint { display: none; }
  .sl-vc-h p { flex-basis: auto; }

  .sl-toast { position: absolute; left: 10px; right: 10px; bottom: 10px; justify-content: center; }
}
@media (max-width: 860px) {

  
  .sl-tl-r { padding-block: 3px; }

  .sl-vr:nth-child(2), .sl-vr small { display: none; }
}
@media (max-width: 860px) {

  .sl-lock-d, .sl-mail-b { display: none; }
  .sl-lock { gap: 8px; padding: 12px 10px; }
  .sl-lock-t { font-size: 30px; }

  .sl-vc-h { padding: 6px 8px; }
}
@media (max-width: 860px) { .sl-vc { gap: 4px; padding: 8px; }  }

/* a short phone (320 x 568: 413px under the header and the trial bar, QA §1.2; agent S, 2026-10-07): every surface 36px
   shorter, nothing scaled, text unchanged */
/* (the device's own height too: an iPhone SE's Safari is 553px tall with its bars and 635px once they slide away, so a
   rule on the window's height alone flips while the page scrolls and the scene jumps 44px; agent H3, 2026-10-07) */
@media (max-width: 860px) and (max-height: 620px), (max-width: 860px) and (max-device-height: 700px) {
  .sl-sig .kit-fit { --kit-h: 380px !important; }
  .sl-sig .sl-stage { grid-template-rows: 276px auto auto; }
  .sl-stage > .sl-p { height: 276px; }
  .sl-phone { height: 276px !important; }
  .sl-nt-chat { height: 276px; }
  .sl-dl-tl .sl-tl-r:first-child { display: none; }
  .sl-nt-chat .sl-th:has(> div:nth-of-type(3).on) > div:nth-of-type(2) { display: none; }
}

/* phones: a chat keeps its newest turns whole; the oldest step out as new ones land, so nothing shows half cut at the
   top of a screen (agent S, 2026-10-07) */
@media (max-width: 860px) {
  .sl-dl-c .sl-th:has(> div:nth-of-type(3).on) > div:nth-of-type(1),
  .sl-dl-c .sl-th:has(> div:nth-of-type(4).on) > div:nth-of-type(-n+3),
  .sl-nt-chat .sl-th:has(> div:nth-of-type(3).on) > div:nth-of-type(1),
  .sl-ho-a .sl-th:has(> div:nth-of-type(2).on) > div:nth-of-type(1),
  .sl-ho-a .sl-th:has(> div:nth-of-type(4).on) > div:nth-of-type(2),
  .sl-ho-a .sl-th:has(> div:nth-of-type(5).on) > div:nth-of-type(-n+3) { display: none; }
  .sl-ib-state span { display: none; }
}
@media (max-width: 860px) { .sl-ho-b:has(.sl-ho-push.on) .sl-ib-m.is-auto { display: none; } }

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .sl-stage > .sl-p { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; background: var(--surface); }
  .sl-stage:not(:has(> .sl-vm.on)) > .sl-p1,
  .sl-stage:has(> .sl-v1.on) > .sl-p1, .sl-stage:has(> .sl-v2.on) > .sl-p2, .sl-stage:has(> .sl-v3.on) > .sl-p3 { transition-delay: 0s; z-index: 2; animation: sl-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08). An opacity cross-fade let the leaving surface read
     through the arriving one for 0.3s (two surfaces on top of each other), and an arriving surface that covers at once is
     an empty box while its own parts fade in. So the leaving surface stays ON TOP, whole, for 0.3s while the arriving
     one draws underneath it, then it is gone in one frame: never blank, never two at once. */
  @keyframes sl-xf { from, to { z-index: 1; } }
  /* the loop's restart: the page's script marks the root is-first for the first beat, drawn in the same task that clears
     the last one. Nothing eases in that moment, so the last picture is replaced by the complete first one in one frame
     (without it the last surface would empty itself for 0.3s under the hold, or the first would fade in from a blank). */
  /* the running card's ring sits inside the card on a phone: the one-surface box clips anything drawn outside a card
     that touches its edge, and the ring read as cut on three sides (agent F2, 2026-10-08) */
  .sl-sig.is-first, .sl-sig.is-first *, .sl-sig.is-first *::before, .sl-sig.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen or view that REPLACES another inside one surface (the person card, the test run, the versions panel and a version) arrives whole: the one it replaces leaves in the
     same frame, so an entrance from nothing was a blank surface for a frame or two (agent F2, 2026-10-08) */
  .sl-sig .sl-p > .sl-pc, .sl-sig .sl-td, .sl-sig .sl-vp, .sl-sig .sl-vc { animation: none !important; }
  /* the loop's restart (QA pass 3, L-1: the stage was empty for about half a second): no fade to nothing on a phone; the
     last surface stays in place under the first one as it arrives, as on the messaging pages */
  .sl-sig.is-reset .sl-stage { opacity: 1; transition: none; }
}

/* ═════════════ the canvas cards and wires (agent MG3, 2026-10-08; site-src/dm/FLOW_CARDS.md) ═════════════
   Every drawn step is the kit's node() (the app's own card) and every wire the kit's flow(); this sheet only places
   them, marks the one card a scene is on, and gives a phone its one surface. */
.sl-fl { position: relative; }
.sl-lit, .sl-rl-on { display: none !important; }
/* the ONE selected card of a scene: the app's ring (the family's hairline and a soft ring of it), on the beats lit() names */
.sl-sig .kit-node:has(> .sl-lit.on) { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent), var(--kit-lift); }
/* a compact card outside a flow: as wide as its box, nothing wired into it */
.sl-mn:not(.kit-at) { width: 100%; }
.sl-mn:not(.kit-at) > .kit-dot.is-in { display: none; }
/* a column of compact cards, wired top to bottom by the kit script (--kit-col asks it for its column wiring: the cards
   stand under each other by their real heights, one dot under a card, the arrowhead over the next) */
.kit-flow.sl-col { --kit-col: 1; --col-y: 1px; --col-gap: 34px; position: relative; inset: auto; width: 100%; height: var(--fh); transform: none; }
.kit-flow.sl-col > .kit-node.kit-at { inset-inline-start: 0; top: var(--col-top, calc(var(--sy) * 82px)); width: 100%; }
.sl-col > .kit-node > .kit-dot.is-in { inset-inline-start: 50%; top: -7px; margin-inline-start: -6px; }
.sl-col > .kit-node:nth-child(2) > .kit-dot.is-in { display: none; }   /* nothing is wired into the first card of a column */
.sl-col > .kit-node:not(:last-child)::after { content: ''; position: absolute; z-index: 1; box-sizing: border-box; inset-inline-start: 50%; bottom: -7px; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--g); }
.sl-mchat .kit-flow.sl-col { width: 230px; max-width: 100%; margin-inline: auto; }

/* conditions: the people on the left, the canvas on the right (the Condition card and the two steps it leads to) */
.sl-cd .sl-stage { display: grid; grid-template-columns: 262px 768px; gap: 0 56px; justify-content: center; align-content: start; padding-bottom: 50px; }
.sl-cd .sl-fl { height: 500px; }
/* the card's rule list, with the verdict the run reads beside each rule */
.sl-cd .kit-rules { align-self: stretch; gap: 2px; }
.sl-cd .kit-rules > span { position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-inline: -6px; padding: 2px 6px; padding-inline-start: 38px; border-radius: 8px; transition: background 0.3s var(--ease); }
.sl-cd .kit-rules > span > i:first-child:not(.sl-rl-on) { position: absolute; inset-inline-start: 6px; margin: 0; }
.sl-cd .kit-rules > span:has(> .sl-rl-on.on) { background: var(--g-soft); }
.sl-rl-t { flex: 1; min-width: 0; }
.sl-vd { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 650; white-space: nowrap; animation: sl-in 0.3s var(--ease) backwards; }
.sl-vd .i { width: 12px; height: 12px; stroke-width: 3; }
.sl-vd.is-y { background: var(--accent-soft); color: var(--accent-ink); }
.sl-vd.is-n { background: var(--danger-soft); color: var(--danger-ink); }
.sl-vd.is-s { background: var(--rail); color: var(--ink-3c); padding-inline: 9px; }

/* A/B split: one canvas, the split and the message each path opens with; the counts are the cards' own (Insights) */
.sl-ab .sl-stage { display: grid; grid-template-columns: 988px; justify-content: center; align-content: start; padding-bottom: 50px; }
.sl-ab .sl-fl { height: 470px; }
.sl-ab-n { display: inline-block; min-width: 1.2ch; font-variant-numeric: tabular-nums; }
.sl-ab-n b.on { animation: sl-in 0.3s var(--ease) backwards; }
.sl-ab-now { position: absolute; inset-inline-start: 0; top: 318px; }
.sl-ab-now p { margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: var(--r-pill); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); font-size: 13px; animation: sl-in 0.3s var(--ease) backwards; width: max-content; }
.sl-ab-now .sl-av { width: 28px; height: 28px; font-size: 12px; }
.sl-ab-now .i { width: 14px; height: 14px; color: var(--ink-4); }
.sl-ab-now span { font-weight: 650; color: var(--fam-logic-ink); }

/* tags: another flow reads the tag (a Condition and the message its Yes way leads to) */
.sl-tg .sl-stage { grid-template-columns: 250px 330px 420px; }
.sl-tg-o .sl-fl { height: 130px; }
.sl-tg-o .kit-node-t small { white-space: normal; }

/* set field: the step's own card; the chip of the change being made is marked, one that does not fit in red */
.sl-sf-b { display: grid; align-content: start; justify-items: center; }
.sl-sf-b > .sl-k { justify-self: start; }
.sl-sfc { --w: 340px; margin-top: 56px; }
.sl-sfc .kit-chips { gap: 6px; }
.sl-sfc .kit-chip { padding: 3px 10px; font-size: 12.5px; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.sl-sfc .kit-chip:has(> .sl-tl-on.on) { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); color: var(--ink); font-weight: 600; }
.sl-sfc .kit-chip.is-bad:has(> .sl-tl-on.on) { border-color: var(--danger-ink); box-shadow: 0 0 0 3px var(--danger-soft); color: var(--danger-ink); }

/* versions: version 12 on the canvas, a column; a removed step is a dashed, flat ghost, its words at full contrast */
.kit-flow.sl-vc-nodes { --col-gap: 30px; width: 320px; max-width: 100%; margin: 14px auto 0; }
.sl-vc-nodes > .is-gone-n { border-style: dashed; background: var(--canvas); box-shadow: none; }
.sl-vc-nodes > .is-gone-n .kit-tile { background: transparent; box-shadow: none; }
.sl-mk { position: absolute; z-index: 2; top: -11px; right: 10px; height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 650; animation: sl-in 0.35s var(--ease) backwards; }
.sl-mk.is-ch { background: color-mix(in srgb, var(--step-amber) 18%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 60%, var(--ink)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--step-amber) 40%, var(--line)); }
.sl-mk.is-gone { background: var(--danger-soft); color: var(--danger-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, var(--line)); }

/* phones: one surface, 260 wide. A flow is one column (the kit's), 4px in from the box so the ring is never cut; where a
   step leads two ways the camera moves down to the step the story is on, and only that one stands under the card */
@media (max-width: 860px) {
  .sl-stage > .sl-p > .sl-fl { flex: 1; min-height: 0; height: auto; overflow: hidden; }
  .sl-sig .kit-flow.is-col-sm { --col-x: 4px; --col-y: 4px; --col-w: 252px; --col-gap: 30px; transition: none; }   /* the camera cuts (hold, then cut): a slow move would show half a row on its way */
  .sl-stage > .sl-p .kit-flow.sl-col { --col-gap: 22px; width: 252px; margin: 4px; }
  .sl-stage > .sl-p .sl-col .kit-node-h { padding-block: 7px; }
  .sl-sig .kit-flow.is-col-sm > :is([data-node='c'], [data-node='s']) > .kit-dot.is-in { display: none; }
  .sl-sig .kit-flow.is-col-sm > .kit-node:not([data-node='c'], [data-node='s'])::after { display: none; }
  /* conditions: the Yes step for Lucía, the No step for Kayla, in the same place */
  .sl-cd .kit-flow.is-col-sm > .kit-node[data-node='f'] { top: var(--top-m); }
  .sl-cd .sl-stage:not(:has(> .sl-cd-n.on)) [data-node='f'], .sl-cd .sl-stage:not(:has(> .sl-cd-y.on)) [data-node='m'] { visibility: hidden; }
  .sl-cd .sl-stage:not(:has(> .sl-cd-n.on)) .kit-wire[data-w='c.1>f'], .sl-cd .sl-stage:not(:has(> .sl-cd-y.on)) .kit-wire[data-w='c.0>m'] { display: none; }
  .sl-cd .sl-stage:not(:has(> :is(.sl-cd-y, .sl-cd-n).on)) .kit-flow > [data-node='c']::after { display: none; }
  /* the camera stops with the card above wholly out of the surface (a half-shown row reads as cut), the wire coming in from it */
  .sl-cd .sl-stage:has(> :is(.sl-cd-y, .sl-cd-n).on) .kit-flow { --pan-y: calc(var(--top-m) - 22px); }
  .sl-cd [data-node='f'] .kit-btn { display: none; }
  .sl-cd .kit-rules > span { padding-inline-start: 32px; gap: 6px; }
  .sl-cd .kit-rules { font-size: 12.5px; }
  /* A/B split: the split with who just arrived, then path A's message, then path B's */
  .sl-ab .kit-flow.is-col-sm > .kit-node[data-node='b'] { top: var(--top-a); }
  .sl-ab .sl-stage:not(:has(> .sl-ab-va.on)) [data-node='a'], .sl-ab .sl-stage:not(:has(> .sl-ab-vb.on)) [data-node='b'] { visibility: hidden; }
  .sl-ab .sl-stage:not(:has(> .sl-ab-va.on)) .kit-wire[data-w='s.0>a'], .sl-ab .sl-stage:not(:has(> .sl-ab-vb.on)) .kit-wire[data-w='s.1>b'] { display: none; }
  .sl-ab .sl-stage:has(> :is(.sl-ab-va, .sl-ab-vb).on) .kit-flow { --pan-y: calc(var(--top-a) - 22px); }
  .sl-ab .sl-stage:not(:has(> :is(.sl-ab-va, .sl-ab-vb).on)) .kit-flow > [data-node='s']::after { display: none; }
  .sl-ab-now { inset-inline-start: 4px; top: 196px; }
  .sl-ab-now p { font-size: 12.5px; box-shadow: none; }
  .sl-ab .sl-stage:has(> :is(.sl-ab-va, .sl-ab-vb).on) .sl-ab-now { display: none; }
  /* tags, set field, versions */
  .sl-tg-o .sl-fl { height: 190px; }
  .sl-sfc { --w: 252px; margin-top: 8px; }
  .sl-stage > .sl-p .kit-flow.sl-vc-nodes { margin: -16px auto 0; height: 200px; }
  .sl-vc-nodes > [data-node='n0'] { display: none; }
  .sl-vc > .sl-toast { z-index: 3; }   /* over the cards (a flow's cards are raised above its wires) */
}
@media (max-width: 860px) and (max-height: 620px), (max-width: 860px) and (max-device-height: 700px) {
  .sl-stage > .sl-p .kit-flow.sl-vc-nodes { margin-top: -38px; height: 124px; }
  .sl-vc-nodes > [data-node='n1'] { display: none; }
}

/* Arabic (LF, 2026-10-10): these scenes keep the geometry they were drawn in (their roots are left to right), and every word in them takes its
   direction from its own first letter, so "موسوم بـ «تحميصة-جديدة»" keeps its closing mark at its end and "هذا هو الكود: WELCOME15 ☕" reads in order */
[dir='rtl'] :is(.sl-stage, .sl-rv, .sl-answ, .sl-fl, .sl-cond, .sl-sf) :is(p, li, b, span, em, small, q, time, dt, dd, th, td) { unicode-bidi: plaintext; }