/* Depolarize v1.0. Copyright 2026 Jay Gohri and Adhish Beri (The CardioLADs). All rights reserved. */
/* DEPOLARIZE — dark clinical screen, one phosphor hue, one warm accent */
:root{
  --bg: oklch(14% 0.014 230);
  --bg-2: oklch(17% 0.016 230);
  --surface: oklch(20% 0.018 230);
  --surface-2: oklch(24% 0.02 230);
  --line: oklch(100% 0 0 / 0.08);
  --line-2: oklch(100% 0 0 / 0.14);
  --text: oklch(94% 0.01 230);
  --text-2: oklch(72% 0.02 230);
  --text-3: oklch(55% 0.02 230);
  --trace: oklch(86% 0.19 155);       /* phosphor green */
  --trace-dim: oklch(86% 0.19 155 / 0.35);
  --accent: oklch(82% 0.15 80);       /* warm amber */
  --accent-ink: oklch(20% 0.05 80);
  --alarm: oklch(68% 0.2 25);
  --ok: var(--trace);
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --r-sm: 6px; --r: 12px; --r-lg: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: clamp(22px, 1.2rem + 0.8vw, 28px); --text-2xl: clamp(30px, 1.4rem + 1.8vw, 44px); --text-hero: clamp(38px, 2rem + 3vw, 68px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.08;margin:0}
h1{font-size:var(--text-hero)} h2{font-size:var(--text-2xl)} h3{font-size:var(--text-xl)}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:var(--r-sm);z-index:100}
.skip:focus{left:8px}
.eyebrow{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:var(--sp-3)}
.muted{color:var(--text-3)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* top bar */
.topbar{display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-5);height:60px;border-bottom:1px solid var(--line);background:color-mix(in oklab, var(--bg) 85%, transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.01em}
.logo{width:28px;height:28px;color:var(--trace)}
.topnav{display:flex;gap:var(--sp-1);margin-left:auto}
.topnav button{white-space:nowrap;padding:8px 12px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:var(--text-sm)}
.topnav .short{display:none}
.topnav button:hover,.topnav button.active{color:var(--text);background:var(--surface)}
.progress-pill{white-space:nowrap;font-size:var(--text-xs);font-weight:700;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-variant-numeric:tabular-nums}

main{flex:1;display:flex;flex-direction:column}
.screen{padding:var(--sp-6) var(--sp-5);max-width:1440px;width:100%;margin:0 auto;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:var(--r-sm);font-weight:700;font-size:var(--text-sm);border:1px solid transparent;transition:transform .15s var(--ease), background .2s, border-color .2s;min-height:44px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:7px 12px;min-height:36px}
.btn-danger{background:var(--alarm);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- title ---------- */
.screen-title{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.title-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-7);align-items:center}
h1 em{font-style:normal;color:var(--trace)}
.lede{color:var(--text-2);font-size:var(--text-lg);margin-top:var(--sp-5);max-width:58ch}
.title-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.title-tiers{list-style:none;padding:0;margin:var(--sp-7) 0 0;display:flex;flex-wrap:wrap;gap:8px}
.title-tiers li{font-size:var(--text-xs);font-weight:700;color:var(--text-2);padding:6px 10px;border:1px solid var(--line);border-radius:999px}
.title-tiers li b{color:var(--accent);margin-right:6px}
.title-monitor{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);box-shadow:0 30px 80px -30px oklch(0% 0 0 / .8)}
.title-monitor canvas{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.title-monitor-caption{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--text-3);padding:10px 6px 2px;font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--trace);box-shadow:0 0 12px var(--trace);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.4}}

/* ---------- map ---------- */
.map-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.switch{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-2);cursor:pointer}
.switch input{accent-color:var(--accent);width:18px;height:18px}
.tiers{display:flex;flex-direction:column;gap:var(--sp-4)}
.map-tools{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;justify-content:flex-end}
.tier{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-5);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);position:relative;overflow:hidden}
.tier.locked{opacity:.55}
.tier-n{font-family:var(--font-display);font-size:var(--text-xl);color:var(--accent)}
.tier h3{margin-top:4px}
.tier-sub{color:var(--text-2);font-size:var(--text-sm);margin-top:4px}
.tier-blurb{color:var(--text-3);font-size:var(--text-sm);margin-top:var(--sp-3);line-height:1.45}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-3);align-content:start}
.lvl{text-align:left;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;gap:4px;min-height:84px;transition:border-color .2s,transform .2s var(--ease)}
.lvl:hover:not(:disabled){border-color:var(--line-2);transform:translateY(-2px)}
.lvl:disabled{cursor:not-allowed;opacity:.6}
.lvl-top{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--text-3);font-weight:700}
.lvl-top .mode{margin-left:auto;padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.mode.build{color:var(--trace)} .mode.bedside{color:var(--accent)} .mode.ep{color:oklch(80% 0.1 300)}
.lvl-name{font-weight:700;font-size:var(--text-sm)}
.lvl.done{border-color:var(--trace-dim)}
.lvl.done .lvl-top::before{content:"✓";color:var(--trace)}
.lvl.locked .lvl-top::before{content:"🔒";filter:grayscale(1);opacity:.6}

/* ---------- level ---------- */
.screen-level{padding-top:var(--sp-4)}
.level-head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);flex-wrap:wrap}
.level-title{display:flex;align-items:baseline;gap:12px}
.level-id{font-family:var(--font-display);color:var(--accent);font-size:var(--text-lg)}
.level-title h2{font-size:var(--text-xl)}
.level-mode{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2)}
.level-clock{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-3);font-size:var(--text-sm);font-weight:700}
.level-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-4);align-items:start}
.stage{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.side{display:flex;flex-direction:column;gap:var(--sp-3);position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding-right:2px}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4)}
.panel-h{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:var(--sp-3)}
.panel-h .right{margin-left:auto;letter-spacing:0;text-transform:none;color:var(--text-2)}
.brief{color:var(--text-2);font-size:var(--text-sm);line-height:1.5}
.scope{background:#070c10;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.scope canvas{display:block;width:100%;height:auto}
.scope-label{position:absolute;bottom:8px;right:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-3);pointer-events:none}
.scope-label.live{color:var(--trace)}
.scope-tools{position:absolute;top:6px;right:8px;display:flex;gap:6px}
.chip{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);background:oklch(0% 0 0/.35)}
.chip.on{color:var(--accent);border-color:var(--accent)}
.chip:hover{color:var(--text)}

/* console */
.console .group{margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.console .group:last-child{border:0;margin:0;padding:0}
.group-h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.ctl{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.ctl label{display:flex;justify-content:space-between;font-size:var(--text-sm);font-weight:500;color:var(--text)}
.ctl label .v{font-variant-numeric:tabular-nums;color:var(--trace);font-weight:700}
.ctl .note{font-size:var(--text-xs);color:var(--text-3)}
.ctl input[type=range]{width:100%;accent-color:var(--trace);height:28px}
.ctl select{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 10px;font:inherit;font-size:var(--text-sm)}
.ctl.locked{opacity:.4;pointer-events:none}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:var(--text-sm);font-weight:500}
.tg{width:44px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);position:relative;transition:background .2s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-2);transition:transform .2s var(--ease),background .2s}
.tg.on{background:var(--trace-dim);border-color:var(--trace)} .tg.on::after{transform:translateX(18px);background:var(--trace)}

/* checks */
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;gap:10px;align-items:center;font-size:var(--text-sm);color:var(--text-2)}
.checks li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;transition:all .25s}
.checks li.ok{color:var(--text)} .checks li.ok::before{background:var(--trace);border-color:var(--trace);box-shadow:0 0 10px var(--trace-dim)}
.match{margin-top:var(--sp-3);height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.match i{display:block;height:100%;background:var(--trace);width:0;transition:width .6s var(--ease)}

/* readouts */
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.ro .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.ro .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);font-family:var(--font-display)}
.ro .v.warn{color:var(--accent)} .ro .v.bad{color:var(--alarm)}
.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vitals .ro .v{font-size:26px}
.vitals .ro.hr .v{color:var(--trace)}

/* bedside */
.patient{display:flex;gap:var(--sp-4);align-items:flex-start}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--accent);flex:none}
.patient .story{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}
.patient .story b{color:var(--text)}
.goal{display:flex;gap:10px;align-items:center;font-size:var(--text-sm);color:var(--text)}
.goal .bar{flex:1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.goal .bar i{display:block;height:100%;width:0;background:var(--trace);transition:width .3s linear}
.drugs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drug{text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:flex;flex-direction:column;gap:2px;min-height:60px;transition:border-color .2s}
.drug:hover:not(:disabled){border-color:var(--accent)}
.drug .n{font-weight:700;font-size:var(--text-sm)}
.drug .c{font-size:11px;color:var(--text-3)}
.drug:disabled{opacity:.4;cursor:wait}
.elec{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.elec .ctl{margin:0}
.shock{grid-column:1/-1}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto;font-size:var(--text-sm)}
.log li{display:flex;gap:10px;color:var(--text-2)}
.log li .t{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none;width:44px}
.log li.ev-alarm{color:var(--alarm)} .log li.ev-warn{color:var(--accent)} .log li.ev-rhythm{color:var(--trace)} .log li.ev-drug{color:var(--text)}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50;transition:opacity .4s}
.flash.on{opacity:.7;transition:none}

/* EP */
.ep-tools{display:flex;flex-wrap:wrap;gap:8px}
.caliper-read{font-family:var(--font-display);font-size:28px;color:var(--accent);font-variant-numeric:tabular-nums}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--text-sm);font-weight:500;line-height:1.4}
.choice:hover{border-color:var(--accent)}
.ahtable{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.ahtable th,.ahtable td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line)}
.ahtable th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ahtable td.jump{color:var(--accent);font-weight:700}
.koch{width:100%;height:auto;display:block}
.koch .site{cursor:pointer;fill:oklch(100% 0 0/.04);stroke:var(--line-2);transition:fill .2s}
.koch .site:hover{fill:oklch(82% 0.15 80/.25);stroke:var(--accent)}
.koch text{font-family:var(--font-body);font-size:11px;fill:var(--text-2);pointer-events:none}
.koch .lbl{font-size:10px;fill:var(--text-3);letter-spacing:.06em;text-transform:uppercase}

/* codex */
.codex-tabs{display:flex;gap:6px;margin:var(--sp-5) 0}
.tab{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);font-weight:700;font-size:var(--text-sm)}
.tab.active{background:var(--surface);color:var(--text)}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.card{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.card .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.card h4{margin:6px 0 8px;font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}
.card p{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}
.card.locked{opacity:.4}
.pharm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3)}
.params{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.params span{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--trace);font-variant-numeric:tabular-nums}
.empty{color:var(--text-3);font-size:var(--text-sm);padding:var(--sp-5);border:1px dashed var(--line-2);border-radius:var(--r);text-align:center}

/* overlay */
.overlay{position:fixed;inset:0;background:oklch(0% 0 0/.6);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:40;padding:var(--sp-4)}
.overlay-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--sp-6);max-width:620px;width:100%;box-shadow:0 40px 100px -30px #000;animation:fade .4s var(--ease)}
.overlay-card h3{margin-bottom:var(--sp-3)}
.overlay-actions{display:flex;gap:10px;margin-top:var(--sp-5);flex-wrap:wrap}
.prose{color:var(--text-2);font-size:var(--text-base);line-height:1.6;max-width:72ch}
.prose p+p{margin-top:var(--sp-3)}
.prose strong{color:var(--text)}
.prose .lesson{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:2px solid var(--accent);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--text-sm)}

/* responsive */
@media (max-width: 1080px){
  .title-grid{grid-template-columns:1fr}
  .level-body{grid-template-columns:1fr}
  .side{position:static;max-height:none}
  .tier{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .screen{padding:var(--sp-5) var(--sp-4)}
  .topbar{padding:0 var(--sp-4);gap:var(--sp-3)}
  .topnav button{padding:8px}
  .topnav .long{display:none} .topnav .short{display:inline}
  .brand span{display:none}
  .readouts,.vitals{grid-template-columns:repeat(2,1fr)}
  .drugs{grid-template-columns:1fr}
  .level-clock{display:none}
}

.creators-eyebrow{margin-top:var(--sp-8)}
.group-logo{margin:var(--sp-4) 0 var(--sp-5);padding:var(--sp-4) var(--sp-5);background:#fff;border-radius:var(--r);max-width:420px}
.group-logo img{display:block;width:100%;height:auto}
.creators{list-style:none;padding:0;margin:var(--sp-4) 0;display:grid;gap:var(--sp-3)}
.creators li{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border-left:2px solid var(--trace);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
.creators li span{color:var(--text-3);font-size:var(--text-sm)}
.copyright{font-size:var(--text-xs);margin-top:var(--sp-5)}
.site-foot{padding:var(--sp-4) var(--sp-5);color:var(--text-3);font-size:var(--text-xs);text-align:center;border-top:1px solid var(--line)}