/* ===================================================================== Centricity MF Screener — Compare v2 (Fund Comparison) page styles Ported from the approved design mockup ("Centricity Fund Comparison"). Chrome (header.appbar / footer.appfoot) intentionally OMITTED — owned by css/centricity.css. Tweaks-panel scaffold omitted (not a shipped feature). Best/worst cell flagging is ENABLED here per the G4 build brief (the mockup demo had it disabled); toggle off with . ===================================================================== */ :root{ --best:#0F7A3F; --worst:#931621; } :root{ --white:#FFFFFF;--black:#000000;--ink:#0E0E0E; --gold:#BD9568;--gold-deep:#A47B4C; --brown:#6B3F1A;--brown-deep:#4A2C12; --tan:#DBC8B2;--grey-mid:#BFBFBF;--grey-light:#D9D9D9; --red:#931621;--green:#0F5132;--amber:#B08800;--text-mid:#666666; --rule:rgba(217,217,217,.65); --tan-soft:rgba(219,200,178,.30); --tan-softer:rgba(219,200,178,.16); --shadow-sm:0 1px 2px rgba(0,0,0,0.06); --shadow-md:0 4px 14px rgba(0,0,0,.06); /* fund slot colours (muted, brand-adjacent). Batch-13 items 36/37 — no RED for any fund (red = negative returns only) and the BENCHMARK owns black (always highlighted); fund 1 moves to the brand deep-brown. */ --f1:#6B3F1A; --f2:#D4A24C; --f3:#1F4E96; --f4:#0F5132; --f5:#00707E; --f6:#6A3D9A; --f7:#8C6A2F; --fb:#0E0E0E; --fb2:#555555; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:#fafaf7;color:#000} body{font-family:'Cambria',Georgia,'Times New Roman',serif;font-weight:400;line-height:1.55;font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow-x:hidden;} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .neg{color:var(--red)}.pos{color:var(--green)} a{color:inherit;text-decoration:none} button,input,select{font-family:inherit;cursor:pointer;outline:none} /* ========== TITLE BAND ========== */ .titleband{background:#fff;border-bottom:1px solid var(--rule);padding:24px 56px 20px;} .titleband-inner{max-width:1740px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;} .eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:6px;} .titleband h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1} .titleband h1 em{font-style:italic;font-weight:400;color:var(--gold-deep)} .titleband .sub{font-size:13px;color:var(--text-mid);margin-top:4px;max-width:72ch} .titleband .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .cmp-cycle-pick{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);font-weight:700} .cmp-cycle-pick select{font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--grey-light);border-radius:3px;padding:8px 10px;cursor:pointer} .cmp-cycle-pick select:focus{border-color:var(--gold)} /* ========== BUTTONS ========== */ .btn{font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:3px;border:1px solid var(--gold);background:#fff;color:var(--gold);font-weight:700;transition:background .2s,color .2s,border-color .2s;display:inline-flex;align-items:center;gap:7px;cursor:pointer;} .btn:hover{background:var(--tan-soft)} .btn.primary{background:var(--gold);color:#fff} .btn.primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)} .btn.ghost{border-color:var(--grey-light);color:var(--black)} .btn.ghost:hover{background:var(--tan-soft);border-color:var(--gold)} .btn.dark{background:#000;color:#fff;border-color:#000} .btn.dark:hover{background:var(--brown);border-color:var(--brown)} .btn.ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);} .btn.ghost-dark:hover{background:rgba(255,255,255,.08);border-color:var(--gold);color:var(--gold)} /* ========== PAGE ========== */ .page{max-width:1740px;margin:0 auto;padding:22px 56px 64px} /* ========== FUND SELECTOR RAIL ========== */ .selector-rail{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:20px 22px;margin-bottom:22px;} .sel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:14px;flex-wrap:wrap} .sel-head h3{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:10px;} .sel-head h3::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:99px;display:inline-block;} /* Batch-8 4.7 — 7 fund + 2 benchmark slots; wraps on narrower viewports */ .fund-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px} /* fund slot card */ .fslot{border:1px dashed var(--grey-mid);border-radius:4px;padding:12px 14px;background:#fafaf7;min-height:96px;display:flex;flex-direction:column;gap:4px;position:relative;transition:border-color .15s,background .15s;} .fslot.filled{border-style:solid;background:#fff;} .fslot.filled:hover{border-color:var(--gold);background:var(--tan-softer)} .fslot.benchmark{border-color:var(--grey-mid);background:#f5f3ef;} .fslot .slot-tag{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:5px;} .fslot .slot-tag .dot{width:8px;height:8px;border-radius:99px;flex:none;} .fslot .slot-nm{font-size:13px;font-weight:700;line-height:1.25;color:var(--black)} .fslot .slot-sub{font-size:10.5px;color:var(--text-mid);letter-spacing:.04em;margin-top:2px} .fslot .slot-score{font-size:11px;color:var(--brown);font-weight:700;margin-top:auto;padding-top:4px} .fslot .slot-rm{position:absolute;top:6px;right:6px;border:0;background:transparent;color:var(--text-mid);font-size:13px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:2px;cursor:pointer;} .fslot .slot-rm:hover{background:var(--red);color:#fff} .fslot.empty{cursor:pointer;align-items:center;justify-content:center;text-align:center;color:var(--text-mid);} .fslot.empty:hover{border-color:var(--gold);color:var(--brown);background:var(--tan-softer)} .fslot.empty .plus{font-size:22px;color:var(--gold);margin-bottom:2px} .fslot.empty .add-lbl{font-size:11px;letter-spacing:.08em} /* benchmark change */ .bench-change{font-size:10.5px;color:var(--gold);text-decoration:underline;cursor:pointer;margin-top:4px;display:inline-block} /* search dialogs — native + showModal() renders in the browser TOP LAYER, so it is viewport-relative regardless of any ancestor transform (transitions.css puts a transform on , which would otherwise anchor a position:fixed child to the full document and drop it below the fold). Pinned top-centre. */ .fso-dialog{position:fixed;top:56px;left:50%;transform:translateX(-50%);margin:0;border:0;padding:0;width:520px;max-width:92vw;max-height:80vh;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.28);} .fso-dialog[open]{display:flex;flex-direction:column;} .fso-dialog::backdrop{background:rgba(0,0,0,.45);} .fso-head{padding:16px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px;} .fso-head input{flex:1;border:0;font-family:inherit;font-size:15px;outline:0;color:var(--ink);} .fso-head input::placeholder{color:var(--grey-mid)} .fso-head .close{border:0;background:transparent;font-size:18px;color:var(--text-mid);cursor:pointer;padding:0 4px} .fso-head .close:hover{color:var(--black)} .fso-list{overflow-y:auto;flex:1} .fso-item{padding:12px 18px;border-bottom:1px solid var(--rule);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;} .fso-item:hover{background:var(--tan-softer)} .fso-item .nm{font-size:13.5px;font-weight:700;color:var(--black);line-height:1.25} .fso-item .sub{font-size:11px;color:var(--text-mid);margin-top:2px;letter-spacing:.04em} .fso-item .sc{font-size:13px;font-weight:700;color:var(--brown);text-align:right} .fso-item .cat{font-size:10px;color:var(--text-mid);text-align:right;margin-top:2px;letter-spacing:.05em} .fso-empty{padding:24px 18px;text-align:center;color:var(--text-mid);font-style:italic} /* ========== TAB BAR ========== */ .tab-bar{background:#fff;border:1px solid var(--rule);border-radius:4px 4px 0 0;padding:0 6px;display:flex;align-items:flex-end;gap:0;margin-bottom:0;overflow-x:auto;border-bottom:0;} .tab-bar::-webkit-scrollbar{height:3px} .tab-bar::-webkit-scrollbar-thumb{background:var(--grey-light)} .tab{padding:13px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-mid);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;background:transparent;border-top:0;border-left:0;border-right:0;} .tab:hover{color:var(--black)} .tab.active{color:var(--gold);border-bottom-color:var(--gold)} /* ========== COMPARISON TABLE ========== */ /* Batch-13 item 39 — the table scrolls inside its own box so the sticky fund-name header actually engages (position:sticky was inert: the wrapper only x-scrolled, so the thead had no scrolling ancestor to stick against). */ .comp-wrap{background:#fff;border:1px solid var(--rule);border-radius:0 0 4px 4px;overflow:auto;max-height:76vh;border-top:2px solid var(--gold);} table.comp{width:100%;border-collapse:collapse;font-size:13px;} table.comp thead th{ position:sticky;top:0;background:#000;color:#fff; padding:12px 14px;text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700; border-right:1px solid rgba(255,255,255,.08);white-space:nowrap;z-index:2; } table.comp thead th:first-child{width:220px;min-width:180px;left:0;z-index:4} /* QA LOW-2: the corner header sticks left too, matching the pinned body column */ table.comp thead th .fund-dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:middle;} table.comp thead th .f-nm{font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:700;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} table.comp thead th .f-cat{font-size:9.5px;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:1px} table.comp tbody tr:nth-child(even){background:#fafaf7} table.comp tbody tr:hover{background:var(--tan-softer)} table.comp tbody tr.section-head{background:#000;color:#fff;} table.comp tbody tr.section-head td{ padding:10px 14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold); border-bottom:0;border-top:0; } table.comp tbody td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:middle;border-right:1px solid var(--rule);} table.comp tbody td:first-child{font-weight:700;color:var(--ink);font-size:12.5px;background:#fff;position:sticky;left:0;border-right:2px solid var(--rule);} table.comp tbody tr.section-head td:first-child{background:#000;color:var(--gold);border-right-color:rgba(255,255,255,.08)} table.comp tbody td .sub{font-size:10.5px;color:var(--text-mid);font-weight:400;display:block;margin-top:1px;letter-spacing:.04em} /* Best/worst numeric flagging — ENABLED per G4 build brief (best=green #0F7A3F, worst=red #931621). Escape hatch: reverts to the mockup's deliberate no-emphasis look ("no nudging the user toward a fund"). */ table.comp tbody td.best{color:var(--best);font-weight:700} table.comp tbody td.worst{color:var(--worst);font-weight:700} table.comp tbody td.best .pos,table.comp tbody td.best .neg{color:var(--best)} table.comp tbody td.worst .pos,table.comp tbody td.worst .neg{color:var(--worst)} body.no-flags table.comp tbody td.best, body.no-flags table.comp tbody td.worst{color:inherit;font-weight:inherit} /* bar in cell */ .mini-bar{display:flex;align-items:center;gap:8px} .mini-bar .bar{flex:1;height:6px;background:var(--grey-light);border-radius:99px;overflow:hidden;min-width:40px} .mini-bar .bar i{display:block;height:100%;border-radius:99px} .mini-bar .val{font-size:12.5px;font-weight:700;min-width:44px;text-align:right} /* score ring */ .score-ring{display:inline-flex;align-items:center;gap:6px} .score-ring .ring{width:32px;height:32px;position:relative;flex:none} .score-ring .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .score-ring .ring .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--brown)} .score-ring .lbl{font-size:13px;font-weight:700;color:var(--brown)} /* benchmark col styling */ table.comp thead th.bench-col{background:#1a1a1a} table.comp tbody td.bench-col{background:#f7f7f5} table.comp tbody tr.section-head td.bench-col{background:#111} /* ========== CHART SECTION (tab: charts) ========== */ .chart-section{display:none;background:#fff;border:1px solid var(--rule);border-radius:0 0 4px 4px;border-top:2px solid var(--gold);padding:28px 30px;} .chart-section.active{display:block} .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .chart-card{border:1px solid var(--rule);border-radius:4px;padding:18px 20px;background:#fafaf7} .chart-card h5{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700} .legend-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px} .legend-item{display:flex;align-items:center;gap:6px;font-size:12px} .legend-item .dot{width:10px;height:10px;border-radius:99px;flex:none} svg.bar-chart{width:100%;overflow:visible} /* ========== EXPORT STRIP ========== */ .export-strip{background:#000;color:#fff;border-radius:4px;padding:18px 24px;margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .export-strip .lbl{font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block} .export-strip h3{margin:4px 0 0;font-size:16px;font-weight:700} .export-strip h3 em{font-style:italic;color:var(--gold);font-weight:400} .export-strip .acts{display:flex;gap:10px;flex-wrap:wrap} /* ========== HOLDINGS OVERLAP MATRIX ========== */ .overlap-section{background:#fff;border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:4px;margin-top:22px;padding:18px 22px;} .overlap-section .ov-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px} .overlap-section .ov-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em} .overlap-section .ov-head h3 em{font-style:italic;color:var(--gold-deep);font-weight:400} .overlap-section .ov-sub{font-size:11px;color:var(--text-mid)} .overlap-section .ov-empty{padding:20px 4px;color:var(--text-mid);font-style:italic;font-size:12px} .ov-scroll{overflow-x:auto} table.ov-matrix{border-collapse:collapse;font-size:12px;width:auto;min-width:100%;font-variant-numeric:tabular-nums} table.ov-matrix th,table.ov-matrix td{border:1px solid var(--rule);padding:8px 11px;text-align:center;white-space:nowrap} table.ov-matrix thead th{background:#000;color:#fff;font-size:10.5px;letter-spacing:.04em;font-weight:700;vertical-align:bottom} table.ov-matrix thead th.ov-corner{color:var(--gold);text-align:left;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase} table.ov-matrix tbody th{background:#fafaf7;text-align:left;font-weight:700;color:var(--ink);position:sticky;left:0;border-right:2px solid var(--rule);max-width:210px;overflow:hidden;text-overflow:ellipsis} table.ov-matrix .ov-dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:middle} table.ov-matrix .ov-cell{font-weight:700;cursor:default} table.ov-matrix .ov-self{background:#D9D9D9;color:#888} table.ov-matrix .ov-na{background:#fff;color:var(--text-mid)} table.ov-matrix th.ov-bench{color:var(--tan)} table.ov-matrix .ov-proxy{display:block;font-size:8px;font-weight:400;color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0;font-style:italic;margin-top:1px} /* ========== TOAST ========== */ .toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%,16px);background:#000;color:#fff;padding:12px 18px;border-radius:3px;font-size:12.5px;letter-spacing:.06em;border:1px solid var(--gold);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90;} .toast.show{opacity:1;transform:translate(-50%,0)} /* ============================================================ CHART SYSTEM — added in v2 ============================================================ */ /* ----- HERO GROWTH-OF-10K ----- */ .hero-chart-wrap{background:#fff;border:1px solid var(--rule);border-radius:4px;margin-bottom:22px;overflow:hidden;border-top:2px solid var(--gold);} .hero-chart-head{padding:18px 26px 6px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .hero-chart-head .l{flex:1;min-width:280px} .hero-chart-head h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.15} .hero-chart-head h3 em{font-style:italic;color:var(--gold-deep);font-weight:400} .hero-chart-head .sub{font-size:12px;color:var(--text-mid);margin-top:4px} .hero-chart-head .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-chart-head .leg-item{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:5px 10px;border:1px solid transparent;border-radius:3px;transition:background .15s,border-color .15s;user-select:none} .hero-chart-head .leg-item:hover{background:var(--tan-softer)} .hero-chart-head .leg-item.dim{opacity:.35} .hero-chart-head .leg-item.bench{font-style:italic;color:var(--text-mid)} .hero-chart-head .leg-item .ldot{width:14px;height:3px;border-radius:1px;flex:none} .hero-chart-head .leg-item .ldot.dash{background:repeating-linear-gradient(90deg,#666 0 3px,transparent 3px 6px) !important;height:2px} .hero-chart-head .leg-item .lval{font-family:Cambria,Georgia,serif;font-weight:700;font-size:12px;color:var(--brown)} .hero-chart-body{padding:6px 18px 16px 18px;position:relative} .hero-empty{padding:60px;text-align:center;color:var(--text-mid);font-style:italic;background:var(--tan-softer);margin:14px 22px 22px;border-radius:3px} .hero-chart-body svg{width:100%;height:300px;display:block;overflow:visible;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif} .hero-chart-body .hc-grid line{stroke:#EEE9DF;stroke-width:1} .hero-chart-body .hc-axis text{font-size:11px;fill:var(--text-mid);font-weight:600;font-variant-numeric:tabular-nums} .hero-chart-body .hc-line{fill:none;stroke-width:2;transition:opacity .2s,stroke-width .2s} .hero-chart-body .hc-line.dim{opacity:.12;stroke-width:1.6} .hero-chart-body .hc-line.focus{stroke-width:3} .hero-chart-body .hc-line.bench{stroke-width:1.6;stroke-dasharray:4 4} .hero-chart-body .hc-end-dot{transition:opacity .2s} .hero-chart-body .hc-end-dot.dim{opacity:.18} .hero-chart-body .hc-end-label{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke fill;stroke:#fff;stroke-width:3;stroke-linejoin:round} .hero-chart-body .hc-end-label.dim{opacity:.18} /* linked-hover dimming for hero chart (driven by data-fund-hov from setHoveredFund) */ body[data-hov] .hero-chart-body .hc-line[data-fund-hov="false"]{opacity:.10;stroke-width:1.4} body[data-hov] .hero-chart-body .hc-line[data-fund-hov="true"]{stroke-width:3.2;opacity:1} body[data-hov] .hero-chart-body .hc-end-dot[data-fund-hov="false"]{opacity:.14} body[data-hov] .hero-chart-body .hc-end-label[data-fund-hov="false"]{opacity:.14} body[data-hov] .hero-chart-head .leg-item[data-fund-hov="false"]{opacity:.32} body[data-hov] .hero-chart-head .leg-item[data-fund-hov="true"]{background:var(--tan-softer);border-color:var(--gold)} .hero-chart-body .hc-cursor{stroke:#000;stroke-width:.6;stroke-dasharray:2 3;opacity:0} .hero-chart-body .hc-cursor.show{opacity:1} .hero-chart-body .hc-hover-dot{transition:transform .12s} .hero-chart-body .hc-tip-box{fill:#fff;stroke:#0E0E0E;stroke-width:1} .hero-chart-body .hc-tip-title{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;fill:var(--gold)} .hero-chart-body .hc-tip-row{font-size:11.5px;font-family:-apple-system,sans-serif;font-variant-numeric:tabular-nums} .hero-chart-body .hc-tip-row.nm{font-weight:700;fill:#0E0E0E} .hero-chart-body .hc-tip-row.val{font-weight:700;fill:var(--brown);text-anchor:end} .hero-meta{display:flex;justify-content:space-between;gap:24px;padding:0 26px 16px;color:var(--text-mid);font-size:11.5px;letter-spacing:.04em;flex-wrap:wrap} .hero-meta b{color:var(--black);font-weight:700} /* ----- PER-TAB VIZ PANEL (between tab bar and comp table) ----- */ .viz-panel{background:#fff;border:1px solid var(--rule);border-top:0;padding:22px 26px 8px;display:none} .viz-panel.show{display:block} .viz-grid{display:grid;gap:22px;margin-bottom:18px} .viz-grid.cols-2{grid-template-columns:1fr 1fr} .viz-grid.cols-3{grid-template-columns:1.2fr 1fr 1fr} .viz-grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .viz-card{border:1px solid var(--rule);background:#fafaf7;border-radius:4px;padding:16px 18px 14px;position:relative;display:flex;flex-direction:column} .viz-card .vc-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;gap:10px} .viz-card .vc-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold);line-height:1.3} .viz-card .vc-sub{font-size:11px;color:var(--text-mid);margin-top:3px;letter-spacing:0;text-transform:none;font-weight:400;font-family:Cambria,Georgia,serif;font-style:italic} .viz-card .vc-legend{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;align-items:center} .viz-card .vc-legend .leg-i{display:flex;align-items:center;gap:4px;font-weight:700;letter-spacing:.04em;color:var(--text-mid)} .viz-card .vc-legend .leg-i .d{width:10px;height:3px;border-radius:1px} .viz-card .vc-legend .leg-i.b .d{background:repeating-linear-gradient(90deg,#666 0 2px,transparent 2px 4px);height:2px} .viz-card svg{width:100%;display:block;overflow:visible;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif} .viz-card svg text{font-variant-numeric:tabular-nums} .viz-card svg .vg-grid line{stroke:#EEE9DF;stroke-width:1} .viz-card svg .vg-axis text,.viz-card svg .vg-tick text{font-size:10.5px;fill:var(--text-mid);font-weight:600} /* grouped bar */ .viz-card .vg-bar{transition:opacity .2s} .viz-card .vg-bar.dim{opacity:.18} .viz-card .vg-bar.focus{filter:brightness(.9)} .viz-card .vg-bar-lbl{font-size:10px;font-weight:700;fill:var(--black);text-anchor:middle;font-family:-apple-system,sans-serif;font-variant-numeric:tabular-nums} .viz-card .vg-bar-lbl.bench{fill:var(--text-mid);font-style:italic} .viz-card .vg-period-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;fill:#0E0E0E;text-anchor:middle;text-transform:uppercase} /* scatter */ .viz-card .vs-bubble{transition:opacity .2s,transform .2s,stroke-width .2s;cursor:pointer} .viz-card .vs-bubble.dim{opacity:.18} .viz-card .vs-bubble.focus{stroke-width:2.5} .viz-card .vs-bubble:hover{stroke-width:2.6} .viz-card .vs-tip-box{fill:#fff;stroke:#0E0E0E;stroke-width:1;filter:drop-shadow(0 2px 6px rgba(20,16,8,.15))} .viz-card .vs-tip-title{font-size:11.5px;font-weight:700;letter-spacing:.02em;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif} .viz-card .vs-tip-lbl{font-size:10.5px;font-weight:600;letter-spacing:.04em;fill:var(--text-mid);font-family:-apple-system,sans-serif} .viz-card .vs-tip-val{font-size:11.5px;font-weight:700;fill:#0E0E0E;text-anchor:end;font-variant-numeric:tabular-nums;font-family:-apple-system,sans-serif} .viz-card .vs-quad-line{stroke:var(--grey-mid);stroke-width:1;stroke-dasharray:3 4;opacity:.6} .viz-card .vs-quad-lbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;fill:var(--text-mid);font-weight:700} .viz-card .vs-fund-lbl{font-size:11px;font-weight:700;paint-order:stroke fill;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;pointer-events:none} /* drawdown */ .viz-card .vdd-area{transition:opacity .2s} .viz-card .vdd-area.dim{opacity:.05} .viz-card .vdd-line{fill:none;stroke-width:1.8;transition:opacity .2s} .viz-card .vdd-line.dim{opacity:.15} .viz-card .vdd-line.bench{stroke-dasharray:4 4;stroke-width:1.4} /* top-3 drawdown peak markers (shown when a fund is focus-hovered) */ .viz-card .vdd-peak{pointer-events:none} .viz-card .vdd-peak circle{filter:drop-shadow(0 1px 3px rgba(20,16,8,.18))} .viz-card .vdd-peak-rank{font-size:9px;font-weight:800;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif} .viz-card .vdd-peak-val{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;font-family:-apple-system,sans-serif;paint-order:stroke fill;stroke:#fff;stroke-width:3;stroke-linejoin:round} .viz-card .vdd-peak-date{font-size:9.5px;font-weight:600;letter-spacing:.04em;fill:var(--text-mid);font-family:-apple-system,sans-serif;paint-order:stroke fill;stroke:#fff;stroke-width:3;stroke-linejoin:round} /* donut */ .donut-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);border-radius:3px;padding:12px 14px;overflow:hidden} .donut-card .dc-svg{flex:none;width:78px;height:78px} .donut-card .dc-body{flex:1;min-width:0} .donut-card .dc-nm{font-size:11.5px;font-weight:700;color:var(--black);line-height:1.25;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .donut-card .dc-tag{font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-top:2px;display:flex;align-items:center;gap:5px} .donut-card .dc-tag .dt{width:6px;height:6px;border-radius:99px} .donut-card .dc-legs{margin-top:7px;display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;font-size:10.5px;font-family:-apple-system,sans-serif} .donut-card .dc-legs span{display:flex;align-items:center;gap:5px;color:var(--text-mid)} .donut-card .dc-legs span i{width:7px;height:7px;border-radius:1px;flex:none} .donut-card .dc-legs span b{color:var(--black);font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums} .donut-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* hovering an m-cap donut spotlights that fund across the whole portfolio tab (the donut dims its siblings via .fund-dimmable; .sec-fund dims the other funds in the sector-exposure chart on the right). */ body[data-hov] .sec-fund[data-fund-hov="false"]{opacity:.2;transition:opacity .15s} /* bullet card (overview small multiples) */ .bullet-card{border:1px solid var(--rule);background:#fff;border-radius:4px;padding:14px 16px 14px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s;cursor:default} .bullet-card:hover{border-color:var(--gold);box-shadow:0 2px 12px rgba(189,149,104,.16)} .bullet-card.dim{opacity:.34} .bullet-card .bc-head{display:flex;align-items:flex-start;gap:8px;justify-content:space-between} .bullet-card .bc-head .nm{font-size:13px;font-weight:700;color:var(--black);line-height:1.2} .bullet-card .bc-head .nm .tag{display:inline-block;width:6px;height:6px;border-radius:99px;margin-right:5px;vertical-align:middle} .bullet-card .bc-head .sub{font-size:10.5px;color:var(--text-mid);margin-top:2px;letter-spacing:.03em} .bullet-card .bc-head .score{text-align:right;flex:none} .bullet-card .bc-head .score b{font-size:18px;font-weight:700;color:var(--brown);font-variant-numeric:tabular-nums;line-height:1} .bullet-card .bc-head .score i{display:block;font-size:9px;color:var(--text-mid);letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin-top:2px;font-weight:700} .bullet-card .bc-spark-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding-top:6px;border-top:1px dashed var(--rule)} .bullet-card .bc-spark{display:flex;flex-direction:column;gap:1px} .bullet-card .bc-spark .sp-l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mid);font-weight:700} .bullet-card .bc-spark .sp-v{font-size:14px;font-weight:700;color:var(--black);font-variant-numeric:tabular-nums;font-family:Cambria,Georgia,serif} .bullet-card .bc-spark .sp-v .cmp{font-size:10px;color:var(--text-mid);font-weight:400;margin-left:3px;font-style:italic} .bullet-card .bc-spark.neg .sp-v{color:var(--red)} .bullet-card .bc-bullets{padding-top:8px;border-top:1px dashed var(--rule);display:flex;flex-direction:column;gap:8px} .bullet-card .bc-bullet{display:grid;grid-template-columns:78px 1fr 54px;align-items:center;gap:8px;font-size:11px} .bullet-card .bc-bullet .lb{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-mid);font-weight:700} .bullet-card .bc-bullet .bt{height:9px;background:#F1ECE1;border-radius:1px;position:relative;overflow:hidden} .bullet-card .bc-bullet .bt .qual{position:absolute;top:0;bottom:0;background:rgba(189,149,104,.18)} .bullet-card .bc-bullet .bt .fill{position:absolute;top:1px;bottom:1px;background:var(--gold);left:1px} .bullet-card .bc-bullet .bt .target{position:absolute;top:-2px;bottom:-2px;width:2px;background:#0E0E0E;border-radius:1px} .bullet-card .bc-bullet .vv{font-weight:700;color:var(--black);text-align:right;font-variant-numeric:tabular-nums} .bullet-card .bc-bullet.bad .bt .fill{background:var(--red)} .bullet-card .bc-bullet.bad .vv{color:var(--red)} /* simple stat rows (replaces bullet bars — cleaner read) */ .bullet-card .bc-stats{padding-top:10px;border-top:1px dashed var(--rule);display:grid;grid-template-columns:1fr;gap:0} .bullet-card .bc-stat{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:baseline;column-gap:10px;padding:7px 0;border-bottom:1px dashed var(--rule)} .bullet-card .bc-stat:last-child{border-bottom:0;padding-bottom:0} .bullet-card .bc-stat .bs-l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);font-weight:700;grid-column:1;grid-row:1} .bullet-card .bc-stat .bs-v{font-size:16px;font-weight:700;color:var(--black);text-align:right;font-family:Cambria,Georgia,serif;font-variant-numeric:tabular-nums;grid-column:2;grid-row:1 / span 2;align-self:center} .bullet-card .bc-stat .bs-d{font-size:10.5px;color:var(--green);font-weight:700;font-style:italic;font-family:-apple-system,sans-serif;grid-column:1;grid-row:2;font-variant-numeric:tabular-nums} .bullet-card .bc-stat.neg .bs-d{color:var(--red)} .bullet-card .bc-stat.neg .bs-v{color:var(--red)} /* hover linkage — dim/focus tied to .hoveredFundId */ body[data-hov] .fund-dimmable:not([data-fund-hov="true"]){opacity:.28;transition:opacity .15s} /* viz-card SVG focus/dim — hover a legend pill or chart element to isolate that fund across all cards */ body[data-hov] .viz-card svg [data-fund-id]{transition:opacity .15s} body[data-hov] .viz-card svg [data-fund-id][data-fund-hov="false"]{opacity:.14} body[data-hov] .viz-card svg [data-fund-id][data-fund-hov="true"]{opacity:1} /* nudge the matched line/bar to feel "lifted" */ body[data-hov] .viz-card svg path[data-fund-id][data-fund-hov="true"]{stroke-width:2.6} body[data-hov] .viz-card svg path.vdd-line[data-fund-id][data-fund-hov="true"]{stroke-width:2.4} body[data-hov] .viz-card .vc-legend .leg-i[data-fund-hov="false"]{opacity:.32} body[data-hov] .viz-card .vc-legend .leg-i[data-fund-hov="true"]{color:#0E0E0E} /* tweak chart styling so it sits flush inside the viz panel on Overview */ .viz-panel #heroWrap{border:1px solid var(--rule);border-top:2px solid var(--gold);margin:-22px -26px 18px;border-radius:3px 3px 0 0} .viz-panel #heroWrap .hero-chart-head{padding:18px 24px 6px} /* small adjustments to existing comp table for linked-hover */ table.comp tbody tr.fund-row[data-fund-hov="true"]{background:var(--tan-soft)!important} table.comp tbody td.fund-td[data-fund-hov="true"]{outline:2px solid var(--gold);outline-offset:-2px;background:rgba(189,149,104,.10)} /* viz card hover tooltip (shared) */ .vz-tip{position:absolute;pointer-events:none;background:#0E0E0E;color:#fff;padding:8px 11px;border-radius:3px;border:1px solid var(--gold);font-size:11.5px;font-family:-apple-system,sans-serif;line-height:1.4;z-index:5;min-width:120px;opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity .12s} .vz-tip.show{opacity:1} .vz-tip .tt-t{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:3px} .vz-tip .tt-n{font-weight:700;margin-bottom:2px} .vz-tip .tt-v{color:var(--tan);font-variant-numeric:tabular-nums} .vz-tip::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;border:7px solid transparent;border-top-color:var(--gold);border-bottom:0} /* ========== Batch-13 item 43 — Portfolio tab: per-fund full-portfolio drill-down ========== */ .pf-chip-row{display:flex;flex-wrap:wrap;gap:10px;} .pf-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:9px 13px;cursor:pointer;transition:border-color .15s, box-shadow .15s;} .pf-chip:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)} .pf-chip .dot{width:9px;height:9px;border-radius:99px;flex:none} .pf-chip .nm{font-size:12.5px;font-weight:700;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-chip .n{font-size:10.5px;color:var(--text-mid);letter-spacing:.06em;white-space:nowrap} .pf-chip.bench .nm{color:#0E0E0E} .pf-chip[disabled]{opacity:.5;cursor:not-allowed} /* shared HoldingsView overlay (drill-down) — same idiom as fund-detail.css */ .hv-overlay{position:fixed;inset:0;z-index:1200;} .hv-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);} .hv-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(860px,calc(100vw - 48px));max-height:calc(100vh - 80px); display:flex;flex-direction:column;background:#fff;border:1px solid var(--gold); border-radius:4px;box-shadow:0 24px 64px rgba(0,0,0,.24);} .hv-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 22px 10px;} .hv-head h3{margin:0;font-size:18px;} .hv-sub{margin:4px 0 0;font-size:12px;color:var(--text-mid);} .hv-close{font-family:inherit;font-size:20px;line-height:1;padding:2px 10px; background:none;border:1px solid var(--rule);border-radius:4px;cursor:pointer;color:#444;} .hv-close:hover{border-color:var(--gold);color:#000;} .hv-chips{padding:0 22px 8px;display:flex;gap:8px;} .hv-chip{font-family:inherit;font-size:12px;padding:4px 12px;border-radius:999px; border:1px solid var(--rule);background:#fff;cursor:pointer;color:#444;} .hv-chip.on{background:var(--gold);border-color:var(--gold);color:#fff;} .hv-body{overflow-y:auto;padding:0 22px;} table.hv-tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;} table.hv-tbl th{position:sticky;top:0;background:#000;color:#fff;text-align:left; font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;} table.hv-tbl th.num, table.hv-tbl td.num{text-align:right;} table.hv-tbl td{padding:7px 10px;border-bottom:1px solid rgba(217,217,217,.5);} table.hv-tbl tbody tr:nth-child(even) td{background:#faf9f7;} .hv-foot{padding:10px 22px 16px;margin:0;font-size:11.5px;color:var(--text-mid);} .hv-actions{display:flex;gap:8px;margin-left:auto;margin-right:12px;align-self:flex-start;} .hv-actions[hidden]{display:none;} .hv-dl{font-family:inherit;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;padding:7px 12px;border:1px solid var(--gold);border-radius:3px; background:#fff;color:var(--gold);cursor:pointer;} .hv-dl:hover{background:var(--tan-soft);} /* ========== Batch-13 close-out B1 — hero range pills ========== */ .hero-ranges{display:inline-flex;gap:4px;margin-right:10px;vertical-align:middle} .hr-pill{font-family:inherit;font-size:10.5px;letter-spacing:.08em;font-weight:700;padding:3px 10px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--text-mid);cursor:pointer} .hr-pill:hover{border-color:var(--gold);color:var(--brown)} .hr-pill.on{background:var(--gold);border-color:var(--gold);color:#fff}