/* ── Brand tokens, not a literal palette (v3 §1 / governing rule 4) ──────────
   This card was written with a hardcoded GREEN palette (#0a5c2b / #0e7c3a /
   #e6f0ea) that consulted no token. It went unnoticed because the EF /login page
   was not applying this stylesheet at all — the card inherited Element Flow's
   look, which happened to be on-brand. The moment the stylesheet was delivered
   properly the literal green appeared, mid-page, on an otherwise navy shop.

   The chain resolves on every surface:
     --primary                  rmmapp emits it on authenticated pages (the
                                retailer's configured colour)
     --e-global-color-primary   Element Flow's Global Brand Color — present on the
                                anonymous login page, which is where this card lives
     --brand-primary            rmmtheme's alias
     #1f4788                    the RMM default, last resort only

   Green survives in exactly one place, and deliberately: --msg--ok, where green is
   semantic ("signed in") rather than decorative. */
/* RMM IAM — agent email-OTP sign-in page. Minimal, theme-neutral card styling. */
.rmmiam-signin {
  display: flex;
  justify-content: center;
  padding: 48px 16px;
}
.rmmiam-signin__card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(16, 36, 24, 0.06);
}
.rmmiam-signin__title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788)));
}
.rmmiam-signin__lede {
  margin: 0 0 20px;
  color: #52606d;
  font-size: 0.95rem;
}
.rmmiam-signin__step {
  margin: 0 0 14px;
}
.rmmiam-signin__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2933;
}
.rmmiam-signin__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
}
.rmmiam-signin__input:focus {
  outline: 2px solid var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788)));
  outline-offset: 1px;
  border-color: var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788)));
}
.rmmiam-signin__submit {
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-primary, #fff);
  background: var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788)));
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.rmmiam-signin__submit:hover { background: var(--primary-hover, var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788)))); filter: brightness(0.94); }
.rmmiam-signin__submit:disabled { opacity: 0.6; cursor: default; }
.rmmiam-signin__picker { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.rmmiam-signin__pick {
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  font-size: 0.98rem;
  color: #16241c;
  background: #f0f4f1;
  border: 1px solid #d2e3d8;
  border-radius: 6px;
  cursor: pointer;
}
.rmmiam-signin__pick:hover { background: color-mix(in srgb, var(--primary, var(--e-global-color-primary, var(--brand-primary, #1f4788))) 8%, transparent); }
/* The status line's DEFAULT is neutral, not green.
   It used to be #0a5c2b, which painted every message green — including "Sending
   code…", "Verifying…", and above all "If <address> is registered, a code is on its
   way." That last one is deliberately non-committal: it must not confirm that the
   address exists. Green asserted a positive outcome the sentence is careful not to
   claim. Same defect class as the green "Quotation rejected" (v3 §4.8).
   Green is now reserved for the one genuinely confirmed success, --ok. */
.rmmiam-signin__msg { margin: 10px 0 0; font-size: 0.9rem; color: #3b4351; min-height: 1.2em; }
.rmmiam-signin__msg--err { color: #a2322c; }
.rmmiam-signin__msg--ok { color: #0a5c2b; }
.rmmiam-signin__fallback { margin: 18px 0 0; font-size: 0.85rem; text-align: center; }
.rmmiam-signin__fallback a { color: #52606d; }

/* ── Expired/wrong-code recovery (v3 §4.1 [High]) ────────────────────────────
   The error used to tell the user to "request a new code" with nothing to click.
   The recourse is now a link appended to that same error line, and it appears only
   when a verify has failed.

   `color: inherit` is the whole point: the link sits INSIDE .rmmiam-signin__msg, so
   it takes that line's colour — error red on failure — and is distinguished only by
   the underline. A primary-blue link there would read as a separate control and
   fight the message it belongs to. */
/* Specificity note: Element Flow ships `.elementor a { text-decoration: none }`
   (custom-frontend.min-s1.css) at (0,1,1), which beat a bare
   `.rmmiam-signin__resend-link` at (0,1,0) — the link rendered with no underline on
   the EF /login page while looking correct on the standalone one. Qualifying with
   the parent and the element type lifts this to (0,2,1) and wins on merit, so no
   !important is needed. */
.rmmiam-signin__msg a.rmmiam-signin__resend-link,
.rmmiam-signin__msg a.rmmiam-signin__resend-link:hover,
.rmmiam-signin__msg a.rmmiam-signin__resend-link:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* During the cooldown the link is replaced by this, in the same line and colour,
   so the line always states exactly one true thing. */
.rmmiam-signin__resend-wait {
    text-decoration: none;
    opacity: 0.85;
}

.rmmiam-signin__hint {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: #5a6472;
}