/* reconcile-sheets: two editors side by side, the column map, the result sections and the suggestions. Family styles in ../text-tools.css. */
.rec-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--matrix-space-16); }
.option-hint { margin: 0; font-size: var(--matrix-type-control); }
.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; }
.option-group.is-disabled legend, .option-group.is-disabled label, .option-group.is-disabled .rec-unit { color: var(--matrix-muted); }
.sheet-warnings { margin: 0 0 var(--matrix-space-12); padding-left: 1.2em; color: var(--matrix-text); font-size: var(--matrix-type-control); }

/* the column map: one row per role, one column per table */
.rec-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 */
.rec-map { width: 100%; border-collapse: collapse; }
.rec-map caption { text-align: left; padding-bottom: var(--matrix-space-8); font-size: var(--matrix-type-control); }
.rec-map th, .rec-map td { text-align: left; padding: 6px var(--matrix-space-8) 6px 0; vertical-align: top; border-top: 1px solid var(--matrix-border); }
.rec-map thead th { border-top: 0; font-size: var(--matrix-type-control); color: var(--matrix-muted); font-weight: 600; }
.rec-role { display: block; font-weight: 600; }
.rec-role-hint { display: block; font-weight: 400; font-size: var(--matrix-type-caption); }
.rec-map select { width: 100%; min-width: 8em; box-sizing: border-box; }

.options .rec-tolerance { flex-wrap: wrap; align-items: center; }
.options .rec-tolerance label { flex: 0 1 auto; }
.rec-number { width: 6em; }
.rec-unit { font-size: var(--matrix-type-control); }

/* the result */
.rec-section { margin-top: var(--matrix-space-16); }
.rec-section h3 { font-size: var(--matrix-type-item-title); margin: 0 0 var(--matrix-space-8); }
.rec-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.rec-table th { position: sticky; top: 0; background: var(--matrix-surface-subtle); color: var(--matrix-muted); font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); }
.rec-table td { padding: 2px 8px; vertical-align: top; border-bottom: 1px solid var(--matrix-border); overflow-wrap: break-word; } /* a key breaks only when it cannot fit; otherwise the table scrolls */
.rec-suggestions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--matrix-space-8); }
.rec-suggestion { display: flex; gap: var(--matrix-space-8); align-items: flex-start; }
.rec-suggestion input { flex: none; margin-top: 0.3em; }
.rec-suggestion label { min-width: 0; overflow-wrap: anywhere; }
.rec-matched { margin-top: var(--matrix-space-16); }
.rec-matched summary { font-weight: 600; cursor: pointer; margin-bottom: var(--matrix-space-8); }

/* narrow screens: each role of the column map becomes a small card instead of a table that scrolls sideways */
@media (max-width: 560px) {
  .rec-map thead { display: none; }
  .rec-map caption { display: block; } /* a table-caption inside a block table shrinks to its longest word */
  .rec-map, .rec-map tbody, .rec-map tr, .rec-map th, .rec-map td { display: block; width: 100%; box-sizing: border-box; }
  .rec-map tr { border-top: 1px solid var(--matrix-border); padding: var(--matrix-space-8) 0; }
  .rec-map th, .rec-map td { border: 0; padding: 2px 0; }
  .rec-map td::before { content: attr(data-label); display: block; font-size: var(--matrix-type-caption); color: var(--matrix-muted); margin-bottom: 2px; }
  .rec-map select { min-width: 0; }
  .rec-table { font-size: 0.8125rem; }
  .rec-table th, .rec-table td { padding: 2px 4px; }
}