/* ═══ black.css — one black, dark theme only (Sep 28 2026) ═══════════════════════════════════════════
   Matt: "there is so much gray overlap into the black, like on the Screener. Keep it all black."
   Different builders had added different grey surfaces (#101012 --bg-raised cards and sticky heads,
   #161719 --surface panels, #1f2024 fills, white-gradient pane bars, white glows and top sheens).

   THE RULE (dark only): every container, pane, card, tile, sticky header, table, summary panel,
   calendar day, dialog body and pane bar is the page black, var(--bg) (#0a0a0b; the navy canvas and
   palettes follow). No grey fills, no white gradients or glows, no grey-reading shadows. Structure comes
   only from the existing 1px hairline outlines / dividers and from type.
   Allowed, and kept small: chips / pills / badges / buttons / form controls keep a faint tint (<= 4%
   white, or their accent tint); the amber primary button stays solid amber; an owned / selected row is
   marked by a 2px amber left edge or a thin amber outline, never a filled band. Sticky headers stay
   opaque — in the black — so rows scrolling under them don't show.

   Loaded LAST (after calendar-depth.css and ds.css). Everything is scoped to
   body:not([data-theme="light"]); light mode is untouched. Grouped per view below.
   Check: scratchpad all-black/check.mjs lists every visible element >= 120×24 that breaks the rule.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens: the raised surfaces become the page ────────────────────────────────────────────────── */
body:not([data-theme="light"]) {
  --bg-raised: var(--bg);
  --surface: var(--bg);
  --surface-2: color-mix(in srgb, #fff 4%, var(--bg));    /* controls only: the <= 4% tint */
  --surface-3: color-mix(in srgb, #fff 7%, var(--bg));    /* hover on a control */
  /* shared tokens declared on body in cockpit.css (resolved there, so they are restated here) */
  --fx-surface: var(--bg);
  --fx-panel: var(--bg);
  --fx-head: var(--bg);
  --fx-panel-shadow: none;
  --fx-shadow: none;
  --fx-track: color-mix(in srgb, #fff 4%, transparent);
}

/* ── 2. Everywhere: panes, cards and their bars ────────────────────────────────────────────────────── */
/* cockpit.css "Texture and depth" gave every raised surface a drop shadow and a 1px white top sheen */
body:not([data-theme="light"]) :is(.card, .card--full, .cpane, .trk__pane, .viewbar, .port-toolbar, .widget,
  .cpdet__kv, .port-stat, .kpi, .cmdk__panel, .legal-panel, .kbd-help__panel) { box-shadow: none; }
/* pane bars: a white top-down gradient (cockpit.css .cpane__bar, pyramid.css .rmsu__head) → the black.
   Solid, not transparent, so a bar that sticks (brokers dialog, calendar day head) stays opaque. */
body:not([data-theme="light"]):not(#_#_) :is(.cpane__bar, .rmsu__head, .palette-panel__header, .alx__head, .onb__bar, .tdd__bar, .cpheat__bar) {
  background: var(--bg);   /* :not(#_#_) = two ids' weight, so it outranks the per-view bar rules (#viewRisk …, #trk …) */
}
/* the top bar sticks over the page: opaque black (it was 68% black with a blur, so rows showed through) */
body:not([data-theme="light"]) .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the account button in the side rail: the controls' 4% tint (was 5%) */
body:not([data-theme="light"]) .user-menu .user-menu__btn { background: rgba(255, 255, 255, .04); }
/* dialog veils dim with pure black, not a blue-grey */
body:not([data-theme="light"]) .onb__veil { background: rgba(0, 0, 0, .62); }
/* the same 1px-gap "hairline grids" stay: their cells are black, the fill only shows as the 1px lines */

/* Highlighted rows: a 2px amber left edge, never a filled band */
body:not([data-theme="light"]) .cptable tbody tr.sel,
body:not([data-theme="light"]) .pyx .pyx-cpt tbody tr.sel,
body:not([data-theme="light"]) #viewPortfolio .bd-t tbody tr.sel { background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }
body:not([data-theme="light"]) #viewPortfolio .bd-t tbody tr.sel > td { background: var(--bg); }
body:not([data-theme="light"]) .cptable tbody tr.cp-cmp { background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }
/* grouped-tab strips (.subnav: Holdings · Trades · Income and returns, the Tracker's tabs): an outlined
   track, not a filled one; the chosen tab keeps its own pill */
body:not([data-theme="light"]) .subnav,
body:not([data-theme="light"]) :is(#viewPortfolio, #viewTradelog, #viewIncome) > .subnav { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }

/* ── 3. Dashboard ─────────────────────────────────────────────────────────────────────────────────── */
/* the detail pane's yield tile was an amber-filled cell: the black, an amber left edge */
body:not([data-theme="light"]) .cpkv--y { background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }

/* ── 4. Fund page ─────────────────────────────────────────────────────────────────────────────────── */
/* "Compared with similar funds": this fund's own row was an amber band */
body:not([data-theme="light"]) #viewFund .fx-table tbody tr.fx-self,
body:not([data-theme="light"]) #viewFund .fx-table tbody tr.fx-self td:first-child { background: var(--bg); }
body:not([data-theme="light"]) #viewFund .fx-table tbody tr.fx-self td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ── 5. Research ──────────────────────────────────────────────────────────────────────────────────── */
body:not([data-theme="light"]) :is(.research-header, .research-section-title, .adv-research__header, .adv-research__footer,
  .adv-section-heading, .state-holdings__head, .research-notes) { background: var(--bg); }
/* the yellow return-of-capital note: its 3px yellow edge stays, the yellow wash goes */
body:not([data-theme="light"]) .criterion-note { background: none; }

/* ── 6. News ──────────────────────────────────────────────────────────────────────────────────────── */
/* an event whose ⋯ menu is open kept a grey wash; the hover stays a faint tint, the open state doesn't */
body:not([data-theme="light"]) #viewNews :is(.nw-ev, .nw-n):has(.nw-act[open]) { background: var(--bg); }

/* ── 7. Calendar (calendar.css + calendar-depth.css) ───────────────────────────────────────────────── */
/* calendar-depth.css builds its layers from these tokens: all surfaces become the black, the sheen,
   glows and grey-reading shadows go; the 1px edges stay. Selected day / today keep their amber outline. */
body:not([data-theme="light"]) #viewCalendar .cal {
  --cal-pane: var(--bg); --cal-head: var(--bg);
  --cx-pane: var(--bg); --cx-glow: transparent;
  --cx-well: var(--bg); --cx-well-hi: var(--bg);
  --cx-day: var(--bg); --cx-day-hi: color-mix(in srgb, #fff 3%, var(--bg)); --cx-day-sel: var(--bg);
  --cx-raised: var(--bg); --cx-over: var(--bg);
  --cx-hl: 0 0 0 0 transparent; --cx-recess: 0 0 0 0 transparent;
  --cx-sh-1: 0 0 0 0 transparent; --cx-sh-2: 0 0 0 0 transparent; --cx-sh-sel: 0 0 0 0 transparent;
  --cx-track: transparent; --cx-pill: color-mix(in srgb, #fff 4%, var(--bg));
  --cx-chip: rgba(255, 255, 255, .04); --cx-chip-hi: rgba(255, 255, 255, .07);
}
body:not([data-theme="light"]) #viewCalendar .cal .cal-pane,
body:not([data-theme="light"]) #viewCalendar .cal .cal-mo__detail { background: var(--bg); box-shadow: none; }
body:not([data-theme="light"]) #viewCalendar .cal .cal-mo__dh { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
body:not([data-theme="light"]) #viewCalendar .cal-sum { background: var(--bg); box-shadow: 0 0 0 1px var(--cx-edge); }
body:not([data-theme="light"]) #viewCalendar .cal-yl__tot { background: none; box-shadow: 0 0 0 1px var(--cx-edge); }
/* the chosen day: black with its amber outline (no amber wash, no lift) */
body:not([data-theme="light"]) #viewCalendar .cal .cal-mo__cell.is-sel:not(.is-out):not(.is-x),
body:not([data-theme="light"]) #viewCalendar .cal .cal-mo__cell.is-sel:not(.is-out):not(.is-x):hover { background: var(--bg); box-shadow: 0 0 0 1px var(--cx-amber-line); }
/* your rows in the list / side list: the 2px left edge only */
body:not([data-theme="light"]) #viewCalendar .cal .cal-row.is-own,
body:not([data-theme="light"]) #viewCalendar .cal .cal-mini.is-own { background: none; }
/* your funds' cards on a day: a flat faint tint of their badge color (a chip), 2px edge kept */
body:not([data-theme="light"]) #viewCalendar .cal-mo__chips .cal-tok.is-own {
  background: color-mix(in srgb, var(--kc, var(--k-none)) 7%, var(--bg));
  box-shadow: inset 2px 0 0 var(--kc, var(--k-none)), inset 0 0 0 1px color-mix(in srgb, var(--kc, var(--k-none)) 26%, transparent);
}
body:not([data-theme="light"]) #viewCalendar .cal-key .cal-tok.is-own .cal-tok__tk { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
/* stat chips over the month: a faint tint of their color; "on" is its outline */
body:not([data-theme="light"]) #viewCalendar .cal .cal-st,
body:not([data-theme="light"]) #viewCalendar .cal .cal-st--ev:hover,
body:not([data-theme="light"]) #viewCalendar .cal .cal-st.is-on { background: color-mix(in srgb, var(--t) 5%, transparent); }
/* segmented tracks: an outline, the chosen option a faint pill with its own hairline */
/* the Special events count is a label, not a button: outlined */
body:not([data-theme="light"]) #viewCalendar .cal .cal-st--ev,
body:not([data-theme="light"]) #viewCalendar .cal .cal-st--ev:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-edge); }
body:not([data-theme="light"]) #viewCalendar .cal-sg { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-edge); }
body:not([data-theme="light"]) #viewCalendar .cal-sg__pill { box-shadow: inset 0 0 0 1px var(--cx-edge-hi); }
body:not([data-theme="light"]) #viewCalendar .cal .cal-pop .cal-seg { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-edge); }
body:not([data-theme="light"]) #viewCalendar .cal .cal-pop .cal-seg__b.is-on { box-shadow: inset 0 0 0 1px var(--cx-edge-hi); }
body:not([data-theme="light"]) #viewCalendar .cal .cal-search { box-shadow: inset 0 0 0 1px var(--cx-edge); }
body:not([data-theme="light"]) #viewCalendar .cal .cal-nav__b { box-shadow: none; }

/* ── 8. Portfolio: Holdings · Trades · Income and returns ─────────────────────────────────────────── */
/* portfolio.css resolves its surfaces (--pb-sf …) on the three views from --surface*, which §1 made black */

/* the fund row you opened was a grey band (portfolio.css .px-tbl): the black; its 2px amber edge stays */
body:not([data-theme="light"]) #viewPortfolio .pb-hold.px-tbl tbody.pb-g.is-open > tr > td,
body:not([data-theme="light"]) #viewPortfolio .pb-hold tbody.pb-g.is-open > tr > td { background: var(--bg); }

/* ── 9. Risk mix (pyramid.css) ─────────────────────────────────────────────────────────────────────── */
body:not([data-theme="light"]) .pyx {
  --pyx-panel: var(--bg);
  --pyx-card: var(--bg); --pyx-card-hi: transparent; --pyx-card-glow: transparent;
  --pyx-card-shadow: 0 0 0 1px var(--pyx-hair, rgba(255, 255, 255, .08));
  --pyx-gband: var(--bg); --pyx-band: transparent;
  --pyx-track: color-mix(in srgb, #fff 4%, transparent);
}
/* the level card: black, its hairline outline; no radial white glow, no top sheen */
body:not([data-theme="light"]) .rk-pyr__item .rk-pyr__note { background: var(--bg); }
body:not([data-theme="light"]) .pyx-lvc { background: var(--bg); box-shadow: var(--pyx-card-shadow); }
body:not([data-theme="light"]) .pyx-pill.is-under { background: color-mix(in srgb, #fff 4%, transparent); }
/* the chosen level row: amber edge, no amber band */
body:not([data-theme="light"]) .pyx-row.is-sel,
body:not([data-theme="light"]) .pyx.pyx--pane .pyx-row.is-sel,
body:not([data-theme="light"]) #viewRisk .pyx--page .pyx-row.is-sel { background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }
/* goal table controls: the cash box and % steppers are outlined, not filled */
body:not([data-theme="light"]) .rkg { --rkg-ctl-bg: transparent; --rkg-ctl-in: inset 0 0 0 1px var(--rkg-ctl-edge, rgba(255, 255, 255, .08)); }

/* ── 10. Tracker · Projection (trackproj.css) ──────────────────────────────────────────────────────── */
/* the lead figure and the Projection's end figure were amber-filled tiles: black, amber left edge */
body:not([data-theme="light"]):not(#_#_) #viewTracker .trk__hero__lead:not(.trk__hero__lead--proj),
body:not([data-theme="light"]):not(#_#_) .trk__hero__lead { background: var(--bg) !important; box-shadow: inset 2px 0 0 var(--accent); }
body:not([data-theme="light"]) :is(#viewTracker, #viewProjection) .trk__kv .cpkv--y { background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }
/* this month's row and the totals row were tinted bands */
body:not([data-theme="light"]) #viewTracker .trk__table tr.trk__cur > td,
body:not([data-theme="light"]) .trk__table tbody tr.trk__cur td,
body:not([data-theme="light"]) .trk__table tr.trk__cur > td:first-child { background: var(--bg); }
body:not([data-theme="light"]) #viewTracker .trk__table tr.trk__cur > td:first-child { box-shadow: inset 2px 0 0 var(--accent), inset -1px 0 0 var(--tp-head); }
body:not([data-theme="light"]) :is(#viewTracker, #viewProjection) .cptable tr:is(.trk__tot, .pj__end) > td,
body:not([data-theme="light"]) #viewTracker .trk__table tr.trk__tot > td:first-child { background: var(--bg); }

/* ── 11. Portfolio chart ───────────────────────────────────────────────────────────────────────────── */
/* the value chart's amber radial glow (portfolio.css .px-chart::before) */
body:not([data-theme="light"]) #viewPortfolio .px-chart::before { background: none; }

/* ── 12. The "New look" (ds.css, only while html.ds) ─────────────────────────────────────────────── */
/* ds.css raises panes to #111214 with a white top light, tiles with a white gradient, popovers #1a1b1f.
   Same rule: its surfaces become the black, its glows and sheens go; its 1px lines and outlines stay. */
html.ds body:not([data-theme="light"]) {
  --ds-surface-1: var(--bg); --ds-surface-2: var(--bg); --ds-overlay: var(--bg); --ds-well: var(--bg);
  --ds-surface-3: color-mix(in srgb, #fff 4%, var(--bg));      /* secondary buttons and chips: the 4% tint */
  --ds-neutral-tint: rgba(255, 255, 255, .04);
  --ds-glow: linear-gradient(transparent, transparent);
  --ds-tile: linear-gradient(transparent, transparent);
  --ds-shadow-1: 0 0 0 0 transparent;
  --ds-elev-1: 0 0 0 0 transparent; --ds-elev-2: 0 0 0 1px var(--ds-line-strong, rgba(255, 255, 255, .1));
  --ds-tile-shadow: 0 0 0 0 transparent; --ds-tile-hover: 0 0 0 1px rgba(255, 255, 255, .12);
  --ds-well-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}