/* Members area page scope. */

.members {
  padding-block: var(--space-6) var(--space-7);

  .section-inner { max-width: var(--account-measure); }

  .page-heading {
    font-size: var(--font-size-7);
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-wrap: balance;
  }

  .cta[type="submit"] {
    min-height: 40px;
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-round);
    font-family: var(--font-stack);
    font-size: var(--font-size-3);
    line-height: 1;
  }

  &.show,
  &.edit-contact,
  &.edit-password,
  &.edit-profile,
  &.edit-shipping {
    .section-inner { max-width: 68rem; }
    .main { min-width: 0; }
  }

  &.show {
    .title {
      margin-bottom: var(--space-6);
      .page-heading { margin-bottom: 0; }
    }

    .overview {
      display: grid;
      gap: var(--space-6);

      .heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-3);

        h2 { margin: 0; font-size: var(--font-size-3); font-weight: 700; }
      }

      .small-button { flex: none; }

      .details,
      .value,
      .empty {
        border: 1px solid var(--color-gray-4);
        border-radius: var(--radius-3);
        min-height: 5.5rem;
        margin: 0;
        padding: var(--space-3);
        background-color: var(--color-white);
        color: var(--color-black);
        font-size: var(--font-size-3);
        font-style: normal;
        line-height: var(--line-height-body);
      }

      .empty { color: var(--color-gray-20); }
      .compact .value { display: flex; align-items: center; min-height: 4rem; }

      @media (max-width: 32rem) { margin-inline: calc(var(--space-4) * -1); }
    }
  }

  &.edit-password,
  &.edit-profile {
    .main { max-width: 34rem; }
  }

  &.register {
    /* A denser panel than the edit forms: it carries two full columns. */
    .account-panel {
      padding: var(--space-6);
      @media (max-width: 28rem) { padding: var(--space-6) var(--space-5); }
    }

    .footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--space-4) var(--space-7);
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-gray-4);

      @media (max-width: 52rem) { grid-template-columns: minmax(0, 1fr); align-items: start; }
    }
  }

  &.login,
  &.password-reset,
  &.password-reset-edit,
  &.register-submitted {
    .section-inner { max-width: var(--account-measure-narrow); }
  }

  &.login {
    .recovery-link {
      align-self: flex-start;
      margin-top: calc(var(--space-4) * -1);
      color: var(--color-secondary-hover);
      font-size: var(--font-size-3);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;

      &:hover { color: var(--color-black); }
    }
  }

  /* Registration runs its lede tighter than the base component. */
  .account-lede {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-3);
  }

  .next-steps,
  .fineprint {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 68ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-3);
    line-height: var(--line-height-body);
    text-wrap: pretty;

    p { margin: 0; }
  }

  .next-steps { margin-bottom: var(--space-6); }

  .fineprint {
    color: var(--color-gray-20);

    a {
      color: var(--color-secondary-hover);
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover { color: var(--color-black); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &,
    & *,
    & *::before,
    & *::after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }
}