/* merge-docx: the five steps (template panel with the drop zone, list, fields, rows and output, preview
   and checks), the field table and the text preview. Family styles in ../text-tools.css. */
.mm-step { margin-bottom: var(--matrix-space-20); }
.mm-step-title { margin: var(--matrix-space-16) 0 var(--matrix-space-8); font-size: var(--matrix-type-item-title); }
.mm-template-status p { margin: 0 0 var(--matrix-space-8); }
.mm-template-status ul { margin: 0 0 var(--matrix-space-8); padding-left: 1.2em; }
.mm-problems { border-left: 3px solid var(--matrix-danger); padding-left: var(--matrix-space-12); }
.mm-warnings { border-left: 3px solid var(--matrix-warning); padding-left: var(--matrix-space-12); }
.mm-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-12); margin-top: var(--matrix-space-12); }
.mm-guide { margin-top: var(--matrix-space-12); }
.mm-guide summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.mm-guide ul { margin: var(--matrix-space-8) 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.mm-guide code, .mm-map code { font-family: var(--matrix-font-mono); font-size: 0.875em; background: var(--matrix-surface-subtle); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.mm-step .dropzone { margin-top: var(--matrix-space-8); }

/* fields and columns */
.mm-map-scroll { overflow-x: auto; min-width: 0; max-width: 100%; } /* a grid item: without min-width 0 Firefox widens the page to the table */
.mm-map { width: 100%; border-collapse: collapse; }
.mm-map caption { text-align: left; padding-bottom: var(--matrix-space-8); font-size: var(--matrix-type-control); }
.mm-map th, .mm-map td { text-align: left; padding: 6px var(--matrix-space-8) 6px 0; vertical-align: top; border-top: 1px solid var(--matrix-border); }
.mm-map thead th { border-top: 0; font-size: var(--matrix-type-control); color: var(--matrix-muted); font-weight: 600; }
.mm-map th[scope="row"] { font-weight: 600; min-width: 8em; }
.mm-map select, .mm-map input { width: 100%; min-width: 9em; box-sizing: border-box; }
.mm-map select[aria-invalid] { border-color: var(--matrix-danger); }
.mm-where { display: block; font-weight: 400; font-size: var(--matrix-type-caption); }
.mm-map-note { color: var(--matrix-danger); }
.option-hint[hidden], .mm-readiness[hidden] { display: none; }
.option-hint { margin: 0; font-size: var(--matrix-type-caption); line-height: var(--matrix-leading-caption); }
.options .option-row input[type="text"] { flex: 1 1 12em; min-width: 0; }
.mm-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: var(--matrix-space-8); }
.mm-field input { width: 100%; min-width: 0; box-sizing: border-box; } /* Firefox sizes a text input by its size attribute and would widen the page */
.mm-field label { font-weight: 500; }

/* preview and checks */
.mm-preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8); margin-bottom: var(--matrix-space-12); }
.mm-preview-controls[hidden] { display: none; }
.mm-preview-controls label { font-weight: 600; }
.mm-preview-controls select { max-width: 100%; min-width: 0; flex: 1 1 14em; }
.mm-preview { max-height: 60vh; overflow: auto; padding: var(--matrix-space-16) var(--matrix-space-20); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); line-height: 1.55; overflow-wrap: anywhere; }
.mm-preview p { margin: 0 0 var(--matrix-space-8); white-space: pre-wrap; }
.mm-preview .mm-heading { font-weight: 700; font-size: 1.15em; }
.mm-preview .mm-box { border: 1px solid var(--matrix-border); border-radius: 4px; padding: 2px var(--matrix-space-8); } /* text in a text box */
.mm-part:not(.mm-part--main) { border: 1px dashed var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-12); margin: var(--matrix-space-8) 0; }
.mm-part-label { font-size: var(--matrix-type-caption); color: var(--matrix-muted); margin-bottom: 4px !important; }
.mm-value { background: var(--matrix-selected); color: var(--matrix-selected-text); border-radius: 3px; padding: 0 2px; }
.mm-empty { background: var(--matrix-warning-background); color: var(--matrix-text); border: 1px dashed var(--matrix-warning); border-radius: 3px; padding: 0 3px; font-size: 0.9em; }
.mm-table { border-collapse: collapse; margin: 0 0 var(--matrix-space-8); }
.mm-table td { border: 1px solid var(--matrix-border); padding: 4px 8px; vertical-align: top; white-space: pre-wrap; }
.mm-checks { margin-top: var(--matrix-space-12); display: grid; gap: var(--matrix-space-8); }
.mm-check p { margin: 0; font-weight: 600; }
.mm-check ul { margin: 4px 0 0; padding-left: 1.2em; font-size: var(--matrix-type-control); }
.mm-ok { margin: 0; color: var(--matrix-success); }
.matrix-link-button { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: var(--matrix-link); text-decoration: underline; cursor: pointer; }
.mm-readiness { margin: var(--matrix-space-12) 0 0; color: var(--matrix-muted); }
/* a long label wraps beside its box instead of dropping below it */
.options .option-row { flex-wrap: nowrap; }
.options .option-row input[type="radio"], .options .option-row input[type="checkbox"] { flex: none; }
.options .option-row label { flex: 1; min-width: 0; }
.mm-row-list input { flex: 1 1 auto; width: 100%; }
/* narrow screens: each field becomes a small card instead of a table that scrolls sideways */
@media (max-width: 560px) {
  .mm-map thead { display: none; }
  .mm-map caption { display: block; } /* a table-caption inside a block table shrinks to its longest word */
  .mm-map, .mm-map tbody, .mm-map tr, .mm-map th, .mm-map td { display: block; width: 100%; box-sizing: border-box; }
  .mm-map tr { border-top: 1px solid var(--matrix-border); padding: var(--matrix-space-8) 0; }
  .mm-map th, .mm-map td { border: 0; padding: 2px 0; }
  .mm-map td::before { content: attr(data-label); display: block; font-size: var(--matrix-type-caption); color: var(--matrix-muted); margin-bottom: 2px; }
  .mm-map select, .mm-map input { min-width: 0; }
}