/* ──────────────────────────────────────────────────────────────────────
   Modern Resourcing — Client Portal Redesign (Phase 0)
   Source of truth: /tmp/mr-portal-design/Portal*.png + Portal*.tsx
   Visual identity: dark glassmorphic, cyan/emerald/amber/violet glows.

   Mirrors the convention in static/style.css — CSS custom properties
   declared at :root, BEM-ish class names with a `pt-` prefix to keep
   the new portal layer isolated from the admin shell (`sr-` is taken
   by the search product, unprefixed by the admin layout).

   Phases 1-6 will fill in dashboard tiles, kanban, candidate detail,
   etc. on top of these primitives. This file should stay tight — no
   dead-code stubs for unbuilt surfaces.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Tokens ────────────────────────────────────────────────────────── */
:root {
    /* ── Background system ──────────────────────────────────────── */
    --pt-bg-base:     #0a0a0b;                   /* page */
    --pt-bg-surface:  #0f0f12;                   /* solid card */
    --pt-bg-elev:     #14141a;                   /* inputs / elevated */
    --pt-bg-glass:    rgba(255, 255, 255, 0.03); /* glassmorphic card */
    --pt-bg-glass-strong: rgba(255, 255, 255, 0.05);
    --pt-bg-overlay:  rgba(10, 10, 11, 0.80);

    /* ── Borders ────────────────────────────────────────────────── */
    --pt-border-faint:  rgba(255, 255, 255, 0.04);
    --pt-border:        rgba(255, 255, 255, 0.08);
    --pt-border-strong: rgba(255, 255, 255, 0.15);

    /* ── Text ──────────────────────────────────────────────────── */
    --pt-text-primary:   #ffffff;
    --pt-text-secondary: #cbd5e1;  /* slate-300 */
    --pt-text-muted:     #94a3b8;  /* slate-400 */
    --pt-text-faint:     #64748b;  /* slate-500 */
    --pt-text-ghost:     #475569;  /* slate-600 */

    /* ── Accent palette — the glow colors used on tiles, badges,
           progress bars, and active nav highlights. Each accent has
           a 300 (text/icon), 500 (solid), and glow (rgba) form. ─── */
    --pt-cyan-300:    #67e8f9;
    --pt-cyan-500:    #06b6d4;
    --pt-cyan-glow:   rgba(34, 211, 238, 0.15);
    --pt-cyan-tint:   rgba(34, 211, 238, 0.10);
    --pt-cyan-ring:   rgba(34, 211, 238, 0.30);

    --pt-emerald-300: #6ee7b7;
    --pt-emerald-500: #10b981;
    --pt-emerald-glow: rgba(52, 211, 153, 0.15);
    --pt-emerald-tint: rgba(52, 211, 153, 0.10);
    --pt-emerald-ring: rgba(52, 211, 153, 0.30);

    --pt-amber-300:   #fcd34d;
    --pt-amber-500:   #f59e0b;
    --pt-amber-glow:  rgba(251, 191, 36, 0.15);
    --pt-amber-tint:  rgba(251, 191, 36, 0.10);
    --pt-amber-ring:  rgba(251, 191, 36, 0.30);

    --pt-violet-300:  #c4b5fd;
    --pt-violet-500:  #8b5cf6;
    --pt-violet-glow: rgba(167, 139, 250, 0.15);
    --pt-violet-tint: rgba(167, 139, 250, 0.10);
    --pt-violet-ring: rgba(167, 139, 250, 0.30);

    --pt-rose-300:    #fda4af;
    --pt-rose-500:    #ef4444;
    --pt-rose-glow:   rgba(248, 113, 113, 0.15);
    --pt-rose-tint:   rgba(248, 113, 113, 0.10);
    --pt-rose-ring:   rgba(248, 113, 113, 0.30);

    /* ── Type ──────────────────────────────────────────────────── */
    --pt-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                    'Segoe UI', sans-serif;
    --pt-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace,
                    SFMono-Regular, monospace;

    /* ── Radii ─────────────────────────────────────────────────── */
    --pt-radius-sm: 6px;
    --pt-radius:    10px;
    --pt-radius-lg: 14px;
    --pt-radius-xl: 20px;

    /* ── Shadows ───────────────────────────────────────────────── */
    --pt-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --pt-shadow:       0 4px 12px rgba(0, 0, 0, 0.35),
                       0 1px 2px rgba(0, 0, 0, 0.4);
    --pt-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.45);
    --pt-shadow-glow-cyan:    0 4px 16px -4px rgba(34, 211, 238, 0.40);
    --pt-shadow-glow-emerald: 0 4px 16px -4px rgba(52, 211, 153, 0.40);
    --pt-shadow-glow-amber:   0 4px 16px -4px rgba(251, 191, 36, 0.40);
    --pt-shadow-glow-violet:  0 4px 16px -4px rgba(167, 139, 250, 0.40);

    /* ── Layout ────────────────────────────────────────────────── */
    --pt-sidebar-width: 248px;
    --pt-topbar-height: 60px;

    /* ── Motion ────────────────────────────────────────────────── */
    --pt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --pt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset (scoped to portal shell) ────────────────────────────────── */
.pt-shell *,
.pt-shell *::before,
.pt-shell *::after,
.pt-auth-shell *,
.pt-auth-shell *::before,
.pt-auth-shell *::after {
    box-sizing: border-box;
}

/* ─── Body baseline for portal pages ────────────────────────────────── */
body.pt-body {
    margin: 0;
    background: var(--pt-bg-base);
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    selection: background var(--pt-cyan-tint);
    min-height: 100vh;
}

body.pt-body a { color: inherit; text-decoration: none; }

/* ─── Ambient glow background (decorative, behind everything) ───────── */
.pt-bg-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.pt-bg-glow::before,
.pt-bg-glow::after {
    content: "";
    position: absolute;
    width: 55%;
    height: 55%;
    border-radius: 999px;
    filter: blur(140px);
    pointer-events: none;
}
.pt-bg-glow::before {
    top: -20%; left: -10%;
    background: rgba(34, 211, 238, 0.10);
}
.pt-bg-glow::after {
    bottom: -20%; right: -10%;
    background: rgba(52, 211, 153, 0.10);
}

/* ─── Layout primitives ─────────────────────────────────────────────── */
.pt-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--pt-sidebar-width) 1fr;
    min-height: 100vh;
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-sans);
}

/* ─── Sidebar ───────────────────────────────────────────────────────── */
.pt-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    width: var(--pt-sidebar-width);
    border-right: 1px solid var(--pt-border-faint);
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    padding: 18px 14px 14px;
    gap: 14px;
    z-index: 5;
}

.pt-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--pt-border-faint);
    color: var(--pt-text-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.pt-sidebar__brand-mark {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 14px -6px rgba(34, 211, 238, 0.6);
}
.pt-sidebar__brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pt-sidebar__account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border);
    background: var(--pt-bg-glass);
    color: var(--pt-text-primary);
    cursor: default;
    font-size: 13px;
}
.pt-sidebar__account-initials {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #1f2937, #0f172a);
    border: 1px solid var(--pt-border-strong);
    color: var(--pt-text-muted);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.pt-sidebar__account-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.pt-sidebar__account-chevron {
    color: var(--pt-text-faint);
    flex-shrink: 0;
}

.pt-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.pt-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s var(--pt-ease-out),
                color 0.12s var(--pt-ease-out);
    cursor: pointer;
    border: 1px solid transparent;
}
.pt-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--pt-text-primary);
}
.pt-nav-item.is-active {
    background: rgba(255, 255, 255, 0.07);
    color: var(--pt-text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pt-nav-item.is-active .pt-nav-item__icon { color: var(--pt-cyan-300); }
.pt-nav-item__icon {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    color: currentColor;
    flex-shrink: 0;
}
.pt-nav-item__icon svg { display: block; }
.pt-nav-item__label { flex: 1; }
.pt-nav-item__badge {
    font-family: var(--pt-font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--pt-cyan-tint);
    color: var(--pt-cyan-300);
    border: 1px solid var(--pt-cyan-ring);
}

.pt-sidebar__footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--pt-border-faint);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    color: var(--pt-text-secondary);
    font-size: 12px;
}
.pt-sidebar__user-avatar {
    width: 28px; height: 28px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: linear-gradient(135deg,
        var(--pt-violet-500), var(--pt-cyan-500));
    color: var(--pt-text-primary);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.pt-sidebar__user-meta {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.pt-sidebar__user-name {
    color: var(--pt-text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-sidebar__user-email {
    color: var(--pt-text-faint);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-sidebar__signout {
    color: var(--pt-text-muted);
    font-size: 11px;
    padding: 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pt-sidebar__signout:hover { color: var(--pt-rose-300); }

/* ─── Main column ───────────────────────────────────────────────────── */
.pt-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

/* ─── Top bar ───────────────────────────────────────────────────────── */
.pt-topbar {
    height: var(--pt-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    border-bottom: 1px solid var(--pt-border-faint);
    background: rgba(10, 10, 11, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 4;
}
/* Slim breadcrumb (replaces the title block + the removed inert search).
   Section is the prominent label on list pages; when a page name follows
   (detail pages), the section dims to a parent crumb. Full per-page
   titles still live in .pt-pagehead, below. */
.pt-topbar__context {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt-topbar__section {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.12s var(--pt-ease-out);
}
.pt-topbar__section:hover { color: var(--pt-cyan-300); }
/* When a page crumb follows, the section becomes the muted parent. */
.pt-topbar__context:has(.pt-topbar__page) .pt-topbar__section {
    color: var(--pt-text-muted);
    font-weight: 500;
}
.pt-topbar__context:has(.pt-topbar__page) .pt-topbar__section:hover {
    color: var(--pt-text-primary);
}
.pt-topbar__page {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* "/" before every crumb after the first — works for any depth
   (Roles / Chief of Staff / Emory Scott). */
.pt-topbar__context > * + *::before {
    content: "/";
    margin-right: 8px;
    color: var(--pt-text-ghost);
    font-weight: 400;
}

.pt-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pt-topbar__bell {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--pt-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s var(--pt-ease-out),
                color 0.12s var(--pt-ease-out);
}
.pt-topbar__bell:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pt-text-primary);
}
.pt-topbar__avatar {
    width: 30px; height: 30px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: linear-gradient(135deg,
        var(--pt-violet-500), var(--pt-cyan-500));
    color: var(--pt-text-primary);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--pt-border-strong);
}

/* ─── Page container ────────────────────────────────────────────────── */
.pt-page {
    flex: 1;
    padding: 28px 32px 40px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* Per-page title/meta moved out of the fixed-height top bar into the
   content. The wrapper only adds spacing; the header component inside
   (.pt-detail-header / .pck-detail-header / .pt-prof__crumb / …) owns its
   own layout. Collapses to nothing on pages that set no header. */
.pt-pagehead { margin-bottom: 22px; }
.pt-pagehead:empty { display: none; }

.pt-page__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.pt-page__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
}
.pt-page__subtitle {
    font-size: 13px;
    color: var(--pt-text-muted);
    margin: 0;
}

/* ─── Footer ───────────────────────────────────────────────────────── */
.pt-footer {
    padding: 18px 32px;
    border-top: 1px solid var(--pt-border-faint);
    color: var(--pt-text-faint);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pt-footer__brand {
    font-family: var(--pt-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-text-muted);
}

/* ─── Card primitive ───────────────────────────────────────────────── */
.pt-card {
    position: relative;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 18px;
    overflow: hidden;
}
.pt-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-primary);
    margin: 0 0 12px 0;
}

/* ─── Stat tile (used heavily on Dashboard in Phase 1) ─────────────── */
.pt-tile {
    position: relative;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 18px;
    overflow: hidden;
}
.pt-tile::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 130px; height: 130px;
    border-radius: 999px;
    filter: blur(40px);
    pointer-events: none;
    background: var(--pt-tile-glow, var(--pt-cyan-glow));
}
.pt-tile__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pt-tile__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-text-faint);
}
.pt-tile__icon {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--pt-tile-tint, var(--pt-cyan-tint));
    color: var(--pt-tile-text, var(--pt-cyan-300));
    border: 1px solid var(--pt-tile-ring, var(--pt-cyan-ring));
}
.pt-tile__value {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.pt-tile__hint {
    position: relative;
    font-size: 11px;
    color: var(--pt-text-muted);
}

/* Tile color variants — set via custom-property fallbacks to keep
   the base .pt-tile rule single-source-of-truth. */
.pt-tile--cyan {
    --pt-tile-glow: var(--pt-cyan-glow);
    --pt-tile-tint: var(--pt-cyan-tint);
    --pt-tile-ring: var(--pt-cyan-ring);
    --pt-tile-text: var(--pt-cyan-300);
}
.pt-tile--emerald {
    --pt-tile-glow: var(--pt-emerald-glow);
    --pt-tile-tint: var(--pt-emerald-tint);
    --pt-tile-ring: var(--pt-emerald-ring);
    --pt-tile-text: var(--pt-emerald-300);
}
.pt-tile--amber {
    --pt-tile-glow: var(--pt-amber-glow);
    --pt-tile-tint: var(--pt-amber-tint);
    --pt-tile-ring: var(--pt-amber-ring);
    --pt-tile-text: var(--pt-amber-300);
}
.pt-tile--violet {
    --pt-tile-glow: var(--pt-violet-glow);
    --pt-tile-tint: var(--pt-violet-tint);
    --pt-tile-ring: var(--pt-violet-ring);
    --pt-tile-text: var(--pt-violet-300);
}
.pt-tile--rose {
    --pt-tile-glow: var(--pt-rose-glow);
    --pt-tile-tint: var(--pt-rose-tint);
    --pt-tile-ring: var(--pt-rose-ring);
    --pt-tile-text: var(--pt-rose-300);
}

/* ─── Badges (status pills) ────────────────────────────────────────── */
.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid var(--pt-border);
    background: var(--pt-bg-glass);
    color: var(--pt-text-muted);
}
.pt-badge--success {
    border-color: var(--pt-emerald-ring);
    background: var(--pt-emerald-tint);
    color: var(--pt-emerald-300);
}
.pt-badge--warn {
    border-color: var(--pt-amber-ring);
    background: var(--pt-amber-tint);
    color: var(--pt-amber-300);
}
.pt-badge--danger {
    border-color: var(--pt-rose-ring);
    background: var(--pt-rose-tint);
    color: var(--pt-rose-300);
}
.pt-badge--info {
    border-color: var(--pt-cyan-ring);
    background: var(--pt-cyan-tint);
    color: var(--pt-cyan-300);
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s var(--pt-ease-out),
                border-color 0.12s var(--pt-ease-out),
                color 0.12s var(--pt-ease-out),
                filter 0.12s var(--pt-ease-out);
    text-decoration: none;
    background: transparent;
    color: var(--pt-text-primary);
}
.pt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pt-btn--primary {
    background: linear-gradient(180deg, var(--pt-cyan-300), var(--pt-cyan-500));
    color: #0a0a0b;
    box-shadow: var(--pt-shadow-glow-cyan);
}
.pt-btn--primary:hover:not(:disabled) { filter: brightness(1.1); }
.pt-btn--secondary {
    background: var(--pt-bg-glass-strong);
    border-color: var(--pt-border);
    color: var(--pt-text-primary);
}
.pt-btn--secondary:hover:not(:disabled) {
    border-color: var(--pt-border-strong);
    background: rgba(255, 255, 255, 0.07);
}
.pt-btn--ghost {
    color: var(--pt-text-muted);
}
.pt-btn--ghost:hover:not(:disabled) {
    color: var(--pt-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* ─── Progress bar (used on Active Roles list in Phase 1) ──────────── */
.pt-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.pt-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pt-cyan-500), var(--pt-emerald-500));
    transition: width 0.3s var(--pt-ease-out);
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 1 — Dashboard surface
   New classes layered on top of Phase 0's tile/card primitives. Same
   ``pt-`` prefix and naming conventions; nothing here overrides Phase 0.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Page header (welcome strip + last-sync chip) ─────────────────── */
.pt-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}
.pt-dash-header__lead { min-width: 0; }
.pt-dash-header__title {
    font-family: var(--pt-font-sans);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pt-text-primary);
    margin: 0 0 4px 0;
}
.pt-dash-header__sub {
    font-size: 13px;
    color: var(--pt-text-secondary);
    margin: 0;
}
.pt-dash-header__sub b {
    color: var(--pt-text-primary);
    font-weight: 600;
}
.pt-dash-header__sync {
    font-family: var(--pt-font-mono);
    font-size: 11px;
    color: var(--pt-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    flex-shrink: 0;
    padding-top: 6px;
    white-space: nowrap;
}

/* ─── Tile grid (4-up on desktop) ──────────────────────────────────── */
.pt-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) {
    .pt-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pt-tile-grid { grid-template-columns: 1fr; }
}

/* ─── Dashboard column layout (Active Roles + Activity Stream) ─────── */
.pt-dash-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
@media (max-width: 1000px) {
    .pt-dash-columns { grid-template-columns: 1fr; }
}

/* ─── Card header row (title + right-aligned action) ───────────────── */
.pt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 14px 0;
}
.pt-card__head-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0;
}
.pt-card__head-action {
    font-size: 11px;
    font-weight: 600;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    transition: color 0.12s var(--pt-ease-out);
}
.pt-card__head-action:hover { color: var(--pt-cyan-300); }

/* ─── Active Roles list ────────────────────────────────────────────── */
.pt-role-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pt-role-row {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 220px);
    gap: 18px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--pt-radius);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pt-border-faint);
    transition: border-color 0.12s var(--pt-ease-out),
                background 0.12s var(--pt-ease-out);
}
.pt-role-row:hover {
    border-color: var(--pt-border);
    background: rgba(255, 255, 255, 0.04);
}
.pt-role-row__lead { min-width: 0; }
.pt-role-row__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pt-text-primary);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-role-row__title-link {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s var(--pt-ease-out);
}
.pt-role-row__title-link:hover { color: var(--pt-cyan-300); }
.pt-role-row__sub {
    color: var(--pt-text-muted);
    font-size: 11px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-role-row__meter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pt-role-row__meter-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-family: var(--pt-font-mono);
    font-size: 10px;
    color: var(--pt-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* ─── Activity stream ──────────────────────────────────────────────── */
.pt-activity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
    overflow-y: auto;
    /* Reserve some breathing room so the scrollbar doesn't crowd icons. */
    padding-right: 4px;
}
.pt-activity__row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--pt-border-faint);
}
.pt-activity__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.pt-activity__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--pt-cyan-300);
    background: var(--pt-cyan-tint);
    border: 1px solid var(--pt-cyan-ring);
    flex-shrink: 0;
}
.pt-activity__icon svg { display: block; }
.pt-activity__body { min-width: 0; }
.pt-activity__desc {
    color: var(--pt-text-primary);
    font-size: 12px;
    margin: 0 0 2px 0;
    line-height: 1.4;
}
.pt-activity__meta {
    color: var(--pt-text-faint);
    font-size: 11px;
    line-height: 1.4;
}
.pt-activity__meta-name {
    color: var(--pt-text-muted);
    font-weight: 500;
}
.pt-activity__more {
    margin-top: 12px;
    text-align: center;
    color: var(--pt-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* "Live" indicator — small pulsing green dot. */
.pt-live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pt-emerald-300);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.pt-live-dot::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--pt-emerald-500);
    box-shadow: 0 0 0 0 var(--pt-emerald-ring);
    animation: pt-pulse 1.6s var(--pt-ease-out) infinite;
}
@keyframes pt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ─── Empty state (used inside Active Roles + Activity Stream) ─────── */
.pt-empty {
    text-align: center;
    padding: 28px 14px;
    color: var(--pt-text-muted);
}
.pt-empty__icon {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    margin: 0 auto 10px;
    border-radius: 999px;
    border: 1px solid var(--pt-border);
    color: var(--pt-text-faint);
}
.pt-empty__title {
    color: var(--pt-text-secondary);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.pt-empty__sub {
    color: var(--pt-text-faint);
    font-size: 11px;
    margin: 0;
    line-height: 1.5;
}

/* ─── Sourcing Pulse mini-widget (full-width strip) ────────────────── */
.pt-pulse-strip {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 16px 20px;
    border-color: var(--pt-violet-ring);
    background: linear-gradient(
        180deg,
        var(--pt-violet-tint),
        var(--pt-bg-glass)
    );
}
.pt-pulse-strip__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-violet-300);
    margin-bottom: 4px;
}
.pt-pulse-strip__title {
    color: var(--pt-text-primary);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-pulse-strip__center {
    text-align: left;
}
.pt-pulse-strip__count {
    font-family: var(--pt-font-mono);
    font-size: 22px;
    color: var(--pt-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.pt-pulse-strip__count-sub {
    color: var(--pt-text-muted);
    font-size: 11px;
    margin-top: 4px;
}
.pt-pulse-strip__cta {
    color: var(--pt-violet-300);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    transition: color 0.12s var(--pt-ease-out);
}
.pt-pulse-strip__cta:hover { color: var(--pt-text-primary); }
@media (max-width: 800px) {
    .pt-pulse-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ─── Auth shell (login + invite-accept, no sidebar) ───────────────── */
.pt-auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-sans);
}
.pt-auth-shell__inner {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pt-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pt-text-primary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.pt-auth-brand__mark {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 14px -6px rgba(34, 211, 238, 0.6);
}
.pt-auth-brand__mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.pt-auth-card {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-xl);
    background: var(--pt-bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 28px;
    box-shadow: var(--pt-shadow-md);
}
.pt-auth-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}
.pt-auth-card__subtitle {
    font-size: 13px;
    color: var(--pt-text-muted);
    margin: 0 0 20px 0;
}
.pt-auth-card__error {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--pt-rose-ring);
    background: var(--pt-rose-tint);
    color: var(--pt-rose-300);
    border-radius: 8px;
    font-size: 12px;
}
.pt-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.pt-auth-field__label {
    font-size: 11px;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.pt-auth-field__input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--pt-border);
    background: rgba(0, 0, 0, 0.40);
    color: var(--pt-text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.12s var(--pt-ease-out);
}
.pt-auth-field__input::placeholder { color: var(--pt-text-ghost); }
.pt-auth-field__input:focus { border-color: var(--pt-cyan-ring); }
.pt-auth-field__input[readonly] { color: var(--pt-text-muted); }
.pt-auth-card__actions { margin-top: 6px; }
.pt-auth-card__submit {
    width: 100%;
    justify-content: center;
}
.pt-auth-foot {
    text-align: center;
    color: var(--pt-text-faint);
    font-size: 11px;
    font-family: var(--pt-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.pt-auth-foot a { color: var(--pt-text-muted); }
.pt-auth-foot a:hover { color: var(--pt-cyan-300); }

/* ──────────────────────────────────────────────────────────────────────
   Phase 2 — Roles list + Role detail kanban
   New classes layered on top of Phase 0/1 primitives. Same ``pt-``
   prefix; nothing here overrides earlier rules.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Roles list — grid of Role tiles (3-up wide / 2-up med / 1-up narrow) ── */
.pt-roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) {
    .pt-roles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .pt-roles-grid { grid-template-columns: 1fr; }
}

.pt-role-tile {
    /* Reuses .pt-card primitive; this rule only adds tile-specific bits. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.12s var(--pt-ease-out),
                background 0.12s var(--pt-ease-out);
    color: inherit;
}
.pt-role-tile:hover {
    border-color: var(--pt-border-strong);
    background: var(--pt-bg-glass-strong);
}
.pt-role-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.pt-role-tile__title {
    font-family: var(--pt-font-sans);
    font-weight: 600;
    font-size: 16px;
    color: var(--pt-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.pt-role-tile__pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pt-role-tile__sub {
    color: var(--pt-text-muted);
    font-size: 12px;
    margin: 0;
}
.pt-role-tile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--pt-text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--pt-border-faint);
}
.pt-role-tile__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.pt-role-tile__chip-count {
    font-family: var(--pt-font-mono);
    color: var(--pt-cyan-300);
    font-weight: 700;
    font-size: 12px;
}
.pt-role-tile__chip--terminal { opacity: 0.55; }
.pt-role-tile__chip--terminal .pt-role-tile__chip-count {
    color: var(--pt-text-muted);
}
.pt-role-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--pt-font-mono);
    font-size: 10px;
    color: var(--pt-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* ─── Role detail header (breadcrumb + title row + meta) ─────────────── */
.pt-detail-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.pt-detail-header__crumb {
    font-size: 12px;
    color: var(--pt-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pt-detail-header__crumb a {
    color: var(--pt-text-muted);
    transition: color 0.12s var(--pt-ease-out);
}
.pt-detail-header__crumb a:hover { color: var(--pt-cyan-300); }
.pt-detail-header__sep { color: var(--pt-text-ghost); }
.pt-detail-header__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pt-detail-header__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}
.pt-detail-header__meta {
    font-family: var(--pt-font-sans);
    font-size: 12px;
    color: var(--pt-text-faint);
    margin: 0;
}

/* ─── Stage tiles strip (compact) ────────────────────────────────────── */
.pt-stage-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .pt-stage-strip { grid-template-columns: repeat(2, 1fr); }
}
.pt-stage-tile {
    position: relative;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    background: var(--pt-bg-glass);
    padding: 12px;
    overflow: hidden;
}
.pt-stage-tile::before {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    border-radius: 999px;
    filter: blur(36px);
    pointer-events: none;
    background: var(--pt-tile-glow, var(--pt-cyan-glow));
}
.pt-stage-tile__label {
    position: relative;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-text-faint);
    margin-bottom: 6px;
}
.pt-stage-tile__value {
    position: relative;
    font-family: var(--pt-font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ─── Kanban board ───────────────────────────────────────────────────── */
.pt-kanban {
    display: grid;
    grid-template-columns: repeat(6, minmax(248px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 8px;
}
@media (max-width: 1100px) {
    .pt-kanban {
        grid-template-columns: repeat(6, minmax(228px, 1fr));
    }
}

/* When the pipeline is empty, the empty-state card above is the single
   empty representation — suppress the redundant all-empty kanban columns.
   The kanban stays in the DOM (structure/markup parity); we only hide it. */
[data-portal-pipeline-empty] ~ [data-portal-kanban] {
    display: none;
}

.pt-kanban-col {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    background: linear-gradient(180deg,
        var(--pt-bg-glass-strong),
        var(--pt-bg-glass));
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 120px;
}
.pt-kanban-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pt-border-faint);
}
.pt-kanban-col__heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pt-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0;
}
.pt-kanban-col__dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--pt-tile-text, var(--pt-cyan-300));
}
.pt-kanban-col__count {
    font-family: var(--pt-font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--pt-border);
    color: var(--pt-text-muted);
    background: rgba(255, 255, 255, 0.03);
}
.pt-kanban-col__add {
    /* Disabled-looking ghost button. Phase 0 brief: clients don't add candidates. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px dashed var(--pt-border);
    background: transparent;
    color: var(--pt-text-ghost);
    cursor: not-allowed;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
}
.pt-kanban-col__add:hover { color: var(--pt-text-faint); }
.pt-kanban-col__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    flex: 1;
    min-height: 0;
}
.pt-kanban-col__empty {
    color: var(--pt-text-faint);
    font-size: 11px;
    text-align: center;
    padding: 18px 8px;
    font-style: italic;
}

.pt-kanban-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.12s var(--pt-ease-out),
                background 0.12s var(--pt-ease-out);
}
.pt-kanban-card:hover {
    border-color: var(--pt-border-strong);
    background: rgba(255, 255, 255, 0.06);
}
.pt-kanban-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* room for the absolutely-positioned LinkedIn link-out (top-right) */
    padding-right: 22px;
}
.pt-kanban-card__avatar {
    width: 26px; height: 26px;
    border-radius: 999px;
    display: grid; place-items: center;
    color: var(--pt-text-primary);
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg,
        var(--pt-cyan-500),
        var(--pt-violet-500));
    flex-shrink: 0;
    border: 1px solid var(--pt-border);
}
.pt-kanban-card__ident { min-width: 0; }
.pt-kanban-card__name {
    color: var(--pt-text-primary);
    font-weight: 600;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-kanban-card__role {
    color: var(--pt-text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-kanban-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--pt-text-faint);
    font-family: var(--pt-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pt-kanban-card__fit {
    color: var(--pt-text-muted);
    font-size: 11px;
    line-height: 1.35;
    /* truncate to 1 line */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── LinkedIn link-out (sibling overlay — the card itself is an <a>) ─── */
.pt-kanban-card-wrap { position: relative; }
.pt-kanban-card__li {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--pt-text-faint);
    background: var(--pt-bg-elev);
    border: 1px solid var(--pt-border-faint);
    transition: color 0.12s var(--pt-ease-out),
                background 0.12s var(--pt-ease-out),
                border-color 0.12s var(--pt-ease-out);
}
.pt-kanban-card__li:hover {
    color: #0a66c2; /* LinkedIn blue */
    background: #ffffff;
    border-color: #0a66c2;
}
.pt-kanban-card__li:focus-visible {
    outline: none;
    border-color: var(--pt-cyan-300);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

/* ─── Collapsed terminal-stage bar (Placed / Rejected) ───────────────── */
.pt-terminal-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border-faint);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pt-terminal-bar__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.pt-terminal-bar__count {
    font-family: var(--pt-font-mono);
    font-weight: 700;
    color: var(--pt-text-secondary);
    font-size: 13px;
}
.pt-terminal-bar__cta {
    margin-left: auto;
    color: var(--pt-text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: not-allowed;
}

/* ─── Kanban accent variants — set CSS custom-props per column color ── */
.pt-kanban-col--cyan,
.pt-stage-tile--cyan {
    --pt-tile-glow: var(--pt-cyan-glow);
    --pt-tile-text: var(--pt-cyan-300);
}
.pt-kanban-col--emerald,
.pt-stage-tile--emerald {
    --pt-tile-glow: var(--pt-emerald-glow);
    --pt-tile-text: var(--pt-emerald-300);
}
.pt-kanban-col--amber,
.pt-stage-tile--amber {
    --pt-tile-glow: var(--pt-amber-glow);
    --pt-tile-text: var(--pt-amber-300);
}
.pt-kanban-col--violet,
.pt-stage-tile--violet {
    --pt-tile-glow: var(--pt-violet-glow);
    --pt-tile-text: var(--pt-violet-300);
}
.pt-kanban-col--rose,
.pt-stage-tile--rose {
    --pt-tile-glow: var(--pt-rose-glow);
    --pt-tile-text: var(--pt-rose-300);
}
.pt-kanban-col--slate,
.pt-stage-tile--slate {
    --pt-tile-glow: rgba(148, 163, 184, 0.12);
    --pt-tile-text: var(--pt-text-muted);
}

/* ─── Tooltip on disabled add affordance (CSS-only) ──────────────────── */
.pt-tooltip-host {
    position: relative;
}
.pt-tooltip-host[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(0, 0, 0, 0.92);
    color: var(--pt-text-secondary);
    border: 1px solid var(--pt-border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 10px;
    font-family: var(--pt-font-sans);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 3 — Bench grid
   New classes layered on top of Phase 0/1/2 primitives. Same ``pt-``
   prefix; nothing here overrides earlier rules.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Inert filter strip — small ghost-button row above the grid ─── */
.pt-bench-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.pt-bench-filter {
    /* Compact ghost button — visual completeness only in v1, every
       button is disabled. The "is-active" variant marks "All" as the
       implicit selection so the strip never reads as fully greyed-out. */
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--pt-border-faint);
    background: rgba(255, 255, 255, 0.02);
    color: var(--pt-text-muted);
    cursor: not-allowed;
}
.pt-bench-filter.is-active {
    background: var(--pt-cyan-tint);
    border-color: var(--pt-cyan-ring);
    color: var(--pt-cyan-300);
}

/* ─── Bench grid — 2-up wide, 1-up narrow ────────────────────────── */
.pt-bench-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .pt-bench-grid { grid-template-columns: 1fr; }
}

/* ─── Bench candidate card (extends ``.pt-card``) ─────────────────── */
.pt-bench-card {
    /* Reuses .pt-card primitive; this rule only adds bench-specific bits. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.12s var(--pt-ease-out),
                background 0.12s var(--pt-ease-out);
}
.pt-bench-card:hover {
    border-color: var(--pt-border-strong);
    background: var(--pt-bg-glass-strong);
}
.pt-bench-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.pt-bench-card__avatar {
    width: 38px; height: 38px;
    border-radius: 999px;
    display: grid; place-items: center;
    color: #0a0a0b;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg,
        var(--pt-cyan-300),
        var(--pt-violet-300));
    flex-shrink: 0;
    border: 1px solid var(--pt-border);
    letter-spacing: 0.02em;
}
.pt-bench-card__ident {
    min-width: 0;
    flex: 1;
}
.pt-bench-card__name {
    display: block;
    color: var(--pt-text-primary);
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s var(--pt-ease-out);
}
.pt-bench-card__name:hover { color: var(--pt-cyan-300); }
.pt-bench-card__title {
    color: var(--pt-text-muted);
    font-size: 12px;
    margin: 4px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-bench-card__seniority {
    flex-shrink: 0;
}
.pt-bench-card__meta {
    color: var(--pt-text-faint);
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
}
.pt-bench-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pt-bench-card__chip {
    /* Neutral chip variant — slightly faint background per the brief.
       Caller is free to pass a status variant (--success / --info) for
       the match-indicator chip; this default is the skills-row look. */
    background: var(--pt-bg-glass-strong);
    border-color: var(--pt-border-faint);
    color: var(--pt-text-muted);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    font-size: 11px;
}
.pt-bench-card__actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--pt-border-faint);
}
.pt-bench-card__view {
    /* Slightly tighter than the default secondary button so it
       doesn't dominate the card footer. */
    padding: 6px 12px;
    font-size: 12px;
}
.pt-bench-card__add {
    /* Disabled-looking ghost — Phase 0 brief: clients don't add
       candidates from the portal. Paired with the data-tooltip on
       the markup ("Recruiters add candidates from the admin side."). */
    padding: 6px 12px;
    font-size: 12px;
    border: 1px dashed var(--pt-border);
    color: var(--pt-text-ghost);
    background: transparent;
    cursor: not-allowed;
}
.pt-bench-card__add:hover { color: var(--pt-text-faint); }

/* ─── Bench pagination — compact bottom row ───────────────────────── */
.pt-bench-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--pt-text-muted);
}
.pt-bench-pagination__current {
    font-family: var(--pt-font-mono);
    font-size: 11px;
    color: var(--pt-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 4 — Sourcing Pulse fold-in.
   /portal?view=pulse (unified) + /pulse-portal/deliveries/{id} (detail).
   Reused primitives: .pt-card, .pt-badge, .pt-btn, .pt-empty,
   .pt-detail-header. New here: .pt-pulse-banner, .pt-pulse-grid,
   .pt-pulse-card, .pt-pulse-stats, .pt-pulse-cand. The unrelated
   .pt-pulse-strip class is the dashboard mini-widget — distinct.
   ────────────────────────────────────────────────────────────────────── */

/* Latest-delivery banner — slightly more visual weight than the grid
   cards so the "what's new" surface reads first. */
.pt-pulse-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    margin-bottom: 18px;
    border-color: var(--pt-cyan-ring);
    background: linear-gradient(
        180deg,
        var(--pt-cyan-tint),
        var(--pt-bg-glass)
    );
    transition: border-color 0.15s var(--pt-ease-out),
                transform 0.15s var(--pt-ease-out);
}
.pt-pulse-banner:hover {
    border-color: var(--pt-cyan-300);
    transform: translateY(-1px);
}
.pt-pulse-banner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pt-pulse-banner__eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-cyan-300);
}
.pt-pulse-banner__title {
    margin: 0;
    color: var(--pt-text-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pt-pulse-banner__meta {
    margin: 0;
    color: var(--pt-text-muted);
    font-size: 13px;
}
.pt-pulse-banner__cta {
    margin-top: 4px;
    color: var(--pt-cyan-300);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* Deliveries grid — chronological list, newest first. */
.pt-pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.pt-pulse-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    transition: border-color 0.15s var(--pt-ease-out),
                transform 0.15s var(--pt-ease-out);
}
.pt-pulse-card:hover {
    border-color: var(--pt-border-strong);
    transform: translateY(-1px);
}
.pt-pulse-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pt-pulse-card__title {
    margin: 0;
    color: var(--pt-text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pt-pulse-card__date {
    margin: 0;
    color: var(--pt-text-secondary);
    font-size: 12px;
}
.pt-pulse-card__rel {
    color: var(--pt-text-muted);
}
.pt-pulse-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--pt-text-muted);
}
.pt-pulse-card__count {
    font-family: var(--pt-font-mono);
    color: var(--pt-text-secondary);
}
.pt-pulse-card__cohort {
    padding: 2px 8px;
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border);
    background: var(--pt-bg-glass);
    color: var(--pt-text-secondary);
    font-size: 11px;
}

/* Delivery detail — stats strip + candidate cards. */
.pt-pulse-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.pt-pulse-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
}
.pt-pulse-stat__value {
    font-family: var(--pt-font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--pt-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.pt-pulse-stat__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pt-text-muted);
}

.pt-pulse-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.pt-pulse-cand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}
.pt-pulse-cand__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pt-pulse-cand__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--pt-radius-lg);
    border: 1px solid var(--pt-border);
    background: var(--pt-bg-glass-strong);
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-mono);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pt-pulse-cand__ident {
    min-width: 0;
    flex: 1;
}
.pt-pulse-cand__name {
    color: var(--pt-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.pt-pulse-cand__name:hover { color: var(--pt-cyan-300); }
.pt-pulse-cand__title {
    margin: 4px 0 0;
    color: var(--pt-text-secondary);
    font-size: 12px;
}
.pt-pulse-cand__loc {
    margin: 2px 0 0;
    color: var(--pt-text-muted);
    font-size: 11px;
}
.pt-pulse-cand__rate {
    display: flex;
    gap: 4px;
    color: var(--pt-text-muted);
    font-size: 16px;
}
.pt-pulse-cand__star { line-height: 1; }
.pt-pulse-cand__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pt-shell { grid-template-columns: 1fr; }
    .pt-sidebar {
        position: relative;
        height: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 16px;
    }
    .pt-sidebar__nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0;
        flex: 1;
    }
    .pt-sidebar__footer { width: 100%; }
    .pt-page { padding: 20px 16px 32px; }
    .pt-topbar { padding: 0 16px; }
    .pt-topbar__center { display: none; }
}
/* ──────────────────────────────────────────────────────────────────────
   Phase 5 — Team management surface
   /portal/team. AO-only (handler 403s non-AO; sidebar hides the tab).
   Reused primitives: .pt-card, .pt-badge, .pt-btn, .pt-empty,
   .pt-tooltip-host. New here: .pt-roster*, .pt-avatar-circle,
   .pt-modal*. Names deliberately avoid colliding with the search
   product's .sr-modal.
   ────────────────────────────────────────────────────────────────────── */

/* Card head spans the roster card title row + invite buttons. */
.pt-roster__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pt-roster__head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* List of roster rows. Grid layout on each row gives consistent column
   alignment without a real <table>. Columns:
     avatar | identity | role | status | bench | last-login | actions
*/
.pt-roster__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pt-roster-row {
    display: grid;
    grid-template-columns:
        36px            /* avatar */
        minmax(180px, 2fr)  /* identity */
        minmax(120px, auto) /* role */
        minmax(100px, auto) /* status */
        minmax(60px, auto)  /* bench */
        minmax(80px, auto)  /* last login */
        minmax(180px, auto); /* actions */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pt-border-faint);
    border-radius: var(--pt-radius);
    background: var(--pt-bg-glass);
    transition: background 0.12s var(--pt-ease-out),
                border-color 0.12s var(--pt-ease-out);
}
.pt-roster-row:hover {
    border-color: var(--pt-border);
    background: var(--pt-bg-glass-strong);
}
.pt-roster-row.is-deactivated {
    opacity: 0.5;
}

.pt-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pt-cyan-300);
    background: var(--pt-cyan-tint);
    border: 1px solid var(--pt-cyan-ring);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.pt-roster-row__ident { min-width: 0; }
.pt-roster-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-roster-row__self {
    font-size: 10px;
    color: var(--pt-text-faint);
    margin-left: 4px;
    font-weight: 400;
}
.pt-roster-row__email {
    font-size: 11px;
    color: var(--pt-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-roster-row__role,
.pt-roster-row__status,
.pt-roster-row__bench {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pt-roster-row__last {
    font-size: 11px;
    color: var(--pt-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pt-roster-row__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pt-roster-row__actions .pt-btn {
    padding: 5px 10px;
    font-size: 11px;
}

.pt-roster-row__muted {
    color: var(--pt-text-ghost);
    font-size: 11px;
}
.pt-roster-row__bench-off {
    color: var(--pt-text-ghost);
}
.pt-roster-row__status--off {
    color: var(--pt-text-faint);
    border-color: var(--pt-border);
    background: var(--pt-bg-glass);
}

/* Stack rows on narrow viewports — same data, vertical layout. */
@media (max-width: 900px) {
    .pt-roster-row {
        grid-template-columns: 36px 1fr;
        grid-template-areas:
            "avatar ident"
            ".      role"
            ".      status"
            ".      bench"
            ".      last"
            ".      actions";
        row-gap: 6px;
    }
    .pt-roster-row > .pt-avatar-circle  { grid-area: avatar; }
    .pt-roster-row__ident   { grid-area: ident; }
    .pt-roster-row__role    { grid-area: role; }
    .pt-roster-row__status  { grid-area: status; }
    .pt-roster-row__bench   { grid-area: bench; }
    .pt-roster-row__last    { grid-area: last; }
    .pt-roster-row__actions { grid-area: actions; justify-content: flex-start; }
}

/* ── Modal (portal-shell scoped — distinct from .sr-modal). ─────── */
.pt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 24px;
}
.pt-modal-backdrop[hidden] { display: none; }

.pt-modal-panel {
    width: min(92vw, 460px);
    background: var(--pt-bg-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 22px;
    box-shadow: var(--pt-shadow-md);
}
.pt-modal__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: -0.01em;
    margin: 0 0 14px 0;
}
.pt-modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pt-modal__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--pt-text-secondary);
}
.pt-modal__checkbox input { accent-color: var(--pt-cyan-300); }
.pt-modal__warning {
    background: var(--pt-amber-tint);
    border: 1px solid var(--pt-amber-ring);
    color: var(--pt-amber-300);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.pt-modal__error {
    background: var(--pt-rose-tint);
    border: 1px solid var(--pt-rose-ring);
    color: var(--pt-rose-300);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.pt-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ── Phase 7 portal redesign — Add-a-Role form fields + header CTA ─── */
.pt-detail-header__lead { min-width: 0; flex: 1 1 auto; }
.pt-detail-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pt-detail-header {
    /* Make the header a row when it has both lead + actions, but
       keep the original column flow when only the title block is
       rendered. */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.pt-detail-header > .pt-detail-header__title { flex: 1 1 auto; }
.pt-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--pt-text-secondary);
}
.pt-form-field__label {
    font-weight: 600;
    color: var(--pt-text-primary);
    font-size: 12px;
}
.pt-form-field__input {
    background: var(--pt-bg-glass);
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--pt-text-primary);
    font: inherit;
    font-size: 13px;
}
.pt-form-field__input:focus {
    outline: none;
    border-color: var(--pt-cyan-300);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

/* ─── Phase 7 — Notifications bell + popover ────────────────────────── */
.pt-bell { position: relative; display: inline-flex; }
.pt-bell__btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--pt-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s var(--pt-ease-out), color 0.12s var(--pt-ease-out);
    position: relative;
}
.pt-bell__btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--pt-text-primary); }
.pt-bell__badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f43f5e; color: #fff;
    font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    border: 1.5px solid var(--pt-bg-base, #0a0a0b);
    line-height: 1;
}
.pt-bell__panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 340px; max-height: 420px; overflow-y: auto;
    background: var(--pt-bg-elevated, #14141a);
    border: 1px solid var(--pt-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 8px;
    z-index: 100;
    display: none;
}
.pt-bell.is-open .pt-bell__panel { display: block; }
.pt-bell__title {
    padding: 8px 10px 6px;
    font-size: 12px; font-weight: 700;
    color: var(--pt-text-primary);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.pt-bell__empty {
    padding: 18px 12px;
    font-size: 13px; color: var(--pt-text-muted);
    text-align: center;
}
.pt-bell__item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background 0.1s var(--pt-ease-out);
}
.pt-bell__item:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--pt-border); }
.pt-bell__item-title { font-size: 13px; font-weight: 600; color: var(--pt-text-primary); margin: 0 0 2px 0; }
.pt-bell__item-preview {
    font-size: 12px; color: var(--pt-text-secondary);
    margin: 0 0 4px 0; line-height: 1.35;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pt-bell__item-time { font-size: 11px; color: var(--pt-text-muted); }

/* ─── Phase 7 — Star rating widget on candidate detail ──────────────── */
.pt-rating { display: flex; flex-direction: column; gap: 10px; }
.pt-rating__stars { display: inline-flex; gap: 2px; }
.pt-rating__star {
    cursor: pointer;
    color: var(--pt-text-muted);
    transition: color 0.1s var(--pt-ease-out);
    line-height: 0;
}
.pt-rating__star input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.pt-rating__star.is-on { color: #f59e0b; }
.pt-rating__star:hover { color: #fbbf24; }
.pt-rating__comment {
    background: var(--pt-bg-glass);
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--pt-text-primary);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}
.pt-rating__comment:focus {
    outline: none;
    border-color: var(--pt-cyan-300);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.pt-rating__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-rating__saved { font-size: 12px; color: var(--pt-text-muted); }