/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* The code is drawn one PNG pixel per six of its own, and the light squares are part of what a
   camera reads: it keeps its own white ground in either theme, and a narrow screen shrinks it
   without the smoothing that turns the squares into a blur no phone can resolve. */
.authenticator-qr[b-216ra5ad0v] {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    margin: 0.75rem 0 1.25rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-sm, 8px);
}
/* /Components/Account/Pages/Manage/Integrator.razor.rz.scp.css */
.integrator-id-card[b-3lmseyb6id] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
}

.integrator-id[b-3lmseyb6id] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    margin: 0.15rem 0 0.5rem;
}

/* The read-only summary reuses the shared account-facts grid; the description row earns it
   a little more width than the account card. */
.integrator-summary[b-3lmseyb6id] {
    max-width: 640px;
}

/* The advertised-area chips, drawn as the public directory card draws them (that page's
   copy is scoped to it). */
.integrator-areas[b-3lmseyb6id] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.integrator-areas li[b-3lmseyb6id] {
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    white-space: nowrap;
}

.form-legend[b-3lmseyb6id] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.area-grid[b-3lmseyb6id] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.4rem 1rem;
}

.area-check[b-3lmseyb6id] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.consent-check[b-3lmseyb6id] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pin-field[b-3lmseyb6id] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 0.85rem;
}

.pin-actions[b-3lmseyb6id] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.pin-map[b-3lmseyb6id] {
    height: 320px;
    width: 100%;
    border-radius: 6px;
}

.pin-credit[b-3lmseyb6id] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
}

.image-upload[b-3lmseyb6id] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.image-upload .form-control[b-3lmseyb6id] {
    width: auto;
    flex: 1 1 220px;
}

.image-gallery[b-3lmseyb6id] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.image-tile[b-3lmseyb6id] {
    margin: 0;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image-tile img[b-3lmseyb6id] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.image-placeholder[b-3lmseyb6id] {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    font-size: 0.9rem;
}

.image-tile figcaption[b-3lmseyb6id] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.6rem 0.7rem;
}

.image-caption[b-3lmseyb6id] {
    font-size: 0.9rem;
}

.image-note[b-3lmseyb6id] {
    font-size: 0.8rem;
}

/* The remove verb sits at the foot of its own tile, so a row of tiles whose captions run to
   different lengths still lines the buttons up. */
.image-delete[b-3lmseyb6id] {
    margin: auto 0 0;
}

/* Moderation-state badges layered onto the global .status-badge base. */
.status-badge.status-approved[b-3lmseyb6id] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.status-badge.status-pending[b-3lmseyb6id] {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

.status-badge.status-rejected[b-3lmseyb6id] {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
/* /Components/Pages/Compare/ComparisonHub.razor.rz.scp.css */
/* The hub is a chooser, not a price row: same surface, border and radius the landing already
   uses, under names that say what the cards are. Three columns, then two, then one, like the
   pricing row, without borrowing that row's class. */

.cmp-hub-cards[b-1ecnypa12m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
}

.cmp-hub-card[b-1ecnypa12m] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
}

.cmp-hub-card h2[b-1ecnypa12m] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.cmp-hub-card p[b-1ecnypa12m] {
    flex: 1;
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 0.95rem;
    text-wrap: pretty;
}

.cmp-hub-card a[b-1ecnypa12m] {
    font-weight: 600;
    margin-top: auto;
}

@media (max-width: 900px) {
    .cmp-hub-cards[b-1ecnypa12m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .cmp-hub-cards[b-1ecnypa12m] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Compare/ComparisonPage.razor.rz.scp.css */
/* Comparison pages: a reading column on the landing's canvas. Everything structural is borrowed
   from the marketing frame (.land-page, .page-head, .feat-points, .land-cta-row) so these pages
   cannot drift into a look of their own; what lives here is only what a long piece of prose needs
   that a sales page does not. */

/* The age of the information, right under the title where it is read before the claims. */
.cmp-reviewed[b-enb5jevbrt] {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* The paragraph that answers the question, one step up in size from the lists under it. */
.cmp-lead[b-enb5jevbrt] {
    font-size: 1.15rem;
    margin: 0 0 3rem;
    max-width: 46rem;
}

.cmp-block[b-enb5jevbrt] {
    max-width: 46rem;
    margin: 0 0 3rem;
}

.cmp-block h2[b-enb5jevbrt] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
}

.cmp-note[b-enb5jevbrt] {
    margin: -0.4rem 0 1.2rem;
}

/* The facts about the other product are set apart from our own claims: quieter, and marked as
   quotation rather than as features of ours. */
.cmp-facts[b-enb5jevbrt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.cmp-facts li[b-enb5jevbrt] {
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    color: var(--muted);
}

.cmp-cta[b-enb5jevbrt] {
    padding-top: 2.6rem;
    border-top: 1px solid var(--border);
}

/* The two notices the page owes the reader: how the information was gathered, and whose marks
   these are. Small, at the end, and never hidden. */
.cmp-meta[b-enb5jevbrt] {
    max-width: 46rem;
    margin: 2.8rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.88rem;
}

.cmp-meta p[b-enb5jevbrt] {
    margin: 0 0 0.6rem;
}

.cmp-others[b-enb5jevbrt] {
    margin-top: 2.4rem;
}

.cmp-others h2[b-enb5jevbrt] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    font-weight: 650;
    margin-bottom: 0.7rem;
}

.cmp-others ul[b-enb5jevbrt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
}

.cmp-others a[b-enb5jevbrt] {
    font-weight: 600;
}
/* /Components/Pages/Integrators/Directory.razor.rz.scp.css */
/* Entry state: the program pitch, then the country gate. The blocks themselves are the site's
   shared landing language (kicker/head, pillar cards, call-out band) — only the vertical rhythm
   between them is this page's business, and on a canvas with no bands the air is what separates
   one block from the next. */
.directory-program[b-7r6ahnw54g] { margin: 0 0 4.5rem; }

/* The shared call-out band, sized for this narrower column: the landing's own padding would leave
   the copy almost no measure here. */
.directory-signup[b-7r6ahnw54g] {
    padding: 2.2rem;
}

/* Four pillars read as a 2x2 block: the shared auto-fit track lands on a ragged 3 + 1 at this
   page's column width. It halves to a single file on a phone, like the audience row does. */
.directory-program .pillar-grid[b-7r6ahnw54g] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 2rem;
}

@media (max-width: 560px) {
    .directory-program .pillar-grid[b-7r6ahnw54g] { grid-template-columns: minmax(0, 1fr); }
}

/* One step under the page title: the landing's H2 scale is tuned for its full-bleed sections and
   would tie with the H1 in this narrower column. */
.directory-program .land-h2[b-7r6ahnw54g],
.directory-find .land-h2[b-7r6ahnw54g] { font-size: clamp(1.65rem, 3vw, 2.2rem); }

/* The head sits tight on the filter row, which carries its own top margin. */
.directory-find .land-section-head[b-7r6ahnw54g] { margin-bottom: 0.75rem; }

.directory-filters[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin: 1.5rem 0;
}

.directory-filters label[b-7r6ahnw54g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Padding/border/background/etc. come from the site-wide base select rule (app.css);
   only the width is specific to this filter row. */
.directory-filters select[b-7r6ahnw54g] {
    min-width: 12rem;
}

/* Empty region: an invitation, not a dead end — the same card, sized to hold the CTA. */
.directory-empty[b-7r6ahnw54g] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    padding: 2.25rem 1.5rem;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    text-align: center;
}

.directory-empty h2[b-7r6ahnw54g] {
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    margin-bottom: 0.5rem;
}

.directory-empty p[b-7r6ahnw54g] {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.directory-count[b-7r6ahnw54g] {
    margin: 0.5rem 0 1rem;
}

.directory-list[b-7r6ahnw54g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.integrator-card[b-7r6ahnw54g] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.integrator-head[b-7r6ahnw54g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.integrator-card h3[b-7r6ahnw54g] {
    margin: 0;
}

.integrator-loc[b-7r6ahnw54g] {
    margin: 0;
    font-size: 0.9rem;
}

.integrator-desc[b-7r6ahnw54g] {
    margin: 0.25rem 0;
}

/* The approved showcase, as thumbnails: fixed-height row, each image cropped to a small tile so
   the card stays a card whatever the source dimensions are. The bytes are the moderated JPEGs
   (1600px / 1 MB ceilings), lazy-loaded, so the row costs a few thumbnails, never a page of
   full-size screenshots. */
.integrator-gallery[b-7r6ahnw54g] {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.integrator-gallery img[b-7r6ahnw54g] {
    display: block;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #d0d0d0);
}

.integrator-areas[b-7r6ahnw54g] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The site's own pill tone: the palette carries two surfaces, and the second one is what a chip
   is drawn in everywhere else. */
.integrator-areas li[b-7r6ahnw54g] {
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    white-space: nowrap;
}

.integrator-contacts[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

.pager[b-7r6ahnw54g] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* The invitation that closes a region with partners in it: one line and the way in, quieter than
   the entry pitch because the reader came here for the list. */
.directory-join[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
}

.directory-join p[b-7r6ahnw54g] {
    margin: 0;
    max-width: 44rem;
}
/* /Components/Pages/Integrators/IntegratorLevelBadge.razor.rz.scp.css */
/* Recognition tiers, on the shared .status-badge pill. One metallic hue per tier, mixed against the
   theme tokens (--surface/--text/--border) so the soft badge stays legible in light and dark alike.
   The base rule sets the default --tier first; each tier rule overrides it after (equal specificity,
   later wins). */
.level-badge[b-ecihpm0ef9] {
    --tier: var(--muted);
    background: color-mix(in srgb, var(--tier) 16%, var(--surface));
    color: color-mix(in srgb, var(--tier) 68%, var(--text));
    border-color: color-mix(in srgb, var(--tier) 45%, var(--border));
}

.level-bronze[b-ecihpm0ef9] {
    --tier: #b06a2c;
}

.level-silver[b-ecihpm0ef9] {
    --tier: #7f8792;
}

.level-gold[b-ecihpm0ef9] {
    --tier: #c08a1e;
}

.level-platinum[b-ecihpm0ef9] {
    --tier: #3f9fb0;
}
/* /Components/Pages/Integrators/IntegratorRankingNote.razor.rz.scp.css */
.directory-criterion[b-prljn0i5qm] {
    margin: -0.25rem 0 1rem;
    font-size: 0.9rem;
}
/* /Components/Pages/Marketing/CampaignEdit.razor.rz.scp.css */
/* Campaign draft editor: the form first, the message as it will arrive below it. */

/* The two blocks stack: beside the area's rail there is no width for two readable columns, and a
   squeezed preview is worse than none. The form keeps a comfortable writing measure; the preview
   below gets the full column, so the message is judged at the width it will actually arrive in. */
.campaign-form[b-msb2pco9m8],
.campaign-review[b-msb2pco9m8] {
    flex: 1 1 100%;
}

.campaign-form[b-msb2pco9m8] {
    max-width: 46rem;
}

/* What a section says about itself reads at a text measure and belongs to the title above it. */
p.muted[b-msb2pco9m8] {
    max-width: 68ch;
}

h3 + p.muted[b-msb2pco9m8] {
    margin-top: -0.35rem;
}

/* The only look at the email before a mass send, so it gets real page height instead of the
   iframe default box (300x150). The message itself is a light-background HTML email: pinning
   the frame's color scheme keeps a dark-theme browser from repainting its own canvas behind it. */
.email-preview[b-msb2pco9m8] {
    display: block;
    width: 100%;
    /* An email arrives in a 600px card; a frame wider than an inbox pane only adds margin
       around it, so the preview stops growing at about that width. */
    max-width: 48rem;
    height: min(70vh, 720px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
    color-scheme: light;
}
/* /Components/Pages/Marketing/Campaigns.razor.rz.scp.css */
/* Campaign list: the draft form on the left of the row, the whole list under it. */

/* The draft form keeps a writing measure, the same one the campaign editor gives its form: a
   lone column would otherwise take the whole pane on a wide screen. */
.row > .col-xl-6[b-1dbgn86vjn] {
    max-width: 46rem;
}

/* What the page says about itself reads at a text measure, not across the whole column. */
p.muted[b-1dbgn86vjn] {
    max-width: 68ch;
}

/* The line under a section title belongs to that title rather than to the block after it. */
h3 + p.muted[b-1dbgn86vjn] {
    margin-top: -0.35rem;
}

/* The trailing cell of a row: what opens the campaign, then what ends it, on one line and sized
   to the row rather than to a form. */
.campaign-actions[b-1dbgn86vjn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.campaign-actions .btn[b-1dbgn86vjn] {
    min-height: 2rem;
    padding: 0 0.7rem;
    font-size: 0.8125rem;
}
/* /Components/Pages/Marketing/IntegratorImages.razor.rz.scp.css */
/* What the page says about itself reads at a text measure, not across the whole column. */
p.muted[b-2bpw8xnfv9] {
    max-width: 68ch;
}

.moderation-grid[b-2bpw8xnfv9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.moderation-card[b-2bpw8xnfv9] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.moderation-thumb[b-2bpw8xnfv9] {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    border-radius: 6px;
}

.moderation-meta[b-2bpw8xnfv9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.moderation-caption[b-2bpw8xnfv9] {
    margin: 0.25rem 0 0;
    font-style: italic;
}

.moderation-actions[b-2bpw8xnfv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: auto;
}

.moderation-reject[b-2bpw8xnfv9] {
    display: flex;
    gap: 0.4rem;
    flex: 1;
}

.moderation-reject .form-control[b-2bpw8xnfv9] {
    min-width: 0;
}
/* /Components/Pages/Marketing/MarketingLayout.razor.rz.scp.css */
/* Marketing area frame: a fixed rail and the page's own column, on the account area's grid so the
   two internal areas read as one family. */

.marketing-grid[b-c621wxq6yx] {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 760px) {
    .marketing-grid[b-c621wxq6yx] { grid-template-columns: 1fr; }
}

.marketing-rail[b-c621wxq6yx] {
    display: grid;
    gap: 1.1rem;
    /* The first entry's label lines up with the page title beside it instead of with the box. */
    margin-top: 0.35rem;
}

/* The area's standing notes, quieter than the menu above them: they answer a question once, they
   are not something to act on. */
.marketing-rail-note[b-c621wxq6yx] {
    padding: 0 0.35rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.marketing-rail-note p[b-c621wxq6yx] { margin: 0 0 0.7rem; }
.marketing-rail-note p:last-child[b-c621wxq6yx] { margin-bottom: 0; }

/* A table is the widest thing a page here draws, so the column is allowed to shrink under it
   instead of pushing the rail off the frame. */
.marketing-pane[b-c621wxq6yx] { min-width: 0; }
/* /Components/Pages/Marketing/MarketingNav.razor.rz.scp.css */
/* The Marketing area's own rail, on the same plate the account menu uses: a boxed column of quiet
   entries with the open one on the soft accent. Deliberately not the topbar's nav, whose active
   underline is drawn for a horizontal bar and lands on whatever follows it. */

.marketing-nav[b-7n4adghmai] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.marketing-nav a[b-7n4adghmai] {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 500;
}

.marketing-nav a:hover[b-7n4adghmai] {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

/* Where you are: the soft accent plate the account menu and the docs rail already mark with, so the
   blue names the entry instead of becoming the loudest surface on the page. */
.marketing-nav a.is-current[b-7n4adghmai] {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] .marketing-nav a.is-current[b-7n4adghmai] {
    background: var(--surface-2);
}
/* /Components/Pages/Marketing/Users.razor.rz.scp.css */
/* Marketing admin, audience explorer + account list. Two boxed panels: the filter row that
   recomputes the segment, the two numbers it answers with, and the searchable table under it. */

.marketing-panel[b-508m83reyk] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.1rem 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}

.marketing-panel > h3:first-child[b-508m83reyk] {
    margin-top: 0;
}

/* What a panel says about itself reads at a text measure, not across the whole panel, and the
   line under a title belongs to that title rather than to the block after it. */
.marketing-panel p.muted[b-508m83reyk] {
    max-width: 68ch;
}

.marketing-panel > h3 + p.muted[b-508m83reyk] {
    margin-top: -0.35rem;
}

/* One row of controls that ends in the button applying them, so the button reads as the
   row's verb instead of floating under it. */
.audience-filters[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.audience-filters label[b-508m83reyk] {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.audience-filters label.checkbox[b-508m83reyk] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.3rem;
    color: var(--text);
    font-size: 0.9rem;
}

.audience-counts[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin: 1.25rem 0 0.35rem;
}

.audience-counts > div[b-508m83reyk] {
    display: grid;
    gap: 0.1rem;
}

/* The number is the answer the screen exists for: it carries the weight, the caption under
   it stays quiet. Tabular figures so the two counts line up digit for digit. */
.count[b-508m83reyk] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* The account table is the widest block on the page and the column beside the area rail is not
   elastic, so the overflow belongs to the table rather than to the page. */
.table-scroll[b-508m83reyk] {
    overflow-x: auto;
    /* A cell that would have to break "Not granted" over two lines widens the table instead, and
       the container scrolls. */
    white-space: nowrap;
}

/* The row whose panel is open: a quiet tint, so the eye can walk back from the panel to the
   account it is about without the row shouting. */
.courtesy-open > td[b-508m83reyk] {
    background: var(--surface-2);
}

/* The panel the row opens. It reads at a form's measure rather than the table's, and it is boxed
   against the panel it sits in so its edge says where the account's own decisions start. */
.courtesy-panel[b-508m83reyk] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 1rem 1.15rem 1.15rem;
    margin-top: 1.25rem;
    max-width: 46rem;
    /* The table above sets nowrap for its own cells; sentences here wrap like sentences. */
    white-space: normal;
}

.courtesy-panel > h4:first-child[b-508m83reyk] {
    margin-top: 0;
}

.courtesy-panel p.muted[b-508m83reyk] {
    max-width: 68ch;
}

/* The terms in force, as label/value pairs that line up down the left. */
.courtesy-facts[b-508m83reyk] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1.25rem;
    margin: 1rem 0;
}

.courtesy-facts dt[b-508m83reyk] {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.courtesy-facts dd[b-508m83reyk] {
    margin: 0;
}

/* One row of fields ending in the verb that applies them, the same shape as the filter row. */
.courtesy-form[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.courtesy-form label[b-508m83reyk] {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.courtesy-form input[b-508m83reyk] {
    max-width: 12rem;
}

.search-form[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-form input[type="text"][b-508m83reyk] {
    flex: 1 1 260px;
    min-width: 0;
}

.pager[b-508m83reyk] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}