/* ============================================================================
   RETRIVIUM — code and syntax
   ----------------------------------------------------------------------------
   Code is the most legible element on the page. That is a requirement, not a
   preference: almost every item in the curriculum asks the learner to read a
   snippet precisely.

   Rules that are not negotiable:
     · Syntax distinctions survive BOTH themes (the tokens handle this).
     · Every distinction is carried by more than hue — keywords also carry
       weight, comments also carry italic — so it survives greyscale.
     · No line wrapping that breaks structure. Overflow scrolls instead.
     · Line numbers only where tracing needs them.

   Class names match Rouge's default token abbreviations where they overlap,
   so a Rails `Rouge::Formatters::HTML` output can be styled directly.
   ============================================================================ */

.code {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--leading-code);
  color: var(--color-code-text);
  overflow-x: auto;
  -moz-tab-size: 2;
  tab-size: 2;
}

/* One line per element. Never rely on raw newlines inside a flow container —
   whitespace between block children collapses, which is what makes the
   line-highlight and line-number features possible at all. */
.code__line {
  display: block;
  white-space: pre;
  padding-inline: 0.3rem;
  margin-inline: -0.3rem;
  border-radius: var(--radius-xs);
  transition: background var(--dur-base) var(--ease-out);
}
.code__line:empty { height: var(--leading-code); }

/* The trace player highlights the line currently executing. This is the only
   place a code line changes appearance. */
.code__line--live { background: var(--color-code-live); }

/* Line numbers — opt in per block with .code--numbered. */
.code--numbered { counter-reset: rv-line; }
.code--numbered .code__line { counter-increment: rv-line; }
.code--numbered .code__line::before {
  content: counter(rv-line);
  display: inline-block;
  width: 2.25em;
  margin-right: 1em;
  text-align: right;
  opacity: 0.42;
  font-weight: var(--weight-normal);
  -webkit-user-select: none;
  user-select: none;
}

/* ----------------------------------------------------------------------------
   Syntax tokens
   Four colours and no more. Anything not listed renders as --color-code-text,
   which is correct: identifiers are the majority of any snippet and colouring
   them adds load without adding information.
   ---------------------------------------------------------------------------- */

/* Keyword — slate, plus weight so the distinction is not hue-only. */
.code .k,  .code .kd, .code .kn, .code .kp, .code .kr, .code .kt,
.code .keyword {
  color: var(--color-code-keyword);
  font-weight: var(--weight-bold);
}

/* String and symbol — moss. */
.code .s,  .code .s1, .code .s2, .code .sb, .code .sc, .code .sd,
.code .se, .code .sh, .code .si, .code .sx, .code .sr, .code .ss,
.code .string {
  color: var(--color-code-string);
}

/* Numeric literal — amber. Deliberately NOT garnet: garnet means exactly two
   things in this product, the one action and a loss, and a literal is neither. */
.code .m,  .code .mf, .code .mh, .code .mi, .code .mo,
.code .number {
  color: var(--color-code-number);
}

/* Comment — subtle, plus italic. */
.code .c,  .code .c1, .code .cm, .code .cp, .code .cs,
.code .comment {
  color: var(--color-code-comment);
  font-style: italic;
}

/* Diff markers, for debug items that show a patch. Shape carries the meaning;
   the tint is only reinforcement. */
.code__line--added   { background: light-dark(rgba(53,100,73,.12), rgba(140,192,162,.12)); }
.code__line--removed { background: light-dark(rgba(142,36,56,.10), rgba(232,139,156,.10)); }
.code__line--added::after,
.code__line--removed::after { position: absolute; }

/* ----------------------------------------------------------------------------
   Blanks, for completion items (rung 2 scaffolding).
   ---------------------------------------------------------------------------- */
.code__blank {
  display: inline-block;
  min-width: 3ch;
  border-bottom: 2px solid var(--color-action);
  color: transparent;
}
.code__blank--filled { border-bottom-color: var(--color-border); color: var(--color-code-text); }

/* ----------------------------------------------------------------------------
   Application addition.
   `.code__line` bleeds 0.3rem either side so a highlighted line can extend past
   the text column. Combined with `overflow-x: auto` above, that bleed is itself
   overflow, and every snippet renders a scrollbar it does not need. Matching the
   inline padding here makes the scroll track appear only for genuinely long
   lines; the negative margin keeps the text column where the design puts it, and
   `.code-box` has ample padding to absorb it.
   ---------------------------------------------------------------------------- */
.code {
  padding-inline: 0.3rem;
  margin-inline: -0.3rem;
}