/* ---------- Conflicts ----------
   Two records match one record that can follow only one of them: the open conflicts, and their history. */
.tab-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: var(--fs-2xs); font-weight: 650;
}
.choice-note { display: flex; align-items: center; gap: 10px; }
.choice-note > svg { width: 18px; height: 18px; flex: none; color: var(--brand-text); }
.choice-note .btn { margin-left: auto; flex: none; }
a.pill.conflict-link { text-decoration: none; }
a.pill.conflict-link:hover { background: color-mix(in srgb, var(--tone) 20%, transparent); }

.conflict-bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.conflict-all { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-s); color: var(--ink-3); cursor: pointer; }
.conflict-bulk-actions { display: flex; gap: 8px; margin-left: auto; }

.conflict-table th.check, .conflict-table td.check { width: 36px; padding-right: 0; }
.conflict-table td { vertical-align: top; }
.conflict-name { display: block; font-weight: 600; color: var(--ink); }
.conflict-sub { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-4); overflow-wrap: anywhere; }
.conflict-table td.conflict-new .conflict-name { color: var(--ok); }
.conflict-table td.right .btn + .btn { margin-left: 6px; }
.conflict-table .nowrap, .choice-history .nowrap { white-space: nowrap; }

.choice-history .fit { width: 1%; white-space: nowrap; }
.choice-history .action { width: 150px; white-space: nowrap; }
.choice-history td.action form { margin: 0; }
.choice-what { min-width: 280px; }
.choice-brief { color: var(--ink-2); }
.choice-more {
  margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--brand-text);
}
.choice-more:hover { color: var(--brand-text-hover); text-decoration: underline; }