/* Pokas staff directory — matches the shared Garam page shell and theme system.
   Profile cards intentionally resemble Discord's dark profile popouts. */
html:has(.garam-team-page), body:has(.garam-team-page) {
    background-color: var(--garam-theme-surface, #d2edfe) !important;
    background-image: none !important;
}
.garam-team-page {
    --team-page-ink: var(--garam-c-123c5c, #123c5c);
    --team-page-muted: var(--garam-c-527f99, #527f99);
    --team-page-border: var(--garam-c-bbdef5, #bbdef5);
    --team-page-accent: var(--garam-theme-ui-accent, var(--garam-theme-accent, #087cce));
    --team-page-panel: #fff;
    --team-page-soft: var(--garam-c-f0f9ff, #f0f9ff);
    width: 100%; min-height: 70vh; padding: 24px 16px 80px;
    box-sizing: border-box; font-family: inherit; color: var(--team-page-ink);
}
.garam-team-page *, .garam-team-page *::before, .garam-team-page *::after { box-sizing: border-box; }
.garam-team-page [hidden] { display: none !important; }
.team-main { width: 100%; max-width: 1240px; margin: 0 auto; }

/* The global styles.css `header { display: flex; }` must not change this page hero. */
.garam-team-page header.team-hero { display: block !important; }

/* Bright editorial hero, in the style of Inventory's dotted background. */
.team-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center;
    padding: clamp(40px, 5vw, 66px) 15px clamp(43px, 5vw, 66px); }
.team-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .33;
    background: radial-gradient(var(--garam-c-86c7ed, #86c7ed) 1px, transparent 1px) 0 0/22px 22px;
    mask-image: linear-gradient(to bottom, #000 18%, transparent 95%); pointer-events: none; }
.team-hero-kicker { color: var(--team-page-ink); display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 7px 16px; border: 1px solid rgb(20 80 125 / 17%); border-radius: 100px;
    background: rgb(255 255 255 / 50%); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.team-hero-kicker span { font-size: 16px; }
.team-hero h1 { margin: 19px auto 14px; color: var(--team-page-ink); font-size: clamp(49px, 7.1vw, 100px);
    line-height: 1.04; font-weight: 900; letter-spacing: -.065em; }
.team-hero h1 span { color: var(--team-page-accent); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: -.07em; }
.team-hero > p { max-width: 510px; margin: 0 auto; font-size: clamp(14px, 1.5vw, 17px);
    color: var(--team-page-ink); line-height: 1.65; }
.team-hero-stats { margin: 25px auto 0; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
    color: var(--team-page-ink); font-size: 13px; font-weight: 600; }
.team-hero-stats strong { font-weight: 900; font-size: 24px; margin-right: 4px; }
.team-hero-stats-separator { width: 1px; height: 24px; background: color-mix(in srgb, var(--team-page-ink) 35%, transparent); }
.team-hero-sparkle { position: absolute; z-index: -1; color: rgb(255 255 255 / 46%); pointer-events: none; }
.team-hero-sparkle--one { font-size: clamp(38px, 5vw, 85px); top: 17%; left: 7%; transform: rotate(-20deg); }
.team-hero-sparkle--two { font-size: clamp(56px, 6vw, 110px); right: 8%; bottom: 19%; transform: rotate(17deg); }

/* Directory search and quick links. */
.team-directory-toolbar { display: flex; align-items: end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px 30px; margin: 2px 0 18px; }
.team-directory-kicker { display: block; margin-bottom: 6px; font-size: 10px;
    font-weight: 900; letter-spacing: .19em; color: var(--team-page-accent); }
.team-directory-intro h2 { margin: 0; color: var(--team-page-ink);
    font-size: clamp(25px, 3vw, 39px); font-weight: 900; letter-spacing: -.05em; line-height: 1.1; }
.team-directory-intro h2 span { color: var(--team-page-accent); font-size: .7em; vertical-align: middle; }
.team-search-wrap { display: flex; align-items: center; gap: 12px; width: min(100%, 345px);
    height: 48px; padding: 0 15px; border: 1px solid var(--team-page-border);
    border-radius: 14px; background: var(--team-page-panel); color: var(--team-page-muted);
    box-shadow: 0 9px 28px rgba(7, 60, 106, .06); transition: border-color .15s, box-shadow .15s; }
.team-search-wrap:focus-within { border-color: var(--team-page-accent); box-shadow: 0 0 0 3px rgb(8 124 206 / 10%); }
.team-search-wrap svg { flex: none; }
.team-search-wrap input { border: 0; outline: 0; background: transparent; color: var(--team-page-ink);
    min-width: 0; width: 100%; font: inherit; font-size: 14px; }
.team-search-wrap input::placeholder { color: var(--team-page-muted); opacity: .9; }
.team-role-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px; }
.team-role-nav button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
    padding: 7px 11px; border: 1px solid var(--team-page-border); border-radius: 10px;
    color: var(--team-page-ink); background: var(--team-page-panel); font-size: 12px;
    line-height: 1.25; font-weight: 750; text-decoration: none; font-family: inherit; cursor: pointer; transition: transform .14s, border-color .14s, background .14s; }
.team-role-nav button:hover { transform: translateY(-2px); border-color: var(--team-page-accent); }
.team-role-nav button.is-selected { border-color: var(--team-page-accent); background: var(--team-page-soft); }
.team-role-nav button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--team-page-accent); }
.team-role-nav button:focus-visible, .team-view-profile:focus-visible { outline: 3px solid var(--team-page-accent); outline-offset: 3px; }
.team-role-nav-dot { width: 8px; height: 8px; flex: none;
    background: var(--team-role-color); border-radius: 50%; }
.team-role-nav-total { color: var(--team-page-muted); font-size: 10px; font-weight: 800; }
.team-search-status { color: var(--team-page-muted); font-size: 12px;
    font-weight: 600; min-height: 20px; margin: 5px 0 24px; }

/* One continuous grid, keeping the hierarchy order without separate role sections. */
.team-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px; align-items: stretch; }

/* Discord-style popout cards. All names and roles are real from staff_data.json. */
.team-profile { --team-profile-bg: #24252c; --team-profile-ink: #f4f5f8;
    --team-profile-muted: #b3b5c2; min-width: 0; overflow: hidden;
    position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--team-profile-bg);
    color: var(--team-profile-ink); border: 1px solid #4b4c57; border-radius: 18px;
    box-shadow: 0 13px 29px rgba(13, 24, 43, .13);
    transition: transform .17s ease, box-shadow .17s ease; }
@media (hover: hover) { .team-profile:hover { transform: translateY(-4px);
    box-shadow: 0 17px 39px rgba(13, 24, 43, .19); } }
.team-profile-banner { position: relative; z-index: 0; isolation: isolate; height: 100px; flex: 0 0 100px; overflow: hidden;
    background: radial-gradient(circle at 79% 12%, color-mix(in srgb, var(--team-role-color), transparent 22%), transparent 46%),
                linear-gradient(130deg, #444654, color-mix(in srgb, var(--team-role-color), #363841 57%), #343541); }
.team-profile-banner::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 15%)); pointer-events: none; }
.team-banner-art { position: absolute; border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 8%); border-radius: 50%; }
.team-banner-art--one { width: 140px; height: 140px; right: -36px; top: -70px; }
.team-banner-art--two { width: 85px; height: 85px; right: 78px; top: 36px; }
.team-banner-image { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute;
    inset: 0; z-index: 1; }
.team-profile-inner { position: relative; z-index: 2; overflow: visible; padding: 49px 17px 16px;
    display: flex; flex: 1; flex-direction: column; min-width: 0; }
.team-avatar { position: absolute; z-index: 3; left: 15px; top: -43px; width: 80px; height: 80px;
    border: 6px solid var(--team-profile-bg); border-radius: 50%; overflow: hidden;
    background: color-mix(in srgb, var(--team-role-color) 45%, #353744); }
.team-avatar-letter { display: grid; place-items: center; width: 100%; height: 100%;
    color: #fff; font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; }
.team-avatar-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover; background: #444753; }
.team-profile-names { min-width: 0; min-height: 75px; }
.team-profile-names h3 { color: var(--team-profile-ink); font-size: 17px; line-height: 1.25;
    margin: 0 0 5px; font-weight: 850; letter-spacing: -.015em;
    overflow-wrap: anywhere; }
.team-profile-names p { font-size: 12px; color: var(--team-profile-muted);
    margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.team-profile-divider { height: 1px; width: 100%; background: #494a55;
    margin: 11px 0 13px; }
.team-profile-role-label { color: #d4d5dd; font-size: 10px;
    font-weight: 850; letter-spacing: .09em; margin-bottom: 9px; }
.team-profile-role-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.team-discord-role { display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%; padding: 6px 9px; background: color-mix(in srgb, var(--team-role-color) 14%, #36363e);
    border-radius: 5px; color: #f2f3f6; font-size: 11px; font-weight: 700; line-height: 1.15; }
.team-discord-role-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%;
    background: var(--team-role-color); }
.team-view-profile { display: flex; justify-content: center; align-items: center; gap: 7px;
    min-height: 37px; margin-top: 19px; padding: 8px 12px;
    border: 1px solid #575968; border-radius: 9px; background: #3b3c46;
    color: #f5f5fa; font: inherit; font-size: 12px; font-weight: 750;
    text-decoration: none; transition: background .14s, border-color .14s; }
.team-view-profile:hover { background: #4a4c58; border-color: #777985; color: #fff; }

.team-error, .team-empty { border: 1px solid var(--team-page-border); border-radius: 21px;
    background: var(--team-page-panel); color: var(--team-page-ink);
    text-align: center; padding: 44px 18px; }
.team-error { font-size: 14px; line-height: 1.7; }
.team-error code { font-size: .9em; word-break: break-all; }
.team-empty span { display: block; font-size: 50px; color: var(--team-page-accent); }
.team-empty h2 { font-size: 22px; margin: 9px 0; }
.team-empty p { color: var(--team-page-muted); font-size: 14px; }
.team-empty button { border: 0; background: var(--team-page-accent); color: #fff;
    padding: 11px 18px; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }

/* Onix and Ash: keep the shell colors in sync with the shared dark theme. */
html[data-garam-mode="dark"] .garam-team-page {
    --team-page-ink: var(--garam-dark-text, #f3f4f7);
    --team-page-muted: var(--garam-dark-muted, #afb1bb);
    --team-page-border: var(--garam-dark-border, #474953);
    --team-page-panel: var(--garam-dark-panel, #22232a);
    --team-page-soft: var(--garam-dark-raised, #32343d);
    --team-page-accent: var(--garam-theme-ui-accent, #b4b6c0);
}
html[data-garam-mode="dark"] .team-hero-kicker { color: #f3f4f7; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 20%); }
html[data-garam-mode="dark"] .team-hero h1,
html[data-garam-mode="dark"] .team-hero > p,
html[data-garam-mode="dark"] .team-hero-stats { color: #f3f4f7; }
html[data-garam-mode="dark"] .team-search-wrap:focus-within { box-shadow: 0 0 0 3px rgb(180 182 192 / 17%); }
html[data-garam-mode="dark"] .team-empty button { color: #111318; }

@media(max-width: 1180px) { .team-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width: 840px) { .team-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    .garam-team-page { padding: 14px 13px 60px; }
    .team-hero { padding: 48px 10px 59px; } }
@media(max-width: 520px) {
    .team-hero { padding: 46px 8px 49px; }
    .team-hero h1 { font-size: clamp(44px, 12.3vw, 61px); }
    .team-hero-sparkle--one { left: 1%; }
    .team-hero-sparkle--two { right: 0; }
    .team-directory-toolbar { gap: 15px; }
    .team-search-wrap { width: 100%; }
    .team-role-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .team-role-nav button { flex: 0 0 auto; }
    .team-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .team-profile-banner { height: 73px; flex-basis: 73px; }
    .team-avatar { width: 63px; height: 63px; border-width: 5px; top: -36px; left: 10px; }
    .team-avatar-letter { font-size: 25px; }
    .team-profile-inner { padding: 35px 10px 11px; }
    .team-profile-names h3 { font-size: 13px; }
    .team-profile-names p { font-size: 11px; }
    .team-discord-role { font-size: 10px; padding: 6px 7px; }
    .team-discord-role-dot { width: 8px; height: 8px; }
    .team-profile-role-label { font-size: 9px; }
    .team-view-profile { font-size: 10px; padding: 9px 5px; line-height: 1.2; }
}
@media(max-width: 350px) { .team-profile-grid { grid-template-columns: 1fr; }
    .team-profile-banner { height: 96px; flex-basis: 96px; }
    .team-avatar { width: 78px; height: 78px; top: -43px; }
    .team-profile-inner { padding: 48px 14px 15px; }
    .team-profile-names h3 { font-size: 17px; }
}
@media(prefers-reduced-motion: reduce) {
    .team-profile, .team-view-profile, .team-role-nav button, .team-search-wrap { transition: none; }
}