/* Sign-in, sign-up and password pages (body.yx-auth): the marketing site's
   tokens and controls, light and dark. Overrides the pages' inline styles. */
body.yx-auth {
  --auth-bg: #FAFAF8; --auth-card: #FFFFFF; --auth-field: #F5F2EC;
  --auth-text: #0A0A0A; --auth-text-s: #6E5F52; --auth-rule: #E8E5E0;
  --auth-cta: #C4B5A8; --auth-cta-hover: #A89880; --auth-cta-text: #0A0A0A;
  background: var(--auth-bg); color: var(--auth-text);
  padding-left: 16px; padding-right: 16px;
}
@media (prefers-color-scheme: dark) {
  body.yx-auth {
    color-scheme: dark;
    --auth-bg: #0A0908; --auth-card: #121110; --auth-field: #1A1918;
    --auth-text: #F5F2EC; --auth-text-s: #AAA099; --auth-rule: rgba(245,242,236,0.14);
    /* the pages' own inline tokens */
    --noir: #F5F2EC; --espresso: #F5F2EC; --cream: #1A1918; --cream2: #1A1918;
    --white: #121110; --border-light: rgba(245,242,236,0.14);
  }
  body.yx-auth .ylauxi-logo { filter: invert(1); }
  body.yx-auth :is(.sub, .tos-row label, .divider span, .signin-link, .trial-note, .rec-sub, .btn-ghost, .override-row label, .field label) { color: var(--auth-text-s); }
}

body.yx-auth .wordmark, body.yx-auth .header .brand { line-height: 0; margin-bottom: 36px; }
body.yx-auth .header .brand { margin-bottom: 20px; }
body.yx-auth .ylauxi-logo { height: 26px; width: auto; }

body.yx-auth .card, body.yx-auth .rec-card, body.yx-auth .q-opt {
  background: var(--auth-card); border: 1px solid var(--auth-rule); border-radius: 14px;
}
body.yx-auth .card { padding: 36px 28px; }
body.yx-auth .q-opt, body.yx-auth .rec-card { background: var(--auth-field); }

body.yx-auth h1, body.yx-auth .headline, body.yx-auth .rec-title { color: var(--auth-text); }
body.yx-auth .sub, body.yx-auth label { color: var(--auth-text-s); }

body.yx-auth input:not([type="checkbox"]):not([type="radio"]),
body.yx-auth select, body.yx-auth textarea {
  min-height: 44px; border-radius: 10px; font-size: 16px;
  background: var(--auth-field); border: 1px solid var(--auth-rule); color: var(--auth-text);
}
body.yx-auth input:focus, body.yx-auth select:focus, body.yx-auth textarea:focus {
  border-color: var(--auth-cta); outline: 2px solid rgba(196,181,168,0.35); outline-offset: 1px;
}

body.yx-auth .btn {
  min-height: 44px; border-radius: 999px; border: 0;
  background: var(--auth-cta); color: var(--auth-cta-text); letter-spacing: 0.18em;
}
body.yx-auth .btn:hover { background: var(--auth-cta-hover); }
body.yx-auth .btn:focus-visible { outline: 2px solid var(--auth-text); outline-offset: 2px; }

body.yx-auth .err { background: var(--auth-field); border-color: var(--auth-rule); color: var(--auth-text); border-radius: 10px; }

body.yx-auth .links { gap: 12px; flex-wrap: wrap; }
body.yx-auth a:not(.btn):not(:has(img)) {
  color: var(--auth-text-s); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--auth-rule);
}
body.yx-auth .links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
body.yx-auth a:not(.btn):hover { color: var(--auth-text); text-decoration-color: currentColor; }