/* Give the artwork breathing room inside its existing header/login footprint. */
:is(.brand, .public-brand, .auth-brand, .logo-home-link) > img.portal-logo {
    box-sizing: border-box;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    object-position: center;
}

.landing-page .public-brand img.portal-logo {
    height: auto;
}

.topbar .brand > img.portal-logo-mark {
    display: none;
}

/* Four header actions leave too little room for the full wordmark on small phones. */
@media screen and (max-width: 400px) {
    .topbar:has(.top-navigation:not(.is-compact) > .surface-root > :nth-child(4)) .brand {
        min-width: 44px;
    }

    .topbar:has(.top-navigation:not(.is-compact) > .surface-root > :nth-child(4)) .brand > img.portal-logo:not(.portal-logo-mark) {
        display: none;
    }

    .topbar:has(.top-navigation:not(.is-compact) > .surface-root > :nth-child(4)) .brand > img.portal-logo-mark {
        display: block;
        width: 44px;
        height: 50px;
    }
}

/* Keep the image's former flex item dimensions on its clickable wrapper. */
.logo-home-link {
    display: block;
}

.auth-brand > .logo-home-link {
    width: 274px;
    max-width: 100%;
    height: 58px;
}

.auth-brand > .logo-home-link > img.portal-logo {
    display: block;
    width: 100%;
    height: 100%;
}

.auth-shell-admin .auth-brand > .logo-home-link {
    width: min(375px, 100%);
    height: auto;
}

.auth-shell-admin .auth-brand > .logo-home-link > img.portal-logo {
    height: auto;
}

.auth-shell-driver .auth-brand > .logo-home-link {
    width: 320px;
    height: 70px;
}

.auth-shell-master .auth-brand > .logo-home-link {
    display: none;
}

:is(.brand, .public-brand, .logo-home-link):focus-visible {
    outline: 3px solid #8ac8ff;
    outline-offset: 3px;
}

.auth-brand > .logo-home-link:focus-visible {
    outline-offset: -3px;
}

@media (max-width: 700px) {
    .auth-shell-driver .auth-brand {
        right: 18px;
        left: 18px;
        transform: none;
    }

    :is(.auth-shell-admin, .auth-shell-driver, .auth-shell-dispatcher) .auth-brand > .logo-home-link {
        width: calc(100% - 148px);
        max-width: 204px;
        height: 54px;
    }

    .auth-shell-admin .auth-brand > .logo-home-link > img.portal-logo {
        height: 100%;
    }

    .auth-shell-dispatcher .auth-brand > .logo-home-link > img.portal-logo {
        object-position: left center;
    }
}