/* Phone and tablet login layout; authentication and desktop tokens stay intact. */
@media (max-width: 768px) {
    /* Auth-page navigation keeps phone-sized hit areas without hiding actions. */
    .public-app:has(.p-role-login, .p-auth-page) > .site-header .brand {
        min-height: 44px;
    }

    .public-app:has(.p-role-login, .p-auth-page) > .site-header .header-actions > a {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .public-app:has(.p-role-login, .p-auth-page) > .site-header .header-actions > a:not(.pale) {
        display: inline-flex;
    }

    .public-app:has(.p-role-login, .p-auth-page) > .site-header .menu-toggle {
        display: inline-grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .public-app:has(.p-role-login, .p-auth-page) > .site-header .public-nav.open a {
        min-width: 44px;
        min-height: 44px;
    }

    .public-app .p-auth-page .p-auth-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
        min-width: 0;
        height: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    .public-app .p-auth-page .p-auth-form > .p-btn,
    .public-app .p-auth-page .p-auth-container > .p-btn {
        min-height: 46px;
    }

    .public-app .p-auth-page .p-auth-register > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .public-app .p-role-login {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .public-app .p-role-login-main {
        min-width: 0;
        padding: 24px 28px 32px;
    }

    .p-role-login .p-role-login-back {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 0;
    }

    .p-role-login .p-role-login-inner {
        width: 100%;
        max-width: 500px;
        min-width: 0;
        margin: 24px auto 0;
    }

    .p-role-login .p-role-login-brand {
        margin: 0 0 22px;
    }

    .p-role-login .p-role-login-inner > h1 {
        font-size: 31px;
        line-height: 1.22;
        font-weight: 700;
        letter-spacing: -1.1px;
        overflow-wrap: anywhere;
    }

    .p-role-login .p-role-login-description {
        margin: 12px 0 22px;
        font-size: 13px;
        line-height: 1.7;
    }

    .p-role-login .p-role-login-tabs > * {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 44px;
    }

    .p-role-login .p-role-login-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        font-size: 16px;
        line-height: 1.5;
    }

    .p-role-login .p-role-login-form > .p-btn {
        width: 100%;
        min-height: 46px;
    }

    .p-role-login .p-role-login-help {
        align-items: center;
    }

    .p-role-login .p-role-login-help > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .p-role-login .p-role-demo-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .p-role-login .p-role-demo-card,
    .p-role-login .p-role-demo-card:last-child {
        grid-column: auto;
        min-height: 75px;
        padding: 12px;
    }

    .p-role-login .p-role-demo-copy {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .p-role-login .p-role-demo-copy small,
    .p-role-login .p-role-demo .p-role-demo-notice {
        font-size: 11px;
        line-height: 1.65;
    }

    .p-role-login .p-role-login-error,
    .p-role-login .p-role-demo-status {
        overflow-wrap: anywhere;
    }

    .p-role-login .p-role-login-intro {
        display: block;
        min-width: 0;
        padding: 32px 28px;
    }

    .p-role-login .p-role-login-intro > div {
        width: 100%;
        max-width: 500px;
        min-width: 0;
        margin: 0 auto;
    }

    .p-role-login .p-role-login-intro h2 {
        margin-bottom: 16px;
        font-size: 26px;
        line-height: 1.32;
        font-weight: 700;
        letter-spacing: -.8px;
    }

    .p-role-login .p-role-login-intro > div > p {
        font-size: 13px;
        line-height: 1.75;
    }

    /* Copy stays above the photo so narrow crops never cover either. */
    .p-role-login .p-role-login-intro::after {
        display: none;
    }

    .p-role-login .p-role-login-image {
        display: block;
        width: 100%;
        max-width: 100%;
        position: static;
        inset: auto;
        z-index: auto;
        height: clamp(220px, 56vw, 280px);
        max-height: none;
        margin: 20px 0 0;
        object-fit: cover;
        object-position: center;
        filter: none;
        opacity: 1;
    }
}

@media (max-width: 380px) {
    .public-app .p-role-login-main,
    .p-role-login .p-role-login-intro {
        padding-left: 24px;
        padding-right: 24px;
    }

    .p-role-login .p-role-login-inner > h1 {
        font-size: 29px;
    }
}

@media (max-width: 340px) {
    .public-app:has(.p-role-login, .p-auth-page) > .site-header {
        gap: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .public-app:has(.p-role-login, .p-auth-page) > .site-header .header-actions {
        gap: 4px;
    }

    .public-app .p-role-login-main,
    .p-role-login .p-role-login-intro {
        padding-left: 20px;
        padding-right: 20px;
    }
}