@scope (.customer-edit-page) {
  :scope {
    --_border: var(--color-border-muted);
    --_ink: var(--color-text-heading);
    --_muted: var(--color-text-secondary);
    --_surface: var(--color-surface);
    --_accent: var(--color-primary);
    display: grid;
    gap: var(--space-2xl);
    inline-size: 100%;
  }

  .customer-edit-page__masthead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xl);
    align-items: end;
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--_border);
  }

  .customer-edit-page__back {
    --_padding-x: var(--space-sm);
    align-self: start;
  }

  .customer-edit-page__identity {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-inline-size: 0;
  }

  .customer-edit-page__monogram {
    display: grid;
    flex: 0 0 auto;
    inline-size: 4.5rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--_accent);
    border-radius: var(--radius-xl);
    background: var(--color-primary-muted);
    color: var(--_accent);
    font-family: var(--font-mono);
    font-size: var(--text-heading-2);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tighter);
  }

  .customer-edit-page__identity-copy {
    min-inline-size: 0;
  }

  .customer-edit-page__eyebrow,
  .customer-edit-page__context span {
    color: var(--_muted);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .customer-edit-page__title {
    overflow: hidden;
    margin-block: var(--space-2xs) var(--space-sm);
    color: var(--_ink);
    font-size: clamp(var(--text-heading-2), 4vw, var(--text-heading-1));
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .customer-edit-page__context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
  }

  .customer-edit-page__context strong {
    color: var(--_ink);
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
  }

  .customer-edit-page__workspace {
    inline-size: 100%;
    overflow: hidden;
    border: 1px solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
  }

  .customer-edit-page__form-intro {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-xl);
    border-block-end: 1px solid var(--_border);
    background: var(--color-surface-muted);
  }

  .customer-edit-page__form-intro h2 {
    color: var(--_ink);
    font-size: var(--text-heading-4);
  }

  .customer-edit-page__form-intro p {
    color: var(--_muted);
    font-size: var(--text-body-sm);
  }

  .form.customer-edit-form {
    inline-size: 100%;
    gap: var(--space-2xl);
    max-inline-size: none;
    padding: var(--space-xl);
  }

  .form__fields--2col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .tabs {
    gap: var(--space-xl);
  }

  .tabs__nav {
    display: grid;
    grid-auto-columns: minmax(10.5rem, 1fr);
    grid-auto-flow: column;
    gap: var(--space-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-xs);
    border: 1px solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-muted);
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .tabs__tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-block-size: 3rem;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--_muted);
    font-size: var(--text-body-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    transition:
      background-color 0.18s ease,
      box-shadow 0.18s ease,
      color 0.18s ease,
      translate 0.18s ease;
  }

  .tabs__icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    color: currentcolor;
  }

  .tabs__tab:focus-visible {
    position: relative;
    z-index: 1;
    outline-offset: 2px;
  }

  .tabs__tab:hover {
    background: var(--_surface);
    color: var(--_ink);
  }

  .tabs__tab--active {
    background: var(--white);
    box-shadow: var(--shadow-xs);
    color: var(--_accent);
    translate: 0 calc(var(--space-2xs) * -1);
  }

  .form__actions {
    justify-content: end;
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--_border);
  }

  @media (width >= 80rem) {
    .form {
      padding: var(--space-2xl);
    }
  }

  @media (width < 40rem) {
    :scope {
      gap: var(--space-xl);
    }

    .customer-edit-page__masthead {
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }

    .customer-edit-page__identity {
      align-items: start;
    }

    .customer-edit-page__monogram {
      inline-size: 3.5rem;
      font-size: var(--text-heading-3);
    }

    .customer-edit-page__title {
      white-space: normal;
    }

    .form,
    .customer-edit-page__form-intro {
      padding: var(--space-lg);
    }

    .form__actions {
      align-items: stretch;
      flex-direction: column-reverse;
    }

    .tabs__nav {
      margin-inline: calc(var(--space-lg) * -1);
      padding-inline: var(--space-lg);
      border-inline: 0;
      border-radius: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .button,
    .tabs__tab {
      transition: none;
    }
  }
}