/* Mock Data Generator: the field designer and the preview table. Loaded only on /tools/mock-data/. */
.mf-toolbar { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); align-items: center; }
.mf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--matrix-space-8); }
.mf-row { display: grid; grid-template-columns: minmax(6em, 1fr) minmax(10.5em, 1.3fr) minmax(9em, 1.8fr) 5.5em 4.5em auto; gap: var(--matrix-space-8); align-items: end; padding: var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.mf-cell { display: grid; gap: 4px; min-width: 0; }
.mf-cell--check { justify-items: start; }
.mf-cell--check input { width: 20px; height: 20px; margin: 6px 0; accent-color: var(--matrix-brand); }
.mf-cell--controls { align-self: end; }
.mf-label { font-size: var(--matrix-type-caption); font-weight: 600; }
.mf-row .matrix-input { width: 100%; min-width: 0; }
.mf-row [aria-invalid="true"] { border-color: var(--matrix-danger); outline: 2px solid var(--matrix-danger); outline-offset: 1px; }
.mf-error { margin: 0; }
.mf-hint { margin: 0; font-size: var(--matrix-type-caption); }
.mf-rows { width: 9em; }
.mf-seed { width: min(100%, 18em); }
/* width 0 with min-width 100%: the table never widens the result or the page; it scrolls in its own box */
.mf-preview-wrap { overflow-x: auto; margin-top: var(--matrix-space-12); width: 0; min-width: 100%; }
.mf-preview { border-collapse: collapse; font-size: 0.875rem; font-family: var(--matrix-font-mono); white-space: nowrap; }
.mf-preview th, .mf-preview td { text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--matrix-border); vertical-align: top; }
.mf-preview th { font-weight: 600; }
.mf-null-cell { color: var(--matrix-muted); font-style: italic; }
/* the syntax of the options, above the fields in the body's own size (Jack 2026-10-12, appendix 44), and each row's own */
.mf-syntax { margin: 0; color: var(--matrix-muted); }
.mf-note { margin: 0; font-size: var(--matrix-type-caption); }
@media (max-width: 900px) {
  .mf-row { grid-template-columns: 1fr 1fr; }
  .mf-cell--name, .mf-cell--type, .mf-cell--wide { grid-column: 1 / -1; }
}
/* a phone: each field in three lines, not five - its name beside its type, its options, then empty %, unique and the row's
   buttons - and every checkbox and radio a 32 px target, as the row's buttons are (fb_6584d0c0, Lucy's round 1: 7,227 px long,
   13 boxes of 20 px) */
@media (max-width: 600px) {
  .mf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .mf-cell--name { grid-column: 1 / 2; }
  .mf-cell--type { grid-column: 2 / -1; }
  .mf-cell--wide { grid-column: 1 / -1; }
  .mf-cell--check input, #tool .option-row input[type="checkbox"], #tool .option-row input[type="radio"] { width: 32px; height: 32px; margin: 0; }
}