/* Community page (Phase 3 sub-step 5). Relies on :root variables and
   header.site from player.css, and reuses .signin-card/.btn-accent/
   .status-msg/.badge-tile/.bd-*/.badge-popup-*/.profile-badges-card/
   .favorites-header/.member-badge-grid/.member-badges-empty from
   profile.css (both loaded before this file in community.html) rather than
   redefining them here. */

.community-wrap{max-width:1080px; margin:0 auto; padding:32px 24px 80px;}
.community-wrap h1{font-size:26px; margin:0 0 6px;}
.community-wrap .sub{color:var(--muted); font-size:13.5px; margin:0 0 28px;}

/* Same embedded-iframe treatment as profile.css — hides the in-page header
   when this page is loaded inside the parent's Community overlay iframe. */
html.embedded header.site{display:none;}
html.embedded .community-wrap{padding-top:48px;}

.community-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;
}
@media(max-width:820px){ .community-layout{grid-template-columns:1fr;} }

.cm-member-card{
  background:var(--card); border:1px solid #1f1f1f; border-radius:14px;
  padding:22px 24px; margin-bottom:20px;
}
.cm-member-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.cm-avatar{
  width:56px; height:56px; border-radius:50%; flex:none;
  background:#1c1c1c; border:2px solid #262626; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cm-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.cm-avatar #cm-avatar-placeholder{font-size:18px; color:var(--muted);}
.cm-member-head h2{margin:0 0 2px; font-size:17px;}
.cm-ssd{margin:0; font-size:12px; color:var(--muted);}
.cm-words{
  font-size:13.5px; color:var(--fg); line-height:1.6; margin:0 0 14px;
  white-space:pre-wrap; border-top:1px solid #1f1f1f; padding-top:14px;
}
.cm-edit-link{color:var(--accent); font-size:12.5px; font-weight:700; text-decoration:none;}
.cm-edit-link:hover{text-decoration:underline;}

.cm-feed-card{
  background:var(--card); border:1px solid #1f1f1f; border-radius:14px;
  padding:22px 24px;
}
.cm-feed-card h2{font-size:15px; margin:0 0 16px;}

/* Horizontal timeline strip — each card is a fixed width so the strip
   scrolls sideways within the (narrower, half-page) right column rather
   than wrapping into a vertical list. */
.cm-feed-strip{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x proximity;
}
.cm-feed-card-item{
  flex:none; width:140px; scroll-snap-align:start;
}
.cm-feed-thumb{
  width:64px; height:64px; border-radius:50%; margin:0 0 10px;
  background-color:#1c1c1c; background-size:cover; background-position:center;
}
.cm-feed-thumb.badge{border-radius:10px; border:2px solid #c9a227;}
.cm-feed-text{font-size:12.5px; line-height:1.5; margin:0 0 4px;}
.cm-feed-text strong{font-weight:700;}
.cm-feed-time{font-size:11px; color:var(--muted); margin:0;}
.cm-feed-empty{color:var(--muted); font-size:12.5px; margin:0;}

/* Signed-out badge preview teaser — sits under the sign-in card, same
   .profile-badges-card treatment as the member-facing badge section, just
   wider than the (deliberately narrow) sign-in card above it so the grid
   has room to show a handful of tiles per row. */
.preview-badges-card{margin:28px auto 0; max-width:720px;}
.preview-badges-sub{color:var(--muted); font-size:12.5px; margin:0 0 16px;}
.preview-badges-hint{color:var(--muted); font-size:12px; margin:14px 0 0;}