/* ═══ Source picker ═══════════════════════════════════════════════════════
   Three parts, each doing one job.

     a segmented control   which of the three sources
     a value row           what you picked, readable without opening anything
     a chooser             search, grouped, with a face or a glyph on every row

   The flat dropdown it replaces put twelve segments and eight people in one
   list with nothing between them — a segment and a person are not the same
   kind of thing and the list said they were.
   ────────────────────────────────────────────────────────────────────────── */
.jc-src{display:flex;flex-direction:column;gap:14px}

/* ── The segmented control ──
   One control with three states rather than three objects competing. Active
   is a white pill on a grey track — no fill, no colour. */
.jc-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:3px;border-radius:10px;background:var(--surface-alt);
  border:1px solid var(--border);
}
.jc-seg-b{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 10px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:500 13px/1 'Inter',sans-serif;color:var(--text-secondary);
  min-width:0;transition:background-color .14s ease,color .14s ease;
}
.jc-seg-b svg{flex:0 0 15px;width:15px;height:15px;display:block}
/* line-height has to clear the descenders: the button sets 13px/1, so the
   span's line box was the em box and overflow:hidden cut the tail off a g.
   The row is centred flex, so this does not change the control's height. */
.jc-seg-b span{line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-seg-b:hover{color:var(--text-primary)}
.jc-seg-b.on{background:var(--surface);color:var(--text-primary);border:1px solid var(--border)}
.jc-seg-b:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}

.jc-src-body{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ── Nothing picked yet ──
   A row rather than a select: it says what will happen, and it is the size of
   the thing that will replace it, so the panel does not jump. */
.jc-pick-e{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px;border:1px dashed var(--border-strong);border-radius:12px;
  background:none;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .14s ease,background-color .14s ease;
}
.jc-pick-e:hover{border-color:var(--brand-blue);background:var(--surface-alt)}
.jc-pick-ei{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-panel);color:var(--text-secondary);
}
.jc-pick-ei svg{width:18px;height:18px;display:block}
.jc-pick-et{display:block;font:600 14px/1.3 'Inter',sans-serif;color:var(--text-primary)}
.jc-pick-es{display:block;margin-top:3px;font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary)}

/* ── What was picked ── */
.jc-pick{
  display:flex;align-items:center;gap:12px;
  padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);
}
.jc-pick-ic{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-blue-soft);color:var(--brand-blue);
}
.jc-pick-ic svg{width:18px;height:18px;display:block}
/* Initials rather than a generic person glyph: a name is the most useful
   thing we know about a contact, so the mark may as well carry it. */
.jc-pick-av{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-panel);color:var(--text-secondary);
  font:600 13px/1 'Inter',sans-serif;
}
.jc-pick-b{flex:1 1 auto;min-width:0}
.jc-pick-t{display:block;font:600 14px/1.3 'Inter',sans-serif;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-pick-s{display:block;margin-top:3px;font:400 13px/1.4 'Inter',sans-serif;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.jc-pick-n{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;
  background:var(--surface-alt);
  font:600 13px/1 'Inter',sans-serif;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.jc-pick-ch{
  flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;
  font:500 13px/1.4 'Inter',sans-serif;color:var(--brand-blue);
}
.jc-pick-ch:hover{text-decoration:underline}

/* ── The chooser ── */
.jc-ch-top{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 12px 12px 16px;border-bottom:1px solid var(--border);
}
.jc-ch-top > svg{flex:0 0 16px;width:16px;height:16px;color:var(--text-tertiary)}
.jc-ch-q{
  flex:1 1 auto;min-width:0;height:28px;border:0;background:none;outline:0;padding:0;
  font:400 14px/1 'Inter',sans-serif;color:var(--text-primary);
}
.jc-ch-q::placeholder{color:var(--text-tertiary)}
.jc-ch-l{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px}
.jc-ch-h{
  padding:10px 10px 6px;
  font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.jc-ch-r{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:8px 10px;border:0;border-radius:9px;background:none;cursor:pointer;
  text-align:left;font:inherit;
}
.jc-ch-r:hover{background:var(--surface-alt)}
.jc-ch-r.on{background:var(--brand-blue-soft)}
.jc-ch-r .jc-pick-ic,.jc-ch-r .jc-pick-av{flex-basis:32px;width:32px;height:32px}
.jc-ch-r .jc-pick-ic svg{width:16px;height:16px}
.jc-ch-t{display:block;font:500 14px/1.3 'Inter',sans-serif;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-ch-s{display:block;margin-top:2px;font:400 13px/1.3 'Inter',sans-serif;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.jc-ch-n{flex:0 0 auto;font:600 13px/1 'Inter',sans-serif;color:var(--text-secondary);
  font-variant-numeric:tabular-nums}
.jc-ch-e{padding:20px 12px;font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary)}

/* An integration, once one is connected. */
.jc-src-pf{display:flex;flex-direction:column;gap:6px;min-width:0}
.jc-src-fl{font:500 13px/1.2 'Inter',sans-serif;color:var(--text-primary)}
.jc-src-ph{display:flex;align-items:center;gap:10px}
.jc-src-ph h4{flex:1 1 auto;min-width:0;margin:0;
  font:600 14px/1.35 'Inter',sans-serif;color:var(--text-primary)}
.jc-src-pl{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;background:var(--surface-alt);overflow:hidden}
.jc-src-pl img{width:17px;height:17px;display:block}
.jc-src-sw{flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;
  font:500 13px/1.4 'Inter',sans-serif;color:var(--brand-blue)}
.jc-src-sw:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.jc-seg-b,.jc-pick-e{transition:none}}
@media (max-width:900px){.jc-seg{grid-template-columns:1fr}}

body.theme-dark .jc-seg{background:var(--surface-alt);border-color:var(--border)}
body.theme-dark .jc-seg-b{color:var(--text-secondary)}
body.theme-dark .jc-seg-b.on{background:var(--surface);color:var(--text-primary)}
body.theme-dark .jc-pick,body.theme-dark .jc-pick-e{background:var(--surface)}
body.theme-dark .jc-pick-t,body.theme-dark .jc-pick-et,
body.theme-dark .jc-ch-t,body.theme-dark .jc-src-fl,
body.theme-dark .jc-src-ph h4,body.theme-dark .jc-ch-q{color:var(--text-primary)}
body.theme-dark .jc-pick-s,body.theme-dark .jc-pick-es,body.theme-dark .jc-ch-s,
body.theme-dark .jc-pick-n,body.theme-dark .jc-ch-n,body.theme-dark .jc-pick-av,
body.theme-dark .jc-pick-ei,body.theme-dark .jc-ch-e{color:var(--text-secondary)}
body.theme-dark .jc-ch-h,body.theme-dark .jc-ch-top > svg{color:var(--text-tertiary)}
body.theme-dark .jc-pick-ch,body.theme-dark .jc-src-sw{color:var(--brand-blue)}