/* ════════════════════════════════════════════════════════════════════════
   team.css — brush for the Team panel (zViews/zAccount/zRM/zUI.Team.zolo).
   Opt in with zMeta.zBrush: [team]. Builds ON the canonical zc-* tokens from
   zC_Main.css — same visual family as profile.css/media.css/myapps.css.
   ════════════════════════════════════════════════════════════════════════ */

.zc-team {
    position:      relative;
    width:         100%;
    margin:        0 0 2.5rem;
    padding:       2rem 2.25rem 2.5rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: calc(var(--zc-radius) + 6px);
    box-shadow:    var(--zc-shadow-hover, 0 24px 56px rgba(0, 0, 0, 0.4));
    overflow:      hidden;
    isolation:     isolate;
}
.zc-team::before {
    content:        '';
    position:       absolute;
    inset:          -40% -10% auto -10%;
    height:         420px;
    z-index:        0;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 28% 25%, rgba(124, 58, 237, 0.22), transparent 68%),
        radial-gradient(45% 55% at 78% 10%, rgba(79, 70, 229, 0.14), transparent 70%);
}
.zc-team > * { position: relative; z-index: 1; }

.zc-team-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
}
.zc-team-header h2 {
    margin:          0;
    font-size:       clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight:     800;
    letter-spacing:  -0.02em;
    background:      var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color:           transparent;
}
.zc-team-sub {
    margin:    0.35rem 0 0;
    color:     var(--text-gray);
    font-size: 0.9rem;
}
.zc-team-total {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.1rem;
    padding:        0.6rem 1rem;
    background:     rgba(255, 255, 255, 0.035);
    border:         1px solid rgba(255, 255, 255, 0.07);
    border-radius:  14px;
    min-width:      88px;
}
.zc-team-total > *:first-child {
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--text-light);
}
.zc-team-total > *:last-child {
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--text-gray);
}

/* ── Roster — one row per registrar ── */
.zc-team-list {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    margin-top:     1.75rem;
}
.zc-team-row {
    display:        grid;
    grid-template-columns: 1.6fr 0.8fr 0.8fr 0.9fr auto;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.85rem 1rem;
    background:     rgba(255, 255, 255, 0.03);
    border:         1px solid rgba(255, 255, 255, 0.08);
    border-radius:  14px;
    transition:     border-color 0.2s ease;
}
.zc-team-row:hover {
    border-color: rgba(196, 181, 253, 0.4);
}
.zc-team-row-name {
    margin:      0;
    color:       var(--text-light);
    font-weight: 700;
    font-size:   0.9rem;
}
.zc-team-row-email {
    margin:    0.1rem 0 0;
    color:     var(--text-gray);
    font-size: 0.78rem;
}
.zc-team-row-role,
.zc-team-row-status {
    margin:         0;
    display:        inline-block;
    width:          fit-content;
    justify-self:   start;
    padding:        0.2rem 0.6rem;
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-light);
    background:     rgba(124, 58, 237, 0.18);
    border:         1px solid rgba(196, 181, 253, 0.3);
    border-radius:  980px;
    text-align:     center;
    white-space:    nowrap;
}
.zc-team-row-joined {
    margin:    0;
    color:     var(--text-gray);
    font-size: 0.78rem;
    white-space: nowrap;
}
.zc-team-row-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .zc-team-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .zc-team-row-identity,
    .zc-team-row-actions { grid-column: 1 / -1; }
    .zc-team-row-role,
    .zc-team-row-status,
    .zc-team-row-joined { display: inline-flex; margin-right: 0.5rem; }
    .zc-team-row-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .zc-team { padding: 1.5rem 1.25rem 2rem; }
}