/* Opt-in presentation for complete pages that sit outside the main-v3 shell. */
.standalone-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--spacewalk-theme-blue-rgb), 0.14), transparent 26rem),
        radial-gradient(circle at 88% 82%, rgba(var(--spacewalk-theme-orange-rgb), 0.1), transparent 24rem),
        linear-gradient(135deg, #f8fafc 0%, #f2f6f9 100%);
}

.standalone-page-panel {
    max-width: 42rem;
}

/* Three related personas need more room than Bootstrap's standard container allows on wide screens. */
.local-test-login-container {
    max-width: 90rem;
}

/* The whole persona control is clickable, so its hover and focus treatment must read like an action. */
.standalone-action-card {
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.standalone-action-card:not(:disabled):hover,
.standalone-action-card:not(:disabled):focus-visible {
    box-shadow: 0 0.3rem 0.9rem rgba(var(--spacewalk-theme-blue-rgb), 0.16);
    transform: translateY(-1px);
}

.standalone-action-card:disabled {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    opacity: 1;
}

/* Related personas share a row when there is enough width to keep each card readable. */
.local-test-account-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

/* Keep persona logos inside the card's existing text area instead of adding a taller header row. */
.local-test-account-logo {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    background: var(--bs-body-bg);
}

@media (min-width: 768px) {
    .local-test-account-group[data-account-count="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .local-test-account-group[data-account-count="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .standalone-action-card {
        transition: none;
    }
}