/* The client case figure on the mission, after Pulse's pipeline: the steps, a stack of five
   plates (case-figure.js), and the flat record they change. No container: it sits on the page. */
.cs{margin:32px 0 40px}
.cs-track{position:relative;height:calc(100vh + 4 * 56vh)}
/* While pinned, the figure fills the screen below the header, centred, so nothing floats in empty space. */
.cs-stage{position:sticky;top:88px;height:calc(100vh - 112px);min-height:480px;display:grid;grid-template-columns:192px minmax(0,1fr) 256px;grid-template-rows:minmax(0,1fr);gap:16px 32px;align-items:center;color:var(--sky-ink)}
/* Wide screens: the figure runs out to the page's right margin (case-figure.js measures it). */
@media(min-width:1320px){.cs-stage{width:var(--cs-wide,calc(100% + 248px));grid-template-columns:200px minmax(0,1fr) 280px}}
/* Steps: a list with a bar on the one in focus. Spacing on a 4 px grid. */
.cs-steps{list-style:none!important;margin:0;padding:0!important;display:flex;flex-direction:column;gap:4px}
.cs-steps li{margin:0!important}
.cs-steps button{position:relative;display:grid;grid-template-columns:48px 1fr;gap:8px;width:100%;padding:12px 0 12px 16px;background:none;color:#46607f99;font:inherit;text-align:left;cursor:pointer;transition:color 300ms}
.cs-steps button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--sky-ink);opacity:0;transition:opacity 300ms}
.cs-steps button[aria-current=true]{color:var(--sky-ink)}.cs-steps button[aria-current=true]::before{opacity:1}
.cs-steps button:focus-visible{outline:3px solid #93baf2;outline-offset:2px;border-radius:8px}
.cs-n{font-family:'Geist Mono','Geist Mono Fallback',ui-monospace,monospace;font-size:11px;line-height:20px;letter-spacing:.04em}
.cs-t{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:20px}.cs-t b{font-weight:500;font-size:14px}
.cs-art,.cs-rive{display:block;width:100%;height:auto;max-height:calc(100vh - 136px);aspect-ratio:1;margin:0 auto;overflow:visible;fill:none;stroke:none;stroke-width:1}
.cs-rive{width:auto;height:100%;max-height:calc(100vh - 136px);max-width:100%;justify-self:center}
/* The record: what the step did to the case. */
.cs-record{position:relative;overflow:hidden;padding:16px;border-radius:16px;background:#fffdf8cc;box-shadow:inset 0 0 0 1px #15396224;font-size:12px;line-height:16px;color:#2f3136}
.cs-rhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px!important;padding-bottom:12px;border-bottom:1px solid #15396218;font-size:14px;line-height:20px}
.cs-rhead span{font-size:12px;color:#6b6e75}
.cs-record ul{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:4px}
.cs-record li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;margin:0!important;padding:8px;border-radius:8px;transition:background-color 400ms,opacity 400ms}
.cs-k{grid-column:1 / -1;font-size:11px;line-height:16px;color:#6b6e75}
.cs-v{font-weight:500;color:#1d1f23}
.cs-s i{display:none;font-style:normal;font-size:11px;line-height:16px;padding:0 8px;border-radius:4px;white-space:nowrap}
.cs-record small{display:none}
.cs-record li[data-state=off]{display:none}
.cs-record li[data-state=ok] .ok{display:inline-block;color:#2b6b4f;background:#e7f2ec}
.cs-record li[data-state=open]{background:#fff3dc}.cs-record li[data-state=open] .open{display:inline-block;color:#8c4e0b;background:#fbe2b4}
.cs-record li[data-state=miss]{background:repeating-linear-gradient(135deg,#fff8ec 0 8px,#fff3dc 8px 16px);box-shadow:inset 0 0 0 1px #e8c58c}.cs-record li[data-state=miss] .cs-v{color:#8c4e0b}.cs-record li[data-state=miss] .miss{display:inline-block;color:#8c4e0b;background:#fbe2b4}
.cs-record li[data-state=old] .cs-v{color:#5d6b80}.cs-record li[data-state=old] .old{display:inline-block;color:#4a5568;background:#e6eaef}
.cs-record li[data-state=check]{background:#edf2ff}.cs-record li[data-state=check] .check{display:inline-block;color:#1f4fd1;background:#dfe8ff}
.cs-waiting{margin:8px 0 0!important;padding-top:12px;border-top:1px solid #15396218;font-size:12px;line-height:16px;color:#46607f}
.cs-waiting.has{color:#8c4e0b}
/* The scan: a line passes down the record when a step changes it. */
.cs-scan{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(180deg,transparent,#0845a714 70%,#0845a7 100%);opacity:0;pointer-events:none}
.cs-scan.run{animation:cs-scan 900ms cubic-bezier(.4,0,.2,1)}
@keyframes cs-scan{0%{opacity:0;translate:0 -40px}15%{opacity:.8}100%{opacity:0;translate:0 420px}}
.cs figcaption{margin-top:16px;font-size:14px;line-height:21px;color:#46607f}
.cs figcaption span{display:block;margin-top:6px}
@media(max-width:900px){
 .cs-track{height:calc(100vh + 4 * 60vh)}
 .cs-stage{top:72px;height:calc(100vh - 88px);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;align-items:stretch}
 .cs-art,.cs-rive{max-height:100%;height:100%;width:auto;align-self:center}
 .cs-steps{grid-column:1 / -1;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
 .cs-steps button{grid-template-columns:auto;padding:4px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px #15396226;white-space:nowrap}
 .cs-steps button::before{display:none}.cs-steps button[aria-current=true]{background:var(--sky-ink);color:#fff;box-shadow:none}
 .cs-n,.cs-t>span{display:none}.cs-t b{font-size:12px}
 .cs-record{padding:8px 12px;font-size:12px}.cs-rhead{margin-bottom:4px!important;padding-bottom:8px;font-size:13px}.cs-record ul{gap:0}
 .cs-record li{grid-template-columns:auto 1fr auto;padding:4px 8px}.cs-record .cs-k{grid-column:auto}.cs-record .cs-v{text-align:right}
}
@media(prefers-reduced-motion:reduce){.cs-track{height:auto}.cs-stage{position:static;height:auto}.cs-scan{display:none}}
.reduced .cs-track{height:auto}.reduced .cs-stage{position:static;height:auto}.reduced .cs-scan{display:none}

.cs-rive{aspect-ratio:400 / 420}