/* SVG optimiser: one result row per file, the note on its own line. Loaded only on /tools/svg-optimize/. */
.svg-item { display: grid; gap: 4px; justify-items: start; }
.svg-note { font-size: var(--matrix-type-control); line-height: 1.4; }
/* Before and after (and the differences) side by side under each file; they wrap on a narrow screen. */
.svg-compare { display: flex; flex-wrap: wrap; gap: var(--matrix-space-12); margin: 4px 0 8px; }
.svg-view { margin: 0; display: grid; gap: 4px; justify-items: start; max-width: 100%; }
.svg-view figcaption { font-size: var(--matrix-type-caption); color: var(--matrix-muted); }
.svg-view-image { display: block; width: min(200px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: repeating-conic-gradient(#e6e6e6 0 25%, #fafafa 0 50%) 0 0 / 16px 16px; }
/* A result that renders differently from its original (Jack's point 19b): the panel in the warning colours. */
.result.result--check { background: var(--matrix-warning-background); }
.result.result--check h2 { color: var(--matrix-warning); }
/* A choice's words stay beside its box at any width (Lucy's round 1, L02 and L07: at 390 px the shell's row wrapped a long
   label below its box, the dot alone on its line). */
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) { flex-wrap: nowrap; }
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) > label { min-width: 0; }