/* =========================================================================
   Permissions — the settings-hub "Permissions" page: taxonomy groups, each an
   opaque card whose body is a noun table. One row per resource noun, with a
   View cell and an Edit cell — each cell an avatar stack of who holds that
   capability, opening the drawer where grants actually change. One-off powers
   with no read beside them (invite people, complete a milestone) fold into
   tagged action rows below the nouns. A person filter highlights the rows
   someone touches instead of hiding the rest. A presets button sits by the
   filter for granting several rows at once.

   The flat per-capability row classes — .settings-permission-row /
   .settings-permission-list, and .settings-permission-row__chevron, which ports
   .payments-bill-row__chevron (payment-dashboard.css) verbatim for the same
   fade-in-on-hover keyboard opener — are NOT worn by this page any more; the
   Notifications page still wears them (see the two-pages note below), so they
   stay. .settings-preset-chip__open reuses that same opener rule one section
   down. Everything else a row needs (.settings-section, .global-card,
   .global-drawer-body, .global-drawer-scrim/.global-drawer-panel, the
   global-person-chip avatar atom) is already global — nothing here repeats it.

   Two pages wear the flat-row classes, not one. The Notifications page wears
   them over a reader's own alerts (app/notifications/_alert_row.html and
   _channel_default_switch.html): same rows, same avatar stacks, same drawer.
   It reuses these rules rather than copying them under new names, since two
   stylesheets for one look is two chances to drift; the only rules it adds of
   its own are the channel buttons and the funnel opener
   (settings-hub/notifications.css). This file is loaded on every page from
   base/base.html, so that page needs no CSS of its own. A change to a shared
   flat-row rule lands on both; check both.
   ========================================================================= */

.settings-permission-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdlg);
}

/* .global-filter-bar (filter-bar.css) gives the site's own card-surface look — the
   same idiom the header search/date filters sit in elsewhere; margin-bottom
   is zeroed because .settings-permission-page already spaces its children with its
   own flex gap. No max-width: .global-filter-bar carries none of its own, so this
   stretches the full content width by default — the same top-bar idiom the
   Sign Up dashboard and the other dashboards use, and it now matches the
   permission group cards below it. */
.settings-permission-filter.global-filter-bar {
    margin-bottom: 0;
    /* Pin the search + Presets bar so it stays reachable while the permission
       group cards scroll under it. Sits at --drawer-top — below the header and,
       when a notice band is pinned, below that too — which is the same top edge
       the settings sub-nav sticks to, so the two line up. z lifts it over the
       scrolling cards; the drawer (position: fixed) still sits above it. */
    position: sticky;
    top: var(--drawer-top);
    z-index: var(--z-sticky);
}

/* The picker should sit at the site's standard search width, not
   grow to fill the now-full-width bar. flex: 1 1 260px + min-width: 220px is
   the base contract every search field carries (.global-page-search /
   .global-search-input-wrapper, filter-bar.css:40); max-width: 20rem is the further
   cap a page header settles that same field at
   (.global-page-header .global-page-search, page-header.css) once a header
   has room to let it grow past what it needs. Mirrored here rather than
   reused because this bar is a .global-filter-bar, not a .global-page-header, so
   that rule's selector doesn't reach it. */
.settings-permission-filter .global-cs {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 20rem;
}

/* With the picker capped, the Presets button would otherwise sit right next
   to it with the rest of the row empty. Same auto-margin idiom page-header.css
   uses to ride its own trailing controls to the right edge once its search is
   capped (.global-page-search + *). */
.settings-permission-filter .global-cs + * {
    margin-left: auto;
}

/* The btn-sm Presets button reads shorter than the rest of the row — two
   control families in one row. Same fix .worker-add-skill-btn (workers.css)
   uses to match its own 36px neighbor: pin the height to the filter bar's
   own control token (--filter-ctrl-h, filter-bar.css) and zero the vertical
   padding that would otherwise fight it, with inline-flex centering so the
   icon and label stay centered in the taller box. The combobox above is now
   pinned to the same token, so the two controls match. */
.settings-permission-filter .global-filters-row .btn {
    height: var(--filter-ctrl-h, 36px);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

/* .global-filters-row (filter-bar.css) sets overflow-x: auto with overflow-y:
   visible for the horizontally-scrolling filter-pill rows it was built for.
   Per the CSS overflow spec, a non-visible value on one axis silently turns
   the other axis's "visible" into "auto" too — so it clips vertically same
   as it scrolls horizontally. That never showed with a bare <select>, whose
   native popup isn't subject to CSS clipping at all, but it cuts the new
   .global-cs-menu combobox popup off clean. This row holds one control and never
   needs to scroll, so opt it out of both axes. */
.settings-permission-filter .global-filters-row {
    overflow: visible;
}

/* Below 600px .global-filters-row already wraps to one control per row (filter-bar.css);
   a 320px-capped picker on its own full-width row reads as a mistake, and the
   auto margin has no slack to ride once the button drops to its own line.
   Release both — same relief page-header.css gives its own search at this
   width. */
@media (max-width: 600px) {
    .settings-permission-filter .global-cs {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .settings-permission-filter .global-cs + * {
        margin-left: 0;
    }
}

/* Each taxonomy group (member_permissions.py::permission_groups) is a real
   .global-card — opaque fill, hairline border, resting shadow — instead of
   the page background showing through. That's the fix for the flat,
   low-contrast list this replaces: a row now sits inside a container, not
   loose on the page. */
.settings-permission-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdlg);
}

/* The group name. On the Permissions page it is the first cell of the table's
   head row (.settings-permission-thead, below). The Notifications alerts and
   Slack-channel pages reuse the same label inside a __header of their own
   (app/notifications/_alerts.html, settings_slack_channels.html), so it stays a
   plain shared token. */
.settings-permission-group__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* __header and __description are worn only by those two Notifications pages now
   — the Permissions page moved its title into the .settings-permission-thead
   head row and no longer draws a separate description. They stack the group's
   name over its one-line description; this file loads on every settings page
   (see the two-pages note at the top), so the Notifications markup finds them
   here beside the rest of the family. */
.settings-permission-group__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.settings-permission-group__description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    color: var(--color-text-muted);
}

.settings-permission-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-permission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-smd) var(--spacing-smd);
    border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, currentColor 3%, transparent);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.settings-permission-row:hover {
    border-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* Label over its one-line explanation — a column since the help lines
   shipped; the label used to sit alone in a wrapping inline row. */
.settings-permission-row__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.settings-permission-row__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.settings-permission-row__help {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Highlight-only filter: a match brightens the row, a non-match dims — the
   row is never hidden, because what someone does NOT hold is exactly as
   worth seeing as what they do. */
.settings-permission-row.is-match {
    border-color: var(--color-action);
    background: var(--color-action-tint);
}

.settings-permission-row.is-dim {
    opacity: 0.45;
}

/* The real, keyboard-focusable opener — ported from .payments-bill-row__chevron. The
   row itself is not a control (no role/tabindex, see _permissions.html), so
   this is how a keyboard user opens the drawer. */
.settings-permission-row__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.settings-permission-row:hover .settings-permission-row__chevron,
.settings-permission-row__chevron:focus-visible {
    opacity: 1;
}

.settings-permission-row__chevron:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring-tight);
    border-radius: var(--radius-md);
}

/* ── Noun table: one row per resource, a View cell and an Edit cell ─────────
   The redesigned page body (member_permissions.py::permission_noun_groups):
   each group card holds a noun table, not the flat per-capability list above.
   A resource's :read fills its View cell, its :write fills Edit; a read-only
   noun's Edit and an action's View render the platform dash. The flat
   .settings-permission-row family above is untouched — the Notifications page
   still wears it (see the file header), so these are new names, not edits.

   The card gives no body padding of its own (components/card.css), so the
   head row and rows carry their own horizontal gutter — the same 1rem the
   .card-header above them uses — and rows separate on a hairline rather than
   each sitting in its own bordered box. */
.settings-permission-noun-table {
    /* Width of each View/Edit column. The head row and every row inherit
       it from here, so the two grids stay aligned from one declaration. Wide
       enough to hold a capped face stack (3 faces + "+N") without spilling into
       the neighbouring column. */
    --perm-cell-col: 140px;
    display: flex;
    flex-direction: column;
    /* The narrow layout answers to THIS table's own width, not the viewport, so
       a card in a wide sidebar and one in a narrow column each reflow on their
       own. The @container rule at the foot of this file reads this. */
    container-type: inline-size;
}

/* The table's head row: the group name fills the name column, the View / Edit
   column heads sit beside it — one line, on the same grid every row below uses,
   so the title and the two column heads share a baseline instead of stacking. */
.settings-permission-thead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--perm-cell-col) var(--perm-cell-col);
    column-gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-smd);
}

/* Name + its optional admin gear, kept together at the start of the head row. */
.settings-permission-thead__name {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.settings-permission-thead__gear {
    flex: 0 0 auto;
}

/* "View" / "Edit" — the muted uppercase column heads, centered over their
   columns. aria-hidden in the markup (each cell's button already names its
   column), so a screen reader never doubles them. */
.settings-permission-thead__col {
    text-align: center;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.settings-permission-nrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--perm-cell-col) var(--perm-cell-col);
    column-gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    transition: opacity 140ms ease;
}

/* The two cells wrap in this, but it dissolves (display: contents) so View and
   Edit sit as the grid's 2nd and 3rd columns. It stays dissolved at every
   width — the narrow layout shrinks the two columns, it never restacks the row
   (see the @container rule at the foot of this file). */
.settings-permission-nrow__cells {
    display: contents;
}

/* A one-off power with no read beside it (invite people, complete a milestone)
   folds under the noun rows as its own action row — dashed rule, faint fill,
   and a ↳ marking it as tucked beneath. */
.settings-permission-nrow--sub {
    border-top-style: dashed;
    border-top-color: color-mix(in srgb, currentColor 12%, transparent);
    background: color-mix(in srgb, currentColor 2%, transparent);
}

.settings-permission-nrow__name {
    min-width: 0;
    padding-right: var(--spacing-sm);
}

.settings-permission-nrow--sub .settings-permission-nrow__name {
    position: relative;
    padding-left: var(--spacing-mdlg);
}

.settings-permission-nrow--sub .settings-permission-nrow__name::before {
    content: "\21B3"; /* ↳ — this action tucks under the rows above it */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-text-muted);
}

.settings-permission-nrow__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.settings-permission-nrow--sub .settings-permission-nrow__label {
    font-weight: var(--font-weight-body);
}

.settings-permission-nrow__help {
    display: block;
    margin-top: var(--spacing-2xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* "action" — a neutral hairline tag on the label of a one-off power (invite
   people, send money out), marking it as a standalone action rather than a
   read/write pair. Not a column. */
.settings-permission-atag {
    display: inline-block;
    margin-left: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    vertical-align: middle;
    white-space: nowrap;
}

/* One View or Edit cell. Every cell holds a same-size box so View and Edit line
   up: a grantable cell's box is the grant button's holder stack; a cell with
   nothing to grant holds a quiet inert box with a dash. */
.settings-permission-cell {
    display: flex;
    justify-content: center;
    transition: opacity 140ms ease;
}

.settings-permission-cell--na {
    color: var(--color-text-muted);
}

/* The button is only the click/keyboard target — the pill it wraps
   (.settings-permission-stack) carries the visible box, because that span is
   what a grant or revoke swaps out-of-band, so its --on/--empty state must own
   the fill and border or a fresh grant would leave the cell looking empty. */
.settings-permission-grant {
    display: inline-flex;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* The box every cell shows. width:100% makes View and Edit the same size in
   their fixed columns, so a filled cell and an empty one line up. */
.settings-permission-stack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    width: 100%;
    min-height: 40px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    box-sizing: border-box;
    transition: border-color 120ms ease, background 120ms ease;
}

/* Held by someone: the green "on" fill. */
.settings-permission-stack--on {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}

/* Grantable but empty: a dashed slot in the action colour, with "Add" for an
   admin (who can grant); everyone else sees a plain dash. */
.settings-permission-stack--empty {
    border-style: dashed;
    border-color: var(--color-action);
    background: none;
}

.settings-permission-stack__add {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Nothing to grant here (a read-only noun's Edit, an action's View): the same
   size box as its neighbour, but quiet and inert — a hairline and a dash — so
   the row keeps its two-column rhythm without inviting a click. */
.settings-permission-stack--none {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-border) 55%, transparent);
    background: var(--color-grey-50);
    color: var(--color-text-muted);
}

.settings-permission-grant:hover .settings-permission-stack {
    border-style: solid;
    border-color: var(--color-action);
}

.settings-permission-grant:focus-visible {
    outline: none;
}

.settings-permission-grant:focus-visible .settings-permission-stack {
    border-color: var(--color-action);
    box-shadow: var(--shadow-focus-ring-tight);
}

/* Highlight-only filter, same contract as the flat list above: the chosen
   person's cells brighten, the rest of a matched row dims, and a row they
   touch in neither cell dims whole. Nothing is ever hidden. Matching runs in
   the browser off each stack's data-holder-ids (_permissions.html). */
.settings-permission-nrow.is-dim {
    opacity: 0.4;
}

.settings-permission-cell.is-dim {
    opacity: 0.4;
}

.settings-permission-cell.is-match .settings-permission-stack {
    border-color: var(--color-action);
    background: var(--color-action-tint);
}

/* As the table's own width tightens, the View / Edit columns SHRINK and stay
   centered under the one head row — the layout never restacks and never drops a
   label onto each box. Answering to the table (@container), not the viewport,
   keeps a card in a narrow column and one in a wide sidebar each adapting on
   their own. Two steps: a narrower column for a tight settings pane, then a
   phone step that also shrinks the holder faces so a full "3 + N" stack still
   fits its box instead of spilling into the neighbouring column. */
@container (max-width: 600px) {
    .settings-permission-thead,
    .settings-permission-nrow {
        --perm-cell-col: 116px;
        column-gap: var(--spacing-md);
    }
}

@container (max-width: 430px) {
    .settings-permission-thead,
    .settings-permission-nrow {
        --perm-cell-col: 92px;
        column-gap: var(--spacing-sm);
    }

    /* Faces shrink so 3 + "+N" fits a 92px column; tooltips and counts are
       untouched, so no holder is lost. The shared stacked overlap rides along —
       a smaller face under the same overlap only draws the stack tighter, which
       helps the fit. Scoped to this page's stacks only. */
    .settings-permission-stack .global-person-chip--avatar {
        width: 24px;
        height: 24px;
    }
}

/* The drawer body's own column — count line, search, list — on one rhythm,
   instead of each block carrying its own ad-hoc margin. */
.settings-permission-drawer-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
}

/* The shared search atom (filter-bar.css) sizes itself for a horizontal
   filter row: flex: 1 1 260px. In this column the main axis is vertical, so
   that basis becomes HEIGHT — a 260px-tall wrapper with the input at its top
   and the icon centered in the empty space below. Pin it to its content. */
.settings-permission-drawer-section .global-page-search {
    flex: none;
}

.settings-permission-drawer-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-permission-drawer-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
    /* Pad the row and pull it back out by the same amount so a clickable
       row's hover fill reads as a full-width band to the section's edges.
       Every row wears the same box whether or not it lights up, so the
       checkbox column stays aligned down the list. */
    padding: var(--spacing-xsm) var(--spacing-sm);
    margin: 0 -0.5rem;
    border-radius: var(--radius-md);
    transition: background-color 0.12s ease;
}

/* Everything that sits in the checkbox column — the chip on a role-locked
   row, the checkbox or the owner's tick — grouped right, so the toggles
   line up down the list no matter which shape a row takes. */
.settings-permission-drawer-list__control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Where the checked group ends and the unchecked begins. */
.settings-permission-drawer-list__divider {
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    margin: var(--spacing-2xs) 0;
}

/* The owner's slot: the same answer a checked box gives, deliberately not a
   control. Sized to the checkbox so the column stays straight. */
.settings-permission-drawer-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    color: var(--color-action);
}

.settings-permission-drawer-tick svg {
    width: 100%;
    height: 100%;
}

/* The preset editor lists every grantable permission at once — far more than
   the handful of holders a permission drawer shows — so only that one caps
   its height. A modifier rather than a second list family: same list, one
   difference. */
.settings-permission-drawer-list--scroll {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.settings-permission-drawer-list__check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.settings-permission-drawer-add {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-permission-drawer-add .global-cs {
    flex: 1;
    min-width: 0;
}

/* The presets list now lives inside the Presets drawer
   (_preset_list_drawer.html), on .settings-permission-drawer-section's own rhythm —
   see that class above. Nothing card-shaped is needed here anymore; only
   the chips themselves keep their own look below. */
.settings-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Premium pill: an opaque fill and a resting shadow instead of the flat,
   near-invisible outline it had before, so the row of chips reads as a row
   of real controls rather than ghost text with a border. */
.settings-preset-chip {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.settings-preset-chip:hover {
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    box-shadow: var(--shadow-md);
}

.settings-preset-chip:focus-within {
    outline: none;
    border-color: var(--color-focus-ring);
    box-shadow: var(--shadow-focus-ring);
}

.settings-preset-chip__text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.settings-preset-chip__name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-preset-chip__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* The real, keyboard-focusable opener — same fade-in-on-hover pattern as
   .settings-permission-row__chevron above, but resting at partial opacity rather than
   fully invisible: it is the chip's only affordance for "this opens
   something", so hiding it entirely at rest hid the one clue the chip is
   clickable. The chip itself is not a control (no role/tabindex, see
   _presets.html), so this is how a keyboard user opens the drawer. */
.settings-preset-chip__open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.settings-preset-chip:hover .settings-preset-chip__open,
.settings-preset-chip__open:focus-visible {
    opacity: 1;
}

.settings-preset-chip__open:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring-tight);
    border-radius: var(--radius-md);
}

/* ── The limits step (member scope) ──────────────────────────────────────
   A checked non-admin row grows a Limit affordance, and a limited member's
   row reads its line back as chips under the name; the step itself reuses
   the shared filter builder plus a reach preview. The chips are the same
   .notifications-audience-chip family every other condition surface reads through
   (both stylesheets load from base), so a condition looks the same words
   and the same shape everywhere. */

/* Chip + chip-line column on the left of a row. The chips indent past the
   avatar (32px standard chip + its gap) so the line hangs under the name. */
.settings-permission-drawer-list__who {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.settings-permission-scope-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-2xl);
}

/* The limits-step opener: the row itself is the click target (the drawer
   shell's rosterClick forwards any row click here), and this button is the
   row's keyboard door and hidden-state truth — the same fade-in chevron the
   permission rows wear (.settings-permission-row__chevron above). Hidden (the HTML
   attribute, which Bootstrap's reboot makes win over display) while the row
   is unchecked and unscoped — the affordance follows the box, the list
   never re-sorts mid-session. */
.settings-permission-drawer-list__item:has(.settings-permission-scope-open:not([hidden])) {
    cursor: pointer;
}

/* The clickable-row affordance (Nick, 2026-08: "if someone is clickable,
   there should be a hover effect"): a soft band on hover, matched to the
   same :has() test the cursor uses, so only a row that actually opens the
   limits step lights up — an owner or an unchecked row never does. */
.settings-permission-drawer-list__item:has(.settings-permission-scope-open:not([hidden])):hover {
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.settings-permission-scope-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.settings-permission-drawer-list__item:hover .settings-permission-scope-open,
.settings-permission-scope-open:focus-visible {
    opacity: 1;
}

/* What a non-admin reader sees where the button would be: the fact, not
   the control. */
.settings-permission-limit-badge {
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
    border-radius: var(--radius-pill);
}

/* The reach preview: how many of the org's upcoming bookings the draft
   leaves this member, then the note about blanks, then the list on demand. */
.settings-permission-scope-reach {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
    margin-top: var(--spacing-smd);
    padding: var(--spacing-smd);
    background: color-mix(in srgb, var(--color-text-muted) 6%, transparent);
    border-radius: var(--radius-md);
}

.settings-permission-scope-reach__line {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xsm);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.settings-permission-scope-reach__num {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.settings-permission-scope-reach__note {
    margin: 0;
    padding: var(--spacing-xsm) var(--spacing-sm);
    font-size: var(--font-size-2xs);
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
}

.settings-permission-scope-reach__toggle {
    align-self: flex-start;
    padding: 0;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.settings-permission-scope-reach__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.settings-permission-scope-reach__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-smd);
    font-size: var(--font-size-2xs);
    color: var(--color-text);
}

.settings-permission-scope-reach__list li.is-out {
    color: var(--color-text-muted);
}

/* Struck through on the title only — the value labels stay legible, they
   are the reason the row is outside. */
.settings-permission-scope-reach__list li.is-out .settings-permission-scope-reach__title {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.settings-permission-scope-reach__values {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.settings-permission-scope-reach__more {
    color: var(--color-text-muted);
}

/* Save under the preview — the step's whole answer, then its commit. No
   Remove button: clearing every condition and saving is the removal. */
.settings-permission-scope-commit {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    margin-top: var(--spacing-smd);
}

/* ── Section settings: gear + drawers ──────────────────────────────────────
   Two groups own an org-wide setting rather than per-person grants —
   Opportunities (who may touch a booking's files) and Staffing & Sign-ups
   (what the board shows). Each tucks an admin-only gear right after its name in
   the table's head row (see .settings-permission-thead__gear above), so the
   switch it opens stops sitting loose on the page. */

/* File-actor drawer body: one field, its label over the select. The select
   is the global modern control, not a bare Bootstrap form-select. */
.settings-file-actor-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
}

.settings-file-actor-field__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Sign Up drawer body: one gate per row, switch opposite its label, a
   hairline between rows instead of a card each. Token type, not ad-hoc
   .small / inline font-size. */
.settings-signup-gate {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-smd) 0;
}

.settings-signup-gate--divided {
    border-top: 1px solid var(--color-border);
}

.settings-signup-gate__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.settings-signup-gate__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.settings-signup-gate__help {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.settings-signup-matched {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    margin-top: var(--spacing-smd);
    padding-top: var(--spacing-smd);
    border-top: 1px solid var(--color-border);
}

.settings-signup-matched__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.settings-signup-matched__row {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}