/* ═══════════════════════════════════════════════════════════════════════════════════ portfolio.css — the Portfolio section (Holdings · Trades · Income and returns) in the "Exchange" direction of the Sep 2026 design board, set inside the site's own chrome. Loaded after cockpit.css and tradelog.css and before theme-light.css. Every rule is scoped to #viewPortfolio, #viewTradelog or #viewIncome, so no other screen moves. Colors are the site's tokens (styles.css / cockpit.css / theme-light.css); the few mixes below are derived from them: --pb-sf / --pb-sf2 raised surfaces (the board's --sf / --sf2) = --surface / --surface-2 --pb-pos / --pb-neg gains and losses: --green, and --red-bright (--red is 4.3:1 on a surface in dark) --pb-inc income received: --cyan mixed toward the ink, 11:1 dark / 6.6:1 light --pb-cta the one amber action per area, drawn like the Research "Analyze" button Figures: var(--mono) with tabular numerals, so the cents line up down every column. ═══════════════════════════════════════════════════════════════════════════════════ */ #viewPortfolio, #viewTradelog, #viewIncome { --pb-sf: var(--surface); --pb-sf2: var(--surface-2); --pb-sf3: var(--surface-3); --pb-line: color-mix(in srgb, var(--text) 9%, transparent); --pb-ink: var(--text); --pb-ink2: var(--text-2); --pb-ink3: var(--text-3); --pb-pos: var(--green); --pb-neg: var(--red-bright, var(--red)); --pb-inc: color-mix(in srgb, var(--cyan, #06b6d4) 55%, var(--text)); --pb-cta: var(--accent); --pb-cta-ink: #1a1304; --pb-top: 48px; /* the sticky top bar */ /* categorical slots, fixed order (dataviz reference palette, dark steps); "other" is neutral */ --pb-c1: #3987e5; --pb-c2: #d95926; --pb-c3: #199e70; --pb-c4: #c98500; --pb-c5: #d55181; --pb-c6: #008300; --pb-c7: #9085e9; --pb-c8: #e66767; --pb-cx: #6b7280; } body[data-theme="light"] #viewPortfolio, body[data-theme="light"] #viewTradelog, body[data-theme="light"] #viewIncome { --pb-neg: var(--red); --pb-inc: color-mix(in srgb, var(--cyan, #06b6d4) 40%, var(--text)); /* the light theme's --accent (#9a6b00) under dark ink is 3.9:1; the amber fill stays the dark theme's accent so the action reads the same and its label clears 8:1 */ --pb-cta: #e0a82e; --pb-c1: #2a78d6; --pb-c2: #eb6834; --pb-c3: #1baf7a; --pb-c4: #eda100; --pb-c5: #e87ba4; --pb-c6: #008300; --pb-c7: #4a3aa7; --pb-c8: #e34948; --pb-cx: #8a8f98; } /* views are zoomed at the larger text sizes, so the sticky offset is divided back out */ body[data-text-size="large"] :is(#viewPortfolio, #viewTradelog, #viewIncome) { --pb-top: 42.9px; } body[data-text-size="xlarge"] :is(#viewPortfolio, #viewTradelog, #viewIncome) { --pb-top: 38.4px; } /* ── shared pieces ─────────────────────────────────────────────────────────────── */ :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-fig { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pos { color: var(--pb-pos) !important; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-neg { color: var(--pb-neg) !important; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-inc { color: var(--pb-inc) !important; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-dash { color: var(--pb-ink2) !important; font-weight: 400 !important; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-br { font-weight: 500; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-u { color: var(--pb-ink2); font-weight: 400; margin-left: 1px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-sec { margin-top: 44px; min-width: 0; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-sec__h { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-sec__h h2 { margin: 0; font:600 18px/1.3 var(--sans); letter-spacing: -.01em; color: var(--pb-ink); text-transform: none; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-sec__h h2::before { display: none; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-sec__h p { margin: 3px 0 0; font:400 14px/1.4 var(--sans); color: var(--pb-ink2); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-hact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-note { margin: 14px 0 0; font:400 13px/1.55 var(--sans); color: var(--pb-ink2); max-width: 1100px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-note span { margin-right: 4px; } /* a figure cell: label, figure, quieter line */ :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-cell { min-width: 0; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-cell em { display: block; margin-bottom: 4px; font:400 13px/1.35 var(--sans); font-style: normal; color: var(--pb-ink2); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-cell b { display: block; font-size:17px; font-weight: 500; line-height: 1.3; color: var(--pb-ink); white-space: nowrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-cell small { display: block; margin-top: 2px; font:400 14px/1.35 var(--sans); color: var(--pb-ink2); white-space: nowrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-cell small .pb-fig { font-size:14px; } /* buttons: quiet pills; one amber action per area */ :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--pb-sf2); color: var(--pb-ink); font:500 14px/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, filter .15s ease, transform .08s ease; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn:hover { background: var(--pb-sf3); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn:active { transform: translateY(1px); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn:focus-visible, :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-link:focus-visible, :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-exp:focus-visible, :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-tk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn--primary { background: var(--pb-cta); color: var(--pb-cta-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-btn--primary:hover { background: var(--pb-cta); filter: brightness(1.06); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-link { all: unset; color: var(--pb-ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pb-ink) 40%, transparent); text-underline-offset: 3px; cursor: pointer; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-link:hover { text-decoration-color: currentColor; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-select { height: 36px; padding: 0 34px 0 15px; border: 0; border-radius: 999px; background-color: var(--pb-sf2); color: var(--pb-ink); font:500 14px/1 var(--sans); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-select:hover { background-color: var(--pb-sf3); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; background: var(--pb-sf2); color: var(--pb-ink2); font:500 13px/1.5 var(--sans); white-space: nowrap; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-skel { display: block; height: 14px; margin: 3px 0 3px auto; border-radius: 6px; background: linear-gradient(90deg, var(--pb-sf2) 0%, var(--pb-sf3) 50%, var(--pb-sf2) 100%); background-size: 200% 100%; animation: pb-shimmer 1.4s ease-in-out infinite; } @keyframes pb-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-skel { animation: none; } } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-prog { display: block; height: 8px; max-width: 260px; margin: 6px 0 4px; border-radius: 4px; background: var(--pb-sf3); overflow: hidden; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-prog i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-prog.is-ok i { background: var(--pb-pos); } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-prog i { background: #c98f14; } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-prog.is-ok i { background: var(--pb-pos); } /* the tab strip: the board's segmented control, inside these three views only */ :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav { gap: 2px; margin: 6px 0 26px; padding: 3px; border-radius: 12px; background: var(--pb-sf2); } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab { min-height: 34px; padding: 0 14px; border-radius: 9px; color: var(--pb-ink2); font:500 14px/1.2 var(--sans); } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab:hover { color: var(--pb-ink); } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active { color: var(--pb-ink); background: var(--pb-sf3); box-shadow: 0 1px 2px rgba(0, 0, 0, .22); } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active { background: #fff; box-shadow: 0 1px 2px rgba(58, 48, 30, .14); } /* ═══ Holdings ═════════════════════════════════════════════════════════════════════ The summary is one tight band; the table is set in the dashboard Universe table's type (cockpit.css .cptable: bold amber tickers, the fund-kind badge, the L-level pill, mono figures, uppercase mono headings), at 14px. */ #viewPortfolio .pb-summary { margin-top: 2px; } #viewPortfolio .pb-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 44px; align-items: start; } #viewPortfolio .pb-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; } #viewPortfolio .pb-hero__v { min-width: 0; } #viewPortfolio .pb-k { display: block; font:400 14px/1.4 var(--sans); font-style: normal; color: var(--pb-ink2); } #viewPortfolio .pb-big { margin: 2px 0 4px; font-size:36px; font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--pb-ink); } #viewPortfolio .pb-chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size:15px; font-weight: 500; } #viewPortfolio .pb-chg__l { font:400 13px/1.4 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-chg__l + .pb-chg__l::before { content: "·"; margin-right: 10px; } #viewPortfolio .pb-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--pb-line); } #viewPortfolio .pb-stats .pb-cell em { margin-bottom: 2px; } #viewPortfolio .pb-stats .pb-cell b { font-size:16px; } #viewPortfolio .pb-stats .pb-cell small { font-size:13px; white-space: normal; } /* the value chart: value against what you paid, one point a day */ #viewPortfolio .pb-vchart { flex: 1 1 250px; max-width: 360px; min-width: 0; } #viewPortfolio .pb-vchart__leg { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 6px; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-vchart__leg > span { display: inline-flex; align-items: center; gap: 6px; } #viewPortfolio .pb-vk { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--accent); border-radius: 2px; } #viewPortfolio .pb-vk--c { border-top: 2px dashed var(--pb-ink2); } #viewPortfolio .pb-vchart__now { margin-left: auto; font-size:13px; font-weight: 500; } #viewPortfolio .pb-vchart__plot { position: relative; height: 84px; border-radius: 6px; outline: none; cursor: crosshair; } #viewPortfolio .pb-vchart__plot:focus-visible { box-shadow: 0 0 0 2px var(--accent); } #viewPortfolio .pb-vchart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; } #viewPortfolio .pb-vl { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } #viewPortfolio .pb-vl--v { stroke: var(--accent); stroke-width: 2; } #viewPortfolio .pb-vl--c { stroke: var(--pb-ink2); stroke-width: 1.5; stroke-dasharray: 4 4; } #viewPortfolio .pb-vl-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; } #viewPortfolio .pb-vchart__dot, #viewPortfolio .pb-vchart__hd { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); transform: translate(-50%, -50%); pointer-events: none; } #viewPortfolio .pb-vchart__x { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid color-mix(in srgb, var(--pb-ink) 35%, transparent); pointer-events: none; } #viewPortfolio .pb-vchart__tip { position: absolute; top: -4px; z-index: 6; transform: translateX(12px); display: grid; gap: 1px; min-width: 150px; padding: 8px 11px; border-radius: 10px; background: var(--pb-sf2); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px var(--pb-line); font:400 13px/1.45 var(--sans); color: var(--pb-ink2); pointer-events: none; white-space: nowrap; } #viewPortfolio .pb-vchart__tip.is-left { transform: translateX(calc(-100% - 12px)); } #viewPortfolio .pb-vchart__tip > b { color: var(--pb-ink); font-weight: 600; } #viewPortfolio .pb-vchart__tip span { display: flex; justify-content: space-between; gap: 14px; } #viewPortfolio .pb-vchart__tip span b { color: var(--pb-ink); font-weight: 500; } body[data-theme="light"] #viewPortfolio .pb-vchart__tip { background: #fff; box-shadow: 0 12px 30px rgba(58, 48, 30, .16), 0 0 0 1px var(--pb-line); } #viewPortfolio .pb-vchart__ax { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-vchart__start { display: grid; gap: 2px; padding: 11px 14px; border-radius: 12px; background: var(--pb-sf); font:400 13px/1.45 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-vchart__start b { font-weight: 600; font-size:14px; color: var(--pb-ink); } /* where the income comes from */ #viewPortfolio .pb-inc { display: block !important; min-width: 0; } #viewPortfolio .pb-inc[style*="none"] { display: none !important; } #viewPortfolio .pb-inc .pb-sec__h { margin-bottom: 10px; } #viewPortfolio .pb-inc .pb-sec__h h2 { font-size:16px; } #viewPortfolio .pb-inc .pb-sec__h p { font-size:13px; } #viewPortfolio .pb-donut { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 24px; align-items: center; } #viewPortfolio .pb-donut__svg { width: 142px; height: 142px; display: block; overflow: visible; } #viewPortfolio .pb-arc { transition: opacity .15s ease, stroke-width .15s ease; cursor: default; } #viewPortfolio .pb-donut.is-hl .pb-arc:not(.is-on) { opacity: .28; } #viewPortfolio .pb-donut .pb-arc.is-on { stroke-width: 23; } #viewPortfolio .pb-donut__v { font:600 22px var(--mono); font-variant-numeric: tabular-nums; fill: var(--pb-ink); letter-spacing: -.01em; } #viewPortfolio .pb-donut__s { font:400 15px var(--sans); fill: var(--pb-ink2); } #viewPortfolio .pb-leg { list-style: none; margin: 0; padding: 0; min-width: 0; max-width: 560px; } #viewPortfolio .pb-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 3px 8px; margin: 0 -8px; border-radius: 7px; transition: background-color .15s ease; outline: none; } #viewPortfolio .pb-leg li.is-on, #viewPortfolio .pb-leg li:focus-visible { background: var(--pb-sf); } #viewPortfolio .pb-leg li:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); } #viewPortfolio .pb-dot { width: 10px; height: 10px; border-radius: 3px; display: block; } #viewPortfolio .pb-leg__t { display: flex; align-items: baseline; gap: 10px; min-width: 0; } #viewPortfolio .pb-leg__t b { font:700 14px/1.3 var(--sans); color: var(--accent-soft); flex: none; } #viewPortfolio .pb-leg__t small { font:400 13px/1.3 var(--sans); color: var(--pb-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #viewPortfolio .pb-leg__v { display: flex; align-items: baseline; gap: 10px; text-align: right; } #viewPortfolio .pb-leg__v b { font-size:14px; font-weight: 500; color: var(--pb-ink); } #viewPortfolio .pb-leg__v small { min-width: 46px; font-size:13px; color: var(--pb-ink2); } #viewPortfolio .pb-empty-line { margin: 0; font:400 14px/1.5 var(--sans); color: var(--pb-ink2); } /* the strip: paper gain or loss + income received + profit taken = net with income · double dips */ #viewPortfolio .pb-eq { display: flex; align-items: center; gap: 10px 18px; margin-top: 20px; padding: 12px 18px; border-radius: 14px; background: var(--pb-sf); flex-wrap: wrap; } #viewPortfolio .pb-eqc { min-width: 0; } #viewPortfolio .pb-eqc em { display: block; margin-bottom: 2px; font:400 13px/1.35 var(--sans); font-style: normal; color: var(--pb-ink2); } #viewPortfolio .pb-eqc b { display: block; font-size:17px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--pb-ink); } #viewPortfolio .pb-eqc small { display: block; margin-top: 1px; font:400 13px/1.35 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-eqc .pb-skel { margin: 4px 0; height: 18px; } #viewPortfolio .pb-op { font:400 20px/1 var(--mono); font-style: normal; color: var(--pb-ink2); } #viewPortfolio .pb-eq__t { padding: 8px 14px; border-radius: 10px; background: var(--pb-sf2); } #viewPortfolio .pb-eq__t b { font-size:19px; font-weight: 600; } #viewPortfolio .pb-eqdd { margin-left: auto; padding-left: 18px; box-shadow: inset 1px 0 0 var(--pb-line); } #viewPortfolio .pb-eqnote { flex: 1 1 100%; margin: 0; padding-top: 8px; box-shadow: inset 0 1px 0 var(--pb-line); font:400 13px/1.5 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-eqnote span { margin-right: 6px; } #viewPortfolio .pb-eqnote .pb-link { font-size:13px; } #viewPortfolio .portfolio-status { font-size:13px; } #viewPortfolio .pb-sec.pb-holdings { margin-top: 30px; } /* the table */ #viewPortfolio .port-accts { margin: 0 0 12px; } #viewPortfolio .pb-scroll { margin: 0 -10px; padding: 0 10px; } #viewPortfolio .pb-hold { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--sans); color: var(--pb-ink); } #viewPortfolio .pb-hold th { position: sticky; top: var(--pb-top); z-index: 3; padding: 9px 10px 8px; background: var(--bg); text-align: right; vertical-align: bottom; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); font:600 13px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink2); white-space: nowrap; } /* two-word headings take two lines (PORT_COLS head), so eleven columns fit a laptop without scrolling sideways and each "?" stays right after its last word */ #viewPortfolio .pb-hold th.pb-h { min-width: 64px; } #viewPortfolio .pb-hold th.pb-fundh { text-align: left; padding-left: 38px; } #viewPortfolio .pb-hold th.pb-c-risk, #viewPortfolio .pb-hold td.pb-c-risk { text-align: center; } #viewPortfolio .pb-hold th:last-child { padding-right: 12px; } #viewPortfolio .pb-hold th button:not(.gq) { all: unset; cursor: pointer; border-radius: 4px; } #viewPortfolio .pb-hold th button:not(.gq):hover, #viewPortfolio .pb-hold th:is(.is-asc, .is-desc) button:not(.gq) { color: var(--accent-soft); } #viewPortfolio .pb-hold th button:not(.gq):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* the sort arrow sits before the heading, so its "?" stays right after the words */ #viewPortfolio .pb-hold th.is-desc button:not(.gq)::before { content: "↓"; margin-right: 4px; } #viewPortfolio .pb-hold th.is-asc button:not(.gq)::before { content: "↑"; margin-right: 4px; } #viewPortfolio .pb-hold th > .gq { margin-left: 3px; vertical-align: -3px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .gq { width: 18px; height: 18px; min-width: 18px; min-height: 18px; font-size:13px; color: var(--pb-ink2); } #viewPortfolio .pb-hold td { padding: 8px 9px; text-align: right; vertical-align: top; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--pb-line); transition: background-color .12s ease; } #viewPortfolio .pb-hold td:first-child { text-align: left; padding-left: 8px; } #viewPortfolio .pb-hold td:last-child { padding-right: 12px; } #viewPortfolio .pb-hold td b { display: block; font:500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--pb-ink); } #viewPortfolio .pb-hold td b.pb-txt { font-family: var(--sans); letter-spacing: 0; } #viewPortfolio .pb-hold td small { display: block; margin-top: 1px; font:400 13px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--pb-ink2); } #viewPortfolio .pb-hold td.pb-netc b { font-weight: 600; } #viewPortfolio .pb-hold td small .pb-nw { white-space: nowrap; } #viewPortfolio .pb-hold td .pb-skel { margin-left: auto; } #viewPortfolio .pb-hold td .cp-lvl { font-size:13px; line-height: 1.35; padding: 0 6px; } #viewPortfolio .pb-hold tbody.pb-g > tr.pb-r1 { cursor: pointer; } #viewPortfolio .pb-hold tbody.pb-g:hover > tr.pb-r1 > td { background: color-mix(in srgb, var(--pb-ink) 3.5%, transparent); } #viewPortfolio .pb-hold tbody.pb-g.is-open > tr > td { background: var(--pb-sf); } #viewPortfolio .pb-hold tbody.pb-g.is-open > tr.pb-r1 > td { box-shadow: none; } #viewPortfolio .pb-hold tbody.pb-g.is-open > tr.pb-r1 > td:first-child { box-shadow: inset 2px 0 0 var(--accent); } #viewPortfolio .pb-hold tbody.pb-g > tr.pb-lots > td { box-shadow: none; } #viewPortfolio .pb-hold tbody.pb-g.is-open > tr.pb-lots > td { box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--pb-line); } #viewPortfolio .pb-none { text-align: left !important; color: var(--pb-ink2); padding: 22px 12px !important; } /* the fund: open arrow, ticker in the Universe's amber with its kind badge, name and account under it */ #viewPortfolio .pb-tok { display: flex; gap: 8px; align-items: flex-start; min-width: 0; } #viewPortfolio .pb-exp { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--pb-ink2); cursor: pointer; transition: background-color .15s ease, color .15s ease; } #viewPortfolio .pb-exp:hover { background: var(--pb-sf2); color: var(--pb-ink); } #viewPortfolio .pb-exp svg { transition: transform .2s ease; } #viewPortfolio .pb-exp[aria-expanded="true"] { color: var(--accent-soft); } #viewPortfolio .pb-exp[aria-expanded="true"] svg { transform: rotate(90deg); } #viewPortfolio .pb-exp--none { background: none; pointer-events: none; } #viewPortfolio .pb-tokt { min-width: 0; } #viewPortfolio .pb-tkl { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; } #viewPortfolio .pb-tk { font:700 14px/1.35 var(--sans); color: var(--accent-soft); cursor: pointer; letter-spacing: .01em; } #viewPortfolio .pb-hold .ticker-link.pb-tk { color: var(--accent-soft); } #viewPortfolio .pb-hold .ticker-link.pb-tk:hover { text-decoration: underline; text-underline-offset: 3px; } #viewPortfolio .pb-hold .pb-tk--t { color: var(--pb-ink); cursor: default; } #viewPortfolio .pb-hold .fund-kind, #viewPortfolio .pb-hold .fund-status { font-size:13px; line-height: 1.3; padding: 0 6px; margin-left: 8px; } #viewPortfolio .pb-nm { max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font:400 13px/1.35 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-acct { color: var(--pb-ink2); } #viewPortfolio .pb-sep { color: var(--pb-ink2); } /* the row that opens under a fund: its facts in small aligned columns, then its purchases and sales */ #viewPortfolio .pb-hold tr.pb-lots > td { padding: 0 12px 0 38px !important; text-align: left; white-space: normal; } #viewPortfolio .pb-hold tr.pb-lots.is-open > td { padding-bottom: 14px !important; } #viewPortfolio .pb-lotwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; } #viewPortfolio .pb-lots.is-open .pb-lotwrap { grid-template-rows: 1fr; } #viewPortfolio .pb-lotin { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .24s; } #viewPortfolio .pb-lots.is-open .pb-lotin { visibility: visible; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { #viewPortfolio .pb-lotwrap, #viewPortfolio .pb-exp svg { transition: none; } } #viewPortfolio .pb-xf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px; padding: 4px 0 12px; } #viewPortfolio .pb-xc { min-width: 0; } #viewPortfolio .pb-hold .pb-xc em { display: block; margin-bottom: 1px; font:600 13px/1.3 var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink2); } #viewPortfolio .pb-hold .pb-xc b { font-size:14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* words (Held in, Payment record, Category) wrap in full: "Fidelity Individual …7…" hid the second account */ #viewPortfolio .pb-hold .pb-xc b.pb-txt { white-space: normal; overflow: visible; overflow-wrap: break-word; } #viewPortfolio .pb-hold .pb-xc small { font-family: var(--sans); letter-spacing: 0; white-space: normal; } #viewPortfolio .pb-lotsh { margin: 2px 0 6px; font:600 13px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink2); } /* each purchase and sale is one flat ruled sub-row, the Universe table's 1px lines, one column grid for all */ #viewPortfolio .pb-lotg { display: block; box-shadow: inset 0 1px 0 var(--pb-line); } #viewPortfolio .pb-lot { display: grid; grid-template-columns: 290px 230px 200px 170px minmax(0, 1fr); gap: 20px; align-items: center; padding: 8px 2px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--pb-line); } #viewPortfolio .pb-lot--sold { background: none; } #viewPortfolio .pb-lot > .pb-cell--w { grid-column: -2 / -1; } #viewPortfolio .pb-hold .pb-lot .pb-cell em { margin-bottom: 1px; } #viewPortfolio .pb-hold .pb-lot .pb-cell b { font-size:14px; } #viewPortfolio .pb-hold .pb-lot .pb-cell small { font-family: var(--sans); letter-spacing: 0; white-space: normal; } #viewPortfolio .pb-lot .pb-prog { margin: 4px 0 3px; } #viewPortfolio .pb-lotfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 10px 2px 0; } #viewPortfolio .pb-lotnote { margin: 0; font:400 13px/1.5 var(--sans); color: var(--pb-ink2); max-width: 760px; } #viewPortfolio .pb-lotacts { display: flex; gap: 16px; font:400 13px/1.4 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-lotacts .pb-link { margin-left: 10px; font-size:13px; } #viewPortfolio .pb-lotacts span > .pb-link:first-child { margin-left: 0; } /* the total */ #viewPortfolio .pb-hold tfoot td { padding-top: 10px; padding-bottom: 8px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); } #viewPortfolio .pb-hold tfoot td b { font-weight: 600; } #viewPortfolio .pb-hold tfoot .pb-tok { align-items: center; } /* the column chooser */ #viewPortfolio .pv-cols { position: relative; margin: 0; } #viewPortfolio .pv-cols__btn { min-height: 36px; } #viewPortfolio .pv-cols__menu { top: calc(100% + 8px); width: 260px; border: 0; border-radius: 12px; background: var(--pb-sf2); box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px var(--pb-line); } #viewPortfolio .pv-cols__h { font:500 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pv-cols__h--foot { margin-top: 8px; font-weight: 400; } #viewPortfolio .pv-cols__opt { font:500 14px/1.3 var(--sans); color: var(--pb-ink); } #viewPortfolio .pv-cols__reset { font-size:13px; color: var(--pb-ink); text-decoration: underline; text-underline-offset: 3px; } body[data-theme="light"] #viewPortfolio .pv-cols__menu { background: var(--surface); box-shadow: 0 16px 40px rgba(58, 48, 30, .16), 0 0 0 1px var(--pb-line); } /* first run: one clear panel, one amber action */ #viewPortfolio .portfolio-empty { max-width: 760px; margin: 8px 0 0; padding: 32px 34px !important; border: 0 !important; border-radius: 16px !important; background: var(--pb-sf) !important; box-shadow: none !important; text-align: left; } #viewPortfolio .portfolio-empty h3 { margin: 0 0 8px; font:600 22px/1.3 var(--sans); letter-spacing: -.01em; color: var(--pb-ink); text-transform: none; } #viewPortfolio .portfolio-empty > p { margin: 0 0 20px; font:400 15px/1.55 var(--sans); color: var(--pb-ink2); max-width: 620px; } #viewPortfolio .portfolio-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } #viewPortfolio .portfolio-empty__actions .btn { display: inline-flex; align-items: center; height: 42px; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; font:600 15px/1 var(--sans) !important; cursor: pointer; } #viewPortfolio .portfolio-empty__actions .btn--primary { background: var(--pb-cta) !important; color: var(--pb-cta-ink) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16) !important; } #viewPortfolio .portfolio-empty__actions .btn--primary:hover { filter: brightness(1.06); } #viewPortfolio .portfolio-empty__actions .btn--ghost { background: var(--pb-sf2) !important; color: var(--pb-ink) !important; } #viewPortfolio .portfolio-empty__actions .btn--ghost:hover { background: var(--pb-sf3) !important; } #viewPortfolio .portfolio-empty__hint { margin: 0; font:400 13px/1.5 var(--sans); color: var(--pb-ink2); } /* narrower desks: the table scrolls sideways inside its section (the header stops sticking there) */ @media (max-width: 1400px) { #viewPortfolio .pb-scroll { overflow-x: auto; overscroll-behavior-x: contain; } #viewPortfolio .pb-hold { min-width: 1240px; } #viewPortfolio .pb-hold th { position: static; } } @media (max-width: 1180px) { #viewPortfolio .pb-top { grid-template-columns: 1fr; } } @media (max-width: 1490px) and (min-width: 1181px) { #viewPortfolio .pb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .pb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-text-size="xlarge"] #viewPortfolio .pb-top { grid-template-columns: 1fr; } /* phones: each fund is a card of labelled figures */ @media (max-width: 760px) { #viewPortfolio .pb-big { font-size:32px; } #viewPortfolio .pb-hero__row { display: block; } #viewPortfolio .pb-vchart { max-width: none; margin-top: 14px; } #viewPortfolio .pb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } #viewPortfolio .pb-cell small { white-space: normal; } #viewPortfolio .pb-donut { grid-template-columns: 1fr; justify-items: center; gap: 14px; } #viewPortfolio .pb-leg { width: 100%; } #viewPortfolio .pb-eq { gap: 12px 16px; padding: 14px; } #viewPortfolio .pb-op { display: none; } #viewPortfolio .pb-eqc { flex: 1 1 40%; } #viewPortfolio .pb-eq__t { flex: 1 1 100%; } #viewPortfolio .pb-eqdd { margin-left: 0; padding-left: 0; box-shadow: none; } #viewPortfolio .pb-sec.pb-holdings { margin-top: 28px; } #viewPortfolio .pb-hact { width: 100%; } #viewPortfolio .pb-scroll { margin: 0; padding: 0; overflow: visible; } #viewPortfolio .pb-hold, #viewPortfolio .pb-hold tbody, #viewPortfolio .pb-hold tfoot, #viewPortfolio .pb-hold tr, #viewPortfolio .pb-hold td { display: block; min-width: 0; } #viewPortfolio .pb-hold thead { display: none; } #viewPortfolio .pb-hold tbody.pb-g, #viewPortfolio .pb-hold tfoot { padding: 12px 0; box-shadow: inset 0 -1px 0 var(--pb-line); } #viewPortfolio .pb-hold tbody.pb-g.is-open { background: var(--pb-sf); border-radius: 0; padding: 12px; box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--pb-line); } #viewPortfolio .pb-hold tbody.pb-g > tr > td, #viewPortfolio .pb-hold tbody.pb-g:hover > tr > td, #viewPortfolio .pb-hold tbody.pb-g.is-open > tr > td { background: none; box-shadow: none !important; } #viewPortfolio .pb-hold tr.pb-r1, #viewPortfolio .pb-hold tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; } #viewPortfolio .pb-hold tr.pb-r1 > td, #viewPortfolio .pb-hold tfoot td { padding: 0 !important; text-align: left !important; white-space: normal; } #viewPortfolio .pb-hold tr > td.pb-fundc { grid-column: 1 / -1; } #viewPortfolio .pb-hold tr.pb-r1 > td[data-label]::before, #viewPortfolio .pb-hold tfoot td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font:600 13px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink2); } #viewPortfolio .pb-hold tfoot td:empty { display: none; } #viewPortfolio .pb-hold td b { white-space: normal; } #viewPortfolio .pb-hold td .pb-skel { margin-left: 0; } #viewPortfolio .pb-nm { max-width: 100%; } #viewPortfolio .pb-hold tr.pb-lots > td { padding: 0 !important; } #viewPortfolio .pb-hold tr.pb-lots.is-open > td { padding: 12px 0 0 !important; } #viewPortfolio .pb-xf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #viewPortfolio .pb-hold.pb-noinc :is(td.pb-c-income, td.pb-c-dips, td.pb-c-net), #viewPortfolio .pb-hold.pb-nosales td.pb-c-profit { display: none; } #viewPortfolio .pb-hold td.pb-c-risk { text-align: left !important; } #viewPortfolio .pb-lot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 10px 0; } #viewPortfolio .pb-lot > .pb-cell:first-child, #viewPortfolio .pb-lot > .pb-cell--w { grid-column: 1 / -1; } #viewPortfolio .pb-lot > .pb-cell:empty { display: none; } #viewPortfolio .pb-hold tfoot .pb-tok { grid-column: 1 / -1; } #viewPortfolio .portfolio-empty { padding: 24px 20px !important; } } /* ═══ Tables shared by Trades and Income (the board's ledger: no boxes, hairlines between rows) ═══ */ :is(#viewTradelog, #viewIncome) .pb-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font:400 15px/1.4 var(--sans); color: var(--pb-ink); } :is(#viewTradelog, #viewIncome) .pb-tbl thead th { position: sticky; top: var(--pb-top); z-index: 3; padding: 12px 10px 10px; background: var(--bg); border: 0; box-shadow: inset 0 -1px 0 var(--pb-line); font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--pb-ink2); white-space: nowrap; text-align: left; } :is(#viewTradelog, #viewIncome) .pb-tbl thead th.r { text-align: right; } :is(#viewTradelog, #viewIncome) .pb-tbl thead th:first-child { padding-left: 0; } :is(#viewTradelog, #viewIncome) .pb-tbl thead th:last-child { padding-right: 0; } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; font:inherit; color: inherit; cursor: pointer; border-radius: 6px; } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort:hover { color: var(--pb-ink); } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort.is-on { color: var(--pb-ink); } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort i { font-size:13px; color: var(--accent); } :is(#viewTradelog, #viewIncome) .pb-tbl tbody td, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td { padding: 11px 10px; border: 0; box-shadow: inset 0 -1px 0 var(--pb-line); vertical-align: middle; white-space: nowrap; background: transparent; font-size:15px; color: var(--pb-ink); transition: background-color .15s ease; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody td:first-child, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td:first-child { padding-left: 0; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody td:last-child, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td:last-child { padding-right: 0; } :is(#viewTradelog, #viewIncome) .pb-tbl td.r { text-align: right; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody tr:hover > td { background: color-mix(in srgb, var(--pb-sf) 75%, transparent); } :is(#viewTradelog, #viewIncome) .pb-tbl td b { display: block; font-size:16px; font-weight: 500; line-height: 1.3; color: var(--pb-ink); } :is(#viewTradelog, #viewIncome) .pb-tbl td small { display: block; margin-top: 2px; font:400 13px/1.35 var(--sans); color: var(--pb-ink2); } :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td { box-shadow: none; padding-top: 16px; } :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td b { font-weight: 600; } :is(#viewTradelog, #viewIncome) .pb-tok { display: flex; gap: 12px; align-items: center; } :is(#viewTradelog, #viewIncome) .pb-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pb-sf3); color: var(--pb-ink); font:700 13px/1 var(--sans); } :is(#viewTradelog, #viewIncome) .pb-tokt { display: flex; flex-direction: column; min-width: 0; } :is(#viewTradelog, #viewIncome) .pb-tk { font:600 16px/1.3 var(--sans); color: var(--pb-ink); } :is(#viewTradelog, #viewIncome) .pb-tsub { font:400 13px/1.35 var(--sans); color: var(--pb-ink2); max-width: 240px; overflow: hidden; text-overflow: ellipsis; } :is(#viewTradelog, #viewIncome) .pb-of { color: var(--pb-ink2); font-weight: 400; } :is(#viewTradelog, #viewIncome) .pb-search input { height: 36px; width: 190px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--pb-sf2); color: var(--pb-ink); font:400 14px/1 var(--sans); outline: none; } :is(#viewTradelog, #viewIncome) .pb-search input::placeholder { color: var(--pb-ink2); } :is(#viewTradelog, #viewIncome) .pb-search input:hover { background: var(--pb-sf3); } :is(#viewTradelog, #viewIncome) .pb-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :is(#viewTradelog, #viewIncome) .pb-toggle.is-on { background: color-mix(in srgb, var(--accent) 18%, var(--pb-sf2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); } /* ═══ Trades ═══════════════════════════════════════════════════════════════════════ */ #viewTradelog .tl { gap: 0; } #viewTradelog .tl > * + * { margin-top: 18px; } #viewTradelog .tl-bar { gap: 10px; } #viewTradelog .tl-bar .pb-btn { height: 38px; } #viewTradelog .tl-target { min-height: 38px; background: var(--pb-sf2); color: var(--pb-ink2); font:500 14px var(--sans); } #viewTradelog .tl-target em { color: var(--pb-ink2); } #viewTradelog .pb-trs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 18px 22px; border-radius: 16px; background: var(--pb-sf); } #viewTradelog .pb-trs .pb-cell b { font-size:19px; } #viewTradelog .pb-trs .pb-cell small { white-space: normal; } #viewTradelog .tl > .pb-sec { margin-top: 30px; } #viewTradelog .pb-sec.tl-pane { border-radius: 0; background: none; box-shadow: none; overflow: visible; } #viewTradelog .pb-sec .tl-filters { padding: 0; align-items: center; gap: 10px; } #viewTradelog .pb-sec__h p b { display: inline; font-weight: 600; } #viewTradelog .tl-scroll { overflow: visible; max-height: none; } #viewTradelog .tl-table td.l, #viewTradelog .tl-table td.r { font-family: var(--sans); } #viewTradelog .tl-table tr.is-reached > td { background: color-mix(in srgb, var(--pb-pos) 5%, transparent); } #viewTradelog .tl-table .tl-acct { max-width: 220px; font:500 13px/1.5 var(--sans); color: var(--pb-ink2); } #viewTradelog .tl-col-pg { min-width: 250px; } #viewTradelog .tl-col-pg .pb-prog { margin-top: 0; max-width: 240px; } #viewTradelog .tl-side { display: inline-flex; padding: 1px 9px; border-radius: 6px; background: var(--pb-sf2); font:500 13px/1.5 var(--sans); color: var(--pb-ink); } #viewTradelog .tl-side--sell { background: color-mix(in srgb, var(--pb-pos) 14%, transparent); } #viewTradelog .tl-status { font-size:13px; } #viewTradelog .tl-status--filled { font:400 14px/1.5 var(--sans); color: var(--pb-ink2); } #viewTradelog .tl-tag { font-size:13px; } #viewTradelog .tl-col-act { white-space: nowrap; } #viewTradelog .tl-col-act .tl-link { font-size:14px; } #viewTradelog .tl-none, #viewTradelog .tl-empty-row { color: var(--pb-ink2); padding: 20px 0 !important; } #viewTradelog .tl-srcline { padding: 4px 22px; border-radius: 16px; background: var(--pb-sf); box-shadow: none; } #viewTradelog .tl-srcline li { font-size:14px; } #viewTradelog .tl-note { font-size:14px; background: var(--pb-sf); } #viewTradelog .tl-foot { margin-top: 26px !important; font:400 13px/1.55 var(--sans); color: var(--pb-ink2); } /* the first-run panel, the import pane, the form and the per-fund targets keep their panels, on the board's surface */ #viewTradelog .tl-empty, #viewTradelog .tl-pane:not(.pb-sec) { background: var(--pb-sf); box-shadow: none; border-radius: 16px; } #viewTradelog .tl-empty__h { font:600 22px/1.3 var(--sans); letter-spacing: -.01em; } #viewTradelog .tl-btn--primary { background: var(--pb-cta); color: var(--pb-cta-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); } #viewTradelog .tl-btn { background-color: var(--pb-sf2); } #viewTradelog .tl-btn:hover { background-color: var(--pb-sf3); } #viewTradelog .tl-btn--primary, #viewTradelog .tl-btn--primary:hover { background-color: var(--pb-cta); } #viewTradelog .tl-strip { font-size:14px; } @media (max-width: 1320px) { #viewTradelog .tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; } #viewTradelog .tl-table { min-width: 1060px; } #viewTradelog .pb-tbl thead th { position: static; } } @media (max-width: 1060px) { #viewTradelog .pb-trs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #viewTradelog .pb-trs { grid-template-columns: 1fr 1fr; padding: 16px; } #viewTradelog .pb-trs .pb-cell:last-child { grid-column: 1 / -1; } #viewTradelog .tl-bar .tl-bar__sp { display: none; } #viewTradelog .pb-sec .tl-filters { width: 100%; } #viewTradelog .pb-search input { width: 100%; } #viewTradelog .pb-search { flex: 1 1 160px; } /* each row a card */ #viewTradelog .tl-scroll { overflow: visible; } #viewTradelog .tl-table { min-width: 0; } #viewTradelog .tl-table, #viewTradelog .tl-table tbody, #viewTradelog .tl-table tfoot, #viewTradelog .tl-table tr { display: block; } #viewTradelog .tl-table thead { display: none; } #viewTradelog .tl-table tbody tr, #viewTradelog .tl-table tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--pb-line); } #viewTradelog .tl-table tbody td, #viewTradelog .tl-table tfoot td { display: block; padding: 0 !important; box-shadow: none; text-align: left !important; white-space: normal; } #viewTradelog .tl-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewTradelog .tl-table td[data-label="Fund"], #viewTradelog .tl-table td.tl-col-pg, #viewTradelog .tl-table td[data-label="Total"] { grid-column: 1 / -1; } #viewTradelog .tl-table td[data-label="Fund"]::before, #viewTradelog .tl-table td[data-label="Total"]::before { display: none; } #viewTradelog .tl-table td:empty { display: none; } #viewTradelog .tl-col-pg { min-width: 0; } #viewTradelog .tl-col-pg .pb-prog { max-width: none; } #viewTradelog .tl-table tr.is-reached { background: color-mix(in srgb, var(--pb-pos) 5%, transparent); } #viewTradelog .tl-table tr.is-reached > td { background: none; } } #viewTradelog .pb-tbl tfoot td { position: static; border-top: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); font-family: var(--sans); vertical-align: top; } #viewTradelog .pb-tbl thead th .tl-sort { padding: 0 !important; } #viewTradelog .pb-tsub { max-width: 200px; white-space: nowrap; } #viewTradelog .tl-table .tl-acct { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } #viewTradelog .tl-table--hist td, #viewTradelog .tl-table--hist th { padding-left: 8px; padding-right: 8px; } #viewTradelog .tl-col-act .tl-link { padding: 0 3px; } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) :is(.pb-tbl .tl-sort i, .pb-hold th button:not(.gq) i) { color: var(--yellow); } body[data-theme="light"] #viewPortfolio .port-accts__tot { color: var(--yellow); } /* ═══ Income and returns ═══════════════════════════════════════════════════════════ */ #viewIncome .pb-trk { margin: 6px 0 34px; } #viewIncome .pb-trkS { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 20px; padding: 18px 22px; border-radius: 16px; background: var(--pb-sf); } #viewIncome .pb-trkS .pb-cell b { font-size:19px; } #viewIncome .pb-trkS .pb-cell small { white-space: normal; } #viewIncome .pb-bars { margin-top: 22px; } #viewIncome .pb-bars__plot { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; height: 240px; padding: 0 64px 28px 0; } #viewIncome .pb-bars__grid { font-style: normal; position: absolute; left: 0; right: 64px; height: 0; border-top: 1px solid var(--pb-line); pointer-events: none; } #viewIncome .pb-bars__grid span { position: absolute; right: -64px; top: -9px; width: 58px; text-align: right; font-size:13px; color: var(--pb-ink2); } #viewIncome .pb-bars__m { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; border-radius: 8px; outline: none; cursor: default; } #viewIncome .pb-bars__m:hover, #viewIncome .pb-bars__m:focus-visible { background: color-mix(in srgb, var(--pb-sf) 80%, transparent); } #viewIncome .pb-bars__m:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); } #viewIncome .pb-bars__col { flex: 1; display: flex; align-items: flex-end; gap: 3px; padding: 0 4px; } #viewIncome .pb-bars__ly { flex: 0 0 38%; border-radius: 4px 4px 0 0; background: var(--pb-sf3); } #viewIncome .pb-bars__now { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } #viewIncome .pb-bars__now i { display: block; border-radius: 4px 4px 0 0; } #viewIncome .pb-bars__now i + i { border-radius: 0; } #viewIncome .pb-bars__got { background: var(--pb-pos); } #viewIncome .pb-bars__spec { background: var(--accent); border-radius: 4px 4px 0 0 !important; } #viewIncome .pb-bars__due { box-shadow: inset 0 0 0 1.5px var(--pb-pos); background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--pb-pos) 22%, transparent) 4px 6px); border-radius: 4px 4px 0 0 !important; } #viewIncome .pb-bars__m.is-before .pb-bars__now { opacity: 0; } #viewIncome .pb-bars__lab { position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewIncome .pb-bars__tip { position: absolute; top: -8px; transform: translate(-50%, -100%); z-index: 5; max-width: 300px; padding: 8px 12px; border-radius: 10px; background: var(--pb-sf2); color: var(--pb-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px var(--pb-line); font:400 13px/1.45 var(--sans); pointer-events: none; } body[data-theme="light"] #viewIncome .pb-bars__tip { background: #fff; box-shadow: 0 12px 30px rgba(58, 48, 30, .16), 0 0 0 1px var(--pb-line); } #viewIncome .pb-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); } #viewIncome .pb-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; } #viewIncome .pb-legend .lg-got { background: var(--pb-pos); } #viewIncome .pb-legend .lg-spec { background: var(--accent); } #viewIncome .pb-legend .lg-due { box-shadow: inset 0 0 0 1.5px var(--pb-pos); } #viewIncome .pb-legend .lg-ly { background: var(--pb-sf3); } /* the rest of the view: each section on the board's raised surface, no shadow, its ledger inside */ #viewIncome .income-card, #viewIncome .portfolio-empty { background: var(--pb-sf) !important; box-shadow: none !important; border-radius: 16px !important; margin: 0 0 20px; } #viewIncome .card__header { padding: 18px 22px 10px !important; } #viewIncome .card__header h2 { font:600 18px/1.3 var(--sans) !important; letter-spacing: -.01em !important; } #viewIncome .card__hint, #viewIncome .income-card__hint { font-size:13px; color: var(--pb-ink2); } #viewIncome .screener-count, #viewIncome #incomeAuditStatus { font-size:13px !important; } #viewIncome .income-card--summary .card__body, #viewIncome .income-card--summary.card--collapsed .card__body { padding: 6px 22px 20px; } #viewIncome .pv-sum__hero { font:600 40px/1.1 var(--mono); letter-spacing: -.03em; } #viewIncome .pv-sum__value { font:500 19px/1.2 var(--mono); letter-spacing: -.01em; } #viewIncome .pv-sum__value.is-income { color: var(--pb-inc); } #viewIncome .pv-sum__value.stat--down { color: var(--pb-neg); } #viewIncome .pv-sum__label, #viewIncome .pv-sum__sub { font-weight: 400; font-size:13px; color: var(--pb-ink2); } #viewIncome .table-wrap { padding: 0 22px 12px; } #viewIncome .fund-table thead th { top: 0; background: var(--pb-sf) !important; font:500 13px/1.3 var(--sans); color: var(--pb-ink2); box-shadow: inset 0 -1px 0 var(--pb-line); border: 0; padding: 10px 10px; } #viewIncome .fund-table thead th:first-child, #viewIncome .fund-table tbody td:first-child, #viewIncome .fund-table tfoot td:first-child { padding-left: 0; } #viewIncome .fund-table thead th:last-child, #viewIncome .fund-table tbody td:last-child, #viewIncome .fund-table tfoot td:last-child { padding-right: 0; } #viewIncome .fund-table thead th::after { font-size:13px; } #viewIncome .fund-table thead th.sorted-asc, #viewIncome .fund-table thead th.sorted-desc { color: var(--pb-ink); } #viewIncome .fund-table tbody td { padding: 11px 10px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--pb-line); font-size:15px; } #viewIncome .fund-table td.r { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } #viewIncome .fund-table tbody tr:hover, #viewIncome .fund-table tbody tr:nth-child(even):hover { background: color-mix(in srgb, var(--pb-ink) 4%, transparent); } #viewIncome .fund-table td.is-up, #viewIncome .fund-table td.stat--up { color: var(--pb-pos); } #viewIncome .fund-table td.is-down, #viewIncome .fund-table td.stat--down { color: var(--pb-neg); } #viewIncome #incomeDivTable td.is-up, #viewIncome #incomeRecentDivTable td.is-up, #viewIncome #incomeMonthlyTable td.is-up:nth-child(2), #viewIncome #incomePnlTable td.is-up, #viewIncome #incomeProjTable td.stat--up, #viewIncome #incomeDoubleDipTable td.is-up:nth-child(3) { color: var(--pb-inc); } #viewIncome .ticker-link, #incomePnlTable .ticker-link { font:600 15px var(--sans); letter-spacing: .005em; } #viewIncome tfoot td { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); border-top: 0; } #viewIncome .inc-tag, #viewIncome .inc-note, #viewIncome .inc-sub { font-size:13px; } #viewIncome .inc-note, #viewIncome .inc-sub { color: var(--pb-ink2); } /* a special or extra payment among the payments coming: Holdings' amber "special" (a grey pill in dark mode before) */ #viewIncome .inc-special { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: rgba(224, 168, 46, .12); color: #f5c451; font:500 13px/1.35 var(--sans); white-space: nowrap; } body[data-theme="light"] #viewIncome .inc-special { background: rgba(154, 107, 0, .10); color: #7f5400; } #viewIncome .mo-bar, #viewIncome .div-pct__bar { background: var(--pb-inc) !important; border-radius: 999px; } #viewIncome .income-callout { margin: 0 22px 12px; padding: 12px 16px; border-radius: 12px; background: var(--pb-sf2); font-size:14px; color: var(--pb-ink2); border: 0; } #viewIncome .audit-section-title { padding: 0 22px; font:600 15px/1.3 var(--sans); } #viewIncome .inc-note#incomeSourceNote { font:400 13px/1.5 var(--sans); color: var(--pb-ink2); } @media (max-width: 1100px) { #viewIncome .pb-trkS { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #viewIncome .pb-trkS { grid-template-columns: 1fr 1fr; padding: 16px; } #viewIncome .pb-trkS .pb-cell:last-child { grid-column: 1 / -1; } #viewIncome .pb-trkS .pb-cell b { white-space: normal; } /* "(+85.3%)" and "· $0.00" wrap under the amount at Large text */ #viewIncome .pb-bars__plot { gap: 0 3px; padding-right: 0; height: 200px; } #viewIncome .pb-bars__grid { right: 0; } #viewIncome .pb-bars__grid span { display: none; } #viewIncome .pb-bars__col { padding: 0 1px; gap: 1px; } #viewIncome .pb-bars__lab { font-size:13px; transform: rotate(0); } #viewIncome .pb-bars__m:nth-child(odd of .pb-bars__m) .pb-bars__lab { visibility: hidden; } #viewIncome .table-wrap { padding: 0 14px 10px; } #viewIncome .card__header { padding: 16px 16px 8px !important; } } #viewIncome .pb-loading { padding: 4px 0; } #viewIncome .pb-bars__m.is-before .pb-bars__col { background: linear-gradient(to top, transparent 0, transparent 100%); box-shadow: inset 0 -1px 0 var(--pb-line); } #viewIncome .pb-bars__m.is-before .pb-bars__lab { color: var(--pb-ink2); } /* The larger text sizes zoom the view (1.12 / 1.25), so a 1440 screen lays out like a ~1290 / ~1150 one: the tables scroll sideways inside their sections there too, rather than widening the page. */ @media (min-width: 761px) { body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .pb-scroll, body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewTradelog .tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; contain: paint; } body[data-text-size="xlarge"] #viewPortfolio .pb-hold { min-width: 1240px; } /* Large: the usual columns fit 1440 and 1512 (Double dips leaves the usual set at this size, app.js portSavedCols; the yields line under "Pays a month" breaks at its dot; cells a touch tighter) */ body[data-text-size="large"] #viewPortfolio .pb-hold td { padding-left: 7px; padding-right: 7px; } body[data-text-size="large"] #viewPortfolio .pb-hold td.pb-c-month small { white-space: normal; } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewTradelog .tl-table { min-width: 1060px; } body:is([data-text-size="large"], [data-text-size="xlarge"]) :is(#viewPortfolio .pb-hold th, #viewTradelog .pb-tbl thead th) { position: static; } body[data-text-size="xlarge"] #viewTradelog .pb-trs { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-text-size="xlarge"] #viewIncome .pb-trkS { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #viewIncome .portfolio-empty__actions { margin-top: 18px; } #viewPortfolio .pb-histhint { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 12px; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--pb-sf); font:400 14px/1.45 var(--sans); color: var(--pb-ink2); } #viewPortfolio .pb-histhint[hidden] { display: none; } /* last year's bars and empty tracks: a neutral that still reads on paper */ #viewIncome { --pb-ly: color-mix(in srgb, var(--text) 18%, var(--bg)); } body[data-theme="light"] #viewIncome { --pb-ly: color-mix(in srgb, var(--text) 20%, var(--bg)); } #viewIncome .pb-bars__ly, #viewIncome .pb-legend .lg-ly { background: var(--pb-ly); } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog) .pb-prog { background: var(--surface-4); } /* ═══ The actions row under the tabs (Portfolio and Income use the site's .viewbar heading) ═══ */ :is(#viewPortfolio, #viewIncome) > .pb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 0; margin: 0 0 26px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } :is(#viewPortfolio, #viewIncome) > .pb-actions > .port-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 100%; margin: 0; } :is(#viewPortfolio, #viewIncome) > .pb-actions > :not(.port-toolbar__actions) { flex: 1 1 100%; } :is(#viewPortfolio, #viewIncome) > .pb-actions .pb-actions__sp { flex: 1 1 auto; } :is(#viewPortfolio, #viewIncome) > .subnav { margin-bottom: 18px; } #viewPortfolio > .pb-actions .port-upload-btn, #viewPortfolio > .pb-actions .port-clear-btn, #viewPortfolio > .pb-actions .port-more__btn, #viewIncome > .pb-actions .export-btn { height: 38px; font-size:14px; } #viewIncome > .pb-actions .port-filter-select { height: 38px; font-size:14px; } @media (max-width: 760px) { :is(#viewPortfolio, #viewIncome) > .pb-actions .pb-actions__sp { display: none; } } /* The heading, tabs and actions sit exactly as on every other view: the two views were flex columns with a 10px gap, which put 10px more above the heading bar and under it than Risk mix, News or Trades have. */ #viewPortfolio.is-active, #viewIncome.is-active { display: block; } /* The toolbar's Import is the page's one amber action: drawn exactly like the Research "Analyze" button in both themes (the light theme's own accent put white type on dark gold there). */ #viewPortfolio > .pb-actions .port-upload-btn.port-upload-btn--primary, #viewPortfolio > .pb-actions .port-upload-btn.port-upload-btn--primary:hover { background: var(--pb-cta); color: var(--pb-cta-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); } #viewPortfolio > .pb-actions .port-upload-btn.port-upload-btn--primary:hover { filter: brightness(1.06); } /* ═══ Panes: the dashboard's pane chrome (cockpit.css .cpane, .cpane__bar, .cpane__title, .cpane__meta, and the .cpfilters controls) — a hairline outline, a slim bar with the mono amber title, hairlines between rows. Titles and metas run at 13px here rather than the desk's 11.5px. ═══ */ :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane { display: block; min-width: 0; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px); background: var(--bg); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane > .cpane__bar { height: auto; min-height: 38px; padding: 5px 8px 5px 12px; gap: 6px 12px; flex-wrap: wrap; border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane .cpane__title { margin: 0; font-size:13px; line-height: 1.3; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane .cpane__meta { font-size:13px; color: var(--pb-ink2); } :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane__in { padding: 14px 16px 16px; } #viewPortfolio .pb-top { gap: 12px; } #viewPortfolio .pb-hero { min-width: 0; } #viewPortfolio .pb-inc { display: block !important; } #viewPortfolio .pb-eqpane { margin-top: 12px; } #viewPortfolio .pb-eqpane .pb-eq { margin: 0; padding: 12px 16px; border-radius: 0 0 var(--radius, 12px) var(--radius, 12px); background: none; } #viewPortfolio .pb-eqpane .pb-eq__t { background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: inset 0 0 0 1px var(--border-accent, rgba(224, 168, 46, .38)); } #viewPortfolio .pb-stats { margin-top: 16px; } #viewPortfolio .pb-pane.pb-holdings { margin-top: 12px; } #viewPortfolio .pb-holdings > .pb-bar .pb-hact { margin-left: auto; gap: 6px; } #viewPortfolio .pb-holdings .pb-scroll { margin: 0; padding: 0; } #viewPortfolio .pb-holdings .pb-note { margin: 0; padding: 10px 14px 12px; box-shadow: inset 0 1px 0 var(--pb-line); max-width: none; } #viewPortfolio .pb-holdings .port-accts { margin: 0; padding: 8px 12px; box-shadow: inset 0 -1px 0 var(--pb-line); } #viewPortfolio .pb-histhint { margin: 0; padding: 7px 8px 7px 14px; border-radius: 0; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 -1px 0 var(--pb-line); font-size:13px; } #viewPortfolio .pb-holdings .pb-hold th { background: var(--bg); } #viewPortfolio .pb-holdings .pb-hold th:first-child, #viewPortfolio .pb-holdings .pb-hold td:first-child { padding-left: 10px; } #viewPortfolio .pb-holdings .pb-hold th.pb-fundh { padding-left: 40px; } /* controls: the dashboard filter bar's (cockpit.css .cpfilters select / .cpfilters__yc), at 13px */ :is(#viewPortfolio, #viewTradelog, #viewIncome) .cpane__bar :is(.pb-btn, .pb-select), :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-histhint .pb-btn { height: 30px; border: 1px solid var(--border); border-radius: 7px; background-color: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); box-shadow: none; transition: border-color .12s, color .12s; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .cpane__bar .pb-btn, :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-histhint .pb-btn { padding: 0 11px; gap: 6px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .cpane__bar .pb-select { padding: 0 28px 0 10px; background-position: calc(100% - 15px) 12px, calc(100% - 10px) 12px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) .cpane__bar :is(.pb-btn, .pb-select):hover, :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-histhint .pb-btn:hover { border-color: var(--border-hover); color: var(--text); background-color: var(--surface-2); } /* the actions row and the tabs under the heading: the same filter-bar controls, and the dashboard's pane tabs */ #viewPortfolio > .pb-actions :is(.port-upload-btn, .port-clear-btn, .port-more__btn), #viewIncome > .pb-actions :is(.export-btn, .port-filter-select) { height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); } #viewPortfolio > .pb-actions :is(.port-upload-btn, .port-clear-btn, .port-more__btn):hover, #viewIncome > .pb-actions .export-btn:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); } #viewPortfolio > .pb-actions .port-upload-btn.port-upload-btn--primary, #viewPortfolio > .pb-actions .port-upload-btn.port-upload-btn--primary:hover { border-color: transparent; } #viewPortfolio > .pb-actions { margin-bottom: 14px; } #viewPortfolio > .pb-actions .broker-pill { height: 32px; border-radius: 7px; } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav { gap: 4px; margin: 4px 0 14px; padding: 0; border-radius: 0; background: none; } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab { min-height: 30px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: none; box-shadow: none; color: var(--pb-ink2); font:650 13px/1.2 var(--sans); } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab:hover { color: var(--pb-ink); background: var(--soft-2, rgba(255, 255, 255, .06)); } :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active, body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active { color: var(--accent-soft, var(--accent)); background: var(--accent-bg, rgba(224, 168, 46, .12)); border-color: var(--border-accent, var(--accent)); box-shadow: none; } @media (max-width: 760px) { :is(#viewPortfolio, #viewTradelog, #viewIncome) .pb-pane__in { padding: 12px; } #viewPortfolio .pb-holdings > .pb-bar .pb-hact { margin-left: 0; width: 100%; } #viewPortfolio .pb-holdings .pb-hold { padding: 0 12px; } #viewPortfolio .pb-holdings .pb-hold tbody.pb-g.is-open { margin: 0 -4px; } } /* the "?" stays in sight right after each heading (cockpit.css hid it until hover) */ #viewPortfolio .pb-hold thead th > .gq { opacity: .8; width: 17px; height: 17px; min-width: 17px; min-height: 17px; font-size:13px; } #viewPortfolio .pb-hold thead th > .gq:hover, #viewPortfolio .pb-hold thead th > .gq:focus-visible { opacity: 1; } /* ═══ Trades and Income and returns in the same panes, heads and rows (Sep 27 pass) ═══ */ /* column heads: the Universe table's small uppercase mono, at 13px */ :is(#viewTradelog, #viewIncome) .pb-tbl thead th, #viewIncome .fund-table thead th { font:600 13px/1.25 var(--mono) !important; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink2); padding: 9px 10px 8px; background: var(--bg) !important; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort { font:inherit; letter-spacing: inherit; text-transform: inherit; } :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort.is-on, :is(#viewTradelog, #viewIncome) .pb-tbl .tl-sort:hover { color: var(--accent-soft); } :is(#viewTradelog, #viewIncome) .pb-tbl thead th:first-child, #viewIncome .fund-table thead th:first-child { padding-left: 12px; } :is(#viewTradelog, #viewIncome) .pb-tbl thead th:last-child, #viewIncome .fund-table thead th:last-child { padding-right: 12px; } /* rows: one line of figures where they fit, 14px mono, hairlines between */ :is(#viewTradelog, #viewIncome) .pb-tbl tbody td, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td { padding: 8px 10px; font-size:14px; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody td:first-child, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td:first-child { padding-left: 12px; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody td:last-child, :is(#viewTradelog, #viewIncome) .pb-tbl tfoot td:last-child { padding-right: 12px; } :is(#viewTradelog, #viewIncome) .pb-tbl td b { font:500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } :is(#viewTradelog, #viewIncome) .pb-tbl td small { margin-top: 1px; font:400 13px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } :is(#viewTradelog, #viewIncome) .pb-tbl tbody tr:hover > td { background: color-mix(in srgb, var(--pb-ink) 3.5%, transparent); } /* the fund: the amber ticker and its kind badge, as on Holdings and the dashboard */ :is(#viewTradelog, #viewIncome) .pb-tkl { display: flex; align-items: center; } :is(#viewTradelog, #viewIncome) .pb-tk { font:700 14px/1.35 var(--sans); color: var(--accent-soft); letter-spacing: .01em; } :is(#viewTradelog, #viewIncome) .pb-tokt .fund-kind, :is(#viewTradelog, #viewIncome) .pb-tokt .fund-status { font-size:13px; line-height: 1.3; padding: 0 6px; margin-left: 8px; } :is(#viewTradelog, #viewIncome) .pb-tsub { font-size:13px; } /* Trades */ #viewTradelog .tl > * + * { margin-top: 12px; } #viewTradelog .tl > .pb-pane { margin-top: 12px; } #viewTradelog .pb-trpane .pb-trs { padding: 12px 16px 14px; border-radius: 0 0 var(--radius, 12px) var(--radius, 12px); background: none; gap: 12px 20px; } #viewTradelog .pb-trpane .pb-trs .pb-cell b { font-size:17px; } #viewTradelog .tl-pane.pb-pane { background: var(--bg); } #viewTradelog .tl-pane.pb-pane .pb-scroll { margin: 0; padding: 0; } #viewTradelog .pb-yr { color: var(--pb-ink2); font-weight: 400; } #viewTradelog .tl-pane.pb-pane .pb-bar .tl-filters { margin-left: auto; gap: 6px; } #viewTradelog .tl-pane.pb-pane .cpane__meta b { display: inline; font-weight: 600; } #viewTradelog .tl-pane.pb-pane .tl-empty-row { padding: 14px 16px !important; margin: 0; } #viewTradelog .pb-bar .pb-search input { height: 30px; width: 170px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); font-size:13px; } #viewTradelog .pb-bar .pb-toggle.is-on { border-color: var(--border-accent, var(--accent)); color: var(--accent-soft); background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: none; } #viewTradelog .tl-table .tl-acct { padding: 0; background: none; font:400 13px/1.4 var(--sans); color: var(--pb-ink2); } #viewTradelog .tl-srcline, #viewTradelog .tl-note { background: none !important; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px); padding: 6px 14px; } #viewTradelog .tl-srcline li { font-size:13px; } #viewTradelog .tl-bar :is(.pb-btn, .tl-btn), #viewTradelog .tl-target { height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background-color: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); box-shadow: none; } #viewTradelog .tl-bar :is(.pb-btn, .tl-btn):hover { border-color: var(--border-hover); color: var(--text); background-color: var(--surface-2); } #viewTradelog .tl-bar :is(.pb-btn--primary, .tl-btn--primary), #viewTradelog .tl-bar :is(.pb-btn--primary, .tl-btn--primary):hover { border-color: transparent; background-color: var(--pb-cta); color: var(--pb-cta-ink); font-weight: 650; } #viewTradelog .tl-empty, #viewTradelog .tl-pane:not(.pb-sec):not(.pb-pane) { background: var(--bg); box-shadow: none; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px); } @media (max-width: 760px) { #viewTradelog .tl-pane.pb-pane .pb-bar .tl-filters { margin-left: 0; width: 100%; } #viewTradelog .pb-bar .pb-search input { width: 100%; } #viewTradelog .tl-pane.pb-pane .tl-table { padding: 0 12px; } } /* Income and returns: every card is a pane with the dashboard's bar */ #viewIncome .pb-trk { margin: 0 0 12px; } #viewIncome .pb-trk .pb-trkS { padding: 12px 16px 14px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--pb-line); gap: 12px 20px; } #viewIncome .pb-trk .pb-trkS .pb-cell b { font-size:17px; } #viewIncome .pb-trk .pb-bars { margin: 0; padding: 18px 16px 12px; } #viewIncome .pb-trk .pb-legend { margin: 36px 0 0; } #viewIncome .income-card, #viewIncome .portfolio-empty { background: var(--bg) !important; box-shadow: none !important; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)) !important; border-radius: var(--radius, 12px) !important; margin: 0 0 12px; } #viewIncome .income-card > .card__header { min-height: 38px; padding: 5px 12px !important; gap: 6px 12px; align-items: center; background: linear-gradient(to bottom, var(--soft, rgba(255, 255, 255, .045)), transparent); border-bottom: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; } #viewIncome .income-card.card--collapsed > .card__header { border-bottom-color: transparent; } #viewIncome .income-card > .card__header h2 { display: inline-flex; align-items: center; gap: 9px; margin: 0; font:700 13px/1.3 var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--accent-soft, var(--accent)) !important; } #viewIncome .income-card > .card__header h2::before { content: ""; width: 13px; height: 2px; border-radius: 2px; flex-shrink: 0; background: var(--accent); opacity: .8; } #viewIncome .income-card > .card__header :is(.screener-count, .card__hint) { font:500 13px/1.3 var(--mono) !important; color: var(--pb-ink2); background: none; padding: 0; } #viewIncome .income-card .card__body { padding-top: 0; } #viewIncome .income-card--summary .card__body, #viewIncome .income-card--summary.card--collapsed .card__body { padding: 12px 16px 14px; } #viewIncome .table-wrap { padding: 0 0 4px; } #viewIncome .fund-table tbody td { padding: 8px 10px; font-size:14px; } #viewIncome .fund-table tbody td:first-child, #viewIncome .fund-table tfoot td:first-child { padding-left: 12px; } #viewIncome .fund-table tbody td:last-child, #viewIncome .fund-table tfoot td:last-child { padding-right: 12px; } #viewIncome .ticker-link, #incomePnlTable .ticker-link { font:700 14px/1.35 var(--sans) !important; color: var(--accent-soft) !important; letter-spacing: .01em; } #viewIncome .td-ticker { white-space: nowrap; } #viewIncome .td-ticker .fund-kind, #viewIncome .td-ticker .fund-status { font-size:13px; line-height: 1.3; padding: 0 6px; margin-left: 8px; } #viewIncome .income-callout { margin: 12px 16px; } #viewIncome .pv-sum__hero { font-size:34px; } @media (max-width: 760px) { #viewIncome .pb-trk .pb-bars { padding: 14px 10px 10px; } #viewIncome .income-card > .card__header { padding: 6px 12px !important; } } #viewPortfolio :is(.pb-vchart__tip, .pb-vchart__x, .pb-vchart__hd)[hidden] { display: none; } /* the first-run panel as a pane too: a hairline outline on the page color, the filter bar's button shape */ #viewPortfolio .portfolio-empty { padding: 26px 28px !important; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)) !important; border-radius: var(--radius, 12px) !important; background: var(--bg) !important; } #viewPortfolio .portfolio-empty__actions .btn { height: 38px; padding: 0 16px !important; border-radius: 7px !important; font-size:14px !important; } #viewPortfolio .portfolio-empty__actions .btn--ghost { border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text-2) !important; } /* the one "Import your history" prompt, in "What it has made": the dashboard filter bar's button, on its own line end */ #viewPortfolio .pb-eqnote .pb-eqimport { height: 30px; margin-left: 4px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background-color: var(--surface-2); color: var(--text); font:600 13px/1 var(--sans); vertical-align: middle; box-shadow: none; } #viewPortfolio .pb-eqnote .pb-eqimport:hover { border-color: var(--border-hover); background-color: var(--surface-2); } /* ═══ Strict review, Sep 27 (W15 / W16 / W17): one toolbar, panes without boxes inside, no dead columns ═══════════ Appended last so it settles the older layers above and in cockpit.css / tradelog.css / report.css. */ /* ── One toolbar for Holdings, Trades and Income and returns: 32px pills, 13px, hairline edge; one amber action ── */ #viewPortfolio > .pb-actions .port-toolbar__actions :is(.port-upload-btn, .port-clear-btn, .port-more__btn, .broker-pill), #viewIncome > .pb-actions .port-toolbar__actions :is(.export-btn, .port-filter-select), #viewTradelog .tl .tl-bar :is(.pb-btn, .tl-btn), #viewTradelog .tl .tl-target, #viewTradelog .tl .tl-empty__cta .tl-btn { height: 32px; min-height: 32px; padding: 0 13px; gap: 7px; border: 1px solid var(--border); border-radius: 999px; background-color: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); box-shadow: none; filter: none; } #viewIncome > .pb-actions .port-toolbar__actions .port-filter-select { padding-right: 32px; } #viewPortfolio > .pb-actions .port-toolbar__actions :is(.port-upload-btn, .port-clear-btn, .port-more__btn, .broker-pill):hover, #viewIncome > .pb-actions .port-toolbar__actions .export-btn:hover, #viewTradelog .tl .tl-bar :is(.pb-btn, .tl-btn):hover, #viewTradelog .tl .tl-empty__cta .tl-btn:hover { border-color: var(--border-hover); background-color: var(--surface-3); color: var(--text); filter: none; } /* the one amber action: the Research "Analyze" button */ #viewPortfolio > .pb-actions .port-toolbar__actions .port-upload-btn.port-upload-btn--primary, #viewTradelog .tl .tl-bar :is(.pb-btn--primary, .tl-btn--primary), #viewTradelog .tl .tl-empty__cta .tl-btn--primary { border-color: transparent; background-color: #e0a82e; color: #1a1304; font-weight: 650; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); } #viewPortfolio > .pb-actions .port-toolbar__actions .port-upload-btn.port-upload-btn--primary:hover, #viewTradelog .tl .tl-bar :is(.pb-btn--primary, .tl-btn--primary):hover, #viewTradelog .tl .tl-empty__cta .tl-btn--primary:hover { border-color: transparent; background-color: #e0a82e; color: #1a1304; filter: brightness(1.06); } /* "Print statement" is a real alternative, not a second amber action beside Import */ #viewPortfolio > .pb-actions .port-toolbar__actions .port-upload-btn.rpt-btn, #viewPortfolio > .pb-actions .port-toolbar__actions .port-upload-btn.rpt-btn:hover { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-weight: 600; box-shadow: none; filter: none; } #viewPortfolio > .pb-actions .port-toolbar__actions .port-upload-btn.rpt-btn:hover { border-color: var(--border-hover); background: var(--surface-3); color: var(--text); } /* the Schwab and E*TRADE buttons: one pill each, a small logo mark then the name (final check W17: the wordmark was a second pill inside the pill) */ #viewPortfolio > .pb-actions .port-toolbar__actions .broker-pill { padding: 0 13px 0 9px; gap: 7px; } #viewPortfolio > .pb-actions .port-toolbar__actions .broker-pill__icon { width: auto; height: auto; } #viewPortfolio > .pb-actions .port-toolbar__actions .broker-pill__label { font-weight: 600; letter-spacing: 0; } #viewPortfolio > .pb-actions .port-toolbar__actions .broker-pill__status:empty { display: none; } #viewPortfolio > .pb-actions .port-toolbar__actions .broker-pill.is-connected { border-color: color-mix(in srgb, var(--green) 45%, transparent); box-shadow: none; } #viewTradelog .tl .tl-target .tl-target__in { height: 22px; border-bottom-width: 1px; } /* ── Holdings: plain rows instead of the two boxes inside panes ── */ #viewPortfolio .pb-vchart__start { padding: 2px 0 2px 14px; border-radius: 0; background: none; box-shadow: inset 1px 0 0 var(--pb-line); } #viewPortfolio .pb-eqpane .pb-eq__t, #viewPortfolio .pb-eq__t { padding: 0 0 0 14px; border-radius: 0; background: none; box-shadow: inset 1px 0 0 var(--pb-line); } /* Columns that can only say "—" until a broker history is imported (income received, double dips, net with income; profit taken until a sale is on record) are left off at every width, not just on a phone; the Columns menu says why. app.js sets .pb-noinc / .pb-nosales on the table. */ #viewPortfolio .pb-hold.pb-noinc :is(th, td).pb-c-income, #viewPortfolio .pb-hold.pb-noinc :is(th, td).pb-c-dips, #viewPortfolio .pb-hold.pb-noinc :is(th, td).pb-c-net, #viewPortfolio .pb-hold.pb-nosales :is(th, td).pb-c-profit { display: none; } #viewPortfolio:has(.pb-hold.pb-noinc) .pv-cols__opt:has(input:is([data-col="income"], [data-col="dips"], [data-col="net"])), #viewPortfolio:has(.pb-hold.pb-nosales) .pv-cols__opt:has(input[data-col="profit"]) { color: var(--text-2); } #viewPortfolio:has(.pb-hold.pb-noinc) .pv-cols__opt:has(input:is([data-col="income"], [data-col="dips"], [data-col="net"]))::after, #viewPortfolio:has(.pb-hold.pb-nosales) .pv-cols__opt:has(input[data-col="profit"])::after { content: "shows once your broker history is imported"; display: block; margin: 1px 0 0 24px; font:400 13px/1.35 var(--sans); color: var(--text-2); } #viewPortfolio:has(.pb-hold.pb-nosales) .pv-cols__opt:has(input[data-col="profit"])::after { content: "shows once a sale is on record"; } /* ── Trades: the first-run panel is a pane; the notices are lines, not floating cards ── */ #viewTradelog .tl .tl-empty { padding: 0; } #viewTradelog .tl .tl-empty__main { max-width: 760px; padding: 14px 16px 0; } #viewTradelog .tl .tl-empty__h { margin: 0 0 6px; font:600 16px/1.35 var(--sans); letter-spacing: 0; color: var(--text); } #viewTradelog .tl .tl-empty__p { margin: 0 0 14px; font:400 14px/1.55 var(--sans); color: var(--text-2); } #viewTradelog .tl .tl-empty__cta { gap: 8px; } #viewTradelog .tl .tl-strip { margin: 16px 0 0; padding: 12px 16px 14px; max-width: none; box-shadow: inset 0 1px 0 var(--pb-line); } #viewTradelog .tl .tl-strip li { font-size:14px; } #viewTradelog .tl .tl-strip b { width: 22px; height: 22px; font-size:13px; } #viewTradelog .tl .tl-srcline { padding: 0 2px; border: 0; border-radius: 0; background: none !important; box-shadow: none; } #viewTradelog .tl .tl-srcline li { padding: 4px 0; font-size:13px; } #viewTradelog .tl .tl-msg { padding: 2px 2px 2px 4px; border: 0; border-radius: 0; background: none; box-shadow: none; font-size:14px; color: var(--text-2); } /* ── Income and returns: every card in the pane chrome, money in the house colors, no scroll boxes ── */ /* the pane title's amber rule (cockpit.css hid every Income h2::before with !important) */ #viewIncome .income-card > .card__header h2::before { display: inline-block !important; } /* no collapse chevrons: the cards only changed the height of an inner scroll box, which is gone */ #viewIncome .income-card .collapse-arrow, #viewIncome #incomePnlHint { display: none; } #viewIncome .income-card > .card__header--toggle { cursor: default; } #viewIncome .income-card.card--collapsed > .card__header { border-bottom-color: var(--soft-line, rgba(255, 255, 255, .09)); } #viewIncome .income-card:not(#incomeAuditCard) .table-wrap { max-height: none !important; overflow-y: visible; } /* the count beside "Total return by fund" said "8 of 12" for the old preview height; every fund shows now */ #viewIncome #incomePnlCount { display: none; } /* received and coming money in white (the cyan was a color used nowhere else); bars in the tracker's green */ #viewIncome, #viewPortfolio, #viewTradelog { --pb-inc: var(--text); } body[data-theme="light"] :is(#viewIncome, #viewPortfolio, #viewTradelog) { --pb-inc: var(--text); } #viewIncome .mo-bar, #viewIncome .div-pct__bar { background: var(--pb-pos) !important; } /* the concentration note: a line under the bar, not a filled box inside the pane */ #viewIncome .income-callout { margin: 0; padding: 10px 12px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--pb-line); font:400 14px/1.5 var(--sans); color: var(--text-2); } /* Total return by fund fits its pane: heads may take two lines, figures keep one */ #viewIncome #incomePnlTable { width: 100%; } #viewIncome #incomePnlTable thead th { white-space: normal; vertical-align: bottom; padding-left: 8px; padding-right: 8px; } #viewIncome #incomePnlTable tbody td, #viewIncome #incomePnlTable tfoot td { padding-left: 8px; padding-right: 8px; white-space: nowrap; } #viewIncome #incomePnlTable :is(thead th, tbody td, tfoot td):first-child { padding-left: 12px; } #viewIncome #incomePnlTable :is(thead th, tbody td, tfoot td):last-child { padding-right: 12px; } /* the two side-by-side panes size to their own rows (Income by month left an empty band to match its neighbour) */ #viewIncome .income-grid { align-items: start; } #viewPortfolio .pv-cols__opt { flex-wrap: wrap; } #viewPortfolio .pv-cols__opt::after { flex: 1 0 100%; } /* phone: the toolbar was four rows of pills above the first figure; it is one row that scrolls sideways */ @media (max-width: 760px) { #viewPortfolio > .pb-actions > .port-toolbar__actions { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; } #viewPortfolio > .pb-actions > .port-toolbar__actions::-webkit-scrollbar { display: none; } #viewPortfolio > .pb-actions > .port-toolbar__actions > * { flex: 0 0 auto; } } /* ═══ Strict review 2 (P-A / P-L): Still holding leaves off Income while held and Total return when no purchase shown has a date to measure them from (tradelog.js sets .tl-noinc; the pane bar says why) ═══ */ #viewTradelog .tl-table--open.tl-noinc :is(th, td).tl-col-inc, #viewTradelog .tl-table--open.tl-noinc :is(th, td).tl-col-tr { display: none; } /* P-G: a special inside the next payment is said on its own line under the date, and may wrap rather than widen the table */ #viewPortfolio .pb-hold td.pb-c-next small + small { white-space: normal; } /* P-A: every lot row on one grid (breakdown.css sized the purchase rows by their content, so sales sat 2px off and, under 1280px, on another grid); these selectors outrank breakdown.css, which loads after this sheet */ #viewPortfolio .pb-hold .pb-lotg > .pb-lot, #viewPortfolio .pb-hold .pb-lotg > .pb-lot.pb-lot--x { grid-template-columns: 290px 230px 200px 170px minmax(0, 1fr); gap: 20px; padding: 8px 2px; } @media (max-width: 1280px) { #viewPortfolio .pb-hold .pb-lotg > .pb-lot, #viewPortfolio .pb-hold .pb-lotg > .pb-lot.pb-lot--x { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; } #viewPortfolio .pb-hold .pb-lotg > .pb-lot > .pb-cell--w { grid-column: 1 / -1; } #viewPortfolio .pb-hold .pb-lotg > .pb-lot > .pb-cell--w:empty { display: none; } } @media (max-width: 760px) { #viewPortfolio .pb-hold .pb-lotg > .pb-lot, #viewPortfolio .pb-hold .pb-lotg > .pb-lot.pb-lot--x { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 10px 0; } #viewPortfolio .pb-hold .pb-lotg > .pb-lot > .pb-cell:first-child { grid-column: 1 / -1; } } /* M6: "Where your income comes from" says each fund's whole name (it was cut to "BlackRock Science and…" at Large) */ #viewPortfolio .pb-leg__t small { white-space: normal; overflow: visible; text-overflow: clip; } /* ═══ Holdings, decluttered (Sep 28): the summary strip, What it has made, the Holdings table; "Where your income comes from" and the Breakdown folded until opened (panes.js). Every pane sits flush like the dashboard's — one 1px hairline, 12px apart — without the dashboard's lift (cockpit.css "Texture and depth" gives .cpane a drop shadow), and with no rounded boxes inside. ═══ */ #viewPortfolio .cpane.pb-pane { box-shadow: none; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px); background: var(--bg); } #viewPortfolio .pb-summary > .pb-pane + .pb-pane, #viewPortfolio .pb-pane.pb-holdings, #viewPortfolio .pb-pane.pb-inc, #viewPortfolio .pb-pane.bd { margin-top: 12px; } #viewPortfolio > .pb-actions { margin-bottom: 12px; } /* the summary strip: every figure on one aligned line, a hairline between them; the value line under it once there are two days on record */ #viewPortfolio .pb-hero > .pb-pane__in { padding: 0; } #viewPortfolio .pb-hero .pb-stats.pb-strip { display: grid; grid-template-columns: minmax(0, 1.75fr) repeat(6, minmax(0, 1fr)); gap: 14px 0; align-items: start; margin: 0; padding: 13px 0 14px; box-shadow: none; overflow: hidden; } #viewPortfolio .pb-strip > .pb-cell { min-width: 0; padding: 0 16px; box-shadow: -1px 0 0 var(--pb-line); } #viewPortfolio .pb-strip > .pb-cell > em { margin-bottom: 3px; white-space: nowrap; } #viewPortfolio .pb-hero .pb-strip > .pb-cell > b { display: flex; align-items: flex-end; min-height: 30px; font-size:17px; line-height: 1.25; } #viewPortfolio .pb-hero .pb-strip > .pb-cell--worth > b.pb-big { margin: 0; font-size:26px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; } #viewPortfolio .pb-strip > .pb-cell > small { margin-top: 2px; font-size:13px; white-space: normal; } #viewPortfolio .pb-hero .pb-vchart { max-width: none; margin: 0; padding: 11px 16px 12px; box-shadow: inset 0 1px 0 var(--pb-line); } #viewPortfolio .pb-hero .pb-vchart__plot { height: 64px; border-radius: 0; } @media (max-width: 1280px) { #viewPortfolio .pb-hero .pb-stats.pb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .pb-hero .pb-stats.pb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { #viewPortfolio .pb-hero .pb-stats.pb-strip, body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .pb-hero .pb-stats.pb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; } #viewPortfolio .pb-strip > .pb-cell--worth { grid-column: 1 / -1; } #viewPortfolio .pb-strip > .pb-cell { padding: 0 12px; } #viewPortfolio .pb-hero .pb-vchart { padding: 10px 12px; } } /* What it has made: the equation on the page color, no box around the net */ #viewPortfolio .pb-eqpane .pb-eq { padding: 11px 16px 12px; } /* the income list: rows on hairlines, not rounded highlights */ #viewPortfolio .pb-inc .pb-leg li { margin: 0; padding: 4px 0; border-radius: 0; } #viewPortfolio .pb-inc .pb-leg li.is-on, #viewPortfolio .pb-inc .pb-leg li:focus-visible { background: color-mix(in srgb, var(--pb-ink) 5%, transparent); } /* ═══ Holdings, design B (Sep 28 2026) ═══════════════════════════════════════════════════════════ The owner's pick from the board (scratchpad portfolio-mock/b.html): pure black, 1px hairlines, Inter, a 64px value over an amber area chart, the Summary beside it, a roomy holdings list and three cards. Everything is scoped to #viewPortfolio and uses the px- prefix; the older pb- rules above still style the row that opens under a fund, the Columns menu and the Trades / Income views. */ #viewPortfolio { --px-bg: var(--bg, #0a0a0b); --px-line: #1c1d21; --px-line2: #26272c; --px-line3: #33343a; --px-text: #f5f5f4; --px-sub: #a8a8ae; --px-mute: #8e8e95; --px-cents: #6f6f76; --px-up: #3ddc84; --px-up-bg: rgba(61, 220, 132, .10); --px-up-line: rgba(61, 220, 132, .28); --px-down: #ff6b5e; --px-down-bg: rgba(255, 107, 94, .10); --px-amber: #e0a82e; --px-amber2: #f5c451; --px-amber-bg: rgba(224, 168, 46, .12); --px-amber-ink: #17120a; --px-font: 'Inter', var(--sans); --px-c1: #e0a82e; --px-c2: #38bdf8; --px-c3: #a78bfa; --px-c4: #f0abfc; --px-c5: #d4d4d8; --px-c6: #5eead4; --px-c7: #71717a; --px-c8: #fb923c; --px-cx: #52525b; --px-l1: #7dd3fc; --px-l2: #93c5fd; --px-l3: #a5b4fc; --px-l4: #c4b5fd; --px-l5: #f0abfc; --px-l6: #fdba74; --px-l7: #fb923c; --px-l0: #d4d4d8; font-family: var(--px-font); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; } body[data-theme="light"] #viewPortfolio { --px-line: rgba(58, 48, 30, .10); --px-line2: rgba(58, 48, 30, .15); --px-line3: rgba(58, 48, 30, .24); --px-text: #1f2126; --px-sub: #474b55; --px-mute: #595e69; --px-cents: #8a8d95; --px-up: #0e6545; --px-up-bg: rgba(14, 101, 69, .09); --px-up-line: rgba(14, 101, 69, .30); --px-down: #a3302a; --px-down-bg: rgba(163, 48, 42, .08); --px-amber: #e0a82e; --px-amber2: #7f5400; --px-amber-bg: rgba(154, 107, 0, .10); --px-c1: #c98f14; --px-c2: #0284c7; --px-c3: #7c3aed; --px-c4: #c026d3; --px-c5: #71717a; --px-c6: #0d9488; --px-c7: #a1a1aa; --px-c8: #ea580c; --px-cx: #d4d4d8; --px-l1: #075985; --px-l2: #1e40af; --px-l3: #4338ca; --px-l4: #5b21b6; --px-l5: #86198f; --px-l6: #9a3412; --px-l7: #991b1b; --px-l0: #52525b; /* light: level pills ≥4.5:1 on their tint */ } #viewPortfolio .px-up { color: var(--px-up) !important; } #viewPortfolio .px-down { color: var(--px-down) !important; } #viewPortfolio .px-mute { color: var(--px-mute) !important; } #viewPortfolio .pb-pos { color: var(--px-up) !important; } #viewPortfolio .pb-neg { color: var(--px-down) !important; } #viewPortfolio .pb-fig { font-family: var(--px-font); letter-spacing: 0; font-variant-numeric: tabular-nums; } #viewPortfolio .px-i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* buttons and chips */ #viewPortfolio .px-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--px-line2); border-radius: 19px; background: transparent; color: var(--px-text); font:500 14px/1 var(--px-font); white-space: nowrap; cursor: pointer; box-shadow: none; list-style: none; transition: border-color .15s ease, background-color .15s ease; } #viewPortfolio .px-btn::-webkit-details-marker { display: none; } #viewPortfolio .px-btn .px-i { color: var(--px-sub); } #viewPortfolio .px-btn:hover { border-color: var(--px-line3); background: color-mix(in srgb, var(--px-text) 4%, transparent); } #viewPortfolio .px-btn:focus-visible, #viewPortfolio .px-chip:focus-visible, #viewPortfolio .px-per:focus-visible, #viewPortfolio .px-seg button:focus-visible, #viewPortfolio .px-pt:focus-visible, #viewPortfolio .px-av:focus-visible, #viewPortfolio .px-ch:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; } #viewPortfolio .px-btn--primary, #viewPortfolio .px-btn--primary:hover { background: var(--px-amber); border-color: var(--px-amber); color: var(--px-amber-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); } #viewPortfolio .px-btn--primary:hover { filter: brightness(1.06); } #viewPortfolio .px-btn--primary .px-i { color: var(--px-amber-ink); } #viewPortfolio .px-btn--sm { height: 32px; padding: 0 13px; font-size:13.5px; } #viewPortfolio .px-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--px-line2); border-radius: 16px; background: transparent; color: var(--px-sub); font:500 13.5px/1 var(--px-font); cursor: pointer; white-space: nowrap; } #viewPortfolio .px-chip:hover:not(:disabled) { color: var(--px-text); border-color: var(--px-line3); } #viewPortfolio .px-chip.is-on { color: var(--px-text); border-color: var(--px-text); } #viewPortfolio .px-chip:disabled { opacity: .45; cursor: default; } #viewPortfolio .px-chip .px-i { width: 15px; height: 15px; } /* the page's header row: Portfolio · Holdings · Trades · actions */ #viewPortfolio > .px-head { display: block; margin: -6px 0 0; padding: 0; border: 0; background: none; box-shadow: none; } #viewPortfolio .px-head__row { display: flex; align-items: center; gap: 14px 26px; min-height: 64px; margin: 0 0 4px; border-bottom: 1px solid var(--px-line); flex-wrap: wrap; } #viewPortfolio .px-head__name { margin: 0; font:600 22px/1.2 var(--px-font); letter-spacing: -.025em; color: var(--px-text); text-transform: none; } #viewPortfolio .px-head__name::before, #viewPortfolio .px-head__name::after { display: none; } #viewPortfolio .px-head__tabs { align-self: stretch; display: flex; } #viewPortfolio .px-head__tabs .subnav { display: flex; gap: 24px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } #viewPortfolio .px-head__tabs .subnav__tab { position: relative; display: flex; align-items: center; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--px-sub); font:500 15px/1 var(--px-font); cursor: pointer; } #viewPortfolio .px-head__tabs .subnav__tab:hover { color: var(--px-text); } #viewPortfolio .px-head__tabs .subnav__tab.is-active { color: var(--px-text); } #viewPortfolio .px-head__tabs .subnav__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--px-amber); } #viewPortfolio .px-head__tabs .subnav__tab:focus-visible { outline: 2px solid var(--px-amber); outline-offset: -2px; } #viewPortfolio .px-head__acts { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto !important; flex: 0 1 auto !important; flex-wrap: wrap; justify-content: flex-end; } #viewPortfolio .px-more { position: relative; } #viewPortfolio .px-more > summary { cursor: pointer; } #viewPortfolio .px-more[open] > summary { border-color: var(--px-line3); } #viewPortfolio .px-more__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: flex; flex-direction: column; gap: 2px; width: 300px; padding: 8px; border: 1px solid var(--px-line2); border-radius: 14px; background: var(--px-bg); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); } body[data-theme="light"] #viewPortfolio .px-more__menu { background: var(--surface, #f7f5f0); box-shadow: 0 18px 44px rgba(58, 48, 30, .16); } #viewPortfolio .px-more__h { margin: 8px 8px 4px; font:500 13px/1.3 var(--px-font); color: var(--px-mute); } #viewPortfolio .px-more__menu .port-more__item { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--px-text); font:500 14px/1.3 var(--px-font); text-align: left; cursor: pointer; } #viewPortfolio .px-more__menu .port-more__item:hover { background: color-mix(in srgb, var(--px-text) 6%, transparent); } #viewPortfolio .px-more__brokers { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 8px; } #viewPortfolio .px-more__brokers .broker-pill { height: 34px; padding: 0 13px 0 9px; border: 1px solid var(--px-line2); border-radius: 17px; background: transparent; color: var(--px-text); font:600 13.5px/1 var(--px-font); } #viewPortfolio .px-more__brokers .broker-pill.is-connected { border-color: var(--px-up-line); } #viewPortfolio .px-more__brokers .broker-pill__status:empty { display: none; } #viewPortfolio .px-more__clear { color: var(--px-down) !important; margin-top: 4px; border-top: 1px solid var(--px-line) !important; border-radius: 0 0 9px 9px !important; } #viewPortfolio > .px-head > :not(.px-head__row) { margin-top: 10px; } /* the hero: the value and its chart, the Summary beside it */ #viewPortfolio .px-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; padding: 26px 0 8px; } #viewPortfolio .px-hero__main { min-width: 0; } #viewPortfolio .px-eyebrow { display: flex; align-items: center; gap: 8px; font:500 14px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-pill { padding: 1px 8px; border: 1px solid var(--px-line2); border-radius: 10px; font-size:13px; font-weight: 500; color: var(--px-sub); white-space: nowrap; } #viewPortfolio .px-big { margin-top: 10px; font:600 64px/1 var(--px-font); letter-spacing: -.045em; color: var(--px-text); font-variant-numeric: tabular-nums; } #viewPortfolio .px-cents { color: var(--px-cents); } #viewPortfolio .px-delta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 12px; font:500 15px/1.3 var(--px-font); } #viewPortfolio .px-delta__i { display: inline-flex; align-items: baseline; gap: 18px; } #viewPortfolio .px-delta__i i { font-style: normal; font-size:13px; } #viewPortfolio .px-delta__k { color: var(--px-sub); font-weight: 400; } #viewPortfolio .px-flat { color: var(--px-sub); } #viewPortfolio .px-chart { position: relative; margin-top: 14px; } #viewPortfolio .px-chart::before { content: ""; position: absolute; left: 10%; right: 10%; top: 20%; bottom: 0; background: radial-gradient(closest-side, rgba(224, 168, 46, .07), transparent); pointer-events: none; } body[data-theme="light"] #viewPortfolio .px-chart::before { display: none; } #viewPortfolio .px-chart__cap { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; max-width: calc(100% - 250px); font:400 13px/1.35 var(--px-font); color: var(--px-mute); pointer-events: none; } #viewPortfolio .px-chart__plot { position: relative; min-height: 210px; } #viewPortfolio .px-chart__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font:400 14px/1.4 var(--px-font); color: var(--px-sub); border-bottom: 1px solid var(--px-line); } #viewPortfolio .px-chart__wait .pb-skel { margin: 0; height: 10px; } #viewPortfolio .px-chart__wait.is-empty { padding: 0 24px; text-align: center; } #viewPortfolio .px-ch { position: relative; outline: none; cursor: crosshair; } #viewPortfolio .px-ch svg { display: block; overflow: visible; } #viewPortfolio .px-ch__grid { stroke: var(--px-line); stroke-width: 1; } body:not([data-theme="light"]) #viewPortfolio .px-ch__grid { stroke: #1a1b1e; } #viewPortfolio .px-ch__ax { fill: var(--px-mute); font:400 13px var(--px-font); } #viewPortfolio .px-ch__base { stroke: var(--px-line2); } #viewPortfolio .px-ch__paid { stroke: var(--px-mute); stroke-width: 1.2; stroke-dasharray: 4 5; } #viewPortfolio .px-ch__chip { fill: var(--px-bg); stroke: var(--px-cents); } #viewPortfolio .px-ch__chipt { fill: var(--px-text); font:600 13px var(--px-font); } #viewPortfolio .px-ch__paidl { fill: var(--px-sub); font:400 13px var(--px-font); paint-order: stroke; stroke: var(--px-bg); stroke-width: 5px; stroke-linejoin: round; } #viewPortfolio .px-ch__paidl tspan { fill: var(--px-text); font-weight: 600; } #viewPortfolio .px-ch__g0 { stop-color: var(--px-amber); stop-opacity: .30; } #viewPortfolio .px-ch__g1 { stop-color: var(--px-amber); stop-opacity: .06; } #viewPortfolio .px-ch__g2 { stop-color: var(--px-amber); stop-opacity: 0; } body[data-theme="light"] #viewPortfolio .px-ch__g0 { stop-opacity: .26; } #viewPortfolio .px-ch__line { fill: none; stroke: var(--px-amber); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } body[data-theme="light"] #viewPortfolio .px-ch__line { stroke: #c98f14; } #viewPortfolio .px-ch__x { stroke: #55565c; stroke-dasharray: 2 3; } #viewPortfolio .px-ch__glow { fill: var(--px-amber); opacity: .35; } #viewPortfolio .px-ch__dot { fill: var(--px-amber); stroke: var(--px-bg); stroke-width: 2; } #viewPortfolio .px-ch__inc { fill: var(--px-bg); stroke: var(--px-up); stroke-width: 2; } #viewPortfolio .px-ch__bar { fill: var(--px-up); fill-opacity: .8; } #viewPortfolio .px-ch__bar.is-est { fill-opacity: .35; stroke: var(--px-up); stroke-width: 1.2; stroke-dasharray: 3 3; } #viewPortfolio .px-ch__tip { position: absolute; top: -6px; left: 0; z-index: 3; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 7px 11px; border: 1px solid #45464c; border-radius: 10px; background: var(--px-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font:400 13px/1.2 var(--px-font); color: var(--px-sub); pointer-events: none; } #viewPortfolio .px-ch__tip b { font-weight: 600; color: var(--px-text); } #viewPortfolio .px-ch__tip em { font-style: normal; font-weight: 500; } #viewPortfolio .px-ch__tip.is-static { left: auto; top: 2px; } body[data-theme="light"] #viewPortfolio .px-ch__tip { border-color: var(--px-line3); background: #fbfaf6; box-shadow: 0 10px 30px rgba(58, 48, 30, .14); } body[data-theme="light"] #viewPortfolio .px-ch__x { stroke: #8a8d95; } #viewPortfolio .px-periods { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--px-line); } #viewPortfolio .px-periods__l { display: flex; gap: 4px; } #viewPortfolio .px-per { padding: 6px 12px; border: 0; border-radius: 14px; background: none; color: var(--px-sub); font:600 14px/1.2 var(--px-font); cursor: pointer; } #viewPortfolio .px-per:hover { color: var(--px-text); } #viewPortfolio .px-per.is-on { background: var(--px-amber); color: var(--px-amber-ink); } #viewPortfolio .px-periods__r { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font:500 13.5px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-periods__r > span { display: inline-flex; align-items: center; } #viewPortfolio .px-periods__r > span[hidden] { display: none; } #viewPortfolio .px-lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; } #viewPortfolio .px-lg--val { background: var(--px-amber); } #viewPortfolio .px-lg--paid { border: 1.5px dashed var(--px-mute); } #viewPortfolio .px-lg--inc { background: var(--px-up); } #viewPortfolio .px-seg { display: flex; padding: 2px; border: 1px solid var(--px-line2); border-radius: 16px; } #viewPortfolio .px-seg button { padding: 3px 11px; border: 0; border-radius: 12px; background: none; color: var(--px-sub); font:500 13.5px/1.3 var(--px-font); cursor: pointer; } #viewPortfolio .px-seg button.is-on { color: var(--px-text); box-shadow: inset 0 0 0 1px #55565c; } body[data-theme="light"] #viewPortfolio .px-seg button.is-on { box-shadow: inset 0 0 0 1px var(--px-line3); background: #fff; } /* cards: the Summary and the three under the list */ #viewPortfolio .px-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border: 1px solid var(--px-line2); border-radius: 18px; background: transparent; } body[data-theme="light"] #viewPortfolio .px-card { background: var(--surface, #f7f5f0); } #viewPortfolio .px-sum { align-self: start; padding: 18px 20px 10px; } #viewPortfolio .px-sum__h, #viewPortfolio .px-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font:600 17px/1.3 var(--px-font); letter-spacing: -.015em; color: var(--px-text); text-transform: none; } #viewPortfolio .px-sum__h::before, #viewPortfolio .px-card__h::before { display: none; } #viewPortfolio .px-sum__h small, #viewPortfolio .px-card__h small { font-size:13px; font-weight: 400; color: var(--px-mute); letter-spacing: 0; white-space: nowrap; } #viewPortfolio .px-card__sub { margin: 4px 0 0; font:400 13.5px/1.4 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-card__sub b { font-weight: 600; } #viewPortfolio .px-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--px-line); } #viewPortfolio .px-kv.is-last { border-bottom: 0; padding-bottom: 6px; } #viewPortfolio .px-kv__k { font:400 14px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-kv__v { text-align: right; } #viewPortfolio .px-kv__v b { display: block; font:500 16px/1.3 var(--px-font); color: var(--px-text); font-variant-numeric: tabular-nums; } #viewPortfolio .px-kv__v small { display: block; margin-top: 3px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-kv__v .pb-link { font-size:14px; } #viewPortfolio .px-kv.is-hl { margin: 4px -10px; padding: 12px 10px; border: 1px solid var(--px-up-line); border-radius: 12px; } #viewPortfolio .px-kv.is-hl .px-kv__k { color: var(--px-text); } #viewPortfolio .px-kv__big { font-size:18px !important; } #viewPortfolio .px-cashbar { display: flex; height: 6px; margin: 4px 0 12px; border-radius: 4px; background: var(--px-line2); overflow: hidden; } #viewPortfolio .px-cashbar i { display: block; height: 100%; } #viewPortfolio .px-cashbar__inv { background: var(--px-amber); } #viewPortfolio .px-cashbar__cash { background: var(--px-cents); } #viewPortfolio .px-cashleg { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-cashleg b { font-weight: 500; color: var(--px-amber2); } /* the holdings list */ #viewPortfolio .px-sec { padding: 22px 0 0; } #viewPortfolio .px-sechead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } #viewPortfolio .px-sechead h2 { margin: 0; font:600 20px/1.3 var(--px-font); letter-spacing: -.02em; color: var(--px-text); text-transform: none; } #viewPortfolio .px-sechead h2::before { display: none; } #viewPortfolio .px-sechead__n { font:400 14px/1.3 var(--px-font); color: var(--px-mute); } #viewPortfolio .px-sechead__r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #viewPortfolio .px-kinds { display: flex; gap: 8px; } #viewPortfolio .px-selwrap { position: relative; display: inline-flex; align-items: center; } #viewPortfolio .px-select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: none; } #viewPortfolio .px-selwrap > .px-i { position: absolute; right: 12px; width: 15px; height: 15px; color: var(--px-sub); pointer-events: none; } #viewPortfolio .px-select option { background: var(--px-bg); color: var(--px-text); } #viewPortfolio .px-sec .pv-cols { position: relative; } #viewPortfolio .px-sec .pv-cols__btn { min-height: 0; } #viewPortfolio .px-sec .pv-cols__menu { right: 0; left: auto; background: var(--px-bg); border: 1px solid var(--px-line2); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); } body[data-theme="light"] #viewPortfolio .px-sec .pv-cols__menu { background: var(--surface, #f7f5f0); box-shadow: 0 18px 44px rgba(58, 48, 30, .16); } #viewPortfolio .px-scroll { margin: 0; padding: 0; } #viewPortfolio .pb-hold.px-tbl { border-collapse: collapse; font-family: var(--px-font); } #viewPortfolio .pb-hold.px-tbl th { position: static; padding: 12px 10px; background: none; box-shadow: none; border-bottom: 1px solid var(--px-line); font:500 13.5px/1.3 var(--px-font); letter-spacing: 0; text-transform: none; color: var(--px-mute); text-align: right; white-space: nowrap; vertical-align: bottom; } #viewPortfolio .pb-hold.px-tbl th.pb-fundh, #viewPortfolio .pb-hold.px-tbl th.px-l { text-align: left; padding-left: 0; } #viewPortfolio .pb-hold.px-tbl th.px-l { padding-left: 10px; } #viewPortfolio .pb-hold.px-tbl th:last-child, #viewPortfolio .pb-hold.px-tbl td:last-child { padding-right: 0; } #viewPortfolio .pb-hold.px-tbl th.pb-h { min-width: 0; } #viewPortfolio .pb-hold.px-tbl th:is(.is-asc, .is-desc) { color: var(--px-text); } #viewPortfolio .pb-hold.px-tbl th button:not(.gq):hover, #viewPortfolio .pb-hold.px-tbl th:is(.is-asc, .is-desc) button:not(.gq) { color: var(--px-text); } #viewPortfolio .pb-hold.px-tbl th.is-desc button:not(.gq)::before, #viewPortfolio .pb-hold.px-tbl th.is-asc button:not(.gq)::before { content: none; } #viewPortfolio .pb-hold.px-tbl th.is-desc button:not(.gq)::after { content: " ↓"; } #viewPortfolio .pb-hold.px-tbl th.is-asc button:not(.gq)::after { content: " ↑"; } #viewPortfolio .pb-hold.px-tbl th > .gq { opacity: .55; width: 15px; height: 15px; min-width: 15px; min-height: 15px; font-size:13px; margin-left: 4px; vertical-align: -2px; } #viewPortfolio .pb-hold.px-tbl th > .gq:hover, #viewPortfolio .pb-hold.px-tbl th > .gq:focus-visible { opacity: 1; } #viewPortfolio .pb-hold.px-tbl td { padding: 11px 10px; vertical-align: middle; box-shadow: none; border-bottom: 1px solid var(--px-line); background: none; } #viewPortfolio .pb-hold.px-tbl td:first-child { padding-left: 0; } #viewPortfolio .pb-hold.px-tbl td b { font:500 15px/1.3 var(--px-font); letter-spacing: 0; color: var(--px-text); } #viewPortfolio .pb-hold.px-tbl td b.px-strong { font-weight: 600; } #viewPortfolio .pb-hold.px-tbl td small { margin-top: 3px; font:400 13px/1.3 var(--px-font); letter-spacing: 0; color: var(--px-sub); } #viewPortfolio .pb-hold.px-tbl td.pb-c-risk, #viewPortfolio .pb-hold.px-tbl th.pb-c-risk { text-align: center; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g:hover > tr.pb-r1 > td { background: color-mix(in srgb, var(--px-text) 3%, transparent); } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr > td { background: color-mix(in srgb, var(--px-text) 2.5%, transparent); } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr.pb-r1 > td { border-bottom-color: transparent; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr.pb-r1 > td:first-child, #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr.pb-lots > td { box-shadow: inset 2px 0 0 var(--px-amber); } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr.pb-r1 > td:first-child { padding-left: 10px; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g > tr.pb-lots > td { border-bottom: 0; padding: 0 12px 0 64px !important; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr.pb-lots > td { border-bottom: 1px solid var(--px-line); padding-bottom: 16px !important; } #viewPortfolio .pb-hold.px-tbl .pb-xc em, #viewPortfolio .pb-hold.px-tbl .pb-lotsh { font:500 13px/1.3 var(--px-font); letter-spacing: 0; text-transform: none; color: var(--px-mute); } #viewPortfolio .pb-hold.px-tbl .pb-xc b { font-size:15px; } #viewPortfolio .pb-hold.px-tbl .pb-lot .pb-cell em { color: var(--px-mute); } #viewPortfolio .pb-hold.px-tbl .pb-lot .pb-cell b { font:500 15px/1.3 var(--px-font); } #viewPortfolio .pb-hold.px-tbl .pb-lot .pb-cell small { font-size:13px; color: var(--px-sub); } /* the fund: round mark (it is also the button that opens the row), ticker, kind, name */ #viewPortfolio .px-fund { display: flex; align-items: center; gap: 13px; } #viewPortfolio .px-av { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; color: #fff; font:700 13px/1 var(--px-font); letter-spacing: -.02em; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } #viewPortfolio .px-av:hover { background-blend-mode: normal; filter: brightness(1.08); } #viewPortfolio .px-av .px-av__chev { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--px-bg); color: var(--px-sub); box-shadow: 0 0 0 1px var(--px-line3); opacity: 0; transition: opacity .15s ease, transform .2s ease; } #viewPortfolio tbody.pb-g:hover .px-av__chev, #viewPortfolio .px-av:focus-visible .px-av__chev, #viewPortfolio .px-av[aria-expanded="true"] .px-av__chev { opacity: 1; } #viewPortfolio .px-av[aria-expanded="true"] .px-av__chev { transform: rotate(90deg); color: var(--px-amber); } #viewPortfolio .px-av[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--px-bg), 0 0 0 3.5px var(--px-amber); } #viewPortfolio .px-fund .pb-tkl { display: flex; align-items: center; gap: 8px; } #viewPortfolio .pb-hold.px-tbl .ticker-link.pb-tk { font:600 15px/1.3 var(--px-font); letter-spacing: 0; color: var(--px-text); } #viewPortfolio .pb-hold.px-tbl .ticker-link.pb-tk:hover { text-decoration: underline; text-underline-offset: 3px; } #viewPortfolio .px-kind { padding: 0 6px; border: 1px solid var(--px-line3); border-radius: 6px; font:500 13px/18px var(--px-font); color: var(--px-sub); } #viewPortfolio .pb-hold.px-tbl .fund-status { margin-left: 0; font-size:13px; } #viewPortfolio .pb-hold.px-tbl .pb-nm { max-width: 240px; margin-top: 3px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-sparkc { width: 124px; } #viewPortfolio .pb-hold.px-tbl td.px-sparkc { text-align: left; padding-top: 6px; padding-bottom: 6px; } #viewPortfolio .px-spark { display: block; width: 112px; height: 34px; } #viewPortfolio .px-spark__svg { display: block; } #viewPortfolio .px-spark__svg line { stroke: var(--px-line3); stroke-dasharray: 2 3; } #viewPortfolio .px-spark__svg path { fill: none; stroke-width: 1.6; stroke-linejoin: round; } #viewPortfolio .px-spark__svg.is-up path { stroke: var(--px-up); } #viewPortfolio .px-spark__svg.is-down path { stroke: var(--px-down); } #viewPortfolio .px-spark__svg.is-flat path { stroke: var(--px-sub); } #viewPortfolio .px-spark__wait { display: block; width: 100%; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--px-line2); } #viewPortfolio .px-badge { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; font:500 13px/1.35 var(--px-font); } #viewPortfolio .px-badge--up { color: var(--px-up); background: var(--px-up-bg); } #viewPortfolio .px-badge--down { color: var(--px-down); background: var(--px-down-bg); } #viewPortfolio .px-badge--flat { color: var(--px-sub); box-shadow: inset 0 0 0 1px var(--px-line2); } #viewPortfolio .px-special { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; background: var(--px-amber-bg); color: var(--px-amber2); font:500 13px/1.35 var(--px-font); white-space: nowrap; } #viewPortfolio .px-lv { display: inline-block; min-width: 40px; padding: 2px 8px; border: 1px solid; border-radius: 7px; font:600 13px/1.3 var(--px-font); text-align: center; } #viewPortfolio .px-lv--1 { color: var(--px-l1); border-color: color-mix(in srgb, var(--px-l1) 34%, transparent); background: color-mix(in srgb, var(--px-l1) 8%, transparent); } #viewPortfolio .px-lv--2 { color: var(--px-l2); border-color: color-mix(in srgb, var(--px-l2) 34%, transparent); background: color-mix(in srgb, var(--px-l2) 8%, transparent); } #viewPortfolio .px-lv--3 { color: var(--px-l3); border-color: color-mix(in srgb, var(--px-l3) 34%, transparent); background: color-mix(in srgb, var(--px-l3) 8%, transparent); } #viewPortfolio .px-lv--4 { color: var(--px-l4); border-color: color-mix(in srgb, var(--px-l4) 34%, transparent); background: color-mix(in srgb, var(--px-l4) 8%, transparent); } #viewPortfolio .px-lv--5 { color: var(--px-l5); border-color: color-mix(in srgb, var(--px-l5) 34%, transparent); background: color-mix(in srgb, var(--px-l5) 8%, transparent); } #viewPortfolio .px-lv--6 { color: var(--px-l6); border-color: color-mix(in srgb, var(--px-l6) 34%, transparent); background: color-mix(in srgb, var(--px-l6) 8%, transparent); } #viewPortfolio .px-lv--7 { color: var(--px-l7); border-color: color-mix(in srgb, var(--px-l7) 34%, transparent); background: color-mix(in srgb, var(--px-l7) 8%, transparent); } #viewPortfolio .px-lv--0 { color: var(--px-l0); border-color: color-mix(in srgb, var(--px-l0) 34%, transparent); background: color-mix(in srgb, var(--px-l0) 8%, transparent); } #viewPortfolio .px-pt { padding: 0 0 1px; border: 0; border-bottom: 1px dashed var(--px-line3); border-radius: 0; background: none; color: var(--px-sub); font:400 13.5px/1.3 var(--px-font); cursor: pointer; } #viewPortfolio .px-pt:hover { color: var(--px-text); border-bottom-color: var(--px-sub); } #viewPortfolio .px-pt.is-set { color: var(--px-text); font-weight: 600; font-size:15px; } #viewPortfolio .pb-hold.px-tbl tfoot td { padding-top: 12px; padding-bottom: 12px; border-bottom: 0; box-shadow: none; } #viewPortfolio .pb-hold.px-tbl tfoot .pb-tk--t { font:600 15px/1.3 var(--px-font); color: var(--px-text); } #viewPortfolio .pb-hold.px-tbl tfoot .pb-exp--none { display: none; } #viewPortfolio .pb-hold.px-tbl tfoot .pb-tok { padding-left: 51px; } #viewPortfolio .px-sec .pb-note { margin: 12px 0 0; padding: 0; box-shadow: none; font:400 13px/1.5 var(--px-font); color: var(--px-mute); } /* the three cards */ #viewPortfolio .px-cards { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 16px; padding: 26px 0 8px; } #viewPortfolio .px-cards > .px-card { margin: 0; } #viewPortfolio .px-wf { display: flex; flex-direction: column; flex: 1; } #viewPortfolio .px-wf__plot { margin-top: 14px; } #viewPortfolio .px-wf__plot svg { display: block; overflow: visible; } #viewPortfolio .px-wf__zero { stroke: var(--px-line3); } #viewPortfolio .px-wf__ax { fill: var(--px-mute); font:400 13px var(--px-font); } #viewPortfolio .px-wf__bar { stroke-width: 1.4; } #viewPortfolio .px-wf__bar.is-up { fill: var(--px-up); fill-opacity: .18; stroke: var(--px-up); } #viewPortfolio .px-wf__bar.is-down { fill: var(--px-down); fill-opacity: .18; stroke: var(--px-down); } #viewPortfolio .px-wf__bar.is-net { fill-opacity: .95; } #viewPortfolio .px-wf__v { font:600 14px var(--px-font); } #viewPortfolio .px-wf__v.is-up { fill: var(--px-up); } #viewPortfolio .px-wf__v.is-down { fill: var(--px-down); } #viewPortfolio .px-wf__v--none { fill: var(--px-mute); font-weight: 500; } #viewPortfolio .px-wf__none { fill: var(--px-line3); } #viewPortfolio .px-wf__link { stroke: var(--px-cents); stroke-dasharray: 2 3; } #viewPortfolio .px-wf__keys { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; font:400 13px/1.25 var(--px-font); color: var(--px-sub); text-align: center; } #viewPortfolio .px-cover { display: flex; align-items: center; gap: 12px; margin-top: 16px; font:400 13px/1.35 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-cover b { color: var(--px-text); font-weight: 600; } #viewPortfolio .px-cover__bar { flex: none; width: 90px; height: 6px; border-radius: 4px; background: var(--px-down-bg); box-shadow: inset 0 0 0 1px rgba(255, 107, 94, .35); overflow: hidden; } #viewPortfolio .px-cover__bar i { display: block; height: 100%; background: var(--px-up); } #viewPortfolio .px-dd { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--px-line2); border-radius: 12px; } #viewPortfolio .px-dd__n { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--px-amber-bg); color: var(--px-amber2); font:700 15px/1 var(--px-font); } #viewPortfolio .px-dd b { display: block; font:500 14px/1.3 var(--px-font); color: var(--px-text); } #viewPortfolio .px-dd small { display: block; font:400 13px/1.35 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-wf__note { margin: 12px 0 0; font:400 13px/1.5 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-wf__note .pb-eqimport { margin-left: 6px; vertical-align: middle; } #viewPortfolio .px-inc__body { display: flex; flex-direction: column; flex: 1; } #viewPortfolio .px-inc__wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: center; margin: 16px 0; } #viewPortfolio .px-donut { position: relative; width: 170px; height: 170px; } #viewPortfolio .px-donut .pb-donut__svg { width: 170px; height: 170px; } #viewPortfolio .px-donut__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } #viewPortfolio .px-donut__c b { font:600 20px/1.2 var(--px-font); letter-spacing: -.02em; color: var(--px-text); } #viewPortfolio .px-donut__c span { font:400 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-inc .pb-donut.is-hl .pb-arc:not(.is-on) { opacity: .28; } #viewPortfolio .px-inc .pb-donut .pb-arc.is-on { stroke-width: 19; } #viewPortfolio .px-leg { display: flex; flex-direction: column; gap: 6px; max-width: none; margin: 0; padding: 0; list-style: none; } #viewPortfolio .px-leg li { display: grid; grid-template-columns: 8px 44px minmax(30px, 1fr) 72px 50px; align-items: center; gap: 8px; margin: 0; padding: 1px 4px; border-radius: 6px; font:400 14px/1.3 var(--px-font); outline: none; } #viewPortfolio .px-leg li.is-on, #viewPortfolio .px-leg li:focus-visible { background: color-mix(in srgb, var(--px-text) 5%, transparent); } #viewPortfolio .px-leg li > i { width: 8px; height: 8px; border-radius: 50%; } #viewPortfolio .px-leg li > b { font-weight: 600; color: var(--px-text); } #viewPortfolio .px-leg__tr { height: 5px; border-radius: 3px; background: var(--px-line2); overflow: hidden; } #viewPortfolio .px-leg__tr em { display: block; height: 100%; border-radius: 3px; } #viewPortfolio .px-leg__a { text-align: right; color: var(--px-text); } #viewPortfolio .px-leg__p { text-align: right; color: var(--px-sub); } #viewPortfolio .px-np { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--px-line); } #viewPortfolio .px-np > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #viewPortfolio .px-np__k { font:400 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-np b { font:600 16px/1.3 var(--px-font); color: var(--px-text); } #viewPortfolio .px-risk__body { display: flex; flex-direction: column; flex: 1; } #viewPortfolio .px-cols { display: flex; align-items: flex-end; gap: 10px; flex: 1; min-height: 150px; margin-top: 18px; border-bottom: 1px solid var(--px-line2); } #viewPortfolio .px-col { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } #viewPortfolio .px-col b { font:600 13px/1.2 var(--px-font); color: var(--px-text); white-space: nowrap; } #viewPortfolio .px-col i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; } #viewPortfolio .px-col.is-z i { height: 3px !important; background: var(--px-line2) !important; } #viewPortfolio .px-col.is-z b { color: var(--px-mute); font-weight: 400; } #viewPortfolio .px-lvbg--1 { background: var(--px-l1); } #viewPortfolio .px-lvbg--2 { background: var(--px-l2); } #viewPortfolio .px-lvbg--3 { background: var(--px-l3); } #viewPortfolio .px-lvbg--4 { background: var(--px-l4); } #viewPortfolio .px-lvbg--5 { background: var(--px-l5); } #viewPortfolio .px-lvbg--6 { background: var(--px-l6); } #viewPortfolio .px-lvbg--7 { background: var(--px-l7); } #viewPortfolio .px-lvbg--0 { background: var(--px-l0); } #viewPortfolio .px-lvbg--x { background: var(--px-cents); } #viewPortfolio .px-colx { display: flex; gap: 10px; margin-top: 8px; } #viewPortfolio .px-colx span { flex: 1; min-width: 0; text-align: center; font:500 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-rsum { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--px-line); font:400 13.5px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-rsum > b { color: var(--px-text); font-weight: 600; text-align: right; } #viewPortfolio .px-rsum span b { color: var(--px-sub); font-weight: 500; } /* the Breakdown pane (breakdown.js) under the cards, in the same card language */ #viewPortfolio .px-cards + .pb-pane.bd { margin-top: 16px; border: 1px solid var(--px-line2); border-radius: 18px; background: transparent; } #viewPortfolio .px-cards + .pb-pane.bd > .cpane__bar { border-radius: 18px 18px 0 0; background: none; } /* the designed empty state */ #viewPortfolio .portfolio-empty.px-empty { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 1100px; margin: 26px 0 0; padding: 34px 36px !important; border: 1px solid var(--px-line2) !important; border-radius: 18px !important; background: transparent !important; box-shadow: none !important; } body[data-theme="light"] #viewPortfolio .portfolio-empty.px-empty { background: var(--surface, #f7f5f0) !important; } #viewPortfolio .px-empty__eyebrow { margin: 0 0 6px; font:500 14px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-empty h3 { margin: 0 0 10px; font:600 30px/1.2 var(--px-font); letter-spacing: -.03em; color: var(--px-text); text-transform: none; } #viewPortfolio .px-empty__copy > p:not(.px-empty__eyebrow):not(.portfolio-empty__hint) { margin: 0 0 22px; font:400 16px/1.55 var(--px-font); color: var(--px-sub); max-width: 560px; } #viewPortfolio .px-empty .portfolio-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } #viewPortfolio .px-empty .portfolio-empty__actions .px-btn { height: 44px; padding: 0 20px !important; border-radius: 22px !important; font:500 15px/1 var(--px-font) !important; } #viewPortfolio .px-empty .portfolio-empty__actions .px-btn:not(.px-btn--primary) { border: 1px solid var(--px-line2) !important; background: transparent !important; color: var(--px-text) !important; } #viewPortfolio .px-empty .portfolio-empty__actions .px-btn--primary { border: 1px solid var(--px-amber) !important; background: var(--px-amber) !important; color: var(--px-amber-ink) !important; font-weight: 600 !important; } #viewPortfolio .px-empty .portfolio-empty__hint { margin: 0; font:400 13.5px/1.5 var(--px-font); color: var(--px-mute); } #viewPortfolio .px-empty__steps { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } #viewPortfolio .px-empty__steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--px-line); font:400 15px/1.45 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-empty__steps li:last-child { border-bottom: 0; } #viewPortfolio .px-empty__steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--px-amber-bg); color: var(--px-amber2); font:700 15px/1 var(--px-font); } #viewPortfolio .px-empty__steps strong { color: var(--px-text); font-weight: 600; } /* narrower screens */ @media (max-width: 1400px) { #viewPortfolio .px-scroll { overflow-x: auto; overscroll-behavior-x: contain; } #viewPortfolio .pb-hold.px-tbl { min-width: 1240px; } } @media (max-width: 1280px) { #viewPortfolio .px-hero { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; } #viewPortfolio .px-cards { grid-template-columns: 1fr 1fr; } #viewPortfolio .px-cards > .px-inc { grid-column: 1 / -1; order: -1; } } @media (max-width: 1060px) { #viewPortfolio .px-hero { grid-template-columns: 1fr; } #viewPortfolio .px-sum { align-self: stretch; } } body[data-text-size="xlarge"] #viewPortfolio .px-hero { grid-template-columns: 1fr; } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .px-cards { grid-template-columns: 1fr 1fr; } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .px-cards > .px-inc { grid-column: 1 / -1; order: -1; } /* phones: everything stacks; each holding is a card of labelled figures (the pb- phone rules above) */ @media (max-width: 760px) { #viewPortfolio .px-head__row { gap: 10px 18px; padding-bottom: 12px; } #viewPortfolio .px-head__tabs { align-self: auto; height: 40px; } #viewPortfolio .px-head__acts { width: 100%; justify-content: flex-start; margin: 0 !important; gap: 8px; } #viewPortfolio .px-head__acts .px-btn { height: 40px; padding: 0 13px; } #viewPortfolio .px-head__acts .px-btn--primary { order: -1; flex: 1 1 100%; justify-content: center; } #viewPortfolio .px-head__acts #portfolioReportBtn span, #viewPortfolio .px-head__acts #exportPortfolio span { font-size:14px; } #viewPortfolio .px-more__menu { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); } #viewPortfolio .px-hero { padding-top: 18px; gap: 20px; } #viewPortfolio .px-big { font-size:44px; } body[data-text-size="xlarge"] #viewPortfolio .px-big { font-size:38px; } /* a 7-figure value ran 16px past a 375 screen */ #viewPortfolio .px-delta { gap: 6px 16px; } #viewPortfolio .px-delta__i { gap: 10px; } #viewPortfolio .px-chart__cap { position: static; max-width: none; margin: 0 0 30px; } #viewPortfolio .px-periods__r { margin-left: 0; gap: 10px 14px; } #viewPortfolio .px-per { padding: 6px 10px; } #viewPortfolio .px-sechead__r { margin-left: 0; width: 100%; } #viewPortfolio .px-kinds { flex-wrap: wrap; } #viewPortfolio .px-scroll { overflow: visible; } #viewPortfolio .pb-hold.px-tbl { min-width: 0; } #viewPortfolio .pb-hold.px-tbl td { border-bottom: 0; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g { padding: 14px 0; border-bottom: 1px solid var(--px-line); box-shadow: none; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open { padding: 14px 12px; box-shadow: inset 2px 0 0 var(--px-amber); } #viewPortfolio .pb-hold.px-tbl tr.pb-r1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } #viewPortfolio .pb-hold.px-tbl tr.pb-r1 > td[data-label]::before, #viewPortfolio .pb-hold.px-tbl tfoot td[data-label]::before { font:500 13px/1.3 var(--px-font); letter-spacing: 0; text-transform: none; color: var(--px-mute); } #viewPortfolio .pb-hold.px-tbl td.px-sparkc { grid-column: 1 / -1; width: auto; } #viewPortfolio .pb-hold.px-tbl td.px-sparkc::before { display: none !important; } #viewPortfolio .px-spark, #viewPortfolio .px-spark__svg { width: 100%; } #viewPortfolio .pb-hold.px-tbl td.pb-c-risk { text-align: left !important; } #viewPortfolio .pb-hold.px-tbl tbody.pb-g > tr.pb-lots > td { padding: 0 !important; } #viewPortfolio .pb-hold.px-tbl tfoot .pb-tok { padding-left: 0; } #viewPortfolio .pb-hold.px-tbl .pb-nm { max-width: none; white-space: normal; } #viewPortfolio .px-cards { grid-template-columns: 1fr; } #viewPortfolio .px-cards > .px-inc { grid-column: auto; } /* the Large/Extra-large two-column rule above is more specific; phones still stack */ body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .px-cards { grid-template-columns: 1fr; } body:is([data-text-size="large"], [data-text-size="xlarge"]) #viewPortfolio .px-cards > .px-inc { grid-column: auto; order: 0; } #viewPortfolio .px-inc__wrap { grid-template-columns: 1fr; justify-items: center; } #viewPortfolio .px-leg { width: 100%; } #viewPortfolio .px-np { grid-template-columns: 1fr 1fr; } #viewPortfolio .portfolio-empty.px-empty { grid-template-columns: 1fr; padding: 24px 20px !important; } #viewPortfolio .px-empty h3 { font-size:24px; } } #viewPortfolio .px-more > summary::after { content: none; display: none; } /* the glossary "?" of each heading takes no width (so the eleven columns fit a 1512 screen, as in the mock); it shows while the heading is pointed at or the mark itself has the keyboard focus */ #viewPortfolio .pb-hold.px-tbl th { position: relative; } #viewPortfolio .pb-hold.px-tbl th > .gq { position: absolute; top: -4px; right: 0; margin: 0; opacity: 0; transition: opacity .15s ease; } #viewPortfolio .pb-hold.px-tbl th:hover > .gq, #viewPortfolio .pb-hold.px-tbl th > .gq:focus-visible { opacity: .9; } #viewPortfolio .px-cards + .pb-pane.bd .cpane__title { font:600 17px/1.3 var(--px-font); letter-spacing: -.015em; text-transform: none; color: var(--px-text); } #viewPortfolio .px-cards + .pb-pane.bd .cpane__title::before { content: none; display: none; } #viewPortfolio .px-cards + .pb-pane.bd .cpane__meta { font:400 13px/1.3 var(--px-font); color: var(--px-mute); } #viewPortfolio .px-cards + .pb-pane.bd > .cpane__bar { min-height: 52px; padding: 8px 12px 8px 20px; border-bottom-color: var(--px-line); } #viewPortfolio .pb-hold.px-tbl th { top: auto; } #viewPortfolio .px-select { background-color: transparent; color: var(--px-sub); } #viewPortfolio .px-select:hover { color: var(--px-text); } @media (max-width: 760px) { #viewPortfolio .pb-hold.px-tbl tr.pb-r1 > td.pb-fundc { grid-column: 1 / 3; grid-row: 1; } #viewPortfolio .pb-hold.px-tbl tr.pb-r1 > td.px-sparkc { grid-column: 3; grid-row: 1; align-self: center; padding: 0 !important; } #viewPortfolio .px-spark__svg { height: 30px; } #viewPortfolio .px-cards > .px-inc { order: 0; } } #viewPortfolio .px-head .px-more > summary.px-btn { background: transparent !important; border: 1px solid var(--px-line2) !important; color: var(--px-text) !important; height: 38px !important; } #viewPortfolio .px-head .px-more__clear { background: none !important; box-shadow: none !important; height: auto; } #viewPortfolio .px-head .px-more__brokers .broker-pill { background: transparent !important; border: 1px solid var(--px-line2) !important; box-shadow: none !important; } #viewPortfolio .px-head .px-more__brokers .broker-pill.is-connected { border-color: var(--px-up-line) !important; } #viewPortfolio .px-head :is(.px-btn, .port-upload-btn):not(.px-btn--primary) { background: transparent !important; box-shadow: none !important; } /* ── Overlap fixes (Sep 28 2026, portfolio-fix): every chart stays inside its own box ────────────────────────── The value chart and the waterfall are drawn at their box's width and redrawn when it changes (app.js pxWatchWidth); until a redraw lands they are held to the box instead of running under the Summary or into the next card. */ #viewPortfolio .px-hero__main, #viewPortfolio .px-chart, #viewPortfolio .px-cards > .px-card { min-width: 0; } #viewPortfolio .px-chart__plot, #viewPortfolio .px-wf__plot { overflow: hidden; } #viewPortfolio .px-chart__plot svg, #viewPortfolio .px-wf__plot svg { max-width: 100%; } #viewPortfolio .px-risk__body, #viewPortfolio .px-inc__body { min-width: 0; overflow: hidden; } /* Holdings: the line under the first 25 rows of a long list */ #viewPortfolio .pb-hold.px-tbl tbody.pb-more td.pb-more__c { padding: 14px 0 !important; border-bottom: 1px solid var(--px-line); font:400 14px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .pb-hold.px-tbl tbody.pb-more td.pb-more__c > span { margin-right: 14px; } @media (max-width: 760px) { #viewPortfolio .pb-hold.px-tbl tbody.pb-more { display: block; } #viewPortfolio .pb-hold.px-tbl tbody.pb-more tr, #viewPortfolio .pb-hold.px-tbl tbody.pb-more td.pb-more__c { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } } /* Holdings on 761–1500px screens: the default columns fit the width (narrower names and sparklines, the Total's yield pair on two lines); columns added from the Columns menu scroll inside the table's own box */ @media (min-width: 761px) and (max-width: 1500px) { #viewPortfolio .px-scroll { overflow-x: auto; overscroll-behavior-x: contain; } #viewPortfolio .pb-hold.px-tbl { min-width: 0; } #viewPortfolio .pb-hold.px-tbl .pb-nm { max-width: 170px; } #viewPortfolio .pb-hold.px-tbl .px-spark, #viewPortfolio .pb-hold.px-tbl .px-spark__svg { width: 84px; } #viewPortfolio .pb-hold.px-tbl tfoot td.pb-c-month > small { display: block; max-width: 11em; margin-left: auto; white-space: normal; } #viewPortfolio .pb-hold.px-tbl :is(th, td) { padding-left: 6px; padding-right: 6px; } } /* Holdings · Trades · Income and returns on the Trades and Income pages: plain text tabs, the open one underlined in amber, as they read in the Portfolio header (design B) — no box, no pill */ body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav { gap: 24px; margin: 2px 0 20px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; } body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab { position: relative; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--text-2); font:500 15px/1.2 var(--sans); } body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab:hover { color: var(--text); } body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active { color: var(--text); } body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #e0a82e; } body :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab:focus-visible { outline: 2px solid #e0a82e; outline-offset: 2px; } body[data-theme="light"] :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav .subnav__tab.is-active::after { background: #b07a10; } /* Trades: a purchase still held says "Open" as a plain word, not a boxed tag */ body #viewTradelog .bd-tag--open { padding: 0; border: 0; background: none; box-shadow: none; } /* Holdings, Trades and Income and returns: no disclaimer strip above the title (the status bar carries "Not financial advice" and Privacy on every page) */ :is(#viewPortfolio, #viewTradelog, #viewIncome) > .legal-strip--view { display: none; } /* "Portfolio value Delayed 2:29 PM": the as-of words as plain small text, not a boxed pill */ #viewPortfolio .px-eyebrow .px-pill { padding: 0; border: 0; border-radius: 0; background: none; color: var(--px-mute); } /* Summary: the standard name first, the RMS name after it, small and muted */ #viewPortfolio .px-kv__k .px-kv__rms { margin-left: 6px; font:400 13px/1.2 var(--px-font); color: var(--px-mute); white-space: nowrap; } /* the chart's hover card: inside the chart (app.js pxWireChart places it), labels small and muted, figures bold */ #viewPortfolio .px-ch__tip:not(.is-static) { top: 2px; max-width: 100%; flex-wrap: wrap; gap: 2px 14px; white-space: normal; } #viewPortfolio .px-ch__tip .px-ch__d { color: var(--px-sub); white-space: nowrap; } #viewPortfolio .px-ch__tip .px-ch__kv { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } #viewPortfolio .px-ch__tip .px-ch__kv i { font:400 13px/1.2 var(--px-font); font-style: normal; color: var(--px-mute); } #viewPortfolio .px-ch__tip .px-ch__kv :is(b, em) { font-variant-numeric: tabular-nums; } /* the figures under the value: bold figure, then its name small and muted, on one baseline */ #viewPortfolio .px-delta { gap: 6px 32px; align-items: baseline; } #viewPortfolio .px-delta__i { gap: 8px; } #viewPortfolio .px-delta__i > span:first-child { font-weight: 600; font-variant-numeric: tabular-nums; } #viewPortfolio .px-delta__k { font:400 14px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .px-eyebrow .px-pill { font-size:13px; font-weight: 400; } /* "Where your income comes from": room for "142 others" on one line; the Summary's second lines never break mid-figure */ #viewPortfolio .px-leg li { grid-template-columns: 8px 44px minmax(30px, 1fr) 84px 50px; } #viewPortfolio .px-leg li.is-other > b { grid-column: 2 / 4; } #viewPortfolio .px-leg li.is-other > .px-leg__tr { display: none; } #viewPortfolio .px-leg li > b, #viewPortfolio .px-leg__a { white-space: nowrap; } #viewPortfolio .px-kv__v small { white-space: nowrap; } @media (max-width: 760px) { /* a phone card says nothing about a PT target that is not set */ #viewPortfolio .pb-hold.px-tbl td.pb-c-target:has(.pb-dash) { display: none; } } /* Allocation by risk level: whole percents over the bars where the card is narrow, so neighbours do not run together */ #viewPortfolio .px-col__n { display: none; } @media (max-width: 760px) { #viewPortfolio .px-col__w { display: none; } #viewPortfolio .px-col__n { display: inline; } } /* ── Holdings fixes (Sep 29 2026, portfolio QA) ───────────────────────────────────────────────────────────── The headings stay pinned under the top bar while the page scrolls (as in the Universe table). A table wider than its box (columns added from the Columns menu) scrolls sideways inside it at every width; app.js pxTableFit sets .is-wide. A sideways scroller cannot pin headings to the page, so there they sit in place. */ @media (min-width: 761px) { #viewPortfolio .px-scroll { overflow: visible; } #viewPortfolio .px-scroll.is-wide { overflow-x: auto; overscroll-behavior-x: contain; } #viewPortfolio .pb-hold.px-tbl thead th { position: sticky; top: var(--pb-top); z-index: 3; background: var(--px-bg); box-shadow: inset 0 -1px 0 var(--px-line); } #viewPortfolio .px-scroll.is-wide .pb-hold.px-tbl thead th { top: 0; } } /* light: the cents of the big value at 4.9:1 on the page (they read 2.7:1) */ body[data-theme="light"] #viewPortfolio .px-cents { color: #5f636c; } /* phones: More and Columns open as a sheet above the status bar, on screen and on a solid background (the phone sheet rules in cockpit.css were beaten by the desktop top/width rules above, so More was 18px tall and Columns opened below the screen) */ @media (max-width: 760px) { #viewPortfolio .px-head .px-more__menu, #viewPortfolio .px-sec .pv-cols__menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 44px; z-index: 60; width: auto; min-width: 0; max-height: calc(100vh - 120px); overflow: auto; } } /* account chips: a hairline outline like the page's other controls, not a filled grey tile */ #viewPortfolio .port-acct { background: transparent !important; border: 1px solid var(--px-line2) !important; border-radius: 12px; } #viewPortfolio .port-accts__tot small { font:400 13px/1.2 var(--px-font); color: var(--px-sub); } /* the empty page: accounts kept for their cash */ #viewPortfolio .px-empty__accts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 14px; padding: 0; } #viewPortfolio .px-empty__accts .port-accts__tot { margin-left: 0; } /* Allocation by risk level: the first and last figures stay inside the card (the L1 figure lost its first digit); the Cash column in the Summary's cash color */ #viewPortfolio .px-cols > .px-col:first-child { align-items: flex-start; } #viewPortfolio .px-cols > .px-col:last-child { align-items: flex-end; } #viewPortfolio .px-lvbg--c { background: var(--pxs-rest, #52525b); } /* nine columns (with Cash) in a narrow card: whole percents over the bars, so neighbouring figures do not touch */ #viewPortfolio .px-risk__body { container-type: inline-size; } @container (max-width: 480px) { #viewPortfolio .px-cols.is-tight .px-col__w { display: none; } #viewPortfolio .px-cols.is-tight .px-col__n { display: inline; } } /* phone width: labels take the full width (no gaps; they drift under 3px off their bar centres) so ETF and Cash fit; the last label hangs left of the card edge, not past it (Cash was cut to "Cas") */ @container (max-width: 320px) { #viewPortfolio .px-cols.is-tight { gap: 6px; } #viewPortfolio .px-cols.is-tight + .px-colx { gap: 0; } #viewPortfolio .px-cols.is-tight + .px-colx > span:last-child { display: flex; justify-content: flex-end; } } /* Large and Extra-large text on a phone: nine columns of 14–16px figures do not fit side by side, so the chart's own figures and labels stay at the normal 13px (the view zooms 1.12 / 1.25); the lines under the chart still scale */ @container (max-width: 270px) { body[data-text-size="large"] #viewPortfolio .px-cols.is-tight .px-col b, body[data-text-size="large"] #viewPortfolio .px-cols.is-tight + .px-colx { zoom: .893; } body[data-text-size="xlarge"] #viewPortfolio .px-cols.is-tight .px-col b, body[data-text-size="xlarge"] #viewPortfolio .px-cols.is-tight + .px-colx { zoom: .8; } } /* the folded Breakdown pane: its bar is the whole card, rounded all round with no line under it (its square bottom edge ran across the card's rounded corners) */ #viewPortfolio .px-cards + .pb-pane.bd.is-folded > .cpane__bar { border-bottom-color: transparent; border-radius: 17px; } /* ── b3b (Sep 29 2026 night): the RMS word small beside a Holdings column heading ("Target price PT"), in the heading's own face and size, quieter (sweep portfolio-29) ── */ #viewPortfolio th .pb-rmsh { font:inherit; font-weight: 400; color: var(--px-mute, var(--text-2)); margin-left: 3px; letter-spacing: inherit; } /* the big figure's cents in light mode: 4.86:1 on the page (#ece8e1), was 2.72:1 (sweep portfolio-25); the other uses of --px-cents (chart chip outline, cash bar) keep theirs */ body[data-theme="light"] #viewPortfolio .px-cents { color: #60646d; } /* ── Sep 30 2026, the Holdings heading (owner: "fix the holdings heading and move that stuff over to the left") ── The title takes the Summary's group-head style (portfolio-summary.css .pxc-h: a small amber tick and the name), "185 funds · largest first" quiet right after it, then the search, the kind pills, Risk level, Pays and Columns straight after on the same line, left-aligned — no push to the far right. Past the width they wrap to a line of their own, starting at the left edge. */ #viewPortfolio #portfolioTableCard .px-sechead { gap: 10px 16px; } #viewPortfolio #portfolioTableCard .px-sechead h2 { display: flex; align-items: center; gap: 9px; margin: 0 -6px 0 0; font:650 13px/1.2 var(--px-font); letter-spacing: .02em; text-transform: none; color: var(--px-text); } #viewPortfolio #portfolioTableCard .px-sechead h2::before { content: ""; display: block; flex: 0 0 3px; height: 13px; border-radius: 2px; background: var(--px-amber); box-shadow: 0 0 8px color-mix(in srgb, var(--px-amber) 55%, transparent); } body[data-theme="light"] #viewPortfolio #portfolioTableCard .px-sechead h2::before { box-shadow: none; } #viewPortfolio #portfolioTableCard .px-sechead__n { font:400 13px/1.3 var(--px-font); color: var(--px-mute); white-space: nowrap; } #viewPortfolio #portfolioTableCard .px-sechead__r { margin-left: 0; } body[data-text-size="large"] #viewPortfolio #portfolioTableCard .px-sechead h2 { font-size:14px; } body[data-text-size="large"] #viewPortfolio #portfolioTableCard .px-sechead__n { font-size:14px; } body[data-text-size="xlarge"] #viewPortfolio #portfolioTableCard .px-sechead h2 { font-size:15px; } body[data-text-size="xlarge"] #viewPortfolio #portfolioTableCard .px-sechead__n { font-size:15px; } /* ── More button matches its neighbours (Sep 30 2026): same size, type and pill as Export / Print statement, a quiet filled look while its menu is open instead of the gold focus ring (the ring stays for keyboard use) ── */ #viewPortfolio .px-head .px-more > summary.px-btn { height: 40px !important; padding: 0 13px; gap: 8px; border-radius: 19px; font:500 14px/1 Inter, var(--px-font); } #viewPortfolio .px-head .px-more > summary.px-btn .px-i circle { fill: currentColor; stroke: none; } #viewPortfolio .px-head .px-more > summary .px-more__chev { width: 14px; height: 14px; margin-left: -2px; opacity: .6; transition: transform .15s ease; } #viewPortfolio .px-head .px-more[open] > summary .px-more__chev { transform: rotate(180deg); } #viewPortfolio .px-head .px-more[open] > summary.px-btn { background: color-mix(in srgb, var(--px-text) 7%, transparent) !important; border-color: var(--px-line3) !important; } #viewPortfolio .px-head .px-more > summary:focus:not(:focus-visible), #viewPortfolio .px-head .px-more[open] > summary { outline: none; } /* ── Holdings' accounts strip, v3 (Oct 2 2026; accounts.js stripHtml). The owner: the chips "look terrible", and "market value doesn't matter, it's all about WORKING CAPITAL". One quiet line (the amber mono label, Synced · Refresh all, working capital on the right with market value small beside it), then one row of small cards: logo, account and last digits, its working capital, funds and cash. Each card's Refresh / Disconnect sit in its ⋯ menu; the accounts with nothing in them fold into "+2 empty accounts". Hairlines only, no box in a box. ── */ #viewPortfolio .port-accts.pacc-strip { display: block !important; padding: 14px 12px 16px; } /* holdings-rms.css made the old strip a flex row */ #viewPortfolio .px-empty__accts.pacc-strip { padding: 0; } #viewPortfolio .pacc-strip .pacc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; min-width: 0; } #viewPortfolio .pacc-strip .port-accts__l { font:700 13px/1.3 var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--accent-soft, var(--px-amber2)) !important; white-space: nowrap; } #viewPortfolio .pacc-strip .acx-fresh { font:400 13px/1.3 var(--px-font); color: var(--px-mute); } #viewPortfolio .pacc-strip .acx-fresh .acx-link { padding: 0; border: 0; background: none; color: var(--px-amber2); font:500 13px/1.3 var(--px-font); text-decoration: none; cursor: pointer; } #viewPortfolio .pacc-strip .acx-fresh .acx-link:hover { text-decoration: underline; text-underline-offset: 3px; } #viewPortfolio .pacc-tot { display: inline-flex; align-items: baseline; gap: 9px; margin-left: auto; white-space: nowrap; } #viewPortfolio .pacc-tot__k { font:500 13px/1.3 var(--px-font); color: var(--px-sub); } #viewPortfolio .pacc-tot__v { font:600 17px/1.2 var(--px-font); letter-spacing: -.01em; color: var(--px-text); font-variant-numeric: tabular-nums; } #viewPortfolio .pacc-tot__mv { font:400 13px/1.3 var(--px-font); color: var(--px-mute); font-variant-numeric: tabular-nums; } #viewPortfolio .pacc-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } #viewPortfolio .pacc { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 54px; margin: 0; padding: 0 4px 0 12px; border: 1px solid var(--px-line2); border-radius: 12px; background: transparent; transition: border-color .12s ease; } #viewPortfolio .pacc:hover, #viewPortfolio .pacc:focus-within { border-color: var(--px-line3); } #viewPortfolio .pacc .acx-bl { width: 26px; height: 26px; border-radius: 7px; font-size:13px; box-shadow: 0 0 0 1px var(--px-line2); } #viewPortfolio .pacc__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #viewPortfolio .pacc__nm { font:600 14px/1.2 var(--px-font); color: var(--px-text); white-space: nowrap; } #viewPortfolio .pacc__sub { font:400 13px/1.2 var(--px-font); color: var(--px-sub); white-space: nowrap; font-variant-numeric: tabular-nums; } #viewPortfolio .pacc__wc { margin-left: 14px; font:600 15px/1.2 var(--px-font); color: var(--px-text); font-variant-numeric: tabular-nums; white-space: nowrap; } #viewPortfolio .pacc.is-empty { border-style: solid; } #viewPortfolio .pacc.is-empty .pacc__nm { color: var(--px-sub); font-weight: 500; } #viewPortfolio .pacc__warn { margin-left: 12px; padding: 0; border: 0; background: none; color: var(--px-amber2); font:600 13px/1.2 var(--px-font); cursor: pointer; white-space: nowrap; } #viewPortfolio .pacc.is-warn { border-color: color-mix(in srgb, var(--px-amber) 40%, transparent); } /* the ⋯ menu: quiet until it is wanted */ #viewPortfolio .pacc__more { position: relative; } #viewPortfolio .pacc__dots { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--px-mute); cursor: pointer; list-style: none; } #viewPortfolio .pacc__dots::-webkit-details-marker { display: none; } #viewPortfolio .pacc__dots svg { width: 16px; height: 16px; fill: currentColor; } #viewPortfolio .pacc__dots:hover, #viewPortfolio .pacc__more[open] > .pacc__dots { color: var(--px-text); background: color-mix(in srgb, var(--px-text) 7%, transparent); } #viewPortfolio .pacc__dots:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 1px; } #viewPortfolio .pacc__pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: -4px; width: 290px; padding: 14px 16px; border: 1px solid var(--px-line3); border-radius: 12px; background: color-mix(in srgb, #fff 4%, var(--px-bg)); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); text-align: left; } #viewPortfolio .pacc__mh { margin: 0 0 12px; font:500 13.5px/1.45 var(--px-font); color: var(--px-text); } #viewPortfolio .pacc__mh span { font-weight: 400; color: var(--px-sub); } #viewPortfolio .pacc__mi { margin: 0 0 12px; font:400 13px/1.45 var(--px-font); color: var(--px-sub); } #viewPortfolio .pacc__fig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--px-line2); } #viewPortfolio .pacc__fig dt { margin: 0 0 3px; font:600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--px-mute); } #viewPortfolio .pacc__fig dd { margin: 0; font:600 14px/1.3 var(--px-font); color: var(--px-text); font-variant-numeric: tabular-nums; } #viewPortfolio .pacc__fig div + div dd { font-weight: 400; color: var(--px-sub); } #viewPortfolio .pacc__acts { display: flex; gap: 8px; } #viewPortfolio .pacc__act { height: 32px; padding: 0 14px; border: 1px solid var(--px-line3); border-radius: 16px; background: transparent; color: var(--px-text); font:500 13.5px/1 var(--px-font); cursor: pointer; } #viewPortfolio .pacc__act:hover { border-color: var(--px-sub); } #viewPortfolio .pacc__act--q { color: var(--px-sub); } #viewPortfolio .pacc__act:focus-visible, #viewPortfolio .pacc__warn:focus-visible, #viewPortfolio .pacc-more:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; } #viewPortfolio .pacc-morewrap { display: flex; } #viewPortfolio .pacc-more { height: 54px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--px-sub); font:600 14px/1 var(--px-font); cursor: pointer; white-space: nowrap; } #viewPortfolio .pacc-more span { font-weight: 400; } #viewPortfolio .pacc-more:hover { color: var(--px-text); border-color: var(--px-line2); } body[data-theme="light"] #viewPortfolio .pacc__pop { background: #fff; box-shadow: 0 14px 34px rgba(58, 48, 30, .18); } body[data-text-size="large"] #viewPortfolio .pacc { height: 60px; } body[data-text-size="xlarge"] #viewPortfolio .pacc { height: 66px; } @media (max-width: 720px) { #viewPortfolio .port-accts.pacc-strip { padding: 12px 0 14px; } #viewPortfolio .pacc-tot { margin-left: 0; flex-wrap: wrap; white-space: normal; } #viewPortfolio .pacc-row > li { flex: 1 1 100%; } #viewPortfolio .pacc__wc { margin-left: auto; } #viewPortfolio .pacc-more { height: 40px; padding: 0 4px; } } /* Oct 8: Holdings labels in the Screener's colors (fund-kind--income / --equity / --reit): colored words on a soft tint with a matching edge, not grey outlines. ETF takes Risk mix's ETF slate-teal; the M / Q payment badge a calm sky. */ body:not(#_) #viewPortfolio .px-kind { border-radius: 5px; padding: 1px 7px; font-weight: 600; border: 1px solid transparent; } body:not(#_) #viewPortfolio .px-kind--income { color: rgb(22, 199, 132); background: rgba(52, 211, 154, .12); border-color: rgba(52, 211, 154, .25); } body:not(#_) #viewPortfolio .px-kind--equity { color: rgb(240, 197, 82); background: rgba(231, 179, 51, .12); border-color: rgba(231, 179, 51, .25); } body:not(#_) #viewPortfolio .px-kind--reit { color: rgb(142, 193, 255); background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .28); } body:not(#_) #viewPortfolio .px-kind--etf { color: #8fc1d1; background: rgba(122, 166, 184, .14); border-color: rgba(122, 166, 184, .32); } body:not(#_) #viewPortfolio .px-tag--fq { color: #7fc4e0; background: rgba(95, 184, 214, .12); border: 1px solid rgba(95, 184, 214, .28); border-radius: 5px; font-weight: 600; } body[data-theme="light"]:not(#_) #viewPortfolio .px-kind--income { color: #0e7a50; } body[data-theme="light"]:not(#_) #viewPortfolio .px-kind--equity { color: #8a6100; } body[data-theme="light"]:not(#_) #viewPortfolio .px-kind--reit { color: #2357a8; } body[data-theme="light"]:not(#_) #viewPortfolio .px-kind--etf { color: #2f6b80; } body[data-theme="light"]:not(#_) #viewPortfolio .px-tag--fq { color: #1f6f8f; }