/* ==========================================================================
   Orontes Portal — Sign-in screen
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Left: ink brand panel ------------------------------------------- */

.auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: clamp(var(--sp-8), 5vh, var(--sp-12)) clamp(var(--sp-8), 5vw, 68px);
  background:
    radial-gradient(120% 90% at 8% 0%, #2A3138 0%, var(--ink-900) 55%, var(--nav-bg-2) 100%);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}

/* The mint "asterisk" motif from the flyer's top-right corner */
.auth__motif {
  position: absolute;
  top: -180px;
  right: -190px;
  width: 480px;
  height: 480px;
  color: var(--mint-400);
  opacity: .11;
  pointer-events: none;
}

/* Lift the real content above the motif — but leave the motif itself absolute,
   or it joins the flex column and pushes everything down. */
.auth__brand > :not(.auth__motif) { position: relative; z-index: 1; }

/* align-self keeps the img from being stretched by the flex column, which
   would letterbox the SVG instead of sizing it from its viewBox ratio. */
.auth__logo { height: 32px; width: auto; align-self: flex-start; }

.auth__pitch { max-width: 470px; }

.auth__pitch h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(26px, 2.5vw, 37px);
  line-height: 1.14;
  color: #fff;
}
.auth__pitch h1 em {
  font-style: normal;
  color: var(--mint-400);
}
.auth__pitch p {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .58);
}

.auth__points {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.auth__points li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, .70);
}
.auth__points .i { width: 15px; height: 15px; color: var(--mint-400); flex: none; }

.auth__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.auth__foot .sep { color: var(--mint-400); }

/* --- Right: form ------------------------------------------------------ */

.auth__panel {
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-6);
  background: var(--c-bg);
  background-image:
    radial-gradient(60% 60% at 100% 0%, rgba(255, 255, 255, .5) 0%, transparent 70%);
}

.auth__card {
  width: 100%;
  max-width: 392px;
}

.auth__card-logo {
  display: none;
  height: 30px;
  width: auto;
  margin-bottom: var(--sp-8);
}

.auth__title { font-size: var(--fs-2xl); }
.auth__sub { margin-top: var(--sp-2); color: var(--c-text-muted); }

.auth__form {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.auth__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}

/* Says out loud that sign-in is theatre until a backend exists — otherwise a
   rejected password reads as "I am locked out". */
.auth__demo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--mint-200);
  border-radius: var(--r-md);
  background: var(--mint-50);
  color: var(--mint-700);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.auth__demo .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.auth__demo strong { font-weight: 600; }

.auth__alert {
  display: none;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid rgba(180, 84, 74, .28);
  border-radius: var(--r-md);
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.auth__alert[data-open="true"] { display: flex; }
.auth__alert .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.auth__divider {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.auth__divider::before, .auth__divider::after {
  content: ""; height: 1px; flex: 1; background: var(--c-border-strong);
}

.auth__sso { display: grid; gap: var(--sp-2); }

.auth__legal {
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  text-align: center;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
  .auth__card-logo { display: block; }
  .auth__panel { align-items: start; padding-top: clamp(var(--sp-10), 10vh, 96px); }
}