/* OwnerChip — Owner / Assignee / Approver / Reviewer / Custodian indicator.
 *
 * Spec: docs/enterprise-grc-review-2026-05-24/09-ux-styling-review.md § 3.6
 * Glossary: docs/glossary.md
 *
 * Token contract
 * --------------
 * Role badge colours pull from the categorical --cat-* palette (no
 * purples per CLAUDE.md) so the chip stays visually distinct from
 * StatusBadge (which uses --color-success/warning/danger/info).
 *
 *   Owner      → --cat-blue   (accountable, primary brand-aligned)
 *   Assignee   → --cat-teal   (active work)
 *   Approver   → --cat-cyan   (gate / signoff)
 *   Reviewer   → --cat-sky    (quality check)
 *   Custodian  → --cat-slate  (operational, neutral)
 *
 * The avatar visual comes from UserAvatarChip (see
 * css/components/user-avatar-chip.css) and is colour-hashed per user;
 * the role pill is colour-hashed per role. They don't compete.
 */

.owner-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1;
    /* --color-text-primary is a phantom; the real token is --text-primary. This was
       resolving to the #f5f5f5 fallback — a dark-palette literal — on every theme. */
    color: var(--text-primary, #f5f5f5);
    background: transparent;
    border: 1px solid transparent;
    vertical-align: middle;
    text-decoration: none;
    user-select: none;
    /* Reset button defaults so <button class="owner-chip"> sits flush. */
    font-family: inherit;
    font-weight: 500;
    cursor: default;
}

/* Sizes */
.owner-chip--sm { font-size: var(--text-xs, 0.75rem); gap: 0.25rem; padding: 0 0.25rem; }
.owner-chip--md { font-size: var(--text-sm, 0.875rem); }

/* ─────────────────────────────────────────────────────────────────────
 * Avatar slot — sized to match UserAvatarChip xs / sm.
 * ─────────────────────────────────────────────────────────────────────
 */
.owner-chip__avatar {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Fallback when UserAvatarChip is unavailable. Mirrors the look of the
 * primitive but with our own color hash. Kept conservative — the real
 * primitive should always win. */
.owner-chip__avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cat-slate-bg, rgba(100, 116, 139, 0.1));
    color: var(--cat-slate-dark, #475569);
    border: 1.5px solid var(--cat-slate, #64748b);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.owner-chip--sm .owner-chip__avatar-fallback {
    width: 18px; height: 18px; font-size: 9px;
}

/* Unassigned placeholder — dashed circle */
.owner-chip__avatar--unassigned {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px dashed var(--cat-slate, #64748b);
    background: transparent;
    display: inline-block;
    box-sizing: border-box;
}
.owner-chip--sm .owner-chip__avatar--unassigned {
    width: 18px; height: 18px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Name label
 * ─────────────────────────────────────────────────────────────────────
 */
.owner-chip__name {
    /* Tables compete for width; clip generously to avoid runaway
     * employee names breaking the row. */
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.owner-chip--unassigned .owner-chip__name {
    font-style: italic;
    color: var(--text-secondary, var(--cat-slate-text, #94a3b8));
}

/* ─────────────────────────────────────────────────────────────────────
 * Role pill — small uppercase badge after the name
 * ─────────────────────────────────────────────────────────────────────
 */
.owner-chip__role {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.owner-chip__role--owner {
    background: var(--cat-blue-bg, rgba(59, 130, 246, 0.1));
    color: var(--cat-blue-text, #93c5fd);
    border-color: var(--cat-blue-border, rgba(59, 130, 246, 0.3));
}
.owner-chip__role--assignee {
    background: var(--cat-teal-bg, rgba(20, 184, 166, 0.1));
    color: var(--cat-teal-text, #5eead4);
    border-color: var(--cat-teal-border, rgba(20, 184, 166, 0.3));
}
.owner-chip__role--approver {
    background: var(--cat-cyan-bg, rgba(6, 182, 212, 0.1));
    color: var(--cat-cyan-text, #67e8f9);
    border-color: var(--cat-cyan-border, rgba(6, 182, 212, 0.3));
}
.owner-chip__role--reviewer {
    background: var(--cat-sky-bg, rgba(14, 165, 233, 0.1));
    color: var(--cat-sky-text, #7dd3fc);
    border-color: var(--cat-sky-border, rgba(14, 165, 233, 0.3));
}
.owner-chip__role--custodian {
    background: var(--cat-slate-bg, rgba(100, 116, 139, 0.1));
    color: var(--cat-slate-text, #cbd5e1);
    border-color: var(--cat-slate-border, rgba(100, 116, 139, 0.3));
}

/* ─────────────────────────────────────────────────────────────────────
 * Interactive variants (when wrapped in <a> or <button>)
 * ─────────────────────────────────────────────────────────────────────
 */
.owner-chip--interactive {
    cursor: pointer;
    transition: background 120ms ease-out, transform 80ms ease-out;
}
.owner-chip--interactive:hover {
    background: var(--cat-slate-bg, var(--cat-slate-bg, rgba(100, 116, 139, 0.1)));
}
.owner-chip--interactive:active { transform: translateY(1px); }
.owner-chip--interactive:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* Reset native button styles so the chip looks identical as either tag. */
button.owner-chip {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.125rem 0.375rem;
}

a.owner-chip { text-decoration: none; }
a.owner-chip:hover .owner-chip__name { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
 * A11y / theme adaptations
 * ─────────────────────────────────────────────────────────────────────
 */

@media (prefers-reduced-motion: reduce) {
    .owner-chip--interactive { transition: none; }
}

@media (prefers-contrast: more) {
    .owner-chip__role { border-width: 2px; }
}