/* Merge duplicates (B-050): the #/contacts/merge page and the 'Merge with...' modal (pages/merge.js).
   Layout (second menu + content) comes from contacts.css. Colours only via tokens.css. */

/* ---- Page ----------------------------------------------------------------------------------------- */
.merge-content { padding-bottom: 0; }
.merge-top { flex: none; display: flex; align-items: center; min-height: var(--control-h); }
.merge-intro { flex: none; margin: var(--sp-5) 0 var(--sp-6); color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-md); }
.merge-scroll { flex: 1; min-height: 0; overflow: auto; margin: 0 calc(-1 * var(--sp-6)); padding: 0 var(--sp-6) var(--sp-8); }
.merge-list { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 960px; }

/* Tabs: segmented control like the board / list switch. */
.merge-tabs {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-surface); box-shadow: var(--shadow-button);
}
.merge-tab {
  display: inline-flex; align-items: center; gap: var(--sp-3); height: calc(var(--control-h) - 2px);
  padding: 0 var(--sp-5); border: 0; background: none; color: var(--text); font: inherit;
  font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.merge-tab + .merge-tab { border-left: 1px solid var(--border); }
.merge-tab:hover { background: var(--bg-hover); }
.merge-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.merge-tab.is-active { background: var(--bg-selected); color: var(--blue); }
.merge-tab-count {
  min-width: 20px; height: 18px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--bg-hover);
  color: var(--text-2); font-size: var(--fs-sm); line-height: 18px; text-align: center;
}
.merge-tab.is-active .merge-tab-count { background: var(--bg-surface); color: var(--blue); }

/* ---- Group card ------------------------------------------------------------------------------------- */
.merge-group {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-raised); overflow: hidden;
  transition: opacity 200ms var(--ease-exit), transform 200ms var(--ease-exit);
}
.merge-group.is-leaving { opacity: 0; transform: translateY(-8px); }
.merge-group.is-skeleton { padding: var(--sp-6); box-shadow: none; }
.merge-group-head {
  display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border); background: var(--bg-app);
}
.merge-reason { font-weight: var(--fw-semibold); }
.merge-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.merge-count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.merge-group-foot {
  position: relative; display: flex; justify-content: flex-end; padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border); background: var(--bg-surface);
}
.merge-btn.btn { gap: var(--sp-2); font-weight: var(--fw-semibold); }
.merge-btn .ic, .merge-btn svg { width: 16px; height: 16px; }
.merge-btn.is-saving { opacity: 0.7; cursor: progress; }

/* ---- Side-by-side picker (page cards and the modal) -------------------------------------------------- */
.merge-grid { display: grid; margin-bottom: -1px; } /* the last row's line hides under the card edge */
.merge-cell {
  min-width: 0; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border);
  font-size: var(--fs-md); line-height: var(--lh-md);
  transition: background var(--t-fast) var(--ease);
}
.merge-label { color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.merge-head { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.merge-cell.is-kept { background: var(--bg-info); }
.merge-cell.is-choice:hover { background: var(--bg-hover); }
.merge-cell.is-choice.is-kept:hover { background: var(--bg-selected); }

.merge-rec { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; margin-bottom: var(--sp-4); }
.merge-rec-ic {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--bg-hover); color: var(--text-2);
}
.merge-rec-ic .ic, .merge-rec-ic svg { width: 16px; height: 16px; display: block; }
.merge-rec-text { min-width: 0; }
.merge-rec-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold);
}
.merge-rec-sub { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }

.merge-radio { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; cursor: pointer; }
.merge-radio input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--blue-bright); cursor: pointer; }
.merge-radio input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.merge-keep { color: var(--text-2); font-size: var(--fs-sm); }
.merge-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merge-value.is-empty { color: var(--text-muted); font-style: italic; }

/* ---- Empty / error -------------------------------------------------------------------------------------- */
.merge-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); text-align: center;
}
.merge-empty-ic, .merge-empty-ic svg { width: 32px; height: 32px; color: var(--green); }
.merge-empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.merge-error {
  padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--bg-hover); color: var(--red);
}

/* ---- 'Merge with...' modal --------------------------------------------------------------------------- */
.merge-with { display: flex; flex-direction: column; gap: var(--sp-4); }
.merge-with-text { margin: 0 0 var(--sp-3); color: var(--text-2); line-height: var(--lh-md); }
.merge-with-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.merge-with-pick { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.merge-with-pick .merge-cell { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.merge-with-note { padding: var(--sp-5); color: var(--red); }

@media (max-width: 720px) {
  .merge-cell { padding: var(--sp-4); }
  .merge-group-head { flex-wrap: wrap; }
}