/* overview and sub forum table (forum/_category, forum/_subforum_list, forum/_forum_row) */
.forum-overview h1 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; }
:is(.forum-overview, .subforum-list) .category-header th { background: var(--category-header-bg); color: var(--category-header-text); }
:is(.forum-overview, .subforum-list) .forum-columns th { background: none; font-weight: bold; }
:is(.forum-overview, .subforum-list) .forum-desc { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
:is(.forum-overview, .subforum-list) .forum-count { text-align: right; white-space: nowrap; width: 5.5rem; font-variant-numeric: tabular-nums; }
:is(.forum-overview, .subforum-list) .forum-recent { min-width: 14rem; font-size: 0.9rem; line-height: 1.4; }
:is(.forum-overview, .subforum-list) .recent-thread p { margin: 0.2rem 0 0; }
:is(.forum-overview, .subforum-list) .recent-thread p:first-child { margin-top: 0; }
:is(.forum-overview, .subforum-list) .recent-thread a { color: var(--link); text-decoration: underline; }
:is(.forum-overview, .subforum-list) .recent-thread a:hover { color: var(--link-hover); text-decoration: none; }
:is(.forum-overview, .subforum-list) .recent-thread .recent-title { font-weight: 600; }
:is(.forum-overview, .subforum-list) .recent-thread .recent-meta { color: var(--text-muted); font-size: 0.88rem; }
.forum-overview table + table { margin-top: 1.5rem; }
:is(.forum-overview, .subforum-list) .forum-title a { color: var(--link); text-decoration: underline; }
:is(.forum-overview, .subforum-list) .forum-title a:hover { color: var(--link-hover); text-decoration: none; }
:is(.forum-overview, .subforum-list) .forum-unread .forum-title > a { font-weight: 700; }
:is(.forum-overview, .subforum-list) .unread-marker { color: var(--link); font-size: 0.8rem; margin-left: 0.35rem; }
:is(.forum-overview, .subforum-list) .subforums { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
:is(.forum-overview, .subforum-list) .subforums a { color: var(--link); text-decoration: underline; }
:is(.forum-overview, .subforum-list) .subforums a:hover { color: var(--link-hover); text-decoration: none; }
:is(.forum-overview, .subforum-list) .subforums .unread-marker { margin-left: 0.2rem; }
/* Fixed column split so every category table (and the sub forum table) lines up; widths come from the <col>s. */
:is(.forum-overview .forum-list, .forum-list.subforum-list) { table-layout: fixed; }
:is(.forum-overview, .subforum-list) .col-forum-count { width: 5.5rem; }
:is(.forum-overview, .subforum-list) .col-forum-recent { width: 35%; }
:is(.forum-overview, .subforum-list) .forum-stats { display: none; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 700px) {
    :is(.forum-overview .forum-list, .forum-list.subforum-list) { table-layout: auto; }
    :is(.forum-overview, .subforum-list) .col-forum-count { width: 0; }
    :is(.forum-overview, .subforum-list) .forum-count { display: none; }
    :is(.forum-overview, .subforum-list) .forum-stats { display: block; }
    :is(.forum-overview, .subforum-list) .forum-recent { vertical-align: middle; }
}
.forum-overview .overview-actions { margin: 0 0 1rem; }
.forum-overview code { background: var(--code-bg); padding: 0.15rem 0.35rem; border-radius: 3px; font-size: 0.88em; }

/* Thread listings (forum/show, recent/index; rows from forum/_thread_row) */
.thread-list .thread-title a,
.thread-list .thread-forum a,
.thread-list .thread-author a,
.thread-list .thread-last-author a { color: var(--link); text-decoration: underline; }
.thread-list .thread-title a:hover,
.thread-list .thread-forum a:hover,
.thread-list .thread-author a:hover,
.thread-list .thread-last-author a:hover { color: var(--link-hover); text-decoration: none; }
.thread-list .thread-author { white-space: nowrap; }
.thread-list .thread-date { white-space: nowrap; font-size: 0.88rem; }
.thread-list .thread-count { text-align: right; white-space: nowrap; width: 5rem; font-variant-numeric: tabular-nums; }
.thread-list .thread-unread .thread-title > a:not(.thread-new) { font-weight: 700; }
.thread-list .thread-title a.thread-new { font-size: 0.8rem; margin-left: 0.35rem; }
.thread-list .pinned-group th { background: var(--surface); font-weight: 600; font-size: 0.88rem; }
.thread-list .thread-last-author { display: block; color: var(--text-muted); }
.thread-list .thread-last-post-inner { display: flex; align-items: center; gap: 0.75rem; }
.thread-list .thread-last-post-link { flex: none; color: var(--link); font-size: 1.2rem; text-decoration: none; }
.thread-list .thread-last-post-link:hover { color: var(--link-hover); }
/* "by X (in Forum)" and "Replies | Views" in the title cell, replace those columns on small screens */
.thread-list :is(.thread-byline, .thread-stats) { display: none; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 700px) {
    .thread-list :is(.thread-author, .thread-forum, .thread-count) { display: none; }
    .thread-list :is(.thread-byline, .thread-stats) { display: block; }
    .thread-list .thread-last-post { vertical-align: middle; }
}

/* forum/show */
.forum-show h1 { font-size: 1.35rem; margin: 0 0 0.75rem; font-weight: 600; }
.forum-show .forum-desc { color: var(--text); margin-bottom: 1rem; font-size: 0.95rem; }
.forum-show .thread-title { width: 52%; }
.forum-show .thread-author { width: 20%; }
.forum-show .thread-date { width: 18%; }
.forum-show .actions { margin: 0 0 1rem; }
.forum-show .actions a { color: var(--link); }
.forum-show .actions form { display: inline; margin-left: 0.75rem; }
.forum-show .subforum-list { margin-bottom: 1.5rem; }

/* recent/index */
.recent-posts h1 { font-size: 1.35rem; margin: 0 0 0.75rem; font-weight: 600; }
.recent-posts .recent-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.recent-posts .recent-meta a { color: var(--link); }
.recent-posts .recent-meta a:hover { color: var(--link-hover); }
.recent-posts .thread-title { width: 40%; }
.recent-posts .thread-forum { width: 18%; }
.recent-posts .thread-author { width: 16%; }
.recent-posts .thread-date { width: 16%; }
.recent-posts .recent-actions { margin: 0.75rem 0 0; }

/* thread/show (posts from thread/_post) */
.thread-show { max-width: 52rem; }
.thread-show h1 { font-size: 1.35rem; margin: 0 0 1rem; font-weight: 600; }
.thread-show article.post { border: 1px solid var(--border); background: var(--surface); padding: 0.75rem 1rem; margin-bottom: 0.75rem; border-radius: var(--radius); }
.thread-show .post-meta { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.thread-show .post-meta a { color: var(--link); text-decoration: underline; }
.thread-show .post-meta a:hover { color: var(--link-hover); text-decoration: none; }
.thread-show .post-body { white-space: pre-wrap; word-break: break-word; }
.thread-show .signature { color: inherit; font-size: inherit; line-height: inherit; }
.thread-show .reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; }
.thread-show .thread-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.thread-show .thread-toolbar-bottom { margin: 1rem 0 0; }

/* Moderation dropdown (native <details>; dropdown.js closes it on outside click and Escape). */
.mod-menu { position: relative; margin-left: auto; font-size: 0.95rem; }
.mod-menu > summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; list-style: none; cursor: pointer; user-select: none; background: var(--button-bg); color: var(--text); border: 1px solid var(--button-border); border-radius: var(--radius); }
.mod-menu > summary::-webkit-details-marker { display: none; }
.mod-menu > summary::after { content: ""; border: 0.3em solid transparent; border-top-color: currentColor; border-bottom: 0; }
.mod-menu[open] > summary::after { transform: rotate(180deg); }
.mod-menu-list { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 20; min-width: 12rem; margin: 0; padding: 0.25rem 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
.mod-menu-list form { margin: 0; }
.mod-menu-list a,
.mod-menu-list button { display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.4rem 0.9rem; margin: 0; font: inherit; text-align: left; white-space: nowrap; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.mod-menu-list a:hover,
.mod-menu-list button:hover,
.mod-menu-list a:focus-visible,
.mod-menu-list button:focus-visible { background: var(--thead); color: var(--text); }
.mod-menu-list .mod-menu-danger { color: var(--error); }
.mod-menu-divider { height: 0; margin: 0.25rem 0; border-top: 1px solid var(--border); }
.thread-show .thread-closed { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); }
.thread-show .post-actions { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.thread-show .post-actions li + li::before { content: "·" / ""; margin: 0 0.35em; color: var(--text-muted); }
.thread-show .post-actions a,
.thread-show .post-actions button { font: inherit; }
.thread-show .post-actions form { display: inline; }
.thread-show .post-edited { font-size: 0.85rem; color: var(--text-muted); margin-left: 0.25rem; }
.thread-show .rank-icon { vertical-align: -3px; margin-right: 0.2rem; }

/* Attachment previews (attachment/_preview.html.twig): in the text, and the strip below a post. */
.attachment-preview { display: inline-block; max-width: 100%; line-height: 0; vertical-align: top; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.attachment-preview:hover,
.attachment-preview:focus-visible { border-color: var(--link); }
.attachment-preview img { display: block; max-width: min(100%, 320px); max-height: 320px; width: auto; height: auto; }
/* A block of its own, like embeds: the line break after the tag is dropped by AttachmentMarkupProcessor. */
.post-body .attachment-preview--inline { display: block; width: fit-content; margin: 0.25rem 0; }
.post-attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; }

/* Popup for the full image (attachment/_lightbox.html.twig). Covers the viewport; clicks beside the image close it. */
.attachment-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
.attachment-lightbox::backdrop { background: rgb(0 0 0 / 0.85); }
.attachment-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.attachment-lightbox-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 100%; margin: 0; padding: 3rem 4rem; box-sizing: border-box; }
.attachment-lightbox-image { max-width: 100%; max-height: calc(100% - 2rem); object-fit: contain; background: #fff; }
.attachment-lightbox-caption { font-size: 0.9rem; text-align: center; overflow-wrap: anywhere; }
.attachment-lightbox button { position: absolute; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; font-size: 2rem; line-height: 1; color: #fff; background: rgb(0 0 0 / 0.5); border: 1px solid rgb(255 255 255 / 0.4); border-radius: 50%; cursor: pointer; }
.attachment-lightbox button:hover,
.attachment-lightbox button:focus-visible { background: rgb(0 0 0 / 0.8); border-color: #fff; }
.attachment-lightbox-close { top: 0.75rem; right: 0.75rem; }
.attachment-lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.attachment-lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.attachment-lightbox button[hidden] { display: none; }
@media (max-width: 40rem) {
    .attachment-lightbox-figure { padding: 3.5rem 0.5rem; }
    .attachment-lightbox-prev,
    .attachment-lightbox-next { top: auto; bottom: 0.75rem; transform: none; }
}