/* ============================================================
   global-person-chip — the platform's one "who" atom (ADR-125/131)

   Avatar + FULL first and last name. The name is never shortened
   to a first name or an initial: when a slot is too tight for the
   whole name, use the `--avatar` variant, which drops the label and
   carries the full name in a hover tooltip instead.

   Composes the `.global-avatar` primitive (components/avatar.css) — this
   file never redefines the circle, the overflow, or the image fit. It
   only owns the layout, the size ladder, and the two behavioural variants.

   Size ladder (avatar diameter; the variant carries it, not a prop):
     --full      40px + name + role   headers, detail rails, cards
     (default)   32px + name          general lists
     --compact   24px + name          table cells, menu rows
     --micro     16px + name          meta lines under a title
     --avatar    32px face only       full name lives in the tooltip

   Behavioural variants:
     --dropdown  pill-backed, clickable, with a __chevron affordance
     --stacked   a CONTAINER of `--avatar` chips, faces overlapping

   Partials: shared/components/_person_chip.html
             shared/components/_person_stack.html
   ============================================================ */

.global-person-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

/* The class sits on EITHER a `.global-avatar` span wrapping an <img>, OR directly
   on a bare <img> (the micro meta lines). object-fit therefore belongs here, not
   only on `.global-avatar img` — without it a non-square photo on a bare <img> is
   stretched to the square box instead of cropped. It is inert on the span. */
.global-person-chip__avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    object-fit: cover;
}

.global-person-chip__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The name is never truncated: a person is identified by their
   full first + last, so it wraps to a second line before it ever ellipses.
   Only the secondary meta line below may clip. */
.global-person-chip__name {
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* A linked name stays ink and picks up its underline on the pointer. A column of
   underlined names would outshout the values beside it; the weight already tells
   a name from its data. */
a.global-person-chip__name {
    color: var(--color-text);
    text-decoration: none;
}

a.global-person-chip__name:hover,
a.global-person-chip__name:focus-visible {
    text-decoration: underline;
}

/* Secondary line under the name — a role, an email, a team.
   --color-grey-500 (#8d8588) is 3.59:1 on white; the lighter
   --color-text-muted (#9ca3af) is only 2.54:1. This line is the smallest
   type in the atom, so it takes the darker of the two greys the absorbed
   clones used — a migration must never lower contrast. */
.global-person-chip__meta {
    font-size: var(--font-size-xs);
    color: var(--color-grey-500);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full — 40px, name + role. Headers, detail rails, cards. */
.global-person-chip--full .global-person-chip__avatar {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-md);
}

/* Compact — 24px, name only. Table cells and menu rows. */
.global-person-chip--compact {
    gap: var(--spacing-xs);
}

.global-person-chip--compact .global-person-chip__avatar {
    width: 24px;
    height: 24px;
    /* No token below --font-size-2xs; it keeps two initials inside 24px. */
    font-size: var(--font-size-2xs);
}

.global-person-chip--compact .global-person-chip__name {
    font-size: var(--font-size-sm);
}

/* Micro — 16px, name only. Meta lines under a file or form title. */
.global-person-chip--micro {
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.global-person-chip--micro .global-person-chip__avatar {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-2xs);
}

.global-person-chip--micro .global-person-chip__name {
    font-weight: inherit;
    font-size: inherit;
}

/* An icon standing in for a missing photo on the micro line. */
.global-person-chip__avatar-fallback {
    font-size: var(--font-size-md);
    flex-shrink: 0;
    line-height: 1;
}

/* Avatar-only — the face carries the full name in its tooltip.
   This is the ONLY sanctioned way to shrink a person chip; never
   truncate the name to a first name or an initial. */
.global-person-chip--avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

/* --- Dropdown + pill -----------------------------------------
   Both wear the same soft pill skin. The dropdown opens a picker (pointer
   + hover state); the pill is a static label with no picker behind it.
   The panel a dropdown opens is the caller's — this only styles the trigger. */
.global-person-chip--dropdown,
.global-person-chip--pill {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    vertical-align: middle;
}

.global-person-chip--dropdown {
    position: relative;
    cursor: pointer;
    transition: background-color 120ms ease-in-out;
}

.global-person-chip--dropdown:hover,
.global-person-chip--dropdown:focus {
    background: var(--color-surface-hover);
    outline: none;
}

.global-person-chip--pill .global-person-chip__avatar,
.global-person-chip--dropdown .global-person-chip__avatar {
    width: 20px;
    height: 20px;
    font-size: var(--font-size-2xs);
}

.global-person-chip__current {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

/* The chevron sits on the pill fill (--color-surface-subtle, #f8f9fa), not
   white. --color-grey-500 (#8d8588) is only 3.41:1 there — under 4.5:1. Bind to
   --color-text-secondary (#64748b), the app's cool secondary-text grey and the
   closest existing token to the original #6b7280: 4.51:1 on the resting pill. */
.global-person-chip__chevron {
    font-size: var(--font-size-2xs);
    color: var(--color-text-secondary);
    transition: transform 150ms ease-in-out;
    margin-left: var(--spacing-2xs);
    flex-shrink: 0;
}

.global-person-chip__chevron--open {
    transform: rotate(180deg);
}

/* --- Stacked --------------------------------------------------
   A container of `--avatar` chips whose faces overlap. Each face
   still carries its own full-name tooltip, so no name is lost. */
.global-person-chip--stacked {
    display: inline-flex;
    align-items: center;
}

.global-person-chip--stacked .global-person-chip--avatar {
    border: 2px solid var(--color-card-bg);
}

.global-person-chip--stacked .global-person-chip--avatar + .global-person-chip--avatar {
    margin-left: -10px;
}

.global-person-chip--stacked .global-person-chip--avatar:hover,
.global-person-chip--stacked .global-person-chip--avatar:focus-visible {
    z-index: var(--z-sticky);
    position: relative;
}