/* SelfieSign type system — single source of truth for fonts. Link this LAST in , after Bootstrap/Tailwind, so the --bs-* overrides win. */ :root { --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Re-fonts every Bootstrap 5.3 component (buttons, form controls, modals, dropdowns, tables) without touching a single template rule. */ --bs-font-sans-serif: var(--ds-font-sans); --bs-body-font-family: var(--ds-font-sans); --bs-font-monospace: var(--ds-font-mono); } /* html covers Tailwind preflight on the demo pages; body covers everything else. */ html, body { font-family: var(--ds-font-sans); } /* Form controls don't inherit font-family. login.html and error.html load no reset. */ button, input, select, optgroup, textarea { font-family: inherit; } code, kbd, pre, samp { font-family: var(--ds-font-mono); } /* ===== Layout stability ===== Every page pins its header with `position: fixed; left:0; right:0`, so the header's width is the viewport width minus the scrollbar. Without a reserved gutter, any content-height change that crosses the viewport height (switching a settings section, filtering a table, an async chart loading) toggles the scrollbar, changes the header width by ~15px, and re-flows every `flex: 1` nav item. Reserving the track permanently makes the viewport width constant. Full-screen pages that set `body { overflow: hidden }` opt out with `scrollbar-gutter: auto`. */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* The gutter is now always reserved, so Bootstrap's modal-open compensation (it assumes the scrollbar disappears and pads by its width) would double-count and shove the page sideways. The header has no .fixed-top class, so Bootstrap never padded it to match. */ body.modal-open { padding-right: 0 !important; }