/* ---------- ChannelChip ---------- */
.sp-channel { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 4px; border-radius: var(--radius-full); border: 1px solid var(--ink-100); background: var(--paper-000); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-body); color: var(--ink-800); cursor: pointer; transition: var(--transition-control); }
.sp-channel:hover { border-color: var(--ink-300); }
.sp-channel--selected { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); }
.sp-channel--muted { opacity: 0.5; }
.sp-channel__swatch { width: 22px; height: 22px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 800; flex: none; }
.sp-channel__handle { font: var(--text-mono-s); color: var(--ink-400); font-weight: 500; }

/* ---------- PostCard ---------- */
.sp-post { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-1); transition: var(--transition-control); }
.sp-post--interactive { cursor: pointer; }
.sp-post--interactive:hover { border-color: var(--ink-200); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.sp-post__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.sp-post__time { font: var(--text-mono-s); color: var(--ink-500); letter-spacing: var(--tracking-mono); }
.sp-post__spacer { flex: 1 1 auto; min-width: 0; }
.sp-post__copy { font: var(--text-body-s); color: var(--ink-800); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-post__media { height: 76px; border-radius: var(--radius-sm); background: var(--paper-200); border: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: center; color: var(--ink-400); font: var(--text-mono-s); }
.sp-post__foot { display: flex; align-items: center; gap: 12px; }
.sp-post__metric { display: inline-flex; align-items: center; gap: 4px; font: var(--text-mono-s); color: var(--ink-400); }
.sp-post__rail { position: absolute; top: 0; left: 0; right: 0; height: 3px; }