/* Public Engram sign-in, matching Mira's auth card and local official button (OPS-1309). */
.auth-screen {
  --login-bg: #f6f7f9; --login-paper: #fff; --login-ink: #11181e;
  --login-ink2: #4b5661; --login-ink3: #78848e; --login-line: #dde1e6; --login-line-soft: #f0f0f2;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--login-bg);
  color: var(--login-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Figtree", "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 34px 32px;
  border: 1px solid var(--login-line);
  border-radius: 6px;
  background: var(--login-paper);
}
.auth-brand { display: block; margin-bottom: 26px; }
.auth-brand img { width: 124px; height: 31px; display: block; }
.auth-brand img.logo-dark { display: none; }
.auth-brand__product {
  display: inline-block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--login-ink3);
}
.auth-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.auth-subtitle { margin: 0 0 22px; color: var(--login-ink2); font-size: 13px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-microsoft-signin { display: block; align-self: flex-start; width: 215px; height: 41px; margin-top: 6px; }
.auth-microsoft-signin img { display: block; width: 215px; height: 41px; }
.auth-microsoft-signin:focus-visible { outline: 2px solid var(--login-ink); outline-offset: 4px; }
.auth-foot { margin: 26px 0 11px; padding-top: 16px; border-top: 1px solid var(--login-line-soft); color: var(--login-ink3); font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .auth-screen {
    --login-bg: #171f24; --login-paper: #10161a; --login-ink: #e7eef3;
    --login-ink2: #a7b4bd; --login-ink3: #78868f; --login-line: #2a343b; --login-line-soft: #263541;
  }
  .auth-brand img.logo-light { display: none; }
  .auth-brand img.logo-dark { display: block; }
}
@media (max-width: 359px) {
  .auth-screen { padding: 16px; }
  .auth-card { padding: 30px 24px 26px; }
}