/* rouge syntax-highlight token colors (github theme), scoped to .highlight.
 * Container sizing (padding/radius/overflow) is Tailwind on the <pre> tag;
 * only the span-level token colors (which Tailwind can't target) live here.
 *
 * The colors themselves are --hl-* custom properties, defined light and dark in
 * app/assets/tailwind/application.css: this file is plain CSS outside the
 * Tailwind build, so it has no `dark:` variant of its own. The hex fallbacks
 * keep it at the github-light theme if it is ever loaded on its own. */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }

/* Numbered source lines (Content::SourceHighlighter). Each line is an inline
 * span with an id, so #L12 addresses it, wrapping an empty anchor that carries
 * the number. Rows must stay inline: they live in a <pre>, and each is followed
 * by a real newline (the one the /lite mirror's scraped text needs), which a
 * block box would render as a blank line under every row. */
.source-lines { counter-reset: source-line; }
.source-line { counter-increment: source-line; }

/* The number is generated content, so a selection of the block copies the code
 * and not "1 2 3 …". That is the job Rouge's own line table does with an inline
 * `style="user-select:none"`, which this app's CSP drops. */
.source-lineno::before { content: counter(source-line); }

.source-lineno {
  display: inline-block;
  width: 3.5em;
  padding-right: 1em;
  text-align: right;
  color: var(--hl-lineno, #8c959f);
  text-decoration: none;
}

.source-lineno:hover { color: var(--hl-lineno-hover, #24292f); }

/* The line(s) a #L12 / #L12-L20 link points at. Applied by the Stimulus
 * controller; :target covers the no-JS case for a single line. The background
 * covers the line's text, not the container width — these are inline boxes in a
 * horizontally scrolling <pre>, which never wraps anyway. */
.source-line:target,
.source-line.is-targeted { background-color: var(--hl-line-target, #fff8c5); }
.highlight, .highlight .w {
  color: var(--hl-fg, #24292f);
  background-color: var(--hl-bg, #f6f8fa);
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: var(--hl-keyword, #cf222e);
}
.highlight .gr {
  color: var(--hl-bg, #f6f8fa);
}
.highlight .gd {
  color: var(--hl-del-fg, #82071e);
  background-color: var(--hl-del-bg, #ffebe9);
}
.highlight .nb {
  color: var(--hl-entity, #953800);
}
.highlight .nc {
  color: var(--hl-entity, #953800);
}
.highlight .no {
  color: var(--hl-entity, #953800);
}
.highlight .nn {
  color: var(--hl-entity, #953800);
}
.highlight .sr {
  color: var(--hl-tag, #116329);
}
.highlight .na {
  color: var(--hl-tag, #116329);
}
.highlight .nt {
  color: var(--hl-tag, #116329);
}
.highlight .gi {
  color: var(--hl-add-fg, #116329);
  background-color: var(--hl-add-bg, #dafbe1);
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: var(--hl-constant, #0550ae);
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: var(--hl-constant, #0550ae);
}
.highlight .sb {
  color: var(--hl-constant, #0550ae);
}
.highlight .bp {
  color: var(--hl-constant, #0550ae);
}
.highlight .ne {
  color: var(--hl-constant, #0550ae);
}
.highlight .nl {
  color: var(--hl-constant, #0550ae);
}
.highlight .py {
  color: var(--hl-constant, #0550ae);
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: var(--hl-constant, #0550ae);
}
.highlight .o, .highlight .ow {
  color: var(--hl-constant, #0550ae);
}
.highlight .gh {
  color: var(--hl-constant, #0550ae);
  font-weight: bold;
}
.highlight .gu {
  color: var(--hl-constant, #0550ae);
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: var(--hl-string, #0a3069);
}
.highlight .nd {
  color: var(--hl-function, #8250df);
}
.highlight .nf, .highlight .fm {
  color: var(--hl-function, #8250df);
}
.highlight .err {
  color: var(--hl-err-fg, #f6f8fa);
  background-color: var(--hl-err-bg, #82071e);
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: var(--hl-comment, #6e7781);
}
.highlight .gl {
  color: var(--hl-comment, #6e7781);
}
.highlight .gt {
  color: var(--hl-comment, #6e7781);
}
.highlight .ni {
  color: var(--hl-fg, #24292f);
}
.highlight .si {
  color: var(--hl-fg, #24292f);
}
.highlight .ge {
  color: var(--hl-fg, #24292f);
  font-style: italic;
}
.highlight .gs {
  color: var(--hl-fg, #24292f);
  font-weight: bold;
}