@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Base theme tokens. To create a new theme, override these variables in a body.theme-name block. */
:root {
  --page-bg: #000000;
  --fallback-bg: #000000;
  --text: #d4d4d4;
  --paragraph: #d4d4d4;
  --muted: #858585;
  --strong: #e8e8e8;
  --heading: #f2f2f2;
  --heading-2: #e6e6e6;
  --heading-3: #dcdcdc;
  --heading-4: #c9c9c9;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.085);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.1);
  --sub-divider: rgba(255, 255, 255, 0.06);
  --question-bg: rgba(255, 255, 255, 0.025);
  --option-bg: rgba(255, 255, 255, 0.02);
  --option-hover: rgba(255, 255, 255, 0.055);
  --selected-bg: rgba(255, 255, 255, 0.07);
  --answer-bg: rgba(255, 255, 255, 0.02);
  --answer-placeholder: #858585;
  --answer-text: #c7c7c7;
  --explanation: #9a9a9a;
  --code-inline-bg: rgba(255, 255, 255, 0.08);
  --code-inline-text: #d4d4d4;
  --code-block-bg: rgba(255, 255, 255, 0.025);
  --math-bg: rgba(255, 255, 255, 0.025);
  --math-text: #dedede;
  --success: #89d185;
  --danger: #f48771;
}

/* Theme variants. Keep class names aligned with data-theme buttons and script.js themeClasses. */
body.theme-dark-plus {
  --page-bg: #000000;
  --fallback-bg: #000000;
  --code-block-bg: rgba(255, 255, 255, 0.025);
}

body.theme-monokai {
  --page-bg: #272822;
  --fallback-bg: #272822;
  --text: #f8f8f2;
  --paragraph: #f0f0e6;
  --muted: #a59f85;
  --strong: #fff;
  --heading: #f8f8f2;
  --heading-2: #ececdc;
  --heading-3: #dedecb;
  --heading-4: #cfcfb8;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.1);
  --surface-hover: rgba(255, 255, 255, 0.14);
  --code-block-bg: rgba(255, 255, 255, 0.03);
  --math-text: #f2f2e8;
}

body.theme-dracula {
  --page-bg: #282a36;
  --fallback-bg: #282a36;
  --text: #f8f8f2;
  --paragraph: #eeeeea;
  --muted: #a7a7b4;
  --strong: #fff;
  --heading: #f8f8f2;
  --heading-2: #eeeeea;
  --heading-3: #dedee6;
  --heading-4: #c8c8d1;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --surface-hover: rgba(255, 255, 255, 0.13);
  --code-block-bg: rgba(255, 255, 255, 0.03);
  --math-text: #f0f0ec;
}

body.theme-github-light,
body.theme-solarized-light {
  --text: #24292f;
  --paragraph: #24292f;
  --muted: #57606a;
  --strong: #0f1419;
  --heading: #111827;
  --heading-2: #1f2937;
  --heading-3: #374151;
  --heading-4: #4b5563;
  --surface: rgba(0, 0, 0, 0.045);
  --surface-strong: rgba(0, 0, 0, 0.075);
  --surface-hover: rgba(0, 0, 0, 0.1);
  --divider: rgba(0, 0, 0, 0.1);
  --sub-divider: rgba(0, 0, 0, 0.06);
  --question-bg: rgba(0, 0, 0, 0.02);
  --option-bg: rgba(0, 0, 0, 0.018);
  --option-hover: rgba(0, 0, 0, 0.045);
  --selected-bg: rgba(0, 0, 0, 0.055);
  --answer-bg: rgba(0, 0, 0, 0.018);
  --answer-placeholder: #6e7781;
  --answer-text: #3b424b;
  --explanation: #68717c;
  --code-inline-bg: rgba(0, 0, 0, 0.065);
  --code-inline-text: #24292f;
  --code-block-bg: rgba(0, 0, 0, 0.025);
  --math-bg: rgba(0, 0, 0, 0.025);
  --math-text: #24292f;
}

body.theme-github-light {
  --page-bg: #ffffff;
  --fallback-bg: #ffffff;
}

body.theme-solarized-light {
  --page-bg: #fdf6e3;
  --fallback-bg: #fdf6e3;
  --text: #586e75;
  --paragraph: #586e75;
  --strong: #073642;
  --heading: #073642;
  --heading-2: #174652;
  --heading-3: #345d66;
  --heading-4: #586e75;
  --code-inline-text: #073642;
  --math-text: #073642;
}

body.theme-owl {
  --page-bg: #011627;
  --fallback-bg: #011627;
  --text: #d6deeb;
  --paragraph: #d6deeb;
  --muted: #637777;
  --strong: #ffffff;
  --heading: #ffffff;
  --heading-2: #dce8f7;
  --heading-3: #c7d4e3;
  --heading-4: #9fb2c6;
  --surface: rgba(214, 222, 235, 0.055);
  --surface-strong: rgba(214, 222, 235, 0.09);
  --surface-hover: rgba(214, 222, 235, 0.13);
  --divider: rgba(214, 222, 235, 0.11);
  --sub-divider: rgba(214, 222, 235, 0.065);
  --question-bg: rgba(214, 222, 235, 0.025);
  --option-bg: rgba(214, 222, 235, 0.02);
  --option-hover: rgba(214, 222, 235, 0.055);
  --selected-bg: rgba(214, 222, 235, 0.07);
  --answer-bg: rgba(214, 222, 235, 0.02);
  --answer-placeholder: #637777;
  --answer-text: #c9d7e6;
  --explanation: #8798a8;
  --code-inline-bg: rgba(214, 222, 235, 0.075);
  --code-inline-text: #d6deeb;
  --code-block-bg: rgba(214, 222, 235, 0.025);
  --math-bg: rgba(214, 222, 235, 0.025);
  --math-text: #d6deeb;
}

body.theme-solarized-dark {
  --page-bg: #002b36;
  --fallback-bg: #002b36;
  --text: #93a1a1;
  --paragraph: #93a1a1;
  --muted: #657b83;
  --strong: #eee8d5;
  --heading: #eee8d5;
  --heading-2: #d8d1bd;
  --heading-3: #c2bba8;
  --heading-4: #b0aa99;
  --surface: rgba(238, 232, 213, 0.055);
  --surface-strong: rgba(238, 232, 213, 0.085);
  --surface-hover: rgba(238, 232, 213, 0.12);
  --divider: rgba(238, 232, 213, 0.1);
  --sub-divider: rgba(238, 232, 213, 0.06);
  --question-bg: rgba(238, 232, 213, 0.025);
  --option-bg: rgba(238, 232, 213, 0.02);
  --option-hover: rgba(238, 232, 213, 0.055);
  --selected-bg: rgba(238, 232, 213, 0.07);
  --answer-bg: rgba(238, 232, 213, 0.02);
  --answer-text: #aebdba;
  --code-inline-bg: rgba(238, 232, 213, 0.08);
  --code-inline-text: #eee8d5;
  --code-block-bg: rgba(238, 232, 213, 0.025);
  --math-bg: rgba(238, 232, 213, 0.025);
  --math-text: #eee8d5;
}

body.theme-gradient-night {
  --page-bg:
    radial-gradient(circle at 18% 0%, rgba(80, 86, 102, 0.28), transparent 34rem),
    linear-gradient(140deg, #111111 0%, #202124 48%, #0f1115 100%);
  --fallback-bg: #111111;
}

body.theme-gradient-terminal {
  --page-bg:
    radial-gradient(circle at 20% 15%, rgba(70, 110, 82, 0.22), transparent 32rem),
    radial-gradient(circle at 84% 10%, rgba(140, 120, 64, 0.16), transparent 28rem),
    linear-gradient(145deg, #10130f 0%, #1c2018 50%, #11140f 100%);
  --fallback-bg: #10130f;
}

/* Global reset and page frame. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background: var(--fallback-bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

.notebook {
  min-height: 100vh;
  background: var(--page-bg);
  line-height: 1.9;
  overflow-x: clip;
  padding: 2.5rem 1.25rem 8rem;
}

.notebook-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .notebook {
    padding: 4rem 2rem 9rem;
  }

  .notebook-container {
    padding: 0 3rem;
  }
}

@media (min-width: 1024px) {
  .notebook-container {
    max-width: 1200px;
    padding: 0 5rem;
  }
}

@media (min-width: 1440px) {
  .notebook-container {
    max-width: 1400px;
    padding: 0 6rem;
  }
}

/* Top controls. */
.theme-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

.theme-btn {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  color: var(--paragraph);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.theme-btn:hover {
  background: var(--surface-hover);
}

.theme-btn.active {
  background: var(--surface-strong);
  color: var(--heading);
}

/* Typography and reusable study content elements. */
.notebook h1 {
  color: var(--heading);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(3.5rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.notebook h2 {
  color: var(--heading-2);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2.4rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.notebook h3 {
  color: var(--heading-3);
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.notebook h4 {
  color: var(--heading-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.subtitle {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 5rem;
}

/* Table of contents. Links point to section ids in index.html. */
.toc {
  background: transparent;
  border-radius: 0;
  display: block;
  margin-bottom: 4rem;
  padding: 0;
}

.toc-label {
  display: block;
  color: var(--muted);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.toc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.toc-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  color: var(--paragraph);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.toc-card:hover {
  background: var(--surface-hover);
  border-color: var(--divider);
  transform: translateY(-1px);
}

.toc-num {
  flex-shrink: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--heading-3);
  line-height: 1;
  min-width: 2.4rem;
}

.toc-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--heading-2);
  line-height: 1.35;
}

.toc-card:hover .toc-num {
  color: var(--heading);
}

.notebook p {
  color: var(--paragraph);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  margin-bottom: 2rem;
  max-width: 75ch;
}

.notebook strong {
  color: var(--strong);
  font-weight: 700;
}

.section {
  padding-top: 0;
}

/* Separators are the only hard lines in the design. */
.divider {
  height: 6px;
  background: var(--divider);
  border-radius: 999px;
  margin: 5.5rem 0;
}

.sub-divider {
  height: 3px;
  background: var(--sub-divider);
  border-radius: 999px;
  margin: 4rem 0;
}

/* Lists use generated markers so marker color follows the active theme. */
.notebook ul,
.notebook ol {
  margin-bottom: 2rem;
  padding-left: 0;
}

.notebook ul {
  list-style: none;
}

.notebook ul li,
.notebook ol li {
  color: var(--paragraph);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  margin-bottom: 1rem;
  position: relative;
}

.notebook ul li {
  padding-left: 1.6rem;
}

.notebook ul li::before {
  content: "\2022";
  color: var(--muted);
  font-size: 1.2rem;
  left: 0;
  line-height: 1.9;
  position: absolute;
}

.notebook ul li ul {
  margin-bottom: 0;
  margin-top: 0.75rem;
}

.notebook ul li ul li {
  color: var(--answer-text);
  font-size: 0.98rem;
}

.notebook ul li ul li::before {
  content: "\25E6";
  color: var(--muted);
}

.notebook ol {
  counter-reset: ol-counter;
  list-style: none;
}

.notebook ol li {
  counter-increment: ol-counter;
  padding-left: 2.4rem;
}

.notebook ol li::before {
  content: counter(ol-counter) ".";
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  left: 0;
  line-height: 1.9;
  min-width: 1.8rem;
  position: absolute;
}

/* Code examples. Add syntax spans in HTML only when useful; plain <pre> text still works. */
.notebook code {
  background: var(--code-inline-bg);
  border-radius: 4px;
  color: var(--code-inline-text);
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
}

.code-block {
  background: var(--code-block-bg);
  border-radius: 8px;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  padding: 1.5rem;
}

.code-block pre {
  color: #d4d4d4;
  margin: 0;
}

.code-block .keyword {
  color: #c586c0;
}

.code-block .type {
  color: #4ec9b0;
}

.code-block .string {
  color: #ce9178;
}

.code-block .number {
  color: #b5cea8;
}

.code-block .comment {
  color: #6a9955;
  font-style: italic;
}

.code-block .function {
  color: #dcdcaa;
}

/* MathJax content. Use \( ... \) in HTML and wrap standalone equations in .math-block. */
.math-block {
  background: var(--math-bg);
  border-radius: 8px;
  color: var(--math-text);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.15rem;
  margin: 2rem 0 2.5rem;
  overflow-x: auto;
  padding: 1.5rem 2rem;
  text-align: center;
}

.math-inline {
  color: var(--math-text);
  font-family: "Times New Roman", Georgia, serif;
  padding: 0 0.15em;
}

/* Question blocks support MCQ groups and open-ended text areas. */
.questions-section {
  margin-top: 0;
}

.questions-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.question-block {
  background: var(--question-bg);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 1.75rem 1.75rem 1.5rem;
}

@media (max-width: 480px) {
  .question-block {
    padding: 1.25rem 1.25rem 1.1rem;
  }
}

.question-header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}

.question-text {
  color: var(--heading-2);
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.65;
  min-width: 0;
  overflow-wrap: anywhere;
  width: 100%;
}

.question-text p {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 0.75rem 0 !important;
}

.question-text p:last-child { margin-bottom: 0 !important; }

.question-header .source-id {
  align-items: center;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--sub-divider);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 700;
  gap: 0.28rem;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0.32rem 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.question-header .source-prefix {
  flex: 0 0 auto;
}

.question-header .source-name {
  flex: 1 1 auto;
  font-style: normal;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MCQ states are applied by script.js after the learner clicks an option. */
.mcq-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.mcq-option {
  align-items: flex-start;
  background: var(--option-bg);
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  text-align: left;
  transition: background-color 0.2s;
  width: 100%;
}

.mcq-option:hover {
  background: var(--option-hover);
}

.mcq-option.selected {
  background: var(--selected-bg);
}

.mcq-option.correct {
  background: color-mix(in srgb, var(--success) 16%, transparent);
}

.mcq-option.incorrect {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}

.option-letter {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 1.1rem;
  padding-top: 0.05rem;
}

.mcq-option span:last-child {
  color: var(--answer-text);
  font-size: 0.98rem;
}

/* Open-ended answer fields. Tab inserts spaces through script.js. */
.answer-space {
  background: var(--answer-bg);
  border: 0;
  border-radius: 8px;
  color: var(--paragraph);
  display: block;
  font-family: inherit;
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 1.1rem;
  min-height: 120px;
  outline: none;
  padding: 1.1rem 1.35rem;
  resize: vertical;
  width: 100%;
}

.answer-space::placeholder {
  color: var(--answer-placeholder);
}

.answer-space:focus {
  background: var(--surface-strong);
}

.answer-reveal {
  margin-top: 0.6rem;
}

.answer-reveal summary {
  align-items: center;
  color: var(--paragraph);
  cursor: pointer;
  display: flex;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 0.5rem;
  letter-spacing: 0.01em;
  list-style: none;
  padding: 0.4rem 0;
  user-select: none;
  width: fit-content;
}

.answer-reveal summary::-webkit-details-marker {
  display: none;
}

.answer-reveal summary::before {
  content: "\25B6";
  color: var(--muted);
  display: inline-block;
  font-size: 0.55rem;
  opacity: 0.85;
  transition: transform 0.2s;
}

.answer-reveal[open] summary::before {
  transform: rotate(90deg);
}

.answer-content {
  border-top: 1px solid var(--sub-divider);
  color: var(--answer-text);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-top: 0.85rem;
  max-height: min(70vh, 42rem);
  overflow: auto;
  padding: 1.25rem 0 0.3rem;
}

.answer-content p {
  color: var(--answer-text);
  font-size: 0.98rem;
  margin-bottom: 0.85rem;
  max-width: 75ch;
  overflow-wrap: anywhere;
}

.answer-content ul,
.answer-content ol {
  margin-bottom: 1rem;
  max-width: 75ch;
}

.question-text pre[class*="language-"],
.answer-content pre[class*="language-"] {
  max-width: 100%;
  margin: 0.85rem 0 1.25rem !important;
}

.answer-content .correct {
  color: var(--success);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.answer-content .explanation {
  color: var(--explanation);
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

::selection {
  background: var(--surface-hover);
}

/* ---- IT232 study-guide additions ---- */

.study-notes {
  background: var(--surface);
  border: none;
  border-radius: 8px;
  padding: 1.75rem 2rem;
  margin: 3.5rem 0;
  max-width: none;
}

.study-notes>strong:first-child {
  display: block;
  color: var(--heading-3);
  margin-bottom: 1.5rem;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.01em;
}

.study-notes p {
  color: var(--paragraph);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  margin: 0 0 1.5rem 0;
  max-width: 75ch;
}

.study-notes ul,
.study-notes ol {
  margin: 0 0 1.5rem 0;
  padding-left: 0;
  max-width: 75ch;
}

.study-notes ul {
  list-style: none;
}

.study-notes ul li,
.study-notes ol li {
  color: var(--paragraph);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  margin-bottom: 0.85rem;
  position: relative;
}

.study-notes ul li {
  padding-left: 1.6rem;
}

.study-notes ul li::before {
  content: "\2022";
  color: var(--muted);
  font-size: 1.2rem;
  left: 0;
  line-height: 1.9;
  position: absolute;
}

.study-notes p:last-child,
.study-notes ul:last-child,
.study-notes ol:last-child {
  margin-bottom: 0;
}

.practice-heading {
  margin-top: 0;
  margin-bottom: 1.75rem;
  color: var(--heading-3);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  letter-spacing: 0.01em;
}

.section-eyebrow {
  display: block;
  margin: 0 0 0.6rem 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.questions-section {
  margin: 4rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--sub-divider);
}


/* Generous breathing room for body prose pulled from markdown.
   The template targets .notebook p / ul / ol; reinforce inside guide sections. */
.module-section p,
.study-notes p,
.answer-content p {
  line-height: 1.8;
}

.module-section p,
.module-section ul,
.module-section ol,
.module-section table {
  max-width: 100%;
  margin-bottom: 2.25rem;
}

/* When a paragraph introduces a list/code block, keep them visually attached. */
.module-section p:has(+ ul),
.module-section p:has(+ ol),
.module-section p:has(+ pre),
.module-section p:has(+ table),
.study-notes p:has(+ ul),
.study-notes p:has(+ ol),
.answer-content p:has(+ ul),
.answer-content p:has(+ ol),
.answer-content p:has(+ pre) {
  margin-bottom: 0.5rem;
}

.module-section ul + ul,
.module-section ol + ol,
.module-section ul + ol,
.module-section ol + ul {
  margin-top: -1rem;
}

/* Code blocks need extra room above and below — they break the prose flow. */
.module-section pre,
.module-section pre[class*="language-"],
.module-section .code-block {
  max-width: 100%;
  margin-top: 2.5rem !important;
  margin-bottom: 4rem !important;
}

/* Anything immediately after a code block needs more separation. */
.module-section pre + p,
.module-section pre + ul,
.module-section pre + ol,
.module-section pre + h2,
.module-section pre + h3,
.module-section pre + h4,
.module-section pre + .study-notes,
.module-section pre + table,
.module-section pre + pre {
  margin-top: 2.75rem;
}

/* Anything after a list also gets a touch more room. */
.module-section ul + p,
.module-section ol + p,
.module-section ul + pre,
.module-section ol + pre,
.module-section ul + .study-notes,
.module-section ol + .study-notes,
.module-section ul + table,
.module-section ol + table {
  margin-top: 2.5rem;
}

/* List item rhythm: more space between items, like the template. */
.module-section ul li,
.module-section ol li {
  margin-bottom: 0.9rem;
  line-height: 1.85;
}

.module-section ul li:last-child,
.module-section ol li:last-child {
  margin-bottom: 0;
}

.module-section h2 {
  margin-top: 5rem;
  margin-bottom: 1.5rem;
}

.module-section h2:first-of-type {
  margin-top: 2rem;
}

/* Tables need breathing room on both sides. */
.module-section table {
  margin-top: 2.25rem;
  margin-bottom: 2.5rem;
}

/* Study Notes detaches more clearly from preceding content. */
.study-notes {
  margin-top: 4rem !important;
}

.source-id {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.source-id code {
  background: transparent;
  color: var(--muted);
  padding: 0;
}

.module-section {
  padding-bottom: 0.75rem;
}

.module-section>.module-title {
  margin-top: 0;
}

.module-section,
.module-section > .module-title,
.notebook h2 {
  scroll-margin-top: 2rem;
}

h1.page-title {
  font-size: clamp(3rem, 4.5vw, 2.8rem);
  letter-spacing: -0.01em;
}

h1.module-title {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-family: "Lora", Georgia, serif;
  color: var(--heading);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding-top: 0;
  border-top: 0;
  letter-spacing: -0.01em;
}

.module-section>.module-title:first-child {
  margin-top: 0;
}

.code-block,
pre[class*="language-"] {
  contain: layout paint;
}

/* Prism overrides so highlighted code matches the template's code-block surface */
pre[class*="language-"] {
  background: var(--code-block-bg) !important;
  color: var(--text);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin: 0.85rem 0;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.65;
  overflow-x: auto;
}

code[class*="language-"] {
  background: transparent !important;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.question-text pre[class*="language-"],
.answer-content pre[class*="language-"],
.mcq-option pre[class*="language-"] {
  font-size: 0.9rem;
}

.question-text code:not([class*="language-"]),
.answer-content code:not([class*="language-"]),
.mcq-option code:not([class*="language-"]) {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Token color tuning: lean on theme tokens so code stays readable across themes */
.token.keyword,
.token.boolean,
.token.null,
.token.this,
.token.builtin {
  color: #569cd6;
}

.token.class-name,
.token.type {
  color: #4ec9b0;
}

.token.string,
.token.char {
  color: #ce9178;
}

.token.number {
  color: #b5cea8;
}

.token.comment {
  color: #6a9955;
  font-style: italic;
}

.token.function {
  color: #dcdcaa;
}

.token.operator,
.token.punctuation {
  color: var(--text);
}

body.theme-github-light .token.keyword,
body.theme-solarized-light .token.keyword {
  color: #af00db;
}

body.theme-github-light .token.string,
body.theme-solarized-light .token.string {
  color: #a31515;
}

body.theme-github-light .token.comment,
body.theme-solarized-light .token.comment {
  color: #008000;
}

body.theme-github-light .token.class-name,
body.theme-solarized-light .token.class-name {
  color: #267f99;
}

body.theme-github-light .token.number,
body.theme-solarized-light .token.number {
  color: #098658;
}

body.theme-github-light .token.function,
body.theme-solarized-light .token.function {
  color: #795e26;
}

/* Module index/summary: a small banner under the title */
.module-banner {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: -0.5rem;
}

/* Tables (markdown-rendered) */
.notebook table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}

.notebook th,
.notebook td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--divider);
  text-align: left;
}

.notebook thead {
  background: var(--surface);
}

.notebook th {
  color: var(--heading-3);
  font-family: "Lora", Georgia, serif;
}
/* ---- Content-aware polish: hierarchy + spacing fixes ---- */

.inline-heading {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  font-weight: 600;
  color: var(--heading-3);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  letter-spacing: 0.005em;
}

.inline-heading + p,
.inline-heading + ul,
.inline-heading + ol,
.inline-heading + pre,
.inline-heading + .code-block,
.inline-heading + table {
  margin-top: 0;
}

.code-caption {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2.5rem;
  margin-bottom: 0.6rem !important;
}

.code-caption + pre,
.code-caption + .code-block,
.code-caption + pre[class*="language-"] {
  margin-top: 0 !important;
}

.lead-in {
  margin-bottom: 0.5rem !important;
}

.lead-in + ul,
.lead-in + ol,
.lead-in + pre,
.lead-in + .code-block,
.lead-in + table {
  margin-top: 0 !important;
}

.hair-divider {
  height: 1px;
  background: var(--sub-divider);
  margin: 3rem 0 2rem 0;
  border: 0;
  opacity: 0.6;
}

/* Study Notes: each sentence is its own paragraph after the polish pass.
   Give them generous breathing room so they read as scannable points. */
.study-notes p {
  margin: 0 0 1.25rem 0;
  line-height: 1.85;
}

.study-notes p:last-child {
  margin-bottom: 0;
}

.bold-lead-in {
  margin-top: 1.1rem;
  font-weight: 600;
}

.bold-lead-in strong {
  font-weight: 600;
}

.source-name {
  color: var(--muted);
  font-size: inherit;
}