/* Forum index. Shared appearance variables follow the homepage theme.
   The privateTheme-prefixed stylesheet ID keeps the legacy recolor pass
   from duplicating these variable-based component rules. */
#afMain, #afSidebar {
    --af-panel: var(--private-final-panel, #182940);
    --af-panel-top: var(--private-final-panel-top, #20344f);
    --af-text: var(--private-final-text, #eef4fb);
    --af-muted: var(--private-final-muted, #b9c8d8);
    --af-border: var(--private-final-border, rgba(167,218,255,.2));
    --af-shadow: var(--private-final-shadow, rgba(3,10,20,.55));
    --af-accent: var(--private-accent, var(--as-ui-accent, #b9c8d8));
    --af-hover-border: color-mix(in srgb, var(--af-accent) 45%, var(--af-border));
    --af-hover-shadow: inset 0 1px 0 #ffffff0a, 0 3px 7px var(--af-shadow);
    --af-fill: var(--private-panel-fill, linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%), linear-gradient(180deg, var(--af-panel-top), var(--af-panel)));
    min-width: 0;
    color: var(--af-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
/* The legacy graphite/none accent is dark; forum controls need panel text contrast. */
html[data-private-mode="neutral"][data-private-theme="none"] #afMain,
html[data-private-mode="neutral"][data-private-theme="none"] #afSidebar {
    --af-accent: var(--af-text);
}
#afMain *, #afSidebar * { box-sizing: border-box; }
#afMain [hidden], #afSidebar [hidden] { display: none !important; }
#afMain .af-surface, #afSidebar .af-surface, #afSidebar > .block {
    background-color: var(--af-panel) !important;
    background-image: var(--af-fill) !important;
    border: 1px solid var(--af-border) !important;
    border-radius: 14px !important;
    color: var(--af-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -2px 3px var(--af-shadow), 0 5px 10px var(--af-shadow) !important;
    margin: 0 0 20px;
}
#afMain h1, #afMain h2, #afMain h3, #afSidebar h2 {
    color: var(--af-text) !important;
    -webkit-text-fill-color: var(--af-text) !important;
    font-family: inherit;
    text-shadow: none;
}
#afMain a, #afSidebar a { text-decoration: none; }
#afMain a:focus-visible, #afSidebar a:focus-visible, #afMain button:focus-visible {
    outline: 2px solid var(--af-accent) !important;
    outline-offset: 3px;
    border-radius: 5px;
}
#afMain .af-section { padding: 16px; }
#afMain .af-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 1px 2px 13px; border-bottom: 1px solid var(--af-border); }
#afMain .af-section-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--af-accent); }
#afMain .af-section-icon svg { width: 21px; height: 21px; }
#afMain .af-section-heading h2 { flex: 1; min-width: 0; margin: 0 !important; font-size: 16px !important; font-weight: 700; line-height: 1.4; letter-spacing: -.15px; overflow-wrap: anywhere; }
#afMain .af-section-list, #afMain #forum_topics { display: grid; gap: 8px; }
/* Sections and discussion rows share one card, including responsive/hover states. */
#afMain .af-forum, #afMain #forum_topics .af-topic-row {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
    min-width: 0; padding: 12px; gap: 16px;
    background-color: var(--af-panel) !important;
    background-image: var(--af-fill) !important;
    border: 1px solid color-mix(in srgb, var(--af-border) 65%, transparent);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 #ffffff08, 0 2px 4px color-mix(in srgb, var(--af-shadow) 40%, transparent);
    transition: border-color .16s ease, box-shadow .16s ease;
}
#afMain .af-forum-main, #afMain #forum_topics .af-topic-main { display: flex; align-items: center; min-width: 0; gap: 12px; }
#afMain .af-forum-image { display: block; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; }
#afMain .af-forum-image img, #afMain #forum_topics .af-topic-image { display: block; flex: 0 0 48px; width: 48px; height: 48px; margin: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px var(--af-shadow); }
#afMain .af-forum-copy { flex: 1; min-width: 0; }
#afMain .af-forum h3 { margin: 0 !important; font-size: 14px !important; font-weight: 650; line-height: 1.45; }
#afMain .af-forum h3 a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important; overflow-wrap: anywhere; }
#afMain .af-forum h3 svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--af-muted); opacity: .65; }
#afMain .af-description { margin: 3px 0 0; color: var(--af-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#afMain .af-description:empty { display: none; }
#afMain .af-last, #afMain #forum_topics .af-topic-last { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; border-left: 1px solid var(--af-border); padding: 0 0 0 16px; }
#afMain .af-last-label, #afMain #forum_topics .af-topic-muted { color: var(--af-muted); font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .25px; }
#afMain .af-last-topic { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important; }
#afMain .af-last-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; color: var(--af-muted); font-size: 11px; line-height: 1.5; }
#afMain .af-last-meta > a { color: var(--af-muted); overflow-wrap: anywhere; }
#afMain .af-last-meta > span { overflow-wrap: anywhere; }
#afMain .af-last-meta > span::before { content: "·"; margin-right: 8px; }
#afMain .af-last-empty { margin: 0; color: var(--af-muted); font-size: 12px; }
#afMain .af-button, #afSidebar .af-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 42px; max-width: 100%; padding: 10px 14px;
    background-color: var(--af-panel); background-image: var(--af-fill); border: 1px solid var(--af-border); border-radius: 9px;
    color: var(--af-text); font: 600 13px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff0c, 0 3px 6px var(--af-shadow);
    transition: border-color .16s ease, box-shadow .16s ease;
}
#afSidebar .af-surface, #afSidebar > .block { padding: 18px; }
#afSidebar .af-sidebar-title, #afSidebar > .block > .block_head {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px !important; padding: 0 0 13px !important;
    border: 0; border-bottom: 1px solid var(--af-border);
    font-size: 15px !important; font-weight: 700; line-height: 1.4; letter-spacing: -.15px;
}
#afSidebar .af-sidebar-title svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--af-accent); }
#afSidebar #last_activity { margin: 0; }
#afSidebar #last_activity > span {
    display: block; width: 100%; padding: 11px 10px; margin: 0 0 8px;
    background-color: var(--af-panel) !important;
    background-image: var(--af-fill) !important;
    border: 1px solid color-mix(in srgb, var(--af-border) 65%, transparent); border-radius: 9px;
    box-shadow: inset 0 1px 0 #ffffff08; overflow-wrap: anywhere;
    transition: border-color .16s ease, box-shadow .16s ease;
}
#afSidebar #last_activity > span:last-child { margin-bottom: 0; }
#afSidebar #last_activity > span > p { margin: 3px 0 0; color: var(--af-muted); font-size: 11px; line-height: 1.5; white-space: normal; overflow: visible; }
#afSidebar #last_activity > span > p:first-child { margin: 0 0 5px; }
#afSidebar #last_activity > span > p:first-child > a { color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important; font-size: 13px; font-weight: 600; line-height: 1.4; }
#afSidebar #last_activity > span > p:not(:first-child) > a:not([style]) { color: var(--af-muted); }
#afSidebar .af-admin { padding: 12px; }
#afSidebar .af-admin a { width: 100%; }
#afSidebar .guest-auth-card > button, #afSidebar .guest-auth-card > a { min-height: 42px; border-radius: 9px; }
#afMain .af-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
#afMain .af-forum:focus-within, #afMain #forum_topics .af-topic-row:focus-within, #afSidebar #last_activity > span:focus-within {
    border-color: var(--af-hover-border); box-shadow: var(--af-hover-shadow);
}
#afMain .af-forum h3 a:is(:hover, :focus-visible),
#afMain .af-last-topic:is(:hover, :focus-visible),
#afSidebar #last_activity > span > p:first-child > a:is(:hover, :focus-visible) {
    color: var(--af-accent) !important; -webkit-text-fill-color: var(--af-accent) !important;
}
/* Underlines remain visible without a colored palette and preserve nickname colors. */
#afMain .af-forum h3 a:is(:hover, :focus-visible),
#afMain .af-last-topic:is(:hover, :focus-visible),
#afMain .af-last-meta > a:is(:hover, :focus-visible),
#afSidebar #last_activity a:is(:hover, :focus-visible) {
    text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
#afMain .af-button:focus-visible, #afSidebar .af-button:focus-visible {
    border-color: var(--af-accent); box-shadow: var(--af-hover-shadow);
}
@media (hover: hover) and (pointer: fine) {
    #afMain .af-forum:hover, #afMain #forum_topics .af-topic-row:hover, #afSidebar #last_activity > span:hover { border-color: var(--af-hover-border); box-shadow: var(--af-hover-shadow); }
    #afMain .af-forum:hover h3 svg { color: var(--af-accent); opacity: 1; }
    #afMain .af-button:hover, #afSidebar .af-button:hover { border-color: var(--af-accent); box-shadow: var(--af-hover-shadow); }
}
@media (max-width: 1199px) and (min-width: 992px) {
    #afSidebar .af-surface, #afSidebar > .block { padding: 14px; }
    #afSidebar .af-sidebar-title { font-size: 14px !important; }
    #afMain .af-forum, #afMain #forum_topics .af-topic-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    #afMain .af-forum-image, #afMain .af-forum-image img, #afMain #forum_topics .af-topic-image { width: 42px; height: 42px; flex-basis: 42px; }
}
@media (max-width: 991px) {
    #afMain { order: 0 !important; }
    #afSidebar { order: 1 !important; }
}
@media (max-width: 575px) {
    #afMain .af-surface, #afSidebar .af-surface, #afSidebar > .block { margin-bottom: 14px; border-radius: 13px !important; }
    #afMain .af-section { padding: 12px; }
    #afMain .af-section-heading { gap: 8px; margin-bottom: 11px; padding-bottom: 11px; }
    #afMain .af-section-heading h2 { font-size: 14px !important; }
    #afMain .af-forum, #afMain #forum_topics .af-topic-row { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
    #afMain .af-forum-image, #afMain .af-forum-image img, #afMain #forum_topics .af-topic-image { width: 42px; height: 42px; flex-basis: 42px; }
    #afMain .af-last, #afMain #forum_topics .af-topic-last { border-left: 0; border-top: 1px solid var(--af-border); padding: 9px 0 0; }
    #afMain .af-last-label { font-size: 10px; }
    #afMain .af-last-topic { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #afMain .af-forum, #afMain #forum_topics .af-topic-row, #afSidebar #last_activity > span, #afMain .af-button, #afSidebar .af-button { transition: none; }
}

/* Full-width forum pages; administrative links keep their template permissions. */
#afMain.af-forum-wide { flex: 0 0 100%; width: 100%; max-width: 100%; }
#afMain.af-forum-wide .af-forum-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
#afMain.af-forum-wide .af-forum-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--af-border);
}
#afMain.af-forum-wide .af-forum-heading > .block_head { flex: 1; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#afMain.af-forum-wide .af-forum-header-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
#afMain.af-forum-wide .af-forum-header-actions .btn { width: auto; margin: 0; }
@media (max-width: 575px) {
    #afMain.af-forum-wide .af-forum-toolbar .af-button { width: 100%; }
    #afMain.af-forum-wide .af-forum-heading { flex-direction: column; align-items: stretch; }
    #afMain.af-forum-wide .af-forum-header-actions .btn { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
}