/* Savoy values remain the source of truth. Every rule is scoped to the forum. */
.b24-shell { padding-top: 36px; padding-bottom: 64px; }
.b24-forum { --b24-border: var(--nm--color-border, #e5e5e5); --b24-accent: var(--nm--color-font-highlight, #a58b52); --b24-strong: var(--nm--color-font-strong, #282828); color: var(--nm--color-font, inherit); font-family: inherit; line-height: 1.65; text-align: left; padding-block: 16px 48px; overflow-wrap: anywhere; }
.b24-forum *, .b24-forum *::before, .b24-forum *::after { box-sizing: border-box; }
.b24-forum h1, .b24-forum h2, .b24-forum h3 { color: var(--b24-strong); line-height: 1.25; padding: 0; margin: 0 0 14px; }
.b24-forum h1 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 400; }
.b24-forum h2 { font-size: 20px; font-weight: 400; }
.b24-forum h3 { font-size: 21px; font-weight: 400; }
.b24-forum p { margin: 0 0 16px; padding: 0; }
.b24-forum a { text-decoration: none; }
.b24-forum a:hover { color: var(--b24-accent); }
.b24-forum :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--b24-accent); outline-offset: 4px; }
.b24-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--b24-border); margin-bottom: 32px; }
.b24-forum .b24-eyebrow { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 12px; }
.b24-header > div { max-width: 650px; }
.b24-actions { display: flex; gap: 14px; align-items: center; }
.b24-forum .b24-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 12px 22px; background: var(--nm--color-button-background, #282828); color: var(--nm--color-button, #fff); border: 1px solid transparent; border-radius: var(--nm--border-radius-button, 0); font: inherit; font-size: 14px; line-height: 1.4; text-decoration: none; cursor: pointer; flex-shrink: 0; }
.b24-forum .b24-button:hover { opacity: .88; }
.b24-forum .b24-secondary { background: transparent; color: var(--b24-strong); border-color: var(--b24-border); }
.b24-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 36px; }
.b24-main, .b24-sidebar { min-width: 0; }
.b24-card { padding: 24px; border: 1px solid var(--b24-border); border-radius: var(--nm--border-radius-container, 0); margin-bottom: 20px; }
.b24-sidebar nav a { display: block; padding: 11px 0; color: inherit; }
.b24-sidebar nav a[aria-current] { color: var(--b24-accent); font-weight: 600; }
.b24-guidelines { font-size: 14px; }
.b24-guidelines h2 { font-size: 18px; }
.b24-search { display: flex; gap: 10px; margin-bottom: 30px; }
.b24-forum :is(input:not([type=checkbox]), select, textarea) { max-width: 100%; min-width: 0; font: inherit; font-size: 16px; color: inherit; background-color: var(--nm--color-body-background, #fff); border: 1px solid var(--b24-border); border-radius: var(--nm--border-radius-inputs, 0); padding: 12px 14px; }
.b24-search input { flex: 1; width: 100%; }
.b24-section-title, .b24-card-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.b24-section-title { justify-content: space-between; margin-bottom: 12px; }
.b24-section-title h2 { margin: 0; }
.b24-section-title > span, .b24-card-meta, .b24-small { font-size: 12px; }
.b24-topic-card { padding: 26px 0; border-bottom: 1px solid var(--b24-border); }
.b24-topic-card h3 a { color: var(--b24-strong); }
.b24-topic-card p { font-size: 15px; }
.b24-card-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.b24-badge { display: inline-block; color: var(--b24-strong); border: 1px solid var(--b24-accent); padding: 3px 9px; font-size: 11px; letter-spacing: .04em; }
.b24-category { font-size: 12px; }
.b24-highlighted { border-left: 3px solid var(--b24-accent); padding-inline: 18px 12px; }
.b24-forum .b24-author { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.b24-forum .b24-avatar { width: 38px; height: 38px; border-radius: 50%; aspect-ratio: 1; object-fit: cover; flex-shrink: 0; padding: 0; margin: 0; }
.b24-forum .b24-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--nm--color-button-background, #282828); color: var(--nm--color-button, #fff); font-size: 16px; }
.b24-replies { margin-left: auto; }
.b24-compose { margin-top: 32px; scroll-margin-top: 120px; }
.b24-forum label { display: block; margin: 16px 0 7px; font-size: 14px; }
.b24-compose :is(input:not([type=checkbox]), select, textarea), .b24-profile form :is(input:not([type=checkbox]), textarea) { width: 100%; }
.b24-forum textarea { resize: vertical; }
.b24-forum .b24-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.b24-forum .b24-small { margin-top: 14px; }
.b24-account { display: inline-block; margin: 12px 18px; }
.b24-notice { border-left: 3px solid var(--b24-accent); padding: 16px; border-block: 1px solid var(--b24-border); }
.b24-pagination { display: flex; gap: 20px; margin-block: 24px; }
.b24-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b24-pagination li { margin: 0; list-style: none; }
.b24-pagination :is(a, span) { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px; }
.b24-pagination .current { border: 1px solid var(--b24-border); }
.b24-topic, .b24-profile { max-width: 900px; margin-inline: auto; }
.b24-breadcrumb { display: block; margin-bottom: 28px; }
.b24-topic > h1 { margin-block: 16px 24px; }
.b24-prose { margin-block: 28px; font-size: 16px; }
.b24-prose p { white-space: pre-wrap; }
.b24-moderation { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-block: 24px; }
.b24-reply-list { border-top: 1px solid var(--b24-border); padding-top: 30px; margin-top: 32px; }
.b24-reply .b24-prose { margin-bottom: 0; }
.b24-profile-header { display: flex; gap: 24px; align-items: center; margin-block: 32px; }
.b24-profile-header .b24-avatar { width: 96px; height: 96px; font-size: 36px; }
.b24-profile summary { cursor: pointer; min-height: 44px; }
.b24-welcome { display: flex; align-items: center; gap: 20px; border: 1px solid var(--b24-border); border-left: 3px solid var(--b24-accent); padding: 18px 22px; margin-bottom: 28px; }
.b24-welcome-image { flex: 0 0 120px; }
.b24-welcome-image img { width: 120px; max-height: 100px; object-fit: contain; }
.b24-welcome-copy { flex: 1; min-width: 0; }
.b24-welcome h2 { font-size: 20px; margin-bottom: 6px; }
.b24-welcome p { font-size: 14px; margin-bottom: 0; }
.b24-ad { min-width: 0; min-height: 120px; padding: 14px 0; margin-block: 24px; border-block: 1px solid var(--b24-border); }
.b24-ad-label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: center; margin-bottom: 10px; }
.b24-ad-content { min-width: 0; width: 100%; }
.b24-emoji-picker { margin-top: 12px; }
.b24-emoji-picker[hidden] { display: none; }
.b24-emoji-picker summary { cursor: pointer; width: fit-content; min-height: 44px; padding: 10px 0; }
.b24-emoji-grid { display: flex; flex-wrap: wrap; gap: 5px; max-width: 420px; padding: 12px; border: 1px solid var(--b24-border); }
.b24-emoji-grid button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 5px; border: 0; background: transparent; cursor: pointer; font-size: 24px; }
@media (max-width: 767px) { .b24-welcome { flex-wrap: wrap; padding: 16px; gap: 14px; } .b24-welcome-image { flex-basis: 72px; } .b24-welcome-image img { width: 72px; max-height: 72px; } .b24-welcome .b24-button { width: 100%; } }
@media (max-width: 991px) { .b24-layout { grid-template-columns: 190px minmax(0,1fr); gap: 24px; } .b24-header { align-items: flex-start; flex-direction: column; } }
@media (max-width: 767px) { .b24-shell { padding-top: 20px; } .b24-layout { display: flex; flex-direction: column; gap: 20px; } .b24-sidebar nav { display: flex; gap: 8px; overflow-x: auto; align-items: center; padding: 12px; margin-bottom: 0; } .b24-sidebar nav h2 { display: none; } .b24-sidebar nav a { white-space: nowrap; padding: 10px 12px; } .b24-guidelines { display: none; } .b24-header { margin-bottom: 20px; padding-bottom: 24px; } .b24-card { padding: 18px; } .b24-topic-card { padding-block: 22px; } .b24-card-meta { gap: 10px; } .b24-replies { margin-left: 0; } .b24-search { gap: 8px; } .b24-search .b24-button { padding-inline: 14px; } .b24-profile-header { gap: 16px; } .b24-profile-header .b24-avatar { width: 72px; height: 72px; } }
