/* Authentication is public entrypoint UI and must not depend on a screen stylesheet. */
.login-mode { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: #f7f7f8; }
.login-mode .app-shell { display: none !important; }
.login-mode .login-screen { display: block; }
.login-screen { width: min(100%, 62rem); }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .75fr); overflow: hidden; border: 1px solid #e5e5e5; border-radius: 1.4rem; background: #fff; box-shadow: 0 24px 80px rgb(0 0 0 / .08); }
.login-context { display: flex; min-height: 34rem; flex-direction: column; justify-content: space-between; gap: 3rem; padding: clamp(2rem, 5vw, 4rem); color: #fff; background: #202123; }
.login-context .brand { color: #fff; }
.login-context .brand-mark { color: #202123; background: #fff; }
.login-context .eyebrow { color: #a9a9b2; }
.login-context h1 { max-width: 26rem; margin: .6rem 0 1rem; color: #fff; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; }
.login-context p:not(.eyebrow) { max-width: 28rem; margin: 0; color: #c7c7ce; line-height: 1.6; }
.login-context > small { color: #a9a9b2; }
.login-card { display: grid; align-content: center; gap: 1rem; min-width: 0; padding: clamp(1.5rem, 5vw, 3.25rem); background: #fff; }
.login-card header { display: grid; gap: .25rem; margin-bottom: .35rem; }
.login-card header p:last-child { margin: 0; color: #6e6e80; font-size: .86rem; line-height: 1.45; }
.login-card h1 { margin: 0; color: #0d0d0d; font-size: 1.75rem; letter-spacing: -.03em; }
.login-card label { display: grid; gap: .4rem; color: #3f3f46; font-size: .82rem; font-weight: 600; }
.login-card input { width: 100%; min-height: 3rem; border-color: #d9d9d9; border-radius: .65rem; background: #fff; font-size: 1rem; }
.login-card input:focus-visible { border-color: #202123; box-shadow: 0 0 0 1px #202123; }
.login-brand { margin-bottom: .4rem; }
.login-mobile-brand { display: none; }
.google-signin { display: grid; place-items: center; width: 100%; min-height: 2.75rem; }
.google-signin[hidden] { display: none; }
.google-signin iframe { max-width: 100%; }
.login-card:has(.google-signin[hidden]) .login-divider { display: none; }
.login-divider { display: flex; align-items: center; gap: .7rem; color: var(--color-muted); font-size: .76rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.login-provider-error { color: var(--color-muted); text-align: center; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 4.6rem; }
.password-toggle { position: absolute; top: 50%; right: .35rem; min-height: 2.25rem; padding: .25rem .55rem; transform: translateY(-50%); color: #56565f; border: 0; border-radius: .45rem; background: transparent; font-size: .75rem; font-weight: 600; }
.password-toggle:hover { background: #f2f2f2; }
.login-submit { width: 100%; min-height: 3rem; margin-top: .15rem; }
.login-help { color: #8a8a8a; line-height: 1.4; text-align: center; }
.login-error { border: 1px solid var(--color-overlay); border-radius: .9rem; color: var(--color-muted); background: var(--color-border); padding: .8rem; }
.login-card .login-error { color: #991b1b; border-color: #fecaca; background: #fef2f2; font-size: .82rem; }

@media (max-width: 760px) {
  .login-mode { align-items: stretch; padding: 0; background: #fff; }
  .login-screen { width: 100%; min-height: 100dvh; }
  .login-layout { display: block; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .login-context { display: none; }
  .login-card { align-content: center; min-height: 100dvh; padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
  .login-mobile-brand { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .7rem; }
  .login-card input,
  .login-submit { min-height: 3.15rem; }
}