/* portfolio.css — shared visual layer for the Portfolio section.
 * Version: 1.11 (2026-09-17) — A-1101: the nav flattened to two levels, so the
 *   .pf-subnav block, its two mobile overrides and the whole third-level
 *   .pf-subsubnav block (including its .pf-nav-badge rules) are deleted — the one
 *   remaining sub-bar is shell.js's .core-subnav, styled in tokens.css, and the
 *   exit badges moved to .core-nav-badge there with it. Nothing else changed.
 *   (cache-bust -> v=20.)
 * Version: 1.11 (2026-09-17) — A-1102: --accent-dim / --bull / --bull-dim declared here,
 *   beside the .content-badge-* rules that read them. Fixes an unstyled "NEW" badge on
 *   the Microstructure page (which never declared --bull-dim) and lets the panel render
 *   correctly on Fundamentals, its new home. Cache-bust v20->v21.
 *
 * Version: 1.10 (2026-08-12) — A-547: `.content-list`/`.content-item`/
 *   `.content-item-title`/`.content-item-meta`/`.content-badge-new` and
 *   `.empty-state` MOVED here from assets/index.html's inline <style> — they
 *   were the second consumer's (Microstructure's) CSS trap, styling the shared
 *   Recent News panel (shared/news-panel.js) on a page that never carried
 *   them. The two `.empty-state` rules assets/index.html carried were folded
 *   into the one below; its OTHER selector (`.prt-loading`/badge-version) kept
 *   its own local rule, unchanged. (cache-bust → v=19.)
 * Version: 1.9 (2026-08-02) — A-127.3l: 4th modifier class, .pf-nav-badge.data-error
 *   (regime_exit_badge_counts()'s new data_errors column), colored via tokens.css's
 *   new --band-data-error var. (cache-bust → v=17.)
 * Version: 1.8 (2026-07-17) — A-114.2: Trading sub-sub-nav Exits badge goes typed —
 *   3 modifier classes (stop-crossed/time-stop/tp-crossed) replace the flat hardcoded
 *   #ef4444, colored via the new tokens.css --band-* vars (single source of truth
 *   shared with the top-nav Exits badges). (cache-bust → v=15.)
 * Version: 1.7 (2026-07-10) — MCT-772: promote the MCT-671 sticky third-bar
 *   .pf-subsubnav (rides up/down with the header + subnav on scroll; font matches
 *   .pf-subnav; un-stuck ≤640px) from risk-budget's per-page copy into this shared
 *   block, per STANDARD_PAGE_STYLE.md §11 "promote when rolling past the template
 *   page" — Breakouts is the second converted trading page. --pf-subnav-h is
 *   measured by portfolio-shell.js v1.19. Hover tint de-grayed (surface-2 → accent
 *   tint, §5). (cache-bust → v=13.)
 * Version: 1.6 (2026-07-02) — MCT-495: desktop scroll-down now hides the .pf-subnav WITH the
 *   nav (was: rode up under the header and stayed) — matches the shared .core-subnav behavior
 *   in tokens.css v1.4. Mobile ≤640px stays un-stuck (scrolls naturally; header hide is the
 *   shell's). (cache-bust → v=8.)
 * Version: 1.5 (2026-06-27) — mobile scroll feel matched to the AUM page (Michael): header
 *   stays pinned (shell default) and only the pill nav hides on scroll; the sub-nav is
 *   UN-STUCK at ≤640px so it scrolls away naturally with the content (no sticky slide).
 *   Desktop keeps the MCT-404 sticky gold sub-bar. (1.4 hid the whole chrome — reverted.)
 * Version: 1.3 (2026-06-27) — MCT-404: Portfolio identity pass. Resolve --accent to the
 *   brass-gold --a-portfolio on body[data-app="portfolio"] (same pattern as Research); restyle
 *   .pf-subnav to match the shared .core-subnav exactly (full-width gold-tinted sticky bar, pill
 *   active-state). The bar now reads identically on all five Portfolio views.
 * Version: 1.2 (2026-06-16) — MCT-23: .pos-tbl group header + .pos-wallet/.pos-qty/.pos-price +
 *   .type-badge.spot for the positions view.
 * Version: 1.1 (2026-06-16) — MCT-141: .recon-row* for the split reconciliation rows;
 *   MCT-130: .tl-date + .tl-open for the trade-list table.
 * Version: 1.0 (2026-06-15) — new section; first tab = Attribution (MCT-103). Built to host the
 *   pages migrated from Josh's v1 as additional sub-tabs. Mirrors the AUM section's look + feel.
 * Loaded after tokens.css on every Portfolio page.
 */

/* Vertical-scroll-only (kill phantom mobile horizontal pan). */
body { overflow-x: clip; max-width: 100%; }

/* Page background — clean white (light); calm dark (dark). */
/* Portfolio app identity: resolve the shell --accent to the brass-gold app token, the same
 * way Research does (body[data-app="research-lab"] { --accent: var(--a-research) }). This tints
 * the top-nav active pill, the sub-nav bar + active pill, links and sort indicators gold. Scoped
 * to body[data-app] only — it sets a variable, not a reset, so nothing bleeds into the shell. */
body[data-app="portfolio"] { background: #ffffff; min-height: 100vh; --accent: var(--a-portfolio); }
html[data-theme="dark"] body[data-app="portfolio"] { background: var(--bg); }

/* Logo mark */
body[data-app="portfolio"] .core-brand img { width: 32px; height: 32px; border-radius: 0; object-fit: contain; }

/* Dark mode — readable layering. */
html[data-theme="dark"] body[data-app="portfolio"] {
  --bg:             #0f1116;
  --surface:        #1a1e26;
  --surface-2:      #252b36;
  --border:         #3a4250;
  --text:           #f4f6f9;
  --text-secondary: #b2bac6;
}
html[data-theme="dark"] body[data-app="portfolio"] table th,
html[data-theme="dark"] body[data-app="portfolio"] table td { border-color: var(--border); }
html[data-theme="dark"] body[data-app="portfolio"] .pos { color: #4ade80; }
html[data-theme="dark"] body[data-app="portfolio"] .neg { color: #ff7676; }

.pf-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 20px 40px; }
.pf-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 26px 0 10px;
        display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.live-tag { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
html[data-theme="dark"] body[data-app="portfolio"] .stat { background: var(--surface-2); box-shadow: none; }
.stat.hero { border: 2px solid var(--vd-blue); }
.stat .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.stat .val { font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
.stat .sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.pos { color: var(--ok); } .neg { color: var(--bad); } .neutral { color: var(--text-secondary); }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding: 14px; border: 1px solid var(--border);
           border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); position: sticky; top: 6px; z-index: 5; }
.fgrp { display: flex; flex-direction: column; gap: 5px; }
.fgrp .fglbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.fpills { display: flex; gap: 4px; flex-wrap: wrap; }
.fpill { padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; cursor: pointer;
         color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); user-select: none; }
.fpill:hover { color: var(--text); }
.fpill.active { background: var(--vd-blue); color: #fff; border-color: var(--vd-blue); }
.fsel { padding: 6px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; background: var(--surface-2);
        color: var(--text); border: 1px solid var(--border); }
.range-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* A-281 custom attribution window — two date inputs reusing the .fsel pill treatment. */
.fdates { display: flex; align-items: center; gap: 6px; }
.fdate { font-variant-numeric: tabular-nums; min-width: 132px; }
.fdate-sep { color: var(--text-secondary); font-weight: 700; font-size: 12px; }
/* The native date picker indicator is near-invisible on the dark surface without this. */
html[data-theme="dark"] body[data-app="portfolio"] .fdate::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.65); }

/* ── Contribution chart — pure-CSS diverging bars (no external chart lib) ──── */
.wf { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border);
      border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.wf-row { display: grid; grid-template-columns: 64px 1fr 120px; align-items: center; gap: 10px; }
.wf-lbl { font-size: 12.5px; font-weight: 700; text-align: right; }
.wf-track { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; }
.wf-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.wf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.wf-bar.pos { background: var(--ok); }
.wf-bar.neg { background: var(--bad); }
.wf-val { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Pinned Total summary bar (MCT-201) — net of all drivers, set off above the per-token rows */
.wf-total .wf-lbl { font-size: 13.5px; font-weight: 800; }
.wf-total .wf-val { font-size: 13.5px; font-weight: 800; }
.wf-total .wf-track { height: 20px; }
.wf-divider { height: 1px; background: var(--border); margin: 8px 0; }
html[data-theme="dark"] body[data-app="portfolio"] .wf-bar.pos { background: #4ade80; }
html[data-theme="dark"] body[data-app="portfolio"] .wf-bar.neg { background: #ff7676; }

/* ── Driver tree table ────────────────────────────────────────────────────── */
.cmp-panel { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); overflow: hidden; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 620px; }
table.cmp th, table.cmp td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13.5px; }
table.cmp th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); font-weight: 700; }
table.cmp th.r, table.cmp td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.cmp td.tot { font-weight: 700; }
table.attr-tbl tr.cls td { background: color-mix(in srgb, var(--vd-blue) 7%, var(--surface)); font-weight: 700; font-size: 12.5px;
                           text-transform: uppercase; letter-spacing: 0.03em; }
table.attr-tbl tr.tok td.tok-name { padding-left: 18px; font-size: 14px; }
table.attr-tbl tr.tok.expandable { cursor: pointer; }
table.attr-tbl tr.tok.expandable:hover td { background: var(--surface-2); }
table.attr-tbl tr.leg td.leg-name { padding-left: 44px; color: var(--text-secondary); font-size: 12.5px; }
table.attr-tbl tr.leg td { background: color-mix(in srgb, var(--border) 18%, var(--surface)); }
table.attr-tbl tr.grand td { font-weight: 800; border-top: 2px solid var(--border); border-bottom: none; }
.caret { display: inline-block; width: 14px; color: var(--text-secondary); }
.caret-sp { display: inline-block; width: 14px; }
.lvl-tag { font-size: 10px; font-weight: 600; color: var(--text-secondary); background: #eef1f6; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
html[data-theme="dark"] body[data-app="portfolio"] .lvl-tag { background: #2d3340; }
.dir-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; }
.dir-badge.long { color: #0a8a52; background: rgba(16,185,129,0.16); }
.dir-badge.short { color: #c23b3b; background: rgba(239,68,68,0.14); }
html[data-theme="dark"] body[data-app="portfolio"] .dir-badge.long { color: #5fd39a; background: rgba(16,185,129,0.22); }
html[data-theme="dark"] body[data-app="portfolio"] .dir-badge.short { color: #ff8a8a; background: rgba(239,68,68,0.22); }

/* ── Reconciliation block ─────────────────────────────────────────────────── */
.recon { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px; }
.recon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.recon-sum { font-variant-numeric: tabular-nums; }
.recon-list { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }

.note { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.55; }
.src-foot { padding: 8px 14px; font-size: 11px; color: var(--text-secondary); border-top: 1px solid var(--border); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.banner-info { font-size: 12px; color: var(--text-secondary); background: color-mix(in srgb, var(--vd-blue) 6%, var(--surface));
               border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; line-height: 1.55; margin: 4px 0 0; }
/* Sortable attribution-table headers (MCT-478 follow-up). NOTE: never position:relative on sortable th. */
/* A-281 effect-split columns — visually subordinate to the contribution columns they decompose. */
/* nowrap: without it a 4-figure amount breaks after its minus sign ("−" / "$2,201"), which on a money
   table reads as a different number. Observed live on the BTC fees cell. */
.attr-tbl td.split-cell { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
                          white-space: nowrap; border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.attr-tbl td.split-cell.pos, .attr-tbl td.split-cell.neg { color: inherit; opacity: 0.82; }
.attr-tbl tr.grand td.split-cell { font-weight: 700; opacity: 1; }
.attr-tbl th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.attr-tbl th[data-sort]:hover { color: var(--text); }
/* Expandable token rows → per-instrument legs (BTC folds CBBTC/WBTC; click to see the stored grain). */
.attr-tbl tr.expandable { cursor: pointer; }
.attr-tbl tr.expandable .caret { color: var(--text-secondary); }
.attr-tbl tr.leg td { font-size: 12px; color: var(--text-secondary); background: color-mix(in srgb, var(--border) 25%, var(--surface)); }
.attr-tbl tr.leg .tok-name { padding-left: 34px; }

/* STALE guard (MCT-478) — shown when the latest settled attribution date is behind the AUM/Benchmark settled close. */
.banner-warn { font-size: 12.5px; color: var(--text); background: color-mix(in srgb, #d97706 14%, var(--surface));
               border: 1px solid color-mix(in srgb, #d97706 55%, var(--border)); border-left-width: 4px;
               border-radius: var(--radius); padding: 11px 14px; line-height: 1.55; margin: 4px 0 12px; }
.banner-warn strong { color: #b45309; }
html[data-theme="dark"] body[data-app="portfolio"] .banner-warn strong { color: #fbbf24; }

/* ── "Where this data comes from" — collapsible ───────────────────────────── */
.sources-hdr { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 26px 0 0; }
.sources-hdr:hover { color: var(--text); }
.sources-hdr .chev { font-size: 10px; width: 14px; display: inline-block; }
.sources-body { display: none; margin-top: 10px; }
.sources-body.open { display: block; }
.sources { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sources .src { display: grid; grid-template-columns: 210px 1fr; gap: 14px; background: var(--surface); padding: 11px 16px; }
.sources .src-k { font-size: 12px; font-weight: 700; color: var(--text); }
.sources .src-v { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* ── Reconciliation split rows (MCT-141) ─────────────────────────────────── */
.recon-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.recon-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.recon-row-lbl { color: var(--text); }
.recon-row-amt { font-variant-numeric: tabular-nums; }

/* ── Trade list table (MCT-130) ───────────────────────────────────────────── */
.tl-date { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-secondary); }
.tl-open { font-size: 10px; font-weight: 700; color: var(--ok); background: rgba(16,185,129,0.14);
           padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; }
html[data-theme="dark"] body[data-app="portfolio"] .tl-open { color: #5fd39a; background: rgba(16,185,129,0.22); }

/* ── Positions table (MCT-23; flat audit view MCT-396 — no asset-class grouping) ── */
table.pos-tbl tr.pos-row td.tok-name { font-size: 14px; }
.pos-wallet { font-size: 12px; color: var(--text-secondary); }
.pos-qty, .pos-price { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-secondary); }
.type-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; }
.type-badge.spot { color: #295BFF; background: rgba(41,91,255,0.12); }
html[data-theme="dark"] body[data-app="portfolio"] .type-badge.spot { color: #7da8ff; background: rgba(41,91,255,0.22); }
table.pos-tbl td.pos-action { white-space: nowrap; }
table.pos-tbl td.pos-action .core-btn { padding: 4px 10px; font-size: 11.5px; font-weight: 600; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body[data-app="portfolio"] .pf-wrap { padding: 14px 12px 36px; }
  .stat-row { grid-template-columns: 1fr; }
  .filters { position: static; }
  .wf-row { grid-template-columns: 52px 1fr 96px; }
  .sources .src { grid-template-columns: 1fr; gap: 3px; }

}

/* ── Content list (News / Research Library / any per-asset item feed) — A-547.
   MOVED from assets/index.html's inline <style>, the second-consumer trap
   (Microstructure) turned up: these rules never lived anywhere both pages
   could read. ── */
/* A-1102: the three tokens the .content-badge-* rules below consume. They were
   page-local — declared in assets/index.html's and microstructure/index.html's own :root
   blocks — which held while the news panel only ever rendered on pages that happened to
   declare them. It stopped holding twice: microstructure never declared --bull-dim, so
   its "NEW" badge has been drawing with no background at all, and the Fundamentals page
   declares none of the three. A token belongs with the rule that reads it, which is the
   same reason A-547 moved these rules here in the first place. Pages that already
   declare them keep doing so — same values, same result. */
:root {
  --accent-dim: color-mix(in srgb, var(--accent) 13%, transparent);
  --bull: var(--ok);
  --bull-dim: color-mix(in srgb, var(--ok) 13%, transparent);
}

.content-list { display:flex; flex-direction:column; }
.content-item { display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid var(--border); gap:3px; }
.content-item:last-child { border-bottom:none; }
.content-item-title { font-size:0.83rem; font-weight:500; color:var(--text); text-decoration:none; line-height:1.4; }
.content-item-title:hover { color:var(--accent); text-decoration:underline; }
.content-item-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.68rem; color:var(--text-muted); }
.content-badge-new { display:inline-block; padding:1px 6px; border-radius:3px; background:var(--bull-dim); color:var(--bull); font-size:0.62rem; font-weight:700; letter-spacing:0.03em; }
.empty-state { color: var(--text-muted); font-size: 0.85rem; padding: 16px 0; text-align: center; }