/* From data to decisions: interactive lab-to-FHIR pipeline. Scoped to .pipeline. */
.pipeline{--ink:#0b1f33;--ink-2:#3d5568;--accent:#2f4fd6;--glow:#7cc7ea;--warn:#d9772b;--ok:#0a8fb8;--glass:rgba(255,255,255,.66);--glass-line:rgba(15,60,95,.12);--pipe-bg:#f2f6f9;--code-bg:#0c1b2b;--code-fg:#cfe6f2;--mono:'DM Sans',Inter,system-ui,sans-serif;--serif:Manrope,'DM Sans',system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);color:var(--ink)}
body.dark .pipeline{--ink:#eef7fc;--ink-2:#a9c1d1;--accent:#9bb1ff;--glow:#3fb6e0;--warn:#ff9a4d;--ok:#5fd8f2;--glass:rgba(10,26,44,.58);--glass-line:rgba(160,215,240,.13);--pipe-bg:#061220;--code-bg:#030a13;--orb-mid:#2a6a92;--orb-edge:#0b2a45}
.pipeline .kicker{font:600 11px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.pipeline .kicker-warn{color:var(--warn)}
.pipeline .lede{font-size:clamp(16px,1.2vw,19px);line-height:1.62;color:var(--ink-2);max-width:560px;margin:0}
.pipeline h2,.pipeline h3{font-family:var(--serif);font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.pipeline h2 em{font-style:normal;color:var(--accent)}
.pipeline .shell{width:min(1320px,calc(100% - 12vw));margin:0 auto}
.pipeline .pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;border:0;font:600 14px var(--mono);cursor:pointer}
#pipe-svg .node text.glyph{font:600 13px var(--mono);letter-spacing:.02em;text-transform:none;fill:#0b2c4a}
body.dark #pipe-svg .node text.glyph{fill:#eaf8ff}
/* ---------- PIPELINE ---------- */
.pipeline{position:relative;padding:150px 0 130px;background:var(--pipe-bg);overflow:hidden}
.pipeline:before{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 70% 35%,color-mix(in srgb,var(--glow) 18%,transparent),transparent 70%);pointer-events:none}
.pipe-intro{position:relative;max-width:820px;margin-bottom:56px}
.pipe-intro h2{font-size:clamp(40px,4.6vw,72px);line-height:1.02;margin:0 0 22px}
.pipe-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:28px;align-items:stretch}
.pipe-viz{position:relative;border-radius:28px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:18px 18px 8px;box-shadow:0 40px 120px -40px color-mix(in srgb,var(--glow) 45%,transparent)}
#pipe-svg{display:block;width:100%;height:auto;overflow:visible}
#pipe-svg .lane{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1.2}
#pipe-svg .lane.is-hot{stroke:color-mix(in srgb,var(--ok) 55%,transparent)}
#pipe-svg .lane.is-cut{stroke:color-mix(in srgb,var(--warn) 70%,transparent);stroke-dasharray:3 6}
#pipe-svg .node{cursor:pointer;outline:none}
#pipe-svg .node .orb{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
#pipe-svg .node:hover .orb,#pipe-svg .node:focus-visible .orb{transform:scale(1.09)}
#pipe-svg .node .ring{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0;transition:opacity .3s}
#pipe-svg .node.is-sel .ring,#pipe-svg .node:focus-visible .ring{opacity:1}
#pipe-svg .node.is-err .ring{stroke:var(--warn);opacity:1;animation:pulse 1.4s ease-in-out infinite}
#pipe-svg .node text{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink)}
#pipe-svg .node text.sub{font:400 10.5px var(--mono);letter-spacing:.04em;text-transform:none;fill:var(--ink-2)}
#pipe-svg .col-label{font:500 9.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;fill:var(--ink-2)}
#pipe-svg .tray{fill:color-mix(in srgb,var(--warn) 8%,transparent);stroke:color-mix(in srgb,var(--warn) 45%,transparent);stroke-dasharray:2 4}
#pipe-svg .tray-label{font:500 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;fill:var(--warn)}
@keyframes pulse{50%{opacity:.25}}
.pipe-meters{display:flex;gap:34px;padding:14px 10px 12px;flex-wrap:wrap}
.pipe-meters span{display:block;font:500 .6rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.pipe-meters b{font:700 28px/1.1 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.pipe-meters b.is-warn{color:var(--warn)}
.pipe-inspector{position:relative;border-radius:28px;padding:30px 28px;background:var(--code-bg);color:var(--code-fg);display:flex;flex-direction:column;gap:22px;min-height:100%;box-shadow:0 40px 120px -50px #04203a}
.pipe-inspector .kicker{color:#7fd6f0}
.pipe-inspector .kicker-warn{color:#ffa45c}
.pipe-inspector h3{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;font-size:26px;line-height:1.05;margin:0 0 10px;color:#fff}
.pipe-inspector p{color:#a9c4d4;font-size:.92rem;line-height:1.6;margin:0}
.insp-io{display:grid;gap:14px}
.io-label{display:block;font:500 .6rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7c9cb1;margin-bottom:7px}
.insp-io pre{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(160,215,240,.1);font:400 .7rem/1.6 var(--mono);color:#d8ecf6;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.insp-io pre .k{color:#7fd6f0}.insp-io pre .s{color:#e8d7a8}.insp-io pre .bad{color:#ffa45c;background:rgba(255,154,77,.12);border-radius:3px}.insp-io pre .good{color:#7ff0c4;background:rgba(127,240,196,.1);border-radius:3px}
.insp-fix{border-top:1px dashed rgba(255,164,92,.35);padding-top:18px}
.insp-fix p{margin:0 0 16px!important}
.insp-fix .pill{background:#ffa45c;color:#1b0e02}
.insp-fix.is-fixed{border-top-color:rgba(127,240,196,.35)}
.insp-fix.is-fixed .kicker{color:#7ff0c4}
.pipe-controls{margin-top:34px}
.fault-row{display:flex;flex-wrap:wrap;gap:10px}
.fault{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:var(--glass);color:var(--ink);padding:11px 18px;border-radius:99px;font-size:.82rem;font-weight:600;transition:.25s}
.fault:hover{border-color:var(--warn);color:var(--warn)}
.fault[aria-pressed=true]{background:var(--warn);border-color:var(--warn);color:#1b0e02}
.fault-reset{border-style:dashed}
.pipe-note{font:400 .7rem var(--mono);color:var(--ink-2);margin:16px 0 0}


@media (max-width:1100px){.pipe-stage{grid-template-columns:1fr}}
@media (max-width:760px){.pipeline{padding:100px 0 80px}.pipe-viz{padding:10px;border-radius:20px}.pipe-meters{gap:20px}}