.identity-auth-body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(23, 105, 170, 0.08), rgba(26, 127, 55, 0.08)),
    var(--color-surface-muted);
}

.identity-auth-page {
  align-items: center;
  display: grid;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3rem);
}

.identity-auth-development-warning {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-soft-border);
  border-radius: 999px;
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  font-weight: 600;
  inset-block-start: var(--space-3);
  inset-inline-start: 50%;
  padding: 0.25rem 0.75rem;
  position: fixed;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 20;
}

.identity-login {
  display: grid;
  justify-items: center;
}

.identity-login-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: 0 1.25rem 3.5rem rgba(31, 41, 51, 0.16);
  display: grid;
  gap: var(--space-5);
  inline-size: min(100%, 28rem);
  padding: var(--space-5);
}

.identity-login-header,
.identity-login-brand,
.identity-login-locale {
  align-items: center;
  display: flex;
}

.identity-login-header {
  gap: var(--space-3);
  justify-content: space-between;
}

.identity-login-brand {
  color: var(--color-text);
  gap: var(--space-3);
  text-decoration: none;
}

.identity-login-brand span:last-child {
  display: grid;
}

.identity-login-brand span:last-child span,
.identity-login-title p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.identity-login-locale {
  gap: var(--space-2);
}

.identity-login-locale a {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
}

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

.identity-login-title {
  display: grid;
  gap: var(--space-1);
}

.identity-login-title h1 {
  font-size: 1.5rem;
}

.identity-login-field {
  display: grid;
  gap: var(--space-2);
}

.identity-login-field span:first-child {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.identity-login-field input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0 var(--space-3);
}

.identity-login-field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.16);
  outline: 0;
}

.identity-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
}

.identity-password-control input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.identity-password-toggle {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-inline-start: 0;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--color-text);
  cursor: pointer;
  min-block-size: 2.75rem;
}

.identity-password-toggle::before {
  background: currentColor;
  content: "";
  display: block;
  height: 1.125rem;
  margin: auto;
  -webkit-mask: var(--password-toggle-icon) center / contain no-repeat;
  mask: var(--password-toggle-icon) center / contain no-repeat;
  width: 1.125rem;
}

.identity-password-toggle[aria-pressed="false"] {
  --password-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.identity-password-toggle[aria-pressed="true"] {
  --password-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6A3 3 0 0 0 13.4 13.4'/%3E%3Cpath d='M9.9 4.2A10.4 10.4 0 0 1 12 4c6.5 0 10 8 10 8a18.5 18.5 0 0 1-3.1 4.4'/%3E%3Cpath d='M6.1 6.6C3.5 8.4 2 12 2 12s3.5 8 10 8c1.5 0 2.9-.4 4.1-1'/%3E%3C/svg%3E");
}

.identity-login-submit {
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-control);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  min-block-size: 2.75rem;
  padding: 0 var(--space-4);
}

.identity-login-submit:hover {
  filter: brightness(1.05);
}

.identity-login-secondary-help {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.identity-login-cancel {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  justify-self: center;
}

@media (max-width: 34rem) {
  .identity-login-panel {
    padding: var(--space-4);
  }

  .identity-login-header {
    align-items: start;
    flex-direction: column;
  }
}