/* The shared surface stylesheet: the card, switch rows, action rows, list states, plan gate, docs layout and
   busy state every customer-facing page draws the same way as the account pages. First used by the User API
   pages (Connected Apps, Connected App Requests, Connect an app, the developer page, the portfolio link page); loaded
   by a page after css-set.php. The contract is .claude/skills/building-user-surfaces. */

:root {
    --surface-page: #11111d;
    --surface-card: #222235;
    --surface-card-head: #2c2c42;
    --surface-line: rgba(255, 255, 255, 0.08);
    --surface-line-strong: rgba(255, 255, 255, 0.16);
    --surface-text: #eff0f6;
    --surface-dim: #8d97ab;
    --surface-primary: #1266f1;
    --surface-danger: #ff5b6a;
    --surface-success: #2fd986;
    --surface-warning: #ffb547;
    --surface-primary-tint: rgba(18, 102, 241, 0.12);
    --surface-primary-tint-strong: rgba(18, 102, 241, 0.18);
    --surface-primary-ring: rgba(18, 102, 241, 0.35);
}

.surface-page {
    max-width: 960px;
}

.surface-page .page-lead {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

/* Cards: the account-page card, with a header row that carries the icon and the title. */
.darkmode .surface-card {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-line);
    border-radius: 10px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}

.surface-card > .card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background-color: var(--surface-card-head) !important;
    border-bottom: 1px solid var(--surface-line);
    border-radius: 10px 10px 0 0;
    padding: 0.8rem 1.25rem;
}

.surface-card > .card-header .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.surface-card > .card-header .card-title i,
.surface-card > .card-header .card-title .svg-inline--fa {
    color: var(--surface-primary);
    margin-right: 0.45rem;
    width: 1.25rem;
    text-align: center;
}

.surface-card > .card-header .surface-card-note {
    margin-left: auto;
    color: var(--surface-dim);
    font-size: 0.85rem;
}

/* One connection (an app or an API client) inside the Connected apps and API clients cards. */
.surface-grant + .surface-grant {
    border-top: 1px solid var(--surface-line);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.surface-grant-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.surface-grant-name {
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-word;
}

.surface-app-logo {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    vertical-align: -0.2em;
}

.surface-grant-meta {
    color: var(--surface-dim);
    font-size: 0.85rem;
}

.surface-grant-meta .badge {
    vertical-align: baseline;
}

.surface-grant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Monospace values: ids, secrets, the MCP address. */
.surface-mono {
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    word-break: break-all;
}

/* Permission groups: a product heading, then one switch row per permission. Two columns from md up. */
.surface-group {
    margin-top: 1rem;
}

.surface-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--surface-dim);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.surface-group-title i,
.surface-group-title .svg-inline--fa {
    width: 1rem;
    text-align: center;
}

.surface-switches {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem 1.5rem;
}

@media (min-width: 768px) {
    .surface-switches {
        grid-template-columns: 1fr 1fr;
    }

    .surface-switches.surface-switches-one {
        grid-template-columns: 1fr;
    }
}

.surface-switch {
    padding: 0.35rem 0;
}

.surface-switch .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.surface-switch .form-check-input {
    flex-shrink: 0;
    float: none;
    width: 2.3rem;
    height: 1.2rem;
    margin: 0.1rem 0 0;
}

.surface-switch .form-check-input,
.approval-group-head .form-check-input,
.approval-row-head .form-check-input {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--surface-line-strong);
}

.surface-switch .form-check-input:checked,
.approval-group-head .form-check-input:checked,
.approval-group-head .form-check-input:indeterminate,
.approval-row-head .form-check-input:checked {
    background-color: var(--surface-primary);
    border-color: var(--surface-primary);
}

.surface-switch .form-check-input:focus,
.approval-group-head .form-check-input:focus,
.approval-row-head .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(18, 102, 241, 0.35);
}

.surface-switch .form-check.form-switch .form-check-label {
    display: block;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    line-height: 1.35;
}

.surface-switch .form-check-input:disabled + .form-check-label {
    opacity: 0.55;
    cursor: default;
}

/* The confirmation that belongs to a permission sits under it, indented, and only while the permission is on. */
.surface-switch-sub {
    margin-left: 2.9rem;
    margin-top: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-left: 2px solid var(--surface-line-strong);
    font-size: 0.9rem;
}

.surface-switch-sub .form-check-input {
    width: 2rem;
    height: 1.05rem;
}

.surface-switch-sub .form-check-input:checked {
    background-color: var(--surface-warning);
    border-color: var(--surface-warning);
}

.surface-switch-sub .form-check-label {
    color: var(--surface-dim);
}

/* On phones the label is a 44px row with its first line centered (trading-mobile.css), so center these taller switches on it too. */
@media (max-width: 767.98px) {
    .surface-switch .form-check-input:where(:has(+ .form-check-label)) {
        margin-top: calc((44px - 1.2rem) / 2);
    }

    .surface-switch-sub .form-check-input:where(:has(+ .form-check-label)) {
        margin-top: calc((44px - 1.05rem) / 2);
    }
}

/* Account limits: a switch that is on means blocked, so it fills red, never the blue that means allowed. */
.surface-switch-block .form-check-input:checked {
    background-color: var(--surface-danger);
    border-color: var(--surface-danger);
}

.surface-switch-block .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 91, 106, 0.3);
}

.surface-switch-note {
    display: block;
    font-size: 0.8rem;
    color: var(--surface-dim);
}

.surface-switch-block .form-check-input:checked + .form-check-label::after {
    content: "Blocked";
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--surface-danger);
    vertical-align: 0.1em;
}

/* The row of actions at the foot of a form section. */
.surface-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.25rem;
}

/* Empty states: a quiet panel with an icon, not a bare muted line. */
.surface-empty {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--surface-line-strong);
    border-radius: 8px;
    color: var(--surface-dim);
}

.surface-empty i,
.surface-empty .svg-inline--fa {
    margin-top: 0.15rem;
    color: var(--surface-dim);
}

/* The loading state of a section. */
.surface-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--surface-dim);
    padding: 0.5rem 0;
}

/* A button working: the site's small spinner in place of its icon. */
.btn.surface-busy {
    pointer-events: none;
    opacity: 0.75;
}

/* Keep approval reviews inside the current viewport while their content scrolls. */
#realtimeAlertModal.api-approval-modal .modal-dialog {
    height: calc(100vh - 2 * var(--bs-modal-margin, 0.5rem));
    height: calc(100dvh - 2 * var(--bs-modal-margin, 0.5rem));
    min-height: 0;
}

#realtimeAlertModal.api-approval-modal .modal-body {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Setting labels wrap between words; value columns retain their overflow protection. */
.api-approval-modal .table tbody > tr > td:first-child {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Multiple bot reviews share the modal chrome and keep decisions outside the scrolling body. */
#realtimeAlertModal.api-approval-batch .modal-body {
    padding: 1rem !important;
}

.api-approval-batch .modal-footer > :not(.api-approval-batch-actions) {
    display: none !important;
}

.api-approval-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.api-enable-count {
    margin-right: auto;
    color: var(--surface-dim);
}

.api-enable-notice {
    margin-bottom: 0.65rem;
}

.api-enable-bots {
    display: grid;
    gap: 1rem 1.5rem;
}

.api-enable-bot {
    min-width: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--surface-line);
}

.api-enable-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.api-enable-select > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.api-enable-select input {
    margin-top: 0;
    flex-shrink: 0;
}

.api-review-compact {
    font-size: 0.875rem;
    line-height: 1.45;
}

.api-review-compact > dl:not(.api-enable-shared-facts),
.api-review-compact .api-review-bot > dl:not(.api-enable-fields) {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    margin: 0 0 0.35rem !important;
    row-gap: 0.15rem;
}

.api-review-compact dl > dt,
.api-review-compact dl > dd {
    width: auto;
    padding: 0;
    margin: 0;
}

.api-review-compact .api-review-bot {
    margin-top: 0.5rem !important;
}

.api-review-compact .api-review-bot-name {
    font-size: 1rem;
    font-weight: 600;
}

.api-review-compact p {
    margin-bottom: 0.4rem;
}

.api-review-compact h6 {
    font-size: 0.875rem;
    margin: 0.5rem 0 0.3rem !important;
}

.api-review-compact .bd-callout {
    padding: 0.45rem 0.6rem;
    margin: 0.4rem 0;
}

.api-enable-fields {
    margin-bottom: 0;
}

.api-enable-fields > div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0;
}

.api-enable-fields dt {
    overflow-wrap: normal;
    word-break: normal;
}

.api-enable-fields dd {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.api-enable-review-note {
    margin-bottom: 0.4rem;
    overflow-wrap: anywhere;
}

.api-enable-callouts,
.api-enable-shared {
    margin-bottom: 0.75rem;
}

.api-enable-shared-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.25rem;
    margin-bottom: 0.35rem;
}

.api-enable-shared-facts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.api-enable-shared-facts dt,
.api-enable-shared-facts dd {
    margin: 0;
}

.api-enable-shared .bd-callout {
    background: transparent;
    border: 0;
    padding: 0;
}

.api-enable-outcome {
    margin: 0.5rem 0 0;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .api-approval-batch-actions .btn {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

@media (min-width: 992px) {
    #realtimeAlertModal.api-approval-batch .modal-dialog {
        width: min(1140px, calc(100vw - 64px));
        max-width: min(1140px, calc(100vw - 64px));
    }

    .api-enable-bots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tables inside cards. */
.surface-card .table {
    margin-bottom: 0;
    color: var(--surface-text);
}

.surface-card .table > :not(caption) > * > * {
    border-bottom-color: var(--surface-line);
    padding: 0.55rem 0.6rem;
}

.surface-card .table thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--surface-dim);
    border-bottom: 1px solid var(--surface-line-strong);
    white-space: nowrap;
}

.surface-card .dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem;
}

.surface-card .dataTables_wrapper .dataTables_info {
    color: var(--surface-dim);
    font-size: 0.85rem;
    padding-top: 0.9rem;
}

/* A refusal that comes with a way forward: the plan gate. */
.surface-gate {
    text-align: center;
    padding: 2rem 1.25rem;
}

.surface-gate > i,
.surface-gate > .svg-inline--fa {
    font-size: 2rem;
    color: var(--surface-dim);
    margin-bottom: 0.75rem;
}

.surface-gate p {
    max-width: 480px;
    margin: 0 auto 1rem;
}

/* Connect an app: the two parties joined, then the form under them. */
.surface-consent-parties {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem 1rem;
}

.surface-consent-party {
    text-align: center;
    min-width: 0;
}

.surface-consent-party-badge {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--surface-line-strong);
    font-size: 1.4rem;
    color: var(--surface-text);
}

.surface-consent-party-badge img,
.surface-consent-party-badge svg {
    width: 2rem;
    height: 2rem;
}

.surface-brand-mark {
    height: 2.25rem;
    width: auto;
}

.surface-consent-party-name {
    font-weight: 600;
    word-break: break-word;
}

.surface-consent-party-sub {
    color: var(--surface-dim);
    font-size: 0.8rem;
    word-break: break-word;
}

.surface-consent-join {
    width: 4.5rem;
    height: 1px;
    position: relative;
    background: linear-gradient(90deg, transparent, var(--surface-line-strong) 20%, var(--surface-line-strong) 80%, transparent);
}

.surface-consent-join i,
.surface-consent-join .svg-inline--fa {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-card);
    color: var(--surface-primary);
    padding: 0 0.3rem;
}

@media (max-width: 575.98px) {
    .surface-consent-join {
        width: 2.5rem;
    }
}

.surface-consent-intro {
    text-align: center;
    color: var(--surface-dim);
    padding: 0 1rem 1rem;
    margin: 0;
}

.surface-consent-intro strong {
    color: var(--surface-text);
}

/* A replace-or-create choice: radio rows with a compact summary of what carries over. */
.surface-choice {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.surface-choice:has(input:checked) {
    border-color: var(--surface-primary);
    background: rgba(18, 102, 241, 0.08);
}

.surface-choice .form-check {
    margin: 0;
}

.surface-choice-summary {
    margin: 0.4rem 0 0 1.6rem;
    color: var(--surface-dim);
    font-size: 0.85rem;
}

.surface-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.surface-chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--surface-line-strong);
    font-size: 0.75rem;
    color: var(--surface-text);
    white-space: nowrap;
}

/* The developer page: a table of contents beside the text from xl up, on top of it below. */
.surface-docs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .surface-docs {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .surface-docs-toc {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        order: 0;
    }

    .surface-docs-body {
        order: 1;
        min-width: 0;
    }
}

.surface-docs-toc {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.75rem 1rem;
    align-self: start;
}

.surface-docs-toc-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--surface-dim);
}

/* Below xl the list is folded behind its title; from xl up it is always open beside the text. */
.surface-docs-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    color: var(--surface-dim);
    text-align: left;
}

.surface-docs-toc-toggle i,
.surface-docs-toc-toggle .svg-inline--fa {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.surface-docs-toc-toggle[aria-expanded="true"] i,
.surface-docs-toc-toggle[aria-expanded="true"] .svg-inline--fa {
    transform: rotate(180deg);
}

.surface-docs-toc ol {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

@media (min-width: 1200px) {
    .surface-docs-toc-toggle {
        pointer-events: none;
    }

    .surface-docs-toc-toggle i,
    .surface-docs-toc-toggle .svg-inline--fa {
        display: none;
    }

    .surface-docs-toc ol.collapse:not(.show) {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-docs-toc-toggle i,
    .surface-docs-toc-toggle .svg-inline--fa {
        transition: none;
    }
}

.surface-docs-toc li {
    padding: 0.15rem 0;
}

.surface-docs-toc li.surface-docs-toc-sub {
    padding-left: 0.9rem;
    font-size: 0.85rem;
}

.surface-docs-toc a {
    color: #d6d7e3;
    text-decoration: none;
    font-size: 0.9rem;
}

.surface-docs-toc a:hover,
.surface-docs-toc a:focus {
    color: #fff;
    text-decoration: underline;
}

.surface-docs-body h2 {
    margin-top: 2.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--surface-line);
    scroll-margin-top: 80px;
}

.surface-docs-body h3 {
    margin-top: 1.5rem;
    scroll-margin-top: 80px;
}

.surface-docs-body p,
.surface-docs-body li {
    max-width: 75ch;
}

.surface-docs-body pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}

.surface-docs-body .table {
    color: var(--surface-text);
}

.surface-docs-body .table td,
.surface-docs-body .table th {
    border-color: var(--surface-line);
    vertical-align: top;
}

.surface-docs-body .table thead th {
    font-size: 0.8rem;
    color: var(--surface-dim);
    font-weight: 600;
    white-space: nowrap;
}

.surface-docs-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

/* Portfolio link: the summary figures as a compact grid. */
.surface-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.surface-figure {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
}

.surface-figure-value {
    font-size: 1.15rem;
    font-weight: 600;
}

.surface-figure-label {
    font-size: 0.8rem;
    color: var(--surface-dim);
}

/* The account settings rail and Find a setting: a sticky column beside the content, styled like the docs table
   of contents, with the search box above the items and the ring a found setting gets on arrival. */
.surface-rail {
    position: sticky;
    top: 70px;
    flex: 0 0 248px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    padding: 0.75rem;
}

.surface-rail-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--surface-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.surface-rail-find {
    position: relative;
    margin-bottom: 0.5rem;
}

.surface-rail-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1050;
    margin-top: 0.25rem;
    background: var(--surface-card);
    border: 1px solid var(--surface-line-strong);
    border-radius: 8px;
}

.surface-rail-result {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--surface-text) !important;
    background: transparent;
    border-color: var(--surface-line);
    text-decoration: none;
}

.surface-rail-result:hover {
    color: var(--surface-text) !important;
    background: rgba(255, 255, 255, 0.05);
}

.surface-rail-result.active {
    color: var(--surface-text) !important;
    background: rgba(18, 102, 241, 0.18);
    border-color: var(--surface-line);
}

.surface-rail-result-where {
    display: block;
    font-size: 0.8rem;
    color: var(--surface-dim);
}

.surface-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.surface-rail-group-start {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--surface-line);
}

.surface-rail-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    color: var(--surface-text) !important;
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
}

.surface-rail-link:hover {
    color: var(--surface-text) !important;
    background: rgba(255, 255, 255, 0.05);
}

.surface-rail-link.active {
    background: rgba(18, 102, 241, 0.18);
    border-left-color: var(--surface-primary);
    font-weight: 600;
}

.surface-rail-link.is-in-view {
    border-left-color: var(--surface-primary);
}

.surface-rail-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(18, 102, 241, 0.35);
}

/* A section that needs attention: a dot at the end of its rail link. The link also carries hidden text, so the
   colour is never the only signal. */
.surface-rail-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
}

.surface-rail-dot.is-danger {
    background: var(--surface-danger);
}

.surface-rail-dot.is-warning {
    background: var(--surface-warning);
}

/* The ring holds, then fades over its last 0.4s; account-find.js removes the class at two seconds. Under reduced
   motion it stays a static ring for the two seconds. */
.surface-find-hit {
    outline: 2px solid var(--surface-primary);
    background: rgba(18, 102, 241, 0.12);
    border-radius: 8px;
    animation: surface-find-fade 2s forwards;
}

@keyframes surface-find-fade {
    0%,
    80% {
        outline-color: var(--surface-primary);
        background-color: rgba(18, 102, 241, 0.12);
    }

    100% {
        outline-color: transparent;
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-find-hit {
        animation: none;
    }
}

/* The step-up modal: the Continue button while it waits. */
#tsStepUpGo .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    margin-right: 0.4rem;
    vertical-align: -0.15em;
}

/* The decision buttons of the approval page stay at the bottom of the screen while the review is read. */
#apiApproveButtons,
.approval-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

#apiApproveButtons {
    padding: 0.75rem 0;
    background: var(--surface-card);
    border-top: 1px solid var(--surface-line);
}

/* Actions awaiting approval on Connected Apps: requests grouped by app and time, a row each with its review under it,
   and a bar pinned to the bottom of the screen that approves or rejects what is ticked. */
.approval-group {
    border: 1px solid var(--surface-line-strong);
    border-radius: 8px;
    margin-bottom: 0.9rem;
}

.approval-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--surface-card-head);
    border-bottom: 1px solid var(--surface-line);
    border-radius: 8px 8px 0 0;
}

.approval-group-title {
    flex: 1 1 12rem;
    min-width: 0;
}

.approval-group-app {
    font-weight: 600;
}

.approval-group-meta {
    margin-left: 0.5rem;
    color: var(--surface-dim);
    font-size: 0.85rem;
}

.approval-group-head .form-check-input,
.approval-row-head .form-check-input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.approval-row-head .form-check-input {
    margin-top: 0.15rem;
}

.approval-group-head .form-check-input:disabled,
.approval-row-head .form-check-input:disabled {
    cursor: default;
    opacity: 0.45;
}

.approval-row {
    border-bottom: 1px solid var(--surface-line);
}

.approval-row:last-child {
    border-bottom: 0;
}

.approval-row-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.approval-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.approval-row-name {
    font-weight: 600;
}

.approval-row-changes {
    margin-top: 0.15rem;
    color: var(--surface-dim);
    font-size: 0.85rem;
}

.approval-row-toggle {
    flex: none;
}

.approval-row-review {
    padding: 0.25rem 0.75rem 0.75rem 2.2rem;
}

.approval-row .approval-row-outcome {
    margin: 0 0.75rem 0.75rem 2.2rem;
}

.approval-row-done .approval-row-name {
    opacity: 0.7;
}

.approval-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--surface-card-head);
    border: 1px solid var(--surface-line-strong);
    border-radius: 8px;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
}

.approval-bar-count {
    font-weight: 600;
}

.approval-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .approval-group-meta {
        display: block;
        margin-left: 0;
    }

    .approval-row-review {
        margin-left: 0;
        padding-left: 0.75rem;
    }

    .approval-row .approval-row-outcome {
        margin-left: 0.75rem;
        padding-left: 0.75rem;
    }
}

/* A satellite page's exit to the account section it came from. */
.surface-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    color: var(--surface-text) !important;
    text-decoration: none;
}

.surface-back-link:hover {
    color: var(--surface-text) !important;
    text-decoration: underline;
}