/* Sign-in page (auth.html): centered card, email step → code step */
@layer pages {
  body.auth-body { background: color-mix(in oklch, var(--muted) 30%, var(--background)); }

  .auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    inline-size: 100%;
    max-inline-size: 24rem;
    min-block-size: 100svb;
    margin-inline: auto;
    padding: 2.5rem 1rem;
  }

  .auth-head {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
    & .brand img { block-size: 2.75rem; }
    & h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
    & p { margin-block-start: .375rem; font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); text-wrap: balance; }
    & strong { font-weight: 500; color: var(--foreground); }
  }

  .auth-card {
    inline-size: 100%;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--background);
    box-shadow: var(--shadow-sm);
  }
  .auth-form { display: grid; gap: 1rem; }
  .auth-form[hidden] { display: none; }
  .auth-form.step-in { animation: step-in .25s var(--ease); }
  @keyframes step-in { from { opacity: 0; translate: 0 .375rem; } }

  .field-label { display: block; margin-block-end: .5rem; font-size: .875rem; font-weight: 500; line-height: 1; }
  .field-error { margin-block-start: .5rem; font-size: .8125rem; font-weight: 500; color: var(--destructive); }
  .input[aria-invalid="true"] { border-color: var(--destructive); &:focus-visible { box-shadow: 0 0 0 1px var(--destructive); } }

  .sent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .875rem;
    color: var(--muted-foreground);
    & > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & strong { font-weight: 500; color: var(--foreground); }
  }
  .link-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 500;
    text-underline-offset: 4px;
    &:hover { text-decoration: underline; }
    &:disabled { cursor: not-allowed; color: var(--muted-foreground); text-decoration: none; }
    & .icon { inline-size: .75rem; block-size: .75rem; }
    [dir="rtl"] & .icon { scale: -1 1; }
  }

  /* ───────── One-time code: one real input under visual slots ───────── */
  .otp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    inline-size: fit-content;
    margin-inline: auto;
    direction: ltr;                      /* digits always read left → right */

    & input {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
      background: transparent;
      color: transparent;
      caret-color: transparent;
      font-size: 16px;                   /* no zoom-on-focus on iOS */
      letter-spacing: 2.25rem;
      outline: none;
      cursor: text;
      &::selection { background: transparent; }
    }
  }
  .otp-group { display: flex; }
  .otp-slot {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.75rem;
    margin-inline-start: -1px;
    border: 1px solid var(--input);
    background: var(--background);
    font-size: 1.125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;

    &:first-child { margin-inline-start: 0; border-start-start-radius: .375rem; border-end-start-radius: .375rem; }
    &:last-child { border-start-end-radius: .375rem; border-end-end-radius: .375rem; }

    &.active { z-index: 1; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
    /* blinking caret in the empty active slot */
    &.active.is-empty::after {
      content: "";
      inline-size: 1px;
      block-size: 1.125rem;
      background: var(--foreground);
      animation: caret 1s steps(1) infinite;
    }
    .otp.invalid & { border-color: var(--destructive); }
  }
  @keyframes caret { 50% { opacity: 0; } }
  .otp-sep { inline-size: .625rem; block-size: 2px; border-radius: 99px; background: var(--muted-foreground); opacity: .5; }
  .otp-hint { text-align: center; }

  .resend { text-align: center; font-size: .875rem; color: var(--muted-foreground); & .link-btn { font-size: inherit; } }

  /* Error banner with a dismiss button */
  .auth-alert {
    position: relative;
    display: flex;
    gap: .625rem;
    padding: .75rem 2.5rem .75rem .875rem;
    border: 1px solid color-mix(in oklch, var(--destructive) 40%, transparent);
    border-radius: var(--radius);
    background: color-mix(in oklch, var(--destructive) 6%, transparent);
    color: var(--destructive);
    font-size: .875rem;
    & > .icon { margin-block-start: .125rem; }
    & button { position: absolute; inset-block-start: .625rem; inset-inline-end: .625rem; display: grid; place-items: center; padding: .125rem; border-radius: .25rem; opacity: .7; &:hover { opacity: 1; } }
  }

  .btn .spinner {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { rotate: 1turn; } }

  .demo-note {
    padding: .5rem .75rem;
    border: 1px dashed var(--border);
    border-radius: .5rem;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
    color: var(--muted-foreground);
  }

  .auth-foot { text-align: center; font-size: .75rem; color: var(--muted-foreground);
    & a { text-decoration: underline; text-underline-offset: 4px; &:hover { color: var(--foreground); } } }
}