/* Syntax highlighting for Chroma (markup.highlight noClasses = false).
   Palette keeps Monokai's hue identity but is re-solved per theme so every
   token clears 4.5:1 against its own code-box background. */

:root {
  --code-bg: #c9ae74;
  --code-fg: #1b1725;
  --code-border: #ab9058;
  --code-hl: rgba(171, 144, 88, 0.55);
  --code-lineno: rgba(27, 23, 37, 0.45);
  --code-caption-fg: #1b1725; /* caption sits on the tan border in both modes */
  --code-btn-bg: rgba(255, 255, 255, 0.35);
  --code-btn-bg-hover: rgba(255, 255, 255, 0.7);

  --code-kw: #821442;  /* keyword / operator   pink-magenta */
  --code-ty: #094958;  /* type / builtin       teal-cyan    */
  --code-str: #573f00; /* string               olive-brown  */
  --code-com: #484238; /* comment              warm gray    */
  --code-fn: #254c0b;  /* function name        green        */
  --code-num: #592595; /* number / constant    violet       */
  --code-pp: #762b06;  /* preprocessor         rust-orange  */

  --code-del: rgba(130, 20, 66, 0.12);
  --code-ins: rgba(37, 76, 11, 0.12);
}

/* Dark mode mirrors the theme switch in index.css. The box is a warm dark
   brown rather than the page's #212228, and #c9ae74 carries over as the
   border and caption accent so the light and dark boxes read as one design. */
@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: #353029;
    --code-fg: #f0e9dd;
    --code-border: #c9ae74;
    --code-hl: rgba(201, 174, 116, 0.18);
    --code-lineno: #9a9081;
    --code-btn-bg: rgba(0, 0, 0, 0.3);
    --code-btn-bg-hover: rgba(0, 0, 0, 0.55);

    --code-kw: #fe60a2;
    --code-ty: #4aa6ba;
    --code-str: #b1974f;
    --code-com: #a39983;
    --code-fn: #6aaa40;
    --code-num: #b483ed;
    --code-pp: #dd8254;

    --code-del: rgba(254, 96, 162, 0.14);
    --code-ins: rgba(106, 170, 64, 0.14);
  }
}

/* ---- code box ------------------------------------------------------- */

.codeblock {
  position: relative;
  margin: 1.5em 0;
}

.codeblock figcaption {
  font-size: 0.75em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--code-caption-fg);
  background: var(--code-border);
  border-radius: 10px 10px 0 0;
  padding: 0.35em 1.2em;
}

.codeblock figcaption + .highlight pre {
  border-radius: 0 0 10px 10px;
}

.codeblock .highlight pre,
.codeblock pre.chroma {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: 10px;
  font-size: 0.8em;
  margin: 0;
  padding: 0.8em 1.2em;
  padding-right: 4.5em; /* room for the copy button */
  overflow-x: auto;
}

.codeblock .highlight pre code { display: inline-block; min-width: 0; }

/* ---- copy button ---------------------------------------------------- */

.codeblock .copy-code {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font: inherit;
  font-size: 0.7em;
  line-height: 1;
  color: var(--code-com);
  background: var(--code-btn-bg);
  border: 1px solid var(--code-border);
  border-radius: 5px;
  padding: 0.4em 0.7em;
  cursor: pointer;
  opacity: 0;
  transition: 0.15s opacity, 0.15s background, 0.15s color;
}

.codeblock:hover .copy-code,
.codeblock .copy-code:focus-visible {
  opacity: 1;
}

.codeblock .copy-code:hover {
  background: var(--code-btn-bg-hover);
  color: var(--code-fg);
}

.codeblock .copy-code[data-copied="true"] {
  opacity: 1;
  color: var(--code-fn);
  background: var(--code-btn-bg-hover);
}

/* keyboard users and touch devices have no hover — keep it visible */
@media (hover: none) {
  .codeblock .copy-code { opacity: 1; }
}

/* ---- chroma tokens -------------------------------------------------- */

.chroma { color: var(--code-fg); background-color: var(--code-bg); }
.chroma .x { }
.chroma .err { color: var(--code-kw); font-weight: bold }
.chroma .cl { }
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { background-color: var(--code-hl) }
.chroma .lnt, .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: var(--code-lineno) }
.chroma .line { display: flex; }

/* Keyword */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr { color: var(--code-kw) }
.chroma .kt { color: var(--code-ty) }

/* Name */
.chroma .n { }
.chroma .na { color: var(--code-fn) }
.chroma .nb { color: var(--code-ty) }
.chroma .bp { }
.chroma .nc { color: var(--code-ty); font-weight: bold }
.chroma .no { color: var(--code-num) }
.chroma .nd { color: var(--code-pp) }
.chroma .ni { color: var(--code-ty) }
.chroma .ne { color: var(--code-kw); font-weight: bold }
.chroma .nf, .chroma .fm { color: var(--code-fn) }
.chroma .nl { color: var(--code-kw) }
.chroma .nn { }
.chroma .nx { }
.chroma .py { }
.chroma .nt { color: var(--code-kw) }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { }

/* Literal */
.chroma .l { color: var(--code-num) }
.chroma .ld { color: var(--code-str) }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
.chroma .sd, .chroma .s2, .chroma .sh, .chroma .sx,
.chroma .s1 { color: var(--code-str) }
.chroma .se, .chroma .si { color: var(--code-pp) }
.chroma .sr { color: var(--code-pp) }
.chroma .ss { color: var(--code-ty) }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .il, .chroma .mo { color: var(--code-num) }

/* Operator */
.chroma .o, .chroma .ow { color: var(--code-kw) }
.chroma .p { color: var(--code-fg) }

/* Comment */
.chroma .c, .chroma .ch, .chroma .cm,
.chroma .c1, .chroma .cs { color: var(--code-com); font-style: italic }
.chroma .cp { color: var(--code-pp) }
.chroma .cpf { color: var(--code-pp); font-style: italic }

/* Generic */
.chroma .g { }
.chroma .gd { color: var(--code-kw); background-color: var(--code-del) }
.chroma .ge { font-style: italic }
.chroma .gr { color: var(--code-kw); font-weight: bold }
.chroma .gh { color: var(--code-fn); font-weight: bold }
.chroma .gi { color: var(--code-fn); background-color: var(--code-ins) }
.chroma .go { color: var(--code-com) }
.chroma .gp { color: var(--code-com) }
.chroma .gs { font-weight: bold }
.chroma .gu { color: var(--code-fn); font-weight: bold }
.chroma .gt { color: var(--code-kw); font-weight: bold }
.chroma .gl { text-decoration: underline }
.chroma .w { }