/* A fixed compact presence card above the individually ordered home widgets. */
html:root #home-online-card { position:relative; order:-1; grid-column:1/-1; align-self:start; min-width:0; padding:8px 12px; }
html:root button.online-people-trigger { display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:44px; padding:0; border:0; border-radius:var(--radius-md); box-shadow:none; background:transparent; color:var(--text-primary); text-align:left; font-weight:400; }
html:root button.online-people-trigger:hover { background:var(--theme-soft); }
.online-people-meter { --online-water-color:color-mix(in srgb,#35c6bd 32%,var(--surface)); position:relative; isolation:isolate; display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; overflow:hidden; border:1px solid color-mix(in srgb,#27afa9 55%,var(--border)); border-radius:50%; background:var(--surface); }
.online-people-count { position:relative; z-index:1; font-size:1.05rem; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; }
.online-people-water { position:absolute; z-index:0; inset:0; background:var(--online-water-color); transform:translateY(calc(100% - var(--online-water-level,0%))); transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity .25s ease; pointer-events:none; }
.online-water-wave { position:absolute; top:-4px; left:0; width:200%; height:8px; fill:var(--online-water-color); animation:online-water-drift 4.8s linear infinite; }
.online-water-wave-back { top:-6px; height:9px; opacity:.55; animation-duration:6.4s; animation-direction:reverse; }
.online-people-meter:is([data-water-level="0"],[data-water-level="unknown"]) .online-people-water { opacity:0; }
.online-people-meter:is([data-water-level="0"],[data-water-level="unknown"]) .online-water-wave { animation-play-state:paused; }
.online-people-summary { display:grid; align-content:center; gap:4px; min-width:0; }
#online-people-caption { grid-row:1; color:var(--text-secondary); font-size:.74rem; line-height:1.3; }
.online-people-avatars { display:flex; align-items:center; min-width:0; }
.online-person-avatar { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; overflow:hidden; border-radius:50%; background:var(--theme-soft); color:var(--text-primary); font-size:.73rem; font-weight:600; }
.online-person-avatar img { width:100%; height:100%; object-fit:cover; }
.online-people-avatars .online-person-avatar { flex-basis:22px; width:22px; height:22px; border:2px solid var(--surface); font-size:.6rem; }
.online-people-avatars .online-person-avatar + .online-person-avatar { margin-left:-5px; }
.online-person-more { padding-left:4px; font-size:.67rem; color:var(--text-secondary); white-space:nowrap; }
html:root .online-people-popup { position:fixed; inset:auto; margin:0; padding:12px 16px; width:288px; max-width:calc(100vw - 24px); max-height:360px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-dropdown); }
html:root .online-people-popup:popover-open { display:flex; flex-direction:column; }
.online-people-heading { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
html:root .online-people-heading h2 { margin:0; color:var(--text-secondary); font-size:.85rem; font-weight:500; line-height:1.4; }
html:root #online-people-close { display:grid; place-items:center; flex:0 0 32px; width:32px; min-height:32px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--text-secondary); box-shadow:none; font-size:1.15rem; }
html:root #online-people-close:hover { background:var(--theme-soft); }
.online-people-list { flex:1 1 auto; min-height:0; margin:10px 0 0; padding:0 6px 0 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text-secondary) 28%,transparent) transparent; list-style:none; }
.online-people-list li { display:flex; align-items:center; gap:9px; min-height:38px; padding:4px 0; font-size:.84rem; color:var(--text-secondary); }
html:root .online-people-list .online-person-link { width:100%; min-width:0; min-height:38px; gap:9px; }
.online-person-link .person-name-text { min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.online-people-status { flex:0 0 auto; margin:10px 0 0; color:var(--text-secondary); font-size:.78rem; line-height:1.4; }
html:root #online-people-retry { flex:0 0 auto; margin-top:10px; }
html:root :is(.online-people-trigger,#online-people-close,.online-people-list,.online-person-link):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@keyframes online-water-drift { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .online-people-water { transition:none; }
  .online-water-wave { animation:none; }
}
@media (max-width:700px),(pointer:coarse) {
  html:root #online-people-close { flex-basis:44px; width:44px; min-height:44px; }
  .online-people-list li { min-height:44px; }
  html:root .online-people-list .online-person-link { min-height:44px; }
}
.person-presence { display:inline-flex;align-items:center;gap:5px;color:var(--text-secondary); }
.person-presence::before { content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex:none; }
.person-presence.is-online { color:var(--theme-accent); }
.person-presence.is-online::before { background:#24a979;opacity:1; }