/* compare-sheets: two editors side by side, key selects, and the differences table. Family styles in ../text-tools.css. */
.cmp-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); }
.option-row select.matrix-input { max-width: 100%; min-width: 12em; }
.option-row.is-disabled label { color: var(--matrix-text-muted, #6b6b6b); }
.sheet-warnings { margin: 0 0 var(--matrix-space-12); padding-left: 1.2em; color: var(--matrix-text); font-size: var(--matrix-type-control); }
.cmp-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.cmp-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); }
.cmp-table td { padding: 2px 8px; vertical-align: top; border-bottom: 1px solid var(--matrix-border); }
.cmp-table .cmp-type { width: 1%; white-space: nowrap; font-weight: 600; }
.cmp-table .cmp-value { font-family: var(--matrix-font-mono); white-space: pre-wrap; word-break: break-word; }
.cmp-table tr.cmp-added { background: var(--matrix-success-background); }
.cmp-table tr.cmp-removed { background: var(--matrix-danger-background); }
.cmp-table tr.cmp-changed td.cmp-value:last-child { font-weight: 600; }
@media (max-width: 480px) {
  .cmp-table { font-size: 0.8125rem; }
  .cmp-table th, .cmp-table td { padding: 2px 4px; }
}
/* a long download name (customers_a_vs_customers_b_changes.csv) breaks inside its button on a phone instead of pushing the
   page sideways (Lucy's round 1, L09) */
.text-result-actions .download { max-width: 100%; }
.text-result-actions .download span { overflow-wrap: anywhere; }