/* Forum arrangement and article typography. Controls use /forum/heroui.css,
   compiled from the installed HeroUI package without palette overrides. */
@font-face { font-family: Geist; src: url('/fonts/geist-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('/fonts/geist-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root { font-family: Geist, ui-sans-serif, system-ui, sans-serif; background: var(--background); color: var(--foreground); --bg: var(--background); --text: var(--foreground); --surface-2: var(--surface-secondary); --hover: var(--surface-hover); --primary: var(--accent); --on-primary: var(--accent-foreground); }
body.forum { margin: 0; min-height: 100svh; font-size: 14px; line-height: 1.5; background: var(--background); color: var(--foreground); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px; background: var(--overlay); }
.skip:focus { top: 8px; }
.header { border-bottom: 1px solid var(--separator); }
.header-inner, .page, .footer-inner { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; min-height: 72px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; margin-right: 12px; }
.brand svg { width: 126px; height: 28px; }
.site-nav, .header-actions, .auth-actions { display: flex; align-items: center; gap: 12px; }
.site-nav { gap: 24px; }
.site-nav a { color: var(--muted); }
.site-nav a[aria-current] { color: var(--foreground); }
.header-actions { margin-left: auto; flex-wrap: wrap; }
.button { flex-shrink: 0; }
.theme-toggle { min-width: 36px; }
.account-initials { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--default); border-radius: 50%; }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.page { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 40px; padding-block: 32px 64px; min-height: 70svh; }
.forum-sidebar { position: sticky; top: 24px; min-width: 0; display: grid; gap: 24px; }
.forum-content { min-width: 0; display: grid; gap: 24px; }
.tabs-list { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.tabs .button { justify-content: flex-start; }
.forum-guide h2 { font-weight: 500; }
.forum-guide p { color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.page-title { flex: 1 1 240px; min-width: 0; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.page-title p { margin-top: 12px; color: var(--muted); }
.search { display: flex; align-items: center; gap: 8px; width: min(100%, 320px); }
.search input { width: 100%; min-width: 0; }
.search button { display: inline-grid; place-items: center; padding: 8px; }
.search-icon { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.panel-head h2, .panel-head.list-caption { font-weight: 500; }
.panel-head .column-label { display: none; }
.board-index { padding: 16px; }
.board-index ul, .topics { list-style: none; margin: 0; padding: 0; }
.board-row { padding-block: 12px; }
.board-row + .board-row { border-top: 1px solid var(--separator); }
.board-overview-link { display: flex; align-items: center; gap: 10px; }
.board-name { display: grid; gap: 2px; }
.board-name strong { font-weight: 500; }
.board-name small { font-size: 12px; color: var(--muted); }
.board-count { display: block; margin: 8px 0 0 26px; font-size: 12px; color: var(--muted); }
.board-icon { color: var(--muted); flex-shrink: 0; }
.board-latest { display: none; }
.topic-row { display: flex; align-items: center; gap: 24px; padding-block: 20px; }
.topic-row + .topic-row { border-top: 1px solid var(--separator); }
.topic-main { flex: 1; min-width: 0; }
.topic-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topic-title { font-weight: 500; overflow-wrap: anywhere; }
.topic-title:hover, .text-link:hover { text-decoration: underline; }
.topic-meta { display: grid; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.topic-byline, .author, .post-meta, .post-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.author-name { overflow-wrap: anywhere; min-width: 0; }
.topic-preview { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.topic-stats { display: grid; justify-items: end; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.replies { display: inline-flex; align-items: center; gap: 6px; }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--surface-secondary); object-fit: cover; overflow: hidden; }
.avatar.s16 { width: 16px; height: 16px; font-size: 10px; }
.avatar.s24 { width: 24px; height: 24px; }
.avatar.s28 { width: 28px; height: 28px; }
.avatar.s36 { width: 36px; height: 36px; }
.avatar.drawn { background: transparent; }
.chip { display: inline-flex; align-items: center; gap: 4px; }
.solved { color: var(--success); }
.muted, .count, .activity, .dot { color: var(--muted); }
.pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0; }
.empty h2 { font-size: 18px; font-weight: 500; }
.empty p { color: var(--muted); }
.private-board { display: grid; gap: 16px; }
.private-copy h2 { font-size: 20px; font-weight: 500; }
.private-copy p { margin-top: 8px; color: var(--muted); }
.private-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.topic-layout { display: grid; gap: 24px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.post-head { display: grid; gap: 16px; }
.post-meta { font-size: 12px; color: var(--muted); }
.post-tags { margin-left: auto; }
.post-body { overflow-wrap: anywhere; min-width: 0; line-height: 1.75; }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body :is(p, ul, ol, blockquote, pre, table) { margin-block: 16px; }
.post-body :is(h2,h3,h4) { font-size: 18px; line-height: 1.4; font-weight: 500; margin-block: 24px 12px; }
.post-body ul { padding-left: 24px; list-style: disc; }
.post-body ol { padding-left: 24px; list-style: decimal; }
.post-body a { color: var(--accent); text-decoration: underline; }
.post-body pre { overflow: auto; padding: 16px; background: var(--surface-secondary); border-radius: var(--radius); }
.post-body code { font-family: ui-monospace, monospace; font-size: .9em; }
.post-body blockquote { border-left: 2px solid var(--separator); padding-left: 16px; color: var(--muted); }
.post-body table { display: block; max-width: 100%; overflow: auto; }
.post-body :is(th,td) { padding: 8px; border-bottom: 1px solid var(--separator); }
.reply { display: grid; gap: 16px; padding-block: 20px; }
.reply + .reply { border-top: 1px solid var(--separator); }
.reply:target, .accepted-answer:target { scroll-margin-top: 24px; outline: 2px solid var(--focus); outline-offset: 4px; }
.accepted-head, .composer-head, .reply-box-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.accepted-head { color: var(--success); }
.accepted-head h2, .composer h2, .reply-box h2 { font-size: 18px; font-weight: 500; }
.accepted-body { display: grid; gap: 16px; }
.reply-invitation, .guest-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.reply-invitation p, .guest-note p { color: var(--muted); }
.forum-form { display: grid; gap: 16px; min-width: 0; }
.forum-form label { display: grid; gap: 8px; }
.forum-form :is(input,textarea,select) { width: 100%; min-width: 0; }
.forum-form select { background: var(--field-background); padding: 12px; border-radius: var(--field-radius); }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.form-help, .composer-note { color: var(--muted); font-size: 12px; }
.form-error, .answer-error { padding: 12px; background: var(--danger-soft); color: var(--danger-soft-foreground); border-radius: var(--radius); }
.footer { border-top: 1px solid var(--separator); color: var(--muted); font-size: 12px; }
.footer-inner, .footer-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block: 24px; }
.footer-link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 999px) { .page { grid-template-columns: 180px minmax(0,1fr); gap: 24px; } .site-nav { gap: 12px; } .header-inner { gap: 12px; } .create-account { display: none; } }
@media (max-width: 839px) { .site-nav { display: none; } .page { grid-template-columns: minmax(0, 1fr); gap: 24px; } .forum-sidebar { position: static; } .forum-guide, .board-index .board-count, .board-index .board-icon, .board-index .board-name small { display: none; } .board-index .panel-head { display: none; } .board-index ul, .tabs-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } .board-row, .board-row + .board-row { border: 0; padding: 0; } .forum-guide { display: none; } .auth-actions .create-account { display: inline-flex; } }
@media (max-width: 639px) { .header-inner, .page, .footer-inner { width: calc(100% - 32px); } .brand svg { width: 90px; } .header-actions { gap: 4px; } .auth-actions { gap: 4px; } .header-inner { gap: 8px; } .header-actions .create-account { display: none; } .button { min-height: 44px; } .theme-toggle { min-width: 44px; } .page { padding-top: 24px; } .topic-row { flex-direction: column; align-items: stretch; gap: 12px; } .topic-stats { display: flex; justify-content: space-between; } .search { width: 100%; } input, textarea, select { font-size: 16px; } .post-tags { margin-left: 0; } .footer-inner { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }

.related-discussions ul { display: grid; gap: 12px; padding: 0; list-style: none; }