/* ═══ fund-page.css — the fund page, finished in the site's standard pieces (Sep 30 2026) ════════════════════
   The owner: "very sloppy, container trash … lots of containers and buttons inside containers". He liked the
   round-2 pictures (docs/mocks/fund-page/A2, B2, C2: fp-kit2.css), built only from pieces the site already uses.
   This sheet gives the real page that finish and keeps its section order and every figure (a layout change,
   A, B or C, comes later):
     • the title row is the Tracker's / Risk mix's: amber mono ticker │ caps name, and on the right the price,
       its change and "Open at your broker" as a pill (index.html moves #fundHero into the title row);
     • the key figures: a calm big number over a small muted label, no cells, no "?" circles (the label is
       dotted-underlined and opens the same words: tips.js / glossary.js, #viewFund);
     • every section is one surface: the Summary / Settings tick heading (amber tick, sentence-case label,
       hairline), then its content with no boxed cells; buttons only as small pills in that heading row;
     • tables stay the Universe rows (.cptable / CPRow); What changed shows its kind as a colored dot + word;
     • the level pill is the Screener's outlined L pill, for every level.
   Everything is scoped to #viewFund; light mode swaps the tokens. Loaded after features-r2.css. */

#viewFund {
  /* Oct 2 2026 (option A): the owner, "i hate the white and grey text, stop doing that". Warm tones only: amber mono
     caps section labels, cream figures (never white), gold-taupe labels (never a cool grey), a tertiary taupe for
     sources and footnotes; green for yield, income and raises, red for cuts, gold for specials. */
  --fp-bg: var(--bg, #0a0a0b);
  --fp-text: #eadfc8; --fp-sub: #b5a27e; --fp-mute: #b5a27e; --fp-hint: #8f826a; --fp-tag: #b5a27e;
  --fp-line: rgba(224, 168, 46, .10); --fp-line2: rgba(224, 168, 46, .20); --fp-line3: rgba(224, 168, 46, .34); --fp-row: rgba(224, 168, 46, .06);
  --fp-amber: #e0a82e; --fp-amber-t: #e0a82e; --fp-ink: #17120a; --fp-glow: 0 0 8px rgba(224, 168, 46, .55);
  --fp-bar: #8f826a; --fp-track: rgba(224, 168, 46, .10); --fp-lvl-b: rgba(224, 168, 46, .34);
  --fp-surface: rgba(224, 168, 46, .04); --fp-surface2: rgba(224, 168, 46, .08); --fp-hover: rgba(224, 168, 46, .07);
  --fp-inc: #3ddc84; --fp-raise: #3ddc84; --fp-cut: #f0625a; --fp-special: #f5c451; --fp-steady: #2f8a5c;
  --fp-gain: #7fb2f0; --fp-roc: #b79cf2;
  --fp-grid: rgba(224, 168, 46, .07); --fp-tv-bg: #0d0c09;
  --fp-card-solid: color-mix(in srgb, #e0a82e 4%, var(--bg, #0a0a0b));   /* a card's color as one solid (the peers' sticky first column) */
  --fp-font: 'Inter', var(--sans);
  --fp-z: 1;
  /* the site's own tokens, warm inside this page, so every script's words on it follow (tables, keys, tips, charts) */
  --text: var(--fp-text); --text-2: var(--fp-sub); --text-3: var(--fp-sub); --text-4: var(--fp-hint); --text-muted: var(--fp-sub);
  --accent: var(--fp-amber); --accent-soft: var(--fp-amber);
  --green: var(--fp-inc); --green-bright: var(--fp-inc); --red: var(--fp-cut); --red-bright: var(--fp-cut);
  --surface-2: #1a160e; --border: var(--fp-line); --border-hover: var(--fp-line2);
  color: var(--fp-text);
}
body[data-text-size="large"] #viewFund { --fp-z: 1.1; }
body[data-text-size="xlarge"] #viewFund { --fp-z: 1.2; }
body[data-theme="light"] #viewFund {
  /* light mode: the same warm family on paper (never shown in the pictures, kept matching) */
  --fp-text: #2e2415; --fp-sub: #6b5532; --fp-mute: #6b5532; --fp-hint: #82704f; --fp-tag: #6b5532;
  --fp-line: rgba(120, 84, 20, .14); --fp-line2: rgba(120, 84, 20, .22); --fp-line3: rgba(120, 84, 20, .34); --fp-row: rgba(120, 84, 20, .07);
  --fp-amber: #b07a10; --fp-amber-t: #8a5a00; --fp-glow: none;
  --fp-bar: #a08a62; --fp-track: rgba(120, 84, 20, .10); --fp-lvl-b: rgba(120, 84, 20, .30);
  --fp-surface: rgba(176, 122, 16, .06); --fp-surface2: rgba(176, 122, 16, .11); --fp-hover: rgba(176, 122, 16, .09);
  --fp-inc: #13804a; --fp-raise: #13804a; --fp-cut: #b8382f; --fp-special: #8f6400; --fp-steady: #6fae8a;
  --fp-gain: #3f72b8; --fp-roc: #7a5cc4;
  --fp-grid: rgba(120, 84, 20, .10); --fp-tv-bg: #ffffff;
  --fp-card-solid: color-mix(in srgb, #b07a10 6%, var(--bg, #ffffff));
  --surface-2: #f6efe2;
}

/* ── the page: sections separated by space, one surface level ──────────────────────────────────────── */
#viewFund #fundDetail { gap: 44px; max-width: none; font-family: var(--fp-font); font-feature-settings: "tnum" 1; }   /* the full width, as every other view (was a centred 1400px column) */
#viewFund #fundDetail :is(.card, .fx-pane) {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
#viewFund #fundDetail .fund-secondary-grid { gap: 44px 48px; }

/* ── 1. the title row: ticker │ name … price, change, Open at your broker ─────────────────────────── */
#viewFund #fundDetail > .fund-viewbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 64px; margin: 0 0 -18px; padding: 0;
  border: 0; border-bottom: 1px solid var(--fp-line); border-radius: 0; background: none; box-shadow: none;
}
#viewFund #fundDetail > .fund-viewbar .fund-detail__back {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0 4px 0 0; padding: 0 14px;
  border: 1px solid var(--fp-line2); border-radius: 17px; background: transparent; box-shadow: none;
  font:500 calc(13.5px * var(--fp-z))/1 var(--fp-font); color: var(--fp-text); cursor: pointer;
}
#viewFund #fundDetail > .fund-viewbar .fund-detail__back:hover { border-color: var(--fp-line3); }
#viewFund #fundDetail > .fund-viewbar .viewbar__name {
  margin: 0; font:700 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-amber-t); white-space: nowrap;
}
#viewFund #fundDetail > .fund-viewbar .viewbar__name::before, #viewFund #fundDetail > .fund-viewbar .viewbar__name::after { display: none; }
#viewFund #fundDetail > .fund-viewbar .viewbar__tag {
  display: block; flex: 0 1 auto; min-width: 0; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--fp-line2);
  font:500 13px/18px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fp-tag);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#viewFund #fundHero {
  display: flex; align-items: center; gap: 12px 18px; margin: 0 0 0 auto; padding: 0; border: 0; background: none; flex: none;
}
#viewFund #fundHero :is(.fund-hero__ticker, .fund-hero__fullname) { display: none; }
#viewFund #fundHero .fund-hero__name { order: 2; display: flex; align-items: center; gap: 8px; margin: 0; }
#viewFund #fundHero .fund-hero__price { order: 1; display: flex; align-items: baseline; gap: 8px; margin: 0; text-align: right; white-space: nowrap; }
#viewFund #fundHero .fund-hero__big { margin: 0; font:600 calc(20px * var(--fp-z))/1 var(--fp-font); letter-spacing: -.02em; color: var(--fp-text); }
#viewFund #fundHero .fund-hero__change { margin: 0; font:500 calc(14px * var(--fp-z))/1 var(--fp-font); }
#viewFund #fundHero .fund-hero__change.flat { color: var(--fp-mute); }
#viewFund #fundHero .brk-strip--fund { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
#viewFund #fundHero .brk-strip--fund > button {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 0; padding: 0 16px; border: 1px solid var(--fp-line2); border-radius: 19px;
  background: transparent; box-shadow: none; font:500 calc(14px * var(--fp-z))/1 var(--fp-font); color: var(--fp-text); white-space: nowrap; cursor: pointer;
}
#viewFund #fundHero .brk-strip--fund > button:hover { border-color: var(--fp-line3); }
/* the one amber button on the page (the Research "Analyze" pill) */
#viewFund #fundHero .brk-strip--fund > button:first-child {
  border-color: var(--fp-amber); background: var(--fp-amber); color: var(--fp-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16);
}
#viewFund #fundHero .brk-strip--fund > button:first-child:hover { filter: brightness(1.06); }
#viewFund #fundHero .brk-strip--fund > button:focus-visible, #viewFund #fundDetail .fund-detail__back:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; }
/* the Selection Universe tags (universe.js), when the member has brought sheets in */
#viewFund #fundHero .rmsu-line { margin: 0; }

/* ── 2. the key figures: a calm big number, a small muted label, no cells ─────────────────────────── */
#viewFund #fundDetail > .fund-hero { display: block; }
#viewFund #fundDetail .fund-hero__stats {
  display: grid; grid-template-columns: repeat(9, auto); justify-content: space-between; gap: 20px 32px;   /* nine figures (Sep 30 order) */
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#viewFund #fundDetail .fund-hero__stats .hero-stat {
  min-width: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: none; box-shadow: none; gap: 0;
}
#viewFund #fundDetail :is(.hero-stat__label, .dist-stat__l, .cap-trend__l) {
  font:500 calc(13px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-mute);
}
#viewFund #fundDetail .hero-stat__value {
  margin-top: 7px; font:600 calc(22px * var(--fp-z))/1.15 var(--fp-font); letter-spacing: -.015em; color: var(--fp-text); text-shadow: none; white-space: nowrap;
}
#viewFund #fundDetail .hero-stat__value.stat-yield-high { color: var(--fp-text); }   /* a yield is not a gain: neutral */
#viewFund #fundDetail .hero-stat__value.up { color: var(--green); }
#viewFund #fundDetail .hero-stat__value.down { color: var(--red-bright, var(--red)); }
/* the level: the Screener's outlined L pill, the same for every level and for ETFs */
#viewFund #fundDetail .hero-stat__value.stat-risk {
  display: inline-block; align-self: flex-start; width: fit-content; margin-top: 9px; padding: 2px 8px; border: 1px solid var(--fp-lvl-b); border-radius: 5px;
  font:600 calc(14px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: 0; color: var(--fp-sub);
}
#viewFund #fundDetail .hero-pair { gap: 6px; }
#viewFund #fundDetail .hero-pair__arw { color: var(--fp-hint); }

/* ── the labels open their words: no "?" circles, a dotted underline (tips.js, glossary.js) ─────────── */
#viewFund .gq { display: none !important; }
#viewFund [data-glossary], #viewFund [data-glossary] > :is(span):not(.gq-nw) {
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 3px; cursor: help;
}
#viewFund [data-glossary]:hover, #viewFund [data-glossary][aria-describedby] { text-decoration-color: currentColor; }
#viewFund [data-glossary]:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; border-radius: 3px; }
#viewFund .cptable thead th[data-glossary], #viewFund .cptable thead th[data-glossary] > * { text-decoration-line: none; }

/* ── 3. What's happening: one line of plain words under the figures ────────────────────────────────── */
#viewFund #fundDetail .fund-situation {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px 14px; margin-top: -16px; padding: 0;
}
#viewFund #fundDetail .fund-situation[hidden] { display: none; }
#viewFund #fundDetail .fund-situation__label {
  display: inline-flex; align-items: center; gap: 9px; flex: none; margin: 0;
  font:650 calc(14px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: .01em; text-transform: none; color: var(--fp-text);
}
#viewFund #fundDetail .fund-situation__dot { width: 3px; height: 13px; border-radius: 2px; background: var(--fp-amber); box-shadow: var(--fp-glow); }
#viewFund #fundDetail .fund-situation__text { margin: 0; font:400 calc(15px * var(--fp-z))/1.55 var(--fp-font); color: var(--fp-sub); }

/* ── 4. section headings: the Summary / Settings tick heading ─────────────────────────────────────── */
#viewFund #fundDetail :is(.card__header, .fx-pane > .cpane__bar) {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; height: auto; min-height: 42px;
  margin: 0 0 20px; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--fp-line); border-radius: 0; background: none; box-shadow: none;
}
#viewFund #fundDetail .fx-pane.pn > .cpane__bar { padding-right: 40px !important; }
#viewFund #fundDetail .fx-pane.pn > .cpane__bar:hover { background: none; }
#viewFund #fundDetail :is(.card__header h2, .fx-pane .cpane__title) {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font:650 calc(15px * var(--fp-z))/1.2 var(--fp-font); letter-spacing: .01em; text-transform: none; color: var(--fp-text); white-space: nowrap;
}
#viewFund #fundDetail :is(.card__header h2, .fx-pane .cpane__title)::before,
#viewFund #fundDetail .fx-pane.pn > .cpane__bar .cpane__title::before,
#viewFund #fundDetail .fx-pane.pn.is-folded > .cpane__bar .cpane__title::before {
  content: ""; display: block; flex: none; width: 3px; height: 13px; margin: 0; border: 0; border-radius: 2px; transform: none;
  background: var(--fp-amber); box-shadow: var(--fp-glow); opacity: 1;
}
#viewFund #fundDetail .fx-pane.pn.is-folded > .cpane__bar .cpane__title::before { opacity: .55; }
#viewFund #fundDetail :is(.card__header .chart-meta, .fx-pane .cpane__meta) {
  margin: 0; font:400 calc(13px * var(--fp-z))/1.35 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-mute);
}
#viewFund #fundDetail .fund-kv__asof { margin-left: auto; }
/* the collapse chevron: a small round pill at the end of the heading row */
#viewFund #fundDetail .fx-pane .pn-tg { right: 0; border-color: var(--fp-line2); background: transparent; color: var(--fp-sub); }

/* the small pills a heading row holds: Key, Show older (and Compare these, the amber one) */
#viewFund #fundDetail .cap-trend__keybtn,
#viewFund #fundDetail .fx-more {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 0; margin-left: auto; padding: 0 13px;
  border: 1px solid var(--fp-line2); border-radius: 15px; background: transparent; box-shadow: none;
  font:500 calc(13px * var(--fp-z))/1 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-sub); white-space: nowrap; cursor: pointer;
}
#viewFund #fundDetail .cap-trend__keybtn { cursor: help; }
#viewFund #fundDetail :is(.cap-trend__keybtn, .fx-more):hover { border-color: var(--fp-line3); color: var(--fp-text); }
#viewFund #fundDetail .fx-more:focus-visible, #viewFund #fundDetail .cap-trend__keybtn:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; }
#viewFund #fundDetail .fx-cta { height: 30px; padding: 0 14px; font:600 calc(13px * var(--fp-z))/1 var(--fp-font); }
#viewFund #fundDetail .cap-trend__keypop { border-color: var(--fp-line2); background: var(--fp-bg); }

/* chart controls in the heading row: the Portfolio chart's range buttons and its outline source toggle */
#viewFund #fundDetail .chart-header__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#viewFund #fundDetail .chart-source-switch { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--fp-line2); border-radius: 17px; background: transparent; box-shadow: none; }
#viewFund #fundDetail .chart-source-btn {
  height: auto; padding: 7px 12px; border: 0; border-radius: 14px; background: none; box-shadow: none;
  font:500 calc(13.5px * var(--fp-z))/1 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-sub); cursor: pointer;
}
#viewFund #fundDetail .chart-source-btn:hover { color: var(--fp-text); }
#viewFund #fundDetail .chart-source-btn.is-active { background: none !important; border-color: transparent !important; color: var(--fp-text) !important; box-shadow: inset 0 0 0 1px var(--fp-mute); }   /* screener-fix.css filled it amber with !important */
#viewFund #fundDetail :is(.chart-controls, .nav-range) { gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; }   /* display stays theirs: TradingView hides the ranges */
#viewFund #fundDetail :is(.chart-controls .chart-btn, .nav-range button) {
  height: auto; min-width: 0; padding: 7px 11px; border: 0; border-radius: 15px; background: none; box-shadow: none;
  font:600 calc(13.5px * var(--fp-z))/1 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-sub); cursor: pointer;
}
#viewFund #fundDetail :is(.chart-controls .chart-btn, .nav-range button):hover { color: var(--fp-text); }
#viewFund #fundDetail :is(.chart-controls .chart-btn, .nav-range button).is-active { background: var(--fp-amber) !important; border-color: var(--fp-amber) !important; color: var(--fp-ink) !important; box-shadow: none; }
#viewFund #fundDetail :is(.chart-source-btn, .chart-btn, .nav-range button):focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; }

/* ── 5. figures inside sections: the same calm number and muted label, no cells ───────────────────── */
#viewFund #fundDetail :is(.dist-stats, .cap-trend__stats) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
#viewFund #fundDetail :is(.dist-stat, .cap-trend__stat) {
  display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 0 !important; background: none; box-shadow: none;
}
#viewFund #fundDetail :is(.dist-stat__v, .cap-trend__v) {
  margin-top: 7px; font:600 calc(22px * var(--fp-z))/1.15 var(--fp-font); letter-spacing: -.015em; color: var(--fp-text); white-space: nowrap;
}
#viewFund #fundDetail :is(.dist-stat__v, .cap-trend__v).pos { color: var(--green); }
#viewFund #fundDetail :is(.dist-stat__v, .cap-trend__v).neg { color: var(--red-bright, var(--red)); }
#viewFund #fundDetail .dist-stat__s { margin-top: 5px; font:400 calc(13px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-mute); }
/* the half-width sections: a step smaller so four figures fit */
#viewFund #fundDetail .fund-secondary-grid :is(.dist-stat__v) { font-size:max(13px, calc(20px * var(--fp-z))); }
#viewFund #fundDetail .fund-secondary-grid .dist-stats { gap: 20px 24px; margin-bottom: 24px; }

/* Distribution record: the verdict as words, the bar and its legend */
#viewFund #fundDetail .payrec__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
#viewFund #fundDetail .payrec__badge { padding: 0; border: 0; border-radius: 0; background: none; font:600 calc(16px * var(--fp-z))/1.3 var(--fp-font); }
#viewFund #fundDetail .payrec__meta { font:400 calc(13.5px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-mute); }
#viewFund #fundDetail .payrec__bar { height: 8px; margin: 16px 0 12px; border-radius: 4px; background: var(--fp-track); }
#viewFund #fundDetail .payrec__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font:500 calc(13.5px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .payrec__legend b { color: var(--fp-text); font-weight: 600; }
#viewFund #fundDetail .payrec__body > .payrec__meta:last-child { margin-top: 12px; }

/* ── 6. Compared with similar funds: the Universe rows, no frame ───────────────────────────────────── */
#viewFund #fundDetail .fx-basis { margin: 0 0 12px; padding: 0; font:400 calc(14px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail :is(.fx-basis__l, .fx-sit__h) {
  font:600 calc(13px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-mute);
}
#viewFund #fundDetail .fx-scroll { border: 0; }
#viewFund #fundDetail .fx-table thead th { background: var(--fp-bg); }
#viewFund #fundDetail .fx-sit { padding: 16px 0 0; border: 0; font:400 calc(14px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .fx-sit__i b { color: var(--fp-text); }
#viewFund #fundDetail .fx-note { margin: 0; padding: 10px 0 0; border: 0; font:400 calc(13px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-hint); }

/* ── 7. What changed: clean rows, the kind as a small colored dot and a word ─────────────────────── */
#viewFund #fundDetail .fx-tl { padding: 0; }
#viewFund #fundDetail .fx-steady { margin: 0 0 10px; font:400 calc(14.5px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .fx-yr { border-top: 1px solid var(--fp-line); }
#viewFund #fundDetail .fx-yr:first-child { border-top: 0; }
#viewFund #fundDetail .fx-yr__h { font:650 calc(14px * var(--fp-z))/22px var(--fp-font); letter-spacing: 0; color: var(--fp-text); }
#viewFund #fundDetail .fx-ev { padding: 8px 0; border: 0; }
#viewFund #fundDetail .fx-ev__d { font:500 calc(13.5px * var(--fp-z))/22px var(--fp-font); color: var(--fp-mute); }
#viewFund #fundDetail .fx-tag {
  display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font:500 calc(13.5px * var(--fp-z))/22px var(--fp-font); color: var(--fp-sub);
}
#viewFund #fundDetail .fx-tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
#viewFund #fundDetail .fx-ev__t { font:400 calc(14.5px * var(--fp-z))/22px var(--fp-font); color: var(--fp-text); }
#viewFund #fundDetail .fx-src { font-size:max(13px, calc(13px * var(--fp-z))); }
#viewFund #fundDetail .fx-tl .fx-note { margin-top: 8px; padding: 12px 0 0; border-top: 1px solid var(--fp-line); }

/* ── 8. Distribution history and Price, NAV & discount: legends and the rate changes as plain rows ── */
#viewFund #fundDetail .dist-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 0 0; font:500 calc(13px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .dist-log { padding: 20px 0 0; }
#viewFund #fundDetail .dist-log__h { margin: 0 0 6px; font:600 calc(14px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-text); }
#viewFund #fundDetail .dist-log__row {
  grid-template-columns: 7.2em 5em minmax(0, 1fr) 4.6em; gap: 10px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--fp-row);
  font:400 calc(13.5px * var(--fp-z))/1.4 var(--fp-font);
}
#viewFund #fundDetail .dist-log__row:last-child { border-bottom: 0; }
#viewFund #fundDetail :is(.dist-log__d, .dist-log__a, .dist-log__p) { font-family: var(--fp-font); }
#viewFund #fundDetail .dist-log__d { color: var(--fp-mute); }
#viewFund #fundDetail .dist-log__a { color: var(--fp-sub); }
#viewFund #fundDetail .dist-log__w { font-weight: 600; }
#viewFund #fundDetail .dist-log__row:not(.pos):not(.neg) .dist-log__w { color: var(--fp-text); }

/* ── 9. Fund basics: a label and its figure, no ruled cells ────────────────────────────────────────── */
#viewFund #fundDetail .fund-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; padding: 0; border: 0; background: none; }
#viewFund #fundDetail .fund-kv__row {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px;
  padding: 8px 0; border: 0 !important; background: none;
}
#viewFund #fundDetail .fund-kv__label { font:500 calc(13.5px * var(--fp-z))/1.4 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-mute); }
#viewFund #fundDetail .fund-kv__value { font:600 calc(14.5px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-text); text-align: right; }
/* a row's own date sits under its label (fundextra.css), and the figure stays on the label's first line */
#viewFund #fundDetail .fund-kv__row:has(.fund-kv__own) { flex-wrap: nowrap; align-items: baseline; }
#viewFund #fundDetail .fund-kv__label:has(.fund-kv__own) { display: block; flex: 1 1 auto; min-width: 0; }
/* an inline-block keeps the label's dotted underline off the date */
#viewFund #fundDetail .fund-kv__own { display: inline-block; width: 100%; margin-top: 2px; font:400 calc(13px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-hint); }

/* ── 10. Top holdings and Exposure: name, a thin neutral bar, the share ───────────────────────────── */
#viewFund #fundDetail .fund-holding-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 4.2em; align-items: center; gap: 4px 16px;
  padding: 8px 0; border: 0; background: none;
}
#viewFund #fundDetail .fund-holding-row__name { font:500 calc(14px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-text); min-width: 0; }
#viewFund #fundDetail :is(.fund-holding-row__tk, .fund-holding-row__cat) { font:400 calc(13px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-mute); }
#viewFund #fundDetail .fund-holding-row__bar { height: 4px; border-radius: 2px; background: var(--fp-track); }
#viewFund #fundDetail .fund-holding-row__bar i { background: var(--fp-bar); border-radius: 2px; }
#viewFund #fundDetail .fund-holding-row__pct { font:600 calc(14px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-text); text-align: right; }
#viewFund #fundDetail .fund-holding-foot { padding: 12px 0 0; border: 0; font:400 calc(13px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-hint); }
#viewFund #fundDetail .fund-exposure-grid { gap: 28px 48px; padding: 0; }
#viewFund #fundDetail .fund-exp { padding: 0; border: 0; background: none; }
#viewFund #fundDetail .fund-exp__h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px;
  font:600 calc(14px * var(--fp-z))/1.3 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-text);
}
#viewFund #fundDetail .fund-exp__note { font:400 calc(13px * var(--fp-z))/1.35 var(--fp-font); letter-spacing: 0; text-transform: none; color: var(--fp-mute); }
#viewFund #fundDetail .fund-exp-row { padding: 4px 0; font:400 calc(13.5px * var(--fp-z))/1.4 var(--fp-font); }
#viewFund #fundDetail .fund-exp-row__l { color: var(--fp-sub); }
#viewFund #fundDetail .fund-exp-row__v { font-weight: 600; color: var(--fp-text); }
#viewFund #fundDetail .fund-exp-row__bar { height: 4px; border-radius: 2px; background: var(--fp-track); }
#viewFund #fundDetail .fund-exp-row__bar i { background: var(--fp-bar); border-radius: 2px; }

/* ── narrower screens ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #viewFund #fundDetail .fund-hero__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 1100px) {
  #viewFund #fundDetail .fund-secondary-grid .dist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #viewFund #fundDetail { gap: 36px; }
  #viewFund #fundDetail > .fund-viewbar { gap: 8px 12px; padding: 10px 0 12px; margin-bottom: -12px; }
  #viewFund #fundDetail > .fund-viewbar .viewbar__tag { flex: 1 1 100%; order: 3; padding: 0; border: 0; white-space: normal; }
  #viewFund #fundHero { order: 4; flex: 1 1 100%; justify-content: space-between; margin: 0; }
  #viewFund #fundHero .fund-hero__price { text-align: left; }
  #viewFund #fundDetail .fund-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  #viewFund #fundDetail .hero-stat__value { white-space: normal; font-size:max(13px, calc(20px * var(--fp-z))); }
  #viewFund #fundDetail .fund-situation { flex-direction: column; gap: 6px; margin-top: -10px; }
  #viewFund #fundDetail :is(.dist-stats, .cap-trend__stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #viewFund #fundDetail :is(.dist-stat__v, .cap-trend__v) { font-size:max(13px, calc(20px * var(--fp-z))); white-space: normal; }
  #viewFund #fundDetail .card__header h2, #viewFund #fundDetail .fx-pane .cpane__title { white-space: normal; }
  #viewFund #fundDetail .chart-header__right { flex-wrap: wrap; margin-left: 0; }
  #viewFund #fundDetail .fund-kv { grid-template-columns: minmax(0, 1fr); }
  #viewFund #fundDetail .fund-holding-row { grid-template-columns: minmax(0, 1fr) 4.2em; }
  #viewFund #fundDetail .fund-holding-row__bar { grid-column: 1 / -1; grid-row: 2; }
  #viewFund #fundDetail .dist-log__row { grid-template-columns: 6.6em 4.6em minmax(0, 1fr) 3.8em; gap: 8px; font-size:max(13px, calc(13px * var(--fp-z))); }
}
@media (max-width: 420px) {
  #viewFund #fundHero { flex-wrap: wrap; }
  #viewFund #fundHero .brk-strip--fund > button { height: 36px; padding: 0 14px; }
}

/* ═══ Sep 30 (later): income first, NAV lower and quieter ═══════════════════════════════════════════════
   The owner: "we don't care about NAV that much" (the RMS view: market price and income matter; NAV and the
   premium / discount can mislead). Every figure stays; only the emphasis moves:
     • the top row leads with Price (and its day change, moved from the title row), Yield, the next payment
       ($ and date), Ex-date, Payment record, level, frequency (app.js renderFundHero);
     • "Total return vs NAV" and "Discount vs its own history" sit low on the page (.fund-quiet): a smaller,
       grey-ticked heading and small secondary figures, no large green / red numbers;
     • the premium / discount figures elsewhere (Price, NAV & discount; the peers' discount column) in the
       secondary text color; the chart's NAV line is off until its legend entry is clicked. */
#viewFund #fundDetail .hero-stat__sub {
  margin-top: 4px; font:500 calc(13px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-mute); white-space: nowrap;
}
#viewFund #fundDetail .hero-stat__sub .up { color: var(--green); }
#viewFund #fundDetail .hero-stat__sub .down { color: var(--red-bright, var(--red)); }
#viewFund #fundDetail .hero-stat__sub .flat { color: var(--fp-mute); }
/* the quiet NAV sections */
#viewFund #fundDetail .fund-quiet > .card__header { min-height: 36px; margin-bottom: 16px; padding: 4px 0 6px; }
#viewFund #fundDetail .fund-quiet > .card__header h2 { gap: 8px; font:600 calc(14px * var(--fp-z))/1.2 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .fund-quiet > .card__header h2::before { height: 11px; background: var(--fp-line3); box-shadow: none; }
#viewFund #fundDetail .fund-quiet :is(.dist-stats, .cap-trend__stats) { gap: 18px 32px; }
#viewFund #fundDetail .fund-quiet :is(.dist-stat__v, .cap-trend__v),
#viewFund #fundDetail #fundNavStats .dist-stat__v {
  margin-top: 5px; font:600 calc(16px * var(--fp-z))/1.2 var(--fp-font); letter-spacing: 0; color: var(--fp-sub);
}
#viewFund #fundDetail .fund-quiet :is(.dist-stat__v, .cap-trend__v):is(.pos, .neg),
#viewFund #fundDetail #fundNavStats .dist-stat__v:is(.pos, .neg) { color: var(--fp-sub); }
#viewFund #fundDetail .fund-quiet .dist-stat__s { margin-top: 3px; }
#viewFund #fundDetail #fundNavStats .dist-stat__s { margin-top: 3px; }
/* the peers' discount columns in the secondary color, not green / red */
#viewFund #fundDetail .fx-table tbody td.fx-disc { color: var(--fp-sub); }
/* the chart's key names the NAV line and the band only while they are drawn */
#viewFund #fundDetail .nav-line-off .dist-legend .nav-leg { display: none; }

/* ── Oct 1: Distribution history — specials, routine extras and data to check, under the rate changes ────────────────
   (app.js renderDistributionBarChart). Calm words in the page's own tones: a special in the gold, a routine extra in
   the steel of "steady", a payment to check in plain text with a dotted underline. No red: a cut is a fact, not an alarm. */
#viewFund #fundDetail .dist-log__h--sub { margin-top: 18px; }
#viewFund #fundDetail .dist-log__row--special .dist-log__w { color: var(--fp-amber-t); }
#viewFund #fundDetail .dist-log__row--extra .dist-log__w { color: var(--fp-sub); }
#viewFund #fundDetail .dist-log__row--check .dist-log__w { color: var(--fp-text); text-decoration: underline dotted var(--fp-line3); text-underline-offset: 3px; }
#viewFund #fundDetail :is(.dist-log__row--special, .dist-log__row--extra, .dist-log__row--check) .dist-log__a { grid-column: 3 / -1; }
#viewFund #fundDetail :is(.dist-log__row--special, .dist-log__row--extra, .dist-log__row--check) { grid-template-columns: 7.2em 8.6em minmax(0, 1fr); }

/* ═══ Where the payments come from (fund-payout.js, Oct 1 2026) ═══════════════════════════════════════════════
   Payout facts from the fund's own filings, below the payment history and above the quiet NAV sections. One surface
   like every other section (no boxes in boxes): the tick heading, then amber mono caps labels over plain figures.
   The only color is the gold of net investment income in the bars; the other sources are muted greys and slates,
   so nothing reads as a verdict. */
#viewFund {
  --pf-inc: var(--fp-inc); --pf-st: #5f93d6; --pf-lt: var(--fp-gain); --pf-roc: var(--fp-roc);   /* Oct 2: Risk mix E tones (income green, gains blue, return of capital lavender) */
}
body[data-theme="light"] #viewFund { --pf-st: #2f5f9e; --pf-lt: var(--fp-gain); --pf-roc: var(--fp-roc); }
#viewFund #fundDetail .pf-pane .cpane__meta { flex: 1 1 auto; }
#viewFund #fundDetail .pf { display: flex; flex-direction: column; gap: 28px; }
#viewFund #fundDetail .pf-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 28px 56px; align-items: start; }
#viewFund #fundDetail .pf-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#viewFund #fundDetail .pf-lab {
  margin: 0; font:600 calc(13px * var(--fp-z))/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fp-amber-t);
}
#viewFund #fundDetail .pf-lab--quiet { color: var(--fp-mute); }
#viewFund #fundDetail .pf-note {
  margin: -8px 0 0; font:400 calc(14.5px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub);
}
#viewFund #fundDetail .pf-lead { display: flex; flex-direction: column; gap: 8px; }
#viewFund #fundDetail .pf-lead__t { margin: 0; font:400 calc(14.5px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .pf-lead__t b { font-weight: 600; color: var(--fp-text); }
#viewFund #fundDetail .pf-big { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font:400 calc(14px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-mute); }
#viewFund #fundDetail .pf-big b { font:600 calc(28px * var(--fp-z))/1.1 var(--fp-font); letter-spacing: -.02em; color: var(--fp-text); }
#viewFund #fundDetail .pf-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fp-track); }
#viewFund #fundDetail .pf-seg { min-width: 3px; }
#viewFund #fundDetail :is(.pf-seg, .pf-dot).pf-seg--inc, #viewFund #fundDetail .pf-dot--inc { background: var(--pf-inc); }
#viewFund #fundDetail :is(.pf-seg--st, .pf-dot--st) { background: var(--pf-st); }
#viewFund #fundDetail :is(.pf-seg--lt, .pf-dot--lt) { background: var(--pf-lt); }
#viewFund #fundDetail :is(.pf-seg--roc, .pf-dot--roc) { background: var(--pf-roc); }
#viewFund #fundDetail .pf-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 2px 0 0; padding: 0; list-style: none; font:500 calc(13.5px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .pf-legend li { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#viewFund #fundDetail .pf-legend b { font-weight: 600; color: var(--fp-text); }
#viewFund #fundDetail .pf-legend__a { color: var(--fp-hint); font-weight: 400; }
#viewFund #fundDetail .pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
#viewFund #fundDetail .pf-ytd { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fp-line); }
#viewFund #fundDetail .pf-ytd--first { padding-top: 0; border-top: 0; }
#viewFund #fundDetail .pf-ytd__w { margin: 0; font:400 calc(13.5px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .pf-meta { margin: 0; font:400 calc(13px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-hint); }
#viewFund #fundDetail .pf-empty { margin: 0; font:400 calc(14px * var(--fp-z))/1.55 var(--fp-font); color: var(--fp-sub); }
#viewFund #fundDetail .pf-src { margin: 0; font:400 calc(13px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-hint); }
#viewFund #fundDetail .pf-link { color: var(--fp-sub); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
#viewFund #fundDetail .pf-link:hover { color: var(--fp-text); text-decoration-color: currentColor; }
#viewFund #fundDetail .pf-link:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; border-radius: 3px; }

/* the two tables: the Universe rows' calm type, hairlines between rows, no frame */
#viewFund #fundDetail .pf-scroll { overflow-x: auto; margin: 0; }
#viewFund #fundDetail .pf-table { width: 100%; border-collapse: collapse; font:400 calc(13.5px * var(--fp-z))/1.35 var(--fp-font); font-variant-numeric: tabular-nums; }
#viewFund #fundDetail .pf-table th, #viewFund #fundDetail .pf-table td { padding: 7px 0 7px 14px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--fp-row); white-space: nowrap; }
#viewFund #fundDetail .pf-table :is(th, td):first-child { padding-left: 0; text-align: left; }
#viewFund #fundDetail .pf-table thead th { padding-top: 0; font:500 calc(13px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-mute); border-bottom-color: var(--fp-line2); }
#viewFund #fundDetail .pf-table tbody th { font-weight: 500; color: var(--fp-sub); }
#viewFund #fundDetail .pf-table td { color: var(--fp-text); }
#viewFund #fundDetail .pf-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
#viewFund #fundDetail .pf-table .pf-p { display: block; font-weight: 600; }
#viewFund #fundDetail .pf-table .pf-a { display: block; margin-top: 1px; font-size:max(13px, calc(12.5px * var(--fp-z))); color: var(--fp-hint); }
#viewFund #fundDetail .pf-table .pf-tot { color: var(--fp-sub); }
#viewFund #fundDetail .pf-cov { min-width: 92px; }
#viewFund #fundDetail .pf-cov__v { display: block; font-weight: 600; }
#viewFund #fundDetail .pf-cov__bar { display: block; height: 3px; margin: 5px 0 0 auto; width: 72px; border-radius: 2px; background: var(--fp-track); overflow: hidden; }
#viewFund #fundDetail .pf-cov__bar i { display: block; height: 100%; margin-left: auto; background: var(--fp-bar); border-radius: 2px; }
#viewFund #fundDetail .pf-short, #viewFund #fundDetail .pf-table .pf-short-block { display: none; }

/* label ⟷ figure rows (policy, UNII, funding) */
#viewFund #fundDetail .pf-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0; padding: 2px 0; }
#viewFund #fundDetail .pf-kv__l { font:500 calc(13.5px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-mute); }
#viewFund #fundDetail .pf-kv__v { font:600 calc(14.5px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-text); text-align: right; }
#viewFund #fundDetail .pf-kv__v--mute { font-weight: 500; color: var(--fp-hint); }
#viewFund #fundDetail .pf-quote { margin: 2px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--fp-line3); font:400 calc(14px * var(--fp-z))/1.55 var(--fp-font); color: var(--fp-sub); }
/* the lower row: policy, then the funding cost — a step quieter */
#viewFund #fundDetail .pf-grid--low { padding-top: 22px; border-top: 1px solid var(--fp-line); }
/* Oct 9: each column stacks on its own (Sources then Policy | Earned vs paid then Funding cost). Lined up row
   by row, a short "Sources of each payment" left a tall empty block beside the Earned vs paid table. */
#viewFund #fundDetail .pf-stack { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
#viewFund #fundDetail .pf-stack > .pf-col--low { padding-top: 22px; border-top: 1px solid var(--fp-line); }
#viewFund #fundDetail .pf-col--quiet .pf-kv__v { font-weight: 500; color: var(--fp-sub); }
#viewFund #fundDetail .pf-foot p { margin: 0 0 4px; }
#viewFund #fundDetail .pf-foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--fp-line); font:400 calc(13px * var(--fp-z))/1.55 var(--fp-font); color: var(--fp-hint); }

@media (max-width: 1100px) {
  #viewFund #fundDetail .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  #viewFund #fundDetail .pf { gap: 24px; }
  #viewFund #fundDetail .pf-full { display: none; }
  #viewFund #fundDetail .pf-short { display: inline; }
  #viewFund #fundDetail .pf-table .pf-short-block { display: block; font-weight: 400; }
  #viewFund #fundDetail .pf-table--src .pf-tot { display: none; }
  #viewFund #fundDetail .pf-table--src :is(th, td) { padding-left: 8px; }
  #viewFund #fundDetail .pf-table { font-size:max(13px, calc(13px * var(--fp-z))); }
  #viewFund #fundDetail .pf-table th, #viewFund #fundDetail .pf-table td { padding-left: 9px; }
  #viewFund #fundDetail .pf-table .pf-a { font-size:max(13px, calc(12px * var(--fp-z))); }
  #viewFund #fundDetail .pf-cov { min-width: 0; }
  #viewFund #fundDetail .pf-cov__bar { display: none; }   /* the figure alone fits a phone; the table stays inside the screen */
  #viewFund #fundDetail .pf-table--earn :is(th, td) { padding-left: 7px; }
  #viewFund #fundDetail .pf-legend { gap: 6px 14px; }
  #viewFund #fundDetail .pf-big b { font-size:max(13px, calc(24px * var(--fp-z))); }
}

/* ═══ Option A: Tabs (Oct 2 2026, docs/mocks/fund-page-v3/A.html, fund-tabs.js) ════════════════════════════════════
   The owner picked A: "A, but i hate the white and grey text, stop doing that. keep all current info, this is just a
   refresh." The title row with Watch / Compare / Open at your broker; the fund's tags; price, yield and the payment as
   three big figures over one soft strip of the other header facts; What's happening; then six tabs. Every section of
   the earlier page is under a tab. Soft tinted surfaces (radius 18), no hairline grids, no boxes in boxes; amber mono
   caps section labels; cream figures, gold-taupe labels, never white or a cool grey. */
#viewFund #fundDetail.fp-a { gap: 26px; }
#viewFund #fundDetail.fp-a > .fund-viewbar { min-height: 56px; margin: 0; border-bottom: 0; }
#viewFund #fundDetail.fp-a > .fund-viewbar .viewbar__name { font:700 calc(24px * var(--fp-z))/1.1 var(--mono); letter-spacing: .12em; color: var(--fp-amber); }
#viewFund #fundDetail.fp-a > .fund-viewbar .viewbar__tag { font:500 calc(13px * var(--fp-z))/18px var(--mono); letter-spacing: .12em; color: var(--fp-sub); border-left-color: var(--fp-line2); }
#viewFund #fundDetail.fp-a > .fund-viewbar .fund-detail__back { height: 40px; padding: 0 16px; border-color: var(--fp-line2); color: var(--fp-text); font-size:max(13px, calc(14.5px * var(--fp-z))); }

/* the title row's actions: Watch and Compare as outline pills, Open at your broker the one amber pill */
#viewFund #fundHero { gap: 10px; }
#viewFund #fundHero .fp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#viewFund .fp-act {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px; border: 1px solid var(--fp-line2); border-radius: 20px;
  background: transparent; box-shadow: none; font:500 calc(14.5px * var(--fp-z))/1 var(--fp-font); color: var(--fp-text); white-space: nowrap; cursor: pointer;
}
#viewFund .fp-act:hover { border-color: var(--fp-line3); background: var(--fp-hover); }
#viewFund .fp-act:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; }
#viewFund .fp-act[aria-disabled="true"] { opacity: .55; cursor: default; }
#viewFund .fp-act svg { flex: none; color: var(--fp-amber); }
#viewFund .fp-watch .fp-watch__on, #viewFund .fp-watch.is-on .fp-watch__off { display: none; }
#viewFund .fp-watch.is-on .fp-watch__on { display: inline; }
#viewFund .fp-watch.is-on { border-color: var(--fp-amber); }
#viewFund #fundHero .brk-strip--fund > button { height: 40px; padding: 0 20px; font-size:max(13px, calc(14.5px * var(--fp-z))); color: var(--fp-text); border-color: var(--fp-line2); }
#viewFund #fundHero .brk-strip--fund > button:first-child { color: var(--fp-ink); border-color: var(--fp-amber); }

/* the tags: the kind, the level, the category, the sponsor, the schedule, the start year */
#viewFund .fp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -12px; }
#viewFund .fp-tags:empty { display: none; }
#viewFund .fp-tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 13px; border-radius: 16px; background: var(--fp-surface2);
  font:500 calc(14px * var(--fp-z))/1.2 var(--fp-font); color: var(--fp-sub);
}
#viewFund .fp-tag--equity { color: var(--fp-amber-t); background: rgba(224, 168, 46, .13); }
#viewFund .fp-tag--income { color: var(--fp-inc); background: color-mix(in srgb, var(--fp-inc) 12%, transparent); }
#viewFund .fp-tag--reit { color: var(--fp-special); background: color-mix(in srgb, var(--fp-special) 12%, transparent); }
#viewFund .fp-lvl { display: inline-block; padding: 1px 6px; border: 1px solid var(--fp-lvl-b); border-radius: 5px; font:600 calc(13px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-text); }

/* the big three, then one soft strip of the other header facts */
#viewFund #fundDetail.fp-a > .fund-hero { display: flex; flex-direction: column; gap: 22px; }
#viewFund .fp-big { display: flex; flex-wrap: wrap; gap: 20px 64px; }
#viewFund .fp-big:empty { display: none; }
#viewFund .fp-big__l { font:500 calc(15px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-big__v { margin-top: 6px; font:650 calc(50px * var(--fp-z))/1.05 var(--fp-font); letter-spacing: -.03em; color: var(--fp-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewFund .fp-big--yield .fp-big__v { color: var(--fp-inc); }
#viewFund .fp-big__z { color: var(--fp-hint); }
#viewFund .fp-big__s { margin-top: 8px; font:400 calc(15px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-big__s .up { color: var(--fp-inc); }
#viewFund .fp-big__s .down { color: var(--fp-cut); }
#viewFund .fp-big__s .flat { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fund-hero__stats {
  grid-template-columns: repeat(7, auto); gap: 18px 28px; padding: 20px 28px; border-radius: 18px; background: var(--fp-surface);
}
#viewFund #fundDetail.fp-a .hero-stat__label { font-size:max(13px, calc(14px * var(--fp-z))); color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .hero-stat__value { margin-top: 6px; font-size:max(13px, calc(20px * var(--fp-z))); color: var(--fp-text); }
#viewFund #fundDetail.fp-a .hero-stat__value.up { color: var(--fp-inc); }
#viewFund #fundDetail.fp-a .hero-stat__value.down { color: var(--fp-cut); }
#viewFund #fundDetail.fp-a .hero-stat__value.stat-risk { margin-top: 8px; font-size:max(13px, calc(14px * var(--fp-z))); color: var(--fp-text); border-color: var(--fp-lvl-b); }
#viewFund #fundDetail.fp-a .hero-stat__sub { margin-top: 5px; font-size:max(13px, calc(13.5px * var(--fp-z))); color: var(--fp-sub); white-space: nowrap; }

/* What's happening: an amber mono caps label beside one line of words */
#viewFund #fundDetail.fp-a .fund-situation { margin-top: -4px; gap: 6px 24px; }
#viewFund #fundDetail.fp-a .fund-situation__label { font:650 calc(13px * var(--fp-z))/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fp-amber-t); }
#viewFund #fundDetail.fp-a .fund-situation__dot { width: 14px; height: 2px; border-radius: 1px; }
#viewFund #fundDetail.fp-a .fund-situation__text { font-size:max(13px, calc(16px * var(--fp-z))); line-height: 1.55; color: var(--fp-text); }

/* the tabs: pills, the open one on the soft surface with its amber dot; NAV & discount set apart as secondary */
#viewFund .fp-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 -4px; }
#viewFund .fp-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 23px;
  background: transparent; font:500 calc(16px * var(--fp-z))/1 var(--fp-font); color: var(--fp-sub); cursor: pointer; white-space: nowrap;
}
#viewFund .fp-tab:hover { color: var(--fp-text); background: var(--fp-hover); }
#viewFund .fp-tab[aria-selected="true"] { background: var(--fp-surface2); color: var(--fp-text); font-weight: 600; }
#viewFund .fp-tab[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-amber); box-shadow: var(--fp-glow); }
#viewFund .fp-tab:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 2px; }
#viewFund .fp-tabs__sep { width: 1px; height: 26px; margin: 0 12px; background: var(--fp-line2); }
#viewFund .fp-tab__sec { font:600 calc(13px * var(--fp-z))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-hint); }

/* the panels and their surfaces: one soft tinted card per section, nothing boxed inside */
#viewFund .fp-panel { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#viewFund .fp-panel[hidden] { display: none; }
#viewFund .fp-panel:focus { outline: none; }
#viewFund #fundDetail .fp-panel :is(.card, .fx-pane) { padding: 24px 28px 26px; border: 0; border-radius: 18px; background: var(--fp-surface); }
#viewFund #fundDetail .fp-panel .fp-slot { display: contents; }
#viewFund #fundDetail .fp-panel :is(.card.fund-card--none) { display: none; }

/* section labels: amber mono caps with the short glowing tick, no rule under them */
#viewFund #fundDetail.fp-a :is(.card__header, .fx-pane > .cpane__bar) { min-height: 0; margin: 0 0 18px; padding: 0; border-bottom: 0; background: transparent !important; }
#viewFund #fundDetail.fp-a :is(.card__header h2, .fx-pane .cpane__title, .fp-h),
#viewFund #fundDetail.fp-a .fund-quiet > .card__header h2 {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font:650 calc(13px * var(--fp-z))/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fp-amber-t); white-space: nowrap;
}
#viewFund #fundDetail.fp-a :is(.card__header h2, .fx-pane .cpane__title, .fp-h)::before,
#viewFund #fundDetail.fp-a .fund-quiet > .card__header h2::before,
#viewFund #fundDetail.fp-a .fx-pane.pn > .cpane__bar .cpane__title::before {
  content: ""; display: block; flex: none; width: 14px; height: 2px; margin: 0; border: 0; border-radius: 1px; transform: none;
  background: var(--fp-amber); box-shadow: var(--fp-glow); opacity: 1;
}
#viewFund #fundDetail.fp-a :is(.card__header .chart-meta, .fx-pane .cpane__meta) { font-size:max(13px, calc(13.5px * var(--fp-z))); color: var(--fp-hint); }
#viewFund #fundDetail.fp-a .fp-h { margin-bottom: 16px; }
#viewFund #fundDetail.fp-a :is(.cap-trend__keybtn, .fx-more, .fx-cta) { border-color: var(--fp-line2); color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fx-cta { background: transparent; color: var(--fp-text); border: 1px solid var(--fp-line2); border-radius: 15px; }
#viewFund #fundDetail.fp-a .fx-cta:hover { border-color: var(--fp-amber); }
#viewFund #fundDetail.fp-a .cap-trend__keypop { white-space: normal; background: #14110b; border-color: var(--fp-line2); color: var(--fp-text); }
body[data-theme="light"] #viewFund #fundDetail.fp-a .cap-trend__keypop { background: #fffaf0; }
#viewFund #fundDetail.fp-a :is(.cap-trend__key-title, .cap-trend__key-p b) { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .cap-trend__key-p { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fx-pane .pn-tg { border-color: var(--fp-line2); color: var(--fp-sub); }

/* ── Overview ── */
#viewFund .fp-ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 24px; align-items: start; }
#viewFund .fp-ov__main, #viewFund .fp-ov__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* the price chart: about 220px, the TradingView chart with its own date ranges, or the quote feed line with the range pills */
#viewFund #fundDetail.fp-a .fund-chart-wrap--price { height: 420px; border-radius: 10px; overflow: hidden; }   /* 520px before the redesign, 230px after: too short to read */
#viewFund #fundDetail.fp-a .fund-chart-wrap--price canvas { padding: 6px 0 0; }
#viewFund #fundDetail.fp-a .fund-chart-tv { background: var(--fp-tv-bg); }
#viewFund #fundDetail.fp-a .fund-chart-card .card__header { margin-bottom: 14px; }
#viewFund #fundDetail.fp-a .chart-source { display: none; }
#viewFund #fundDetail.fp-a .chart-source-btn { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .chart-source-btn.is-active { color: var(--fp-text) !important; box-shadow: inset 0 0 0 1px var(--fp-line3); }
#viewFund #fundDetail.fp-a :is(.chart-controls .chart-btn, .nav-range button) { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a :is(.chart-controls .chart-btn, .nav-range button).is-active { color: var(--fp-ink) !important; }
#viewFund .fp-chart-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; font:400 calc(13.5px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-hint); }
#viewFund .fp-chart-foot[hidden] { display: none; }

/* the payments of the last 5 years */
#viewFund .fp-paychart[hidden] { display: none !important; }
#viewFund .fp-paychart .card__header { justify-content: space-between; }
#viewFund .fp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font:500 calc(13.5px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-legend span { display: inline-flex; align-items: center; gap: 7px; }
#viewFund .fp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
#viewFund .fp-dot--steady, #viewFund .fp-bar--steady { background: var(--fp-steady); }
#viewFund .fp-dot--raise, #viewFund .fp-bar--raise { background: var(--fp-raise); }
#viewFund .fp-dot--cut, #viewFund .fp-bar--cut { background: var(--fp-cut); }
#viewFund .fp-dot--special, #viewFund .fp-bar--special { background: var(--fp-special); }
#viewFund .fp-bars { position: relative; padding: 4px 64px 0 0; }
#viewFund .fp-bars__plot { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
#viewFund .fp-bar { display: block; flex: 1 1 0; min-width: 2px; max-width: 34px; border-radius: 3px 3px 0 0; }
#viewFund .fp-bar.is-upcoming { opacity: .4; }
#viewFund .fp-bar.is-over { border-top: 2px dashed var(--fp-text); }
#viewFund .fp-bars__y { position: absolute; top: 0; right: 0; height: 144px; display: flex; flex-direction: column; justify-content: space-between; font:500 calc(13px * var(--fp-z))/1 var(--fp-font); color: var(--fp-hint); text-align: right; }
#viewFund .fp-bars__x { display: flex; gap: 3px; height: 22px; margin-top: 8px; font:500 calc(13px * var(--fp-z))/1 var(--fp-font); color: var(--fp-hint); }
#viewFund .fp-bars__x span { position: relative; flex: 1 1 0; min-width: 2px; max-width: 34px; }
#viewFund .fp-bars__x b { position: absolute; top: 0; left: 0; font-weight: 500; white-space: nowrap; }
#viewFund #fundDetail .fp-paychart__stats { margin-top: 18px; }
#viewFund .fp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 0; border: 0; background: none; font:600 calc(14px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-amber-t); cursor: pointer; }
#viewFund .fp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewFund .fp-link:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 3px; border-radius: 4px; }

/* Payment essentials (the Distribution record) */
#viewFund #fundDetail .fp-ess .card__header { flex-wrap: wrap; }
#viewFund #fundDetail .fp-ess .card__header .chart-meta { flex: 1 1 100%; order: 3; }
#viewFund .fp-ess__yield { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font:400 calc(15px * var(--fp-z))/1.4 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-ess__yield b { font:650 calc(36px * var(--fp-z))/1.05 var(--fp-font); letter-spacing: -.02em; color: var(--fp-inc); }
#viewFund #fundDetail .fp-ess .payrec__meta { color: var(--fp-text); font-size:max(13px, calc(14.5px * var(--fp-z))); }
#viewFund #fundDetail .fp-ess .payrec__meta--up { color: var(--fp-raise); }
#viewFund #fundDetail .fp-ess .payrec__body > .payrec__meta:last-child { color: var(--fp-hint); font-size:max(13px, calc(13px * var(--fp-z))); }
#viewFund #fundDetail .payrec__badge--ok { color: var(--fp-inc); }
#viewFund #fundDetail :is(.payrec__seg--inc, .payrec__dot--inc) { background: var(--fp-inc); }
#viewFund #fundDetail :is(.payrec__seg--gain, .payrec__dot--gain) { background: var(--fp-gain); }
#viewFund #fundDetail :is(.payrec__seg--roc, .payrec__dot--roc) { background: var(--fp-roc); }
#viewFund .fp-kvs { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#viewFund .fp-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#viewFund .fp-kv__l { font:400 calc(14.5px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-kv__v { font:600 calc(15px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-text); text-align: right; }
#viewFund .fp-kv__v small { display: block; font:400 calc(13px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-hint); }
#viewFund .fp-ess__nii { margin: 18px 0 0; font:400 calc(14.5px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-ess__nii b { margin-right: 6px; font:650 calc(22px * var(--fp-z))/1.1 var(--fp-font); color: var(--fp-text); }
#viewFund .fp-ess__nii small { display: block; margin-top: 4px; font-size:max(13px, calc(13px * var(--fp-z))); color: var(--fp-hint); }

/* your position */
#viewFund .fp-pos__none { margin: 0; font:400 calc(15px * var(--fp-z))/1.55 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-pos__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#viewFund .fp-pos__acts .fp-act { height: 36px; padding: 0 15px; font-size:max(13px, calc(14px * var(--fp-z))); }
#viewFund .fp-pos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
#viewFund .fp-pos__c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#viewFund .fp-pos__l { font:400 calc(13.5px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-pos__v { font:600 calc(18px * var(--fp-z))/1.2 var(--fp-font); color: var(--fp-text); }
#viewFund .fp-pos__v small { font-size:max(13px, calc(13.5px * var(--fp-z))); font-weight: 500; }
#viewFund .fp-pos__v.is-up, #viewFund .fp-pos__v.is-inc { color: var(--fp-inc); }
#viewFund .fp-pos__v.is-down { color: var(--fp-cut); }
#viewFund .fp-pos__foot { margin: 14px 0 0; font:400 calc(13px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-hint); }

/* the fund at a glance */
#viewFund #fundDetail .fp-glance[hidden] { display: none; }
#viewFund .fp-glance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px 32px; }
#viewFund .fp-glance__i { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#viewFund .fp-glance__l { font:400 calc(14px * var(--fp-z))/1.3 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-glance__v { font:600 calc(22px * var(--fp-z))/1.2 var(--fp-font); letter-spacing: -.01em; color: var(--fp-text); }
#viewFund .fp-glance__v--kind { color: var(--fp-amber-t); }
#viewFund .fp-glance__s { font:400 calc(13.5px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-hint); }

/* more on the fund: one line per tab */
#viewFund .fp-more__list { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
#viewFund .fp-more__row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 20px; align-items: baseline; gap: 6px 20px; width: 100%; padding: 13px 12px;
  border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; font-family: var(--fp-font);
}
#viewFund .fp-more__row:hover { background: var(--fp-hover); }
#viewFund .fp-more__row:focus-visible { outline: 2px solid var(--fp-amber); outline-offset: 0; }
#viewFund .fp-more__k { font:600 calc(15px * var(--fp-z))/1.35 var(--fp-font); color: var(--fp-text); }
#viewFund .fp-more__k small { margin-left: 6px; font:600 calc(13px * var(--fp-z))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-hint); }
#viewFund .fp-more__v { font:400 calc(14.5px * var(--fp-z))/1.45 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-more__go { font:500 calc(20px * var(--fp-z))/1 var(--fp-font); color: var(--fp-amber-t); text-align: right; }

/* the similar funds on the Overview show every column (discount, vs 3Y, NAV rate, leverage, expense, NAV TR 1Y) and the
   "Where X sits among these N" line, as before the redesign hid them; the table scrolls sideways on a narrow screen
   (.fx-scroll, fundextra.css) */
#viewFund [data-fpslot="peers-overview"] #fxPeers .fx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* the tables (the Universe rows): no grid lines, a soft band on the fund's own row */
#viewFund #fundDetail.fp-a .cptable :is(th, td) { border-color: transparent !important; }
#viewFund #fundDetail.fp-a .cptable thead th { background: transparent; color: var(--fp-hint); font-family: var(--mono); letter-spacing: .12em; }
#viewFund #fundDetail.fp-a .cptable tbody td { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .cptable tbody tr:hover td { background: var(--fp-hover); }
#viewFund #fundDetail.fp-a .cptable tbody tr.fx-self td { background: rgba(224, 168, 46, .09); }
#viewFund #fundDetail.fp-a .fx-table tbody td:first-child { background: var(--fp-card-solid); }
#viewFund #fundDetail.fp-a .fx-table tbody tr:hover td:first-child { background: linear-gradient(var(--fp-hover), var(--fp-hover)), var(--fp-card-solid); }
#viewFund #fundDetail.fp-a .fx-table tbody tr.fx-self td:first-child { background: linear-gradient(rgba(224, 168, 46, .09), rgba(224, 168, 46, .09)), var(--fp-card-solid); }
#viewFund #fundDetail.fp-a .fx-scroll { border-top: 0; }
#viewFund #fundDetail.fp-a .fx-table tbody td.fx-disc { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a :is(.fx-basis, .fx-sit) { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a :is(.fx-basis__l, .fx-sit__h) { color: var(--fp-amber-t); font-family: var(--mono); font-size:max(13px, calc(11.5px * var(--fp-z))); letter-spacing: .13em; text-transform: uppercase; }
#viewFund #fundDetail.fp-a .fx-note { color: var(--fp-hint); }

/* ── Payments ── */
#viewFund .fp-dist__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
#viewFund .fp-dist__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#viewFund #fundDetail.fp-a .fp-dist .dist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0; }
#viewFund #fundDetail.fp-a .fp-dist .dist-log { padding: 0; }
#viewFund #fundDetail.fp-a .fp-dist .dist-legend i.amber { background: var(--fp-steady); }
#viewFund #fundDetail.fp-a .fp-dist .dist-legend i.green { background: var(--fp-raise); }
#viewFund #fundDetail.fp-a .fp-dist .dist-legend i.red { background: var(--fp-cut); }
#viewFund #fundDetail.fp-a .fp-dist .dist-legend i.grey { background: var(--fp-special); opacity: 1; }
#viewFund #fundDetail.fp-a .dist-legend { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .dist-log__h { font:650 calc(13px * var(--fp-z))/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-amber-t); margin-bottom: 10px; }
#viewFund #fundDetail.fp-a .dist-log__row { border-bottom: 0; padding: 7px 0; font-size:max(13px, calc(14.5px * var(--fp-z))); }
#viewFund #fundDetail.fp-a .dist-log__d { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .dist-log__a { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .dist-log__row.pos :is(.dist-log__w, .dist-log__p) { color: var(--fp-raise); }
#viewFund #fundDetail.fp-a .dist-log__row.neg :is(.dist-log__w, .dist-log__p) { color: var(--fp-cut); }
#viewFund #fundDetail.fp-a .dist-log__row--special .dist-log__w { color: var(--fp-special); }
#viewFund #fundDetail.fp-a .dist-log__row--extra .dist-log__w { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a :is(.dist-stat__l, .cap-trend__l) { color: var(--fp-sub); font-size:max(13px, calc(14px * var(--fp-z))); }
#viewFund #fundDetail.fp-a :is(.dist-stat__v, .cap-trend__v) { color: var(--fp-text); }
#viewFund #fundDetail.fp-a :is(.dist-stat__v, .cap-trend__v).pos { color: var(--fp-raise); }
#viewFund #fundDetail.fp-a :is(.dist-stat__v, .cap-trend__v).neg { color: var(--fp-cut); }
#viewFund #fundDetail.fp-a .dist-stat__s { color: var(--fp-hint); }

/* ── Holdings, News & events, Sources: the same calm rows ── */
#viewFund #fundDetail.fp-a .fund-holding-row__bar i, #viewFund #fundDetail.fp-a .fund-exp-row__bar i { background: var(--fp-amber); opacity: .75; }
#viewFund #fundDetail.fp-a :is(.fund-holding-row__tk, .fund-holding-row__cat, .fund-exp__note) { color: var(--fp-hint); }
#viewFund #fundDetail.fp-a :is(.fund-exp-row__l) { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fund-exp__h { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .fund-holding-foot { color: var(--fp-hint); }
#viewFund #fundDetail.fp-a .fx-yr { border-top: 0; }
#viewFund #fundDetail.fp-a .fx-yr__h { font:650 calc(13px * var(--fp-z))/22px var(--mono); letter-spacing: .14em; color: var(--fp-amber-t); }
#viewFund #fundDetail.fp-a .fx-ev__d { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fx-tag { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fx-ev__t { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .fx-src { color: var(--fp-hint); }
#viewFund #fundDetail.fp-a .fx-tl .fx-note { border-top: 0; }
#viewFund #fundDetail.fp-a :is(.fx-steady, .fx-pend, .fx-empty) { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .pf-table :is(th, td) { border-bottom-color: transparent; }
#viewFund #fundDetail.fp-a .pf-table thead th { color: var(--fp-hint); border-bottom-color: var(--fp-line); }
#viewFund #fundDetail.fp-a .pf-table tbody tr:nth-child(odd) :is(th, td) { background: rgba(224, 168, 46, .025); }
#viewFund #fundDetail.fp-a :is(.pf-grid--low, .pf-stack > .pf-col--low, .pf-ytd, .pf-foot) { border-top-color: transparent; }
#viewFund #fundDetail.fp-a .pf-lab--quiet { color: var(--fp-amber-t); opacity: .8; }
#viewFund #fundDetail.fp-a .pf-link { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .pf-link:hover { color: var(--fp-text); }

/* ── NAV & discount (secondary) ── */
#viewFund .fp-secnote { margin: 0; font:400 calc(15px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-empty-tab { margin: 0; padding: 22px 26px; border-radius: 18px; background: var(--fp-surface); font:400 calc(15px * var(--fp-z))/1.5 var(--fp-font); color: var(--fp-sub); }
#viewFund .fp-empty-tab[hidden] { display: none; }
#viewFund #fundDetail.fp-a .fund-quiet :is(.dist-stat__v, .cap-trend__v), #viewFund #fundDetail.fp-a #fundNavStats .dist-stat__v { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .fund-quiet :is(.dist-stat__v, .cap-trend__v):is(.pos, .neg), #viewFund #fundDetail.fp-a #fundNavStats .dist-stat__v:is(.pos, .neg) { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .fp-panel--secondary :is(.dist-stats, .cap-trend__stats) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#viewFund #fundDetail.fp-a .fp-navchart .dist-legend i.grey { background: var(--fp-hint); }
#viewFund #fundDetail.fp-a .fund-kv { gap: 0 40px; }
#viewFund #fundDetail.fp-a .fund-kv__label { color: var(--fp-sub); }
#viewFund #fundDetail.fp-a .fund-kv__value { color: var(--fp-text); }
#viewFund #fundDetail.fp-a .fund-kv__own { color: var(--fp-hint); }
#viewFund #fundDetail.fp-a .fp-basics .fund-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#viewFund #fundDetail.fp-a :is(.fund-empty, .fund-detail__loading) { color: var(--fp-sub); }

/* ── narrower screens ── */
@media (max-width: 1280px) {
  #viewFund #fundDetail.fp-a .fund-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #viewFund .fp-ov { grid-template-columns: minmax(0, 1fr) 340px; }
  #viewFund #fundDetail.fp-a .fp-basics .fund-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  #viewFund .fp-ov { grid-template-columns: minmax(0, 1fr); }
  #viewFund .fp-dist__grid { grid-template-columns: minmax(0, 1fr); }
  #viewFund #fundDetail.fp-a .fp-panel--secondary :is(.dist-stats, .cap-trend__stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #viewFund #fundDetail.fp-a { gap: 20px; }
  #viewFund #fundDetail.fp-a > .fund-viewbar { padding: 6px 0 0; }
  #viewFund #fundDetail.fp-a > .fund-viewbar .viewbar__name { font-size:max(13px, calc(20px * var(--fp-z))); }
  #viewFund #fundHero { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  #viewFund #fundHero .fp-actions { gap: 8px; }
  #viewFund .fp-act, #viewFund #fundHero .brk-strip--fund > button { height: 38px; padding: 0 14px; font-size:max(13px, calc(14px * var(--fp-z))); }
  #viewFund .fp-tags { margin-top: -6px; gap: 6px; }
  #viewFund .fp-tag { min-height: 30px; padding: 0 11px; font-size:max(13px, calc(13.5px * var(--fp-z))); }
  #viewFund .fp-big { gap: 16px 28px; }
  #viewFund .fp-big__i { min-width: 0; }
  #viewFund .fp-big--pays { flex: 1 1 100%; }
  #viewFund .fp-big__v { font-size:max(13px, calc(36px * var(--fp-z))); }
  #viewFund .fp-big__s { font-size:max(13px, calc(14px * var(--fp-z))); }
  #viewFund #fundDetail.fp-a .fund-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 18px 18px; }
  #viewFund #fundDetail.fp-a .hero-stat__value { font-size:max(13px, calc(18px * var(--fp-z))); }
  #viewFund #fundDetail.fp-a .hero-stat__sub { white-space: normal; }
  #viewFund #fundDetail.fp-a .fund-situation { gap: 6px; }
  #viewFund #fundDetail.fp-a .fund-situation__text { font-size:max(13px, calc(15px * var(--fp-z))); }
  /* six tabs as three rows of two even pills, NAV & discount last */
  #viewFund .fp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #viewFund .fp-tab { justify-content: center; height: 42px; padding: 0 10px; font-size:max(13px, calc(15px * var(--fp-z))); background: var(--fp-surface); }
  #viewFund .fp-tabs__sep { display: none; }
  #viewFund .fp-tab--secondary { flex-direction: column; justify-content: center; gap: 3px; line-height: 1.1; }
  #viewFund .fp-tab--secondary[aria-selected="true"]::after { position: absolute; top: 50%; right: 14px; margin-top: -3px; }
  #viewFund #fundDetail .fp-panel :is(.card, .fx-pane) { padding: 18px 16px 20px; border-radius: 16px; }
  #viewFund #fundDetail.fp-a :is(.card__header h2, .fx-pane .cpane__title, .fp-h) { white-space: normal; }
  #viewFund #fundDetail.fp-a .chart-header__right { flex-wrap: wrap; margin-left: 0; gap: 8px; }
  #viewFund #fundDetail.fp-a .fund-chart-wrap--price { height: 300px; }
  #viewFund .fp-bars { padding-right: 52px; }
  #viewFund .fp-bars__plot, #viewFund .fp-bars__x { gap: 1px; }
  #viewFund .fp-bars__plot { height: 120px; }
  #viewFund .fp-bars__y { height: 124px; }
  #viewFund .fp-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  #viewFund .fp-glance__v { font-size:max(13px, calc(19px * var(--fp-z))); }
  #viewFund .fp-more__list { margin: 0 -8px; }
  #viewFund .fp-more__row { grid-template-columns: minmax(0, 1fr) 16px; padding: 12px 8px; }
  #viewFund .fp-more__k { grid-column: 1; grid-row: 1; }
  #viewFund .fp-more__v { grid-column: 1 / -1; grid-row: 2; }
  #viewFund .fp-more__go { grid-column: 2; grid-row: 1; }
  #viewFund #fundDetail.fp-a .fp-dist .dist-stats, #viewFund #fundDetail.fp-a .fp-panel--secondary :is(.dist-stats, .cap-trend__stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewFund #fundDetail.fp-a .fp-basics .fund-kv { grid-template-columns: minmax(0, 1fr); }
  #viewFund .fp-pos__grid { gap: 14px 16px; }
}

/* Payments tab header (Oct 9): the range buttons sit beside the title, and the payment summary straight after
   them, instead of being pushed to the middle of the row by an automatic margin. */
#viewFund #fpPanel-payments .fp-dist > .card__header { justify-content: flex-start; }
#viewFund #fpPanel-payments .fp-dist > .card__header .nav-range { margin-left: 18px; }
#viewFund #fpPanel-payments .fp-dist > .card__header #fundDistMeta { margin-left: 6px; flex: 1 1 auto; text-align: left; }

/* "Payments, last 5 years" (Oct 9): the bars were capped at 34px, so a quarterly fund's 21 bars filled under half
   of a wide card and left the rest empty. Wider bars, spread across the whole plot; the date labels follow them. */
#viewFund .fp-bars__plot, #viewFund .fp-bars__x { justify-content: space-between; }
#viewFund .fp-bar, #viewFund .fp-bars__x span { max-width: 56px; }