/* vla.cpp/learn - theme after talos.wtf: Geist type, warm paper light mode,
   zinc dark mode, indigo accent, 0.5rem radius. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

:root {
  --bg: oklch(14.5% 0 0);
  --fg: oklch(98.5% 0 0);
  --card: oklch(20.5% 0 0);
  --muted: oklch(70% 0 0);
  --faint: oklch(50% 0 0);
  --border: oklch(26.9% 0 0);
  --border-strong: oklch(35% 0 0);
  --accent: oklch(64.6% .222 264.376);
  --accent-soft: oklch(64.6% .222 264.376 / .18);
  --selection: oklch(55% .12 264.376);
  --code-bg: oklch(17% 0 0);
  --gutter: oklch(45% 0 0);
  --line-hover: oklch(100% 0 0 / .05);
  --diag-line: oklch(55% 0 0);
  --radius: .5rem;

  --tok-comment: oklch(55% .02 264);
  --tok-keyword: oklch(76% .14 264);
  --tok-string: oklch(76% .1 150);
  --tok-number: oklch(78% .12 70);
  --tok-function: oklch(80% .1 290);
  --tok-class: oklch(78% .1 210);
  --tok-macro: oklch(72% .12 20);
  --tok-punct: oklch(75% 0 0);
}

:root[data-theme="light"] {
  --bg: #f1efec;
  --fg: oklch(18% 0 0);
  --card: #f7f6f4;
  --muted: oklch(45% 0 0);
  --faint: oklch(60% 0 0);
  --border: oklch(88% 0 0);
  --border-strong: oklch(80% 0 0);
  --accent: oklch(64.6% .222 264.376);
  --accent-soft: oklch(64.6% .222 264.376 / .12);
  --selection: oklch(86% .04 264.376);
  --code-bg: #faf9f7;
  --gutter: oklch(62% 0 0);
  --line-hover: oklch(0% 0 0 / .04);
  --diag-line: oklch(55% 0 0);

  --tok-comment: oklch(52% .02 264);
  --tok-keyword: oklch(46% .19 264);
  --tok-string: oklch(45% .1 150);
  --tok-number: oklch(50% .14 45);
  --tok-function: oklch(38% .1 290);
  --tok-class: oklch(45% .11 210);
  --tok-macro: oklch(50% .13 20);
  --tok-punct: oklch(40% 0 0);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-variant-ligatures: none;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
::selection { background: var(--selection); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--accent-soft);
  padding: .05em .3em;
  border-radius: 4px;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
  height: 50px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.brand {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.brand-sep { color: var(--faint); margin: 0 .4em; }
.brand-learn { color: var(--accent); }
.model-pick { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.model-link {
  color: var(--muted);
  font-size: 13px;
  padding: .25rem .6rem;
  border-radius: calc(var(--radius) - 2px);
  white-space: nowrap;
}
.model-link:hover { color: var(--fg); text-decoration: none; background: var(--line-hover); }
.model-link.active { color: var(--fg); font-weight: 600; background: var(--accent-soft); }
.model-note { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-left: auto; display: flex; gap: .5rem; }
.tbtn {
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: .3rem .65rem;
  cursor: pointer;
  transition: color .1s, background-color .1s, border-color .1s;
}
.tbtn:hover { color: var(--fg); border-color: var(--border-strong); }
.theme-icon::before { content: "\263D"; }               /* moon */
:root[data-theme="light"] .theme-icon::before { content: "\2600"; } /* sun */

/* ---------- top panel: description | diagram ---------- */
#top-panel {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  max-height: 34vh;
  min-height: 180px;
}
#diagram-panel {
  flex: 1;
  min-width: 0;
  padding: .25rem .75rem;
  overflow-x: auto;
}
#diagram-panel.hidden { display: none; }
#top-panel:has(#diagram-panel.hidden) #desc-panel { flex: 1; border-right: none; }
#diagram { display: block; width: 100%; max-width: 1180px; margin: 0 auto; height: auto; max-height: 34vh; min-width: 760px; }
#diagram text {
  fill: var(--fg);
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  text-anchor: middle;
}
#diagram .dsub { fill: var(--muted); font-size: 11px; }
#diagram .dhint { fill: var(--faint); font-size: 11.5px; text-anchor: start; font-family: "Geist Mono", monospace; }
.dinput rect {
  fill: transparent;
  stroke: var(--diag-line);
  stroke-dasharray: 3 3;
  stroke-width: 1.2;
}
.dinput text { fill: var(--muted); }
.dnode { cursor: pointer; }
.dnode rect {
  fill: var(--bg);
  stroke: var(--mc, var(--border-strong));
  stroke-width: 1.5;
  transition: fill .12s;
}
.dnode:hover rect { fill: var(--accent-soft); }
.dnode.active rect { fill: var(--accent-soft); stroke-width: 2.5; }
.dedges .dloop { stroke-dasharray: 5 4; }
.dedges .ddotted { stroke-dasharray: 2 3; }

/* ---------- workbench ---------- */
#workbench {
  flex: 1;
  min-height: 0;
  display: flex;
}

#module-list {
  flex: none;
  width: 212px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: .5rem .4rem;
}
.mod-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.8px;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: .38rem .5rem;
  cursor: pointer;
  transition: background-color .1s, color .1s;
}
.mod-item:hover { background: var(--line-hover); color: var(--fg); }
.mod-item.active { background: var(--accent-soft); color: var(--fg); font-weight: 500; }
.mod-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mc);
}
.mod-item .pyonly { margin-left: auto; font-size: 10px; color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3em; }

#panes {
  flex: 1;
  min-width: 0;
  display: flex;
}
.pane {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }
.pane-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 38px;
  padding: 0 .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  overflow-x: auto;
  scrollbar-width: none;
}
.pane-head::-webkit-scrollbar { display: none; }
.pane-lang {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  padding: .15rem .5rem;
  border-radius: 5px;
  white-space: nowrap;
}
.lang-cpp { color: oklch(78% .12 264); background: oklch(64.6% .222 264.376 / .14); }
.lang-py  { color: oklch(78% .12 150); background: oklch(60% .15 150 / .14); }
:root[data-theme="light"] .lang-cpp { color: oklch(48% .19 264); }
:root[data-theme="light"] .lang-py  { color: oklch(45% .12 150); }
.tabs { display: flex; gap: .25rem; }
.tab {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: .2rem .5rem;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-color: var(--border-strong); background: var(--bg); }

.code-scroll {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: auto;
  background: var(--code-bg);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.2px;
  line-height: 1.6;
}
.file-view { display: none; padding: .4rem 0 40vh 0; min-width: fit-content; }
.file-view.active { display: block; }

.ln {
  display: flex;
  white-space: pre;
  border-left: 3px solid transparent;
  padding-right: 1.5rem;
}
.ln .gut {
  flex: none;
  width: 3.2em;
  padding-right: .9em;
  text-align: right;
  color: var(--gutter);
  user-select: none;
  font-size: 11px;
  line-height: inherit;
  padding-top: .12em;
}
.ln[data-mod] { border-left-color: color-mix(in oklch, var(--mc) 55%, transparent); cursor: pointer; }
.ln[data-mod]:hover { background: color-mix(in oklch, var(--mc) 10%, transparent); }
.ln.sel { background: color-mix(in oklch, var(--mc) 13%, transparent); border-left-color: var(--mc); }

.region-banner {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: .5rem 0 .15rem 0;
  padding: .18rem 1rem .18rem calc(3px + 3.2em);
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mc);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  left: 0;
}
.region-banner::before { content: "\25B8"; font-size: 10px; }
.region-banner .rb-label {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--faint);
}
.region-banner:hover { text-decoration: underline; }

/* ---------- description panel (left of diagram) ---------- */
#desc-panel {
  flex: 0 0 clamp(320px, 36%, 560px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-right: 1px solid var(--border);
  padding: .6rem .9rem .55rem .9rem;
}
.desc-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  overflow: hidden;
}
.desc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mc, var(--faint)); }
.desc-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desc-badge {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .05rem .35rem;
  white-space: nowrap;
}
.desc-badge:empty { display: none; }
.desc-jumps { flex: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.desc-jumps:empty { display: none; }
.jump-chip {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .4rem;
  cursor: pointer;
  white-space: nowrap;
}
.jump-chip:hover { color: var(--fg); border-color: var(--border-strong); }
.desc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-width: 70ch;
  line-height: 1.6;
  font-size: 13.5px;
  color: color-mix(in oklch, var(--fg) 88%, var(--muted));
}
.desc-body p { margin: .2rem 0 .6rem 0; }
.desc-body strong { color: var(--fg); }

/* ---------- syntax highlighting ---------- */
.token.comment, .token.prolog, .token.cdata { color: var(--tok-comment); font-style: italic; }
.token.keyword, .token.boolean { color: var(--tok-keyword); }
.token.string, .token.char, .token.triple-quoted-string { color: var(--tok-string); }
.token.number { color: var(--tok-number); }
.token.function { color: var(--tok-function); }
.token.class-name, .token.namespace { color: var(--tok-class); }
.token.macro, .token.directive, .token.directive-hash { color: var(--tok-macro); }
.token.operator, .token.punctuation { color: var(--tok-punct); }
.token.builtin { color: var(--tok-class); }
.token.decorator, .token.annotation { color: var(--tok-macro); }

/* ---------- narrow screens ---------- */
@media (max-width: 1000px) {
  #module-list { display: none; }
}
@media (max-width: 820px) {
  #panes { flex-direction: column; }
  .pane { border-right: none; border-bottom: 1px solid var(--border); }
  #diagram-panel { display: none; }
  #desc-panel { flex: 1; border-right: none; }
  body { overflow: auto; }
}