/* =============================================================================
   ACTION BAR — one consistent strip on every card (and, later, every post).
   Icons match the account dashboard; rust rail language; --radius elsewhere.
   ============================================================================= */

.sj-ab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sj-ab-metrics, .sj-ab-actions { display: flex; align-items: center; }

.sj-ab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8;
             stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sj-ab-stat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
              font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--paper-muted);
              text-decoration: none; background: none; border: 0; padding: 0; }
a.sj-ab-stat, button.sj-ab-stat { cursor: pointer; }
a.sj-ab-stat:hover, button.sj-ab-stat:hover { color: var(--violet); }
.sj-ab-passive { cursor: default; }

.sj-ab-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
             border-radius: 999px; cursor: pointer; font-family: var(--font-mono); font-size: 11px;
             font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-muted);
             text-decoration: none; transition: background .15s ease, color .15s ease; }
/* hover/focus: no background at all — just the ICON (and its label) turns violet.
   The background stays transparent in every state. !important on background keeps
   Astra's blue button fill from bleeding in. */
.sj-ab-act:hover, .sj-ab-act:focus-visible { background: none !important; color: var(--violet) !important; }
.sj-ab-act:hover svg, .sj-ab-act:focus-visible svg { stroke: var(--violet); fill: none; }
.sj-ab-act.is-on { color: var(--violet); }
.sj-ab-act.is-on svg { fill: var(--violet); stroke: var(--violet); }
.sj-ab-act.is-on:hover svg, .sj-ab-act.is-on:focus-visible svg { fill: var(--violet); stroke: var(--violet); }

/* ---- card context: tucked to the card foot, tighter, icon-only actions ---- */
/* Side padding matches the card body above it (20px) so the bar lines up with the
   card's content instead of running wider. Music overrides to its 16px body — see
   card-music.css. */
.sj-ab-card { margin-top: 2px; padding: 4px 20px 6px; }
.sj-ab-card .sj-ab-metrics { gap: 13px; }
.sj-ab-card .sj-ab-actions { gap: 4px; }
.sj-ab-card .sj-ab-stat { font-size: 11px; }
.sj-ab-card .sj-ab-act { padding: 5px; }
/* icon-only actions on both cards and posts (label kept for screen readers) */
.sj-ab-card .sj-ab-act .t,
.sj-ab-post .sj-ab-act .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- flagged cards: the bar rides on the coloured surround (notice / sponsored /
   bumped / shares), so its icons + text go paper to read against it. Guest cards
   keep their light body and aren't flagged, so they're untouched. ---- */
.archive-card.is-flagged .sj-ab-stat,
.archive-card.is-flagged .sj-ab-act { color: var(--white); }
.archive-card.is-flagged .sj-ab svg { stroke: var(--white); }
.archive-card.is-flagged a.sj-ab-stat:hover { color: var(--white); text-decoration: underline; }

/* ---- dark cards (video / music): the dark content is its own fully-rounded box;
   the action bar drops below it onto the page's paper instead of being wrapped inside
   the card's clip (which was making the bar look like part of the dark card). ---- */
.archive-card.card-video:not(.is-flagged),
.archive-card.card-music:not(.is-flagged) {
    background-color: transparent;
    border: 0;
    overflow: visible;
}
.card-video:not(.is-flagged) .card-video-thumb,
.card-music:not(.is-flagged) .card-music-thumb {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    overflow: hidden;
}
.card-video:not(.is-flagged) .card-video-body,
.card-music:not(.is-flagged) .card-music-body {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}

/* ---- light cards (posts, writing, gallery, event): same separated look as the dark
   ones — the white content is its own fully-rounded box and the bar drops below it on
   the page paper. Excludes flagged (own coloured surround), status (no bar), guest
   (its own rust-rail look), and video/music (handled above). ---- */
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) {
    background-color: transparent;
    border: 0;
    overflow: visible;
}
/* the white surface moves onto the body (the card itself is now transparent) */
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) .card-body {
    background-color: var(--card);
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}
/* a bodyshot with no thumbnail rounds its top too */
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) .card-body:first-child {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}
/* thumbnails round their top corners as the head of the box */
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) .card-thumb,
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) .card-gallery-collage,
.archive-card:not(.is-flagged):not(.card-status):not(.is-guest-post):not(.card-video):not(.card-music) .card-event-thumb-wrap {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    overflow: hidden;
}

/* ---- post context: roomier, labels shown, a hairline top and bottom to set the
   strip off from the article above/below it ---- */
.sj-ab-post { margin: 22px 0; padding: 10px 2px; border-top: 1px solid rgba(var(--white-rgb), .13); border-bottom: 1px solid rgba(var(--white-rgb), .13); }
.sj-ab-post .sj-ab-metrics { gap: 16px; }
.sj-ab-post .sj-ab-actions { gap: 10px; }
.sj-ab-post .sj-ab-stat { font-size: 11px; }   /* matches the meta row above */
.sj-ab-post .sj-ab-act { padding: 5px; }

@media (max-width: 420px) {
    .sj-ab-card { padding: 4px 20px 6px; }
    .sj-ab-card .sj-ab-metrics { gap: 10px; }
}

/* ---- Hover tooltips on the card action bar -------------------------------------
   The action buttons are icon-only (their .t labels are visually hidden), so a
   little label appears above on hover/focus: Comments, Save post, Follow <name>,
   Share this. Same void-chip look as the pinned-card tack tip. Card context only —
   the single-post bar is roomier and reads fine without them. */
.sj-ab-card [data-tip] { position: relative; }
.sj-ab-card [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(3px);
    white-space: nowrap;
    background: var(--void);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 3px 11px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 30;
}
.sj-ab-card [data-tip]:hover::after,
.sj-ab-card [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* On a flagged (coloured) card the buttons render white; keep the tip legible with
   its own dark chip regardless — already void bg + white text, so nothing to add,
   but pin the text colour so the flagged-card white-text rule can't tint it. */
.archive-card.is-flagged .sj-ab-card [data-tip]::after { color: var(--white); }