/* ===========================================================================
 * Connections (/people).
 *
 * Colour comes entirely from the per-client tokens the live feed already
 * defines — --lf-action for the primary button, --lf-accent for the selected
 * state — so this page is themed by the same single source as the feed and
 * needs no per-brand rules of its own. Fallbacks keep it sane if a page renders
 * before those are emitted.
 *
 * Borders follow the rule established on the feed: one neutral hairline, and an
 * accent border only where the fill is the accent too.
 * =========================================================================== */
body.pplPageV2 {
    --ppl-ink:      #131a18;
    --ppl-ink-2:    #4e5b57;
    --ppl-ink-3:    #6b7975;
    --ppl-line:     var(--lf-line, #dfe5e2);
    --ppl-surface:  #ffffff;
    --ppl-raise:    #f4f6f7;
    --ppl-accent:   var(--lf-accent, #0c7a55);
    --ppl-accent-ink: var(--lf-accent-ink, #ffffff);
    --ppl-action:   var(--lf-action, var(--lf-accent, #0c7a55));
    --ppl-action-ink: var(--lf-action-ink, var(--lf-accent-ink, #ffffff));

    background: #fbfcfc;
}

body.pplPageV2 .pplWrap {
    max-width: 1120px;
    margin: 0 auto;
    /* the site header is position:fixed, so the page has to start below it */
    padding: calc(var(--lf-header-h, 65px) + 26px) 20px 72px;
}

/* --- header ------------------------------------------------------------- */
body.pplPageV2 .pplHead { margin-bottom: 18px; }
body.pplPageV2 .pplHead h1 {
    font-size: 26px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ppl-ink); margin: 0 0 4px;
}
body.pplPageV2 .pplHead p { color: var(--ppl-ink-3); font-size: 14px; margin: 0; }

/* --- tabs --------------------------------------------------------------- */
body.pplPageV2 .pplTabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 18px; padding: 0; list-style: none;
    border-bottom: 1px solid var(--ppl-line); padding-bottom: 14px;
}
body.pplPageV2 .pplTabs a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; text-decoration: none;
    font-size: 13.5px; font-weight: 600; line-height: 1.2;
    color: var(--ppl-ink-2); background: var(--ppl-surface);
    border: 1px solid var(--ppl-line);
    transition: background .15s, border-color .15s, color .15s;
}
body.pplPageV2 .pplTabs a:hover { border-color: #b9c6c2; color: var(--ppl-ink); }
body.pplPageV2 .pplTabs .is-on a {
    background: var(--ppl-accent); border-color: var(--ppl-accent); color: var(--ppl-accent-ink);
}
body.pplPageV2 .pplTabs .pplCount {
    display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: var(--ppl-raise); color: var(--ppl-ink-2);
    font-size: 11.5px; font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
}
body.pplPageV2 .pplTabs .is-on .pplCount {
    background: rgba(255, 255, 255, .22); color: inherit;
}

/* --- search ------------------------------------------------------------- */
body.pplPageV2 .pplSearch {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-bottom: 20px;
}
body.pplPageV2 .pplField { position: relative; flex: 1 1 240px; min-width: 0; }
body.pplPageV2 .pplField label {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ppl-ink-3); margin-bottom: 6px;
}
body.pplPageV2 .pplField input {
    width: 100%; padding: 10px 13px 10px 36px; font-size: 14.5px;
    color: var(--ppl-ink); background: var(--ppl-surface);
    border: 1px solid var(--ppl-line); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
body.pplPageV2 .pplField input:focus {
    outline: none; border-color: var(--ppl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppl-accent) 22%, transparent);
}
body.pplPageV2 .pplField .pplField-icon {
    position: absolute; left: 13px; bottom: 12px;
    color: var(--ppl-ink-3); font-size: 13px; pointer-events: none;
}

/* the city autocomplete the markup already wires up */
body.pplPageV2 #suggesstion-box {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--ppl-surface); border-radius: 10px;
    box-shadow: 0 14px 34px -16px rgba(19, 26, 24, .4);
}
body.pplPageV2 #suggesstion-box:not(:empty) { border: 1px solid var(--ppl-line); }
body.pplPageV2 #suggesstion-box ul { list-style: none; margin: 0; padding: 4px; }
body.pplPageV2 #suggesstion-box li {
    padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
}
body.pplPageV2 #suggesstion-box li:hover { background: var(--ppl-raise); }

/* --- results grid ------------------------------------------------------- */
body.pplPageV2 .pplGrid {
    display: grid; gap: 12px;
    /* wide enough that the name and its action each sit on one line; below this
       the card wrapped mid-name and split the facts over three lines */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

body.pplPageV2 .pplCard {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--ppl-surface);
    border: 1px solid var(--ppl-line); border-radius: 14px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
body.pplPageV2 .pplCard:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ppl-accent) 30%, var(--ppl-line));
    box-shadow: 0 10px 24px -18px rgba(19, 26, 24, .5);
}

/* The avatar is a fixed 52px hole in the layout and nothing the image does may
   change that. A profile photo that 404s used to render as a broken-image box
   sized to its alt text, which shoved the name aside and truncated it. The size
   is pinned on the anchor as well as the image, the alt is empty because the
   name sits beside it as a link, and overflow is clipped so a failed or
   oddly-shaped file is contained rather than laid out. */
body.pplPageV2 .pplCard-avatar {
    flex: none; display: block; overflow: hidden;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ppl-raise); border: 1px solid var(--ppl-line);
}
body.pplPageV2 .pplCard-avatar img {
    display: block;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
body.pplPageV2 .pplCard-body { flex: 1 1 auto; min-width: 0; }
body.pplPageV2 .pplCard-name {
    margin: 0 0 3px; font-size: 15px; font-weight: 650; line-height: 1.25;
    display: flex; align-items: center; gap: 7px; min-width: 0;
}
body.pplPageV2 .pplCard-name a {
    color: var(--ppl-ink); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pplPageV2 .pplCard-name a:hover { color: var(--lf-accent-strong, var(--ppl-accent)); text-decoration: underline; }
body.pplPageV2 .pplCard-name img { width: 17px; height: auto; border-radius: 2px; flex: none; }

body.pplPageV2 .pplCard-facts {
    display: flex; gap: 4px 12px; min-width: 0;
    margin: 0; padding: 0; list-style: none;
    font-size: 12.5px; color: var(--ppl-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pplPageV2 .pplCard-facts li { display: inline-flex; align-items: center; gap: 5px; flex: none; }
body.pplPageV2 .pplCard-facts em { font-size: 11px; opacity: .8; }
body.pplPageV2 .pplCard-facts--none { font-style: normal; opacity: .75; }

body.pplPageV2 .pplCard-actions {
    flex: none; display: flex; align-items: center; gap: 6px;
}

/* --- buttons ------------------------------------------------------------ */
body.pplPageV2 .pplBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
    font-size: 13.5px; font-weight: 650; line-height: 1.2;
    border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s;
}
body.pplPageV2 .pplBtn em { font-size: 12px; }
body.pplPageV2 .pplBtn--primary {
    background: var(--ppl-action); border-color: var(--ppl-action); color: var(--ppl-action-ink);
}
body.pplPageV2 .pplBtn--primary:hover { filter: brightness(1.08); }
body.pplPageV2 .pplBtn--quiet {
    background: var(--ppl-surface); border-color: var(--ppl-line); color: var(--ppl-ink-2);
}
body.pplPageV2 .pplBtn--quiet:hover { border-color: #b9c6c2; color: var(--ppl-ink); }
body.pplPageV2 .pplBtn--sent {
    background: var(--ppl-raise); border-color: var(--ppl-line); color: var(--ppl-ink-3); cursor: default;
}

/* --- overflow menu ------------------------------------------------------ */
body.pplPageV2 .pplMenu { position: relative; }
body.pplPageV2 .pplMenu-trigger {
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--ppl-ink-3);
}
body.pplPageV2 .pplMenu-trigger:hover { background: var(--ppl-raise); color: var(--ppl-ink); }
body.pplPageV2 .pplMenu-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
    background: var(--ppl-surface); border: 1px solid var(--ppl-line); border-radius: 11px;
    box-shadow: 0 16px 38px -18px rgba(19, 26, 24, .45); padding: 5px; overflow: hidden;
}
body.pplPageV2 .pplMenu-list[hidden] { display: none; }
body.pplPageV2 .pplMenu-list a {
    display: block; padding: 8px 11px; border-radius: 7px; cursor: pointer;
    font-size: 13.5px; color: var(--ppl-ink); text-decoration: none;
}
body.pplPageV2 .pplMenu-list a:hover { background: var(--ppl-raise); }
body.pplPageV2 .pplMenu-danger { color: #a3282f; }

/* --- empty, loading, errors --------------------------------------------- */
body.pplPageV2 .pplEmpty {
    text-align: center; padding: 56px 24px;
    background: var(--ppl-surface); border: 1px dashed var(--ppl-line); border-radius: 14px;
}
body.pplPageV2 .pplEmpty em {
    display: block; font-size: 26px; color: var(--ppl-ink-3); opacity: .55; margin-bottom: 12px;
}
body.pplPageV2 .pplEmpty h2 { font-size: 16px; font-weight: 650; color: var(--ppl-ink); margin: 0 0 5px; }
body.pplPageV2 .pplEmpty p { font-size: 14px; color: var(--ppl-ink-3); margin: 0 auto; max-width: 46ch; }

body.pplPageV2 .pplSkel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
body.pplPageV2 .pplSkel-card {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--ppl-surface); border: 1px solid var(--ppl-line); border-radius: 14px;
}
body.pplPageV2 .pplSkel-dot { width: 52px; height: 52px; border-radius: 50%; flex: none; }
body.pplPageV2 .pplSkel-lines { flex: 1; display: grid; gap: 7px; }
body.pplPageV2 .pplSkel-line { height: 10px; border-radius: 5px; }
body.pplPageV2 .pplSkel-line:first-child { width: 45%; }
body.pplPageV2 .pplSkel-line:last-child { width: 70%; }
body.pplPageV2 .pplSkel-dot,
body.pplPageV2 .pplSkel-line {
    background: linear-gradient(90deg, #eef1f0 25%, #e3e8e6 37%, #eef1f0 63%);
    background-size: 400% 100%;
    animation: pplShimmer 1.3s ease-in-out infinite;
}
@keyframes pplShimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* --- pagination --------------------------------------------------------- */
body.pplPageV2 .pplPager { margin-top: 22px; }
body.pplPageV2 .pplPager ul { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
body.pplPageV2 .pplPager a, body.pplPageV2 .pplPager span {
    display: inline-block; padding: 7px 12px; border-radius: 8px; text-decoration: none;
    font-size: 13.5px; color: var(--ppl-ink-2);
    background: var(--ppl-surface); border: 1px solid var(--ppl-line);
}
body.pplPageV2 .pplPager .active a, body.pplPageV2 .pplPager .active span {
    background: var(--ppl-accent); border-color: var(--ppl-accent); color: var(--ppl-accent-ink); font-weight: 650;
}

@media (max-width: 600px) {
    body.pplPageV2 .pplWrap { padding: calc(var(--lf-header-h, 65px) + 16px) 14px 56px; }
    body.pplPageV2 .pplGrid, body.pplPageV2 .pplSkel { grid-template-columns: 1fr; }
    body.pplPageV2 .pplCard { flex-wrap: wrap; }
    body.pplPageV2 .pplCard-actions { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    body.pplPageV2 .pplCard, body.pplPageV2 .pplBtn, body.pplPageV2 .pplTabs a { transition: none; }
    body.pplPageV2 .pplCard:hover { transform: none; }
    body.pplPageV2 .pplSkel-dot, body.pplPageV2 .pplSkel-line { animation: none; }
}

/* ===========================================================================
 * Employers.
 *
 * An organisation, not a person: a square logo rather than a round avatar, and
 * the status is a badge because "Connected" was previously a green button that
 * did nothing when clicked.
 * =========================================================================== */
/* People come in dozens and suit a grid. Employers come in ones and twos, and
   forcing them into the same two-column track is what squeezed the entity name
   into an ellipsis and pushed the dates onto a third line the logo could not
   align against. One full-width row each. */
body.pplPageV2 .pplGrid--wide { grid-template-columns: 1fr; }

body.pplPageV2 .pplOrg {
    display: flex; align-items: center; gap: 18px; padding: 18px 20px;
    background: var(--ppl-surface);
    border: 1px solid var(--ppl-line); border-radius: 14px;
    transition: border-color .16s, box-shadow .16s;
}
body.pplPageV2 .pplOrg:hover {
    border-color: color-mix(in srgb, var(--ppl-accent) 30%, var(--ppl-line));
    box-shadow: 0 10px 24px -18px rgba(19, 26, 24, .5);
}

/* Fixed box, clipped, so a missing or oddly-shaped logo cannot reflow the card.
   Landscape rather than square: company marks are wordmarks far more often than
   glyphs — EXL's is 193x40 — and a 4.8:1 wordmark contained in a square renders
   about eleven pixels tall, which is why this looked empty. */
body.pplPageV2 .pplOrg-logo {
    flex: none; overflow: hidden;
    width: 92px; height: 52px; border-radius: 10px;
    padding: 6px 8px;
    background: var(--ppl-raise); border: 1px solid var(--ppl-line);
    display: flex; align-items: center; justify-content: center;
}
body.pplPageV2 .pplOrg-logo img {
    display: block; width: 100%; height: 100%;
    max-width: 100%; max-height: 100%; object-fit: contain;
}

body.pplPageV2 .pplOrg-body { flex: 1 1 auto; min-width: 0; }
body.pplPageV2 .pplOrg-top {
    display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 4px;
}
body.pplPageV2 .pplOrg-name {
    margin: 0; font-size: 16px; font-weight: 650; color: var(--ppl-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pplPageV2 .pplOrg-meta {
    margin: 0; font-size: 13px; color: var(--ppl-ink-3); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pplPageV2 .pplOrg-sep { opacity: .5; padding: 0 2px; }
body.pplPageV2 .pplOrg-actions { flex: none; display: flex; align-items: center; gap: 8px; }

body.pplPageV2 .pplBadge {
    display: inline-block; flex: none; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
body.pplPageV2 .pplBadge.is-current { background: #e4f1ea; color: #1d6a49; }
body.pplPageV2 .pplBadge.is-past    { background: var(--ppl-raise); color: var(--ppl-ink-3); }
body.pplPageV2 .pplBadge.is-pending { background: #fdf1e3; color: #8c5a2b; }
body.pplPageV2 .pplBadge.is-sent    { background: #eaf0f6; color: #2c4d6b; }

body.pplPageV2 .pplDl { margin: 0; }
body.pplPageV2 .pplDl dt {
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ppl-ink-3); margin-top: 12px;
}
body.pplPageV2 .pplDl dt:first-child { margin-top: 0; }
body.pplPageV2 .pplDl dd { margin: 2px 0 0; font-size: 14.5px; color: var(--ppl-ink); }
body.pplPageV2 .pplDl-none { color: var(--ppl-ink-3); font-size: 14px; }

@media (max-width: 600px) {
    body.pplPageV2 .pplGrid--wide { grid-template-columns: 1fr; }
    body.pplPageV2 .pplOrg { flex-wrap: wrap; }
    body.pplPageV2 .pplOrg-actions { width: 100%; justify-content: flex-start; }
}