/* Favicon generator: preview strip of the generated icons. Loaded only on /tools/favicon-generator/. */
.fav-preview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--matrix-space-16); padding: var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); background-image: linear-gradient(45deg, var(--matrix-surface-subtle) 25%, transparent 25%, transparent 75%, var(--matrix-surface-subtle) 75%), linear-gradient(45deg, var(--matrix-surface-subtle) 25%, transparent 25%, transparent 75%, var(--matrix-surface-subtle) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.fav-preview-item { margin: 0; display: grid; justify-items: center; gap: 4px; }
.fav-preview-canvas { image-rendering: auto; max-width: 96px; max-height: 96px; width: auto; height: auto; }
.fav-preview figcaption { font-size: var(--matrix-type-caption); color: var(--matrix-muted); background: var(--matrix-surface); padding: 0 4px; border-radius: 4px; }
.option-row input[type="color"] { width: 44px; height: var(--matrix-control-min-height); padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
#fav-name { width: min(100%, 20em); }
/* Each preview shows its icon's own square, so a solid background reads as solid (Jack's point 20c). */
.fav-preview-canvas { outline: 1px solid var(--matrix-border); }
/* The <head> lines to copy (Jack's point 20a). */
.fav-snippet-box { display: grid; gap: var(--matrix-space-8); justify-items: start; width: 100%; }
.fav-snippet { width: 100%; font-family: var(--matrix-font-mono, ui-monospace, monospace); font-size: var(--matrix-type-caption); white-space: pre; overflow-x: auto; resize: vertical; }
/* 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; }