/* Markdown reader theme — GitHub-like, light default + [data-theme="dark"].
   Token colors for highlight.js are defined for both appearances so code
   blocks stay legible regardless of the system look. */

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1f2328;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"], html[data-theme="dark"] body {
  background: #0d1117;
  color: #e6edf3;
}

.markdown-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 96px;
  word-wrap: break-word;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { margin: 28px 0 12px; font-weight: 650; line-height: 1.25; }
h1 { font-size: 2em; padding-bottom: .32em; border-bottom: 1px solid #d0d7de; }
h2 { font-size: 1.5em; padding-bottom: .32em; border-bottom: 1px solid #d0d7de; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5, h6 { font-size: .9em; color: #656d76; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2 { border-color: #30363d; }
html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #8b949e; }

p { margin: 0 0 14px; }

a { color: #0969da; text-decoration: none; }
a:hover { text-decoration: underline; }
html[data-theme="dark"] a { color: #58a6ff; }

strong { font-weight: 650; }

/* Lists */
ul, ol { margin: 0 0 14px; padding-left: 28px; }
li { margin: 3px 0; }
li > input[type="checkbox"] { margin-right: 6px; }

/* Blockquote */
blockquote {
  margin: 0 0 14px;
  padding: 0 14px;
  color: #656d76;
  border-left: .25em solid #d0d7de;
}
html[data-theme="dark"] blockquote { color: #8b949e; border-left-color: #30363d; }

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: .2em .4em;
  background: rgba(175, 184, 193, .2);
  border-radius: 6px;
}
html[data-theme="dark"] code { background: rgba(110, 118, 129, .4); }

/* Fenced code blocks (highlight.js output) */
pre {
  font-family: var(--font-mono);
  font-size: .84em;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #f6f8fa;
  border-radius: 8px;
  overflow-x: auto;
}
pre code { padding: 0; background: transparent; font-size: 1em; }
html[data-theme="dark"] pre { background: #161b22; }

hr { border: 0; border-top: 1px solid #d0d7de; margin: 28px 0; }
html[data-theme="dark"] hr { border-top-color: #30363d; }

/* Tables */
table {
  border-collapse: collapse;
  margin: 0 0 14px;
  display: block;
  overflow-x: auto;
}
th, td { padding: 8px 14px; border: 1px solid #d0d7de; text-align: left; }
th { font-weight: 650; background: #f6f8fa; }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: #30363d; }
html[data-theme="dark"] th { background: #161b22; }

/* Images */
img { max-width: 100%; height: auto; border-radius: 8px; }

/* highlight.js token palette — light */
.hljs { color: #1f2328; }
.hljs-comment, .hljs-quote { color: #6e7781; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #cf222e; }
.hljs-string, .hljs-attr, .hljs-meta-string { color: #0a3069; }
.hljs-number, .hljs-literal { color: #0550ae; }
.hljs-title, .hljs-function .hljs-title, .hljs-section { color: #8250df; }
.hljs-type, .hljs-class .hljs-title { color: #953800; }
.hljs-variable, .hljs-template-variable { color: #1f2328; }

/* highlight.js token palette — dark */
html[data-theme="dark"] .hljs { color: #e6edf3; }
html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-quote { color: #8b949e; }
html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-selector-tag, html[data-theme="dark"] .hljs-built_in { color: #ff7b72; }
html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-attr { color: #a5d6ff; }
html[data-theme="dark"] .hljs-number, html[data-theme="dark"] .hljs-literal { color: #79c0ff; }
html[data-theme="dark"] .hljs-title, html[data-theme="dark"] .hljs-function .hljs-title, html[data-theme="dark"] .hljs-section { color: #d2a8ff; }
html[data-theme="dark"] .hljs-type { color: #ffa657; }

/* Mermaid diagrams — center, cap width, keep them readable in both appearances. */
.mermaid { text-align: center; margin: 1.25em 0; overflow-x: auto; }
.mermaid svg { max-width: 100%; height: auto; }
/* Error fallback (invalid diagram source) — small, muted. */
.mermaid.error, .mermaid[data-mermaid-error] { color: #d30; font-family: ui-monospace, monospace; font-size: 12px; white-space: pre-wrap; text-align: left; }
