/**
 * Forum — thread list + post view (STG-UI-002 premium)
 * Thread list uses a CSS-grid div structure (renderThreadList outputs divs).
 * Post view uses 2-col grid: 180px rail | 1fr body.
 */

/* ═══════════════════════════════════════════════════════════════════
   THREAD LIST
   ═══════════════════════════════════════════════════════════════════ */

#page-forum.forum-page--light-threads .forum-thread-list {
    border: none;
    background: transparent;
    padding: 0;
}

/* Wrapper for the thread grid */
#page-forum.forum-page--light-threads .forum-threads-box {
    background: var(--app-surface-sunken);
    border-radius: var(--fm-r-xl);
    padding: var(--fm-sp-3);
    margin-top: var(--fm-sp-4);
}

/* Column header row */
#page-forum.forum-page--light-threads .forum-threads-head {
    display: grid;
    grid-template-columns: 20px 1fr 90px 90px 1.3fr;
    gap: var(--fm-sp-5);
    align-items: center;
    padding: var(--fm-sp-3) var(--fm-sp-4);
    font-family: var(--fm-font-ui);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-text-faint);
}

#page-forum.forum-page--light-threads .forum-threads-head .forum-th-num {
    text-align: right;
}

/* Each thread row */
#page-forum.forum-page--light-threads .forum-thread-row {
    display: grid;
    grid-template-columns: 20px 1fr 90px 90px 1.3fr;
    gap: var(--fm-sp-5);
    align-items: center;
    padding: var(--fm-sp-4);
    background: var(--app-surface);
    border-radius: var(--fm-r-md);
    margin-top: 3px;
    cursor: pointer;
    transition: background var(--fm-dur-1) var(--fm-ease);
    position: relative;
    text-decoration: none;
    color: var(--app-text-body);
}

#page-forum.forum-page--light-threads .forum-thread-row:hover {
    background: var(--fm-pop-cream, #f4ecd8);
}

#page-forum.forum-page--light-threads .forum-thread-row:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Marker dot */
#page-forum.forum-page--light-threads .forum-thread-marker {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--app-text-faint);
    justify-self: center;
    flex-shrink: 0;
}

/* Title block */
#page-forum.forum-page--light-threads .forum-thread-title-block {
    min-width: 0;
}

#page-forum.forum-page--light-threads .forum-thread-title-name {
    font-family: var(--fm-font-display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--app-text-body);
    display: block;
}

#page-forum.forum-page--light-threads .forum-thread-title-extras {
    display: flex;
    gap: var(--fm-sp-3);
    margin-top: 4px;
    font-family: var(--fm-font-ui);
    font-size: 12px;
    color: var(--app-text-faint);
    align-items: center;
    flex-wrap: wrap;
}

#page-forum.forum-page--light-threads .forum-thread-by {
    color: var(--app-text-muted);
}

/* Tags */
#page-forum.forum-page--light-threads .forum-tag,
#page-forum.forum-page--light-threads .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--fm-r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--app-surface-sunken);
    color: var(--app-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

#page-forum.forum-page--light-threads .forum-tag--type,
#page-forum.forum-page--light-threads .tag--type {
    color: var(--app-text-body);
}

#page-forum.forum-page--light-threads .tag--pinned {
    background: var(--band-bg);
    color: var(--band-text);
}

#page-forum.forum-page--light-threads .tag--locked {
    background: var(--app-surface-sunken);
    color: var(--app-text-faint);
}

#page-forum.forum-page--light-threads .tag--solved {
    background: var(--accent-soft);
    color: var(--app-text-body);
}

/* Numeric columns */
#page-forum.forum-page--light-threads .forum-th-num {
    font-family: var(--fm-font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--app-text-body);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Last activity */
#page-forum.forum-page--light-threads .forum-thread-last {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

#page-forum.forum-page--light-threads .forum-thread-last-when {
    font-size: 12px;
    color: var(--app-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Legacy table styling — fallback if table still rendered */
#page-forum.forum-page--light-threads .forum-threads-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
    background: var(--app-surface-sunken);
    border-radius: var(--fm-r-xl);
    padding: var(--fm-sp-3);
    border: none;
    margin-top: var(--fm-sp-4);
}

#page-forum.forum-page--light-threads .forum-threads-table thead th {
    background: transparent;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-text-faint);
    font-weight: 500;
    padding: var(--fm-sp-3) var(--fm-sp-4);
    border-bottom: none;
}

#page-forum.forum-page--light-threads .forum-threads-table tbody tr {
    background: var(--app-surface);
    border-bottom: none;
    cursor: pointer;
    transition: background var(--fm-dur-1) var(--fm-ease);
}

#page-forum.forum-page--light-threads .forum-threads-table tbody tr:hover {
    background: var(--fm-pop-cream, #f4ecd8);
}

#page-forum.forum-page--light-threads .forum-threads-table tbody td {
    padding: var(--fm-sp-4);
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   THREAD VIEW — head
   ═══════════════════════════════════════════════════════════════════ */

#page-forum.forum-page--light-threads #forumThreadView .thread-head {
    padding: var(--fm-sp-7) 0 var(--fm-sp-5);
    border-bottom: 1px solid var(--app-border);
}

#page-forum.forum-page--light-threads #forumThreadView .thread-head__title {
    font-family: var(--fm-font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: -0.025em;
    margin: var(--fm-sp-2) 0 var(--fm-sp-3);
    font-weight: 400;
    line-height: 1.1;
    color: var(--app-text-body);
}

#page-forum.forum-page--light-threads #forumThreadView .thread-head__meta {
    display: flex;
    gap: var(--fm-sp-5);
    font-size: 13px;
    color: var(--app-text-muted);
    flex-wrap: wrap;
}

#page-forum.forum-page--light-threads #forumThreadView .thread-head__meta strong {
    color: var(--app-text-body);
    font-weight: 500;
}

#page-forum.forum-page--light-threads #forumThreadView .thread-head__pager {
    margin-top: var(--fm-sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fm-sp-3);
    align-items: center;
    justify-content: space-between;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-pager-ellipsis {
    font-size: 13px;
    color: var(--app-text-faint);
    padding: 0 2px;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fm-sp-2);
    align-items: center;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-search-input.hidden {
    display: none;
}

/* Crumbs in thread view */
#page-forum.forum-page--light-threads #forumThreadView .forum-thread-crumbs {
    font-size: 13px;
    color: var(--app-text-muted);
    display: flex;
    gap: 6px;
    margin-bottom: var(--fm-sp-3);
    flex-wrap: wrap;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-crumbs a {
    color: var(--app-text-muted);
    text-decoration: none;
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-crumbs a:hover {
    color: var(--app-text-body);
}

#page-forum.forum-page--light-threads #forumThreadView .forum-thread-crumbs .sep { opacity: 0.4; }
#page-forum.forum-page--light-threads #forumThreadView .forum-thread-crumbs .here { color: var(--app-text-body); }

/* ═══════════════════════════════════════════════════════════════════
   POSTS STACK
   ═══════════════════════════════════════════════════════════════════ */

#page-forum.forum-page--light-threads .forum-posts-stack {
    margin-top: var(--fm-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--fm-sp-4);
    padding-bottom: var(--fm-sp-7);
}

/* ── Post card: 2-col grid (rail | body) ───────────────────────────── */

#page-forum.forum-page--light-threads .post {
    display: grid;
    grid-template-columns: 180px 1fr;
    background: var(--app-surface-sunken);
    border-radius: var(--fm-r-xl);
    overflow: hidden;
}

#page-forum.forum-page--light-threads .post.is-op {
    background: var(--fm-pop-cream, #f4ecd8);
}

/* Rail */
#page-forum.forum-page--light-threads .post__rail {
    padding: var(--fm-sp-5) var(--fm-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--fm-sp-3);
    background: rgba(22, 26, 20, 0.04);
}

/* Avatar */
#page-forum.forum-page--light-threads .post__av {
    width: 64px;
    height: 64px;
    border-radius: var(--fm-r-md);
    display: grid;
    place-items: center;
    background: var(--fm-pop-mint, #b8e6c9);
    color: var(--app-text-body);
    font-family: var(--fm-font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    user-select: none;
}

#page-forum.forum-page--light-threads .post__av--sky      { background: var(--fm-pop-sky,      #b9dee6); }
#page-forum.forum-page--light-threads .post__av--peach    { background: var(--fm-pop-peach,    #f6c7b8); }
#page-forum.forum-page--light-threads .post__av--lavender { background: var(--fm-pop-lavender, #cbb9e0); }
#page-forum.forum-page--light-threads .post__av--cream    { background: var(--fm-pop-cream,    #f4ecd8); }
#page-forum.forum-page--light-threads .post__av--lime     { background: var(--app-accent,      #d9f274); }

/* Username */
#page-forum.forum-page--light-threads .post__who {
    font-family: var(--fm-font-display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--app-text-body);
}

/* OP / mod flair */
#page-forum.forum-page--light-threads .post__flair {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--fm-r-pill);
    background: var(--app-surface);
    color: var(--app-text-muted);
    font-family: var(--fm-font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: fit-content;
}

/* Role chip (old class used in some places) */
#page-forum.forum-page--light-threads .post__name .role-chip,
#page-forum.forum-page--light-threads .post .role-chip {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--app-text-body);
    border: 1px solid var(--app-border);
}

/* Body */
#page-forum.forum-page--light-threads .post__body {
    padding: var(--fm-sp-5) var(--fm-sp-6);
    font-family: var(--fm-font-ui);
    font-size: 15px;
    line-height: 1.65;
    color: var(--app-text-body);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Header bar inside body */
#page-forum.forum-page--light-threads .post__bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fm-sp-3);
    margin-bottom: var(--fm-sp-4);
    padding-bottom: var(--fm-sp-3);
    border-bottom: 1px solid var(--app-border);
}

#page-forum.forum-page--light-threads .post__timestamp {
    font-family: var(--fm-font-ui);
    font-size: 12px;
    color: var(--app-text-muted);
}

/* Post # permalink */
#page-forum.forum-page--light-threads .post__index {
    font-family: var(--fm-font-mono);
    font-size: 12px;
    color: var(--app-text-faint);
    text-decoration: none;
}

#page-forum.forum-page--light-threads .post__index:hover { color: var(--app-link-hover); }

/* Edited note */
#page-forum.forum-page--light-threads .forum-post-edited {
    font-size: 11px;
    color: var(--app-text-faint);
    font-style: italic;
}

/* Content */
#page-forum.forum-page--light-threads .post__content {
    font-size: 15px;
    line-height: 1.65;
    color: var(--app-text-body);
    word-break: break-word;
}

#page-forum.forum-page--light-threads .post__content.forum-post-plain br {
    display: block;
    content: "";
    margin-bottom: 0.35em;
}

/* ── Quote block ────────────────────────────────────────────────────── */

#page-forum.forum-page--light-threads .quote {
    background: var(--app-surface);
    border-radius: var(--fm-r-md);
    padding: var(--fm-sp-4) var(--fm-sp-5);
    margin: 0 0 var(--fm-sp-4);
    position: relative;
}

#page-forum.forum-page--light-threads .post.is-op .quote {
    background: rgba(255, 255, 255, 0.6);
}

#page-forum.forum-page--light-threads .quote .quote__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-sp-3);
    font-family: var(--fm-font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: var(--fm-sp-3);
}

#page-forum.forum-page--light-threads .quote .quote__head strong {
    font-style: normal;
    color: var(--app-text-body);
    font-weight: 600;
}

#page-forum.forum-page--light-threads .quote .quote__head a {
    font-size: 11px;
    font-style: normal;
    color: var(--app-link);
    text-decoration: none;
    font-family: var(--fm-font-ui);
}

#page-forum.forum-page--light-threads .quote .quote__body {
    padding-left: var(--fm-sp-4);
    border-left: 2px solid var(--app-border-strong);
    color: var(--app-text-muted);
    font-size: 14px;
    font-style: italic;
    font-family: var(--fm-font-ui);
}

#page-forum.forum-page--light-threads .quote .quote__body p { margin: 0; }

/* ── Post footer + actions ──────────────────────────────────────────── */

#page-forum.forum-page--light-threads .post__footer {
    margin-top: auto;
    padding-top: var(--fm-sp-4);
    margin-top: var(--fm-sp-5);
    border-top: 1px solid var(--app-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fm-sp-3);
}

#page-forum.forum-page--light-threads .post__likes {
    display: flex;
    align-items: center;
    gap: var(--fm-sp-2);
}

#page-forum.forum-page--light-threads .post__actions {
    display: flex;
    gap: var(--fm-sp-2);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Buttons in post context ────────────────────────────────────────── */

#page-forum.forum-page--light-threads #forumThreadView .btn,
#page-forum.forum-page--light-threads .post .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--fm-sp-3);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text-body);
    font-family: var(--fm-font-ui);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--fm-r-sm);
    cursor: pointer;
    transition: background var(--fm-dur-1) var(--fm-ease);
    text-decoration: none;
}

#page-forum.forum-page--light-threads #forumThreadView .btn:hover,
#page-forum.forum-page--light-threads .post .btn:hover {
    background: var(--app-surface-sunken);
    border-color: var(--app-border-strong);
}

#page-forum.forum-page--light-threads .btn--primary {
    background: var(--band-bg) !important;
    color: var(--band-text) !important;
    border-color: var(--band-bg) !important;
}

#page-forum.forum-page--light-threads .btn--primary:hover {
    background: #38382f !important;
    border-color: #38382f !important;
}

#page-forum.forum-page--light-threads .btn--ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--app-text-muted) !important;
}

#page-forum.forum-page--light-threads .btn--ghost:hover {
    color: var(--app-text-body) !important;
    background: var(--app-surface-sunken) !important;
}

#page-forum.forum-page--light-threads .forum-post-quote-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Like button */
#page-forum.forum-page--light-threads .forum-like-btn,
#page-forum.forum-page--light-threads .likes__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--fm-sp-3);
    background: transparent;
    border: 1px solid var(--app-border);
    border-radius: var(--fm-r-sm);
    color: var(--app-text-muted);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--fm-font-ui);
    transition: all var(--fm-dur-1) var(--fm-ease);
}

#page-forum.forum-page--light-threads .forum-like-btn:hover,
#page-forum.forum-page--light-threads .likes__btn:hover {
    border-color: var(--app-border-strong);
    color: var(--app-text-body);
}

#page-forum.forum-page--light-threads .forum-like-btn.active,
#page-forum.forum-page--light-threads .likes__btn.active {
    background: var(--accent-soft);
    border-color: var(--app-border-strong);
    color: var(--app-text-body);
}

/* Thread post pagination */
#page-forum.forum-page--light-threads .forum-thread-post-pagination {
    margin-top: var(--fm-sp-4);
}

/* ── Embedded patterns + links ──────────────────────────────────────── */

#page-forum.forum-page--light-threads .forum-post-patterns {
    background: var(--app-surface);
    border-radius: var(--fm-r-md);
    border: none;
    padding: var(--fm-sp-4) var(--fm-sp-5);
    margin-top: var(--fm-sp-4);
}

#page-forum.forum-page--light-threads .forum-post-links {
    margin-top: var(--fm-sp-3);
}

#page-forum.forum-page--light-threads .forum-post-link {
    background: var(--app-surface-sunken);
    border: 1px solid var(--app-border);
    color: var(--app-link);
    border-radius: var(--fm-r-sm);
}

#page-forum.forum-page--light-threads .forum-post-link:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-link-hover);
}

#page-forum.forum-page--light-threads .forum-post-link--youtube {
    border-left: 3px solid #c00;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #page-forum.forum-page--light-threads .post {
        grid-template-columns: 1fr;
    }

    #page-forum.forum-page--light-threads .post__rail {
        flex-direction: row;
        align-items: center;
        gap: var(--fm-sp-3);
        background: rgba(22, 26, 20, 0.04);
    }

    #page-forum.forum-page--light-threads .post__av {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    #page-forum.forum-page--light-threads .forum-threads-head {
        display: none;
    }

    #page-forum.forum-page--light-threads .forum-thread-row {
        grid-template-columns: 12px 1fr;
        grid-template-rows: auto auto;
        gap: var(--fm-sp-2) var(--fm-sp-3);
    }

    #page-forum.forum-page--light-threads .forum-thread-marker {
        grid-row: 1 / 3;
        align-self: start;
        margin-top: 6px;
    }

    #page-forum.forum-page--light-threads .forum-th-num,
    #page-forum.forum-page--light-threads .forum-thread-last {
        grid-column: 2;
        text-align: left;
    }

    #page-forum.forum-page--light-threads .forum-threads-table thead {
        display: none;
    }

    #page-forum.forum-page--light-threads .forum-threads-table tbody tr {
        display: block;
        padding: var(--fm-sp-3);
    }

    #page-forum.forum-page--light-threads .forum-threads-table tbody td {
        display: block;
        padding: 4px 0;
        border: 0;
    }
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
[data-theme="dark"] #page-forum.forum-page--light-threads .btn--primary:hover {
    background: #252b1f !important;
    border-color: rgba(240, 235, 224, 0.20) !important;
}