/* Sign-in family layout: sign-in, sign-up, password reset, SSO and the app hand-off pages
   (views/auth-shell.html). Tokens and components come from duet-ui.css.

   One centred card. Behind it, from the bottom up: the ivory canvas with the plans page's
   top glow, three slowly drifting glows (the iOS app's onboarding background,
   FeatureTourBackgroundView), and on wide screens, only while the
   portal-access-show-video-background flag is on, the brand film under an ivory scrim.

   Background media: assets/media/auth/duet-loop-720p.{webm,mp4} plus duet-loop-poster.
   {avif,jpg} are a 7.7s loop cut from DuetiOS/Videos/Intro.mp4 (the 2015 "Duet — Do more"
   film that also supplied the old sign-in photo): four second-display moments at 17.48s,
   29.50s, 12.40s and 15.27s, each slowed to half speed with motion interpolation, joined by
   0.6s dissolves and started mid-shot so the loop point is a continuous cut. Softened
   (gblur 1.1), no audio, faststart. The poster is the loop's first frame.

   The poster only exists from 720px and the video only from 1024px with a mouse (the
   loader in auth-scripts checks the same query, plus reduced motion and Save-Data), so
   phones never download either. Inside the native apps (body.is-app — the iOS
   ASWebAuthenticationSession sheet and the Android equivalent) there is no media, no glow
   and no card: the page is plain white and the sheet itself frames it.

   Below 540px the card loses its chrome and starts at the top of the screen, so the whole
   form fits the iOS sheet (≈375×580 on an iPhone SE) without scrolling, and nothing jumps
   when the keyboard opens. pkg/pagesnap measures that. */

.duet-auth {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--duet-bg);
  color: var(--duet-text);
  font-family: var(--duet-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.duet-auth *,
.duet-auth *::before,
.duet-auth *::after {
  box-sizing: border-box;
}

:where(.duet-auth) a {
  color: var(--duet-blue-ink);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
}

:where(.duet-auth) a:hover {
  text-decoration: underline;
}

:where(.duet-auth) p {
  margin: 0;
}

/* ------------------------------------------------------------ backdrop */

.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--duet-bg) var(--duet-bg-glow) no-repeat;
  pointer-events: none;
}

.auth-glow > span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
}

.auth-glow > span:nth-child(1) {
  top: -34vmax;
  left: -26vmax;
  background: radial-gradient(closest-side, rgba(92, 152, 222, .24), transparent 72%);
  animation: auth-drift-1 12s ease-in-out infinite alternate;
}

.auth-glow > span:nth-child(2) {
  top: 8vmax;
  right: -34vmax;
  background: radial-gradient(closest-side, rgba(134, 180, 233, .22), transparent 72%);
  animation: auth-drift-2 15s ease-in-out infinite alternate;
}

.auth-glow > span:nth-child(3) {
  bottom: -44vmax;
  left: 4vmax;
  background: radial-gradient(closest-side, rgba(74, 132, 200, .18), transparent 72%);
  animation: auth-drift-3 10s ease-in-out infinite alternate;
}

@keyframes auth-drift-1 {
  to { transform: translate(7vmax, 5vmax) scale(1.08); opacity: .82; }
}

@keyframes auth-drift-2 {
  to { transform: translate(-6vmax, 6vmax) scale(.94); opacity: .9; }
}

@keyframes auth-drift-3 {
  to { transform: translate(5vmax, -6vmax) scale(1.1); opacity: .8; }
}

.auth-media,
.auth-scrim {
  position: absolute;
  inset: 0;
  display: none;
}

.auth-media {
  background-color: #eef0f2;
  background-position: center;
  background-size: cover;
}

.auth-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.auth-video.is-playing {
  opacity: 1;
}

/* Ivory, not black: the page stays in the light theme and the film reads as daylight
   behind frosted glass. Heavier at the bottom, where the footer sits on it. */
.auth-scrim {
  background:
    radial-gradient(55% 60% at 50% 50%, rgba(251, 249, 245, .3), transparent 75%),
    linear-gradient(180deg, rgba(251, 249, 245, .42) 0%, rgba(251, 249, 245, .2) 45%, rgba(251, 249, 245, .66) 100%);
}

@media (min-width: 720px) {
  .auth-media,
  .auth-scrim {
    display: block;
  }

  .auth-media {
    background-image: url("/assets/media/auth/duet-loop-poster.jpg");
    background-image: image-set(url("/assets/media/auth/duet-loop-poster.avif") type("image/avif"), url("/assets/media/auth/duet-loop-poster.jpg") type("image/jpeg"));
  }
}

.duet-auth.is-app .auth-media,
.duet-auth.is-app .auth-scrim {
  display: none;
}

/* Inside the apps the page already sits in the system's sign-in sheet, and that sheet is
   the card: the whole view is plain white, with no card of its own and no glow behind it. */
.duet-auth.is-app,
.duet-auth.is-app .auth-backdrop {
  background: #fff;
}

.duet-auth.is-app .auth-glow {
  display: none;
}

.duet-auth.is-app .auth-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------------------------------------------------------------- page */

.auth-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 20px 24px;
}

.auth-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 436px;
}

/* Inside the card, never over the film: the brand blue is a light colour and the film
   has bright and dark frames, so on the page it would be legible only some of the time. */
.auth-brand {
  display: flex;
  margin-bottom: 26px;
}

.auth-brand .dp-wordmark {
  font-size: 26px;
}

.auth-card {
  width: 100%;
  padding: 34px 34px 30px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--duet-r-lg);
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 2px 6px rgba(20, 24, 35, .05), 0 34px 80px -34px rgba(24, 20, 10, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.auth-title {
  margin: 0;
  font-family: var(--duet-heading);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--duet-text);
  text-wrap: balance;
}

.auth-lede {
  margin-top: 8px;
  color: var(--duet-muted);
  font-size: 15px;
  line-height: 1.5;
}

.auth-lede a {
  white-space: nowrap;
}

.auth-body {
  margin-top: 24px;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.auth-form .dp-btn--primary {
  margin-top: 4px;
}

/* Turnstile's flexible size fills the column; it needs 300px, which compact mode keeps. */
.auth-captcha:empty {
  display: none;
}

.auth-captcha .cf-turnstile,
.auth-captcha .g-recaptcha {
  min-height: 0;
}

.auth-captcha .cf-turnstile:empty,
.auth-captcha .g-recaptcha:empty {
  display: none;
}

/* Webflow's form states, still driven by each page's script (shown and hidden with
   jQuery). Webflow's CSS used to hide them; these pages no longer load it. */
.w-form-done,
.w-form-fail {
  display: none;
}

.auth-alert {
  margin-bottom: 16px;
}

.auth-alert a {
  color: var(--duet-danger-ink);
  text-decoration: underline;
}

.auth-done {
  padding: 8px 0 4px;
  text-align: center;
}

.auth-done__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--duet-success-soft);
  color: var(--duet-success-ink);
}

.auth-done__icon svg {
  width: 26px;
  height: 26px;
}

.auth-done__title {
  margin: 0 0 6px;
  font-family: var(--duet-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.auth-done p {
  color: var(--duet-muted);
  font-size: 15px;
}

/* -------------------------------------------------------- social sign-in */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 14px;
  color: var(--duet-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--duet-stroke);
}

.auth-providers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Equal size and weight for all three — Apple's guidelines require Sign in with Apple
   to be no less prominent than any other provider. */
.duet-auth .auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--duet-stroke-strong);
  border-radius: 12px;
  background: var(--duet-surface);
  color: var(--duet-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}

.duet-auth .auth-provider:hover {
  border-color: rgba(20, 24, 35, .32);
  box-shadow: var(--duet-shadow-sm);
  text-decoration: none;
}

/* Each provider starts a second sign-in, so while the email form's request is in flight
   (setFormBusy marks it .is-busy) they are locked with it. They sit outside the form, where
   its own busy styles don't reach. Keyboard activation is stopped in auth-scripts. */
.auth-card:has(form.is-busy) .auth-providers {
  cursor: progress;
}

.auth-card:has(form.is-busy) .auth-provider {
  opacity: .5;
  pointer-events: none;
}

.auth-provider svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.auth-alt {
  margin-top: 22px;
  color: var(--duet-muted);
  font-size: 14px;
  text-align: center;
}

.auth-alt--tight {
  margin-top: 6px;
}

.auth-lede strong {
  color: var(--duet-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- footer */

.auth-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  width: 100%;
  max-width: 436px;
  margin-top: 28px;
  color: var(--duet-muted);
  font-size: 13px;
}

:where(.auth-footer) a {
  color: inherit;
  font-weight: 600;
}

.duet-auth.is-app .auth-footer {
  display: none;
}

/* WCAG 2.2.2: anything moving for longer than five seconds can be paused. Bottom-left,
   because Weglot's language picker owns the bottom-right corner. */
.auth-motion {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--duet-r-pill);
  background: rgba(255, 255, 255, .78);
  color: var(--duet-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--duet-shadow-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.auth-motion[hidden] {
  display: none;
}

.auth-motion:hover {
  color: var(--duet-text);
}

.auth-motion svg {
  width: 14px;
  height: 14px;
}

.auth-motion .auth-motion__play,
.auth-motion[aria-pressed="true"] .auth-motion__pause {
  display: none;
}

.auth-motion[aria-pressed="true"] .auth-motion__play {
  display: block;
}

.weglot_switcher {
  right: 1rem !important;
  left: unset !important;
}

/* ------------------------------------------------- the hand-off and message pages */

.auth-message {
  text-align: center;
}

.auth-message .auth-lede {
  margin-top: 10px;
}

.auth-message__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--duet-blue-soft);
  color: var(--duet-blue-ink);
}

.auth-message__icon svg {
  width: 26px;
  height: 26px;
}

.auth-message__icon--danger {
  background: var(--duet-danger-soft);
  color: var(--duet-danger-ink);
}

.auth-message__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.auth-message .dp-spinner {
  margin: 4px auto 18px;
}

/* ---------------------------------------------------------- delete account */

.auth-card--danger .auth-title {
  color: var(--duet-danger-ink);
}

.auth-consequences {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 16px 18px;
  border: 1px solid rgba(179, 38, 30, .16);
  border-radius: var(--duet-r-md);
  background: var(--duet-danger-soft);
  font-size: 14.5px;
  line-height: 1.5;
  list-style: none;
}

.auth-consequences li {
  display: flex;
  gap: 10px;
}

.auth-consequences svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--duet-danger-ink);
}

/* ------------------------------------------------------------- compact */

@media (max-width: 540px) {
  .auth-page {
    padding: 18px 16px 16px;
  }

  .auth-main {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .auth-brand {
    margin-bottom: 16px;
  }

  .auth-brand .dp-wordmark {
    font-size: 22px;
  }

  .auth-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .auth-title {
    font-size: 22px;
  }

  .auth-lede {
    margin-top: 4px;
    font-size: 14px;
  }

  .auth-body {
    margin-top: 18px;
  }

  .auth-form {
    gap: 12px;
  }

  .auth-form .dp-input {
    height: 44px;
  }

  .auth-form .dp-label {
    font-size: 13px;
  }

  .auth-divider {
    margin: 18px 0 12px;
  }

  .auth-alt {
    margin-top: 16px;
  }

  .auth-footer {
    margin-top: 24px;
  }
}

/* The narrowest phones: Turnstile's flexible widget needs a 300px column. */
@media (max-width: 340px) {
  .auth-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .auth-provider span {
    display: none;
  }
}

.auth-message .auth-brand {
  justify-content: center;
}