/* ============================================================
   CODE BLOCK — Night Owl, light/dark aware
   ============================================================ */

.code-block {
  --cb-bg: #f7f7f7;
  --cb-bg-header: #f0f0f0;
  --cb-border: rgba(0, 0, 0, 0.08);
  --cb-text: #403f53;
  --cb-muted: #898ea4;
  --cb-accent: #4876d6;

  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--cb-border);
  font-family: var(--font-mono);
  position: relative;
}

:root.dark .code-block {
  --cb-bg: #111111;
  --cb-bg-header: #0a0a0a;
  --cb-border: rgba(255, 255, 255, 0.08);
  --cb-text: #d6deeb;
  --cb-muted: #637777;
  --cb-accent: #82aaff;
}

.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background-color: var(--cb-bg-header);
  border-bottom: 1px solid var(--cb-border);
}

.code-block__filename {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cb-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.code-block__body {
  position: relative;
  background-color: var(--cb-bg);
}

.code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cb-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
  line-height: 1;
}

.code-block__copy:hover {
  color: var(--cb-text);
  border-color: var(--cb-border);
}
.code-block__copy--copied {
  color: var(--cb-accent);
}

.code-block__copy--floating {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  background-color: var(--cb-bg-header);
  border-color: var(--cb-border);
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.code-block:hover .code-block__copy--floating {
  opacity: 1;
}

.code-block pre[class*="language-"] {
  margin: 0;
  border-radius: 0;
  border: none;
  background: var(--cb-bg) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--cb-font-size, 16px) !important;
  line-height: 1.7;
  padding: var(--space-5);
  padding-bottom: calc(var(--space-5) + 4px);
  overflow-x: auto;
  color: var(--cb-text);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--duration-fast) var(--ease);
}

/* Line-numbers plugin: restore left padding and positioning */
.code-block pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
  position: relative;
}

@media screen and (min-width: 768px) {
  .code-block pre[class*="language-"] {
    font-size: var(--cb-font-size, 18px) !important;
  }
  .code-block code[class*="language-"] {
    font-size: var(--cb-font-size, 18px) !important;
  }
}

.code-block:hover pre[class*="language-"] {
  scrollbar-color: var(--cb-muted) transparent;
}

.code-block pre[class*="language-"]::-webkit-scrollbar {
  height: 4px;
}

.code-block pre[class*="language-"]::-webkit-scrollbar-track {
  background: transparent;
}

.code-block pre[class*="language-"]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  transition: background-color var(--duration-fast) var(--ease);
}

.code-block:hover pre[class*="language-"]::-webkit-scrollbar-thumb {
  background-color: var(--cb-muted);
}

.code-block code[class*="language-"] {
  font-family: var(--font-mono) !important;
  font-size: var(--cb-font-size, 16px) !important;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

.code-block .line-numbers-rows {
  border-right: 1px solid var(--cb-border) !important;
}
.code-block .line-numbers-rows > span::before {
  color: var(--cb-muted) !important;
}

/* Night Owl tokens — light mode */
.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.cdata {
  color: #989fb1;
  font-style: normal;
}
.code-block .token.punctuation {
  color: #403f53;
}
.code-block .token.property,
.code-block .token.tag {
  color: #0a8274;
}
.code-block .token.boolean,
.code-block .token.number,
.code-block .token.constant {
  color: #d6438a;
}
.code-block .token.selector,
.code-block .token.string,
.code-block .token.char,
.code-block .token.builtin {
  color: #986f0b;
}
.code-block .token.operator {
  color: #403f53;
}
.code-block .token.variable {
  color: #0c969b;
}
.code-block .token.atrule,
.code-block .token.attr-value {
  color: #986f0b;
}
.code-block .token.keyword {
  color: #994cc3;
}
.code-block .token.function {
  color: #4876d6;
}
.code-block .token.class-name {
  color: #111111;
  font-weight: 600;
}
.code-block .token.regex,
.code-block .token.important {
  color: #d6438a;
}
.code-block .token.attr-name {
  color: #0c969b;
}
.code-block .token.inserted {
  color: #0c969b;
}
.code-block .token.deleted {
  color: #d6438a;
}
.code-block .token.decorator,
.code-block .token.annotation,
.code-block .token.decorator.annotation {
  color: #0c969b;
}

/* Night Owl tokens — dark mode */
:root.dark .code-block .token.comment,
:root.dark .code-block .token.prolog,
:root.dark .code-block .token.cdata {
  color: #637777;
  font-style: normal;
}
:root.dark .code-block .token.punctuation {
  color: #ffffff;
}
:root.dark .code-block .token.property,
:root.dark .code-block .token.tag {
  color: #7fdbca;
}
:root.dark .code-block .token.boolean,
:root.dark .code-block .token.number,
:root.dark .code-block .token.constant {
  color: #f78c6c;
}
:root.dark .code-block .token.selector,
:root.dark .code-block .token.string,
:root.dark .code-block .token.char,
:root.dark .code-block .token.builtin {
  color: #ecc48d;
}
:root.dark .code-block .token.operator {
  color: #ffffff;
}
:root.dark .code-block .token.variable {
  color: #addb67;
}
:root.dark .code-block .token.atrule,
:root.dark .code-block .token.attr-value {
  color: #ecc48d;
}
:root.dark .code-block .token.keyword {
  color: #c792ea;
}
:root.dark .code-block .token.function {
  color: #82aaff;
}
:root.dark .code-block .token.class-name {
  color: #ffcb8b;
  font-weight: normal;
}
:root.dark .code-block .token.regex,
:root.dark .code-block .token.important {
  color: #f78c6c;
}
:root.dark .code-block .token.attr-name {
  color: #addb67;
}
:root.dark .code-block .token.inserted {
  color: #addb67;
}
:root.dark .code-block .token.deleted {
  color: #ff5874;
}
:root.dark .code-block .token.decorator,
:root.dark .code-block .token.annotation,
:root.dark .code-block .token.decorator.annotation {
  color: #addb67;
}