/* CardiacWindow v0.1. Copyright 2026 The CardioLADs. All rights reserved. */
/* CARDIACWINDOW — dark scanner room, one cyan phosphor, one warm accent. Shares the Depolarize token system. */
:root{
  --bg: oklch(13% 0.016 240);
  --bg-2: oklch(16% 0.018 240);
  --surface: oklch(19% 0.02 240);
  --surface-2: oklch(23% 0.022 240);
  --line: oklch(100% 0 0 / 0.08);
  --line-2: oklch(100% 0 0 / 0.14);
  --text: oklch(94% 0.01 240);
  --text-2: oklch(72% 0.02 240);
  --text-3: oklch(55% 0.02 240);
  --trace: oklch(86% 0.13 215);        /* echo cyan */
  --trace-dim: oklch(86% 0.13 215 / 0.35);
  --accent: oklch(82% 0.15 80);        /* warm amber */
  --accent-ink: oklch(20% 0.05 80);
  --alarm: oklch(68% 0.2 25);
  --ok: oklch(80% 0.17 155);
  --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(36px, 2rem + 2.6vw, 62px);
  --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)}
a{color:var(--trace)}
.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}
.lede{color:var(--text-2);font-size:var(--text-lg);max-width:70ch;margin:var(--sp-4) 0 var(--sp-5)}

/* top bar */
.topbar{display:flex;align-items:center;gap:var(--sp-4);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 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)}
.instructor{font-size:var(--text-xs);color:var(--text-2);display:flex;gap:6px;align-items:center;white-space:nowrap}

main{flex:1;display:flex;flex-direction:column}
.screen{padding:var(--sp-6) var(--sp-5);max-width:1200px;width:100%;margin:0 auto;animation:fade .5s var(--ease)}
.screen-wide{max-width:1480px}
@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:8px 12px;min-height:36px}

/* hero */
#screen-title{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-7);align-items:center;min-height:calc(100vh - 60px)}
.hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.hero-facts{list-style:none;padding:0;margin:var(--sp-6) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);color:var(--text-2);font-size:var(--text-sm)}
.hero-facts b{display:block;font-family:var(--font-display);font-size:28px;color:var(--trace)}
.hero-canvas canvas{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#000;box-shadow:0 30px 80px oklch(0% 0 0 / .5)}
@media (max-width: 900px){#screen-title{grid-template-columns:1fr;min-height:0}}

/* map */
.tiers{display:grid;gap:var(--sp-4)}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4) var(--sp-5)}
.tier-head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.tier-head h3{font-size:var(--text-lg)}
.tier-head .muted{font-size:var(--text-sm)}
.levels{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.level-chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:var(--text-sm);color:var(--text-2);display:flex;gap:8px;align-items:center;transition:background .2s}
.level-chip:hover{background:var(--surface-2);color:var(--text)}
.level-chip.done{border-color:var(--ok);color:var(--text)}
.level-chip .type{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* level layout */
.level-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-5);align-items:start}
@media (max-width: 1180px){.level-layout{grid-template-columns:1fr}}
.task-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4);position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto}
.task-panel h3{font-size:var(--text-lg);margin-bottom:var(--sp-2)}
.task-panel .prompt{color:var(--text-2);font-size:var(--text-sm);margin-bottom:var(--sp-3)}
.options{display:grid;gap:var(--sp-2)}
.option{text-align:left;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:var(--text-sm);transition:background .2s,border-color .2s}
.option:hover{background:var(--surface-2)}
.option.correct{border-color:var(--ok);background:oklch(80% 0.17 155 / .12)}
.option.wrong{border-color:var(--alarm);background:oklch(68% 0.2 25 / .12)}
.verdict{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);font-size:var(--text-sm);background:var(--bg-2);border-left:3px solid var(--accent)}
.verdict.ok{border-left-color:var(--ok)} .verdict.bad{border-left-color:var(--alarm)}
.verdict .links{margin-top:var(--sp-2);display:flex;gap:6px;flex-wrap:wrap}
.linkchip{font-size:var(--text-xs);padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--trace)}
.task-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}
.field{display:flex;gap:8px;align-items:center;margin-top:var(--sp-2)}
.field input{width:110px;padding:8px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit}

/* scanner */
.scanner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);display:grid;gap:var(--sp-3)}
.scan-top{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
select{background:var(--bg-2);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:var(--text-sm);max-width:100%}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.seg button{padding:8px 12px;font-size:var(--text-sm);color:var(--text-2);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--surface-2);color:var(--trace)}
.seg.small button{padding:5px 9px;font-size:var(--text-xs)}
.scan-body{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--sp-3)}
@media (max-width: 760px){.scan-body{grid-template-columns:1fr}}
.scan-canvas-wrap{position:relative;background:#000;border-radius:var(--r-sm);overflow:hidden}
#scan{width:100%;height:auto;display:block;cursor:crosshair;touch-action:none}
.hint{position:absolute;left:8px;top:8px;font-size:var(--text-xs);color:var(--text-2);background:oklch(0% 0 0 / .55);padding:4px 8px;border-radius:var(--r-sm);pointer-events:none;max-width:70%}
.scan-side{display:grid;gap:var(--sp-2);align-content:start;font-size:var(--text-xs);color:var(--text-2)}
.scan-side label{display:block}
.scan-side label input[type=range]{display:block;margin-top:4px}
.scan-side input[type=range]{width:100%;accent-color:var(--trace)}
.probe{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px;display:grid;gap:6px}
.probe-title{font-weight:700;color:var(--text)}
.dial{color:var(--trace)}
.readouts,.truth{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;background:var(--bg-2)}
.readouts-title{font-weight:700;color:var(--text);margin-bottom:4px}
.readouts ul,.truth ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.readouts li{display:flex;justify-content:space-between;gap:8px}
.readouts li b{color:var(--trace)}
.truth li{display:flex;justify-content:space-between}
.strip-wrap{position:relative;background:#000;border-radius:var(--r-sm);overflow:hidden}
#strip{width:100%;height:auto;display:block;cursor:crosshair}
.teach{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{padding:6px 10px;border-radius:999px;font-size:var(--text-xs);color:var(--text-2);border:1px solid transparent}
.tabs button.active{border-color:var(--line-2);color:var(--trace)}
.teach-body{font-size:var(--text-sm);color:var(--text-2);margin-top:var(--sp-2);line-height:1.55}
.teach-body b{color:var(--text)}

/* console (sandbox) */
.console h3{font-size:var(--text-lg)}
.console .group{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.console .group-title{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.console label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:var(--text-xs);color:var(--text-2);margin-bottom:6px}
.console label input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.console label.check{grid-template-columns:auto 1fr;align-items:center}
.segments{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.segments button{font-size:10px;padding:6px 2px;border:1px solid var(--line-2);border-radius:4px;color:var(--text-2)}
.segments button[data-score="2"]{background:oklch(70% 0.15 80 / .35)}
.segments button[data-score="3"]{background:oklch(60% 0.2 25 / .45)}
.segments button[data-score="4"]{background:oklch(50% 0.2 320 / .5)}
.segments .apical{grid-column:span 1}
.derived{font-size:var(--text-xs);color:var(--text-2);display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.derived b{color:var(--trace)}

/* codex */
.codex-tools{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-4)}
#codexSearch{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:inherit;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:var(--text-xs);color:var(--text-2)}
.chip.active{color:var(--trace);border-color:var(--trace-dim)}
.codex-list{display:grid;gap:var(--sp-3)}
.entry{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4)}
.entry summary{cursor:pointer;display:flex;gap:var(--sp-3);align-items:baseline;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)}
.entry summary .grp{font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.badge{font-size:10px;padding:2px 7px;border-radius:999px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body)}
.badge.ok{background:oklch(80% 0.17 155 / .18);color:var(--ok)}
.badge.warn{background:oklch(82% 0.15 80 / .18);color:var(--accent)}
.entry dl{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;margin:var(--sp-3) 0 0;font-size:var(--text-sm)}
.entry dt{color:var(--text-3)} .entry dd{margin:0;color:var(--text-2)}
.entry dd.src a{word-break:break-all}
@media (max-width:600px){.entry dl{grid-template-columns:1fr}}

/* about */
.prose{max-width:76ch;color:var(--text-2);display:grid;gap:var(--sp-3)}
.prose h3{color:var(--text);margin-top:var(--sp-3)}
.prose ul{margin:0;padding-left:1.2em}

/* overlay */
.overlay{position:fixed;inset:0;background:oklch(0% 0 0 / .6);display:grid;place-items:center;z-index:50;padding:var(--sp-4)}
.dialog{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--sp-5);max-width:560px;width:100%;display:grid;gap:var(--sp-3)}