/* Who sees it — the saved-view sharing drawer (_saved_view_sharing_dialog.html)
   and the settings drawer row's avatar stack (_opps_drawer_actions.html).

   Almost everything inside the drawer is borrowed whole: the drawer shell and
   its row buttons (drawer.css, drawer-content.css), the people rows and tick
   (settings-hub/permissions.css), the person chips (person-chip), the builder
   (filter-builder.css) — all global on base.html. This file is only what none
   of them carry: the view line, the search field's column fix, the reach line
   and the row's avatar stack.
   Every color, radius, and shadow resolves to a token (ADR-125). */

/* ── Drawer body ── */

.opportunities-sharing__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
}

/* The view being decided — name · kind, one quiet line under the title. */
.opportunities-sharing__view {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

.opportunities-sharing__people {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
    min-width: 0;
}

/* Two corrections the shared search field needs in this column, both because
   its base contract was written for a horizontal filter bar:

   flex — the field ships with a horizontal basis: `flex: 1 1 260px` from
   filter-bar.css, and inside the page header (below) `flex: 0 1 20rem` from
   page-header.css, which is the one that actually wins here. Stood on end
   either basis is a HEIGHT, so the moment the panel left any slack the field
   ate it and the magnifier floated into the middle of the gap. The slack
   belongs to the list. permissions.css:285 carries this same correction for
   the same reason, which is the case for promoting it into filter-bar.css.

   max-width — the drawer's container is rendered inside the page header
   (_opps_view_controls.html sits in the header actions block), so
   `.global-page-header .global-page-search`'s 20rem cap reaches in and pins
   the field at 320px, ending it short of the rows it searches. That cap is a
   header rule about a header row; the drawer is neither, and lifting it here
   is what lines the field's right edge up with the list. */
.opportunities-sharing__people > .global-page-search {
    flex: 0 0 auto;
    max-width: none;
}

/* Row skins come from settings-permission-drawer-list (global); the drawer
   body is the scroller. The padding is the checkbox column's gutter, so a
   row's focus ring is never cut off at the edge. */
.opportunities-sharing__list {
    padding: var(--spacing-2xs) var(--spacing-xs);
    /* No font-size here on purpose. person-chip.css gives the name none of its
       own at this rung, and nothing between here and <html> sets one either, so
       the names already render at the 16px root — the largest type in a drawer
       whose other lines are 14px. Measured at 16px on 08-28; a token size here
       would have to be --font-size-lg, and that is 15px, so the "step up" this
       list looked like it wanted would have made it smaller. */
}

/* The builder, then the match line under it. */
.opportunities-sharing__filter {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
}

/* The live match line under the builder — the count alone, which is the
   whole of what it knows. */
.opportunities-sharing__match {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* ── The reach line — who ends up with the tab, and the drawer's ONE
   headcount. The old preview restated the picker's own list beside a second,
   differently-counted number; this is one sentence and one face stack. */

.opportunities-sharing__reach {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    padding-top: var(--spacing-smd);
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-subtle);
}

/* Everyone and Just for me have nothing to count, and a rule across nothing
   reads as a glitch. */
.opportunities-sharing__reach--silent {
    display: none;
}

/* The sentence takes what the stack leaves, and wraps rather than widening
   the drawer on a long roster. */
.opportunities-sharing__reach-text {
    min-width: 0;
}

/* ── The drawer row's avatar stack ── faces overlap left-to-right, each
   ringed in the card's own bg so the overlap reads as a stack and not a
   blob; the "+N" chip folds the rest. */

.opportunities-sharing-stack {
    display: inline-flex;
    align-items: center;
}

.opportunities-sharing-stack__avatar {
    box-shadow: var(--shadow-avatar-ring);
}

.opportunities-sharing-stack__avatar:not(:first-child),
.opportunities-sharing-stack__more {
    margin-left: -8px;
}

.opportunities-sharing-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-2xs);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-avatar-ring);
}