/* ===========================================================
   .markdown-body — styles applied to every rendered .md file
   Scoped so they don't bleed into the chrome (topbar, panels).
   =========================================================== */

.markdown-body {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
}

/* -----------------------------------------------------------
   Headings
   ----------------------------------------------------------- */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.8em 0 0.6em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.markdown-body h1 { font-size: 2em;    border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em;  border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.9em; }
.markdown-body h6 { font-size: 0.85em; color: var(--color-text-muted); }

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

/* -----------------------------------------------------------
   Paragraphs and inline elements
   ----------------------------------------------------------- */
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre,
.markdown-body dl,
.markdown-body details,
.markdown-body hr {
  margin: 0 0 1em;
}

.markdown-body strong { font-weight: 600; }
.markdown-body em     { font-style: italic; }
.markdown-body del    { color: var(--color-text-muted); }
.markdown-body sub    { vertical-align: sub;   font-size: 0.75em; }
.markdown-body sup    { vertical-align: super; font-size: 0.75em; }
.markdown-body small  { font-size: 0.85em; }

.markdown-body abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

.markdown-body mark {
  background: hsl(50, 100%, 85%);
  padding: 0 3px;
  border-radius: 2px;
}

.markdown-body kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--color-text);
}

/* -----------------------------------------------------------
   Links
   ----------------------------------------------------------- */
.markdown-body a {
  color: var(--color-accent);
  text-decoration: none;
}
.markdown-body a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   Lists
   ----------------------------------------------------------- */
.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body li > p { margin-bottom: 0.5em; }
.markdown-body li > ul,
.markdown-body li > ol { margin: 0.25em 0; }

/* GFM task lists */
.markdown-body ul.task-list { padding-left: 1.5em; list-style: none; }
.markdown-body li.task-list-item { display: list-item; }
.markdown-body input.task-list-item-checkbox {
  margin: 0 0.4em 0 -1.5em;
  vertical-align: middle;
}

/* Definition lists */
.markdown-body dt {
  margin-top: 0.75em;
  font-weight: 600;
}
.markdown-body dd {
  margin: 0.25em 0 0.5em 1.5em;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------
   Blockquotes
   ----------------------------------------------------------- */
.markdown-body blockquote {
  padding: 0.5em 1em;
  color: var(--color-text-muted);
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: 0 6px 6px 0;
}
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body blockquote p { margin-bottom: 0.5em; }
.markdown-body blockquote p:last-child { margin-bottom: 0; }

/* GitHub-style markdown alerts (converted from > [!TYPE] blockquotes)
   Color is set per-instance via the --alert-color CSS variable,
   driven by _data/admonitions.yml */
.markdown-body .markdown-alert {
  --alert-color: var(--color-text-muted);
  padding: 0.75em 1em;
  margin: 0 0 1em;
  border-left: 4px solid var(--alert-color);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--alert-color) 8%, transparent);
}
.markdown-body .markdown-alert > :last-child {
  margin-bottom: 0;
}
.markdown-body .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: var(--alert-color);
}
.markdown-body .markdown-alert-title-text {
  /* Hook for customizing title appearance (size, casing, letter-spacing, etc.) */
  flex: 1;
}
.markdown-body .markdown-alert-title-text code {
  /* Code in title uses the alert color for the chip */
  background: color-mix(in srgb, var(--alert-color) 22%, transparent);
  color: var(--alert-color);
  font-weight: 500;
}
.markdown-body .markdown-alert-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.markdown-body .markdown-alert-icon svg {
  fill: currentColor;
}

/* No-title variant — > [!TYPE] "" — removes the title row from static alerts.
   Collapsibles keep an empty summary so the chevron stays clickable. */
.markdown-body .markdown-alert.markdown-alert-no-title:not(details) > .markdown-alert-title {
  display: none;
}
.markdown-body details.markdown-alert.markdown-alert-no-title > summary.markdown-alert-title {
  min-height: 1.25em;
  margin-bottom: 0;
}
.markdown-body details.markdown-alert.markdown-alert-no-title[open] > summary.markdown-alert-title {
  margin-bottom: 0.5em;
}

/* Collapsible variant — <details>/<summary> */
.markdown-body details.markdown-alert > summary.markdown-alert-title {
  cursor: pointer;
  margin-bottom: 0;
  list-style: none; /* hide default disclosure triangle */
  user-select: none;
}
.markdown-body details.markdown-alert > summary.markdown-alert-title::-webkit-details-marker {
  display: none; /* Safari */
}
/* Custom chevron that rotates when open */
.markdown-body details.markdown-alert > summary.markdown-alert-title::after {
  content: "";
  margin-left: auto;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 200ms ease;
}
.markdown-body details.markdown-alert[open] > summary.markdown-alert-title {
  margin-bottom: 0.5em;
}
.markdown-body details.markdown-alert[open] > summary.markdown-alert-title::after {
  transform: rotate(45deg);
}

/* Chirpy-style prompts — IAL syntax {: .prompt-TYPE }
   Icon goes inline at the start of the first paragraph (no title row).
   Color comes from the same admonitions config via --alert-color. */
.markdown-body blockquote[class*="prompt-"] {
  --alert-color: var(--color-text-muted);
  border-left-color: var(--alert-color);
  background: color-mix(in srgb, var(--alert-color) 8%, transparent);
  color: var(--color-text);
}
.markdown-body blockquote[class*="prompt-"] .prompt-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5em;
  color: var(--alert-color);
  vertical-align: middle;
}
.markdown-body blockquote[class*="prompt-"] .prompt-icon svg {
  fill: currentColor;
}

/* Nested plain blockquotes inside an admonition inherit the parent's color.
   Nested [!TYPE] alerts override this with their own --alert-color. */
.markdown-body .markdown-alert blockquote,
.markdown-body blockquote[class*="prompt-"] blockquote {
  border-left-color: var(--alert-color);
  background: color-mix(in srgb, var(--alert-color) 12%, transparent);
  color: var(--color-text);
}

/* Inline code inside admonitions picks up the parent's --alert-color */
.markdown-body .markdown-alert :not(pre) > code,
.markdown-body blockquote[class*="prompt-"] :not(pre) > code {
  background: color-mix(in srgb, var(--alert-color) 18%, transparent);
  color: var(--color-text);
}

/* -----------------------------------------------------------
   Code
   ----------------------------------------------------------- */
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.markdown-body :not(pre) > code {
  padding: 0.15em 0.4em;
  background: var(--color-bg-alt);
  border-radius: 4px;
  color: var(--color-text);
}

.markdown-body pre {
  padding: 1em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.5;
}

.markdown-body pre > code {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 1em;
  white-space: pre;
}

/* Rouge wrappers */
.markdown-body .highlight,
.markdown-body .highlighter-rouge { margin: 0 0 1em; }
.markdown-body .highlighter-rouge pre { margin: 0; }

/* Windowed code blocks
   Title bar with language label, filename, copy button.
   Three window styles (windows | macos | linux).
   Optional line numbers and line highlighting.
   See assets/js/code-blocks.js */
.markdown-body div.code-block-windowed {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
  margin: 0 0 1em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.markdown-body div.code-block-windowed.has-lang-color {
  border-color: color-mix(in srgb, var(--lang-color) 50%, var(--color-border));
}

/* --- Title bar: three-section grid (left | center | right) --- */
.markdown-body .code-block-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75em;
  padding: 0.4em 0.5em 0.4em 0.85em;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85em;
  font-family: var(--font-mono);
}
.markdown-body .titlebar-left,
.markdown-body .titlebar-center,
.markdown-body .titlebar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}
.markdown-body .titlebar-left   { justify-self: start; }
.markdown-body .titlebar-center { justify-self: center; }
.markdown-body .titlebar-right  { justify-self: end; }

.markdown-body div.code-block-windowed.has-lang-color .code-block-titlebar {
  background: color-mix(in srgb, var(--lang-color) 12%, var(--color-bg-alt));
  border-bottom-color: color-mix(in srgb, var(--lang-color) 40%, var(--color-border));
}

/* --- macOS traffic lights --- */
.markdown-body .traffic-lights {
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  margin-right: 0.25em;
}
.markdown-body .traffic-light {
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  flex-shrink: 0;
}
.markdown-body .traffic-light.traffic-close    { background: #ff5f57; }
.markdown-body .traffic-light.traffic-minimize { background: #febc2e; }
.markdown-body .traffic-light.traffic-maximize { background: #28c840; }

/* --- Language badge --- */
.markdown-body .code-block-language {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0.15em 0.5em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.markdown-body div.code-block-windowed.has-lang-color .code-block-language:not(.icon-only) {
  color: var(--lang-color);
  border-color: color-mix(in srgb, var(--lang-color) 40%, var(--color-border));
  background: color-mix(in srgb, var(--lang-color) 8%, var(--color-bg));
}
.markdown-body .code-block-language.icon-only {
  padding: 0;
  background: transparent;
  border: none;
}
.markdown-body .code-block-language-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.markdown-body .code-block-language.icon-only .code-block-language-icon {
  width: 1.5em;
  height: 1.5em;
}
.markdown-body .code-block-language-icon svg {
  width: 100%;
  height: 100%;
}
.markdown-body div.code-block-windowed.has-lang-color .code-block-language-icon {
  color: var(--lang-color);
}

/* --- Filename --- */
.markdown-body .code-block-filename {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Copy button --- */
.markdown-body .code-block-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.markdown-body .code-block-copy:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text);
}
.markdown-body .code-block-copy:active {
  background: color-mix(in srgb, var(--color-text) 15%, transparent);
  transform: scale(0.95);
}
.markdown-body .code-block-copy.copied {
  color: hsl(150, 60%, 40%);
}
.markdown-body .code-block-copy svg {
  fill: currentColor;
}

/* --- Reset inner containers inside windowed blocks --- */
.markdown-body div.code-block-windowed .highlight {
  margin: 0;
  border-radius: 0;
  background: transparent;
}
.markdown-body div.code-block-windowed pre {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* --- Lines (wrapped by JS when line numbers or highlights are enabled) --- */
.markdown-body .code-line {
  display: block;
  min-height: 1.2em;
  line-height: 1.5;
}
.markdown-body .code-line-content {
  display: inline;
}
.markdown-body .code-line-content:empty::before {
  content: ' ';
}

/* Line numbers — sticky to the left during horizontal scroll */
.markdown-body .has-line-numbers .code-line {
  display: flex;
  gap: 1em;
}
.markdown-body .code-line-num {
  flex-shrink: 0;
  width: 2.5em;
  text-align: right;
  color: var(--color-text-muted);
  opacity: 0.6;
  user-select: none;
  -webkit-user-select: none;
  position: sticky;
  left: 0;
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
}
.markdown-body .has-line-numbers .code-line-content {
  flex: 1;
  min-width: 0;
}

/* Zebra striping — alternating row backgrounds.
   Uses --lang-color when defined (tinted with the language theme),
   otherwise a subtle neutral gray. */
.markdown-body .has-zebra .code-line:nth-child(even) {
  background: color-mix(in srgb, var(--lang-color, var(--color-text-muted)) 15%, transparent);
    margin: 0 -1em;
  padding: 0 1em;
}
.markdown-body .has-zebra.has-line-numbers .code-line:nth-child(even) .code-line-num {
  background: color-mix(in srgb, var(--lang-color, var(--color-text-muted)) 15%, var(--color-bg));
}

/* Highlighted lines — accent border on the left, soft tinted background.
   Uses --lang-color when available, otherwise a default amber.
   Placed AFTER zebra to override the alternating background. */
.markdown-body .code-line-highlighted {
  background: color-mix(in srgb, var(--lang-color, hsl(40, 90%, 50%)) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--lang-color, hsl(40, 90%, 50%));
  margin: 0 -1em;
  padding: 0 1em;
}
.markdown-body .has-line-numbers .code-line-highlighted .code-line-num {
  background: color-mix(in srgb, var(--lang-color, hsl(40, 90%, 50%)) 12%, var(--color-bg));
}


/* -----------------------------------------------------------
   Tables
   ----------------------------------------------------------- */
.markdown-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-body table th,
.markdown-body table td {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.markdown-body table th {
  background: var(--color-bg-alt);
  font-weight: 600;
}

.markdown-body table tr:nth-child(even) {
  background: var(--color-bg-alt);
}

/* -----------------------------------------------------------
   Horizontal rule
   ----------------------------------------------------------- */
.markdown-body hr {
  height: 1px;
  margin: 2em 0;
  background: var(--color-border);
  border: 0;
}

/* -----------------------------------------------------------
   Images
   ----------------------------------------------------------- */
.markdown-body img {
  max-width: 100%;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   Footnotes
   ----------------------------------------------------------- */
.markdown-body .footnotes {
  margin-top: 2em;
  padding-top: 1em;
  font-size: 0.9em;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.markdown-body .footnotes ol { padding-left: 1.5em; }
.markdown-body a.footnote {
  font-size: 0.75em;
  vertical-align: super;
  padding: 0 2px;
}
.markdown-body a.reversefootnote { text-decoration: none; margin-left: 4px; }

/* -----------------------------------------------------------
   Details / summary
   ----------------------------------------------------------- */
.markdown-body details {
  padding: 0.5em 1em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.markdown-body details > summary {
  cursor: pointer;
  font-weight: 600;
  margin: -0.5em -1em;
  padding: 0.5em 1em;
}
.markdown-body details[open] > summary {
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--color-border);
}

/* ===========================================================
   Rouge syntax highlighting — light theme
   Token classes emitted by kramdown + Rouge.
   =========================================================== */

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs    { color: var(--syntax-comment); font-style: italic; } /* comments */

.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kr,
.highlight .kt,
.highlight .kc    { color: var(--syntax-keyword); }                     /* keywords */

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sh,
.highlight .si,
.highlight .sa,
.highlight .sb,
.highlight .sx,
.highlight .sr,
.highlight .dl    { color: var(--syntax-string); }                      /* strings */

.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo    { color: var(--syntax-number); }                      /* numbers */

.highlight .o,
.highlight .ow    { color: var(--syntax-keyword); }                     /* operators */

.highlight .nf,
.highlight .nc,
.highlight .nn    { color: var(--syntax-function); }                    /* function/class names */

.highlight .na    { color: var(--syntax-number); }                      /* attributes (HTML/XML) */
.highlight .nt    { color: var(--syntax-tag); }                         /* tags     (HTML/XML) */
.highlight .nb    { color: var(--syntax-number); }                      /* builtins */
.highlight .nl    { color: var(--syntax-keyword); }                     /* labels */
.highlight .nd    { color: var(--syntax-function); }                    /* decorators */
.highlight .py    { color: var(--syntax-number); }                      /* properties */
.highlight .nv,
.highlight .vi,
.highlight .vg    { color: var(--syntax-variable); }                    /* variables */

.highlight .p,
.highlight .pi    { color: var(--syntax-punctuation); }                 /* punctuation */

.highlight .err   { color: var(--syntax-error-fg); background: var(--syntax-error-bg); } /* errors */

.highlight .w     { color: inherit; }                     /* whitespace */