/* Person and organization pages (B-047, B-049: pages/person.js, pages/organization.js,
   components/contact-sidebar.js). The page frame, header menus and timeline reuse deal.css, fields.css and
   timeline.css; this file holds only what differs. Colours only via tokens.css. */

/* ---- Header: 40px avatar / building tile + the editable name ---- */
.contact-head .deal-head-top { min-height: 48px; }
.record-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-5); }
.record-avatar {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tile-blue-bg); color: var(--tile-blue);
}
.record-avatar.is-person { border-radius: 50%; }
.record-avatar.is-org { border-radius: var(--r-md); }
.record-avatar .ic, .record-avatar svg { width: 24px; height: 24px; display: block; }
.record-avatar.is-person .ic, .record-avatar.is-person svg { width: 28px; height: 28px; margin-top: 6px; }
.record-name .deal-title-wrap { flex: 1; min-width: 0; }
.record-add-split .split-main, .record-add-deal { font-weight: var(--fw-semibold); gap: var(--sp-2); }
.record-add-deal .ic, .record-add-split .split-main .ic { width: 16px; height: 16px; }

/* ---- Sidebar blocks (Deals, Overview, People): same head as the field sections ---- */
.contact-sidebar .fields { padding-bottom: var(--sp-7); }
.fields.is-filtering .contact-block { display: none; }
.contact-block-head { display: flex; align-items: center; gap: var(--sp-2); }
.contact-block-head .fields-section-head { flex: 1; min-width: 0; }
.contact-block.is-collapsed .contact-block-body { display: none; }
.contact-block-action.icon-btn { width: 28px; height: 28px; flex: none; color: var(--text-2); }
.contact-block-action.icon-btn svg { width: 16px; height: 16px; }
.contact-block-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4) 0; }
.contact-block-empty { color: var(--text); line-height: var(--lh-md); }
.contact-block-add.link-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semibold);
}
.contact-block-add .ic, .contact-block-add svg { width: 14px; height: 14px; }

/* Emails / phones in the Summary: one per line, the type in grey after it. */
.contact-values { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.contact-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-value-type { color: var(--text-2); }

/* ---- Deals block ---- */
.deals-open { font-size: var(--fs-md); line-height: var(--lh-md); }
.deals-ratio {
  display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--stage-pick-bg);
}
.deals-ratio-won { background: var(--green); transition: width var(--t-slow) var(--ease); }
.deals-ratio-lost { background: var(--red); transition: width var(--t-slow) var(--ease); }
.deals-stats { display: flex; flex-direction: column; gap: var(--sp-1); }
.deals-stat {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 56px minmax(72px, auto); gap: var(--sp-4);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.deals-stat-n, .deals-stat-pct, .deals-stat-sum { text-align: right; font-variant-numeric: tabular-nums; }
.deals-stat.is-won .deals-stat-label { color: var(--green); }
.deals-stat.is-lost .deals-stat-label { color: var(--red); }
.deals-foot { display: flex; }
.deals-see-all.btn { height: 28px; font-weight: var(--fw-semibold); }

.mini-deals { display: flex; flex-direction: column; gap: var(--sp-4); }
.mini-deal {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  color: var(--text); text-decoration: none; transition: box-shadow var(--t-fast) var(--ease);
}
.mini-deal:hover { box-shadow: var(--card-shadow-hover); }
.mini-deal:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.mini-deal.is-won { background: var(--won-bg); }
.mini-deal.is-lost { background: var(--lost-bg); }
.mini-deal-labels { display: flex; gap: var(--sp-2); }
.mini-deal-top { display: flex; align-items: center; gap: var(--sp-4); }
.mini-deal-title {
  flex: 1; min-width: 0; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-deal:hover .mini-deal-title { text-decoration: underline; }
.mini-deal-act.act-icon { flex: none; }
.mini-deal-status { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mini-deal-status.is-won { color: var(--green); }
.mini-deal-status.is-lost { color: var(--red); }
.mini-deal-bottom { display: flex; align-items: center; gap: var(--sp-5); }
.mini-deal-value { flex: none; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mini-stage-bar { flex: 1; min-width: 0; display: flex; gap: 2px; height: 4px; }
.mini-stage-seg { flex: 1 1 0; border-radius: 1px; background: var(--stage-pick-bg); }
.mini-stage-seg.is-done { background: var(--green); }
.mini-stage-bar.is-lost .mini-stage-seg.is-done { background: var(--red); }

/* ---- Overview block ---- */
.ov-title { font-size: var(--fs-md); line-height: var(--lh-md); }
.ov-acts { display: flex; flex-direction: column; gap: var(--sp-5); }
.ov-act { display: flex; flex-direction: column; gap: var(--sp-3); }
.ov-bar { display: block; height: 12px; border-radius: var(--r-pill); background: var(--bg-hover); overflow: hidden; }
.ov-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--yellow); }
.ov-act-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px 48px; gap: var(--sp-4); }
.ov-act-n, .ov-act-pct { text-align: right; font-variant-numeric: tabular-nums; }
.ov-fact { display: flex; justify-content: space-between; gap: var(--sp-5); line-height: var(--lh-md); }
.ov-fact-label { color: var(--text); }

/* ---- People block (organization) ---- */
.org-people-list { display: flex; flex-direction: column; }
.org-person {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
  border-radius: var(--r-md); color: var(--text); text-decoration: none; transition: background var(--t-fast) var(--ease);
}
.org-person:hover { background: var(--bg-hover); }
.org-person:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.org-person-av {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--tile-blue-bg); color: var(--tile-blue);
}
.org-person-av .ic, .org-person-av svg { width: 14px; height: 14px; display: block; }
.org-person-text { display: flex; flex-direction: column; min-width: 0; }
.org-person-name { color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-person-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Timeline on contact pages: a deal's change rows name the deal with a green value pill ---- */
.tl-deal-ref { display: inline-flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-3); vertical-align: middle; }
.tl-deal-link { color: var(--link); text-decoration: none; }
.tl-deal-link:hover { text-decoration: underline; }
.tl-value-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  background: var(--pill-won); color: var(--text-inverse); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .deals-ratio-won, .deals-ratio-lost, .mini-deal, .org-person { transition: none; }
}