/* ═══════════════════════════════════════════════════════════════════════════════════
   breakdown.css — breakdown.js: the Breakdown pane on Holdings, and each purchase's status, days
   held, income received and total return (Holdings purchases and Trades → Still holding).

   Loaded after portfolio.css and before theme-light.css. The pane is the dashboard's pane chrome
   (cockpit.css .cpane / .cpane__bar / .cpane__title, portfolio.css .pb-pane), its rows the Universe
   table's (.cptable, window.CPRow ticker cells) at the Portfolio section's 13–14px, its bars the
   Fund pyramid pane's (thin, squared, on a faint track). Colors are the site's tokens: value in the
   amber accent, income in portfolio.css's --pb-inc; tags are neutral except "Pending sale" (amber).
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── the pane (closed until opened: portfolio.css .pb-fold / .cpane__fold, app.js portFoldApply) ── */
#viewPortfolio .bd[hidden] { display: none; }

/* facts: the "Your portfolio" stat cells, one line of three */
#viewPortfolio .bd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 12px 32px; padding: 12px 16px; box-shadow: inset 0 -1px 0 var(--pb-line); }
#viewPortfolio .bd-facts .pb-cell em { margin-bottom: 2px; }
#viewPortfolio .bd-facts .pb-cell b { font-size:17px; }
#viewPortfolio .bd-facts .pb-cell small { font-size:13px; white-space: normal; }
#viewPortfolio .bd-facts .cp-tk, #viewPortfolio .bd-cut .cp-tk { font:700 13px/1.35 var(--sans); letter-spacing: .01em; }
#viewPortfolio .bd-cut { margin: 0; padding: 9px 16px; font:400 14px/1.5 var(--sans); color: var(--pb-ink2); box-shadow: inset 0 -1px 0 var(--pb-line); }
#viewPortfolio .bd-cut b { font-size:14px; font-weight: 600; color: var(--pb-ink); }
#viewPortfolio .bd-cut__l { display: block; margin: 0 0 2px; font:400 13px/1.35 var(--sans); font-style: normal; color: var(--pb-ink2); }

/* tabs: the dashboard pane's tabs, drawn as the Portfolio section's pills */
#viewPortfolio .bd-tabs { display: flex; gap: 4px; padding: 8px 12px; box-shadow: inset 0 -1px 0 var(--pb-line); overflow-x: auto; scrollbar-width: thin; }
#viewPortfolio .bd-tabs .cpane__tab {
  flex: none; min-height: 30px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: none;
  font:650 13px/1.2 var(--sans); color: var(--pb-ink2); white-space: nowrap;
}
#viewPortfolio .bd-tabs .cpane__tab:hover { color: var(--pb-ink); background: var(--soft-2, rgba(255, 255, 255, .06)); }
#viewPortfolio .bd-tabs .cpane__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)); }
#viewPortfolio .bd-tabs .cpane__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#viewPortfolio .bd-tabs__hint { flex: none; margin-left: auto; padding: 0 4px 0 12px; align-self: center; font:400 13px/1.3 var(--sans); color: var(--pb-ink2); white-space: nowrap; }

/* the slice tables: the Universe table at 14px */
#viewPortfolio .bd-scroll { overflow-x: auto; }
#viewPortfolio .bd-t { font-size:14px; }
#viewPortfolio .bd-t thead th {
  position: static; padding: 8px 10px; background: var(--bg); cursor: default;
  font:600 13px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pb-ink2);
  border-bottom: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent);
}
#viewPortfolio .bd-t tbody td, #viewPortfolio .bd-t tfoot td {
  padding: 7px 10px; font:500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--pb-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--pb-ink) 6%, transparent);
}
#viewPortfolio .bd-t tfoot td { text-align: right; }
#viewPortfolio .bd-t td.l { font-family: var(--sans); letter-spacing: 0; text-align: left; }
#viewPortfolio .bd-t :is(th, td):first-child { padding-left: 16px; }
#viewPortfolio .bd-t :is(th, td):last-child { padding-right: 16px; }
#viewPortfolio .bd-t tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#viewPortfolio .bd-t tbody tr.sel > td { background: var(--accent-bg, rgba(224, 168, 46, .12)); }
#viewPortfolio .bd-t tbody tr.sel > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
#viewPortfolio .bd-t tfoot td { font-weight: 600; border-bottom: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); }
#viewPortfolio .bd-c-name { width: 1%; white-space: nowrap; }
#viewPortfolio .bd-nm { font-weight: 500; }
#viewPortfolio .bd-r--grp .bd-nm { font-weight: 650; }
#viewPortfolio .bd-r--sub .bd-c-name { padding-left: 38px !important; }
#viewPortfolio .bd-r--sub .bd-nm { color: var(--pb-ink2); font-weight: 400; }
#viewPortfolio .bd-c-name .pyx-sw { margin-right: 10px; vertical-align: -1px; }
#viewPortfolio .bd-c-name .pyx-sw--taxfree { background: #199e70; } #viewPortfolio .bd-c-name .pyx-sw--taxable { background: #3987e5; }
#viewPortfolio .bd-c-name .pyx-sw--equity { background: #d95926; } #viewPortfolio .bd-c-name .pyx-sw--etf { background: #7d8697; }
#viewPortfolio .bd-c-bar { width: 32%; min-width: 150px; }
#viewPortfolio .bd-bars { display: grid; gap: 3px; width: 100%; min-width: 120px; }
#viewPortfolio .bd-trk { display: block; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--pb-ink) 7%, transparent); overflow: hidden; }
#viewPortfolio .bd-bar { display: block; height: 100%; border-radius: 2px; }
#viewPortfolio .bd-bar--v, #viewPortfolio .bd-sw--v { background: var(--accent); }
#viewPortfolio .bd-bar--i, #viewPortfolio .bd-sw--i { background: var(--pb-inc); }
#viewPortfolio .bd-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; letter-spacing: .05em; }
#viewPortfolio .bd-sw { display: inline-block; width: 12px; height: 6px; border-radius: 2px; }
#viewPortfolio .bd-c-f { white-space: normal !important; }
#viewPortfolio .bd-c-f .cp-tk { font:700 13px/1.35 var(--sans); letter-spacing: .01em; }
#viewPortfolio .bd-n { display: inline-block; min-width: 1.6em; margin-right: 6px; color: var(--pb-ink2); font:500 14px var(--mono); }
#viewPortfolio .bd-more { font:500 13px var(--sans); color: var(--pb-ink2); }
#viewPortfolio .bd-fw { display: none; }
#viewPortfolio .bd-t--f .bd-c-name { width: auto; }
#viewPortfolio .bd-fn { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--pb-ink2); }
#viewPortfolio .bd-t .bd-c-tk { white-space: nowrap; }
#viewPortfolio .bd-t .bd-c-tk .cp-tk { font:700 14px/1.35 var(--sans); letter-spacing: .01em; }
#viewPortfolio .bd-t .bd-c-tk .fund-kind { margin-left: 8px; font-size:13px; line-height: 1.3; padding: 0 6px; }
#viewPortfolio .bd-t .bd-lvl { margin-left: 8px; font-size:13px; }
#viewPortfolio .bd-note { margin: 0; padding: 9px 16px 12px; font:400 13px/1.55 var(--sans); color: var(--pb-ink2); max-width: 1100px; }
#viewPortfolio .bd-note--foot { box-shadow: inset 0 1px 0 var(--pb-line); }

/* the line over the Holdings table while it shows one row of the Breakdown */
#viewPortfolio .bd-only {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 7px 8px 7px 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 -1px 0 var(--pb-line);
  font:400 14px/1.4 var(--sans); color: var(--pb-ink);
}
#viewPortfolio .bd-only b { font-weight: 600; }
#viewPortfolio .bd-only .cp-tk { font:700 13px/1.35 var(--sans); }
#viewPortfolio .bd-only__x {
  margin-left: auto; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text);
  font:600 13px/1 var(--sans); cursor: pointer;
}
#viewPortfolio .bd-only__x:hover { border-color: var(--border-hover); }

/* ── purchases: status tags, income while held, total return ───────────────────── */
:is(#viewPortfolio, #viewTradelog) .bd-tags { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 0 8px; vertical-align: 1px; }
#viewTradelog .pb-tsub .bd-tags, #viewTradelog .pb-tsub > .bd-tag:first-child { margin-left: 0; }
:is(#viewPortfolio, #viewTradelog) .bd-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 5px; white-space: nowrap;
  font:600 13px/1.5 var(--sans); color: var(--pb-ink); background: color-mix(in srgb, var(--pb-ink) 10%, transparent);
}
:is(#viewPortfolio, #viewTradelog) .bd-tag .pb-fig { font-weight: 500; }
:is(#viewPortfolio, #viewTradelog) .bd-tag--open { color: var(--pb-ink2); background: none; box-shadow: inset 0 0 0 1px var(--border-hover, rgba(255, 255, 255, .16)); font-weight: 500; }
:is(#viewPortfolio, #viewTradelog) .bd-tag--pending { color: var(--accent-soft, var(--accent)); background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: inset 0 0 0 1px var(--border-accent, rgba(224, 168, 46, .38)); }
:is(#viewPortfolio, #viewTradelog) .bd-tag--sold { background: color-mix(in srgb, var(--pb-ink) 14%, transparent); }
#viewPortfolio .pb-hold .pb-lot.pb-lot--x {
  grid-template-columns: minmax(230px, 290px) minmax(200px, 250px) minmax(170px, 220px) minmax(170px, 220px) minmax(0, 1fr); gap: 18px;
}
#viewPortfolio .pb-hold .pb-lot--x .pb-cell small { white-space: normal; }
:is(#viewPortfolio, #viewTradelog) .bd-nw { white-space: nowrap; }
#viewTradelog .pb-tsub .bd-tag { font-size:13px; line-height: 1.4; }
#viewTradelog .tl-table--open .pb-tsub { white-space: normal; overflow: visible; }
#viewTradelog .tl-table :is(.tl-col-inc, .tl-col-tr) { white-space: nowrap; }
#viewTradelog .tl-table--open td.tl-col-acct .tl-acct { max-width: 150px; }
#viewTradelog .tl-table--open .tl-col-pg { min-width: 184px; width: auto; }
#viewTradelog .tl-table--open .tl-col-pg .pb-prog { max-width: 170px; }
#viewTradelog .tl-table--open th.tl-col-pg .tl-sort { white-space: normal; text-align: left; }
@media (min-width: 761px) {
  #viewTradelog .tl-table--open :is(thead th, tbody td, tfoot td) { padding-left: 8px; padding-right: 8px; }
  #viewTradelog .tl-table--open :is(thead th, tbody td, tfoot td):first-child { padding-left: 12px; }
  #viewTradelog .tl-table--open :is(thead th, tbody td, tfoot td):last-child { padding-right: 12px; }
}
#viewTradelog .tl-table--open .tl-tp { display: block; margin: 0 0 2px; }
#viewTradelog .tl-table--open .tl-trs { color: var(--pb-ink2); font-family: var(--sans); }
#viewTradelog .tl-table--open .tl-tp b { display: inline; font-size:13px; color: var(--pb-ink); }
@media (max-width: 1280px) {
  #viewPortfolio .pb-hold .pb-lot.pb-lot--x { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #viewPortfolio .pb-hold .pb-lot--x > .pb-cell--w { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #viewPortfolio .bd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 12px 14px; }
  #viewPortfolio .bd-tabs__hint { display: none; }
  #viewPortfolio .bd-cut { padding: 9px 12px; }
  #viewPortfolio .bd-tabs { padding: 8px; }
  #viewPortfolio .bd-note { padding: 9px 12px 12px; }
  /* a phone: each row is two lines — the name with its funds' count, the two bars; then value and income */
  #viewPortfolio .bd-t thead { display: none; }
  #viewPortfolio .bd-t, #viewPortfolio .bd-t tbody, #viewPortfolio .bd-t tfoot { display: block; width: 100%; }
  #viewPortfolio .bd-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--pb-ink) 6%, transparent); }
  #viewPortfolio .bd-t tbody td, #viewPortfolio .bd-t tfoot td { display: block; padding: 0 !important; border: 0; box-shadow: none !important; }
  #viewPortfolio .bd-t tfoot tr { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pb-ink) 16%, transparent); border-bottom: 0; }
  #viewPortfolio .bd-t tbody tr.sel { background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: inset 2px 0 0 var(--accent); }
  #viewPortfolio .bd-t tbody tr.sel > td { background: none; }
  #viewPortfolio .bd-r--sub { padding-left: 34px !important; }
  #viewPortfolio .bd-r--sub .bd-c-name { padding-left: 0 !important; }
  #viewPortfolio .bd-c-name { grid-column: 1; grid-row: 1; white-space: normal; width: auto; }
  #viewPortfolio .bd-c-f { grid-column: 2; grid-row: 1; }
  #viewPortfolio .bd-c-f .cp-tk, #viewPortfolio .bd-c-f .bd-more { display: none; }
  #viewPortfolio .bd-c-f .bd-n { margin: 0; min-width: 0; }
  #viewPortfolio .bd-fw { display: inline; font:400 13px var(--sans); color: var(--pb-ink2); }
  #viewPortfolio .bd-t td { text-align: left !important; }
  #viewPortfolio .bd-t td:is(.bd-c-f, .bd-c-i, .bd-c-ip, .bd-c-cum) { text-align: right !important; }
  #viewPortfolio .bd-c-bar { grid-column: 1 / -1; grid-row: 2; width: auto; min-width: 0; }
  #viewPortfolio .bd-t tfoot .bd-c-bar { display: none; }
  #viewPortfolio .bd-c-v { grid-column: 1; grid-row: 3; text-align: left; }
  #viewPortfolio .bd-c-vp { grid-column: 1; grid-row: 4; text-align: left; color: var(--pb-ink2) !important; }
  #viewPortfolio .bd-c-i { grid-column: 2; grid-row: 3; }
  #viewPortfolio .bd-c-ip { grid-column: 2; grid-row: 4; color: var(--pb-ink2) !important; }
  #viewPortfolio .bd-c-vp::after { content: " of value"; font:400 13px var(--sans); }
  #viewPortfolio .bd-c-ip::after { content: " of income"; font:400 13px var(--sans); }
  #viewPortfolio .bd-c-i::after { content: " a year"; font:400 13px var(--sans); color: var(--pb-ink2); }
  /* the largest-holdings list: ticker and name, then the figures */
  #viewPortfolio .bd-t--f tr { grid-template-columns: minmax(0, 1fr) auto; }
  #viewPortfolio .bd-t--f .bd-c-tk { grid-column: 1; grid-row: 1; }
  #viewPortfolio .bd-t--f .bd-c-name { grid-column: 1 / -1; grid-row: 2; }
  #viewPortfolio .bd-t--f .bd-c-cum { grid-column: 2; grid-row: 1; }
  #viewPortfolio .bd-t--f .bd-c-cum::before { content: "running "; font:400 13px var(--sans); color: var(--pb-ink2); }
  #viewPortfolio .bd-t--f .bd-c-v { grid-row: 3; } #viewPortfolio .bd-t--f .bd-c-vp { grid-row: 4; }
  #viewPortfolio .bd-t--f .bd-c-i { grid-column: 2; grid-row: 3; } #viewPortfolio .bd-t--f .bd-c-ip { grid-column: 2; grid-row: 4; }
  #viewPortfolio .bd-fn { max-width: 100%; }
  #viewPortfolio .bd-only { padding: 8px 12px; }
  #viewPortfolio .bd-only__x { margin-left: 0; }
  #viewPortfolio .pb-hold .pb-lot.pb-lot--x { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 10px 12px; }
  #viewPortfolio .pb-hold .pb-lot--x > .pb-cell:first-child { grid-column: 1 / -1; }
  :is(#viewPortfolio, #viewTradelog) .bd-nw { white-space: normal; }
  :is(#viewPortfolio, #viewTradelog) .bd-tags { margin-left: 0; display: flex; margin-top: 3px; }
}

/* ── light ───────────────────────────────────────────────────────────────────── */
body[data-theme="light"] #viewPortfolio .bd-bar--v, body[data-theme="light"] #viewPortfolio .bd-sw--v { background: #c98f14; }
body[data-theme="light"] #viewPortfolio .bd-c-name .pyx-sw--taxfree { background: #149468; } body[data-theme="light"] #viewPortfolio .bd-c-name .pyx-sw--taxable { background: #2a78d6; }
body[data-theme="light"] #viewPortfolio .bd-c-name .pyx-sw--etf { background: #8a909b; }
body[data-theme="light"] :is(#viewPortfolio, #viewTradelog) .bd-tag--pending { color: #6e4700; }
body[data-theme="light"] #viewPortfolio :is(.bd-facts, .bd-cut, .bd-only, .bd-t) .cp-tk { color: #7f5400; }