/* Our display:grid rules below beat the UA [hidden] style, so make hidden win. */
[hidden] {
  display: none !important;
}

.login-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--space-page-fluid);
  background:
    radial-gradient(
      circle at var(--login-pointer-x, 50%) var(--login-pointer-y, 42%),
      color-mix(in srgb, var(--color-primary) 18%, transparent),
      transparent 28%
    ),
    linear-gradient(135deg, var(--color-login-sheen), transparent 36%),
    radial-gradient(circle at top, var(--color-login-top) 0, var(--color-background) 48%);
}

.login-screen::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 14%, transparent) var(--border-width), transparent var(--border-width)),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent) var(--border-width), transparent var(--border-width));
  background-size: var(--login-grid-size) var(--login-grid-size);
  mask-image: radial-gradient(
    circle at var(--login-pointer-x, 50%) var(--login-pointer-y, 42%),
    black 0,
    transparent 64%
  );
  opacity: 0.26;
  transform: translate3d(var(--login-parallax-x, 0), var(--login-parallax-y, 0), 0);
  transition: opacity 180ms ease;
}

.login-wallpaper {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.login-panel {
  inline-size: var(--login-panel-width);
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-panel-fluid);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  position: relative;
}

.brand-block {
  display: grid;
  gap: var(--space-md);
  place-items: center;
  text-align: center;
}

.login-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h2);
  font-weight: 700;
}

.login-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

/* A stage fills the panel below the brand block; only one is visible at a time. */
.login-stage {
  display: grid;
  gap: var(--space-lg);
}

.login-form {
  display: grid;
  gap: var(--space-lg);
}

/* Microsoft SSO button: neutral so the gold primary stays the local/Continue action. */
.login-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block: var(--space-lg); /* breathing room above and below the SSO button */
  min-block-size: var(--space-control-height);
  padding: var(--space-control-padding);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.login-sso:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.login-sso-logo {
  flex: 0 0 auto;
}

/* One sign-in method at a time; the arrows toggle between the two views. */
.login-view {
  display: grid;
  gap: var(--space-lg);
}

/* Ambient swap between the SSO and local views. Pinned to the bottom-left of the
   viewport, small and faint - brightens on hover/focus. */
.login-toggle {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-start: var(--space-lg);
  z-index: 1;
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  min-block-size: auto;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  opacity: 0.32;
  cursor: pointer;
  transition: opacity 160ms ease, color 160ms ease;
}

.login-toggle:hover,
.login-toggle:focus-visible {
  opacity: 1;
  color: var(--color-primary);
}

.login-toggle svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Welcome stage: same panel, content swapped after a successful sign-in. */
.login-stage-welcome {
  justify-items: stretch;
  text-align: center;
  gap: var(--space-md); /* greeting + name sit close together */
  padding-block: var(--space-lg);
}

/* "Welcome" - white, on top. */
.login-welcome-greeting {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* The user's name - larger, gold accent, under the greeting. */
.login-welcome-name {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--font-size-h1);
  font-weight: 800;
  line-height: 1.2;
}

/* Full-width rule between the name and Continue. */
.login-welcome-divider {
  inline-size: 100%;
  block-size: var(--border-width);
  margin-block: var(--space-md);
  border: none;
  background: var(--color-border);
}

.login-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.field {
  display: grid;
}

.field label {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin-block-end: var(--space-sm);
}

.field input {
  min-block-size: var(--space-control-height);
  padding: var(--space-control-padding);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  outline: none;
  transition: border-color 160ms ease;
}

.field input:focus {
  border-color: var(--color-primary);
}

button {
  min-block-size: var(--space-control-height);
}

.login-form button {
  margin-block-start: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .login-screen::before {
    transform: none;
  }
}