/* Login page. Loaded after app.css, so these rules win. */
.auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.auth-aside { align-items: center; justify-content: center; padding: 3rem clamp(2rem, 6vw, 5rem); }
.auth-aside__inner { max-width: 460px; width: 100%; }

/* The logo sits on a white plate so any logo stays readable on the dark panel, and it is large. */
.logo-plate {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 22px; padding: 1.1rem 1.6rem; margin-bottom: 2rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}
.logo-plate img { display: block; height: clamp(96px, 16vh, 150px); width: auto; max-width: min(100%, 340px); object-fit: contain; }
.logo-plate .brand-mark { width: 88px; height: 88px; flex: 0 0 88px; font-size: 2.5rem; border-radius: 20px; }

.auth-org { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-dim); margin-bottom: .6rem; }
.auth-aside h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin: 0 0 .75rem; }

/* Phones: the left panel is hidden, so the logo moves above the form. */
.auth-mobile-brand { display: none; text-align: center; margin-bottom: 1.75rem; }
.auth-mobile-brand img { height: 84px; width: auto; max-width: 80%; object-fit: contain; }
.auth-mobile-brand .brand-mark { width: 72px; height: 72px; flex-basis: 72px; font-size: 2rem; border-radius: 16px; margin: 0 auto; }
.auth-mobile-brand__name { margin-top: .6rem; font-weight: 650; font-size: 1.05rem; }

@media (max-width: 991.98px) {
    .auth-mobile-brand { display: block; }
}