/* Ordinary pages approved for the dashboard-style outer shell, Oct 2026.
 * This file only targets templates carrying .spx-unified-shell. Their inner
 * cards, content, and page-specific controls retain their existing styles. */

.emt-page.spx-unified-shell,
.em-history-page.spx-unified-shell,
.busted-container.spx-unified-shell,
.spx-payment-success-container.spx-unified-shell,
.spx-payment-error-container.spx-unified-shell,
.spx-update-payment-shell.spx-unified-shell,
.marketing-homepage.spx-unified-shell,
.spx-custom-login-wrapper.spx-unified-shell,
.spx-page .spx-container.spx-unified-shell,
.tools-landing-page .wrap.spx-unified-shell {
    background: var(--spx-panel-bg);
    border-radius: var(--spx-radius-panel);
    box-sizing: border-box;
    margin: var(--spx-space-6) auto var(--spx-space-10);
    width: calc(100% - var(--spx-space-6));
}

/* The two EM pages already set the right content widths and card styling. */
.emt-page.spx-unified-shell,
.em-history-page.spx-unified-shell {
    padding: var(--spx-space-8);
}

/* Today has an unboxed explanation between two cards. Give that text its
 * own readable inner surface, matching the History page's navy treatment. */
.emt-page.spx-unified-shell .emt-explainer {
    background: var(--spx-card-bg);
    border: 1px solid var(--spx-border-amber);
    border-radius: var(--spx-radius-lg);
    box-shadow: var(--spx-shadow-card);
    padding: var(--spx-space-8);
}
.emt-page.spx-unified-shell .emt-explainer p:last-child {
    margin-bottom: 0;
}

/* FAQ and Tools keep their existing cards, but the header belongs inside
 * the same translucent panel as the cards. */
.spx-page .spx-container.spx-unified-shell {
    padding-left: var(--spx-space-8);
    padding-right: var(--spx-space-8);
}
.tools-landing-page .wrap.spx-unified-shell {
    max-width: var(--spx-container-wide);
    padding: var(--spx-space-8);
}

.busted-container.spx-unified-shell {
    padding: var(--spx-space-8);
}

/* Both the success and error branches use the same page shell. */
.spx-payment-success-container.spx-unified-shell,
.spx-payment-error-container.spx-unified-shell {
    max-width: var(--spx-container-md);
    min-height: 0;
    padding: var(--spx-space-8);
}

.spx-update-payment-shell.spx-unified-shell {
    max-width: 700px;
    padding: var(--spx-space-8);
}

/* Renew and Upgrade share a stylesheet with other marketing pages. The
 * opt-in class constrains these two routes without changing the homepage. */
.marketing-homepage.spx-unified-shell {
    /* homepage-marketing.css explicitly forces this class full-width with
       !important; these two opt-in rules only affect Renew and Upgrade. */
    max-width: var(--spx-container-wide) !important;
    width: calc(100% - var(--spx-space-6)) !important;
    min-height: 0;
    padding: var(--spx-space-8);
}
.marketing-homepage.spx-unified-shell .hero-section {
    padding-top: var(--spx-space-8);
}

.spx-custom-login-wrapper.spx-unified-shell {
    max-width: 500px;
    padding: var(--spx-space-8);
}

@media (max-width: 600px) {
    .emt-page.spx-unified-shell,
    .em-history-page.spx-unified-shell,
    .busted-container.spx-unified-shell,
    .spx-payment-success-container.spx-unified-shell,
    .spx-payment-error-container.spx-unified-shell,
    .spx-update-payment-shell.spx-unified-shell,
    .marketing-homepage.spx-unified-shell,
    .spx-custom-login-wrapper.spx-unified-shell,
    .spx-page .spx-container.spx-unified-shell,
    .tools-landing-page .wrap.spx-unified-shell {
        padding: var(--spx-space-5);
    }
    .emt-page.spx-unified-shell .emt-explainer {
        padding: var(--spx-space-5);
    }
}