/* ============================================================================
   Access — shared primitives
   ----------------------------------------------------------------------------
   Non-scoped, module-owned stylesheet (mirrors scheduling.css's pattern) linked
   once from AccessPage.razor so its classes (ty-status*, ty-avatar, ty-rpill,
   ty-accent-1..6) are available to whichever tab renders under it (UsersTab,
   RolesTab) without duplicating the same primitives in every scoped stylesheet.
   References only --ty-* tokens, each with a sane fallback for the untethered
   data-theme="none" state — never raw hex for the token-backed values.
   Extraction-ready: addressed via _content/TradeYoke.Modules.Shared/access.css,
   no host CSS reliance.

   `.ty-btn`* and `.ty-field`* used to live here too (this file was their only
   source), which is why they worked on exactly three pages in the whole app —
   RolesTab, UsersTab, AccessPage — and nowhere else. They were promoted to the
   globally-loaded `TradeYoke.Shared/wwwroot/app.css` on 2026-09-06 (see that
   file's "shared playful kit" section) so every page gets them, not just this
   one; nothing here changed shape in the move, so this page still looks the
   same, it just isn't the only one that does any more. */

/* --- Status badges (.ty-status) — Active / Invited / Suspended --- */
.ty-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 700 10.5px var(--ty-font-base, inherit);
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.ty-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ty-status--active    { background: var(--ty-status-active-bg, #e6f6ea);    color: var(--ty-status-active-fg, #1a7f37); }
.ty-status--invited   { background: var(--ty-status-invited-bg, #fdf1dd);   color: var(--ty-status-invited-fg, #9a5b00); }
.ty-status--suspended { background: var(--ty-status-suspended-bg, #fdecea); color: var(--ty-status-suspended-fg, #c0392b); }

/* --- Avatars & role pills, coloured by a stable hash of a name (Access.RoleAccent) --- */
.ty-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font: 700 12.5px var(--ty-font-base, inherit);
}

.ty-rpill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 11px var(--ty-font-base, inherit);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ty-accent-1 { background: var(--ty-accent-1-bg, #eaf2fd); color: var(--ty-accent-1-fg, #1457b0); }
.ty-accent-2 { background: var(--ty-accent-2-bg, #f0ecfb); color: var(--ty-accent-2-fg, #6b46c1); }
.ty-accent-3 { background: var(--ty-accent-3-bg, #e4f4f4); color: var(--ty-accent-3-fg, #0f6b6b); }
.ty-accent-4 { background: var(--ty-accent-4-bg, #e8f5ec); color: var(--ty-accent-4-fg, #1f7a38); }
.ty-accent-5 { background: var(--ty-accent-5-bg, #fbf0db); color: var(--ty-accent-5-fg, #9a5b00); }
.ty-accent-6 { background: var(--ty-accent-6-bg, #f1f4f7); color: var(--ty-accent-6-fg, #57606a); }

/* Graft is squarer/harder-edged (see docs/UI-Design.html) — pills/badges get 5px corners there instead
   of fully round, matching the theme's flat-block character. */
[data-theme="graft"] .ty-status,
[data-theme="graft"] .ty-rpill {
    border-radius: 5px;
}