/*
 * blog/app.css — rules only this app needs. The shared DW-001 system
 * (tokens, document shell, components) lives in the fleet-ui crate and
 * ships at /fleet-ui.css ahead of this file.
 */

/* Post states ride the fleet-ui Badge component (badge.css). */

/* --- Highlighted code (extension of rule 1, and §8's diff ruling) ---

   What the system lacked: the token palette written as Lexxy variables above
   styles the EDITOR, because Lexxy's highlighter ships in the admin bundle and
   a reader never downloads it. Rouge now highlights server-side; rouge.css is
   its Github theme, generated unmodified, and scoped to blocks that are not
   diffs.

   Diffs are ours, and take §8's resolution exactly: colour by line ROLE —
   added, removed, header — reusing the status colours that already exist.
   Three roles, no syntax highlighting inside them, and no second palette.

   The colour is on the TEXT, not behind it. Rule 5 makes --fill the only
   permitted surface change, so the green and red bands a conventional diff
   uses are unavailable — and unnecessary: the marker column and the ink carry
   the role between them. */

/* The line is the unit: a diff is read by scanning the markers down the left
   edge. Each line is its own block so a role's colour covers all of it, and a
   line that wraps hangs its continuation clear of the marker column. */
.prose pre[data-language="diff"] .dl {
    display: block;
    padding-left: 1.2ch;
    text-indent: -1.2ch;
}

.prose pre[data-language="diff"] .gi { color: var(--good); }
.prose pre[data-language="diff"] .gd { color: var(--danger); }

/* File and hunk headers are the margins of a diff rather than its content, so
   they read as instrumentation: present, and not competing with the change. */
.prose pre[data-language="diff"] .gh,
.prose pre[data-language="diff"] .gu {
    color: var(--text-muted);
}

/* Rule 6 is about engineered motion, not mandatory motion. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}