@layer components {
  .consents {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
    margin-block-start: 1.25rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .consents__body {
    display: grid;
    gap: 0.75rem;
  }

  .consents__item {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    & > h3 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-semibold);
      font-variant-numeric: tabular-nums;
      line-height: var(--leading-tight);
    }
  }

  .consents__agreement {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    justify-self: stretch;

    & + & {
      padding-block-start: 0.75rem;
      border-block-start: 1px solid var(--border);
    }

    & > h4 {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-sm--line-height);
    }
  }

  .consents__state {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-wrap: pretty;
  }

  .consents__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .consents__form {
    display: grid;
    gap: 0.75rem;
    justify-self: stretch;
    justify-items: start;

    & > .field {
      justify-self: stretch;
    }
  }

  .staff-phones {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
    margin-block-start: 2rem;
  }

  .staff-phones__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .staff-phones__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .staff-phones__number {
    flex: 1 1 12rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .staff-phones__code {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    flex-basis: 100%;

    & > .field {
      flex: 1 1 12rem;
    }
  }

  .call-takeover {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;

    & > .field {
      flex: 1 1 14rem;
    }
  }
}