/* ForeSite identity refresh. The existing application and sign-in layout stay intact. */
.brand-mark {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.brand-mark-olive { fill: #617159; }
.brand-mark-gold { fill: #d5a93b; }

.brand small {
  color: #747a6b;
  font: 500 7px/1.45 var(--mono);
  letter-spacing: 1px;
}

.auth-screen {
  overflow: hidden;
  background-color: #f3efe6;
  background-image:
    linear-gradient(90deg, transparent 49.96%, #e2dcd0 50%, transparent 50.04%),
    linear-gradient(0deg, transparent 49.96%, #e2dcd0 50%, transparent 50.04%),
    radial-gradient(ellipse at 50% 48%, #faf7f0 0, #f3efe6 70%);
}

.auth-screen::before,
.auth-screen::after {
  position: fixed;
  z-index: 0;
  width: min(31vw, 400px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
}

.auth-screen::before {
  top: 0;
  left: 0;
  background: #617159;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .09;
}

.auth-screen::after {
  right: 0;
  bottom: 0;
  background: #d5a93b;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .12;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: #f8f5ed;
  border-color: #d8d0c1;
  box-shadow: 0 18px 70px #27291f12;
}

.auth-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #d5a93b;
  content: "";
}

.auth-card h1 { color: #222921; }
.auth-card > p { color: #77796e; }

.auth-label { color: #617159; }

.auth-label input {
  border-color: #d4ccbd;
  background: #fffdf7;
}

.auth-label input:focus {
  border-color: #617159;
  box-shadow: 0 0 0 2px #61715920;
}

.auth-submit {
  background: #617159;
  color: #fffdf7;
}

.auth-submit:hover { background: #4f5f47; }
.auth-switch { color: #617159; }

.auth-domain-note {
  border-color: #d8d0c1;
  color: #77796e;
}

@media (max-width: 600px) {
  .auth-screen::before,
  .auth-screen::after { width: min(42vw, 220px); }
}