/* Public authentication surface. Keep every selector scoped to the login page. */
.forge-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text-primary);
  background: var(--bg-page);
}

.forge-login__brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
  padding: clamp(36px, 6.5vw, 96px);
  color: var(--text-on-dark);
  background: var(--brand-blue);
}

.forge-login__wordmark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

.forge-login__mark {
  width: 34px;
  height: 48px;
  object-fit: contain;
}

.forge-login__wordmark-name {
  color: var(--text-on-dark);
}

.forge-login__ribbon {
  position: absolute;
  z-index: 0;
  right: -19%;
  bottom: 4%;
  width: 118%;
  height: auto;
  opacity: 0.62;
  pointer-events: none;
}

.forge-login__brand-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  width: max-content;
  max-width: 100%;
}

.forge-login__slogan {
  color: var(--text-on-dark);
  text-wrap: balance;
}

.forge-login__slogan--accent {
  color: var(--brand-peach);
}

.forge-login .forge-type--display-hero-italic {
  font-style: italic;
}

.forge-login__surface {
  display: grid;
  min-width: 0;
  padding: clamp(32px, 6vw, 96px);
  place-items: center;
  background: var(--bg-page);
}

.forge-login__content {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 430px);
}

.forge-login__title {
  color: var(--text-primary);
  text-wrap: balance;
}

.forge-login__error {
  padding: 12px 14px;
  border: 1px solid var(--brand-red);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--tint-red);
}

.forge-login .q-btn.forge-btn--primary.forge-login__microsoft {
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--brand-blue) !important;
  background-color: var(--brand-peach) !important;
  box-shadow: var(--shadow-md);
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.forge-login .q-btn.forge-btn--primary.forge-login__microsoft:not(.disabled):hover {
  background-color: var(--bg-card) !important;
  box-shadow: var(--shadow-lg);
}

.forge-login .q-btn.forge-btn--primary.forge-login__microsoft:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 760px) {
  .forge-login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 30svh) minmax(420px, 1fr);
  }

  .forge-login__brand {
    min-height: 220px;
    padding: 28px clamp(24px, 7vw, 52px) 32px;
  }

  .forge-login__mark {
    width: 25px;
    height: 36px;
  }

  .forge-login__ribbon {
    right: -16%;
    bottom: -28%;
    width: 115%;
    opacity: 0.4;
  }

  .forge-login__surface {
    padding: 42px clamp(24px, 7vw, 52px) 56px;
  }
}

@media (max-width: 380px) {
  .forge-login__surface {
    padding-top: 34px;
  }
}