/* ETF / mutual fund page (/funds/<T>, funds/index.html + js/funds.js). Design B picked 2026-10-13
   (app/static/proto/funds-page.html): header, docked jump bar, then one long page of sections.
   Colours are tokens so both themes work; tables are the house .aiq-tbl, toggles read aiq-controls.css's --seg-*. */
.fd { container-type: inline-size; color: var(--a-ink, #1D2025); font-size: 13px;
  --fd-card: var(--a-bg, #FFFFFF); --fd-line: var(--a-line, #EEEFF1); --fd-mute: var(--a-mute, rgba(29,32,37,.6));
  --fd-faint: var(--a-faint, rgba(29,32,37,.4)); --fd-hover: var(--a-hover, #F8F8FA);
  --fd-grid: #F0F2F6; --fd-axis: #C9CFDC; --fd-bench: #A0A9C0; --fd-benchbar: #CBD1DE; --fd-other: #E3E6EE;
  --fd-track: #F0F2F6; --fd-tick: #8A93A8; --fd-pos: var(--tb-pos, #0d8a66); --fd-neg: var(--tb-neg, #c8203f); }
html[data-theme="dark"] .fd { --fd-grid: rgba(255,255,255,.06); --fd-axis: rgba(255,255,255,.18); --fd-bench: #6B7488;
  --fd-benchbar: #454B59; --fd-other: #3A3F4B; --fd-track: rgba(255,255,255,.07); --fd-tick: #8A93A8; }

/* header */
.fd-hdr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 2px 12px; }
.fd-hdr h1 { font-size: 23px; font-weight: 650; margin: 0; letter-spacing: -.015em; line-height: 1.2; }
.fd-meta { display: flex; gap: 6px; align-items: center; color: var(--fd-mute); font-size: 12.5px; margin-top: 5px; flex-wrap: wrap; }
.fd-chip { font: 600 11px Inter, sans-serif; background: rgba(69,93,220,.10); color: #455DDC; border-radius: 4px; padding: 2px 6px; }
html[data-theme="dark"] .fd-chip { color: #8EA0F0; background: rgba(111,131,234,.16); }
.fd-chip.g { background: var(--fd-track); color: var(--fd-mute); font-weight: 500; }
.fd-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fd-px { text-align: right; padding-left: 16px; border-left: 1px solid var(--fd-line); margin-left: 6px; min-width: 96px; }
.fd-px b { display: block; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fd-px div { font-size: 12.5px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fd-px .skel { display: inline-block; width: 80px; height: 22px; }
/* phones: core only — the filing link stays in Fees; the price sits beside the name */
@media (max-width: 767px) {
  html.aiq-phone .fd-acts .at-btn { display: none; }
  html.aiq-phone .fd-px { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* docked jump bar (section tabs, aiq-controls.css --utab-*) */
.fd-jump { position: sticky; top: 0; z-index: 10; background: var(--sh-bed, var(--fd-card)); border-bottom: 1px solid var(--fd-line); margin-bottom: 4px; }
.fd-jump-in { display: flex; gap: 22px; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
.fd-jump a { padding: 9px 0 8px; font-size: 13.5px; color: var(--fd-mute); font-weight: 500; text-decoration: none; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent; }
.fd-jump a:hover { color: var(--a-ink, #1D2025); }
.fd-jump a.on { color: var(--a-ink, #1D2025); font-weight: 600; border-bottom-color: #455DDC; }

/* sections + cards */
.fd-sec { margin-top: 10px; scroll-margin-top: 56px; }
.fd-sec > h2 { font-size: 15px; font-weight: 600; margin: 18px 2px 8px; }
.fd-grid { display: grid; gap: 10px; }
.fd-main { grid-template-columns: minmax(0,1fr) 340px; }
.fd-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }   /* the chart card, then Returns (2026-11-05) */
.fd-two { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.fd-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fd-wide { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
@container (max-width: 1100px) { .fd-main, .fd-two, .fd-three, .fd-wide { grid-template-columns: minmax(0,1fr); } }
.fd-card { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 4px; min-width: 0; display: flex; flex-direction: column; }
.fd-card-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--fd-line); min-height: 38px; }
.fd-card-h h3 { margin: 0; font-size: 13px; font-weight: 600; }
.fd-card-h .r { margin-left: auto; color: var(--fd-mute); font-size: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fd-card-b { padding: 10px 14px; flex: 1; }
.fd-i { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--fd-axis); color: var(--fd-faint);
  font: 600 10px Inter, sans-serif; align-items: center; justify-content: center; cursor: help; flex: none; }
.fd-big { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fd .up { color: var(--fd-pos); } .fd .dn { color: var(--fd-neg); } .fd .mut { color: var(--fd-mute); }
.fd-empty { padding: 28px 18px; color: var(--fd-mute); text-align: center; }
/* Free: holdings are Plus and Pro (2026-11-03), one lock card in their place */
.fd-locked { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 18px; text-align: center; color: var(--fd-mute); }
.fd-locked b { font-size: 15px; font-weight: 600; color: var(--fd-ink, inherit); }
.fd-locked span { max-width: 380px; }
.fd-locked .fd-lock-btn { margin-top: 10px; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px;
  background: #455DDC; color: #fff; font: 500 14px/20px Inter, system-ui, sans-serif; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(69,93,220,.25); }   /* the house primary; .at-btn isn't styled on this page */
.fd-locked .fd-lock-btn:hover { background: #3A50C4; }

/* toggles: the house "Quiet" segmented control */
.fd-seg { display: inline-flex; background: var(--seg-bg, #EEF0F5); box-shadow: inset 0 0 0 1px var(--seg-line, transparent); border-radius: 4px; padding: 2px; gap: 2px; }
.fd-seg button { border: 0; background: none; font: 600 11.5px Inter, sans-serif; color: var(--fd-mute); padding: 4px 9px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.fd-seg button.on { background: var(--seg-on-bg, #FFFFFF); color: var(--a-ink, #1D2025); box-shadow: var(--seg-on-shadow, 0 1px 2px rgba(0,0,0,.08)); }

/* tables (house .aiq-tbl; only what's ours) */
.fd-tw { overflow-x: auto; }
.fd .aiq-tbl { width: 100%; }
.fd .aiq-tbl td, .fd .aiq-tbl th { white-space: nowrap; }
.fd-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fd-who .tk { font-weight: 600; min-width: 46px; }
.fd-who .nm { color: var(--fd-mute); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.fd-logo { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--fd-line); background: #FFFFFF; object-fit: contain; padding: 2px; flex: none; }
.fd-lt { width: 18px; height: 18px; border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 600 10px Inter, sans-serif; color: #FFFFFF; }
.fd-badge { font: 600 10.5px Inter, sans-serif; border-radius: 4px; padding: 2px 6px; }
.fd-badge.new { background: var(--a-pos-bg, #E9F7F0); color: var(--a-pos-ink, #127A52); }
.fd-badge.sold { background: var(--a-neg-bg, #FDECEF); color: var(--a-neg-ink, #B4213D); }
.fd-more { padding: 7px 12px; border-top: 1px solid var(--fd-line); display: flex; align-items: center; gap: 10px; }

/* donuts + legends */
.fd-dn { display: flex; gap: 18px; align-items: center; }
@container (max-width: 520px) { .fd-dn { flex-direction: column; align-items: stretch; } .fd-dn .fd-donut { align-self: center; } }
.fd-donut { flex: none; position: relative; }
.fd-donut svg { display: block; }
.fd-donut circle { transition: opacity .15s; }
.fd-donut:hover circle { opacity: .45; } .fd-donut circle:hover { opacity: 1; }
.fd-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.fd-donut .ctr b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fd-donut .ctr span { font-size: 10.5px; color: var(--fd-mute); margin-top: 1px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-leg .row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--fd-line); font-size: 12px; }
.fd-leg .row:last-child { border-bottom: 0; }
.fd-leg .row i { width: 8px; height: 8px; border-radius: 2px; }
.fd-leg .row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-leg .row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-leg.top .row { grid-template-columns: 8px 18px 48px minmax(0,1fr) auto; }
.fd-leg.top.fd-leg-wide .row { grid-template-columns: 8px 18px 64px minmax(0,1fr) auto; }   /* XTOT.TO */

/* look-through tiles */
.fd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@container (max-width: 900px) { .fd-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fd-tile { padding: 10px 14px; border-right: 1px solid var(--fd-line); border-bottom: 1px solid var(--fd-line); }
.fd-tile > span { display: block; color: var(--fd-mute); font-size: 12px; }
.fd-tile > b { display: block; font-size: 18px; font-weight: 600; margin: 2px 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fd-cmp { display: grid; grid-template-columns: 62px minmax(0,1fr) 52px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--fd-mute); margin-top: 4px; }
.fd-tr { height: 6px; background: var(--fd-track); border-radius: 2px; overflow: hidden; }
.fd-tr div { height: 100%; border-radius: 2px; }
.fd-cmp em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* changes card */
.fd-mini { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--fd-line); }
.fd-mini div { padding: 7px 14px; border-right: 1px solid var(--fd-line); }
.fd-mini div:last-child { border-right: 0; }
.fd-mini span { display: block; color: var(--fd-mute); font-size: 11px; }
.fd-mini b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-mvg { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; }
@container (max-width: 520px) { .fd-mvg { grid-template-columns: minmax(0,1fr); } }
.fd-mv-h { font-size: 12px; color: var(--fd-mute); margin-bottom: 4px; }
.fd-mv { display: grid; grid-template-columns: minmax(0,130px) minmax(0,1fr) 74px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--fd-line); }
.fd-mv:last-child { border-bottom: 0; }
.fd-mv-l { font-weight: 600; display: flex; gap: 5px; align-items: center; min-width: 0; }
.fd-mv-l em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fd-mv-l .fd-badge { flex: none; font-size: 9.5px; padding: 1px 4px; }
.fd-mv .fd-tr { height: 10px; }
.fd-mv b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }

/* key facts / key-value lists */
.fd-kf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--fd-line); }
.fd-kf:last-child { border-bottom: 0; }
.fd-kf > span { color: var(--fd-mute); font-size: 12.5px; }
.fd-kf small { display: block; font-size: 11px; color: var(--fd-faint); margin-top: 1px; }
.fd-kf b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fd-kv { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--fd-line); font-size: 12.5px; }
.fd-kv:last-child { border-bottom: 0; }
.fd-kv span { color: var(--fd-mute); white-space: nowrap; }
.fd-kv b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fd-kv a { color: #455DDC; font-weight: 500; text-decoration: none; }
html[data-theme="dark"] .fd-kv a { color: #8EA0F0; }

/* similar funds */
.fd-ov .row { display: grid; grid-template-columns: 18px 56px minmax(0,1fr) minmax(120px,1.2fr) 52px 64px 64px; gap: 12px; align-items: center;
  padding: 6px 14px; font-size: 12.5px; border-bottom: 1px solid var(--fd-line); color: inherit; text-decoration: none; }
a.row:hover { background: var(--fd-hover); }
.fd-ov .row:last-child { border-bottom: 0; }
.fd-ov .hd { font-size: 12px; font-weight: 550; color: var(--fd-mute); }
.fd-ov .fd-tr { height: 8px; } .fd-ov .fd-tr div { background: #455DDC; }
.fd-ov em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
@container (max-width: 640px) { .fd-ov .row { grid-template-columns: 18px 52px minmax(0,1fr) 52px 64px; } .fd-ov .row > :nth-child(3), .fd-ov .row > :nth-child(6) { display: none; } }

/* svg charts */
.fd svg text { font-family: Inter, sans-serif; font-size: 11px; fill: var(--fd-tick); font-variant-numeric: tabular-nums; }
.fd svg text.lbl { fill: var(--fd-mute); font-weight: 500; }
.fd svg text.pill { fill: #FFFFFF; font-weight: 600; }

/* reveal (soft rise as each section scrolls in) */
.fd-rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease-out, transform .45s ease-out; }
.fd-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fd-rv { opacity: 1; transform: none; transition: none; } }

/* growth of $10K: hover crosshair + a card with both values (2026-11-03, as the model portfolio chart) */
.fd-gw { position: relative; }
.fd-gw svg { touch-action: pan-y; cursor: crosshair; }
.fd-gw :is(.xh, .dm, .db) { opacity: 0; pointer-events: none; }
.fd-gw.is-hover :is(.xh, .dm, .db) { opacity: 1; }
.fd-gw .xh { stroke: var(--fd-axis); stroke-width: 1; }
.fd-gw .dm { fill: #455DDC; stroke: var(--fd-card); stroke-width: 2; }
.fd-gw .db { fill: var(--fd-card); stroke: var(--fd-bench); stroke-width: 1.5; }
.fd-gtip { position: absolute; z-index: 3; pointer-events: none; min-width: 190px; padding: 8px 10px; border-radius: 4px; background: var(--pop-bg, #fff);
  box-shadow: inset 0 0 0 1px var(--fd-line), 0 4px 8px -4px rgba(28,40,64,.12), 0 4px 12px -2px rgba(24,41,75,.16);
  font: 500 12px/16px Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--fd-ink, inherit); }
.fd-gtip[hidden] { display: none; }
.fd-gtip .d { color: var(--fd-mute); margin-bottom: 6px; }
.fd-gtip .r { display: grid; grid-template-columns: 12px minmax(0,1fr) auto 40px; gap: 6px; align-items: center; padding: 2px 0; }
.fd-gtip .r span { color: var(--fd-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-gtip .r b { font-weight: 600; }
.fd-gtip .r em { font-style: normal; text-align: right; }
.fd-gtip .r em.up { color: var(--fd-pos); } .fd-gtip .r em.dn { color: var(--fd-neg); }
.fd-gtip i { width: 10px; height: 0; border-top: 2px solid #455DDC; }
.fd-gtip i.b { border-top: 1.5px dashed var(--fd-bench); }
.fd-catlk { color: inherit; text-decoration: underline; text-decoration-color: var(--fd-line); text-underline-offset: 3px; }
.fd-catlk:hover { color: var(--fd-ink, inherit); }