/* Reading-mode styles for the rendered markdown body.
 *
 * Two-track width strategy:
 *   - The .prose container fills the FULL column (no narrow cap), so display
 *     blocks (math, code, tables, admonitions, images) get all the horizontal
 *     room they need.
 *   - Plain text-flow elements (p, h*, ul, ol, dl) are individually capped at
 *     a readable measure (~76 characters) so paragraphs don't run too long.
 *
 * Net effect: paragraphs stay narrow and easy to read, but a wide equation
 * or code block can stretch into the otherwise-empty right side of the
 * column. Standard "breakout" pattern from Tufte-style writing. */

.prose {
  --prose-measure: 76ch;
  --prose-font-size: clamp(1.05rem, 1.0rem + 0.25vw, 1.18rem);
  max-width: none;
  font-family: var(--font-serif);
  font-size: var(--prose-font-size);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

/* Note pages: stepped prose size (avoids vw reflow on every resize pixel). */
.prose.note-layout__content {
  --prose-font-size: 1.05rem;
}
@media (min-width: 48rem) {
  .prose.note-layout__content {
    --prose-font-size: 1.12rem;
  }
}
@media (min-width: 64rem) {
  .prose.note-layout__content {
    --prose-font-size: 1.18rem;
  }
}

/* Lazy KaTeX chunks note prose at h2 into .prose-section. */
.prose.note-layout__content > .prose-section {
  content-visibility: auto;
}

/* Constrain text-flow elements to the readable measure. */
.prose > p,
.prose > h1,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > .prose-section > p,
.prose > .prose-section > h1,
.prose > .prose-section > h2,
.prose > .prose-section > h3,
.prose > .prose-section > h4,
.prose > .prose-section > h5,
.prose > .prose-section > h6,
.prose > .prose-section > ul,
.prose > .prose-section > ol,
.prose > .prose-section > dl {
  max-width: var(--prose-measure);
}

/* Inside callouts and quotes, also cap paragraph width so long sentences
 * don't run the full column even though the box itself is allowed to. The
 * title bar and any block children (math, code) still get the full width. */
.prose .admonition > p:not(.admonition-title),
.prose .admonition li,
.prose blockquote > p {
  max-width: var(--prose-measure);
}

.prose > * + *,
.prose > .prose-section + .prose-section { margin-top: var(--s-4); }
.prose > .prose-section > * + * { margin-top: var(--s-4); }
.prose > h1 + *,
.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + *,
.prose > .prose-section > h1 + *,
.prose > .prose-section > h2 + *,
.prose > .prose-section > h3 + *,
.prose > .prose-section > h4 + * { margin-top: var(--s-3); }

.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--header-height) + var(--s-3));
}

.prose h1 { font-size: var(--fs-3); margin-top: var(--s-7); }
.prose h2 { font-size: var(--fs-2); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.prose h3 { font-size: var(--fs-1); margin-top: var(--s-6); }
.prose h4 { font-size: var(--fs-0); font-weight: 650; margin-top: var(--s-5); }

.prose > h1:first-child,
.prose > h2:first-child,
.prose > .prose-section:first-child > h1:first-child,
.prose > .prose-section:first-child > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose p { line-height: var(--lh-relaxed); }
.prose strong { color: var(--fg-strong); font-weight: 650; }
.prose em { font-style: italic; }

.prose ul {
  padding-left: var(--s-5);
  padding-inline-start: var(--s-5);
}
.prose ol {
  padding-left: var(--s-5);
  padding-inline-start: 2.0em; /* two-digit markers (10–18) with list-style-position: outside */
  list-style-position: outside;
}
.prose li { margin-top: var(--s-2); }
.prose li > p { margin-top: 0; }

.prose blockquote {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--fg-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}
.prose blockquote p { margin: 0; }

.prose hr { margin: var(--s-7) 0; }

.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose a:hover { color: var(--link-hover); }

.prose img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: var(--s-4) auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  margin: var(--s-4) 0;
}
.prose th, .prose td {
  border-bottom: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  border-bottom: 2px solid var(--border-strong);
  color: var(--fg-strong);
  font-weight: 650;
  background: var(--surface-2);
}
.prose tbody tr:hover { background: var(--surface-2); }

/* Definition lists */
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); }
.prose dt { font-weight: 650; color: var(--fg-strong); }
.prose dd { margin: 0; }

/* Anchor permalinks (anchors_plugin) */
.prose .header-anchor {
  margin-left: var(--s-2);
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition);
  font-weight: 400;
}
.prose h1:hover .header-anchor,
.prose h2:hover .header-anchor,
.prose h3:hover .header-anchor,
.prose h4:hover .header-anchor { opacity: 1; }
.prose .header-anchor:hover { color: var(--accent); }

/* Footnotes */
.prose .footnotes {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs--1);
  color: var(--muted);
}

/* Task list checkboxes (mdit-py-plugins.tasklists) */
.prose .task-list-item { list-style: none; margin-left: -1.4rem; }
.prose .task-list-item input[type="checkbox"] { margin-right: var(--s-2); }

/* Math (KaTeX) — make display blocks readable, scroll horizontally on overflow. */
.prose .katex-display {
  margin: var(--s-4) 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-2) 0;
}
.prose .katex {
  font-size: 1.05em;
}
.prose .katex-display > .katex { font-size: 1.1em; }

/* Highlighted "example" text — both inside math (\excol macro -> .excol) and prose
 * (<span class="example-text">) share the same theme-aware color token. */
.prose .example-text,
.prose .katex .excol {
  color: var(--excol);
}

/* The orphan \newcommand block at the top of some files renders as an empty math
 * display - hide display blocks that contain no glyphs to avoid stray gaps. */
.math-display:has(.katex-display:empty),
.math-display:has(> .katex-display > .katex > .katex-html:empty) {
  display: none;
}

/* Interactive plots (fenced ```plot``` blocks rendered by web/static/js/charts.js).
 * The container starts as an empty box and is filled in by Plotly or function-plot.
 * It fills the full breakout column width because .prose > .plot is not in the
 * narrow text-measure cap list above. */
.prose .plot .plot-host {
  width: 100%;
  min-height: 0;
}

.prose .plot-host--linked {
  position: relative;
  cursor: crosshair;
}

.prose .plot-host .plot-probe-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.prose .plot {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--s-5) 0;
  min-height: 420px;
  border: 1px solid var(--chart-border);
  border-radius: var(--radius);
  background: var(--chart-surface);
  color: var(--chart-fg);
  padding: var(--s-3);
  font-family: var(--font-sans);
  /* Do not clip axis labels (function-plot draws slightly outside the SVG box). */
  overflow-x: auto;
  overflow-y: visible;
}

.prose .plot:not(.plot-duo) {
  min-height: auto;
}

/* Placeholder until IntersectionObserver triggers a render. */
.prose .plot.plot--pending:empty::after {
  content: "Chart loads when visible";
  display: block;
  text-align: center;
  padding: var(--s-6) var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  color: var(--chart-muted);
}
.prose .plot > svg,
.prose .plot .plot-host > svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.prose .plot-duo__panel .plot-host:not(.plot-host--equal-aspect) > svg {
  height: auto;
}

/* Mermaid diagrams (```mermaid fences). */
.prose .mermaid {
  margin: var(--s-4) 0;
  padding: var(--s-3);
  text-align: center;
  overflow-x: auto;
  border: 1px solid var(--chart-border);
  border-radius: var(--radius);
  background: var(--chart-surface);
}

.prose .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Centered title for function-plot (Plotly draws its own title in-layout). */
.prose .plot-title {
  margin: 0 0 var(--s-2);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--chart-fg);
}

.prose .plot-metrics {
  margin: var(--s-2) 0 var(--s-3);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  line-height: var(--lh-snug);
  color: var(--chart-muted);
}

/* Parameter sliders (function-plot). */
.prose .plot-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--chart-surface) 88%, var(--chart-border));
  border: 1px solid var(--chart-border);
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  color: var(--chart-fg);
}
.prose .plot-controls__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.prose .plot-controls__label {
  flex: 0 0 auto;
  min-width: 2.5rem;
  font-weight: 600;
  color: var(--chart-fg);
}
.prose .plot-controls__value {
  font-variant-numeric: tabular-nums;
  color: var(--chart-muted);
}
.prose .plot-controls__slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--chart-series-1);
}

/* Side-by-side 2D slice + 3D revolution (revolution plot with slice2d). */
.prose .plot.plot-duo {
  min-height: auto;
  padding: var(--s-3);
}

.prose .plot-duo__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.prose .plot-duo__row--stacked {
  margin-top: var(--s-3);
}

.prose .plot-duo__panel--stacked {
  grid-column: 1 / -1;
  min-height: 320px;
}

.prose .plot-duo__panel {
  min-width: 0;
  min-height: 300px;
  border: 1px solid var(--chart-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--chart-surface) 92%, var(--bg));
  padding: var(--s-2);
  overflow-x: auto;
  overflow-y: visible;
}

.prose .plot-duo__panel .plot-title {
  font-size: 14px;
  margin-bottom: var(--s-2);
}

.prose .plot-duo__panel .plot-host {
  min-height: 260px;
  width: 100%;
}

.prose .plot-duo__panel .plot-host:not(.plot-host--equal-aspect) > svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* 3D Plotly: use full panel width; legend is overlaid in charts.js */
.prose .plot-duo__panel--3d .plot-host,
.prose .plot-duo__panel--3d .js-plotly-plot,
.prose .plot-duo__panel--3d .plot-container {
  width: 100% !important;
  max-width: 100%;
}

@media (max-width: 52rem) {
  .prose .plot-duo__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .prose .plot {
    padding: var(--s-2) var(--s-2) var(--s-4);
  }

  .prose .plot.plot-duo {
    padding: var(--s-2);
  }
}

/* Theme function-plot SVG (D3 axes). Scoped with `>` so Plotly (which nests
 * inside .js-plotly-plot > .plot-container) is unaffected — Plotly applies
 * its own inline `fill` / `stroke` styling from layout.font / xaxis.* and
 * would otherwise be overridden by these selectors. */
.prose .plot > svg text,
.prose .plot .plot-host > svg text {
  fill: var(--chart-fg);
  font-family: var(--font-sans);
}
/* No rectangular axis border (function-plot path.domain). */
.prose .plot > svg path.domain,
.prose .plot .plot-host > svg path.domain {
  display: none;
}
.prose .plot > svg g.tick line,
.prose .plot .plot-host > svg g.tick line {
  stroke: var(--chart-grid);
  stroke-width: 1.5px;
}
/* Zero grid lines (function-plot marks ticks at 0; JS also sets inline stroke). */
.prose .plot > svg g.tick.tick-zero line,
.prose .plot .plot-host > svg g.tick.tick-zero line {
  stroke: var(--chart-axis);
  stroke-width: 1.5px;
}
.prose .plot > svg g.tick text,
.prose .plot .plot-host > svg g.tick text {
  fill: var(--chart-muted);
  font-size: 13px !important;
}
.prose .plot .plot-host > svg .x.axis text,
.prose .plot .plot-host > svg .y.axis text {
  font-size: 13px !important;
}
.prose .plot .plot-host > svg .x.axis-label,
.prose .plot .plot-host > svg .y.axis-label {
  font-size: 13px !important;
  fill: var(--chart-fg);
}

/* Custom legend for function-plot (Plotly draws its own legend). Only appears
 * when the chart has >=2 series, or any series has a `name` field. */
.prose .plot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--chart-grid);
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  color: var(--chart-fg);
}
.prose .plot-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.prose .plot-legend__swatch {
  width: 0.85em;
  height: 0.85em;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}