/* Money by What10 — App #9. Inherits central brand tokens (banner injects
   tokens.css); these :root values are a fallback. Light default; dark via
   :root[data-theme="dark"]. */
:root {
  --indigo:#4A00E0; --purple:#8E2DE2; --blue:#00D2FF;
  --grad:linear-gradient(135deg,#4A00E0 0%,#8E2DE2 100%);
  --ok:#0E9F6E; --warn:#C27803; --bad:#DC2626;
  --bg:#F7F8FC; --surface:#FFFFFF; --ink:#0B0F19; --ink-soft:#334155;
  --muted:#64748B; --border:#E6E9F2;
  --shadow:0 12px 34px -18px rgba(11,15,25,.24);
  --r-sm:10px; --r:14px; --r-lg:20px; --ease:cubic-bezier(.4,0,.2,1);
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"] {
  --bg:#0B0F19; --surface:#121829; --ink:#F1F5F9; --ink-soft:#cbd5e1;
  --muted:#94A3B8; --border:#26262B; --shadow:0 18px 44px -20px rgba(0,0,0,.7);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* author display rules must not override the hidden attribute */
html,body { margin:0; padding:0; }
body { font-family:var(--body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
.muted { color:var(--muted); }
a { color:var(--purple); }
.up { color:var(--ok); } .down { color:var(--bad); }
.wrap { max-width:1040px; margin:0 auto; padding:16px 22px 72px; }

/* portfolio tabs */
.pf-tabs { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0 16px; }
.pf-tab-wrap { display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.pf-tab-wrap.active { background:var(--grad); border-color:transparent; }
.pf-tab { font:inherit; font-weight:600; font-size:14px; color:var(--ink-soft); background:transparent; border:0; padding:8px 6px 8px 16px; cursor:pointer; }
.pf-dots { font:inherit; font-size:16px; line-height:1; color:var(--muted); background:transparent; border:0; padding:8px 12px 8px 5px; cursor:pointer; opacity:.65; }
.pf-dots:hover { opacity:1; }
.pf-tab-wrap.active .pf-tab, .pf-tab-wrap.active .pf-dots { color:#fff; opacity:1; }
.pf-new { font:inherit; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 13px; font-size:16px; line-height:1; cursor:pointer; }
.pf-new:hover { border-color:var(--purple); color:var(--purple); }
.pf-new-input { font:inherit; font-weight:600; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--purple); border-radius:999px; padding:7px 14px; width:180px; outline:none; }
/* consolidated "All portfolios" tab + drag-to-reorder */
.pf-all-wrap .pf-tab { padding-left:14px; }
.pf-all-tab { letter-spacing:.01em; }
.pf-all-wrap { border-style:dashed; }
.pf-all-wrap.active { border-style:solid; }
.pf-all-on { font:inherit; font-weight:600; font-size:13.5px; color:var(--muted); background:transparent; border:1px dashed var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; }
.pf-all-on:hover { border-color:var(--purple); color:var(--purple); }
.pf-grip { color:var(--muted); font-size:13px; line-height:1; padding:0 2px 0 10px; cursor:grab; opacity:.5; user-select:none; }
.pf-tab-wrap:hover .pf-grip { opacity:.85; }
.pf-tab-wrap.active .pf-grip { color:#fff; opacity:.8; }
.pf-tab-wrap[draggable] { cursor:default; }
.pf-tab-wrap.dragging { opacity:.45; }
.pf-tab-wrap.drop-into { outline:2px solid var(--purple); outline-offset:1px; }
/* consolidated "All portfolios" is READ-ONLY — hide every write affordance */
.viewall .search-row { display:none; }
.viewall-hint { display:flex; align-items:center; gap:8px; margin:2px 0 16px; padding:11px 15px; border:1px dashed var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--muted); font-size:13.5px; font-weight:600; }
.viewall-hint[hidden] { display:none; }
.viewall .hc-dots { display:none; }
.viewall #txnList .txn-main[data-edit] { pointer-events:none; }
.viewall #txnList .rm[data-del] { display:none; }
.viewall #txnList .divtax { pointer-events:none; opacity:.4; }

/* search */
.search-row { display:flex; align-items:stretch; gap:10px; margin-bottom:18px; }
.search { position:relative; flex:1 1 auto; min-width:0; }
.import-btn { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; font:inherit; font-weight:600; font-size:14px;
  color:var(--purple); background:color-mix(in srgb, var(--purple) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--purple) 35%, var(--border));
  border-radius:var(--r); padding:0 18px; cursor:pointer; box-shadow:var(--shadow); transition:background .12s, border-color .12s; white-space:nowrap; }
.import-btn:hover { background:color-mix(in srgb, var(--purple) 18%, var(--surface)); border-color:var(--purple); }
@media (max-width:560px) { .import-btn span { display:none; } .import-btn { padding:0 15px; } }
.search-box { display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:13px 16px; box-shadow:var(--shadow); }
.search-box:focus-within { border-color:var(--purple); }
.search-ic { font-size:18px; opacity:.7; }
#q { flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.spin { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.results { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:20; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; max-height:380px; overflow-y:auto; }
.res { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; border:0;
  background:transparent; color:var(--ink); font:inherit; padding:11px 14px; border-bottom:1px solid var(--border); }
.res:last-child { border-bottom:0; }
.res:hover { background:color-mix(in srgb, var(--purple) 8%, transparent); }
.res-flag { font-size:20px; width:24px; text-align:center; }
.res-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.res-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-sub { font-size:12.5px; }
.res-type { font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:1px 6px; align-self:flex-start; }
.res-add { font-size:12.5px; font-weight:700; color:var(--ok); }
.res-empty { padding:14px; }

/* stat cards */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; }
.stat-k { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.stat { min-width:0; }
.stat-v { font-family:var(--display); font-size:23px; line-height:1.15; overflow-wrap:anywhere; }
.stat-k { overflow-wrap:anywhere; }
.stat-note { font-size:12px; min-height:15px; overflow-wrap:anywhere; }
.stat-cur { justify-content:space-between; }
.stat-cur select { font:inherit; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 9px; margin-top:2px; }
.acct-ccy-note { display:block; font-size:12px; margin-top:6px; line-height:1.35; }
.base-override { font-size:12px; margin-top:6px; display:inline-block; }

/* portfolio settings dialog */
#pfSettings { border-top:1px solid var(--border); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:14px; }
.pf-ccy select { font:inherit; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; margin-top:4px; width:100%; }
.pf-merge { border-top:1px dashed var(--border); padding-top:14px; }
.pf-merge select { font:inherit; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; margin-top:4px; width:100%; }
.pf-merge-btn { margin-top:10px; width:100%; }
.pf-warn { font-size:11.5px; margin:8px 0 0; line-height:1.4; }

/* chart */
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:18px; }
/* chart + allocation side by side; allocation gets a narrow column */
.chart-row { display:flex; gap:18px; align-items:stretch; margin-bottom:18px; }
.chart-row .chart-card { margin-bottom:0; }
/* keep the chart ~70% and allocation ~30% so the side-by-side ratio holds as the row widens */
.chart-row > .chart-card:first-child { flex:65 1 0; min-width:0; }
.chart-row > #allocCard { flex:35 1 0; min-width:250px; }
/* anchor the donut to the top (don't float it in the vertical centre of the stretched card) */
.chart-row #allocCard .alloc { flex-direction:column; align-items:center; justify-content:flex-start; gap:18px; }
.chart-row #allocCard .alloc-legend { min-width:0; width:100%; }
@media (max-width:860px) {
  .chart-row { flex-direction:column; }
  .chart-row > #allocCard { flex-basis:auto; min-width:0; }
}
@media (min-width:561px) and (max-width:860px) {
  /* tablet: donut beside legend; phones keep it stacked to avoid overflow */
  .chart-row #allocCard .alloc { flex-direction:row; align-items:center; }
}
.chart-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.chart-head-l, .chart-head-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chart-delta { font-size:13px; font-weight:700; }
.chart-delta .up { color:var(--ok); } .chart-delta .down { color:var(--bad); }
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:3px; }
.seg-btn { font:inherit; font-size:13px; font-weight:600; color:var(--muted); background:transparent; border:0; border-radius:999px; padding:6px 13px; cursor:pointer; }
.seg-btn.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.seg-full { display:flex; margin:6px 0 4px; }
.seg-full .seg-btn { flex:1; }
.icon-btn { font:inherit; font-size:16px; line-height:1; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 10px; cursor:pointer; }
.icon-btn:hover { border-color:var(--purple); color:var(--purple); }

.chart { position:relative; min-height:250px; }
.spark { width:100%; display:block; }
.spark .grid { stroke:var(--border); stroke-width:1; opacity:.55; }
.spark .grid.vg { opacity:.32; }
.spark .zero { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; opacity:.7; }
.spark .ax { fill:var(--muted); font-family:var(--body); font-size:10.5px; }
.spark .cross .cl { stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }
.spark .cross .cd { fill:var(--surface); stroke:var(--purple); stroke-width:2; }
.spark .mk.buy { fill:var(--ok); } .spark .mk.sell { fill:var(--bad); }
.spark .hit { cursor:crosshair; }
.ch-tip { position:absolute; top:6px; transform:translateX(-50%); pointer-events:none; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:7px 11px; min-width:110px; text-align:center; z-index:5; }
.ch-tip .tip-v { font-family:var(--display); font-weight:700; font-size:15px; }
.ch-tip .tip-d { font-size:11.5px; color:var(--muted); margin:1px 0 3px; }
.ch-tip .tip-x { font-size:12px; font-weight:600; }
.ch-tip .tip-x.up { color:var(--ok); } .ch-tip .tip-x.down { color:var(--bad); }
.chart-empty { height:206px; display:grid; place-items:center; }

/* fullscreen chart */
.chart-fs { position:fixed; inset:0; z-index:1000; background:var(--bg); display:flex; flex-direction:column; padding:14px 18px 22px; }
.chart-fs-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.chart-fs-l { display:flex; align-items:baseline; gap:12px; }
.chart-fs-l strong { font-family:var(--display); font-size:18px; }
.chart-fs-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chart-fs-body { flex:1; position:relative; display:flex; align-items:center; }
.chart-fs-body > svg, .chart-fs-body .spark { width:100%; }

/* holdings cards */
.empty { text-align:center; padding:34px 16px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); margin-bottom:16px; }
.empty-ic { font-size:40px; }
.empty-title { font-family:var(--display); font-size:20px; color:var(--ink); margin:6px 0 4px; }
.empty .muted { max-width:420px; margin:0 auto; }
.empty.drag { border-color:var(--purple); background:color-mix(in srgb, var(--purple) 7%, var(--surface)); }
.empty-import { margin:16px auto 4px; font-size:15px; padding:12px 22px; }
.empty-sub { font-size:12px; }
.holdings { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.num { text-align:right; white-space:nowrap; }
.h-co { font-weight:600; }
a.h-co { color:var(--ink); text-decoration:none; }
a.h-co:hover { color:var(--purple); text-decoration:underline; }
.h-tk { font-size:12px; }
.hcard { display:grid; grid-template-columns:minmax(0,1fr) auto auto 36px; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; cursor:pointer; transition:border-color .12s; }
.hcard:hover { border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); }
.hcard.focused { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple) inset, var(--shadow); }
.hc-c1 { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hc-name { display:flex; flex-direction:column; min-width:0; }
.hc-name .h-co { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hc-mkt { font-size:13px; display:flex; align-items:center; gap:6px; }
.hc-exch { font-size:11.5px; color:var(--muted); font-weight:600; }
.hc-qa { font-size:12.5px; }
.hc-c2 { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.hc-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }
.hc-price { font-weight:600; font-variant-numeric:tabular-nums; }
/* Day move on the QUOTE, beside the price. Lighter than the value chips so the
   price stays the dominant number in that column. */
.hc-pxday { margin-left:6px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hc-pxday.up { color:var(--ok); } .hc-pxday.down { color:var(--bad); }
.hc-c3 { display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:130px; }
.hc-val { font-family:var(--display); font-size:17px; font-variant-numeric:tabular-nums; }
.hc-pl { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.hc-pl.up { color:var(--ok); } .hc-pl.down { color:var(--bad); }
.hc-menu { display:flex; justify-content:center; }
.hc-dots { font-size:18px; line-height:1; color:var(--muted); background:transparent; border:0; border-radius:8px; padding:4px 8px; cursor:pointer; }
.hc-dots:hover { background:var(--bg); color:var(--purple); }
.hc-pop { position:absolute; z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:5px; display:flex; flex-direction:column; min-width:120px; }
.hc-pop button { text-align:left; background:transparent; border:0; font:inherit; font-size:14px; color:var(--ink); padding:8px 12px; border-radius:7px; cursor:pointer; }
.hc-pop button:hover { background:var(--bg); }
.hc-pop button.danger { color:var(--bad); }
@media (max-width:560px) {
  /* Two columns -- content, plus the ⋯ menu -- and one row per block.
     The previous layout put the price cell and the value/P-L cell side by side in
     a single row, which only fitted while the price was a bare number. Adding the
     day-move percentage overflowed the row, so the value wrapped ABOVE the price
     and the card read out of order. At this width there is no room for two
     numeric columns; stacking is what actually fits. */
  .hcard { grid-template-columns:minmax(0,1fr) 30px; gap:6px 12px; align-items:start; }
  .hc-c1 { grid-column:1; grid-row:1; }
  .hc-menu { grid-column:2; grid-row:1; align-self:start; }
  /* baseline, not flex-start: the PRICE label is 10.5px and the price 15px, and
     top-aligning them left the label floating above the digits. */
  .hc-c2 { grid-column:1 / span 2; grid-row:2; flex-direction:row; align-items:baseline;
           gap:6px; flex-wrap:wrap; }
  .hc-c3 { grid-column:1 / span 2; grid-row:3; align-items:flex-start; min-width:0; }
  .hc-val { font-size:19px; }        /* it is the headline number once left-aligned */
}
.asof { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 2px 14px; font-size:13px; }
.asof-pick { position:relative; display:inline-block; }
/* transparent date input sits on top of the pill, so a tap opens the picker on mobile */
.asof-native { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
.asof-pill { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:6px 13px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.asof-pill:hover { border-color:var(--purple); color:var(--purple); background:var(--surface); }
.asof-pill.custom { background:color-mix(in srgb, var(--purple) 13%, transparent); border-color:transparent; color:var(--purple); }
.asof-pill .ic-cal { flex:0 0 auto; opacity:.85; }
.asof-pill.custom .ic-cal { opacity:1; }
.asof-clear { font:inherit; font-size:12px; font-weight:600; color:var(--muted); background:transparent; border:0; cursor:pointer; padding:4px 6px; }
.asof-clear:hover { color:var(--bad); }
#asOfNote { font-style:italic; }

/* performance period bar */
.period { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:2px 2px 4px; font-size:13px; }
.period-lbl { font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:11px; }
.period-spacer { flex:1 1 16px; }
.asof-lbl { font-size:12px; }
.period-range { display:inline-flex; align-items:center; gap:7px; }
.datep { font:inherit; font-size:12.5px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:6px 12px; cursor:pointer; }
.datep:focus, .datep:hover { border-color:var(--purple); outline:none; }
.period-note { font-style:italic; font-size:12px; margin:0 2px 12px; min-height:0; }
.period-note:empty { margin-bottom:6px; }
#periodSeg.muted-disabled { opacity:.45; pointer-events:none; }
/* period chip in the P/L tile titles */
.stat-chip { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.02em; color:var(--purple);
  background:color-mix(in srgb, var(--purple) 13%, transparent); border-radius:999px; padding:1px 7px; vertical-align:middle; margin-left:4px; }
.h-mkt { white-space:nowrap; }
.h-val { font-weight:700; }
.pl-pct { display:block; font-size:11px; font-weight:600; opacity:.85; }
.h-act { white-space:nowrap; }
.mini { font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:5px 11px; cursor:pointer; }
.mini:hover { border-color:var(--purple); color:var(--purple); }
.mini.buy:hover { border-color:var(--ok); color:var(--ok); }
.mini.sell:hover { border-color:var(--bad); color:var(--bad); }
.h-act { white-space:nowrap; display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.link-mini { display:inline-block; background:transparent; border:0; color:var(--purple); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0; margin:4px 0 0; }
.rm { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; padding:5px 7px; border-radius:8px; }
.rm:hover { color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }

/* transactions */
.txns { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:6px 16px; margin-bottom:16px; }
.txns summary { cursor:pointer; font-weight:600; padding:10px 0; }
.txn-list { padding-bottom:8px; }
.txn { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border); font-size:13.5px; }
.txn-act { font-size:10.5px; font-weight:800; border-radius:6px; padding:2px 7px; }
.txn-act.buy { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.txn-act.sell { color:var(--bad); background:color-mix(in srgb, var(--bad) 14%, transparent); }
.txn-main { flex:1; text-align:left; background:transparent; border:0; font:inherit; color:var(--ink); cursor:pointer; padding:0; }
.txn-main:hover { color:var(--purple); }
.txn-date { font-size:12.5px; }
/* Activity timeline (US-000127): unified read-only feed with a base-amount column.
   (.txn-act.div / .split badge colours are defined with the dividend section below.) */
.txn-amt { flex:0 0 auto; min-width:74px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; white-space:nowrap; color:var(--ink-soft); }
.txn-amt.up { color:var(--ok); }
.act-main { cursor:default; }
.act-main:hover { color:var(--ink); }
.seg-sort .seg-btn { font-size:12px; padding:5px 11px; }

/* closed positions (bought and fully sold; collapsed by default) */
.closed-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:6px 16px; margin-bottom:16px; }
.closed-box summary { cursor:pointer; font-weight:600; padding:10px 0; }
.closed-box .closed-sub { font-weight:400; font-size:12.5px; }
.closed-list { padding-bottom:8px; }
.closed-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:13.5px; }
.closed-name { flex:1; text-align:left; }
.closed-pl { font-weight:700; font-size:13px; white-space:nowrap; }
.closed-pl.up { color:var(--ok); }
.closed-pl.down { color:var(--bad); }

/* dividends list */
.stat-click { cursor:pointer; }
.stat-click:hover { border-color:var(--purple); }
.div-auto { font-weight:400; font-size:12px; }
.div-help { font-size:12px; margin:2px 0 8px; line-height:1.4; }
.div-list { padding-bottom:8px; }
.divrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 0; border-top:1px solid var(--border); font-size:13.5px; }
.divrow-main { flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:1px; }
.divrow-sym { font-weight:700; }
.divrow-meta { font-size:12px; }
.divrow-nums { display:flex; align-items:center; gap:14px; }
.divrow-tax { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.divtax { width:74px; font:inherit; font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:5px 8px; }
.divtax:focus { border-color:var(--purple); outline:none; }
.divrow-net { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.divrow-base { font-weight:400; font-size:12px; }
/* transaction filter bar + dividend rows inside the txn list */
.txn-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:8px 0 6px; }
.txn-empty { padding:14px 2px; }
.txn .divrow-tax { flex:0 0 auto; }
.txn .divrow-net { flex:0 0 auto; min-width:74px; }
.chart-title { font-family:var(--display); font-size:16px; }
/* total-value tile: inline as-of picker */
.tv-asof { display:flex; align-items:center; gap:4px; margin:2px 0; }
.asof-pill.sm { font-size:11.5px; font-weight:600; padding:4px 10px; }

/* import dialog */
.imp-drop { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1.5px dashed var(--border); border-radius:var(--r-sm); padding:16px; margin:6px 0; transition:border-color .12s, background .12s; }
.imp-drop.drag { border-color:var(--purple); background:color-mix(in srgb, var(--purple) 8%, transparent); }
.imp-drop-ic { font-size:22px; color:var(--purple); }
.imp-drop-txt { font-size:13px; line-height:1.5; }
.imp-formats { display:block; font-size:12px; }
.imp-paste { width:100%; min-height:64px; font:inherit; font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 11px; resize:vertical; }
.imp-status { font-size:12.5px; min-height:18px; margin:6px 0; }
/* Reading overlay: brand loader + message, covering the dialog body so users
   can't start another upload mid-read. */
.imp-load { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px;
  background:color-mix(in srgb, var(--surface) 93%, transparent); border-radius:var(--r-md); }
.imp-load-img { width:92px; height:92px; }
.imp-load-msg { font-weight:700; font-size:15px; color:var(--ink); }
.imp-load-sub { font-size:12.5px; max-width:300px; line-height:1.5; }
/* Dashboard loading overlay — covers the portfolio area while a portfolio loads
   so the user sees a brand loader instead of a blank/stale dashboard. */
.dash-load { position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:color-mix(in srgb, var(--bg) 95%, transparent); }
.dash-load-img { width:96px; height:96px; }
.dash-load-msg { font-weight:700; font-size:15px; color:var(--ink); }
.imp-aibox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 2px; }
.btn-ai { background:var(--grad); color:#fff; border:0; border-radius:var(--r-sm); padding:10px 16px; font:inherit; font-weight:700; cursor:pointer; }
.btn-ai:hover { filter:brightness(1.05); }
.imp-aihint { font-size:12px; flex:1; min-width:160px; }
.imp-term { font-size:11.5px; line-height:1.5; color:var(--muted); margin:6px 0 2px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); }
.empty .imp-term { max-width:420px; margin:14px auto 0; text-align:left; }
.btn-ai { width:100%; margin:4px 0 2px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.empty-import { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
/* Import actions row: primary Import + secondary Compare-engines */
.imp-acts { display:flex; gap:8px; align-items:stretch; margin:4px 0 2px; }
.imp-acts .btn-ai { width:auto; flex:1; margin:0; }
.btn-cmp { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; font-size:13px;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 13px; cursor:pointer; }
.btn-cmp:hover { border-color:var(--purple); color:var(--purple); }
/* Compare results / saved-record viewer */
.imp-compare { margin-top:10px; }
/* Side-by-side engine columns; scroll horizontally when there are many engines. */
.cmp-grid { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.cmp-col { flex:1 0 230px; min-width:230px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); overflow:hidden; }
.cmp-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-weight:700; font-size:13px;
  padding:8px 11px; border-bottom:1px solid var(--border); background:var(--bg); }
.cmp-n { font-weight:600; font-size:11.5px; color:var(--muted); }
.cmp-err { font-weight:600; font-size:11.5px; color:var(--neg, #DC2626); }
.cmp-empty { padding:10px 11px; font-size:12.5px; }
.cmp-tbl { width:100%; border-collapse:collapse; font-size:12px; display:block; max-height:240px; overflow-y:auto; }
.cmp-tbl th { text-align:left; color:var(--muted); font-weight:600; padding:5px 8px; position:sticky; top:0; background:var(--surface); }
.cmp-tbl td { padding:4px 8px; border-top:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.cmp-tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.cmp-diff { font-size:12.5px; margin-top:8px; }
.cmp-note { font-size:11.5px; margin-top:6px; }
.cmp-input { margin:0; padding:10px 11px; font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  max-height:240px; overflow:auto; background:var(--surface); color:var(--ink-soft); }
/* History & privacy */
.imp-hist { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.imp-hist > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); list-style:none; }
.imp-hist > summary::-webkit-details-marker { display:none; }
.imp-hist > summary::before { content:"▸ "; }
.imp-hist[open] > summary::before { content:"▾ "; }
.imp-consent { display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--ink-soft); margin:10px 0; }
.imp-consent input { margin-top:2px; flex:0 0 auto; }
.imp-hist-list { font-size:12px; margin:6px 0; }
.hist-ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; max-height:170px; overflow-y:auto; }
.hist-row { display:block; width:100%; text-align:left; font:inherit; font-size:12px; color:var(--ink-soft); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 9px; cursor:pointer; }
.hist-row:hover { border-color:var(--purple); color:var(--purple); }
.hist-eng { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:1px 6px; margin-right:5px; }
.eng-claude, .eng-ai { color:var(--purple); background:color-mix(in srgb, var(--purple) 12%, transparent); }
.eng-qwen, .eng-self-hosted { color:#0891B2; background:color-mix(in srgb, #0891B2 13%, transparent); }
.imp-danger { color:var(--neg, #DC2626); margin-top:4px; }
/* Import is AI-only and grant-gated — hide every import affordance without it. */
.wrap.noimport .imp-only { display:none !important; }
.search-only { display:none; }
.wrap.noimport .search-only { display:block; }
.imp-gateblock { padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); margin:6px 0; }
.imp-manual { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.imp-manualhint { font-size:12px; margin:2px 0 8px; }
/* sign-in gate: gate ONLY the Portfolio tab's content (Market/Analytics stay public) */
.wrap.gated #apanel-portfolio > *:not(#gate) { display:none !important; }
.gate { text-align:center; padding:48px 20px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); margin:24px auto; max-width:460px; }
.gate-ic { font-size:42px; }
.gate-title { font-family:var(--display); font-size:22px; color:var(--ink); margin:8px 0 6px; }
.gate .muted { max-width:380px; margin:0 auto; }
.gate-btn { display:inline-block; margin-top:18px; text-decoration:none; }
.imp-preview { margin-top:6px; }
.imp-hdr { display:flex; align-items:center; gap:7px; font-size:12.5px; margin-bottom:6px; }
.imp-tablewrap { overflow:auto; border:1px solid var(--border); border-radius:var(--r-sm); max-height:230px; }
.imp-table { border-collapse:collapse; font-size:12.5px; width:100%; }
.imp-table th { position:sticky; top:0; background:var(--surface); padding:6px; border-bottom:1px solid var(--border); }
.imp-table td { padding:5px 6px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--ink-soft); }
.imp-col { font:inherit; font-size:12px; padding:3px 6px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--ink); }
.imp-count { font-size:12px; margin-top:6px; }
.imp-matches { margin-top:10px; display:flex; flex-direction:column; gap:4px; max-height:170px; overflow:auto; }
.imp-mtitle { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:2px; }
.imp-mrow { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.imp-mfrom { flex:0 0 auto; font-weight:600; }
.imp-marrow { color:var(--muted); }
.imp-mto { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
.imp-warn { color:var(--bad); font-weight:600; }

.sync-note { margin:6px 2px 0; font-size:13px; }

/* dialogs */
.dlg { border:0; border-radius:var(--r-lg); padding:0; background:transparent; max-width:92vw; }
.dlg::backdrop { background:rgba(11,15,25,.45); backdrop-filter:blur(2px); }
.dlg form { background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; width:400px; max-width:92vw; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); }
.dlg h3 { font-family:var(--display); margin:0 0 2px; }
.dlg label { display:block; font-size:13px; font-weight:600; margin:14px 0 0; }
.dlg input, .dlg select { display:block; width:100%; margin-top:6px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; }
.txn-hint { font-size:12.5px; margin:10px 0 0; min-height:14px; }
.dlg-actions { display:flex; align-items:center; gap:10px; margin-top:20px; }
.btn-primary { background:var(--grad); color:#fff; border:0; border-radius:var(--r-sm); padding:10px 18px; font:inherit; font-weight:700; cursor:pointer; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; }
.link-danger { background:transparent; border:0; color:var(--bad); font:inherit; font-weight:600; cursor:pointer; padding:6px 0; }

/* benchmark + chart extras */
.bench-sel { font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 9px; cursor:pointer; }
.spark .bench { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4; opacity:.7; }
.spark .sel { fill:var(--purple); opacity:.12; }
.chart-focus { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); background:color-mix(in srgb, var(--purple) 12%, transparent); border-radius:999px; padding:5px 12px; margin-bottom:8px; }
.chart-focus button { background:transparent; border:0; color:var(--muted); font:inherit; font-weight:800; cursor:pointer; line-height:1; }
.chart-focus button:hover { color:var(--bad); }
.chart-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.chart-hint { font-size:11.5px; }
.chart-foot-r { display:inline-flex; gap:14px; }

/* allocation donut */
.alloc { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.alloc-seg { margin-bottom:14px; }
.donut { flex:0 0 auto; max-width:100%; }
.alloc-fs-body { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; padding:24px; overflow:auto; }
.alloc-fs-body .alloc-legend { flex:0 1 360px; gap:11px; }
.alloc-fs-body .alloc-li { font-size:15px; }
.alloc-legend { display:flex; flex-direction:column; gap:7px; flex:1; min-width:200px; }
.alloc-li { display:flex; align-items:baseline; gap:9px; font-size:13px; }
.alloc-dot { width:11px; height:11px; border-radius:3px; flex:0 0 auto; align-self:center; }
.alloc-k { font-weight:600; color:var(--ink); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alloc-v { color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; white-space:nowrap; font-size:12.5px; }
/* donut hover tooltip */
.alloc { position:relative; }
.alloc .donut path, .alloc .donut circle { transition:opacity .1s; cursor:pointer; }
.alloc-tip { position:absolute; z-index:5; pointer-events:none; background:var(--ink); color:#fff;
  border-radius:8px; padding:7px 10px; font-size:12px; line-height:1.45; box-shadow:0 4px 14px rgba(0,0,0,.22); white-space:nowrap; }
.alloc-tip strong { font-size:12.5px; }

/* extra txn tags + clickable rows */
.txn-act.div { color:var(--purple); background:color-mix(in srgb, var(--purple) 14%, transparent); }
.txn-act.cash { color:var(--ink-soft); background:color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.txn-act.split { color:var(--muted); background:color-mix(in srgb, var(--muted) 16%, transparent); }
.rowclick { cursor:pointer; }
.rowclick:hover td { background:color-mix(in srgb, var(--purple) 6%, transparent); }
tr.focused td { background:color-mix(in srgb, var(--purple) 11%, transparent); }

@media (max-width:720px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-v { font-size:18px; }   /* fit values on one line in the 2-col phone layout */
  .stat-k { font-size:11px; }
}

/* ── Notifications: bell + dropdown panel + settings ───────────────────────── */
.tabbar { display:flex; align-items:center; gap:12px; }
.notif-wrap { margin-left:auto; position:relative; }
.notif-bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); cursor:pointer; }
.notif-bell:hover { border-color:var(--purple); color:var(--purple); }
.notif-badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--bg); }
.notif-panel { position:absolute; top:46px; right:0; width:360px; max-width:92vw; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.18); z-index:60; overflow:hidden; }
.notif-top { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.notif-top strong { font-size:15px; }
.notif-top-actions { display:flex; align-items:center; gap:6px; }
.notif-link { font:inherit; font-size:12.5px; font-weight:600; color:var(--purple); background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:6px; }
.notif-link:hover { background:var(--bg); }
.notif-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; border:0; background:none; color:var(--muted); cursor:pointer; }
.notif-icon:hover { background:var(--bg); color:var(--ink); }
.notif-list { max-height:min(420px,60vh); overflow-y:auto; }
.notif-item { display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none; color:inherit; }
.notif-item:last-child { border-bottom:0; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:color-mix(in srgb, var(--purple) 7%, transparent); }
.notif-dot { flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.notif-dot.move-up { background:rgba(48,164,108,.15); color:#1f9d5b; }
.notif-dot.move-down { background:rgba(229,72,77,.14); color:#e5484d; }
.notif-dot.news { background:color-mix(in srgb, var(--purple) 14%, transparent); color:var(--purple); }
.notif-body { min-width:0; flex:1; }
.notif-title { font-size:13.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.notif-sub { font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.notif-empty { padding:34px 16px; text-align:center; color:var(--muted); font-size:13.5px; }
.notif-settings { padding:8px 14px 14px; border-top:1px solid var(--border); }
.notif-set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; font-size:13.5px; font-weight:500; border-bottom:1px solid var(--border); }
.notif-set-row:last-of-type { border-bottom:0; }
.notif-set-sub { justify-content:flex-start; flex-wrap:wrap; font-weight:400; color:var(--ink-soft); }
.notif-set-sub select { font:inherit; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:4px 7px; }
.notif-set-row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--purple); cursor:pointer; }
.notif-set-note { font-size:12px; margin-top:8px; }

/* per-holding transactions dialog */
/* The holding-transactions dialog is the ONE dialog with no <form> inside it, and
   `.dlg` is deliberately transparent -- the visible card is painted by `.dlg form`.
   So this dialog rendered with no surface at all: title, lot rows and dates sat
   directly on top of the value chart, gridlines showing through the text. It has
   to paint its own card, matching `.dlg form` exactly so the two dialog styles
   cannot drift apart. */
.ht-dlg { max-width:480px; width:calc(100vw - 32px);
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 24px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow); }
.ht-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ht-head-t h3 { margin:0 0 2px; }
.ht-head-t p { margin:0; font-size:13px; }
.ht-close { font:inherit; font-size:18px; line-height:1; color:var(--muted); background:none; border:0; cursor:pointer; padding:4px 8px; border-radius:8px; }
.ht-close:hover { background:var(--bg); color:var(--ink); }
.ht-list { max-height:min(60vh,440px); overflow-y:auto; }
.ht-empty { padding:20px 4px; text-align:center; }

/* Share-card button: a filled pill so it stands out from the CSV/PNG text links */
.share-mini { color:#fff; background:var(--purple); border-radius:999px; padding:3px 11px; margin-right:8px; }
.share-mini:hover { filter:brightness(1.08); }

/* Public "Get the Android app" strip below the footer (links to /download). */
.app-get-strip { text-align:center; padding:6px 16px 26px; }
.app-get { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px;
  font-weight:600; text-decoration:none; padding:7px 14px; border:1px solid var(--line); border-radius:999px; }
.app-get:hover { color:var(--purple); border-color:var(--purple); }