/* Code blocks in Markdown (posts, editor preview, project pages). The
   highlighter (internal/markdown) emits chroma's CSS classes, never inline
   styles, which the CSP blocks; this maps them to the site palette.
   Link after site.css. */

/* ------------------------------------------------------------ the well */

/* A sunken pixel well for every code block, highlighted or not. The outer
   ring is the one .prose pre has in site.css. */
.prose pre,
pre.chroma,
div.chroma {
  padding: 16px 18px;
  overflow-x: auto;
  tab-size: 4;
  font-size: 0.9em;
  line-height: 1.6;
  color: var(--ink);
  background: #0f0e0c;
  box-shadow:
    inset 2px 2px 0 var(--edge),
    inset -2px -2px 0 #24221e,
    0 0 0 2px #2b2926;
}
div.chroma { margin: 1em 0; }
.prose pre code,
pre.chroma code { font-size: inherit; }

/* Code grows to its longest line, so a highlighted line spans the scroll. */
pre.chroma code { display: inline-block; min-width: 100%; vertical-align: top; }

/* With {linenos=table} the numbers and the code are two pres in a table;
   the div around them is the well. These beat the .prose table rules. */
.chroma .lntd pre { margin: 0; padding: 0; overflow: visible; font-size: inherit; box-shadow: none; background: none; }
div.chroma table.lntable { display: table; width: 100%; margin: 0; padding: 0; border: 0; border-spacing: 0; border-collapse: separate; }
.chroma .lntable .lntd { vertical-align: top; margin: 0; padding: 0; border: 0; box-shadow: none; }
.chroma .lntable .lntd:first-child { padding-right: 0.6em; box-shadow: inset -2px 0 0 #24221e; }
.chroma .lntable .lntd:last-child { width: 100%; padding-left: 0.6em; }

.chroma .line { display: flex; }
.chroma .ln,
.chroma .lnt {
  white-space: pre;
  color: var(--faint);
  -webkit-user-select: none;
  user-select: none;
}
.chroma .ln { margin-right: 0.6em; padding-right: 0.6em; box-shadow: inset -2px 0 0 #24221e; }

/* {hl_lines=[2]}: a faint amber wash and an amber line number. */
.chroma .hl { background: #221d14; }
.chroma .lntd:first-child .hl { display: block; }
.chroma .hl .ln,
.chroma .hl .lnt { color: var(--accent); }

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

.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr,
.chroma .ow, .chroma .sa, .chroma .cp, .chroma .nt { color: var(--accent); }

.chroma .kt, .chroma .nc, .chroma .ne { color: #e8b97e; }

.chroma .nf, .chroma .fm, .chroma .nb, .chroma .nd, .chroma .na { color: #f4d27a; }

.chroma .s, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2,
.chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1,
.chroma .cpf { color: var(--green); }

.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo,
.chroma .l, .chroma .ld, .chroma .kc, .chroma .no, .chroma .bp, .chroma .ss,
.chroma .se, .chroma .ni { color: var(--cyan); }

.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs { color: var(--faint); }

.chroma .p { color: var(--muted); }

.chroma .err, .chroma .gr, .chroma .gt { color: var(--red); }

/* Diffs, consoles and other generic output. */
.chroma .gd { color: var(--red); }
.chroma .gi { color: var(--green); }
.chroma .gh, .chroma .gu { color: var(--accent); }
.chroma .gp, .chroma .go { color: var(--muted); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
.chroma .gl { text-decoration: underline; }