/* ============ Markdown Theme Variables ============
   These CSS custom properties control the appearance of markdown.
   Override them in your own stylesheet to customize the look.
   Include this file: <link rel="stylesheet" href="markdown.css">
============================== */

/* -- Default variables (will be overridden by theme classes) -- */
:root {
  --md-text-color: #c9d1d9;        /* Light gray text (dark theme default) */
  --md-bg-color: #0d1117;          /* Dark background (dark theme default) */
  --md-link-color: #1a73e8;        /* GitHub link blue */
  --md-link-hover: underline;      /* underline on hover */
  --md-table-header-bg: rgba(255,255,255,0.08); /* Header row emphasis */
  --md-table-odd-bg: rgba(255,255,255,0.04);  /* Zebra striping - subtle in dark */
  --md-table-hover-bg: rgba(255,255,255,0.1); /* Hover highlight */
  --md-table-selected-bg: rgba(27,137,145,0.3); /* Selection (GitHub teal) */
  --md-list-li-margin: 0.75rem;    /* Space between list items */
  --md-hr-color: #30363d;          /* Horizontal rule (subtle in dark) */
  --md-quote-color: #8b949e;       /* Blockquote muted gray + left bar */
  --md-checkbox-border: #6e7681;
  --md-checkbox-checked-bg: #1a73e8;
  --md-checkbox-check: #ffffff;
  --md-code-bg: #161b22;           /* Code block background (dark) */
  --md-code-border: #30363d;
  --md-inline-code-bg: rgba(110,118,129,0.2);
  /* Syntax highlighting tokens (default = GitHub Dark palette) */
  --md-tok-keyword: #ff7b72;
  --md-tok-title: #d2a8ff;
  --md-tok-constant: #79c0ff;
  --md-tok-string: #a5d6ff;
  --md-tok-builtin: #ffa657;
  --md-tok-comment: #8b949e;
  --md-tok-tag: #7ee787;
  --md-tok-subst: #c9d1d9;
  --md-tok-section: #1f6feb;
  --md-tok-bullet: #f2cc60;
  --md-tok-emphasis: #c9d1d9;
  --md-tok-strong: #c9d1d9;
  --md-tok-addition: #aff5b4;
  --md-tok-addition-bg: #033a16;
  --md-tok-deletion: #ffdcd7;
  --md-tok-deletion-bg: #67060c;
}

/* -- Dark theme class -- */
.markdown-theme-dark {
  --md-text-color: #c9d1d9;
  --md-bg-color: #0d1117;
  --md-link-color: #1a73e8;
  --md-link-hover: underline;
  --md-table-header-bg: rgba(255,255,255,0.08);
  --md-table-odd-bg: rgba(255,255,255,0.04);
  --md-table-hover-bg: rgba(255,255,255,0.1);
  --md-table-selected-bg: rgba(27,137,145,0.3);
  --md-list-li-margin: 0.75rem;
  --md-hr-color: #30363d;
  --md-quote-color: #8b949e;
  --md-checkbox-border: #6e7681;
  --md-checkbox-checked-bg: #1a73e8;
  --md-checkbox-check: #ffffff;
  --md-code-bg: #161b22;
  --md-code-border: #30363d;
  --md-inline-code-bg: rgba(110,118,129,0.2);
  --md-tok-keyword: #ff7b72;
  --md-tok-title: #d2a8ff;
  --md-tok-constant: #79c0ff;
  --md-tok-string: #a5d6ff;
  --md-tok-builtin: #ffa657;
  --md-tok-comment: #8b949e;
  --md-tok-tag: #7ee787;
  --md-tok-subst: #c9d1d9;
  --md-tok-section: #1f6feb;
  --md-tok-bullet: #f2cc60;
  --md-tok-emphasis: #c9d1d9;
  --md-tok-strong: #c9d1d9;
  --md-tok-addition: #aff5b4;
  --md-tok-addition-bg: #033a16;
  --md-tok-deletion: #ffdcd7;
  --md-tok-deletion-bg: #67060c;
}

/* -- Light theme class -- */
.markdown-theme-light {
  --md-text-color: #24292e;
  --md-bg-color: #f6f8fa;
  --md-link-color: #1a73e8;
  --md-link-hover: underline;
  --md-table-header-bg: rgba(0,0,0,0.06);   /* Header row emphasis */
  --md-table-odd-bg: rgba(0,0,0,0.03);     /* Subtle in light */
  --md-table-hover-bg: rgba(0,0,0,0.07);
  --md-table-selected-bg: rgba(27,137,145,0.3);
  --md-list-li-margin: 0.75rem;
  --md-hr-color: #d0d7de;          /* Horizontal rule (subtle in light) */
  --md-quote-color: #6e7681;       /* Blockquote muted gray + left bar */
  --md-checkbox-border: #6e7681;
  --md-checkbox-checked-bg: #1a73e8;
  --md-checkbox-check: #ffffff;
  --md-code-bg: #ffffff;           /* Code block background (light) */
  --md-code-border: #d0d7de;
  --md-inline-code-bg: rgba(175,184,193,0.2);
  --md-tok-keyword: #d73a49;
  --md-tok-title: #6f42c1;
  --md-tok-constant: #005cc5;
  --md-tok-string: #032f62;
  --md-tok-builtin: #e36209;
  --md-tok-comment: #6a737d;
  --md-tok-tag: #22863a;
  --md-tok-subst: #24292e;
  --md-tok-section: #005cc5;
  --md-tok-bullet: #735c0f;
  --md-tok-emphasis: #24292e;
  --md-tok-strong: #24292e;
  --md-tok-addition: #22863a;
  --md-tok-addition-bg: #f0fff4;
  --md-tok-deletion: #b31d28;
  --md-tok-deletion-bg: #ffeef0;
}

/* -- Common base styles using the variables -- */
.markdown-container {
  color: var(--md-text-color);
  background-color: var(--md-bg-color);
  padding: 1rem;
  font-family: system-ui, sans-serif;
  min-height: 200px;
}

/* Links: no underline by default, underline on hover */
.markdown-container a {
  color: var(--md-link-color);
  text-decoration: none;
}
.markdown-container a:hover {
  text-decoration: var(--md-link-hover);
}

/* Lists: increased spacing between items */
.markdown-container ul li {
  margin-bottom: var(--md-list-li-margin);
}

/* Tables: borderless with subtle striping */
.markdown-container table {
  border-collapse: collapse;
  width: 100%;
}
.markdown-container table td,
.markdown-container table th {
  border: 1px solid #6e7681;
  padding: 0.5rem 0.75rem;
}
/* Header row: emphasized background + bold text.
   Specificity is intentionally higher than page-level table rules. */
.markdown-container table tr:first-child th,
.markdown-container table tr:first-child td {
  background-color: var(--md-table-header-bg);
  font-weight: 600;
}

.markdown-container table tr:nth-of-type(odd) {
  background-color: var(--md-table-odd-bg);
}
.markdown-container table tr:hover {
  background-color: var(--md-table-hover-bg);
}
.markdown-container table tr.selected {
  background-color: var(--md-table-selected-bg) !important;
}

/* Horizontal rule: thin, theme-aware line (browser default is too bright in dark) */
.markdown-container hr {
  border: none;
  border-top: 1px solid var(--md-hr-color);
  margin: 1.5rem 0;
}

/* Blockquote: muted gray text with a left bar in the same color */
.markdown-container blockquote {
  margin: 1rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 2px solid var(--md-quote-color);
  color: var(--md-quote-color);
}
.markdown-container blockquote p {
  margin: 0.5rem 0;
}

/* Task list checkboxes: custom-drawn so they are visible in both themes */
.markdown-container li > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 1px solid var(--md-checkbox-border);
  border-radius: 3px;
  background-color: transparent;
  vertical-align: -0.1em;
  position: relative;
}
.markdown-container li > input[type="checkbox"]:checked {
  background-color: var(--md-checkbox-checked-bg);
  border-color: var(--md-checkbox-checked-bg);
}
.markdown-container li > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.1em;
  width: 0.25em;
  height: 0.5em;
  border: solid var(--md-checkbox-check);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Task lists: the checkbox replaces the list bullet */
.markdown-container li:has(> input[type="checkbox"]) {
  list-style: none;
}

/* Code blocks: standalone card with syntax highlighting (highlight.js) */
.markdown-container pre {
  background-color: var(--md-code-bg);
  border: 1px solid var(--md-code-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
/* Code block wrapper: header row (language label + copy button) above the pre */
.markdown-container .md-code-block {
  margin: 1rem 0;
}
.markdown-container .md-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background-color: var(--md-code-bg);
  border: 1px solid var(--md-code-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.markdown-container .md-code-lang {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--md-quote-color);
}
.markdown-container .md-code-copy {
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--md-code-border);
  border-radius: 6px;
  background: transparent;
  color: var(--md-text-color);
  cursor: pointer;
}
.markdown-container .md-code-copy:hover {
  background-color: var(--md-table-hover-bg);
}
.markdown-container .md-code-copy.is-copied {
  color: #3fb950;
  border-color: #3fb950;
}
.markdown-container .md-code-copy.is-failed {
  color: #f85149;
  border-color: #f85149;
}
.markdown-container .md-code-block pre {
  margin: 0;
  border-radius: 0 0 8px 8px;
}
.markdown-container pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: none;
  padding: 0;
}
/* Inline code */
.markdown-container :not(pre) > code {
  background-color: var(--md-inline-code-bg);
  border-radius: 4px;
  padding: 0.2em 0.4em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* ---------- Syntax highlighting tokens ----------
   Active only when the container has the md-hljs-internal class (added by
   JS in "internal" mode, the default). In "external" mode (setMarkdownHljsStyles)
   none of these rules match, so the host page's own highlight.js theme
   styles the tokens without any conflict.
   Colors come from the --md-tok-* variables defined in the theme blocks above;
   override them in your own stylesheet (loaded after markdown.css) to make
   highlighting follow your project theme, e.g.:
     .markdown-theme-dark { --md-tok-keyword: var(--app-accent); }
   Set a variable to `inherit` to drop coloring for that token group. */
.markdown-container.md-hljs-internal .hljs { color: var(--md-text-color); }
.markdown-container.md-hljs-internal .hljs-doctag,
.markdown-container.md-hljs-internal .hljs-keyword,
.markdown-container.md-hljs-internal .hljs-meta .hljs-keyword,
.markdown-container.md-hljs-internal .hljs-template-tag,
.markdown-container.md-hljs-internal .hljs-template-variable,
.markdown-container.md-hljs-internal .hljs-type,
.markdown-container.md-hljs-internal .hljs-variable.language_ { color: var(--md-tok-keyword); }
.markdown-container.md-hljs-internal .hljs-title,
.markdown-container.md-hljs-internal .hljs-title.class_,
.markdown-container.md-hljs-internal .hljs-title.class_.inherited__,
.markdown-container.md-hljs-internal .hljs-title.function_ { color: var(--md-tok-title); }
.markdown-container.md-hljs-internal .hljs-attr,
.markdown-container.md-hljs-internal .hljs-attribute,
.markdown-container.md-hljs-internal .hljs-literal,
.markdown-container.md-hljs-internal .hljs-meta,
.markdown-container.md-hljs-internal .hljs-number,
.markdown-container.md-hljs-internal .hljs-operator,
.markdown-container.md-hljs-internal .hljs-variable,
.markdown-container.md-hljs-internal .hljs-selector-attr,
.markdown-container.md-hljs-internal .hljs-selector-class,
.markdown-container.md-hljs-internal .hljs-selector-id { color: var(--md-tok-constant); }
.markdown-container.md-hljs-internal .hljs-regexp,
.markdown-container.md-hljs-internal .hljs-string,
.markdown-container.md-hljs-internal .hljs-meta .hljs-string { color: var(--md-tok-string); }
.markdown-container.md-hljs-internal .hljs-built_in,
.markdown-container.md-hljs-internal .hljs-symbol { color: var(--md-tok-builtin); }
.markdown-container.md-hljs-internal .hljs-comment,
.markdown-container.md-hljs-internal .hljs-code,
.markdown-container.md-hljs-internal .hljs-formula { color: var(--md-tok-comment); font-style: italic; }
.markdown-container.md-hljs-internal .hljs-name,
.markdown-container.md-hljs-internal .hljs-quote,
.markdown-container.md-hljs-internal .hljs-selector-tag,
.markdown-container.md-hljs-internal .hljs-selector-pseudo { color: var(--md-tok-tag); }
.markdown-container.md-hljs-internal .hljs-subst { color: var(--md-tok-subst); }
.markdown-container.md-hljs-internal .hljs-section { color: var(--md-tok-section); font-weight: bold; }
.markdown-container.md-hljs-internal .hljs-bullet { color: var(--md-tok-bullet); }
.markdown-container.md-hljs-internal .hljs-emphasis { color: var(--md-tok-emphasis); font-style: italic; }
.markdown-container.md-hljs-internal .hljs-strong { color: var(--md-tok-strong); font-weight: bold; }
.markdown-container.md-hljs-internal .hljs-addition { color: var(--md-tok-addition); background-color: var(--md-tok-addition-bg); }
.markdown-container.md-hljs-internal .hljs-deletion { color: var(--md-tok-deletion); background-color: var(--md-tok-deletion-bg); }

/* Note: "auto" theme is resolved to a concrete class in JS (matchMedia),
   so no media queries are needed here. */