/*
* Users Common
*/
.users {
    margin-bottom: calc(env(safe-area-inset-bottom) + 100px);
}

/* >>> All common components that basically need some margin :$ <<< */
.users-lifecycle,
.users-manage-memberships__search,
.users-manage-payments__search,
.users-manage-payment-methods__search,
.users-manage-business-profiles__search,
.users-tracking-benchmarks__search,
.users-tracking-benchmark-create,
.users-tracking-benchmark-performances__search {
    margin-top: 16px;
    margin-bottom: 12px;
    padding: 0 16px;
}

.users-manage-memberships__results,
.users-manage-plans__results {
    margin-top: 16px;
}

/*
 * Account Lifecycle Pages
 */

.users-lifecycle {
    display: flex;
    justify-content: center;
}

/*
 * Auth Pages (login, sign-in code, account recovery, password reset)
 *
 * Chrome-free centred column — base.html suppresses the header and footer for these
 * views, so the shell owns the viewport. The flex chain from .base__content-container
 * down to <main> is a plain block by default, so bridge it the way the check-in page
 * does (base.css) to get a height for the column to centre against.
 */
.base__content-container:has(.users-auth) > div,
.base__content-container:has(.users-auth) main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
}

/*
 * Fields sit directly on the canvas here rather than inside a card, and .common-form-input
 * fills with that same canvas — so they'd read as page, not field. Lift them to surface:
 * the card's role passes to the input itself once there's no card to recess it against.
 */
.users-auth .common-form-input {
    background-color: var(--color-olympia-surface);
}

/*
 * iOS Safari resolves 100vh against the toolbar-hidden height, which is taller than what's
 * on screen — so a centred panel sits below the visible centre. Every other page is
 * top-aligned and just absorbs the overflow as scroll; centring is what exposes it. dvh
 * tracks the visible viewport instead. Scoped, so no other page's scroll behaviour moves.
 */
.base__container:has(.users-auth) {
    min-height: 100dvh;
}

.users-auth {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    padding: 32px 16px calc(env(safe-area-inset-bottom) + 24px);
}

/* Auto margins centre the panel in whatever space the links row leaves. */
.users-auth__panel {
    margin: auto;
    width: 100%;
    max-width: 400px;
}

/* Way out of a page that has no header or footer to leave by. */
.users-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
    padding-top: 24px;
}

/* Page CTA. Matches the .common-form-input--lg field height so the two stack as one column. */
.users-auth__submit {
    display: block;
    width: 100%;
    /* 11px, not the field's 10px: the button has no border to make up the last 2px. */
    padding: 11px 16px;
    border-radius: 0.5rem;
    background-color: var(--color-olympia-emerald);
    color: var(--color-olympia-emerald-on);
    font-size: var(--text-row);
    line-height: var(--text-row--line-height);
    font-weight: 500;
    text-align: center;
    transition: background-color 0.15s ease;
}

.users-auth__submit:hover {
    background-color: var(--color-olympia-emerald-hover);
}

.users-auth__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-olympia-surface), 0 0 0 4px var(--color-olympia-emerald-focus);
}

/*
 * Manage Payment Methods
 */

.users-manage-payment-method-create__form {
    margin-top: 16px;
}

.users-manage-payment-method-create__direct-debit-fields--hidden,
.users-manage-payment-method-create__pricing--hidden {
    display: none;
}

/* --break-screen-small */
@media (min-width: 1024px) {
    .users-manage-payment-method-create__form {
        margin-top: 0;
    }
}


/*
 * Manage Payments
 */
.users-manage-payments__results {
    margin-top: 8px;
}

.users-manage-payment-methods__results {
    margin-top: 8px;
}

/*
 * Manage Business Profiles
 */
.users-manage-business-profiles__results {
    margin-top: 8px;
}

/*
 * Tracking
 */
.users-tracking-benchmarks__results {
    margin-top: 8px;
}
.users-tracking-benchmark-performances__results {
    margin-top: 8px;
}