/* The integration setup pages — every page-own rule those pages used to carry
   in their inline <style> blocks (moved 2026-09-03; only the class names
   changed, onto the integrations- charter prefix). What stays behind in the
   template partials is the look copied from the forms plugin's public-form.css
   (.wizard-*, .booking-payment__*, .public-form__section-*) — those class
   names are a contract with the plugin, and the prefix gate only lets charter
   names into this directory. Loaded from base.html after every other sheet,
   matching the old inline-block cascade position. */

/* One centered column for every integration setup page — Ramp's wizard and
   connected view, Planning Center, the generic setup wizard, and the two
   QuickBooks pages. Every section shares this width so their edges line up,
   and each page opts in by naming itself here rather than declaring its own,
   so a new page cannot quietly land on a different width.

   public-form.css defines --color-primary, but the admin shell never loads
   it, so the copied .booking-payment__* and wizard-step rules in the setup
   partials would fall back to a hardcoded blue. Point --color-primary at the
   brand token here so selected cards, the current-step label, and card focus
   rings all render on-brand. */
.integrations-ramp-page,
.integrations-pco-setup,
.integrations-setup,
.integrations-qbk-page,
.integrations-slack-page {
    max-width: 820px;
    margin-inline: auto;
    --color-primary: var(--color-action);
}


/* ---- Ramp connect wizard + connected view ---- */

/* Inputs fill the card and read white, not the page's grey-50 fill. Focus is
   ink-tinted (page-scoped) so the shared purple focus ring never shows
   here. main.css owns the global focus behavior — this only overrides it
   inside .integrations-ramp-page. */
.integrations-ramp-page .global-form-control-modern,
.integrations-slack-page .global-form-control-modern {
    width: 100%;
    background: var(--color-card-bg);
}
.integrations-ramp-page .global-form-control-modern:hover,
.integrations-slack-page .global-form-control-modern:hover {
    background: var(--color-card-bg);
}
.integrations-ramp-page .global-form-control-modern:focus,
.integrations-slack-page .global-form-control-modern:focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px var(--ink-alpha-15);
    background: var(--color-card-bg);
}

/* Centered Ramp identity header — the real Ramp wordmark stands alone as the
   page title, above the step dots on every wizard step. The wordmark already
   carries the name, so there's no separate heading text beside it. Replaces
   the old breadcrumb and page title. */
.integrations-ramp-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--spacing-smd);
}
.integrations-ramp-page-header__mark {
    display: block;
    height: 26px;
    width: auto;
}

/* Connected view: one card telling one story, top to bottom. Sections are split by
   quiet top borders rather than by more cards. */
.integrations-ramp-connected {
    padding: var(--spacing-lg);
}

/* Header row: wordmark on the left, both badges and the Manage kebab on the right. */
.integrations-ramp-connected__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-smd);
}
.integrations-ramp-page-header--inline {
    margin: 0;
    justify-content: flex-start;
}
.integrations-ramp-connected__badges {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
}

/* Status line — one plain sentence plus a quiet meta line. Replaces the old
   pending banner and the always-"Healthy" health card. */
.integrations-ramp-status__line {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text);
}
.integrations-ramp-status__meta {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Each section below the status block: a quiet rule, then a small title. */
.integrations-ramp-section {
    margin-top: var(--spacing-mdlg);
    padding-top: var(--spacing-mdlg);
    border-top: 1px solid var(--color-border);
}
.integrations-ramp-section__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.integrations-ramp-scope-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

/* Recent activity: a dot, what happened in plain words, and when. */
.integrations-ramp-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}
.integrations-ramp-activity__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}
.integrations-ramp-activity__row + .integrations-ramp-activity__row {
    border-top: 1px solid var(--color-grey-100);
}
.integrations-ramp-activity__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
}
.integrations-ramp-activity__dot--good {
    background: var(--color-success);
}
.integrations-ramp-activity__dot--problem {
    background: var(--color-warning);
}
.integrations-ramp-activity__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.integrations-ramp-activity__when {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Connection details: a read-only label/value list. */
.integrations-ramp-details {
    margin: 0;
}
.integrations-ramp-details__row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    padding: var(--spacing-xsm) 0;
}
.integrations-ramp-details__label {
    flex: 0 0 10rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.integrations-ramp-details__value {
    margin: 0;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.integrations-ramp-connected__foot {
    margin-top: var(--spacing-mdlg);
    padding-top: var(--spacing-mdlg);
    border-top: 1px solid var(--color-border);
}

.integrations-ramp-env-cards {
    margin-bottom: var(--spacing-md);
}

/* Numbered "how to get your keys" steps — a plain numbered list (no box).
   Sized down a touch with a snug line-height and row gap so the six steps read
   as clear steps while staying compact enough to share the row with the key
   fields (see .integrations-ramp-keys-grid) and clear a laptop viewport. */
.integrations-ramp-setup-steps {
    padding-left: var(--spacing-mdlg);
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.integrations-ramp-setup-steps > li + li {
    margin-top: var(--spacing-xs);
}

/* The scopes for step 4, one per line so each is easy to tick off in Ramp. */
.integrations-ramp-scope-list {
    list-style: none;
    padding-left: 0;
    margin: var(--spacing-xsm) 0 0;
}
.integrations-ramp-scope-list > li + li {
    margin-top: var(--spacing-xs);
}

/* Desktop: the setup steps sit in the left column, the two key fields in the
   right, so the tall instructions no longer stack on top of the inputs. The
   columns start at the same top edge (align-items: start) and the divider
   reinforces "read left, fill right". */
.integrations-ramp-keys-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-mdlg);
}
@media (min-width: 768px) {
    .integrations-ramp-keys-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: var(--spacing-xl);
        align-items: start;
    }
    .integrations-ramp-keys-grid .integrations-ramp-keys-fields {
        padding-left: var(--spacing-xl);
        border-left: 1px solid var(--color-border);
    }
}

/* The Match step + Creatives drawer share panel (.integrations-ramp-match-*) lives in
   main.css, not here: the drawer opens on the Creatives page, which loads
   main.css but not this wizard-only file, so the two doors would render the
   same partial with different styling. main.css is the one stylesheet both
   surfaces load. */


/* ---- Planning Center setup ---- */

/* The wordmark header. Ramp's header rule says the same thing, and it
   stays Ramp's: its connected card needs a left-aligned modifier no other
   page wants, so sharing the base rule would mean renaming it everywhere
   Ramp draws it. Eight lines is the cheaper copy. */
.integrations-pco-setup__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--spacing-smd);
}
.integrations-pco-setup__mark {
    display: block;
    height: 30px;
    width: auto;
}

/* Role matching: the role's name and the team it becomes, on one line, so
   the pairing reads as a pairing rather than as a stack of labels above a
   stack of pickers. The name column is fixed so every arrow lines up — a
   column sized to the longest role name would move with the org's own
   wording. Below the breakpoint the two stack, which is the only shape a
   phone has room for. */
.integrations-pco-setup__role {
    display: grid;
    grid-template-columns: 15rem 1fr;
    align-items: center;
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-smd);
}
.integrations-pco-setup__role-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0;
    min-width: 0;
}
/* The mark on a row the page filled in itself. Under the picker rather than
   beside the name, because what it is about is the choice — and pulled back
   up because the grid's own gap already sits between them. */
.integrations-pco-setup__role-hint {
    grid-column: 2;
    margin-top: -0.5rem;
}
@media (max-width: 575.98px) {
    .integrations-pco-setup__role {
        grid-template-columns: 1fr;
        gap: var(--spacing-xsm);
    }
    .integrations-pco-setup__role-hint {
        grid-column: 1;
        margin-top: -0.1rem;
    }
}


/* ---- QuickBooks account mapping + match people ---- */

/* The quiet way back to the connection page, above the lockup. */
.integrations-qbk-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin-bottom: var(--spacing-smd);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}
.integrations-qbk-back:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* Centered QuickBooks lockup — the mark plus the name as the page title,
   the way the Ramp wordmark stands alone on its pages. The name rides
   along because the QuickBooks asset is a bare mark, not a wordmark. */
.integrations-qbk-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-mdlg);
}
.integrations-qbk-page-header__mark {
    display: block;
    height: 28px;
    width: 28px;
}
.integrations-qbk-page-header__name {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}


/* Rows split one card with quiet top borders, the way the Ramp match
   panel and connected card do — not a bordered box per row. */
.integrations-qbk-rows > .integrations-qbk-row {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
}
.integrations-qbk-rows > .integrations-qbk-row:first-child {
    border-top: 0;
    padding-top: var(--spacing-xs);
}
.integrations-qbk-rows > .integrations-qbk-row:last-child {
    padding-bottom: 0;
}


/* ---- Generic integration setup wizard + complete page ---- */

/* Centered identity header — the service's own mark stands alone as the
   page title, above the step dots. The mark carries the name, so there is
   no separate heading text beside it. */
.integrations-setup__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--spacing-smd);
}
.integrations-setup__mark {
    display: block;
    height: 30px;
    width: auto;
}

.integrations-setup-installed-check {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--color-success);
}


/* ---- Slack custom bot ---- */

/* The Slack page wears Ramp's layout pieces (keys grid, setup steps, connected
   card, details list) so the two setup pages read as one product. Only the
   lockup is its own: the Slack asset is a bare mark, so the name rides beside
   it the way QuickBooks does. The --inline form sits left in the card head. */
.integrations-slack-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-mdlg);
}
.integrations-slack-page-header--inline {
    justify-content: flex-start;
    margin: 0;
}
.integrations-slack-page-header__mark {
    display: block;
    height: 26px;
    width: 26px;
}
.integrations-slack-page-header__name {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* The Create app in Slack button, under step 1. */
.integrations-slack-step-action {
    margin: var(--spacing-xsm) 0 var(--spacing-xs);
}