/* === Chroma Custom — Catppuccin Macchiato === */

:root {
  /* Catppuccin Macchiato palette */
  --ctp-base:     #24273a;
  --ctp-surface0: #363a4f;
  --ctp-surface1: #494d64;
  --ctp-overlay0: #6e738d;
  --ctp-text:     #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-lavender: #b7bdf8;
  --ctp-blue:     #8aadf4;
  --ctp-sapphire: #7dc4e4;
  --ctp-sky:      #91d7e3;
  --ctp-teal:     #8bd5ca;
  --ctp-green:    #a6da95;
  --ctp-yellow:   #eed49f;
  --ctp-peach:    #f5a97f;
  --ctp-maroon:   #ee99a0;
  --ctp-red:      #ed8796;
  --ctp-mauve:    #c6a0f6;
  --ctp-pink:     #f5bde6;
}

/* === Code block wrapper and header bar === */

.code-block-wrapper {
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  background-color: var(--ctp-surface0);
  border-bottom: 1px solid var(--ctp-surface1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}

.code-lang-label {
  color: var(--ctp-subtext1);
  letter-spacing: 0.05em;
}

.code-copy-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.code-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--ctp-overlay0);
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.code-copy-btn:hover {
  color: var(--ctp-text);
  background: rgba(202, 211, 245, 0.08);
}

.code-copy-btn:focus-visible {
  outline: 2px solid var(--ctp-lavender);
  outline-offset: 2px;
}

.code-copy-btn [data-feather],
.code-copy-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2px;
}

.code-copy-btn .hidden {
  display: none;
}

.code-copy-btn.is-copied {
  color: var(--ctp-green);
}

/* === Code body === */

.code-body {
  overflow-x: auto;
}

.code-body .highlight,
.code-body .highlight .chroma {
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: var(--ctp-base);
}

/* === Reset conflicts with main.css base styles === */

.code-block-wrapper pre,
.prose .code-block-wrapper pre,
.prose-invert .code-block-wrapper pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: visible;
}

/* Re-apply padding after the reset above, with higher specificity */
.code-block-wrapper .highlight .lntd:first-child pre {
  padding: 0.875rem 0;
}

.code-block-wrapper .highlight .lntd:last-child pre {
  padding: 0.875rem 1rem;
}

/* === Chroma table layout (lineNumbersInTable = true) === */

.highlight table {
  border-collapse: collapse;
  width: 100%;
}

.highlight td {
  padding: 0;
  vertical-align: top;
}

/* Line number column — not selectable */
/* color: --ctp-overlay0 (#6e738d) on --ctp-surface0 (#363a4f) = ~3.5:1 */
.highlight .lnt,
.highlight .ln {
  padding: 0.875rem 0.75rem 0.875rem 1rem;
  color: var(--ctp-overlay0);
  user-select: none;
  -webkit-user-select: none;
  min-width: 2.5rem;
  text-align: right;
  border-right: 1px solid var(--ctp-surface1);
  font-size: 0.8125rem;
}

.highlight .lntd:first-child {
  background-color: var(--ctp-surface0);
}

.highlight .lntd:first-child pre {
  padding: 0.875rem 0;
}

.highlight .lntd:last-child pre {
  padding: 0.875rem 1rem;
}

.highlight .chroma {
  overflow-x: auto;
}

.code-block-wrapper pre,
.code-block-wrapper code {
  font-size: 0.875em;
}

/* === Syntax token colors (dark theme default) === */

.highlight {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
}

/* Keywords — mauve */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--ctp-mauve);
  font-weight: 500;
}

/* Strings — green */
.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss {
  color: var(--ctp-green);
}

/* Numbers — peach */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo {
  color: var(--ctp-peach);
}

/* Comments — overlay0, italic */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs,
.highlight .cp,
.highlight .cpf {
  color: var(--ctp-overlay0);
  font-style: italic;
}

/* Operators — sky */
.highlight .o,
.highlight .ow {
  color: var(--ctp-sky);
}

/* Names / Identifiers */
.highlight .n {
  color: var(--ctp-text);
}

.highlight .na {
  color: var(--ctp-yellow);
}

.highlight .nb {
  color: var(--ctp-blue);
}

.highlight .nc {
  color: var(--ctp-yellow);
}

.highlight .nd {
  color: var(--ctp-pink);
}

.highlight .ne {
  color: var(--ctp-maroon);
}

.highlight .nf,
.highlight .fm {
  color: var(--ctp-blue);
}

.highlight .ni {
  color: var(--ctp-text);
}

.highlight .nl {
  color: var(--ctp-teal);
}

.highlight .nn {
  color: var(--ctp-yellow);
}

.highlight .nt {
  color: var(--ctp-mauve);
}

.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: var(--ctp-text);
}

/* Punctuation */
.highlight .p {
  color: var(--ctp-subtext1);
}

/* Generic tokens (diff output etc.) */
.highlight .gd {
  color: var(--ctp-red);
  background: rgba(237, 135, 150, 0.1);
}

.highlight .gi {
  color: var(--ctp-green);
  background: rgba(166, 218, 149, 0.1);
}

.highlight .gh {
  color: var(--ctp-lavender);
  font-weight: bold;
}

.highlight .gu {
  color: var(--ctp-overlay0);
}

.highlight .ge {
  font-style: italic;
}

.highlight .gs {
  font-weight: bold;
}

/* Error */
.highlight .err {
  color: var(--ctp-red);
}

/* === Light theme overrides (Catppuccin Latte) === */

html.theme-light .code-block-wrapper {
  border-color: #ccd0da;
}

html.theme-light .code-header {
  background-color: #dce0ea;
  border-bottom-color: #bcc0cc;
}

html.theme-light .code-lang-label {
  color: #5c5f77;
}

html.theme-light .code-copy-btn {
  color: #6c6f85;
}

html.theme-light .code-copy-btn:hover {
  color: #4c4f69;
  background: rgba(76, 79, 105, 0.08);
}

html.theme-light .code-body .highlight,
html.theme-light .code-body .highlight .chroma {
  background-color: #eff1f5;
  color: #4c4f69;
}

html.theme-light .highlight .lntd:first-child {
  background-color: #e6e9ef;
}

html.theme-light .highlight .lnt,
html.theme-light .highlight .ln {
  color: #bcc0cc;
  border-right-color: #bcc0cc;
}

/* Comments must be darker to read on light bg */
html.theme-light .highlight .c,
html.theme-light .highlight .c1,
html.theme-light .highlight .cm,
html.theme-light .highlight .cs,
html.theme-light .highlight .cp,
html.theme-light .highlight .cpf {
  color: #7c7f93;
}

/* Text defaults */
html.theme-light .highlight .n {
  color: #4c4f69;
}

html.theme-light .highlight .p {
  color: #6c6f85;
}