/* Item 3523: the person Overview's own rules; the shared band, rail, card and footer rules are company-overview.css's (.company-page), which the person page also carries. */

/* The company link in the band (mockup .co-link). */
.person-page .co-link { display: inline-flex; align-items: center; gap: 6px; align-self: center; height: 24px; padding: 0 10px 0 8px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-bg); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.person-page .co-link:hover { border-color: var(--accent); }
.person-page .co-link .ico { width: 14px; height: 14px; }

/* The Transferred marker (mockup; the later rule overrides the first). */
.person-page .marker--transferred { color: var(--stop); background: var(--stop-bg); }

/* Email consent chips. */
.person-page .consent { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px; border: 1px solid; }
.person-page .consent.in { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); }
.person-page .consent.out { color: var(--stop); background: var(--stop-bg); border-color: var(--stop); }

/* The membership-in-focus card's registration line. */
.person-page .reg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 10px; margin-bottom: 10px; background: var(--rail); border: 1px solid var(--line2); border-radius: 4px; font-size: 12.5px; }
.person-page .reg-line b { font-size: 11px; color: var(--ink3); font-weight: 600; margin-right: 4px; }
/* "Inherited from <owner> (<number>)": its own line beneath the row, italic (mockup .mem-owner; the company page has its own rule). */
.person-page .mem-owner { margin: 0; font-size: 12px; color: var(--ink2); font-style: italic; }
.person-page .reg-line + .mem-pick, .person-page .mem-owner + .mem-pick { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line2); }

/* An inactive linked person's pill; the base .pill is company-overview.css's. */
.person-page .pill.inactive { color: var(--stop); border-color: var(--stop); background: var(--stop-bg); }
/* A chip that follows a name or a value keeps a gap from it (product owner, live demo of item 3523). */
.person-page .pill, .person-page .consent { margin-left: 8px; }

/* The Emails card. */
.person-page .em-type { font-size: 11px; font-weight: 600; color: var(--ink3); }
.person-page .em-sec { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line2); }
.person-page .em-sec h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--ink3); }
.person-page .em-row { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; font-size: 12.5px; padding: 4px 0; }
.person-page .em-row > span:last-child { overflow-wrap: anywhere; }
/* A half-width card: the type label above its address (mockup html.w-le1279 .em-row). */
@media (max-width: 1279px) { .person-page .em-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* The Linked persons card's relation text (mockup .lnkp .rel). */
.person-page .lnk-rel { font-size: 11.5px; color: var(--ink2); }