:root { /* Our custom aliases — built on top of Fluent design tokens with warm nougat fallbacks for the boot screen (before Fluent's JS fires). Fluent generates the brown primary-brand ramp from data-theme-color on ; we only need to set the pistachio-green slots ourselves. */ --bg-accent: var(--colorBrandForeground1, #9b6238); --bg-green: #5f8f3c; --bg-link: var(--colorBrandForegroundLink, #5f8f3c); --bg-border: var(--colorNeutralStroke1, #e8dbc4); --bg-muted: var(--colorNeutralForeground3, #6e6253); --bg-fg: var(--colorNeutralForeground1, #2a2118); --bg-layer-1: var(--colorNeutralBackground1, #faf5ec); --bg-layer-3: #f2e6d2; --bg-max-width: 1100px; /* Fluent injects brand tokens as inline styles on :root via JS, which normally beats stylesheet rules. !important lets us permanently own the green slots (links, checkmarks, combobox focus) without touching the brown primary-brand ramp Fluent generates from data-theme-color. Light-mode values live here because Fluent *removes* data-theme in light mode, so body[data-theme="light"] never matches after boot. */ --colorBrandForegroundLink: #5f8f3c !important; --colorBrandForegroundLinkHover: #4b702f !important; --colorBrandForegroundLinkPressed: #3d5c27 !important; --colorCompoundBrandForeground1: #5f8f3c !important; --colorCompoundBrandForeground1Hover: #4b702f !important; --colorCompoundBrandStroke: #5f8f3c !important; --colorCompoundBrandStrokeHover: #4b702f !important; } /* Dark mode: Fluent sets data-theme="dark" on body. Higher specificity than :root so these !important values win. */ body[data-theme="dark"] { --bg-green: #8fcb72; --bg-layer-3: #241e16; /* Green slots — dark-mode shades */ --colorBrandForegroundLink: #8fcb72 !important; --colorBrandForegroundLinkHover: #a6d98a !important; --colorBrandForegroundLinkPressed: #7ab961 !important; --colorCompoundBrandForeground1: #8fcb72 !important; --colorCompoundBrandForeground1Hover: #a6d98a !important; --colorCompoundBrandStroke: #8fcb72 !important; --colorCompoundBrandStrokeHover: #a6d98a !important; /* Fluent's neutral scale is cool grey by default; warm it up. */ --colorNeutralBackground1: #1b1712 !important; --colorNeutralBackground2: #201c14 !important; --colorNeutralBackground3: #261f16 !important; --colorNeutralBackground4: #2d2418 !important; --colorNeutralBackground5: #38291b !important; --colorNeutralBackground6: #43311f !important; --colorNeutralStroke1: #392f23 !important; --colorNeutralStroke2: #4a3c2a !important; --colorNeutralStroke3: #5c4c35 !important; } html, body { margin: 0; /* Fluent UI's auto-injected default-fuib.css pins body to height:100dvh; overflow:hidden. We accept that here — all scrolling (both axes) happens inside .bg-body-scroll so the header never moves. */ height: 100dvh !important; overflow: hidden !important; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; color: var(--bg-fg, #2a2118); background: var(--bg-layer-1, #fff); } /* Blazor mounts into #app — it must propagate the viewport height down to .bg-page. */ #app { height: 100%; } /* Full-viewport flex column: header is a fixed-size item, body-scroll fills the rest. */ .bg-page { display: flex; flex-direction: column; height: 100%; } /* Scrollable content area — handles both vertical and horizontal scroll independently of the header, so the header is never scrolled off-screen. */ .bg-body-scroll { flex: 1; min-height: 0; /* allow flex child to shrink below its content size */ overflow-x: auto; overflow-y: auto; } a { color: var(--bg-link); text-decoration: none; } a:hover { text-decoration: none; } .bg-container { max-width: var(--bg-max-width); margin: 0 auto; padding: 0 1rem; } /* Header */ .bg-header { background: var(--bg-layer-3, #f2e6d2); border-bottom: 1px solid var(--bg-border); } .bg-header-inner { display: flex; align-items: center; gap: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; flex-wrap: wrap; } .bg-brand { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; color: var(--bg-accent, #9b6238); text-decoration: none; } .bg-brand:hover { text-decoration: none; } .bg-nav { display: flex; gap: 1rem; } .bg-nav-link { font-weight: 600; color: var(--bg-fg, #2a2118); padding: .25rem 0; text-decoration: none; } .bg-nav-link:hover { text-decoration: none; } .bg-nav-link.active { border-bottom: 2px solid var(--bg-accent); } .bg-search { display: flex; flex: 1 1 320px; gap: .5rem; } .bg-search-input { flex: 1; padding: .4rem .6rem; border: 1px solid var(--bg-border); border-radius: 4px; font-size: .95rem; } /* Main */ .bg-main { padding-top: 1.5rem; padding-bottom: 3rem; } /* Filters */ .bg-filters { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; } .bg-filter { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--bg-muted); } .bg-filter.bg-filter-inline { flex-direction: row; align-items: center; gap: .5rem; } /* Custom dropdown — replaces native