.workbench {
  --wb-cols: 264px minmax(0, 1.2fr) minmax(0, 1fr);
  --wb-cols-lg: 248px minmax(0, 1.2fr) minmax(0, 1fr);
  --wb-cols-md: minmax(0, 1fr) minmax(0, 1fr);
}

/* Presets: two columns of checkboxes, each with its codepoint count. */
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.check-list .check { display: flex; min-width: 0; white-space: normal; }
.check-list .check > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-list small { color: var(--dim); font-family: var(--font-mono); font-size: var(--fs-3xs); }

/* The face readout under the drop zone. */
.meta-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.meta-grid dt { color: var(--muted); }
.meta-grid dd { margin: 0; font-family: var(--font-mono); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop.is-loaded { border-style: solid; }
.drop.is-loaded .drop-copy small { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The atlas keeps its own aspect and is opaque, so no checkerboard. A stale
   result (a control changed since it was generated) dims until regenerated. */
#atlasStage { aspect-ratio: auto; background-image: none; }
#atlasStage > canvas { height: auto; }
#atlasStage:not(.is-ready) > canvas { opacity: 0; }
.stage.is-stale > canvas { opacity: .45; }

/* The preview sizes its backing store from its CSS box and draws on the checkerboard. */
#previewStage { --stage-ratio: 16 / 7; }
#previewStage:not(.is-ready) > canvas { opacity: 0; }