/*
 * Auth pages (F3: D-01, D-02, D-03, D-04, S-05) on top of layout/auth.css.
 *   D-01 shows a larger logo (280px, -10px) and a tighter H1 (line-height 1.05).
 *   D-03 "Back to sign in" is a 32px blue text link above the heading.
 *   S-05 stacks the details card and the actions 14px apart.
 */
@layer pages {
  .auth__main:has(.auth__head--login) .auth__logo {
    width: 280px;
    margin-left: -10px;
  }
  .auth__head--login .auth__title { line-height: 1.05; }

  .auth__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 32px;
    color: var(--color-blue);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .auth__back:hover { color: var(--color-blue-deep); text-decoration: underline; }

  .auth__forgot { font-size: 13.5px; }

  .auth__form--tight { gap: 14px; }

  .auth__form .kv__label { flex: none; }

  @media (max-width: 767px) {
    .auth__main:has(.auth__head--login) .auth__logo { width: 200px; margin-left: -7px; }

    /* S-05 on a phone: a long invited email gets its own line under the label. */
    .auth__form .kv__row { flex-wrap: wrap; row-gap: 2px; }
    .auth__form .kv__value { flex: 1 0 auto; max-width: 100%; }
  }
}