/* The roster belongs to the page edge, not the centered content column. */
@media(min-width:901px){
  .portal-layout.has-sidebar,.homepage-layout{width:calc(100% - 24px);max-width:none;margin-inline:12px;grid-template-columns:260px minmax(0,1fr);gap:28px}
  .portal-layout.has-sidebar>main,.homepage-layout>main{width:100%;max-width:1180px;margin-inline:auto;min-width:0}
}
:is(.portal-layout,.homepage-layout) .online-sidebar details{border:0;background:transparent;padding:0 8px}
:is(.portal-layout,.homepage-layout) .online-sidebar summary{list-style:none;font:600 12px/20px system-ui,sans-serif;color:#a7b29c;letter-spacing:.06em;text-transform:uppercase;padding:8px 0 16px}
:is(.portal-layout,.homepage-layout) .online-sidebar summary::-webkit-details-marker{display:none}
:is(.portal-layout,.homepage-layout) #online-count{margin-left:6px;color:#e4eadf;letter-spacing:0}
:is(.portal-layout,.homepage-layout) .sidebar-note{font:11px/16px system-ui,sans-serif;color:#7f8d78;margin:18px 0 0}
:is(.portal-layout,.homepage-layout) #online-empty{font:12px/18px system-ui,sans-serif;color:#879880}
:is(.portal-layout,.homepage-layout) .online-list{display:grid;gap:6px}
:is(.portal-layout,.homepage-layout) .online-member{height:48px;min-height:48px;max-height:48px;padding:0;margin:0;border:0;align-items:center;gap:10px;overflow:hidden}
:is(.portal-layout,.homepage-layout) .online-member:hover{background:#1c2719;border-radius:8px}
:is(.portal-layout,.homepage-layout) .member-portrait{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;background:#637f56;border-radius:50%;color:#fff;font:500 17px/1 system-ui,sans-serif}
:is(.portal-layout,.homepage-layout) .steam-avatar{position:absolute;inset:0;width:48px;height:48px;border-radius:50%;object-fit:cover}
:is(.portal-layout,.homepage-layout) .member-portrait::after{content:'';position:absolute;right:1px;bottom:1px;width:9px;height:9px;border-radius:50%;background:#8dc56d;border:2px solid #11140f}
:is(.portal-layout,.homepage-layout) .avatar-color-1{background:#66899c}:is(.portal-layout,.homepage-layout) .avatar-color-2{background:#987365}:is(.portal-layout,.homepage-layout) .avatar-color-3{background:#85729f}:is(.portal-layout,.homepage-layout) .avatar-color-4{background:#9a8854}
:is(.portal-layout,.homepage-layout) .online-member>div{height:40px;min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:20px 20px;column-gap:8px}
:is(.portal-layout,.homepage-layout) .online-member strong{display:block;grid-column:1;grid-row:1;font:600 14px/20px system-ui,sans-serif;color:#edf1e8;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.portal-layout,.homepage-layout) .online-member small:not(.steam-hours){display:none}
:is(.portal-layout,.homepage-layout) .online-member .steam-presence{display:block;grid-column:1/-1;grid-row:2;font:12px/20px system-ui,sans-serif;color:#8ea67e;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.portal-layout,.homepage-layout) .online-member .steam-presence::before{content:none}
:is(.portal-layout,.homepage-layout) .online-member .steam-hours{display:block;grid-column:2;grid-row:1;font:11px/20px system-ui,sans-serif;color:#7f8d78;height:20px;white-space:nowrap}
@media(max-width:900px){:is(.portal-layout,.homepage-layout) .online-sidebar summary::after{content:'⌄';float:right;font-size:18px}:is(.portal-layout,.homepage-layout) .online-sidebar details[open] summary::after{content:'⌃'}}
.sidebar-toolbar{display:none}
@media(min-width:901px){
  body.has-online-sidebar{padding-left:276px}
  body.has-online-sidebar.sidebar-collapsed{padding-left:88px}
  .portal-layout.has-sidebar{display:block;width:min(1180px,calc(100% - 40px));margin-inline:auto}
  .homepage-layout{display:block;width:100%;margin:0}
  .homepage-layout>main{max-width:none}
  .homepage-layout .shell{width:min(1180px,calc(100% - 40px))}
  :is(.portal-layout,.homepage-layout) .online-sidebar{position:fixed;inset:0 auto 0 0;z-index:100;width:260px;height:100dvh;overflow:auto;padding:12px;background:#151c13;border-right:1px solid #303c29}
  :is(.portal-layout,.homepage-layout) .online-sidebar details{position:static;padding:0}
  :is(.portal-layout,.homepage-layout) .online-list{max-height:none;overflow:visible}
  :is(.portal-layout,.homepage-layout) .sidebar-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
  #sidebar-toggle{width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#b4c6a6;font:26px/32px system-ui,sans-serif;cursor:pointer}
  #sidebar-toggle:hover{background:#263421}
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) .online-sidebar{width:76px}
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) .sidebar-toolbar{justify-content:center}
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) .online-member{width:48px}
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) .member-copy,
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) .sidebar-note,
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) #online-empty,
  body.sidebar-collapsed :is(.portal-layout,.homepage-layout) #online-members>summary{display:none}
}