/* shared, design-neutral pieces; each design sets the custom properties */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
.chart{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.chart-canvas{display:block;position:absolute;inset:0}
.chart-tip{position:absolute;top:6px;pointer-events:none;font-size:12px;line-height:1.45;padding:6px 8px;border-radius:6px;background:var(--tip-bg,rgba(255,255,255,.96));
  color:var(--tip-fg,#222);box-shadow:0 1px 4px rgba(0,0,0,.12);white-space:nowrap;z-index:3}
.chart-tip .d{opacity:.65;margin-bottom:2px}.chart-tip i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.chart-tip .tot{border-top:1px solid rgba(128,128,128,.25);margin-top:3px;padding-top:2px}.chart-tip .est{font-style:italic}
/* range slider */
.rs{--rs-h:34px;padding:0 11px}
.rs-track{position:relative;height:var(--rs-h);border-radius:6px;background:var(--rs-bg,rgba(0,0,0,.04));touch-action:none;cursor:pointer}
.rs-spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rs-fill{position:absolute;top:0;bottom:0;background:var(--rs-fill,rgba(0,0,0,.08));border-top:1px solid var(--rs-edge,rgba(0,0,0,.35));border-bottom:1px solid var(--rs-edge,rgba(0,0,0,.35));cursor:grab}
.rs-h{position:absolute;top:50%;width:22px;height:calc(var(--rs-h) + 8px);margin:0;padding:0;transform:translate(-50%,-50%);border:1px solid var(--rs-edge,rgba(0,0,0,.45));
  border-radius:6px;background:var(--rs-handle,#fff);box-shadow:0 1px 3px rgba(0,0,0,.15);cursor:ew-resize;touch-action:none;z-index:2}
.rs-h::after{content:"";position:absolute;left:50%;top:30%;bottom:30%;width:0;border-left:1px solid var(--rs-edge,rgba(0,0,0,.35));border-right:1px solid var(--rs-edge,rgba(0,0,0,.35));transform:translateX(-50%);padding:0 1.5px}
.rs-h:focus-visible{outline:2px solid var(--accent,#333);outline-offset:2px}
.rs-labels{display:flex;justify-content:space-between;font-size:12px;opacity:.7;margin-top:8px}
/* gains table */
table.gains{width:100%;border-collapse:collapse;font-size:13px}
table.gains th{font-weight:500;text-align:right;opacity:.6;padding:6px 8px;border-bottom:1px solid var(--rule,rgba(0,0,0,.12));white-space:nowrap}
table.gains td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--rule-soft,rgba(0,0,0,.05));white-space:nowrap}
table.gains .l{text-align:left}
table.gains tr.grp td{padding-top:16px;font-weight:600;opacity:.75;border-bottom:1px solid var(--rule,rgba(0,0,0,.12))}
table.gains tr.tot td{font-weight:600;border-top:1px solid var(--rule,rgba(0,0,0,.2));border-bottom:0}
table.gains tr.closed td{opacity:.72}
table.gains tr.loan td{font-style:italic;opacity:.8}
.closed-tag{font-size:10px;opacity:.6;letter-spacing:.03em}
.pos{color:var(--pos,#2f6b3a)}.neg{color:var(--neg,#9a3b2e)}.na{opacity:.55}
.q{display:inline-block;font-size:9.5px;line-height:1;padding:2px 4px;border-radius:3px;border:1px solid currentColor;opacity:.6;vertical-align:1px;font-weight:500;font-style:normal}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:1px}
.dot-bl{background:var(--c-bl)}.dot-ibkr{background:var(--c-ibkr)}.dot-ira{background:var(--c-ira)}.dot-hsa{background:var(--c-hsa)}.dot-rh{background:var(--c-rh)}
.dot+.dot{margin-left:-1px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;container:gw / inline-size}
.notes{font-size:12px;line-height:1.5;opacity:.75}.notes p{margin:.4em 0}
@media (max-width:600px){table.gains{font-size:12px}table.gains th,table.gains td{padding:6px 5px}}
table.gains:not(.show-closed) tr.closed{display:none}
table.gains tr.closed td.l{padding-left:18px}
.closed-btn{background:none;border:0;padding:0;cursor:pointer;opacity:.75;font-size:inherit}
.closed-btn::before{content:"▸ ";opacity:.6}.closed-btn[aria-expanded=true]::before{content:"▾ "}
@container gw (max-width:560px){table.gains .dot{display:none}table.gains{font-size:11.5px}table.gains th,table.gains td{padding:6px 3px}.q{font-size:8px;padding:1px 2px}.q-computed{display:none}table.gains th:nth-child(3),table.gains td:nth-child(3){display:none}table.gains tr.grp td{padding-top:12px}}
/* privacy toggle */
.asof-wrap{display:inline-flex;align-items:center;gap:4px}
.privacy-btn{background:none;border:0;padding:2px 3px;margin:-6px -4px -6px 0;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;opacity:.8;border-radius:6px}
.privacy-btn:focus-visible{outline:2px solid var(--accent,#333);outline-offset:1px}
.privacy-btn .e-shut{display:none}.privacy-btn[aria-pressed=true] .e-open{display:none}.privacy-btn[aria-pressed=true] .e-shut{display:inline}
.dot-roth8269{background:var(--c-roth8269)}.dot-roth0214{background:var(--c-roth0214)}

/* date labels as picker buttons */
.rs-lab{background:none;border:0;padding:8px 6px;margin:-8px -6px;color:inherit;font:inherit;cursor:pointer;border-radius:6px;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:rgba(127,127,127,.6)}
.rs-lab:focus-visible{outline:2px solid var(--accent,#888);outline-offset:0}
/* calendar popover */
.dp{position:absolute;z-index:50;width:min(316px,calc(100vw - 16px));box-sizing:border-box;padding:10px 10px 8px;background:var(--dp-bg,var(--card,#fff));color:var(--fg,#111);
  border:1px solid var(--dp-edge,var(--rule-soft,rgba(0,0,0,.15)));border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:13px;-webkit-tap-highlight-color:transparent}
.dp button,.dp select{font:inherit;color:inherit}
.dp-hd{display:flex;align-items:center;gap:6px}
.dp-nav{background:none;border:0;width:40px;height:40px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer}
.dp-nav:disabled{opacity:.25;cursor:default}
.dp select{flex:1;min-width:0;height:36px;background:transparent;border:1px solid var(--dp-edge,var(--rule-soft,rgba(0,0,0,.15)));border-radius:8px;padding:0 8px;-webkit-appearance:none;appearance:none;text-align:center;cursor:pointer}
.dp select option{background:var(--dp-bg,var(--card,#fff));color:var(--fg,#111)}
.dp-sel{margin:8px 2px 6px;color:var(--mute,#777);font-size:12.5px;text-align:center}.dp-sel .dp-on{color:var(--fg,#111)}
.dp-wk,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wk span{text-align:center;font-size:11px;color:var(--mute,#777);padding:2px 0}
.dp-d{background:none;border:0;height:40px;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums}
.dp-d.dp-nt{color:var(--mute,#888)}
.dp-d:disabled{opacity:.18;cursor:default}
.dp-d.dp-in{background:var(--dp-in,rgba(127,127,127,.16));border-radius:0}
.dp-d.dp-s,.dp-d.dp-e{background:var(--fg,#111);color:var(--dp-bg,var(--card,#fff))}
.dp-d.dp-today:not(.dp-s):not(.dp-e){box-shadow:inset 0 -2px 0 var(--mute,#888)}
.dp-d:focus-visible,.dp-nav:focus-visible,.dp-btn:focus-visible,.dp select:focus-visible{outline:2px solid var(--accent,#888);outline-offset:-2px}
@media (hover:hover){.dp-d:not(:disabled):hover,.dp-nav:not(:disabled):hover{background:rgba(127,127,127,.14)}}
.dp-ft{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}
.dp-hint{color:var(--mute,#777);font-size:12px}
.dp-btn{background:none;border:0;padding:10px 12px;border-radius:8px;cursor:pointer}
.dp-btn.dp-apply{color:var(--fg,#111)}.dp-btn:disabled{opacity:.3;cursor:default}
.dp-btn.dp-cancel{color:var(--mute,#777)}

/* sortable gains headings */
table.gains th.gs-th{padding:0}
table.gains button.gs{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:9px 8px;margin:0;width:100%;text-align:inherit;white-space:nowrap;display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;-webkit-tap-highlight-color:transparent}
table.gains th.l button.gs{justify-content:flex-start}
table.gains button.gs .ga{font-size:.85em;opacity:.3;min-width:.7em;text-align:center}
table.gains th.gs-on{opacity:.95}table.gains th.gs-on button.gs .ga{opacity:.9}
table.gains button.gs:focus-visible{outline:2px solid var(--accent,#888);outline-offset:-2px;border-radius:4px}
@media (hover:hover){table.gains button.gs:hover .ga{opacity:.7}}
@container gw (max-width:560px){table.gains button.gs{padding:9px 3px}}

/* ---- next: gains view switch, expandable rows, symbols, wash flag ---- */
.gv{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px;font-size:12px}
.gv-seg{display:inline-flex;border:1px solid var(--rule-soft,rgba(0,0,0,.1));border-radius:14px;overflow:hidden}
.gv-seg button{background:none;border:0;padding:5px 9px;cursor:pointer;color:var(--mute,#777);font-size:12px;min-height:30px}
.gv-seg button[aria-pressed=true]{background:rgba(127,127,127,.16);color:var(--fg,#111)}
table.gains.gq td:nth-child(3),table.gains.gq th:nth-child(3){display:table-cell}
table.gains .qp small{opacity:.7}@container gw (max-width:560px){table.gains .qp{display:inline-block;line-height:1.2}table.gains td.l{max-width:30vw}}
table.gains tr.gr{cursor:pointer}
table.gains tr.gr.open td{border-bottom-color:transparent}
table.gains tr.gr:focus-visible{outline:2px solid var(--accent,#888);outline-offset:-2px}
table.gains tr.gd>td{padding:4px 8px 14px;white-space:normal;text-align:left}
table.gains:not(.show-closed) tr.gd.closed{display:none}
button.sym{background:none;border:0;padding:4px 2px;margin:-4px -2px;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:rgba(127,127,127,.55)}
button.sym:focus-visible{outline:2px solid var(--accent,#888);border-radius:3px}
.q-wash{color:#d9b56a}.q-loss{color:var(--neg,#9a3b2e)}
.qp small{opacity:.6}
.lvd{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:4px;vertical-align:2px;background:currentColor;opacity:.8}
.lvd.pos{background:var(--pos)}.lvd.neg{background:var(--neg)}
.gd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;font-size:12px}
.gd-grid small{display:block;opacity:.6;font-size:11px}.gd-grid b{font-weight:400;font-size:13px}
@media (max-width:600px){.gd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gd-acc{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;opacity:.8;margin-top:10px}
.gd-last{display:flex;gap:18px;margin-top:10px;font-size:12.5px}.gd-last b{font-weight:600}
.wash{margin-top:8px;font-size:12px;color:#d9b56a;line-height:1.4}
.gd-tr{margin-top:10px;max-height:260px;overflow:auto;-webkit-overflow-scrolling:touch}
.gd-tr table{width:100%;border-collapse:collapse;font-size:11.5px}
.gd-tr th,.gd-tr td,table.gains .gd-tr td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--rule-soft,rgba(0,0,0,.05));white-space:nowrap;font-weight:400}
.gd-tr th{opacity:.6}.gd-tr .l{text-align:left}
.gd-none{margin-top:8px;font-size:12px;opacity:.6}
.lv{font-size:10px;opacity:.6}
/* ticker pop-up */
body.tk-open{overflow:hidden}
.tk{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top) + 24px) 10px 24px;overflow:auto}
.tk-box{width:min(560px,100%);background:var(--card,#fff);color:var(--fg,#111);border:1px solid var(--rule-soft,rgba(0,0,0,.1));border-radius:14px;padding:14px 16px 12px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tk-hd{display:flex;align-items:baseline;gap:12px}.tk-hd b{font-size:18px;font-weight:500}.tk-px{font-size:14px;flex:1}.tk-px small{opacity:.6}
.tk-x{background:none;border:0;font-size:24px;line-height:1;width:40px;height:40px;margin:-8px -10px -8px 0;cursor:pointer;color:var(--mute,#777)}
.tk-rg{display:flex;gap:2px;margin:8px 0 6px}.tk-rg button{background:none;border:0;padding:6px 9px;border-radius:12px;cursor:pointer;color:var(--mute,#777);font-size:12.5px}
.tk-rg button[aria-pressed=true]{background:rgba(127,127,127,.16);color:var(--fg,#111)}
.tk-cv{display:block;width:100%;height:180px}
.tk-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 6px;font-size:12.5px}.tk-links a,.tk-news a{color:inherit}
.tk-pos{font-size:12.5px;margin-top:4px;color:var(--mute,#777)}.tk-pos b{color:var(--fg,#111);font-weight:400}
.tk-nh{margin-top:14px;font-size:11.5px;color:var(--mute,#777);text-transform:uppercase;letter-spacing:.04em}
.tk-news{list-style:none;margin:6px 0 0;padding:0;font-size:13px}.tk-news li{padding:7px 0;border-bottom:1px solid var(--rule-soft,rgba(0,0,0,.06))}
.tk-news small{display:block;color:var(--mute,#777);font-size:11.5px;margin-top:2px}.tk-nn{color:var(--mute,#777)}
.tk-ft{margin-top:10px;font-size:11px;color:var(--mute,#777)}
/* pull to refresh */
.ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;font-size:12px;color:var(--mute,#888);transition:height .15s}
.ptr span{padding-bottom:10px}.ptr.ready{color:var(--fg,#111)}
/* trade entry */
.tf summary{cursor:pointer;font-size:12.5px;color:var(--mute,#777);padding:6px 0;list-style:none}.tf summary::-webkit-details-marker{display:none}
.tf summary::before{content:"+ ";}.tf[open] summary::before{content:"− "}
.tf-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tf-t{border-collapse:collapse;font-size:13px;width:100%}.tf-t th{font-weight:400;font-size:11.5px;color:var(--mute,#777);text-align:left;padding:4px}
.tf-t td{padding:3px 3px}
.tf-t input,.tf-t select{font:inherit;font-size:14px;background:transparent;color:inherit;border:1px solid var(--rule,rgba(0,0,0,.15));border-radius:6px;padding:6px 6px;min-height:36px;width:100%;min-width:0}
.tf-t select option{background:var(--card,#fff);color:var(--fg,#111)}
.tf-t td:nth-child(1){min-width:150px}.tf-t td:nth-child(2){min-width:130px}.tf-t td:nth-child(4){min-width:64px}.tf-t td:nth-child(5),.tf-t td:nth-child(6){min-width:76px}.tf-t td:nth-child(7){min-width:52px}
.tf-del{background:none;border:0;color:var(--mute,#777);font-size:18px;width:34px;height:34px;cursor:pointer}
.tf-bar{display:flex;align-items:center;gap:10px;margin-top:8px}.tf-msg{flex:1;font-size:12px;color:var(--mute,#777)}
.tf-bar button{background:none;border:1px solid var(--rule,rgba(0,0,0,.15));border-radius:14px;padding:7px 14px;cursor:pointer;font-size:12.5px}
.tf-save{color:var(--fg,#111)}
.tf-note{font-size:11.5px;color:var(--mute,#777);margin-top:8px}
.tf-list{list-style:none;padding:0;margin:8px 0 0;font-size:12.5px}.tf-list li{padding:5px 0;border-bottom:1px solid var(--rule-soft,rgba(0,0,0,.06))}
.tf-list small{color:var(--mute,#777)}.tf-rm{background:none;border:0;color:var(--mute,#777);cursor:pointer;text-decoration:underline;font-size:11.5px}
/* currency + compare chips */
.chips{display:inline-flex;gap:2px;align-items:center}.chips button{background:none;border:0;padding:5px 9px;border-radius:12px;color:var(--mute,#777);cursor:pointer;font-size:12.5px}
.chips button[aria-pressed=true]{background:rgba(127,127,127,.16);color:var(--fg,#111)}
.demo-banner{font-size:12px;color:var(--mute,#777);border:1px solid var(--rule-soft,rgba(0,0,0,.1));border-radius:10px;padding:8px 12px;margin-top:12px}
.tf-copy{width:100%;margin-top:8px;font:12px ui-monospace,Menlo,monospace;background:transparent;color:inherit;border:1px solid var(--rule,rgba(0,0,0,.15));border-radius:6px;padding:6px}
.tf-cp{background:none;border:1px solid var(--rule,rgba(0,0,0,.15));border-radius:14px;padding:5px 12px;margin-top:4px;cursor:pointer;font-size:12px}
/* Symbol and Position columns shrink to their content (Position sits next to Symbol); Cost, Value and Gain share the rest */
table.gains.gq>thead>tr>th:nth-child(1),table.gains.gq>thead>tr>th:nth-child(2){width:1%}
table.gains.gq>thead>tr>th:nth-child(2) button.gs{padding-left:10px}table.gains.gq>tbody>tr.gr>td:nth-child(2){padding-left:10px}
@container gw (max-width:560px){table.gains.gq>thead>tr>th:nth-child(2) button.gs,table.gains.gq>tbody>tr.gr>td:nth-child(2){padding-left:6px}}

/* Value cell: value on top, cost basis below (small, muted); Port % */
table.gains .vc{display:inline-block;line-height:1.2}table.gains .vc small{display:block;font-size:.85em;opacity:.6;font-weight:400}
table.gains .wt{opacity:.85}