/* The event is a compact card, never a full-width participation button. */
html:root .meeting-attendance { display: grid; gap: 12px; width: 100%; color: var(--text-primary); margin-top: 10px; }
html:root .meeting-attendance-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
html:root .meeting-status { display: inline-flex; align-items: center; width: fit-content; gap: 6px; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 5px 10px; color: var(--theme-warning); background: var(--theme-warning-bg); }
html:root .meeting-status.accepted { color: var(--theme-success); background: var(--theme-success-bg); }
html:root .meeting-status.declined { color: var(--theme-danger); background: var(--theme-danger-bg); }
html:root button.meeting-open { width: auto; min-height: 36px; padding: 5px 9px; font-size: .8rem; font-weight: 500; border-color: transparent; background: transparent; color: var(--theme-accent); justify-self: start; }
html:root button.meeting-open:hover { background: var(--theme-hover); border-color: var(--orero-line); }
html:root .meeting-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
html:root .meeting-group { flex: 1 1 160px; min-width: 0; border: 1px solid var(--orero-line); border-radius: var(--radius-md); background: var(--orero-paper); }
html:root .meeting-group summary { padding: 10px 12px; cursor: pointer; font-size: .78rem; color: var(--text-primary); overflow-wrap: anywhere; }
html:root .meeting-group summary:hover { background: var(--theme-hover); border-radius: var(--radius-md); }
html:root .meeting-people { display: grid; gap: 6px; padding: 0 10px 10px; max-height: 240px; overflow-y: auto; }
html:root .meeting-people .person-label { justify-content: flex-start; text-align: left; min-width: 0; width: 100%; white-space: normal; }
html:root .meeting-people .person-label > span:last-child { color: var(--text-primary); overflow-wrap: anywhere; }
html:root .meeting-people .person-avatar { flex-shrink: 0; }
html:root .meeting-response-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html:root button.meeting-response { width: auto; min-height: 36px; padding: 6px 12px; font-size: .8rem; }
html:root .meeting-response-feedback { margin: 0; color: var(--theme-danger); font-size: .82rem; }
html:root .meeting-avatar-group { position: relative; flex: 1 1 140px; min-width: 0; padding: 6px 0; }
html:root .meeting-avatar-heading { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: .72rem; font-weight: 500; }
html:root .meeting-avatar-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; }
html:root .meeting-avatar-item { display: inline-flex; }
html:root button.meeting-avatar-button { display: inline-flex; position: static; align-items: center; justify-content: center; flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-primary); transition: border-color .16s, background .16s; }
html:root button.meeting-avatar-button:hover, html:root button.meeting-avatar-button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
html:root .meeting-avatar-button .person-avatar { width: 30px; height: 30px; font-size: .78rem; border-radius: 50%; overflow: hidden; }
html:root .meeting-avatar-tooltip { position: absolute; z-index: 5; left: 0; bottom: 100%; width: max-content; max-width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-dropdown); font-size: .76rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-popup,180ms) ease, visibility var(--motion-popup,180ms); }
html:root .meeting-avatar-item:hover .meeting-avatar-tooltip, html:root .meeting-avatar-item:focus-within .meeting-avatar-tooltip { opacity: 1; visibility: visible; }
html:root .meeting-avatar-empty { color: var(--text-secondary); font-size: .72rem; }
@media (pointer: coarse) { html:root button.meeting-avatar-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { html:root .meeting-avatar-tooltip, html:root button.meeting-avatar-button { transition: none; } }
@media (max-width: 600px) { html:root .meeting-group { flex-basis: 100%; } html:root :is(button.meeting-open, button.meeting-response) { min-height: 44px; } }