/* pyramid.css — the Fund pyramid (pyramid.js), the one pyramid on Risk mix and in the dashboard's
   Pyramid tab, in the board's direction B ("Exchange"): centred rounded bars that form the
   pyramid's silhouette, L7 narrow at the top to L1 wide at the base, ETFs beside it. With holdings
   each level also carries the member's side (You hold · Goal · Against your goal) and the page
   opens with their mix against the goal (.pyx-me); the panels under it on Risk mix ("Your RMS
   universe", "Adjust your goal") take the same panel shape at the end of this file.
   Loaded after cockpit.css and before theme-light.css. Everything here is .pyx-*, so nothing from
   the old trapezoid styles (.cppyr__*, .rk-pyr__*) reaches it.

   Colors: the kind-of-fund slices are the one categorical palette here, validated with the
   dataviz checks (adjacent and all-pairs CVD ΔE ≥ 9, ≥ 3:1 on the panel in both modes):
   tax-free aqua, taxable blue, equity orange; ETFs a neutral slate. They are marks only; every
   figure and label is in the text colors. Owned is amber, as everywhere on the site. */

.pyx {
  --pyx-tf: #199e70; --pyx-tx: #3987e5; --pyx-eq: #d95926; --pyx-etf: #7d8697;
  --pyx-panel: var(--fx-panel, var(--surface));
  --pyx-line: color-mix(in srgb, var(--text) 9%, transparent);
  --pyx-rule: color-mix(in srgb, var(--text) 7%, transparent);
  --pyx-track: color-mix(in srgb, var(--text) 6%, transparent);
  --pyx-track-hi: color-mix(in srgb, var(--text) 10%, transparent);
  --pyx-hover: color-mix(in srgb, var(--text) 4%, transparent);
  --pyx-sel: color-mix(in srgb, var(--accent) 9%, transparent);
  --pyx-own-bg: var(--accent);
  --pyx-own-ink: #1a1304;
  --pyx-ease: cubic-bezier(.2, .7, .2, 1);
}
body[data-theme="light"] .pyx {
  --pyx-tf: #149468; --pyx-tx: #2a78d6; --pyx-eq: #d95926; --pyx-etf: #8a909b;
  --pyx-own-bg: #e2ad45;
  --pyx-amber-ink: #7f5400;            /* amber as text on paper: 5:1 or better */
  --text-2: #3d424c;                   /* secondary text at 7:1 or better on the panels */
  --pyx-sel: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ═══ Fund pyramid ═══════════════════════════════════════════════ */
.pyx {
  container: pyx / inline-size;
  position: relative; min-width: 0; color: var(--text); font-family: var(--sans);
  font-size:15px; line-height: 1.4;
}
.pyx *, .pyx *::before, .pyx *::after { box-sizing: border-box; }
.pyx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pyx b { font-weight: 600; }
.pyx-host { display: block; }
.pyx-host[hidden] { display: none; }

/* on Risk mix: a panel like the others on the page */
#viewRisk .pyx--page {
  background: var(--fx-panel); border-radius: 14px; box-shadow: var(--fx-panel-shadow);
  padding: 22px 24px 18px; margin: 0 0 18px;
}
/* in the dashboard pane: sized with the desk's text-size setting */
.pyx--pane { font-size:13px; padding: 0 0 12px; --pyx-panel: var(--bg-raised, var(--surface)); }
body[data-text-size="large"] .pyx--pane { font-size:14px; }
body[data-text-size="xlarge"] .pyx--pane { font-size:15.5px; }

/* heading */
.pyx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.pyx__ttl { min-width: 0; }
.pyx__h { margin: 0; font:600 max(13px, 1.2em)/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); }
.pyx--pane .pyx__h { font-size:max(13px, 1.08em); }
.pyx__sub { margin: 3px 0 0; color: var(--text-2); font-size:max(13px, .93em); }
.pyx__sub b { color: var(--text); font-variant-numeric: tabular-nums; }
.pyx__cta { display: flex; gap: 8px; align-items: center; flex: none; }
.pyx .pyx-cta, .pyx .pyx-cta2 { min-height: 40px; padding: 8px 20px; font:600 14.5px/1.25 var(--sans); white-space: normal; text-align: center; }
.pyx .pyx-cta2 { min-height: 36px; padding: 0 16px; font-weight: 500; font-size:14px; }
.pyx-link {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--pyx-track); color: var(--text);
  font:500 max(13px, .93em)/1 var(--sans); padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.pyx-link:hover { background: var(--pyx-track-hi); }
.pyx-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* controls: kind of fund · RMS universe · search */
.pyx__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.pyx-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--pyx-track); }
.pyx-seg__b {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font:500 max(13px, .93em)/1 var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s;
}
.pyx-seg__b b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; font-size:max(13px, .94em); }
.pyx-seg__b:hover { color: var(--text); background: var(--pyx-hover); }
.pyx-seg__b.is-on { background: var(--fx-pill-on, var(--surface-3)); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.pyx-seg__b.is-on b { color: var(--text); }
.pyx-seg__b:focus-visible, .pyx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pyx-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pyx-sw--taxfree { background: var(--pyx-tf); } .pyx-sw--taxable { background: var(--pyx-tx); }
.pyx-sw--equity { background: var(--pyx-eq); } .pyx-sw--etf { background: var(--pyx-etf); }
.pyx-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--pyx-line); background: transparent; color: var(--text); font:500 max(13px, .93em)/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.pyx-chip:hover { border-color: var(--border-accent); }
.pyx-chip em { font-style: normal; color: var(--pyx-amber-ink, var(--accent)); font-weight: 600; }
.pyx-chip b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pyx-chip.is-on { background: var(--accent-bg); border-color: var(--border-accent); }
.pyx-chip.is-on b { color: var(--text); }
.pyx-search {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; margin-left: auto;
  border-radius: 999px; background: var(--pyx-track); color: var(--text-2); flex: 0 1 280px; min-width: 190px;
}
.pyx-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.pyx-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; color: var(--text); font:400 max(13px, .95em)/1 var(--sans); padding: 0; }
.pyx-search input::placeholder { color: var(--text-2); opacity: 1; }
.pyx--pane .pyx-chip { min-height: 36px; }
.pyx--pane .pyx-seg__b { min-height: 30px; padding: 0 11px; }

/* the RMS line */
.pyx__rms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: -2px 0 12px; padding: 9px 12px 9px 14px;
  border-radius: 12px; background: var(--pyx-sel); color: var(--text-2); font-size:max(13px, .93em); font-variant-numeric: tabular-nums;
}
.pyx__rms[hidden] { display: none; }
.pyx__rms > span { white-space: nowrap; }
.pyx__rms b { color: var(--text); }
.pyx__rms-h { color: var(--text) !important; font-weight: 600; }
.pyx__rms .pyx-link { margin-left: auto; padding: 6px 12px; }

/* ── the ladder ── */
.pyx__lad { --cols: 244px minmax(0, 1fr) 100px 112px 238px 118px; }
.pyx-hd, .pyx-row { display: grid; grid-template-columns: var(--cols); column-gap: 16px; align-items: center; }
.pyx-hd { padding: 0 10px 8px; color: var(--text-2); font-size:max(13px, .87em); white-space: nowrap; }
.pyx-hd .c { text-align: right; }
.pyx-hd__bar { text-align: center; }
.pyx-rows { display: flex; flex-direction: column; gap: 2px; }
.pyx-row {
  position: relative; min-height: 58px; padding: 7px 10px; border-radius: 12px; cursor: pointer; outline: none;
  transition: background .18s;
}
.pyx-row:hover { background: var(--pyx-hover); }
.pyx-row.is-sel { background: var(--pyx-sel); }
.pyx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pyx-row__lv { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pyx-row__lv > i {
  flex: none; display: grid; place-items: center; width: 38px; height: 28px; border-radius: 8px; font:600 max(13px, .87em)/1 'Geist Mono', var(--mono);
  font-style: normal; background: var(--pyx-track-hi); color: var(--text); transition: background .18s, color .18s;
}
.pyx-row.is-sel .pyx-row__lv > i { background: var(--pyx-own-bg); color: #1a1304; }
.pyx-row__lv > span { min-width: 0; }
.pyx-row__lv b { display: block; font-weight: 500; line-height: 1.3; }
.pyx-row__lv small { display: block; margin-top: 1px; font-size:max(13px, .87em); color: var(--text-2); line-height: 1.3; font-variant-numeric: tabular-nums; }
.pyx-sub--own { display: none; }
@container pyx (max-width: 1080px) { .pyx-sub--own { display: inline; } .pyx-sub--lv { display: none; } }
.pyx-row__track { display: flex; justify-content: center; min-width: 0; }
.pyx-bar {
  --lo: 32%;                                     /* the top of the pyramid, as a share of the base */
  width: calc(var(--lo) + (100% - var(--lo)) * var(--t, 1));
  position: relative; height: 36px; border-radius: 10px; background: var(--pyx-track);
  transition: box-shadow .2s, transform .2s var(--pyx-ease);
}
.pyx--pane .pyx-bar { height: 32px; border-radius: 9px; }
.pyx-row:hover .pyx-bar { box-shadow: 0 0 0 1px var(--pyx-track-hi); }
.pyx-row.is-own .pyx-bar { box-shadow: 0 0 0 2px var(--pyx-panel), 0 0 0 3.5px var(--accent); }
.pyx--pane .pyx-row.is-own .pyx-bar { box-shadow: 0 0 0 2px var(--surface, var(--pyx-panel)), 0 0 0 3.5px var(--accent); }
.pyx-bar__fill { position: absolute; inset: 0; display: flex; justify-content: center; border-radius: inherit; overflow: hidden; }
.pyx-s { display: block; height: 100%; flex: none; transition: width .55s var(--pyx-ease); }
.pyx-s.has-n { min-width: 3px; }
.pyx-s.has-n + .pyx-s.has-n { box-shadow: -2px 0 0 var(--pyx-panel); }   /* a 2px gap between slices */
.pyx--pane .pyx-s.has-n + .pyx-s.has-n { box-shadow: -2px 0 0 var(--surface, var(--pyx-panel)); }
.pyx-s--taxfree { background: var(--pyx-tf); } .pyx-s--taxable { background: var(--pyx-tx); }
.pyx-s--equity { background: var(--pyx-eq); } .pyx-s--etf { background: var(--pyx-etf); }
.pyx-bar__n {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pyx-panel) 90%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none;
}
body[data-theme="light"] .pyx-bar__n { box-shadow: 0 1px 3px rgba(58, 48, 30, .18); background: color-mix(in srgb, var(--pyx-panel) 94%, transparent); }
.pyx-bar__n b { font:600 max(13px, .98em)/1 'Geist Mono', var(--mono); color: var(--text); }
.pyx-bar__n span { font-size:max(13px, .87em); color: var(--text-2); }
.pyx-row__c { text-align: right; font-variant-numeric: tabular-nums; }
.pyx-row__c b { display: block; font:500 max(13px, 1.06em)/1.25 'Geist Mono', var(--mono); color: var(--text); letter-spacing: -.01em; }
.pyx-row__c small, .pyx-row__own small { display: block; font-size:max(13px, .87em); color: var(--text-2); }
.pyx-row__tks { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.pyx-row__own { text-align: right; font-variant-numeric: tabular-nums; }
.pyx-row__own b { display: block; font:600 max(13px, 1.06em)/1.25 'Geist Mono', var(--mono); color: var(--pyx-amber-ink, var(--accent)); letter-spacing: -.01em; }
.pyx-row__own b.is-nil { color: var(--text-2); font-weight: 500; }
/* nothing held anywhere: no "You own" column; the tickers take its room */
.pyx:not(.has-own) .pyx-hd__own, .pyx:not(.has-own) .pyx-row__own { display: none; }
.pyx:not(.has-own) .pyx-hd__tk, .pyx:not(.has-own) .pyx-row__tks { grid-column: span 2; }
.pyx-row.is-zero .pyx-bar { opacity: .5; }
.pyx-row.is-zero .pyx-row__lv b, .pyx-row.is-zero .pyx-row__c b { color: var(--text-2); }
.pyx-side { padding: 14px 10px 4px; color: var(--text-2); font-size:max(13px, .87em); }

/* tickers: yours filled amber, the watchlist outlined */
.pyx-tk {
  display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: 7px; background: var(--pyx-track-hi);
  font:500 max(13px, .87em)/1 'Geist Mono', var(--mono); color: var(--text); letter-spacing: .01em; white-space: nowrap;
}
.pyx-tk.is-own { background: var(--pyx-own-bg); color: var(--pyx-own-ink); font-weight: 600; }
.pyx-tk.is-watch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }

/* hover tip */
.pyx-tip {
  position: absolute; z-index: 20; width: 220px; transform: translateY(-100%); pointer-events: none;
  padding: 9px 11px; border-radius: 10px; background: var(--fx-surface, var(--surface)); box-shadow: var(--fx-shadow-pop);
  border: 1px solid var(--pyx-line); font-size:13.5px; line-height: 1.35; color: var(--text-2);
}
.pyx-tip[hidden] { display: none; }
.pyx-tip b { display: block; color: var(--text); margin-bottom: 2px; }
.pyx-tip span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* ── the list for the chosen level ── */
.pyx-list { margin-top: 16px; border-top: 1px solid var(--pyx-line); padding-top: 16px; }
/* (the list's heading and table: "The level list" below) */

/* empty state */
.pyx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px 30px; text-align: center; color: var(--text-2); }
.pyx-empty svg { color: var(--text-2); opacity: .8; }
.pyx-empty__t { margin: 0; color: var(--text); font-weight: 500; }
.pyx-empty__s { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; }
.pyx-jump { border: 0; border-radius: 999px; background: var(--pyx-track-hi); color: var(--text); font:500 max(13px, .93em)/1 var(--sans); padding: 7px 12px; cursor: pointer; }
.pyx-jump b { font-variant-numeric: tabular-nums; margin-left: 3px; }
.pyx-jump:hover { background: var(--accent-bg); }
.pyx-empty .btn { margin-top: 6px; }

.pyx__note { margin: 14px 0 0; color: var(--text-2); font-size:max(13px, .87em); line-height: 1.5; max-width: 980px; }

/* loading: skeletons, not dashes */
.pyx-sk { display: inline-block; width: 46px; height: .95em; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--pyx-track) 0%, var(--pyx-track-hi) 50%, var(--pyx-track) 100%); background-size: 200% 100%;
  animation: pyxShimmer 1.3s linear infinite; }
.pyx-sk--w { width: 180px; }
.pyx.is-loading .pyx-bar { background: linear-gradient(90deg, var(--pyx-track) 0%, var(--pyx-track-hi) 50%, var(--pyx-track) 100%); background-size: 200% 100%; animation: pyxShimmer 1.3s linear infinite; }
.pyx.is-loading .pyx-bar__n { background: none; box-shadow: none; }
.pyx-t--sk { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.pyx-skrow { display: grid; grid-template-columns: 70px 1fr 70px 70px; gap: 16px; }
.pyx-skrow .pyx-sk { width: 100%; }
@keyframes pyxShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pyx-s, .pyx-bar, .pyx-row, .pyx-g__f { transition: none !important; }
  .pyx-sk, .pyx.is-loading .pyx-bar { animation: none; }
}

/* ── widths: the pane and a medium page ── */
@container pyx (max-width: 1080px) {
  .pyx__lad { --cols: 210px minmax(0, 1fr) 92px 104px; }
  .pyx-hd__tk, .pyx-hd__own, .pyx-row__tks, .pyx-row__own { display: none; }
}
@container pyx (max-width: 760px) {
  .pyx__lad { --cols: minmax(170px, 210px) minmax(0, 1fr) 76px 100px; }
  .pyx-row__lv b { font-size:max(13px, .93em); }
  .pyx-seg__x { display: none; }
  .pyx-bar { --lo: min(120px, 42%); }
  .pyx-row__lv { gap: 10px; }
  .pyx-row { column-gap: 12px; }
  .pyx-search { margin-left: 0; flex: 1 1 100%; }
}
/* phones: the bar on its own line, as on the board */
@container pyx (max-width: 560px) {
  .pyx-hd { display: none; }
  .pyx-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "track track track" "lv y d"; row-gap: 8px; padding: 10px 8px; }
  .pyx-row__track { grid-area: track; }
  .pyx-row__lv { grid-area: lv; }
  .pyx-row__y { grid-area: y; }
  .pyx-row__d { grid-area: d; }
  .pyx-row__lv > i { display: none; }
  .pyx-bar { --lo: min(150px, 62%); }
  .pyx-bar__n::before { content: attr(data-lv); }
  .pyx-row__c b { font-size:max(13px, 1em); }
  .pyx-seg { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; gap: 3px; }
  .pyx-seg__x { display: none; }
  .pyx-seg__b { justify-content: center; padding: 0 8px; min-height: 40px; border-radius: 13px; }
  .pyx-seg__b[data-grp="all"] { grid-column: 1 / -1; }
  .pyx-chip { width: 100%; justify-content: center; }
  .pyx__cta { width: 100%; } .pyx__cta .btn { width: 100%; }
  .pyx-list__side { align-items: flex-start; } .pyx-mix, .pyx-keys { justify-content: flex-start; }
}

@container pyx (max-width: 560px) { .pyx-bar__n::before { font:600 max(13px, .9em)/1 'Geist Mono', var(--mono); color: var(--text); margin-right: 3px; } }

/* very narrow (a phone at the largest text size): description on its own line, figures under it */
@container pyx (max-width: 420px) {
  .pyx-row { grid-template-columns: 1fr 1fr; grid-template-areas: "track track" "lv lv" "y d"; }
  .pyx-row__c { text-align: left; }
  .pyx-row__d { text-align: right; }
}

/* ═══ Yours on the pyramid ═══════════════════════════════════════
   The strip (Risk mix only) and each level's You hold · Goal · Against your goal. Status color
   is a mark only (a dot and the gauge's fill): green on goal, amber above, a hollow ring below;
   every figure stays in the text colors. Money to the cent and shares to one decimal, right-aligned
   in mono, so the columns line up on the point. */
.pyx { --pyx-band: color-mix(in srgb, var(--text) 3.5%, transparent); --pyx-ok: var(--green); --pyx-over: var(--accent); }

/* the strip: your mix against your goal */
.pyx__me:empty { display: none; }
.pyx-me { margin: 0 0 16px; padding: 14px 18px 12px; border-radius: 12px; background: var(--pyx-band); }
.pyx-me p { margin: 0; }
.pyx-me__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.pyx-me__ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.pyx-me__k { color: var(--text-2); font-weight: 500; }
.pyx-me__ratio strong { font:600 max(13px, 1.9em)/1 'Geist Mono', var(--mono); letter-spacing: -.03em; color: var(--text); }
.pyx-me__ratio strong i { font-style: normal; font-weight: 300; color: var(--text-2); margin: 0 .1em; }
.pyx-me__rest, .pyx-me__goal { color: var(--text-2); }
.pyx-me__goal b { color: var(--text); font:600 max(13px, 1em) 'Geist Mono', var(--mono); margin-left: 3px; }
.pyx-me__say { flex: 1 1 320px; color: var(--text); line-height: 1.45; }
.pyx-me__say b { font-weight: 650; font-variant-numeric: tabular-nums; }
.pyx-me__figs { display: flex; gap: 22px; margin: 0 0 0 auto; }
.pyx-me__figs > div { display: flex; flex-direction: column; align-items: flex-end; }
.pyx-me__figs dt { color: var(--text-2); font-size:max(13px, .87em); }
.pyx-me__figs dd { margin: 0; font:600 max(13px, 1.13em)/1.25 'Geist Mono', var(--mono); color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyx-me__bar { position: relative; display: flex; height: 8px; margin: 12px 0 10px; border-radius: 999px; background: var(--pyx-track-hi); }
.pyx-me__low, .pyx-me__high { display: block; height: 100%; }
.pyx-me__low { background: var(--pyx-ok); border-radius: 999px 0 0 999px; }
.pyx-me__high { background: var(--pyx-over); box-shadow: -2px 0 0 var(--pyx-panel); }
.pyx-me__high:last-child, .pyx-me__high:nth-last-child(2) { border-radius: 0 999px 999px 0; }
.pyx-me__tick { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--pyx-panel); }
.pyx-me.is-goal .pyx-me__bar { opacity: .55; }
.pyx-me__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; color: var(--text-2); font-size:max(13px, .93em); font-variant-numeric: tabular-nums; }
.pyx-me__lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pyx-me__lg b { color: var(--text); font:600 max(13px, 1em) 'Geist Mono', var(--mono); }
.pyx-me__sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pyx-me__sw--low { background: var(--pyx-ok); } .pyx-me__sw--high { background: var(--pyx-over); }
.pyx-me__sw--cash, .pyx-me__sw--unrated { box-shadow: inset 0 0 0 1.5px var(--text-2); }
.pyx-me__tk { width: 3px; height: 13px; border-radius: 2px; background: var(--text); }
.pyx-me__src { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.pyx-me__src b { color: var(--text); font-weight: 600; }
.pyx-inl {
  border: 0; background: none; padding: 0; color: var(--text); font:inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.pyx-inl:hover { color: var(--pyx-amber-ink, var(--accent)); }
.pyx-inl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pyx-me__src .pyx-inl { text-decoration: none; padding: 7px 13px; border-radius: 999px; background: var(--pyx-track-hi); font-weight: 500; }
.pyx-me__src .pyx-inl:hover { color: var(--text); background: color-mix(in srgb, var(--text) 15%, transparent); }

/* the level rows: which of the member's cells shows depends on the width (below) */
.pyx-hd__hold, .pyx-hd__goal, .pyx-hd__vs, .pyx-hd__me,
.pyx-row__hold, .pyx-row__goal, .pyx-row__vs, .pyx-row__me, .pyx-row__mob { display: none; }
.pyx-hd__vs { text-align: right; }
.pyx-row__hold, .pyx-row__goal, .pyx-row__vs, .pyx-row__me { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.pyx-row__hold b, .pyx-row__goal b, .pyx-row__vs b, .pyx-row__me b { display: block; font:500 max(13px, 1.06em)/1.25 'Geist Mono', var(--mono); color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.pyx-row__vs b { font-weight: 600; }
.pyx-row__vs.is-ok b { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.pyx-row__hold b { font-weight: 600; }
.pyx-row__hold small, .pyx-row__goal small, .pyx-row__vs small, .pyx-row__me small { display: block; font-size:max(13px, .87em); color: var(--text-2); white-space: nowrap; font-family: 'Geist Mono', var(--mono); letter-spacing: -.01em; }
.pyx-row__vs small, .pyx-row__me small, .pyx-row__goal small.is-w { font-family: var(--sans); letter-spacing: 0; }
.pyx-row__hold b.is-nil, .pyx-row__goal b.is-nil, .pyx-row__vs b.is-nil { color: var(--text-2); font-weight: 500; }
.pyx-dot { display: inline-block; width: 8px; height: 8px; margin: 0 6px 1px 0; border-radius: 50%; vertical-align: middle; background: var(--pyx-track-hi); }
.is-ok .pyx-dot { background: var(--pyx-ok); }
.is-over .pyx-dot { background: var(--pyx-over); }
.is-under .pyx-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-2); }
/* the gauge: fill = held, tick = goal, on the larger of the two */
.pyx-g { position: relative; display: block; height: 4px; margin: 5px 0 1px auto; width: 100%; max-width: 132px; border-radius: 999px; background: var(--pyx-track-hi); }
.pyx-g__f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 70%, transparent); transition: width .5s var(--pyx-ease); }
.is-ok .pyx-g__f { background: var(--pyx-ok); }
.is-over .pyx-g__f { background: var(--pyx-over); }
.pyx-g__t { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
/* cash / not yet rated: beside the pyramid, not choosable */
.pyx-row--static { cursor: default; }
.pyx-row--static:hover { background: none; }
.pyx-row__note { color: var(--text-2); font-size:max(13px, .93em); text-align: center; }
.pyx-rows--extra:empty { display: none; }
.pyx-rows--extra { margin-top: 2px; }

/* wide page: level · bar · yield · discount · tickers · You hold · Goal · Against your goal */
.pyx.has-mine .pyx__lad { --cols: 232px minmax(0, 1fr) 84px 98px 150px 100px 100px 138px; }
.pyx.has-mine:not(.has-goal) .pyx__lad { --cols: 232px minmax(0, 1fr) 96px 108px 206px 112px; }
.pyx.has-mine .pyx-hd__own, .pyx.has-mine .pyx-row__own { display: none; }
.pyx.has-mine .pyx-hd__hold, .pyx.has-mine .pyx-row__hold { display: block; }
.pyx.has-mine.has-goal .pyx-hd__goal, .pyx.has-mine.has-goal .pyx-row__goal,
.pyx.has-mine.has-goal .pyx-hd__vs, .pyx.has-mine.has-goal .pyx-row__vs { display: block; }
.pyx.has-mine .pyx-hd__tk, .pyx.has-mine .pyx-row__tks { grid-column: auto; }
.pyx.has-mine .pyx-sub--own { display: inline; }
.pyx.has-mine .pyx-sub--lv { display: none; }
.pyx.has-mine .pyx-row { column-gap: 14px; }

/* medium page and the dashboard pane: one compact "you · goal" column */
@container pyx (max-width: 1240px) {
  .pyx.has-mine .pyx__lad, .pyx.has-mine:not(.has-goal) .pyx__lad { --cols: 210px minmax(0, 1fr) 84px 98px 112px; }
  .pyx.has-mine .pyx-hd__tk, .pyx.has-mine .pyx-row__tks, .pyx.has-mine .pyx-row__own,
  .pyx.has-mine .pyx-hd__hold, .pyx.has-mine .pyx-row__hold,
  .pyx.has-mine.has-goal .pyx-hd__goal, .pyx.has-mine.has-goal .pyx-row__goal,
  .pyx.has-mine.has-goal .pyx-hd__vs, .pyx.has-mine.has-goal .pyx-row__vs { display: none; }
  .pyx.has-mine .pyx-hd__me, .pyx.has-mine .pyx-row__me { display: block; }
}
@container pyx (max-width: 760px) {
  .pyx.has-mine .pyx__lad, .pyx.has-mine:not(.has-goal) .pyx__lad { --cols: minmax(150px, 184px) minmax(0, 1fr) 70px 88px 84px; }
  .pyx.has-mine .pyx-row { column-gap: 11px; }
  .pyx-me__figs { margin-left: 0; }
  .pyx-me__src { margin-left: 0; }
}
/* phones: the member's line runs under the row, full width */
@container pyx (max-width: 560px) {
  .pyx.has-mine .pyx-row__me { display: none; }
  .pyx.has-mine .pyx-row { grid-template-areas: "track track track" "lv y d" "mob mob mob"; }
  .pyx.has-mine .pyx-row__mob {
    grid-area: mob; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline;
    padding-top: 8px; border-top: 1px solid var(--pyx-rule); font-size:max(13px, .93em); color: var(--text-2); font-variant-numeric: tabular-nums;
  }
  .pyx-row__mob b { color: var(--text); font:600 max(13px, 1em) 'Geist Mono', var(--mono); }
  .pyx-row__mob .pyx-mob__a > span { font-family: 'Geist Mono', var(--mono); color: var(--text-2); margin-left: 4px; }
  .pyx-row__mob .pyx-mob__b { text-align: right; }
  .pyx-row__mob .pyx-g { grid-column: 1 / -1; max-width: none; margin: 2px 0; }
  .pyx-row__mob .pyx-mob__s { grid-column: 1 / -1; color: var(--text); font-weight: 500; }
  .pyx-row--static .pyx-row__track { display: none; }
  .pyx.has-mine .pyx-row--static { grid-template-areas: "lv lv lv" "mob mob mob"; }
  .pyx-me { padding: 12px 14px 10px; }
  .pyx-me__ratio strong { font-size:max(13px, 1.7em); }
  .pyx-me__figs { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
  .pyx-me__lg { white-space: normal; flex-wrap: wrap; column-gap: 7px; }
  .pyx-me__figs > div { align-items: flex-start; }
  .pyx-me__src { width: 100%; justify-content: space-between; flex-wrap: wrap; white-space: normal; row-gap: 6px; }
}
@container pyx (max-width: 420px) {
  .pyx.has-mine .pyx-row { grid-template-areas: "track track" "lv lv" "y d" "mob mob"; }
  .pyx.has-mine .pyx-row--static { grid-template-areas: "lv lv" "mob mob"; }
}

/* ═══ The panels under the pyramid on Risk mix ════════════════════
   "Your RMS universe" (universe.js) and "Adjust your goal" (app.js) in the pyramid's panel shape:
   the same surface, radius, elevation, gap and heading. */
#viewRisk .rk-top { margin: 0; }
#viewRisk .rmsu, #viewRisk .rk-adjust {
  margin: 0 0 18px; border-radius: 14px; background: var(--fx-panel); box-shadow: var(--fx-panel-shadow);
}
#viewRisk .rmsu__head { padding: 22px 24px 8px; }
#viewRisk .rmsu .rmsu__title, #viewRisk .rk-adjust__t { font:600 18px/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); }
#viewRisk .rmsu__hint { font-size:14px; color: var(--text-2); }
#viewRisk .rk-adjust__head { padding: 20px 60px 20px 24px; border-radius: 14px; }
#viewRisk .rk-adjust__head:hover { background: var(--pyx-hover, color-mix(in srgb, var(--text) 4%, transparent)); }
#viewRisk .rk-adjust.is-open .rk-adjust__head { border-radius: 14px 14px 0 0; }
#viewRisk .rk-adjust__body { padding: 0 24px 24px; }
#viewRisk .rk-adjust__now { color: var(--text-2); font-size:14px; }
#viewRisk .rk-note { margin-top: 6px; color: var(--text-2); font-size:14px; }
#viewRisk .rk-foot { color: var(--text-2); font-size:14px; }

/* "Your RMS universe" (universe.js) sits under the pyramid on Risk mix: its meters take the same
   rounded-bar shape as the pyramid's bars. */
#viewRisk .rmsu-bar { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); }
#viewRisk .rmsu-bar i { border-radius: 6px; }
#viewRisk .rmsu-row__fig b { font-family: var(--mono); }

/* ═══ The level list ═══════════════════════════════════════════════
   The funds at the chosen level are drawn as the dashboard's Universe table: a <table class="cptable">
   with its cells from cockpit.js (window.CPRow), so tickers, kind badges, level pills, prices,
   green/red change, yield colors and discount colors are the Universe's own. What is set here:
   one step larger type (13px rows, 14px tickers — the desk's "large" step), the owned / watchlist
   chip on the ticker, the per-kind section rows, and which columns fit the width (.pyc-*). */
.pyx-list__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; margin-bottom: 12px;
}
.pyx-list__ttl { min-width: 0; }
.pyx-list__h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font:600 17px/1.3 var(--sans); color: var(--text); }
.pyx-list__lv { display: grid; place-items: center; min-width: 36px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--pyx-own-bg); color: #1a1304; font:700 13px/1 var(--mono); }
.pyx-list__n { color: var(--text); }
.pyx-list__d { font-weight: 400; color: var(--text-2); font-size:15px; }
.pyx-list__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 7px 0 0; font-size:14px; }
.pyx-f { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pyx-f__l { color: var(--text-2); }
.pyx-f > b { font:600 max(13px, 1em)/1.3 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pyx-f > b small { font:400 max(13px, 1em) var(--mono); color: var(--text-2); }
.pyx-list__vs > b { font-family: var(--sans); letter-spacing: 0; }
.pyx-list__vs .pyx-dot { align-self: center; margin: 0; }
.pyx-list__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; }
.pyx-mix, .pyx-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size:13px; color: var(--text-2); justify-content: flex-end; }
.pyx-mix__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pyx-mix__i b { color: var(--text); font:600 max(13px, 1em) var(--mono); font-variant-numeric: tabular-nums; }
.pyx-key { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pyx:not(.has-own) .pyx-key:first-child { display: none; }

/* the table */
.pyx-t__wrap { position: relative; }
.pyx--page .pyx-t__wrap { max-height: min(66vh, 620px); overflow: auto; scrollbar-width: thin; }
.pyx .pyx-cpt { width: 100%; border-collapse: collapse; }
.pyx .pyx-cpt thead th {
  font:600 13px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
  background: var(--pyx-panel); padding: 8px 11px; border-bottom: 1px solid var(--soft-line, var(--border)); z-index: 3;
}
.pyx--pane .pyx-cpt thead th { background: var(--bg-raised); }
.pyx .pyx-cpt thead th.cps-asc, .pyx .pyx-cpt thead th.cps-desc { color: var(--accent-soft); }
body[data-theme="light"] .pyx .pyx-cpt thead th.cps-asc, body[data-theme="light"] .pyx .pyx-cpt thead th.cps-desc { color: var(--pyx-amber-ink); }
.pyx .pyx-cpt thead th.cps-asc::after { content: " ▲"; font-size:13px; }
.pyx .pyx-cpt thead th.cps-desc::after { content: " ▼"; font-size:13px; }
.pyx-cpt .pyx-sort { border: 0; background: none; padding: 0; margin: 0; font:inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pyx-cpt .pyx-sort:hover { color: var(--text); }
.pyx-cpt .pyx-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.pyx .pyx-cpt tbody td { font-size:13px; padding: 7px 11px; }
.pyx .pyx-cpt .cp-tk {
  display: inline-block; vertical-align: middle; font:700 14px/1.25 var(--sans); letter-spacing: .01em; padding: 1px 6px; margin-left: -6px; border-radius: 5px;
}
body[data-theme="light"] .pyx .pyx-cpt .cp-tk:not(.pyx-own) { color: var(--pyx-amber-ink); }
.pyx .cp-tk.pyx-own { background: var(--pyx-own-bg); color: var(--pyx-own-ink); }
.pyx .cp-tk.pyx-watch { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pyx-key .cp-tk { font:700 13px/1.25 var(--sans); padding: 1px 6px; border-radius: 5px; }
.pyx-key .cp-tk:not(.pyx-own) { color: var(--text); }
.pyx .pyx-cpt .fund-kind { font-size:13px; }
.pyx .pyx-cpt .cp-lvl { font-size:13px; }
.pyx .pyx-cpt tbody td.pyc-name, .pyx .pyx-cpt thead th.pyc-name { width: 100%; max-width: 0; }
.pyx .pyx-cpt tbody td.pyc-name { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-weight: 500; font-size:13.5px; }
.pyx .pyx-cpt tbody tr[data-tk]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pyx .pyx-cpt tbody tr.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.pyc-sub { display: none; }
.pyx .pyx-cpt td.pyc-rms { white-space: nowrap; }
.pyx-tag { display: inline-block; margin: 0 5px 0 0; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-hover); color: var(--text-2); font:600 13px/1.4 var(--sans); white-space: nowrap; }
.pyx-tag--kit { color: var(--text); border-color: color-mix(in srgb, #3987e5 55%, transparent); background: color-mix(in srgb, #3987e5 16%, transparent); }
body[data-text-size="large"] .pyx .pyx-cpt tbody td { font-size:14px; }
body[data-text-size="large"] .pyx .pyx-cpt .cp-tk { font-size:15px; }
body[data-text-size="large"] .pyx .pyx-cpt tbody td.pyc-name { font-size:14.5px; }
body[data-text-size="large"] .pyx .pyx-cpt thead th { font-size:13px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt tbody td { font-size:15.5px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt .cp-tk { font-size:16.5px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt tbody td.pyc-name { font-size:16px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt thead th { font-size:13.5px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt .fund-kind, body[data-text-size="xlarge"] .pyx .pyx-cpt .cp-lvl { font-size:13px; }

/* a section row per kind of fund, in the table's own type */
.pyx .pyx-cpt tbody tr.pyx-gr { cursor: default; background: none; }
.pyx .pyx-cpt tr.pyx-gr th {
  padding: 16px 11px 7px; text-align: left; font:400 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--text-2); border-bottom: 1px solid var(--soft-line, var(--border)); background: none;
}
.pyx .pyx-cpt .pyx-t__g:first-of-type tr.pyx-gr th { padding-top: 10px; }
.pyx-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pyx-gh .pyx-sw { margin-right: -10px; }
.pyx-gh__n { font:600 14px/1.3 var(--sans); color: var(--text); }
body[data-text-size="large"] .pyx .pyx-cpt tr.pyx-gr th { font-size:14px; }
body[data-text-size="large"] .pyx-gh__n { font-size:15px; }
body[data-text-size="xlarge"] .pyx .pyx-cpt tr.pyx-gr th { font-size:15.5px; }
body[data-text-size="xlarge"] .pyx-gh__n { font-size:16.5px; }

/* columns by width: everything on a wide page; the pane keeps Ticker · Name · Last · Chg% · Yield · Disc · Ex */
@container pyx (max-width: 1000px) { .pyx .pyx-cpt .pyc-lvl, .pyx .pyx-cpt .pyc-rms { display: none; } }
@container pyx (max-width: 820px) { .pyx .pyx-cpt .pyc-freq { display: none; } }
/* phones: the name goes under the ticker */
@container pyx (max-width: 540px) {
  .pyx .pyx-cpt .pyc-name, .pyx .pyx-cpt .pyc-ex { display: none; }
  .pyx .pyx-cpt tbody td, .pyx .pyx-cpt thead th { padding-left: 7px; padding-right: 7px; }
  .pyx .pyx-cpt tbody td.pyc-ticker { width: 100%; max-width: 0; }
  .pyx .pyx-cpt thead th > .gq { display: none; }   /* no spare padding for the mark on a phone; the figures are named in the level's heading */
  .pyc-sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font:500 13px/1.3 var(--sans); }
  .pyx .pyx-cpt tr.pyx-gr th { padding-left: 7px; padding-right: 7px; }
  .pyx-gh { gap: 2px 14px; }
  .pyx-list__head { grid-template-columns: minmax(0, 1fr); }
  .pyx-list__side { align-items: flex-start; }
  .pyx-mix, .pyx-keys { justify-content: flex-start; }
}
/* the same when the reader's larger text leaves the name no room */
@container pyx (max-width: 720px) {
  body[data-text-size="xlarge"] .pyx .pyx-cpt .pyc-name, body[data-text-size="xlarge"] .pyx .pyx-cpt .pyc-ex { display: none; }
  body[data-text-size="xlarge"] .pyx .pyx-cpt tbody td, body[data-text-size="xlarge"] .pyx .pyx-cpt thead th { padding-left: 7px; padding-right: 7px; }
  body[data-text-size="xlarge"] .pyx .pyx-cpt tbody td.pyc-ticker { width: 100%; max-width: 0; }
  body[data-text-size="xlarge"] .pyx .pyx-cpt thead th > .gq { display: none; }
  body[data-text-size="xlarge"] .pyc-sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font:500 13px/1.3 var(--sans); }
  body[data-text-size="xlarge"] .pyx .pyx-cpt tr.pyx-gr th { padding-left: 7px; padding-right: 7px; }
  body[data-text-size="xlarge"] .pyx-gh { gap: 2px 14px; }
  body[data-text-size="xlarge"] .pyx-list__head { grid-template-columns: minmax(0, 1fr); }
  body[data-text-size="xlarge"] .pyx-list__side { align-items: flex-start; }
  body[data-text-size="xlarge"] .pyx-mix, body[data-text-size="xlarge"] .pyx-keys { justify-content: flex-start; }
}
@container pyx (max-width: 620px) {
  body[data-text-size="large"] .pyx .pyx-cpt .pyc-name, body[data-text-size="large"] .pyx .pyx-cpt .pyc-ex { display: none; }
  body[data-text-size="large"] .pyx .pyx-cpt tbody td, body[data-text-size="large"] .pyx .pyx-cpt thead th { padding-left: 7px; padding-right: 7px; }
  body[data-text-size="large"] .pyx .pyx-cpt tbody td.pyc-ticker { width: 100%; max-width: 0; }
  body[data-text-size="large"] .pyx .pyx-cpt thead th > .gq { display: none; }
  body[data-text-size="large"] .pyc-sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font:500 13px/1.3 var(--sans); }
  body[data-text-size="large"] .pyx .pyx-cpt tr.pyx-gr th { padding-left: 7px; padding-right: 7px; }
  body[data-text-size="large"] .pyx-gh { gap: 2px 14px; }
  body[data-text-size="large"] .pyx-list__head { grid-template-columns: minmax(0, 1fr); }
  body[data-text-size="large"] .pyx-list__side { align-items: flex-start; }
  body[data-text-size="large"] .pyx-mix, body[data-text-size="large"] .pyx-keys { justify-content: flex-start; }
}
@container pyx (max-width: 400px) { .pyx .pyx-cpt .pyc-chgPct { display: none; } }

/* ═══ The dashboard pane ══════════════════════════════════════════
   Sits in the Universe's pane, so it takes that table's shape: a filter strip under the tabs,
   then one dense line per level (pill · name · bar · count · avg yield · avg discount · you own)
   with the column header in the table's header type, then the chosen level's funds. */
.pyx-hd__n2, .pyx-hd__po, .pyx-row__n2, .pyx-row__po { display: none; }
.pyx.pyx--pane .pyx__ctl { margin: 0; padding: 8px 11px; gap: 8px; border-bottom: 1px solid var(--soft-line, var(--border)); }
.pyx.pyx--pane .pyx-seg { padding: 2px; }
.pyx.pyx--pane .pyx-seg__b { min-height: 30px; padding: 0 11px; gap: 6px; font-size:13px; }
.pyx.pyx--pane .pyx-seg__b b { font:500 13px/1 var(--mono); }
.pyx.pyx--pane .pyx-chip { min-height: 32px; padding: 0 12px; font-size:13px; }
.pyx.pyx--pane .pyx__cta { margin-left: auto; }
.pyx.pyx--pane .pyx-chip__x, .pyx.pyx--pane .pyx-f--mine { display: none; }
.pyx.pyx--pane .pyx-seg__b { padding: 0 9px; gap: 5px; }
.pyx.pyx--pane .pyx__ctl { flex-wrap: nowrap; }
.pyx.pyx--pane .pyx-seg { flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
.pyx.pyx--pane .pyx-chip { padding: 0 11px; gap: 6px; flex: none; }
.pyx.pyx--pane .pyx__cta { flex: none; }
.pyx.pyx--pane .pyx-link { padding: 7px 10px 7px 12px; }
.pyx.pyx--pane .pyx-link { padding: 8px 12px; font-size:13px; }
.pyx.pyx--pane .pyx__rms { margin: 8px 11px 0; font-size:13px; }

.pyx.pyx--pane .pyx__lad,
.pyx.pyx--pane.has-mine .pyx__lad, .pyx.pyx--pane.has-mine:not(.has-goal) .pyx__lad { --cols: minmax(206px, 240px) minmax(80px, 1fr) 50px 86px 86px; }
.pyx.pyx--pane.has-own .pyx__lad { --cols: minmax(206px, 240px) minmax(80px, 1fr) 50px 86px 86px 66px; }
.pyx.pyx--pane .pyx-hd {
  column-gap: 12px; padding: 8px 11px; margin: 0; background: var(--bg-raised); border-bottom: 1px solid var(--soft-line, var(--border));
  font:600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.pyx.pyx--pane .pyx-hd .gq { display: none; }   /* the list's own column heads carry the glossary */
.pyx.pyx--pane .pyx-hd__bar { text-align: center; }
.pyx.pyx--pane .pyx-hd__n2 { display: block; }
.pyx.pyx--pane.has-own .pyx-hd__po { display: block; }
.pyx.pyx--pane .pyx-hd__tk, .pyx.pyx--pane .pyx-hd__own, .pyx.pyx--pane .pyx-hd__hold, .pyx.pyx--pane .pyx-hd__goal,
.pyx.pyx--pane .pyx-hd__vs, .pyx.pyx--pane .pyx-hd__me,
.pyx.pyx--pane .pyx-row__tks, .pyx.pyx--pane .pyx-row__own, .pyx.pyx--pane .pyx-row__hold, .pyx.pyx--pane .pyx-row__goal,
.pyx.pyx--pane .pyx-row__vs, .pyx.pyx--pane .pyx-row__me, .pyx.pyx--pane .pyx-row__mob { display: none; }
.pyx.pyx--pane .pyx-rows { gap: 0; }
.pyx.pyx--pane .pyx-row {
  grid-template-columns: var(--cols); grid-template-areas: none; column-gap: 12px; min-height: 38px; padding: 0 11px; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}
.pyx.pyx--pane .pyx-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.pyx.pyx--pane .pyx-row.is-sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.pyx.pyx--pane .pyx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pyx.pyx--pane .pyx-row > * { grid-area: auto; }
.pyx.pyx--pane .pyx-hd { display: grid; }
.pyx.pyx--pane .pyx-row__c { text-align: right; }
.pyx.pyx--pane .pyx-row__lv { gap: 10px; }
.pyx.pyx--pane .pyx-row__lv > i {
  width: 32px; height: 20px; border-radius: 4px; font:600 13px/1 var(--sans); background: none;
  color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-hover);
}
.pyx.pyx--pane .pyx-row__lv > i { display: grid; }
.pyx.pyx--pane .pyx-row.is-sel .pyx-row__lv > i { background: var(--pyx-own-bg); color: #1a1304; box-shadow: none; }
.pyx.pyx--pane .pyx-row__lv b { font:500 13.5px/1.3 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyx.pyx--pane .pyx-row__lv small { display: none; }
.pyx.pyx--pane .pyx-bar { height: 14px; border-radius: 3px; --lo: 30%; }
.pyx.pyx--pane .pyx-bar__n { display: none; }
.pyx.pyx--pane .pyx-row.is-own .pyx-bar, .pyx.pyx--pane .pyx-row:hover .pyx-bar { box-shadow: none; }
.pyx.pyx--pane .pyx-s.has-n + .pyx-s.has-n { box-shadow: -2px 0 0 var(--bg-raised); }
.pyx.pyx--pane .pyx-row.is-sel .pyx-s.has-n + .pyx-s.has-n { box-shadow: -2px 0 0 color-mix(in srgb, var(--accent) 14%, var(--bg-raised)); }
.pyx.pyx--pane .pyx-row__n2, .pyx.pyx--pane.has-own .pyx-row__po { display: block; text-align: right; white-space: nowrap; font:600 13px/1.3 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.pyx.pyx--pane .pyx-row__n2 small, .pyx.pyx--pane .pyx-row__po small { font:400 max(13px, 1em) var(--mono); color: var(--text-2); }
.pyx.pyx--pane .pyx-row__po b { font-weight: 600; color: var(--pyx-amber-ink, var(--accent-soft)); }
.pyx.pyx--pane .pyx-row__po b.is-nil { color: var(--text-2); font-weight: 400; }
.pyx.pyx--pane .pyx-row__c b { font:500 13px/1.3 var(--mono); letter-spacing: -.01em; }
.pyx.pyx--pane .pyx-row__c small { display: none; }
.pyx.pyx--pane .pyx-side { padding: 10px 11px 5px; font:600 13px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pyx.pyx--pane .pyx-list { margin-top: 0; border-top: 0; padding: 14px 0 0; }
.pyx.pyx--pane .pyx-list__head { padding: 0 11px; margin-bottom: 10px; }
.pyx.pyx--pane .pyx-list__h { font-size:15px; }
.pyx.pyx--pane .pyx-list__d { font-size:13.5px; }
.pyx.pyx--pane .pyx-list__facts { font-size:13px; gap: 3px 16px; margin-top: 5px; }
.pyx.pyx--pane .pyx-list__lv { min-width: 32px; height: 22px; font-size:13px; }
.pyx.pyx--pane .pyx__note { margin: 12px 11px 0; font-size:13px; }
.pyx.pyx--pane .pyx-empty { padding: 26px 11px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-row__lv b { font-size:14.5px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-row__c b, body[data-text-size="large"] .pyx.pyx--pane .pyx-row__n2,
body[data-text-size="large"] .pyx.pyx--pane.has-own .pyx-row__po { font-size:14px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-hd { font-size:13px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-row__lv b { font-size:16px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-row__c b, body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-row__n2,
body[data-text-size="xlarge"] .pyx.pyx--pane.has-own .pyx-row__po { font-size:15.5px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-hd { font-size:13.5px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-row { min-height: 44px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx__lad,
body[data-text-size="xlarge"] .pyx.pyx--pane.has-mine .pyx__lad { --cols: minmax(220px, 270px) minmax(70px, 1fr) 48px 84px 94px; }
body[data-text-size="xlarge"] .pyx.pyx--pane.has-own .pyx__lad { --cols: minmax(220px, 270px) minmax(70px, 1fr) 48px 84px 94px 74px; }

/* a narrow pane: the name column gives, then the bar drops under the line */
@container pyx (max-width: 620px) {
  .pyx.pyx--pane .pyx__lad, .pyx.pyx--pane.has-mine .pyx__lad { --cols: minmax(0, 1fr) 40px 70px 78px; }
  .pyx.pyx--pane.has-own .pyx__lad { --cols: minmax(0, 1fr) 40px 70px 78px 58px; }
  .pyx.pyx--pane .pyx-hd__bar { display: none; }
  .pyx.pyx--pane .pyx-row { row-gap: 5px; padding: 8px 11px 9px; }
  .pyx.pyx--pane .pyx-row__track { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .pyx.pyx--pane .pyx-bar { height: 8px; border-radius: 2px; --lo: 30%; }
}
@container pyx (max-width: 680px) { .pyx.pyx--pane .pyx__cta { display: none; } }
.pyx .pyx-cpt thead th:last-child > .gq { right: 1px; }
/* a phone: two lines a level — pill, name and what you own; then the bar with its count, yield and discount */
@container pyx (max-width: 480px) {
  .pyx.pyx--pane .pyx__lad, .pyx.pyx--pane.has-mine .pyx__lad, .pyx.pyx--pane.has-own .pyx__lad { --cols: minmax(0, 1fr) 34px 66px 74px; }
  .pyx.pyx--pane .pyx-hd__avg, .pyx.pyx--pane .pyx-hd .gq, .pyx.pyx--pane.has-own .pyx-hd__po { display: none; }
  .pyx.pyx--pane .pyx-row { row-gap: 6px; padding: 9px 11px 10px; column-gap: 10px; }
  .pyx.pyx--pane .pyx-row__lv { grid-row: 1; grid-column: 1 / 4; }
  .pyx.pyx--pane:not(.has-own) .pyx-row__lv { grid-column: 1 / -1; }
  .pyx.pyx--pane.has-own .pyx-row__po { grid-row: 1; grid-column: 4; }
  .pyx.pyx--pane .pyx-row__track { grid-row: 2; grid-column: 1; justify-content: center; }
  .pyx.pyx--pane .pyx-row__n2 { grid-row: 2; grid-column: 2; }
  .pyx.pyx--pane .pyx-row__y { grid-row: 2; grid-column: 3; }
  .pyx.pyx--pane .pyx-row__d { grid-row: 2; grid-column: 4; }
  .pyx.pyx--pane .pyx-row--static .pyx-row__track { display: none; }
  .pyx.pyx--pane .pyx-bar { height: 10px; }
  .pyx.pyx--pane.has-own .pyx-row__po::before { content: "you own "; font:400 13px var(--sans); color: var(--text-2); }
  .pyx.pyx--pane .pyx__ctl { flex-wrap: wrap; }
  .pyx.pyx--pane .pyx-seg { flex: 1 1 100%; }
}
/* contrast inside the pyramid, measured on the selected (tinted) row too: dates and pay schedule in
   the secondary text color (7:1+), a brighter red on dark (4.5:1+ on the tint), deeper amber ink on paper */
.pyx .pyx-cpt td.cp-flat { color: var(--text-2); }
.pyx .pyx-cpt td.cp-down { color: var(--red); }   /* the one site red (W19): #ff6b73 dark, 5.83:1 on the tint; #9a2e27 light */
body[data-theme="light"] .pyx { --pyx-amber-ink: #6e4700; }
body[data-theme="light"] .pyx .gq { color: var(--text-2); }
body[data-theme="light"] .pyx .pyx-cpt thead th:not(.cps-asc):not(.cps-desc), body[data-theme="light"] .pyx.pyx--pane .pyx-hd,
body[data-theme="light"] .pyx.pyx--pane .pyx-side { color: var(--text-2); }

/* ═══ Adjust your goal (app.js renderRiskMix; the controls are index.html #riskGoalCtl) ═══════
   In the dashboard's pane chrome, with cockpit.css's own classes: the panel is a .cpane (1px hairline,
   the pane radius, its small shadow), the header a .cpane__bar with a .cpane__title label and the
   summary as .cpane__meta, the presets .cpane__tab pills, the table a .cptable (the Universe's mono
   uppercase heads and 1px row lines), the fields in the filter bar's control size. What is set here
   is only what those classes don't do, and sizes (em off .rkg's 14px, so the three text sizes scale
   it; nothing under 13px). */
#viewRisk .rk-adjust.cpane {
  display: block; margin: 0 0 18px; background: var(--bg); border-radius: var(--radius, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .035);
}
#viewRisk .rk-adjust__head.cpane__bar {
  height: auto; min-height: 40px; padding: 6px 40px 6px 14px; gap: 4px 14px; flex-wrap: wrap;
  border-radius: var(--radius, 12px); border-bottom-color: transparent;
}
#viewRisk .rk-adjust.is-open .rk-adjust__head.cpane__bar { border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; border-bottom-color: var(--soft-line, var(--border)); }
#viewRisk .rk-adjust__head.cpane__bar:hover { background-color: color-mix(in srgb, var(--text) 3%, transparent); }
#viewRisk .rk-adjust .rk-adjust__t.cpane__title {   /* pyramid.css's panel heading above would make it 18px sans */
  font:700 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
#viewRisk .rk-adjust__now.cpane__meta {
  display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; white-space: nowrap;
  color: var(--text-2); font:600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
#viewRisk .rk-adjust__now.cpane__meta::before { content: "·"; margin-right: 10px; color: var(--text-2); }
#viewRisk .rk-adjust__now.cpane__meta b { margin-left: 4px; color: var(--accent-soft, var(--accent)); font:inherit; letter-spacing: inherit; }
body[data-theme="light"] #viewRisk .rk-adjust__now.cpane__meta b { color: #6e4700; }
#viewRisk .rk-adjust__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font:600 13px/1.2 var(--sans); }
#viewRisk .rk-adjust__ok::before { content: ""; width: 5px; height: 10px; margin: -3px 2px 0 1px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#viewRisk .rk-adjust__ok[hidden] { display: none; }
#viewRisk .rk-adjust .rk-adjust__chev { right: 17px; width: 7px; height: 7px; margin-top: -5px; }
#viewRisk .rk-adjust.is-open .rk-adjust__chev { margin-top: -1px; }
#viewRisk .rk-adjust__body { padding: 12px 14px 14px; }
body[data-text-size="large"] #viewRisk .rk-adjust .rk-adjust__t.cpane__title, body[data-text-size="large"] #viewRisk .rk-adjust__now.cpane__meta { font-size:14px; }
body[data-text-size="xlarge"] #viewRisk .rk-adjust .rk-adjust__t.cpane__title, body[data-text-size="xlarge"] #viewRisk .rk-adjust__now.cpane__meta { font-size:15.5px; }

.rkg {
  container: rkg / inline-size; font-size:14px; color: var(--text);
  --rkg-amber: var(--accent-soft, var(--accent));
  --rkg-row: rgba(255, 255, 255, .04);                         /* = .cptable tbody td */
  --rkg-line: var(--soft-line, rgba(255, 255, 255, .08));
  --rkg-ctl-bg: var(--surface-2); --rkg-ctl-edge: var(--soft-line, var(--border));
  --rkg-ctl-in: inset 0 1px 2px rgba(0, 0, 0, .25);            /* = the filter bar's selects */
}
body[data-text-size="large"] .rkg { font-size:15px; }
body[data-text-size="xlarge"] .rkg { font-size:16.5px; }
body[data-theme="light"] .rkg { --rkg-amber: #6e4700; --text-2: #3d424c; --rkg-row: rgba(15, 23, 42, .05); --rkg-ctl-in: inset 0 1px 2px rgba(15, 23, 42, .08); }
.rkg *, .rkg *::before, .rkg *::after { box-sizing: border-box; }
.rkg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* row 1: ratio and cash, side by side, in the filter bar's control size */
.rkg-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; padding: 0 0 12px; }
.rkg-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rkg-lbl { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); font:500 max(13px, .965em)/1.3 var(--sans); }
.rkg-ratio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#viewRisk .rkg-seg.cpane__tabs { display: inline-flex; gap: 4px; }
#viewRisk .rkg-seg .cpane__tab {
  min-height: 30px; padding: 0 12px; font:650 max(13px, .93em)/1 'Geist Mono', var(--mono); letter-spacing: -.01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#viewRisk .rkg-seg .cpane__tab[data-custom] { font-family: var(--sans); letter-spacing: 0; }
#viewRisk .rkg-seg .cpane__tab:not(.is-active) { border-color: var(--rkg-ctl-edge); color: var(--text-2); }
.rkg-num { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font:600 max(13px, .965em)/1 'Geist Mono', var(--mono); }
.rkg-num[hidden] { display: none; }
.rkg-num output { min-width: 2ch; color: var(--text); font-variant-numeric: tabular-nums; }
.rkg-num input, .rkg-cash {
  height: 30px; border: 1px solid var(--rkg-ctl-edge); border-radius: 7px; background: var(--rkg-ctl-bg); box-shadow: var(--rkg-ctl-in); color: var(--text);
}
.rkg-num input {
  width: 3.9em; padding: 0 8px; text-align: right; font:600 max(13px, .965em)/1 'Geist Mono', var(--mono); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.rkg-num input::-webkit-outer-spin-button, .rkg-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rkg-num input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--border-accent, var(--accent)); }
.rkg-f--cash { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.rkg-f--cash .rkg-lbl { grid-column: 1 / -1; justify-self: start; }
.rkg-cash { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.rkg-cash:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--border-accent, var(--accent)); }
.rkg-cash em { font-style: normal; color: var(--text-2); font:600 max(13px, .965em)/1 'Geist Mono', var(--mono); }
.rkg-cash input {
  width: 9.5ch; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; text-align: right; color: var(--text);
  font:600 max(13px, .965em)/1 'Geist Mono', var(--mono); font-variant-numeric: tabular-nums; box-shadow: none;
}
.rkg-cash input::placeholder { color: var(--text-2); opacity: 1; }
.rkg-f__hint { color: var(--text-2); font-size:max(13px, .965em); }

/* the table: a .cptable, the Universe's own; four columns — Level, Your goal (stepper, its dollars under it),
   You have (dollars, the share under it), Gap (a plain phrase and a small bar). Sizes 13px and up. */
.rkg-intro { margin: 0 0 12px; color: var(--text); font:500 max(13px, 1.035em)/1.45 var(--sans); }
.rkg-map { overflow-x: auto; scrollbar-width: thin; margin: 0 -14px; }
.rkg .rkg-t { width: 100%; font-size: inherit; font-variant-numeric: tabular-nums; }   /* not .cptable's 12px */
.rkg .rkg-t thead th { position: static; cursor: default; padding: 6px 11px; font-size:max(13px, .93em); letter-spacing: .09em; }
.rkg .rkg-t thead th:first-child, .rkg .rkg-t .rkg-c--lv:first-child { padding-left: 14px; }
.rkg .rkg-t thead th:last-child, .rkg .rkg-t .rkg-c:last-child { padding-right: 14px; }
body[data-theme="light"] .rkg .rkg-t thead th { color: var(--text-2); }
.rkg .rkg-t tbody tr { cursor: default; }
.rkg-c { padding: 5px 11px; text-align: right; white-space: nowrap; vertical-align: middle; }
.rkg .rkg-t .rkg-c--lv { text-align: left; }
.rkg .rkg-t thead .rkg-c--g { text-align: center; }
.rkg .rkg-t .rkg-c--df { width: 1%; text-align: left; }
.rkg .rkg-r > .rkg-c { padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rkg-row); color: var(--text); font:600 max(13px, 1em)/1.3 'Geist Mono', var(--mono); letter-spacing: -.01em; }
.rkg .rkg-r > .rkg-c.is-nil { color: var(--text-2); }
.rkg .rkg-r > .rkg-c--lv { min-width: 15em; white-space: normal; font:500 max(13px, 1em)/1.3 var(--sans); letter-spacing: 0; }
.rkg-lv { display: inline; color: var(--text); }
.rkg-lv > b { font:700 max(13px, 1em)/1.3 'Geist Mono', var(--mono); letter-spacing: -.01em; color: var(--text); }
.rkg-lv__dot { margin: 0 .4em; color: var(--text-2); }
.rkg-sub { display: block; margin-top: 2px; color: var(--text-2); font:500 max(13px, .93em)/1.2 'Geist Mono', var(--mono); letter-spacing: -.01em; }

/* the goal stepper: − 17.5% + (0.5 a step; arrow keys on the figure), a filter-bar control; its dollars under it */
.rkg-gcell { display: inline-flex; flex-direction: column; align-items: center; }
.rkg-step {
  display: inline-flex; align-items: center; gap: 1px; padding: 1px; border: 1px solid var(--rkg-ctl-edge); border-radius: 7px;
  background: var(--rkg-ctl-bg); box-shadow: var(--rkg-ctl-in);
}
.rkg-step__b {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer;
  color: var(--text); font:500 16px/1 var(--sans);
}
.rkg-step__b:hover { background: var(--surface-3, var(--fx-track-hi)); }
.rkg-step__b:active { transform: translateY(1px); }
.rkg-step__v { display: inline-flex; align-items: center; padding: 0 1px; }
.rkg-step__v input {
  width: 3.9em; height: 24px; padding: 0 1px 0 3px; border: 0; border-radius: 4px; background: none; text-align: right; box-shadow: none;
  color: var(--text); font:600 max(13px, 1em)/1 'Geist Mono', var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.rkg-step__v input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.rkg-step__v i { font-style: normal; color: var(--text); font:600 max(13px, 1em)/1 'Geist Mono', var(--mono); }
body[data-text-size="large"] .rkg-step__b { width: 26px; height: 26px; }
body[data-text-size="xlarge"] .rkg-step__b { width: 29px; height: 29px; font-size:18px; }

/* what you have: dollars, the share of working capital under it */
.rkg-hv { display: inline-flex; flex-direction: column; align-items: flex-end; }
.rkg-hv > b { font-weight: 600; }

/* each side of the ratio: one sentence line */
.rkg .rkg-gr > .rkg-c { padding-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rkg-line); color: var(--text); font:400 max(13px, 1em)/1.35 var(--sans); letter-spacing: 0; white-space: normal; }
.rkg .rkg-g:first-of-type .rkg-gr > .rkg-c { padding-top: 8px; }
.rkg-gh { display: inline-flex; align-items: baseline; gap: 9px; color: var(--text-2); }
.rkg-gh b { color: var(--text); font-weight: 650; }
.rkg-sw { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.rkg-sw--low { background: var(--green); } .rkg-sw--high { background: var(--accent); }

/* the gap: a small bar (what you have, the tick at your goal) and a plain phrase — more than the goal in
   amber, short of it plain, on goal in green (the pyramid's 2-point rule) */
.rkg-gap { display: inline-flex; align-items: center; gap: 10px; }
.rkg-gap__bar { position: relative; flex: none; width: 56px; height: 6px; border-radius: 3px; background: var(--rkg-row); box-shadow: inset 0 0 0 1px var(--rkg-line); }
.rkg-gap__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--text-2); opacity: .75; }
.rkg-gap__bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.rkg-gap__t { color: var(--text-2); font:500 max(13px, 1em)/1.3 var(--sans); letter-spacing: 0; white-space: nowrap; }
.rkg-gap__t b { color: var(--text); font:600 max(13px, 1em)/1.3 'Geist Mono', var(--mono); letter-spacing: -.01em; }
.rkg-c--df.is-over .rkg-gap__t b { color: var(--rkg-amber); }
.rkg-c--df.is-over .rkg-gap__bar i { background: var(--accent); opacity: 1; }
.rkg-c--df.is-ok .rkg-gap__t { color: var(--green); font-weight: 600; }
.rkg-c--df.is-ok .rkg-gap__bar i { background: var(--green); opacity: 1; }
.rkg-c--df.is-none .rkg-gap__t { padding-left: calc(56px + 10px); }

/* the total: the goals add to 100%, or say they don't, in amber — one line, no repeated figures */
.rkg .rkg-tot > .rkg-c { padding-top: 10px; padding-bottom: 2px; border-top: 1px solid var(--fx-total, var(--rkg-line)); border-bottom: 0; white-space: normal; }
.rkg-tot__l { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rkg-tot__ok { color: var(--text); font:650 max(13px, 1em)/1.35 var(--sans); }
.rkg-tot__ok::before { content: ""; display: inline-block; width: 5px; height: 10px; margin: 0 9px 0 2px; border: solid var(--green); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.rkg-tot__warn { color: var(--rkg-amber); font:650 max(13px, 1em)/1.35 var(--sans); }
.rkg-tot__warn::before { content: "!"; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #1a1304; font:800 max(13px, .8em)/1 var(--sans); vertical-align: 1px; }
.rkg-tot__of { color: var(--text-2); font:400 max(13px, .965em)/1.35 var(--sans); }
body[data-theme="light"] .rkg-tot__warn::before { color: #fff; }

/* footer: Save (the page's one amber action, drawn like Research's Analyze), Reset, one line of help */
.rkg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; }
.rkg-save, .rkg-reset {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: filter .15s, background-color .15s, border-color .15s;
}
.rkg-save { background: #e0a82e; color: #1a1304; font:650 max(13px, .965em)/1 var(--sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); }
.rkg-save:hover { filter: brightness(1.06); }
.rkg-reset { border: 1px solid var(--rkg-ctl-edge); background: var(--rkg-ctl-bg); color: var(--text); font:600 max(13px, .965em)/1 var(--sans); }
.rkg-reset:hover { border-color: var(--border-hover, var(--rkg-ctl-edge)); }
.rkg-save:active, .rkg-reset:active { transform: translateY(1px); }
#viewRisk .rkg-seg .cpane__tab:focus-visible, .rkg-step__b:focus-visible, .rkg-save:focus-visible, .rkg-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rkg-hint { flex: 1 1 280px; margin: 0 0 0 8px; color: var(--text-2); font-size:max(13px, .965em); line-height: 1.45; }

/* a phone (or a narrow panel): each level stacks — its name on a line of its own, then your goal and what
   you have side by side, then the gap — with the column names beside the figures */
@container rkg (max-width: 720px) {
  .rkg-row { flex-direction: column; align-items: stretch; gap: 12px; }
  #viewRisk .rkg-seg.cpane__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #viewRisk .rkg-seg .cpane__tab { padding: 0 6px; }
  .rkg-f--cash { grid-template-columns: auto minmax(0, 1fr); }
  .rkg-map { overflow: visible; margin: 0; }
  .rkg-t, .rkg-t tbody, .rkg-t tfoot { display: block; }
  .rkg-t thead { display: none; }
  .rkg-t tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rkg-line); }
  .rkg-t tr.rkg-r {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: end;
    grid-template-areas: "lv lv" "g hv" "df df";
  }
  .rkg .rkg-t .rkg-c { display: block; width: auto; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; white-space: normal; }
  .rkg-t .rkg-c--lv { grid-area: lv; }
  .rkg-t .rkg-c--g { grid-area: g; }
  .rkg-t .rkg-c--hv { grid-area: hv; justify-self: end; text-align: right !important; }
  .rkg-t .rkg-c--df { grid-area: df; }
  .rkg-t .rkg-c--g::before, .rkg-t .rkg-c--hv::before { content: attr(data-l); display: block; margin-bottom: 4px; color: var(--text-2); font:500 max(13px, .93em)/1.2 var(--sans); letter-spacing: 0; }
  .rkg-t .rkg-gcell { align-items: flex-start; }
  .rkg-t .rkg-gcell .rkg-sub { margin-left: 2px; }
  .rkg-t .rkg-gap { display: flex; }
  .rkg-t .rkg-gap__t { white-space: normal; }
  .rkg-t .rkg-c--df.is-none { display: none !important; }
  .rkg-t .rkg-gr { padding-top: 16px; }
  .rkg-t .rkg-g:first-of-type .rkg-gr { padding-top: 2px; }
  .rkg-t .rkg-tot { border-bottom: 0; border-top: 1px solid var(--fx-total, var(--rkg-line)); padding-top: 10px; }
  .rkg-hint { margin: 4px 0 0; flex-basis: 100%; }
}
@container rkg (max-width: 26em) {
  #viewRisk .rkg-seg.cpane__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rkg-f--cash { grid-template-columns: auto; }
}
@media (max-width: 640px) {
  #viewRisk .rk-adjust__body { padding: 10px 12px 12px; } #viewRisk .rk-adjust__head.cpane__bar { padding-left: 12px; }
  #viewRisk .rk-adjust__now.cpane__meta::before { content: none; }   /* the summary wraps under the label here */
}

/* ═══ Par fixes Sep 27: the Fund pyramid's top in the dashboard's pane chrome ═════════════════
   Owner: the top of the pyramid was a big soft floating panel ("not up to par"). On Risk mix it is now
   a .cpane like the Calendar and "Adjust your goal" above: the 1px hairline, the pane radius and small
   shadow, the page color inside; a slim .cpane__bar "— FUND PYRAMID · 316 FUNDS BY LEVEL" with the
   Import button at its end in the filter bar's size; the mix against the goal as one compact row; the
   kind pills, RMS chip and search as the dashboard filter bar's controls (cockpit.css .cpfilters__more:
   30px, 1px edge, small radius, surface-2); the level heads in the Universe table's small caps; rows
   separated by 1px lines. "Your RMS universe" under it takes the same pane chrome. Sizes 13px and up
   (the small-caps heads 12.5px, as the Universe's). */
#viewRisk .pyx--page.cpane {
  display: block; padding: 0; margin: 0 0 18px; background: var(--bg); --pyx-panel: var(--bg);
  border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .035);
}
body[data-theme="light"] #viewRisk .pyx--page.cpane { box-shadow: 0 1px 2px rgba(58, 48, 30, .06), 0 6px 18px -12px rgba(58, 48, 30, .16); }
/* the bar */
#viewRisk .pyx--page .pyx__head.cpane__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; height: auto; min-height: 40px; margin: 0; padding: 5px 8px 5px 14px;
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; border-bottom: 1px solid var(--soft-line, var(--border));
}
#viewRisk .pyx--page .pyx__h.cpane__title {
  margin: 0; font:700 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
#viewRisk .pyx--page .pyx__sub.cpane__meta {
  display: inline; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; min-width: 0;
  color: var(--text-2); font:600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
#viewRisk .pyx--page .pyx__sub.cpane__meta::before { content: "·"; margin-right: 10px; color: var(--text-2); }
#viewRisk .pyx--page .pyx__sub.cpane__meta b { font:inherit; color: var(--accent-soft, var(--accent)); }
body[data-theme="light"] #viewRisk .pyx--page .pyx__sub.cpane__meta b { color: #6e4700; }
#viewRisk .pyx--page .pyx__cta { margin-left: auto; gap: 6px; }
/* the Import button: amber, in the filter bar's size (Save goal's shape) */
.pyx .pyx__cta .pyx-cta, .pyx .pyx__cta .pyx-cta2 {
  min-height: 30px; height: 30px; padding: 0 13px; font:650 13px/1 var(--sans); white-space: nowrap; border-radius: var(--radius-pill, 999px);
}
.pyx .pyx__cta .pyx-cta2 { border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: var(--surface-2); color: var(--text-2); font-weight: 600; box-shadow: none; }
.pyx .pyx__cta .pyx-cta2:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }

/* your mix against your goal: one compact row — ratio · the sentence · the split bar · working capital
   and pays a year on the right — and the key under it in one quiet line */
#viewRisk .pyx--page .pyx__me .pyx-me {
  display: grid; grid-template-columns: auto minmax(0, max-content) minmax(150px, 1fr) auto;
  grid-template-areas: "ratio say bar figs" "foot foot foot foot"; align-items: center; gap: 3px 20px;
  margin: 0; padding: 9px 14px 8px; border-radius: 0; background: none; border-bottom: 1px solid var(--soft-line, var(--border));
}
#viewRisk .pyx--page .pyx-me__top { display: contents; }
#viewRisk .pyx--page .pyx-me__ratio { grid-area: ratio; flex-wrap: nowrap; gap: 4px 9px; white-space: nowrap; font-size:14px; }
#viewRisk .pyx--page .pyx-me__ratio strong { font-size:21px; }
#viewRisk .pyx--page .pyx-me__say { grid-area: say; font-size:14px; line-height: 1.35; }
#viewRisk .pyx--page .pyx-me__bar { grid-area: bar; margin: 0; height: 8px; }
#viewRisk .pyx--page .pyx-me__figs { grid-area: figs; margin: 0; gap: 18px; }
#viewRisk .pyx--page .pyx-me__figs > div { flex-direction: row; align-items: baseline; gap: 7px; }
#viewRisk .pyx--page .pyx-me__figs dt { font-size:13px; white-space: nowrap; }
#viewRisk .pyx--page .pyx-me__figs dd { font-size:15px; }
#viewRisk .pyx--page .pyx-me__foot { grid-area: foot; gap: 2px 18px; font-size:13px; }
#viewRisk .pyx--page .pyx-me__src { gap: 8px; }
#viewRisk .pyx--page .pyx-me__src .pyx-inl {
  height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px);
  background: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans);
}
#viewRisk .pyx--page .pyx-me__src .pyx-inl:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }
@container pyx (max-width: 1100px) {
  #viewRisk .pyx--page .pyx__me .pyx-me { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ratio say figs" "bar bar bar" "foot foot foot"; row-gap: 6px; }
  #viewRisk .pyx--page .pyx-me__bar { margin: 4px 0 2px; }
}
@container pyx (max-width: 760px) {
  #viewRisk .pyx--page .pyx__me .pyx-me { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ratio figs" "say say" "bar bar" "foot foot"; }
}
@container pyx (max-width: 560px) {
  #viewRisk .pyx--page .pyx__me .pyx-me { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ratio" "say" "figs" "bar" "foot"; padding: 10px 12px; }
  #viewRisk .pyx--page .pyx-me__ratio { flex-wrap: wrap; white-space: normal; }
  #viewRisk .pyx--page .pyx-me__figs { flex-direction: column; gap: 2px; }
}

/* the controls: the dashboard filter bar (both the page and the dashboard pane) */
#viewRisk .pyx--page .pyx__ctl { margin: 0; padding: 7px 14px; gap: 6px 6px; border-bottom: 1px solid var(--soft-line, var(--border)); }
.pyx .pyx-seg, .pyx.pyx--pane .pyx-seg { gap: 6px; padding: 0; border-radius: 0; background: none; }
.pyx .pyx-seg__b, .pyx .pyx-chip {
  min-height: 30px; height: 30px; padding: 0 10px; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px);
  background: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); box-shadow: none;
  transition: border-color .12s, color .12s, background-color .12s;
}
.pyx .pyx-seg__b:hover, .pyx .pyx-chip:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }
.pyx .pyx-seg__b.is-on, .pyx .pyx-chip.is-on { border-color: var(--border-accent); color: var(--text); background: var(--accent-bg); box-shadow: none; }
.pyx .pyx-seg__b b, .pyx .pyx-chip b, .pyx.pyx--pane .pyx-seg__b b { font:600 13px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pyx .pyx-seg__b.is-on b, .pyx .pyx-chip.is-on b { color: var(--text); }
.pyx .pyx-sw { width: 9px; height: 9px; border-radius: 2px; }
.pyx .pyx-search {
  min-height: 30px; height: 30px; padding: 0 9px; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px);
  background: var(--surface-2); color: var(--text-2); flex: 0 1 250px; min-width: 180px;
}
.pyx .pyx-search:focus-within { box-shadow: none; border-color: var(--border-accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.pyx .pyx-search input { font:400 13px/1 var(--sans); }
.pyx .pyx-search input::placeholder { color: var(--text-3); }
body[data-theme="light"] .pyx .pyx-search input::placeholder { color: var(--text-2); }
.pyx.pyx--pane .pyx-chip { min-height: 30px; }
.pyx.pyx--pane .pyx-link { height: 30px; padding: 0 10px 0 11px; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); }
.pyx.pyx--pane .pyx-link:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }
@container pyx (max-width: 560px) {
  .pyx .pyx-seg { gap: 6px; }
  .pyx .pyx-seg__b { min-height: 36px; height: auto; border-radius: var(--radius-sm, 7px); }
  .pyx .pyx-chip, .pyx .pyx-search { min-height: 36px; height: 36px; }
}
@container pyx (max-width: 760px) { .pyx .pyx-search { margin-left: 0; flex: 1 1 100%; } }
#viewRisk .pyx--page .pyx__rms { margin: 8px 14px 0; border-radius: var(--radius-sm, 7px); }

/* the level heads: the Universe table's small caps, on the raised strip, with a hairline under */
#viewRisk .pyx--page .pyx-hd {
  padding: 8px 14px; margin: 0; background: var(--bg-raised); border-bottom: 1px solid var(--soft-line, var(--border));
  font:600 13px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
}
body[data-theme="light"] #viewRisk .pyx--page .pyx-hd { color: var(--text-2); }
body[data-text-size="large"] #viewRisk .pyx--page .pyx-hd { font-size:13px; }
body[data-text-size="xlarge"] #viewRisk .pyx--page .pyx-hd { font-size:13.5px; }
/* widths the small-caps heads fit in: level · bar · yield · discount [· tickers · You hold · Goal · Against goal] */
#viewRisk .pyx--page .pyx__lad { --cols: 272px minmax(0, 1fr) 112px 112px 238px 118px; }
#viewRisk .pyx--page.has-mine .pyx__lad { --cols: 272px minmax(0, 1fr) 106px 106px 150px 104px 104px 136px; }
#viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: 272px minmax(0, 1fr) 106px 106px 206px 112px; }
@container pyx (max-width: 1240px) {
  #viewRisk .pyx--page.has-mine .pyx__lad, #viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: 210px minmax(0, 1fr) 106px 106px 120px; }
}
@container pyx (max-width: 1080px) { #viewRisk .pyx--page:not(.has-mine) .pyx__lad { --cols: 210px minmax(0, 1fr) 106px 106px; } }
@container pyx (max-width: 760px) {
  #viewRisk .pyx--page .pyx__lad, #viewRisk .pyx--page.has-mine .pyx__lad, #viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: minmax(150px, 184px) minmax(0, 1fr) 84px 92px; }
  #viewRisk .pyx--page.has-mine .pyx__lad, #viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: minmax(140px, 176px) minmax(0, 1fr) 76px 84px 92px; }
  #viewRisk .pyx--page .pyx-hd__avg { display: none; }
}
/* the level rows: 1px lines, the selected one tinted with the amber edge, as the Universe's */
#viewRisk .pyx--page .pyx-rows { gap: 0; }
#viewRisk .pyx--page .pyx-row { min-height: 52px; padding: 6px 14px; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent); }
#viewRisk .pyx--page .pyx-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
#viewRisk .pyx--page .pyx-row.is-sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
#viewRisk .pyx--page .pyx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
#viewRisk .pyx--page .pyx-row--static:hover { background: none; }
#viewRisk .pyx--page .pyx-bar { height: 30px; border-radius: 8px; }
#viewRisk .pyx--page .pyx-row__lv > i { width: 34px; height: 24px; border-radius: 5px; font-size:13px; }
#viewRisk .pyx--page .pyx-side { padding: 10px 14px 5px; font:600 13px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent); }
body[data-theme="light"] #viewRisk .pyx--page .pyx-side { color: var(--text-2); }
#viewRisk .pyx--page .pyx-rows--extra { margin-top: 0; }
@container pyx (max-width: 560px) { #viewRisk .pyx--page .pyx-row { padding: 10px 12px; } #viewRisk .pyx--page .pyx-hd { display: none; } }
/* the chosen level's list, then the note, inside the pane */
#viewRisk .pyx--page .pyx-list { margin-top: 0; padding: 14px 14px 0; border-top: 0; }
#viewRisk .pyx--page .pyx-cpt thead th { background: var(--bg-raised); }
#viewRisk .pyx--page .pyx__note { margin: 12px 14px 0; padding-bottom: 14px; font-size:13px; }
@container pyx (max-width: 560px) {
  #viewRisk .pyx--page .pyx__ctl, #viewRisk .pyx--page .pyx-list { padding-left: 12px; padding-right: 12px; }
  #viewRisk .pyx--page .pyx__note { margin-left: 12px; margin-right: 12px; }
}
/* the kinds in the dashboard pane's filter strip: separate filter-bar buttons take more room than the old
   track, so on a narrower desk the strip wraps to a second line instead of the buttons overlapping */
.pyx.pyx--pane .pyx-seg__b { padding: 0 8px; }
.pyx.pyx--pane .pyx__ctl { flex-wrap: wrap; gap: 6px; }
.pyx.pyx--pane .pyx-seg { flex-wrap: wrap; flex: 0 1 auto; gap: 5px; }
.pyx.pyx--pane .pyx__cta { margin-left: auto; }

/* "Your RMS universe" under it: the same pane chrome */
#viewRisk .rmsu {
  margin: 0 0 18px; background: var(--bg); border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)); border-radius: var(--radius, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .035);
}
body[data-theme="light"] #viewRisk .rmsu { box-shadow: 0 1px 2px rgba(58, 48, 30, .06), 0 6px 18px -12px rgba(58, 48, 30, .16); }
#viewRisk .rmsu.is-drag { box-shadow: 0 0 0 2px var(--accent); }
#viewRisk .rmsu__head {
  align-items: center; min-height: 40px; padding: 6px 14px; gap: 4px 14px; border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
  background: linear-gradient(to bottom, var(--soft, rgba(255, 255, 255, .045)), transparent); border-bottom: 1px solid var(--soft-line, var(--border));
}
#viewRisk .rmsu .rmsu__title {
  display: inline-flex; align-items: center; gap: 9px; font:700 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
#viewRisk .rmsu .rmsu__title::before { content: ""; display: block; width: 13px; height: 2px; border-radius: 2px; flex-shrink: 0; background: var(--accent); opacity: .8; }
#viewRisk .rmsu__hint { font:600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
#viewRisk .rmsu__hint::before { content: "·"; margin-right: 10px; }
#viewRisk .rmsu__body { padding: 12px 14px 14px; }
#viewRisk .rmsu-drop { padding: 12px 14px; border-radius: var(--radius-sm, 7px); border: 1px dashed var(--border-hover); background: none; }
#viewRisk .rmsu .rmsu-btn { min-height: 34px; padding: 0 16px; font-size:14px; }
#viewRisk .rmsu .rmsu-btn:not(.rmsu-btn--primary):not(.rmsu-btn--quiet):not(.rmsu-btn--danger) { border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: var(--surface-2); color: var(--text-2); }
body[data-text-size="large"] #viewRisk :is(.pyx--page .pyx__h.cpane__title, .pyx--page .pyx__sub.cpane__meta, .rmsu .rmsu__title, .rmsu__hint) { font-size:14px; }
body[data-text-size="xlarge"] #viewRisk :is(.pyx--page .pyx__h.cpane__title, .pyx--page .pyx__sub.cpane__meta, .rmsu .rmsu__title, .rmsu__hint) { font-size:15.5px; }
/* "Adjust your goal" between them: its .cpane block above was being overruled by cockpit.css's
   `#viewRisk .rk-adjust { … !important }` soft-panel rule, so it drew as a floating panel. The pane
   chrome it was written for, stated at that weight, so the three panels on Risk mix match. */
#viewRisk .rk-adjust.cpane {
  background: var(--bg) !important; border: 1px solid var(--soft-line, rgba(255, 255, 255, .09)) !important; border-radius: var(--radius, 12px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}
body[data-theme="light"] #viewRisk .rk-adjust.cpane { box-shadow: 0 1px 2px rgba(58, 48, 30, .06), 0 6px 18px -12px rgba(58, 48, 30, .16) !important; }

/* ═══ Strict-review fixes Sep 27 (Risk mix + dashboard Pyramid tab) ═══════════════════════════
   W10 the opened level's list grows with the page (no inner scroll box hiding owned funds) and its
   column heads stick under the top bar; W11 "Yours · watch" holds only the member's own and watched
   funds (never the day's most traded); W12 one import control (the pane bar's amber button), the
   RMS chip only once lists exist, the panel's import links quiet. Polish: level rows on one line in
   the Universe's number face, a Funds column instead of the pill on the bar, no amber ring, owned /
   watched marked with a dot and a ring rather than a filled amber chip, the RMS line a ruled row,
   the RMS panel at the page's type scale, the phone filter strip in two rows. */
#viewRisk { --rk-sticky: 48px; }                                   /* the sticky top bar (portfolio.css --pb-top) */
body[data-text-size="large"] #viewRisk { --rk-sticky: 42.9px; }    /* the view is zoomed 1.12 */
body[data-text-size="xlarge"] #viewRisk { --rk-sticky: 38.4px; }
#viewRisk .pyx--page .pyx-t__wrap { max-height: none; overflow: visible; }
#viewRisk .pyx--page .pyx-cpt thead th { position: sticky; top: var(--rk-sticky); z-index: 3; }
.pyx .pyx-chip[hidden] { display: none; }

/* the level rows: one line a name, the count in its own column, figures in the Universe's face */
#viewRisk .pyx--page .pyx-row__lv b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font:500 14px/1.3 var(--sans); }
#viewRisk .pyx--page .pyx-row__lv small { font-size:13px; }
#viewRisk .pyx--page .pyx-bar__n { display: none; }
#viewRisk .pyx--page .pyx-hd__n2, #viewRisk .pyx--page .pyx-row__n2 { display: block; text-align: right; }
#viewRisk .pyx--page .pyx-row__n2 { white-space: nowrap; font:600 14px/1.3 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
#viewRisk .pyx--page .pyx-row__n2 small { font:400 max(13px, 1em) var(--mono); color: var(--text-2); }
#viewRisk .pyx--page :is(.pyx-row__c b, .pyx-row__hold b, .pyx-row__goal b, .pyx-row__vs b, .pyx-row__me b) { font-family: var(--mono); font-size:14px; letter-spacing: 0; }
#viewRisk .pyx--page :is(.pyx-row__c small, .pyx-row__hold small, .pyx-row__goal small, .pyx-row__vs small, .pyx-row__me small) { font-family: var(--mono); font-size:13px; letter-spacing: 0; }
#viewRisk .pyx--page :is(.pyx-row__vs small, .pyx-row__me small, .pyx-row__goal small.is-w, .pyx-row__c small), #viewRisk .pyx--page .pyx-row__vs.is-ok b { font-family: var(--sans); }
#viewRisk .pyx--page .pyx-row__c small:empty { display: none; }
#viewRisk .pyx--page .pyx-row { min-height: 48px; }
/* the strip's figures in the same face */
#viewRisk .pyx--page :is(.pyx-me__ratio strong, .pyx-me__goal b, .pyx-me__figs dd, .pyx-me__lg b) { font-family: var(--mono); letter-spacing: 0; }
/* widths, now with the Funds column: level · bar · funds · yield · discount [· yours · You hold · Goal · Against goal] */
#viewRisk .pyx--page .pyx__lad { --cols: 236px minmax(0, 1fr) 60px 100px 100px 230px 118px; }
#viewRisk .pyx--page.has-mine .pyx__lad { --cols: 236px minmax(0, 1fr) 60px 96px 96px 150px 104px 104px 136px; }
#viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: 236px minmax(0, 1fr) 60px 96px 96px 206px 112px; }
@container pyx (max-width: 1240px) {
  #viewRisk .pyx--page.has-mine .pyx__lad, #viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: 210px minmax(0, 1fr) 60px 96px 96px 120px; }
}
@container pyx (max-width: 1080px) { #viewRisk .pyx--page:not(.has-mine) .pyx__lad { --cols: 210px minmax(0, 1fr) 60px 96px 96px; } }
@container pyx (max-width: 760px) {
  #viewRisk .pyx--page .pyx__lad { --cols: minmax(140px, 176px) minmax(0, 1fr) 46px 78px 86px; }
  #viewRisk .pyx--page.has-mine .pyx__lad, #viewRisk .pyx--page.has-mine:not(.has-goal) .pyx__lad { --cols: minmax(130px, 168px) minmax(0, 1fr) 44px 72px 80px 88px; }
}
/* phones keep the count on the bar (no column heads there) */
@container pyx (max-width: 560px) {
  #viewRisk .pyx--page .pyx-bar__n { display: inline-flex; }
  #viewRisk .pyx--page .pyx-hd__n2, #viewRisk .pyx--page .pyx-row__n2 { display: none; }
}

/* the kind bar: the level's full size as a 1px outline, filled by what is shown (a filter leaves the outline) */
.pyx .pyx-bar, .pyx .pyx-row.is-own .pyx-bar, .pyx .pyx-row:hover .pyx-bar,
.pyx.pyx--pane .pyx-row.is-own .pyx-bar, .pyx.pyx--pane .pyx-row:hover .pyx-bar { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.pyx.is-loading .pyx-bar { box-shadow: none; }

/* "Yours · watch": tickers in the Universe's type; yours with a solid dot, the watchlist's with a ring */
.pyx-tk, .pyx-tk.is-own, .pyx-tk.is-watch {
  height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  font:700 14px/1.3 var(--sans); letter-spacing: .01em; color: var(--accent-soft, var(--accent));
}
.pyx-row__tks { gap: 4px 12px; align-items: center; }
.pyx-tk.is-own::after, .pyx-tk.is-watch::after, .pyx .cp-tk.pyx-own::after, .pyx .cp-tk.pyx-watch::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 5px; border-radius: 50%; vertical-align: middle; background: var(--accent);
}
.pyx-tk.is-watch::after, .pyx .cp-tk.pyx-watch::after { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.pyx-tk--more, .pyx-tk__nil { color: var(--text-2); font:600 13px/1.3 var(--mono); }
body[data-theme="light"] .pyx-tk { color: var(--pyx-amber-ink); }
body[data-theme="light"] :is(.pyx-tk.is-own, .pyx .cp-tk.pyx-own)::after { background: var(--pyx-amber-ink); }
body[data-theme="light"] :is(.pyx-tk.is-watch, .pyx .cp-tk.pyx-watch)::after { box-shadow: inset 0 0 0 1.5px var(--pyx-amber-ink); }
/* the level list: the same marks, no filled chip */
.pyx .cp-tk.pyx-own, .pyx .cp-tk.pyx-watch { background: none; box-shadow: none; color: var(--accent-soft, var(--accent)); }
body[data-theme="light"] .pyx .cp-tk.pyx-own, body[data-theme="light"] .pyx .cp-tk.pyx-watch { color: var(--pyx-amber-ink); }
.pyx-key .cp-tk.pyx-own, .pyx-key .cp-tk.pyx-watch { color: var(--text); }

/* the RMS line: a ruled row inside the pane, not a filled box */
.pyx .pyx__rms, #viewRisk .pyx--page .pyx__rms {
  margin: 0; padding: 7px 14px; border-radius: 0; background: none; border-bottom: 1px solid var(--soft-line, var(--border)); font-size:13px;
}
.pyx.pyx--pane .pyx__rms { margin: 0; padding: 7px 11px; }
.pyx .pyx__rms .pyx-link { height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: var(--surface-2); color: var(--text-2); font:600 13px/1 var(--sans); }
.pyx .pyx__rms .pyx-link:hover { border-color: var(--border-hover); color: var(--text); }

/* the dashboard pane at the larger text sizes: the level names get the room to stay whole */
body[data-text-size="large"] .pyx.pyx--pane .pyx__lad,
body[data-text-size="large"] .pyx.pyx--pane.has-mine .pyx__lad { --cols: minmax(206px, 264px) minmax(56px, 1fr) 46px 80px 80px; }
body[data-text-size="large"] .pyx.pyx--pane.has-own .pyx__lad { --cols: minmax(206px, 264px) minmax(56px, 1fr) 46px 80px 80px 60px; }

/* phones: the kinds in two rows of three, not six stacked rows */
@container pyx (max-width: 560px) {
  .pyx .pyx-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .pyx .pyx-seg__b[data-grp="all"] { grid-column: auto; }
  .pyx .pyx-seg__b { padding: 0 6px; gap: 5px; min-height: 34px; }
  .pyx .pyx-chip, .pyx .pyx-search { min-height: 34px; height: 34px; }
}

/* "Your RMS universe": the page's type scale, rows not a hero figure, Universe tickers, quiet links */
#viewRisk .rmsu .rmsu__lead { margin: 0 0 6px; max-width: 110ch; font:400 14px/1.5 var(--sans); color: var(--text-2); }
#viewRisk .rmsu .rmsu__fine { margin: 8px 0 0; font-size:13px; }
#viewRisk .rmsu .rmsu-link { font-weight: 600; color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
#viewRisk .rmsu .rmsu-sum { gap: 10px 40px; padding: 2px 0 10px; border-bottom: 1px solid var(--soft-line, var(--border)); }
#viewRisk .rmsu .rmsu-sum__lead { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#viewRisk .rmsu .rmsu-sum__hero { font:600 18px/1.2 var(--mono); letter-spacing: 0; }
#viewRisk .rmsu .rmsu-sum__hero small { font:500 14px/1 var(--mono); }
#viewRisk .rmsu .rmsu-lbl { font-size:14px; }
#viewRisk .rmsu .rmsu-fig { row-gap: 2px; }
#viewRisk .rmsu .rmsu-fig b { font:600 15px/1.2 var(--mono); }
#viewRisk .rmsu .rmsu-row { padding: 10px 0; }
#viewRisk .rmsu .rmsu-row__name b { font-size:14px; }
#viewRisk .rmsu .rmsu-row__fig b { font:600 15px/1.2 var(--mono); }
#viewRisk .rmsu .rmsu-bar { height: 6px; border-radius: 3px; }
@media (min-width: 721px) {
  #viewRisk .rmsu .rmsu-row__top { grid-template-columns: minmax(220px, 340px) 200px 96px; justify-content: start; }
}
#viewRisk .rmsu .rmsu-sum__grid { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px 32px; }
#viewRisk .rmsu .rmsu-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
#viewRisk .rmsu .rmsu-fig__note { font-size:13px; line-height: 1.3; }
#viewRisk .rmsu .rmsu-more > summary {
  min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: var(--surface-2); color: var(--text-2); font-size:13px;
}
#viewRisk .rmsu .rmsu-more > summary:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }
#viewRisk .rmsu .rmsu-row__bits, #viewRisk .rmsu .rmsu-row__since { font-size:14px; margin-top: 4px; }
#viewRisk .rmsu .rmsu-chips { gap: 4px 14px; }
#viewRisk .rmsu .rmsu-tk { min-height: 0; padding: 2px 0; border-radius: 0; background: none; color: var(--accent-soft, var(--accent)); font:700 14px/1.3 var(--sans); }
#viewRisk .rmsu button.rmsu-tk:hover { background: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#viewRisk .rmsu .rmsu-tk.is-off { color: var(--text-2); }
#viewRisk .rmsu .rmsu-tk span { font:500 13px/1.2 var(--mono); }
body[data-theme="light"] #viewRisk .rmsu .rmsu-tk:not(.is-off) { color: #6e4700; }
#viewRisk .rmsu .rmsu-group { margin-top: 14px; }
#viewRisk .rmsu .rmsu-group__h { font-size:14px; }
#viewRisk .rmsu .rmsu-set { margin-top: 14px; padding-top: 12px; }
#viewRisk .rmsu .rmsu-set__lbl { font-size:14px; }
#viewRisk .rmsu .rmsu-set__in em, #viewRisk .rmsu .rmsu-set__in input { font-size:16px; }
#viewRisk .rmsu .rmsu-actions { margin-top: 14px; gap: 6px 4px; }
#viewRisk .rmsu .rmsu-actions .rmsu-btn--quiet { min-height: 30px; padding: 0 10px; font:600 14px/1 var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
#viewRisk .rmsu .rmsu-actions .rmsu-btn--quiet[data-act="remove"] { color: var(--text-2); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
#viewRisk .rmsu .rmsu-actions .rmsu-btn--quiet:first-child { padding-left: 0; }
#viewRisk .rmsu .rmsu-actions__drop { font-size:14px; }

/* Adjust your goal: the $ sits with the figure; the on-goal dollars in the difference column */
.rkg-cash { gap: 3px; }
.rkg-cash input { text-align: left; }
.rkg-c--df.is-ok.is-amt b { margin-right: 0; font-family: var(--mono); letter-spacing: -.01em; }
.rkg-c--df.is-ok.is-amt .rkg-df > span { color: var(--green); }
/* figures in the Universe's number face */
#viewRisk .rkg :is(.rkg-r > .rkg-c, .rkg-gr > .rkg-c, .rkg-tot > .rkg-c, .rkg-step__v input, .rkg-step__v i, .rkg-cash em, .rkg-cash input, .rkg-num, .rkg-num input, .rkg-seg .cpane__tab:not([data-custom])) { font-family: var(--mono); }
#viewRisk .rkg :is(.rkg-r > .rkg-c--lv, .rkg-gr > .rkg-c--lv, .rkg-tot > .rkg-c--lv) { font-family: var(--sans); }
#viewRisk .pyx--page .pyx__note { max-width: 1240px; }
#viewRisk .rmsu :is(.rmsu-fig b small, .rmsu-row__fig b small) { font-size:13px; }
#viewRisk .rmsu :is(.rmsu-none, .rmsu-note, .rmsu-chg__h) { font-size:14px; }
.pyx-tag { font-size:13px; }
.pyx-key .cp-tk { font-size:13px; }

/* ── Final check (Sep 28): "You hold" is at cost; what the same funds are worth today is a quiet third line ── */
.pyx-row__hold small.pyx-worth { color: var(--text-3); }
.pyx-row__mob .pyx-mob__a > span.pyx-worth { display: block; margin-left: 0; color: var(--text-3); white-space: nowrap; }
.pyx-hd__hold { white-space: nowrap; }

/* ═══ The level detail, Sep 28 premium pass (pyramid.js renderList / applyFold) ═══════════════════
   The opened level is a raised card a step above the pane (a lighter surface, a faint top glow, a soft
   shadow): the L-pill and the level's name as its header, then two groups of stats in one contract —
   a small muted label over a bold tabular value, aligned in a grid with hairlines between —
   "At this level" (funds · avg yield · avg discount · you own, and the split by kind as a stacked bar)
   and "Your position" (at cost · worth today · goal, a have-against-goal bar and the gap as a tinted
   pill). The chevron folds the whole detail (card body and list) with a height animation; each kind of
   fund in the list folds from its header row. The fund rows themselves stay the Universe's (CPRow). */
.pyx {
  --pyx-card: color-mix(in srgb, var(--text) 5%, var(--bg-raised, var(--surface)));
  --pyx-card-hi: rgba(255, 255, 255, .06);
  --pyx-card-glow: rgba(255, 255, 255, .035);
  --pyx-card-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 16px 34px -20px rgba(0, 0, 0, .9);
  --pyx-hair: color-mix(in srgb, var(--text) 8%, transparent);
  --pyx-gband: color-mix(in srgb, var(--text) 3.5%, transparent);
}
body[data-theme="light"] .pyx {
  --pyx-card: color-mix(in srgb, #fff 60%, var(--surface));
  --pyx-card-hi: #fff;
  --pyx-card-glow: rgba(255, 255, 255, .7);
  --pyx-card-shadow: 0 0 0 1px rgba(58, 48, 30, .07), 0 1px 2px rgba(58, 48, 30, .07), 0 14px 30px -18px rgba(58, 48, 30, .26);
  --pyx-hair: rgba(58, 48, 30, .1);
  --pyx-gband: rgba(58, 48, 30, .045);
}
.pyx.pyx--pane .pyx-lvd { margin: 0 11px; }
.pyx.pyx--pane .pyx-lvd .pyx-t__wrap { margin: 0 -11px; }

/* the card */
.pyx-lvc {
  position: relative; container: pyxlvc / inline-size; border-radius: 14px;
  background: radial-gradient(90% 110px at 50% 0, var(--pyx-card-glow), transparent 75%), var(--pyx-card);
  box-shadow: inset 0 1px 0 var(--pyx-card-hi), var(--pyx-card-shadow);
}
.pyx-lvc__h3 { margin: 0; font:inherit; }
.pyx-lvc__hd {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 16px 18px; border: 0; border-radius: 14px;
  background: none; color: inherit; font:inherit; text-align: left; cursor: pointer;
}
.pyx-lvc__hd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pyx-lvc__pill {
  display: grid; place-items: center; flex: none; min-width: 46px; height: 34px; padding: 0 9px; border-radius: 10px;
  background: var(--pyx-own-bg); color: #1a1304; font:700 15px/1 var(--mono); letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .25);
}
.pyx-lvc__tt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.pyx-lvc__ov { font:500 13px/1.25 var(--sans); color: var(--text-3); }
.pyx-lvc__n { font:600 19px/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); }
.pyx-lvc__sum { flex: none; font:500 13px/1.3 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyx-lvd:not(.is-shut) .pyx-lvc__sum { display: none; }
.pyx-lvd.is-shut .pyx-lvc__sum { animation: pyxFadeIn .28s var(--pyx-ease) both; }
.pyx-lvc__cv {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pyx-track); color: var(--text-2); transition: transform .3s var(--pyx-ease), background .15s, color .15s;
}
.pyx-lvc__hd:hover .pyx-lvc__cv { background: var(--pyx-track-hi); color: var(--text); }
.pyx-lvd.is-shut .pyx-lvc__cv { transform: rotate(-90deg); }

/* folding: the rows of a one-cell grid animate between 0fr and 1fr; clipped only while moving or shut,
   so the list's sticky column heads still stick when it is open */
.pyx-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .34s var(--pyx-ease), opacity .26s ease; }
.pyx-fold__in { min-width: 0; min-height: 0; }
.pyx-lvd.is-shut .pyx-fold { grid-template-rows: 0fr; opacity: 0; }
.pyx-lvd.is-shut .pyx-fold__in, .pyx-lvd.is-anim .pyx-fold__in { overflow: clip; }
.pyx-lvd.is-shut:not(.is-anim) .pyx-fold__in { visibility: hidden; }

/* the two groups: side by side on a wide card, stacked otherwise */
.pyx-lvc__body { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--pyx-hair); }
.pyx-lvc__grp { min-width: 0; padding: 15px 18px 17px; }
.pyx-lvc__grp + .pyx-lvc__grp { border-top: 1px solid var(--pyx-hair); }
@container pyxlvc (min-width: 1000px) {
  .pyx-lvd.has-pos .pyx-lvc__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pyx-lvc__grp + .pyx-lvc__grp { border-top: 0; border-left: 1px solid var(--pyx-hair); }
}
.pyx-lvc__o { margin: 0 0 11px; font:600 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* the stat contract: label over value, a hairline between */
.pyx-sts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; margin: 0; }
.pyx-lvc__grp--mine .pyx-sts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pyx-st { min-width: 0; margin: 0; padding: 1px 16px; border-left: 1px solid var(--pyx-hair); }
.pyx-st:first-child { padding-left: 0; border-left: 0; }
.pyx-st > * { margin: 0; }
.pyx-st__l { font:500 13px/1.3 var(--sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyx-st__l[data-tip] {
  display: inline-block; max-width: 100%; vertical-align: top; cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--text-3) 70%, transparent); text-underline-offset: 3px;
}
.pyx-st__l[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pyx-st__q { font-weight: 400; }
.pyx-st__v { margin-top: 5px; font:600 21px/1.2 var(--mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyx-u { margin-left: 1px; font-size:max(13px, .72em); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pyx-st__s { margin-top: 3px; font:400 13px/1.3 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the split by kind; the have-against-goal bar and its pill — the two bars share one width */
.pyx-kind, .pyx-hv { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 15px; }
.pyx-kind__bar, .pyx-hv__bar { flex: 1 1 150px; max-width: 300px; height: 8px; border-radius: 999px; background: var(--pyx-track-hi); }
.pyx-kind__bar { display: flex; gap: 2px; overflow: hidden; }
.pyx-kind__bar > i { flex-basis: 0; min-width: 3px; }
.pyx-kind__lg { display: flex; flex-wrap: wrap; gap: 4px 16px; font:500 13px/1.3 var(--sans); color: var(--text-2); }
.pyx-kind__lg > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pyx-kind__lg b { font:600 13px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.pyx-hv__bar { position: relative; }
.pyx-hv__f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 65%, transparent); transition: width .5s var(--pyx-ease); }
.pyx-hv.is-over .pyx-hv__f { background: var(--pyx-over); }
.pyx-hv.is-ok .pyx-hv__f { background: var(--pyx-ok); }
.pyx-hv__t { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); box-shadow: 0 0 0 2px var(--pyx-card); }
.pyx-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--pyx-track-hi); color: var(--text); font:600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pyx-pill .pyx-dot { margin: 0; }
.pyx-pill.is-over { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft, var(--accent)); }
.pyx-pill.is-ok { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
body[data-theme="light"] .pyx-pill.is-over { color: var(--pyx-amber-ink); }

/* above the table: the count, the order, fold all, and the owned / watchlist keys */
.pyx-lt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 9px; padding: 0 2px; }
.pyx-lt__h { font:600 14px/1.3 var(--sans); color: var(--text); }
.pyx-lt__s { font:400 13px/1.3 var(--sans); color: var(--text-3); }
.pyx-lt__b { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--pyx-track); color: var(--text-2); font:500 13px/1 var(--sans); cursor: pointer; }
.pyx-lt__b:hover { background: var(--pyx-track-hi); color: var(--text); }
.pyx-lt__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pyx-lt .pyx-keys { margin-left: auto; gap: 4px 14px; font-size:13px; color: var(--text-3); }

/* a kind's header row: a tinted band, chevron · swatch · name · count, its averages to the right */
.pyx .pyx-cpt tbody tr.pyx-gr { cursor: pointer; }
.pyx .pyx-cpt tr.pyx-gr th, .pyx .pyx-cpt .pyx-t__g:first-of-type tr.pyx-gr th {
  padding: 0; background: var(--pyx-gband); border-top: 1px solid var(--pyx-hair); border-bottom: 1px solid var(--pyx-hair);
}
.pyx-gt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; width: 100%; min-height: 42px; margin: 0; padding: 8px 11px;
  border: 0; background: none; color: inherit; font:inherit; text-align: left; cursor: pointer; transition: background .12s;
}
.pyx-gt:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.pyx-gt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pyx-gt__cv { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; border-radius: 6px; color: var(--text-2); transition: transform .26s var(--pyx-ease); }
.pyx-t__g.is-closed .pyx-gt__cv { transform: rotate(-90deg); }
.pyx-gt__n { font:500 13px/1.3 var(--sans); color: var(--text-3); white-space: nowrap; }
.pyx-gt__n b { font:600 13px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.pyx-gt__st { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; }
.pyx-gf { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; font:500 13px/1.3 var(--sans); color: var(--text-3); }
.pyx-gf b { font:600 13.5px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pyx-t__g.is-closed tr:not(.pyx-gr) { display: none; }
.pyx-t__g.is-opening tr:not(.pyx-gr) { animation: pyxRowIn .32s var(--pyx-ease) both; }
.pyx-t__g.is-closing tr:not(.pyx-gr) { animation: pyxRowOut .15s ease-in both; }
@keyframes pyxRowIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pyxRowOut { to { opacity: 0; transform: translateY(-3px); } }
@keyframes pyxFadeIn { from { opacity: 0; transform: translateX(4px); } }

/* loading */
.pyx-lvd--sk .pyx-lvc__hd { cursor: default; }
.pyx-lvd--sk .pyx-lvc__pill { background: none; box-shadow: none; }
.pyx-lvd--sk .pyx-lvc__tt .pyx-sk { width: 90px; } .pyx-lvd--sk .pyx-lvc__tt .pyx-sk--w { width: 240px; height: 1.2em; }
.pyx-lvd--sk .pyx-st .pyx-sk { display: block; width: 60px; } .pyx-lvd--sk .pyx-st .pyx-sk--v { width: 90px; height: 20px; margin-top: 7px; }
.pyx-lvd--sk .pyx-t--sk { padding: 18px 2px 0; }

/* narrower cards: two stats a row; the collapsed summary under the name */
@container pyxlvc (max-width: 640px) {
  .pyx-sts, .pyx-lvc__grp--mine .pyx-sts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pyx .pyx-lvc .pyx-st:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pyx-lvc__hd { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .pyx-lvc__tt { flex: 1 1 0; }
  .pyx-st__s { white-space: normal; }
  .pyx-lvc__grp { padding: 13px 14px 15px; }
  .pyx-lvc__sum { order: 3; flex-basis: 100%; white-space: normal; padding-left: 58px; }
  .pyx-lvc__n { font-size:17px; }
}
@container pyx (max-width: 560px) {
  .pyx-gt__st { margin-left: 30px; flex-basis: 100%; gap: 2px 18px; }
  .pyx .pyx-cpt tr.pyx-gr th { padding: 0; }
  .pyx-gt { padding: 8px 7px; }
  .pyx-lt .pyx-keys { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
}

/* the dashboard pane: the desk's sizes, with its text-size steps */
.pyx.pyx--pane .pyx-lvc__hd { padding: 12px 14px; gap: 12px; }
.pyx.pyx--pane .pyx-lvc__pill { min-width: 40px; height: 30px; font-size:14px; border-radius: 9px; }
.pyx.pyx--pane .pyx-lvc__n { font-size:16px; }
.pyx.pyx--pane .pyx-lvc__grp { padding: 12px 14px 14px; }
.pyx.pyx--pane .pyx-lvc__o { margin-bottom: 9px; }
.pyx.pyx--pane .pyx-st__v { font-size:18px; }
.pyx.pyx--pane .pyx-st { padding: 1px 14px; }
.pyx.pyx--pane .pyx-st:first-child { padding-left: 0; }
.pyx.pyx--pane .pyx-kind, .pyx.pyx--pane .pyx-hv { margin-top: 12px; }
.pyx.pyx--pane .pyx-lt { margin: 14px 0 8px; }
body[data-text-size="large"] .pyx.pyx--pane :is(.pyx-lvc__ov, .pyx-st__l, .pyx-st__s, .pyx-kind__lg, .pyx-lt__s, .pyx-gf, .pyx-gt__n, .pyx-pill, .pyx-lvc__sum) { font-size:14px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-st__v { font-size:20px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-lvc__n { font-size:17.5px; }
body[data-text-size="large"] .pyx.pyx--pane .pyx-lt__h { font-size:15px; }
body[data-text-size="xlarge"] .pyx.pyx--pane :is(.pyx-lvc__ov, .pyx-st__l, .pyx-st__s, .pyx-kind__lg, .pyx-lt__s, .pyx-gf, .pyx-gt__n, .pyx-pill, .pyx-lvc__sum) { font-size:15.5px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-st__v { font-size:22px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-lvc__n { font-size:19px; }
body[data-text-size="xlarge"] .pyx.pyx--pane .pyx-lt__h { font-size:16.5px; }
@media (prefers-reduced-motion: reduce) {
  .pyx-fold, .pyx-lvc__cv, .pyx-gt__cv, .pyx-hv__f { transition: none; }
  .pyx-t__g.is-opening tr, .pyx-t__g.is-closing tr, .pyx-lvd.is-shut .pyx-lvc__sum { animation: none; }
}