/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
img,picture,video,canvas,svg{display:block;max-width:100%}
a{color:var(--c-accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ===== TOKENS ===== */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --text-2xs:0.625rem;--text-xs:0.6875rem;--text-sm:0.75rem;--text-base:0.8125rem;--text-lg:0.9375rem;--text-xl:1.125rem;--text-2xl:1.5rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --r-sm:3px;--r-md:5px;--r-lg:8px;
  --ease:cubic-bezier(.16,1,.3,1);--t-fast:150ms var(--ease);--t-med:250ms var(--ease);
}

/* ===== DARK (default) ===== */
[data-theme="dark"]{
  --c-bg:#0d1117;--c-s1:#161b22;--c-s2:#1c2128;--c-s3:#21262d;--c-s4:#282e36;
  --c-b1:rgba(240,246,252,.1);--c-b2:rgba(240,246,252,.06);--c-b3:rgba(240,246,252,.03);
  --c-t1:#e6edf3;--c-t2:#8b949e;--c-t3:#484f58;
  --c-green:#22c55e;--c-green-bg:rgba(34,197,94,.12);--c-green-30:rgba(34,197,94,.3);
  --c-red:#ef4444;--c-red-bg:rgba(239,68,68,.12);--c-red-30:rgba(239,68,68,.3);
  --c-accent:#3b82f6;--c-accent-bg:rgba(59,130,246,.12);--c-accent-h:#60a5fa;
  --c-yellow:#eab308;--c-yellow-bg:rgba(234,179,8,.12);--c-overlay:rgba(0,0,0,.5);
  --shadow:0 4px 12px rgba(0,0,0,.4);
  color-scheme:dark;
}
/* ===== LIGHT ===== */
[data-theme="light"]{
  --c-bg:#f0f2f5;--c-s1:#ffffff;--c-s2:#f6f8fa;--c-s3:#eaeef2;--c-s4:#d8dee4;
  --c-b1:rgba(0,0,0,.12);--c-b2:rgba(0,0,0,.06);--c-b3:rgba(0,0,0,.03);
  --c-t1:#1c2128;--c-t2:#57606a;--c-t3:#8b949e;
  --c-green:#16a34a;--c-green-bg:rgba(22,163,74,.1);--c-green-30:rgba(22,163,74,.25);
  --c-red:#dc2626;--c-red-bg:rgba(220,38,38,.1);--c-red-30:rgba(220,38,38,.25);
  --c-accent:#2563eb;--c-accent-bg:rgba(37,99,235,.08);--c-accent-h:#3b82f6;
  --c-yellow:#ca8a04;--c-yellow-bg:rgba(202,138,4,.1);--c-overlay:rgba(0,0,0,.3);
  --shadow:0 4px 12px rgba(0,0,0,.08);
  color-scheme:light;
}

/* ===== LAYOUT ===== */
html,body{height:100%}
body{font-family:var(--font);font-size:var(--text-base);font-feature-settings:'cv02','cv03','cv04','cv11';color:var(--c-t1);background:var(--c-bg);line-height:1.5;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ===== HEADER ===== */
.hdr{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);height:44px;background:var(--c-s1);border-bottom:1px solid var(--c-b1);z-index:20;flex-shrink:0}
.hdr-logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:var(--text-lg);color:var(--c-t1);letter-spacing:-.02em;white-space:nowrap;flex-shrink:0}
.hdr-sep{width:1px;height:20px;background:var(--c-b1);flex-shrink:0}
.hdr-sub{font-size:var(--text-sm);color:var(--c-t2);white-space:nowrap;font-weight:500}
.hdr-right{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;margin-left:auto}
.hdr-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-t3)}
.hdr-live-dot{width:7px;height:7px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 0 var(--c-green-30);animation:pulse 2.4s var(--ease) infinite}
.hdr-live.is-stale .hdr-live-dot{background:var(--c-yellow);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--c-green-30)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.th-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--c-t2);transition:all var(--t-fast)}
.th-btn:hover{color:var(--c-t1);background:var(--c-s3)}

/* ===== MAIN SCROLL ===== */
.main{flex:1;overflow:hidden;background:var(--c-bg)}
.cn-inner{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;max-width:1080px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-8);overflow-y:auto;overscroll-behavior:contain;height:100%}

/* ===== HERO STAT STRIP ===== */
.cn-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);flex-shrink:0}
.cn-stat{background:var(--c-s1);border:1px solid var(--c-b2);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.cn-stat-accent{background:var(--c-accent-bg);border-color:var(--c-accent-30)}
.cn-stat-lbl{font-size:var(--text-2xs);font-weight:700;color:var(--c-t3);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;display:flex;align-items:center}
.cn-stat-val{font-family:var(--mono);font-size:var(--text-2xl);font-weight:600;color:var(--c-t1);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.cn-stat-accent .cn-stat-val{color:var(--c-accent)}
.cn-stat-sub{font-size:var(--text-2xs);color:var(--c-t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-stat-sub.up{color:var(--c-green)}
.cn-stat-sub.dn{color:var(--c-red)}
.cn-stat-sub.flat{color:var(--c-t2)}

/* ===== PANELS (from hl-cme .pnl / .fees-pnl) ===== */
.pnl{background:var(--c-s1);display:flex;flex-direction:column;overflow:hidden;position:relative}
.fees-pnl{flex-shrink:0;background:var(--c-s1);border:1px solid var(--c-b2);border-radius:var(--r-md);overflow:hidden}
.pnl-hd{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);min-height:40px;border-bottom:1px solid var(--c-b2);flex-shrink:0}
.pnl-t{font-size:var(--text-xs);font-weight:700;color:var(--c-t3);text-transform:uppercase;letter-spacing:.1em}
.pnl-bd{flex:1;position:relative;overflow:visible}
.fees-src{font-size:var(--text-2xs);color:var(--c-t3);font-weight:400;margin-left:auto;white-space:nowrap}

/* loader / error */
.ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--c-s1);z-index:5}
.ld-spin{width:20px;height:20px;border:2px solid var(--c-b1);border-top-color:var(--c-accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pnl-err{padding:var(--sp-5);color:var(--c-t3);font-size:var(--text-sm);text-align:center}

/* ===== SEGMENTED CONTROL (background-fill active, no accent stripe) ===== */
.seg{display:flex;border:1px solid var(--c-b1);border-radius:var(--r-sm);overflow:hidden}
.seg button{font-size:var(--text-xs);font-weight:500;padding:2px 9px;color:var(--c-t2);background:var(--c-s2);border:none;border-right:1px solid var(--c-b1);cursor:pointer;transition:all var(--t-fast);white-space:nowrap;height:26px;display:flex;align-items:center}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--c-t1);background:var(--c-s3)}
.seg button.on{background:var(--c-accent);color:#fff}
.cn-rng{margin-left:auto}

/* ===== FEE TABLE (from hl-cme .fees-tbl, border-left accents stripped) ===== */
.fees-tbl-wrap,.cn-incentives-tbl-wrap{overflow:auto;padding:0}
.fees-tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums lining-nums}
.fees-tbl thead th{position:sticky;top:0;background:var(--c-s1);font-size:var(--text-2xs);font-weight:700;color:var(--c-t3);text-transform:uppercase;letter-spacing:.1em;padding:var(--sp-2) var(--sp-4);text-align:right;white-space:nowrap;border-bottom:1px solid var(--c-b1)}
.fees-tbl thead th:first-child{text-align:left;padding-left:var(--sp-5)}
.fees-tbl thead th:last-child{padding-right:var(--sp-5)}
.fees-tbl tbody td{padding:7px var(--sp-4);border-bottom:1px solid var(--c-b2);text-align:right;white-space:nowrap;font-family:var(--mono);font-size:var(--text-sm);letter-spacing:-.01em;color:var(--c-t1)}
.fees-tbl tbody td:first-child{text-align:left;font-family:var(--font);font-weight:600;color:var(--c-t1);padding-left:var(--sp-5);letter-spacing:0}
.fees-tbl tbody td:last-child{padding-right:var(--sp-5)}
.fees-tbl tbody tr:last-child td{border-bottom:none}
.fees-tbl tbody tr{transition:background var(--t-fast)}
.fees-tbl tbody tr:hover td{background:var(--c-s2)}
/* Annualized column — accent on text + tint (no left stripe) */
.fees-tbl .ann-col{color:var(--c-accent);font-weight:600}
.fees-tbl thead th.ann-col{color:var(--c-accent-h)}
.fees-tbl tbody td.ann-col-primary{color:var(--c-accent);font-weight:700;background:var(--c-accent-bg)}
.fees-tbl tbody tr:hover td.ann-col-primary{background:var(--c-accent-bg)}
.fees-tbl thead th.ann-col-primary{color:var(--c-accent);background:var(--c-accent-bg);border-bottom-color:var(--c-accent-30)}
.fees-tbl .row-note{color:var(--c-t3);font-weight:400;font-size:var(--text-xs);margin-left:var(--sp-2)}

/* info tooltip (from hl-cme .fees-info / .fees-tip) */
.fees-info{position:relative;display:inline-flex;align-items:center;margin-left:5px;color:var(--c-t3);cursor:help;font-size:var(--text-xs);vertical-align:middle}
.fees-tip{display:none;position:absolute;left:0;top:100%;margin-top:8px;width:300px;max-width:calc(100vw - 32px);padding:var(--sp-3) var(--sp-4);background:var(--c-s3);border:1px solid var(--c-b1);border-radius:var(--r-md);font-size:var(--text-2xs);font-weight:400;color:var(--c-t2);line-height:1.6;z-index:100;white-space:normal;box-shadow:var(--shadow);text-align:left;text-transform:none;letter-spacing:0}
.fees-info:hover .fees-tip,.fees-info:focus .fees-tip{display:block}
/* P/F lives on the rightmost hero card — right-anchor so the tip opens leftward, never clipping */
#pfTip{left:auto;right:0}
/* table-header tips (Total Burn / Annualized Run-Rate) sit in the right half of the table —
   right-anchor so the 300px tip opens leftward into the table instead of overflowing the panel
   edge and forcing a horizontal scrollbar on the .fees-tbl-wrap */
.fees-tbl thead .fees-tip{left:auto;right:0}

/* ===== CHART BODY ===== */
.cn-chart-bd{min-height:300px}
.cn-chart{width:100%;height:300px}
/* Incentives body centers its content so the pending / fallback state (shorter than the
   panel) reads as intentional rather than a void. Chart child keeps its explicit 300px. */
#incBody{display:flex;flex-direction:column;justify-content:center}

/* ===== STALENESS BADGE ===== */
.stale-badge{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;color:var(--c-yellow);background:var(--c-yellow-bg);white-space:nowrap}
.stale-badge.is-error{color:var(--c-red);background:var(--c-red-bg)}

/* incentives empty / fallback */
.cn-pending{padding:var(--sp-6) var(--sp-5);color:var(--c-t2);font-size:var(--text-sm);text-align:center;line-height:1.7}
.cn-pending strong{color:var(--c-t1)}

/* ===== METHODOLOGY CARD ===== */
.cn-method{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-b2)}
.cn-method-item{background:var(--c-s1);padding:var(--sp-3) var(--sp-5);display:flex;flex-direction:column;gap:3px}
.cn-method-item.is-zeroed{opacity:.62}
.cn-method-name{font-size:var(--text-sm);font-weight:600;color:var(--c-t1);display:flex;align-items:center;gap:var(--sp-2)}
.cn-method-desc{font-size:var(--text-xs);color:var(--c-t2);line-height:1.55}
.cn-method-tag{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:var(--r-sm);background:var(--c-b3);color:var(--c-t3);white-space:nowrap}
.cn-method-tag.is-zeroed{background:var(--c-yellow-bg);color:var(--c-yellow)}
.cn-method-foot{grid-column:1/-1;background:var(--c-s2);padding:var(--sp-3) var(--sp-5);font-size:var(--text-xs);color:var(--c-t3);line-height:1.6}

/* ===== BROADRIDGE CARD ===== */
.cn-broadridge{padding:var(--sp-5)}
.cn-br-top{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.cn-br-val{font-family:var(--mono);font-size:var(--text-2xl);font-weight:600;color:var(--c-t1);letter-spacing:-.02em}
.cn-br-unit{font-size:var(--text-sm);color:var(--c-t2)}
.cn-br-asof{font-size:var(--text-xs);color:var(--c-t3);margin-left:auto}
.cn-br-note{margin-top:var(--sp-3);font-size:var(--text-xs);color:var(--c-t2);line-height:1.6;max-width:62ch}
.cn-br-src{margin-top:var(--sp-2);font-size:var(--text-2xs);color:var(--c-t3)}

/* ===== FOOTER ===== */
.cn-foot{font-size:var(--text-2xs);color:var(--c-t3);text-align:center;padding:var(--sp-2) 0 0;line-height:1.7}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .cn-inner{padding:var(--sp-3) var(--sp-3) var(--sp-6);gap:var(--sp-3)}
  .cn-hero{grid-template-columns:repeat(2,1fr)}
  .cn-method{grid-template-columns:1fr}
  .pnl-hd{padding:var(--sp-2) var(--sp-3);flex-wrap:wrap}
  .fees-tbl thead th,.fees-tbl tbody td{padding:var(--sp-2) var(--sp-3)}
  .fees-tbl thead th:first-child,.fees-tbl tbody td:first-child{padding-left:var(--sp-3)}
  .fees-tbl thead th:last-child,.fees-tbl tbody td:last-child{padding-right:var(--sp-3)}
}
@media(max-width:560px){
  .cn-hero{grid-template-columns:1fr 1fr}
  .cn-stat-val{font-size:var(--text-xl)}
}