/* ============================================================
   TERMINAL.CSS  –  Rustless
   Dark terminal aesthetic: phosphor-green on near-black.
   Accessible: contrast ratios WCAG AA+, readable in daylight.
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
/* Dark = classic Monokai (Sublime default). Light = crafted counterpart,
   same accent hues re-tuned for contrast on a light background. */
:root {
  --bg:          #272822;
  --bg-alt:      #2d2e27;
  --bg-panel:    #1e1f1c;
  --border:      #3e3d32;
  --green:       #a6e22e;
  --green-dim:   #7a9e2e;
  --green-pale:  #4d6320;
  --amber:       #fd971f;
  --amber-dim:   #c97814;
  --red:         #f92672;
  --red-dim:     #c21f5c;
  --blue:        #66d9ef;
  --text:        #f8f8f2;
  --text-dim:    #a0a08c;
  --text-muted:  #75715e;
  --cursor:      #a6e22e;
  --scanline:    repeating-linear-gradient(
                   0deg, transparent, transparent 2px,
                   rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 4px
                 );
  --radius:      2px;
  --font-mono:   "Fira Code", "Cascadia Code", "JetBrains Mono",
                 "Menlo", "Consolas", monospace;
  --font-sans:   var(--font-mono);   /* site is pure mono */
  --col-width:   72ch;
  --sidebar-w:   260px;
}

:root[data-theme="light"] {
  --bg:          #fafaf8;
  --bg-alt:      #f0f0ec;
  --bg-panel:    #e8e8e2;
  --border:      #d8d8d0;
  --green:       #7ba82c;
  --green-dim:   #5c8020;
  --green-pale:  #cfe8a8;
  --amber:       #c97814;
  --amber-dim:   #a35f0f;
  --red:         #d01860;
  --red-dim:     #a3134c;
  --blue:        #2e9cb5;
  --text:        #272822;
  --text-dim:    #5a5a4e;
  --text-muted:  #8a8a78;
  --cursor:      #5c8020;
  --scanline:    none;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  scroll-behavior: smooth;
  /* subtle scanline overlay, dark theme only */
  background-image: var(--scanline);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Selection ───────────────────────────────────────────────── */
::selection { background: var(--green); color: var(--bg); }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 2px; }

/* ── Typography ──────────────────────────────────────────────── */
h1 { color: var(--green);  font-size: 1.5rem;  margin-bottom: .6em; }
h2 { color: var(--amber);  font-size: 1.25rem; margin: 1.8em 0 .5em; }
h3 { color: var(--green);  font-size: 1.05rem; margin: 1.4em 0 .4em; }
h4 { color: var(--text-dim); font-size: .95rem; margin: 1.2em 0 .3em; }
h5,h6 { color: var(--text-dim); font-size: .9rem; margin: 1em 0 .3em; }

p { margin-bottom: .9em; max-width: var(--col-width); }

a { color: var(--green); text-decoration: underline dotted; }
a:hover { color: var(--amber); text-decoration: underline; }

strong { color: var(--amber); font-weight: 600; }
em { color: var(--text-dim); font-style: normal; }
code { color: var(--green); background: var(--bg-panel);
       padding: .1em .35em; border-radius: var(--radius);
       font-size: .93em; }

blockquote {
  border-left: 3px solid var(--green-dim);
  margin: 1em 0; padding: .5em 1em;
  background: var(--bg-panel);
  color: var(--text-dim);
}

hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

ul, ol { margin-left: 1.4em; margin-bottom: .9em; }
li { margin-bottom: .25em; }
li > code { font-size: .92em; }

table {
  border-collapse: collapse; width: 100%; margin-bottom: 1.2em;
  font-size: .9em; overflow-x: auto; display: block;
}
th { background: var(--bg-panel); color: var(--amber);
     padding: .4em .8em; border: 1px solid var(--border); text-align: left; }
td { padding: .35em .8em; border: 1px solid var(--border); }
tr:nth-child(even) td { background: var(--bg-alt); }

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1.2rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.topbar-logo {
  color: var(--green); font-size: 1.1rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.topbar-logo span { color: var(--amber); }
.topbar-prompt {
  color: var(--text-muted); font-size: .85rem; flex: 1;
  display: none;
}
@media(min-width:600px) { .topbar-prompt { display: block; } }

.topbar-link {
  color: var(--text-dim); font-size: .82rem; text-decoration: none;
  border: 1px solid var(--border); padding: .2rem .6rem; border-radius: var(--radius);
  white-space: nowrap;
}
.topbar-link:hover { color: var(--green); border-color: var(--green-dim); }

/* blinking cursor after prompt */
.topbar-prompt::after {
  content: "█";
  color: var(--cursor);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Layout ──────────────────────────────────────────────────── */
.layout {
  display: flex; flex: 1;
}
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 1rem .75rem;
  overflow-y: auto;
  position: sticky;
  top: 40px;  /* height of topbar */
  height: calc(100vh - 40px);
  display: none;
}
@media(min-width:900px) { .sidebar { display: block; } }

.sidebar-title {
  color: var(--text-muted); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .6rem;
}
.sidebar nav a {
  display: block; color: var(--text-dim); font-size: .82rem;
  text-decoration: none; padding: .22rem .4rem;
  border-radius: var(--radius);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar nav a:hover { background: var(--bg-alt); color: var(--green); }
.sidebar nav a.active { color: var(--amber); background: var(--bg-alt); }
.sidebar nav .ch-num {
  color: var(--text-muted); display: inline-block;
  width: 2.4ch; flex-shrink: 0;
}

.main-content {
  flex: 1; padding: 2rem 2.5rem; overflow-x: hidden; min-width: 0;
}
@media(max-width:600px) { .main-content { padding: 1.2rem 1rem; } }

/* ── Terminal window chrome ──────────────────────────────────── */
.terminal-window {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
.terminal-titlebar {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red   { background: #ff5f56; }
.dot-amber { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.terminal-title { color: var(--text-muted); font-size: .78rem; margin-left: .4rem; }
.terminal-body { padding: 1rem 1.2rem; }

/* ── Code blocks ─────────────────────────────────────────────── */
pre {
  background: #0c1a0c !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
  margin-bottom: 0;  /* runner wrapper handles spacing */
}
pre code { background: none !important; padding: 0; }

/* ── Code runner wrapper ─────────────────────────────────────── */
.code-runner-wrapper {
  margin-bottom: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.code-runner-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .3rem .8rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.code-runner-wrapper pre {
  border: none; border-radius: 0; margin: 0;
}
.code-lang-label {
  color: var(--text-muted); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.run-btn {
  background: transparent;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: .2rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.run-btn:hover:not(:disabled) {
  background: var(--green); color: var(--bg);
}
.run-btn:disabled {
  opacity: .5; cursor: wait;
}

.code-runner-actions {
  display: flex; align-items: center; gap: .6rem;
}
.reset-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  cursor: pointer;
}
.reset-btn:hover { color: var(--text-dim); }

/* ── Editable code (contenteditable on the highlighted <code>, editable
   by default — keeps Shiki's syntax colors, unlike swapping to a plain
   <textarea>) ────────────────────────────────────────────────────── */
pre code[contenteditable="true"] {
  display: block;
  outline: none;
  cursor: text;
}
pre code[contenteditable="true"]:focus {
  background: var(--bg-panel) !important;
}

/* ── Code output panel ───────────────────────────────────────── */
.code-output {
  padding: .75rem 1.2rem;
  font-size: .87rem;
  white-space: pre-wrap;
  border-top: 1px solid var(--border);
  background: #060e06;
  min-height: 2.5rem;
  color: var(--text);
  transition: max-height .2s ease;
}
.code-output.hidden { display: none; }
.code-output.success { color: var(--green); }
.code-output.error   { color: var(--red); }
.code-output.loading { color: var(--text-dim); }

/* Test result rows */
.test-pass { color: var(--green); }
.test-fail { color: var(--red); }
.test-summary { color: var(--amber); font-weight: 600; margin-top: .4em; }

/* ── Index page ──────────────────────────────────────────────── */
.index-header {
  margin-bottom: 2.5rem;
}
.index-header h1 { font-size: 2rem; }
.index-header .subtitle { color: var(--text-dim); margin-top: .4rem; }
.index-header .prompt-line {
  color: var(--green-dim); margin-top: 1.2rem; font-size: .9rem;
}

.chapter-list {
  list-style: none; margin: 0; padding: 0;
}
.chapter-list li {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  align-items: baseline;
}
.chapter-list li:hover { background: var(--bg-panel); }
.chapter-list .ch-idx { color: var(--text-muted); font-size: .8rem; }
.chapter-list a {
  color: var(--text); text-decoration: none;
}
.chapter-list a:hover { color: var(--green); }
.chapter-list .ch-badge {
  font-size: .72rem; color: var(--text-muted);
}

/* ── Chapter page ────────────────────────────────────────────── */
.chapter-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.chapter-header .ch-number {
  color: var(--text-muted); font-size: .8rem; margin-bottom: .3rem;
}
.chapter-header h1 { font-size: 1.7rem; }
.chapter-nav {
  display: flex; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
}
.chapter-nav a { color: var(--green-dim); text-decoration: none; }
.chapter-nav a:hover { color: var(--green); }
.chapter-nav .next { margin-left: auto; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-dim    { color: var(--text-dim); }
.text-muted  { color: var(--text-muted); }
.text-amber  { color: var(--amber); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.mb-0 { margin-bottom: 0; }

/* ── Mobile sidebar toggle ───────────────────────────────────── */
.sidebar-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font-mono); font-size: .8rem;
  padding: .25rem .6rem; border-radius: var(--radius); cursor: pointer;
}
.sidebar-toggle:hover { color: var(--green); border-color: var(--green-dim); }
@media(min-width:900px) { .sidebar-toggle { display: none; } }

/* ── Theme toggle ────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font-mono); font-size: .8rem;
  padding: .25rem .6rem; border-radius: var(--radius); cursor: pointer;
}
.theme-toggle:hover { color: var(--green); border-color: var(--green-dim); }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: .8rem 1.5rem;
  font-size: .75rem; color: var(--text-muted);
  display: flex; justify-content: space-between;
}

/* ── Pyodide / TS loading indicator ─────────────────────────── */
#runtime-status {
  position: fixed; bottom: 1rem; right: 1rem;
  background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .75rem;
  padding: .35rem .8rem; border-radius: var(--radius);
  display: none;
  z-index: 200;
}
#runtime-status.visible { display: block; }

/* ── Mermaid diagrams ────────────────────────────────────────── */
.mermaid-diagram {
  margin-bottom: 1.4rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow-x: auto;
  text-align: center;
}
.mermaid-diagram svg { max-width: 100%; height: auto; }

/* ── Flashcards page ─────────────────────────────────────────── */
.fc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 1.5rem 0;
}
.fc-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.fc-tag {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-mono); font-size: .78rem; padding: .25rem .6rem;
  border-radius: var(--radius); cursor: pointer;
}
.fc-tag:hover { border-color: var(--green-dim); color: var(--green); }
.fc-tag.active { background: var(--green); color: var(--bg); border-color: var(--green); }

.fc-shuffle {
  background: transparent; border: 1px solid var(--amber-dim); color: var(--amber);
  font-family: var(--font-mono); font-size: .8rem; padding: .3rem .8rem;
  border-radius: var(--radius); cursor: pointer;
}
.fc-shuffle:hover { background: var(--amber); color: var(--bg); }

.fc-study { max-width: 60ch; }
.fc-progress { color: var(--text-muted); font-size: .8rem; margin-bottom: .5rem; }
.fc-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 1.5rem; min-height: 8rem;
}
.fc-question { font-size: 1.05rem; color: var(--text); margin-bottom: 1rem; }
.fc-reveal {
  background: transparent; border: 1px solid var(--green-dim); color: var(--green);
  font-family: var(--font-mono); font-size: .82rem; padding: .3rem .8rem;
  border-radius: var(--radius); cursor: pointer;
}
.fc-reveal:hover { background: var(--green); color: var(--bg); }
.fc-answer {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
  color: var(--text-dim); line-height: 1.6;
}
.fc-answer.hidden { display: none; }

.fc-nav { display: flex; justify-content: space-between; margin-top: 1rem; }
.fc-nav button {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-mono); font-size: .82rem; padding: .3rem .8rem;
  border-radius: var(--radius); cursor: pointer;
}
.fc-nav button:hover { border-color: var(--green-dim); color: var(--green); }
.fc-hint { font-size: .78rem; margin-top: .6rem; }
.fc-source { margin-top: 2rem; font-size: .82rem; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .code-runner-toolbar, .run-btn, .theme-toggle { display: none; }
  pre { border: 1px solid #ccc; }
}