/*
 * ParentProof auth reference port
 *
 * This sheet is a direct component-level translation of the designer's
 * Login.dc.html and Signup.dc.html. The live DOM keeps the product's IDs and
 * event wiring; this sheet owns only the auth composition. Product-only
 * fields use the same measured field rhythm. The narrow layout is the one
 * deliberate compliant-mode correction: the source mockup keeps two columns
 * at 390px and clips the form, so the live page stacks below 704px. That
 * boundary also keeps all six confirmation-code cells at least 44px wide on
 * the first two-column pixel instead of opening a narrow 680px target hole.
 */

html:has(#loginShell:not(.hide)),
body:has(#loginShell:not(.hide)) {
  margin: 0 !important;
  min-height: 100%;
  background: #fff !important;
  color: #16233f;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) {
  display: block;
  padding: 0;
}

body:has(#loginShell:not(.hide)) .wrap {
  /* The signed-in desktop shell is a two-row grid.  Leaving that grid active
     here makes its implicit 1fr row stretch the auth header well beyond the
     designer's 74px bar.  Auth owns a simple document stack instead. */
  display: block;
  max-width: none;
  min-height: 100vh;
}

body:has(#loginShell:not(.hide)) .pagehead {
  box-sizing: border-box;
  display: flex;
  min-height: 74px;
  margin: 0;
  /* 44px language/switch targets + 14px vertical padding on both sides +
     border = the designer's 74px header. The former 18px made it 81px. */
  padding: 14px clamp(20px, 5vw, 48px);
  border: 0;
  border-bottom: 1px solid rgba(22, 35, 63, .08);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:has(#loginShell:not(.hide)) .pagehead .brand {
  gap: 11px;
}

.auth-brand-logo {
  display: none;
}

body:has(#loginShell:not(.hide)) .pagehead .brandmark,
body:has(#loginShell:not(.hide)) .pagehead .wm {
  display: none;
}

body:has(#loginShell:not(.hide)) .pagehead .auth-brand-logo,
body:has(#loginShell:not(.hide)) .pagehead .site-brand-logo {
  display: block;
  width: 160px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

body:has(#loginShell:not(.hide)) .pagehead .brandmark {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 12px;
  background: #16233f;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

body:has(#loginShell:not(.hide)) .pagehead .wm {
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #16233f;
}

body:has(#loginShell:not(.hide)) .pagehead .wm small,
body:has(#loginShell:not(.hide)) .morebelow {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .pagehead .controls {
  gap: 14px;
}

body:has(#loginShell:not(.hide)) .themebtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

/* Keep the designer's compact 42x24 track while making the control itself a
   truthful 44x44 target. The dashboard sheet's transparent hit-area pseudo is
   unnecessary here because the real button now owns the whole target. */
body:has(#loginShell:not(.hide)) .themebtn::before {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #e8f1fa;
  pointer-events: none;
}

body:has(#loginShell:not(.hide)) .themebtn::after {
  top: 12px;
  left: 3px;
  width: 20px;
  height: 20px;
}

body:has(#loginShell:not(.hide)) .themebtn[aria-checked="false"]::after {
  left: 21px;
}

/* The reference switch is a clean track and thumb. Dashboard-era sun/moon
   glyphs made the light-state control read as a dark asterisk beside the
   thumb, so auth keeps the accessible switch name and drops the decoration. */
body:has(#loginShell:not(.hide)) .themebtn .ic {
  display: none;
}

body:has(#loginShell:not(.hide)) .langsel {
  width: auto;
  min-width: 100px;
  max-width: none;
  min-height: 44px;
  padding: 8px 34px 8px 14px;
  border: 1px solid rgba(22, 35, 63, .16);
  border-radius: 999px;
  background-color: #fff;
  color: #16233f;
  font-size: 13.5px;
  font-weight: 700;
}

body:has(#loginShell:not(.hide)) #main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: clamp(28px, 5vw, 64px) 20px 48px;
}

body:has(#loginShell:not(.hide)) #loginShell {
  order: 1;
  width: 100%;
  min-height: 0;
  align-content: start;
}

body:has(#loginShell:not(.hide)) #main > .banner {
  order: 2;
  width: min(1040px, 100%);
  margin: 16px auto 0;
}

body:has(#loginShell:not(.hide)) .loginwindow {
  box-sizing: border-box;
  display: grid;
  width: min(1040px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(22, 35, 63, .08);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(22, 35, 63, .08);
}

body:has(#loginShell:not(.hide)) .loginstory {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 44px clamp(28px, 4vw, 48px);
  border-right: 1px solid rgba(22, 35, 63, .08);
  background: #fff;
}

body:has(#loginShell:not(.hide)) .loginbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 auto;
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #16233f;
}

body:has(#loginShell:not(.hide)) .loginbrand .auth-brand-logo {
  display: block;
  box-sizing: border-box;
  width: 128px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

body:has(#loginShell:not(.hide)) .loginbrand img:not(.auth-brand-logo) {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 6px;
  border-radius: 10px;
  background: #16233f;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

body:has(#loginShell:not(.hide)) .loginstorymain {
  margin: 0;
  padding: 56px 0;
}

body:has(#loginShell:not(.hide)) .loginstorymain::before {
  display: block;
  margin-bottom: 18px;
  color: #cfe3f5;
  font-family: Georgia, serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 26px;
  content: "“";
}

body:has(#loginShell:not(.hide)) .loginlede {
  max-width: 390px;
  margin: 0 0 20px;
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #16233f;
}

body:has(#loginShell:not(.hide)) .loginsub {
  margin: 0;
  color: #5b6472;
  font-size: 14.5px;
  font-weight: 700;
}

body:has(#loginShell:not(.hide)) .loginpanel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 44px clamp(28px, 4vw, 52px);
  background: #fff;
}

body:has(#loginShell:not(.hide)) .auth-home-link {
  position: absolute;
  top: 5px;
  right: clamp(28px, 4vw, 52px);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1b4a73;
  font: 700 13px/20px Nunito, system-ui, sans-serif;
  text-decoration: none;
  gap: 6px;
}

body:has(#loginShell:not(.hide)) .auth-home-link::before {
  content: "←";
}

body:has(#loginShell:not(.hide)) .auth-home-link:hover {
  text-decoration: underline;
}

body:has(#loginShell:not(.hide)) .auth-home-link:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
  border-radius: 3px;
}

body:has(#loginShell:not(.hide)) .auth-session-alert {
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  width: 100%;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #d39132;
  border-radius: 14px;
  background: #fff6df;
  color: #593a0a;
  font-size: 13.5px;
  line-height: 1.45;
}

body:has(#loginShell:not(.hide)) .auth-session-alert.hide {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .auth-session-alert strong {
  color: #412800;
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
}

body:has(#loginShell:not(.hide)) .auth-session-alert:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
}

body:has(#loginShell:not(.hide)) .loginsteps {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 28px;
}

body:has(#loginShell:not(.hide)) .loginsteps:not(.hide) {
  display: grid;
}

body:has(#loginShell:not(.hide)) .loginstep {
  display: block;
  width: auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(22, 35, 63, .10);
}

body:has(#loginShell:not(.hide)) .loginstep.is-active,
body:has(#loginShell:not(.hide)) .loginstep.is-done {
  background: #2b6cb0;
}

body:has(#loginShell:not(.hide)) .loginpanel > .auth-card,
body:has(#loginShell:not(.hide)) #signin {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Every reachable authentication state uses the same designer-derived form
   vocabulary. No dashboard `.card`, `.inp`, `.primary` or `.ghost` hook is
   needed for login, recovery, email confirmation or two-step verification. */
body:has(#loginShell:not(.hide)) .auth-card .auth-title {
  margin: 0 0 8px;
  color: #16233f;
  font: 700 28px/42px Quicksand, system-ui, sans-serif;
  letter-spacing: -.01em;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-subtitle {
  margin: 0 0 30px;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-label {
  display: block;
  margin: 0 0 8px;
  color: #16233f;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-label.hide,
body:has(#loginShell:not(.hide)) .auth-card .auth-input.hide,
body:has(#loginShell:not(.hide)) .auth-card .auth-help.hide,
body:has(#loginShell:not(.hide)) .auth-card .auth-status.hide,
body:has(#loginShell:not(.hide)) .auth-card .auth-primary.hide,
body:has(#loginShell:not(.hide)) .auth-card .auth-secondary.hide,
body:has(#loginShell:not(.hide)) .auth-card.hide {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-input {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 48px;
  min-width: 0;
  min-height: 0;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(22, 35, 63, .16);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: #16233f;
  font: 15px/normal Nunito, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-input::placeholder {
  /* Closest muted step to the reference that remains readable at normal text
     size: 4.54:1 on the white field instead of the mockup grey's 2.92:1. */
  color: #6b7789;
  opacity: 1;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-input:focus-visible,
body:has(#loginShell:not(.hide)) .auth-card .auth-primary:focus-visible,
body:has(#loginShell:not(.hide)) .auth-card .auth-secondary:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-primary {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0 0 14px;
  padding: 15px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1b4a73 0%, #347cae 100%);
  box-shadow: none;
  color: #fff;
  font: 700 16px/24px Quicksand, system-ui, sans-serif;
  text-align: center;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-secondary {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 10px 0 0;
  padding: 11px 18px;
  border: 1px solid rgba(22, 35, 63, .28);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: #1b4a73;
  font: 700 14px/22px Quicksand, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}

body:has(#loginShell:not(.hide)) .auth-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 14px;
}

body:has(#loginShell:not(.hide)) .auth-actions .auth-primary {
  width: auto;
  min-width: 155px;
  min-height: 50px;
  margin: 0;
  padding: 13px 22px;
}

body:has(#loginShell:not(.hide)) #forgotPassword .auth-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 22px;
  border-radius: 16px;
  background: #e8f1fa;
  color: #1b4a73;
}

body:has(#loginShell:not(.hide)) #forgotPassword .auth-actions {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 360px;
  margin-bottom: 0;
}

body:has(#loginShell:not(.hide)) #forgotPassword .auth-actions .auth-primary {
  width: 100%;
  max-width: none;
  margin: 0 0 2px;
}

body:has(#loginShell:not(.hide)) #forgotPassword .auth-input,
body:has(#loginShell:not(.hide)) #resetPassword .auth-input {
  max-width: 360px;
}

body:has(#loginShell:not(.hide)) .auth-back-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #1b4a73;
  font: 700 14px/22px Nunito, system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
}

body:has(#loginShell:not(.hide)) .auth-cancel:hover {
  color: #123957;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:has(#loginShell:not(.hide)) .auth-back-link::before {
  width: 12px;
  margin-right: 8px;
  font-size: 12px;
  content: "←";
}

body:has(#loginShell:not(.hide)) .auth-back-link:hover { text-decoration: underline; }
body:has(#loginShell:not(.hide)) .auth-back-link:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 2px;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-help,
body:has(#loginShell:not(.hide)) .auth-card .auth-status {
  margin: -15px 0 15px;
  color: #6b7789;
  font-size: 12.5px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-status:empty {
  display: none;
}

body:has(#loginShell:not(.hide)) .auth-subcard {
  margin: 22px 0;
  padding: 20px;
  border: 1px solid rgba(22, 35, 63, .12);
  border-radius: 16px;
  background: #f8fbfe;
  box-shadow: none;
}

body:has(#loginShell:not(.hide)) .auth-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body:has(#loginShell:not(.hide)) .auth-identity-grid:not(:has(.auth-input:not(.hide))) {
  display: none;
}

body:has(#loginShell:not(.hide)) .auth-identity-grid .auth-input {
  margin-bottom: 18px;
}

body:has(#loginShell:not(.hide)) .auth-identity-grid .auth-help,
body:has(#loginShell:not(.hide)) .auth-identity-grid .auth-status {
  margin-top: -12px;
}

body:has(#loginShell:not(.hide)) .auth-code-input {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
}

/* TwoStepBackupCodes.dc.html's risk hierarchy, kept on the live ten-code
   contract. This is a static note, not an alert: nothing just failed and a
   screen reader should encounter it in reading order without an interrupt.
   The reference values are retained where they pass: #8a5a0a on #fdf1df is
   5.31:1 and the amber circle is 3.20:1 against the tint. */
body:has(#loginShell:not(.hide)) .auth-risk-callout {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fdf1df;
  color: #8a5a0a;
  font-size: 13px;
  line-height: 1.45;
}

body:has(#loginShell:not(.hide)) .auth-risk-callout-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #c2760a;
  color: #fff;
  font: 800 12px/1 Quicksand, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) .auth-risk-callout p {
  min-width: 0;
  margin: 0;
}

body:has(#loginShell:not(.hide)) #signin > .auth-eyebrow {
  display: none;
}

body:has(#loginShell:not(.hide)) #signin .auth-title {
  margin: 0 0 8px;
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -.01em;
  color: #16233f;
}

body:has(#loginShell:not(.hide)) #signin .auth-subtitle {
  margin: 0 0 30px;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #signin .auth-label {
  display: block;
  margin: 0 0 8px;
  color: #16233f;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #signin .auth-input {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 48px;
  min-width: 0;
  min-height: 0;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(22, 35, 63, .16);
  border-radius: 12px;
  background: #fff;
  color: #16233f;
  font: 15px/normal Nunito, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) #signin .auth-input::placeholder {
  color: #6b7789;
  opacity: 1;
}

body:has(#loginShell:not(.hide)) #signin .auth-input:focus-visible,
body:has(#loginShell:not(.hide)) #signin button:focus-visible,
body:has(#loginShell:not(.hide)) #signin a:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
}

body:has(#loginShell:not(.hide)) #displayNameNote,
body:has(#loginShell:not(.hide)) #usernameNote {
  margin: -15px 0 15px;
  /* Closest darker step to the mockup's #6f7b8d that clears WCAG AA on
     white at this 12.5px size (4.54:1 rather than 4.29:1). */
  color: #6b7789;
  font-size: 12.5px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #usernameStatus:empty,
body:has(#loginShell:not(.hide)) #signinMsg:empty,
body:has(#loginShell:not(.hide)) #passkeySigninMsg:empty {
  display: none;
}

body:has(#loginShell:not(.hide)) .auth-password-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
}

body:has(#loginShell:not(.hide)) .auth-password-head .auth-label {
  margin: 0;
}

body:has(#loginShell:not(.hide)) #signin #forgotPasswordLink {
  display: block;
  box-sizing: content-box;
  width: auto;
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1b4a73;
  font: 700 13px/1.5 Nunito, system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  appearance: none;
}

/* Login.dc.html leaves six fewer pixels between the identifier and password
   rows than the old dashboard form did. Keep that measured rhythm here; the
   signup-specific helper copy restores its own larger gap below. */
body:has(#loginShell:not(.hide)) #signin #email {
  margin-bottom: 12px;
}

body:has(#loginShell:not(.hide)) #password {
  margin-bottom: 14px;
}

body:has(#loginShell:not(.hide)) .auth-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
  color: #5b6472;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Both signup confirmations belong to the credentials step. Keep them
   visually grouped, with their policy links readable in all three languages. */
body:has(#loginShell:not(.hide)) .loginshell.is-signup #signupTermsRow {
  margin-bottom: 12px;
}
body:has(#loginShell:not(.hide)) .loginshell.is-signup #signupPrivacyRow {
  min-height: 44px;
  margin-bottom: 3px;
}
body:has(#loginShell:not(.hide)) .loginshell.is-signup #signupPrivacyLinks {
  margin: 0 0 18px 27px;
  color: #1b4a73;
  font-size: 12.5px;
  line-height: 1.5;
}
body:has(#loginShell:not(.hide)) .loginshell.is-signup #signupPrivacyLinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
}

body:has(#loginShell:not(.hide)) #signin #password {
  margin-bottom: 16px;
}

body:has(#loginShell:not(.hide)) #signin #rememberMeRow {
  margin-bottom: 28px;
}

body:has(#loginShell:not(.hide)) .auth-consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #687589;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
}

/* Match the reference's native checkbox placement without copying its dark
   native paint. The signup checkbox begins a wrapped sentence and therefore
   keeps a zero margin; applying these offsets to both controls visibly broke
   that line at desktop and tablet widths. */
body:has(#loginShell:not(.hide)) #rememberMeRow input {
  margin: 3px 3px 3px 4px;
}

body:has(#loginShell:not(.hide)) #rememberMeRow input:checked,
body:has(#loginShell:not(.hide)) #signupTermsRow input:checked,
body:has(#loginShell:not(.hide)) #signupPrivacyRow input:checked {
  border-color: #1b4a73;
  background-color: #1b4a73;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.4 11.5 13 4.8'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

body:has(#loginShell:not(.hide)) #rememberMeRow input:focus-visible,
body:has(#loginShell:not(.hide)) #signupTermsRow input:focus-visible,
body:has(#loginShell:not(.hide)) #signupPrivacyRow input:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
}

body:has(#loginShell:not(.hide)) #signupTermsRow {
  align-items: flex-start;
  min-height: 44px;
  margin-bottom: 22px;
}

body:has(#loginShell:not(.hide)) #signupTermsLink {
  display: inline;
  margin: 0;
  color: #1b4a73;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

body:has(#loginShell:not(.hide)) #signin #signinBtn {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0 0 22px;
  padding: 13px 15px;
  border: 0;
  border-radius: 999px;
  /* The reference's #4fa8e0 endpoint gives white text only 2.62:1 contrast.
     #347cae is the nearest restrained blue step used here that clears AA
     (4.53:1); every interpolated point toward #1b4a73 is darker. */
  background: linear-gradient(135deg, #1b4a73 0%, #347cae 100%);
  box-shadow: none;
  color: #fff;
  font: 700 16px/normal Quicksand, system-ui, sans-serif;
  text-align: center;
  opacity: 1;
}

body:has(#loginShell:not(.hide)) #signin #signinBtn:disabled {
  background: linear-gradient(135deg, #5f6f7c 0%, #526a7b 100%);
  cursor: not-allowed;
  opacity: 1;
}

body:has(#loginShell:not(.hide)) .authlinks {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin: 0;
  text-align: center;
  flex-wrap: nowrap;
}

body:has(#loginShell:not(.hide)) .auth-entry-options {
  display: grid;
  /* The password alternative and account-switch prompt both have intrinsic
     text widths. Three equal tracks left only ~95px for "Sign in with a
     passkey" on a 1440px desktop, wrapping it into a stray two-line link. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 2px;
  min-height: 44px;
}

body:has(#loginShell:not(.hide)) .auth-entry-options #passkeySigninWrap {
  grid-column: 1;
  justify-self: center;
}

body:has(#loginShell:not(.hide)) .auth-entry-options .authlinks {
  grid-column: 1;
  justify-self: center;
}

body:has(#loginShell:not(.hide)) .auth-mode-prompt {
  color: #5b6472;
  font: 400 14px/21px Nunito, system-ui, sans-serif;
  white-space: nowrap;
}

body:has(#loginShell:not(.hide)) #signinNote {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: #1b4a73;
  font: 700 14px/21px Nunito, system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

body:has(#loginShell:not(.hide)) #signinNote:hover { text-decoration: underline; }

/* Passkeys remain a complete alternative sign-in method, but the product-only
   addition no longer adds a second full-width action and divider that make the
   designer's compact login card nearly a field taller. */
body:has(#loginShell:not(.hide)) #passkeySigninWrap {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}

body:has(#loginShell:not(.hide)) #passkeySigninWrap .pk-or {
  display: none;
}

body:has(#loginShell:not(.hide)) #passkeySigninBtn {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1b4a73;
  font: 700 13px/20px Nunito, system-ui, sans-serif;
  text-decoration: underline;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup .auth-password-head {
  display: contents;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #signin #signinBtn {
  margin-bottom: 14px;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #passkeySigninWrap {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #signin #forgotPasswordLink {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #signin > .auth-entry-options {
  display: flex;
  align-self: stretch;
  justify-content: flex-end;
  margin: 0;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup .auth-entry-options > .authlinks {
  flex: 0 0 auto;
  justify-content: flex-start;
  text-align: left;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup .auth-entry-options .auth-mode-prompt {
  display: none;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup .loginpanel {
  justify-content: flex-start;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #signupTermsRow {
  margin-top: 17px;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup:not(.is-parent-name) #usernameNote {
  margin-bottom: 24px;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup:not(.is-parent-name) #signin #email {
  margin-bottom: 22px;
}

body:has(#loginShell:not(.hide)) .loginshell.is-signup #signinNote {
  display: inline-flex;
  min-height: 44px;
  padding: 11px 0;
  color: #1b4a73;
  font: 700 14px/21px Nunito, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) .is-parent-name #displayNameField {
  display: flex;
  flex-direction: column;
}

body:has(#loginShell:not(.hide)) .loginshell.is-parent-name #signin > .auth-entry-options {
  display: none !important;
}

body:has(#loginShell:not(.hide)) .is-parent-name #displayNameSuggestions { order: 1; }
body:has(#loginShell:not(.hide)) .is-parent-name #displayNameLabel { order: 2; }
body:has(#loginShell:not(.hide)) .is-parent-name #displayName { order: 3; }
body:has(#loginShell:not(.hide)) .is-parent-name #displayNameNote { display: none !important; }

body:has(#loginShell:not(.hide)) .auth-name-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 2px 0 20px;
}

body:has(#loginShell:not(.hide)) .auth-name-chip {
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid rgba(22, 35, 63, .16);
  border-radius: 999px;
  background: #fff;
  color: #16233f;
  font: 700 15px/22px Quicksand, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) .auth-name-chip[aria-pressed="true"] {
  border: 2px solid #2b6cb0;
  background: #e8f1fa;
  color: #173f66;
  padding: 10px 19px;
}

@media (min-width: 704px) {
  body:has(#loginShell:not(.hide)) .loginwindow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: 0;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup .loginwindow {
    min-height: 738px;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup.is-parent-name .loginwindow {
    min-height: 0;
  }
}

/* A full desktop form column has enough width for both alternatives in one
   quiet row. Use their actual intrinsic widths, not symmetrical filler tracks;
   at tablet/narrow-desktop widths the default two-row stack remains intact. */
@media (min-width: 1100px) {
  body:has(#loginShell:not(.hide)) .auth-entry-options {
    grid-template-columns: max-content minmax(0, 1fr);
    justify-items: normal;
    gap: 18px;
  }

  body:has(#loginShell:not(.hide)) .auth-entry-options #passkeySigninWrap {
    justify-self: start;
  }

  body:has(#loginShell:not(.hide)) .auth-entry-options .authlinks {
    grid-column: 2;
    justify-self: end;
  }
}

@media (min-width: 1000px) {
  body:has(#loginShell.is-signup:not(.hide)) #main {
    padding-bottom: 39px;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup .loginwindow {
    min-height: 704px;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup.is-parent-name .loginwindow {
    min-height: 0;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup .loginpanel {
    padding-bottom: 10px;
  }
}

@media (max-width: 703.98px) {
  /* Every layer in the one-column auth stack is allowed to shrink.  Explicit
     min-width:0 matters for grid/flex descendants: document.scrollWidth can
     remain equal to the viewport while a child is clipped outside its card. */
  body:has(#loginShell:not(.hide)) .loginwindow,
  body:has(#loginShell:not(.hide)) .loginpanel,
  body:has(#loginShell:not(.hide)) .auth-card,
  body:has(#loginShell:not(.hide)) .auth-field,
  body:has(#loginShell:not(.hide)) .auth-identity-grid,
  body:has(#loginShell:not(.hide)) .auth-entry-options,
  body:has(#loginShell:not(.hide)) .auth-actions {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  body:has(#loginShell:not(.hide)) .loginpanel input,
  body:has(#loginShell:not(.hide)) .loginpanel select,
  body:has(#loginShell:not(.hide)) .loginpanel textarea,
  body:has(#loginShell:not(.hide)) .loginpanel button,
  body:has(#loginShell:not(.hide)) .loginpanel a {
    max-width: 100%;
  }

  body:has(#loginShell:not(.hide)) .pagehead {
    min-height: 74px;
    padding: 14px 16px;
  }

  body:has(#loginShell:not(.hide)) .pagehead .site-brand-logo {
    width: 128px;
    height: 32px;
  }

  body:has(#loginShell:not(.hide)) .pagehead .controls {
    gap: 8px;
  }

  body:has(#loginShell:not(.hide)) .pagehead .langsel {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding-right: 28px;
  }

  body:has(#loginShell:not(.hide)) #main {
    padding: 28px 16px 40px;
  }

  body:has(#loginShell:not(.hide)) .loginwindow {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  body:has(#loginShell:not(.hide)) .loginstory {
    display: none;
  }

  body:has(#loginShell:not(.hide)) .loginpanel {
    padding: 70px 24px 34px;
  }

  body:has(#loginShell:not(.hide)) .auth-home-link {
    top: 8px;
    right: 24px;
  }

  body:has(#loginShell:not(.hide)) .auth-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
  }

  body:has(#loginShell:not(.hide)) .auth-actions .auth-primary {
    width: 100%;
  }

  body:has(#loginShell:not(.hide)) .auth-actions .auth-back-link {
    justify-content: center;
  }

  body:has(#loginShell:not(.hide)) .auth-identity-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body:has(#loginShell:not(.hide)) .auth-entry-options,
  body:has(#loginShell:not(.hide)) .loginshell.is-signup #signin > .auth-entry-options {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup .auth-entry-options > .authlinks {
    align-self: stretch;
    margin: 4px 0 0;
    text-align: center;
    justify-content: center;
  }

  body:has(#loginShell:not(.hide)) .loginshell.is-signup .auth-forgot-link {
    align-self: stretch;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 340px) {
  body:has(#loginShell:not(.hide)) .pagehead {
    gap: 6px;
    padding-inline: 12px;
  }

  body:has(#loginShell:not(.hide)) .pagehead .site-brand-logo {
    width: 104px;
    height: 26px;
  }

  body:has(#loginShell:not(.hide)) .pagehead .langsel {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
  }
}

/* Password recovery is a three-state flow in the supplied handoff: request the
   email link, choose the replacement password, then acknowledge completion.
   These rules keep those states in the same component vocabulary as sign-in
   without allowing older dashboard form styles to leak back into them. */
body:has(#loginShell:not(.hide)) #forgotPassword .auth-lock-badge,
body:has(#loginShell:not(.hide)) #resetPassword .auth-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 22px;
  border-radius: 16px;
  background: #e8f1fa;
  color: #1b4a73;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-recovery-field,
body:has(#loginShell:not(.hide)) #resetPassword .auth-requirements,
body:has(#loginShell:not(.hide)) #resetPassword #resetMsg,
body:has(#loginShell:not(.hide)) #resetPassword .auth-actions {
  width: 100%;
  max-width: 360px;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-recovery-field {
  margin: 0 0 20px;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-recovery-field .auth-input {
  margin-bottom: 0;
}

body:has(#loginShell:not(.hide)) .auth-card .auth-input[aria-invalid="true"] {
  border: 2px solid #c0342c;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-field-error {
  margin: 7px 0 0;
  color: #a12721;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-field-error.hide {
  display: none !important;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-requirements {
  margin: -6px 0 26px;
  color: #6b7789;
  font-size: 12.5px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #resetPassword #resetMsg {
  margin: -12px 0 18px;
}

body:has(#loginShell:not(.hide)) #resetPassword #resetMsg:empty {
  display: none;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-actions {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

body:has(#loginShell:not(.hide)) #resetPassword .auth-actions .auth-primary {
  width: 100%;
  max-width: none;
  margin: 0 0 2px;
}

/* PasswordUpdated.dc.html is intentionally a quiet, one-column confirmation,
   not the two-sided form card with a green status sentence inserted into it. */
body:has(#passwordUpdated:not(.hide)) .pagehead .controls,
body:has(#passwordUpdated:not(.hide)) .loginstory,
body:has(#passwordUpdated:not(.hide)) .auth-home-link,
body:has(#passwordUpdated:not(.hide)) .loginsteps {
  display: none !important;
}

body:has(#passwordUpdated:not(.hide)) #main {
  padding: clamp(48px, 9vw, 110px) 20px 48px;
}

body:has(#passwordUpdated:not(.hide)) .loginwindow {
  display: block;
  width: min(520px, 100%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:has(#passwordUpdated:not(.hide)) .loginpanel {
  display: block;
  padding: 0;
  background: transparent;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated {
  align-items: center;
  text-align: center;
}

body:has(#passwordUpdated:not(.hide)) .auth-success-card .auth-subtitle {
  max-width: 410px;
  margin-right: auto;
  margin-left: auto;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated:focus {
  outline: none;
}

body:has(#passwordUpdated:not(.hide)) .auth-success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 0 28px;
  border-radius: 50%;
  background: #e3f5ea;
  color: #287c4e;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated .auth-title {
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1.4;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated .auth-subtitle {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.6;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated .auth-primary {
  width: min(340px, 100%);
  margin: 0 auto;
}

body:has(#passwordUpdated:not(.hide)) #passwordUpdated .auth-primary::after {
  margin-left: 6px;
  content: "→";
}

/* GoodQA #49 — confirmation is a real auth state, not a dashboard warning
   card pasted into the auth form. These selectors are intentionally rooted in
   the two email-confirmation panels so the reusable auth primitives keep
   serving sign-in, password recovery and every existing two-step method. */
body:has(#verifyRequired:not(.hide)) .loginwindow,
body:has(#emailVerification:not(.hide)) .loginwindow {
  min-height: 604px;
}

body:has(#loginShell:not(.hide)) .auth-email-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 22px;
  border-radius: 16px;
  background: #e8f1fa;
  color: #1b4a73;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-card .auth-title {
  margin-bottom: 10px;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-intro {
  max-width: 410px;
  margin-bottom: 18px;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-intro strong {
  color: #16233f;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-intro > span:last-child {
  display: block;
  margin-top: 4px;
}

body:has(#loginShell:not(.hide)) .auth-open-inbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-protection {
  display: flex;
  align-items: flex-start;
  max-width: 410px;
  margin: 0 0 22px;
  color: #365d4a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-protection::before {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 8px 0 0;
  border-radius: 50%;
  background: #e3f5ea;
  color: #287c4e;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  content: "✓";
}

/* GoodQA #49/#52 — the capability-gated six-digit confirmation component.
   Everything is rooted in #verifyRequired so no dashboard or two-step code
   field can inherit this layout. Six real inputs preserve correction and
   per-position focus; the first also owns one-time-code autofill/full paste. */
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  margin: 0;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel.hide,
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error.hide,
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.hide {
  display: none !important;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 10px);
  width: 100%;
  margin: 0 0 12px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell {
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: 56px;
  min-height: 44px;
  margin: 0;
  padding: 8px 2px;
  border: 1px solid rgba(22, 35, 63, .20);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: #16233f;
  font: 700 22px/1 Quicksand, system-ui, sans-serif;
  text-align: center;
  caret-color: #1b4a73;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell:hover {
  border-color: rgba(27, 74, 115, .55);
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell:focus-visible {
  border-color: #2b6cb0;
  outline: 3px solid #2b6cb0;
  outline-offset: 2px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell[aria-invalid="true"] {
  border: 2px solid #c0342c;
  background: #fff7f7;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-expiry,
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-link-option {
  margin: 0;
  color: #6b7789;
  font-size: 12.5px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-link-option {
  margin-top: 4px;
  margin-bottom: 26px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel.is-invalid .auth-code-link-option,
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel.is-invalid > .auth-primary {
  display: none;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel.is-invalid .auth-code-expiry {
  margin-bottom: 24px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel > .auth-primary {
  width: 100%;
  max-width: 360px;
  margin-bottom: 12px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-panel > .auth-primary:disabled,
body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.is-primary .auth-primary:disabled {
  border: 1px solid #c4ceda;
  background: #e1e7ee;
  box-shadow: none;
  color: #46556b;
  cursor: not-allowed;
  opacity: 1;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #e7b1ad;
  border-radius: 14px;
  background: #fce4e4;
  color: #8c2a24;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error-copy {
  min-width: 0;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error p {
  margin: 0;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-countdown {
  margin-top: 2px;
  font-weight: 600;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #c0342c;
  color: #fff;
  font: 800 12px/1 Quicksand, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-confirmation-exits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 16px;
  width: 100%;
  max-width: 410px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #5b6472;
  font-size: 14px;
  gap: 4px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap .auth-inline-link {
  min-height: 44px;
  padding-inline: 2px;
  text-decoration: none;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.is-primary > span {
  display: none;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.is-primary .auth-primary {
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 13px 22px;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-status {
  width: 100%;
  max-width: 410px;
  min-height: 0;
  margin: 6px 0 0;
  color: #365d4a;
  text-align: left;
}

body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-status:empty {
  display: none;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 410px;
  margin: 0;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-status-title {
  margin: 0 0 3px;
  color: #16233f;
  font: 700 13.5px/1.5 Quicksand, system-ui, sans-serif;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-status-copy {
  margin: 0 0 18px;
  color: #6b7789;
  font-size: 13px;
  line-height: 1.5;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-actions .auth-primary {
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  text-decoration: none;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 24px;
  min-height: 44px;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-links .auth-primary {
  /* This group becomes a column for the unknown-provider fallback. A 100%
     flex-basis then means 100% of the COLUMN HEIGHT, not 100% width, and made
     the primary action more than twice the reference height. Width is owned
     by the column rule below; keep the control's vertical size intrinsic. */
  flex: 0 0 auto;
}

/* With a provider we cannot link safely, the real status check is promoted
   into this group. Force that fallback and Resend onto their own rows at every
   width; otherwise the older row flex rules can place Resend beyond a 320px
   card after the primary grows to 100%. */
body:has(#loginShell:not(.hide)) .auth-confirmation-links:has(.auth-primary:not(.hide)) {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-links:has(.auth-primary:not(.hide)) .auth-inline-link {
  width: 100%;
}

body:has(#loginShell:not(.hide)) .auth-inline-link {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 9px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #1b4a73;
  font: 800 13.5px/22px Nunito, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:has(#loginShell:not(.hide)) .auth-inline-link:hover {
  color: #123653;
}

body:has(#loginShell:not(.hide)) .auth-inline-link:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 3px;
}

body:has(#loginShell:not(.hide)) .auth-inline-link:disabled {
  color: #6b7789;
  cursor: wait;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-actions .auth-status {
  margin: 6px 0 0;
  color: #365d4a;
  text-align: center;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-different-email {
  align-self: flex-start;
  margin-top: 0;
}

body:has(#loginShell:not(.hide)) .auth-confirmation-different-email::before {
  display: none;
}

body:has(#loginShell:not(.hide)) #emailVerification .auth-actions {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 410px;
  margin: 0;
}

body:has(#loginShell:not(.hide)) #emailVerification .auth-actions .auth-primary {
  width: 100%;
  margin: 0 0 2px;
}

@media (max-width: 703.98px) {
  body:has(#verifyRequired:not(.hide)) .loginwindow,
  body:has(#emailVerification:not(.hide)) .loginwindow {
    min-height: 0;
  }

  body:has(#loginShell:not(.hide)) .auth-confirmation-links {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  body:has(#loginShell:not(.hide)) #emailVerifyStatusRetryBtn.auth-primary {
    min-height: 52px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 20px;
  }

  body:has(#loginShell:not(.hide)) .auth-confirmation-different-email {
    align-self: stretch;
    justify-content: center;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-confirmation-exits {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-confirmation-different-email {
    align-self: flex-start;
    justify-content: flex-start;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.is-primary,
  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-resend-wrap.is-primary .auth-primary {
    width: 100%;
  }
}

/* Six 44px targets cannot truthfully fit in one row below 380px once the
   card's safe gutters are retained. Keep two predictable rows of three right
   through the boundary instead of leaving 351–379px with undersized cells. */
@media (max-width: 379.98px) {
  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cells {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    max-width: 240px;
  }
}

@media (forced-colors: active) {
  body:has(#loginShell:not(.hide)) .themebtn {
    forced-color-adjust: none;
  }

  body:has(#loginShell:not(.hide)) .themebtn::before {
    box-sizing: border-box;
    border: 2px solid CanvasText;
    background: Canvas;
  }

  body:has(#loginShell:not(.hide)) .themebtn::after {
    border: 1px solid Highlight;
    background: Highlight;
  }

  body:has(#loginShell:not(.hide)) .auth-card .auth-primary {
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  body:has(#loginShell:not(.hide)) .auth-card .auth-primary:disabled {
    border-color: GrayText;
    background: Canvas;
    color: GrayText;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell:focus-visible {
    border-color: Highlight;
    outline-color: Highlight;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-cell[aria-invalid="true"] {
    border-color: LinkText;
    background: Canvas;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  body:has(#loginShell:not(.hide)) #verifyRequired .auth-code-error-icon {
    border: 2px solid CanvasText;
    background: CanvasText;
    color: Canvas;
    forced-color-adjust: none;
  }
}

/* GoodQA #51 — dedicated first-run Add Child page. The designer supplied a
   full-page composition, so the legacy two-column sign-in story and progress
   dots are intentionally absent here rather than merely reskinned. */
body:has(#firstRunChild:not(.hide)) {
  background: #fff !important;
}

/* The starter-rules half of first run uses the same bright standalone shell,
   but gives the richer wizard more room. It intentionally has no portal rail,
   login story, progress dots, theme switch, or Add Child "save later" action;
   the wizard owns its own Back / Continue / Skip controls. */
body:has(#firstRunRules:not(.hide)) {
  /* First-run is intentionally a bright, theme-independent setup surface.
     A remembered dark portal preference must not turn only the nested rules
     card dark while the required auth shell and hidden theme control stay
     light. Scope the established light roles to this page without changing
     the parent's persisted portal preference. */
  color-scheme: light;
  --ink: #16233f;
  --dusk: #fff;
  --dusk2: #fff;
  --cloud: #16233f;
  --haze: #5b6472;
  --line: rgba(22, 35, 63, .16);
  --arowline: rgba(22, 35, 63, .16);
  --track: rgba(22, 35, 63, .16);
  --bg: #fff;
  --glow: #2b6cb0;
  --text-primary: #16233f;
  --text-secondary: #5b6472;
  --primary-cta-gradient: linear-gradient(135deg, #1b4a73, #207cb7);
  --primary-cta-text: #fff;
  background: #fff !important;
}

body:has(#firstRunChild:not(.hide)) .pagehead .controls > :not(#firstRunSaveLater):not(#langSel),
body:has(#firstRunChild:not(.hide)) .loginstory,
body:has(#firstRunChild:not(.hide)) .loginsteps,
body:has(#firstRunChild:not(.hide)) .auth-session-alert {
  display: none !important;
}

body:has(#firstRunRules:not(.hide)) .pagehead .controls > :not(#langSel),
body:has(#firstRunRules:not(.hide)) .loginstory,
body:has(#firstRunRules:not(.hide)) .loginsteps,
body:has(#firstRunRules:not(.hide)) .auth-session-alert {
  display: none !important;
}

body:has(#firstRunChild:not(.hide)) #firstRunSaveLater {
  display: inline-flex !important;
}

body:has(#firstRunChild:not(.hide)) #langSel {
  display: block !important;
}

body:has(#firstRunRules:not(.hide)) #langSel {
  display: block !important;
}

.first-run-save-later {
  appearance: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4f5b6d;
  font: 700 14px/1.2 Nunito, system-ui, sans-serif;
  cursor: pointer;
}

.first-run-save-later:hover { color: #17335a; text-decoration: underline; }
.first-run-save-later:disabled { cursor: wait; opacity: .65; }

body:has(#firstRunChild:not(.hide)) #main {
  padding: clamp(28px, 4.45vw, 64px) clamp(16px, 5vw, 64px) 72px;
  background: #fff;
}

body:has(#firstRunRules:not(.hide)) #main {
  padding: clamp(20px, 4vw, 56px) clamp(12px, 4vw, 48px) 72px;
  background: #fff;
}

body:has(#firstRunChild:not(.hide)) .loginwindow {
  display: block;
  /* AddChildProfile.dc.html's desktop card is 752px with 56px gutters.
     The old 640px cap and full-width CTA were portal conventions, not the
     supplied first-run artboard. */
  width: min(752px, 100%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:has(#firstRunRules:not(.hide)) .loginwindow {
  display: block;
  width: min(900px, 100%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:has(#firstRunChild:not(.hide)) .loginpanel {
  display: block;
  padding: 0;
  background: transparent;
}

body:has(#firstRunRules:not(.hide)) .loginpanel {
  display: block;
  min-width: 0;
  padding: 0;
  background: transparent;
}

body:has(#firstRunChild:not(.hide)) .auth-home-link {
  display: inline-flex;
  min-height: 44px;
  margin: 0 0 16px;
  align-items: center;
  color: #244b78;
  font-weight: 700;
}

body:has(#firstRunRules:not(.hide)) .auth-home-link {
  display: inline-flex;
  min-height: 44px;
  margin: 0 0 8px;
  align-items: center;
  color: #244b78;
  font-weight: 700;
}

body:has(#firstRunChild:not(.hide)) .loginpanel > .first-run-child-card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 48px clamp(28px, 5vw, 56px);
  border: 1px solid #e0e6ee;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(21, 42, 71, .08);
}

body:has(#firstRunRules:not(.hide)) .loginpanel > .first-run-rules-card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#firstRunRulesMount { min-width: 0; }

#firstRunRulesTitle { margin: 0; }

.first-run-child-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  margin-top: 16px;
  margin-bottom: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #e6f5ed;
  color: #176b49;
}

#firstRunChild .auth-title {
  margin-bottom: 10px;
  color: #14213d;
  font-size: 28px;
  line-height: 1.15;
}

#firstRunChild .auth-subtitle {
  max-width: 720px;
  margin: 0 0 30px;
  color: #59677a;
  font-size: 16px;
}

#firstRunChild .auth-input {
  width: 100%;
  min-height: 54px;
  margin-bottom: 7px;
  border-color: #c9d2de;
  border-radius: 14px;
  background: #fff;
  color: #14213d;
}

#firstRunChild .first-run-child-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:has(#firstRunChild:not(.hide)) #firstRunChild .auth-help {
  margin: 0 0 26px;
  color: #526176;
  font-size: 13.5px;
}

.first-run-age-group {
  min-width: 0;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.first-run-age-group legend {
  margin: 0 0 12px;
  padding: 0;
  color: #14213d;
  font-size: 14px;
  font-weight: 800;
}

.first-run-age-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.first-run-age-pills input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.first-run-age-pills label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  min-height: 48px;
  padding: 11px 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd4df;
  border-radius: 999px;
  background: #fff;
  color: #2c3d58;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.first-run-age-pills label:hover { background: #f0f5fa; }
.first-run-age-pills input:checked + label {
  border-color: #24865c;
  background: #e7f6ee;
  color: #145d40;
  box-shadow: inset 0 0 0 1px #24865c;
}

.first-run-age-pills input:focus-visible + label,
.first-run-save-later:focus-visible,
#firstRunChild .auth-input:focus-visible,
#firstRunChild .auth-primary:focus-visible {
  outline: 3px solid #0b6fa8;
  outline-offset: 3px;
}

/* Windows High Contrast replaces the green selected fill and inset border
   above. Keep the native radios as the keyboard/AT source of truth, but give
   the visible label a system-painted structure that does not depend on color:
   every pill has a real 2px border and only the checked pill has an inner
   radio dot. The offset outline remains a separate focus signal. */
@media (forced-colors: active) {
  .first-run-age-pills label {
    gap: 8px;
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .first-run-age-pills label::before {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid CanvasText;
    border-radius: 50%;
    background: Canvas;
    forced-color-adjust: none;
  }

  .first-run-age-pills input:checked + label {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    font-weight: 800;
  }

  .first-run-age-pills input:checked + label::before {
    border-color: Highlight;
    background: Highlight;
    box-shadow: inset 0 0 0 4px Canvas;
  }

  .first-run-age-pills input:focus-visible + label {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

body:has(#firstRunChild:not(.hide)) #firstRunChild .first-run-add-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  min-height: 48px;
  margin: 8px 0 0;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1b4a73 0%, #1477ad 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(22, 91, 143, .22);
}

#firstRunChild .auth-status {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: #34465f;
}

@media (max-width: 760px) {
  body:has(#firstRunChild:not(.hide)) .pagehead {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 14px 16px;
  }

  body:has(#firstRunRules:not(.hide)) .pagehead {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 14px 16px;
  }

  body:has(#firstRunChild:not(.hide)) .pagehead .controls {
    /* Keep the designer's one-row phone hierarchy when both real actions fit.
       Long translated labels may still wrap naturally. */
    flex: 0 1 auto;
    gap: 6px;
    justify-content: flex-end;
  }

  body:has(#firstRunRules:not(.hide)) .pagehead .controls {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  body:has(#firstRunChild:not(.hide)) .pagehead .site-brand-logo {
    width: 104px;
    height: 26px;
  }

  body:has(#firstRunChild:not(.hide)) .pagehead .langsel {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    padding-right: 20px;
  }

  body:has(#firstRunRules:not(.hide)) .pagehead .site-brand-logo {
    width: 128px;
    height: 32px;
  }

  .first-run-save-later {
    min-height: 44px;
    padding-inline: 2px;
    font-size: 13px;
  }

  body:has(#firstRunChild:not(.hide)) #main {
    padding: 20px 12px 44px;
  }

  body:has(#firstRunRules:not(.hide)) #main {
    padding: 10px 10px 40px;
  }

  body:has(#firstRunChild:not(.hide)) .loginpanel > .first-run-child-card {
    padding: 30px 20px;
    border-radius: 22px;
  }

}

@media (max-width: 360px) {
  body:has(#firstRunChild:not(.hide)) .pagehead .controls {
    flex: 1 1 100%;
  }

  body:has(#firstRunChild:not(.hide)) .pagehead {
    align-items: center;
    gap: 8px;
  }

  body:has(#firstRunRules:not(.hide)) .pagehead {
    align-items: center;
    gap: 8px;
  }

  body:has(#firstRunChild:not(.hide)) .pagehead .site-brand-logo {
    width: 104px;
    height: 26px;
  }

  body:has(#firstRunRules:not(.hide)) .pagehead .site-brand-logo {
    width: 104px;
    height: 26px;
  }

  .first-run-save-later { max-width: 146px; }
}