/* ═══ riskmix-b.css — Risk mix, design B (Sep 28 2026) ═══════════════════════════════════════════════
   The owner's pick (docs/mocks/riskmix-r3/r3.html), built calmer, as the same product as the Portfolio page
   (portfolio.css "Holdings, design B"): pure black, Inter, big calm numbers with small muted labels, the
   Summary box on the right, 1px hairlines only. No boxed panes, no grey fills, no uppercase amber bars.
   Markup: pyramid.js (the page explorer, class .rkb) and app.js (rkMineB, the Adjust / Universe rows).
   Everything is scoped to #viewRisk. Loaded after black.css, so it states its own black. */

#viewRisk {
  --rk-bg: var(--bg, #0a0a0b);
  --rk-line: #1c1d21; --rk-line2: #26272c; --rk-line3: #33343a;
  --rk-text: #f5f5f4; --rk-sub: #a8a8ae; --rk-mute: #8e8e95; --rk-cents: #6f6f76;
  --rk-up: #3ddc84; --rk-up-bg: rgba(61, 220, 132, .10); --rk-up-line: rgba(61, 220, 132, .28);
  --rk-amber: #e0a82e; --rk-amber2: #f5c451; --rk-amber-bg: rgba(224, 168, 46, .12); --rk-amber-ink: #17120a;
  --rk-low: #93c5fd; --rk-high: #fdba74; --rk-rest: #52525b;
  --rk-gold: linear-gradient(180deg, #f7cf66 0%, #e0a82e 55%, #b98318 100%);
  --rk-card: #45464c;
  --rk-l1: #7dd3fc; --rk-l2: #93c5fd; --rk-l3: #a5b4fc; --rk-l4: #c4b5fd; --rk-l5: #f0abfc; --rk-l6: #fdba74; --rk-l7: #fb923c; --rk-l0: #d4d4d8;
  --rk-font: 'Inter', var(--sans);
}
body[data-theme="light"] #viewRisk {
  --rk-line: rgba(58, 48, 30, .10); --rk-line2: rgba(58, 48, 30, .15); --rk-line3: rgba(58, 48, 30, .26);
  --rk-text: #1f2126; --rk-sub: #474b55; --rk-mute: #595e69; --rk-cents: #8a8d95;
  --rk-up: #0e6545; --rk-up-bg: rgba(14, 101, 69, .09); --rk-up-line: rgba(14, 101, 69, .30);
  --rk-amber2: #7f5400; --rk-amber-bg: rgba(154, 107, 0, .10);
  --rk-low: #2563eb; --rk-high: #ea580c; --rk-rest: #a1a1aa;
  --rk-card: rgba(58, 48, 30, .26);
  --rk-l1: #075985; --rk-l2: #1e40af; --rk-l3: #4338ca; --rk-l4: #5b21b6; --rk-l5: #86198f; --rk-l6: #9a3412; --rk-l7: #991b1b; --rk-l0: #52525b; /* light: level badges ≥4.5:1 on their tint */
}

/* ── the page's header row: "Risk mix" and the import button (as the Portfolio page's) ─────────────── */
#viewRisk > .viewbar {
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-height: 64px; margin: -6px 0 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--rk-line); border-radius: 0; background: none; box-shadow: none;
}
#viewRisk > .viewbar .viewbar__name { margin: 0; font:600 22px/1.2 var(--rk-font); letter-spacing: -.025em; color: var(--rk-text); text-transform: none; }
#viewRisk > .viewbar .viewbar__name::before, #viewRisk > .viewbar .viewbar__name::after { display: none; }
#viewRisk > .viewbar .viewbar__tag { display: none; }
#viewRisk > .viewbar .rkb-cta { margin-left: auto; display: flex; }
#viewRisk .rkb-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--rk-line2); border-radius: 19px;
  background: transparent; color: var(--rk-text); font:500 14px/1 var(--rk-font); white-space: nowrap; cursor: pointer; box-shadow: none;
}
#viewRisk .rkb-btn:hover { border-color: var(--rk-line3); background: color-mix(in srgb, var(--rk-text) 4%, transparent); }
#viewRisk .rkb-btn--primary, #viewRisk .rkb-btn--primary:hover {
  min-height: 38px; height: 38px; padding: 0 16px; border-color: var(--rk-amber); background: var(--rk-amber); color: var(--rk-amber-ink); font:600 14px/1 var(--rk-font);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16);
}
#viewRisk .rkb-btn--primary:hover { filter: brightness(1.06); }
#viewRisk .rkb-btn:focus-visible, #viewRisk .rkb button:focus-visible, #viewRisk .rkb-fold:focus-visible { outline: 2px solid var(--rk-amber); outline-offset: 2px; }

/* ── the explorer: no panel, just the page ─────────────────────────────────────────────────────────── */
#viewRisk .pyx.rkb {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; --pyx-panel: var(--rk-bg);
  font-family: var(--rk-font); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; color: var(--rk-text);
}
#viewRisk .rkb .rkb-h2 { display: flex; align-items: center; gap: 8px; margin: 0; font:600 17px/1.3 var(--rk-font); letter-spacing: -.015em; color: var(--rk-text); text-transform: none; }
#viewRisk .rkb .rkb-h2::before { display: none; }

/* the top: the mix and the pyramid on the left, the Summary box on the right */
#viewRisk .rkb-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "me sum" "pyr sum"; grid-template-rows: auto 1fr;
  column-gap: 48px; padding: 28px 0 0;
}
#viewRisk .rkb-hero__main { display: contents; }
#viewRisk .rkb-hero .pyx__me { grid-area: me; min-width: 0; }
#viewRisk .rkb-hero .rkb-pyr { grid-area: pyr; min-width: 0; }
#viewRisk .rkb-hero .rkb-sum { grid-area: sum; align-self: start; }
@container pyx (max-width: 1080px) {
  #viewRisk .rkb-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "me" "sum" "pyr"; grid-template-rows: none; }
  #viewRisk .rkb-hero .rkb-sum { margin-top: 24px; }
}

/* your mix: big numbers, the goal beside them, one amber line, the split bar */
#viewRisk .rkb .pyx__me .pyx-me.rkb-me { display: block; margin: 0; padding: 0; border: 0; background: none; }
#viewRisk .rkb-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; font:500 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-big { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 26px; margin-top: 10px; }
#viewRisk .rkb-big__v { display: flex; align-items: baseline; flex-wrap: wrap; margin: 0; white-space: nowrap; }
#viewRisk .rkb-big__v strong { font:600 64px/1 var(--rk-font); letter-spacing: -.045em; color: var(--rk-text); }
#viewRisk .rkb-big__v strong i { font-style: normal; font-weight: 500; color: var(--rk-cents); margin: 0 .05em; }
#viewRisk .rkb-big__rest { margin-left: 12px; font:500 28px/1 var(--rk-font); letter-spacing: -.02em; color: var(--rk-cents); }
#viewRisk .rkb-big__goal { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0 0 5px 26px; border-left: 1px solid var(--rk-line2); }
#viewRisk .rkb-big__goal span { font:400 14px/1.2 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-big__goal b { font:600 30px/1 var(--rk-font); letter-spacing: -.03em; color: var(--rk-text); }
#viewRisk .rkb-say { margin: 16px 0 0; max-width: 62ch; font:400 15px/1.45 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-say.is-gap { font-weight: 600; font-size:16px; color: var(--rk-amber2); }
#viewRisk .rkb-say.is-ok { color: var(--rk-up); font-weight: 600; }
#viewRisk .rkb-say__ar { font-style: normal; margin-right: 6px; font-size:max(13px, .8em); }
#viewRisk .rkb-say .pyx-inl { padding: 0; border: 0; background: none; color: var(--rk-text); font:inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#viewRisk .rkb-mixbar { position: relative; display: flex; gap: 2px; max-width: 760px; height: 8px; margin-top: 20px; }
#viewRisk .rkb-mixbar i { display: block; height: 100%; min-width: 0; flex: 0 1 auto; }
#viewRisk .rkb-mixbar i:first-child { border-radius: 5px 0 0 5px; }
#viewRisk .rkb-mixbar i:last-of-type { border-radius: 0 5px 5px 0; }
#viewRisk .rkb-mixbar__low { background: var(--rk-low); }
#viewRisk .rkb-mixbar__high { background: var(--rk-high); }
#viewRisk .rkb-mixbar__rest { background: var(--rk-rest); }
#viewRisk .rkb-me.is-goal .rkb-mixbar i { opacity: .55; }
#viewRisk .rkb-mixbar__tick { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--rk-text); box-shadow: 0 0 0 2px var(--rk-bg); }
#viewRisk .rkb-mixleg { display: flex; flex-wrap: wrap; gap: 6px 22px; max-width: 760px; margin: 12px 0 0; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-mixleg b { margin-left: 8px; font-weight: 600; color: var(--rk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewRisk .rkb-mixleg small { margin-left: 6px; font:inherit; color: var(--rk-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewRisk .rkb-mixleg > span { display: inline-flex; align-items: center; }
#viewRisk .rkb-mixleg__g { margin-left: auto; gap: 8px; }
#viewRisk .rkb-mixleg__g u { display: inline-block; width: 2px; height: 13px; border-radius: 2px; background: var(--rk-text); }
#viewRisk .rkb-sw { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; }
#viewRisk .rkb-sw--low { background: var(--rk-low); } #viewRisk .rkb-sw--high { background: var(--rk-high); } #viewRisk .rkb-sw--rest { background: var(--rk-rest); }

/* the Summary box (Sep 29 2026): the Portfolio page's Summary (portfolio-summary.css) — the same pxs-* groups — on ONE
   subtle surface: each group is a heading in the Settings menu's style (14px semibold, a small glowing amber tick, a
   hairline under it) and its rows, no card inside the card. In Risk mix's tokens. Markup: pyramid.js summaryHtml. */
#viewRisk {
  --rks-grp: rgba(255, 255, 255, .025); --rks-grp-line: rgba(255, 255, 255, .065); --rks-hair: rgba(255, 255, 255, .06);
  --rks-lift: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35);
  --rk-down: #ff6b5e;
  --rks-surf: color-mix(in srgb, var(--rk-text) 2.2%, var(--rk-bg)); --rk-below: #a9bdd3;
}
body[data-theme="light"] #viewRisk {
  --rks-grp: rgba(58, 48, 30, .025); --rks-grp-line: rgba(58, 48, 30, .1); --rks-hair: rgba(58, 48, 30, .09);
  --rks-lift: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(58, 48, 30, .06);
  --rk-down: #a3302a;
  --rks-surf: var(--surface, #f7f5f0); --rk-below: #3b5673;
}
#viewRisk .rkb-sum { min-width: 0; padding: 18px 20px 14px; border: 1px solid var(--rk-line2); border-radius: 14px; background: var(--rks-surf); }
#viewRisk .rkb-sum[hidden] { display: none; }
body[data-theme="light"] #viewRisk .rkb-sum { background: var(--surface, #f7f5f0); }
#viewRisk .rkb-sum__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font:600 17px/1.3 var(--rk-font); letter-spacing: -.015em; color: var(--rk-text); text-transform: none; }
#viewRisk .rkb-sum__h::before { display: none; }
#viewRisk .rkb-sum__h small { font:400 14px/1.3 var(--rk-font); letter-spacing: 0; color: var(--rk-mute); white-space: nowrap; }
#viewRisk .rks-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
#viewRisk .rkb-sum .pxs-g { min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#viewRisk .rkb-sum .pxs-h {
  display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 0 9px;
  font:650 14px/1.2 var(--rk-font); letter-spacing: .01em; text-transform: none; color: var(--rk-text); border-bottom: 1px solid var(--rks-hair);
}
#viewRisk .rkb-sum .pxs-h::before { content: ""; flex: 0 0 3px; height: 13px; border-radius: 2px; background: var(--rk-amber); box-shadow: 0 0 8px color-mix(in srgb, var(--rk-amber) 55%, transparent); }
body[data-theme="light"] #viewRisk .rkb-sum .pxs-h::before { box-shadow: none; }
#viewRisk .rkb-sum .pxs-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rks-hair); }
#viewRisk .rkb-sum .pxs-g > .pxs-r:last-child { border-bottom: 0; }
#viewRisk .rkb-sum .pxs-k { min-width: 0; font:400 14px/1.35 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-sum .pxs-rms { font:400 14px/1.35 var(--rk-font); color: var(--rk-mute); white-space: nowrap; }
#viewRisk .rkb-sum .pxs-v { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
#viewRisk .rkb-sum .pxs-v b { display: block; font:600 15px/1.35 var(--rk-font); color: var(--rk-text); white-space: nowrap; }
#viewRisk .rkb-sum .pxs-v small { display: block; margin-top: 1px; font:400 14px/1.35 var(--rk-font); color: var(--rk-sub); white-space: nowrap; }
#viewRisk .rkb-sum .pxs-v .pxs-big { font-size:20px; letter-spacing: -.01em; }
#viewRisk .rkb-sum .pxs-r.is-lead { padding: 10px 0; }
#viewRisk .rkb-sum .pxs-r.is-lead .pxs-k { color: var(--rk-text); }
#viewRisk .rkb-sum .pxs-note { margin: 0; padding: 9px 0 8px; font:400 14px/1.45 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-up { color: var(--rk-up) !important; }
#viewRisk .rkb-down { color: var(--rk-down) !important; }
#viewRisk .rkb-sum .rks-ksub { display: block; margin-top: 1px; padding-left: 17px; font:400 13px/1.35 var(--rk-font); color: var(--rk-sub); white-space: nowrap; }
/* the two sides: the label never breaks; on a narrow box the gap goes under its amount ("above goal" kept together) */
#viewRisk .rkb-sum .rks-bal .pxs-k { flex: none; white-space: nowrap; }
#viewRisk .rkb-sum .rks-bal .pxs-v { flex: 0 1 auto; min-width: 0; }
#viewRisk .rkb-sum .rks-bal .pxs-v small { white-space: normal; }
#viewRisk .rks-gap { color: var(--rk-amber2); font-weight: 500; }
#viewRisk .rks-gap.is-on { color: var(--rk-up); }
/* Balance vs goal: the split against the goal, as the strip above draws it */
#viewRisk .rkb-sum .pxs-mix { position: relative; display: flex; gap: 2px; height: 6px; margin: 13px 0 5px; }
#viewRisk .rkb-sum .pxs-mix i { display: block; height: 100%; min-width: 0; }
#viewRisk .rkb-sum .pxs-mix i:first-child { border-radius: 3px 0 0 3px; }
#viewRisk .rkb-sum .pxs-mix i:last-of-type { border-radius: 0 3px 3px 0; }
#viewRisk .rkb-sum .pxs-mix__low { background: var(--rk-low); }
#viewRisk .rkb-sum .pxs-mix__high { background: var(--rk-high); }
#viewRisk .rkb-sum .pxs-mix__rest { background: var(--rk-rest); }
#viewRisk .rkb-sum .pxs-mix u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--rk-text); box-shadow: 0 0 0 2px var(--rk-bg); }
/* Largest gaps: each opens its level */
#viewRisk .rkb-sum .rks-lvl { width: 100%; margin: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--rks-hair); background: none; color: inherit; font:inherit; text-align: left; cursor: pointer; align-items: center; }
#viewRisk .rkb-sum .rks-lvl:last-child { border-bottom: 0; }
#viewRisk .rkb-sum .rks-lvl .pxs-k { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 auto; color: var(--rk-text); }
#viewRisk .rkb-sum .rks-lvl__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewRisk .rkb-sum .rks-vs { margin-left: auto; font:600 15px/1.35 var(--rk-font); white-space: nowrap; }
#viewRisk .rkb-sum .rks-lvl { flex-wrap: wrap; row-gap: 2px; }   /* one line; on a narrow box the amount drops under the name rather than cutting it */
#viewRisk .rkb-sum .rks-lvl .pxs-k .rkb-badge { flex: none; }
#viewRisk .rkb-sum .rks-lvl .rkb-badge { min-width: 36px; padding: 2px 6px; font-size:14px; }
#viewRisk .rkb-sum .rks-lvl:hover .pxs-k > span { text-decoration: underline; text-underline-offset: 3px; }
#viewRisk .rks-vs.is-under, #viewRisk .rkb-vs.is-under { color: var(--rk-below); }
#viewRisk .rks-vs.is-over, #viewRisk .rkb-vs.is-over { color: var(--rk-amber2); }
#viewRisk .rks-vs.is-ok, #viewRisk .rkb-vs.is-ok { color: var(--rk-up); }
/* By kind: a small stacked bar, then each kind's share */
#viewRisk .rks-kbar { display: flex; gap: 2px; height: 6px; margin: 13px 0 3px; }
#viewRisk .rks-kbar i { display: block; height: 100%; min-width: 0; }
#viewRisk .rks-kbar i:first-child { border-radius: 3px 0 0 3px; }
#viewRisk .rks-kbar i:last-child { border-radius: 0 3px 3px 0; }
#viewRisk .rks-kbar--other, #viewRisk .rks-kdot--other { background: var(--rk-rest); }
#viewRisk .rks-kgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
#viewRisk .rkb-sum .rks-k { padding: 7px 0; }
#viewRisk .rkb-sum .rks-kgrid > .rks-k:nth-last-child(-n+2):nth-child(odd), #viewRisk .rkb-sum .rks-kgrid > .rks-k:last-child { border-bottom: 0; }
#viewRisk .rkb-sum .rks-k .pyx-sw { display: inline-block; width: 9px; height: 9px; margin: 0 8px 0 0; border-radius: 2px; vertical-align: 0; }
/* the links at the foot, and the note on holdings with no cost */
#viewRisk .rks-foot { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--rks-hair); }
#viewRisk .rks-go { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--rk-amber2); font:500 14px/1.3 var(--rk-font); cursor: pointer; }
#viewRisk .rks-go:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewRisk .rks-link { padding: 0; border: 0; background: none; color: var(--rk-text); font:500 14px/1.3 var(--rk-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#viewRisk .rkb-sum__note { margin: 10px 0 0; font:400 14px/1.45 var(--rk-font); color: var(--rk-mute); }
@container pyx (min-width: 561px) and (max-width: 1080px) {
  #viewRisk .rks-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: start; }
}

/* ── the pyramid (Sep 29 2026, the approved mock docs/mocks/pyramid-goal) ──────────────────────────────────
   The outline is the goal (fixed stepped widths, L7 a quarter of L1, centred); the gold is what you hold,
   growing from the centre; past the goal a striped spill sticks out past both edges. Compact, as the mock: fixed
   46px tiers 8px apart, the names right-aligned just left of the pyramid, the figures just right of its widest tier
   (not at the far right), ETFs under a dashed line. It never stretches to the Summary's height: "Levels" starts where
   the pyramid ends and the two columns may end unevenly. Markup: pyramid.js drawStage. */
#viewRisk {
  --rk-slot: linear-gradient(#0b0b0c, #070708); --rk-slot-line: rgba(255, 255, 255, .16); --rk-slot-hover: rgba(255, 255, 255, .42);
  --rk-spill: repeating-linear-gradient(135deg, rgba(232, 179, 58, .6) 0 4px, rgba(232, 179, 58, .14) 4px 8px);
  --rk-under: #93c5fd; --rk-under-bg: rgba(147, 197, 253, .10);
}
body[data-theme="light"] #viewRisk {
  --rk-slot: #fff; --rk-slot-line: rgba(58, 48, 30, .30); --rk-slot-hover: rgba(58, 48, 30, .6);
  --rk-spill: repeating-linear-gradient(135deg, rgba(185, 131, 24, .7) 0 4px, rgba(185, 131, 24, .16) 4px 8px);
  --rk-under: #1d4ed8; --rk-under-bg: rgba(37, 99, 235, .09);
}
#viewRisk .rkb-pyr { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rk-line); container: rkbp / inline-size; }
#viewRisk .rkp-hd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
#viewRisk .rkp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkp-key > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#viewRisk .rkp-sw { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 3px; }
#viewRisk .rkp-sw--hold { background: var(--rk-gold); }
#viewRisk .rkp-sw--goal { border: 1px solid var(--rk-slot-hover); }
#viewRisk .rkp-sw--over { background: var(--rk-spill); }
#viewRisk .rkb-stage { position: relative; margin-top: 18px; }
#viewRisk .rkp-grid { --gut: 32px; --th: 46px; display: grid; grid-template-columns: max-content minmax(0, 560px) max-content; justify-content: start; row-gap: 8px; align-items: center; }
#viewRisk .rkp-row { display: contents; }
#viewRisk .rkp-nm { justify-self: end; font:400 15px/1.3 var(--rk-font); color: var(--rk-sub); white-space: nowrap; }
#viewRisk .rkp-nm b { margin-right: 7px; font-weight: 600; color: var(--rk-text); }
#viewRisk .rkp-tier { display: flex; justify-content: center; min-width: 0; padding: 0 var(--gut); }
#viewRisk .rkp-slot {
  position: relative; display: block; flex: none; width: calc(var(--w) * 100%); height: var(--th); margin: 0; padding: 0;
  border: 1px solid var(--rk-slot-line); border-radius: 7px; background: var(--rk-slot); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#viewRisk .rkp-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--f) * 100%); transform: translateX(-50%); border-radius: 6px;
  background: var(--rk-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 18px rgba(242, 193, 78, .16);
}
#viewRisk .rkp-spill { position: absolute; top: 6px; bottom: 6px; width: var(--sp); background: var(--rk-spill); }
#viewRisk .rkp-spill--l { right: calc(100% + 1px); border-radius: 4px 0 0 4px; }
#viewRisk .rkp-spill--r { left: calc(100% + 1px); border-radius: 0 4px 4px 0; }
#viewRisk .rkp-row[data-k="1"] .rkp-spill { width: min(var(--sp), calc(var(--gut) - 6px)); }   /* the widest tier: its spill stays in the gutter */
#viewRisk .rkp-slot:hover { border-color: var(--rk-slot-hover); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-amber) 14%, transparent); }
#viewRisk .rkp-slot:hover .rkp-fill { filter: brightness(1.07); }
#viewRisk .rkb .rkp-slot:focus-visible { outline: 2px solid var(--rk-amber); outline-offset: 3px; }
#viewRisk .rkp-num { display: flex; align-items: center; font:400 15px/1.3 var(--rk-font); color: var(--rk-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewRisk .rkp-fig b, #viewRisk .rkp-goalonly b { font-size:16px; font-weight: 600; color: var(--rk-text); }
#viewRisk .rkp-nogoal { color: var(--rk-mute); }
#viewRisk .rkp-pill { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 999px; font:600 14px/1.35 var(--rk-font); }
#viewRisk .rkp-pill.is-over { color: var(--rk-amber2); background: var(--rk-amber-bg); }
#viewRisk .rkp-pill.is-under { color: var(--rk-under); background: var(--rk-under-bg); }
#viewRisk .rkp-pill.is-on { color: var(--rk-up); background: var(--rk-up-bg); }
#viewRisk .rkp-sep { grid-column: 1 / -1; height: 0; margin: 12px 0 6px; border-top: 1px dashed var(--rk-line3); }
#viewRisk .rkp-note { margin: 16px 0 0; font:400 14px/1.45 var(--rk-font); color: var(--rk-mute); }
/* the card on a tier */
#viewRisk .rkb-card {
  position: absolute; z-index: 6; width: 252px; padding: 12px 14px; border: 1px solid var(--rk-card); border-radius: 14px;
  background: var(--rk-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none;
}
body[data-theme="light"] #viewRisk .rkb-card { background: #fbfaf6; box-shadow: 0 10px 30px rgba(58, 48, 30, .14); }
#viewRisk .rkb-card[hidden] { display: none; }
#viewRisk .rkb-card__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font:600 14.5px/1.3 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-card__r { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 3px 0; font:400 14px/1.35 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-card__r small { font-size:14px; }
#viewRisk .rkb-card__r b { font-weight: 600; color: var(--rk-text); white-space: nowrap; }
@media (hover: none) { #viewRisk .rkb-card { display: none !important; } }
/* narrow (phones, a tablet held upright): the pyramid scales down, each tier's name on a line above it and
   its figures beside it, the pill under the figure */
@container rkbp (max-width: 720px) {
  #viewRisk .rkp-grid { --gut: 18px; --th: 36px; grid-template-columns: minmax(0, 560px) max-content; row-gap: 5px; }
  #viewRisk .rkp-nm { grid-column: 1 / -1; justify-self: start; margin-top: 5px; font-size:14px; }
  #viewRisk .rkp-row--etf .rkp-nm { margin-top: 0; }
  #viewRisk .rkp-tier { grid-column: 1; }
  #viewRisk .rkp-num { grid-column: 2; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 112px; font-size:14px; }
  #viewRisk .rkp-fig b, #viewRisk .rkp-goalonly b { font-size:15px; }
  #viewRisk .rkp-pill { margin-left: 0; }
  #viewRisk .rkp-sep { margin: 10px 0 4px; }
}

/* ── the levels, one line each ────────────────────────────────────────────────────────────────────── */
#viewRisk .rkb-levels { margin-top: 40px; }
#viewRisk .rkb-lvh { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
#viewRisk .rkb-lvh .rkb-h2 { margin-right: 10px; font-size:20px; letter-spacing: -.02em; }
#viewRisk .rkb .pyx__ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
#viewRisk .rkb .pyx-seg { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; border: 0; background: none; }
#viewRisk .rkb .pyx-seg__b, #viewRisk .rkb .pyx-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; min-height: 34px; padding: 0 14px; border: 1px solid var(--rk-line2); border-radius: 17px;
  background: transparent; color: var(--rk-sub); font:500 14px/1 var(--rk-font); white-space: nowrap; cursor: pointer; box-shadow: none;
}
#viewRisk .rkb .pyx-seg__b:hover, #viewRisk .rkb .pyx-chip:hover { color: var(--rk-text); border-color: var(--rk-line3); background: transparent; }
#viewRisk .rkb .pyx-seg__b.is-on, #viewRisk .rkb .pyx-chip.is-on { color: var(--rk-text); border-color: var(--rk-text); background: transparent; }
#viewRisk .rkb .pyx-seg__b b, #viewRisk .rkb .pyx-chip b { font:500 14px/1 var(--rk-font); color: var(--rk-mute); }
#viewRisk .rkb .pyx-seg__b.is-on b, #viewRisk .rkb .pyx-chip.is-on b { color: var(--rk-sub); }
#viewRisk .rkb .pyx-seg__b .pyx-sw { width: 8px; height: 8px; border-radius: 50%; }
#viewRisk .rkb .pyx-chip__x { display: none; }
#viewRisk .rkb .pyx-chip[hidden] { display: none; }
#viewRisk .rkb .pyx-search {
  display: flex; align-items: center; gap: 9px; width: 260px; height: 34px; margin-left: auto; padding: 0 14px;
  border: 1px solid var(--rk-line2); border-radius: 17px; background: transparent; color: var(--rk-mute);
}
#viewRisk .rkb .pyx-search:focus-within { border-color: var(--rk-line3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rk-amber) 35%, transparent); }
#viewRisk .rkb .pyx-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--rk-text); font:400 14px/1 var(--rk-font); outline: none; box-shadow: none; }
#viewRisk .rkb .pyx-search input::placeholder { color: var(--rk-mute); }
#viewRisk .rkb-lvh__sub { margin: 10px 0 0; font:400 14px/1.4 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-lvh__sub:empty { display: none; }
#viewRisk .rkb-lvh__sub b { color: var(--rk-text); font-weight: 600; }
#viewRisk .rkb .pyx__rms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 12px 0 0; padding: 0; border: 0; background: none; font:400 14px/1.4 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb .pyx__rms[hidden] { display: none; }
#viewRisk .rkb .pyx__rms b { color: var(--rk-text); font-weight: 600; }
#viewRisk .rkb .pyx__rms .pyx__rms-h { color: var(--rk-text); font-weight: 500; }
#viewRisk .rkb .pyx__rms .pyx-link { padding: 0; border: 0; background: none; color: var(--rk-text); font:500 14px/1.4 var(--rk-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* columns: badge · name · funds · avg yield · yours (three marks, +N) · you hold | goal · against goal · › */
#viewRisk .rkb .pyx__lad { display: block; margin-top: 16px; padding: 0; border: 0; background: none; --rkcols: 56px minmax(0, 1fr) 60px 92px 150px 220px 150px 14px; }
#viewRisk .rkb .rkb-hd, #viewRisk .rkb .rkb-row { display: grid; grid-template-columns: var(--rkcols); grid-template-areas: none; column-gap: 14px; align-items: center; }
#viewRisk .rkb .rkb-hd { padding: 0 16px 10px; border-bottom: 1px solid var(--rk-line); font:500 14px/1.2 var(--rk-font); color: var(--rk-mute); text-transform: none; letter-spacing: 0; background: none; }
#viewRisk .rkb .rkb-hd > span { display: flex; align-items: center; gap: 6px; }
#viewRisk .rkb .rkb-hd > .c { justify-content: flex-end; text-align: right; }
#viewRisk .rkb .pyx-rows { display: block; margin: 0; padding: 0; border: 0; background: none; }
#viewRisk .rkb .rkb-row {
  min-height: 54px; margin: 0; padding: 0 16px; border: 0; border-bottom: 1px solid var(--rk-line); border-radius: 0; background: none; box-shadow: none; cursor: pointer;
}
#viewRisk .rkb .rkb-row > * { grid-area: auto; min-width: 0; }
#viewRisk .rkb .rkb-row:hover { background: color-mix(in srgb, var(--rk-text) 4.5%, transparent); }
#viewRisk .rkb .rkb-row.is-sel { background: none; box-shadow: inset 2px 0 0 var(--rk-amber); }
#viewRisk .rkb .rkb-row:focus-visible { outline: 2px solid var(--rk-amber); outline-offset: -2px; box-shadow: none; }
#viewRisk .rkb .rkb-row.pyx-row--static { cursor: default; }
#viewRisk .rkb .rkb-row.pyx-row--static:hover { background: none; }
#viewRisk .rkb .rkb-row.is-zero { opacity: .6; }
#viewRisk .rkb .rkb-row__nm { display: flex; flex-direction: column; gap: 2px; }
#viewRisk .rkb .rkb-row__nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font:500 16px/1.3 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb .rkb-row__nm small { display: none; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb .rkb-row__nm small.is-on { display: block; }
#viewRisk .rkb .pyx-row__n2, #viewRisk .rkb .rkb-row .pyx-row__y { text-align: right; font:500 16px/1.3 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb .pyx-row__n2 b, #viewRisk .rkb .rkb-row .pyx-row__y b { font:inherit; color: inherit; }
#viewRisk .rkb .pyx-row__n2 small { font-size:14px; color: var(--rk-sub); }
#viewRisk .rkb .rkb-row .pyx-row__tks { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
#viewRisk .rkb .pyx-tk__nil { color: var(--rk-mute); font-size:14px; }
#viewRisk .rkb-av {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--rk-line2);
  color: #fff; font:700 13px/1 var(--rk-font); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
#viewRisk .rkb-av.is-4 { font-size:13px; letter-spacing: -.04em; }
#viewRisk .rkb-av--w { background: transparent; color: var(--rk-sub); box-shadow: none; border: 1.3px dashed var(--rk-cents); }
#viewRisk .rkb-av--more { width: auto; min-width: 32px; padding: 0 8px; border-radius: 16px; background: transparent; color: var(--rk-sub); font:500 14px/1 var(--rk-font); box-shadow: inset 0 0 0 1px var(--rk-line3); }
/* you hold | goal: two right-aligned numbers, so each lines up down the column */
#viewRisk .rkb .rkb-row__hg, #viewRisk .rkb .rkb-hd > .rkb-hd__hg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; justify-items: end; }
#viewRisk .rkb .rkb-row__hg { font:400 15px/1.3 var(--rk-font); color: var(--rk-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewRisk .rkb .rkb-row__hg b { font-weight: 600; color: var(--rk-text); }
#viewRisk .rkb .rkb-row__pl { display: flex; justify-content: flex-end; }
/* against goal on a row: plain colored words, no box (colors with the Summary's .rks-vs) */
#viewRisk .rkb-vs { font:600 15px/1.3 var(--rk-font); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewRisk .rkb-vs.is-none { color: var(--rk-mute); font-weight: 400; font-size:14px; }
/* the whole row opens its level: a small › at the end, turned down while its level is open */
#viewRisk .rkb .rkb-row__cv { display: grid; place-items: center; justify-self: end; color: var(--rk-mute); }
#viewRisk .rkb .rkb-row__cv svg { transition: transform .2s ease; }
#viewRisk .rkb .rkb-row:hover .rkb-row__cv { color: var(--rk-text); }
#viewRisk .rkb:not(.is-lvshut) .rkb-row.is-sel .rkb-row__cv { color: var(--rk-amber2); }
#viewRisk .rkb:not(.is-lvshut) .rkb-row.is-sel .rkb-row__cv svg { transform: rotate(90deg); }
#viewRisk .rkb .pyx-rows--extra .rkb-row:first-child { border-top: 0; }
/* the badges: L1 … L7, ETF */
#viewRisk .rkb-badge {
  --c: var(--rk-l0); display: inline-block; min-width: 44px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 7px;
  background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); font:600 14px/1.25 var(--rk-font); font-style: normal; text-align: center;
}
#viewRisk .rkb-badge--1 { --c: var(--rk-l1); } #viewRisk .rkb-badge--2 { --c: var(--rk-l2); } #viewRisk .rkb-badge--3 { --c: var(--rk-l3); }
#viewRisk .rkb-badge--4 { --c: var(--rk-l4); } #viewRisk .rkb-badge--5 { --c: var(--rk-l5); } #viewRisk .rkb-badge--6 { --c: var(--rk-l6); }
#viewRisk .rkb-badge--7 { --c: var(--rk-l7); } #viewRisk .rkb-badge--x { --c: var(--rk-sub); }
#viewRisk .rkb-badge--lg { font-size:15px; padding: 5px 11px; border-radius: 9px; }
/* narrower: your funds' marks go first; phones: two lines */
@container pyx (max-width: 1040px) {
  #viewRisk .rkb .pyx__lad { --rkcols: 52px minmax(0, 1fr) 56px 88px 206px 140px 14px; }
  #viewRisk .rkb .rkb-row .pyx-row__tks, #viewRisk .rkb .rkb-hd__tk { display: none !important; }
}
@container pyx (max-width: 760px) {
  #viewRisk .rkb .rkb-hd { display: none; }
  #viewRisk .rkb .rkb-row {
    grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "b nm pl" "b hg hg"; row-gap: 6px; min-height: 0; padding: 12px 6px 12px 10px; align-items: center;
  }
  #viewRisk .rkb .rkb-row > .rkb-row__b { grid-area: b; align-self: start; }
  #viewRisk .rkb .rkb-row > .rkb-row__nm { grid-area: nm; }
  #viewRisk .rkb .rkb-row > .rkb-row__pl { grid-area: pl; }
  #viewRisk .rkb .rkb-row > .rkb-row__hg { grid-area: hg; display: flex; flex-wrap: wrap; gap: 2px 14px; text-align: left; font-size:14px; }
  #viewRisk .rkb .rkb-row > .rkb-row__hg > b::before { content: "You hold "; font-weight: 400; color: var(--rk-sub); }
  #viewRisk .rkb .rkb-row > .rkb-row__hg > span:not(:empty)::before { content: "goal "; }
  #viewRisk .rkb .rkb-row > .rkb-row__hg > b:empty { display: none; }
  #viewRisk .rkb .rkb-row > :is(.pyx-row__n2, .pyx-row__y, .pyx-row__tks, .rkb-row__cv) { display: none !important; }
  #viewRisk .rkb .rkb-row__nm small { display: block; }
  #viewRisk .rkb .rkb-row__nm b { font-size:15px; white-space: normal; }
  #viewRisk .rkb .rkb-row > .rkb-row__pl { align-self: start; }
  #viewRisk .rkb-badge { min-width: 38px; padding: 3px 6px; }
  #viewRisk .rkb-vs { font-size:14px; }
  #viewRisk .rkb .pyx-search { width: 100%; margin-left: 0; }
  #viewRisk .rkb .pyx-seg { gap: 8px; }
  #viewRisk .rkb .pyx-seg__b, #viewRisk .rkb .pyx-chip { padding: 0 11px; font-size:14px; }
}

/* ── the chosen level ─────────────────────────────────────────────────────────────────────────────── */
#viewRisk .rkb .pyx-list { margin: 28px 0 0; padding: 0; border: 0; background: none; }
#viewRisk .rkb-lvd { padding: 20px 20px 10px; border: 0; border-top: 1px solid var(--rk-line3); border-radius: 0; background: var(--rks-surf); }
#viewRisk .rkb .rkb-lvd .rkb-cpt thead th { background: var(--rks-surf); }
#viewRisk .rkb-lvd.is-shut { padding-bottom: 22px; }
#viewRisk .rkb-lvd__h3 { margin: 0; }
#viewRisk .rkb-lvd__hd { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--rk-text); text-align: left; cursor: pointer; }
#viewRisk .rkb-lvd__tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#viewRisk .rkb-lvd__ov { font:500 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-lvd__n { font:600 22px/1.25 var(--rk-font); letter-spacing: -.025em; color: var(--rk-text); }
#viewRisk .rkb-lvd__cl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--rk-line2); border-radius: 18px; font:500 14px/1 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-lvd__hd:hover .rkb-lvd__cl { border-color: var(--rk-line3); }
#viewRisk .rkb-lvd__cl svg { transform: rotate(180deg); color: var(--rk-sub); transition: transform .2s ease; }
#viewRisk .rkb-lvd__clo { display: none; }
#viewRisk .rkb-lvd.is-shut .rkb-lvd__clx { display: none; }
#viewRisk .rkb-lvd.is-shut .rkb-lvd__clo { display: inline; }
#viewRisk .rkb-lvd.is-shut .rkb-lvd__cl svg { transform: none; }
#viewRisk .rkb-lvd__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: 18px; border-top: 1px solid var(--rk-line); }
#viewRisk .rkb-lvd:not(.has-pos) .rkb-lvd__body { grid-template-columns: minmax(0, 1fr); }
#viewRisk .rkb-lvd__grp { min-width: 0; padding: 18px 0; }
#viewRisk .rkb-lvd__grp + .rkb-lvd__grp { padding-left: 28px; margin-left: 28px; border-left: 1px solid var(--rk-line); }
#viewRisk .rkb-lvd__o { display: flex; align-items: center; gap: 6px; margin: 0; font:600 16px/1.3 var(--rk-font); letter-spacing: -.015em; color: var(--rk-text); text-transform: none; }
#viewRisk .rkb-figs { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 12px 0 0; }
#viewRisk .rkb-fig dt { margin: 0; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-fig dd { margin: 4px 0 0; font:600 24px/1.15 var(--rk-font); letter-spacing: -.03em; color: var(--rk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewRisk .rkb-fig dd small { display: block; margin-top: 2px; font:400 14px/1.3 var(--rk-font); letter-spacing: 0; color: var(--rk-sub); }
#viewRisk .rkb-fig .pyx-u { font-size:15px; font-weight: 500; letter-spacing: 0; color: var(--rk-sub); }
#viewRisk .rkb-fig .pyx-st__q { font-size:14px; }
#viewRisk .rkb-kind__bar { display: flex; gap: 2px; height: 10px; margin-top: 16px; border-radius: 6px; overflow: hidden; }
#viewRisk .rkb-kind__bar i { display: block; height: 100%; min-width: 3px; }
#viewRisk .rkb-kind__lg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-kind__lg > span { display: inline-flex; align-items: center; gap: 7px; }
#viewRisk .rkb-kind__lg b { color: var(--rk-text); font-weight: 600; }
#viewRisk .rkb-kind__lg .pyx-sw { width: 9px; height: 9px; border-radius: 50%; }
#viewRisk .rkb-pos { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
#viewRisk .rkb-pos__bar { position: relative; flex: 1; min-width: 80px; height: 10px; border-radius: 6px; background: var(--rk-line2); }
#viewRisk .rkb-pos__f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #b27c16, #f5c451); }
#viewRisk .rkb-pos__t { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--rk-text); box-shadow: 0 0 0 2px var(--rk-bg); }
/* the level's funds */
#viewRisk .rkb-lt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--rk-line); }
#viewRisk .rkb-lt__h { font:600 17px/1.3 var(--rk-font); letter-spacing: -.015em; color: var(--rk-text); }
#viewRisk .rkb-lt__s { font:400 14px/1.3 var(--rk-font); color: var(--rk-mute); }
#viewRisk .rkb-lt .pyx-keys { display: flex; gap: 16px; margin-left: auto; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-lt .pyx-key { display: inline-flex; align-items: center; gap: 7px; }
#viewRisk .rkb .pyx-t__wrap { margin-top: 8px; max-height: none; overflow: visible; }
#viewRisk .rkb .rkb-cpt { width: 100%; background: none; font-family: var(--rk-font); }
#viewRisk .rkb .rkb-cpt thead th {
  padding: 12px 10px; border-bottom: 1px solid var(--rk-line); background: var(--rk-bg); color: var(--rk-mute);
  font:500 13px/1.2 var(--rk-font); letter-spacing: 0; text-transform: none;
}
#viewRisk .rkb .rkb-cpt thead th .pyx-sort { font:inherit; color: inherit; letter-spacing: 0; text-transform: none; }
#viewRisk .rkb .rkb-cpt tbody td { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--rk-line); background: none; font-size:14.5px; }
#viewRisk .rkb .rkb-cpt tbody tr[hidden] { display: none; }
#viewRisk .rkb .rkb-cpt tbody tr:hover > td { background: color-mix(in srgb, var(--rk-text) 2.5%, transparent); }
#viewRisk .rkb .rkb-cpt :is(th, td):first-child { padding-left: 0; }
#viewRisk .rkb .rkb-cpt :is(th, td):last-child { padding-right: 0; }
#viewRisk .rkb-more {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 8px; padding: 8px 15px; border: 1px solid var(--rk-line2); border-radius: 17px;
  background: none; color: var(--rk-text); font:500 14px/1.2 var(--rk-font); cursor: pointer;
}
#viewRisk .rkb-more:hover { border-color: var(--rk-line3); }
#viewRisk .rkb-more svg { color: var(--rk-sub); transition: transform .2s ease; }
#viewRisk .rkb-more[aria-expanded="true"] svg { transform: rotate(180deg); }
#viewRisk .rkb .pyx-empty { padding: 22px 0 10px; text-align: left; }
#viewRisk .rkb .pyx__note { margin: 14px 0 0; padding: 0; border: 0; font:400 14px/1.5 var(--rk-font); color: var(--rk-mute); }
@container pyx (max-width: 760px) {
  #viewRisk .rkb-lvd { padding: 16px 14px 8px; }
  #viewRisk .rkb-lvd__hd { gap: 12px; }
  #viewRisk .rkb-lvd__n { font-size:18px; }
  #viewRisk .rkb-lvd__cl { padding: 0 10px; }
  #viewRisk .rkb-lvd__clx, #viewRisk .rkb-lvd__clo { display: none !important; }
  #viewRisk .rkb-lvd__body { grid-template-columns: minmax(0, 1fr); }
  #viewRisk .rkb-lvd__grp + .rkb-lvd__grp { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid var(--rk-line); }
  #viewRisk .rkb-figs { gap: 12px 28px; }
  #viewRisk .rkb-fig dd { font-size:20px; }
  #viewRisk .rkb-pos { flex-wrap: wrap; }
  #viewRisk .rkb .pyx-t__wrap { overflow-x: auto; }
  #viewRisk .rkb .rkb-cpt thead th { position: static; }
  #viewRisk .rkb-lt .pyx-keys { margin-left: 0; }
}
@container pyx (max-width: 560px) {
  #viewRisk .rkb-big__v strong { font-size:52px; }
  #viewRisk .rkb-big__rest { font-size:22px; }
  #viewRisk .rkb-big__goal { padding-left: 18px; }
  #viewRisk .rkb-big__goal b { font-size:24px; }
  #viewRisk .rkb-lvd__body .rkb-figs { gap: 12px 24px; }
}

/* ── "Adjust your goal" and "Your Selection Universe": folded rows (app.js rkUniverseRow) ──────────── */
#viewRisk #rkTop { display: flex; flex-direction: column; gap: 12px; margin: 40px 0 0; }
#viewRisk #rkTop > .rkb-adj { order: 1; }
#viewRisk #rkTop > .rkb-uni { order: 2; }
#viewRisk .rk-adjust.rkb-adj, #viewRisk .rmsu.rkb-uni {
  margin: 0 !important; padding: 0; background: none !important; border: 1px solid var(--rk-line2) !important; border-radius: 18px !important; box-shadow: none !important;
  font-family: var(--rk-font);
}
body[data-theme="light"] #viewRisk .rk-adjust.rkb-adj, body[data-theme="light"] #viewRisk .rmsu.rkb-uni { background: var(--surface, #f7f5f0) !important; }
#viewRisk .rkb-fold {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 18px;
  width: 100%; min-height: 0; margin: 0; padding: 18px 22px; border: 0; border-radius: 18px; background: none !important; color: var(--rk-text); text-align: left; cursor: pointer;
}
#viewRisk .rkb-fold:hover { background: color-mix(in srgb, var(--rk-text) 2%, transparent) !important; }
#viewRisk .rkb-fold__ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rk-line2); border-radius: 50%; color: var(--rk-amber); }
#viewRisk .rkb-fold__tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#viewRisk .rkb-adj .rk-adjust__t, #viewRisk .rkb-uni .rmsu__title { margin: 0; font:600 18px/1.3 var(--rk-font); letter-spacing: -.015em; color: var(--rk-text); text-transform: none; }
#viewRisk .rkb-uni .rmsu__title::before, #viewRisk .rkb-uni .rmsu__hint::before { display: none; content: none; }
#viewRisk .rkb-fold__sub, #viewRisk .rkb-uni .rmsu__hint { font:400 14.5px/1.35 var(--rk-font); letter-spacing: 0; text-transform: none; color: var(--rk-sub); }
#viewRisk .rkb-fold__fig { grid-column: 4; text-align: right; font:400 14px/1.3 var(--rk-font); color: var(--rk-sub); white-space: nowrap; }
#viewRisk .rkb-fold__fig b { display: block; font:600 20px/1.2 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-fold__fig b small { font:500 18px/1 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-fold__fig > small { display: block; font-size:14px; }
#viewRisk .rkb-fold__cv { grid-column: 5; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rk-line2); border-radius: 50%; color: var(--rk-sub); transition: transform .2s ease; }
#viewRisk .rkb-adj .rk-adjust__chev { display: none; }
#viewRisk .rkb-adj .rk-adjust__ok { grid-column: 3; padding: 3px 10px; border-radius: 8px; background: var(--rk-up-bg); color: var(--rk-up); font:600 13.5px/1.3 var(--rk-font); }
#viewRisk .rkb-adj .rk-adjust__ok[hidden] { display: none; }
#viewRisk .rkb-adj.is-open .rkb-fold__cv, #viewRisk .rkb-uni:not(.is-folded) .rkb-fold__cv { transform: rotate(180deg); border-color: var(--rk-amber); color: var(--rk-amber2); }
#viewRisk .rkb-adj.is-open .rkb-fold { border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--rk-line); }
/* the Selection Universe head is universe.js's <header>: title and hint stacked beside the round mark */
#viewRisk .rkb-uni .rmsu__head.rkb-fold { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "ic t fig cv" "ic h fig cv"; row-gap: 3px; border-bottom: 0; }
#viewRisk .rkb-uni .rmsu__head .rkb-fold__ic { grid-area: ic; }
#viewRisk .rkb-uni .rmsu__head .rmsu__title { grid-area: t; display: block; }
#viewRisk .rkb-uni .rmsu__head .rmsu__hint { grid-area: h; }
#viewRisk .rkb-uni .rmsu__head .rkb-fold__fig { grid-area: fig; grid-column: auto; }
#viewRisk .rkb-uni .rmsu__head .rkb-fold__cv { grid-area: cv; grid-column: auto; }
#viewRisk .rkb-uni:not(.is-folded) .rmsu__head { border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--rk-line); }
#viewRisk .rmsu.rkb-uni.is-folded > .rmsu__body { display: none; }
#viewRisk .rmsu.rkb-uni > .rmsu__body { padding: 18px 22px 20px 84px; }
@media (max-width: 720px) {
  #viewRisk .rkb-fold, #viewRisk .rkb-uni .rmsu__head.rkb-fold { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; padding: 14px 14px; }
  #viewRisk .rkb-uni .rmsu__head.rkb-fold { grid-template-areas: "t fig cv" "h h h"; }
  #viewRisk .rkb-fold__ic { display: none; }
  #viewRisk .rkb-adj .rkb-fold__tt { grid-column: 1; }
  #viewRisk .rkb-adj .rkb-fold__fig { grid-column: 2; }
  #viewRisk .rkb-adj .rkb-fold__cv { grid-column: 3; }
  #viewRisk .rkb-adj .rk-adjust__ok { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 6px; }
  #viewRisk .rmsu.rkb-uni > .rmsu__body { padding: 14px; }
  #viewRisk .rkb-fold__fig b { font-size:17px; }
}

/* the goal controls inside "Adjust your goal" (index.html #riskGoalCtl; app.js draws the table) */
#viewRisk .rkb-adj .rk-adjust__body { padding: 20px 22px 18px 84px; }
@media (max-width: 720px) { #viewRisk .rkb-adj .rk-adjust__body { padding: 14px; } }
#viewRisk .rkb-adj .rkg { margin: 0; padding: 0; border: 0; background: none; font-family: var(--rk-font); }
#viewRisk .rkb-adj .rkg-intro { display: none; }
#viewRisk .rkb-adj .rkg-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 48px; margin: 0; padding: 0; border: 0; }
#viewRisk .rkb-adj .rkg-lbl { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font:400 14.5px/1.3 var(--rk-font); letter-spacing: 0; text-transform: none; color: var(--rk-sub); }
#viewRisk .rkb-adj .rkg-seg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; background: none; }
#viewRisk .rkb-adj .rkg-seg__b {
  height: 44px; padding: 0 20px; border: 1px solid var(--rk-line2); border-radius: 22px; background: transparent; color: var(--rk-sub);
  font:500 16px/1 var(--rk-font); text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer;
}
#viewRisk .rkb-adj .rkg-seg__b:hover { color: var(--rk-text); border-color: var(--rk-line3); }
#viewRisk .rkb-adj .rkg-seg__b.is-active { background: var(--rk-amber); border-color: var(--rk-amber); color: var(--rk-amber-ink); font-weight: 600; }
#viewRisk .rkb-adj .rkg-cash {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--rk-line2); border-radius: 12px; background: transparent;
}
#viewRisk .rkb-adj .rkg-cash em { font-style: normal; color: var(--rk-sub); font:400 16px/1 var(--rk-font); }
#viewRisk .rkb-adj .rkg-cash input { width: 11ch; border: 0; background: none; color: var(--rk-text); font:500 16px/1 var(--rk-font); outline: none; box-shadow: none; padding: 0; }
#viewRisk .rkb-adj .rkg-cash:focus-within { border-color: var(--rk-line3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rk-amber) 35%, transparent); }
#viewRisk .rkb-adj .rkg-f__hint { display: block; margin-top: 8px; font:400 13px/1.4 var(--rk-font); color: var(--rk-mute); }
#viewRisk .rkb-adj .rkg-map { margin-top: 22px; }
#viewRisk .rkb-adj .rkg-t { width: 100%; border-collapse: collapse; background: none; font-family: var(--rk-font); }
#viewRisk .rkb-adj .rkg-t thead th { padding: 0 10px 12px; border-bottom: 1px solid var(--rk-line); background: none; color: var(--rk-mute); font:500 13.5px/1.2 var(--rk-font); letter-spacing: 0; text-transform: none; }
#viewRisk .rkb-adj .rkg-t tbody th, #viewRisk .rkb-adj .rkg-t tbody td { padding: 12px 10px; border-bottom: 1px solid var(--rk-line); background: none; }
#viewRisk .rkb-adj .rkg-t .rkg-c:first-child { padding-left: 0; }
#viewRisk .rkb-adj .rkg-lv { display: inline-flex; align-items: center; gap: 10px; font:400 16px/1.3 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-adj .rkg-lv b { min-width: 42px; padding: 3px 8px; border: 1px solid var(--rk-line3); border-radius: 7px; font:600 14px/1.25 var(--rk-font); text-align: center; color: var(--rk-sub); }
#viewRisk .rkb-adj .rkg-lv__dot { display: none; }
#viewRisk .rkb-adj .rkg-gh { display: inline-flex; align-items: center; gap: 8px; font:400 15px/1.3 var(--rk-font); color: var(--rk-sub); text-transform: none; letter-spacing: 0; }
#viewRisk .rkb-adj .rkg-gh b { color: var(--rk-text); font-weight: 600; }
#viewRisk .rkb-adj .rkg-step { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--rk-line2); border-radius: 21px; background: none; overflow: hidden; }
#viewRisk .rkb-adj .rkg-step__b { width: 42px; height: 100%; border: 0; background: none; color: var(--rk-sub); font:400 18px/1 var(--rk-font); cursor: pointer; }
#viewRisk .rkb-adj .rkg-step__b:hover { color: var(--rk-text); background: color-mix(in srgb, var(--rk-text) 4%, transparent); }
#viewRisk .rkb-adj .rkg-step__v { display: inline-flex; align-items: center; height: 100%; padding: 0 10px; border-left: 1px solid var(--rk-line2); border-right: 1px solid var(--rk-line2); }
#viewRisk .rkb-adj .rkg-step__v input { width: 4ch; border: 0; background: none; color: var(--rk-text); font:600 16px/1 var(--rk-font); text-align: right; outline: none; box-shadow: none; padding: 0; }
#viewRisk .rkb-adj .rkg-step__v i { font-style: normal; font:600 16px/1 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-adj .rkg-sub { font:400 13px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-adj .rkg-hv b { font:500 16px/1.3 var(--rk-font); color: var(--rk-text); }
#viewRisk .rkb-adj .rkg-gap__t { font:400 15px/1.3 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-adj .rkg-gap__t b { font-weight: 600; color: var(--rk-text); }
#viewRisk .rkb-adj .is-over .rkg-gap__t b { color: var(--rk-amber2); }
#viewRisk .rkb-adj .is-ok .rkg-gap__t { color: var(--rk-up); font-weight: 600; }
#viewRisk .rkb-adj .rkg-gap__bar { background: var(--rk-line2); }
#viewRisk .rkb-adj .rkg-tot__ok { color: var(--rk-text); }
#viewRisk .rkb-adj .rkg-tot__of { color: var(--rk-sub); }
#viewRisk .rkb-adj .rkg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 14px; margin-top: 16px; padding: 0; border: 0; }
#viewRisk .rkb-adj .rkg-hint { order: -1; margin: 0 auto 0 0; font:400 13.5px/1.4 var(--rk-font); color: var(--rk-mute); }
#viewRisk .rkb-adj .rkg-reset { height: 42px; padding: 0 18px; border: 1px solid var(--rk-line2); border-radius: 21px; background: none; color: var(--rk-text); font:500 15px/1 var(--rk-font); cursor: pointer; }
#viewRisk .rkb-adj .rkg-reset:hover { border-color: var(--rk-line3); }
#viewRisk .rkb-adj .rkg-save {
  height: 42px; padding: 0 20px; border: 1px solid var(--rk-amber); border-radius: 21px; background: var(--rk-amber); color: var(--rk-amber-ink); font:600 15px/1 var(--rk-font); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16);
}
#viewRisk .rkb-adj .rkg-save:hover { filter: brightness(1.06); }
#viewRisk .rkb-adj .rkg-t :is(b, input, .rkg-sub, .rkg-hv) { font-family: var(--rk-font); letter-spacing: 0; }
#viewRisk .rkb-adj .rkg-sw--low { background: var(--rk-low); }
#viewRisk .rkb-adj .rkg-sw--high { background: var(--rk-high); }

/* ── Sep 29 2026 bug sweep ─────────────────────────────────────────────────────────────────────────────────────────
   A level opened from a tier or a Summary row, and "Adjust your goal" opened from the Summary, were scrolled to the very
   top, under the 48px sticky top bar: they now stop just below it (--rk-sticky, pyramid.css). (The pyramid no longer
   stretches to the Summary's height: owner, Sep 29, "just so sloppy"; it is compact, as the mock.) */
#viewRisk .pyx-lvd, #viewRisk #rkAdjust { scroll-margin-top: calc(var(--rk-sticky, 48px) + 12px); }

/* ── Sep 29 2026, owner: "off colors and open space, maybe throw the summary in the free space" ─────────────────────
   Layout (second pass, owner: the Summary as one tall column read badly): the hero (mix, goal, split bar) spans the
   page above; under it the pyramid on the left and, beside it, the Summary as a 2 x 2 grid of compact groups (Capital |
   Income, Largest gaps | By kind), its top level with the pyramid's rule. Stacked below ~1200px wide (container 1100).
   Color: one calm palette. Gold for what you hold and for "over goal", green only for "On goal", "under goal" in
   neutral grey on a faint tint, greys for everything else; red only for a real loss (.rkb-down). */
@container pyx (min-width: 1100px) {
  #viewRisk .rkb-hero {
    grid-template-columns: minmax(0, 1fr) clamp(600px, 50%, 820px); grid-template-areas: "me me" "pyr sum"; grid-template-rows: auto auto; column-gap: 40px;
  }
  #viewRisk .rkb-hero .rkb-sum { margin-top: 30px; padding: 16px 22px 12px; }
  #viewRisk .rkb-sum .rks-grid { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: space-between; column-gap: 32px; row-gap: 14px; margin-top: 8px; align-items: start; }
  #viewRisk .rkb-sum .pxs-r { padding: 6px 0; }
  #viewRisk .rkb-sum .pxs-r.is-lead { padding: 7px 0; }
  #viewRisk .rkb-sum .pxs-v .pxs-big { font-size:18px; }
  #viewRisk .rkb-sum .rks-foot { margin-top: 10px; padding-top: 10px; }
  #viewRisk .rkb-sum .rks-lvl { flex-wrap: nowrap; }
  #viewRisk .rkb-sum .rks-lvl .rkb-badge { min-width: 32px; padding: 1px 5px; }
  #viewRisk .rkb-sum .rks-lvl__n { white-space: normal; overflow: visible; }
  #viewRisk .rkb-sum .pxs-k { flex: none; white-space: nowrap; }
  #viewRisk .rkb-sum .pxs-v { flex: 0 1 auto; min-width: 0; }
  #viewRisk .rkb-sum .pxs-rms { display: block; }
  #viewRisk .rkb-sum .pxs-v small { white-space: normal; }
  #viewRisk .rkb-sum .rks-kgrid { column-gap: 14px; }
  #viewRisk .rkb-sum .rks-k .pxs-k { white-space: nowrap; }
  /* the pyramid beside it: its own container name, so the phone layout (rkbp) stays for the stacked page only;
     narrower here, the names may take two lines and each pill sits under its figure */
  #viewRisk .rkb-hero .rkb-pyr { container-name: rkbw; }
}
@container pyx (min-width: 1081px) and (max-width: 1099.98px) {
  #viewRisk .rkb-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "me" "sum" "pyr"; grid-template-rows: none; }
  #viewRisk .rkb-hero .rkb-sum { margin-top: 24px; }
  #viewRisk .rks-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: start; }
}
@container rkbw (max-width: 700px) {
  #viewRisk .rkp-nm { max-width: 150px; white-space: normal; text-align: right; line-height: 1.25; }
}
@container rkbw (max-width: 800px) {
  #viewRisk .rkp-grid { --gut: 22px; }
  #viewRisk .rkp-num { flex-direction: column; align-items: flex-start; gap: 3px; }
  #viewRisk .rkp-pill { margin-left: 0; }
}
#viewRisk {
  --rk-low: #e0a82e; --rk-high: #7c7c84; --rk-rest: #34353b;
  --rk-below: #c8c8cc; --rk-under: #c8c8cc; --rk-under-bg: rgba(255, 255, 255, .07);
  --rk-l0: #b4b4ba; --rk-l1: var(--rk-l0); --rk-l2: var(--rk-l0); --rk-l3: var(--rk-l0); --rk-l4: var(--rk-l0); --rk-l5: var(--rk-l0); --rk-l6: var(--rk-l0); --rk-l7: var(--rk-l0);
}
body[data-theme="light"] #viewRisk {
  --rk-low: #c08a14; --rk-high: #a8a8b0; --rk-rest: #4a4b52;
  --rk-below: #474b55; --rk-under: #474b55; --rk-under-bg: rgba(58, 48, 30, .07);
  --rk-l0: #4a4d56; --rk-l1: var(--rk-l0); --rk-l2: var(--rk-l0); --rk-l3: var(--rk-l0); --rk-l4: var(--rk-l0); --rk-l5: var(--rk-l0); --rk-l6: var(--rk-l0); --rk-l7: var(--rk-l0);
}
/* the kinds of fund, gold and grey (the Summary's By kind, the level filter, an opened level's mix) */
#viewRisk .pyx.rkb { --pyx-tf: #e0a82e; --pyx-tx: #f3d68f; --pyx-eq: #9a9aa2; --pyx-etf: #55565e; }
body[data-theme="light"] #viewRisk .pyx.rkb { --pyx-tf: #c08a14; --pyx-tx: #e9c870; --pyx-eq: #9a9aa2; --pyx-etf: #3f4047; }
/* level badges: a neutral outline, not a color per level */
#viewRisk .rkb-badge { border-color: var(--rk-line3); background: transparent; }
/* green is kept for "On goal": what the holdings pay and a gain are plain figures in the Summary */
#viewRisk .rkb-sum .rkb-up { color: var(--rk-text) !important; }
#viewRisk .rkb-sum .pxs-v small .rkb-up { color: var(--rk-sub) !important; }
/* "Adjust your goal" as quiet as "Your Selection Universe" (owner, Sep 29: its heavy amber outline): no amber ring when it
   takes the focus (the Summary's link focuses it), no amber chevron when open; a grey focus ring still shows the keyboard. */
#viewRisk .rkb-fold:focus-visible { outline: 2px solid var(--rk-mute); outline-offset: -2px; }
#viewRisk .rkb-adj.is-open .rkb-fold__cv, #viewRisk .rkb-uni:not(.is-folded) .rkb-fold__cv { border-color: var(--rk-line3); color: var(--rk-text); }
#viewRisk .rk-adjust.rkb-adj:focus-within, #viewRisk .rk-adjust.rkb-adj.is-open { border-color: var(--rk-line2) !important; box-shadow: none !important; outline: 0; }

/* ── Sep 29 2026, a real account: the hero (mix, goal, bar) used only the left ~650px, and the Summary started far
   below on the right. Now the Summary sits beside the hero and the pyramid from the top, the pyramid under the hero. */
@container pyx (min-width: 1100px) {
  #viewRisk .rkb-hero { grid-template-columns: minmax(0, 1fr) clamp(440px, 34%, 560px); grid-template-areas: "me sum" "pyr sum"; grid-template-rows: auto 1fr; column-gap: 40px; }
  #viewRisk .rkb-hero .rkb-sum { margin-top: 0; align-self: start; }
  /* one column of the four groups, so its height is near the hero + pyramid beside it */
  #viewRisk .rkb-sum .rks-grid { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
}

/* ── Sep 30 2026, owner: "no color coding, so much white and grey… no pizzazz" ──────────────────────────────────────
   Every level has its color, everywhere on Risk mix: the pyramid's tiers (the fill a gradient of the level's color, the
   goal outline a light tint of it, the over-goal spill a hatch of it), the level tags and badges, a bar at the left of each
   level row, the hero's split bar (one segment per level), Largest gaps, the opened level and the goal table. The hues are
   the Portfolio page's level pills (portfolio.css --px-l1…7: sky, blue, indigo, violet, fuchsia, orange; level 7 there is
   red in light mode, so red here in both), running calm → hot from level 1 to 7; ETFs teal, beside the pyramid.
   --rk-lN is the text/badge color (≥ 4.5:1 on its tint), --rk-fNa / --rk-fNb the fill's top and bottom.
   Status: over goal warm (amber), under goal cool (blue), on goal green. Light mode: white cards with a soft shadow on the
   warm page. This block supersedes the grey overrides above (the Sep 29 "one calm palette" pass). */
#viewRisk {
  --rk-l1: #7dd3fc; --rk-l2: #93c5fd; --rk-l3: #a5b4fc; --rk-l4: #c4b5fd; --rk-l5: #f0abfc; --rk-l6: #fdba74; --rk-l7: #fca5a5; --rk-letf: #5eead4; --rk-l0: #d4d4d8;
  --rk-f1a: #7dd3fc; --rk-f1b: #0284c7; --rk-f2a: #93c5fd; --rk-f2b: #2563eb; --rk-f3a: #a5b4fc; --rk-f3b: #4f46e5; --rk-f4a: #c4b5fd; --rk-f4b: #7c3aed;
  --rk-f5a: #f0abfc; --rk-f5b: #c026d3; --rk-f6a: #fdba74; --rk-f6b: #ea580c; --rk-f7a: #fda4af; --rk-f7b: #dc2626; --rk-fetfa: #5eead4; --rk-fetfb: #0d9488;
  --rk-slot-base: #0c0c0e; --rk-tint: 9%; --rk-edge: 48%;
  --rk-over: #fbbf24; --rk-over-bg: rgba(251, 191, 36, .13);
  --rk-under: #93c5fd; --rk-under-bg: rgba(147, 197, 253, .13); --rk-below: #93c5fd;
  --rk-rest: #3a3a41;
  --rk-lift: 0 0 0 1px rgba(255, 255, 255, .02), 0 12px 32px rgba(0, 0, 0, .35);
}
body[data-theme="light"] #viewRisk {
  --rk-l1: #075985; --rk-l2: #1e40af; --rk-l3: #4338ca; --rk-l4: #5b21b6; --rk-l5: #86198f; --rk-l6: #9a3412; --rk-l7: #991b1b; --rk-letf: #115e59; --rk-l0: #52525b;
  --rk-f1a: #38bdf8; --rk-f1b: #0284c7; --rk-f2a: #60a5fa; --rk-f2b: #2563eb; --rk-f3a: #818cf8; --rk-f3b: #4f46e5; --rk-f4a: #a78bfa; --rk-f4b: #7c3aed;
  --rk-f5a: #e879f9; --rk-f5b: #c026d3; --rk-f6a: #fb923c; --rk-f6b: #ea580c; --rk-f7a: #f87171; --rk-f7b: #dc2626; --rk-fetfa: #2dd4bf; --rk-fetfb: #0d9488;
  --rk-slot-base: #ffffff; --rk-tint: 7%; --rk-edge: 42%;
  --rk-over: #92400e; --rk-over-bg: rgba(217, 119, 6, .12);
  --rk-under: #1e40af; --rk-under-bg: rgba(37, 99, 235, .10); --rk-below: #1e40af;
  --rk-rest: #cfcac0;
  --rk-lift: 0 1px 2px rgba(58, 48, 30, .06), 0 8px 24px rgba(58, 48, 30, .07);
}
/* which level an element is: its color, and its fill's two ends */
#viewRisk :is(.rkp-row[data-k="1"], .rkb-row[data-lv="1"], .rkb-mixbar__seg[data-lv="1"], .rkb-badge--1, .rkg-r[data-k="1"], .rkb-lvd[data-lvd="1"]) { --c: var(--rk-l1); --ca: var(--rk-f1a); --cb: var(--rk-f1b); }
#viewRisk :is(.rkp-row[data-k="2"], .rkb-row[data-lv="2"], .rkb-mixbar__seg[data-lv="2"], .rkb-badge--2, .rkg-r[data-k="2"], .rkb-lvd[data-lvd="2"]) { --c: var(--rk-l2); --ca: var(--rk-f2a); --cb: var(--rk-f2b); }
#viewRisk :is(.rkp-row[data-k="3"], .rkb-row[data-lv="3"], .rkb-mixbar__seg[data-lv="3"], .rkb-badge--3, .rkg-r[data-k="3"], .rkb-lvd[data-lvd="3"]) { --c: var(--rk-l3); --ca: var(--rk-f3a); --cb: var(--rk-f3b); }
#viewRisk :is(.rkp-row[data-k="4"], .rkb-row[data-lv="4"], .rkb-mixbar__seg[data-lv="4"], .rkb-badge--4, .rkg-r[data-k="4"], .rkb-lvd[data-lvd="4"]) { --c: var(--rk-l4); --ca: var(--rk-f4a); --cb: var(--rk-f4b); }
#viewRisk :is(.rkp-row[data-k="5"], .rkb-row[data-lv="5"], .rkb-mixbar__seg[data-lv="5"], .rkb-badge--5, .rkg-r[data-k="5"], .rkb-lvd[data-lvd="5"]) { --c: var(--rk-l5); --ca: var(--rk-f5a); --cb: var(--rk-f5b); }
#viewRisk :is(.rkp-row[data-k="6"], .rkb-row[data-lv="6"], .rkb-mixbar__seg[data-lv="6"], .rkb-badge--6, .rkg-r[data-k="6"], .rkb-lvd[data-lvd="6"]) { --c: var(--rk-l6); --ca: var(--rk-f6a); --cb: var(--rk-f6b); }
#viewRisk :is(.rkp-row[data-k="7"], .rkb-row[data-lv="7"], .rkb-mixbar__seg[data-lv="7"], .rkb-badge--7, .rkg-r[data-k="7"], .rkb-lvd[data-lvd="7"]) { --c: var(--rk-l7); --ca: var(--rk-f7a); --cb: var(--rk-f7b); }
#viewRisk :is(.rkp-row[data-k="etf"], .rkb-row[data-lv="etf"], .rkb-mixbar__seg[data-lv="etf"], .rkb-badge--etf, .rkg-r[data-k="etf"], .rkb-lvd[data-lvd="etf"]) { --c: var(--rk-letf); --ca: var(--rk-fetfa); --cb: var(--rk-fetfb); }

/* the badges: L1 … L7, ETF, each in its color on a tint of it */
#viewRisk .rkb-badge { color: var(--c); border-color: color-mix(in srgb, var(--cb, var(--rk-l0)) 50%, transparent); background: color-mix(in srgb, var(--cb, var(--rk-l0)) 16%, transparent); }
body[data-theme="light"] #viewRisk .rkb-badge { background: color-mix(in srgb, var(--cb, var(--rk-l0)) 11%, #fff); }
#viewRisk .rkb-badge--x { --c: var(--rk-sub); --cb: var(--rk-l0); }

/* the pyramid: goal outline a light tint of the level's color, the fill its gradient with a soft glow */
#viewRisk .rkp-slot {
  border: 1.5px solid color-mix(in srgb, var(--cb) var(--rk-edge), transparent);
  background: color-mix(in srgb, var(--ca) var(--rk-tint), var(--rk-slot-base));
}
#viewRisk .rkp-fill {
  top: -1.5px; bottom: -1.5px; border-radius: 7px;
  background: linear-gradient(180deg, var(--ca) 0%, color-mix(in srgb, var(--ca) 45%, var(--cb)) 45%, var(--cb) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 18px color-mix(in srgb, var(--cb) 38%, transparent);
}
body[data-theme="light"] #viewRisk .rkp-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 8px color-mix(in srgb, var(--cb) 30%, transparent); }
#viewRisk .rkp-spill { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cb) 85%, transparent) 0 4px, color-mix(in srgb, var(--ca) 22%, transparent) 4px 8px); }
#viewRisk .rkp-slot:hover { border-color: var(--cb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb) 22%, transparent); }
#viewRisk .rkp-slot[aria-pressed="true"] { border-color: var(--cb); }
#viewRisk .rkb .rkp-slot:focus-visible { outline-color: var(--cb); }
#viewRisk .rkp-nm b { color: var(--c); }
#viewRisk .rkp-sw--hold { width: 22px; background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f3b), var(--rk-f5b), var(--rk-f6b), var(--rk-f7b)); }
#viewRisk .rkp-sw--goal { border: 1.5px solid var(--rk-line3); background: color-mix(in srgb, var(--rk-text) 5%, transparent); }
#viewRisk .rkp-sw--over { background: repeating-linear-gradient(135deg, var(--rk-sub) 0 3px, transparent 3px 6px); }
/* status pills: over warm, under cool, on goal green */
#viewRisk .rkp-pill { padding: 2px 9px; }
#viewRisk .rkp-pill.is-over { color: var(--rk-over); background: var(--rk-over-bg); }
#viewRisk .rkp-pill.is-under { color: var(--rk-under); background: var(--rk-under-bg); }
#viewRisk .rks-vs.is-over, #viewRisk .rkb-vs.is-over { color: var(--rk-over); }
#viewRisk .rkb-adj .is-over .rkg-gap__t b { color: var(--rk-over); }

/* the hero's split bar: one segment per level in its color, a wider break between levels 1–4 and 5–7 + ETFs */
#viewRisk .rkb-mixbar { gap: 0; height: 12px; }
#viewRisk .rkb-mixbar i { box-sizing: border-box; flex: none; border-right: 2px solid var(--rk-bg); }
#viewRisk .rkb-mixbar i:last-of-type { border-right: 0; }
#viewRisk .rkb-mixbar__seg { background: linear-gradient(180deg, var(--ca), var(--cb)); }
#viewRisk .rkb-mixbar__low + .rkb-mixbar__high { box-shadow: inset 2px 0 0 var(--rk-bg); }
#viewRisk .rkb-mixbar i:first-child { border-radius: 6px 0 0 6px; }
#viewRisk .rkb-mixbar i:last-of-type { border-radius: 0 6px 6px 0; }
#viewRisk .rkb-mixbar__rest { background: repeating-linear-gradient(135deg, var(--rk-rest) 0 4px, color-mix(in srgb, var(--rk-rest) 55%, transparent) 4px 8px); }
#viewRisk .rkb-mixbar__tick { top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; }
#viewRisk .rkb-sw { width: 18px; height: 10px; border-radius: 5px; }
#viewRisk .rkb-sw--low { background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f2b), var(--rk-f3b), var(--rk-f4b)); }
#viewRisk .rkb-sw--high { background: linear-gradient(90deg, var(--rk-f5b), var(--rk-f6b), var(--rk-f7b), var(--rk-fetfb)); }
#viewRisk .rkb-sw--rest { background: var(--rk-rest); }
/* the Summary's split bar, the same way: 1–4 cool, 5–7 + ETFs hot */
#viewRisk .rkb-sum .pxs-mix__low { background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f4b)); }
#viewRisk .rkb-sum .pxs-mix__high { background: linear-gradient(90deg, var(--rk-f5b), var(--rk-f7b)); }

/* the level rows: a bar of the level's color at the left; the open one tinted */
#viewRisk .rkb .rkb-row[data-lv] { box-shadow: inset 4px 0 0 var(--cb); }
#viewRisk .rkb .rkb-row[data-lv]:hover { background: color-mix(in srgb, var(--cb) 6%, transparent); }
#viewRisk .rkb.pyx--page .rkb-row[data-lv].is-sel { box-shadow: inset 6px 0 0 var(--cb); background: color-mix(in srgb, var(--cb) 9%, transparent); }
#viewRisk .rkb:not(.is-lvshut) .rkb-row.is-sel .rkb-row__cv { color: var(--c); }

/* the opened level: its color along the top, its badge, and "your position" filled in its color */
#viewRisk .rkb-lvd[data-lvd] { border-top: 3px solid var(--cb); border-radius: 0 0 14px 14px; }
#viewRisk .rkb-lvd[data-lvd] .rkb-pos__f { background: linear-gradient(90deg, var(--cb), var(--ca)); }
#viewRisk .rkb-lvd__ov { color: var(--c, var(--rk-sub)); font-weight: 600; }

/* the goal table inside "Adjust your goal": each level's tag and gap bar in its color */
#viewRisk .rkb-adj .rkg-r .rkg-lv b { color: var(--c); border-color: color-mix(in srgb, var(--cb) 50%, transparent); background: color-mix(in srgb, var(--cb) 14%, transparent); }
#viewRisk .rkb-adj .rkg-r .rkg-gap__bar i { background: var(--cb); opacity: 1; }

/* the kinds of fund (By kind, the Levels filter, an opened level's split): their own four colors, not gold and greys */
#viewRisk .pyx.rkb { --pyx-tf: #f5c451; --pyx-tx: #38bdf8; --pyx-eq: #fb7185; --pyx-etf: #2dd4bf; }
body[data-theme="light"] #viewRisk .pyx.rkb { --pyx-tf: #c98a06; --pyx-tx: #0284c7; --pyx-eq: #e11d48; --pyx-etf: #0d9488; }
#viewRisk .rks-kbar { height: 8px; }
#viewRisk .rks-kbar i { box-sizing: border-box; }

/* surfaces: dark, rich black cards; light, white cards with a soft shadow on the warm page (no grey boxes) */
#viewRisk .rkb-sum { box-shadow: var(--rk-lift); }
body[data-theme="light"] #viewRisk .rkb-sum,
body[data-theme="light"] #viewRisk .rkb-lvd,
body[data-theme="light"] #viewRisk .rk-adjust.rkb-adj,
body[data-theme="light"] #viewRisk .rmsu.rkb-uni { background: #fff !important; border-color: rgba(58, 48, 30, .09) !important; box-shadow: var(--rk-lift) !important; }
body[data-theme="light"] #viewRisk .rkb .rkb-lvd .rkb-cpt thead th { background: #fff; }
body[data-theme="light"] #viewRisk .rkb-card { background: #fff; }
body[data-theme="light"] #viewRisk { --rks-surf: #fff; }
/* the goal table's two group marks, and the Lvl pills in an opened level's fund list, in the levels' colors */
#viewRisk .rkb-adj .rkg-sw--low { background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f4b)); }
#viewRisk .rkb-adj .rkg-sw--high { background: linear-gradient(90deg, var(--rk-f5b), var(--rk-f7b)); }
#viewRisk .rkb-lvd[data-lvd] .rkb-cpt .cp-lvl { color: var(--c); border-color: color-mix(in srgb, var(--cb) 50%, transparent); background: color-mix(in srgb, var(--cb) 12%, transparent); }

/* ── Sep 30 2026, owner on the color-coded pass: "way too colored… I meant small, subtle, Robinhood-esque" ──────────────
   The same level colors, quiet: a muted, desaturated palette (slate blue → dusty teal → sage → sand → tan → clay → muted
   rose; ETFs a cool grey), used small. Level rows get a thin 3px edge, badges tinted text on a hairline (no fill), the
   pyramid's tiers soft flat tints (≈30% in light, deep muted tones in dark) with a hairline goal outline and a fine hatch past
   the goal, the split bar two calm tones + cash, status pills small with a very faint ground. Gold stays for key actions.
   --rk-lN ink (≥ 4.5:1 on its surface), --rk-fNb the level's mid tone; --rk-fNa = --rk-fNb so no gradients remain.
   This block supersedes the saturated one above; markup and layout unchanged. */
#viewRisk {
  --rk-l1: #a8b7cf; --rk-l2: #9fc0c8; --rk-l3: #a9c6b0; --rk-l4: #cfc39a; --rk-l5: #d7b797; --rk-l6: #d4a595; --rk-l7: #d2a3b1; --rk-letf: #b3b7c2; --rk-l0: #b4b4ba;
  --rk-f1b: #5f7494; --rk-f2b: #5b8792; --rk-f3b: #6a8f75; --rk-f4b: #968a5c; --rk-f5b: #a27d5d; --rk-f6b: #9e6a5a; --rk-f7b: #97606f; --rk-fetfb: #6e7382;
  --rk-f1a: var(--rk-f1b); --rk-f2a: var(--rk-f2b); --rk-f3a: var(--rk-f3b); --rk-f4a: var(--rk-f4b); --rk-f5a: var(--rk-f5b); --rk-f6a: var(--rk-f6b); --rk-f7a: var(--rk-f7b); --rk-fetfa: var(--rk-fetfb);
  --rk-tier-mix: 42%; --rk-tier-base: #0d0d0f; --rk-slot-base: #0b0b0c; --rk-hair: 34%;
  --rk-over: #d6b26b; --rk-over-bg: rgba(214, 178, 107, .08);
  --rk-under: #9db4d4; --rk-under-bg: rgba(157, 180, 212, .08); --rk-below: #9db4d4;
  --rk-on: #7fcca0; --rk-on-bg: rgba(127, 204, 160, .08);
  --rk-tone-low: #62768f; --rk-tone-high: #97826a; --rk-rest: #2c2d32;
  --rk-lift: none;
}
body[data-theme="light"] #viewRisk {
  --rk-l1: #4c607c; --rk-l2: #3f6874; --rk-l3: #4d6c56; --rk-l4: #6b6034; --rk-l5: #7c5a3a; --rk-l6: #87503e; --rk-l7: #85495a; --rk-letf: #585e6b; --rk-l0: #52525b;
  --rk-f1b: #6e84a3; --rk-f2b: #6a959f; --rk-f3b: #7c9f86; --rk-f4b: #b0a26e; --rk-f5b: #bf936c; --rk-f6b: #b87b68; --rk-f7b: #b07182; --rk-fetfb: #8f94a2;
  --rk-tier-mix: 30%; --rk-tier-base: #fff; --rk-slot-base: #fff; --rk-hair: 40%;
  --rk-over: #8a5a14; --rk-over-bg: rgba(138, 90, 20, .06);
  --rk-under: #3d5f8a; --rk-under-bg: rgba(61, 95, 138, .06); --rk-below: #3d5f8a;
  --rk-on: #1f6b4a; --rk-on-bg: rgba(31, 107, 74, .06);
  --rk-tone-low: #a3b1c5; --rk-tone-high: #d3bea3; --rk-rest: #d8d4cb;
  --rk-lift: 0 1px 2px rgba(58, 48, 30, .04);
}
/* badges: the level's ink on a hairline, no fill */
#viewRisk .rkb-badge,
body[data-theme="light"] #viewRisk .rkb-badge { color: var(--c); border-color: color-mix(in srgb, var(--cb, var(--rk-l0)) 38%, transparent); background: transparent; }
#viewRisk .rkb-badge--x { --c: var(--rk-sub); --cb: var(--rk-l0); }
/* the pyramid: a hairline goal outline, a soft flat tint of the level for what you hold, a fine hatch past the goal */
#viewRisk .rkp-slot { border: 1px solid color-mix(in srgb, var(--cb) var(--rk-hair), transparent); background: var(--rk-slot-base); }
#viewRisk .rkp-fill,
body[data-theme="light"] #viewRisk .rkp-fill {
  top: -1px; bottom: -1px; border-radius: 7px;
  background: color-mix(in srgb, var(--cb) var(--rk-tier-mix), var(--rk-tier-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb) 30%, transparent);
}
#viewRisk .rkp-spill { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cb) 60%, transparent) 0 1px, transparent 1px 5px); }
#viewRisk .rkp-slot:hover { border-color: color-mix(in srgb, var(--cb) 75%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb) 10%, transparent); }
#viewRisk .rkp-slot:hover .rkp-fill { filter: none; background: color-mix(in srgb, var(--cb) calc(var(--rk-tier-mix) + 8%), var(--rk-tier-base)); }
#viewRisk .rkp-slot[aria-pressed="true"] { border-color: color-mix(in srgb, var(--cb) 80%, transparent); }
#viewRisk .rkp-sw--hold { width: 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--rk-f1b) var(--rk-tier-mix), var(--rk-tier-base)), color-mix(in srgb, var(--rk-f4b) var(--rk-tier-mix), var(--rk-tier-base)), color-mix(in srgb, var(--rk-f7b) var(--rk-tier-mix), var(--rk-tier-base))); box-shadow: inset 0 0 0 1px var(--rk-line2); }
#viewRisk .rkp-sw--goal { border: 1px solid var(--rk-line3); background: transparent; }
#viewRisk .rkp-sw--over { background: repeating-linear-gradient(135deg, var(--rk-mute) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--rk-line2); }
/* status pills: small and quiet */
#viewRisk .rkp-pill { padding: 1px 7px; font-weight: 500; }
#viewRisk .rkp-pill.is-over { color: var(--rk-over); background: var(--rk-over-bg); }
#viewRisk .rkp-pill.is-under { color: var(--rk-under); background: var(--rk-under-bg); }
#viewRisk .rkp-pill.is-on { color: var(--rk-on); background: var(--rk-on-bg); }
#viewRisk .rks-vs.is-over, #viewRisk .rkb-vs.is-over, #viewRisk .rkb-adj .is-over .rkg-gap__t b { color: var(--rk-over); }
#viewRisk .rks-vs.is-under, #viewRisk .rkb-vs.is-under { color: var(--rk-under); }
/* the split bar: levels 1–4 one calm tone, 5–7 + ETFs another, then cash */
#viewRisk .rkb-mixbar { height: 8px; }
#viewRisk .rkb-mixbar i { border-right-width: 1px; }
#viewRisk .rkb-mixbar__seg.rkb-mixbar__low { background: var(--rk-tone-low); }
#viewRisk .rkb-mixbar__seg.rkb-mixbar__high { background: var(--rk-tone-high); }
#viewRisk .rkb-mixbar__low + .rkb-mixbar__high { box-shadow: inset 1px 0 0 var(--rk-bg); }
#viewRisk .rkb-mixbar i:first-child { border-radius: 4px 0 0 4px; }
#viewRisk .rkb-mixbar i:last-of-type { border-radius: 0 4px 4px 0; }
#viewRisk .rkb-mixbar__rest { background: var(--rk-rest); }
#viewRisk .rkb-mixbar__tick { top: -5px; bottom: -5px; width: 2px; margin-left: -1px; }
#viewRisk .rkb-sw { width: 8px; height: 8px; border-radius: 50%; }
#viewRisk .rkb-sw--low, #viewRisk .rkb-sum .pxs-mix__low, #viewRisk .rkb-adj .rkg-sw--low { background: var(--rk-tone-low); }
#viewRisk .rkb-sw--high, #viewRisk .rkb-sum .pxs-mix__high, #viewRisk .rkb-adj .rkg-sw--high { background: var(--rk-tone-high); }
#viewRisk .rkb-sw--rest, #viewRisk .rkb-sum .pxs-mix__rest { background: var(--rk-rest); }
/* level rows: a thin 3px edge in the level's tone; hover and the open row a neutral wash */
#viewRisk .rkb .rkb-row[data-lv] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cb) 70%, transparent); }
#viewRisk .rkb .rkb-row[data-lv]:hover { background: color-mix(in srgb, var(--rk-text) 3.5%, transparent); }
#viewRisk .rkb.pyx--page .rkb-row[data-lv].is-sel { box-shadow: inset 3px 0 0 var(--cb); background: color-mix(in srgb, var(--rk-text) 4%, transparent); }
/* the opened level: a hairline of its tone along the top; "your position" a soft tint of it */
#viewRisk .rkb-lvd[data-lvd] { border-top: 2px solid color-mix(in srgb, var(--cb) 70%, transparent); }
#viewRisk .rkb-lvd[data-lvd] .rkb-pos__f { background: color-mix(in srgb, var(--cb) 70%, var(--rk-tier-base)); }
#viewRisk .rkb-lvd__ov { font-weight: 500; }
#viewRisk .rkb-lvd[data-lvd] .rkb-cpt .cp-lvl { color: var(--c); border-color: color-mix(in srgb, var(--cb) 38%, transparent); background: transparent; }
/* the goal table: tags as the badges, gap bars a soft tint */
#viewRisk .rkb-adj .rkg-r .rkg-lv b { color: var(--c); border-color: color-mix(in srgb, var(--cb) 38%, transparent); background: transparent; }
#viewRisk .rkb-adj .rkg-r .rkg-gap__bar i { background: color-mix(in srgb, var(--cb) 60%, var(--rk-tier-base)); }
/* kinds of fund: muted, as small dots (By kind, the Levels filter, an opened level's split) */
#viewRisk .pyx.rkb { --pyx-tf: #c2a868; --pyx-tx: #8197b5; --pyx-eq: #b98492; --pyx-etf: #86a790; }
body[data-theme="light"] #viewRisk .pyx.rkb { --pyx-tf: #b59a5a; --pyx-tx: #6e84a3; --pyx-eq: #b07182; --pyx-etf: #7c9f86; }
#viewRisk .rks-kbar { height: 4px; }
#viewRisk .rkb-sum .rks-k .pyx-sw { width: 8px; height: 8px; border-radius: 50%; }
/* surfaces: light, clean white cards on a hairline, barely lifted */
body[data-theme="light"] #viewRisk .rkb-sum,
body[data-theme="light"] #viewRisk .rkb-lvd,
body[data-theme="light"] #viewRisk .rk-adjust.rkb-adj,
body[data-theme="light"] #viewRisk .rmsu.rkb-uni { border-color: rgba(58, 48, 30, .11) !important; }

/* Your mix numbers take the split bar's two tones (Matt, Sep 30: "why is the 62/34 still white"): subtle, readable. */
#viewRisk { --rk-big-lo: #a8b9d6; --rk-big-hi: #d9bf9c; }
body[data-theme="light"] #viewRisk { --rk-big-lo: #3f5575; --rk-big-hi: #7a5a32; }
#viewRisk .rkb-big__v strong .rkb-big__lo { color: var(--rk-big-lo); }
#viewRisk .rkb-big__v strong .rkb-big__hi { color: var(--rk-big-hi); }
#viewRisk .rkb-big__goal .rkb-big__lo { color: var(--rk-big-lo); } #viewRisk .rkb-big__goal .rkb-big__hi { color: var(--rk-big-hi); }

/* Goal numbers: same size as each other, colored like Your mix, slash muted */
#viewRisk .rkb-big__goal b i { font-style: normal; }
#viewRisk .rkb-big__goal .rkb-g-lo { color: var(--rk-big-lo); }
#viewRisk .rkb-big__goal .rkb-g-hi { color: var(--rk-big-hi); }
#viewRisk .rkb-big__goal .rkb-g-sl { color: var(--rk-sub); font-weight: 500; margin: 0 .12em; }

/* ── Sep 30 2026, owner on the muted slate/sage/sand/clay pass: "these colors are so muted — match them to the screener" ───
   The levels take the site's own, owner-approved level-pill colors: the Research Watchlist's RISK pills
   (styles.css .watch-pill--risk.r1…r6, watchlist.css .r7, theme-light.css inks), the same on every page:
     L1 green #16c784 on #22c55e · L2 lime #a3e635 on #84cc16 · L3 yellow #f0b429 on #eab308 · L4 orange #fb923c on #f97316
     L5 red #ff737a on #ef4444 · L6 fuchsia #e879f9 on #d946ef · L7 deep red #f87171 on #b91c1c · ETFs sky #38bdf8 on #0ea5e9
   (dark inks as they render: --green-bright #16c784 and --red-bright #ff737a from cockpit.css, --yellow #f0b429 from redesign.css)
   Light inks as theme-light.css: #0e6545 #3f6212 #7f5400 #9a3412 #9a2e27 #86198f #7a1f1a (ETFs #075985).
   --rk-lN = the pill's ink, --rk-fNb = the pill's base (its ground and hairline are this base at 12–16% / 25–36%).
   The pyramid fills the base at a clear, flat strength with a hairline of it; the goal outline a hairline of it; over goal a
   hatch of it. Split bar and hero numbers: levels 1–4 the L1 green, levels 5–7 + ETFs the L5 red. Supersedes the muted block. */
#viewRisk {
  --rk-l1: #16c784; --rk-l2: #a3e635; --rk-l3: #f0b429; --rk-l4: #fb923c; --rk-l5: #ff737a; --rk-l6: #e879f9; --rk-l7: #f87171; --rk-letf: #38bdf8;
  --rk-f1b: #22c55e; --rk-f2b: #84cc16; --rk-f3b: #eab308; --rk-f4b: #f97316; --rk-f5b: #ef4444; --rk-f6b: #d946ef; --rk-f7b: #b91c1c; --rk-fetfb: #0ea5e9;
  --rk-f1a: var(--rk-f1b); --rk-f2a: var(--rk-f2b); --rk-f3a: var(--rk-f3b); --rk-f4a: var(--rk-f4b); --rk-f5a: var(--rk-f5b); --rk-f6a: var(--rk-f6b); --rk-f7a: var(--rk-f7b); --rk-fetfa: var(--rk-fetfb);
  --rk-tier-mix: 44%; --rk-tier-base: #0b0b0c; --rk-hair: 42%;
  --rk-tone-low: #16c784; --rk-tone-high: #ff737a;
  --rk-big-lo: #16c784; --rk-big-hi: #ff737a;
}
body[data-theme="light"] #viewRisk {
  --rk-l1: #0e6545; --rk-l2: #3f6212; --rk-l3: #7f5400; --rk-l4: #9a3412; --rk-l5: #9a2e27; --rk-l6: #86198f; --rk-l7: #7a1f1a; --rk-letf: #075985;
  --rk-f1b: #22c55e; --rk-f2b: #84cc16; --rk-f3b: #eab308; --rk-f4b: #f97316; --rk-f5b: #ef4444; --rk-f6b: #d946ef; --rk-f7b: #b91c1c; --rk-fetfb: #0ea5e9;
  --rk-f1a: var(--rk-f1b); --rk-f2a: var(--rk-f2b); --rk-f3a: var(--rk-f3b); --rk-f4a: var(--rk-f4b); --rk-f5a: var(--rk-f5b); --rk-f6a: var(--rk-f6b); --rk-f7a: var(--rk-f7b); --rk-fetfa: var(--rk-fetfb);
  --rk-tier-mix: 30%; --rk-tier-base: #fff; --rk-hair: 50%;
  --rk-tone-low: #22c55e; --rk-tone-high: #ef4444;
  --rk-big-lo: #0e6545; --rk-big-hi: #9a2e27;
}
/* badges (level rows, Largest gaps, the opened level, the goal table, an opened level's Lvl pills): the pill itself */
#viewRisk .rkb-badge:not(.rkb-badge--x),
body[data-theme="light"] #viewRisk .rkb-badge:not(.rkb-badge--x),
#viewRisk .rkb-lvd[data-lvd] .rkb-cpt .cp-lvl,
#viewRisk .rkb-adj .rkg-r .rkg-lv b { color: var(--c); background: color-mix(in srgb, var(--cb) 14%, transparent); border-color: color-mix(in srgb, var(--cb) 30%, transparent); }
/* the pyramid: the level's color, flat and clear, with a hairline of it; the goal a hairline; over goal a hatch of it */
#viewRisk .rkp-slot { border: 1px solid color-mix(in srgb, var(--cb) var(--rk-hair), transparent); }
#viewRisk .rkp-fill,
body[data-theme="light"] #viewRisk .rkp-fill {
  background: color-mix(in srgb, var(--cb) var(--rk-tier-mix), var(--rk-tier-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb) 70%, transparent);
}
#viewRisk .rkp-slot:hover .rkp-fill { background: color-mix(in srgb, var(--cb) calc(var(--rk-tier-mix) + 8%), var(--rk-tier-base)); }
#viewRisk .rkp-spill { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cb) 80%, transparent) 0 1.5px, transparent 1.5px 5px); }
#viewRisk .rkp-nm b { color: var(--c); }
#viewRisk .rkp-sw--hold { background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f3b), var(--rk-f5b), var(--rk-f6b)); }
/* level rows: the 3px edge in the level's color */
#viewRisk .rkb .rkb-row[data-lv] { box-shadow: inset 3px 0 0 var(--cb); }
#viewRisk .rkb-lvd[data-lvd] { border-top-color: var(--cb); }
#viewRisk .rkb-lvd[data-lvd] .rkb-pos__f { background: var(--cb); }
#viewRisk .rkb-adj .rkg-r .rkg-gap__bar i { background: var(--cb); }

/* ── Option E, chosen by Matt (Sep 30): normal colors toned down ~40%, no Christmas red/green pairing.
   L1 blue · L2 teal · L3 green · L4 gold · L5 orange · L6 rose · L7 purple · ETFs slate-cyan. Supersedes the blocks above. */
#viewRisk {
  --rk-l1: #7fb3e3; --rk-l2: #6cc6c3; --rk-l3: #8cc794; --rk-l4: #e2c071; --rk-l5: #e6a274; --rk-l6: #dd8b97; --rk-l7: #b39ad8; --rk-letf: #8fb4c4;
  --rk-f1b: #5b9bd5; --rk-f2b: #4fb3b0; --rk-f3b: #72b37a; --rk-f4b: #d8b056; --rk-f5b: #dc8c55; --rk-f6b: #d06f7d; --rk-f7b: #9a7bc9; --rk-fetfb: #7aa6b8;
  --rk-f1a: var(--rk-f1b); --rk-f2a: var(--rk-f2b); --rk-f3a: var(--rk-f3b); --rk-f4a: var(--rk-f4b); --rk-f5a: var(--rk-f5b); --rk-f6a: var(--rk-f6b); --rk-f7a: var(--rk-f7b); --rk-fetfa: var(--rk-fetfb);
  --rk-tier-mix: 88%; --rk-tier-base: #0b0b0c; --rk-hair: 38%;
  --rk-tone-low: #5b9bd5; --rk-tone-high: #dc8c55;
  --rk-big-lo: #6aa6dc; --rk-big-hi: #e09a66;
}
body[data-theme="light"] #viewRisk {
  --rk-l1: #2f6aa3; --rk-l2: #237c79; --rk-l3: #3d7a46; --rk-l4: #85641a; --rk-l5: #9a5222; --rk-l6: #9a3c4b; --rk-l7: #62489a; --rk-letf: #3e6676;
  --rk-f1b: #5b9bd5; --rk-f2b: #4fb3b0; --rk-f3b: #72b37a; --rk-f4b: #d8b056; --rk-f5b: #dc8c55; --rk-f6b: #d06f7d; --rk-f7b: #9a7bc9; --rk-fetfb: #7aa6b8;
  --rk-tier-mix: 75%; --rk-tier-base: #fff; --rk-hair: 50%;
  --rk-tone-low: #5b9bd5; --rk-tone-high: #dc8c55;
  --rk-big-lo: #2f6aa3; --rk-big-hi: #9a5222;
}
#viewRisk .rkp-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--cb) var(--rk-tier-mix), var(--rk-tier-base)), color-mix(in srgb, var(--cb) calc(var(--rk-tier-mix) - 12%), var(--rk-tier-base))); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
#viewRisk .rkp-sw--hold { background: linear-gradient(90deg, var(--rk-f1b), var(--rk-f3b), var(--rk-f5b), var(--rk-f7b)); }

/* Oct 2: section headings ("Your pyramid", "Levels", …) in warm cream with the small gold tick Portfolio's
   headings carry, instead of plain white (Matt: no white text) */
body:not(#_) #viewRisk .rkb .rkb-h2 { color: #EADFC8; }
body:not(#_) #viewRisk .rkb .rkb-h2::before { content: ""; display: inline-block; width: 3px; height: .95em; border-radius: 2px; background: #E0A82E; margin-right: 2px; }
body[data-theme="light"]:not(#_) #viewRisk .rkb .rkb-h2 { color: #3a2f1c; }
body[data-theme="light"]:not(#_) #viewRisk .rkb .rkb-h2::before { background: #a87408; }