/* Banner sizes: two-column size lists and the preview strip. Loaded only on /tools/banner-sizes/. */
.banner-sizes { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.banner-sizes legend { grid-column: 1 / -1; }
.banner-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); }
.banner-preview-item { margin: 0; display: grid; gap: 4px; justify-items: start; max-width: 100%; }
.banner-preview-canvas { display: block; max-width: min(100%, 240px); max-height: 240px; width: auto; height: auto; border: 1px solid var(--matrix-border); background: var(--matrix-surface-subtle); }
.banner-preview figcaption { font-size: var(--matrix-type-caption); color: var(--matrix-muted); }
.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); }
#custom-size { width: 8em; }
.banner-field-error { margin: 0; font-size: var(--matrix-type-caption); } /* under the custom size field: what is wrong with it */
/* Every choice is a 44 px target (Jack's register T21-02): the label of its row, which ticks it, is at least 44 px tall and fills
   the row, its first line level with a 24 px box (tokens.css's min-height would push the box low) */
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) { flex-wrap: nowrap; align-items: flex-start; }
#options .option-row > input[type="checkbox"], #options .option-row > input[type="radio"] { width: 24px; height: 24px; min-height: 0; margin: 10px 0 0; flex: none; }
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) > label { flex: 1 1 auto; min-width: 44px; min-height: 44px; box-sizing: border-box; padding-block: 9px; }
#options input[type="range"] { min-height: 44px; } /* the focus point's and the JPEG quality's sliders, 44 px targets too */
/* the placement, the focus point, the format and the background, folded under a summary that says what they are set to */
.banner-more { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: 0 var(--matrix-space-16); }
.banner-more[open] { display: grid; gap: var(--matrix-space-16); padding-bottom: var(--matrix-space-16); }
.banner-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; box-sizing: border-box; padding-block: 10px; overflow-wrap: anywhere; }
.banner-more-state { font-weight: 400; }
.banner-more .option-group { border: 0; padding: 0; }
.banner-focus { display: grid; gap: var(--matrix-space-4); justify-items: start; grid-column: 1 / -1; }
.banner-focus-canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); cursor: crosshair; background: var(--matrix-surface-subtle); }
.banner-focus-canvas:focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: 3px; }
.banner-focus-row { width: 100%; }
.banner-focus-row label { min-width: 4em; }
#focus-x, #focus-y { width: min(100%, 220px); margin-inline: var(--matrix-space-8); }
.banner-focus-hint { margin: 0; font-size: var(--matrix-type-caption); }
#jpeg-quality { width: min(100%, 220px); margin-inline: var(--matrix-space-8); }