@layer components {
  /*
   * Lightweight page-scoped structure. Prefer nesting under a single
   * root class rather than scattering utility classes in the markup.
   */

  .address-summary {
    p {
      margin: 0;
    }

    & + .actions-row {
      margin-block-start: var(--spacing-md);
    }
  }

  .template-setup {
    /* Borderless title/description fields, Basecamp-style. */
    input.template-name,
    input.template-description {
      display: block;
      width: 100%;
      /* Keep the baseline rhythm: text height plus one baseline of lead. */
      height: calc(var(--font-size) + var(--baseline));
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;

      &:focus {
        outline: none;
      }
    }

    input.template-name {
      --font-size: calc(var(--baseline) * 6);

      font-weight: 700;
      line-height: calc(var(--font-size) + var(--baseline));
    }

    input.template-description {
      margin-block-start: var(--spacing-sm);

      &::placeholder {
        color: var(--muted-color);
      }
    }

    .actions {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      margin-block-start: var(--spacing-xl);
    }
  }

  .profile-address {
    margin-block-start: var(--spacing-lg);

    .address-section-label {
      margin: 0 0 var(--spacing-sm);
    }

    .address-empty {
      margin: 0 0 var(--spacing-sm);
    }
  }
}