/*
 * Mobile / tablet access messaging. Signup is deliberately NOT restricted —
 * anyone can create an account from any device; these screens only keep
 * mobile browsers out of the app itself. Consumers:
 *   - the login page (login_template.html): raw static file <link>ed from
 *     optassets, after signup-login-tokens.css which provides the --font-* and
 *     --color-* tokens used below
 *   - the app: bundled into production.css via the account_setup component,
 *     styling the post-setup splash (access_message.ejs) and the app shell's
 *     --deny-app-access gate (initial.html)
 *
 * Breakpoints per spec:
 *   - Under 600px (mobile): a full-screen, non-dismissable message replaces the
 *     page and points users at desktop or the mobile apps.
 *   - 600px to 1024px (tablet): the same full-screen message shows tablet copy
 *     with a "Continue" primary button that dismisses it, so tablet users are
 *     not blocked.
 * Layout: logo on a soft gray page, a centered white card with the message and
 * actions, and a "Download Ontraport Mobile" strip pinned to the bottom.
 * Elements marked mobile-access--mobile-only / --tablet-only swap per breakpoint.
 */

.mobile-access__overlay {
    display: none;
}

.mobile-access__logo {
    width: 200px;
    margin-top: 24px;
    flex-shrink: 0;
}

.mobile-access__card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(24, 24, 25, 0.06);
    padding: 48px 28px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    text-align: center;
}

.mobile-access__title {
    font-family: var(--font-heading, 'Sora', sans-serif);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--color-text-dark, #181819);
    margin: 0 0 24px;
}

.mobile-access__subtitle {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: var(--color-text-medium, #5a5a5b);
    margin: 0;
}

.mobile-access__subtitle + .mobile-access__subtitle {
    margin-top: 20px;
}

/* Stacked action buttons; gap ignores display:none breakpoint-swapped siblings */
.mobile-access__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.mobile-access__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: var(--font-heading, 'Sora', sans-serif);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--transition-base, 200ms ease), transform var(--transition-base, 200ms ease);
}

.mobile-access__button--primary {
    background-color: var(--color-primary, #1285ff);
    box-shadow: var(--shadow-primary, 0 4px 14px #1285ff59);
    color: #ffffff;
}

.mobile-access__button--primary:hover {
    background-color: var(--color-primary-light, #4da3ff);
    box-shadow: var(--shadow-primary-hover, 0 6px 20px #1285ff73);
    transform: translateY(-2px);
}

.mobile-access__button--secondary {
    background-color: #ffffff;
    border: 1px solid var(--color-border-light, #e8e9ea);
    color: var(--color-text-dark, #181819);
}

.mobile-access__button--secondary:hover {
    box-shadow: 0 4px 14px rgba(24, 24, 25, 0.08);
    transform: translateY(-2px);
}

/* The host pages (the app and the signup wizard) style bare anchors with their own
   link color and underline; pin the button text treatment across all link states. */
.mobile-access__overlay a.mobile-access__button,
.mobile-access__overlay a.mobile-access__button:link,
.mobile-access__overlay a.mobile-access__button:visited,
.mobile-access__overlay a.mobile-access__button:hover,
.mobile-access__overlay a.mobile-access__button:focus,
.mobile-access__overlay a.mobile-access__button:active {
    text-decoration: none;
}

.mobile-access__overlay a.mobile-access__button--primary,
.mobile-access__overlay a.mobile-access__button--primary:link,
.mobile-access__overlay a.mobile-access__button--primary:visited,
.mobile-access__overlay a.mobile-access__button--primary:hover,
.mobile-access__overlay a.mobile-access__button--primary:focus,
.mobile-access__overlay a.mobile-access__button--primary:active {
    color: #ffffff;
}

.mobile-access__overlay a.mobile-access__button--secondary,
.mobile-access__overlay a.mobile-access__button--secondary:link,
.mobile-access__overlay a.mobile-access__button--secondary:visited,
.mobile-access__overlay a.mobile-access__button--secondary:hover,
.mobile-access__overlay a.mobile-access__button--secondary:focus,
.mobile-access__overlay a.mobile-access__button--secondary:active {
    color: var(--color-text-dark, #181819);
}

.mobile-access__help-text {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-text-medium, #5a5a5b);
    margin: 32px 0 0;
}

/* Works on <a> and <button> alike */
.mobile-access__help-link {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-primary, #1285ff);
    text-decoration: none;
    margin-top: 4px;
}

/* Pinned across link states for the same reason as the buttons above */
.mobile-access__overlay a.mobile-access__help-link,
.mobile-access__overlay a.mobile-access__help-link:link,
.mobile-access__overlay a.mobile-access__help-link:visited,
.mobile-access__overlay a.mobile-access__help-link:focus,
.mobile-access__overlay a.mobile-access__help-link:active {
    color: var(--color-primary, #1285ff);
    text-decoration: none;
}

.mobile-access__help-link:hover,
.mobile-access__overlay a.mobile-access__help-link:hover {
    color: var(--color-primary, #1285ff);
    text-decoration: underline;
}

/* "Download Ontraport Mobile" heading with divider lines on both sides */
.mobile-access__download-text {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-heading, 'Sora', sans-serif);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-text-dark, #181819);
    margin-bottom: 20px;
}

.mobile-access__download-text::before,
.mobile-access__download-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border-light, #e8e9ea);
}

.mobile-access__store-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.mobile-access__store-buttons a {
    display: block;
    line-height: 0;
}

.mobile-access__store-buttons img {
    width: 145px;
    height: 43px;
    object-fit: contain;
}

/* Mobile + tablet: full-screen access message over the page */
@media only screen and (max-width: 1024.98px) {
    .mobile-access__overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f2f4f6;
        padding: 24px;
        box-sizing: border-box;
        overflow: auto;
        z-index: 100;
    }

    .mobile-access__main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 24px 0;
    }

    .mobile-access__download {
        flex-shrink: 0;
        width: 100%;
        max-width: 600px;
    }
}

/* Mobile-only sizing and copy */
@media only screen and (max-width: 599.98px) {
    .mobile-access--tablet-only {
        display: none;
    }

    .mobile-access__card {
        padding: 40px 24px;
    }
}

/* Tablet-only sizing and copy */
@media only screen and (min-width: 600px) {
    .mobile-access--mobile-only {
        display: none;
    }

    .mobile-access__title {
        font-size: 40px;
        line-height: 48px;
    }

    .mobile-access__subtitle {
        font-size: 20px;
        line-height: 32px;
    }
}

/* In-app gate variant (initial.html): closes the loophole where reloading after the
   post-setup splash lands a mobile browser in the app. Only ever shows at mobile
   widths — tablet users are allowed in the app — and sits above the app chrome. */
.mobile-access__overlay--deny-app-access {
    z-index: 99999;
}

@media only screen and (min-width: 600px) {
    .mobile-access__overlay--deny-app-access {
        display: none;
    }
}

/* The first-login setup wizard renders in its own overlay (z-index 300, panes.js) and
   shows its own small-screen messaging, so the gate must stand down while it is up —
   at 99999 it would otherwise cover the setup form and the post-setup access message,
   and neither can escape the wizard's stacking context. InitialController stamps the flag
   on the body so this holds from the first paint, and account_setup.js keeps it in sync
   for the rest of the session. */
body[data-account-setup="1"] .mobile-access__overlay--deny-app-access {
    display: none;
}

/* Logins that are mid-OAuth-flow (MCP clients and other integrations) must work
   from any device — the user is authorizing an integration, not entering the app —
   so the login page suppresses the access message for them (flag set by login.php). */
body[data-oauth-flow="1"] .mobile-access__overlay {
    display: none;
}

/* Set-password logins arrive from welcome and password-reset emails, which are
   commonly opened on phones, so they must work from any device. Once the password
   is set, the normal login block and the in-app gate still apply. The
   "set-password" screen is only ever set server-side (FirstLoginController). */
body[data-screen="set-password"] .mobile-access__overlay {
    display: none;
}