/* ============================================================
   markdown.css — Markdown, KaTeX & code-highlight styles
   Part of the paper-site component library.
   ============================================================ */

/* ---------------- Markdown block container ---------------- */
.markdown-block {
  margin: 24px 0;
  line-height: 1.7;
}
.markdown-block.tight { margin-top: 0; }

/* ----- Typography ----- */
.markdown-block h1,
.markdown-block h2,
.markdown-block h3,
.markdown-block h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 1.2em 0 0.5em;
}
.markdown-block h1:first-child,
.markdown-block h2:first-child,
.markdown-block h3:first-child,
.markdown-block h4:first-child { margin-top: 0; }

.markdown-block h1 { font-size: 36px; }
.markdown-block h2 { font-size: 28px; }
.markdown-block h3 { font-size: 22px; }
.markdown-block h4 { font-size: 18px; }

.markdown-block p {
  margin: 0 0 14px;
}

.markdown-block strong { font-weight: 600; }
.markdown-block em     { font-style: italic; }

.markdown-block del,
.markdown-block s {
  text-decoration: line-through;
  opacity: 0.65;
}

.markdown-block a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown-block a:hover { color: #1d4ed8; }

/* ----- Inline code ----- */
.markdown-block code:not([class*="language-"]) {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--accent-1);
}

/* ----- Lists ----- */
.markdown-block ul,
.markdown-block ol {
  margin: 0 0 14px;
  padding-left: 24px;
}
.markdown-block li {
  margin-bottom: 4px;
}
.markdown-block li > ul,
.markdown-block li > ol {
  margin-top: 4px;
  margin-bottom: 0;
}

/* ----- Blockquote ----- */
.markdown-block blockquote {
  margin: 16px 0;
  padding: 10px 18px;
  border-left: 4px solid var(--accent-2);
  background: var(--bg-soft);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
}
.markdown-block blockquote p:last-child {
  margin-bottom: 0;
}

/* ----- Horizontal rule ----- */
.markdown-block hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}

/* ----- Tables ----- */
.markdown-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.markdown-block thead th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--fg);
  background: var(--bg-soft);
}
.markdown-block tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}
.markdown-block tbody tr:hover {
  background: rgba(0,0,0,0.015);
}

/* ----- Images ----- */
.markdown-block img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule);
}

/* ============================================================
   CODE HIGHLIGHT — LIGHT THEME  (default, used in .markdown-block)
   Inspired by highlight.js "github" theme.
   ============================================================ */
.markdown-block pre,
.markdown-block pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 16px 20px;
  margin: 16px 0;
  background: var(--md-code-bg);
  border: 1px solid var(--md-code-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--md-code-fg);
}

/* Light theme token colors */
.markdown-block .hljs-keyword    { color: #cf222e; }
.markdown-block .hljs-string,
.markdown-block .hljs-attr,
.markdown-block .hljs-template-tag { color: #0a3069; }
.markdown-block .hljs-title,
.markdown-block .hljs-type,
.markdown-block .hljs-class     { color: #6639ba; }
.markdown-block .hljs-built_in,
.markdown-block .hljs-literal   { color: #0550ae; }
.markdown-block .hljs-number    { color: #0550ae; }
.markdown-block .hljs-comment,
.markdown-block .hljs-quote     { color: #656d76; font-style: italic; }
.markdown-block .hljs-meta      { color: #656d76; }
.markdown-block .hljs-params,
.markdown-block .hljs-variable  { color: #953800; }
.markdown-block .hljs-attr,
.markdown-block .hljs-selector-class,
.markdown-block .hljs-selector-id { color: #6639ba; }
.markdown-block .hljs-function  { color: #6639ba; }
.markdown-block .hljs-name      { color: #1f2328; }
.markdown-block .hljs-tag       { color: #116329; }
.markdown-block .hljs-operator  { color: #0550ae; }
.markdown-block .hljs-punctuation { color: #1f2328; }
.markdown-block .hljs-property  { color: #0550ae; }
.markdown-block .hljs-regexp    { color: #0a3069; }
.markdown-block .hljs-symbol    { color: #953800; }
.markdown-block .hljs-deletion  { color: #82071e; background: #ffebe9; }
.markdown-block .hljs-addition  { color: #116329; background: #dafbe1; }

/* ----- Inline code inside markdown (skip if already in a code block) ----- */
.markdown-block p code.hljs {
  display: inline;
  padding: 1px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
}

/* ============================================================
   CODE HIGHLIGHT — DARK THEME (scoped to .hljs-dark container)
   Inspired by highlight.js "atom-one-dark" theme.
   Used in .code-block (citation) and any element with .hljs-dark.
   ============================================================ */
.hljs-dark pre,
.hljs-dark pre code.hljs,
.code-block pre,
.code-block pre code.hljs {
  background: var(--code-dark-bg);
  color: var(--code-dark-fg);
  border-color: var(--rule);
}

/* Dark theme token colors */
.hljs-dark .hljs-keyword,
.code-block .hljs-keyword          { color: #c792ea; }
.hljs-dark .hljs-string,
.code-block .hljs-string           { color: #c3e88d; }
.hljs-dark .hljs-number,
.code-block .hljs-number           { color: #f78c6c; }
.hljs-dark .hljs-comment,
.hljs-dark .hljs-quote,
.code-block .hljs-comment,
.code-block .hljs-quote            { color: #546e7a; font-style: italic; }
.hljs-dark .hljs-title,
.hljs-dark .hljs-class,
.hljs-dark .hljs-type,
.code-block .hljs-title,
.code-block .hljs-class,
.code-block .hljs-type             { color: #ffcb6b; }
.hljs-dark .hljs-function,
.code-block .hljs-function         { color: #82aaff; }
.hljs-dark .hljs-built_in,
.hljs-dark .hljs-literal,
.code-block .hljs-built_in,
.code-block .hljs-literal          { color: #f78c6c; }
.hljs-dark .hljs-params,
.hljs-dark .hljs-variable,
.code-block .hljs-params,
.code-block .hljs-variable         { color: #f07178; }
.hljs-dark .hljs-meta,
.code-block .hljs-meta             { color: #89ddff; }
.hljs-dark .hljs-tag,
.code-block .hljs-tag              { color: #f07178; }
.hljs-dark .hljs-name,
.code-block .hljs-name             { color: #f07178; }
.hljs-dark .hljs-attr,
.code-block .hljs-attr             { color: #ffcb6b; }
.hljs-dark .hljs-selector-class,
.hljs-dark .hljs-selector-id,
.code-block .hljs-selector-class,
.code-block .hljs-selector-id      { color: #ffcb6b; }
.hljs-dark .hljs-operator,
.code-block .hljs-operator         { color: #89ddff; }
.hljs-dark .hljs-punctuation,
.code-block .hljs-punctuation      { color: #89ddff; }
.hljs-dark .hljs-property,
.code-block .hljs-property         { color: #82aaff; }
.hljs-dark .hljs-regexp,
.code-block .hljs-regexp           { color: #c3e88d; }
.hljs-dark .hljs-symbol,
.code-block .hljs-symbol           { color: #c3e88d; }
.hljs-dark .hljs-template-tag,
.code-block .hljs-template-tag     { color: #c792ea; }

/* ============================================================
   KaTeX math tweaks
   ============================================================ */
.markdown-block .katex-display {
  margin: 16px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.markdown-block .katex {
  font-size: 1.05em;
}