/* ============ Code blocks: highlight.js theme + copy button ============ */
/* The panel is always dark (--code-* tokens), in light and dark mode alike. */
.code-block {
  --code-pad-y: 16px;
  --code-preview-height: 300px;
  --code-row-bg: rgba(255, 255, 255, 0.045);
  --code-chrome: rgba(255, 255, 255, 0.04);
  --code-line: rgba(255, 255, 255, 0.08);
  --code-border: rgba(255, 255, 255, 0.09);
  --code-control-bg: rgba(255, 255, 255, 0.07);
  --code-control-border: rgba(255, 255, 255, 0.14);
  position: relative;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--code-border);
  border-radius: 14px;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--code-chrome);
  border-bottom: 1px solid var(--code-line);
}
.code-block-lang {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--code-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.code-block-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--code-control-border);
  background: var(--code-control-bg);
  color: var(--code-ink);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.code-block-copy svg { width: 13px; height: 13px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .code-block-copy:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}
.code-block-copy.copied { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.code-block-body {
  position: relative;
}
.code-block-body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 76px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--code-bg) 88%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.js .code-block.is-collapsible .code-block-body {
  max-height: var(--code-preview-height);
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .code-block.is-collapsible.is-collapsed .code-block-body::after {
  opacity: 1;
}
.js .code-block.is-collapsible.is-expanded .code-block-body {
  max-height: var(--code-expanded-height, 2400px);
}
.code-block pre {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  tab-size: 4;
  scrollbar-width: thin;
}
/* Line-number gutter: sticky so it stays visible while the code scrolls
   horizontally; opaque so the code slides underneath it. */
.code-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  padding: 16px 14px 16px 18px;
  background-color: var(--code-bg);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--code-row-bg) 0,
    var(--code-row-bg) 1.65em,
    transparent 1.65em,
    transparent 3.3em
  );
  background-position: 0 var(--code-pad-y);
  background-size: 100% 3.3em;
  border-right: 1px solid var(--code-line);
  color: var(--code-muted);
  text-align: right;
  white-space: pre;
  user-select: none;
  -webkit-user-select: none;
}
.code-block pre code {
  display: block;
  min-width: max-content;
  padding: 16px 18px;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--code-row-bg) 0,
    var(--code-row-bg) 1.65em,
    transparent 1.65em,
    transparent 3.3em
  );
  background-position: 0 var(--code-pad-y);
  background-size: 100% 3.3em;
  color: inherit;
  font: inherit;
  white-space: pre;
}
.code-block-foot {
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  border-top: 1px solid var(--code-line);
  background: var(--code-chrome);
}
.code-block-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--code-control-border);
  background: var(--code-control-bg);
  color: var(--code-ink);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.js .code-block-toggle { display: inline-flex; }
.code-block-toggle svg {
  flex: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.code-block.is-expanded .code-block-toggle svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .code-block-toggle:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}

/* highlight.js token palette (warm dark, matched to the --code-* tokens) */
.code-block .hljs-comment,
.code-block .hljs-quote { color: #8f8779; font-style: italic; }
.code-block .hljs-keyword,
.code-block .hljs-selector-tag,
.code-block .hljs-literal,
.code-block .hljs-doctag,
.code-block .hljs-name { color: #e6a15c; }
.code-block .hljs-string,
.code-block .hljs-regexp,
.code-block .hljs-addition,
.code-block .hljs-attribute,
.code-block .hljs-meta .hljs-string { color: #a3c48b; }
.code-block .hljs-number,
.code-block .hljs-symbol,
.code-block .hljs-bullet,
.code-block .hljs-variable,
.code-block .hljs-template-variable { color: #c9a0dc; }
.code-block .hljs-function,
.code-block .hljs-title,
.code-block .hljs-section { color: #7cc0d8; }
.code-block .hljs-type,
.code-block .hljs-class .hljs-title,
.code-block .hljs-built_in,
.code-block .hljs-params { color: #7fd1c1; }
.code-block .hljs-attr,
.code-block .hljs-selector-attr,
.code-block .hljs-selector-class,
.code-block .hljs-selector-id,
.code-block .hljs-property { color: #e0b07a; }
.code-block .hljs-meta,
.code-block .hljs-tag { color: #b8b2a4; }
.code-block .hljs-punctuation,
.code-block .hljs-operator { color: rgba(245, 244, 241, 0.65); }
.code-block .hljs-subst,
.code-block .hljs-deletion { color: #e07a6a; }
.code-block .hljs-emphasis { font-style: italic; }
.code-block .hljs-strong { font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .code-block { --code-row-bg: rgba(255, 255, 255, 0.095); }
}

@media (max-width: 640px) {
  .code-block { --code-pad-y: 13px; --code-preview-height: 240px; border-radius: 12px; }
  .code-block-head { padding: 6px 8px 6px 12px; }
  .code-block-lang { max-width: 45%; font-size: 0.62rem; }
  .code-block-copy { padding: 8px 12px; }
  .code-block pre { font-size: 0.8rem; line-height: 1.6; }
  .code-gutter { padding: 13px 10px 13px 14px; background-size: 100% 3.2em; }
  .code-block pre code { padding: 13px 14px; background-size: 100% 3.2em; }
  .code-block-toggle { padding: 8px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .code-block.is-collapsible .code-block-body,
  .code-block-toggle svg,
  .code-block-body::after { transition: none; }
}