@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap');

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #39d353;       /* green phosphor */
  --gold: #e3b341;
  --link: #ffb000;         /* amber phosphor */
  --code-bg: #0d1117;
  --comment: #8b949e;
  --label: #ffc640;        /* lighter amber phosphor */
  --directive: #85e89d;    /* soft phosphor green for directives */
  --highlight-bg: #252c36;
  --highlight-border: #39d353; /* green phosphor */
  --code-size: 13px;
  --prose-size: 16px;
}

/* ── Light theme (IDE-inspired) ─────────────────────────────────────────── */

html[data-theme="light"] {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --border: #d0d7de;
  --text: #1f2328;
  --muted: #57606a;
  --accent: #0969da;        /* GitHub blue */
  --gold: #9a6700;
  --link: #0969da;
  --code-bg: #ffffff;
  --comment: #6e7781;       /* muted gray for comments */
  --label: #0550ae;         /* dark blue for labels */
  --directive: #116329;     /* dark green for directives */
  --highlight-bg: #ddf4ff;  /* light blue selection */
  --highlight-border: #0969da;
}

/* Disable CRT scanlines and sweep in light mode */
html[data-theme="light"] .page::before,
html[data-theme="light"] .page::after {
  display: none;
}

/* Remove phosphor text-shadow in light mode */
html[data-theme="light"] .shelf-header h1,
html[data-theme="light"] .shelf-header p,
html[data-theme="light"] .program-card .program-title,
html[data-theme="light"] .program-card .program-desc,
html[data-theme="light"] .program-card .program-meta,
html[data-theme="light"] .program-card .lang-badge {
  text-shadow: none;
}

/* ── Theme toggle control ────────────────────────────────────────────────── */

.theme-controls {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.theme-btn + .theme-btn {
  border-left: 1px solid var(--border);
}

.theme-btn:hover {
  color: var(--text);
  background: var(--highlight-bg);
}

/* Active state driven by the html[data-theme] attribute — no JS required */
html[data-theme="dark"]  [data-theme-btn="dark"],
html[data-theme="light"] [data-theme-btn="light"] {
  color: var(--text);
  background: var(--highlight-bg);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#app {
  min-height: 100vh;
}

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.header-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
}

.header-logo:hover {
  text-decoration: none;
  opacity: 0.85;
}

.header-sep {
  color: var(--border);
  font-size: 1.2rem;
}

.header-title {
  font-size: 0.95rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s, border-color 0.15s;
}

.btn-icon:hover {
  color: var(--text);
  border-color: var(--muted);
}

.back-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.back-link:hover {
  color: var(--text);
  background: var(--highlight-bg);
  text-decoration: none;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.shelf-header {
  margin-bottom: 2.5rem;
}

.shelf-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.shelf-header p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 600px;
  line-height: 1.6;
}

.source-tree-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.program-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.program-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, transform 0.1s;
}

.program-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}

.program-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.program-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.lang-badge {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.7rem;
  background: var(--highlight-bg);
  color: var(--directive);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.program-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.program-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.program-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.program-page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.program-page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.program-page-header .byline {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.program-page-header .description {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 1rem;
}

.intro-paragraph {
  color: var(--text);
  font-size: 0.975rem;
  line-height: 1.75;
  max-width: 65ch;
  margin-bottom: 1.2rem;
}

.program-page > .github-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--link);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  margin: 1.5rem 0 0.5rem;
  transition: border-color 0.15s;
}

.program-page > .github-badge:hover {
  border-color: var(--link);
  text-decoration: none;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.file-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.file-item:hover {
  border-color: var(--accent);
  background: var(--highlight-bg);
  text-decoration: none;
}

.file-order {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--label);
}

.file-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.file-arrow {
  color: var(--muted);
  flex-shrink: 0;
}

/* ── CRT effect — catalog / home page ───────────────────────────────────── */

/* Refresh-line sweep: a faint bright band drifts slowly down the screen     */
@keyframes crt-sweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(350%);  }
}

/* Phosphor flicker: the overlay dims briefly at irregular intervals,         */
/* simulating the voltage instability of an old CRT power supply.             */
@keyframes crt-flicker {
  0%,  41.9%, 42.6%, 43.2%, 100% { opacity: 1;    }
  42%                             { opacity: 0.55; }
  42.3%                           { opacity: 0.85; }
  43%                             { opacity: 0.7;  }
}

/* Layer 1 — scanlines + edge vignette                                        */
/* Two backgrounds in one rule: the repeating scanline gradient sits on top   */
/* of a radial vignette that darkens the corners like a convex glass screen.  */
.page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent     0px,
      transparent     3px,
      rgba(0,0,0,.18) 3px,
      rgba(0,0,0,.18) 4px
    ),
    radial-gradient(
      ellipse at 50% 45%,
      transparent 50%,
      rgba(0,0,0,.65) 100%
    );
  animation: crt-flicker 11s step-end infinite;
}

/* Layer 2 — slow CRT beam sweep                                              */
/* A tall, nearly-invisible gradient panel that travels top-to-bottom once    */
/* every 12 seconds, mimicking the electron beam's vertical retrace.          */
.page::after {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 35%;
  pointer-events: none;
  z-index: 51;
  background: linear-gradient(
    to bottom,
    transparent          0%,
    rgba(255,255,255,.04) 50%,
    transparent          100%
  );
  animation: crt-sweep 12s linear infinite;
}

/* Phosphor glow — text on the catalog page glows like lit phosphor           */
.shelf-header h1 {
  text-shadow:
    0 0 8px  rgba(57,  211, 83,  0.8),
    0 0 20px rgba(39,  185, 60,  0.5),
    0 0 45px rgba(20,  150, 40,  0.3);
}

.shelf-header p {
  text-shadow:
    0 0 6px  rgba(57,  211, 83,  0.55),
    0 0 16px rgba(39,  185, 60,  0.3);
}

.program-card .program-title {
  text-shadow:
    0 0 6px  rgba(57,  211, 83,  0.65),
    0 0 18px rgba(39,  185, 60,  0.35);
}

.program-card .program-desc,
.program-card .program-meta {
  text-shadow:
    0 0 5px  rgba(57,  211, 83,  0.4),
    0 0 12px rgba(39,  185, 60,  0.2);
}

.program-card .lang-badge {
  text-shadow:
    0 0 5px  rgba(57,  211, 83,  0.5),
    0 0 12px rgba(39,  185, 60,  0.28);
}

/* ── Source tree ─────────────────────────────────────────────────────────── */

.file-tree {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}

/* Spacing between top-level directory groups */
.tree-group-root + .tree-group-root {
  margin-top: 1rem;
}

/* Directory row */
.tree-dir {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.55rem;
  padding-bottom: 0.2rem;
  padding-right: 1rem;
}

.tree-dir-icon {
  color: var(--muted);
  font-size: 0.7rem;
  opacity: 0.6;
  flex-shrink: 0;
  user-select: none;
}

.tree-dir-name {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* File row — shared */
.tree-file {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-right: 1rem;
  border-radius: 7px;
  text-decoration: none;
}

/* Generated file — clickable link */
.tree-file-link:hover {
  background: var(--highlight-bg);
  text-decoration: none;
}

.tree-file-icon {
  font-size: 0.55rem;
  color: var(--accent);
  margin-top: 0.32rem;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.tree-file-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tree-file-name {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--label);
}

.tree-file-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  white-space: normal;
}

/* Un-generated file — plain text stub */
.tree-file-plain {
  cursor: default;
}

.tree-file-plain .tree-file-icon {
  font-size: 1rem;
  margin-top: 0;
  opacity: 0.25;
  color: var(--muted);
}

.tree-file-plain .tree-file-name {
  font-weight: 400;
  color: var(--muted);
  opacity: 0.45;
}

.tree-file-plain .tree-file-desc {
  opacity: 0.6;
}

.reader-wrap {
  display: flex;
  flex-direction: column;
}

.reader-header-meta {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  font-size: var(--prose-size); /* anchor — children use em so they scale together */
}

.reader-header-meta h1 {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--label);
  margin-bottom: 0.3rem;
}

.reader-header-meta .file-byline {
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.reader-header-meta .file-description {
  font-size: 0.95em;
  color: var(--text);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 1rem;
}

.summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.summary-list li {
  font-size: 0.875em;
  color: var(--muted);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}

.summary-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.summary-list a {
  color: var(--link);
  font-size: 0.8em;
  margin-left: 0.4rem;
}

.reader-content {
  padding: 1.5rem;
  max-width: 1000px;
}

.code-section {
  margin-bottom: 0;
  scroll-margin-top: calc(56px + 0.75rem); /* header height + breathing room */
}

.code-block {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  margin-bottom: 0.75rem;
  font-size: var(--code-size);
}

/* Wrapper that stretches to the widest line so highlighted rows fill the full
   scroll width even on narrow / mobile viewports. */
.code-lines {
  display: inline-block; /* shrinks to max-content, but… */
  min-width: 100%;       /* …never narrower than the scroll container */
}

.code-line {
  display: flex;
  align-items: flex-start;
  min-height: 1.6em;
  min-width: 100%;       /* fill .code-lines width so background spans full row */
  padding: 0 0.5rem;
  cursor: pointer;
}

.code-line:hover {
  background: rgba(255, 255, 255, 0.03);
}

.code-line.highlighted {
  background: var(--highlight-bg);
  border-left: 2px solid var(--highlight-border);
  padding-left: calc(0.5rem - 2px);
}

.line-num {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  color: var(--muted);
  opacity: 0.4;
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: right;
  padding-right: 1.25rem;
  user-select: none;
  font-size: 0.85em;
  padding-top: 0.1em;
}

.line-code {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "calt" 1;
  white-space: pre;
  color: var(--text);
  flex: 1;
}

/* ── Syntax highlighting — VS Code Dark+ / Light+ palette ─────────────────── */

/* Dark theme (default) */
.hljs-comment,
.hljs-quote       { color: #6a9955; font-style: italic; }

.hljs-keyword,
.hljs-selector-tag { color: #569cd6; }

.hljs-string,
.hljs-attr        { color: #ce9178; }

.hljs-number,
.hljs-literal     { color: #b5cea8; }

.hljs-title,
.hljs-title.function_ { color: #dcdcaa; }

.hljs-type,
.hljs-class .hljs-title { color: #4ec9b0; }

.hljs-built_in    { color: #569cd6; }

.hljs-meta,
.hljs-meta .hljs-keyword { color: #c586c0; }

.hljs-meta .hljs-string { color: #ce9178; }

.hljs-variable,
.hljs-params      { color: #9cdcfe; }

/* x86asm: section names (.text, .data …) */
.hljs-section     { color: #dcdcaa; font-weight: 600; }

/* x86asm: labels */
.hljs-symbol      { color: #9cdcfe; }

/* x86asm: instructions rendered as name */
.hljs-name        { color: #569cd6; }

/* Deletion / addition in diffs */
.hljs-deletion    { color: #f44747; }
.hljs-addition    { color: #b5cea8; }

/* Light theme overrides */
html[data-theme="light"] .hljs-comment,
html[data-theme="light"] .hljs-quote       { color: #008000; }

html[data-theme="light"] .hljs-keyword,
html[data-theme="light"] .hljs-selector-tag { color: #0000ff; }

html[data-theme="light"] .hljs-string,
html[data-theme="light"] .hljs-attr        { color: #a31515; }

html[data-theme="light"] .hljs-number,
html[data-theme="light"] .hljs-literal     { color: #098658; }

html[data-theme="light"] .hljs-title,
html[data-theme="light"] .hljs-title.function_ { color: #795e26; }

html[data-theme="light"] .hljs-type,
html[data-theme="light"] .hljs-class .hljs-title { color: #267f99; }

html[data-theme="light"] .hljs-built_in    { color: #0000ff; }

html[data-theme="light"] .hljs-meta,
html[data-theme="light"] .hljs-meta .hljs-keyword { color: #af00db; }

html[data-theme="light"] .hljs-meta .hljs-string { color: #a31515; }

html[data-theme="light"] .hljs-variable,
html[data-theme="light"] .hljs-params      { color: #001080; }

html[data-theme="light"] .hljs-section     { color: #795e26; }

html[data-theme="light"] .hljs-symbol      { color: #001080; }

html[data-theme="light"] .hljs-name        { color: #0000ff; }

.enhancement-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: var(--prose-size); /* anchor — children use em so they scale together */
  overflow: hidden;
}

.enhancement-panel summary {
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  transition: background 0.15s;
}

.enhancement-panel summary::-webkit-details-marker {
  display: none;
}

.enhancement-panel summary:hover {
  background: var(--highlight-bg);
}

.enhancement-panel[open] summary {
  border-bottom: 1px solid var(--border);
}

.enhancement-toggle {
  color: var(--accent);
  font-size: 0.8em;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.enhancement-panel[open] .enhancement-toggle {
  transform: rotate(90deg);
}

.enhancement-title-text {
  flex: 1;
}

.enhancement-body {
  padding: 1.25rem;
}

.enhancement-content-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.25rem;
  align-items: start;
}

.enhancement-content-grid.no-image {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .enhancement-content-grid {
    grid-template-columns: 1fr;
  }
}

.enhancement-text {
  font-size: 0.95em;
  line-height: 1.75;
  color: var(--text);
}

.enhancement-image-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.enhancement-image-wrap img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

.enhancement-caption {
  font-size: 0.75em;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}

.enhancement-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8em;
  color: var(--muted);
}

.enhancement-footer a {
  color: var(--link);
}

.commons-link {
  display: inline;
  font-size: 0.65em;
  color: var(--muted);
  opacity: 0.7;
  margin-left: 0.3rem;
}

.commons-link:hover {
  opacity: 1;
}

.intro-image {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 220px;
}

.intro-image img {
  width: 220px;
  max-height: 260px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  display: block;
  background: var(--surface);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.intro-image figcaption {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.4rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .intro-image {
    float: none;
    margin: 0 0 1rem 0;
    max-width: 100%;
  }
  .intro-image img { width: 100%; max-height: 200px; }
}

/* ---------------------------------------------------------------------------
   Highlights
--------------------------------------------------------------------------- */

.highlights {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.highlights-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.highlight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.highlight-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}

.highlight-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.highlight-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.highlight-link {
  font-size: 0.8rem;
  color: var(--link);
  text-decoration: none;
}

.highlight-link:hover {
  text-decoration: underline;
}

.file-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  max-width: 1000px;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

.file-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s;
}

.file-nav-link:hover {
  color: var(--text);
  border-color: var(--accent);
  text-decoration: none;
}

.file-nav-link .nav-label {
  font-size: 0.75rem;
  color: var(--muted);
  display: block;
}

.file-nav-link .nav-name {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  color: var(--label);
  font-size: 0.85rem;
}

.file-nav-spacer {
  flex: 1;
}

/* ── Enhancement index ───────────────────────────────────────────────────── */

/* Mobile toggle — shown on narrow screens, hidden on wide */
.enh-index-mobile {
  margin-top: 1rem;
}

.enh-index-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.15s, border-color 0.15s;
}

.enh-index-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.enh-toggle-chevron {
  color: var(--accent);
  font-size: 0.65em;
  transition: transform 0.2s;
  flex-shrink: 0;
  display: inline-block;
}

/* Mobile list */
.enh-index-mobile-list {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.35rem 0;
  margin-top: 0;
}

/* Sidebar — hidden on narrow, visible on wide */
.enh-index-sidebar {
  display: none;
}

/* "Show" tab button — hidden until sidebar is closed */
.enh-index-show {
  display: none;
}

@media (min-width: 1320px) {
  /* Hide mobile toggle on wide screens */
  .enh-index-mobile {
    display: none;
  }

  /* Keep all reader content clear of the left sidebar */
  .reader-header-meta,
  .enh-index-mobile,
  .reader-content,
  .file-nav {
    margin-left: 260px;
    max-width: calc(100vw - 280px);
  }

  /* Fixed sidebar on the left */
  .enh-index-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px; /* below sticky header */
    left: 0;
    width: 260px;
    height: calc(100vh - 56px);
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow: hidden;
    z-index: 90;
  }

  /* Collapsed tab — reopen button */
  .enh-index-show {
    position: fixed;
    top: 80px;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--muted);
    cursor: pointer;
    padding: 0.45rem 0.55rem;
    font-size: 1rem;
    line-height: 1;
    z-index: 90;
    transition: color 0.15s, background 0.15s;
    align-items: center;
    justify-content: center;
  }

  .enh-index-show:hover {
    color: var(--text);
    background: var(--highlight-bg);
  }
}

.enh-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.enh-index-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.enh-index-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.enh-index-close:hover {
  color: var(--text);
  background: var(--highlight-bg);
}

/* Shared list styles */
.enh-index-list {
  list-style: none;
  padding: 0.35rem 0;
  overflow-y: auto;
  flex: 1;
}

.enh-index-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
  transition: background 0.12s, color 0.12s;
}

.enh-index-item:hover {
  background: var(--highlight-bg);
  color: var(--accent);
}

.enh-index-item--active {
  color: var(--accent);
  background: var(--highlight-bg);
}

.enh-index-item--active .enh-index-num {
  color: var(--accent);
}

.enh-index-num {
  color: var(--muted);
  font-size: 0.7rem;
  min-width: 1.2rem;
  text-align: right;
  flex-shrink: 0;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

.enh-index-title {
  flex: 1;
  line-height: 1.4;
}


.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  font-size: 0.9rem;
  gap: 0.5rem;
}

.loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-msg {
  color: var(--accent);
  padding: 2rem 1.5rem;
  font-size: 0.95rem;
}


.font-size-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.font-size-controls button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.font-size-controls button:hover {
  color: var(--text);
  border-color: var(--muted);
}

@media (max-width: 600px) {
  .page {
    padding: 1.5rem 1rem;
  }
  .reader-content {
    padding: 1rem 0.75rem;
  }
  .reader-header-meta {
    padding: 1rem 0.75rem;
  }
  .line-num {
    width: 2.5rem;
    min-width: 2.5rem;
  }
  .file-nav {
    padding: 1rem 0.75rem;
  }
}