/* SVG pattern maker: motif choices in columns, the 3 x 3 seam preview. Loaded only on /tools/svg-pattern/. */
.options > fieldset[class~="option-group"]:has(input[name="shape"]) { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); } /* two columns on a phone (fb_e3cc68f6) */
.options > fieldset:has(input[name="shape"]) legend { grid-column: 1 / -1; }
.sp-preview-block { display: grid; gap: var(--matrix-space-8); }
.sp-preview-block h3 { margin: 0; }
.sp-preview { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); padding: var(--matrix-space-8); max-width: 100%; }
.sp-sheet { display: block; width: 100%; max-width: 480px; height: auto; }
.sp-facts, .sp-motif-name { margin: 0; font-size: var(--matrix-type-caption); }
.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); }
#cell { width: 7em; }
#scale { width: min(100%, 220px); }
/* The motif file chooser as a button like the site's other file choosers (Jack's point 22c), the input behind its label. */
.sp-motif-button { display: inline-flex; align-items: center; min-height: var(--matrix-control-min-height); box-sizing: border-box; cursor: pointer; }
#motif-file.visually-hidden { width: 1px; } /* tools.css widens every file input in the options to 100% */
#motif-file:focus-visible + .sp-motif-button { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
/* A cell size the tool does not take is named under its field (Jack's point 22a). */
.sp-field-error { margin: 0; font-size: var(--matrix-type-caption); }
/* On a wide screen the seam preview sits beside the options and stays in view while they change, instead of below them
   all (Jack's point 22b). The options are the panel's children in their order: the eight groups take the first column,
   the preview the second, over their rows. */
@media (min-width: 900px) {
  /* the rows' gaps become margins, so the preview can span as many rows as there are without empty ones adding height */
  .options:has(> .sp-preview-block) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--matrix-space-24); row-gap: 0; align-items: start; }
  .options:has(> .sp-preview-block) > :not(.sp-preview-block) { grid-column: 1; margin-bottom: var(--matrix-space-16); }
  .options > .sp-preview-block { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: var(--matrix-space-16); }
}
/* 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; }
/* The size, the rotation and the export, folded under a summary that says what they are set to (fb_e3cc68f6); the summary is a
   44 px target. The pattern's ZIP under its preview. */
.sp-more { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: 0 var(--matrix-space-16); }
.sp-more[open] { display: grid; gap: var(--matrix-space-16); padding-bottom: var(--matrix-space-16); }
.sp-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; box-sizing: border-box; padding-block: 10px; overflow-wrap: anywhere; }
.sp-more-state { font-weight: 400; }
.sp-more .option-group { border: 0; padding: 0; }
.sp-zip:empty { display: none; }
.sp-zip .download { min-height: 44px; }