@layer components {
  .access-management-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-page));
  }
  .people-page__header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-lg); }
  .people-page__header > div { flex: 1 1 26rem; }
  .people-page__header p:last-child { line-height: 1.5; }
  .people-register h2 { margin: 0; color: var(--color-primary-dark); }
  .people-register__help { margin-block: var(--space-sm) var(--space-lg); max-width: 48rem; color: var(--color-text-muted); line-height: 1.5; }
  .people-register__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-outline); }
  .person-record { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-outline); }
  .person-record__identity { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
  .person-record__identity h3 { margin: 0 0 var(--space-sm); font-size: 1.125rem; }
  .person-status { display: inline-block; color: var(--color-text-muted); font-size: 0.875rem; }
  .person-status[data-state="JOINED"] { color: var(--color-primary-dark); }
  .person-record__identity time, .person-record__identity .access-grant__email { display: block; margin: var(--space-xs) 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
  .person-record__identity .access-grant__email:empty { display: none; }
  .person-record__permissions { flex: 1 1 18rem; min-width: 0; line-height: 1.5; }
  .person-record__permissions h4 { margin: 0 0 var(--space-sm); font-size: 0.875rem; color: var(--color-text-muted); }
  .person-record__administrator { margin: var(--space-sm) 0 0; font-size: 0.875rem; color: var(--color-primary-dark); }
  .person-record__controls { flex-basis: 100%; min-width: 0; }
  .person-record__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }
  .person-record__editor { display: flex; flex-direction: column; gap: var(--space-sm); width: min(100%, 32rem); }
  .person-record__editor label { display: flex; flex-direction: column; gap: var(--space-xs); }
  .person-record__editor .access-grant__administrator { flex-direction: row; }
  .invitation-editor { width: min(52rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: var(--space-lg); border: 1px solid var(--color-outline); border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface-raised); box-shadow: var(--shadow-surface); }
  .invitation-editor::backdrop { background: rgb(0 0 0 / 35%); }
  .invitation-editor h2 { margin: 0; color: var(--color-primary-dark); }
  .invitation-editor > p { line-height: 1.5; }
  .invitation-form__commands { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .access-management { display: flex; flex-direction: column; gap: var(--space-xl); }
  .access-grant__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: var(--size-action-target);
    padding: var(--space-xs);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-primary-dark);
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .access-grant__action:disabled { opacity: 0.65; cursor: wait; }
  .access-grant__input {
    min-height: var(--size-action-target);
    min-width: 0;
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
  }
  .access-grant__message { margin: var(--space-sm) 0 0; color: var(--color-primary-dark); font-size: 0.875rem; }
  .access-grant__message:empty { display: none; }
  .access-grant__message[data-error="true"] { color: var(--color-error); }
  .access-grant__administrator { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-sm); min-height: var(--size-action-target); }
  .access-grant__administrator input { flex: none; width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary-dark); }
  .account-roles__list { margin: 0; padding-inline-start: var(--space-md); }
  .account-roles__scope { display: block; color: var(--color-text-muted); overflow-wrap: anywhere; }
  .role-grant-editor__dialog { width: min(52rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: var(--space-lg); border: 1px solid var(--color-outline); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface-raised); }
  .role-grant-editor__dialog::backdrop { background: rgb(0 0 0 / 35%); }
  .role-grant-editor__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .role-grant-editor__heading h2 { margin: 0; color: var(--color-primary-dark); }
  .role-grant-editor__table { width: 100%; border-collapse: collapse; }
  .role-grant-editor__table th, .role-grant-editor__table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-outline); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
  .role-grant-editor__table th:last-child { width: 7rem; }
  .role-grant-editor__form { margin-block-start: var(--space-lg); }
  .role-grant-editor__form fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); padding: 0; border: 0; }
  .role-grant-editor__form legend { margin-block-end: var(--space-md); font-weight: 700; }
  .role-grant-editor__form label { display: flex; flex-direction: column; flex: 1 1 14rem; gap: var(--space-xs); min-width: 0; }
  .role-grant-editor__form label[hidden] { display: none; }
  .role-grant-editor__form select { width: 100%; min-width: 0; min-height: var(--size-action-target); padding: var(--space-sm); border: 1px solid var(--color-outline); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
  .role-grant-editor__history { padding-inline-start: var(--space-md); font-size: 0.875rem; }
}

@layer components {
  .account-invitations { display: block; }
  .account-invitations h2, .invitation-link h3, .passkey-access h1 { color: var(--color-primary-dark); margin-block: 0 var(--space-md); }
  .invitation-form fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); padding: 0; margin: 0; border: 0; }
  .invitation-form label { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1 1 14rem; min-width: 0; }
  .invitation-form label[hidden] { display: none; }
  .invitation-form input:not([type="checkbox"]), .invitation-form select {
    min-height: var(--size-action-target); width: 100%; min-width: 0; padding: var(--space-sm); border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); font: inherit;
  }
  .invitation-form__actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block-start: var(--space-sm); }
  .invitation-form__permission { flex: 1 1 16rem; min-width: 0; }
  .invitation-form .invitation-form__administrator { flex-direction: row; align-items: center; min-height: var(--size-action-target); }
  .invitation-form__permission p { margin: 0; padding-inline-start: calc(1.25rem + var(--space-sm)); color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }
  .invitation-form__administrator input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary-dark); }
  .invitation-link { width: min(42rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); margin: auto; padding: var(--space-lg); border: 1px solid var(--color-outline); border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface-raised); box-shadow: var(--shadow-surface); }
  .invitation-link[open] { display: flex; flex-direction: column; gap: var(--space-md); }
  .invitation-link::backdrop { background: rgb(0 0 0 / 35%); }
  .invitation-link__value { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
  .invitation-link__url { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; user-select: text; }
  .invitation-link__close { align-self: end; }
  .invitation-link__details { color: var(--color-text-muted); line-height: 1.5; }
  .invitation-link h3 { overflow-wrap: anywhere; }
  .invitation-link h3, .invitation-link p { margin: 0; }
  .passkey-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xl); flex: 1; padding: var(--space-xl) var(--space-md); }
  .passkey-page__brand { font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--color-primary-dark); }
  .passkey-access { display: flex; flex-direction: column; align-items: start; gap: var(--space-md); width: min(100%, 32rem); padding: var(--space-xl); border: 1px solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-surface); }
  .passkey-access p { margin: 0; line-height: 1.5; }
  .passkey-access h1 { margin: 0; }
  .passkey-access form { margin: var(--space-md) 0; }
}

@layer components {
  .initial-setup__form { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }
  .initial-setup__form input { min-height: var(--size-action-target); width: 100%; padding: var(--space-sm); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
}