/* Continuous member identities and private organizer attendance views. */
.crab-h5 .event-participants-open { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 0; border:0; background:transparent; color:var(--ink); font:700 14px/1.5 var(--sans); text-align:left; }
.crab-h5 .event-participants-open svg { flex:none; width:22px; height:22px; }
.crab-h5 .event-participants-open > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.crab-h5 .event-participants-layer { position:absolute; z-index:180; inset:0; display:flex; align-items:end; justify-content:center; isolation:isolate; }
.crab-h5 .event-participants-scrim { position:absolute; inset:0; z-index:-1; background:#201C225C; }
.crab-h5 .event-participants-sheet { display:flex; flex-direction:column; width:100%; max-width:560px; max-height:calc(100% - var(--h5-safe-top) - 20px); padding:0 20px calc(16px + env(safe-area-inset-bottom,0px)); border:1px solid #C9C7C1; border-bottom:0; border-radius:24px 24px 0 0; background:#FFFCF7; color:var(--ink); box-shadow:0 -12px 36px #201C2214; overflow:hidden; }
.crab-h5 .event-participants-heading { display:flex; align-items:center; gap:12px; flex:none; min-height:76px; padding-block:14px 10px; }
.crab-h5 .event-participants-heading h2 { flex:1; min-width:0; margin:0; font:800 21px/1.4 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-participants-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:10px; border:1px solid #D1CEC5; border-radius:50%; background:#FFFEFB; color:var(--ink); }
.crab-h5 .event-participants-close svg { width:22px; height:22px; }
.crab-h5 .event-participants-tabs { display:grid; grid-template-columns:1fr 1fr; gap:16px; flex:none; border-bottom:1px solid #DCD9CF; }
.crab-h5 .event-participants-tabs button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:52px; padding:10px 2px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--ink-2); font:600 14px/1.5 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-participants-tabs button[aria-pressed=true] { border-bottom-color:var(--coral); color:var(--ink); font-weight:800; }
.crab-h5 .event-participants-tabs b { flex:none; font-size:15px; font-variant-numeric:tabular-nums; }
.crab-h5 .event-participants-list { min-height:80px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.crab-h5 .event-group-announcement-entry { flex:none; border-bottom:1px solid #E5E1D8; }
.crab-h5 .event-group-announcement-entry:disabled { opacity:.6; }
.crab-h5 .event-group-avatar-settings { flex:none; padding:4px 0 18px; margin-bottom:4px; border-bottom:1px solid #E5E1D8; }
.crab-h5 .event-group-avatar-summary { display:flex; align-items:center; gap:16px; min-width:0; }
.crab-h5 .event-group-avatar-copy { min-width:0; }
.crab-h5 .event-group-avatar-copy h3 { margin:0 0 5px; color:var(--ink); font:700 16px/1.5 var(--sans); }
.crab-h5 .event-group-avatar-copy p { margin:0; color:var(--ink-2); font:400 13px/1.65 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-group-avatar-selection { display:block; flex:none; width:80px; height:80px; overflow:hidden; border:1px solid #C9C7C1; border-radius:50%; background:var(--sand); }
.crab-h5 .event-group-avatar-selection img { display:block; width:100%; height:100%; object-fit:cover; }
.crab-h5 .event-group-avatar-controls,.crab-h5 .event-group-avatar-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.crab-h5 .event-group-avatar-controls button,.crab-h5 .event-group-avatar-actions button { min-width:0; max-width:100%; min-height:44px; padding:10px 14px; border:1px solid #C4D7E1; border-radius:11px; background:#EDF5FA; color:#294F68; font:600 14px/1.5 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-group-avatar-actions { justify-content:flex-end; padding-top:12px; border-top:1px solid #E5E1D8; }
.crab-h5 .event-group-avatar-actions button { background:#FFFEFB; border-color:#D1CEC5; color:var(--ink); }
.crab-h5 .event-group-avatar-actions .event-group-avatar-save { border-color:transparent; background:var(--coral); }
.crab-h5 .event-group-avatar-settings button:disabled { opacity:.6; }
.crab-h5 .event-group-avatar-feedback { margin:12px 0 0; color:var(--ink-2); font:400 13px/1.65 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-group-avatar-feedback.is-error { color:#A23D32; }
.crab-h5 .event-participants-list ul { margin:0; padding:0; list-style:none; }
.crab-h5 .event-participants-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #E5E1D8; }
.crab-h5 .event-participants-list li:last-child { border-bottom:0; }
.crab-h5 .event-participant-member { display:flex; align-items:center; gap:12px; min-width:0; min-height:48px; color:var(--ink); text-decoration:none; font:700 15px/1.5 var(--sans); }
.crab-h5 .event-participant-avatar { flex:none; width:40px; height:40px; border:1px solid #201C2228; border-radius:50%; object-fit:cover; background:#F6EBD6; }
.crab-h5 .event-participant-member > span:first-of-type { min-width:0; overflow-wrap:anywhere; }
.crab-h5 .event-participant-state { max-width:110px; color:#746E72; font:400 12px/1.6 var(--sans); text-align:right; overflow-wrap:anywhere; }
.crab-h5 .event-participant-state.has-entered { color:#356C57; }
.crab-h5 .event-participants-note { flex:none; margin:12px 0 0; padding-top:12px; border-top:1px solid #DCD9CF; color:var(--ink-2); font:400 12px/1.65 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .event-participants-status,.crab-h5 .event-participants-empty { margin:0; padding:32px 0; color:var(--ink-2); font:400 15px/1.7 var(--sans); text-align:center; overflow-wrap:anywhere; }
.crab-h5 .event-participants-status p { margin:0 0 12px; }
.crab-h5 .event-participants-retry { min-height:44px; padding:10px 18px; border:1px solid #B9CEDA; border-radius:12px; background:#EDF5FA; color:#325C75; font:700 14px/1.5 var(--sans); }
.crab-h5 :is(.event-participants-open,.event-participant-member):focus-visible,.crab-h5 .event-participants-sheet button:focus-visible { outline:3px solid #236CAF; outline-offset:2px; }
@media(max-width:350px) { .crab-h5 .event-participants-sheet { padding-inline:16px; } .crab-h5 .event-participants-list li { grid-template-columns:minmax(0,1fr); gap:0; } .crab-h5 .event-participant-state { max-width:none; margin-left:52px; text-align:left; } }

/* The public directory puts people first. Private attendance keeps its rows. */
.crab-h5 .event-members-layer .event-participants-sheet { max-height:calc(82% - var(--h5-safe-top)); padding:0 20px max(20px,env(safe-area-inset-bottom)); border-color:#E0DBD1; border-radius:28px 28px 0 0; background:var(--surface); box-shadow:0 -12px 48px #201C2214; }
.crab-h5 .event-members-layer .event-participants-heading { gap:12px; min-height:88px; padding:20px 0 16px; border-bottom:1px solid #EAE5DC; }
.crab-h5 .event-members-identity { --group-avatar-size:44px; }
.crab-h5 .event-members-layer .event-participants-heading h2 { font-size:19px; font-weight:800; }
.crab-h5 .event-members-count { display:block; margin-top:3px; color:var(--ink-2); font:400 12px/1.5 var(--sans); }
.crab-h5 .event-members-layer .event-participants-close { width:44px; height:44px; border:0; background:transparent; color:#6F6870; }
.crab-h5 .event-members-layer .event-participants-close:hover { background:#F4F1EB; }
.crab-h5 .event-members-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.crab-h5 .event-members-grid { min-height:0; padding:22px 3px 18px; overflow:visible; }
.crab-h5 .event-members-grid ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 10px; }
.crab-h5 .event-members-grid li { display:block; min-width:0; padding:0; border:0; }
.crab-h5 .event-members-grid .event-participant-member { display:flex; flex-direction:column; gap:0; min-height:100px; padding:4px 0; border-radius:12px; font:500 13px/1.45 var(--sans); text-align:center; }
.crab-h5 .event-members-grid .event-participant-member:hover { background:#F6F3EC; }
.crab-h5 .event-member-portrait { position:relative; display:block; flex:none; width:52px; height:52px; margin-bottom:8px; }
.crab-h5 .event-members-grid .event-participant-avatar { display:block; width:52px; height:52px; border-color:#201C221A; }
.crab-h5 .event-members-grid .event-participant-member > .event-member-name { display:-webkit-box; width:100%; max-height:2.9em; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.crab-h5 .event-members-grid .event-participant-member > .event-member-role { margin-top:3px; color:#A24C3E; font:500 11px/1.5 var(--sans); }
.crab-h5 .event-members-layer .event-group-avatar-settings { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; padding:16px 0; margin:0; border-top:1px solid #EAE5DC; border-bottom:0; }
.crab-h5 .event-members-layer .event-group-avatar-summary { gap:10px; }
.crab-h5 .event-members-layer :is(.group-avatar-large,.event-group-avatar-selection) { --group-avatar-size:44px; width:44px; height:44px; }
.crab-h5 .event-members-layer .event-group-avatar-copy h3 { margin:0; font:600 14px/1.5 var(--sans); }
.crab-h5 .event-members-layer .event-group-avatar-controls { align-self:center; justify-content:flex-end; gap:4px 8px; margin:0; }
.crab-h5 .event-members-layer .event-group-avatar-controls button { min-height:44px; padding:8px 10px; border:0; border-radius:10px; background:#EAF3F8; font-size:13px; }
.crab-h5 .event-members-layer :is(.event-group-avatar-actions,.event-group-avatar-feedback) { grid-column:1 / -1; margin-top:4px; }
.crab-h5 .event-members-layer .event-participants-open { gap:12px; min-height:52px; border-top:1px solid #EAE5DC; border-bottom:0; font-weight:500; }
.crab-h5 .event-members-layer .event-participants-open svg { color:#677A83; }
@media(max-width:359px) { .crab-h5 .event-members-layer .event-participants-sheet { padding-inline:16px; } .crab-h5 .event-members-grid ul { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-height:600px) { .crab-h5 .event-members-layer .event-participants-sheet { max-height:calc(100% - var(--h5-safe-top) - 12px); } }