/* ══════════ «Импорт контактов» (js/import.js, A5Import.open; DESIGN-CALM §20) ══════════
   [M Attio «Importing a CSV»] one wide window: the steps in a crumb row, the step's body, a footer with the buttons.
   Calm: blue only on the primary button, links and the drop zone while a file is over it. The settings rows reuse
   .ndp-* of «Новая сделка» (newdeal.css, loaded before this file). */

.imp-modal{height:min(800px,calc(100vh - 48px));max-height:calc(100vh - 48px)}
.imp-modal .modal-h{min-height:56px}
.imp-modal .modal-b{display:flex;padding:0;overflow:hidden}
.imp{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-height:0}

/* steps */
.imp-steps{display:flex;align-items:center;gap:2px;min-width:0;padding:0 16px 10px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.imp-st{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 8px 0 4px;border-radius:var(--radius-s);font:var(--t-body-medium);color:var(--text-3);white-space:nowrap}
.imp-st .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:var(--t-caption-strong);background:var(--surface-offset);color:var(--text-3);box-shadow:inset 0 0 0 1px var(--border-soft)}
.imp-st .n .ic{width:12px;height:12px;stroke-width:2.4}
.imp-st.on{color:var(--text-strong)}
.imp-st.on .n{background:var(--surface-inverse);color:var(--on-inverse);box-shadow:none}
.imp-st.done{color:var(--text-2)}
.imp-st.done .n{background:var(--surface-pressed);color:var(--text-2)}
.imp-st:not([disabled]):not(.on):hover{background:var(--surface-hover-raised);color:var(--text-strong)}
.imp-st[disabled]{cursor:default}
.imp-st:focus-visible{box-shadow:var(--focus-ring)}
.imp-ch{width:12px;height:12px;color:var(--text-4, var(--text-3));flex:none}
.imp-file{display:inline-flex;align-items:center;gap:6px;min-width:0;margin-left:auto;font:var(--t-caption);color:var(--text-3)}
.imp-file .ic{width:14px;height:14px;flex:none}
.imp-file span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.imp-b{min-height:0;overflow:auto}

/* footer */
.imp-f{display:flex;align-items:center;gap:8px;min-height:60px;padding:0 16px;background:var(--surface-raised);box-shadow:inset 0 1px 0 var(--border)}
.imp-note{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto;font:var(--t-caption);color:var(--text-3)}
.imp-note .ic{width:14px;height:14px;flex:none;color:var(--warning)}
.imp-note.warn{color:var(--text-2)}
.imp-note .live-spin{width:12px;height:12px}

/* ── 1 · the file ── */
.imp-b1{display:grid;justify-items:center;align-content:safe center;padding:28px 16px 40px}
.imp-one{display:grid;gap:14px;width:min(600px,100%)}
.imp-drop{display:grid;justify-items:center;gap:6px;padding:36px 24px 32px;border-radius:var(--radius-m);text-align:center;cursor:pointer;
  background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow var(--dur-1),background var(--dur-1)}
.imp-drop:hover{box-shadow:inset 0 0 0 1px var(--border-strong);background:var(--surface-offset-hover, var(--surface-offset))}
.imp-drop:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--border-strong),var(--focus-ring)}
.imp-drop.is-over{background:color-mix(in srgb,var(--accent) 7%,var(--surface-offset));box-shadow:inset 0 0 0 1.5px var(--accent)}
.imp-di{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;background:var(--surface-raised);color:var(--icon-strong);box-shadow:var(--shadow-1)}
.imp-di .ic{width:20px;height:20px}
.imp-drop b{font:var(--t-body-medium);color:var(--text-strong)}
.imp-drop u{text-decoration:none;color:var(--link)}
.imp-drop:hover u{text-decoration:underline;text-underline-offset:3px}
.imp-drop small{font:var(--t-caption);color:var(--text-3)}
.imp.is-busy .imp-drop{opacity:.6;pointer-events:none}
.imp-or{display:flex;align-items:center;gap:12px;font:var(--t-caption);color:var(--text-3)}
.imp-or::before,.imp-or::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.imp-paste{display:block;width:100%;min-height:92px;padding:8px 10px;border:0;border-radius:var(--radius-s);resize:vertical;background:var(--surface-raised);
  box-shadow:inset 0 0 0 1px var(--control-border, var(--border));font:var(--t-body);color:var(--text-strong);outline:0}
.imp-paste::placeholder{color:var(--text-3)}
.imp-paste:hover{box-shadow:inset 0 0 0 1px var(--control-border-hover, var(--border-strong))}
.imp-paste:focus{box-shadow:inset 0 0 0 1px var(--focus-color)}
.imp-hint{display:flex;gap:8px;margin:0;font:var(--t-caption);color:var(--text-3)}
.imp-hint .ic{flex:none;width:14px;height:14px;margin-top:1px}
.imp-err{margin:0;padding:8px 10px;border-radius:var(--radius-s);background:var(--banner-critical-bg);box-shadow:inset 0 0 0 1px var(--banner-critical-border);font:var(--t-body);color:var(--text-strong)}
.imp-past{margin-top:10px}
.imp-past h4{margin:0 0 4px;font:var(--t-caption-strong);color:var(--text-3)}
.imp-pi{display:flex;align-items:center;gap:12px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--border-soft)}
.imp-pi:last-child{box-shadow:none}
.imp-pf{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--radius-s);background:var(--surface-offset);color:var(--icon)}
.imp-pf .ic{width:16px;height:16px}
.imp-pt{display:grid;gap:1px;min-width:0;flex:1}
.imp-pt b{font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-pt small{font:var(--t-caption);color:var(--text-3)}
.imp-undo{flex:none}

/* ── 2 · the columns ── */
.imp-b2{display:grid;grid-template-columns:minmax(0,1fr) 340px;overflow:hidden}
.imp-mapw{min-height:0;overflow:auto;padding:12px 16px 16px}
.imp-bar{display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:6px}
.imp-cnt{font:var(--t-body);color:var(--text-2)}
.imp-cnt b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.imp-sheet .ic:last-child{width:12px;height:12px;margin-left:2px}
.imp-sp{flex:1}
.imp-chk{display:inline-flex;align-items:center;gap:8px;font:var(--t-body);color:var(--text-2);cursor:pointer;user-select:none}
.imp-chk input{width:14px;height:14px;margin:0;accent-color:var(--accent)}
.imp-mh,.imp-mr{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(200px,280px);align-items:center;column-gap:8px}
.imp-mh{height:32px;padding:0 8px;font:var(--t-caption-strong);color:var(--text-3);box-shadow:inset 0 -1px 0 var(--border)}
.imp-mr{min-height:54px;padding:6px 8px;border-radius:var(--radius-s);box-shadow:inset 0 -1px 0 var(--border-soft);transition:background-color var(--dur-1) linear}
.imp-mr.on{background:var(--surface-hover)}
.imp-mc{display:grid;gap:2px;min-width:0}
.imp-mc b{font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-mc small{font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-ar{width:14px;height:14px;justify-self:center;color:var(--text-3)}
.imp-fb{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 8px 0 10px;border-radius:var(--radius-s);background:var(--btn-bg);
  box-shadow:var(--shadow-control),0 0 0 1px var(--border);font:var(--t-body);color:var(--text-strong);text-align:left;transition:box-shadow var(--dur-1),background var(--dur-1)}
.imp-fb > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-fb .ic{flex:none;width:14px;height:14px;color:var(--icon)}
.imp-fb .imp-dn{width:12px;height:12px;margin-left:auto;color:var(--text-3)}
.imp-fb:hover{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.imp-fb[aria-expanded="true"]{background:var(--surface-pressed);box-shadow:0 0 0 1px var(--border-strong)}
.imp-fb:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.imp-fb.is-skip{background:transparent;box-shadow:0 0 0 1px var(--border-soft);color:var(--text-3)}
.imp-fb.is-skip .ic{color:var(--text-3)}
.imp-pv{min-height:0;overflow:auto;padding:16px;background:var(--surface-sunken);box-shadow:inset 1px 0 0 var(--border-soft)}
.imp-pv h4{display:grid;gap:2px;margin:0 0 10px}
.imp-pv h4 span{font:var(--t-body-strong);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-pv h4 small{font:var(--t-caption);color:var(--text-3)}
.imp-vals{margin:0;padding:0;list-style:none;border-radius:var(--radius-s);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border-soft)}
.imp-vals li{padding:8px 10px;font:var(--t-body);color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 -1px 0 var(--border-soft)}
.imp-vals li:last-child{box-shadow:none}
.imp-vals.num li{font-variant-numeric:tabular-nums}
.imp-vals .muted{color:var(--text-3)}
.imp-pn{margin:10px 2px 0;font:var(--t-caption);color:var(--text-3)}

/* ── 3 · the check ── */
.imp-b3{display:grid;grid-template-columns:380px minmax(0,1fr);overflow:hidden}
.imp-set{min-height:0;overflow:auto;padding:14px 12px 16px;box-shadow:inset -1px 0 0 var(--border-soft)}
.imp-set h4{margin:0 8px 8px;font:var(--t-caption-strong);color:var(--text-3)}
.imp-set .ndp-r{grid-template-columns:140px minmax(0,1fr)}
.imp-expl{margin:14px 8px 0;font:var(--t-caption);color:var(--text-3)}
.imp-rv{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0}
.imp-tabs{display:flex;gap:24px;padding:14px 16px 0;box-shadow:inset 0 -1px 0 var(--border)}
.imp-tabs .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--tab-ink)}
.imp-tabs .tab[disabled]{color:var(--text-3);cursor:default}
.imp-tw{min-height:0;overflow:auto}
.imp-t{width:100%;border-collapse:collapse;font:var(--t-body)}
.imp-t th{position:sticky;top:0;z-index:1;height:36px;padding:0 12px;text-align:left;font:var(--t-caption-strong);color:var(--text-3);background:var(--surface-raised);box-shadow:inset 0 -1px 0 var(--border);white-space:nowrap}
.imp-t td{max-width:240px;padding:9px 12px;color:var(--text);box-shadow:inset 0 -1px 0 var(--border-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.imp-t tr:hover td{background:var(--surface-hover)}
.imp-t .ln{width:44px;padding-right:0;color:var(--text-3);font-variant-numeric:tabular-nums}
.imp-t .num{font-variant-numeric:tabular-nums}
.imp-t .muted{color:var(--text-3)}
.imp-t a{color:var(--link);text-decoration:none}
.imp-t a:hover{text-decoration:underline;text-underline-offset:3px}
.imp-why{max-width:320px}
.imp-w{display:inline-flex;vertical-align:-2px;color:var(--warning)}
.imp-w .ic{width:14px;height:14px}
.imp-more{margin:0;padding:12px 16px;font:var(--t-caption);color:var(--text-3)}

@media (max-width:900px){
  .imp-b2{grid-template-columns:minmax(0,1fr)}
  .imp-pv{display:none}
  .imp-b3{grid-template-columns:minmax(0,1fr);overflow:auto}
  .imp-set{overflow:visible;box-shadow:inset 0 -1px 0 var(--border-soft)}
  .imp-mh,.imp-mr{grid-template-columns:minmax(0,1fr) 20px minmax(150px,1fr)}
}