@charset "UTF-8";
/* ==========================================================================
   AUTH SCREENS — auth.scss (FUIX-1514)
   ─────────────────────────────────────────────────────────────────────────
   Loaded only by layouts/auth.haml and layouts/onboarding.haml, after the
   Tailwind build, so the design-system custom properties are already defined.

   Most styling lives in `tw:` utilities in the views. This file holds only
   what utilities cannot express cleanly:
     1. The Ink Navy stage with its top glow.
     2. The Fitune lockup, recoloured through a mask of the design-system SVG.
     3. Inline field errors, including the one the sign-in inline script builds.
     4. Browser autofill colours.
     5. Password rules on create account and set new password (FUIX-1590, FUIX-1592).
     6. Forgot password: error callout and confirmation icon (FUIX-1591).

   Rules: design-system tokens only, never hex. Every selector is scoped
   under .auth-layout so nothing leaks into the rest of the admin.
   ========================================================================== */
/* 1 — Stage. `.auth-layout` beats general.css `body` on specificity. */
/* line 21, app/assets/stylesheets/auth.scss */
.auth-layout {
  min-height: 100dvh;
  margin: 0;
  background-color: var(--color-bg-inverse);
  background-image: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--primitive-color-ink-navy-800) 70%, transparent), transparent 70%);
  background-repeat: no-repeat;
  color: var(--color-text-inverse);
  font-family: var(--brand-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2 — Logo lockup reversed to text-inverse. The SVG is the design-system asset; the
   mask keeps it a single source instead of a recoloured local copy. */
/* line 40, app/assets/stylesheets/auth.scss */
.auth-layout .auth-logo {
  display: block;
  aspect-ratio: 159 / 27;
  background-color: var(--color-text-inverse);
  -webkit-mask: url(/assets/@fitu-app/design-system/dist/assets/brand/fitune-logo-010733d0d9841814318a2d743c5097f4e03f8bf31aebec1b4e785c0bcd95af25.svg) center/contain no-repeat;
  mask: url(/assets/@fitu-app/design-system/dist/assets/brand/fitune-logo-010733d0d9841814318a2d743c5097f4e03f8bf31aebec1b4e785c0bcd95af25.svg) center/contain no-repeat;
}

/* 3 — Inline errors. One treatment for both sources, placed under the field:
   - .auth-field-error: client-side checks from auth.js (empty or malformed input).
   - .alert-danger: server error in .error-container. The sign-in inline script
     renders .alert.alert-danger > ul.error-list > li.error-item; create account
     renders the display_errors helper, .alert.alert-danger > ul > li.
   The icon is Phosphor warning-circle (regular, the DS Icon path), drawn in
   currentColor via a mask.
   @ds-candidate component: Input error icon — the DS Input helper text has no leading icon. */
/* line 56, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-field-error,
.auth-layout .auth-card .error-container .alert-danger {
  display: flex;
  gap: var(--primitive-spacing-15);
  align-items: flex-start;
  margin: var(--primitive-spacing-15) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-danger);
  /* Same type as the DS Input helper text: text-xs, leading-caption, tracking-caption. */
  font-size: var(--primitive-font-size-xs);
  line-height: var(--primitive-line-height-caption);
  letter-spacing: var(--primitive-letter-spacing-caption);
}

/* line 72, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-field-error[hidden] {
  display: none;
}

/* line 76, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-field-error::before,
.auth-layout .auth-card .error-container .alert-danger::before,
.auth-layout .auth-card .auth-callout::before {
  flex: none;
  width: var(--primitive-spacing-4);
  height: var(--primitive-spacing-4);
  margin-top: var(--primitive-spacing-05);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  content: '';
}

/* line 89, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .error-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Legacy CSS gives .error-item its own red and size; take the error treatment above. */
/* line 96, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .error-container .error-item {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* The "already taken" error from display_errors links to log in. Underlined, unlike the
   other secondary links: inside danger text, colour alone does not set it apart (WCAG 1.4.1).
   @ds-candidate pattern: Inline link in error text — underlined; an exception to the no-underline links. */
/* line 105, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .error-container .alert-danger a {
  color: inherit;
  font-weight: var(--primitive-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--primitive-spacing-05);
}

/* 4 — Browser autofill. Chrome and Safari paint autofilled fields in their own
   blue; keep them on the card surface so the form does not change colour. */
/* line 114, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card input:-webkit-autofill,
.auth-layout .auth-card input:-webkit-autofill:hover,
.auth-layout .auth-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-default) inset;
  -webkit-text-fill-color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
}

/* 5 — Password rules (PRD R3). The list is always visible, so the fields below
   do not move (FUIX-1592). auth.js sets [data-met] on each rule as it is met;
   [data-error] on the list after a failed submit turns the unmet rules to
   danger. The markers are Phosphor circle and check-circle (regular, the DS
   Icon paths), drawn in currentColor via a mask.
   @ds-candidate component: PasswordRules — the DS has no live password requirements checklist. */
/* line 128, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules ul {
  display: grid;
  gap: var(--primitive-spacing-1);
  margin: var(--primitive-spacing-2) 0 0;
  padding: 0;
  list-style: none;
}

/* line 136, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules li {
  display: flex;
  gap: var(--primitive-spacing-2);
  align-items: center;
  margin: 0;
  color: var(--color-text-secondary);
  /* Same type as the DS Input helper text and the inline errors above. */
  font-size: var(--primitive-font-size-xs);
  line-height: var(--primitive-line-height-caption);
  letter-spacing: var(--primitive-letter-spacing-caption);
  transition: color var(--primitive-duration-fast) var(--primitive-easing-ease-in-out);
}

/* line 149, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules li::before {
  flex: none;
  width: var(--primitive-spacing-4);
  height: var(--primitive-spacing-4);
  /* @ds-candidate token: Muted icon colour — the DS has no icon colour tokens; the pending marker borrows border-input-default. */
  background-color: var(--color-border-input-default);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88'/%3E%3C/svg%3E") center/contain no-repeat;
  content: '';
  transition: background-color var(--primitive-duration-fast) var(--primitive-easing-ease-in-out);
}

/* line 161, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules li[data-met] {
  color: var(--color-text-success);
}

/* line 165, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules li[data-met]::before {
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88'/%3E%3C/svg%3E");
}

/* line 171, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules[data-error] li:not([data-met]) {
  color: var(--color-text-danger);
}

/* line 175, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-password-rules[data-error] li:not([data-met])::before {
  background-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  /* line 180, app/assets/stylesheets/auth.scss */
  .auth-layout .auth-card .auth-password-rules li,
.auth-layout .auth-card .auth-password-rules li::before {
    transition: none;
  }
}

/* 6 — Forgot password (FUIX-1591).
   - .auth-callout: server error. Colours come from the design-system feedback utilities in
     the view, the same set as the InlineMessage error variant. The icon shares the
     warning-circle rule in section 3 (including its 2px optical offset, as InlineMessage
     mt-05), sized icon-size-lg as InlineMessage md and drawn in the feedback icon token.
   - .auth-mail-icon: the envelope on the confirmation card, Phosphor envelope-simple
     (regular, the DS Icon path), drawn in currentColor in icon-size-xl. Neutral, not
     success: the card tells the person where to look, it does not confirm that a link
     was sent. */
/* line 195, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-callout::before {
  width: var(--primitive-icon-size-lg);
  height: var(--primitive-icon-size-lg);
  background-color: var(--color-feedback-danger-icon);
}

/* line 201, app/assets/stylesheets/auth.scss */
.auth-layout .auth-card .auth-mail-icon::before {
  width: var(--primitive-icon-size-xl);
  height: var(--primitive-icon-size-xl);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8m-20.57 16L128 133.15 52.57 64ZM216 192H40V74.19l82.59 75.71a8 8 0 0 0 10.82 0L216 74.19z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8m-20.57 16L128 133.15 52.57 64ZM216 192H40V74.19l82.59 75.71a8 8 0 0 0 10.82 0L216 74.19z'/%3E%3C/svg%3E") center/contain no-repeat;
  content: '';
}