/* ====================================================================
   FORUM THREAD-SHOW — additive polish (OP card + Replies segment head)
   Enqueued ONLY from thread_show.blade.php, strictly scoped under the
   `.tm-thread` marker so it cannot leak to other forum pages or to the
   rest of the CMS. It layers cleanly ON TOP of forum-thread-modern.css
   (loaded first). Pure presentational CSS: no markup IDs / JS hooks /
   data-* reading hooks are touched. Theme-aware via the existing
   --tm-* tokens (dark theme adjusts those tokens under html.dark-theme),
   RTL tolerant, and degrades gracefully because it relies only on the
   already-present article/aside/head/foot structure of this page.
   ==================================================================== */

/* ------------------------------------------------------------------
   1) OP: turn the flattened original-post shell into a coherent card
   that still respects the JS/data hooks. The original author "rail"
   (.forum-civis-post__user) is NOT in the flushed two-column grid any
   more; we keep its semantic content but restyle it into a tasteful
   top author/dateline strip inside the card, and keep the body head as
   a thin published line so everything reads like one deliberate panel.
   ------------------------------------------------------------------ */

/* give the sealed-off OP a generous, soft, stacked card slot above the
   reply stack (which has its own gap). Because all prior "modern" rules
   neutralised article.forum-civis-post we deliberately re-surface it. */
#forum-tw .tm-thread article.forum-civis-post.is-op,
#forum-tw .tm-thread article#thread-op-post,
#forum-tw .tm-thread #thread-op-post {
    display: block;
    background: var(--tm-surface);
    border: 1px solid var(--tm-line);
    box-shadow: var(--tm-shadow);
    border-radius: var(--tm-border-radius);
    padding: 1.05rem 1.2rem 1.15rem;
    margin: 0 0 1rem;
    overflow: hidden;
}

/* mobile: ease the card gutters down so prose text-breakpoint is comfy */
@media (max-width: 575.98px) {
    #forum-tw .tm-thread article.forum-civis-post.is-op,
    #forum-tw .tm-thread #thread-op-post {
        padding: .95rem .95rem 1.05rem;
    }
}

/* The author rail child inner block. It sits directly inside the card,
   ahead of the body, so we promote it to a horizontal, centered strip
   with the body's own `.forum-civis-post__head` acting as the sub-line. */
#forum-tw .tm-thread article.is-op .forum-civis-post__user,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .6rem;
    row-gap: .3rem;
    padding: .1rem 0 .75rem;
    margin: 0 0 .55rem;
    border-bottom: 1px solid var(--tm-line);
}

/* avatar: full-rounded, inline in the author strip (48px reads well). */
#forum-tw .tm-thread article.is-op .forum-civis-post__avatar,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tm-surface-3);
    border: 2px solid var(--tm-surface);
    box-shadow: 0 0 0 1px var(--tm-line-2), 0 3px 10px -6px rgba(16, 24, 40, .35);
}

/* author identity — name link, larger + stronger now it is the lead. */
#forum-tw .tm-thread article.is-op .forum-civis-post__username,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__username {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tm-ink);
}
#forum-tw .tm-thread article.is-op .forum-civis-post__username .forum-civis-post__username-link,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__username .forum-civis-post__username-link {
    color: inherit;
    text-decoration: none;
}
#forum-tw .tm-thread article.is-op .forum-civis-post__username .forum-civis-post__username-link:hover,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__username .forum-civis-post__username-link:hover {
    color: var(--tm-accent);
}

/* rank chip (its bg/color are already inlined from $rank). keep it compact
   and aligned with the name. */
#forum-tw .tm-thread article.is-op .forum-civis-post__rank,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__rank {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.4;
    margin-inline-start: .05rem;
}

/* reputation pill → de-emphasized but readable; force star colour through
   the token so it stays legible in both themes. */
#forum-tw .tm-thread article.is-op .forum-civis-post__rep,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__rep {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 600;
    margin-inline-start: .1rem;
    color: var(--tm-muted);
}
#forum-tw .tm-thread article.is-op .forum-civis-post__rep .bi,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__rep .bi {
    color: var(--tm-warn);
}
html.dark-theme #forum-tw .tm-thread .forum-civis-post__rep { color: var(--tm-muted); }

/* a crisp, small "OP" chip at the author bar end so the starter role is
   readable at a glance but stays a quiet tag next to the rank/rep pair.
   (The larger standalone OP tile the legacy rail used is toned down.) */
#forum-tw .tm-thread article.is-op .forum-civis-post__user .forum-civis-badge-op,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__user .forum-civis-badge-op {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: .08rem .5rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.4;
    border-radius: 999px;
    text-transform: uppercase;
    background: var(--tm-accent-soft);
    color: var(--tm-accent-2);
}
html.dark-theme #forum-tw .tm-thread article.is-op .forum-civis-post__user .forum-civis-badge-op,
html.dark-theme #forum-tw .tm-thread #thread-op-post .forum-civis-post__user .forum-civis-badge-op {
    color: var(--tm-accent);
}
#forum-tw .tm-thread article.is-op .forum-civis-post__user .forum-civis-badge-op .bi,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__user .forum-civis-badge-op .bi {
    display: none; /* legacy tile can carry an icon we don't need here */
}

/* keep icon-only legacy tile out of the author strip on tiny screens to
   prevent chip overflow (the avatar + name + rank still fit comfortably) */
@media (max-width: 420px) {
    #forum-tw .tm-thread article.is-op .forum-civis-post__rep,
    #forum-tw .tm-thread #thread-op-post .forum-civis-post__rep { display: none; }
}

/* body head → quiet "published / Original post" dateline beneath the
   author strip, sitting flush to the two-col content itself. */
#forum-tw .tm-thread article.is-op .forum-civis-post__head,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: .75rem;
    row-gap: .35rem;
    margin: 0 0 .35rem;
    padding: 0 0 .05rem;
    background: transparent;
    border: 0;
    color: var(--tm-faint);
    font-size: .78rem;
}
#forum-tw .tm-thread article.is-op .forum-civis-post__head > span:first-child,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__head > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* keep the nice serif prose breathing inside the freshly padded card */
#forum-tw .tm-thread article.is-op .forum-civis-post__content,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__content {
    padding: 0;
}

/* media and tags keep inherited spacing but look framed on the surface */
#forum-tw .tm-thread article.is-op .forum-civis-post__media,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__media {
    margin-top: 1rem;
}
#forum-tw .tm-thread article.is-op .forum-civis-post__tags,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__tags {
    margin-top: 1.15rem;
}

/* foot: subtle top hairline so Love/Report read as an action bar, and
   inherit the surface (buttons already themed by the modern file). */
#forum-tw .tm-thread article.is-op .forum-civis-post__foot,
#forum-tw .tm-thread #thread-op-post .forum-civis-post__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: 1.05rem;
    padding: .85rem 0 .1rem;
    border-top: 1px solid var(--tm-line);
    background: transparent;
    border-bottom: 0;
}

/* ------------------------------------------------------------------
   2) REPLIES SEGMENT HEAD. Immediately precedes the still-present
   filter chips (#tm-comment-filters/.tm-chips). We keep #totalRepliesHead
   as the SAME element it always was — just wrap it in a deliberate,
   prominent segmented title bar (icon tile + “Replies” + live count +
   a passive legend on the far end). We do not duplicate or move the
   chips; they simply sit right below this bar as they already do.
   ------------------------------------------------------------------ */

/* a confident, segmented title bar, distinct from generic body text. */
#forum-tw .tm-thread .forum-civis-replies-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .6rem;
    row-gap: .4rem;
    margin: .25rem 0 0;
    padding: 1.05rem .15rem .15rem;
    border: 0;
    color: var(--tm-ink);
}

/* icon tile + label side */
#forum-tw .tm-thread .forum-civis-replies-head > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--tm-ink);
    min-width: 0;
}
#forum-tw .tm-thread .forum-civis-replies-head > span:first-child .bi {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent-2));
    color: var(--tm-accent-ink);
    font-size: .92rem;
    box-shadow: var(--tm-shadow);
}

/* the count is rendered live into #totalRepliesHead by the server JS;
   give it a monogrammed badge so the "· <n>" reads as a statistic. */
#forum-tw .tm-thread .forum-civis-replies-head #totalRepliesHead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    padding: .04rem .5rem;
    border-radius: 999px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-line);
    color: var(--tm-accent-2);
    font-family: var(--tm-mono);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
}
html.dark-theme #forum-tw .tm-thread .forum-civis-replies-head #totalRepliesHead { color: var(--tm-accent); }

/* on very small screens the author/head flexible wraps stay orderly */
@media (max-width: 575.98px) {
    #forum-tw .tm-thread article.is-op .forum-civis-post__rep,
    #forum-tw .tm-thread #thread-op-post .forum-civis-post__rep { margin-inline-start: 0; }
}

/* respect reduced-motion users: nothing here animates, but prevent the
   box-shadow transitions if any future rule animates surfaces. */
@media (prefers-reduced-motion: reduce) {
    #forum-tw .tm-thread .forum-civis-replies-head .bi,
    #forum-tw .tm-thread article.is-op .forum-civis-post__avatar { box-shadow: none; }
}