/* Decorative board artwork stays separate from the feed and account controls. */
.category-banner-content { display: flex; align-items: center; gap: 16px; min-width: 0; }
.category-banner { position: relative; isolation: isolate; overflow: hidden; min-height: 144px; box-sizing: border-box; padding: 20px 22px; margin-bottom: 18px; border: 1px solid #ffffffc9; border-radius: 16px; background: #fff9eb; box-shadow: 0 3px 12px #34395908; }
.category-banner-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.category-banner::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #fffcf5 0%, #fffcf5f7 30%, #fffcf5dc 47%, #fffcf54d 72%, transparent 100%); }
.category-banner .category-banner-content { width: 100%; gap: 14px; }
.category-banner .community-emblem { width: 50px; height: 50px; border-radius: 15px; background: #fff3c8e6; border-color: #fff8e0; }
.category-banner .community-emblem .ui-icon { width: 28px; height: 28px; }
.category-banner-copy { min-width: 0; }
.category-banner .category-banner-copy { max-width: 72%; }
.category-banner h1 { color: #29314a; }
.category-banner p { max-width: 300px; color: #50596c; line-height: 1.7; text-wrap: pretty; }
.category-banner .eyebrow { color: #636878; }
@media (max-width: 600px) {
  .category-banner { min-height: 132px; padding: 16px; margin-bottom: 14px; border-radius: 14px; }
  .category-banner .category-banner-content { gap: 10px; }
  .category-banner .community-emblem { width: 42px; height: 42px; border-radius: 12px; }
  .category-banner .community-emblem .ui-icon { width: 25px; height: 25px; }
  .category-banner h1 { font-size: 1.4rem; }
  .category-banner p { max-width: 205px; font-size: .75rem; }
}

/* Each board gets its own quiet environmental scene behind the reading surface. */
body[data-category="square"] { --board-scene: url('/assets/backgrounds/square.webp'); --board-canvas: #f7f2e4; --board-veil: #faf4e4b8; }
body[data-category="electronics"] { --board-scene: url('/assets/backgrounds/electronics.webp'); --board-canvas: #eaf3ef; --board-veil: #edf6efbf; }
body[data-category="screening"] { --board-scene: url('/assets/backgrounds/screening.webp'); --board-canvas: #f0edf5; --board-veil: #f3edf7c7; }
body[data-category="library"] { --board-scene: url('/assets/backgrounds/library.webp'); --board-canvas: #f0f2e7; --board-veil: #f5f4e8bd; }
body[data-category="life"] { --board-scene: url('/assets/backgrounds/life.webp'); --board-canvas: #f8efe7; --board-veil: #fbf2e8b8; }
body[data-category="night-tea"] { --board-scene: url('/assets/backgrounds/night-tea.webp'); --board-canvas: #eeedf5; --board-veil: #eeedf8cf; }
body[data-view="category"][data-category] { isolation: isolate; background: var(--board-canvas); }
body[data-view="category"][data-category]::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--board-veil), var(--board-veil)), var(--board-scene);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body[data-category] .col-main :is(.card, .feed-tabs, .no-composer, .empty-state) { background-color: #fffdf9; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  body[data-view="category"][data-category]::before { background-image: linear-gradient(#fffffff0, #fffffff0), var(--board-scene); }
}
@media (prefers-contrast: more) {
  body[data-view="category"][data-category]::before { background-image: none; background-color: var(--board-canvas); }
}
/* Navigation has a steady reading surface even over detailed scenery. */
body[data-category] .col-left { background: #fffdf9f5; border-radius: 14px; padding-left: 8px; }

/* Shared component vocabulary, six distinct board palettes. */
body[data-category="square"] { --board-accent: #866000; --board-hover: #694900; --board-soft: #fff1bd; --board-surface: #fffdf4; --board-ink: #3c3424; --board-muted: #74664e; --board-line: #e9d89b; --board-chrome: #4d3e25; --board-chrome-end: #302819; }
body[data-category="electronics"] { --board-accent: #176b64; --board-hover: #10534d; --board-soft: #daf0e9; --board-surface: #f5fcf9; --board-ink: #263f3d; --board-muted: #526f69; --board-line: #b6d8cc; --board-chrome: #244c4c; --board-chrome-end: #183335; }
body[data-category="screening"] { --board-accent: #854060; --board-hover: #65304b; --board-soft: #f6e2eb; --board-surface: #fff8fc; --board-ink: #43303f; --board-muted: #7a6071; --board-line: #e2bfd1; --board-chrome: #50304f; --board-chrome-end: #30233c; }
body[data-category="library"] { --board-accent: #486835; --board-hover: #344f26; --board-soft: #e8efd9; --board-surface: #f9fbf4; --board-ink: #303e2c; --board-muted: #66725b; --board-line: #cbd9b8; --board-chrome: #3b4c31; --board-chrome-end: #24321f; }
body[data-category="life"] { --board-accent: #9b4c2b; --board-hover: #77391e; --board-soft: #fce7d9; --board-surface: #fff9f3; --board-ink: #49362d; --board-muted: #7c665b; --board-line: #eccbb5; --board-chrome: #624333; --board-chrome-end: #3e2c23; }
body[data-category="night-tea"] { --board-accent: #56509a; --board-hover: #403b77; --board-soft: #e9e6fa; --board-surface: #faf8ff; --board-ink: #34324c; --board-muted: #6f6a89; --board-line: #cec7e8; --board-chrome: #3c395e; --board-chrome-end: #24223e; }
body[data-category] { --blue: var(--board-accent); --blue-dark: var(--board-hover); --text: var(--board-ink); --muted: var(--board-muted); --border: var(--board-line); }
body[data-category] :is(.topbar, .footer) { background: linear-gradient(115deg, var(--board-chrome), var(--board-chrome-end) 65%, var(--board-chrome)); }
body[data-category] .category-banner { border-color: var(--board-line); background-color: var(--board-surface); }
body[data-category] .category-banner::before { background: linear-gradient(90deg, var(--board-surface) 0%, var(--board-surface) 30%, #fffffff0 48%, #ffffff4d 72%, transparent 100%); }
body[data-category] .category-banner .community-emblem { background: var(--board-soft); border-color: var(--board-line); }
body[data-category] .category-banner :is(h1, .community-emblem .ui-icon) { color: var(--board-accent); }
body[data-category] .category-banner :is(p, .eyebrow) { color: var(--board-muted); }
body[data-category] :is(.btn-primary, .header-compose, .topbar .header-login, .context-card .btn-primary) { background: var(--board-accent); border-color: var(--board-accent); color: #fff; }
body[data-category] :is(.btn-primary, .header-compose, .topbar .header-login, .context-card .btn-primary):hover:not(:disabled) { background: var(--board-hover); border-color: var(--board-hover); color: #fff; }
body[data-category] .topbar :is(.header-compose, .header-login) { border-color: #ffffff66; }
body[data-category] :is(.action-btn, .feed-tabs a, .feed-tabs button), body[data-category] .btn:not(.btn-primary):not(.btn-danger):not(.header-login) { background: var(--board-surface); color: var(--board-accent); border-color: var(--board-line); }
body[data-category] :is(.action-btn, .feed-tabs a, .feed-tabs button):hover, body[data-category] .btn:not(.btn-primary):not(.btn-danger):not(.header-login):hover:not(:disabled) { background: var(--board-soft); color: var(--board-hover); border-color: var(--board-line); }
body[data-category] .action-btn.on { background: var(--board-soft); color: var(--board-hover); border-color: var(--board-accent); }
body[data-category] .feed-tabs { background: var(--board-surface); border-color: var(--board-line); }
body[data-category] .feed-tabs :is(a.active, button.active) { background: var(--board-accent); color: #fff; border-color: var(--board-accent); }
body[data-category] .sidebar-links a[aria-current="page"] { background: var(--board-soft); color: var(--board-accent); box-shadow: inset 0 0 0 1px var(--board-line); }
body[data-category] .sidebar-links a[aria-current="page"] .category-icon { background: var(--board-accent); color: #fff; }
body[data-category] .sidebar-links a:hover { background: var(--board-soft); color: var(--board-hover); }
body[data-category] .col-left { background: var(--board-surface); }
body[data-category] :is(.post-tags, .post-head) .chip { background: var(--board-soft); color: var(--board-accent); }
body[data-category] :is(.read-discussion, .reply-thread-link, .post-body a) { color: var(--board-accent); }
body[data-category] :is(.post-title a, .author, .side-title) { color: var(--board-ink); }
body[data-category] .post-list .post-card { background: linear-gradient(145deg, #fff, var(--board-surface)); border-color: var(--board-line); }
body[data-category] .post-list .post-card:hover { background: var(--board-surface); }
body[data-category] .context-card { background: linear-gradient(135deg, var(--board-surface), var(--board-soft)); border-color: var(--board-line); }
body[data-category] :is(.account-card, .community-card) { background: linear-gradient(135deg, #fff, var(--board-surface)); border-color: var(--board-line); }
body[data-category] :is(.side-title .ui-icon, .context-card .ui-icon, .composer-prompt) { color: var(--board-accent); }
body[data-category] .context-card .btn-primary .ui-icon { color: #fff; }
body[data-category] :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--board-accent); outline-offset: 3px; }
body[data-category] .topbar :is(a, button, input, summary):focus-visible { outline-color: var(--board-soft); }
@media (max-width: 720px) {
  body[data-category] #community-navigation { background: var(--board-surface); }
  body[data-category] .mobile-navigation-heading { color: var(--board-ink); border-color: var(--board-line); }
  body[data-category] .mobile-navigation-close { background: var(--board-soft); color: var(--board-accent); }
}
@media (prefers-contrast: more) {
  body[data-category] { --board-line: var(--board-accent); }
}

body[data-category] .col-main :is(.card, .no-composer, .empty-state) { border-color: var(--board-line); }
body[data-category] :is(.no-composer, .empty-state, .feed-reply-content) { background: var(--board-surface); }
body[data-category] .feed-composer { background: linear-gradient(135deg, #fff, var(--board-surface)); }
body[data-category] :is(.feed-replies, .post-actions) { border-color: var(--board-line); }
body[data-category] .feed-replies h3 { color: var(--board-muted); }
body[data-category] .feed-reply-meta a { color: var(--board-accent); }
body[data-category] .side-title .ui-icon { background: var(--board-soft); color: var(--board-accent); }
body[data-category] :is(.published-time, .sidebar-empty, .sidebar-topics-note), body[data-category] .sidebar-group > summary { color: var(--board-muted); }

/* Travel and food each own their scenery, banner and palette. */
body[data-category="travel"] { --board-scene:url('/assets/backgrounds/travel-journey.webp'); --board-canvas:#eaf4f5; --board-veil:#edf6f5c4; --board-accent:#176b86; --board-hover:#105068; --board-soft:#dceff0; --board-surface:#f5fcfc; --board-ink:#263f48; --board-muted:#506c77; --board-line:#b6d8de; --board-chrome:#244f61; --board-chrome-end:#163b46; }
body[data-category="food"] { --board-scene:url('/assets/backgrounds/food-kitchen.webp'); --board-canvas:#fff1df; --board-veil:#fff4e7c9; --board-accent:#a44332; --board-hover:#803124; --board-soft:#ffe5c8; --board-surface:#fffbf2; --board-ink:#4b342b; --board-muted:#795d4c; --board-line:#edc7a6; --board-chrome:#713e2e; --board-chrome-end:#482c24; }
@media (prefers-contrast: more) { body[data-category="travel"],body[data-category="food"] { --board-line:var(--board-accent); } }

/* On phones, board artwork runs edge-to-edge directly beneath the top bar. */
@media (max-width: 720px) {
  body[data-category] .shell { margin-top: 0; }
  body[data-category] .topbar { border-bottom: 0; box-shadow: none; }
  body[data-category] .category-banner {
    width: calc(100% + 24px);
    margin: 0 -12px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 132px;
    padding: 16px;
  }
}
/* Match the new standalone desktop sidebar cards on themed community boards. */
@media (min-width: 1181px) {
  body[data-category] .col-left {
    padding-left: 0;
    border-radius: 0;
    background: transparent;
  }
}