/* Dracula palette: https://draculatheme.com/contribute */
:root {
  color-scheme: dark;
  --bg: #282a36;
  --text: #f8f8f2;
  --muted: #6272a4;
  --border: #44475a;
  --accent: #50fa7b;
  --correct: #50fa7b;
  --partial: #f1fa8c;
  --incorrect: #ff5555;
  --code-bg: #21222c;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  padding-block: 40px;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 20px;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
header h1 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  color: var(--accent);
}
header h1::before {
  content: "~/";
  color: var(--muted);
}

button {
  font: inherit;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px 4px;
  cursor: pointer;
  min-height: 36px;
}
button.primary {
  color: var(--accent);
}
button.primary::before {
  content: "[ ";
  color: var(--muted);
}
button.primary::after {
  content: " ]";
  color: var(--muted);
}
button.ghost, a.ghost {
  color: var(--muted);
  text-decoration: none;
}
button:hover {
  color: var(--accent);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input[type="text"] {
  font: inherit;
  width: 100%;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
input[type="text"]::placeholder {
  color: var(--muted);
}

.prompt-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prompt-marker {
  color: var(--accent);
}

.panel {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
}

.row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.result-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 2px;
  color: var(--text);
}
.result-btn:hover { color: var(--accent); }
.result-btn .cat {
  color: var(--muted);
  font-size: 0.85em;
}

.muted { color: var(--muted); }
.dim { color: var(--muted); font-size: 0.9em; }

.block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.block:last-child { border-bottom: none; }

.label {
  font-size: 0.78em;
  color: var(--muted);
  margin-bottom: 8px;
}
.label::before { content: "# "; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 0.9em;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
  border: 1px solid currentColor;
}
.tag.correct { color: var(--correct); }
.tag.partial { color: var(--partial); }
.tag.incorrect { color: var(--incorrect); }

canvas.pad {
  width: 100%;
  height: 260px;
  display: block;
  touch-action: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #f5f4ef;
}

.qa {
  border-left: 2px solid var(--border);
  padding-left: 10px;
  margin: 10px 0;
}

.transcription {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-style: italic;
  white-space: pre-wrap;
}

.bar-row { margin-bottom: 10px; cursor: pointer; }
.bar-row .bar-label { display: flex; justify-content: space-between; font-size: 0.9em; margin-bottom: 4px; }
.bar-track { height: 8px; background: var(--code-bg); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; }
.bar-fill.novice { background: var(--incorrect); }
.bar-fill.intermediate { background: var(--partial); }
.bar-fill.advanced { background: #8be9fd; }
.bar-fill.expert { background: var(--correct); }
.bar-fill.empty { background: transparent; }

#chart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 10;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#chart-modal .panel { width: 100%; max-width: 560px; background: var(--bg); }

[hidden] { display: none !important; }

.spinner-text { color: var(--muted); font-style: italic; }

.katex { font-size: 1.02em; }

/* Full-screen fake terminal (/) — no header, no cards, just a black
   screen of text with an inline prompt, as close to a real terminal as
   a text input can get. */
body.terminal-page {
  padding: 0;
}
.term-screen {
  height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.term-output {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: inherit;
}
.term-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.term-input-row .prompt-marker {
  color: var(--accent);
}
.term-input-row input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: inherit;
  padding: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: var(--accent);
}
.term-input-row input:focus,
.term-input-row input:focus-visible,
.term-input-row input:active {
  border: none;
  outline: none;
  box-shadow: none;
}