/* Contacts — one list of people (web/contacts-list.js, Network · Contacts; docs/specs/CONTACTS_UNIFIED_CONTRACT.md).
   Owner, 2026-10-03: "Ideally there should be only one tab which is 'Contacts'. A person is a person which can have
   multiple profile". The bar (search, sort, Sources, Export CSV), the chips (Show: All · To review · Groups; On: the
   platforms; Degree; Viewed your profile; tier; Last talked; segment; stage; tag; follow-up), a row per person, Show more;
   and Network's boxes for To review and Groups, and Profile Browser's list standing in on a server without /api/contacts.
   Every colour is a theme token (styles.css :root, the dark theme re-declares them in studio-v2.css), so both themes
   follow; nothing is wider than a phone. */

.cl { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0 0 14px; }
.cl [hidden], .np-cview[hidden], .np-legacy[hidden], .np-contacts[hidden] { display: none !important; }

/* The bar: the search takes the room; sort, Sources and Export CSV their own width. */
.cl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cl-searchbox { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; margin: 0; }
.cl-search-ico { position: absolute; left: 11px; display: inline-flex; color: var(--ink-faint); pointer-events: none; }
/* Two classes deep: the global input[type=…] rule (styles.css) outweighs one class. */
.cl-searchbox .cl-search { width: 100%; min-width: 0; padding: 9px 12px 9px 34px; font-size: 14px; }
.cl-sort { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; }
.cl-sort .cl-sortsel, .cl-stage .cl-stagesel, .cl-tag .cl-tagsel, .cl-follow .cl-followsel { width: auto; min-width: 0; max-width: 100%;
  padding: 6px 30px 6px 11px; font-size: 13px; border-radius: var(--radius-pill); background-position: right 11px center; }
.cl-sources, .cl-export { flex: 0 0 auto; white-space: nowrap; }
.cl-sources { display: inline-flex; align-items: center; gap: 6px; }
.cl-export.is-busy { opacity: .7; }
.cl-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

/* The chips: Show (a view each), then the filters, wrapping on a narrow screen (never wider than it). */
.cl-views, .cl-cgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.cl-stage, .cl-tag, .cl-follow { margin: 0; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.cl-chip:hover { border-color: var(--blue); color: var(--ink); }
/* pressed: a filled tint AND a heavier ring, never colour alone */
.cl-chip[aria-pressed="true"], .cl-chip[aria-pressed="true"]:hover { border-color: var(--blue); background: var(--blue-tint); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--blue); }
.cl-chip:focus-visible, .cl-name:focus-visible, .cl-more:focus-visible, .cl-sources:focus-visible, .cl-export:focus-visible,
.np-cviews-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cl-n { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cl-chip[aria-pressed="true"] .cl-n { color: var(--ink); }
.cl-ico { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; }
.cl-ico svg { display: block; width: 16px; height: 16px; }
/* each platform in its own colour, as on a row */
.cl-plat--linkedin, .cl-plat--facebook { color: var(--blue); }
.cl-plat--whatsapp { color: var(--green); }
.cl-plat--google, .cl-plat--instagram { color: var(--red); }
.cl-plat--email, .cl-plat--phone, .cl-plat--other { color: var(--slate); }
.cl-chip--plat .cl-chip-t, .cl-chip--plat .cl-n { color: var(--ink-soft); }
.cl-chip--plat[aria-pressed="true"] .cl-chip-t, .cl-chip--plat[aria-pressed="true"] .cl-n { color: var(--ink); }
/* Degree, Viewed your profile, Last talked (release 323): a chip that would show nobody with the other filters is off
   (web/people-filter.css's own rule, so every list's bar looks alike); a pressed one never is. */
.cl-chip:disabled, .cl-chip:disabled:hover { opacity: .5; cursor: default; border-color: var(--line); color: var(--ink-soft); }

.cl-summary { margin: 0; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* A person: photo or initials, then name, headline · company, platforms and the last touch, stage / follow-up / tags. */
.cl-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: border-color var(--t-fast); }
.cl-row:hover { border-color: var(--blue); }
.cl-row.has-review { box-shadow: inset 3px 0 0 var(--amber), var(--shadow); }
.cl-row > .np-avatar, .cl-row > .cl-avatar { flex: 0 0 auto; margin-top: 2px; }
.cl-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cl-name { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink);
  text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.cl-name:hover { color: var(--blue); text-decoration: underline; }
.cl-review { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--amber-line); border-radius: var(--radius-pill);
  background: var(--amber-tint); color: var(--ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cl-sub { font-size: 13px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--ink-soft); min-width: 0; }
.cl-plats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-plat { display: inline-flex; }
.cl-touch, .cl-loc { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cl-ctl { margin-top: 4px; cursor: auto; min-width: 0; }
.cl-crm-ro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.cl-crm-stage, .cl-crm-fu { font-weight: 600; }
.cl-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 34px; height: 34px;
  border: 1px solid var(--slate-line); border-radius: 50%; background: var(--slate-tint); color: var(--ink); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; user-select: none; }
.cl-avatar-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* More, the empty list, and what went wrong. */
.cl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-moreinfo { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cl-err { color: var(--red); font-size: 13px; }
.cl-err p { margin: 0 0 8px; overflow-wrap: anywhere; }
.cl-empty, .cl-none { padding: 18px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--card);
  font-size: 13.5px; color: var(--ink-soft); }
.cl-none p { margin: 0 0 8px; overflow-wrap: anywhere; }
.cl-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.cl-empty p { margin: 0; }
.cl-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Network's own pieces around the list: the views as links (a page without web/contacts-list.js) and the status line's
   way to the chats waiting for his pick. A person's page is web/person-page.js's (person-page.css). */
.np-cviews { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.np-cviews-link { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.np-cviews-link[aria-current="page"] { border-color: var(--blue); background: var(--blue-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }
.np-cview { min-width: 0; }
.np-wa-topick { margin: 4px 0 0; font-size: 13px; }
.np-wa-topicklink { font-weight: 600; color: var(--blue); }

@media (max-width: 640px) {
  .cl-bar > .cl-searchbox { flex: 1 1 100%; }
  /* the sort's word goes (its box says "Sort by" to a screen reader): sort, Sources and Export CSV on one row */
  .cl-sort > .cl-k { display: none; }
  .cl-filters { gap: 8px 10px; }
  .cl-chip { padding: 4px 10px; font-size: 12.5px; }
  .cl-row { gap: 10px; padding: 10px 12px; }
  .cl-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-chip, .cl-row { transition: none; }
}