/* Device mockup: device list, canvas controls and the preview strip. Loaded only on /tools/device-mockup/. */
.dm-devices { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.dm-devices legend { grid-column: 1 / -1; }
.dm-devices .option-row { flex-wrap: nowrap; align-items: flex-start; }
.dm-devices .option-row input { flex: none; min-height: 0; margin-top: 3px; } /* tokens.css min-height would push a 20 px checkbox 10 px low */
.dm-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; }
.dm-preview-item { margin: 0; display: grid; gap: 4px; justify-items: start; max-width: 100%; }
.dm-preview-canvas { display: block; max-width: min(100%, 260px); max-height: 300px; width: auto; height: auto; }
.dm-preview figcaption { font-size: var(--matrix-type-caption); color: var(--matrix-muted); background: var(--matrix-surface); padding: 0 4px; border-radius: 4px; }
.dm-item { display: grid; gap: 4px; justify-items: start; }
.dm-note { font-size: var(--matrix-type-control); line-height: 1.4; }
.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: 9em; }
.dm-field-error { margin: 0; font-size: var(--matrix-type-caption); } /* under the canvas size: what is wrong with a custom size */
#canvas { max-width: 100%; }
#margin, #angle { width: min(100%, 180px); }
/* Why a store canvas exports at 1× (Jack's point 24b). */
.dm-scale-note { margin: 0; font-size: var(--matrix-type-caption); }
/* 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; }