/* Small global overrides on top of Tailwind CDN. */ html, body { font-feature-settings: "tnum" 1, "ss01" 1; } /* htmx loading indicator — fade in while a request is in flight. */ .htmx-indicator { opacity: 0; transition: opacity 150ms ease-in-out; pointer-events: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* A clickable row in the holdings table. */ tr.row-link { cursor: pointer; } tr.row-link:focus-visible { outline: 2px solid #4d8eff; outline-offset: -2px; } /* Chart container safety: give Chart.js a real height even if its parent uses grid. */ .chart-wrap { position: relative; width: 100%; height: 100%; min-height: 220px; } .chart-wrap canvas { width: 100% !important; height: 100% !important; } /* Subtle glow on the active range button. */ .range-btn.is-active { background-color: #4d8eff; color: #00285d; } /* Segmented radio toggle (Add Transaction BUY/SELL) — checked mirrors is-active. */ .seg-toggle input:checked + span { background-color: #4d8eff; color: #00285d; } /* Data tables should use tabular numerals by default. */ table.data-table td, table.data-table th { font-variant-numeric: tabular-nums; } /* ---- Side navigation -------------------------------------------------- */ /* Two layouts, two pieces of state, and deliberately not one shared flag. A phone starts with the sheet closed; a desktop starts with the column open. A single attribute cannot express both defaults without the server rendering one of them wrong and script correcting it a frame later — which is a visible flash of a full-screen menu every time a phone loads a page. So: the sheet's open state lives on the element (data-open), and the desktop collapse lives on , where it is applied from localStorage before first paint. Neither default needs script at all. The closed-on-phone / open-on-desktop defaults are utility classes on the element itself (hidden lg:flex); the rules below are only the two toggled states. Each one leads with #side-nav, so it outweighs those utilities. */ #side-nav[data-open="true"] { display: flex; } @media (min-width: 1024px) { html[data-nav-collapsed="1"] #side-nav { display: none; } } /* The list scrolls inside the nav rather than growing it, so the tabs stay put however many portfolios exist. A thin scrollbar keeps it from eating width. */ #side-nav-list { scrollbar-width: thin; overscroll-behavior: contain; } /* Scroll lock for the open phone sheet. A rule here rather than a utility class toggled onto : the Tailwind build only emits what it has seen in the markup, and this class only ever appears from script. */ body.nav-open { overflow: hidden; } /* ---- Expandable cards (phone layouts) --------------------------------- */ /*

drives the expand, so the browser's own marker has to go: the card supplies its own chevron, aligned with the figures rather than hanging off the left edge. list-style covers Firefox, the pseudo-element WebKit. */ summary.card-summary { list-style: none; } summary.card-summary::-webkit-details-marker { display: none; } /* Tapping a card should not select its text on the second tap. */ summary.card-summary { -webkit-tap-highlight-color: transparent; user-select: none; }