/* Typography for the rendered document. */

.markdown-body {
  max-width: var(--reader-measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 8rem;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  color: var(--fg);
  overflow-wrap: break-word;
}

.markdown-body > *:first-child { margin-top: 0; }

/* Headings --------------------------------------------------------- */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  position: relative;
  margin: 2em 0 0.6em;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 1.5rem;
}
.markdown-body h1 { font-size: 1.85em; margin-top: 1em; letter-spacing: -0.02em; }
.markdown-body h2 { font-size: 1.42em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); }
.markdown-body h3 { font-size: 1.18em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.9em; color: var(--fg-muted); }
.markdown-body h6 { font-size: 0.85em; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.heading-anchor {
  position: absolute;
  left: -0.85em;
  width: 0.85em;
  color: var(--fg-subtle);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 120ms var(--ease);
}
.markdown-body :is(h1, h2, h3, h4, h5, h6):hover .heading-anchor { opacity: 1; }
.heading-anchor:focus-visible { opacity: 1; }
@media (max-width: 700px) { .heading-anchor { display: none; } }

/* Text ------------------------------------------------------------- */

.markdown-body p { margin: 0 0 1.15em; }
.markdown-body strong { font-weight: 650; }
.markdown-body mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 2px; padding: 0 0.15em; }
.markdown-body del { color: var(--fg-muted); }
.markdown-body sub, .markdown-body sup { line-height: 0; }
.markdown-body abbr[title] { text-decoration: underline dotted; cursor: help; }

.markdown-body a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 0.15em; }
.markdown-body a:hover { text-decoration-color: currentColor; }
.markdown-body a.autolink { word-break: break-all; }

.markdown-body hr {
  height: 1px;
  margin: 2.5em 0;
  border: none;
  background: var(--border);
}

/* Lists ------------------------------------------------------------ */

.markdown-body ul, .markdown-body ol { margin: 0 0 1.15em; padding-left: 1.6em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body li > ul, .markdown-body li > ol { margin: 0.25em 0; }
.markdown-body ul.loose > li, .markdown-body ol.loose > li { margin: 0.7em 0; }
.markdown-body ::marker { color: var(--fg-subtle); }

.markdown-body ul.task-list { list-style: none; padding-left: 0.25em; }
.markdown-body .task-item { display: flex; gap: 0.55em; align-items: baseline; }
.markdown-body .task-item input {
  margin: 0;
  flex: none;
  translate: 0 0.12em;
  accent-color: var(--accent);
  cursor: default;
}
.markdown-body .task-body { min-width: 0; }

/* Quotes and callouts ---------------------------------------------- */

.markdown-body blockquote {
  margin: 0 0 1.15em;
  padding: 0.1em 0 0.1em 1.1em;
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
}
.markdown-body blockquote > *:last-child { margin-bottom: 0; }

.markdown-body .callout {
  margin: 0 0 1.3em;
  padding: 0.9em 1.1em;
  border: 1px solid var(--callout-border, var(--border));
  border-left: 3px solid var(--callout-color, var(--accent));
  border-radius: var(--radius);
  background: var(--callout-bg, var(--bg-sunken));
}
.markdown-body .callout-title {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  font-weight: 650;
  color: var(--callout-color, var(--accent));
}
.markdown-body .callout-title svg { fill: currentColor; flex: none; }
.markdown-body .callout-body > *:last-child { margin-bottom: 0; }

.markdown-body .callout-note      { --callout-color: #3b82f6; --callout-bg: color-mix(in srgb, #3b82f6 7%, transparent); --callout-border: color-mix(in srgb, #3b82f6 22%, var(--border)); }
.markdown-body .callout-tip       { --callout-color: #10b981; --callout-bg: color-mix(in srgb, #10b981 7%, transparent); --callout-border: color-mix(in srgb, #10b981 22%, var(--border)); }
.markdown-body .callout-important { --callout-color: #8b5cf6; --callout-bg: color-mix(in srgb, #8b5cf6 7%, transparent); --callout-border: color-mix(in srgb, #8b5cf6 22%, var(--border)); }
.markdown-body .callout-warning   { --callout-color: #f59e0b; --callout-bg: color-mix(in srgb, #f59e0b 8%, transparent); --callout-border: color-mix(in srgb, #f59e0b 24%, var(--border)); }
.markdown-body .callout-caution   { --callout-color: #ef4444; --callout-bg: color-mix(in srgb, #ef4444 7%, transparent); --callout-border: color-mix(in srgb, #ef4444 22%, var(--border)); }

/* Code ------------------------------------------------------------- */

.markdown-body code {
  font-family: var(--mono-font);
  font-size: 0.875em;
}

.markdown-body :not(pre) > code {
  padding: 0.15em 0.36em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: break-spaces;
}

.markdown-body .math { font-style: italic; letter-spacing: 0.01em; }
.markdown-body .math-display { display: block; padding: 0.6em 1em; margin: 1.2em 0; text-align: center; }

.markdown-body .code-block {
  position: relative;
  margin: 0 0 1.4em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3em 0.5em 0.3em 0.85em;
  min-height: 1.9em;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.code-lang {
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.code-copy {
  padding: 0.15em 0.5em;
  font-family: var(--ui-font);
  font-size: 11px;
  color: var(--fg-muted);
  border-radius: 5px;
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: var(--bg-hover); color: var(--fg); }

.markdown-body pre.code-body {
  display: flex;
  margin: 0;
  padding: 0.85em 1em;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.6;
  tab-size: 2;
}
.markdown-body pre.code-body code {
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  display: block;
  min-width: 0;
}
.markdown-body pre.code-body.numbered .code-gutter {
  flex: none;
  padding-right: 1em;
  margin-right: 1em;
  border-right: 1px solid var(--border);
  color: var(--fg-subtle);
  text-align: right;
  user-select: none;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

[data-wrap-code="true"] .markdown-body pre.code-body { white-space: pre-wrap; }
[data-wrap-code="true"] .markdown-body pre.code-body code { white-space: pre-wrap; word-break: break-word; }

/* Indented code blocks have no toolbar. */
.markdown-body .code-block[data-lang=""] .code-toolbar { background: none; border-bottom: none; padding-bottom: 0; }

/* Tables ----------------------------------------------------------- */

.markdown-body .table-wrap { margin: 0 0 1.4em; overflow-x: auto; }
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.markdown-body th, .markdown-body td {
  padding: 0.5em 0.8em;
  border: 1px solid var(--border);
  text-align: left;
}
.markdown-body th { background: var(--bg-sunken); font-weight: 650; }
.markdown-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fg) 2.5%, transparent); }

/* Media ------------------------------------------------------------ */

.markdown-body img {
  margin: 0.4em auto;
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.markdown-body figure { margin: 0 0 1.4em; }
.markdown-body figcaption { font-size: 0.85em; color: var(--fg-muted); text-align: center; }

/* Diagrams --------------------------------------------------------- */

.markdown-body .diagram {
  position: relative;
  margin: 0 0 1.6em;
  padding: 1rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diagram-canvas { overflow-x: auto; display: flex; justify-content: center; }
.diagram-canvas svg { max-width: 100%; height: auto; }

.diagram-tools {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
.diagram:hover .diagram-tools, .diagram:focus-within .diagram-tools { opacity: 1; }
.diagram-tools button {
  padding: 0.15em 0.5em;
  font-family: var(--ui-font);
  font-size: 11px;
  color: var(--fg-muted);
  border-radius: 5px;
}
.diagram-tools button:hover { background: var(--bg-hover); color: var(--fg); }
.diagram-note { font-size: 0.85em; color: var(--fg-muted); margin-bottom: 0.6em; }
.diagram-error { border-style: dashed; }

.mmd { font-family: var(--ui-font); display: block; margin: 0 auto; }
.mmd .mmd-shape rect,
.mmd .mmd-shape circle,
.mmd .mmd-shape path {
  fill: var(--bg-raised);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.mmd .mmd-shape .mmd-inner { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.2; }
.mmd .mmd-node text { fill: var(--fg); font-size: 13.5px; }
.mmd .mmd-edge { fill: none; stroke: var(--fg-muted); stroke-width: 1.6; }
.mmd .mmd-edge-dotted { stroke-dasharray: 5 4; }
.mmd .mmd-edge-thick { stroke-width: 3; }
.mmd .mmd-edge-invisible { stroke: none; }
.mmd .mmd-arrowhead { fill: var(--fg-muted); }
.mmd .mmd-arrowhead-open { fill: var(--bg-raised); stroke: var(--fg-muted); stroke-width: 1.4; }
.mmd .mmd-arrowhead-cross { fill: none; stroke: var(--fg-muted); stroke-width: 1.6; }
.mmd .mmd-edge-label rect { fill: var(--bg-sunken); stroke: var(--border); }
.mmd .mmd-edge-label text { fill: var(--fg-muted); font-size: 12px; }
.mmd .mmd-subgraph rect { fill: color-mix(in srgb, var(--fg) 3%, transparent); stroke: var(--border-strong); stroke-dasharray: 4 4; }
.mmd .mmd-subgraph text { fill: var(--fg-subtle); font-size: 12px; font-weight: 600; }

/* Footnotes -------------------------------------------------------- */

.footnotes {
  max-width: var(--reader-measure);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  font-family: var(--reader-font);
  font-size: calc(var(--reader-size) * 0.9);
  color: var(--fg-muted);
}
.footnotes h2 {
  font-size: 0.95em;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  margin-bottom: 0.75rem;
}
.footnotes ol { padding-left: 1.4em; }
.footnotes li { margin: 0.4em 0; }
.footnotes li > *:last-child { margin-bottom: 0; }
.footnotes p { display: inline; }
.footnote-back { margin-left: 0.35em; text-decoration: none; }
.footnote-ref a { text-decoration: none; padding: 0 0.15em; }
:target { animation: flash 1.4s var(--ease); }
@keyframes flash {
  0%, 40% { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { background: transparent; }
}

/* Raw HTML the author embedded ------------------------------------- */

.markdown-body .raw-html { margin: 0 0 1.15em; }
.markdown-body details {
  margin: 0 0 1.15em;
  padding: 0.6em 0.9em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.markdown-body summary { cursor: pointer; font-weight: 600; }
.markdown-body details[open] summary { margin-bottom: 0.6em; }

/* Search highlight injected by find-in-document --------------------- */
.markdown-body .find-hit { background: color-mix(in srgb, #f59e0b 40%, transparent); border-radius: 2px; }
.markdown-body .find-hit.is-current { background: color-mix(in srgb, var(--accent) 45%, transparent); }