/* Person roles (founder-approved identity design, 3 Nov 2026; property_portal/person_identity.py).
   One badge everywhere a person shows (the record, People, search, Today, the Deals board): templates/includes/role_badge.html
   and public/js/fp-roles.js draw the same markup. Colour by side, never alone: always the icon and the word.
   The record's header pieces (the sentence, the contact line, one card per role, the role tabs) are below the badge. */

.fp-rb{display:inline-flex;align-items:center;gap:var(--space-1);flex:none;max-width:100%;padding:var(--space-half) var(--space-2);border:var(--border-w) solid var(--role-other-border);
  border-radius:var(--radius-full);background:var(--role-other-bg);color:var(--role-other-ink);font:inherit;font-size:var(--text-meta-size);line-height:var(--text-meta-lh);
  font-weight:var(--weight-strong);white-space:nowrap;vertical-align:middle;text-decoration:none}
.fp-rb>span{overflow:hidden;text-overflow:ellipsis}
.fp-rb-i{width:var(--icon-xs);height:var(--icon-xs);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fp-rb.s-buy{background:var(--role-buy-bg);border-color:var(--role-buy-border);color:var(--role-buy-ink)}
.fp-rb.s-sell{background:var(--role-sell-bg);border-color:var(--role-sell-border);color:var(--role-sell-ink)}
.fp-rb.is-lost{opacity:.72}
button.fp-rb{cursor:pointer}
button.fp-rb:hover{border-color:currentColor}
.fp-rb-lg{gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-2);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.fp-rb-lg .fp-rb-i{width:var(--icon-md);height:var(--icon-md)}
.fp-rbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
/* in a list row, next to the name */
.t3-l1 .fp-rbs,.pb-ct .fp-rbs{margin-inline-start:var(--space-1)}
.cu-nm>small.cu-rbl,.cu-grid-t .cu-nm>small.cu-rbl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-half) var(--space-2);min-width:0;max-inline-size:100%;overflow:visible;white-space:nowrap}
.cu-nm .cu-rbl .fp-rbs{flex-wrap:wrap;max-inline-size:100%}
.cu-nm .cu-rbl .cu-ltr{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pb-cm .fp-rb{margin-inline-end:var(--space-1)}
.fp-palette-item .fp-sub .fp-rbs{margin-inline-end:var(--space-1)}
td.cu-roles .fp-rbs{flex-wrap:wrap}
.cu-cbadges{margin-block:var(--space-1) var(--space-half)}

/* ---------------------------------------------------------------- the record header */
.pi-id{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-2)}
.pi-say{color:var(--text-strong-secondary);font-size:var(--text-section-size);line-height:var(--text-section-lh);overflow-wrap:anywhere}
.pi-meta{margin:var(--space-1) 0 0;color:var(--text-secondary);font-size:var(--text-meta-size);line-height:var(--text-meta-lh);overflow-wrap:anywhere}
.pi-dot{color:var(--text-tertiary)}
.pi-meta a{color:inherit}
.pi-meta .pi-lang{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.pi-facts{display:inline-flex;flex-wrap:wrap;gap:var(--space-1)}

.pi-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.pi-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pi-card{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-5);border:var(--border-w) solid var(--role-other-border);border-radius:var(--radius-lg);background:var(--role-other-card)}
.pi-card.s-buy{border-color:var(--role-buy-border);background:var(--role-buy-card)}
.pi-card.s-sell{border-color:var(--role-sell-border);background:var(--role-sell-card)}
.pi-card.one{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"fact side" "path path";align-items:start;gap:var(--space-4) var(--space-6)}
.pi-card.one>.pi-c-fact{grid-area:fact}.pi-card.one>.pi-c-side{grid-area:side;max-width:320px}.pi-card.one>.pi-c-path{grid-area:path;display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.pi-c-fact,.pi-c-side{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.pi-c-side{align-items:flex-start}
.pi-c-top{display:flex;align-items:center;gap:var(--space-2)}
.pi-c-top>.pi-eb{flex:1}
.pi-eb{margin:0;font-size:var(--text-meta-size);line-height:var(--text-meta-lh);font-weight:var(--weight-strong);letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;color:var(--role-other-ink)}
.s-buy .pi-eb{color:var(--role-buy-ink)}
.s-sell .pi-eb{color:var(--role-sell-ink)}
.pi-hl{margin:0;font-size:var(--text-card-title-size);line-height:var(--text-card-title-lh);font-weight:var(--weight-strong);color:var(--text-primary);overflow-wrap:anywhere}
.pi-sub{margin:0;color:var(--text-secondary);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.pi-next{margin:0;color:var(--text-strong-secondary);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.pi-note{margin:0;color:var(--text-secondary);font-size:var(--text-meta-size);line-height:var(--text-meta-lh)}
.pi-k{color:var(--text-secondary);font-size:var(--text-meta-size);line-height:var(--text-meta-lh)}
.pi-add{display:inline-flex;align-items:center;white-space:nowrap;border:0;background:none;padding:0;font:inherit;font-size:var(--text-body-size);font-weight:var(--weight-strong);color:var(--text-link);cursor:pointer;text-align:start}
.pi-add:hover{text-decoration:underline}
.pi-addrow{margin:var(--space-2) 0 0}
.pi-none{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--text-body-size)}

/* interest, with its reason (opens the same "where this comes from" box as before) */
.pi-int{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;padding:var(--space-half) var(--space-3);border:var(--border-w) solid transparent;border-radius:var(--radius-full);
  font:inherit;font-size:var(--text-meta-size);line-height:var(--text-meta-lh);font-weight:var(--weight-strong);cursor:pointer;text-align:start;background:var(--info-bg);color:var(--info-text)}
.pi-int>i{width:var(--space-2);height:var(--space-2);flex:none;border-radius:var(--radius-full);background:currentColor}
.pi-int.s-hot{background:var(--danger-bg);color:var(--danger-text)}
.pi-int.s-warm{background:var(--warning-bg);color:var(--warning-text)}
.pi-int.s-warm>i{background:var(--warning-mark)}
.pi-int:hover{border-color:currentColor}

/* the stepper (one role) */
.pi-steps{display:flex;align-items:center;margin:0;padding:0;list-style:none;min-width:0}
.pi-steps>li{display:flex;align-items:center;gap:var(--space-2);flex:1 1 auto;min-width:0;color:var(--text-secondary);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.pi-steps>li:last-child{flex:0 0 auto}
.pi-steps>li:not(:last-child)::after{content:"";flex:1 1 var(--space-4);min-width:var(--space-2);height:var(--space-half);margin-inline:var(--space-1);background:var(--border-default)}
.pi-steps>li.is-done:not(:last-child)::after{background:var(--role-step-done)}
.pi-steps>li.is-line::after{background:var(--text-primary)}
.pi-steps .pi-n{width:var(--space-6);height:var(--space-6);flex:none;display:inline-flex;align-items:center;justify-content:center;border:var(--border-w-strong) solid var(--border-strong);
  border-radius:var(--radius-full);font-size:var(--text-meta-size);line-height:1;font-weight:var(--weight-strong);font-family:var(--font-num)}
.pi-steps .pi-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-steps .is-done{color:var(--role-step-done)}
.pi-steps .is-done .pi-n{border-color:var(--role-step-done);background:var(--success-bg)}
.pi-steps .is-now{color:var(--text-primary);font-weight:var(--weight-strong)}
.pi-steps .is-now .pi-n{border-color:var(--primary);background:var(--primary);color:var(--text-on-dark)}
/* the compact path (two roles) */
.pi-path{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-1);margin:0;padding:0;list-style:none;color:var(--text-secondary);font-size:var(--text-meta-size);line-height:var(--text-meta-lh)}
.pi-path>li+li::before{content:"·";margin-inline-end:var(--space-1);color:var(--text-tertiary)}
.pi-path .is-done{color:var(--role-step-done)}
.pi-path .is-now>*{display:inline-block;padding:var(--space-half) var(--space-2);border-radius:var(--radius-full);background:var(--primary);color:var(--text-on-dark);font-weight:var(--weight-strong)}
.pi-path .is-lost>*,.pi-steps+.pi-lost{color:var(--danger-text);font-weight:var(--weight-strong)}
.pi-stepbtn{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:start}
.pi-steps .pi-stepbtn{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.pi-stepbtn:hover .pi-l,.pi-path .pi-stepbtn:hover{text-decoration:underline}
.pi-lost{margin:0;font-size:var(--text-body-size)}

/* the foot: role tabs, then tags */
.pi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-4)}
.pi-foot.has-tabs{border-block-end:var(--border-w) solid var(--border-default);margin-top:var(--space-3)}
.pi-tabs{display:flex;gap:var(--space-1)}
.pi-tabs [role=tab]{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-touch);padding:0 var(--space-3);border:0;border-block-end:var(--border-w-strong) solid transparent;
  background:none;font:inherit;font-size:var(--text-body-size);color:var(--text-secondary);cursor:pointer}
.pi-tabs [role=tab][aria-selected=true]{color:var(--text-primary);font-weight:var(--weight-strong);border-block-end-color:var(--text-primary)}
.pi-tabs [role=tab] span{color:var(--text-tertiary);font-weight:var(--weight-regular)}
.pi-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin-inline-start:auto;font-size:var(--text-body-size);color:var(--text-secondary)}
.pi-foot:not(.has-tabs) .pi-tags{margin-inline-start:0}
.pi-tags .c3-chip.tag{background:var(--surface-raised);border-color:var(--border-default);color:var(--text-strong-secondary)}

@media (max-width:900px){
  .pi-cards.n2{grid-template-columns:minmax(0,1fr)}
}
/* phone (Phone.dc.html): the header stacks, the stepper reads down the card, contact buttons 44px */
@media (max-width:760px){
  .pi-id{gap:var(--space-2)}
  .pi-say{font-size:var(--text-body-size);line-height:var(--text-body-lh)}
  .pi-card{padding:var(--space-4)}
  .pi-card.one{grid-template-columns:minmax(0,1fr);grid-template-areas:"fact" "path" "side";gap:var(--space-3)}
  .pi-card.one>.pi-c-side{max-width:none}
  .pi-steps{flex-direction:column;align-items:stretch;gap:var(--space-2)}
  .pi-steps>li,.pi-steps>li:last-child{flex:none}
  .pi-steps>li:not(:last-child)::after{display:none}
  .pi-foot.has-tabs{overflow-x:auto}
  .pi-tags{margin-inline-start:0}
  /* small inline buttons keep their look; the touch area grows into the space around them (as the old header chips did) */
  .fp-page :is(.pi-lang,.pi-stepbtn,button.fp-rb,.pi-int){min-height:0!important;position:relative}
  .fp-page :is(.pi-lang,.pi-stepbtn,button.fp-rb,.pi-int)::after{content:"";position:absolute;inset-inline:0;inset-block:calc((var(--control-touch) - 100%) / -2)}
  .pi-int{padding-block:var(--space-1)}
  .pi-c-top{flex-wrap:wrap}
  .pi-c-top>.pi-eb{flex:1 1 auto}
  /* contact buttons: 44px, icon and word side by side */
  .c3-v3 .c3-strip .c3-hacts .c3-hb{height:var(--control-touch);flex-direction:row;gap:var(--space-2);font-size:var(--text-body-size)}
}