/* ══════════════════════════════════════════════════════════════════════════
   CHORUS v3 — dark "matrix" theme. Green = healthy, amber→orange→red = attention.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
 --bg:#04120b; --bg-2:#07190f; --panel:#08200f; --panel-2:#0a2717; --raise:#0c2f1c;
 --line:#153c25; --line-2:#0f2c1b;
 --green:#3BE08A; --green-dim:#2f9b64; --green-2:#2f6b4d;
 --amber:#E6B800; --orange:#F5731F; --red:#FF5252;
 --ink:#dff6e8; --ink-2:#9dcbb2; --ink-3:#5f9a78; --ink-4:#3f6b52;
 --up:#4FC3F7; --down:#CE93FF;
 --nav:210px; --side:388px;
 --disp:"Jost",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
 --glow:0 0 10px rgba(59,224,138,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--disp);color:var(--ink);background:var(--bg);
 -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:auto;
 background-image:
  radial-gradient(circle at 50% 0,#0a2415 0,#04120b 60%),
  repeating-linear-gradient(0deg,rgba(59,224,138,.03) 0 1px,transparent 1px 3px);}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}
a,button{font-family:inherit}
.mono{font-family:var(--mono)}

/* ── top status bar ─────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
 padding:9px 20px;background:rgba(4,18,11,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.topbar .brandline{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
 letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.topbar .brandline .led{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:var(--glow);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.topbar .runmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.topbar .runmeta b{color:var(--green);font-weight:500}

/* ── recorded-run gallery ───────────────────────────────── */
.section-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
 padding:14px 20px 6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;padding:0 20px 4px}
.pcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:13px 15px;cursor:pointer;
 transition:border-color .15s,box-shadow .15s,transform .1s;color:var(--ink)}
.pcard:hover{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
.pcard.on{border-color:var(--green);box-shadow:var(--glow),inset 0 0 22px rgba(59,224,138,.06)}
.pcard .t{font-size:14.5px;font-weight:500;line-height:1.25;margin-bottom:9px}
.pcard .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-3)}
.pcard.on .s{color:var(--green-dim)}
.pcard .mini{margin-left:6px;color:var(--ink-4)}

/* ── patient header ─────────────────────────────────────── */
.patient{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:10px 20px 0;
 background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pfield{background:var(--panel);padding:11px 15px}
.pfield .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.pfield .v{font-size:15px;margin-top:3px;color:var(--ink)}
.pfield .v.warn{color:var(--orange)}

/* ── control bar (age slider · treatment · emulate · history) ── */
.controlbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:10px 20px 0;padding:11px 15px;
 background:var(--panel);border:1px solid var(--line);border-radius:8px}
.agebox{display:flex;align-items:center;gap:10px;flex:0 1 300px;min-width:220px}
.agebox .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.agebox .val{font-family:var(--mono);font-size:15px;color:var(--green);min-width:58px;text-shadow:var(--glow)}
.agewrap{flex:1;min-width:170px}
.slider{-webkit-appearance:none;appearance:none;width:100%;display:block;height:4px;border-radius:3px;outline:none;
 background:linear-gradient(90deg,var(--green-2),var(--green));cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--green);
 border:2px solid #04120b;box-shadow:var(--glow);cursor:pointer}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--green);border:2px solid #04120b;box-shadow:var(--glow);cursor:pointer}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;color:var(--ink-4);margin-top:3px}
/* mock dropdowns (sex/tissue/genotype) */
.mockdd{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 8px;
 font:inherit;font-size:14px;margin-top:3px;cursor:pointer;max-width:100%}
.mockdd:focus{outline:none;border-color:var(--green);box-shadow:var(--glow)}
.mockdd:hover{border-color:var(--green-dim)}

/* tag inputs (health conditions / treatments) */
.taginput{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px}
.tag{display:inline-flex;align-items:center;gap:6px;background:rgba(230,184,0,.12);border:1px solid var(--amber);
 color:var(--ink);border-radius:4px;padding:3px 4px 3px 9px;font-size:12px;white-space:nowrap}
.tag .x{background:none;border:0;color:var(--amber);cursor:pointer;font-family:var(--mono);font-size:11px;padding:0 3px;line-height:1;border-left:1px solid rgba(230,184,0,.4)}
.tag .x:hover{color:var(--red)}
.tagadd{background:var(--bg);color:var(--ink-3);border:1px dashed var(--line);border-radius:4px;padding:3px 7px;
 font:inherit;font-size:11px;cursor:pointer}
.tagadd:hover,.tagadd:focus{outline:none;border-color:var(--green-dim);color:var(--green)}

/* treatment ON/OFF toggle */
.treatctl{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.treatctl .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.treattog{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:6px 13px;border-radius:5px;
 border:1.5px solid var(--ink-4);background:var(--bg-2);color:var(--ink-3);cursor:pointer;min-width:54px;transition:.12s}
.treattog.on{border-color:var(--green);background:var(--green);color:#04120b;box-shadow:var(--glow)}
.emulate{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
 padding:9px 16px;border-radius:6px;border:1.5px solid var(--green);background:transparent;color:var(--green);cursor:pointer;
 transition:.12s;white-space:nowrap}
.emulate:hover{background:rgba(59,224,138,.12)}
.emulate.dirty{background:var(--green);color:#04120b;box-shadow:var(--glow);animation:breathe 1.6s infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 8px rgba(59,224,138,.4)}50%{box-shadow:0 0 18px rgba(59,224,138,.75)}}
.emulate:disabled{opacity:.4;cursor:default;animation:none}

/* ── history train ──────────────────────────────────────── */
.history{display:flex;align-items:center;gap:7px;margin-left:auto;padding-left:14px;border-left:1px solid var(--line);flex:1 1 340px;min-width:220px}
.history .hlab{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-right:3px}
.harrow{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-3);border-radius:4px;cursor:pointer;
 font-size:13px;line-height:1;padding:5px 7px;flex-shrink:0}
.harrow:hover{border-color:var(--green-dim);color:var(--green)}
.harrow[hidden]{display:none}
.htrain-wrap{flex:1;overflow-x:auto;scrollbar-width:none}
.htrain-wrap::-webkit-scrollbar{display:none}
.htrain{display:flex;align-items:center;gap:5px;width:max-content}
/* greyed idle preview before a run is chosen */
.stage.idle{filter:grayscale(1) brightness(.5) contrast(.85)}
.idlemsg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:9;pointer-events:none;
 font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
 text-shadow:var(--glow);flex-direction:column;gap:8px}
.stage.idle .idlemsg{display:flex}
.idlemsg .big{font-size:34px;opacity:.7}
.hnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;padding:0}
.hnode .car{width:26px;height:18px;border-radius:3px;border:1.5px solid var(--green-2);background:var(--bg-2);
 display:grid;place-items:center;font-family:var(--mono);font-size:8px;color:var(--ink-3);transition:.12s}
.hnode:hover .car{border-color:var(--green-dim)}
.hnode.on .car{border-color:var(--green);background:var(--green);color:#04120b;box-shadow:var(--glow)}
.hnode .cap{font-family:var(--mono);font-size:7.5px;letter-spacing:.02em;color:var(--ink-4);max-width:52px;text-align:center;line-height:1.1}
.hnode.on .cap{color:var(--green-dim)}
.hrail{width:12px;height:1.5px;background:var(--green-2)}

/* ══ MAIN 3-PANE STAGE ══ */
.app{display:grid;grid-template-columns:var(--nav) 1fr var(--side);height:64vh;min-height:460px;
 margin:12px 20px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2)}

/* left nav */
.nav{border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);overflow:hidden}
.nav-h{padding:15px 15px 6px}
.nav-h .brand{font-weight:600;font-size:16px;color:var(--green);text-shadow:var(--glow)}
.nav-h .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink-4);margin-top:2px}
.levels{flex:1;padding:8px}
.lvl{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;
 font:inherit;cursor:pointer;padding:9px 9px;border-radius:5px;color:var(--ink-3);font-size:13px}
.lvl:hover{background:var(--panel-2);color:var(--ink-2)}
.lvl .dot{width:8px;height:8px;border:1.5px solid var(--ink-4);border-radius:50%;flex-shrink:0}
.lvl .idx{font-family:var(--mono);font-size:9px;color:var(--ink-4);margin-left:auto}
.lvl.on{color:var(--green);background:var(--panel-2);box-shadow:inset 2px 0 0 var(--green)}
.lvl.on .dot{background:var(--green);border-color:var(--green);box-shadow:var(--glow)}
.lvl.on .idx{color:var(--green-dim)}
.lvlcf{padding:1px 12px 9px 30px}
.lvltrack{display:block;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.lvltrack i{display:block;height:100%;background:var(--green-dim)}
.lvlcf em{display:block;font-family:var(--mono);font-size:8px;font-style:normal;color:var(--ink-4);margin-top:3px;letter-spacing:.02em}
.lvlproj{padding:1px 12px 9px 30px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ink-4);opacity:.75}
.nav-f{padding:11px 15px;border-top:1px solid var(--line);font-size:10px;line-height:1.5;color:var(--ink-4)}
.nav-f b{color:var(--ink-3)}

/* centre stage */
.stage{position:relative;overflow:hidden;background-color:var(--bg-2);
 background-image:radial-gradient(circle,rgba(59,224,138,.09) 1px,transparent 1.4px);background-size:24px 24px}
.crumb{position:absolute;left:14px;top:11px;z-index:6;font-family:var(--mono);font-size:10px;
 letter-spacing:.07em;color:var(--ink-4);display:flex;gap:6px;align-items:center}
.crumb b{color:var(--green);font-weight:500}
.crumb button{background:none;border:0;font:inherit;color:var(--ink-4);cursor:pointer;padding:0}
.crumb button:hover{color:var(--ink-2);text-decoration:underline}
.layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 transform-origin:center center;will-change:transform,opacity}
.layer svg{width:min(86%,940px);height:88%}
.layer svg g[data-focus]{cursor:zoom-in}
/* organelles manifest into view once, on first run selection.
   NB: animate opacity+filter only — animating `transform` would clobber the
   mitochondria groups' own translate/rotate and fling them out of bounds. */
@keyframes manifestIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
.layer svg.manifest > *{animation:manifestIn .55s ease both}
/* ── v3.1 locked UI-demo chrome ─────────────────────────────────────────── */
.demo-disclaimer{display:flex;gap:10px;align-items:baseline;padding:7px 20px;
 font-family:var(--mono);font-size:10.5px;line-height:1.55;color:#f0d493;
 background:rgba(230,184,0,.07);border-top:1px solid rgba(230,184,0,.26);border-bottom:1px solid rgba(230,184,0,.26)}
.demo-disclaimer b{flex:none;color:#04120b;background:var(--amber);border-radius:3px;padding:2px 6px;
 font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:9px}
.locked-demo .gallery{display:none}
.locked-demo .emulate.locked,.locked-demo .go.locked{opacity:.38;cursor:not-allowed;filter:grayscale(.7);animation:none;box-shadow:none;background:var(--bg-2)}
.locked-demo .treattog.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.locked-demo .mockdd:disabled,.locked-demo #q:disabled{opacity:.6;cursor:not-allowed}
.locked-demo .slider:disabled{opacity:.5;cursor:not-allowed}
.locked-demo .tag{opacity:.85}
@media(prefers-reduced-motion:reduce){.layer svg.manifest > *{animation:none}}
.hint{position:absolute;left:0;right:0;bottom:9px;z-index:6;text-align:center;font-family:var(--mono);
 font-size:9px;letter-spacing:.1em;color:var(--ink-4);pointer-events:none}

/* thinking / loading overlay */
.think{position:absolute;inset:0;z-index:12;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;
 background:rgba(4,18,11,.82);backdrop-filter:blur(2px)}
.think.on{display:flex}
.think .rings{width:56px;height:56px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;
 animation:spin .8s linear infinite;box-shadow:var(--glow)}
@keyframes spin{to{transform:rotate(360deg)}}
.think .msg{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.think .msg::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
.think .scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);
 opacity:.5;animation:scan 1.1s linear infinite}
@keyframes scan{0%{top:0}100%{top:100%}}

/* agent card scene (organism/organ) */
.agentscene{position:relative;width:88%;height:90%;display:flex;flex-direction:column;gap:11px;padding:8px;overflow:auto}
.mod2{position:relative;border:1px solid var(--green-dim);border-radius:7px;background:var(--panel);padding:12px 15px;box-shadow:inset 0 0 24px rgba(59,224,138,.05)}
.mod2 .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-4)}
.mod2 h4{margin:5px 0 6px;font-size:15.5px;font-weight:600;color:var(--ink)}
.mod2 p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.mod2 .attn{position:absolute;top:11px;right:13px;font-family:var(--mono);font-size:9.5px;color:#04120b;background:var(--orange);border-radius:4px;padding:3px 8px}
.mod2 .okflag{position:absolute;top:11px;right:13px;font-family:var(--mono);font-size:9.5px;color:var(--green);border:1px solid var(--green-dim);border-radius:4px;padding:2px 8px}
.agrid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.acard{border:1px solid var(--line);border-radius:6px;padding:9px 11px;border-left-width:4px;background:var(--panel);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.acard:hover{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
.acard.nominal{border-left-color:var(--green)}
.acard.attention{border-left-color:var(--orange);background:linear-gradient(90deg,rgba(245,115,31,.08),var(--panel) 60%)}
.acard.not_assessed{border-left-color:var(--ink-4);background:repeating-linear-gradient(45deg,#0a2114 0 5px,#08200f 5px 10px)}
.acard .nm{font-size:12px;font-weight:500;color:var(--ink)}
.acard .stt{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.acard.nominal .stt{color:var(--green-dim)}.acard.attention .stt{color:var(--orange)}.acard.not_assessed .stt{color:var(--ink-4)}
.acard p{margin:6px 0 0;font-size:10.5px;line-height:1.4;color:var(--ink-2)}

/* ── right side pane ────────────────────────────────────── */
.side{border-left:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);overflow:hidden}
.qbar{padding:13px 15px;border-bottom:1px solid var(--line);background:var(--bg-2);flex-shrink:0}
.qbar .qrow{display:flex;gap:6px}
.qbar input{flex:1;font:inherit;font-size:12.5px;padding:8px 11px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink)}
.qbar input::placeholder{color:var(--ink-4)}
.qbar input:focus{outline:none;border-color:var(--green);box-shadow:var(--glow)}
.qbar .go{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:8px 13px;border:1px solid var(--green);border-radius:5px;background:transparent;color:var(--green);cursor:pointer}
.qbar .go:hover{background:rgba(59,224,138,.12)}
.qbar .badges{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;padding:2px 7px;border-radius:4px;border:1px solid}
.pill.sim{color:var(--down);border-color:var(--down)}
.pill.ok{color:var(--green);border-color:var(--green-dim)}
.pill.bad{color:var(--red);border-color:var(--red)}
.chips2{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.chips2 button{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:4px 7px;cursor:pointer}
.chips2 button:hover{border-color:var(--green-dim);color:var(--green)}
.side-b{flex:1;overflow-y:auto;padding:15px 16px 24px}
.side-b .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.side-b h2{margin:5px 0 2px;font-size:16px;font-weight:600;line-height:1.2;color:var(--ink)}
.lead{font-size:13px;line-height:1.6;color:var(--ink-2);margin:11px 0 4px}
.blk{margin-top:18px}
.blk-h{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding-bottom:6px;border-bottom:1px solid var(--line)}
.dsc{display:flex;align-items:center;gap:8px;padding:7px 6px;margin:0 -6px;border-radius:4px}
.dsc:hover{background:var(--panel-2)}
.dsc .nm{font-size:12px;flex:1;color:var(--ink)}
.dsc .wd{font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.chip{display:inline-flex;gap:2px}
.chip i{width:8px;height:8px;border:1px solid var(--ink-4);display:block;background:transparent}
.chip.na i{border-style:dashed}
.acard2{border:1px solid var(--line);border-radius:6px;padding:9px 11px;margin-top:8px;border-left-width:4px}
.acard2.nominal{border-left-color:var(--green)}.acard2.attention{border-left-color:var(--orange)}.acard2.not_assessed{border-left-color:var(--ink-4)}
.acard2 .nm{font-size:12px;font-weight:500;color:var(--ink)}
.acard2 p{margin:4px 0 0;font-size:11px;line-height:1.45;color:var(--ink-2)}
.acard2.hasdetail{cursor:pointer}
.acard2.hasdetail:hover{border-color:var(--green-dim)}
.acard2 .arow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.acard2 .aclock{font-family:var(--mono);font-size:8px;color:var(--ink-4);white-space:nowrap;letter-spacing:.03em}
.acard2 .adetail{max-height:0;overflow:hidden;transition:max-height .22s ease}
.acard2.open .adetail{max-height:460px}
.acard2 .adetail p{margin:7px 0 0;font-size:10.5px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:7px}
.acard2 .aconf{font-family:var(--mono);font-size:8px;color:var(--ink-4);margin-top:5px;letter-spacing:.05em}
.acard2.hasdetail .arow .nm::after{content:" ▸";color:var(--ink-4);font-size:9px}
.acard2.open.hasdetail .arow .nm::after{content:" ▾"}
.mconf{font-family:var(--mono);font-size:9px;color:var(--green-dim);white-space:nowrap}
.expline{margin-top:7px;color:var(--ink-3);line-height:1.5}
.expline b{color:var(--green-dim);text-transform:uppercase;font-size:8.5px;font-family:var(--mono);letter-spacing:.1em;margin-right:6px}
.ev{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:11.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.ev span:last-child{font-family:var(--mono);font-size:9.5px;color:var(--ink-4)}
.note2{font-size:12px;line-height:1.55;color:var(--ink-2)}
.note2 b{color:var(--ink);font-weight:500}
.flagline{display:flex;gap:8px;font-size:11.5px;line-height:1.45;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line-2)}
.flagline .bang{color:var(--orange);font-family:var(--mono);font-weight:700;flex-shrink:0}

/* organelle focus card */
.organelle{border:1px solid var(--green-dim);border-radius:7px;background:var(--raise);padding:12px 14px;margin-bottom:14px;box-shadow:inset 0 0 26px rgba(59,224,138,.06)}
.organelle .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.organelle .k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dim)}
.organelle h3{margin:4px 0 2px;font-size:15px;color:var(--ink)}
.organelle .agent{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-bottom:8px}
.organelle .stt{font-family:var(--mono);font-size:9px;padding:2px 7px;border-radius:4px;border:1px solid}
.organelle .stt.nominal{color:var(--green);border-color:var(--green-dim)}
.organelle .stt.attention{color:var(--orange);border-color:var(--orange)}
.organelle p{margin:0;font-size:12px;line-height:1.58;color:var(--ink-2)}
.organelle p + p{margin-top:9px}
.organelle .close{background:none;border:0;color:var(--ink-4);font-family:var(--mono);font-size:10px;cursor:pointer;margin-top:9px}
.organelle .close:hover{color:var(--green)}

/* declined placeholder */
.declined{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;padding:36px}
.declined.on{display:flex}
.dcard{max-width:520px;border:1px dashed var(--red);border-radius:8px;background:var(--panel);padding:24px 26px;box-shadow:0 0 26px rgba(255,82,82,.14)}
.dcard .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--red)}
.dcard h3{margin:8px 0 10px;font-size:18px;font-weight:600;color:var(--ink)}
.dcard p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--ink-2)}

/* ══ bottom master report ══ */
.report{margin:14px 20px 26px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.report-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.report-h .lhs{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.report-h .title{font-size:15px;font-weight:600;color:var(--ink)}
.report-h .ph{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.report-h .conf{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.confbar{width:120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.confbar i{display:block;height:100%;background:var(--green);box-shadow:var(--glow)}
.report-b{padding:15px 24px 22px;max-height:560px;overflow-y:auto}
.tracelegend{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--ink-4);margin:0 0 12px}
.trace{border:1px solid var(--line);border-left-width:4px;border-radius:6px;margin:0 0 8px;background:var(--panel);max-width:1000px}
.trace.nominal{border-left-color:var(--green)}
.trace.attention{border-left-color:var(--orange)}
.trace.modr{border-left-color:var(--green-dim);background:rgba(59,224,138,.05)}
.trace .th{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;cursor:pointer;padding:10px 14px;text-align:left}
.trace .th:hover{background:var(--panel-2)}
.trace .tn{font-size:13px;font-weight:600;color:var(--ink)}
.trace .tmeta{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);white-space:nowrap;display:flex;align-items:center;gap:7px}
.trace .chev{display:inline-block;transition:transform .15s;color:var(--green-dim);font-size:10px}
.trace.open .chev{transform:rotate(90deg)}
.trace .tteaser{margin:0;padding:0 14px 11px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.trace .tfull{max-height:0;overflow:hidden;transition:max-height .28s ease}
.trace.open .tfull{max-height:1800px}
.trace .tfull p{margin:0;padding:9px 14px 0;font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.trace .tfull p:first-child{border-top:1px solid var(--line-2);padding-top:11px}
.trace .tfull p:last-child{padding-bottom:12px}
.trace .tfull .thin{color:var(--ink-4);font-style:italic}
/* clickable gene rows (side pane) */
.genewrap{margin:0 -6px}
.generow{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;padding:7px 6px;border-radius:4px;font:inherit}
.generow:hover{background:var(--panel-2)}
.generow .gn{font-size:12.5px;color:var(--ink);font-weight:500}
.generow .gt{font-family:var(--mono);font-size:10px}
.gann{max-height:0;overflow:hidden;transition:max-height .2s ease;font-size:11px;line-height:1.5;color:var(--ink-3)}
.genewrap.open .gann{max-height:120px;padding:2px 6px 8px}
.organelle .stt.up{color:var(--up);border-color:var(--up)}
.organelle .stt.down{color:var(--down);border-color:var(--down)}
.directive{column-span:all;font-size:11.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.directive b{color:var(--green-dim);text-transform:uppercase;font-size:8.5px;font-family:var(--mono);letter-spacing:.1em;margin-right:6px}
.directive .exp{display:block;margin-top:5px;color:var(--ink-3)}
.agentout{break-inside:avoid;border:1px solid var(--line);border-left-width:4px;border-radius:6px;padding:9px 12px;margin:0 0 10px;background:var(--panel)}
.agentout.nominal{border-left-color:var(--green)}
.agentout.attention{border-left-color:var(--orange);background:linear-gradient(90deg,rgba(245,115,31,.06),var(--panel) 55%)}
.agentout.modr{border-left-color:var(--green-dim);background:rgba(59,224,138,.05)}
.agentout .ah{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.agentout .an{font-size:12.5px;font-weight:600;color:var(--ink)}
.agentout .ac{font-family:var(--mono);font-size:8px;color:var(--ink-4);white-space:nowrap;letter-spacing:.03em}
.agentout .as{margin:5px 0 0;font-size:11px;line-height:1.5;color:var(--ink-2)}
.agentout .ad{margin:6px 0 0;font-size:10px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:6px}
.report-b .covered{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--green-dim);margin-bottom:12px;break-inside:avoid}
.report-b h4{margin:14px 0 6px;font-size:12px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--green);break-after:avoid}
.report-b h4:first-child{margin-top:0}
.report-b p{margin:0 0 9px;font-size:12.5px;line-height:1.62;color:var(--ink-2);break-inside:avoid}
.report-b p b{color:var(--ink);font-weight:600}
.report-b .bang{color:var(--orange);font-weight:700}

@media(max-width:1180px){:root{--nav:0;--side:340px}.nav{display:none}.report-b{columns:1}
 .patient{grid-template-columns:repeat(3,1fr)}}