/* Import contacts — the four-step wizard.
   Shell is the shared .mx-page-modal-overlay / .mx-page-modal, sized wider
   because the mapping and preview steps are tabular. */

.ci-overlay{z-index:1200;background:rgba(16,24,40,.32);padding:24px}
.ci-modal{width:960px;max-width:calc(100vw - 40px);height:min(760px,calc(100vh - 48px));position:relative;
  display:flex;flex-direction:column;overflow:hidden}

.ci-head{display:flex;align-items:center;gap:12px;padding:18px 24px 14px}
.ci-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.ci-head .ac-x{margin-left:auto}

/* Stepper */
.ci-steps{display:flex;align-items:center;gap:0;margin:0;padding:0 24px 16px;
  list-style:none;border-bottom:1px solid var(--border)}
.ci-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ci-step-n{width:22px;height:22px;flex:0 0 auto;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;background:var(--surface-panel);
  color:var(--text-tertiary);border:1px solid var(--border)}
.ci-step-l{font-size:13px;color:var(--text-tertiary);white-space:nowrap}
.ci-step.on .ci-step-n{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.ci-step.on .ci-step-l{color:var(--text-primary);font-weight:500}
.ci-step.done .ci-step-n{background:var(--brand-blue-soft);border-color:#B2DDFF;color:var(--brand-blue)}
.ci-step.done .ci-step-l{color:var(--text-secondary)}
.ci-step-bar{flex:1 1 auto;height:1px;background:var(--border);margin:0 12px;min-width:16px}
.ci-step.can{cursor:pointer}
.ci-step.can:hover .ci-step-l{color:var(--text-primary)}

.ci-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 24px}

.ci-foot{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:14px 24px;
  border-top:1px solid var(--border);background:#fff}
.ci-foot-r{margin-left:auto;display:flex;gap:9px}
.ci-foot .an-btn-primary[disabled]{opacity:.45;cursor:not-allowed}
.ci-foot .ct-btn-ghost[hidden]{display:none}

/* ---- step 1: upload ---- */
.ci-drop{border:1.5px dashed var(--border-strong);border-radius:12px;
  padding:40px 24px;text-align:center;background:var(--surface-alt);cursor:pointer}
.ci-drop:hover,.ci-drop.over{border-color:var(--brand-blue);background:var(--brand-blue-soft)}
.ci-drop-ic{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:#fff;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary)}
.ci-drop-t{font-size:14px;font-weight:500;color:var(--text-primary)}
.ci-drop-t b{color:var(--brand-blue);font-weight:500}
.ci-drop-s{margin-top:4px;font-size:13px;color:var(--text-secondary)}

.ci-file{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);
  border-radius:11px;background:#fff}
.ci-file-ic{width:38px;height:38px;flex:0 0 auto;border-radius:9px;background:var(--brand-blue-soft);
  color:var(--brand-blue);display:flex;align-items:center;justify-content:center}
.ci-file-n{font-size:14px;font-weight:500;color:var(--text-primary)}
.ci-file-s{font-size:12px;color:var(--text-secondary);margin-top:2px}
.ci-file-x{margin-left:auto;border:0;background:none;color:var(--text-tertiary);cursor:pointer;
  padding:6px;border-radius:7px}
.ci-file-x:hover{background:var(--surface-alt);color:var(--text-primary)}

.ci-note{margin-top:16px;font-size:13px;color:var(--text-secondary);line-height:1.55}
.ci-note a{color:var(--brand-blue);text-decoration:none}
.ci-note a:hover{text-decoration:underline}

/* ---- reading a large file ---- */
.ci-reading{padding:56px 24px;text-align:center}

/* ---- step 2: mapping at scale ---- */
.ci-alert{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:9px;
  font-size:13px;line-height:1.45;margin-bottom:14px}
.ci-alert.bad{background:#FEF3F2;border:1px solid #FECDCA;color:#B42318}
.ci-alert svg{flex:0 0 auto;margin-top:1px}

.ci-maptools{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ci-search{flex:1 1 200px;min-width:160px}
.ci-search input{width:100%;height:34px;padding:0 11px;font-size:13px;border-radius:8px;
  border:1px solid var(--border-strong);background:#fff;outline:none;color:var(--text-primary)}
.ci-search input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.12)}

.ci-empty{text-align:center;color:var(--text-secondary);padding:28px 12px;font-size:13px}

/* ---- step 3: review, no row preview ---- */
.ci-card{border:1px solid var(--border);border-radius:11px;padding:14px 16px;
  margin-bottom:14px;background:#fff}
.ci-card-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--text-primary);margin-bottom:11px}
.ci-card-t svg{color:#B54708}
.ci-link{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;
  font-size:12px;font-weight:500;color:var(--brand-blue);cursor:pointer}
.ci-link:hover{text-decoration:underline}

.ci-radios{display:flex;flex-direction:column;gap:8px}
.ci-radio{display:flex;align-items:flex-start;gap:9px;font-size:13px;cursor:pointer;color:var(--text-primary)}
.ci-radio input{margin:2px 0 0}
.ci-radio span i{display:block;font-style:normal;font-size:12px;color:var(--text-secondary);margin-top:1px}
.ci-confirm.show{display:flex}

/* File identity moved onto the mapping step, since Upload now passes straight
   through to it. */
.ci-filebar{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:14px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-alt);font-size:13px}
.ci-filebar svg{flex:0 0 auto;color:var(--text-secondary)}
.ci-filebar-n{font-weight:500;color:var(--text-primary)}
.ci-filebar-s{color:var(--text-secondary);font-size:12px}
.ci-filebar .ci-link{margin-left:auto}

.ci-card{border:1px solid var(--border);border-radius:11px;padding:16px;
  margin-bottom:12px;background:#fff}
.ci-card:last-child{margin-bottom:0}
.ci-card-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ci-card-t{font-size:13px;font-weight:600;color:var(--text-primary);margin:0}
.ci-opt{font-size:11px;font-weight:500;color:var(--text-secondary);
  background:var(--surface-panel);border-radius:999px;padding:2px 8px}
.ci-card-s{margin-top:10px;font-size:12px;line-height:1.6;color:var(--text-secondary)}
.ci-card-s b{color:var(--text-primary);font-weight:500}
.ci-card-s .jc-tags-cell{display:inline-flex;vertical-align:-2px}
.ci-card 
/* ---- mapping ---- */
.ci-maptools{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ci-segs{display:inline-flex;background:var(--surface-panel);border-radius:9px;padding:3px;gap:2px}
.ci-seg{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:0;
  background:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;
  color:var(--text-secondary);white-space:nowrap}
.ci-seg:hover{color:var(--text-primary)}
.ci-seg.on{background:#fff;color:var(--text-primary);box-shadow:0 1px 2px rgba(16,24,40,.07)}
.ci-seg-n{font-size:11px;font-weight:600;color:var(--text-tertiary);
  background:var(--surface-panel);border-radius:999px;padding:1px 6px;min-width:20px;text-align:center}
.ci-seg.on .ci-seg-n{background:var(--brand-blue-soft);color:var(--brand-blue)}

.ci-search{position:relative;flex:1 1 180px;min-width:150px}
.ci-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--text-tertiary);pointer-events:none}
.ci-search input{width:100%;height:36px;padding:0 11px 0 31px;font-size:13px;border-radius:9px;
  border:1px solid var(--border-strong);background:#fff;outline:none;color:var(--text-primary)}
.ci-search input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.12)}

.ci-rows{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:#fff}

.ci-row:last-child{border-bottom:0}
.ci-row-l{min-width:0}
.ci-row-r{display:flex;align-items:center;gap:7px;min-width:0}

/* Trigger — replaces the native select everywhere in this flow */
.ci-dd{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:36px;
  padding:0 10px;background:#fff;border:1px solid var(--border-strong);border-radius:9px;
  cursor:pointer;font-size:13px;color:var(--text-primary);text-align:left}
.ci-dd span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-dd svg{flex:0 0 auto;color:var(--text-tertiary)}
.ci-dd:hover{border-color:var(--text-tertiary)}
.ci-dd.unset span{color:var(--text-tertiary)}
.ci-dd.is-open{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.12)}

.ci-automark{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;
  justify-content:center;color:#067647}
.ci-automark.blank{visibility:hidden}

.ci-ddmenu{position:fixed;z-index:1350;overflow-y:auto;padding:5px;background:#fff;
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 28px -6px rgba(16,24,40,.16),0 4px 8px -4px rgba(16,24,40,.08);display:none}
.ci-ddmenu.open{display:block}
.ci-ddi{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 9px;
  background:none;border:0;border-radius:7px;cursor:pointer;text-align:left;font-size:13px;
  color:var(--text-primary)}
.ci-ddi span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-ddi svg{flex:0 0 auto;color:var(--brand-blue)}
.ci-ddi:hover{background:var(--surface-alt)}
.ci-ddi.on{font-weight:500}

.ci-empty{text-align:center;color:var(--text-secondary);padding:34px 12px;font-size:13px}
.ci-card .ci-dd{max-width:320px}

/* Source and target get equal halves with the arrow between them, so the pair
   reads as one relationship. Before, the left column was 1fr and the arrow
   ended up stranded in the middle of a wide empty gap. */
.ci-rows-h,
.ci-row{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);
  align-items:center;gap:10px}
.ci-rows-h{padding:10px 16px;background:var(--surface-alt);
  border-bottom:1px solid var(--border)}
.ci-rows-h span{font-size:11px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-tertiary)}
.ci-rows-h span:last-child{grid-column:3}

.ci-row{padding:7px 16px;border-bottom:1px solid var(--border)}
.ci-row:last-child{border-bottom:0}
.ci-row:hover{background:var(--surface-alt)}

/* Mapped and unmapped should not look identical — the whole task is telling
   them apart at a glance. */

.ci-col{font-size:13px;font-weight:500;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ci-arrow{display:flex;justify-content:center;color:var(--border-strong)}

/* Fields already taken by another column, named rather than hidden. */
.ci-ddi em{flex:0 0 auto;font-style:normal;font-size:11px;color:var(--text-tertiary);
  background:var(--surface-panel);border-radius:999px;padding:1px 7px}
.ci-ddi.taken span{color:var(--text-secondary)}

/* ── The running import, as a job card on the Contacts page ──────────────────
   Corner-anchored so the list underneath keeps its layout — the table must not
   shift while a background job runs. */
.cij{position:fixed;right:24px;bottom:24px;z-index:120;
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .26s cubic-bezier(.32,.72,0,1),transform .26s cubic-bezier(.32,.72,0,1)}
.cij.show{opacity:1;transform:none}
.cij-card{width:332px;background:#fff;border:1px solid #EAECF0;border-radius:12px;
  box-shadow:0 12px 28px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
  padding:14px 14px 0;overflow:hidden}
.cij-top{display:flex;align-items:flex-start;gap:11px}

/* The icon is a file inside a ring that sweeps while the job runs — one mark
   doing both jobs, rather than a spinner sitting next to an icon. */
.cij-ic{position:relative;flex:0 0 34px;width:34px;height:34px;display:grid;
  place-items:center}
.cij-ring{position:absolute;inset:0;border-radius:50%;background:#EFF4FF}
.cij-ring i{position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--brand-blue);
  animation:cij-spin .85s linear infinite}
.cij-file{position:relative;color:var(--brand-blue);display:grid;place-items:center}
@keyframes cij-spin{to{transform:rotate(360deg)}}

.cij-txt{flex:1 1 auto;min-width:0;padding-top:1px}
.cij-t{font-size:13px;font-weight:600;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cij-s{margin-top:3px;font-size:12px;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px;
  flex-wrap:wrap}
.cij-s .jc-tag{font-size:10.5px}

.cij-x{flex:0 0 auto;width:24px;height:24px;border:0;border-radius:6px;
  background:transparent;color:var(--text-tertiary);display:grid;place-items:center;
  cursor:pointer;transition:background-color .14s,color .14s}
.cij-x:hover{background:var(--surface-panel);color:var(--text-primary)}

.cij-bar{height:3px;margin:13px -14px 0;background:#F2F4F7}
.cij-bar i{display:block;height:100%;width:0;background:var(--brand-blue);
  transition:width .22s linear}

/* Done: the ring stops and fills green, the bar goes with it. */
.cij.ok .cij-ring{background:#D1FADF}
.cij.ok .cij-ring i{animation:none;border-color:transparent}
.cij.ok .cij-file{color:#067647}
.cij.ok .cij-bar i{background:#12B76A}

@media (prefers-reduced-motion:reduce){
  .cij{transition:none}
  .cij-ring i{animation:none}
  .cij-bar i{transition:none}
}

/* ── Review ──────────────────────────────────────────────────────────────────
   Was three outlined metric tiles with 48px numbers, a loose sentence, then two
   more outlined cards each carrying its own header — six blocks of chrome
   around three numbers and two settings. Now a headline and one card. */
.ci-rv-head{display:flex;align-items:baseline;gap:10px;padding:2px 0 0}
.ci-rv-n{font-size:30px;font-weight:600;letter-spacing:-.02em;
  color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.ci-rv-t{font-size:14px;color:var(--text-secondary);display:flex;
  align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.ci-rv-src{font-size:12px;color:var(--text-tertiary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Everything that will not be imported, as one line of chips rather than as
   tiles competing with the number that matters. */
.ci-rv-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ci-rv-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border-radius:7px;background:var(--surface-panel);color:var(--text-secondary);
  font-size:12px;white-space:nowrap}
.ci-rv-chip b{font-weight:600;color:var(--text-primary);
  font-variant-numeric:tabular-nums}
.ci-rv-chip.bad{background:#FEF3F2;color:#B42318}
.ci-rv-chip.bad b{color:#912018}
.ci-rv-chips .ci-link{margin-left:2px}

/* One card, two sections, split by a rule instead of by a second border. */
.ci-rv-card{margin-top:16px;padding:0}
.ci-rv-sec{padding:16px 18px}
.ci-rv-sec + .ci-rv-sec{border-top:1px solid var(--border)}
.ci-rv-lab{display:flex;align-items:center;gap:8px;margin-bottom:11px;
  font-size:13px;font-weight:600;color:var(--text-primary)}
.ci-rv-segrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ci-rv-seghint{flex:1 1 200px;min-width:0;font-size:12px;line-height:1.5;
  color:var(--text-secondary);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ci-rv-seghint b{font-weight:600;color:var(--text-secondary)}
.ci-rv-seghint .jc-tag{font-size:10.5px}