/* ============================================================================
   AVFX CRM — SIGN IN
   Two steps on one page. The full logo with its tagline is used here, where
   there is room for the tagline to actually be readable.
   ========================================================================== */

.login {
  min-block-size: 100vh;
  display: grid;
  grid-template-columns: 1fr 460px;
  background: var(--color-canvas);
}

/* The charcoal panel carries the brand, so the form itself does not have to.
   This is where brand presence belongs — not on the buttons (ADR-0006). */
.login__brand {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-11);
  background: var(--chrome-topbar-bg);
  color: var(--chrome-text);
  overflow: hidden;
}
.login__brand::after {
  content: "";
  position: absolute; inset-block-start: -20%; inset-inline-end: -10%;
  inline-size: 480px; block-size: 480px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--seed-red) 22%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
/* align-self is required: the parent is a flex column, whose default
   align-items:stretch would otherwise stretch the image across the panel. */
.login__logo { block-size: 68px; inline-size: auto; align-self: start; position: relative; }
.login__pitch { position: relative; max-inline-size: 34ch; }
.login__pitch h1 { font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: 1.3; color: var(--chrome-heading); }
.login__pitch p { margin-block-start: var(--space-5); font-size: var(--fs-md); color: var(--chrome-text-muted); line-height: 1.6; }
.login__foot { position: relative; font-size: var(--fs-2xs); color: var(--chrome-text-faint); }

.login__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-11) var(--space-10);
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-border);
}
.login__form { inline-size: 100%; max-inline-size: 340px; margin-inline: auto; }
.login__form h2 { font-size: var(--fs-xl); margin-block-end: var(--space-3); }
.login__form > p { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-block-end: var(--space-9); }

.login__fields { display: flex; flex-direction: column; gap: var(--space-6); }
.login__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.login__row a { font-size: var(--fs-xs); }
.login .btn { inline-size: 100%; block-size: var(--ctl-h-lg); }

/* --- Demonstration shortcut ---------------------------------------------
   Deliberately marked as a testing aid, so it can never be mistaken for a
   real feature. Controlled by ONE flag in config/demo.php.               */

.login__demo {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px dashed var(--color-border);
  text-align: center;
}
.login__demo p { font-size: var(--fs-2xs); color: var(--color-text-tertiary); margin-block-end: var(--space-4); }
.login__demo .btn { border-style: dashed; }

/* --- One-time password step ---------------------------------------------- */

.login__otp-to { font-weight: var(--fw-medium); color: var(--color-text-primary); }
.login__back {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-block-start: var(--space-6);
  font-size: var(--fs-xs); color: var(--color-text-secondary);
}
.login__back svg { inline-size: 13px; block-size: 13px; }
.login__err {
  display: flex; align-items: center; gap: var(--space-3); justify-content: center;
  margin-block-start: var(--space-5);
  font-size: var(--fs-xs); color: var(--color-danger);
}
.login__err svg { inline-size: 14px; block-size: 14px; }

[hidden] { display: none !important; }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__brand { display: none; }
}