/* Social activity feed — image-forward cards (cover + avatar), a ranked
   "Talking now" rail with cover thumbnails, and reader suggestions with
   avatars. Colors come from theme.css tokens, so light/dark are automatic. */

.social-page {
    min-height: 60vh;
}

/* ---- Layout ------------------------------------------------------------- */

.social-shell {
    display: grid;
    gap: 1.25rem;
}

.social-main {
    min-width: 0;
}

/* ---- Controls (sticky filter bar) -------------------------------------- */

.social-controls {
    --lg-safe-bg: transparent;
    --lg-safe-blur: blur(10px);
    /* Frosted, not flat: the shared pseudo fill keeps iOS 26 Safari from
       sampling this sticky element while preserving the page-glow bleed. */
    background: transparent;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .35rem 0 .75rem;
    position: sticky;
    /* offset below the pinned .site-navbar so the controls don't tuck under it */
    top: var(--nav-h);
    z-index: 5;
    isolation: isolate;
}

.social-segmented,
.social-tabs {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: 0.25rem;
    scrollbar-width: none;
}

.social-segmented::-webkit-scrollbar,
.social-tabs::-webkit-scrollbar {
    display: none;
}

.social-tab-btn {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 600;
    padding: .42rem .82rem;
}

.social-tab-btn:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.social-tab-btn.is-active {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

/* ---- Feed -------------------------------------------------------------- */

.social-feed {
    display: grid;
    gap: 1.15rem;
}

.social-item {
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 1rem;
    grid-template-columns: 76px minmax(0, 1fr);
    /* visible so the caption pill can straddle the top edge (mockup look) */
    overflow: visible;
    /* top room for the caption pill, which half-spills above the border */
    padding: 1.6rem 1rem .95rem .95rem;
    position: relative;
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-med) var(--ease-standard),
                transform var(--motion-med) var(--ease-standard);
    animation: social-rise var(--motion-med) var(--ease-enter) both;
}

/* Type-coded accent rail down the left edge gives the feed rhythm. */
.social-item::before {
    background: var(--social-accent, var(--border));
    border-radius: 0 4px 4px 0;
    bottom: 14px;
    content: "";
    left: 0;
    position: absolute;
    top: 14px;
    width: 4px;
}

.social-item--comment        { --social-accent: var(--accent-recent); }
.social-item--review         { --social-accent: var(--accent-canonical); }
.social-item--recommendation { --social-accent: var(--accent-interest); }
.social-item--finished       { --social-accent: var(--brand); }
.social-item--post.social-item--post { grid-template-columns: minmax(0, 1fr); --social-accent: var(--brand); }

.social-item.social-item--compact-activity {
    align-items: center;
    gap: .8rem;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 1rem .9rem .85rem .95rem;
}

.social-item.social-item--compact-activity::before {
    bottom: 10px;
    top: 10px;
}

.social-item.social-item--compact-activity .social-byline {
    margin-bottom: .2rem;
}

.social-item.social-item--compact-activity h2 {
    font-size: 1rem;
    margin-bottom: .15rem;
}

.social-item.social-item--compact-activity .social-actions {
    margin-top: .45rem;
}

@media (hover: hover) {
    .social-item:hover {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
    .social-item:hover .social-cover img {
        transform: scale(1.05);
    }
}

/* Gentle staggered entrance for the first screenful. */
.social-feed > div:nth-child(1) .social-item { animation-delay: .02s; }
.social-feed > div:nth-child(2) .social-item { animation-delay: .06s; }
.social-feed > div:nth-child(3) .social-item { animation-delay: .10s; }
.social-feed > div:nth-child(4) .social-item { animation-delay: .14s; }
.social-feed > div:nth-child(5) .social-item { animation-delay: .18s; }
.social-feed > div:nth-child(6) .social-item { animation-delay: .22s; }

@keyframes social-rise {
    from { opacity: 0; transform: translateY(var(--motion-rise-distance)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Book cover -------------------------------------------------------- */

.social-cover-link {
    display: block;
    line-height: 0;
}

.social-cover {
    align-items: center;
    aspect-ratio: 2 / 3;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    color: var(--text-dim);
    display: flex;
    font-family: var(--font-display);
    font-size: 1.5rem;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.social-cover img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-slow) var(--ease-standard);
    width: 100%;
}

/* The initial ships on every card so a cover that dies on load has something
   to fall back to; only the fallback state reveals it. */
.social-cover-initial {
    display: none;
}

.social-cover-fallback .social-cover-initial {
    display: block;
}

/* ---- Card body --------------------------------------------------------- */

.social-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-item a,
.social-snippet,
.social-rail-title,
.social-rail-note {
    overflow-wrap: anywhere;
}

.social-byline {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin-bottom: .35rem;
}

.social-avatar-link {
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    transition: transform var(--motion-fast) var(--ease-standard);
}

.social-avatar-link:hover {
    transform: scale(1.06);
}

.social-avatar-link .avatar {
    box-shadow: 0 0 0 1px rgba(var(--border-rgb), .9);
}

.social-meta {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
}

.social-actor {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.social-actor:hover {
    text-decoration: underline;
}

/* The action verb floats out of the byline into a comic-style caption pill
   pinned to the card's top-left, tinted by the activity-type accent. */
.social-verb {
    background: color-mix(in srgb, var(--social-accent, var(--text-muted)) 15%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--social-accent, var(--text-muted)) 32%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    color: var(--social-accent, var(--text-muted));
    font-size: .68rem;
    font-weight: 800;
    left: 1rem;
    letter-spacing: .06em;
    padding: .26rem .7rem;
    position: absolute;
    text-transform: uppercase;
    top: -.7rem;
    white-space: nowrap;
    z-index: 3;
}

/* Rating stars inside the review caption pill (mockup look). Empty stars dim. */
.social-verb-stars {
    font-size: .74rem;
    letter-spacing: .04em;
    margin-left: .35rem;
}

.social-dot {
    color: var(--text-dim);
    margin: 0 .1rem;
}

.social-time {
    color: var(--text-dim);
    font-size: .82rem;
    white-space: nowrap;
}

.social-item h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: .05rem 0 .35rem;
}

.social-item h2 a {
    color: var(--text);
    text-decoration: none;
}

.social-item h2 a:hover {
    color: var(--brand);
}

.social-rating {
    align-items: center;
    color: var(--text);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: .25rem;
    margin: 0 0 .35rem;
}

.social-rating-star {
    color: var(--accent-canonical);
}

/* The reader's words sit in a soft speech balloon with a tail — the comic
   read, in the site's modern surface language. */
.social-snippet {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    line-height: 1.5;
    margin: .55rem 0 0;
    max-width: 60ch;
    padding: .6rem .8rem;
    position: relative;
}

.social-snippet::before,
.social-snippet::after {
    border-style: solid;
    content: "";
    height: 0;
    left: 22px;
    position: absolute;
    width: 0;
}

.social-snippet::before {
    border-color: var(--border) transparent transparent transparent;
    border-width: 11px 11px 0 0;
    bottom: -11px;
}

.social-snippet::after {
    border-color: var(--bg) transparent transparent transparent;
    border-width: 9px 9px 0 0;
    bottom: -9px;
}

.social-spoiler {
    color: var(--text-muted);
    font-style: italic;
}

/* Detail page only: the full body may carry the author's own line breaks —
   render them as paragraph-like breaks. Feed cards keep the clipped single-
   line snippet untouched. */
.social-post-article--detail .social-snippet {
    white-space: pre-line;
}

.social-target {
    align-items: center;
    color: var(--brand);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 700;
    gap: .25rem;
    margin-top: .6rem;
    text-decoration: none;
}

.social-target-arrow {
    transition: transform var(--motion-fast) var(--ease-standard);
}

.social-target:hover {
    text-decoration: underline;
}

.social-target:hover .social-target-arrow {
    transform: translateX(3px);
}

/* ---- Action row -------------------------------------------------------- */
/* Reactions on the left; Open + comments grouped to the right — one compact
   row instead of three stacked affordances (kills the vertical gaps). */
.social-actions {
    align-items: center;
    column-gap: .85rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: .7rem;
    row-gap: .5rem;
}

.social-actions-end {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    margin-left: auto;
}

/* Drop the per-element top margins now that they live in a shared row. */
.social-actions .social-target,
.social-actions .social-comment-toggle {
    align-self: center;
    margin-top: 0;
}

.social-actions .pr-bar {
    margin: 0;
}

/* ---- States ------------------------------------------------------------ */

.social-status {
    color: var(--text-muted);
    margin: 0;
}

.social-error {
    color: var(--accent-interest);
}

.social-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.social-empty-mark {
    color: var(--text-dim);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.social-empty-title {
    color: var(--text);
    font-weight: 700;
    margin: 0 0 .25rem;
}

.social-empty-note {
    margin: 0 auto;
    max-width: 38ch;
}

.social-load-more {
    justify-self: start;
    margin-top: .25rem;
}

/* ---- Skeleton loading -------------------------------------------------- */

.social-skeleton {
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: 76px minmax(0, 1fr);
    padding: .95rem 1rem;
}

.sk-cover,
.sk-avatar,
.sk-line {
    background: linear-gradient(90deg,
        var(--surface-2) 25%,
        rgba(var(--border-rgb), .55) 37%,
        var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: social-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

.sk-cover {
    aspect-ratio: 2 / 3;
    width: 100%;
}

.sk-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-top: .15rem;
}

.sk-byline {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.sk-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

.sk-line {
    height: .8rem;
    width: 100%;
}

.sk-line-meta  { width: 45%; }
.sk-line-title { height: 1.1rem; width: 70%; }
.sk-line-short { width: 55%; }

@keyframes social-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

/* ---- Discovery rail ---------------------------------------------------- */

.social-rail {
    display: none;
}

.social-compose-hint {
    color: var(--text-muted);
    font-size: .95rem;
    margin: .35rem 0 0;
}

.social-rail-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.1rem;
    padding: .85rem 1rem 1rem;
}

.social-rail-section:last-child {
    margin-bottom: 0;
}

.social-rail-section h2 {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.social-rail-row {
    align-items: center;
    border-radius: var(--radius-sm);
    color: inherit;
    display: flex;
    gap: .6rem;
    padding: .45rem .4rem;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.social-rail-row:hover {
    background: var(--surface-2);
}

.social-rail-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-rail-title {
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
}

.social-rail-note,
.social-rail-empty {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0;
}

/* "Talking now" — ranked covers */
.social-talking-rank {
    color: var(--text-dim);
    flex: 0 0 1rem;
    font-family: var(--font-display);
    font-size: .9rem;
    text-align: center;
}

.social-rail-cover {
    align-items: center;
    aspect-ratio: 2 / 3;
    background: var(--surface-2);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    color: var(--text-dim);
    display: flex;
    flex: 0 0 34px;
    font-family: var(--font-display);
    font-size: .95rem;
    justify-content: center;
    overflow: hidden;
    width: 34px;
}

.social-rail-cover img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Reader suggestions — avatar + identity */
.social-reader-row .avatar {
    box-shadow: 0 0 0 1px rgba(var(--border-rgb), .9);
}
/* ---- Discover tab ---------------------------------------------------- */

.social-discover {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.social-discover-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .95rem;
    position: relative;
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-med) var(--ease-standard);
    animation: social-rise var(--motion-med) var(--ease-enter) both;
}

@media (hover: hover) {
    .social-discover-card:hover {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-md);
    }
}

.social-discover-dismiss {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: .25rem;
    position: absolute;
    right: .5rem;
    top: .5rem;
    transition: color var(--motion-fast) var(--ease-standard);
}

.social-discover-dismiss:hover {
    color: var(--text);
}

.social-discover-identity {
    align-items: center;
    color: inherit;
    display: flex;
    gap: .6rem;
    text-decoration: none;
}

.social-discover-identity:hover .social-discover-name {
    color: var(--brand);
}

.social-discover-identity .avatar {
    box-shadow: 0 0 0 1px rgba(var(--border-rgb), .9);
}

.social-discover-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-discover-name {
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--motion-fast) var(--ease-standard);
    white-space: nowrap;
}

.social-discover-handle {
    color: var(--text-muted);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-discover-reason {
    background: color-mix(in srgb, var(--accent-recent) 15%, transparent);
    border-radius: var(--radius-pill);
    color: var(--accent-recent);
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .65rem;
    width: fit-content;
}

.social-discover-actions {
    display: flex;
    gap: .5rem;
    margin-top: auto;
}

.social-discover-action {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
}

.social-discover-action .btn {
    width: 100%;
}

.action-hint {
    color: var(--text-dim);
    font-size: .72rem;
    line-height: 1.2;
    text-align: center;
}

/* ---- Mobile Talking Now strip (Discover tab) --------------------------- */

.social-talking-strip {
    margin-bottom: 1.25rem;
}

.social-talking-strip-heading {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.social-talking-strip-row {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.social-talking-strip-row::-webkit-scrollbar {
    display: none;
}

.social-talking-strip-item {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: inherit;
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
    min-width: 160px;
    padding: .5rem .6rem;
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-standard);
}

.social-talking-strip-item:hover {
    border-color: var(--border-strong);
}

.social-talking-strip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-talking-strip-title {
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-talking-strip-count {
    color: var(--text-muted);
    font-size: .75rem;
}

/* Hide the talking strip on desktop (sidebar already shows this) */
@media (min-width: 992px) {
    .social-talking-strip {
        display: none;
    }
}

/* Staggered entrance for discover cards */
.social-discover > :nth-child(1) .social-discover-card,
.social-discover > :nth-child(1)[class*="social-discover-card"] { animation-delay: .02s; }
.social-discover > :nth-child(2) .social-discover-card,
.social-discover > :nth-child(2)[class*="social-discover-card"] { animation-delay: .06s; }
.social-discover > :nth-child(3) .social-discover-card,
.social-discover > :nth-child(3)[class*="social-discover-card"] { animation-delay: .10s; }
.social-discover > :nth-child(4) .social-discover-card,
.social-discover > :nth-child(4)[class*="social-discover-card"] { animation-delay: .14s; }
.social-discover > :nth-child(5) .social-discover-card,
.social-discover > :nth-child(5)[class*="social-discover-card"] { animation-delay: .18s; }
.social-discover > :nth-child(6) .social-discover-card,
.social-discover > :nth-child(6)[class*="social-discover-card"] { animation-delay: .22s; }

/* Eye icon prefix on sidebar reader rows */
.social-reader-row .social-rail-title::before {
    content: "◉ ";
    color: var(--text-dim);
    font-size: .75rem;
}

/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .social-item,
    .social-cover img,
    .social-discover-card,
    .social-talking-strip-item,
    .sk-cover,
    .sk-avatar,
    .sk-line,
    .social-target-arrow,
    .social-avatar-link {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- Breakpoints ------------------------------------------------------- */

/* Short viewports -- a phone in landscape. Pinning the filter strip costs 120px
   of a 390px-tall screen; with the 60px navbar above it that is 180px, 46% of
   everything the reader came for, leaving 210px of feed (measured at 844x390,
   GH-127). Portrait has the room and keeps the strip pinned; here it scrolls
   away with the feed and the navbar alone stays fixed, which brings pinned
   chrome to 15%. The filters are one scroll up, not gone.

   NOTE the offset above is NOT the bug this addresses. `.social-controls` pins
   at 68.19px against a 60px navbar and measures zero overlap at 844x390. The
   46px "behind the navbar" originally reported is what a sticky element does
   when its containing block runs out -- `.social-main` is short whenever the
   feed has not loaded -- and is standard behaviour, not a defect. Changing the
   offset would have been a fix for a bug that is not there. */
@media (max-height: 480px) {
    .social-controls {
        position: static;
    }
}

@media (min-width: 768px) {
    .social-controls {
        top: calc(var(--nav-h) + .5rem);
    }

    .social-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .social-item,
    .social-skeleton {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

@media (min-width: 992px) {
    .social-shell {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .social-rail {
        display: block;
        position: sticky;
        top: calc(var(--nav-h) + 1rem);
    }
}

/* ---- Inline comment thread on feed cards --------------------------------- */

.social-comment-toggle {
    background: none; border: 0; cursor: pointer; color: var(--text-muted);
    font-size: .85rem; padding: .25rem .5rem; border-radius: 6px;
}
.social-comment-toggle:hover { background: var(--surface-2); color: var(--text); }
.social-post-comments { margin: .25rem 0 1rem; padding: .75rem 1rem; background: var(--surface-2); border-radius: 10px; }

/* ---- Tombstoned (source-removed) feed posts ------------------------------ */

.social-removed-note { color: var(--text-muted); font-style: italic; margin: .25rem 0; }
.social-item:has(.social-removed-note) { opacity: .85; }

/* ---- Expanded post articles ------------------------------------------- */

.social-feed-row {
    min-width: 0;
}

.social-feed-row.is-expanded .social-item,
.social-item.is-expanded {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: none;
}

.social-comment-toggle {
    align-items: center;
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    gap: .35rem;
    margin-top: .75rem;
    min-height: 36px;
    padding: .38rem .75rem;
    transition: background-color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.social-comment-toggle:hover,
.social-comment-toggle.is-active {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

.social-post-comments {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-sm);
    margin: -.1rem 0 .6rem;
    padding: 1rem;
}

.social-post-thread-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
}

.social-post-thread-kicker {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin: 0 0 .15rem;
    text-transform: uppercase;
}

.social-post-thread-head h2 {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
}

.social-post-thread-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.social-post-link,
.social-post-collapse,
.social-post-back {
    color: var(--text);
    font-size: .84rem;
    min-height: 36px;
    padding: .35rem .7rem;
}

.social-post-link:hover,
.social-post-collapse:hover,
.social-post-back:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.social-post-compose {
    margin-bottom: 1rem;
}

.social-post-signin,
.social-post-empty {
    margin: .2rem 0 1rem;
}

.social-post-missing {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    padding: 1rem;
}

.social-post-detail-page .container {
    max-width: 860px;
}

.social-post-detail-topbar {
    margin-bottom: 1rem;
}

.social-post-article {
    margin-bottom: 1rem;
}

.social-post-article-card {
    grid-template-columns: 92px minmax(0, 1fr);
}

.social-post-title {
    font-size: 1.35rem;
    line-height: 1.2;
    margin: .1rem 0 .45rem;
}

.social-post-title a {
    color: var(--text);
    text-decoration: none;
}

.social-post-title a:hover {
    color: var(--brand);
}

.social-post-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
}

.social-removed-note {
    color: var(--text-muted);
    font-style: italic;
    margin: .45rem 0 0;
}

.social-post-detail-thread .comments-section {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    .social-item,
    .social-post-article-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: .75rem;
        padding: 1.5rem .85rem .85rem;
    }

    .social-item.social-item--compact-activity {
        gap: .7rem;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: .9rem .8rem .8rem .9rem;
    }

    .social-post-comments {
        padding: .85rem;
    }

    .social-post-thread-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .social-post-thread-actions {
        justify-content: flex-start;
        width: 100%;
    }

}

.social-post-text { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; color: var(--text, #2b2721); }
/* GH-301: a forum-backed feed card leads with its title; the link is the forum
   thread. Not .social-post-title, which is the permalink page's h1. */
.social-post-headline { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--text); }
.social-post-headline-link { color: inherit; text-decoration: none; }
.social-post-headline-link:hover, .social-post-headline-link:focus-visible { text-decoration: underline; }

.social-post-body-shell {
    position: relative;
    transition: height var(--motion-med) var(--ease-standard);
}

.social-post-body-text {
    overflow: hidden;
}

.social-post-body-shell:not(.is-expanded) .social-post-body-text {
    max-height: 7.25em;
}

.social-post-body-shell.is-expanded .social-post-body-text {
    max-height: none;
}

.social-post-body-shell.has-overflow:not(.is-expanded)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
    bottom: 2.1rem;
    content: "";
    height: 2.8em;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.social-post-body-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    margin: -2px 0 10px;
    min-height: 32px;
    padding: .25rem .1rem;
    position: relative;
    transition: color var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
    z-index: 1;
}

.social-post-body-toggle:hover {
    color: var(--text);
}

.social-post-body-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.social-post-body-toggle[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .social-post-body-shell,
    .social-post-body-toggle {
        transition: none;
    }
}

.social-post-covers { display: flex; gap: 10px; flex-wrap: wrap; }
.social-post-cover { width: 70px; height: 105px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); box-shadow: 0 4px 12px #0002; }
.social-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.social-post-cover-fallback { font-family: var(--font-display, 'Archivo Black'), sans-serif; color: var(--text-dim); font-size: 22px; }
.social-post-cover-more { background: var(--surface-2); color: var(--text-muted); font-family: var(--font-display, 'Archivo Black'), sans-serif; font-size: 16px; }
.social-post-cover-link { display: block; }

/* Featured spotlight — auto-curated trending edition with a subtle, scroll-driven
   perspective effect (animated by spotlight_effect.js / SpotlightFX). */
.social-item--featured_spotlight {
    --social-accent: var(--accent-canonical);
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
}
.social-item--featured_spotlight::before { z-index: 2; }

.social-spotlight {
    perspective: 1100px;
    padding: .85rem;
}
.social-spotlight__stage {
    transform-style: preserve-3d;
    transition: transform var(--motion-med) var(--ease-standard);
}
.social-spotlight__cover {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-sm);
}
.social-spotlight__img {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
}
.social-spotlight__img--fallback { background: var(--border); }
.social-spotlight__glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
}
.social-spotlight__meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
}
.social-spotlight__reason {
    margin: 0 0 .25rem;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-canonical);
}
.social-spotlight__title { margin: 0; font-size: 1.25rem; line-height: 1.15; color: #fff; }
.social-spotlight__creators { margin: .2rem 0 0; font-size: .85rem; opacity: .9; }
.social-spotlight__open { margin-top: .6rem; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .social-spotlight__stage { transform: none !important; transition: none; }
    .social-spotlight__img { transform: none !important; }
    .social-spotlight__glare { opacity: 0 !important; }
}