/* =====================================================================
   Feed (Reddit-style) component styles. Used by BOTH /feed/ (full page)
   and the homepage teaser. Relies on the brand CSS variables
   (--paper, --ink, --crimson, --line, ...) defined by the host page —
   it does NOT redefine :root, so it's safe to link anywhere.
   ===================================================================== */

/* toolbar: sort toggle (New / Top) */
.feed-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:6px 0 22px }
.feed-sort{ display:inline-flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px }
.feed-sort button{ font:inherit; font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--ink-soft);
  background:none; border:0; padding:6px 15px; border-radius:999px; cursor:pointer; transition:.15s ease }
.feed-sort button[aria-selected="true"]{ background:var(--crimson); color:#fff }

.feed-list{ display:flex; flex-direction:column; gap:16px }

/* post card: [vote rail] [body] */
.feed-card{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 20px;
  border:1px solid var(--line); border-radius:14px; background:var(--tile);
  transition:border-color .2s ease, box-shadow .2s ease }
.feed-card:hover{ box-shadow:0 14px 30px -22px var(--shadow) }

/* vote rail */
.vote{ display:flex; flex-direction:column; align-items:center; gap:2px; user-select:none }
.vote button{ font:inherit; line-height:1; background:none; border:0; cursor:pointer; color:var(--ink-soft);
  font-size:15px; padding:3px 5px; border-radius:7px; transition:.12s ease }
.vote button:hover{ color:var(--crimson); background:var(--paper-2) }
.vote button.up[aria-pressed="true"]{ color:var(--crimson) }
.vote button.down[aria-pressed="true"]{ color:#3b6ea5 }     /* downvote = cool tone */
.vote .count{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink); min-width:2ch; text-align:center }
.vote.static{ gap:0 }
.vote.static .count{ font-size:18px }
.vote.static .vlabel{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) }

/* body */
.feed-body{ min-width:0 }
.feed-type{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson) }
a.feed-card{ text-decoration:none; color:inherit }                /* compact teaser card is a link */
.feed-card h3{ font-family:var(--display); font-weight:600; font-size:21px; line-height:1.2; margin:4px 0 7px }
.feed-card h3 a{ color:inherit; text-decoration:none; transition:color .15s ease }   /* full-card title link */
.feed-card h3 a:hover{ color:var(--crimson) }
.feed-card .text{ font-size:15px; color:var(--ink); line-height:1.6; white-space:pre-wrap; margin:0 0 9px; overflow-wrap:anywhere }
.feed-card.poem .text{ font-family:var(--display); font-size:17px; font-style:italic }    /* poems read as verse */
.feed-card img.media{ max-width:100%; border-radius:10px; border:1px solid var(--line); margin:4px 0 10px; display:block }
.feed-meta{ font-size:12.5px; color:var(--ink-soft); display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.feed-meta a{ color:var(--ink-soft); border-bottom:1px solid var(--crimson); text-decoration:none; padding-bottom:1px }
.feed-meta a:hover{ color:var(--crimson) }

/* compact variant (homepage teaser): static score, clamped body, no media */
.feed-card.compact{ padding:14px 16px; gap:13px }
.feed-card.compact h3{ font-size:17px; margin:2px 0 4px }
.feed-card.compact .text{ font-size:13.5px; margin:0; white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* status / loading states */
.feed-status{ text-align:center; color:var(--ink-soft); font-size:14px; padding:24px 0 }
.feed-sentinel{ height:1px }
.feed-skel{ height:104px; border-radius:14px; border:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--tile),var(--paper-2),var(--tile)); background-size:200% 100%;
  animation:feedshimmer 1.3s linear infinite }
@keyframes feedshimmer{ to{ background-position:-200% 0 } }
@media (prefers-reduced-motion: reduce){ .feed-skel{ animation:none } }

/* ---- Bluesky cards (live third-party posts; the "Bluesky" tab) ---- */
.bsky-card{ padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--tile) }
.bsky-repost{ font-size:12px; color:var(--ink-soft); margin:0 0 8px }
.bsky-head{ display:flex; align-items:center; gap:10px }
.bsky-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--paper-2); border:1px solid var(--line) }
.bsky-avatar.ph{ display:block }
.bsky-id{ display:flex; flex-direction:column; min-width:0; flex:1 }
.bsky-name{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1.2; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bsky-handle{ font-size:12.5px; color:var(--ink-soft) }
.bsky-badge{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#1185fe;
  border:1px solid currentColor; border-radius:999px; padding:2px 8px; flex:0 0 auto }
.bsky-text{ font-size:15px; line-height:1.55; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; margin:11px 0 0 }

.bsky-images{ display:grid; gap:6px; margin:11px 0 0 }
.bsky-images.n2,.bsky-images.n4{ grid-template-columns:1fr 1fr }
.bsky-images.n3{ grid-template-columns:1fr 1fr 1fr }
.bsky-images img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid var(--line); display:block }

.bsky-ext{ display:flex; gap:0; margin:11px 0 0; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  text-decoration:none; color:inherit; transition:border-color .15s ease }
.bsky-ext:hover{ border-color:var(--crimson) }
.bsky-ext-thumb{ width:96px; height:96px; object-fit:cover; flex:0 0 auto; background:var(--paper-2) }
.bsky-ext-body{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; min-width:0 }
.bsky-ext-title{ font-family:var(--display); font-weight:600; font-size:15px; line-height:1.25; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.bsky-ext-desc{ font-size:12.5px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.bsky-ext-host{ font-size:11px; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase }
.bsky-video{ margin:11px 0 0; padding:14px; border:1px dashed var(--line); border-radius:10px; color:var(--ink-soft); font-size:13px }

.bsky-meta{ display:flex; align-items:center; gap:16px; margin-top:12px; font-size:12.5px; color:var(--ink-soft) }
.bsky-meta a{ margin-left:auto; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid #1185fe; padding-bottom:1px }
.bsky-meta a:hover{ color:#1185fe }