/* web/person-page.css — the person page (web/person-page.js), its message buttons (web/contact-actions.js) and the
   Sources panel (web/contact-sources.js): docs/specs/CONTACTS_UNIFIED_CONTRACT.md, "The person page and actions".
   Theme tokens only (styles.css :root, the dark theme in studio-v2.css), so light and dark follow by themselves. At a
   phone's width everything is one column with a 16 px gutter, rows wrap, long words break, and nothing scrolls
   sideways. */

/* Each platform's colour, on the theme's own tokens. */
:root {
  --pp-c-linkedin: var(--blue);
  --pp-c-whatsapp: var(--green);
  --pp-c-messenger: var(--blue);
  --pp-c-instagram: var(--red);
  --pp-c-email: var(--red);
  --pp-c-sms: var(--green);
  --pp-c-call: var(--green);
  --pp-c-phone: var(--green);
  --pp-c-google: var(--blue);
  --pp-c-facebook: var(--blue);
  --pp-c-imessage: var(--green);
  --pp-c-x: var(--ink);
  --pp-c-tiktok: var(--ink);
  --pp-c-youtube: var(--red);
  --pp-c-note: var(--amber);
  --pp-c-other: var(--ink-soft);
}

body.pp-noscroll { overflow: hidden; }
/* hidden means hidden, whatever display a rule below gives the element */
.pp [hidden], .pp-dialog [hidden], .pp-host [hidden] { display: none !important; }

/* ---- The drawer and the Sources panel: a panel from the right over a dimmed page ---- */
.pp-dialog-root { position: fixed; inset: 0; z-index: 1220; }
.pp-backdrop { position: absolute; inset: 0; background: var(--navy-deep); opacity: .45; }
:root[data-theme="dark"] .pp-backdrop { opacity: .62; }
.pp-dialog {
  position: absolute; top: 0; right: 0; height: 100%; width: min(920px, 94vw); max-width: 100vw;
  display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: pp-in var(--t-med) both;
}
.pp-dialog--src { width: min(640px, 94vw); }
@keyframes pp-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-dialog { animation: none; } }
.pp-dialog-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.pp-dialog-title { font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.pp-src-title { font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pp-src-title:focus:not(:focus-visible), .pp-name:focus:not(:focus-visible), .pp-h:focus:not(:focus-visible) { outline: none; }
.pp-spacer { flex: 1 1 auto; }
.pp-dialog-close {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-soft); color: var(--ink-soft);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.pp-dialog-close:hover { background: var(--card); color: var(--ink); border-color: var(--ink-faint); }
.pp-dialog-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 18px; }

/* ---- In Network's Contacts tab: the page in the list's place, the list kept as he left it (only while the page is
   there: a list that redraws its panel shows itself again) ---- */
.pp-inline-on:has(> .pp-host) > :not(.pp-host) { display: none !important; }
.pp-host--inline { margin-top: 4px; }
.pp-topbar { margin-bottom: 12px; }

/* ---- The page ---- */
.pp { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pp-head, .pp-sec {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 0; box-sizing: border-box;
}
.pp-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px; }
.pp-sec { padding: 16px 18px; }
.pp-sec[hidden] { display: none; }
.pp-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-main, .pp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .pp-cols { grid-template-columns: minmax(0, 1fr); } }

.pp-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--blue-tint); color: var(--blue); border: 1px solid var(--line);
  font-weight: 800; font-size: 14px; line-height: 1;
}
.pp-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.pp-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.pp-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-who { flex: 1 1 auto; min-width: 0; }
.pp-name { width: fit-content; max-width: 100%; margin: 0; font-size: 22px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.pp-name--loading { color: var(--ink-soft); }
.pp-headline { margin: 4px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.pp-about { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-plats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.pp-plat {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--pp-c-other);
}
.pp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-badge {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 3px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere;
}
.pp-badge--tier { color: var(--blue); border-color: var(--blue); }
.pp-badge.is-due { color: var(--amber); background: var(--amber-tint); border-color: var(--amber-line); }
.pp-badge--quiet { font-weight: 600; }
.pp-badge--review { color: var(--blue); cursor: pointer; }
.pp-badge--review:hover { border-color: var(--blue); }
.pp-badge--review:disabled { cursor: default; color: var(--ink-soft); }
/* "Profile, Compare and Guide me": the way to their LinkedIn record's card */
.pp-head-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-width: 0; }
.pp-card-open { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
/* "Address as Salam · … Bhai · learned from your message of 31 May  Edit" (release 319), and its form under it */
.pp-addr { margin-top: 8px; min-width: 0; }
.pp-addr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; min-width: 0; }
.pp-addr-k { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.pp-addr-v { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pp-addr-v.is-none { font-weight: 600; color: var(--ink-soft); }
.pp-addr-src { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-addr-edit { padding-top: 4px; padding-bottom: 4px; }
.pp-addr-form {
  display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-top: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); min-width: 0;
}
.pp-addr-row { display: flex; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.pp-addr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pp-addr-field--form { flex: 2 1 200px; }
.pp-addr-field--greet { flex: 1 1 140px; }
.pp-addr-field .input { width: 100%; max-width: 100%; min-width: 0; padding: 8px 11px; font-size: 14px; font-weight: 400; background: var(--card); }
.pp-addr-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-h { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.pp-h4 { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pp-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pp-sec-head .pp-h { margin: 0; }
.pp-note { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-err { margin: 6px 0 0; font-size: 12.5px; color: var(--red); overflow-wrap: anywhere; }
.pp-disclaimer { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }

/* the platform's colour on its icons */
.pp-plat--linkedin, .pp-tl-row--linkedin .pp-tl-ico, [data-group="linkedin"] .pp-idg-ico, .ca-btn--linkedin.btn--ghost .ca-icon, .pp-src-sec--linkedin .pp-src-ico { color: var(--pp-c-linkedin); }
.pp-plat--whatsapp, .pp-tl-row--whatsapp .pp-tl-ico, [data-group="whatsapp"] .pp-idg-ico, .ca-btn--whatsapp .ca-icon, .pp-src-sec--whatsapp .pp-src-ico { color: var(--pp-c-whatsapp); }
.pp-tl-row--messenger .pp-tl-ico, .ca-btn--messenger .ca-icon { color: var(--pp-c-messenger); }
.pp-plat--instagram, .pp-tl-row--instagram .pp-tl-ico, [data-group="instagram"] .pp-idg-ico, .ca-btn--instagram .ca-icon, .pp-src-sec--instagram .pp-src-ico { color: var(--pp-c-instagram); }
.pp-plat--email, .pp-tl-row--email .pp-tl-ico, [data-group="email"] .pp-idg-ico, .ca-btn--email .ca-icon { color: var(--pp-c-email); }
.pp-tl-row--sms .pp-tl-ico, .ca-btn--sms .ca-icon { color: var(--pp-c-sms); }
.pp-plat--phone, [data-group="phone"] .pp-idg-ico, .ca-btn--call .ca-icon { color: var(--pp-c-phone); }
.pp-tl-row--imessage .pp-tl-ico { color: var(--pp-c-imessage); }
.pp-plat--google, [data-group="google"] .pp-idg-ico, .pp-src-sec--google .pp-src-ico { color: var(--pp-c-google); }
.pp-plat--facebook, [data-group="facebook"] .pp-idg-ico, .pp-src-sec--facebook .pp-src-ico { color: var(--pp-c-facebook); }
.pp-plat--x, [data-group="x"] .pp-idg-ico { color: var(--pp-c-x); }
.pp-plat--tiktok, [data-group="tiktok"] .pp-idg-ico { color: var(--pp-c-tiktok); }
.pp-plat--youtube, [data-group="youtube"] .pp-idg-ico { color: var(--pp-c-youtube); }
.pp-tl-row--note .pp-tl-ico { color: var(--pp-c-note); }

/* ---- The message box and its buttons ---- */
.pp-draft-say { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.pp-draft-say.is-ready, .pp-draft-say.is-sent { color: var(--green); }
.pp-draft-say.is-stale { color: var(--amber); }
.pp-draft-say.is-error { color: var(--red); }
.pp-draft { display: block; width: 100%; max-width: 100%; min-height: 96px; margin: 8px 0 10px; box-sizing: border-box; }
.ca-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-btn { gap: 6px; max-width: 100%; }
.ca-icon, .pp-icon, .pp-plat-ico, .pp-tl-ico, .pp-idg-ico, .pp-src-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ca-icon svg, .pp-icon svg, .pp-plat-ico svg, .pp-idg-ico svg, .pp-src-ico svg { width: 16px; height: 16px; }
.ca-btn.btn--primary .ca-icon { color: inherit; }

/* ---- The timeline ---- */
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pp-chips[hidden] { display: none; }
.pp-chip {
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.pp-chip:hover { border-color: var(--blue); color: var(--blue); }
.pp-chip.is-on { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
.pp-tl-list { list-style: none; margin: 0; padding: 0; }
.pp-tl-list[hidden] { display: none; }
.pp-tl-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.pp-tl-row:first-child { border-top: 0; padding-top: 2px; }
.pp-tl-row:focus { outline: none; }
.pp-tl-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pp-tl-ico {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--pp-c-other);
}
.pp-tl-ico svg { width: 15px; height: 15px; }
.pp-tl-body { flex: 1 1 auto; min-width: 0; }
.pp-tl-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ink-soft); }
.pp-tl-ch { font-weight: 700; color: var(--ink); }
.pp-tl-sum { margin: 2px 0 0; font-size: 13.5px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pp-tl-foot { margin-top: 8px; }

/* ---- Same person? ---- */
.pp-sg-list, .pp-idg-vals, .pp-rec-list, .pp-ids-found, .pp-note-list, .pp-src-runlist, .pp-src-walist { list-style: none; margin: 0; padding: 0; }
.pp-sg {
  margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft);
}
.pp-sg-who { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pp-sg-id, .pp-rec-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pp-sg-name, .pp-rec-name { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
/* a linked record's name, as the button that opens that record's own card */
.pp-rec-open { padding: 0; border: 0; background: transparent; font-family: inherit; line-height: inherit; color: var(--blue); text-align: left; cursor: pointer; }
.pp-rec-open:hover { text-decoration: underline; }
.pp-sg-head, .pp-rec-head { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-sg-why { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-sg-reason { font-weight: 700; color: var(--amber); margin-right: 6px; }
.pp-sg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pp-origin {
  display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--slate-line); background: var(--slate-tint); color: var(--slate);
  font-size: 11px; font-weight: 700; line-height: 1.5;
}

/* ---- Identities ---- */
.pp-ids-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-idg { margin-top: 10px; }
.pp-idg-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.pp-idg-vals { margin-top: 2px; }
.pp-id { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.pp-id:last-child { border-bottom: 0; }
.pp-id-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-id-v { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
a.pp-id-v { color: var(--blue); }
.pp-id-v.is-masked { font-family: var(--mono); letter-spacing: .04em; }
.pp-id-meta { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-id-exp.is-expired { color: var(--red); font-weight: 700; }
.pp-id-x, .pp-tag-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  font: inherit; line-height: 1; cursor: pointer;
}
.pp-id-x { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.pp-id-x:hover { color: var(--red); border-color: var(--red-line); }
.pp-id-form, .pp-ids-search {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft);
}
.pp-id-form[hidden], .pp-ids-search[hidden], .pp-id-govrow[hidden], .pp-recs[hidden] { display: none; }
.pp-id-row, .pp-id-govrow, .pp-id-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-id-row > *, .pp-id-govrow > * { flex: 1 1 160px; min-width: 0; max-width: 100%; }
.pp-id-explabel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.pp-id-explabel input { flex: 1 1 auto; min-width: 0; }
.pp-id-say { margin: 0 0 6px; font-size: 13px; }
.pp-id-status.is-error .pp-id-say { color: var(--red); }
.pp-id-status.is-conflict .pp-id-say { color: var(--ink); font-weight: 600; }
.pp-ids-q { width: 100%; max-width: 100%; box-sizing: border-box; }
.pp-ids-hit, .pp-rec { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.pp-ids-sclose { align-self: flex-start; }
.pp-recs { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.pp-rec-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.pp-rec-main { font-size: 11px; font-weight: 700; color: var(--green); }

/* ---- Stage, tags and follow-up; notes ---- */
.pp-crm-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; }
.pp-crm-k { padding-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 480px) { .pp-crm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .pp-crm-k { padding-top: 0; } }
.pp-crm-stagebox { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pp-crm-stagebox > * { max-width: 100%; min-width: 0; }
.pp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pp-tag {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 2px 3px 2px 10px; border-radius: var(--radius-pill);
  background: var(--blue-tint); color: var(--blue); font-size: 12px; font-weight: 700;
}
.pp-tag-t { overflow-wrap: anywhere; }
.pp-tag-x { width: 22px; height: 22px; border: 0; border-radius: 50%; color: inherit; font-size: 14px; }
.pp-tag-x:hover { background: var(--card); }
.pp-tag-input { flex: 1 1 120px; min-width: 0; max-width: 240px; }
.pp-follow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-follow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pp-crm-date { flex: 0 1 170px; min-width: 0; }
.pp-crm-note { flex: 1 1 180px; min-width: 0; }
.pp-follow-due { margin: 0; font-size: 12.5px; color: var(--amber); overflow-wrap: anywhere; }
.pp-note-item { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pp-note-body { margin: 0; font-size: 13.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
.pp-note-del { padding: 0; border: 0; background: transparent; color: var(--red); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pp-note-new { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.pp-note-input { width: 100%; max-width: 100%; min-height: 64px; box-sizing: border-box; }

/* ---- The Sources panel ---- */
.pp-src-body { display: flex; flex-direction: column; gap: 14px; }
.pp-src-intro { margin: 0; }
.pp-src-sec {
  background: var(--card); color: var(--ink); min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.pp-src-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pp-src-head .pp-h { margin: 0; }
.pp-src-ico { color: var(--pp-c-other); }
.pp-src-steps { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; color: var(--ink); }
.pp-src-steps li { margin: 3px 0; overflow-wrap: anywhere; }
.pp-src-up { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); min-width: 0; }
.pp-src-pick { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pp-src-up input.pp-src-file { max-width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
/* "Your name on Facebook / Instagram": its label over its box */
.pp-src-ownerrow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-src-owner { width: 100%; max-width: 360px; min-width: 0; box-sizing: border-box; }
.pp-src-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-src-bar { height: 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--line-soft); overflow: hidden; }
.pp-src-bar[hidden] { display: none; }
.pp-src-fill { display: block; height: 100%; width: 0; background: var(--blue-fill); transition: width var(--t-fast); }
@media (prefers-reduced-motion: reduce) { .pp-src-fill { transition: none; } }
.pp-src-say { margin: 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-src-say.is-done { color: var(--green); }
.pp-src-say.is-error { color: var(--red); }
.pp-src-connect { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--line); }
.pp-src-connect[hidden] { display: none; }
.pp-src-setup { font-size: 12.5px; color: var(--ink-soft); }
.pp-src-setup summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.pp-src-setup ol { margin: 6px 0 0; padding-left: 20px; }
.pp-src-walist { margin-bottom: 6px; font-size: 13px; color: var(--ink); }
.pp-src-run { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.pp-src-run:first-child { border-top: 0; }
.pp-src-runbody { flex: 1 1 auto; min-width: 0; }
.pp-src-runh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 13px; }
.pp-src-runname { font-weight: 700; color: var(--ink); }
.pp-src-runat { font-size: 12px; color: var(--ink-soft); }
.pp-src-runfile { margin: 2px 0 0; font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }
.pp-src-runc { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
/* a file imported again that changed nothing: said plainly, in the ink the counts use */
.pp-src-runsame { margin: 2px 0 0; font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.pp-src-chip { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--slate-tint); color: var(--slate); font-size: 11px; font-weight: 700; }
.pp-src-chip.is-failed { background: var(--red-tint); color: var(--red); }

/* the keyboard's place, on everything of ours that has no .btn ring */
.pp-chip:focus-visible, .pp-id-x:focus-visible, .pp-tag-x:focus-visible, .pp-note-del:focus-visible, .pp-badge--review:focus-visible, .pp-rec-open:focus-visible,
.pp-dialog-close:focus-visible, .pp-src-file:focus-visible, .pp-src-setup summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- A phone: the panels take the screen, a 16 px gutter, one column ---- */
@media (max-width: 640px) {
  .pp-dialog, .pp-dialog--src { width: 100vw; border-left: 0; }
  .pp-dialog-head { padding: 10px 16px; }
  .pp-dialog-body { padding: 16px; }
  .pp-head { flex-direction: column; gap: 12px; padding: 16px; }
  .pp-sec, .pp-src-sec { padding: 14px 16px; }
  .pp-name { font-size: 20px; }
  .ca-btn { flex: 1 1 calc(50% - 8px); }
}