/* 06-components/diff — the patch component. Wraps the markup Diffy emits
   (`.diff > ul > li.unchanged|ins|del`, word-level changes in <strong>) and
   styles it as a two-gutter patch: every line carries a literal glyph in a mono
   gutter — `+` added, `−` removed, ` ` context — set via ::before so the meaning
   survives in greyscale and with motion off. The --brand/--danger tints only
   REINFORCE the glyph; they never carry the state alone. Namespaced under
   .c-diff so the library's bare .diff is never restyled globally.

   Only the wiki revision-diff page needs this — the one piece the ticket flags as
   a design-system gap for this sprint. Output to be read closely: it does NOT glow. */
.c-diff {
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  line-height: 1.55;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ground) 80%, #000);
  /* Huge patches scroll inside their frame instead of blowing out the column. */
  max-height: 70vh;
  overflow: auto;
}

/* Diffy wraps each hunk in its own <ul>; multiple hunks stack. */
.c-diff .diff ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-diff .diff ul + ul {
  border-block-start: 1px solid var(--rule);
}

/* One line per <li>: a fixed mono gutter (the glyph) + the line text, which wraps
   rather than overflowing. Tabular so columns of code align. */
.c-diff .diff li {
  display: grid;
  grid-template-columns: 2.25ch 1fr;
  column-gap: 0.75ch;
  padding-inline: 0.6rem;
  padding-block: 0.05rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.c-diff .diff li::before {
  content: " ";
  color: var(--ink-dim);
  text-align: center;
  user-select: none;
}

/* Added / removed: the glyph carries the meaning, the tint reinforces it. */
.c-diff .diff li.ins {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.c-diff .diff li.ins::before {
  content: "+";
  color: var(--brand);
}
.c-diff .diff li.del {
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}
.c-diff .diff li.del::before {
  content: "−";
  color: var(--danger);
}

/* Neutralise the browser's line-through/underline on the whole-line del/ins —
   the gutter glyph and tint already disambiguate, and the strikethrough hurts
   legibility of a removed line. */
.c-diff .diff del,
.c-diff .diff ins {
  text-decoration: none;
}

/* Word-level change: a subtle wash + weight, never colour alone. */
.c-diff .diff strong {
  font-weight: 600;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--radius-sm);
  padding-inline: 0.15ch;
}