/* ── Team (user administration) modal ───────────────────────────────────
   Shares the Character dialog chrome (.char-* skeleton + the B2 tokens) and
   speaks the same grammar: neutral sunken surfaces for status/read, the cream
   (#F6F4EE) "agent surface" for the operator's own action (invite), mono
   micro-caps eyebrows, hairline tables, and no blue focus rings. Buttons reuse
   the global .tpl-btn family; team-only surfaces are styled here.

   Layout (2026-08-18 redesign): everything hangs off ONE left-aligned edge —
   section labels, invite card, count line, table. Seat usage is a quiet mono
   count on the Members label row, shown as "x / y" only when a cap is
   configured (uncapped roles never render an ∞). */

/* Wider than the 470px Character dialog — the members table needs the room.
   --team-alert is the Claude orange used for every alert/limit state on this
   card (seat-full count, seat-full guidance, invite errors) — warm, and
   lighter than the theme's reds/ambers. */
.char-dialog.team-dialog { width: 495px; --team-alert: #D97757; }

/* Invite — the operator's own action, so it wears the cream "agent surface"
   (same fill as .char-mine). Inputs sit on the neutral surface inside it. */
.team-invite {
    display: grid;
    grid-template-columns: 1fr auto auto;   /* email | role | Send — a single row */
    align-items: center;
    gap: 8px;
    background: #F6F4EE;
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 8px;
    padding: 6px;
    margin: 0 0 4px;                         /* full content width, left edge */
}
.team-invite input,
.team-invite select {
    width: 100%;
    box-sizing: border-box;
    height: 30px;                 /* match the Send button's 30px min-height */
    padding: 0 10px;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--b2-ink, #111216);
}
.team-invite input::placeholder { color: var(--b2-ink-4, #9CA3AF); }
/* Role reads centred inside its box; email stays left-aligned for typing. */
.team-invite select { text-align: center; text-align-last: center; }
/* Exempt from the theme's two global blue focus treatments (both !important),
   exactly like .char-mine — clicking in just darkens the hairline one step. */
.team-invite input:focus,
.team-invite input:focus-visible,
.team-invite select:focus,
.team-invite select:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--b2-line-strong, #9CA3AF) !important;
}
/* All invite guidance/errors on this card share the Claude orange accent. The
   error sits BELOW the single-row invite box and collapses to nothing when
   empty, so it never forces the box taller in the common (no-error) case. */
.team-err { font-size: 11.5px; color: var(--team-alert); overflow-wrap: anywhere; }
.team-err:not(:empty) { margin: 4px 2px 0; }

/* Members label row — the eyebrow on the left, seat usage on the right in the
   same mono micro-caps voice. Uncapped roles read "2 experts"; capped roles
   read "4 / 5 experts"; a full segment turns alert-colored (limit reached). */
.team-lab-row { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; }
.team-lab-row .char-lab { margin: 0; }
.team-count {
    font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2-ink-4, #9CA3AF);
}
.team-count .seg-full { color: var(--team-alert); font-weight: 700; }

/* Send-invite button — quiet white primary that reads on the cream card (the
   Character primary is cream, which would vanish here); no global gold stamp.
   Scoped to this dialog; out-specifies .tpl-btn.primary (0,3,0 > 0,2,0). */
.team-invite .tpl-btn.primary {
    background: var(--b2-surface, #fff);
    border-color: var(--b2-line-2, #D1D5DB);
    color: var(--b2-ink, #111216);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.team-invite .tpl-btn.primary:hover:not(:disabled) {
    background: var(--b2-line, #E5E7EB);
    border-color: var(--b2-line-strong, #9CA3AF);
    color: var(--b2-ink, #111216);
}
.team-invite .tpl-btn.primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* Role filter — segmented control in the table header's mono micro-caps
   voice (user decision 2026-08-18: grouping option D). "All" is the default
   every open; the active segment sits on the sunken surface. */
.team-seg {
    display: inline-flex;
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 6px;
    overflow: hidden;
    margin: 2px 0 6px;
}
.team-seg button {
    border: 0;
    background: var(--b2-surface, #fff);
    /* Relaxed 2026-08-19 ("字体逼仄" review, option S1): same mono micro-caps
       voice as the labels, but more air — padding 4→6px, size 10→10.5px,
       tracking .05→.09em. */
    padding: 6px 15px;
    font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--b2-ink-4, #9CA3AF);
    cursor: pointer;
    border-right: 1px solid var(--b2-line, #E5E7EB);
}
.team-seg button:last-child { border-right: 0; }
.team-seg button:hover { color: var(--b2-ink-2, #4B5563); }
.team-seg button.on {
    background: var(--b2-sunken, #F3F4F6);
    color: var(--b2-ink, #111216);
}
.team-seg button:focus,
.team-seg button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Members table — hairline rows, ink hierarchy, mono micro-caps header. Full
   content width (shares the dialog's single left edge); the User column takes
   all spare room, so long emails read comfortably. */
.team-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 0; }
.team-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--b2-line, #E5E7EB);
    font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2-ink-4, #9CA3AF);
}
.team-table td {
    padding: 5px 8px;        /* ~20% shorter rows (was 7px) */
    line-height: 1.25;       /* tighten the two-line User cell */
    vertical-align: middle;
    border-bottom: 1px solid var(--b2-line, #E5E7EB);
    color: var(--b2-ink, #111216);
}
.team-table tr:last-child td { border-bottom: 0; }
.team-table tr.inactive td { color: var(--b2-ink-4, #9CA3AF); }
/* Role and Status columns (selects, or the Operator badge) read centred under
   their headers. */
.team-table th:nth-child(2),
.team-table td:nth-child(2),
.team-table th:nth-child(3),
.team-table td:nth-child(3) { text-align: center; }
.team-sub-u { color: var(--b2-ink-4, #9CA3AF); font-size: 11px; margin-top: 1px; }
.team-table select {
    /* Snug fixed width — sized to the longest option (expert / unset) so the
       column edge stays crisp; the value sits CENTERED so a short word's
       slack splits evenly instead of pooling before the arrow (2026-08-21
       review: cure 2, same grammar as the invite's role select). */
    width: 66px;
    box-sizing: border-box;
    padding: 3px 6px;
    text-align: center;
    text-align-last: center;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    color: var(--b2-ink, #111216);
}
.team-table select:focus,
.team-table select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--b2-line-strong, #9CA3AF) !important;
}
/* Status control — a live Active/Inactive select (user decision 2026-08-18:
   "deactivate without deleting" as a real operator action). Slightly wider
   than the Role select so "inactive" fits; grays with its row when inactive. */
.team-table select.team-stat { width: 76px; }
.team-table tr.inactive select.team-stat { color: var(--b2-ink-4, #9CA3AF); }

/* Operator's Role cell — a fact, not a control (2026-08-21 review, option C:
   operators are platform-managed, nothing on the row is editable). The chip
   wears the role-select's exact geometry (width/padding/radius/type) so the
   column keeps one vertical rhythm; sunken fill + no arrow are the
   "non-interactive" cues. The Status cell shows a quiet dash. */
.team-role-fixed {
    display: inline-block;
    width: 66px;
    box-sizing: border-box;
    padding: 3px 6px;
    text-align: center;
    background: var(--b2-sunken, #F3F4F6);
    border: 1px solid var(--b2-line, #E5E7EB);
    border-radius: 6px;
    font-size: 12px;
    color: var(--b2-ink-3, #6B7280);
}
.team-stat-none { color: var(--b2-ink-4, #9CA3AF); font-size: 12px; }

/* Row action buttons (Deactivate / Reactivate) — quiet hairline buttons. */
.team-mini {
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 6px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
    color: var(--b2-ink-2, #4B5563);
}
.team-mini:hover { border-color: var(--b2-line-strong, #9CA3AF); color: var(--b2-ink, #111216); }

/* Delete — a destructive action, so it reads red and asks once (two-click arm). */
.team-mini.danger { color: var(--team-alert); }
.team-mini.danger:hover {
    border-color: rgba(217, 119, 87, 0.5);
    background: rgba(217, 119, 87, 0.08);
    color: var(--team-alert);
}
.team-mini.is-armed,
.team-mini.is-armed:hover {
    background: var(--team-alert);
    border-color: var(--team-alert);
    color: #fff;
}

/* Selects (invite role + table role/status) — strip the native OS chrome so
   the closed control speaks the same hairline language as everything else:
   appearance:none + our own ink-4 chevron (inline SVG). The OPEN option list
   stays browser-native by platform limitation; option casing is lowercase to
   match (user decision 2026-08-18). */
.team-invite select,
.team-table select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%239CA3AF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px !important;
    cursor: pointer;
}
.team-invite select:hover,
.team-table select:hover { border-color: var(--b2-line-strong, #9CA3AF); }
/* The snug table selects carry a tighter arrow gutter than the invite's
   (22px → 20px reserve, arrow inset 8px → 6px); must sit after the shared
   rule above to win its !important padding-right. */
.team-table select {
    background-position: right 6px center;
    padding-right: 20px !important;
}

/* The OPEN option list — square native popup clashed with the rounded
   closed control (user report 2026-08-18). Chromium 134+ exposes the popup
   to CSS via appearance:base-select + ::picker(select); style it as the
   same rounded hairline card the dialog speaks (radius, line-2 border, the
   op-toast shadow). @supports-guarded: every other browser keeps the native
   popup untouched. base-select draws its own caret (::picker-icon) — hide
   it, our SVG chevron on the closed control stays the single arrow. */
@supports selector(::picker(select)) {
    .team-invite select,
    .team-table select {
        appearance: base-select;
        -webkit-appearance: base-select;
    }
    /* base-select re-lays-out the closed control's content — the invite bar's
       fixed-height (30px) select top-aligned its text. Center it explicitly. */
    .team-invite select {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Same centering exemption for the snug table selects (their value is
       centered by design, cure 2); inline-flex so the centered td still
       centers the control itself. */
    .team-table select {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .team-invite select::picker-icon,
    .team-table select::picker-icon { display: none; }
    .team-invite select::picker(select),
    .team-table select::picker(select) {
        appearance: base-select;
        background: var(--b2-surface, #fff);
        border: 1px solid var(--b2-line-2, #D1D5DB);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(17, 18, 22, 0.10), 0 2px 6px rgba(17, 18, 22, 0.06);
        padding: 4px;
        /* Pin the popup BELOW its control. The UA default fallback chain was
           flipping some pickers upward with plenty of room below (Status
           opened up while Role opened down). block-end + a flip-block-only
           fallback keeps every popup dropping down unless it would truly
           leave the viewport. The 3px gap moves with the placement. */
        position-area: block-end span-inline-end;
        /* flip-inline ONLY: a popup near the dialog's right edge overflows
           horizontally, and the UA's default fallback "fixed" that by
           flipping VERTICALLY (Status opened upward). Horizontal flips keep
           every popup below its control; vertical flipping is never needed
           for a two-option list inside a centered dialog. */
        position-try-fallbacks: flip-inline;
        margin-block-start: 3px;
    }
    .team-invite select option,
    .team-table select option {
        padding: 4px 10px;
        border-radius: 5px;
        font-family: inherit;
        font-size: 12px;
        color: var(--b2-ink, #111216);
    }
    .team-invite select option:hover,
    .team-table select option:hover,
    .team-invite select option:focus,
    .team-table select option:focus {
        background: var(--b2-sunken, #F3F4F6);
    }
    /* Keyboard focus stays visible but in the hairline voice, not the UA's
       heavy black ring. */
    .team-invite select option:focus-visible,
    .team-table select option:focus-visible {
        outline: 1px solid var(--b2-line-strong, #9CA3AF);
        outline-offset: -1px;
    }
    /* Current value reads by weight, not by the UA checkmark. */
    .team-invite select option::checkmark,
    .team-table select option::checkmark { display: none; }
    .team-invite select option:checked,
    .team-table select option:checked { font-weight: 600; }
}

/* Pending invites (2026-08-19, review P3+R2): count segment, and the Pending
   tab's Invited column — full-word relative times ("2 hours ago"), expired
   flips to an alert mono flag. */
.team-count .seg-pend { color: var(--team-alert); font-weight: 700; }
.inv-cell { font-size: 12px; color: var(--b2-ink-2, #4B5563); white-space: nowrap; }
.inv-cell.expired {
    font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--team-alert);
}