/* Community feed — shared styles for the two pages that mount feed-web.js
   (room_checkout.html, challenge_page.html); class names must stay in sync
   with feed-web.js. Extracted from both templates' inline <style> blocks
   2026-08-10 so readability fixes land once.
   Relies on each page's :root tokens (--bone/--cream/--ash/--maroon/--danger/
   --live/--mono/--serif).
   Text rule: headings cream, body bone; only timestamps/placeholders/
   tombstones stay muted (--ash), and never darker than #555 on midnight. */

/* ── Feed anatomy ─────────────────────────────────────────────────────── */
.feed-tabs { display:flex; gap:0; border-bottom:1px solid #1a1a1a; margin:0 0 14px; }
.ftab { background:none; border:none; border-bottom:2px solid transparent; padding:10px 16px;
        font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
        color:var(--bone); opacity:.8; cursor:pointer; }
.ftab.active { opacity:1; color:var(--cream); border-bottom-color:var(--maroon); }
.composer { display:flex; gap:10px; align-items:center; background:#0c0c0c; border:1px solid #1c1c1c;
            border-radius:4px; padding:12px 14px; margin-bottom:16px; }
.composer input { flex:1; background:transparent; border:none; outline:none; font-family:var(--mono);
                  font-size:14px; color:var(--bone); }
.composer input::placeholder { color:var(--ash); }
.composer .send { background:var(--maroon); border:none; padding:10px 18px; font-family:var(--mono);
                  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); cursor:pointer; }
.post { border:1px solid #1c1c1c; background:#0c0c0c; border-radius:4px; margin-bottom:14px; position:relative; }
.post.pinned { border-color:rgba(128,0,32,.4); }
.pin-strip { display:flex; align-items:center; gap:6px; padding:7px 16px; background:rgba(128,0,32,.08);
             border-bottom:1px solid rgba(128,0,32,.2); font-size:10px; letter-spacing:.16em;
             text-transform:uppercase; color:var(--cream); }
.post-main { padding:15px 16px; }
.post-head { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.post-av { width:30px; height:30px; border-radius:50%; background:#151515; border:1px solid #242424;
           display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--bone);
           flex-shrink:0; overflow:hidden; }
.post-av img { width:100%; height:100%; object-fit:cover; }
.post-av.host { background:#1a1010; border-color:rgba(128,0,32,.3); }
.post-who { font-size:13px; color:var(--bone); }
.host-chip { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
             border:1px solid rgba(128,0,32,.5); background:rgba(128,0,32,.12); padding:2px 6px; margin-left:6px; }
.post-when { font-size:11px; color:var(--ash); margin-left:auto; letter-spacing:.04em; }
.post-dots { color:var(--bone); opacity:.8; font-size:16px; margin-left:10px; cursor:pointer; background:none; border:none; }
.post-title { font-family:var(--serif); font-size:18px; color:var(--cream); margin-bottom:6px; }
.post-text { font-size:14px; color:var(--bone); line-height:1.75; white-space:pre-line; }
.post-acts { display:flex; gap:18px; padding:10px 16px; border-top:1px solid #121212; }
.fact { font-size:12px; color:var(--bone); letter-spacing:.06em; cursor:pointer;
        background:none; border:none; font-family:var(--mono); }
.fact.liked { color:var(--maroon); }
.post-comments { padding:0 16px 14px; display:flex; flex-direction:column; gap:12px; }
.cmt { display:flex; gap:10px; }
.cmt-av { width:24px; height:24px; border-radius:50%; background:#151515; border:1px solid #242424;
          display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--bone);
          flex-shrink:0; overflow:hidden; }
.cmt-av img { width:100%; height:100%; object-fit:cover; }
.cmt-av.host { background:#1a1010; border-color:rgba(128,0,32,.3); }
.cmt-body { flex:1; }
.cmt-who { font-size:12px; color:var(--bone); margin-bottom:2px; }
.cmt-who .t { color:var(--ash); font-size:11px; margin-left:6px; }
.cmt-text { font-size:13px; color:var(--bone); line-height:1.7; }
.cmt-text.tombstone { font-style:italic; opacity:.45; }
.cmt-acts { display:flex; gap:14px; margin-top:4px; }
.cmt-act { font-size:11px; color:var(--bone); opacity:.8; letter-spacing:.06em; cursor:pointer;
           background:none; border:none; font-family:var(--mono); }
.cmt-act.liked { color:var(--maroon); opacity:1; }
.replies { margin-top:10px; padding-left:16px; border-left:1px solid #1c1c1c;
           display:flex; flex-direction:column; gap:10px; }
.view-more { font-size:12px; color:var(--bone); opacity:.8; cursor:pointer; background:none; border:none;
             font-family:var(--mono); text-align:left; padding:0 16px 14px; }
.mod-menu { position:absolute; right:12px; top:40px; background:#101010; border:1px solid #242424;
            border-radius:4px; min-width:170px; box-shadow:0 12px 30px rgba(0,0,0,.6); z-index:5; }
.mod-item { padding:11px 14px; font-size:12px; letter-spacing:.08em; color:var(--bone); cursor:pointer;
            border-bottom:1px solid #181818; }
.mod-item:last-child { border-bottom:none; }
.mod-item.danger { color:var(--danger); }
.locked { border:1px solid #1c1c1c; background:#0c0c0c; border-radius:4px; padding:40px 22px;
          text-align:center; margin-top:18px; }
.locked-t { font-family:var(--serif); font-size:20px; color:var(--cream); margin-bottom:8px; }
.locked-s { font-size:13px; color:var(--bone); line-height:1.7; max-width:380px; margin:0 auto 16px; }
.locked-btn { background:var(--maroon); border:none; padding:12px 24px; font-family:var(--mono);
              font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); cursor:pointer; }
.feed-note { font-size:13px; color:var(--bone); padding:14px 0; }
.reply-box { display:flex; gap:8px; margin-top:8px; }
.reply-box input { flex:1; background:#0a0a0a; border:1px solid #1c1c1c; padding:9px 11px;
                   font-family:var(--mono); font-size:13px; color:var(--bone); outline:none; }
.reply-box button { background:var(--maroon); border:none; padding:0 14px; font-family:var(--mono);
                    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); cursor:pointer; }
.edit-box textarea { width:100%; background:#0a0a0a; border:1px solid #1c1c1c; padding:10px;
                     font-family:var(--mono); font-size:14px; color:var(--bone); outline:none; resize:vertical; min-height:70px; }

/* ── Feed attachments — composer chips + post media grid ──────────────── */
.attach-btn { background:none; border:1px solid #1c1c1c; border-radius:4px; padding:8px 10px;
              font-size:14px; cursor:pointer; line-height:1; }
.attach-chips { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 16px; }
.attach-chips:empty { display:none; }
.attach-chip { position:relative; display:flex; align-items:center; gap:8px; background:#0c0c0c;
               border:1px solid #1c1c1c; border-radius:4px; padding:6px 10px; max-width:260px; overflow:hidden; }
.attach-chip img { width:28px; height:28px; object-fit:cover; border-radius:2px; }
.attach-chip-name { font-size:11px; color:var(--bone); white-space:nowrap; overflow:hidden;
                    text-overflow:ellipsis; max-width:140px; }
.attach-chip-size { font-size:10px; color:var(--ash); }
.attach-chip-bar { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--maroon);
                   transition:width .2s; }
.attach-chip-x { background:none; border:none; color:var(--bone); opacity:.8; font-size:14px; cursor:pointer; padding:0 2px; }
.attach-chip.uploading .attach-chip-x { visibility:hidden; }
.post-attach { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.post-attach-img img { max-width:100%; max-height:420px; border-radius:4px; border:1px solid #1c1c1c;
                       display:block; }
.post-attach-video { max-width:100%; max-height:420px; border-radius:4px; border:1px solid #1c1c1c;
                     background:#000; }
.post-attach-file { display:flex; align-items:center; gap:10px; border:1px solid #1c1c1c; background:#0a0a0a;
                    border-radius:4px; padding:10px 12px; text-decoration:none; }
.post-attach-file-icon { color:var(--bone); font-size:14px; }
.post-attach-file-name { font-size:13px; color:var(--bone); white-space:nowrap; overflow:hidden;
                         text-overflow:ellipsis; }
.post-attach-file-size { font-size:11px; color:var(--ash); margin-left:auto; flex-shrink:0; }

/* ── Lesson videos (Cloudflare Stream) ────────────────────────────────── */
.stream-box { width:100%; }
.stream-poster { display:flex; align-items:center; gap:12px; width:100%; padding:22px 18px;
                 background:#0a0a0a; border:1px solid #1c1c1c; border-radius:4px; cursor:pointer;
                 font-family:var(--mono); text-align:left; }
.stream-poster:hover { border-color:var(--graphite); }
.stream-play { display:flex; align-items:center; justify-content:center; width:42px; height:42px;
               flex-shrink:0; border-radius:50%; background:var(--maroon); color:var(--cream);
               font-size:16px; padding-left:3px; }
.stream-poster-label { font-size:14px; color:var(--bone); }
.stream-frame { width:100%; aspect-ratio:16/9; border:1px solid #1c1c1c; border-radius:4px;
                background:#000; display:block; }
.stream-processing { display:flex; align-items:center; gap:10px; padding:16px 18px;
                     background:#0a0a0a; border:1px dashed #2a2a2a; border-radius:4px;
                     font-size:13px; color:var(--bone); }
.stream-spinner { width:14px; height:14px; flex-shrink:0; border-radius:50%;
                  border:2px solid #2a2a2a; border-top-color:var(--cream);
                  animation:stream-spin 1s linear infinite; }
@keyframes stream-spin { to { transform:rotate(360deg); } }
.stream-tombstone { padding:14px 18px; background:#0a0a0a; border:1px solid #1c1c1c;
                    border-radius:4px; font-size:13px; color:var(--ash); font-style:italic; }