/* portfolio-summary.css — Holdings: the Summary beside the chart (Sep 29 2026).
   The owner found the plain list "basic", so the same figures (and a few more the page already works out) sit in
   four groups — Value, Income, Profit taking, Allocation — each on a slightly raised card with a heading in the
   style of the Settings menu (settings-menu.css): 13px semibold, brighter, a small glowing amber tick and a
   hairline under it. Standard finance words first, the RMS term small and muted beside them; numbers bold and
   right-aligned in tabular figures, labels muted. Markup: app.js pxSumHtml. Scoped to #viewPortfolio.
   Layout: at 1361px and wider the Summary is 600px beside the chart in two columns (Value over Profit taking,
   Income over Allocation), the bottoms level; from 1061 to 1360 it sits under the chart as one row of four
   cards; narrower, two columns again; phones, one card under the other. Loaded after holdings-rms.css. */

#viewPortfolio {
  --pxs-grp: rgba(255, 255, 255, .025);
  --pxs-grp-line: rgba(255, 255, 255, .065);
  --pxs-hair: rgba(255, 255, 255, .06);
  --pxs-lift: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35);
  --pxs-low: #93c5fd; --pxs-high: #fdba74; --pxs-rest: #52525b;   /* Risk mix's own bar colors (riskmix-b.css) */
}
body[data-theme="light"] #viewPortfolio {
  --pxs-grp: rgba(58, 48, 30, .025);
  --pxs-grp-line: rgba(58, 48, 30, .1);
  --pxs-hair: rgba(58, 48, 30, .09);
  --pxs-lift: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(58, 48, 30, .06);
  --pxs-low: #2563eb; --pxs-high: #ea580c; --pxs-rest: #a1a1aa;
}

/* ── where the Summary sits ── */
@media (min-width: 1361px) {
  #viewPortfolio .px-hero { grid-template-columns: minmax(0, 1fr) 600px; gap: 28px; }
}
@media (min-width: 1061px) and (max-width: 1360px) {
  #viewPortfolio .px-hero { grid-template-columns: 1fr; gap: 22px; }
  #viewPortfolio .px-sum { align-self: stretch; }
}
body[data-text-size="xlarge"] #viewPortfolio .px-hero { grid-template-columns: 1fr; }

/* ── Sep 30 2026 redo: the Summary, clean (app.js pxSumHtml, the .pxc markup) ─────────────────────────────────────
   Owner: "so cluttered and crowded ... people need to be able to SEE their information". One surface (white with a soft
   shadow in light mode), no cards inside it and no rules between rows. On top the four figures that matter most, large,
   each with one muted label and one figure under it; under them Value / Income / Profit taking / Allocation as plain
   lists: the label on the left, the figure right-aligned, space rather than lines between rows. A label with an
   explanation is dotted-underlined and opens it on hover, focus or tap (no "?" marks). Color only where it means
   something: green income and gains, red losses, amber a position above 5%. The body is its own size container
   (pxc): two large figures a row and the groups in two columns beside the chart, four across when there is room,
   one under the other on a phone. */
#viewPortfolio { --pxc-hair: rgba(255, 255, 255, .07); --pxc-surface: rgba(255, 255, 255, .022); }
body[data-theme="light"] #viewPortfolio { --pxc-hair: rgba(58, 48, 30, .10); --pxc-surface: #fff; }
#viewPortfolio .px-sum.pxc { padding: 20px 20px 18px; background: var(--pxc-surface); }
body[data-theme="light"] #viewPortfolio .px-sum.pxc {
  background: #fff; border-color: rgba(58, 48, 30, .08);
  box-shadow: 0 1px 2px rgba(58, 48, 30, .05), 0 12px 32px -16px rgba(58, 48, 30, .22);
}
#viewPortfolio .px-sum.pxc .px-sum__h { font-size:17px; }
#viewPortfolio .pxc-body { container: pxc / inline-size; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

/* the four large figures */
#viewPortfolio .pxc-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px;
  margin: 14px 0 0; padding: 0 0 16px; border-bottom: 1px solid var(--pxc-hair);
}
#viewPortfolio .pxc-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#viewPortfolio .pxc-kpi__k { font:500 13px/1.3 var(--px-font); color: var(--px-sub); white-space: nowrap; }
#viewPortfolio .pxc-kpi__v { font:600 22px/1.15 var(--px-font); letter-spacing: -.015em; color: var(--px-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewPortfolio .pxc-kpi__s { font:400 13px/1.35 var(--px-font); color: var(--px-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Account value: a large figure on a phone and on a wide Summary; beside the chart (460–699px) the first line of Value */
#viewPortfolio .pxc-r.pxc-r--av { display: none; }
@container pxc (max-width: 459.98px) {
  #viewPortfolio .pxc-kpi__v { font-size:max(13px, clamp(17px, 5.8cqi, 22px)); }
}
@container pxc (min-width: 460px) {
  #viewPortfolio .pxc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  #viewPortfolio .pxc-kpi.pxc-kpi--av { display: none; }
  #viewPortfolio .pxc-r.pxc-r--av { display: grid; }
  #viewPortfolio .pxc-kpi__v { font-size:max(13px, clamp(18px, 4cqi, 26px)); }
}
@container pxc (min-width: 700px) {
  #viewPortfolio .pxc-kpis { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  #viewPortfolio .pxc-kpi.pxc-kpi--av { display: flex; }
  #viewPortfolio .pxc-r.pxc-r--av { display: none; }
  #viewPortfolio .pxc-kpi__v { font-size:max(13px, clamp(20px, 2.9cqi, 26px)); }
}
@container pxc (min-width: 900px) {
  #viewPortfolio .pxc-kpis { justify-content: start; column-gap: 72px; }
  #viewPortfolio .pxc-kpi__k, #viewPortfolio .pxc-kpi__s { font-size:14px; }
}

/* Value / Income / Profit taking / Allocation */
#viewPortfolio .pxc-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 36px; margin-top: 12px; }
@container pxc (min-width: 460px) {
  #viewPortfolio .pxc-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container pxc (min-width: 1000px) {
  #viewPortfolio .pxc-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
}
/* "More details": the less-used rows open in place; a Summary wide enough for the four groups in a row shows them all */
#viewPortfolio .pxc-body:not(.is-open) .is-more { display: none !important; }
#viewPortfolio .pxc-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font:500 13px/1.3 var(--px-font); color: var(--px-amber2);
}
#viewPortfolio .pxc-more i { font-style: normal; transition: transform .15s ease; }
#viewPortfolio .pxc-body.is-open .pxc-more i { transform: rotate(-90deg); }
#viewPortfolio .pxc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewPortfolio .pxc-more:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; border-radius: 3px; }
@container pxc (min-width: 1000px) {
  #viewPortfolio .pxc-body:not(.is-open) .is-more { display: revert !important; }
  #viewPortfolio .pxc-body .pxc-r.is-more { display: grid !important; }
  #viewPortfolio .pxc-more { display: none; }
}
#viewPortfolio .pxc-g { min-width: 0; }
/* the heading: a small amber tick and the name (the Settings menu's style) */
#viewPortfolio .pxc-h {
  display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
  font:650 13px/1.2 var(--px-font); letter-spacing: .02em; text-transform: none; color: var(--px-text);
}
#viewPortfolio .pxc-h::before {
  content: ""; 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 .pxc-h::before { box-shadow: none; }
#viewPortfolio .pxc-go {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font:500 13px/1.2 var(--px-font); letter-spacing: 0; color: var(--px-amber2); white-space: nowrap;
}
#viewPortfolio .pxc-go:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewPortfolio .pxc-go:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; border-radius: 3px; }

/* a row: the label on the left, the figure right-aligned; a second figure under it, clear of the first */
#viewPortfolio .pxc-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; padding: 4px 0; }
#viewPortfolio .pxc-k { min-width: 0; font:400 14px/1.4 var(--px-font); color: var(--px-sub); }
#viewPortfolio .pxc-k small { display: block; margin-top: 1px; font:400 13px/1.3 var(--px-font); color: var(--px-mute); }
#viewPortfolio .pxc-v { text-align: right; font-variant-numeric: tabular-nums; }
#viewPortfolio .pxc-v b { font:600 15px/1.4 var(--px-font); color: var(--px-text); white-space: nowrap; }
#viewPortfolio .pxc-v .pxc-of { font-weight: 400; color: var(--px-sub); }
#viewPortfolio .pxc-v .pb-link { font-size:14px; }
#viewPortfolio .pxc-s { grid-column: 1 / -1; justify-self: end; margin-top: 1px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewPortfolio .pxc-v .pxc-i { margin-right: 12px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); white-space: nowrap; }
#viewPortfolio .pxc-s .pxc-goal { display: inline-block; width: 2px; height: 11px; margin-right: 6px; border-radius: 2px; background: var(--px-text); vertical-align: -1px; }
#viewPortfolio .pxc-amber { color: var(--px-amber2) !important; }
#viewPortfolio .pxc-note { margin: 0; padding: 6px 0; font:400 13.5px/1.5 var(--px-font); color: var(--px-sub); }
#viewPortfolio .pxc-note--one { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; }

/* a label that explains itself: a dotted underline, the explanation on hover, focus or tap (tips.js) */
#viewPortfolio .pxc-t.is-tip {
  cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}
#viewPortfolio .pxc-t.is-tip:hover, #viewPortfolio .pxc-t.is-tip[aria-describedby] { color: var(--px-text); text-decoration-color: currentColor; }
#viewPortfolio .pxc-t.is-tip:focus-visible { outline: 2px solid var(--px-amber); outline-offset: 2px; border-radius: 3px; }
/* the explanation itself (a rich tip, cockpit.css .cptip--rich): the name, the figure's sentence, the glossary's */
.cptip--rich .pxc-tip { max-width: 340px; padding: 14px 16px; font:400 14px/1.55 var(--sans); color: var(--text-2); }
.cptip--rich .pxc-tip__t { display: block; margin-bottom: 4px; font:600 15px/1.35 var(--sans); color: var(--text); }
.cptip--rich .pxc-tip__t span { font-weight: 400; color: var(--text-3); }
.cptip--rich .pxc-tip p { margin: 0; }
.cptip--rich .pxc-tip p + p { margin-top: 8px; }
.cptip--rich .pxc-tip__g b { color: var(--text); font-weight: 600; }

/* Allocation: the split against the goal, a thicker bar and a plain legend */
#viewPortfolio .pxc-mix { position: relative; display: flex; gap: 2px; height: 12px; margin: 8px 0 0; }
#viewPortfolio .pxc-mix i { display: block; height: 100%; min-width: 0; flex: 0 1 auto; }
#viewPortfolio .pxc-mix i:first-child { border-radius: 6px 0 0 6px; }
#viewPortfolio .pxc-mix i:last-of-type { border-radius: 0 6px 6px 0; }
#viewPortfolio .pxc-mix__low { background: var(--pxs-low); }
#viewPortfolio .pxc-mix__high { background: var(--pxs-high); }
#viewPortfolio .pxc-mix__rest { background: var(--pxs-rest); }
#viewPortfolio .pxc-mix u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--px-text); box-shadow: 0 0 0 2px var(--pxc-surface-solid, var(--px-bg)); }
body[data-theme="light"] #viewPortfolio .pxc-mix u { box-shadow: 0 0 0 2px #fff; }
#viewPortfolio .pxc-mix { margin-top: 6px; }
#viewPortfolio .pxc-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 4px; font:400 13px/1.3 var(--px-font); color: var(--px-sub); }
#viewPortfolio .pxc-leg > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#viewPortfolio .pxc-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* Larger text: a step up throughout */
body[data-text-size="large"] #viewPortfolio .pxc-k, body[data-text-size="large"] #viewPortfolio .pxc-v .pb-link { font-size:15px; }
body[data-text-size="large"] #viewPortfolio .pxc-v b { font-size:16px; }
body[data-text-size="large"] #viewPortfolio :is(.pxc-s, .pxc-k small, .pxc-note, .pxc-leg, .pxc-kpi__k, .pxc-kpi__s) { font-size:14px; }
body[data-text-size="large"] #viewPortfolio .pxc-h { font-size:14px; }
body[data-text-size="xlarge"] #viewPortfolio .pxc-k, body[data-text-size="xlarge"] #viewPortfolio .pxc-v .pb-link { font-size:16px; }
body[data-text-size="xlarge"] #viewPortfolio .pxc-v b { font-size:17px; }
body[data-text-size="xlarge"] #viewPortfolio :is(.pxc-s, .pxc-k small, .pxc-note, .pxc-leg, .pxc-kpi__k, .pxc-kpi__s) { font-size:15px; }
body[data-text-size="xlarge"] #viewPortfolio .pxc-h { font-size:15px; }
body[data-text-size="xlarge"] #viewPortfolio .pxc-kpi__v { font-size:24px; }
@media (max-width: 640px) {
  #viewPortfolio .px-sum.pxc { padding: 16px 16px 14px; }
}

/* ── Sep 29 2026, a real account (one Schwab import, 54 funds, no history) ──────────────────────────────────────────
   The Allocation bar in Risk mix's gold and grey (riskmix-b.css #viewRisk --rk-low/high/rest), not blue and orange.
   With no price history to draw, the chart is one line and the Summary goes under the value, full width, its four
   groups in a row (app.js pxDrawChart .is-nochart), instead of a tall empty block beside it. A group that needs
   history is one short line with its import button. The accounts strip reads left to right: the label, one card a
   line per account, then the total right after the last card (owner: "no gap to the far right edge"). */
#viewPortfolio { --pxs-low: #e0a82e; --pxs-high: #7c7c84; --pxs-rest: #34353b; }
body[data-theme="light"] #viewPortfolio { --pxs-low: #c08a14; --pxs-high: #a8a8b0; --pxs-rest: #4a4b52; }
#viewPortfolio .px-chart__wait.is-line { display: block; height: auto; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--px-line); }
@media (min-width: 1061px) {
  #viewPortfolio .px-hero.is-nochart { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #viewPortfolio .px-hero.is-nochart .px-sum { align-self: stretch; }
}
#viewPortfolio .pb-holdings .port-accts { justify-content: flex-start; }
#viewPortfolio .port-accts .port-accts__tot { margin-left: 6px; }
#viewPortfolio .port-accts .port-acct { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 12px; }
#viewPortfolio .port-accts .port-acct i.port-acct__up { display: inline; margin-top: 0; }
#viewPortfolio .px-chart__plot:has(> .px-chart__wait.is-line) { min-height: 0; }