/* web/polish-people.css: the people area in the new view (release 350). Every rule under html[data-ux="new"]; the Classic view is untouched.
   Screens: the person page (web/person-page.js), People › Groups (web/network-groups.js), People › Import (web/import.js),
   Contacts › To review (web/contact-review.js) and the Sources panel (web/contact-sources.js). Theme tokens only. */

/* ======================================================================================================
   THE PERSON PAGE: a profile header (band, photo, name, headline, where, platforms, tier/stage badges),
   then calm cards with sentence-case headings, a timeline on a rail, and on a phone one column in the order
   he uses it (message, matches to review, stage/tags/follow-up, timeline, identities, notes).
   ====================================================================================================== */
html[data-ux="new"] .pp-topbar { margin: 0 0 12px; }
html[data-ux="new"] .pp-topbar .pp-back {
  min-height: 36px; padding: 0 10px 0 4px; border: 0; background: none; box-shadow: none;
  color: var(--blue); font-size: 14px; font-weight: 600;
}
html[data-ux="new"] .pp-topbar .pp-back:hover { background: var(--blue-tint); }

html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp { gap: 16px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) :is(.pp-head, .pp-sec) {
  border-radius: var(--ds-radius); box-shadow: none; border-color: var(--line);
}

/* -- the header -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head {
  position: relative; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; padding: 0 24px 22px; overflow: hidden;
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head::before {
  content: ""; flex: 0 0 calc(100% + 48px); height: 72px; margin: 0 -24px;
  background: linear-gradient(120deg, var(--blue-tint), var(--surface-soft));
  border-bottom: 1px solid var(--line-soft);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head > .pp-avatar--lg {
  width: 104px; height: 104px; margin-top: -48px; font-size: 34px; font-weight: 700;
  border: 4px solid var(--card); background: var(--blue-tint); color: var(--blue);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-who { padding-top: 14px; flex: 1 1 320px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-name { font-size: 24px; font-weight: 700; line-height: 1.25; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-name:focus { outline: none; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-headline { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink); max-width: 80ch; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-about { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-addr { margin-top: 10px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-addr-k { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-addr-v { font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-addr-src { font-size: 13px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-plats { gap: 8px; margin-top: 12px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-plat { width: 32px; height: 32px; border-radius: 50%; background: var(--card); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badges { gap: 8px; margin-top: 12px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badge {
  min-height: 26px; padding: 3px 11px; font-size: 13px; font-weight: 600; background: var(--surface-soft); color: var(--ink-soft);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badge--tier { background: var(--blue-tint); color: var(--blue); border-color: transparent; font-weight: 700; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badge.is-due { background: var(--amber-tint); color: var(--amber); border-color: var(--amber-line); }
/* "2 possible matches to review": the To review badge */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badge--review {
  background: var(--amber-tint); color: var(--amber); border-color: var(--amber-line); font-weight: 700;
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-badge--review:hover:not(:disabled) { border-color: var(--amber); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head-acts { margin-top: 16px; }

/* -- sections -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sec { padding: 18px 20px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root, .pp-dialog--src) .pp-h {
  margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sec-head { margin-bottom: 10px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-h4 { margin: 16px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note { font-size: 13.5px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-disclaimer { font-size: 12.5px; line-height: 1.5; }

/* -- message -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-draft-say { font-size: 13px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-draft { min-height: 104px; border-radius: var(--ds-radius-sm); font-size: 14px; line-height: 1.5; }

/* -- timeline: one rail, an icon on it per row -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-chips { gap: 8px; margin-bottom: 12px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-chip {
  min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 600; background: var(--card); color: var(--ink-soft);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-chip.is-on { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-list { position: relative; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-list::before {
  content: ""; position: absolute; top: 18px; bottom: 18px; left: 15px; width: 2px; background: var(--line-soft); border-radius: 1px;
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row { position: relative; gap: 14px; padding: 0; border-top: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row .pp-tl-ico { margin-top: 10px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row .pp-tl-body { padding: 12px 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row:first-child .pp-tl-ico { margin-top: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row:first-child .pp-tl-body { padding-top: 2px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-row + .pp-tl-row .pp-tl-body { border-top: 1px solid var(--line-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-ico {
  position: relative; z-index: 1; width: 32px; height: 32px; background: var(--card); border-color: var(--line);
}
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-sub { font-size: 12.5px; gap: 2px 8px; align-items: baseline; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-ch { font-weight: 600; font-size: 13px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-when { margin-left: auto; color: var(--ink-faint); white-space: nowrap; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-sum { margin-top: 4px; font-size: 14px; line-height: 1.5; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-foot { margin-top: 8px; }

/* -- same person? -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sugg { border-color: var(--amber-line); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg:last-child { padding-bottom: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg-name { font-size: 14.5px; font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg-id { gap: 3px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg-why { margin-top: 8px; font-size: 13px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sg-acts { margin-top: 10px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-avatar--sm { width: 36px; height: 36px; font-size: 12px; }

/* -- identities: a list with dividers, the platform as a row label -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-idg { margin-top: 0; padding: 10px 0; border-top: 1px solid var(--line-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-idg:first-child { border-top: 0; padding-top: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-idg-k { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id { padding: 4px 0 4px 22px; border-bottom: 0; align-items: center; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id-v { font-size: 14px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id-meta { font-size: 12.5px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id-x { width: 32px; height: 32px; border-radius: 50%; border-color: transparent; color: var(--ink-faint); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id-x:hover { background: var(--red-tint); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-recs { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-rec { padding: 8px 0; gap: 10px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-rec + .pp-rec { border-top: 1px solid var(--line-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-rec-name { font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-rec-main { font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) :is(.pp-id-form, .pp-ids-search) { border-radius: var(--ds-radius-sm); }

/* -- stage, tags, follow-up -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-crm-row { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line-soft); }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-h + .pp-crm-row { border-top: 0; padding-top: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-crm-k { font-size: 13px; font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tag { padding: 3px 4px 3px 11px; font-size: 13px; font-weight: 600; }

/* -- notes -- */
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-item { padding: 12px 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-item:first-child { padding-top: 0; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-body { font-size: 14px; line-height: 1.5; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-meta { margin-top: 4px; font-size: 12.5px; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-del { font-weight: 600; }
html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-input { border-radius: var(--ds-radius-sm); }

/* -- a laptop: the side column a little narrower beside the timeline -- */
@media (min-width: 1100px) {
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-cols { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
}

/* -- a phone -- */
@media (max-width: 640px) {
  /* one column, in the order he uses it */
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-cols { display: flex; flex-direction: column; gap: 12px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) :is(.pp-main, .pp-side) { display: contents; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-act { order: 1; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sugg { order: 2; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-crm { order: 3; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl { order: 4; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-ids { order: 5; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-notes { order: 6; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp { gap: 12px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head { flex-direction: row; gap: 0 16px; padding: 0 16px 18px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head::before { flex-basis: calc(100% + 32px); height: 56px; margin: 0 -16px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-head > .pp-avatar--lg { width: 80px; height: 80px; margin-top: -36px; font-size: 26px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-who { flex-basis: 100%; padding-top: 10px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-name { font-size: 21px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-sec { padding: 16px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tl-when { margin-left: 0; }
  /* taps: 44 px */
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp :is(.btn, .ca-btn, .pp-chip, .pp-badge--review, .pp-card-open, .pp-id-x, select, input:not([type=checkbox]):not([type=radio])) { min-height: 44px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-id-x { width: 44px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-tag-x { width: 32px; height: 32px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-note-del { min-height: 44px; padding: 0 8px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-rec-open { min-height: 44px; }
  html[data-ux="new"] .pp-topbar .pp-back { min-height: 44px; }
  html[data-ux="new"] :is(.pp-host, .pp-person-root) .pp-card-open { width: 100%; justify-content: center; text-align: center; }
}

/* ======================================================================================================
   SOURCES (a panel over the page): calm cards, sentence-case headings.
   ====================================================================================================== */
html[data-ux="new"] .pp-dialog--src .pp-src-sec { border-radius: var(--ds-radius); box-shadow: none; padding: 16px 18px; }
html[data-ux="new"] .pp-dialog--src .pp-src-head { gap: 10px; margin-bottom: 8px; }
html[data-ux="new"] .pp-dialog--src .pp-src-head .pp-h { margin: 0; }
html[data-ux="new"] .pp-dialog--src .pp-src-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--line); }
html[data-ux="new"] .pp-dialog--src .pp-src-steps { font-size: 13.5px; line-height: 1.5; }
html[data-ux="new"] .pp-dialog--src :is(.pp-src-up, .pp-src-connect) { border-top-style: solid; border-top-color: var(--line-soft); }
html[data-ux="new"] .pp-dialog--src .pp-src-pick { font-size: 13px; font-weight: 600; }
html[data-ux="new"] .pp-dialog .pp-dialog-close { border-radius: 50%; width: 40px; height: 40px; }
@media (max-width: 640px) {
  html[data-ux="new"] .pp-dialog--src :is(.btn, .pp-src-owner) { min-height: 44px; }
  html[data-ux="new"] .pp-dialog .pp-dialog-close { width: 44px; height: 44px; }
}

/* ======================================================================================================
   PEOPLE › GROUPS: on a laptop the builder on the left and his groups as one list on the right;
   a group's own page with a clear header. On a phone, one column.
   ====================================================================================================== */
html[data-ux="new"] .ng .ng-intro { font-size: 14px; line-height: 1.55; max-width: 72ch; }
html[data-ux="new"] .ng .ng-h3 { font-size: 16px; font-weight: 700; }
html[data-ux="new"] .ng :is(.ng-builder, .ng-edit, .ng-pairs, .ng-idea) { border-radius: var(--ds-radius); box-shadow: none; }
html[data-ux="new"] .ng > .ng-builder { padding: 20px 22px; }
html[data-ux="new"] .ng .ng-k { font-weight: 600; }

/* his groups: one card, a row each, dividers */
html[data-ux="new"] .ng .ng-saved-list { display: block; border: 1px solid var(--line); border-radius: var(--ds-radius); background: var(--card); overflow: hidden; }
html[data-ux="new"] .ng .ng-saved-list > li + li { border-top: 1px solid var(--line-soft); }
html[data-ux="new"] .ng .ng-saved-item { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 14px 18px; gap: 6px; color: var(--ink); }
html[data-ux="new"] .ng .ng-saved-item:hover { background: var(--surface-soft); }
html[data-ux="new"] .ng .ng-saved-item:focus-visible { outline-offset: -2px; }
html[data-ux="new"] .ng .ng-saved-name { font-size: 15px; font-weight: 600; }
html[data-ux="new"] .ng .ng-saved-top { align-items: center; flex-wrap: nowrap; }
html[data-ux="new"] .ng .ng-saved-tags { flex: 0 0 auto; }
html[data-ux="new"] .ng :is(.ng-badge, .ng-kind) { font-size: 12px; font-weight: 600; }
html[data-ux="new"] .ng .ng-saved-names { font-size: 13px; }
html[data-ux="new"] .ng .ng-saved-when { font-size: 12.5px; }
html[data-ux="new"] .ng .ng-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: var(--ds-radius); color: var(--ink-soft); }

@media (min-width: 1100px) {
  html[data-ux="new"] .ng:has(> .ng-saved) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-rows: auto 1fr; gap: 16px 28px; align-items: start;
  }
  html[data-ux="new"] .ng:has(> .ng-saved) > .ng-intro { grid-column: 1; grid-row: 1; }
  html[data-ux="new"] .ng:has(> .ng-saved) > .ng-builder { grid-column: 1; grid-row: 2; margin: 0; }
  html[data-ux="new"] .ng:has(> .ng-saved) > .ng-saved { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* the search's people: one list, dividers */
html[data-ux="new"] .ng .ng-found:not(:empty) { gap: 0; border: 1px solid var(--line); border-radius: var(--ds-radius-sm); background: var(--card); overflow: hidden; }
html[data-ux="new"] .ng .ng-found > .ng-row { border: 0; border-radius: 0; background: none; padding: 10px 12px; }
html[data-ux="new"] .ng .ng-found > .ng-row + .ng-row { border-top: 1px solid var(--line-soft); }
html[data-ux="new"] .ng .ng-row-name { font-weight: 600; }

/* one group */
html[data-ux="new"] .ng .ng-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 4px; border: 0; border-radius: var(--ds-radius-sm);
  background: none; color: var(--blue); font-size: 14px; font-weight: 600; text-decoration: none; }
html[data-ux="new"] .ng .ng-back:hover { background: var(--blue-tint); }
html[data-ux="new"] .ng .ng-back:focus:not(:focus-visible) { outline: none; box-shadow: none; }
html[data-ux="new"] .ng .ng-title { font-size: 24px; font-weight: 700; }
html[data-ux="new"] .ng .ng-summary { font-size: 15px; line-height: 1.55; max-width: 80ch; }
html[data-ux="new"] .ng .ng-idea-title { font-weight: 700; }

@media (max-width: 640px) {
  html[data-ux="new"] .ng > .ng-builder { padding: 16px; }
  html[data-ux="new"] .ng .ng-saved-item { padding: 14px 16px; }
  html[data-ux="new"] .ng .ng-saved-top { flex-wrap: wrap; }
  html[data-ux="new"] .ng .ng-back { min-height: 44px; }
  html[data-ux="new"] .ng .ng-title { font-size: 21px; }
}

/* ======================================================================================================
   PEOPLE › IMPORT: a clear drop target with a drawn icon (no glyph), his imports as one list with dividers.
   ====================================================================================================== */
html[data-ux="new"] [data-view-panel="import"] .imp-lede { max-width: 72ch; }
html[data-ux="new"] [data-view-panel="import"] .imp-h3 { font-size: 16px; font-weight: 700; }
html[data-ux="new"] [data-view-panel="import"] .imp-howto { border-radius: var(--ds-radius); padding: 0; }
html[data-ux="new"] [data-view-panel="import"] .imp-howto > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 18px; font-weight: 600; }
html[data-ux="new"] [data-view-panel="import"] .imp-howto > :not(summary) { margin-left: 18px; margin-right: 18px; }
html[data-ux="new"] [data-view-panel="import"] .imp-howto[open] { padding-bottom: 14px; }
html[data-ux="new"] [data-view-panel="import"] .imp-drop { border: 1.5px dashed var(--line); border-radius: var(--ds-radius); background: var(--card); padding: 36px 20px; }
html[data-ux="new"] [data-view-panel="import"] .imp-drop.is-over { border-color: var(--blue); background: var(--blue-tint); }
html[data-ux="new"] [data-view-panel="import"] .imp-drop-ico {
  position: relative; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; font-size: 0; color: transparent; background: var(--blue-tint);
}
html[data-ux="new"] [data-view-panel="import"] .imp-drop-ico::after {
  content: ""; position: absolute; inset: 12px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0L7 8m5-5 5 5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0L7 8m5-5 5 5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ux="new"] [data-view-panel="import"] .imp-drop-title { font-size: 17px; font-weight: 700; }
html[data-ux="new"] [data-view-panel="import"] .imp-drop-sub { font-size: 14px; }
html[data-ux="new"] [data-view-panel="import"] .imp-card { border-radius: var(--ds-radius); box-shadow: none; }
/* his imports: one card, dividers */
html[data-ux="new"] [data-view-panel="import"] .imp-history:has(> .imp-hist) { border: 1px solid var(--line); border-radius: var(--ds-radius); background: var(--card); overflow: hidden; }
html[data-ux="new"] [data-view-panel="import"] .imp-history > .imp-hist { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
html[data-ux="new"] [data-view-panel="import"] .imp-history > .imp-hist + .imp-hist { border-top: 1px solid var(--line-soft); }
html[data-ux="new"] [data-view-panel="import"] .imp-hist-sum { min-height: 48px; padding: 8px 16px; box-sizing: border-box; }
html[data-ux="new"] [data-view-panel="import"] .imp-hist-sum:hover { background: var(--surface-soft); }
html[data-ux="new"] [data-view-panel="import"] .imp-hist-when { font-weight: 600; }
html[data-ux="new"] [data-view-panel="import"] .imp-hist .imp-lines { padding: 0 16px 12px; }
html[data-ux="new"] [data-view-panel="import"] .imp-catalog { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--ds-radius); background: var(--card); }
html[data-ux="new"] [data-view-panel="import"] .imp-catalog > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 18px; cursor: pointer; font-weight: 600; }
html[data-ux="new"] [data-view-panel="import"] .imp-catalog > :not(summary) { margin: 0 18px 14px; }
html[data-ux="new"] [data-view-panel="import"] .imp-gallery-wrap .chip { min-height: 34px; padding: 0 14px; }
@media (max-width: 640px) {
  html[data-ux="new"] [data-view-panel="import"] .imp-gallery-wrap .chip { min-height: 44px; }
  html[data-ux="new"] [data-view-panel="import"] .imp-drop { padding: 24px 16px; }
  html[data-ux="new"] [data-view-panel="import"] .imp-drop-actions > .btn { flex: 1 1 100%; min-height: 44px; }
}

/* ======================================================================================================
   CONTACTS › TO REVIEW (full-screen flash cards): the cards on the page's radius.
   ====================================================================================================== */
html[data-ux="new"] .cr .cr-card { border-radius: var(--ds-radius); box-shadow: none; }
html[data-ux="new"] .cr .cr-h { font-weight: 700; }
@media (max-width: 640px) {
  html[data-ux="new"] .cr .cr-head .cr-fullbtn { margin-left: auto; }
}

/* ============ 350b: the group chip off the person page's right column (owner 2026-10-29: "fix everything") ============
   web/network-groups.js's floating chip ("<group>: Claude is writing… · Open") sat bottom right, over the person page's
   right column (identities, each with its ×), which stays put while the timeline scrolls, so nothing scrolled it clear.
   Wider than a phone it sits bottom LEFT, over the column that scrolls (every page keeps 140 px of room for it at its
   end), still over the back-to-top button. A phone keeps mobile.css's place above the bottom bar. */
@media (min-width: 821px) {
  html[data-ux="new"] .ng-dock { right: auto; left: 16px; align-items: flex-start; }
}