/* ─────────── code ─────────── */
/* Rouge highlights the fenced code in a note, marking every token with a class
 * of its own. This dresses them.
 *
 * Nothing new is introduced to do it: the five hues here are the five the app
 * already has, and most of a listing stays the colour the block was already
 * set in. Code in a note is read rather than written, and the rest of the app
 * is quiet — headings below the body size, greys doing most of the work — so a
 * fence that lit up in eight colours would be the loudest thing on the page.
 *
 * What earns a colour is a kind of thing, and there are five worth marking:
 *
 *   comments   faint      says: skip me
 *   keywords   accent     the language's own words
 *   strings    ok         literal text
 *   numbers    warn       literal values, true and nil among them
 *   names      link       what the code defines or calls
 *
 * Operators and punctuation go muted, below the identifiers they separate.
 * Everything else — plain identifiers, variables — keeps the block's colour.
 * Token classes are Rouge's, grouped as Rouge groups them. */

/* comments */
.code-highlight .c, .code-highlight .ch, .code-highlight .cd, .code-highlight .cm,
.code-highlight .cpf, .code-highlight .c1, .code-highlight .cs { color: var(--faint); font-style: italic; }
/* a preprocessor line is an instruction rather than an aside, so it is not italic */
.code-highlight .cp { color: var(--muted); }

/* keywords */
.code-highlight .k, .code-highlight .kd, .code-highlight .kn, .code-highlight .kp,
.code-highlight .kr, .code-highlight .kv { color: var(--accent); }
/* true, false, nil and the type names read as values, so they go with the numbers */
.code-highlight .kc, .code-highlight .kt { color: var(--unresolved); }

/* strings */
.code-highlight .s, .code-highlight .sb, .code-highlight .sc, .code-highlight .dl,
.code-highlight .sd, .code-highlight .s2, .code-highlight .sh, .code-highlight .sx,
.code-highlight .s1, .code-highlight .sa, .code-highlight .sr, .code-highlight .ss { color: var(--ok); }
/* an escape or an interpolation is a hole in the string: it takes the colour of
 * what fills it rather than the colour of the quoting around it */
.code-highlight .se, .code-highlight .si { color: var(--accent); }

/* numbers */
.code-highlight .m, .code-highlight .mb, .code-highlight .mf, .code-highlight .mh,
.code-highlight .mi, .code-highlight .il, .code-highlight .mo, .code-highlight .mx { color: var(--unresolved); }

/* names the code introduces or calls — classes, constants, namespaces, methods,
 * and the tags and attributes that stand for them in markup */
.code-highlight .nc, .code-highlight .no, .code-highlight .nn, .code-highlight .nf,
.code-highlight .fm, .code-highlight .nt, .code-highlight .na, .code-highlight .nl,
.code-highlight .ne { color: var(--link); }

/* operators and punctuation sit below what they separate */
.code-highlight .o, .code-highlight .ow, .code-highlight .p, .code-highlight .pi { color: var(--muted); }

/* what the lexer could not read. Marked, because a fence lexed as the wrong
 * language should say so rather than look merely plain */
.code-highlight .err { color: var(--warn); background: rgba(201, 138, 122, .1); border-radius: 0.1875rem; }

/* diffs and console sessions, where the markup is the meaning */
.code-highlight .gi { color: var(--ok); }
.code-highlight .gd { color: var(--warn); }
.code-highlight .gh, .code-highlight .gu { color: var(--muted); font-weight: 600; }
.code-highlight .gp, .code-highlight .go { color: var(--faint); }
.code-highlight .gt { color: var(--warn); }
.code-highlight .ge { font-style: italic; }
.code-highlight .gs { font-weight: 600; }
.code-highlight .ges { font-weight: 600; font-style: italic; }