/* Members (S11): O-12 Members and payout recipient (the InvitationRow and RoleChip components), and O-13. */

/* O-12: the people list (InvitationRow README) */
.bh-mem-section { gap: var(--space-3); }
.bh-mem-list { display: grid; margin: 0; padding: 0 var(--space-4); list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-mem { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); min-width: 0; }
.bh-mem:first-child { border-top: 0; }
.bh-mem-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold);
}
.bh-mem-avatar--invite { background: var(--sunken); color: var(--ink-2); }
.bh-mem-body { display: grid; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.bh-mem-body > p { margin: 0; }
.bh-mem-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-mem-mail { overflow-wrap: anywhere; }
.bh-mem-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-mem-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.bh-mem-warn { display: flex; align-items: center; gap: var(--space-1); color: var(--warning-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-mem-roles { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-mem-roles dt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.bh-mem-roles div:first-child dt { color: var(--primary); }
.bh-mem-roles dd { margin: var(--space-1) 0 0; }
.bh-mem-card { display: grid; gap: var(--space-3); padding: var(--space-4); }
.bh-mem-card > p { margin: 0; }
.bh-mem-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-mem-when { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* The boards' bottom sheets, as <details> on a static page */
.bh-mem-manage > summary, .bh-mem-invite > summary { list-style: none; justify-self: start; }
.bh-mem-manage > summary::-webkit-details-marker, .bh-mem-invite > summary::-webkit-details-marker { display: none; }
.bh-mem-sheet { display: grid; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.bh-mem-sheet > * { margin: 0; }
.bh-mem-sheet .bh-btn--primary:not(.bh-btn--block) { justify-self: start; }
.bh-mem-split { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-mem-split > * { margin: 0; }
.bh-radio-card.is-off { cursor: not-allowed; background: var(--sunken); color: var(--ink-3); }
.bh-radio-card.is-off .bh-radio { cursor: not-allowed; background: var(--disabled-bg); }

/* "Remove from …" and "Leave this apartment": the design system's outlined danger button */
.bh-btn--danger-outline { background: var(--card); border-color: var(--danger-ink); color: var(--danger-ink); }
.bh-btn--danger-outline:hover { background: var(--danger-bg); color: var(--danger-ink); }
.bh-btn--danger-outline[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-ink); }

/* O-13 */
.bh-inv { display: grid; gap: var(--space-5); width: 100%; max-width: var(--shell-content-max); margin: 0 auto; padding: var(--space-6) var(--page-pad) var(--space-10); }
.bh-inv > * { margin: 0; }
.bh-inv-apt { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-inv-apt > div { display: grid; min-width: 0; }
.bh-inv-apt p { margin: 0; overflow-wrap: anywhere; }
.bh-inv-thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-card); background: var(--primary-soft); color: var(--primary); }
.bh-inv-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.bh-inv-facts dt { color: var(--ink-2); }
.bh-inv-facts dd { margin: 0; overflow-wrap: anywhere; }
.bh-inv-who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); min-width: 0; }
.bh-inv-who > div { display: grid; min-width: 0; }
.bh-inv-who p { margin: 0; overflow-wrap: anywhere; }
.bh-inv-actions { display: grid; gap: var(--space-2); }
.bh-inv-actions > form { display: grid; }
.bh-inv-warn { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--warning-ink); border-radius: var(--radius-card); background: var(--card); }
.bh-inv-warn > * { margin: 0; }
.bh-inv-code { max-width: 12ch; letter-spacing: 0.2em; }