/* ============================================================================
 * JagSim — /portfolio page.
 * Full rebuild to the owner's mockup (2026-08-16). Replaces the page's old
 * inline <style> block and css/restyle/holdings.css.
 *
 * Structure this file styles:
 *   header.pt-appbar            (the site's real nav — shell CSS owns it)
 *   .pf-page  = 260px rail + fluid content
 *     aside.pf-rail             nav card · Pro card · Market Status · user chip
 *     main.pf-main              hero · KPI row · main-grid · more · disclaimer
 *
 * Design tokens are the owner's, verbatim. Inter 500-900 only — never 400.
 * Mono is for prices/numbers/data ONLY. Green is primary; copper is a
 * secondary accent used sparingly. Desktop-first, calm, data-dense.
 *
 * NOTE ON LEGACY CLASS NAMES: js/portfolio-page.*.js writes innerHTML that
 * carries class names from the previous design (sum-v, h-symbol, lg-dot,
 * st-cell, opt-go, pd-row, trade-side-buy …). Those names are a DOM contract,
 * not a style choice — they are styled here rather than renamed, so the money
 * values keep painting while the page changes shape.
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --head: var(--jag-card-2, #f7f9fb);

  --ink: var(--jag-ink, #1a1f29);
  --ink2: #3f4753;
  --muted: #6b7480;
  --muted2: #8a93a0;

  --line: #e4e8ee;
  --line2: #d6dce4;

  --pos: #117a37;
  --neg: #b4232a;
  --link: #15569e;
  --link-bg: #eef4fb;

  --brand: var(--jag-green, var(--jag-green));
  --green: var(--jag-green, var(--jag-green));
  --green-pressed: #005a40;
  --green-tint: var(--jag-green-soft, #E8F7EF);

  --pro: #BB5C2D;
  --accent: #BB5C2D;
  --pro-pressed: #a04f26;
  --pro-tint: #fbeee7;

  --amber: #c48a2d;
  --amber-bg: #FDF0D9;
  --amber-text: #8A5300;

  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-panel: 20px;
  --r-card: 18px;
  --r-btn: 12px;
  --r-chip: 999px;

  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lift: 0 8px 26px rgba(16, 24, 40, .12);

  --appbar-h: 88px;
  --rail-w: 260px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE. This file had NONE — not one dark rule, measured 2026-08-22.

   It only ever looked half-right because a few tokens alias globals that do
   flip (--head -> --jag-card-2, --line). Everything hard-coded here stayed a
   LIGHT value on a dark ground. Measured in-browser against the real deployed
   sheets, dark mode:

       .h-type  "STOCK"   #3f4753 on #1B2533  =  1.65:1   (floor is 4.5)
       .h-type  "CRYPTO"  #005a40 on #123A28  =  1.53:1
       .h-type  "ETF"     painted on #eef4fb  -  a WHITE pill on a dark table

   Owner: "I can't see the type for the stock on dark mode still on any of the
   pages... look at the word stock, you see how it blends in with the
   background?" He is right, and 1.65:1 is why. --ink2 alone has nine consumers
   on this page and every one of them was dark-grey-on-dark-navy.

   The fix is to POINT AT THE GLOBAL RAMP rather than invent a second one.
   css/tokens.css already carries a measured dark set; a local copy would be a
   second owner of the same value and would drift. Selector matches tokens.css
   exactly: jagStampTheme() removes data-chart-theme in light and sets "dark"
   in dark, so this attribute is the whole truth.
   ═════════════════════════════════════════════════════════════════════════ */
html[data-chart-theme="dark"] {
  --bg:            var(--jag-page);
  --panel:         var(--jag-card);
  --head:          var(--jag-card-2);

  --ink:           var(--jag-ink);
  --ink2:          var(--jag-ink-2);       /* 9.4:1 — was #3f4753 at 1.65:1 */
  --muted:         var(--jag-ink-muted);   /* 6.6:1 */
  --muted2:        var(--jag-ink-faint);   /* 4.6:1, the floor */

  --line:          var(--jag-line);
  --line2:         var(--jag-line-strong);

  --pos:           var(--jag-up);          /* 9.6:1 */
  --neg:           var(--jag-down);        /* 6.4:1 */

  /* No link token exists in the global dark ramp, so these two are new and are
     measured below rather than eyeballed. */
  --link:          #7CB2EE;
  --link-bg:       #16273D;

  --green-pressed: var(--jag-green-deep);
  --green-tint:    var(--jag-green-soft);

  --pro:           var(--jag-pro);
  --accent:        var(--jag-pro);
  --pro-pressed:   var(--jag-pro-deep);
  --pro-tint:      #33200F;

  --amber:         #E8A33D;
  --amber-bg:      #2A1D10;
  --amber-text:    #F0B878;
}

/* The three type chips each need their border re-grounded too - a light border
   on a dark pill reads as a smudge. */
html[data-chart-theme="dark"] .h-type-crypto { border-color: var(--jag-green-line); }
html[data-chart-theme="dark"] .h-type-etf    { border-color: #2B4266; }


html { -webkit-text-size-adjust: 100%; }

body.pt-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Mono is data-only. Never body copy. */
.num, .pf-mono,
.sum-v, .sum-sub.num,
.lg-pct, .lg-val, .sct-pct, .ds-when, .ds-amt,
.st-v, .pd-v, .mv-pct, .range-period-pct { font-variant-numeric: tabular-nums; }
.num, .pf-mono, .sum-v, .st-v, .pd-v, .range-period-pct,
#holdingsTable tbody td.num, #tradesList td.num, #openOrdersTbody td.num,
#optionsList td.num, #watchlistList td.num {
  /* INHERIT, not --mono. The hero Account Value carries no .num class, so it
     rendered in Inter while the Market Value column two cards below rendered in
     SF Mono — the same dollar figure in two typefaces on one screen, which is
     what "the portfolio page has four different CSS styles" is pointing at.
     tabular-nums is what mono was actually buying (equal digit widths so columns
     align and live figures don't jitter), and it is declared four lines up. */
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--muted2); }

a { color: inherit; }

/* Section anchors must clear the 88px sticky appbar when jumped to. */
[id] { scroll-margin-top: calc(var(--appbar-h) + 18px); }

/* Legacy shell bits this page no longer renders. */
body.paper-trading #navStats,
body.paper-trading .port-nav-stats { display: none !important; }

/* ── Page grid ───────────────────────────────────────────────────────────── */
.pf-page {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: 18px;
  width: min(1360px, 100% - 48px);
  margin: 24px auto 32px;
  align-items: start;
}
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.pf-rail {
  position: sticky;
  top: calc(var(--appbar-h) + 14px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.pf-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.pf-card-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Section nav */
.pf-nav { padding: 8px; }
.pf-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink2);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.pf-nav a::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line2);
  flex: none;
  transition: background .12s, transform .12s;
}
.pf-nav a:hover { background: var(--head); color: var(--ink); }
.pf-nav a[aria-current="true"] {
  background: var(--green-tint);
  color: var(--green-pressed);
  font-weight: 800;
}
.pf-nav a[aria-current="true"]::before { background: var(--green); transform: scale(1.25); }
.pf-nav a[hidden] { display: none; }

/* Pro upgrade card — hidden by default; revealed only for confirmed non-Pro. */
.pf-pro { padding: 16px; border-color: #f0dccf; background: var(--pro-tint); }
.pf-pro[hidden] { display: none; }
.pf-pro-k { color: var(--pro); }
.pf-pro-h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 7px 0 4px; color: var(--ink); }
.pf-pro-p { font-size: 12.5px; font-weight: 500; color: var(--ink2); line-height: 1.45; }
.pf-btn {
  display: flex; align-items: center; justify-content: center;
  height: 42px; border-radius: var(--r-btn);
  border: 1px solid transparent;
  font: inherit; font-size: 13.5px; font-weight: 800;
  text-decoration: none; cursor: pointer; width: 100%;
  transition: background .12s, box-shadow .12s;
}
.pf-btn-pro { margin-top: 12px; background: var(--pro); color: #fff; }
.pf-btn-pro:hover { background: var(--pro-pressed); }
.pf-btn-green { background: var(--green); color: #fff; }
.pf-btn-green:hover { background: var(--green-pressed); }

/* Market status — the one saturated block in the rail. It is a status light. */
.pf-mkt { padding: 16px; background: var(--green-pressed); border-color: #00452f; color: #eaf5f0; }
.pf-mkt .pf-card-k { color: rgba(234, 245, 240, .62); }
.pf-mkt-state {
  display: flex; align-items: center; gap: 9px;
  margin-top: 9px; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
.pf-mkt-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #7ee2b0; box-shadow: 0 0 0 4px rgba(126, 226, 176, .18);
}
.pf-mkt[data-state="closed"] .pf-mkt-dot { background: #f0b7a4; box-shadow: 0 0 0 4px rgba(240, 183, 164, .16); }
.pf-mkt[data-state="unknown"] .pf-mkt-dot { background: #9fb3ab; box-shadow: none; }
.pf-mkt-label { margin-top: 14px; }
.pf-mkt-count {
  margin-top: 4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.1;
}
.pf-mkt-note { margin-top: 8px; font-size: 11.5px; font-weight: 500; color: rgba(234, 245, 240, .72); line-height: 1.4; }

/* User chip */
.pf-user { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.pf-user-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  font-size: 15px; font-weight: 800;
}
.pf-user-txt { min-width: 0; }
.pf-user-name {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-user-tier { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); }
body[data-tier^="pro"] .pf-user-tier { color: var(--pro); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pf-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pf-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
}
.pf-hero h1 {
  margin-top: 7px;
  font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.16;
  color: var(--ink); max-width: 28ch;
}
.pf-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-meta {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; min-width: 148px; box-shadow: var(--shadow);
}
.pf-meta .pf-card-k { display: block; margin-bottom: 5px; }

/* #marketStatus is repainted by JS as `mkt-pill mkt-open|mkt-pre|mkt-closed`
   with an inner .mkt-dot — style those names, do not rename them. */
.mkt-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--ink2);
}
.mkt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted2); }
.mkt-open { color: var(--pos); }
.mkt-open .mkt-dot { background: var(--pos); box-shadow: 0 0 0 3px rgba(17, 122, 55, .14); }
.mkt-pre { color: var(--amber-text); }
.mkt-pre .mkt-dot { background: var(--amber); }
.mkt-closed { color: var(--muted); }
.live-updated { font-size: 13px; font-weight: 700; color: var(--ink2); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.pf-kpis {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}
.pf-kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 17px; box-shadow: var(--shadow);
  min-width: 0;
}
.pf-kpi .sum-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 8px;
}
/* JS rewrites these elements' className to exactly `sum-v small num` (and
   `sum-sub num`) when it paints — so the size lives on the CELL, not on a
   class the render could stomp. `.small` is deliberately not styled here. */
.pf-kpi .sum-v {
  font-family: var(--mono);
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  line-height: 1.18; overflow-wrap: anywhere;
}
.pf-kpi .sum-v.pos { color: var(--pos); }
.pf-kpi .sum-v.neg { color: var(--neg); }
.pf-kpi .sum-sub { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted2); }
.pf-kpi .sum-sub.pos { color: var(--pos); }
.pf-kpi .sum-sub.neg { color: var(--neg); }
.pf-kpi--lead { grid-row: span 1; padding: 18px 20px; }
.pf-kpi--lead .sum-v { font-size: 34px; font-weight: 800; }
.pf-kpi--lead .sum-k { color: var(--muted); }

/* Secondary strip: numbers the mockup's 5-card row drops but the account
   still needs (and coach-jag still anchors to). Deliberately quieter. */
.pf-kpi-sub {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding: 12px 17px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.pf-kpi-sub > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.pf-kpi-sub .sum-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted2); white-space: nowrap;
}
.pf-kpi-sub .sum-v { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.pf-kpi-sub .sum-v.pos { color: var(--pos); }
.pf-kpi-sub .sum-v.neg { color: var(--neg); }
.pf-kpi-sub .sum-sub { font-size: 11.5px; font-weight: 600; color: var(--muted2); }
.pf-kpi-sub .sum-sub.pos { color: var(--pos); }
.pf-kpi-sub .sum-sub.neg { color: var(--neg); }

/* Loading skeleton — an honest "not here yet", never a placeholder number. */
.skel {
  display: inline-block; height: 1em; width: 110px; border-radius: 5px;
  background: #e7ebf1; animation: pf-sk 1.3s ease-in-out infinite;
}
@keyframes pf-sk { 0%, 100% { opacity: 1; } 50% { opacity: .48; } }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
/* Explicit placement. A panel that hides itself (holdings in first-run,
   allocation with no positions, options with no contracts) must leave its cell
   empty rather than pull the others out of the owner's fixed order. */
#pfPerfPanel      { grid-column: 1; grid-row: 1; }
#analyticsSection { grid-column: 2; grid-row: 1; }
#holdingsPanel    { grid-column: 1; grid-row: 2; }
#pfActivityPanel  { grid-column: 2; grid-row: 2; }

.pf-panel {
  position: relative;  /* .ts-popup was anchoring to the viewport, not this panel */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.pf-panel-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--head);
  border-bottom: 1px solid var(--line);
}
.pf-panel-head h2 { font-size: 15px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.pf-panel-head .pf-sub { font-size: 12px; font-weight: 600; color: var(--muted2); }
.pf-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-panel-body { padding: 16px 18px; }
.pf-panel-body.is-flush { padding: 0; }
.pf-panel-foot {
  border-top: 1px solid var(--line);
  padding: 0;
}
.pf-foot-btn {
  display: block; width: 100%;
  padding: 12px; background: var(--head); border: 0;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--green);
  cursor: pointer; text-align: center; text-decoration: none;
}
.pf-foot-btn:hover { background: #eef2f7; }
.pf-empty {
  padding: 34px 20px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--muted2);
}
.pf-empty a { color: var(--green); font-weight: 800; text-decoration: none; }
.pf-empty a:hover { text-decoration: underline; }

/* Chips (32px, pill) */
.pf-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.pf-chips button {
  height: 32px; padding: 0 13px; border-radius: var(--r-chip);
  border: 1px solid var(--line2); background: #fff;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pf-chips button:hover { background: var(--head); color: var(--ink2); }
.pf-chips button.active {
  background: var(--green-tint); color: var(--green-pressed);
  border-color: #b9e0cc; font-weight: 800;
}

/* ── Performance panel ───────────────────────────────────────────────────── */
.range-period-pct {
  font-family: var(--mono);
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1; min-width: 4.2em; text-align: right; color: var(--ink);
}
.range-period-pct.pos { color: var(--pos); }
.range-period-pct.neg { color: var(--neg); }
.range-period-pct.is-empty { color: var(--muted2); font-weight: 700; font-size: 15px; }
.pf-chart-wrap { position: relative; padding: 14px 16px 16px; }
#equityChartCanvas { width: 100%; height: 320px; display: block; cursor: crosshair; }
.pf-chart-sub {
  display: block; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--muted2);
}
.chart-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 8px 11px; min-width: 112px;
}
.chart-tip[hidden] { display: none; }
.chart-tip .et-label { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); margin-bottom: 2px; }
.chart-tip .et-val { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip .et-chg { font-family: var(--mono); font-size: 12px; font-weight: 700; margin-top: 1px; font-variant-numeric: tabular-nums; }
.chart-tip .et-chg.pos { color: var(--pos); }
.chart-tip .et-chg.neg { color: var(--neg); }
.chart-legend {
  position: absolute; top: 18px; right: 20px;
  display: flex; gap: 12px; font-size: 10.5px; font-weight: 700; color: var(--muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .cl-you::before { content: ""; width: 14px; height: 2.5px; background: var(--pos); border-radius: 2px; }

/* ── Allocation panel ────────────────────────────────────────────────────── */
.alloc-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.alloc-donut { width: 152px; height: 152px; flex: none; }
.donut-c1 { font-size: 11.5px; font-weight: 800; fill: var(--ink); font-family: var(--mono); }
.donut-c2 { font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted2); }
.donut-c3 { font-size: 6px; font-weight: 700; fill: var(--muted2); font-family: var(--mono); }
.alloc-legend { list-style: none; width: 100%; display: flex; flex-direction: column; }
.alloc-legend li {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px;
}
.alloc-legend li:first-child { border-top: 0; }
.lg-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.lg-sym { flex: 1 1 auto; font-weight: 700; color: var(--ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-val { flex: none; margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted2); text-align: right; }
.lg-pct { flex: none; min-width: 48px; font-family: var(--mono); font-weight: 800; color: var(--ink); text-align: right; }
.alloc-note {
  margin-top: 12px; padding: 9px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
  color: var(--amber-text); background: var(--amber-bg); border: 1px solid #eddcb6;
}
.alloc-note strong { font-weight: 800; }

/* Sector detail, revealed by the panel's "View Details" disclosure. */
.pf-disclose[hidden] { display: none; }
.pf-disclose { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-disclose-h { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 12px; }
.sector-bars { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.sct-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 5px; }
.sct-name { font-weight: 700; color: var(--ink2); }
.sct-pct { font-family: var(--mono); font-weight: 700; color: var(--muted); }
.sct-track { height: 7px; background: var(--head); border-radius: 5px; overflow: hidden; }
.sct-fill { height: 100%; border-radius: 5px; min-width: 2px; transition: width .5s cubic-bezier(.22,.61,.36,1); }

/* ── Tables (holdings / activity / options / orders / watchlist) ─────────── */
.pf-table { width: 100%; border-collapse: collapse; }
.pf-table thead th {
  text-align: right; padding: 10px 14px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted2); background: var(--head); border-bottom: 1px solid var(--line);
}
.pf-table thead th:first-child, .pf-table thead th.lft { text-align: left; }
.pf-table tbody td {
  padding: 12px 14px; text-align: right; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink2);
  border-bottom: 1px solid var(--line);
}
.pf-table tbody td:first-child, .pf-table tbody td.lft { text-align: left; }
.pf-table tbody tr:last-child td { border-bottom: none; }
.pf-table tbody tr.clickable { cursor: pointer; }
.pf-table tbody tr.clickable:hover td { background: #f8fafc; }
.pf-table td.cell-strong { font-weight: 800; color: var(--ink); }
.pf-table td.pos { color: var(--pos); }
.pf-table td.neg { color: var(--neg); }
.pf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.h-symbol { font-weight: 800; color: var(--ink); font-family: var(--sans); }
a.sym-link { text-decoration: none; }
a.sym-link:hover { color: var(--link); text-decoration: underline; }
.h-co {
  display: block; margin-top: 1px; max-width: 190px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
}
.h-asset-tag {
  display: inline-block; margin-left: 6px; padding: 1px 5px; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  color: var(--green); background: var(--green-tint);
  border: 1px solid #b9e0cc; border-radius: 4px;
}
.h-asset-tag.is-short { color: var(--pro); background: var(--pro-tint); border-color: #eccdb9; }
.sub-pct { font-family: var(--mono); font-size: 11px; font-weight: 600; opacity: .82; margin-left: 5px; }
.holdings-group td {
  padding: 13px 14px 5px !important; border: none !important;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2);
}
.cash-row td { background: #fbfcfe; }
.holdings-total td { border-top: 2px solid var(--line2); font-weight: 800; background: var(--head); }

/* Sortable headers */
.h-type {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink2); background: var(--head); border: 1px solid var(--line);
}
.h-type-crypto { color: var(--green-pressed); background: var(--green-tint); border-color: #b9e0cc; }
.h-type-etf    { color: var(--link);          background: var(--link-bg);    border-color: #cfe0f2; }
.h-type-cash   { color: var(--muted);         background: var(--head);       border-color: var(--line); }

th.th-sort { cursor: pointer; user-select: none; }
th.th-sort:hover { color: var(--ink2); }
th.th-sort.sort-active { color: var(--green); }
th.th-sort.sort-asc::after { content: " \25B2"; font-size: 8px; color: var(--green); }
th.th-sort.sort-desc::after { content: " \25BC"; font-size: 8px; color: var(--green); }

/* ── Recent Activity: the JS paints a 6-column table; in the 320px column it
   reads as a list. Same markup, list layout, one coloured dot per kind. ──── */
#pfActivityPanel #tradesSection table,
#pfActivityPanel #tradesSection thead,
#pfActivityPanel #tradesSection tbody,
#pfActivityPanel #tradesSection tr,
#pfActivityPanel #tradesSection td { display: block; width: 100%; }
#pfActivityPanel #tradesSection thead { display: none; }
#pfActivityPanel #tradesList tr {
  position: relative;
  padding: 12px 16px 12px 34px;
  border-bottom: 1px solid var(--line);
}
#pfActivityPanel #tradesList tr:last-child { border-bottom: none; }
#pfActivityPanel #tradesList tr::before {
  content: ""; position: absolute; left: 16px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted2);
}
#pfActivityPanel #tradesList tr[data-kind="buy"]::before { background: var(--pos); }
#pfActivityPanel #tradesList tr[data-kind="sell"]::before { background: var(--neg); }
#pfActivityPanel #tradesList tr[data-kind="dividend"]::before { background: var(--link); }
#pfActivityPanel #tradesList tr[data-kind="option"]::before { background: var(--pro); }
#pfActivityPanel #tradesList tr[data-kind="alert"]::before { background: var(--amber); }
#pfActivityPanel #tradesList tr[data-kind="open"]::before { background: var(--muted2); }
#pfActivityPanel #tradesList td {
  border: none; padding: 0; text-align: left; white-space: normal;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
/* Action + symbol are the title line; qty/price/amount are the detail line. */
#pfActivityPanel #tradesList td[data-label="Action"] {
  display: inline; font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
#pfActivityPanel #tradesList td[data-label="Symbol"] {
  display: inline; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-left: 7px;
}
#pfActivityPanel #tradesList td[data-label="Symbol"] .h-co {
  display: block; margin-left: 0; font-size: 11.5px; font-weight: 500;
}
#pfActivityPanel #tradesList td[data-label="Quantity"],
#pfActivityPanel #tradesList td[data-label="Price"] { display: inline; font-family: var(--mono); font-size: 11.5px; }
#pfActivityPanel #tradesList td[data-label="Quantity"]::before { content: attr(data-label) " "; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
#pfActivityPanel #tradesList td[data-label="Price"]::before { content: " · @ "; color: var(--muted2); }
#pfActivityPanel #tradesList td[data-label="Amount"] {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--ink);
}
#pfActivityPanel #tradesList td[data-label="Date"] {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted2);
}
.trade-side-buy { color: var(--pos); }
.trade-side-sell { color: var(--neg); }
/* #tradesToggle is created at runtime and appended to #tradesSection. */
.trades-toggle {
  display: block; width: 100%; padding: 12px;
  background: var(--head); border: 0; border-top: 1px solid var(--line);
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--green); cursor: pointer;
}
.trades-toggle:hover { background: #eef2f7; }
/* Honest empty state: shown only while the blotter has painted no rows. */
.pf-activity-empty { display: none; }
#pfActivityPanel:has(#tradesList:empty) .pf-activity-empty { display: block; }

/* ── Options panel ───────────────────────────────────────────────────────── */
#optionsList table { width: 100%; border-collapse: collapse; }
#optionsList thead th {
  text-align: right; padding: 10px 14px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted2); background: var(--head); border-bottom: 1px solid var(--line);
}
#optionsList thead th.lft { text-align: left; }
#optionsList tbody td {
  padding: 12px 14px; text-align: right; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink2); border-bottom: 1px solid var(--line);
}
#optionsList tbody td.lft { text-align: left; }
#optionsList tbody tr:last-child td { border-bottom: none; }
.opt-desk-link { font-size: 12.5px; font-weight: 800; color: var(--green); text-decoration: none; }
.opt-desk-link:hover { text-decoration: underline; }
.opt-tot { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ink2); border-top: 1px solid var(--line); background: var(--head); }
.opt-tot b { font-family: var(--mono); font-weight: 800; }
.opt-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.opt-go {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 13px; border-radius: 9px;
  border: 1px solid #b9e0cc; background: var(--green-tint); color: var(--green-pressed);
  font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.opt-go:hover { background: #d9f0e4; }
.opt-go-ghost { background: #fff; border-color: var(--line2); color: var(--ink2); }
.opt-go-ghost:hover { background: var(--head); }

/* ── Stat grids (Trading performance / Risk) ─────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.st-cell { padding: 15px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-k { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; }
.st-v { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.st-sub { font-size: 11px; font-weight: 600; color: var(--muted2); margin-top: 3px; }
.risk-locked { position: relative; }
.risk-lock-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px); text-align: center; padding: 18px;
}
.risk-lock-overlay .rlo-h { font-size: 14px; font-weight: 800; color: var(--ink); }
.risk-lock-overlay a { color: var(--pro); font-weight: 800; text-decoration: none; }

/* Metric customizer */
.ts-gear {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  background: var(--green-tint); border: 1px solid #b9e0cc; border-radius: var(--r-chip);
  color: var(--green-pressed); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ts-gear:hover { background: #d9f0e4; }
.ts-popup {
  position: absolute; top: 52px; right: 18px; z-index: 60; width: 300px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 13px;
}
.ts-popup[hidden] { display: none; }
.ts-popup-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); margin-bottom: 2px; }
.ts-popup-sub { font-size: 11.5px; font-weight: 500; color: var(--muted2); margin-bottom: 9px; }
.ts-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); user-select: none; }
.ts-opt:hover { background: var(--head); }
.ts-opt input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; flex: none; }
.ts-opt.is-disabled { opacity: .4; cursor: not-allowed; }
.ts-opt.is-disabled:hover { background: none; }
.ts-popup-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.ts-count { font-size: 11px; font-weight: 600; color: var(--muted2); }
.ts-count.at-max { color: var(--green); font-weight: 800; }
.ts-done { background: var(--green); color: #fff; border: 0; border-radius: 9px; padding: 7px 15px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

/* ── Watchlist ───────────────────────────────────────────────────────────── */
.wl-add { display: flex; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.wl-add input {
  flex: 1; height: 42px; padding: 0 13px; border-radius: var(--r-btn);
  border: 1px solid var(--line2); background: #fff; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.wl-add input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 110, 78, .12); }
.wl-add button {
  height: 42px; padding: 0 18px; border-radius: var(--r-btn); border: 1px solid var(--line2);
  background: var(--head); color: var(--ink2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.wl-add button:hover { background: #eef1f5; }
.wl-x { text-align: right; width: auto; white-space: nowrap; }
.wl-remove-btn {
  height: 28px; padding: 0 10px; width: auto; border-radius: 8px; border: 1px solid var(--line2);
  background: #fff; color: var(--muted2); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
}
.wl-remove-btn:hover { color: var(--neg); border-color: #e8c4c6; }

/* ── Dividends ───────────────────────────────────────────────────────────── */
.div-sched-list { list-style: none; display: flex; flex-direction: column; }
.div-sched-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.div-sched-list li:first-child { border-top: none; }
.ds-sym { font-weight: 800; min-width: 58px; }
.ds-detail { color: var(--muted2); flex: 1; min-width: 0; font-weight: 500; }
.ds-when { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.ds-amt { font-family: var(--mono); font-weight: 800; color: var(--pos); white-space: nowrap; min-width: 64px; text-align: right; }
.div-sched-list li.ds-inelig .ds-amt { color: var(--muted2); font-weight: 700; }
.ds-note { color: var(--muted); font-size: 11px; }
.pf-div-income { font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-div-income strong { font-family: var(--mono); font-weight: 800; color: var(--pos); }

/* ── Cancel order button ─────────────────────────────────────────────────── */
.cancel-order-btn {
  height: 30px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line2);
  background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cancel-order-btn:hover { color: var(--neg); border-color: #e8c4c6; }
.cancel-order-btn:disabled { opacity: .5; cursor: default; }

/* ── Guest banner / first run ────────────────────────────────────────────── */
.guest-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: var(--r-card);
  background: var(--green-tint); border: 1px solid #b9e0cc;
  font-size: 14px; font-weight: 600; color: var(--ink2);
}
.guest-banner-btn {
  height: 42px; padding: 0 20px; border-radius: var(--r-btn); border: 0;
  background: var(--green); color: #fff; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.guest-banner-btn:hover { background: var(--green-pressed); }
.first-run {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 30px 26px; box-shadow: var(--shadow);
}
.fr-badge {
  display: inline-block; padding: 5px 13px; margin-bottom: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--green-pressed); background: var(--green-tint);
  border: 1px solid #b9e0cc; border-radius: var(--r-chip);
}
.fr-h { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.fr-p { font-size: 14px; font-weight: 500; color: var(--ink2); max-width: 560px; margin-bottom: 18px; line-height: 1.5; }
.fr-btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: var(--r-btn);
  background: var(--green); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none;
}
.fr-btn:hover { background: var(--green-pressed); }

/* ── Position drawer ─────────────────────────────────────────────────────── */
.pos-drawer-backdrop {
  position: fixed; inset: var(--pf-appbar-h, 88px) 0 0 0; background: rgba(15, 23, 42, .32); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.pos-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
/* THE HEADER WAS HIDDEN BEHIND THE SITE NAV. Owner: "it ends on this ticket, and
   there's no x button, and it looks really badly styled." The X and the title were both
   rendered -- .pos-drawer sat at top:0 while the app bar is fixed at the same place, so
   .pd-head was underneath it. The drawer looked like a headerless slab of numbers with
   no way out, which is exactly how he described it.
   Starting below the bar shows the header and keeps the drawer clear of the nav; the
   same --pf-appbar-h the left rail already uses, so the two cannot drift apart. */
.pos-drawer {
  position: fixed; top: var(--pf-appbar-h, 88px); right: 0;
  height: calc(100vh - var(--pf-appbar-h, 88px)); width: 390px; max-width: 92vw; z-index: 91;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 0, 0, .14);
  transform: translateX(100%); transition: transform .2s ease; display: flex; flex-direction: column;
}
.pos-drawer.open { transform: translateX(0); }

/* THE PARKED DRAWER WAS THE BLANK SPACE ON THE RIGHT. When shut, .pos-drawer sits at
   right:0 translated 100% -- i.e. x = [390, 749] on a 390px phone. A position:fixed
   element pushed past the viewport by a transform STILL contributes to the document's
   scrollable overflow on iOS, so the page could be dragged sideways into ~360px of
   nothing. That is what the owner photographed, repeatedly.

   display:none when closed is the only thing that removes it with certainty:
   visibility:hidden still generates a box and can keep contributing overflow, and an
   ancestor's overflow rule cannot clip a fixed element because it positions against
   the viewport, not the document. The cost is the slide-in animation on open, which is
   a fair trade for a page that no longer drifts sideways. */
.pos-drawer:not(.open) { display: none; }
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pd-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.pd-title .pd-co { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.pd-close {
  width: 34px; height: 34px; border: 1px solid var(--line2); background: #fff;
  border-radius: 10px; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.pd-close:hover { color: var(--neg); border-color: #e8c4c6; }
.pd-body { padding: 12px 20px 22px; overflow-y: auto; }
.pd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pd-k { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); }
.pd-v { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.pd-trade {
  display: flex; align-items: center; justify-content: center; margin-top: 18px; height: 42px;
  border-radius: var(--r-btn); background: var(--green); color: #fff;
  font-weight: 800; font-size: 14px; text-decoration: none;
}
.pd-trade:hover { background: var(--green-pressed); }

/* ── Footer disclaimer ───────────────────────────────────────────────────── */
.pf-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.pf-foot-links a { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.pf-foot-links a:hover { color: var(--ink2); }
.pf-disclaimer { font-size: 11.5px; font-weight: 500; color: var(--muted2); line-height: 1.5; max-width: 62ch; }
.pf-disclaimer a { color: var(--muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* 1180: one column. The rail becomes a 2-col strip above the content. */
@media (max-width: 1180px) {
  .pf-page { grid-template-columns: minmax(0, 1fr); }
  .pf-rail {
    position: static;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    align-items: start;
  }
  .pf-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
  .pf-nav a { flex: 1 1 auto; justify-content: center; }
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kpi--lead { grid-column: 1 / -1; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  #pfPerfPanel, #analyticsSection, #holdingsPanel, #pfActivityPanel {
    grid-column: 1; grid-row: auto;
  }
  /* Full width now, so the activity blotter goes back to a real table. */
  #pfActivityPanel #tradesSection table { display: table; }
  #pfActivityPanel #tradesSection thead { display: table-header-group; }
  #pfActivityPanel #tradesSection tbody { display: table-row-group; }
  #pfActivityPanel #tradesList tr { display: table-row; padding: 0; }
  #pfActivityPanel #tradesList tr::before { display: none; }
  #pfActivityPanel #tradesList td {
    display: table-cell; padding: 12px 14px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2);
  }
  #pfActivityPanel #tradesList td[data-label="Date"],
  #pfActivityPanel #tradesList td[data-label="Action"],
  #pfActivityPanel #tradesList td[data-label="Symbol"] { text-align: left; margin: 0; }
  #pfActivityPanel #tradesList td[data-label="Symbol"] { font-size: 13px; }
  #pfActivityPanel #tradesList td[data-label="Quantity"]::before,
  #pfActivityPanel #tradesList td[data-label="Price"]::before { content: none; }
  #pfActivityPanel #tradesList td[data-label="Amount"] { font-size: 13px; }
  .alloc-wrap { flex-direction: row; align-items: center; gap: 22px; }
  .alloc-legend { flex: 1; }
}

/* 760: everything single column. */
@media (max-width: 760px) {
  .pf-page { width: calc(100% - 24px); gap: 14px; margin: 16px auto 28px; }
  .pf-rail { grid-template-columns: minmax(0, 1fr); }
  .pf-kpis { grid-template-columns: minmax(0, 1fr); }
  .pf-kpi--lead { grid-column: auto; }
  .pf-kpi-sub { flex-direction: column; gap: 8px; }
  .pf-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pf-hero-meta { width: 100%; }
  .pf-meta { flex: 1 1 auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alloc-wrap { flex-direction: column; }
  .pos-drawer {
    top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: min(85vh, 640px); border-left: none; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; transform: translateY(105%);
  }
  .pos-drawer.open { transform: translateY(0); }
}

/* 640: tighten type, chart and the holdings table. */
@media (max-width: 640px) {
  .pf-hero h1 { font-size: 24px; }
  #equityChartCanvas { height: 280px; }
  #holdingsTable { min-width: 760px; }
  .pf-kpi--lead .sum-v { font-size: 28px; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-panel-body { padding: 14px; }
  .pf-panel-head { padding: 14px 15px; }
}

/* ═══ RECENT ACTIVITY — the owner's dot timeline ════════════════════════════
   Replaces the six-column blotter that used to sit in this 320px rail. Class
   names and metrics are the owner's mockup verbatim, so their designer's CSS
   stays directly applicable to this markup. Colours come from the page tokens
   (--pos / --neg / --amber) rather than being restated, so the timeline can
   never drift from the P/L colours used everywhere else on the page. */
.activity-list { display: grid; gap: 12px; }
.activity-item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.activity-item:last-child { border-bottom: 0; }
.activity-item__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.activity-item__dot--buy  { background: var(--pos); }
.activity-item__dot--sell { background: var(--neg); }
.activity-item__dot--note { background: var(--amber); }
.activity-item__content { min-width: 0; }
.activity-item__content strong {
  display: block; color: var(--ink); font-size: 14px; font-weight: 800; margin-bottom: 4px;
}
.activity-item__content span {
  display: block; color: var(--ink2); font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
.activity-item time { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }