/* Network · Groups (web/network-groups.js; docs/specs/NETWORK_GROUP_SYNERGY.md). Owner, 2026-10-04: "search people from
   my network and add up to 6 people and see what's best startup or initiative these group can do which will have high
   chance of success." The builder (name, "Include me", the people as chips, the search, focus, Save and Find), his saved
   groups, and one group: the run's words, who pairs best, the three ideas with their messages; and "Add to group" in a
   contact's window. Every colour is a theme token (styles.css :root, re-declared for the dark theme in studio-v2.css), so
   both themes follow; nothing is wider than the screen (the grid of pairs scrolls inside its own box if it ever must);
   at phone width every control is at least 44 px (phone-a11y.css does the .btn ones). */

.ng { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0 0 18px; }
.ng [hidden], .ng-addpanel[hidden] { display: none !important; }
.ng-intro { margin: 0; max-width: 82ch; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.ng-h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.ng-h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.ng-h5 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.ng-k { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.ng-err { color: var(--red); }
.ng-empty { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.ng-ico { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; }
.ng-ico svg { display: block; width: 16px; height: 16px; }

/* A face: initials, their photo over them. */
.ng-face { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden;
  width: 32px; height: 32px; border: 1px solid var(--slate-line); border-radius: 50%; background: var(--slate-tint); color: var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; user-select: none; }
.ng-face--me { border-color: var(--blue); background: var(--blue-tint); font-size: 9.5px; text-transform: none; letter-spacing: .02em; }
.ng-face-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- the builder ---- */
.ng-builder, .ng-edit, .ng-pairs, .ng-idea { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow); }
.ng-builder { padding: 18px 20px; }
.ng-edit > .ng-builder { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.ng-edit > summary { display: flex; align-items: center; min-height: 44px; padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--ink);
  cursor: pointer; list-style-position: inside; }
.ng-field { display: flex; flex-direction: column; min-width: 0; margin: 0 0 14px; }
.ng-field .ng-k { margin-bottom: 6px; }
.ng-field .hint { margin: 6px 0 0; }
.ng-builder .ng-focus { min-height: 64px; }
.ng-me { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; }
.ng-me-hint { margin: 2px 0 14px; }
.ng-people { min-width: 0; }
.ng-count { font-variant-numeric: tabular-nums; }
.ng-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 14px; padding: 0; list-style: none; }
.ng-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 3px 4px 3px 3px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink); }
.ng-chip--me { min-height: 40px; padding: 0 14px; border-color: var(--blue); background: var(--blue-tint); }
.ng-chip-name { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; max-width: 24ch; }
.ng-chip-x { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.ng-chip-x:hover { background: var(--red-tint); color: var(--red); }
.ng-chip-none { align-self: center; font-size: 13px; color: var(--ink-soft); }

.ng-search { min-width: 0; margin: 0 0 14px; }
.ng-search-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ng-search-row .ng-by { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; }
.ng-qbox { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; }
.ng-qbox > .ng-ico { position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none; }
/* two classes deep: the global input[type=search] rule (styles.css) outweighs one class */
.ng-qbox .ng-q { width: 100%; min-width: 0; padding-left: 34px; }
.ng-found-msg { margin: 6px 0 0; }
.ng-found-msg:empty { margin: 0; }
.ng-found { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 6px 0 0; padding: 0; list-style: none; }
.ng-found:empty { margin: 0; }
.ng-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); }
.ng-row-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ng-row-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ng-row-sub { overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ng-row .ng-add { flex: 0 0 auto; }

.ng-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ng-need, .ng-say { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
.ng-need { color: var(--ink-soft); }
.ng-need:empty, .ng-say:empty { display: none; }

/* ---- his saved groups ---- */
.ng-saved { min-width: 0; }
.ng-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ng-saved-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 44px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast); }
.ng-saved-item:hover { border-color: var(--blue); text-decoration: none; }
.ng-saved-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.ng-saved-name { min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
/* release 342: up to 9 faces (6 founding members and 2 advisors, and him); with too many for the names beside them, the
   names go below the faces instead of a column a word wide */
.ng-saved-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ng-saved-names { flex: 1 1 8rem; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.ng-saved-when { font-size: 12px; color: var(--ink-faint); }
.ng-faces { display: inline-flex; flex: 0 0 auto; }
.ng-faces > .ng-face { box-shadow: 0 0 0 2px var(--card); }
.ng-faces > .ng-face + .ng-face { margin-left: -4px; }
/* a run's state in a word: a tint, a ring and the words, never colour alone */
.ng-badge { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--slate-line); border-radius: var(--radius-pill);
  background: var(--slate-tint); color: var(--ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ng-badge--reading, .ng-badge--analysing { border-color: var(--amber-line); background: var(--amber-tint); }
.ng-badge--ready { border-color: var(--green-line); background: var(--green-tint); }
.ng-badge--failed { border-color: var(--red-line); background: var(--red-tint); }

/* ---- one group ---- */
.ng-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 36px; padding: 0 6px 0 0; color: var(--blue);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.ng-back:hover { text-decoration: underline; }
.ng-head { min-width: 0; }
.ng-title { margin: 0 0 4px; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ng-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.ng-sub--focus { margin-top: 2px; }
.ng-status { min-width: 0; padding: 12px 14px; border: 1px solid var(--slate-line); border-left-width: 4px; border-radius: var(--radius-sm);
  background: var(--slate-tint); }
.ng-status:empty { display: none; }
.ng-status--reading, .ng-status--analysing { border-color: var(--blue); background: var(--blue-tint); }
.ng-status--ready { border-color: var(--green-line); background: var(--green-tint); }
.ng-status--failed { border-color: var(--red-line); background: var(--red-tint); }
.ng-status > p { margin: 0; }
.ng-status > p + p { margin-top: 6px; }
.ng-status-line { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.ng-status .hint { color: var(--ink-soft); }
.ng-status-line.ng-err { color: var(--ink); }
.ng-note { padding: 8px 10px; border: 1px solid var(--amber-line); border-radius: var(--radius-sm); background: var(--amber-tint); color: var(--ink);
  font-size: 13px; }
.ng-foot { display: flex; justify-content: flex-end; }

/* ---- a run on its way: the progress panel, in the run's status box (web/network-groups.js paintProgress;
   docs/specs/GROUP_PROGRESS.md §3). Owner, 2026-10-04, after one fixed line for 12 minutes: "there is no progress
   notification -- nothing.. Ensure user gets all the things happening in the background to feel it's working." A clock
   since he pressed Find, three steps (done ✓ / now, ringed blue / next, quiet), a row per person: an icon and the words
   say each one's state (never the colour alone); the numbers that tick keep their width (tabular). */
.ng-prog { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ng-prog-head { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
/* the time since Find stays in one piece ("started 2 min 13 s ago", never "started 2 / min 13 s ago" at phone width) */
.ng-prog-since { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-prog-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ng-prog-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.ng-prog-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box;
  border: 2px solid var(--slate-line); border-radius: 50%; background: var(--card); color: var(--ink-soft); font-size: 12px; font-weight: 800; line-height: 1; }
.ng-prog-step.is-now .ng-prog-n { border-color: var(--blue); color: var(--blue); }
.ng-prog-step.is-done .ng-prog-n { border-color: var(--green-line); background: var(--green-tint); color: var(--green); }
.ng-prog-n .ng-ico, .ng-prog-n .ng-ico svg { width: 14px; height: 14px; }
.ng-prog-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-prog-t { margin: 2px 0 0; font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ng-prog-step.is-next .ng-prog-t { color: var(--ink-soft); }
.ng-prog-reads { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ng-prog-read { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.ng-prog-ico { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 16px; height: 19px; color: var(--ink-faint); }
.ng-prog-ico.is-held, .ng-prog-ico.is-read { color: var(--green); }
.ng-prog-ico.is-reading, .ng-prog-ico.is-waiting { color: var(--blue); }
.ng-prog-who { display: flex; flex-wrap: wrap; gap: 0 10px; min-width: 0; }
.ng-prog-name { min-width: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ng-prog-words { min-width: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ng-prog-read.is-reading .ng-prog-words { font-weight: 600; color: var(--ink); }
.ng-prog-sum { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.ng-prog-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ng-prog-step.is-next .ng-prog-line { color: var(--ink-soft); }
.ng-prog .hint { margin: 0; max-width: 82ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
/* a small ring that turns while a profile is read and while Claude writes; it stands still where he asked for less
   motion (the words still say it) */
.ng-spin { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-top-color: var(--blue); border-radius: 50%; animation: ng-spin .9s linear infinite; }
@keyframes ng-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ng-spin { animation: none; } }

/* ---- the result ---- */
.ng-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ng-result > .ng-h3 { margin: 0; }
.ng-summary { margin: 0; max-width: 84ch; font-size: 15px; line-height: 1.55; color: var(--ink); }
.ng-meta { margin: 0; }

/* who pairs best */
.ng-pairs { padding: 14px 16px; }
.ng-pairs > .hint { margin: 0 0 10px; }
.ng-pairs-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 40px; min-width: 0; }
.ng-grid-wrap { flex: 0 1 auto; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ng-grid { border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ng-grid th, .ng-grid td { padding: 0; }
/* row names: first and last name (web/network-groups.js gridNames), room for about 18 letters; initials at phone width */
.ng-grid-corner { width: 132px; }
.ng-grid-col { width: 48px; height: 40px; text-align: center; vertical-align: middle; }
.ng-grid-col > .ng-face { margin: 0 auto; }
.ng-grid-row { width: 132px; max-width: 132px; text-align: left; }
.ng-grid-rname { display: block; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.ng-grid-rini { display: none; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ng-cell { width: 48px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink);
  font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* The shading spreads over this group's own pairs, its lowest (1) to its highest (5) (web/network-groups.js levelsOf;
   2026-10-04: fixed steps at 20/40/60% left real groups, all 2–15%, one grey). One hue mixed from the theme's own blue
   and card, so both themes follow; the ink keeps over 6:1 on the darkest step in either theme, and the number is in
   every cell, so the shade is never the only way to read it. */
.ng-cell--1 { border-color: var(--line); background: var(--surface-soft); font-weight: 600; }
.ng-cell--2 { border-color: color-mix(in srgb, var(--blue) 25%, var(--line)); background: color-mix(in srgb, var(--blue) 10%, var(--card)); }
.ng-cell--3 { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); background: color-mix(in srgb, var(--blue) 20%, var(--card)); }
.ng-cell--4 { border-color: color-mix(in srgb, var(--blue) 65%, var(--line)); background: color-mix(in srgb, var(--blue) 32%, var(--card)); }
.ng-cell--5 { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 45%, var(--card)); box-shadow: inset 0 0 0 1px var(--blue); }
.ng-cell--self { border-style: dashed; background: transparent; color: var(--ink-faint); }
.ng-best-box { flex: 1 1 260px; min-width: 0; padding-top: 6px; }
.ng-best { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ng-best-who { font-weight: 700; }
.ng-best-v { font-variant-numeric: tabular-nums; }
.ng-best-shared { color: var(--ink-soft); overflow-wrap: anywhere; }

/* the three ideas: side by side where there is room, one under another on a phone */
.ng-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px; align-items: start; min-width: 0; }
.ng-idea { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ng-idea-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; }
.ng-idea-n { grid-column: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.ng-idea-title { grid-column: 1; margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.ng-score { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: baseline; gap: 1px; padding: 6px 10px; border: 1px solid var(--slate-line);
  border-radius: 12px; background: var(--slate-tint); color: var(--ink); white-space: nowrap; }
.ng-score--hi { border-color: var(--green-line); background: var(--green-tint); }
.ng-score--mid { border-color: var(--amber-line); background: var(--amber-tint); }
.ng-score--lo { border-color: var(--red-line); background: var(--red-tint); }
.ng-score-n { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ng-score-of { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ng-pitch { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.ng-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ng-why strong { color: var(--ink); }
.ng-part { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ng-part p { margin: 0; overflow-wrap: anywhere; }
.ng-team { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ng-team-p { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ng-team-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ng-team-name { font-weight: 700; }
.ng-team-role { font-weight: 600; color: var(--ink); }
.ng-team-why { color: var(--ink-soft); overflow-wrap: anywhere; }
.ng-sources { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.ng-sources a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 28px; color: var(--blue); overflow-wrap: anywhere; }
.ng-src-h { font-size: 12px; color: var(--ink-faint); }
.ng-steps, .ng-risks { margin: 0; padding-left: 20px; }
.ng-steps li + li, .ng-risks li + li { margin-top: 3px; }

/* the messages: one to each of the idea's people, and the group note */
.ng-msgs { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.ng-msgs > summary { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; list-style-position: inside; }
.ng-msg { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-top: 1px solid var(--line); }
.ng-msg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ng-msg-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ng-msg-role { min-width: 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.ng-msg .ng-msg-text { min-height: 96px; font-size: 14px; overflow-y: auto; }
.ng-msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* a message held for his form of address (release 319): why, as a held Top Comment says it (styles.css .np-cmt-hold) */
.ng-msg-hold { margin: 0; padding-left: 8px; border-left: 3px solid var(--amber); font-size: 12px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ng-sent { font-size: 13px; font-weight: 700; color: var(--green); }
.ng-msg.is-sent .ng-msg-text { border-color: var(--green-line); }
.ng-disclaimer { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }

/* ---- "Add to group" in a contact's window ---- */
.ng-addpanel { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.ng-addpanel .ng-k { margin: 0; }
.ng-add-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ng-add-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px;
  font-weight: 600; text-align: left; cursor: pointer; }
.ng-add-pick:hover:not(:disabled) { border-color: var(--blue); }
.ng-add-pick:disabled { cursor: default; color: var(--ink-soft); }
.ng-add-pick--new { border-style: dashed; color: var(--blue); }
.ng-add-name { min-width: 0; overflow-wrap: anywhere; }
.ng-add-n { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ng-add-line { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.ng-add-line:empty { display: none; }
.ng-add-done p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.ng-add-done .hint { color: var(--ink-soft); }

.ng-chip-x:focus-visible, .ng-add-pick:focus-visible, .ng-saved-item:focus-visible, .ng-back:focus-visible,
.ng-edit > summary:focus-visible, .ng-msgs > summary:focus-visible, .ng-sources a:focus-visible, .ng-status:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the run's words take the keyboard when a run starts (tabindex -1): no ring for a mouse click */
.ng-status:focus:not(:focus-visible) { outline: none; }

/* The extension's side panel showing a group (#/network/groups/<id>?embed=1): the group alone, edge to edge, scrolling
   inside itself (the side panel's page does not scroll: studio-v2.css, html.np-embed body). Over every bar and menu of
   the page (all under 1000; review, 2026-10-04: at z-index 5, Network's sticky search bar, z-index 11, covered the
   group's title and took its clicks) and under the dialogs (1000) and the toasts (1100), so "Copied" and "Marked sent"
   still show over it. The rest of Network's panel (that search bar, the contacts list, the contact window) is not drawn
   while the group is there, so neither a click nor Tab reaches it (network.js puts the box right in that panel). */
html.np-embed .ng-embed { position: fixed; inset: 0; z-index: 900; overflow-y: auto; padding: 12px; background: var(--bg); }
html.np-embed [data-view-panel="network"]:has(> .ng-embed:not([hidden])) > :not(.ng-embed) { display: none !important; }

/* ---- the chip: a group of his that reads or writes, from every page of Studio (web/network-groups.js THE CHIP;
   GROUP_PROGRESS.md §3, 2026-10-04). Fixed bottom right; over the page and its bars (z-index 50: the back-to-top button is
   40) and under its menus (60), the dialogs (1000), the toasts (1100), the contact window (1200) and the release banner
   (2000); lifted over the back-to-top button while that shows. The box itself takes no clicks, only its chips; 44 px
   targets at every width; nothing wider than the screen. ---- */
.ng-dock { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: max-content; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
body:has(.u-totop.is-on) .ng-dock { bottom: 72px; }
/* while a chip shows, the end of every page scrolls clear of it (the browser check, 2026-10-04: a group page's "Delete
   this group", bottom right, sat under the chip with no way to scroll it out): room for the chip over the back-to-top
   button */
body:has(.ng-dock-item) .content { padding-bottom: 140px; }
.ng-dock-item { display: flex; align-items: stretch; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-lg); pointer-events: auto; }
.ng-dock-item--ready { border-left-color: var(--green); }
.ng-dock-item--failed { border-left-color: var(--red); }
.ng-dock-open { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 4px 8px 12px; color: var(--ink);
  font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.ng-dock-open:hover { text-decoration: none; }
.ng-dock-open:hover .ng-dock-cta { text-decoration: underline; }
.ng-dock-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 16px; color: var(--blue); }
.ng-dock-item--ready .ng-dock-mark { color: var(--green); }
.ng-dock-item--failed .ng-dock-mark { color: var(--red); }
.ng-dock-text { min-width: 0; overflow-wrap: anywhere; }
.ng-dock-name { font-weight: 800; }
.ng-dock-cta { color: var(--blue); font-weight: 700; }
.ng-dock-x { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.ng-dock-x:hover { background: var(--surface-soft); color: var(--ink); }
.ng-dock-open:focus-visible, .ng-dock-x:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ---- phone width: 44 px targets, a little less padding ---- */
@media (max-width: 640px) {
  .ng-builder { padding: 14px; }
  .ng-edit > summary { padding: 10px 14px; }
  .ng-pairs { padding: 14px; }
  .ng-me, .ng-back, .ng-add-pick, .ng-sources a { min-height: 44px; }
  .ng-chip-x { width: 44px; height: 44px; margin: -7px -4px -7px -8px; }
  /* no room for names beside six columns: their initials (unique in the group), the name still read out */
  .ng-grid-corner, .ng-grid-row { width: 44px; max-width: 44px; }
  .ng-grid-rname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ng-grid-rini { display: block; }
  .ng-grid-col, .ng-cell { width: 42px; }
  .ng-actions .btn, .ng-msg-actions .btn { flex: 1 1 auto; }
  .ng-idea { padding: 12px; }
  .ng-msg { padding: 10px; }
}

/* Export the whole document: PDF, Google Docs, Email (release 322b, owner 2026-10-13). */
.ng-export { display: flex; flex-direction: column; gap: 10px; }
.ng-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ng-export-msgs { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 0.85rem; margin-left: 4px; }
.ng-export-mail { display: flex; flex-direction: column; gap: 8px; max-width: 640px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ng-export-mail[hidden] { display: none; }
.ng-x-l { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--ink-soft); }
.ng-x-to, .ng-x-subj { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }

/* "Introduce them" (owner, 2026-10-14; web/network-groups.js modeSwitch, paintIntro): the New group card's two modes as one
   switch, the Introduction label, and the three versions (LinkedIn, WhatsApp, email) side by side where there is room. */
.ng-mode { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface-soft); }
.ng-mode-opt { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ng-mode-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ng-mode-opt.is-on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--blue); }
.ng-mode-opt:hover { color: var(--ink); }
.ng-mode-opt:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.ng-saved-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ng-kind { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--blue); border-radius: var(--radius-pill);
  background: var(--blue-tint); color: var(--ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ng-kind--title { margin-left: 10px; vertical-align: middle; }
.ng-thin { margin: 0 0 14px; }
.ng-thin[hidden] { display: none; }
.ng-status-busy { display: flex; align-items: center; gap: 8px; }
.ng-introduce { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ng-introduce > .ng-h3, .ng-introduce > p { margin: 0; }
.ng-ic-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; align-items: start; min-width: 0; }
.ng-ic { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); }
.ng-ic-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.ng-ic-head .ng-h4 { margin: 0; }
.ng-ic-words { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ng-ic-hint { margin: 0; }
.ng-ic-subj { margin: 0; }
.ng-ic .ng-ic-text { min-height: 120px; font-size: 14px; line-height: 1.5; overflow-y: auto; }
.ng-ic-to { margin: 0; overflow-wrap: anywhere; }
.ng-ic-to:empty { display: none; }
@media (max-width: 640px) {
  /* two equal halves, the words wrapping inside each, never a pill stretched over two rows */
  .ng-mode { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-sm); }
  .ng-mode-opt { justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-sm); line-height: 1.25; text-align: center; }
  .ng-ic { padding: 12px; }
  .ng-ic .ng-msg-actions .btn { flex: 1 1 auto; }
}

/* People outside his network, and advisors (release 342; owner, 2026-10-18: "don't restrict to the 1st level contacts only";
   web/network-groups.js paintLink, roleSelect, tagsOf, lookupsView, messageRow). A pasted link's one row (a LinkedIn
   profile, or a page about them with his name for them); each person's role on their chip (Founder | Advisor); a tag for
   an advisor, someone he is not connected to, someone known only by a web page; what the web says about them; a
   connection note's row and its count of characters. Tokens only, both themes; at phone width the chips wrap and every
   control is 44 px. */
.ng-tag { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 1px 8px; border: 1px solid var(--slate-line); border-radius: var(--radius-pill);
  background: var(--slate-tint); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ng-tag--out { border-color: var(--amber-line); background: var(--amber-tint); }
.ng-tag--adv { border-color: var(--blue); background: var(--blue-tint); }
/* two classes deep: the global select rule (styles.css) gives every select the whole width and a field's padding; the
   background colour alone, so its arrow (a background image) stays */
.ng-chip .ng-role { flex: 0 0 auto; width: auto; min-width: 0; padding: 4px 26px 4px 10px; border-radius: var(--radius-pill);
  background-color: var(--card); background-position: right 9px center; font-size: 12.5px; font-weight: 600; }
.ng-chip--advisor { border-style: dashed; border-color: var(--blue); }
.ng-link { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); }
.ng-link:empty { display: none; }
.ng-link-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.ng-link-row--end { justify-content: flex-end; }
.ng-link-head { min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ng-link-kind { font-weight: 700; color: var(--ink); }
.ng-link-addr { color: var(--ink-soft); }
.ng-link-web { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ng-link-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.ng-link-f { flex: 1 1 220px; margin: 0; }
.ng-link-hint { margin: 0; }
.ng-team-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.ng-lookups { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.ng-lookups > .hint { margin: 0 0 10px; }
.ng-lookup-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ng-lookup { min-width: 0; }
.ng-lookup + .ng-lookup { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ng-lookup-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ng-lookup-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ng-lookup-found { max-width: 84ch; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ng-msg-kind { margin: 0; padding-left: 8px; border-left: 3px solid var(--amber); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ng-msg--web .ng-msg-kind { border-left-color: var(--slate-line); }
.ng-msg-how { margin: 0; overflow-wrap: anywhere; }
.ng-msg-count { margin: -2px 0 0; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ng-msg-count.is-over { color: var(--red); font-weight: 700; }
.ng-link-add:focus-visible, .ng-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
  /* a chip with a role and a tag wraps inside itself rather than pushing past the screen */
  .ng-chip--role { flex-wrap: wrap; border-radius: var(--radius-sm); }
  .ng-chip .ng-role { min-height: 44px; }
  .ng-link { padding: 10px; }
  .ng-link-row .btn { flex: 1 1 auto; }
}