/* builder.css — Custom Portfolio Builder.

   Top section: two-pane picker (Components left, Fund browser right) —
   modelled on the Dimensional retail tool the user wireframed.
   Bottom section: the blended portfolio rendered INLINE on the same page,
   re-using sheet.html element classes (.row, .section-title, .meta-list,
   .band-rows, .div-pair, etc.) so visual primitives stay byte-identical.
*/

.page-builder .topbar { position: sticky; top: 0; z-index: 50; }

/* Same body background as the FairSheet pages — the picker + result blocks
   sit on this grey backdrop, mirroring the real FairSheet's grey "page"
   surround. */
body.page-builder { background: #d8d7d4; }
body.page-builder .page-foot { background: #ffffff; }

/* Match the rest of the site — .container's default 1320px max-width
   gives the builder the same horizontal footprint as the master table.
   Only override .content-page article's 820px longform-essay cap, which
   would otherwise constrain the builder shell. */
.page-builder .content-page article {
  max-width: none;
  padding: 32px 0 64px;
}

.cb-shell {
  margin: 20px 0 40px;
  background: #fbfaf6;
  border: 1px solid #e6e6e2;
  border-radius: 10px;
  overflow: hidden;
}

/* Two-pane grid — balanced ~equal columns so the COMPONENTS panel has
   room to show fund names in full rather than truncating to "Princi...". */
.cb-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1.05fr);
  min-height: 480px;
  background: #ffffff;
}

/* ── Components panel (left) ─────────────────────────────────────────── */
.cb-components {
  display: flex; flex-direction: column;
  background: #f6f5f0;
  border-right: 1px solid #e6e6e2;
}
.cb-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid #e6e6e2;
  background: #fbfaf6;
}
.cb-panel-share { font-weight: 400; color: var(--ink-soft); letter-spacing: 0.05em; }

.cb-component-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
  min-height: 280px;
  max-height: 560px;
}
.cb-component-list:empty::before {
  content: "Add funds from the right to begin.";
  display: block;
  padding: 28px 22px;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
}

.cb-component-row {
  display: grid;
  grid-template-columns: 56px 1fr 90px 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid #ececea;
  transition: background-color 0.10s;
}
.cb-component-row:hover { background: rgba(0, 0, 0, 0.025); }
.cb-component-info {
  display: flex; flex-direction: column;
  min-width: 0;
}
.cb-component-isin {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.cb-component-name {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
  /* Wrap to as many lines as the name needs — never truncate with ellipsis. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cb-component-weight {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.cb-component-weight input {
  width: 60px;
  padding: 5px 6px;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  border: 1px solid #cfcfca;
  border-radius: 4px;
  background: #fff;
}
.cb-component-weight input:focus { outline: none; border-color: var(--brand-red); }
.cb-component-weight-pct { color: var(--muted); }
.cb-component-remove {
  appearance: none; border: 0; background: transparent;
  font-size: 16px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
}
.cb-component-remove:hover { color: var(--brand-red); background: #fbeaea; }

/* Components footer (totals + actions) */
.cb-components-foot {
  border-top: 1px solid #e6e6e2;
  padding: 14px 22px 18px;
  background: #fbfaf6;
}
.cb-total-track {
  height: 4px;
  background: #e6e6e2;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 10px;
}
.cb-total-fill {
  height: 100%;
  background: rgba(var(--brand-red-rgb), 0.86);
  width: 0%;
  transition: width 0.18s;
}
.cb-total-fill.is-over { background: var(--brand-red); }
.cb-total-row {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  margin: 0 0 12px;
}
.cb-total-pct { font-variant-numeric: tabular-nums; }
.cb-total-pct.is-warn { color: var(--brand-red); }

.cb-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cb-btn {
  appearance: none; border: 0;
  padding: 11px 14px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.10s, color 0.10s, border-color 0.10s;
}
/* Softer/more transparent brand red — less aggressive than the topbar's
   Contact-Us CTA so the picker buttons read as friendly action prompts. */
.cb-btn-primary {
  background: rgba(var(--brand-red-rgb), 0.86); color: #fff;
}
.cb-btn-primary:hover { background: rgba(var(--brand-red-rgb), 1); }
.cb-btn-primary[disabled] { background: rgba(0, 0, 0, 0.18); cursor: not-allowed; }
.cb-btn-secondary {
  background: #fff; color: var(--ink); border: 1px solid #cfcfca;
}
.cb-btn-secondary:hover { border-color: rgba(var(--brand-red-rgb), 0.6); color: rgba(var(--brand-red-rgb), 0.95); }
.cb-foot-hint {
  margin: 10px 0 0;
  text-align: center;
}
.cb-foot-hint.is-warn { color: var(--brand-red); }

/* ── Fund browser (right) ────────────────────────────────────────────── */
.cb-browser {
  display: flex; flex-direction: column;
  background: #ffffff;
}
.cb-tabs {
  display: flex; gap: 24px;
  padding: 14px 22px 0;
  border-bottom: 1px solid #e6e6e2;
}
.cb-tab {
  appearance: none; border: 0; background: transparent;
  padding: 6px 0 12px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.cb-tab.is-active { color: rgba(var(--brand-red-rgb), 0.95); border-bottom-color: rgba(var(--brand-red-rgb), 0.86); }

.cb-search {
  position: relative;
  padding: 14px 22px;
  border-bottom: 1px solid #e6e6e2;
}
.cb-search-icon {
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.cb-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 36px;
  font: inherit;
  font-size: 13px;
  border: 1px solid #cfcfca;
  border-radius: 5px;
}
.cb-search input:focus { outline: none; border-color: var(--brand-red); }

.cb-fund-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 280px;
  max-height: 560px;
}
/* Mirrors the master-table .fund-row layout — code chip on the left, fund
   name centred, action button on the right. ISIN dropped in favour of the
   DFO code which is what users navigate by everywhere else on the site. */
.cb-fund-row {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-bottom: 1px solid #f0efeb;
  font-size: 13px;
}
.cb-fund-row:hover { background: #fbfaf6; }
.cb-fund-row.is-selected { background: #faf3f3; }
.cb-fund-row .cb-fund-code {
  text-align: center;
}
.cb-fund-row .cb-fund-code .code-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-block;
}
.cb-fund-row .cb-fund-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  /* Allow long fund names to wrap to multiple lines rather than truncate. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cb-fund-row .cb-fund-add {
  appearance: none; border: 0;
  width: 28px; height: 28px;
  background: rgba(var(--brand-red-rgb), 0.86); color: #fff;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.10s, opacity 0.10s;
}
.cb-fund-row .cb-fund-add:hover { background: rgba(var(--brand-red-rgb), 1); }
.cb-fund-row .cb-fund-add.is-remove {
  background: transparent; color: rgba(var(--brand-red-rgb), 0.95);
  border: 1.5px solid rgba(var(--brand-red-rgb), 0.6);
  font-size: 22px;
  font-weight: 300;
}
.cb-fund-row .cb-fund-add.is-remove:hover {
  background: rgba(var(--brand-red-rgb), 0.86); color: #fff;
  border-color: rgba(var(--brand-red-rgb), 0.86);
}

@media (max-width: 820px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-components { border-right: 0; border-bottom: 1px solid #e6e6e2; }
}


/* ─────────────────────────────────────────────────────────────────────
   RESULT — uses sheet.css class names (.row, .section-title, .meta-list,
   .band-rows, .band-row, .div-pair, .donut-visual, .returns-list, etc.)
   so the visual primitives stay byte-identical to a real FairSheet.
   Layout differs: no A4 .page chrome, flexible flow inside .cb-result.
   ───────────────────────────────────────────────────────────────────── */
.cb-result {
  margin: 0 0 60px;
  padding: 0;
}
/* Banner: grey strip whose TOP edge is the 6-marker horizon ribbon,
   followed by the title + horizon pill body. Mirrors sheet.html's
   page-banner → horizon-strip → page-banner-body order so the colour
   ribbon reads as "tabs rising out of the page". */
.cb-result-banner {
  background: #ececea;
  border: 1px solid #d4d4d0;
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
  padding: 0 28px 22px;
}
.cb-result-banner .cb-result-horizon-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 8px;
  align-items: start;
  /* Extend edge-to-edge inside the banner. The strip's grey background
     is the banner's, so its bottom edges visually sit on top of the
     banner content below. */
  margin: 0 -28px 22px;
  padding: 0 28px;
}
.cb-result-banner-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}
.cb-result-banner .cb-result-name {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 4px 0;
}
.cb-result-banner .cb-result-tag {
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}
.cb-result-banner .cb-result-code {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 2px;
}
.cb-result-horizon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-soft, rgba(0, 0, 0, 0.06));
  color: var(--accent, var(--ink));
}
.cb-result-horizon .swatch {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
}

/* Horizon marker bar styles — the .cb-result-banner .cb-result-horizon-strip
   container handles layout; these style the per-marker tabs. */
.cb-result-horizon-strip .hmark {
  display: flex; flex-direction: column; align-items: stretch;
}
.cb-result-horizon-strip .hmark-bar {
  height: 7px;
  border-left:   1.4px solid transparent;
  border-right:  1.4px solid transparent;
  border-bottom: 1.4px solid transparent;
  background: transparent;
  box-sizing: border-box;
}
.cb-result-horizon-strip .hmark.is-active .hmark-bar { height: 10px; }
.cb-result-horizon-strip .hmark.h-purple .hmark-bar { border-color: var(--horizon-purple); }
.cb-result-horizon-strip .hmark.h-blue   .hmark-bar { border-color: var(--horizon-blue); }
.cb-result-horizon-strip .hmark.h-green  .hmark-bar { border-color: var(--horizon-green); }
.cb-result-horizon-strip .hmark.h-yellow .hmark-bar { border-color: var(--horizon-yellow); }
.cb-result-horizon-strip .hmark.h-orange .hmark-bar { border-color: var(--horizon-orange); }
.cb-result-horizon-strip .hmark.h-red    .hmark-bar { border-color: var(--horizon-red); }
.cb-result-horizon-strip .hmark.is-active.h-purple .hmark-bar { background: var(--horizon-purple); }
.cb-result-horizon-strip .hmark.is-active.h-blue   .hmark-bar { background: var(--horizon-blue); }
.cb-result-horizon-strip .hmark.is-active.h-green  .hmark-bar { background: var(--horizon-green); }
.cb-result-horizon-strip .hmark.is-active.h-yellow .hmark-bar { background: var(--horizon-yellow); }
.cb-result-horizon-strip .hmark.is-active.h-orange .hmark-bar { background: var(--horizon-orange); }
.cb-result-horizon-strip .hmark.is-active.h-red    .hmark-bar { background: var(--horizon-red); }
.cb-result-horizon-strip .hmark-label {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
  color: var(--ink);
}

/* sheet.css's spacing math leans on .page's `--vspace: 1`. Mirror that on
   the builder's result body so sheet-css class names (.row, .meta-list,
   .section-title etc.) get the same vertical rhythm as a real FairSheet. */
.cb-result-body { --vspace: 1; }

/* 2×2 diversification — each pair lays out donut-left, list-right so the
   wider cell width doesn't leave the donut stranded with whitespace. */
.row-diversification.is-2x2 {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  column-gap: 32px;
}
.row-diversification.is-2x2 .div-pair {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.row-diversification.is-2x2 .donut-col {
  width: 160px;
  align-self: start;
}
.row-diversification.is-2x2 .donut-caption {
  margin-top: 6px;
  text-align: center;
}
/* Geography pair needs more room — the world map's natural width is wider
   than a donut. Shrink the list (country name) column instead so the map
   fits properly. */
.row-diversification.is-2x2 .div-pair.pair-geo {
  grid-template-columns: 240px minmax(0, 1fr);
}
.row-diversification.is-2x2 .pair-geo .donut-col { width: 240px; }
.row-diversification.is-2x2 .pair-geo .donut-visual { width: 240px; height: 150px; overflow: hidden; }
.row-diversification.is-2x2 .pair-geo .geo-map {
  /* Override sheet.css's 360px absolute-positioned bleed-across-siblings
     layout — in the builder's 2×2 grid the map needs to stay inside its
     own column or it'll overlap the country list on the right. */
  position: relative;
  top: auto; left: auto; transform: none;
  width: 100%; height: 100%;
}

/* Any code chip that may render a "Portfolio X" / "Portfolio 4A" string
   needs at least 80px so the longer label doesn't wrap or get clipped.
   inline-block lets min-width take effect; nowrap keeps it on one line. */
.page-builder .code-chip {
  display: inline-block;
  min-width: 80px;
  text-align: center;
  white-space: nowrap;
}
/* Widen the code columns to match the chip's min-width. */
.cb-fund-row,
.cb-component-row {
  grid-template-columns: 88px 1fr 36px;
}
.cb-component-row {
  grid-template-columns: 88px 1fr 90px 24px;
}
.cb-breakdown-row,
.cb-breakdown-foot {
  grid-template-columns: 80px minmax(260px, 2.6fr) minmax(140px, 1.1fr) 64px 90px 70px 70px 70px;
}

.cb-result-body {
  background: #ffffff;
  border: 1px solid #d4d4d0;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 26px 28px 30px;
}

.cb-result-section {
  margin: 0 0 28px;
}
.cb-result-section:last-child { margin-bottom: 0; }
.cb-result-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--ink);
}
.cb-result-section h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--ink);
}

/* Footnote-style caption under the performance chart. */
/* Specificity-boosted to beat `.content-page p { font-size: 15px }` in
   style.css — we need the small canvas-axis-matching size to actually apply. */
.page-builder .cb-perf-range,
.cb-result-body p.cb-perf-range {
  margin: 4px 0 0;
  text-align: right;
  font-family: "Exo 2", var(--font-sans);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 300;
  color: var(--muted);
  opacity: 0.75;
  letter-spacing: 0.01em;
  max-width: none;
}

/* Two-column rows */
.cb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.cb-row > * { min-width: 0; }
.cb-row-1-2 { grid-template-columns: 1fr 2fr; }
.cb-row-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 820px) { .cb-row, .cb-row-1-2, .cb-row-2-1 { grid-template-columns: 1fr; } }

/* Charts */
.cb-chart {
  position: relative;
  width: 100%;
  height: 260px;
}
.cb-chart-tall { height: 320px; }

/* Composition table styled like .meta-list in sheet.css */
.cb-composition {
  display: grid;
  grid-template-columns: max-content 1fr auto;
  row-gap: 7px; column-gap: 14px;
  margin: 0;
  font-size: 12.5px;
}
.cb-composition .code-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  white-space: nowrap;
}
.cb-composition dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* FairHorizon Context band rows — copies sheet.css patterns but used
   inside a flex section (no fixed 875px page width). */
.cb-band-rows {
  position: relative;
  padding-top: 6px;
}
.cb-band-row {
  position: relative;
  height: 16px;
  margin-bottom: 6px;
  background: #ececea;
}
.cb-band-row::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--band-w, 100%);
  box-sizing: border-box;
  border: 1px solid var(--horizon-color);
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--horizon-color) 0,
    var(--horizon-color) 2px,
    transparent 2px,
    transparent 4px
  );
}
.cb-band-row.is-active::after {
  background-image: none;
  background-color: var(--horizon-color);
  z-index: 2;
}
.cb-band-row.h-purple { --horizon-color: var(--horizon-purple); }
.cb-band-row.h-blue   { --horizon-color: var(--horizon-blue); }
.cb-band-row.h-green  { --horizon-color: var(--horizon-green); }
.cb-band-row.h-yellow { --horizon-color: var(--horizon-yellow); }
.cb-band-row.h-orange { --horizon-color: var(--horizon-orange); }
.cb-band-row.h-red    { --horizon-color: var(--horizon-red); }
.cb-band-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.cb-band-labels span { text-align: center; }

/* Returns stats */
.cb-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 6px; column-gap: 16px;
  font-size: 13px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.cb-stats dt { color: var(--ink-soft); white-space: nowrap; }
.cb-stats dd { margin: 0; text-align: right; color: var(--ink); }
.cb-stats dd.is-na  { color: var(--muted); }
.cb-stats dd.is-neg { color: var(--brand-red); }

/* Diversification: paired donut + list, three pairs side by side */
.cb-div-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 28px;
}
@media (max-width: 820px) { .cb-div-grid { grid-template-columns: 1fr; } }
.cb-div-pair {
  display: grid;
  grid-template-columns: 156px 1fr;
  align-items: start;
  gap: 14px;
}
@media (max-width: 600px) { .cb-div-pair { grid-template-columns: 1fr; } }
.cb-donut-col { text-align: center; }
.cb-donut-visual {
  width: 156px; height: 156px;
  position: relative;
}
.cb-donut-visual canvas { width: 156px !important; height: 156px !important; }
.cb-donut-caption {
  margin: 4px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cb-div-list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 12px;
}
.cb-div-list li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #eceae3;
}
.cb-div-list li:last-child { border-bottom: 0; }
.cb-div-bullet {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.cb-div-label {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cb-div-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Geography world map (D3 SVG instead of donut) */
.cb-geo-map {
  width: 100%;
  height: 160px;
  position: relative;
}
.cb-geo-map svg { width: 100%; height: 100%; display: block; }
.cb-geo-map .country {
  stroke: #ffffff;
  stroke-width: 0.4;
}

/* ── Fund browser groups (mirrors master table FH + subheading break) ─── */
.cb-fund-group-title {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px 4px;
  margin: 0;
  font-family: "Exo 2", var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #fbfaf6;
  border-bottom: 1px solid #f0efeb;
}
.cb-fund-group-title.is-horizon {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.05em;
  padding-top: 22px;
}
.cb-fund-group-title.is-horizon::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.cb-fund-group-title.is-subhead {
  padding-left: 36px;
  font-style: italic;
  font-size: 11px;
}
.cb-fund-group-title.is-subhead::before {
  content: "";
  display: inline-block;
  width: 2px; height: 12px;
  background: var(--accent);
  margin-right: 6px;
}

/* ── Component-breakdown table at bottom of result ─────────────────────
   Mirrors the master-table .fund-row grid but adds a "Weight" column for
   the user's selected allocation. The other columns (Code, Fund, Strategy,
   TER, 3y/5y/10y returns) come straight from each component's existing
   cache so the visual primitives stay byte-identical to the home page. */
.cb-breakdown {
  display: flex; flex-direction: column;
  border: 1px solid #e6e6e2;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-size: 12px;
}
.cb-breakdown-row {
  display: grid;
  grid-template-columns: 80px minmax(260px, 2.6fr) minmax(140px, 1.1fr) 64px 90px 70px 70px 70px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0efeb;
  text-decoration: none;
  color: var(--ink);
}
.cb-breakdown-row:last-child { border-bottom: 0; }
.cb-breakdown-row.cb-breakdown-head {
  background: #fbfaf6;
  font-family: "Exo 2", var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.cb-breakdown-row .col-fund {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.cb-breakdown-row .col-fund .fund-name-text,
.cb-breakdown-row .col-fund .fund-name-link {
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
/* Only the fund name itself is a link — keep .content-page's red-underline
   scoped here instead of bleeding across the whole row. */
.cb-breakdown-row .col-fund .fund-name-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.cb-breakdown-row .col-fund .fund-name-link:hover {
  color: var(--brand-red);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.cb-breakdown-row .col-fund .fund-isin {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.cb-breakdown-row .col-desc {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  font-size: 11px;
}
.cb-breakdown-row .col-desc .desc-strat {
  font-weight: 600;
  color: var(--ink);
}
.cb-breakdown-row .col-desc .desc-asset {
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.3;
}
.cb-breakdown-row .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cb-breakdown-row .col-weight {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--brand-red-rgb), 0.95);
}
.cb-breakdown-foot {
  display: grid;
  grid-template-columns: 80px minmax(260px, 2.6fr) minmax(140px, 1.1fr) 64px 90px 70px 70px 70px;
  gap: 12px;
  padding: 12px 14px;
  background: #fbfaf6;
  border-top: 1px solid #e6e6e2;
  font-weight: 600;
  font-size: 12px;
}
.cb-breakdown-foot .col-weight {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--brand-red-rgb), 0.95);
}
@media (max-width: 920px) {
  .cb-breakdown-row,
  .cb-breakdown-foot {
    grid-template-columns: 80px 1fr 70px 70px;
  }
  .cb-breakdown-row .col-desc,
  .cb-breakdown-row .col-ter,
  .cb-breakdown-row .col-ret-3y,
  .cb-breakdown-row .col-ret-5y,
  .cb-breakdown-foot > *:not(.col-fund):not(.col-weight):not(.col-ret-10y):not(.col-code) {
    display: none;
  }
}