/* =====================================================================
   PathoSphere: design tokens, the app header, shared controls, search.
   Each section has its own accent (Theory teal, Nodes violet, ECG coral);
   body[data-section] switches --accent, and everything else follows.
   ===================================================================== */
/* Inter, served from fonts/ (variable: every weight 100-900, and an optical
   size axis, so big headings automatically get the tighter display cut) */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/Inter-Variable.ttf") format("truetype-variations"), url("../fonts/Inter-Variable.ttf") format("truetype");
}
@font-face{
  font-family:"Inter"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/Inter-Italic-Variable.ttf") format("truetype-variations"), url("../fonts/Inter-Italic-Variable.ttf") format("truetype");
}

:root{
  /* one family everywhere; the three roles differ by weight, size and tracking */
  --font-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:var(--font-ui);
  --font-display:var(--font-ui);

  --bg:#F2F0EB; --surface:#FFFFFF; --surface-2:#F8F6F2; --sunken:#E9E6DF;
  --ink:#17161B; --ink-2:#3B3942; --muted:#6C6974; --faint:#A3A0AA;
  --line:#E0DCD3; --line-2:#EBE8E1;

  --theory:#0E7A70; --nodes:#6644D8; --ecg:#D23F2E;
  --on-accent:#FFFFFF; --danger:#C23A2B;

  --shadow-sm:0 1px 2px rgba(23,22,27,.06);
  --shadow:0 1px 2px rgba(23,22,27,.05),0 8px 24px -14px rgba(23,22,27,.24);
  --shadow-lg:0 2px 8px rgba(23,22,27,.07),0 30px 64px -26px rgba(23,22,27,.4);
  --scrim:rgba(18,16,24,.42);
  --top-h:56px;

  /* Theory: one colour per kind of block */
  --c-def:#2A5BC7; --c-eti:#98670A; --c-mech:#BE3450; --c-cls:#157F59; --c-clin:#7A45C2;
  --hy-bg:#FFF3CC; --hy-line:#E0B940; --hy-ink:#5A4200;
  --mark:rgba(255,205,40,.55);

  /* Nodes: one colour per topic on the map. p0 = consequences, p1 = causes */
  --p0:#D1453B; --p1:#2F68D6; --p2:#0E8A69; --p3:#BF770B; --p4:#8B4FD8;
  --p5:#4C8A1E; --p6:#CE417D; --p7:#4050C8; --p8:#8A6138; --p9:#0A8CA6;
  --grid:rgba(23,22,27,.085); --edge:#A8A4AE;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D0E12; --surface:#15161C; --surface-2:#1B1C23; --sunken:#0A0B0E;
    --ink:#EDEBF2; --ink-2:#C6C3CE; --muted:#8F8C99; --faint:#5F5C69;
    --line:#2A2A34; --line-2:#212129;
    --theory:#3CC2B1; --nodes:#A58CFF; --ecg:#FF7864;
    --on-accent:#0D0E12; --danger:#FF7A6B;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -16px rgba(0,0,0,.9);
    --shadow-lg:0 2px 10px rgba(0,0,0,.5),0 30px 64px -24px rgba(0,0,0,.95);
    --scrim:rgba(0,0,0,.55);
    --c-def:#8AAEFF; --c-eti:#E2B458; --c-mech:#FF8A9E; --c-cls:#5ACF9C; --c-clin:#C4A3FF;
    --hy-bg:#262010; --hy-line:#7D6722; --hy-ink:#F0D78B;
    --mark:rgba(255,205,40,.32);
    --p0:#FF7A6B; --p1:#7AA7FF; --p2:#4FD1A6; --p3:#F2B24A; --p4:#B994FF;
    --p5:#9CCB5E; --p6:#FF7EB0; --p7:#8F9BFF; --p8:#D3A77C; --p9:#52CCE3;
    --grid:rgba(237,235,242,.07); --edge:#5A5766;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0E12; --surface:#15161C; --surface-2:#1B1C23; --sunken:#0A0B0E;
  --ink:#EDEBF2; --ink-2:#C6C3CE; --muted:#8F8C99; --faint:#5F5C69;
  --line:#2A2A34; --line-2:#212129;
  --theory:#3CC2B1; --nodes:#A58CFF; --ecg:#FF7864;
  --on-accent:#0D0E12; --danger:#FF7A6B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -16px rgba(0,0,0,.9);
  --shadow-lg:0 2px 10px rgba(0,0,0,.5),0 30px 64px -24px rgba(0,0,0,.95);
  --scrim:rgba(0,0,0,.55);
  --c-def:#8AAEFF; --c-eti:#E2B458; --c-mech:#FF8A9E; --c-cls:#5ACF9C; --c-clin:#C4A3FF;
  --hy-bg:#262010; --hy-line:#7D6722; --hy-ink:#F0D78B;
  --mark:rgba(255,205,40,.32);
  --p0:#FF7A6B; --p1:#7AA7FF; --p2:#4FD1A6; --p3:#F2B24A; --p4:#B994FF;
  --p5:#9CCB5E; --p6:#FF7EB0; --p7:#8F9BFF; --p8:#D3A77C; --p9:#52CCE3;
  --grid:rgba(237,235,242,.07); --edge:#5A5766;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  display:flex; flex-direction:column;
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  font-optical-sizing:auto;
  /* cv05: l with a tail, cv08: I with serifs, so IL-1 / Il / l never blur */
  font-feature-settings:"cv05" 1,"cv08" 1; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  --accent:var(--theory);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,var(--surface));
  --accent-line:color-mix(in srgb,var(--accent) 40%,var(--line));
}
body[data-section="nodes"]{--accent:var(--nodes)}
body[data-section="ecg"]{--accent:var(--ecg)}

button{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
svg{flex:none}
.mono{font-family:var(--font-mono)}
.grow{flex:1}
/* numbers in lists and tags line up */
.n,.tn,.tag,.bc,.conn-c,.cnt,.depth,kbd,.th-meta,.th-progress,.hc-of,.bc-kick,.bc-foot{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* scrollbars that don't shout */
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink) 18%,transparent) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 16%,transparent); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--ink) 30%,transparent)}

/* ---------------- shared controls ---------------- */
.kicker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}
kbd{
  font-family:var(--font-mono); font-size:10.5px; line-height:1.5; color:var(--ink-2);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:var(--surface);
}
code{font-family:var(--font-mono); font-size:.88em; background:var(--surface-2); border:1px solid var(--line-2); border-radius:5px; padding:0 4px}
.search{
  width:100%; height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:13.5px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.search::placeholder{color:var(--muted)}
.search:focus{outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ghost{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 10px; cursor:pointer;
  font-size:12.5px; color:var(--ink-2); font-weight:500; text-decoration:none; line-height:1.4;
  transition:border-color .15s, color .15s, background .15s;
}
.ghost:hover{border-color:var(--accent-line); color:var(--accent)}
.ghost.danger:hover{border-color:var(--danger); color:var(--danger)}
.ghost svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.primary{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); border-radius:8px;
  padding:6px 14px; cursor:pointer; font-size:13px; font-weight:600; text-decoration:none; line-height:1.4;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-sm); transition:filter .15s, transform .15s;
}
.primary:hover{filter:brightness(1.08)}
.primary:active{transform:translateY(1px)}
.primary svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ic{
  min-width:32px; height:32px; border:1px solid var(--line); background:var(--surface); border-radius:8px;
  cursor:pointer; color:var(--ink-2); font-size:15px; line-height:1; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color .15s, color .15s;
}
.ic.wide{font-size:12px; font-weight:600; padding:0 11px}
.ic:hover{border-color:var(--accent-line); color:var(--accent)}
.ic:disabled{opacity:.4; pointer-events:none}
.ic svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pill{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
}
.pill:hover{border-color:var(--accent-line); color:var(--accent)}
.pill[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btnrow{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 0}

/* ---------------- app header ---------------- */
.top{
  height:var(--top-h); flex:none; position:relative; z-index:30;
  display:flex; align-items:center; gap:20px; padding:0 14px 0 18px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; flex:none}
.logo svg{width:30px; height:30px}
.logo .orbit{stroke:var(--accent); transition:stroke .3s}
.logo .moon{fill:var(--accent); transition:fill .3s}
.logo .word{font-family:var(--font-display); font-size:19px; font-weight:750; line-height:1; letter-spacing:-.03em}
.logo .word i{font-style:normal; font-weight:400; color:var(--accent); transition:color .3s}
.logo:hover .orbit{animation:orbit 1.2s ease-in-out}
@keyframes orbit{50%{transform:rotate(-8deg); transform-origin:16px 16px}}

.sections{display:flex; gap:2px; padding:3px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; flex:none}
.sections a{
  display:flex; align-items:center; gap:8px; padding:6px 13px 6px 11px; border-radius:9px;
  color:var(--muted); text-decoration:none; font-weight:550; font-size:13.5px; position:relative;
  transition:color .15s, background .15s;
}
.sections a svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--c)}
.sections a:hover{color:var(--ink)}
.sections a[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.sections a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-4px; height:2px; border-radius:2px; background:var(--c);
}
.sections .badge{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:1px 5px; border-radius:4px; border:1px dashed var(--line); color:var(--muted);
}

.cmdk{
  margin-left:auto; display:flex; align-items:center; gap:10px; width:min(380px,34vw); height:36px;
  padding:0 7px 0 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  color:var(--muted); cursor:pointer; font-size:13px; text-align:left;
  transition:border-color .15s, background .15s;
}
.cmdk:hover{border-color:var(--accent-line); background:var(--surface)}
.cmdk svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.cmdk-t{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.theme-btn{width:36px; height:36px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
}

/* ---------------- the three views ---------------- */
.views{flex:1; min-height:0; position:relative}
/* inactive views keep their size (so the Nodes canvas can still measure
   itself) but are invisible and inert */
.view{position:absolute; inset:0; visibility:hidden}
body[data-section="theory"] #view-theory,
body[data-section="nodes"] #view-nodes,
body[data-section="ecg"] #view-ecg{visibility:visible}

/* ---------------- search palette ---------------- */
.palette{
  position:fixed; inset:0; z-index:60; background:var(--scrim);
  display:flex; justify-content:center; align-items:flex-start; padding:11vh 16px 16px;
  animation:fade .12s ease-out;
}
@keyframes fade{from{opacity:0}}
.pal{
  width:min(680px,100%); max-height:74vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  animation:rise .16s ease-out;
}
@keyframes rise{from{transform:translateY(6px) scale(.99); opacity:.4}}
.pal-in{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line-2)}
.pal-in svg{width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.9; stroke-linecap:round}
.pal-in input{flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ink)}
.pal-in input::placeholder{color:var(--faint)}
.pal-res{overflow-y:auto; padding:6px 8px 8px}
.pal-grp{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--muted); padding:12px 10px 5px;
}
.pal-item{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:4px 12px; align-items:center;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.pal-item[aria-selected="true"]{background:var(--accent-soft)}
.pal-item .tag{
  justify-self:start; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:2px 6px; border-radius:5px; color:var(--c,var(--accent)); background:color-mix(in srgb,var(--c,var(--accent)) 12%,transparent);
}
.pal-item .lb{font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal-item .sub{grid-column:2/4; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal-item .sub mark{background:var(--mark); color:var(--ink); border-radius:2px; padding:0 1px}
.pal-item .go{font-family:var(--font-mono); font-size:10.5px; color:var(--muted)}
.pal-none{padding:26px 14px; text-align:center; color:var(--muted); font-size:13.5px}
.pal-foot{display:flex; gap:18px; padding:9px 16px; border-top:1px solid var(--line-2); font-size:11.5px; color:var(--muted); background:var(--surface-2)}
.pal-foot kbd{margin-right:2px}

/* notes text outside the cards: " · " lists, one item per line (js/format.js) */
.dl-lead{display:block}
.dl{display:block; position:relative; padding-left:12px}
.dl::before{content:"\B7"; position:absolute; left:0; top:0; width:8px; text-align:center; font-weight:900; transform:scale(1.6); transform-origin:50% 55%; opacity:.75}

/* ---------------- toast (used by Nodes and Theory) ---------------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:70;
  background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:10px; font-size:13px; box-shadow:var(--shadow-lg);
  animation:rise .16s ease-out;
}

/* ---------------- small screens ---------------- */
@media (max-width:1100px){ .cmdk{width:44px; padding:0; justify-content:center} .cmdk-t,.cmdk kbd{display:none} }
@media (max-width:720px){
  .top{gap:10px; padding:0 10px}
  .logo .word{display:none}
  .sections a{padding:6px 9px}
  .sections .badge{display:none}
}
@media (max-width:480px){ .sections a span{display:none} .sections a{padding:7px 10px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }