/* Guide figures: portfolio mix simulator (how-much-to-allocate, #mixSim).
   Prefix mx-. Tokens only, so light and dark both work. Venture is the series
   the figure is about and takes the one colour; every other band is a grey. */

.af-fig.mx-fig{
  --mx-liq:var(--to-grey-900);
  --mx-pc:var(--to-grey-500);
  --mx-pe:var(--to-grey-300);
  --mx-vc:var(--accent);
  --mx-hatch:var(--border-2);
}
html[data-theme="light"] .af-fig.mx-fig{
  --mx-liq:var(--to-grey-200);
  --mx-pc:var(--to-grey-300);
  --mx-pe:var(--to-grey-500);
}

.mx-fig .mx-hd{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.mx-fig .mx-sec{margin-top:28px;padding-top:22px;border-top:1px solid var(--hairline)}

/* Presets: the shared .af-seg group, allowed to wrap onto two lines. */
.mx-fig .af-seg{margin-bottom:22px}
.mx-fig .af-seg .lbl{flex:0 0 100%;margin:0 0 4px}

/* Portfolio size sits alone above the asset sliders. */
.mx-fig .mx-size{max-width:520px;margin-bottom:22px}

/* Asset sliders: two columns on a wide screen, one on a phone. */
.mx-fig .mx-sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.mx-fig .mx-sliders .k-range{margin:0;max-width:none;gap:4px}
.mx-fig .mx-sliders .k-range .rw span:first-child{font-size:14px;color:var(--muted)}
.mx-fig .mx-sliders .k-range .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-fig .mx-sliders .k-range .v small{font-size:12px;color:var(--muted-2);margin-left:6px}
.mx-fig .mx-sliders .k-range.mx-on .rw span:first-child{color:var(--text)}
.mx-fig .mx-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;line-height:18px;color:var(--muted-2)}
.mx-fig .mx-total b{font-family:var(--font-mono);font-weight:400;color:var(--text)}

/* Risk and return: three rows, each with a return bar and a volatility bar on
   their own scales. */
.mx-fig .mx-cmp{display:grid;gap:0}
.mx-fig .mx-cr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px 24px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--hairline)}
.mx-fig .mx-cr:last-child{border-bottom:none}
.mx-fig .mx-cr.mx-th{padding:0 0 8px;font-family:var(--font-mono);font-size:10.5px;line-height:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.mx-fig .mx-cr .nm{font-size:15px;line-height:21px;color:var(--text)}
.mx-fig .mx-cr .nm small{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2)}
.mx-fig .mx-cr .vl{display:grid;gap:6px}
.mx-fig .mx-cr .vl b{font-family:var(--font-mono);font-weight:400;font-size:20px;line-height:24px;
  color:var(--to-grey-300);font-variant-numeric:tabular-nums}
.mx-fig .mx-cr .vl i{display:block;height:6px;background:var(--surface)}
.mx-fig .mx-cr .vl i u{display:block;height:100%;width:0;background:var(--to-grey-500);text-decoration:none;transition:width .25s}
.mx-fig .mx-cr.on .vl b{color:var(--accent)}
.mx-fig .mx-cr.on .vl i u{background:var(--accent)}
.mx-fig .mx-cr .vl .lb{display:none}
html[data-theme="light"] .mx-fig .mx-cr .vl b{color:var(--to-grey-700)}
html[data-theme="light"] .mx-fig .mx-cr.on .vl b{color:var(--to-ink)}

/* Liquidity: one stacked bar, then a key that carries the dollars. */
.mx-fig .mx-stack{display:flex;height:28px;background:var(--surface);overflow:hidden}
.mx-fig .mx-stack span{display:block;height:100%;transition:width .25s;min-width:0}
.mx-fig .mx-stack span + span{box-shadow:inset 1px 0 0 var(--card)}
.mx-fig .mx-sw-liq{background:var(--mx-liq)}
.mx-fig .mx-sw-prop{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--mx-hatch) 4px 5px);
  outline:1px solid var(--mx-hatch);outline-offset:-1px}
.mx-fig .mx-sw-pc{background:var(--mx-pc)}
.mx-fig .mx-sw-pe{background:var(--mx-pe)}
.mx-fig .mx-sw-vc{background:var(--mx-vc)}
.mx-fig .mx-key{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 18px;margin-top:14px}
.mx-fig .mx-key .k{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px 8px;align-items:start}
.mx-fig .mx-key .k > i{width:12px;height:12px;margin-top:3px}
.mx-fig .mx-key .k b{font-size:13px;line-height:18px;font-weight:600;color:var(--text)}
.mx-fig .mx-key .k small{grid-column:2;display:block;font-size:12px;line-height:16px;color:var(--muted-2)}
.mx-fig .mx-key .k em{grid-column:2;font-style:normal;font-family:var(--font-mono);font-size:13px;line-height:18px;
  color:var(--text);font-variant-numeric:tabular-nums}
.mx-fig .mx-key .k.zero{opacity:.45}

/* Assumptions and sources: below the tool, folded away by default. */
details.mx-asm{margin-top:24px;border-top:1px solid var(--hairline);padding-top:14px}
details.mx-asm summary{cursor:pointer;font-size:14px;line-height:20px;color:var(--muted);list-style:none}
details.mx-asm summary::-webkit-details-marker{display:none}
details.mx-asm summary::before{content:"+";display:inline-block;width:16px;font-family:var(--font-mono);color:var(--muted-2)}
details.mx-asm[open] summary::before{content:"\2212"}
details.mx-asm summary:hover{color:var(--text)}
details.mx-asm summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
details.mx-asm .tbl-wrap{margin-top:12px}
details.mx-asm table.tbl{min-width:0}
details.mx-asm .tbl td,details.mx-asm .tbl th{font-size:13px}
details.mx-asm .tbl th{white-space:normal}
details.mx-asm .tbl td small{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:400;color:var(--muted-2)}
details.mx-asm .tbl th:not(:first-child){text-align:right}
details.mx-asm .tbl td.n{font-family:var(--font-mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .mx-fig .mx-cr .vl i u,.mx-fig .mx-stack span{transition:none}
}
@media (max-width:900px){
  .mx-fig .mx-key{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .mx-fig .mx-sliders{grid-template-columns:1fr;gap:14px}
  .mx-fig .mx-cr{grid-template-columns:1fr 1fr;gap:6px 16px}
  .mx-fig .mx-cr .nm{grid-column:1 / -1}
  .mx-fig .mx-cr.mx-th{display:none}
  .mx-fig .mx-cr .vl .lb{display:block;font-family:var(--font-mono);font-size:10.5px;line-height:14px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .mx-fig .mx-key{grid-template-columns:1fr 1fr}
  details.mx-asm .tbl th,details.mx-asm .tbl td{padding-left:6px;padding-right:6px}
  details.mx-asm .tbl th:first-child,details.mx-asm .tbl td:first-child{padding-left:0}
  details.mx-asm .tbl th:last-child,details.mx-asm .tbl td:last-child{padding-right:0}
  details.mx-asm .tbl th{letter-spacing:.02em}
}
@media print{
  .mx-fig .mx-ctrls{display:none!important}
}

/* Donut of the mix: beside the sliders on desktop, above them on a phone.
   Venture is First Light; the rest step through the greys, darkest first. */
.mx-fig .mx-board{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.mx-fig .mx-pie{position:relative;width:220px;max-width:100%}
.mx-fig .mx-pie svg{display:block;width:100%;height:auto;overflow:visible}
.mx-fig .mx-s{stroke:var(--card);stroke-width:2;cursor:pointer;transition:transform .15s,opacity .15s;outline:none}
.mx-fig .mx-s:focus-visible{stroke:var(--text);stroke-width:2}
.mx-fig .mx-s0{fill:var(--to-grey-150)}
.mx-fig .mx-s1{fill:var(--to-grey-200)}
.mx-fig .mx-s2{fill:var(--to-grey-300)}
.mx-fig .mx-s3{fill:var(--to-grey-400)}
.mx-fig .mx-s4{fill:var(--to-grey-500)}
.mx-fig .mx-s5{fill:var(--to-grey-700)}
.mx-fig .mx-s6{fill:var(--to-grey-900)}
.mx-fig .mx-s7{fill:var(--to-first-light)}
html[data-theme="light"] .mx-fig .mx-s0{fill:var(--to-grey-200)}
html[data-theme="light"] .mx-fig .mx-s1{fill:var(--to-grey-300)}
html[data-theme="light"] .mx-fig .mx-s2{fill:var(--to-grey-400)}
html[data-theme="light"] .mx-fig .mx-s3{fill:var(--to-grey-500)}
html[data-theme="light"] .mx-fig .mx-s4{fill:var(--to-grey-700)}
html[data-theme="light"] .mx-fig .mx-s5{fill:var(--to-grey-900)}
html[data-theme="light"] .mx-fig .mx-s6{fill:var(--to-ink)}
html[data-theme="light"] .mx-fig .mx-s7{stroke:var(--to-ink);stroke-width:1}
.mx-fig #mxPieG:hover .mx-s:not(.on){opacity:.45}
.mx-fig .mx-pie-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:0 62px}
.mx-fig .mx-pie-c b{font-family:var(--font-mono);font-weight:400;font-size:26px;line-height:30px;color:var(--text)}
.mx-fig .mx-pie-c span{font-size:13px;line-height:17px;color:var(--muted);margin-top:2px}
.mx-fig .mx-pie-c small{font-family:var(--font-mono);font-size:11px;line-height:15px;color:var(--muted-2);margin-top:2px}
.mx-fig .mx-sliders .k-range.mx-hot .rw label{color:var(--text)}
.mx-fig .mx-sliders .k-range.mx-hot{box-shadow:inset 2px 0 0 var(--accent);padding-left:8px;margin-left:-10px}
@media (max-width:900px){
  .mx-fig .mx-board{grid-template-columns:1fr;gap:18px}
  .mx-fig .mx-pie{margin:0 auto;width:200px}
}

/* Key: a swatch beside each slider label, matching its slice. */
.mx-fig .mx-sw{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:0}
.mx-fig .mx-sw0{background:var(--to-grey-150)}
.mx-fig .mx-sw1{background:var(--to-grey-200)}
.mx-fig .mx-sw2{background:var(--to-grey-300)}
.mx-fig .mx-sw3{background:var(--to-grey-400)}
.mx-fig .mx-sw4{background:var(--to-grey-500)}
.mx-fig .mx-sw5{background:var(--to-grey-700)}
.mx-fig .mx-sw6{background:var(--to-grey-900)}
.mx-fig .mx-sw7{background:var(--to-first-light)}
html[data-theme="light"] .mx-fig .mx-sw0{background:var(--to-grey-200)}
html[data-theme="light"] .mx-fig .mx-sw1{background:var(--to-grey-300)}
html[data-theme="light"] .mx-fig .mx-sw2{background:var(--to-grey-400)}
html[data-theme="light"] .mx-fig .mx-sw3{background:var(--to-grey-500)}
html[data-theme="light"] .mx-fig .mx-sw4{background:var(--to-grey-700)}
html[data-theme="light"] .mx-fig .mx-sw5{background:var(--to-grey-900)}
html[data-theme="light"] .mx-fig .mx-sw6{background:var(--to-ink)}
html[data-theme="light"] .mx-fig .mx-sw7{background:var(--to-first-light)}
html[data-theme="light"] .mx-fig .mx-sw7{box-shadow:inset 0 0 0 1px var(--to-ink)}
.mx-fig .mx-sliders .k-range .rw label{display:inline-flex;align-items:baseline;min-width:0}
.mx-fig .mx-sw{flex:none;transform:translateY(1px)}

/* ---------- full-width tool page (/adviser-guides/portfolio-mix) ----------
   >= 1100px  two columns: the controls on the left, the results on the right,
              and the results column sticks so it stays in view while the
              sliders move.
   700-1099   one column: controls with the donut beside the sliders, then the
              results at full width (liquidity key in three, calls in four).
   < 700      one column: presets, size, donut, sliders, then the results.
   Container queries size the insides of each column, so the same rules work
   whatever width a column ends up. */
.mx-tool.af-fig{margin:0}
.mx-tool .af-plot.mx-grid{border-top:1px solid var(--border);padding:24px 26px 28px;overflow:visible;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.mx-tool .mx-left,.mx-tool .mx-res,.mx-tool .mx-sec{container-type:inline-size;min-width:0}
.mx-tool .mx-right{min-width:0;margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.mx-tool .af-seg{margin-bottom:20px}
.mx-tool .mx-size{max-width:none;margin-bottom:14px}
.mx-tool .mx-how{font-size:13px;line-height:19px;color:var(--muted-2);margin:0 0 18px}
.mx-tool .mx-ill{font-size:13px;line-height:19px;color:var(--muted-2);margin:0;padding:8px 12px;
  border-left:2px solid var(--accent);background:var(--surface)}
.mx-tool .mx-ill b{color:var(--text);font-weight:600}
.mx-tool .mx-sec{margin-top:14px;padding-top:12px}
.mx-tool .mx-hd{margin-bottom:10px}
.mx-tool .mx-cr{padding:8px 0;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:6px 18px}
.mx-tool .mx-cr.mx-th{padding:0 0 6px}
.mx-tool .mx-cr .vl{gap:4px}
.mx-tool .mx-cr .vl b{font-size:18px;line-height:22px}
.mx-tool .af-diff{margin-top:10px!important;font-size:13.5px!important;line-height:20px!important;color:var(--muted)}
.mx-tool .mx-stack{height:22px}
.mx-tool .metrics.af-m4 .metric{padding:10px 16px}
.mx-tool .metrics.af-m4 .metric:nth-child(odd){padding-left:0}
.mx-tool .metrics.af-m4 .num{font-size:24px;line-height:28px}
.mx-tool .metrics.af-m4 .lbl{font-size:13px;line-height:18px;margin-top:4px}
.mx-tool .metrics.af-m4 .note{font-size:11.5px;line-height:16px;margin-top:3px}
/* A wide results column takes the four tiles in one row. */
@container (min-width:600px){
  .mx-tool .metrics.af-m4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mx-tool .metrics.af-m4 .metric,.mx-tool .metrics.af-m4 .metric:nth-child(-n+2){border-top:none}
  .mx-tool .metrics.af-m4 .metric:nth-child(odd){padding-left:16px;border-left:1px solid var(--border)}
  .mx-tool .metrics.af-m4 .metric:first-child{padding-left:0;border-left:none}
}
/* Liquidity key: name and amount on one line, the time to sell under it. */
.mx-tool .mx-key{gap:10px 18px;margin-top:12px}
.mx-tool .mx-key .k{grid-template-columns:12px minmax(0,1fr) auto;gap:2px 8px}
.mx-tool .mx-key .k em{grid-column:3;grid-row:1;font-size:12px}
.mx-tool .mx-key .k small{grid-column:2 / -1}
.mx-tool .mx-cr .nm small{font-size:10.5px;line-height:15px}

/* Left column: donut above the sliders when narrow, beside them when there's room. */
.mx-tool .mx-board{grid-template-columns:1fr;gap:18px}
.mx-tool .mx-pie{margin:0 auto;width:200px}
/* Beside the donut the sliders run in one column; under it, two once there's room. */
.mx-tool .mx-sliders{grid-template-columns:1fr;gap:12px}
@container (min-width:460px) and (max-width:499px){
  .mx-tool .mx-sliders{grid-template-columns:1fr 1fr;gap:14px 24px}
}
@container (min-width:500px){
  .mx-tool .mx-board{grid-template-columns:180px minmax(0,1fr);gap:28px}
  .mx-tool .mx-pie{margin:0;width:180px;position:sticky;top:calc(var(--nav-h,64px) + 16px)}
}
@container (min-width:760px){
  .mx-tool .mx-sliders{grid-template-columns:1fr 1fr;gap:14px 28px}
}

/* Results column: the liquidity key folds to fit. */
.mx-tool .mx-key{grid-template-columns:1fr}
@container (min-width:400px){ .mx-tool .mx-key{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:520px){ .mx-tool .mx-key{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (min-width:860px){ .mx-tool .mx-key{grid-template-columns:repeat(5,minmax(0,1fr))} }

@media (min-width:1100px){
  .mx-tool .af-plot.mx-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;padding:28px 32px 32px}
  .mx-tool .mx-left{padding-right:40px}
  .mx-tool .mx-right{margin-top:0;padding-top:0;border-top:0;padding-left:40px;border-left:1px solid var(--border);
    position:sticky;top:calc(var(--nav-h,64px) + 16px);align-self:start}
  .mx-tool .mx-ill{margin-bottom:2px}
}
/* On a short screen the results column can't fit, so it scrolls inside itself
   and risk and return stay in view at the top while the sliders move. */
@media (min-width:1100px) and (max-height:760px){
  .mx-tool .mx-right{max-height:calc(100vh - var(--nav-h,64px) - 32px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
}

@media (max-width:620px){
  .mx-tool .af-plot.mx-grid{padding:20px 18px 24px}
  .mx-tool .metrics.af-m4 .metric{padding:14px 0}
  .mx-tool .metrics.af-m4 .metric + .metric{border-top:1px solid var(--hairline)}
}

/* Assumptions and sources on the tool page. */
.tp details.mx-asm.lf-body{max-width:52rem;margin:28px 0 0;padding-top:14px}
.tp details.mx-asm summary{font-size:15px;color:var(--text)}
.tp .mx-asm-body{padding-top:6px}
.tp .mx-asm-body p{font-size:14px;line-height:22px;color:var(--muted);margin:12px 0 0}
.tp .mx-asm-body .tbl-wrap{margin:18px 0 0;overflow-x:auto}
.tp details.mx-asm table.tbl{width:100%;border-collapse:collapse}
.tp .mx-asm-body .tbl-cap{font-size:12px;line-height:18px;color:var(--muted-2);margin-top:8px}
@media print{
  .mx-tool .mx-ctrls{display:block!important}
  .mx-tool .mx-right{position:static;max-height:none;overflow:visible}
}