/* ===========================================================================
   My Profile — .pf-*
   ---------------------------------------------------------------------------
   A RECORD page, not a dashboard, and every rule below follows the lesson the
   entity detail page already paid for: card titles are sentence case at a real
   size, NOT the .68rem uppercase micro-label this app uses for stat tiles —
   reaching for that treatment is what made a CRM screen read as a report.
   Field rows are label OVER value; side by side is a spec sheet.

   The page is a band stack — DARK lead band / white tab rail / inset pane —
   because #FAFAFA on a #FFFFFF card is a contrast ratio of 1.02 and every panel
   would otherwise float on nothing. --inset (#ECEDF1) is the ground INSIDE a
   card, and the dark band is what finally gives the page somewhere for the eye
   to land: it was three white-on-white bands of equal weight, which is most of
   what "flat" meant.

   THE BAND ITSELF IS NOT DECLARED HERE. It is base.css's shared house
   component, named .pf-band in the same selector lists as the other six bands,
   so a rule fixed on one band is fixed on all seven. What this file keeps is
   the band's margin and padding, its one top-row override, and the treatments
   nothing else has — the neutral avatar disc, the contact pills, the status
   chips recoloured for a dark ground, and the two figures.

   NOTE: there is deliberately no `#page-profile { display: ... }` rule here.
   layout.css owns the shell, and an id selector scores 1-0-0 against the
   class's 0-1-0 — one such line in entities.css pinned the entity detail page
   visible on every route in the app. A feature stylesheet must not restate a
   shell rule.
   =========================================================================== */

/* ===== THE RECORD CARD ===== */

.pf-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ===== THE LEAD BAND =====
   THE SHARED HOUSE COMPONENT, declared in base.css against .pf-band alongside
   the other six bands. The ground, the gold wash, the z-index reset, the top
   row and BOTH halves of the dark lift are all there; this file carries only
   what genuinely differs on this page.

   IT USED TO BE A PRIVATE COPY — the seventh in the app — and it had drifted
   in the one way that matters: its ink was --shell-ink, the warm grey the
   shared section rejects by name because across a whole band it reads as
   coffee. Plain white at varying alpha is what every other band uses.

   IT IS ALSO FREE-STANDING NOW rather than welded into the top of the record
   card. That is what let the shared ground apply with no override: the shared
   band is a card in its own right — 14px radius, its own border, its own
   lift — and a header nested inside .pf-card had to cancel three of those
   seven declarations to sit flush. Cancelling most of a shared rule is not
   sharing it. It also puts this page on the same rhythm as every other band
   page: band, gap, content.

   THE BAND CARRIES ONLY WHAT THE CARDS BELOW IT DO NOT: the name, the status,
   the role and its scope sentence, the two CONTACT AFFORDANCES, and the two
   figures nothing else on the page states. Job title, business unit and
   employee id belong to Personal information ten rows down and must not come
   back — a band restating the card under it is the fault this page already
   paid for once.

   CONTRAST MEASURED, NOT CLAIMED. On #141310 / #1E1C17:
     #fff 18.58 / 17.02      white .82 on the pill  11.17 / 10.17
     white .72  9.88 / 9.30  white .55 (icons)       5.79 / 5.44
     white .58  6.76 / 6.50  gold-200 on its plate  10.56 / 9.43
   Every value on this band clears AA on both grounds. */

/* Its margin and its padding, and nothing else. */
.pf-band {
    margin: 0 0 1rem;
    padding: 1.35rem 1.35rem 1.15rem;
}

/* The shared top row centres its items; this one must not. The avatar is 58px
   and the identity block beside it runs to three lines, so centring drops the
   disc halfway down the name and leaves the Edit button floating in the middle
   of the band. One declaration, which is the shape of a per-page override this
   component already expects. */
.pf-band-top { align-items: flex-start; }

.pf-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: .01em;
    color: var(--accent-ink);
    background: var(--accent-weak);
    border: 1px solid var(--accent-line);
    overflow: hidden;
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* On the dark band the disc is NEUTRAL, not gold. EXACTLY ONE GOLD ELEMENT
   belongs here — the role badge — and a second leaves the band with no focal
   point, which is the fault the band exists to fix. */
.pf-band .pf-avatar {
    width: 58px;
    height: 58px;
    font-size: 1.15rem;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border-color: var(--shell-line);
}

.pf-id { min-width: 0; flex: 1 1 320px; }

.pf-name-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.pf-name {
    margin: 0;
    font-size: 1.42rem;
    font-weight: var(--fw-medium);
    letter-spacing: -.01em;
    color: var(--text);
    line-height: 1.2;
}

.pf-band .pf-name { color: #fff; font-size: 1.5rem; }

/* The scope sentence is PROSE, not a label, so it takes a real ratio rather
   than the 3:1 floor --text-dim is held to. */
.pf-role-line {
    margin: .22rem 0 0;
    font-size: var(--fs-md);
    color: var(--text-soft);
}
.pf-band .pf-role-line { color: rgba(255, 255, 255, .72); }   /* 9.88 / 9.30 */

/* The contact strip. Each item keeps its icon next to its own text, so a wrap
   never leaves an icon stranded at the end of a line. */
.pf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .5rem;
    font-size: var(--fs-md);
    color: var(--text-soft);
}
.pf-meta > span,
.pf-meta > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.pf-meta a { color: var(--text-soft); text-decoration: none; }
.pf-meta a:hover { color: var(--accent); text-decoration: underline; }
.pf-meta i { color: var(--text-dim); font-size: var(--fs-lg); flex: 0 0 auto; }
.pf-meta .pf-m-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* THESE TWO ARE CONTROLS, NOT VALUES — a mailto: and a tel: you can act on —
   which is the whole reason they survived the strip that used to restate job
   title, business unit and employee id from the card below. Drawing them as
   pills is what says so; the card is where a value belongs. */
.pf-band .pf-meta > a,
.pf-band .pf-meta > span {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--shell-line);
    color: rgba(255, 255, 255, .82);            /* 11.17 / 10.17 on the pill */
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.pf-band .pf-meta i { color: rgba(255, 255, 255, .55); }    /* 5.79 / 5.44 */
.pf-band .pf-meta > a:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(223, 197, 147, .4);
    color: var(--gold-200);
    text-decoration: none;
}
.pf-band .pf-meta > a:hover i { color: var(--gold-200); }

.pf-band-actions { margin-left: auto; flex: 0 0 auto; }

/* Outlined on the dark ground rather than filled, so the one gold element in
   the band stays the role badge. */
.pf-band .pf-band-actions .btn {
    background: rgba(255, 255, 255, .06);
    border-color: var(--shell-line);
    color: rgba(255, 255, 255, .86);
}
.pf-band .pf-band-actions .btn:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(223, 197, 147, .4);
    color: #fff;
}

/* ===== THE SECOND ROW: THE AFFORDANCES, AND THE TWO FIGURES =====
   .pf-band-body is the shared flex row (display / align / wrap); its gap and
   the space above it are this page's, because the row it holds is a strip of
   pills rather than a lead figure beside a basis column.

   THE FIGURES SIT ON THE RIGHT, opposite the contact pills, because at 1600px
   the band was an identity block on the left and a very large amount of black.
   margin-left: auto is what fills it without a spacer track — the fault the
   Active Accounts tables paid for, where a trailing empty column closed one
   gap by opening a bigger one. */
.pf-band-body {
    gap: .8rem 1.4rem;
    margin-top: .95rem;
}
.pf-band-figs {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.7rem;
}

/* NEITHER FIGURE IS GOLD, and that is the one rule of this band. The role
   badge is the focal point — what you are ALLOWED TO DO is what this page is
   about — and a gold figure beside it would leave the band with two focal
   points and therefore none. Measured on #141310 / #1E1C17: white 18.58 /
   17.02, white .78 11.44 / 10.72, white .58 6.76 / 6.50. */
.pf-bk { min-width: 0; }
.pf-bk[data-bs-toggle] { cursor: help; }
.pf-bk-v {
    font-size: 1.42rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.pf-bk-l {
    margin-top: .14rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: rgba(255, 255, 255, .78);
}
/* A RATIO'S BASE GOES ON THE CARD. "19 things you may do" without "of the 19
   this platform defines" is a figure nobody can size, which is the fault this
   project names most often — the agent console printed a cost per decision
   beside a count that was not its denominator, and Executive Overview panel 6
   printed a margin beside a figure that was not its base. This line is REAL
   PROSE, so it is held to 4.5:1 rather than the 3:1 a label gets. */
.pf-bk-s {
    margin-top: .12rem;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: rgba(255, 255, 255, .58);
}

/* ===== STATUS AND ROLE BADGES ===== */

.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pf-badge.ok       { background: var(--ok-weak);   color: var(--ok-ink);   border-color: var(--ok-line); }
.pf-badge.warn     { background: var(--warn-weak); color: var(--warn-ink); border-color: var(--warn-line); }
.pf-badge.bad      { background: var(--bad-weak);  color: var(--bad-ink);  border-color: var(--bad-line); }
.pf-badge.neutral  { background: var(--surface-3); color: var(--text-soft); border-color: var(--border); }
.pf-badge.gold     { background: var(--accent-weak); color: var(--accent-ink); border-color: var(--accent-line); }

/* ON THE DARK BAND the light-theme status tints go muddy, and a token pair
   tuned for a white card cannot simply be dropped onto #141310. Each chip
   becomes a translucent plate of its own colour with a light ink of the same
   hue — the treatment the entity hero already uses for direction — and THE WORD
   still carries the state, because colour never carries one on its own.
   Measured on #141310 / #1E1C17: ok 8.48 / 7.60, warn 9.18 / 8.21,
   bad 7.26 / 6.51, neutral 11.86 / 10.73. */
.pf-band .pf-badge {
    background: rgba(255, 255, 255, .07);
    border-color: var(--shell-line);
    color: rgba(255, 255, 255, .86);
}
.pf-band .pf-badge.ok {
    background: rgba(123, 216, 143, .12);
    border-color: rgba(123, 216, 143, .34);
    color: #7BD88F;
}
.pf-band .pf-badge.warn {
    background: rgba(242, 200, 121, .12);
    border-color: rgba(242, 200, 121, .34);
    color: #F2C879;
}
.pf-band .pf-badge.bad {
    background: rgba(255, 155, 138, .13);
    border-color: rgba(255, 155, 138, .36);
    color: #FF9B8A;
}
/* THE ONE GOLD ELEMENT ON THE BAND. The role is what this page is about — what
   you are allowed to do — so it is the figure the band leads with, and nothing
   else here is gold. Measured 10.56 / 9.43 on its own plate. */
.pf-band .pf-badge.gold {
    background: rgba(223, 197, 147, .14);
    border-color: rgba(223, 197, 147, .44);
    color: var(--gold-200);
    font-size: var(--fs-xs);
    padding: .16rem .6rem;
}

/* ===== TAB RAIL =====
   The strip is offset by the tab's own padding so the tab TEXT lands on the
   same 1.1rem the cards below it sit at — that is what the eye aligns to. */

/* The rail is WHITE and it is the top of the record card, with the canvas
   between it and the band above — the strongest separation available without a
   third treatment. No border-top: .pf-card already draws its own top edge and
   clips it to the radius, and two rules one pixel apart is a seam. */
.pf-tabs {
    display: flex;
    gap: .1rem;
    padding: 0 .3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
/* The scrollbar is hidden, so on a narrow screen nothing said the rail went on:
   "Preferences" was simply cut at the card edge. An edge FADES ONLY WHILE THAT
   SIDE HAS MORE - profile.js sets fade-l / fade-r from the scroll position.
   Faded always, the last tab read "Activity Lo" once you had scrolled to it,
   and nothing at the left said Overview was behind you. */
.pf-tabs.fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.pf-tabs.fade-l {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
            mask-image: linear-gradient(to right, transparent, #000 36px);
}
.pf-tabs.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.pf-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .72rem .75rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--text-soft);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.pf-tab i { font-size: var(--fs-lg); color: var(--text-dim); }
.pf-tab:hover { color: var(--text); }
.pf-tab:hover i { color: var(--text-soft); }
/* Gold is CHROME here, exactly as it is on the navigation rail's active item —
   this is a rail active state, not a category being encoded. */
.pf-tab.on {
    color: var(--text);
    font-weight: var(--fw-medium);
    border-bottom-color: var(--gold-500);
}
.pf-tab.on i { color: var(--accent); }

/* ===== THE PANE =====
   Grey band inside a white card: this is what separates the content from the
   tab rail above it without a second near-white fill. */

.pf-pane {
    background: var(--inset);
    padding: 1.05rem;
    min-height: 320px;
}

/* Both columns are ALWAYS rendered — Personal Information on the left,
   Messenger Employment and Account Summary on the right — so a fixed two-track
   grid is safe here. (The entity page's aside is optional, which is why that
   grid gains its second column from a class instead. A grid must never declare
   a column for a child that may not exist.) */
.pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.05rem;
    align-items: start;
}
/* IT USED TO COLLAPSE AT 1200px, AND THAT WAS TOO EARLY. The aside is a fixed
   340px, so at 1200 the record still had ~830px of its own — collapsing there
   handed every card the full width and left a short value stranded at the left
   of a 1090px row. It holds two columns until the record column itself would be
   narrower than a field pair. */
@media (max-width: 900px) {
    .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

.pf-col { display: flex; flex-direction: column; gap: 1.05rem; min-width: 0; }

/* ===== A CARD IN THE PANE ===== */

.pf-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 1rem 1.05rem 1.05rem;
    min-width: 0;
    container-type: inline-size;
}

/* A panel that is NOT filled in goes transparent rather than taking a second
   near-white fill — on a grey band that is what makes "not built yet" look
   different from "failed to load". */
.pf-panel.is-soon {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
}

/* A CARD TITLE IS A TITLE. Sentence case at a real size, NOT the .68rem
   uppercase micro-label this app uses for stat tiles — reaching for that
   treatment is what made a CRM screen read as a report. The hairline under it
   is what separates the head from the body: without one the title was simply
   the first line of a list. */
.pf-panel-h {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--text);
    letter-spacing: -.005em;
}
/* The icon sits in a small gold chip. Gold is CHROME — the same role it plays
   on a button or the rail's active item — and --accent-ink/--accent-weak is the
   theme-aware pair for it, measured 6.08:1 light and 8.50:1 dark. The raw ramp
   steps have no dark value and would measure 1.49:1 there. */
.pf-panel-h > i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: var(--fs-lg);
    color: var(--accent-ink);
    background: var(--accent-weak);
    border: 1px solid var(--accent-line);
}
.pf-panel-h .pf-h-right { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
/* The sub-line belongs to the head it explains, so it sits directly under the
   hairline rather than being pulled up over it. */
.pf-panel-sub {
    margin: -.35rem 0 .85rem;
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

/* ===== FIELD ROWS =====
   Label over value. The container is the COLUMN, not the card: a container
   query styles the container's DESCENDANTS and can never style the container
   element itself, so scoping the query to .pf-panel and then selecting
   .pf-panel inside it applies cleanly and does nothing. */

.pf-fields { display: grid; grid-template-columns: 1fr; gap: 0; }

/* EVERY field grid goes two-up once its card can hold two, not only the one
   marked .two. Messenger employment and Account summary carried no such class,
   so at 1200px — where the page used to collapse to one column — their values
   sat at the far left of a 1090px row with the rest of it white.
   TWO IS THE CAP, and that is arithmetic rather than taste: the browser guard
   in render-page.js reports a grid holding between cols+1 and cols*2-1 in-flow
   children as a wrapped row, and Account summary's four fields into three
   columns is exactly that shape. */
@container (min-width: 430px) {
    .pf-fields { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; }
}

.pf-f { padding: .55rem 0; border-top: 1px solid var(--border-soft); min-width: 0; }
/* The separator is per-ROW: in one column only the first field lacks a rule,
   in two the first TWO do, or the top-right field draws a line the top-left
   one does not. */
.pf-fields > .pf-f:first-child { border-top: 0; }
@container (min-width: 430px) {
    .pf-fields > .pf-f:nth-child(2) { border-top: 0; }
}

/* LABEL OVER VALUE, and the value outweighs the label: it is the thing being
   read, and at the same size and weight the two competed. --text-dim is a
   3:1 LABEL colour and this is a label, which is the one place it belongs. */
.pf-f-k {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-dim);
    letter-spacing: .005em;
    margin-bottom: .15rem;
}
.pf-f-v {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--text);
    overflow-wrap: anywhere;   /* a long business email must not escape the card */
}
.pf-f-v.na { color: var(--text-dim); font-style: italic; }
/* AN ABSENCE IS A SENTENCE, NOT A FIGURE. At the value's own size and weight
   "Not recorded" out-shouted the real values beside it - five of twelve
   fields on a typical record, the heaviest text on the card being the ones
   saying nothing. Same rule as the entity record's .dt-k-v > .dt-na. */
.pf-f-v.na { font-size: var(--fs-md); font-weight: var(--fw-normal); line-height: 1.6; }
/* A value with its own control beside it: the control sits on the value's
   line, so it is plainly about THAT field, not about the card. */
.pf-f-v.has-act { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
/* The business unit's logo sits on the value's line. Its height is the lockup's
   own (.bchip.sm, above the 22px floor); this only stops the inline box adding
   descender space under it. */
.pf-bu { display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; }
.pf-f-na-in {
    color: var(--text-dim); font-style: italic;
    font-size: var(--fs-md); font-weight: var(--fw-normal);
}
.pf-f.wide { grid-column: 1 / -1; }

/* A quiet trailing note beside a value — the manager's job title under their
   name. Was .pf-perm-src, named for the Role & Access card that no longer
   exists; renamed rather than left describing something that is gone. */

.pf-note {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-left: .3rem;
}

/* ===== TEAM TABLE =====
   The slack goes to the NAME column here: there is no bar to bridge the row,
   and the remaining columns hold short fixed-width values that are read down
   rather than across. Same rule as the Active Accounts panels 2 and 5. */

.pf-team-wrap { overflow-x: auto; }

.pf-team { width: 100%; min-width: 620px; border-collapse: collapse; }
.pf-team th {
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-dim);
    padding: 0 .55rem .45rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.pf-team td {
    padding: .5rem .55rem;
    font-size: var(--fs-md);
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.pf-team tbody tr:nth-child(even) { background: var(--surface-2); }
.pf-team tbody tr:hover { background: var(--accent-weak); }
.pf-team td.num { text-align: right; white-space: nowrap; }
/* The header over a numeric column aligns with it. `th` was left whatever its
   class, so "Last active" and "Actions" sat 150px left of what they label. */
.pf-team th.num { text-align: right; }

/* The line under the table: the page it shows, and the controls to turn it. */
.pf-team-foot {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .7rem;
    font-size: var(--fs-sm); color: var(--text-soft);
}

/* THE VIEWER'S OWN ROW. The team is the subtree INCLUDING you, so the list has
   to say which row that is - otherwise a person reads their own line as a
   report. The badge carries the WORD, because colour alone never carries
   identity in this app, and the tint is only there to make it findable. */
.pf-you {
    display: inline-block; margin-left: .35rem; vertical-align: 1px;
    font-size: var(--fs-3xs); font-weight: var(--fw-bold);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-ink); background: var(--accent-weak);
    border: 1px solid var(--accent-line); border-radius: var(--r-pill);
    padding: .05rem .4rem;
}
/* The cell where a Manage button would be on anybody else's row.
   set_team_member_access() refuses p_user_id = v_id, so a button there is a
   control that cannot work; an empty cell beside five populated ones reads as
   a button that failed to draw, so the reason is stated instead. */
.pf-na-in { color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap; }

/* A team of one is an ANSWER - the commonest one, since most people are leaves
   of the org chart. Drawn as a bare single-row table it reads as a list that
   half loaded, so the state is named above it. Not the greyed "not built" panel:
   there IS somebody to show and it is you. */
.pf-team-only {
    display: flex; gap: .6rem; align-items: flex-start;
    margin: 0 0 .8rem;
    padding: .65rem .8rem;
    border: 1px solid var(--accent-line); border-radius: var(--r-sm);
    background: var(--accent-weak);
    font-size: var(--fs-md); color: var(--text);
}
.pf-team-only i { color: var(--accent-ink); font-size: var(--fs-lg); line-height: 1.2; }
.pf-team-only b { font-weight: var(--fw-bold); }

.pf-who { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pf-who-av {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: var(--accent-ink);
    background: var(--accent-weak);
    border: 1px solid var(--accent-line);
}
.pf-who-t { min-width: 0; }
.pf-who-n {
    font-weight: var(--fw-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-who-e {
    font-size: var(--fs-sm); color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== "NOT BUILT YET" PANELS =====
   Drawn in place and greyed, never dropped: a missing panel reads as one
   nobody wanted, and one filled with a plausible number is worse than both. */

.pf-soon {
    display: flex;
    align-items: center;         /* fallback FIRST — a browser that does not
                                    know `safe` discards the whole declaration,
                                    not just the keyword */
    align-items: safe center;
    justify-content: center;
    flex-direction: column;
    gap: .4rem;
    text-align: center;
    padding: 1.6rem 1rem;
    color: var(--text-dim);
}
.pf-soon i { font-size: 1.5rem; opacity: .6; }
.pf-soon b { font-size: var(--fs-lg); color: var(--text-soft); font-weight: var(--fw-medium); }
.pf-soon span { font-size: var(--fs-md); max-width: 46ch; line-height: 1.45; }

/* ===== ACTIVITY =====
   Nothing here. The Activity tab is a host for the shared ActivityLog
   component (app/css/activity-log.css, .al-*), which the Admin Directory's
   dialog also mounts - the .pf-act-* rules that used to paint this tab's own
   copy of the log went with the copy. */

/* ===== EDIT FORM ===== */

.pf-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; }
@media (max-width: 560px) { .pf-edit { grid-template-columns: 1fr; } }
.pf-edit label {
    display: block;
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-dim);
    margin-bottom: .2rem;
}
.pf-edit .wide { grid-column: 1 / -1; }
.pf-edit-note {
    grid-column: 1 / -1;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    margin: 0;
}

/* ===== FOOTER ===== */

.pf-foot {
    margin: .9rem .2rem 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

/* ==================== THE HOME VOICE (2026-09-17) ==========================
   My Profile set the way Home sets itself: the name and the two figures bold
   and tracked -.02em at Home's sizes, card titles in bold with Home's 36px
   icon tile, labels in the soft medium Home gives a KPI label, pill buttons,
   rows that lift to --inset on hover, and a short rise on entry. SCOPED TO
   #pfBody so no other page that reuses a .pf-* class is reached. The band's
   one gold element is still the role badge; nothing here paints gold ink. */
@keyframes pfRise { from { opacity: 0; transform: translateY(10px); } }

/* ---- the band ---- */
#pfBody .pf-band { padding: 1.4rem 1.6rem 1.3rem; margin-bottom: 1.1rem; animation: pfRise .5s var(--ease-out) backwards; }
#pfBody .pf-band .pf-name { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.1; }
#pfBody .pf-band .pf-role-line { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: rgba(255,255,255,.78); margin-top: .2rem; }
#pfBody .pf-band-figs { gap: .6rem 0; }
#pfBody .pf-bk { padding: 0 1.6rem; }
#pfBody .pf-bk + .pf-bk { border-left: 1px solid var(--shell-line); }
#pfBody .pf-bk:last-child { padding-right: 0; }
#pfBody .pf-bk-v { font-size: var(--fs-3xl); letter-spacing: -.02em; line-height: 1.08; }
#pfBody .pf-bk-l { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: rgba(255,255,255,.82); margin-top: .25rem; }
#pfBody .pf-band .pf-band-actions .btn { border-radius: var(--r-pill); font-weight: var(--fw-bold); padding: .38rem 1rem; }
#pfBody .pf-band .pf-meta > a, #pfBody .pf-band .pf-meta > span { border-radius: var(--r-pill); }

/* ---- the record card and its rail ---- */
#pfBody .pf-card { border-radius: var(--r); animation: pfRise .55s var(--ease-out) backwards; animation-delay: 90ms; }
#pfBody .pf-tabs { padding: 0 .6rem; border-bottom-color: var(--border-soft); gap: .2rem; }
#pfBody .pf-tab {
    font-size: var(--fs-sm); padding: .85rem .8rem .8rem; border-bottom-width: 3px;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
#pfBody .pf-tab i { font-size: var(--fs-md); }
#pfBody .pf-tab.on { font-weight: var(--fw-bold); }
#pfBody .pf-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-sm); }
#pfBody .pf-pane { padding: 1.15rem; }

/* ---- a card in the pane ---- */
#pfBody .pf-panel {
    padding: 1.1rem 1.2rem 1.15rem;
    animation: pfRise .5s var(--ease-out) backwards;
    transition: box-shadow .25s var(--ease);
}
#pfBody .pf-col + .pf-col .pf-panel { animation-delay: 70ms; }
#pfBody .pf-panel:not(.is-soon):hover { box-shadow: var(--lift-2); }
#pfBody .pf-panel-h {
    font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.005em;
    gap: .7rem; padding-bottom: .85rem; margin-bottom: .85rem;
}
#pfBody .pf-panel-h > i {
    width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-lg); border: 0;
}
#pfBody .pf-panel-sub { font-size: var(--fs-xs); margin-top: -.45rem; }
#pfBody .pf-f { padding: .6rem 0; }
#pfBody .pf-f-k { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
#pfBody .pf-f-v { font-size: var(--fs-md); font-weight: var(--fw-bold); }
#pfBody .pf-f-v.na { font-weight: var(--fw-normal); color: var(--text-dim); }
#pfBody .btn { border-radius: var(--r-pill); font-weight: var(--fw-bold); }
#pfBody .pf-panel .btn-sm, #pfBody .pf-panel .btn-outline-secondary {
    background: var(--inset); border-color: var(--border-soft); color: var(--text);
    font-size: var(--fs-xs); padding: .3rem .85rem;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
#pfBody .pf-panel .btn-sm:hover, #pfBody .pf-panel .btn-outline-secondary:hover { background: var(--surface); border-color: var(--accent-line); color: var(--accent-ink); }
#pfBody .pf-badge { border-radius: var(--r-pill); font-weight: var(--fw-bold); }
#pfBody .form-control, #pfBody .form-select { border-radius: var(--r-pill); background-color: var(--inset); border-color: var(--border-soft); }
#pfBody .form-control:focus, #pfBody .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); background-color: var(--surface); }

/* ---- the team table ---- */
#pfBody .pf-team th {
    font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-soft);
}
#pfBody .pf-team tbody tr { transition: background .2s var(--ease); }
#pfBody .pf-team tbody tr:nth-child(even) { background: transparent; }
#pfBody .pf-team tbody tr:hover { background: var(--inset); }
/* YOUR OWN ROW, declared HERE and not beside .pf-you, because the two rules
   directly above it reset every row's background at this specificity - a plain
   `.pf-team tr.is-you` earlier in the file would lose the cascade and do
   nothing at all, silently, which is the fault this project keeps paying for. */
#pfBody .pf-team tbody tr.is-you { background: var(--accent-weak); }
#pfBody .pf-team tbody tr.is-you:hover { background: var(--accent-weak); }
#pfBody .pf-team tbody tr.is-you td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#pfBody .pf-who-av { width: 34px; height: 34px; font-weight: var(--fw-bold); }
#pfBody .pf-who-av.me { border-color: var(--accent); }
#pfBody .pf-who-n { font-weight: var(--fw-bold); }

/* ---- a card that is not built yet ---- */
#pfBody .pf-soon i {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-weak); color: var(--accent-ink); opacity: 1;
}

/* ---- the two dialogs, which live in index.html and are reached by id ---- */
#pfEditModal .modal-content, #pfManageModal .modal-content {
    border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
}
#pfEditModal .modal-title, #pfManageModal .modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.01em; }
#pfEditModal .modal-footer .btn, #pfManageModal .modal-footer .btn { border-radius: var(--r-pill); font-weight: var(--fw-bold); }

@media (max-width: 767.98px) {
    #pfBody .pf-bk { padding: 0 1rem 0 0; }
    #pfBody .pf-bk + .pf-bk { padding-left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    #pfBody .pf-band, #pfBody .pf-card, #pfBody .pf-panel { animation: none; }
}