/* ==========================================================================
   Susi base

   The reset, page frame and shared components for the susi interstitials -
   the OAuth sign-in and Zendesk JWT sign-in pages built on base_susi.html,
   plus the SAML sign-in error page on marketing_base.html. Together with
   susi_tokens.css this replaces what those pages used to take from bitly.css.

   Everything is scoped to the .registration-pages body class those templates
   set, rather than written globally: onetrust.css is loaded after this file on
   those pages for the cookie banner, and the scoping keeps the two from
   arguing over the banner's own rules.

   Page stylesheets are linked after this one, so an equally specific rule
   there wins. Anything a single page needs belongs in its own file.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
/* The html rule is the one thing that cannot be scoped to a body class. */
html {
  -webkit-text-size-adjust: 100%;
}

body.registration-pages,
.registration-pages *,
.registration-pages *::before,
.registration-pages *::after {
  box-sizing: border-box;
}

.registration-pages img {
  border: 0;
  vertical-align: middle;
}

/* Fieldsets would otherwise pick up the UA default border and padding.
   bitly.css zeroed those two but left the UA's 2px inline margin, which made
   the button inside a fieldset 4px narrower than its siblings; zeroing the
   margin too squares them off. */
.registration-pages fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Base ---------------------------------------------------------------- */
body.registration-pages {
  margin: 0;
  /* The cards are responsive, but a long enough unbroken application name can
     still push past the viewport. */
  overflow-x: hidden;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--page-bg);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.registration-pages strong {
  font-weight: 600;
}

.registration-pages a {
  color: var(--link);
  text-decoration: none;
}

.registration-pages a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.registration-pages a:active {
  color: var(--link-active);
}

/* --- Site wide message --------------------------------------------------- */
.registration-pages #site_wide_message {
  background-color: #fdf8d1;
  text-align: center;
}

.registration-pages .site_wide_message_text_container {
  margin: 0;
  padding: 16px 20px;
  color: var(--text);
}

/* --- Layout -------------------------------------------------------------- */
/* .container-box is the outer column - it wraps both the logo and the card -
   so it carries no boxed treatment of its own; that lives on .susi-box. */
.registration-pages .container-box {
  width: 100%;
  max-width: 512px; /* 480px card + 16px gutters */
  margin: 0 auto;
  padding: 0 16px 48px;
}

.registration-pages .t-center {
  text-align: center;
}

/* --- Header / logo ------------------------------------------------------- */
.registration-pages .header-logo {
  width: 96px;
  height: 48px;
  margin: 40px auto 24px;
  background: url("https://d1ayxb9ooonjts.cloudfront.net/bitly2/29FBA64DF13FFA4839B831AA7034F59B0783F505.png") no-repeat center;
  background-size: contain;
}

/* The <h1> is the sized box; its anchor has to fill it to stay clickable. */
.registration-pages .header-logo a {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Card ---------------------------------------------------------------- */
.registration-pages .susi-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.registration-pages .margin-small {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

/* --- Social sign-in ------------------------------------------------------ */
/* Full-width stacked Google/Apple buttons matching the ButtonOAuth component
   on /a/sign_in (bitly_common_components ButtonAnchor, variant
   "neutralSecondary", width "full"), with theme.spacing.alertGap between
   them. Width comes from the layout rather than the variant, so a secondary
   button elsewhere is still sized by its label. */
.registration-pages .social-sign-in {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.registration-pages .social-sign-in .button {
  width: 100%;
}

/* theme.spacing.inputOuter, applied as the gap below a description paragraph
   rather than as a fixed margin on the group: the Zendesk page opens straight
   into the buttons, where the card padding is already the spacing. */
.registration-pages .margin-small + .social-sign-in {
  margin-top: 24px;
}

/* Icon + label pairing, matching the IconInline component's 4px
   theme.spacing.iconGap. */
.registration-pages .icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: top;
}

/* --- Separator ----------------------------------------------------------- */
/* A full-width rule behind a label that masks the middle of it. The :before
   and the two position declarations used to come from bitly.css. */
.registration-pages .separator {
  position: relative;
  margin: 24px 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: var(--text-subtle);
}

.registration-pages .separator:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--border);
}

.registration-pages .separator span {
  position: relative;
  padding: 0 12px;
  background: var(--card-bg);
  color: var(--text-subtle);
}

/* --- Buttons ------------------------------------------------------------- */
/* Shared button shape/type, taken from the susi Button components used on
   /a/sign_in: 16px/20px Bitly Display, 0.01em tracking, 10px 16px padding.
   Weight is 600 (SemiBold) rather than that component's 500 (Medium), matching
   oauth_allow.css - the Medium face is not among the fonts served here, so a
   500 request would silently fall back to Regular. */
.registration-pages .button {
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  border: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: var(--radius);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.registration-pages .button:hover {
  text-decoration: none;
}

/* Written as :focus plus an opt-out rather than plain :focus-visible so that
   browsers without :focus-visible still get a ring: they discard the second
   selector as invalid and keep the first, where supporting browsers use the
   second to hide the ring for pointer focus. */
.registration-pages .button:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.registration-pages .button:focus:not(:focus-visible) {
  outline: 0;
}

/* variant="primary" */
.registration-pages .button.button-primary {
  width: 100%;
  padding: 10px 16px;
  color: #ffffff;
  background-color: var(--primary);
}

.registration-pages .button.button-primary:hover {
  color: #ffffff;
  background-color: var(--primary-hover);
}

/* variant="neutralSecondary": bordered, unfilled. */
.registration-pages .button.button-secondary {
  padding: 10px 16px;
  color: var(--text);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
}

.registration-pages .button.button-secondary:hover {
  color: var(--text);
  background-color: var(--page-bg);
  border-color: var(--border-hover);
}

/* variant="neutralTertiary": no border and no fill, foreground.base.primary0
   text, background.base.primary1 on hover. The base .button rule already sets
   border: 0, which is what this variant wants. */
.registration-pages .button.button-tertiary {
  padding: 10px 16px;
  color: var(--text);
  background-color: transparent;
}

.registration-pages .button.button-tertiary:hover {
  color: var(--text);
  background-color: var(--page-bg);
}

/* --- Cancel -------------------------------------------------------------- */
/* The Cancel form is the only direct child of the card that is a centered
   form, on both pages. Width and offset live here rather than on a button
   variant so the button can change variant without changing the layout: the
   12px matches the gap between the stacked Allow/Deny pair on the allow
   interstitial. */
.registration-pages .susi-box > form.t-center {
  margin-top: 12px;
}

.registration-pages .susi-box > form.t-center .button {
  width: 100%;
}

/* --- Sign-up prompt ------------------------------------------------------ */
/* A direct child of the card rather than of the #sign-in form, since the
   Cancel form had to be a sibling of it (forms cannot nest). */
.registration-pages .susi-box > p.t-center {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-subtle);
}

.registration-pages .gray-link {
  color: var(--text-subtle);
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (min-width: 540px) {
  .registration-pages .susi-box {
    padding: 32px;
  }
}

@media screen and (max-width: 400px) {
  .registration-pages .margin-small {
    font-size: 15px;
  }
}