/* markdown.css — styles for Parsedown output.
   Everything is scoped to <div class="parsedmd"> ... </div>.
   The div is never taller than its parent and scrolls internally.
   NOTE: the parent needs a definite height (e.g. height: 500px, 80vh,
   or a flex/grid child with a set size) for max-height: 100% to work.
   No external fonts; uses good system fonts on every platform. */

.parsedmd {
  --md-bg:        #fbfcfd;
  --md-text:      #1f2a37;
  --md-muted:     #5b6878;
  --md-heading:   #0f1b2a;
  --md-link:      #1d5fa8;
  --md-link-hover:#0f3f78;
  --md-border:    #dde3ea;
  --md-code-bg:   #eef2f6;
  --md-pre-bg:    #f3f6f9;
  --md-quote:     #6f8fb3;
  --md-mark:      #fff1a8;

  --md-serif: "Charter", "Bitstream Charter", "Iowan Old Style", "Sitka Text",
              Cambria, Georgia, serif;
  --md-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
  --md-mono:  ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
              "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  .parsedmd {
    --md-bg:        #14181d;
    --md-text:      #d7dde4;
    --md-muted:     #95a1ae;
    --md-heading:   #f1f4f7;
    --md-link:      #7fb4ec;
    --md-link-hover:#a9cdf4;
    --md-border:    #2c343d;
    --md-code-bg:   #222a33;
    --md-pre-bg:    #1b2128;
    --md-quote:     #4f7aa6;
    --md-mark:      #5a4d14;
  }
}

/* ---------- Container ---------- */

.parsedmd {
  box-sizing: border-box;
  max-height: 100%;               /* never taller than the parent */
  overflow-y: auto;               /* scroll inside when content is longer */
  overflow-x: hidden;
  background: var(--md-bg);
  width: 100%;                    /* fill the parent's width */
  max-width: 100%;
  min-width: 0;                   /* stops flex/grid parents from stretching to fit long lines */
  padding: 1.5rem 2rem;
  font-family: var(--md-serif);
  font-size: calc(1.125rem * var(--md-scale, 1));   /* --md-scale is set by the text-size buttons */
  line-height: 1.7;
  color: var(--md-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.parsedmd > :first-child { margin-top: 0; }
.parsedmd > :last-child  { margin-bottom: 0; }

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

.parsedmd h1,
.parsedmd h2,
.parsedmd h3,
.parsedmd h4,
.parsedmd h5,
.parsedmd h6 {
  font-family: var(--md-sans);
  color: var(--md-heading);
  line-height: 1.25;
  font-weight: 650;
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 1.5rem;      /* nice landing for #anchor links */
}

.parsedmd h1 { font-size: 1.867em;  letter-spacing: -0.02em; margin-top: 0; }
.parsedmd h2 {
  font-size: 1.378em;
  letter-spacing: -0.01em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--md-border);
}
.parsedmd h3 { font-size: 1.111em; }
.parsedmd h4 { font-size: 0.933em; }
.parsedmd h5,
.parsedmd h6 { font-size: 0.844em; color: var(--md-muted); }

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

.parsedmd p,
.parsedmd ul,
.parsedmd ol,
.parsedmd dl,
.parsedmd blockquote,
.parsedmd pre,
.parsedmd table,
.parsedmd figure {
  margin: 0 0 1.25em;
}

.parsedmd a {
  color: var(--md-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.parsedmd a:hover { color: var(--md-link-hover); text-decoration-thickness: 2px; }
.parsedmd a:focus-visible {
  outline: 2px solid var(--md-link);
  outline-offset: 2px;
  border-radius: 2px;
}

.parsedmd strong { font-weight: 700; color: var(--md-heading); }
.parsedmd mark   { background: var(--md-mark); color: inherit; padding: 0 0.15em; }
.parsedmd del    { color: var(--md-muted); }
.parsedmd small  { font-size: 0.85em; }

.parsedmd hr {
  border: 0;
  height: 1px;
  background: var(--md-border);
  margin: 2.5em 0;
}

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

.parsedmd ul,
.parsedmd ol { padding-left: 1.6em; }
.parsedmd li + li { margin-top: 0.3em; }
.parsedmd li > ul,
.parsedmd li > ol { margin: 0.3em 0 0; }
.parsedmd li > p  { margin: 0 0 0.5em; }
.parsedmd ul li::marker { color: var(--md-muted); }
.parsedmd ol li::marker { color: var(--md-muted); font-family: var(--md-sans); font-size: 0.9em; }

/* Definition lists (ParsedownExtra) */
.parsedmd dt { font-weight: 700; color: var(--md-heading); margin-top: 0.8em; }
.parsedmd dd { margin: 0.2em 0 0 1.4em; }

/* ---------- Blockquotes ---------- */

.parsedmd blockquote {
  padding: 0.1em 0 0.1em 1.2em;
  border-left: 3px solid var(--md-quote);
  color: var(--md-muted);
  font-style: italic;
}
.parsedmd blockquote > :last-child { margin-bottom: 0; }

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

.parsedmd code,
.parsedmd kbd,
.parsedmd samp {
  font-family: var(--md-mono);
  font-size: 0.86em;
}

.parsedmd :not(pre) > code {
  background: var(--md-code-bg);
  padding: 0.12em 0.38em;
  border-radius: 4px;
}

.parsedmd pre {
  background: var(--md-pre-bg);
  border: 1px solid var(--md-border);
  border-radius: 6px;
  padding: 1em 1.2em;
  max-width: 100%;
  overflow-x: auto;               /* long lines scroll, page doesn't */
  line-height: 1.5;
  tab-size: 4;
}
.parsedmd pre code {
  background: none;
  padding: 0;
  font-size: 0.76em;
  white-space: pre;
}

.parsedmd kbd {
  border: 1px solid var(--md-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  background: var(--md-pre-bg);
}

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

.parsedmd table {
  display: block;                 /* lets wide tables scroll on small screens */
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--md-sans);
  font-size: 0.818em;
  line-height: 1.5;
}
.parsedmd th,
.parsedmd td {
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--md-border);
  text-align: left;
  vertical-align: top;
}
.parsedmd th {
  font-weight: 650;
  color: var(--md-heading);
  border-bottom-width: 2px;
}
.parsedmd tbody tr:hover { background: var(--md-pre-bg); }

/* Respect Markdown column alignment (|:---:| etc.) */
.parsedmd [style*="text-align: center"] { text-align: center; }
.parsedmd [style*="text-align: right"]  { text-align: right; }

/* ---------- Images ---------- */

.parsedmd img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.parsedmd p > img:only-child {
  display: block;
  margin: 1.5em auto;
}

/* ---------- Footnotes (ParsedownExtra) ---------- */

.parsedmd .footnotes {
  margin-top: 3em;
  font-size: 0.8em;
  color: var(--md-muted);
}
.parsedmd .footnotes hr { margin-bottom: 1.5em; }
.parsedmd sup a { text-decoration: none; font-family: var(--md-sans); }

/* ---------- Text-size toolbar (added by md-textsize.js) ---------- */

.parsedmd .md-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  display: flex;
  gap: 2px;
  margin: 0 0 0.5rem 1rem;
  padding: 3px;
  background: var(--md-bg);
  border: 1px solid var(--md-border);
  border-radius: 8px;
  font-family: var(--md-sans);
  font-size: 14px;               /* fixed: the toolbar itself does not scale */
  line-height: 1;
}
.parsedmd .md-toolbar button {
  min-width: 2.2em;
  height: 2.2em;
  padding: 0 0.5em;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--md-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.parsedmd .md-toolbar button:hover:not(:disabled) { background: var(--md-code-bg); }
.parsedmd .md-toolbar button:focus-visible { outline: 2px solid var(--md-link); outline-offset: 1px; }
.parsedmd .md-toolbar button:disabled { opacity: 0.35; cursor: default; }
.parsedmd .md-toolbar .md-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  position: relative;
}
.parsedmd .md-toolbar .md-print::before {   /* thin divider between size and print */
  content: "";
  position: absolute;
  left: -3px;
  top: 20%;
  bottom: 20%;
  border-left: 1px solid var(--md-border);
}
.parsedmd .md-toolbar .md-print svg { width: 1.15em; height: 1.15em; }
.parsedmd .md-toolbar .md-size-label {
  min-width: 3.4em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--md-muted);
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  .parsedmd { font-size: calc(1.05rem * var(--md-scale, 1)); padding: 1.5rem 1rem; }
  .parsedmd h1 { font-size: 1.667em; }
  .parsedmd h2 { font-size: 1.286em; }
}

/* ---------- Print ---------- */

@media print {
  .parsedmd .md-toolbar { display: none; }
  .parsedmd {
    /* always print with the light colors, even if the screen is in dark mode */
    --md-bg: #fff; --md-text: #000; --md-muted: #444; --md-heading: #000;
    --md-link: #000; --md-border: #ccc; --md-code-bg: #f2f2f2;
    --md-pre-bg: #f7f7f7; --md-quote: #999; --md-mark: #fff1a8;
    max-height: none; overflow: visible; padding: 0;
    background: #fff; color: #000; font-size: 11pt;
  }
  .parsedmd pre, .parsedmd table, .parsedmd img { break-inside: avoid; }
  .parsedmd a { color: inherit; }
  .parsedmd pre, .parsedmd pre code { white-space: pre-wrap; overflow: visible; }   /* wrap long lines on paper */
  .parsedmd h2, .parsedmd h3 { break-after: avoid; }
}

/* ---------- Parent sizing ---------- */

/* Give the media viewer a minimum height when it shows rendered Markdown */
.viewmediacontent:has(.parsedmd) {
  min-height: 600px;
  min-width: 0;                   /* lets it shrink if it is itself a flex/grid item */
}

/* The site layout uses display: table (#wrapper, .fullsideinner).
   Auto-layout tables grow to fit their widest content, so long code lines
   push the whole page wider than the screen. Fixed layout keeps them at
   their given width, so the code block scrolls instead. */
#wrapper:has(.parsedmd),
.fullsideinner:has(.parsedmd) {
  table-layout: fixed;
}