/* Compare proteins page (compare.js). Tokens from styles.css :root. */
.cmp-view { max-width: 100%; }
.cmp-form { margin: 0 0 12px; }
.cmp-form label { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: 13px; }
.cmp-form-row { display: flex; gap: 6px; max-width: 640px; }
.cmp-form-row input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); font: 13px var(--mono); }
.cmp-form-row button,
.cmp-toolbar button,
.cmp-remove { padding: 4px 10px; color: var(--teal); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13px; cursor: pointer; }
.cmp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 8px; font-size: 13px; }
.cmp-toolbar .cmp-check { display: inline-flex; align-items: center; gap: 4px; }
.cmp-scroll { max-width: 100%; overflow-x: auto; }
.cmp-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 6px 10px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.cmp-table thead th { background: var(--surface-soft); font-weight: 600; }
.cmp-table th.cmp-attr, .cmp-table tbody th { width: 190px; color: var(--ink); font-weight: 600; }
.cmp-table tbody tr { border-top: 1px solid var(--line-soft); }
.cmp-table tr.cmp-differs > th { box-shadow: inset 3px 0 0 var(--teal); }
.cmp-table tr.cmp-differs > td { background: var(--teal-soft); }
.cmp-table.cmp-only-differ tbody tr:not(.cmp-differs):not([data-key="display_name"]) { display: none; }
.cmp-table thead a { font-family: var(--mono); font-weight: 400; }
.cmp-remove { display: block; margin-top: 4px; padding: 1px 6px; font-size: 12px; font-weight: 400; }
.cmp-id { display: block; color: var(--ink-soft); font: 12px var(--mono); }
.cmp-list { margin: 0; padding: 0; list-style: none; }
.cmp-list li + li { margin-top: 3px; }
.cmp-evidence { color: var(--ink-soft); font-size: 12px; }
.cmp-na { color: var(--ink-soft); font-style: italic; }
.cmp-legend { margin-top: 6px; font-size: 12px; }
.cmp-h2 { margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 600; }
.cmp-pairs { width: 100%; font-size: 13px; }
.cmp-pairs td.num, .cmp-pairs th.num { text-align: right; font-variant-numeric: tabular-nums; }
.header-actions a.compare-tray { font-weight: 600; }
.record-actions .compare-add[hidden] { display: none; }

@media (max-width: 700px) {
  /* Narrow screens: attribute column above the values is not possible in a
     table, so the table keeps a minimum width and scrolls inside its box. */
  .cmp-table { min-width: calc(120px + var(--cmp-n, 3) * 150px); }
  .cmp-table.cmp-n2 { --cmp-n: 2; }
  .cmp-table.cmp-n4 { --cmp-n: 4; }
  .cmp-table.cmp-n5 { --cmp-n: 5; }
  .cmp-table.cmp-n6 { --cmp-n: 6; }
  .cmp-table th.cmp-attr, .cmp-table tbody th { width: 110px; }
  .cmp-pairs { min-width: 560px; }
}