/* SVS MSP Calculator - Base */ /* Extracted during Phase 5 to keep the HTML shell stable while splitting the monolithic stylesheet. */ body { background: var(--paper); color: var(--ink); font-family: 'Lato', sans-serif; font-size: var(--text-body-size); line-height: var(--text-body-line); min-height: 100vh; } /* ── TOP BAR ──────────────────────────────────────────────────── Sticky header. z-index:100 sits below mobile panel (z:300) and mobile pill (z:200). Background is --ink (cream) not --paper. Contains: SVS logo SVG (inline) | quote ref + date (DM Mono). ─────────────────────────────────────────────────────────────── */ .top-bar { position: sticky; top: 0; z-index: 100; background: var(--top-bar-bg); border-bottom: var(--border-medium) solid var(--top-bar-border); box-shadow: var(--top-bar-shadow); padding: 14px 0; display: flex; justify-content: center; } .top-bar-inner { width: 100%; max-width: var(--page-max-width); padding: 0 var(--page-gutter-x); display: flex; align-items: center; justify-content: space-between; gap: var(--space-stack-roomy); } .top-bar-logo { margin-left: clamp(26px, 5.2vw, 78px); flex-shrink: 0; } .top-bar-right { font-family: 'DM Mono', monospace; font-size: var(--text-meta-size); letter-spacing: 0.07em; color: var(--top-bar-meta); text-align: right; line-height: 1.55; margin-left: auto; } /* ── THEME TOGGLE BUTTON ──────────────────────────────────────── Sits to the right of the quote ref/date in .top-bar-inner. Slightly darker chip vs the cream top-bar bg so it reads as a distinct control, not noise. Works on both theme top-bars. ─────────────────────────────────────────────────────────────── */ .theme-toggle-btn { background: var(--theme-chip-bg); border: var(--border-thin) solid var(--theme-chip-border); border-radius: var(--radius-md); width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--theme-chip-fg); transition: background var(--transition-fast); flex-shrink: 0; margin-left: 14px; box-shadow: var(--theme-chip-shadow); } .theme-toggle-btn:hover { background: var(--theme-chip-hover); } .theme-toggle-btn:active { background: var(--theme-chip-active); } .theme-toggle-btn svg { display: block; }