/* fundextra.css — "Compared with similar funds" and "What changed" on the fund page (fundextra.js).
   Chrome is the dashboard pane's (cockpit.css .cpane / .cpane__bar / .cpane__title) and the peer rows are
   the Universe table's (.cptable + window.CPRow cells), so only spacing, the pinned row, the rank line and
   the timeline are set here. Event-kind colors are the News page's (news.css), restated for this page;
   green and red only for a raise and a cut, as everywhere else on the site. Loaded before theme-light.css. */

#viewFund .fx-pane {
  --fx-line: var(--soft-line, rgba(255, 255, 255, .09));
  --fx-line-2: color-mix(in srgb, var(--text) 6%, transparent);
  --fx-merger: #f0c060; --fx-rights: #9ccbff; --fx-tender: #6ee7b7; --fx-liquidation: #faaec6;
  --fx-conversion: #cdb0ff; --fx-delisting: #ffb088; --fx-discount: #a9b8ff; --fx-schedule: var(--accent-soft, #f2c14e);
  --fx-neutral: var(--text-2); --fx-raise: var(--green); --fx-cut: var(--red-bright, var(--red));
  display: block; min-width: 0; margin: 0;
  border: 1px solid var(--fx-line); border-radius: var(--radius, 12px); background: var(--bg);
}
#viewFund .fx-pane[hidden] { display: none; }
#viewFund .fx-pane > .cpane__bar {
  height: auto; min-height: 42px; padding: 6px 10px 6px 14px; gap: 6px 12px; flex-wrap: wrap;
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
}
#viewFund .fx-pane .cpane__title { margin: 0; font-size:13px; line-height: 1.3; }
#viewFund .fx-pane .cpane__meta { font-size:13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* the one action in the area, drawn like the Research "Analyze" button */
#viewFund .fx-cta {
  margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: #e0a82e; color: #1a1304;
  font:650 13px/1 var(--sans); letter-spacing: 0; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: filter .13s ease, transform .1s ease;
}
#viewFund .fx-cta:hover { filter: brightness(1.07); }
#viewFund .fx-cta:active { transform: translateY(1px); }
#viewFund .fx-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── A. peers ── */
#viewFund .fx-basis { margin: 0; padding: 10px 14px 9px; font:400 13.5px/1.45 var(--sans); color: var(--text-2); }
#viewFund .fx-basis__l {
  margin-right: 6px; font:600 13px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
#viewFund .fx-scroll { overflow-x: auto; border-top: 1px solid var(--fx-line); }
#viewFund .fx-table { min-width: 100%; width: max-content; }
#viewFund .fx-table thead th { position: relative; top: auto; background: var(--bg-raised); cursor: pointer; }
#viewFund .fx-table thead th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#viewFund .fx-table tbody td { font-size:13px; padding: 6px 12px; border-bottom-color: var(--fx-line-2); }
#viewFund .fx-table tbody tr:last-child td { border-bottom: 0; }
#viewFund .fx-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#viewFund .fx-table .cp-nm { max-width: 230px; }
/* the ticker stays in view when the table scrolls sideways (phones, Large text) */
#viewFund .fx-table tbody td:first-child, #viewFund .fx-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
#viewFund .fx-table tbody td:first-child { background: var(--bg); }
#viewFund .fx-table tbody tr:hover td:first-child { background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03)), var(--bg); }
#viewFund .fx-table tbody tr.fx-self td:first-child { background: linear-gradient(var(--accent-bg, rgba(224, 168, 46, .12)), var(--accent-bg, rgba(224, 168, 46, .12))), var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
/* this fund, pinned on top */
#viewFund .fx-table tbody tr.fx-self { background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: inset 3px 0 0 var(--accent); cursor: default; }
#viewFund .fx-table tbody tr.fx-self td { border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); font-weight: 600; }
#viewFund .fx-table tbody tr.fx-self .cp-nm { color: var(--text); }
/* the Screener's record cell, lifted to readable contrast */
#viewFund .fx-table td.fx-rec { text-align: left; font-family: var(--sans); }
#viewFund .fx-table td.fx-rec .rec-cut, #viewFund .fx-table td.fx-rec .rec-yrs { color: var(--text-2); }

#viewFund .fx-sit {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 11px 14px;
  border-top: 1px solid var(--fx-line); font:400 13.5px/1.45 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
#viewFund .fx-sit__h { flex: 0 0 100%; font:600 13px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#viewFund .fx-sit__i b { font-weight: 600; color: var(--text); }
#viewFund .fx-sit__sep { color: var(--text-3); }
#viewFund .fx-note { margin: 0; padding: 0 14px 12px; font:400 13px/1.45 var(--sans); color: var(--text-3); }
#viewFund .fx-empty { padding: 14px; font:400 14px/1.5 var(--sans); color: var(--text-2); }

/* ── B. what changed ── */
#viewFund .fx-tl { padding: 2px 14px 0; }
#viewFund .fx-tl .fx-note { padding: 10px 0 12px; border-top: 1px solid var(--fx-line); }
#viewFund .fx-years, #viewFund .fx-evl { list-style: none; margin: 0; padding: 0; }
#viewFund .fx-yr { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-top: 1px solid var(--fx-line); }
#viewFund .fx-yr:first-child { border-top: 0; }
#viewFund .fx-yr__h { margin: 0; padding: 10px 0 0; font:700 13px/22px var(--mono); letter-spacing: .06em; color: var(--accent-soft, var(--accent)); font-variant-numeric: tabular-nums; }
#viewFund .fx-ev {
  display: grid; grid-template-columns: 4.4em 9em minmax(0, 1fr) max-content; align-items: baseline; gap: 4px 12px;
  padding: 9px 0; border-top: 1px solid var(--fx-line-2);
}
#viewFund .fx-evl > .fx-ev:first-child { border-top: 0; }
#viewFund .fx-ev__d { font:500 13px/22px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
#viewFund .fx-tag {
  --k: var(--fx-neutral);
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font:600 13px/1 var(--sans);
}
#viewFund .fx-tags { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#viewFund .fx-tag--raise { --k: var(--fx-raise); }
#viewFund .fx-tag--cut { --k: var(--fx-cut); }
#viewFund .fx-tag--schedule { --k: var(--fx-schedule); }
#viewFund .fx-tag--discount { --k: var(--fx-discount); }
#viewFund .fx-tag--merger { --k: var(--fx-merger); }
#viewFund .fx-tag--rights { --k: var(--fx-rights); }
#viewFund .fx-tag--tender { --k: var(--fx-tender); }
#viewFund .fx-tag--liquidation, #viewFund .fx-tag--status { --k: var(--fx-liquidation); }
#viewFund .fx-tag--conversion, #viewFund .fx-tag--name { --k: var(--fx-conversion); }
#viewFund .fx-tag--delisting { --k: var(--fx-delisting); }
#viewFund .fx-ev__t { grid-column: 3; font:400 14px/1.45 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
#viewFund .fx-src { grid-column: 4; font:500 13px/22px var(--sans); color: var(--text-2); white-space: nowrap; text-decoration: none; }
#viewFund a.fx-src { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent); text-underline-offset: 3px; }
#viewFund a.fx-src:hover { color: var(--text); text-decoration-color: currentColor; }
#viewFund a.fx-src:focus-visible, #viewFund .fx-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#viewFund .fx-src--none { color: var(--text-3); }
#viewFund .fx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#viewFund .fx-steady { margin: 10px 0 4px; font:400 14px/1.45 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
#viewFund .fx-pendrow { margin: 8px 0 2px; font:400 13.5px/1.45 var(--sans); color: var(--text-2); }
#viewFund .fx-morerow { padding: 4px 0 12px 58px; }
#viewFund .fx-more {
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .16)); background: var(--surface-2); color: var(--text-2);
  font:600 13px/1.3 var(--sans); text-align: left;
}
#viewFund .fx-more:hover { color: var(--text); border-color: var(--accent); }
#viewFund .fx-tl .fx-empty { padding: 12px 0; }

/* ── reader text size (the fund page is not zoomed; cockpit.css scales .cptable cells and pane titles) ── */
body[data-text-size="large"] #viewFund .fx-table tbody td { font-size:14px; }
body[data-text-size="large"] #viewFund .fx-pane .cpane__title { font-size:14px; }
body[data-text-size="large"] #viewFund :is(.fx-basis, .fx-sit, .fx-ev__t, .fx-steady) { font-size:15px; }
body[data-text-size="large"] #viewFund :is(.fx-note, .fx-src, .fx-ev__d, .fx-tag, .cpane__meta, .fx-yr__h) { font-size:14px; }
body[data-text-size="xlarge"] #viewFund .fx-table tbody td { font-size:15px; }
body[data-text-size="xlarge"] #viewFund .fx-pane .cpane__title { font-size:15.5px; }
body[data-text-size="xlarge"] #viewFund :is(.fx-basis, .fx-sit, .fx-ev__t, .fx-steady) { font-size:16.5px; }
body[data-text-size="xlarge"] #viewFund :is(.fx-note, .fx-src, .fx-ev__d, .fx-tag, .cpane__meta, .fx-yr__h) { font-size:15px; }

/* ── phones ── */
@media (max-width: 640px) {
  #viewFund .fx-pane > .cpane__bar { padding: 8px 10px 8px 12px; }
  #viewFund .fx-cta { height: 32px; }
  #viewFund .fx-basis, #viewFund .fx-sit { padding-left: 12px; padding-right: 12px; }
  #viewFund .fx-note { padding-left: 12px; padding-right: 12px; }
  #viewFund .fx-tl { padding: 2px 12px 0; }
  #viewFund .fx-tl .fx-note { padding-left: 0; padding-right: 0; }
  #viewFund .fx-yr { grid-template-columns: minmax(0, 1fr); }
  #viewFund .fx-yr__h { padding-bottom: 2px; }
  #viewFund .fx-tags { flex-direction: row; flex-wrap: wrap; }
  #viewFund .fx-ev { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; }
  #viewFund .fx-ev__t { grid-column: 1 / -1; }
  #viewFund .fx-src { grid-column: 1 / -1; line-height: 1.3; }
  #viewFund .fx-morerow { padding-left: 0; }
  #viewFund .fx-more { border-radius: 16px; }
  #viewFund .fx-table .cp-nm { max-width: 150px; }
  #viewFund .fx-sit { gap: 4px; }
  #viewFund .fx-sit__i { flex: 0 0 100%; }
  #viewFund .fx-sit__sep { display: none; }
}

/* ── light ── */
body[data-theme="light"] #viewFund .fx-pane {
  --fx-line: rgba(58, 48, 30, .12);
  --fx-line-2: rgba(58, 48, 30, .08);
  --fx-merger: #5e3f00; --fx-rights: #133f7d; --fx-tender: #054d35; --fx-liquidation: #85123d;
  --fx-conversion: #4a2896; --fx-delisting: #722d07; --fx-discount: #2f3a8f; --fx-schedule: #5c3f00;
  --fx-cut: var(--red);
}
body[data-theme="light"] #viewFund .fx-yr__h { color: #5c3f00; }
body[data-theme="light"] #viewFund .fx-table tbody tr:hover td:first-child { background: linear-gradient(rgba(15, 23, 42, .03), rgba(15, 23, 42, .03)), var(--bg); }
body[data-theme="light"] #viewFund .fx-more { border-color: rgba(58, 48, 30, .22); background: var(--surface); }

/* ═══ Strict review 2 (W14 / P15 / P-F): the rest of the fund page in the dashboard's voice ═══════════════
   The key figures are one flat row under the name, ruled like the dashboard detail pane (no filled tiles);
   the chart's source is said once, by the switch; the older section titles take the panes' 13px. */
#viewFund .fund-hero { flex-direction: column; align-items: stretch; gap: 12px; }
#viewFund .fund-hero__stats {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 0; flex: none;
  padding: 10px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
#viewFund .fund-hero__stats .hero-stat {
  padding: 2px 14px; border: 0 !important; border-right: 1px solid var(--border) !important; border-radius: 0; background: none; box-shadow: none;
}
#viewFund .fund-hero__stats .hero-stat:first-child { padding-left: 0; }
#viewFund .fund-hero__stats .hero-stat:last-child { border-right: 0 !important; }
body[data-text-size="large"] #viewFund .fund-hero__stats .hero-stat, body[data-text-size="xlarge"] #viewFund .fund-hero__stats .hero-stat { padding: 2px 14px; }
@media (max-width: 1180px) {
  #viewFund .fund-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  #viewFund .fund-hero__stats .hero-stat:nth-child(4n) { border-right: 0 !important; }
  #viewFund .fund-hero__stats .hero-stat:nth-child(4n + 1) { padding-left: 0; }
}
@media (max-width: 640px) {
  #viewFund .fund-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewFund .fund-hero__stats .hero-stat { padding: 2px 12px; border-right: 0 !important; }
  #viewFund .fund-hero__stats .hero-stat:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--border) !important; }
}
/* the "● TRADINGVIEW" label only repeated the lit TradingView / the quote feed switch beside it */
#viewFund #fundChartSource { display: none; }
/* the older sections' titles at the panes' size (13px, as Compared with similar funds and What changed) */
#viewFund .card__header h2 { font-size:13px; letter-spacing: .1em; }
body[data-text-size="large"] #viewFund .card__header h2 { font-size:14px; }
body[data-text-size="xlarge"] #viewFund .card__header h2 { font-size:15.5px; }
/* "Profit Taker", spelled out, at the page's smallest size */
#viewFund .pt-badge { font-size:13px; line-height: 1.35; padding: 0 7px; vertical-align: 1px; }
/* where the payments came from: capital gains in their own color, not a second amber beside return of capital */
#viewFund :is(.payrec__seg--gain, .payrec__dot--gain) { background: #5b9cf0; }
body[data-theme="light"] #viewFund :is(.payrec__seg--gain, .payrec__dot--gain) { background: #2a6ec2; }
/* Fund basics: a row's own date sits under its label, so the figure keeps one line */
#viewFund .fund-kv__own { display: block; margin-top: 1px; font:400 13px/1.35 var(--sans); color: var(--text-2); }
#viewFund .fund-kv__value { white-space: nowrap; }
#viewFund .hero-stat__value:has(.pt-badge) { white-space: normal; overflow: visible; }
#viewFund .hero-stat__value .pt-badge { display: inline-block; margin-top: 2px; }
/* the shared Record cell (app.js recordCell, Screener and Compared): a cut reads in the cut color */
:is(#viewScreener td.td-record, #viewFund .fx-table td.fx-rec) .rec-cut--c { color: var(--red-bright, var(--red)); }
body[data-theme="light"] :is(#viewScreener td.td-record, #viewFund .fx-table td.fx-rec) .rec-cut--c { color: var(--red); }
#viewFund .fund-kv__label:has(.fund-kv__own) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
#viewFund .fund-kv__label:has(.fund-kv__own) > .gq { order: 1; }
#viewFund .fund-kv__label > .fund-kv__own { order: 2; flex: 0 0 100%; }
#viewFund .fund-kv__row:has(.fund-kv__own) { flex-wrap: nowrap; align-items: flex-start; }
#viewFund .fund-kv__row:has(.fund-kv__own) > .fund-kv__label { flex: 1 1 auto; min-width: 0; }

/* Leftovers item 9: on a phone the price drops under the fund's name, so it lines up on the left with the
   name and its change line (right-aligned, "$8.55" sat indented above the wider "+0.12 (+1.42%)"). */
@media (max-width: 640px) {
  #viewFund .fund-hero__price { text-align: left; }
}

/* Another fund's figures never sit under this fund's name: while its data loads, or if the request fails, the
   cards filled from it are hidden (app.js openFundView / loadFundDetailData add and drop .fund-detail--pending). */
#fundDetail.fund-detail--pending > :is(section, div):not(.fund-hero, .fund-situation, .fund-chart-card, .fund-detail__loading, .fp-tags, .fp-tabs, .fp-panel) { display: none; }
/* the tabbed page (Oct 2, fund-tabs.js): the sections inside each tab, the price chart excepted */
#fundDetail.fund-detail--pending .fp-panel :is(section, .fp-slot, .fp-secnote):not(.fund-chart-card) { display: none; }
#viewFund .fund-detail__loading { font-size:13px; color: var(--text-2); }
#viewFund .fund-detail__retry {
  margin-left: 8px; display: inline-flex; align-items: center; min-height: 30px; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .16)); background: transparent; color: var(--text);
  font:600 13px/1.3 var(--sans);
}
#viewFund .fund-detail__retry:hover { border-color: var(--accent); }
#viewFund .fund-detail__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A card with nothing from the source (an ETF has no price/NAV record) is left off (app.js renderNavHistoryChart,
   renderCapitalTrend); its partner in the two-column row takes the full width. */
#viewFund .card.fund-card--none { display: none; }
#viewFund .fund-secondary-grid:has(> .fund-card--none) { grid-template-columns: 1fr; }
/* alone, the chart has no partner to take its height from, and grew with the width (JEPI: 712px tall) */
#viewFund .fund-secondary-grid:has(> .fund-card--none) > .card > .fund-chart-wrap--sm { flex: none; height: 360px; min-height: 0; }