/* SS Registration Gate: the sign-up / log-in popup card, design 1a ("Card").
   The overlay, the card, the logo row with the close button, and the "Check your inbox" view.
   Everything inside the two Fluent Forms is their own Custom CSS (tools/auth-forms.css). */

html.ssra-open { overflow: hidden; }

.ssra {
  --ssra-ink: var(--text-on-light, #2f2e30);
  --ssra-muted: var(--text-on-light-muted, #6f6d73);
  --ssra-line: var(--border-on-light, #d6d5d8);
  --ssra-charcoal: var(--charcoal-700, #414042);
  --ssra-display: var(--font-display, 'Outfit', 'Helvetica Neue', sans-serif);
  --ssra-body: var(--font-body, 'Public Sans', 'Helvetica Neue', sans-serif);
  position: fixed; inset: 0; z-index: 99999;
  display: flex; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 1.6vw, 24px);
  background: var(--overlay-dark, rgba(26, 26, 27, 0.6));
  font-family: var(--ssra-body); font-size: 16px; line-height: 1.5; letter-spacing: normal; color: var(--ssra-ink); text-align: left;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 200ms;
}
.ssra.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); }

.ssra__card {
  position: relative; box-sizing: border-box; width: 480px; max-width: 100%; margin: auto;
  padding: clamp(22px, 2.8vw, 40px);
  background: var(--surface-light, #fff); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(26, 26, 27, 0.14), 0 4px 10px rgba(26, 26, 27, 0.06));
  transform: translateY(8px); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ssra.is-open .ssra__card { transform: none; }
.ssra__card:focus { outline: none; }
.ssra__inner { width: 100%; max-width: 400px; margin: 0 auto; }
.ssra__view[hidden] { display: none !important; }

/* Version 2's sign-up (4a) and phone step (3b) are wide two-column cards; everything else is 480. */
.ssra[data-width="wide"] .ssra__card { width: 1040px; }
.ssra[data-width="mid"] .ssra__card { width: 960px; }
.ssra[data-width="wide"] .ssra__inner,
.ssra[data-width="mid"] .ssra__inner { max-width: none; }
.ssra[data-width="mid"] .ssra__brand { margin-bottom: 24px; }

/* ---- Logo row: the mark, the name, the close button ---- */
.ssra__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.ssra__logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ssra__logo img { display: block; flex: none; width: 40px; height: 40px; }
.ssra__name {
  font-family: var(--ssra-display); font-size: 17px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ssra-ink); white-space: nowrap;
}
.ssra .ssra__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 48px; height: 48px; margin: 0; padding: 0;
  color: var(--ssra-charcoal); background: transparent; border: 1px solid var(--ssra-line); border-radius: 50%;
  box-shadow: none; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ssra .ssra__close:hover { background: var(--charcoal-50, #f7f7f6); transform: scale(1.06); color: var(--ssra-charcoal); }
.ssra .ssra__close svg { display: block; width: 21.6px; height: 21.6px; }
.ssra.is-locked .ssra__close { visibility: hidden; }

/* ---- "Check your inbox" (and the done look it shares with the forms' messages) ---- */
.ssra .ssr-auth__done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 8px 0; }
.ssra .ssr-auth__badge {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-500, #d2e82e); color: var(--charcoal-800, #2f2e30);
}
.ssra .ssr-auth__badge--mail { background: var(--charcoal-100, #ececed); color: var(--ssra-charcoal); }
.ssra .ssr-auth__badge svg { display: block; width: 28px; height: 28px; }
.ssra .ssr-auth__badge--mail svg { width: 26px; height: 26px; }
.ssra .ssr-auth__done-copy { display: flex; flex-direction: column; gap: 8px; }
.ssra .ssr-auth__done-title {
  margin: 0; padding: 0; font-family: var(--ssra-display); font-size: 28px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.02em; text-transform: none; color: var(--ssra-ink);
}
.ssra .ssr-auth__done-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ssra-muted); text-wrap: pretty; }
.ssra .ssr-auth__done-text strong { font-weight: 700; color: var(--ssra-ink); word-break: break-word; }
.ssra .ssra__secondary {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 12px 22px;
  font-family: var(--ssra-display); font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none;
  color: var(--ssra-charcoal); background: transparent; border: 1.5px solid var(--ssra-charcoal); border-radius: 999px;
  box-shadow: none; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ssra .ssra__secondary:hover { background: var(--charcoal-50, #f7f7f6); color: var(--ssra-charcoal); transform: translateY(-1px); }
/* "You're all set": the same coral button as the forms' */
.ssra .ssra__view > .ssr-auth__done > .ssr-auth__cta {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 16px 28px;
  font-family: var(--ssra-display); font-size: 18px; font-weight: 600; line-height: 23px; letter-spacing: 0; text-transform: none;
  color: #fff; background: var(--accent-cta, #ff5a5f); border: 1px solid transparent; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255, 90, 95, 0.35); text-decoration: none; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ssra .ssra__view > .ssr-auth__done > .ssr-auth__cta:hover,
.ssra .ssra__view > .ssr-auth__done > .ssr-auth__cta:focus { color: #fff; background: var(--accent-cta-hover, #ea3f45); }
.ssra .ssra__view > .ssr-auth__done > .ssr-auth__cta:hover { transform: translateY(-1px); }
.ssra .ssra__view > .ssr-auth__done > .ssr-auth__cta:focus-visible { outline: 2px solid var(--ssra-ink); outline-offset: 3px; }

/* ---- Sign in, email first (auth_signin = email): the card's own form, not a Fluent Form, so it
   takes the forms' look from here, with the values of tools/auth-forms.css ---- */
.ssra .ssr-auth-step {
  --ssra-focus: var(--charcoal-700, #414042);
  --ssra-cta: var(--accent-cta, #ff5a5f);
  --ssra-cta-hover: var(--accent-cta-hover, #ea3f45);
  --ssra-error: var(--coral-700, #c92e34);
  --ssra-link: var(--text-link, #0a3a5c);
  margin: 0; padding: 0;
  font-family: var(--ssra-body); font-size: 16px; line-height: 1.5; letter-spacing: normal; color: var(--ssra-ink); text-align: left;
}
.ssra .ssr-auth-step a { font-family: inherit; }
.ssra .ssr-auth-step .ssr-auth__intro { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.ssra .ssr-auth-step .ssr-auth__title {
  margin: 0; padding: 0;
  font-family: var(--ssra-display); font-weight: 600; font-size: clamp(26px, 2.1vw, 30px); line-height: 1.08;
  letter-spacing: -0.02em; text-transform: none; color: var(--ssra-ink); text-wrap: balance;
}
.ssra .ssr-auth-step .ssr-auth__lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ssra-muted); text-wrap: pretty; }
.ssra .ssr-auth-step .ff-el-group { margin: 0 0 18px; padding: 0; }
.ssra .ssr-auth-step .ff-el-input--label { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; line-height: normal; }
.ssra .ssr-auth-step .ff-el-input--label label {
  display: block; margin: 0; padding: 0; font-family: var(--ssra-body); font-size: 14px; font-weight: 600; line-height: normal; color: var(--ssra-ink);
}
.ssra .ssr-auth-step .ff-el-input--content { margin: 0; }
.ssra .ssr-auth-step .ff-el-form-control {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 12px 14px;
  font-family: var(--ssra-body); font-size: 16px; font-weight: 400; line-height: normal;
  color: var(--ssra-ink); background: #fff; background-image: none;
  border: 1.5px solid var(--ssra-line); border-radius: 8px; box-shadow: none; outline: none;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ssra .ssr-auth-step .ff-el-form-control:focus { border-color: var(--ssra-focus); background: #fff; box-shadow: none; outline: none; color: var(--ssra-ink); }
.ssra .ssr-auth-step .ff-el-form-control::placeholder { color: var(--charcoal-400, #8f8d93); opacity: 1; }
.ssra .ssr-auth-step .ff-el-is-error .ff-el-form-control,
.ssra .ssr-auth-step .ff-el-form-control[aria-invalid="true"] { border-color: var(--ssra-cta); }
.ssra .ssr-auth-step .ff-el-input--content .error {
  display: block; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.4; color: var(--ssra-error); text-align: left;
}
.ssra .ssr-auth-step .ssr-auth__cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100%; min-width: 0; height: auto; margin: 0 0 18px; padding: 16px 28px;
  font-family: var(--ssra-display); font-size: 18px; font-weight: 600; line-height: 23px; letter-spacing: 0; text-transform: none;
  color: #fff; background: var(--ssra-cta); border: 1px solid transparent; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255, 90, 95, 0.35); text-decoration: none; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ssra .ssr-auth-step .ssr-auth__cta:last-child { margin-bottom: 0; } /* Google off */
.ssra .ssr-auth-step .ssr-auth__cta:hover,
.ssra .ssr-auth-step .ssr-auth__cta:focus { color: #fff; background: var(--ssra-cta-hover); border-color: transparent; opacity: 1; }
.ssra .ssr-auth-step .ssr-auth__cta:hover { transform: translateY(-1px); }
.ssra .ssr-auth-step .ssr-auth__cta:focus-visible { outline: 2px solid var(--ssra-ink); outline-offset: 3px; }
.ssra .ssr-auth-step .ssr-auth__cta[disabled] { opacity: 0.75; cursor: progress; transform: none; }
.ssra .ssr-auth-step .ssr-auth__or {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 14px; line-height: normal; color: var(--ssra-muted);
}
.ssra .ssr-auth-step .ssr-auth__or::before,
.ssra .ssr-auth-step .ssr-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ssra-line); }
.ssra .ssr-auth-step .ssr-auth__notice { margin: 0 0 18px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--charcoal-600, #57555a); text-wrap: pretty; }
.ssra .ssr-auth-step .ssr-auth__notice strong { font-weight: 600; color: inherit; }
.ssra .ssr-auth-step .ssr-auth__notice a { color: var(--ssra-link); text-decoration: underline; text-underline-offset: 2px; }
.ssra .ssr-auth-step a.ssr-auth__google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px;
  font-family: 'Google Sans', Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.25px;
  color: #3c4043; background: #fff; border: 1px solid #dadce0; border-radius: 20px; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ssra .ssr-auth-step a.ssr-auth__google:hover { color: #3c4043; background: #f8faff; border-color: #d2e3fc; }
.ssra .ssr-auth-step a.ssr-auth__google svg { display: block; flex: none; width: 18px; height: 18px; }
.ssra .ssr-auth-step a:focus-visible { outline: 2px solid var(--ssra-cta); outline-offset: 2px; border-radius: 4px; }
.ssra .ssr-auth-step a.ssr-auth__google:focus-visible { border-radius: 20px; }

.ssra .ssra__close:focus-visible,
.ssra .ssra__secondary:focus-visible { outline: 2px solid var(--accent-cta, #ff5a5f); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ssra, .ssra.is-open, .ssra__card, .ssra .ssra__close, .ssra .ssra__secondary,
  .ssra .ssr-auth-step .ssr-auth__cta, .ssra .ssr-auth-step .ff-el-form-control { transition: none; }
  .ssra__card { transform: none; }
  .ssra .ssra__close:hover, .ssra .ssra__secondary:hover, .ssra .ssr-auth-step .ssr-auth__cta:hover { transform: none; }
}