/* Fund page (/funds/<T>) in the Attio style (user, 2026-11-03: "this page needs to be restyled to Attio theme"); a layer
   over funds.css + funds-attio-table.css, desktop only (phones keep aiq-phone-funds.css). Attio radii (attio-style skill),
   so this file is excluded from scripts/square_corners.py. */
html.aiq-desk .fd { --fd-ink: #101112; --fd-mute: rgba(0,0,0,.63); --fd-faint: rgba(0,0,0,.5); --fd-line: #EEEFF1; --fd-ring: #E6E7EA;
  --fd-on: rgba(0,0,0,.04); --fd-hover: #F6F7F7; --fd-card: #FFFFFF; --fd-blue: #266DF0;
  --fd-btn: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04);
  color: var(--fd-ink); font: 500 14px/20px Inter, sans-serif; -webkit-font-smoothing: antialiased; }
html.aiq-desk[data-theme="dark"] .fd { --fd-ink: #F1F2F3; --fd-mute: rgba(255,255,255,.6); --fd-faint: rgba(255,255,255,.45); --fd-line: rgba(255,255,255,.08);
  --fd-ring: rgba(255,255,255,.12); --fd-on: rgba(255,255,255,.06); --fd-hover: rgba(255,255,255,.05); --fd-card: var(--sh-bed, #1F1F1F); --fd-blue: #4E8CFC;
  --fd-btn: inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px 0 rgba(0,0,0,.3); }

/* header: category square + name, tags, quiet meta; outlined SEC filing; price block */
html.aiq-desk .fd-hdr { padding: 8px 2px 16px; gap: 14px; }
html.aiq-desk .fd-hdr .fd-hic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: 20px; }
html.aiq-desk .fd-hdr h1 { color: var(--fd-ink); }
html.aiq-desk .fd-meta { font: 500 13px/18px Inter, sans-serif; color: var(--fd-mute); gap: 6px; margin-top: 6px; }
html.aiq-desk .fd-chip { height: 22px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 7px; font: 500 12px/16px Inter, sans-serif;
  background: #EDF1FF; box-shadow: inset 0 0 0 1px #DCE4FF; color: #2F4BC2; }
html.aiq-desk[data-theme="dark"] .fd-chip { background: #1D2E55; box-shadow: inset 0 0 0 1px #2B3E6D; color: #A9C1FF; }
html.aiq-desk .fd-chip.g { background: var(--fd-on); box-shadow: inset 0 0 0 1px var(--fd-ring); color: var(--fd-mute); font-weight: 500; }
html.aiq-desk .fd-acts .at-btn:not(#_) { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: 8px;
  background: var(--fd-card) !important; box-shadow: var(--fd-btn) !important; color: var(--fd-ink) !important; font: 500 14px/20px Inter, sans-serif; text-decoration: none; }
html.aiq-desk .fd-acts .at-btn:not(#_) i { font-size: 15px; color: var(--fd-mute); }
html.aiq-desk .fd-acts .at-btn:not(#_):hover { background: linear-gradient(var(--fd-hover), var(--fd-hover)), var(--fd-card) !important; }
html.aiq-desk .fd-px { border-left-color: var(--fd-line); }
html.aiq-desk .fd-px b { font-size: 20px; font-weight: 600; }
html.aiq-desk .fd-px div { font-weight: 500; font-size: 13px; }

/* section tabs = the house tab bar (user, 2026-11-05, as Superinvestors' view row; css/aiq-tabbar.css .tbx): the page's
   first row, edge to edge under the page bar (cancels <main>'s px-3 pt-3); feet on the open tab only. Not sticky: pinned
   over the scrolling cards it "didn't blend in" (user, 2026-11-05); top 0 !important beats dock()'s inline top. Phones keep
   their sticky pills. */
html.aiq-desk .fd-jump.tbx:not(#_) { position: relative; top: 0 !important; z-index: 10; margin: -12px -12px 0; padding: 0; border-bottom: 0; background: color-mix(in srgb, var(--tbx-tint) 8%, var(--sh-bed, var(--a-card, #fff))); }
html.aiq-desk .fd-jump .tbx-l:not(#_) { gap: 0; padding: 0; }
html.aiq-desk .fd .tbx { --tbx-bed: var(--sh-bed, var(--a-page, #fff)); }
html.aiq-desk .fd .tbx .tbx-t:not(.is-on) .fl { display: none; }
html.aiq-desk .fd .tbx .tbx-t:not(#_) { border-bottom: 0; text-decoration: none; }
html.aiq-desk .fd .tbx .tbx-t.is-on:not(#_) { border-bottom: 0; }
html.aiq-desk .fd-hdr { padding-top: 14px; padding-bottom: 10px; }   /* tighter (user, 2026-11-05: "minimize the white space") */

/* sections + cards: r12, a hairline, no shadow; titles 14/600 */
html.aiq-desk .fd-sec { margin-top: 6px; }
html.aiq-desk .fd-sec > h2 { display: flex; align-items: center; gap: 8px; font: 600 16px/20px Inter, sans-serif; margin: 18px 2px 8px; color: var(--fd-ink); }
html.aiq-desk .fd-sec > h2 i { font-size: 17px; color: var(--fd-mute); }
html.aiq-desk .fd-grid { gap: 10px; }
html.aiq-desk .fd-main { align-items: start; }
html.aiq-desk .fd-col { gap: 10px; }
html.aiq-desk .fd-card { border: 0; border-radius: 12px; background: var(--fd-card); box-shadow: none; overflow: hidden; position: relative; }
/* the outline is an overlay above the content (house rule: "card hairline = ::after overlay"): as an inset shadow the
   Returns / All holdings tables' cells painted over it, so their sides had no line and the bottom corners read square
   (user, 2026-11-05) */
html.aiq-desk .fd-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--fd-line); pointer-events: none; z-index: 4; }
html.aiq-desk .fd-card-h { min-height: 38px; padding: 8px 14px; border-bottom: 0; }
html.aiq-desk .fd-card-h h3 { font: 600 14px/20px Inter, sans-serif; color: var(--fd-ink); }
html.aiq-desk .fd-card-h .r { font: 500 13px/18px Inter, sans-serif; color: var(--fd-mute); }
html.aiq-desk .fd-card-b { padding: 2px 14px 10px; }
html.aiq-desk .fd-i { border-color: var(--fd-ring); color: var(--fd-faint); font-weight: 500; }
html.aiq-desk .fd-big { font-size: 24px; font-weight: 600; }
html.aiq-desk .fd-empty { color: var(--fd-mute); font: 500 14px/20px Inter, sans-serif; }

/* segmented controls: Attio track + white thumb */
html.aiq-desk .fd-seg { background: var(--fd-on); box-shadow: none; border-radius: 10px; padding: 2px; }
html.aiq-desk .fd-seg button { font: 500 13px/18px Inter, sans-serif; padding: 3px 9px; border-radius: 8px; color: var(--fd-mute); transition: none; }
html.aiq-desk .fd-seg button.on { background: var(--fd-card); color: var(--fd-ink); box-shadow: 0 1px 2px -1px rgba(0,0,0,.08), inset 0 0 0 1px var(--fd-line); }

/* key facts: Attio record details (12/500 grey label with an icon, 14/500 value, no bold numbers) */
html.aiq-desk .fd-kf { padding: 6px 0; border-bottom-color: var(--fd-line); align-items: flex-start; }
html.aiq-desk .fd-kf > span { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; font: 500 13px/18px Inter, sans-serif; color: var(--fd-mute); }
html.aiq-desk .fd-kf > span > i { grid-row: 1 / span 2; font-size: 15px; line-height: 18px; color: var(--fd-faint); }
html.aiq-desk .fd-kf small { font: 500 12px/16px Inter, sans-serif; color: var(--fd-faint); grid-column: 2; }
html.aiq-desk .fd-kf b { font: 500 14px/18px Inter, sans-serif; color: var(--fd-ink); }
html.aiq-desk .fd-kv { font: 500 13px/18px Inter, sans-serif; padding: 8px 0; }
html.aiq-desk .fd-kv span { color: var(--fd-mute); }
html.aiq-desk .fd-kv b { font-weight: 500; }
html.aiq-desk .fd-kv a { color: var(--fd-blue); }

/* donut legends, tiles, changes, similar funds: 500 weights, hairlines */
html.aiq-desk .fd-leg .row { font: 500 13px/18px Inter, sans-serif; padding: 5px 0; border-bottom-color: var(--fd-line); }
html.aiq-desk .fd-leg .row b { font-weight: 500; }
html.aiq-desk .fd-leg .row i { border-radius: 3px; }
html.aiq-desk .fd-donut .ctr b { font-weight: 600; }
html.aiq-desk .fd-tile { border-color: var(--fd-line); padding: 12px 16px; }
html.aiq-desk .fd-tile > span { font: 500 12px/16px Inter, sans-serif; color: var(--fd-mute); }
html.aiq-desk .fd-tile > b { font-weight: 500; }
html.aiq-desk .fd-mini { border-color: var(--fd-line); }
html.aiq-desk .fd-mini div { border-color: var(--fd-line); padding: 8px 16px; }
html.aiq-desk .fd-mini b { font-weight: 500; }
html.aiq-desk .fd-mv, html.aiq-desk .fd-mv b { font-weight: 500; }
html.aiq-desk .fd-mv-l { font-weight: 500; }
html.aiq-desk .fd-tr { border-radius: 999px; background: var(--fd-on); }
html.aiq-desk .fd-tr div { border-radius: 999px; }
html.aiq-desk .fd-badge { border-radius: 6px; font-weight: 500; }
html.aiq-desk .fd-ov { padding: 4px 0; }
html.aiq-desk .fd-ov .row { font: 500 13px/18px Inter, sans-serif; padding: 8px 16px; border-bottom-color: var(--fd-line); }
html.aiq-desk .fd-ov .row b { font-weight: 600; }
html.aiq-desk .fd-ov .hd { font: 500 12px/16px Inter, sans-serif; color: var(--fd-mute); }
html.aiq-desk .fd-ov .fd-lt, html.aiq-desk .fd-lt { border-radius: 6px; }
html.aiq-desk .fd-logo { border-radius: 6px; }
html.aiq-desk .fd-more { border-top-color: var(--fd-line); padding: 8px 16px; }
html.aiq-desk .fd-gtip { border-radius: 10px; }
html.aiq-desk .fd svg text { fill: var(--fd-faint); }
html.aiq-desk .fd-locked .fd-lock-btn { border-radius: 8px; }

/* phones keep their own finance look (aiq-phone-funds.css): none of the Attio icons there */
html:not(.aiq-desk) .fd :is(.fd-hic, .fd-sec > h2 > i, .fd-kf > span > i) { display: none; }
/* the small grey type icons in the thin weight, as the sidebar's (Phosphor-Regular is already loaded for it) */
html.at-shell :is(.fd-kf > span > i, .fd-sec > h2 > i):not(#_) { font-family: "Phosphor-Regular" !important; }

/* the page scrolls under the page bar here (Superinvestors doesn't): aiq-tabbar.css paints that bar var(--ws-sbbg, transparent),
   so give it a solid fallback or the sections show through it */
html.aiq-desk:has(#fd-jump.tbx) .at-pagebar:not(#_):not(#_):not(#_) { background: var(--ws-sbbg, var(--sh-bed, var(--a-page, #fff))) !important; }

/* Every chart answers the pointer (user, 2026-11-05: "every single chart has hover … subtle animations"):
   column charts — a faint band behind the column, the others fade, a card with the figures (colHover in funds.js);
   donuts — the slice or its legend row stands out, the rest fade, the centre names it (donutHover); bars — the row tints,
   its bar brightens; bars grow in once when their section scrolls into view. Pure :hover rules may transition; the
   .hl / .on class rules don't (a transition on a class-swapped property sticks, docs/pitfalls.md). */
.fd-cbw { position: relative; }
.fd-cbw svg { cursor: default; }
.fd-cbw .cb-hit { fill: transparent; transition: fill .15s; }
.fd-cbw .cb-g:hover .cb-hit { fill: var(--fd-hover); }
.fd-cbw .cb-b { transition: opacity .15s; }
.fd-cbw svg:hover .cb-g:not(:hover) .cb-b, .fd-cbw svg:hover .cb-g:not(:hover) text.lbl { opacity: .35; }
.fd-cbw .fd-gtip { min-width: 150px; }
.fd-dn.hl .fd-donut circle.dn-s:not(#_) { opacity: .3; transition: none; }
.fd-dn.hl .fd-donut circle.dn-s.on:not(#_), .fd-donut.hl circle.dn-s.on:not(#_) { opacity: 1; }
.fd-donut.hl circle.dn-s:not(.on):not(#_) { opacity: .3; transition: none; }
.fd-dn.hl .fd-leg .row:not(.on) { opacity: .45; }
.fd-leg .row { cursor: default; }
.fd-donut .ctr span { max-width: 70%; }
:is(.fd-mv, .fd-cmp, .fd-ov .row:not(.hd)) { transition: background-color .15s; border-radius: 6px; }
:is(.fd-mv, .fd-cmp):hover { background: var(--fd-hover); }
.fd-tr div { transition: filter .15s; }
:is(.fd-mv, .fd-cmp, .fd-ov .row):hover .fd-tr div { filter: brightness(1.15) saturate(1.1); }
.fd-stk > div { transition: filter .15s, transform .15s; transform-origin: center; }
.fd-stk > div:hover { filter: brightness(1.12); transform: scaleY(1.25); }
@keyframes fdGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fd-rv.in .fd-tr div { transform-origin: left center; animation: fdGrow .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .fd-rv.in .fd-tr div { animation: none; } }

/* growth chart: click and drag to measure a span (user, 2026-11-05) — the area under the line between the two points
   deepens in the chart's own blue, a dot at each end (the hover dot's look), and the hover pop-up carries the span's
   figures. Rejected: a band with dashed edges, green/red fills or line, the figures in the chart header. */
.fd-gw svg { user-select: none; -webkit-user-select: none; }
.fd-gw :is(.sel-f, .sel-d) { pointer-events: none; }
/* the fill is the fd-sf gradient (fades downwards) under the fd-sm mask (fades in at both sides): no hard edges */
.fd-gw .sel-d { fill: #455DDC; stroke: var(--fd-card); stroke-width: 2; }
.fd-gw.is-drag :is(.xh, .dm, .db) { opacity: 0; }
.fd-gw.is-drag svg { cursor: ew-resize; }
.fd-gw .fd-gtip b.up { color: var(--fd-pos); } .fd-gw .fd-gtip b.dn { color: var(--fd-neg); }