/* ═══════════════════════════════════════
   prism-snow.css — snowpost code theme
   obsidian-style header + line numbers
   ═══════════════════════════════════════ */

/* ── Wrapper ── */
.code-block {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 6px;
  overflow: hidden;
  border: 0.5px solid var(--border, #cec7bb);
  background: var(--code-bg, #e4dfd6);
}

/* ── Header bar ── */
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: var(--code-header-bg);
  border-bottom: 0.5px solid var(--border, #cec7bb);
  user-select: none;
}

:root, [data-theme="light"] {
  --code-header-bg: #d8d3c9;
  --code-bg: #e4dfd6;
  --code-line-nr: rgba(0,0,0,0.2);
  --code-line-border: rgba(0,0,0,0.08);
  --code-lang-active-bg: var(--code-bg);
}

[data-theme="dark"] {
  --code-header-bg: #1e1e22;
  --code-bg: #222226;
  --code-line-nr: rgba(255,255,255,0.18);
  --code-line-border: rgba(255,255,255,0.06);
  --code-lang-active-bg: var(--code-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-header-bg: #1e1e22;
    --code-bg: #222226;
    --code-line-nr: rgba(255,255,255,0.18);
    --code-line-border: rgba(255,255,255,0.06);
    --code-lang-active-bg: var(--code-bg);
  }
}

/* ── Language tab ── */
.code-lang-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--fg2, #6b6158);
  background: var(--code-lang-active-bg);
  border-right: 0.5px solid var(--border, #cec7bb);
  border-bottom: none;
  letter-spacing: 0.02em;
  line-height: 1;
}

.code-lang-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Copy button (right side of header) ── */
.code-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.code-copy-btn {
  background: none;
  border: none;
  color: var(--fg3, #9e9488);
  cursor: pointer;
  padding: 6px 0px;
  font-size: 0;
  line-height: 1;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.code-copy-btn:hover { color: var(--fg, #2a2520); }
.code-copy-btn.copied { color: var(--teal, #1D9E75); }

.code-copy-btn svg { width: 14px; height: 14px; }

/* ── Code area ── */
.code-block pre[class*="language-"] {
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background: var(--code-bg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  hyphens: none;
  tab-size: 2;
  color: var(--fg, #2a2520);
}

/* ── Line numbers ── */
.code-lines { display: flex; }

.code-line-numbers {
  flex-shrink: 0;
  padding: 0.8rem 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
  border-right: 0.5px solid var(--code-line-border);
  min-width: 40px;
}

.code-line-numbers span {
  display: block;
  padding: 0 10px 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--code-line-nr);
}

.code-lines code {
  display: block;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

/* ── Inline code ── */
:not(pre) > code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  background: var(--code-bg, #e4dfd6);
}

/* ═══════════ LIGHT tokens ═══════════ */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #998a78; font-style: italic; }
.token.punctuation { color: #8a7e6e; }
.token.namespace { opacity: 0.7; }
.token.property, .token.tag, .token.boolean, .token.number,
.token.constant, .token.symbol, .token.deleted { color: #8b4049; }
.token.selector, .token.attr-name, .token.string, .token.char,
.token.builtin, .token.inserted { color: #4a7a52; }
.token.operator, .token.entity, .token.url,
.language-css .token.string, .style .token.string { color: #a06230; }
.token.atrule, .token.attr-value, .token.keyword { color: #6b5ea6; }
.token.function, .token.class-name { color: #2e6e8e; }
.token.regex, .token.important, .token.variable { color: #c07030; }
.token.important, .token.bold { font-weight: 600; }
.token.italic { font-style: italic; }

/* ═══════════ DARK tokens ═══════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .token.comment,
  :root:not([data-theme="light"]) .token.prolog,
  :root:not([data-theme="light"]) .token.doctype,
  :root:not([data-theme="light"]) .token.cdata { color: #6e6a60; }
  :root:not([data-theme="light"]) .token.punctuation { color: #8a8478; }
  :root:not([data-theme="light"]) .token.property, :root:not([data-theme="light"]) .token.tag,
  :root:not([data-theme="light"]) .token.boolean, :root:not([data-theme="light"]) .token.number,
  :root:not([data-theme="light"]) .token.constant, :root:not([data-theme="light"]) .token.symbol,
  :root:not([data-theme="light"]) .token.deleted { color: #d4737d; }
  :root:not([data-theme="light"]) .token.selector, :root:not([data-theme="light"]) .token.attr-name,
  :root:not([data-theme="light"]) .token.string, :root:not([data-theme="light"]) .token.char,
  :root:not([data-theme="light"]) .token.builtin, :root:not([data-theme="light"]) .token.inserted { color: #8aad8a; }
  :root:not([data-theme="light"]) .token.operator, :root:not([data-theme="light"]) .token.entity,
  :root:not([data-theme="light"]) .token.url { color: #d4a56a; }
  :root:not([data-theme="light"]) .token.atrule, :root:not([data-theme="light"]) .token.attr-value,
  :root:not([data-theme="light"]) .token.keyword { color: #AFA9EC; }
  :root:not([data-theme="light"]) .token.function,
  :root:not([data-theme="light"]) .token.class-name { color: #6bb8d4; }
  :root:not([data-theme="light"]) .token.regex, :root:not([data-theme="light"]) .token.important,
  :root:not([data-theme="light"]) .token.variable { color: #e0a060; }
}

[data-theme="dark"] .token.comment, [data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype, [data-theme="dark"] .token.cdata { color: #6e6a60; }
[data-theme="dark"] .token.punctuation { color: #8a8478; }
[data-theme="dark"] .token.property, [data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean, [data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant, [data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted { color: #d4737d; }
[data-theme="dark"] .token.selector, [data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string, [data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin, [data-theme="dark"] .token.inserted { color: #8aad8a; }
[data-theme="dark"] .token.operator, [data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url { color: #d4a56a; }
[data-theme="dark"] .token.atrule, [data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword { color: #AFA9EC; }
[data-theme="dark"] .token.function, [data-theme="dark"] .token.class-name { color: #6bb8d4; }
[data-theme="dark"] .token.regex, [data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable { color: #e0a060; }

[data-theme="light"] .token.comment, [data-theme="light"] .token.prolog,
[data-theme="light"] .token.doctype, [data-theme="light"] .token.cdata { color: #998a78; }
[data-theme="light"] .token.punctuation { color: #8a7e6e; }
[data-theme="light"] .token.property, [data-theme="light"] .token.tag,
[data-theme="light"] .token.boolean, [data-theme="light"] .token.number,
[data-theme="light"] .token.constant, [data-theme="light"] .token.symbol,
[data-theme="light"] .token.deleted { color: #8b4049; }
[data-theme="light"] .token.selector, [data-theme="light"] .token.attr-name,
[data-theme="light"] .token.string, [data-theme="light"] .token.char,
[data-theme="light"] .token.builtin, [data-theme="light"] .token.inserted { color: #4a7a52; }
[data-theme="light"] .token.operator, [data-theme="light"] .token.entity,
[data-theme="light"] .token.url { color: #a06230; }
[data-theme="light"] .token.atrule, [data-theme="light"] .token.attr-value,
[data-theme="light"] .token.keyword { color: #6b5ea6; }
[data-theme="light"] .token.function, [data-theme="light"] .token.class-name { color: #2e6e8e; }
[data-theme="light"] .token.regex, [data-theme="light"] .token.important,
[data-theme="light"] .token.variable { color: #c07030; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .code-block {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  code[class*="language-"],
  pre[class*="language-"] { font-size: 0.74rem; }

  .code-line-numbers span { font-size: 0.65rem; }
  .code-line-numbers { min-width: 30px; }
  .code-lines code { padding: 0.6rem 0.8rem; }
  .code-lang-tab { font-size: 0.65rem; padding: 5px 10px 5px 8px; }
  .code-lang-icon { width: 12px; height: 12px; }
}