/* Shared docked left-nav (D5). Injected into every internal page's by _page()/route. Self-contained + theme-aware (mirrors the pages' prefers-color-scheme + [data-theme] system); scoped to #bfl-rail so it never fights a host page's own CSS. The rail is position:fixed; the body is shifted right by its width in nav.js (no reparenting → no page-internal layout risk). */ :root{ --bfl-w:212px; --bfl-wc:58px; } #bfl-rail{ position:fixed; left:0; top:0; bottom:0; width:var(--bfl-w); z-index:9000; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; font:14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; background:#17212b; color:#e7eef5; border-right:1px solid #26323f; transition:width .16s ease; } body.bfl-collapsed #bfl-rail{ width:var(--bfl-wc); } #bfl-rail .bfl-top{ display:flex; align-items:center; gap:10px; padding:12px; border-bottom:1px solid #26323f; } #bfl-rail .bfl-collapse{ flex:0 0 auto; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid #3a4a5a; border-radius:7px; color:inherit; cursor:pointer; } #bfl-rail .bfl-collapse:hover{ background:#1f2c38; } #bfl-rail .bfl-brand{ font-weight:600; font-size:15px; white-space:nowrap; } /* rail brand = the Bonifate logo, recolored per theme via mask (matches the quote wordmark): purple on the dark rail, near-black on the light rail. Hidden in the collapsed rail (via the .bfl-brand rule). */ #bfl-rail .bfl-brand-logo{ height:24px; width:104px; background-color:#a78bfa; -webkit-mask-image:url(/static/logo.png); mask-image:url(/static/logo.png); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:left center; mask-position:left center; -webkit-mask-size:contain; mask-size:contain; } @media (prefers-color-scheme:light){ #bfl-rail .bfl-brand-logo{ background-color:#243444; } } :root[data-theme="dark"] #bfl-rail .bfl-brand-logo{ background-color:#a78bfa; } :root[data-theme="light"] #bfl-rail .bfl-brand-logo{ background-color:#243444; } #bfl-rail .bfl-scroll{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:4px 0; } #bfl-rail .bfl-grp{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#7d93a6; padding:12px 16px 4px; white-space:nowrap; } #bfl-rail .bfl-item{ display:flex; align-items:center; gap:12px; padding:9px 16px; color:#c4d2df; text-decoration:none; white-space:nowrap; border:0; background:transparent; cursor:pointer; width:100%; box-sizing:border-box; text-align:left; font:inherit; } #bfl-rail .bfl-item:hover{ background:#1f2c38; color:#fff; } #bfl-rail .bfl-item.active{ background:rgba(99,102,241,.62); color:#fff; box-shadow:inset 3px 0 0 #6366f1; font-weight:600; } #bfl-rail svg{ flex:0 0 auto; width:20px; height:20px; stroke:currentColor; fill:none; } #bfl-rail .bfl-collapse svg{ width:18px; height:18px; } #bfl-rail .bfl-foot{ border-top:1px solid #26323f; padding:6px 0; } #bfl-rail .bfl-sub{ padding:7px 16px 7px 42px; font-size:13px; } #bfl-rail .bfl-sub .bfl-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; flex:0 0 auto; } body.bfl-collapsed #bfl-rail .bfl-sub{ display:none; } /* Phase 2 (D5): the rail owns cross-page nav — hide the redundant `.topbar` shell nav (brand + cross-page tabs) used by addressbook / masterlog / quote-requests etc. The console uses a bespoke header (no `.topbar`), so it's untouched. Guarded by :has(#bfl-rail) → falls back if the rail is absent. */ body:has(#bfl-rail) .topbar .tabs, body:has(#bfl-rail) .topbar .brand{ display:none !important; } /* §4.1 single-language display — GLOBAL (nav.js applyI18n reads the shared `bfl_lang`, wraps leading English label text in `.i18n-en`, and stamps body.lang-en / .lang-zh). Default EN hides Chinese (`.zh`); CH hides the wrapped English + restores `.zh` from secondary/muted styling to primary size. Rail labels are English-only and unaffected. */ body.lang-en .zh{ display:none !important; } body.lang-zh .i18n-en{ display:none !important; } body.lang-zh .zh{ color:inherit !important; font-size:inherit !important; letter-spacing:normal !important; margin-left:0 !important; text-transform:none !important; } /* the rail is always English — never hide its (non-existent) .zh, and never treat its text as .i18n-en */ #bfl-rail .zh, #bfl-rail .i18n-en{ display:inline !important; } body.bfl-collapsed #bfl-rail .bfl-lbl, body.bfl-collapsed #bfl-rail .bfl-brand, body.bfl-collapsed #bfl-rail .bfl-grp{ display:none; } body.bfl-collapsed #bfl-rail .bfl-item{ justify-content:center; padding:9px 0; gap:0; } body.bfl-collapsed #bfl-rail .bfl-top{ justify-content:center; padding:12px 0; } @media (prefers-color-scheme:light){ #bfl-rail{ background:#f4f7fa; color:#243444; border-right-color:#dde4ec; } #bfl-rail .bfl-top,#bfl-rail .bfl-foot{ border-color:#dde4ec; } #bfl-rail .bfl-collapse{ border-color:#c6d1dc; } #bfl-rail .bfl-collapse:hover,#bfl-rail .bfl-item:hover{ background:#e6edf4; color:#0e1a26; } #bfl-rail .bfl-grp{ color:#748596; } #bfl-rail .bfl-item{ color:#3a4a5a; } #bfl-rail .bfl-item.active{ background:rgba(99,102,241,.62); color:#fff; box-shadow:inset 3px 0 0 #6366f1; font-weight:600; } } :root[data-theme="dark"] #bfl-rail{ background:#17212b; color:#e7eef5; border-right-color:#26323f; } :root[data-theme="dark"] #bfl-rail .bfl-item{ color:#c4d2df; } :root[data-theme="dark"] #bfl-rail .bfl-item.active{ background:rgba(99,102,241,.62); color:#fff; box-shadow:inset 3px 0 0 #6366f1; font-weight:600; } :root[data-theme="light"] #bfl-rail{ background:#f4f7fa; color:#243444; border-right-color:#dde4ec; } :root[data-theme="light"] #bfl-rail .bfl-top,:root[data-theme="light"] #bfl-rail .bfl-foot{ border-color:#dde4ec; } :root[data-theme="light"] #bfl-rail .bfl-collapse{ border-color:#c6d1dc; } :root[data-theme="light"] #bfl-rail .bfl-collapse:hover,:root[data-theme="light"] #bfl-rail .bfl-item:hover{ background:#e6edf4; color:#0e1a26; } :root[data-theme="light"] #bfl-rail .bfl-grp{ color:#748596; } :root[data-theme="light"] #bfl-rail .bfl-item{ color:#3a4a5a; } :root[data-theme="light"] #bfl-rail .bfl-item.active{ background:rgba(99,102,241,.62); color:#fff; box-shadow:inset 3px 0 0 #6366f1; font-weight:600; }