/* ═══════════════════════════════════════════════════════════════════════════════════
   trackproj.css — the Tracker (#viewTracker, tracker.js) and the Projection (#viewProjection,
   app.js renderProjection) in the dashboard's own chrome, the way Portfolio already reads.

   Loaded after cockpit.css / portfolio.css and before theme-light.css. Every rule is scoped to the
   two views, so no other screen moves. The pieces are the desk's:
     panes      .cpane — a 1px hairline outline, the pane radius, a slim bar with the mono amber title
     tables     the Universe / Holdings heads (13px mono small caps) over 14px tabular figures, 1px rows
     figures    a KPI strip like Portfolio's "What it has made": plain label, mono figure, one line under
     controls   the filter-bar pill (36px in the actions row, 30–32px in a pane bar), one amber primary
               per area drawn like the Research "Analyze" button
   Colors are the site tokens: secondary text is --text-2 (10:1 dark, 7.8:1 light), hints --text-3.
   ═══════════════════════════════════════════════════════════════════════════════════ */
#viewTracker, #viewProjection {
  --tp-line: var(--soft-line, rgba(255, 255, 255, .08));              /* pane outline and bar rule */
  --tp-row: color-mix(in srgb, var(--text) 8%, transparent);          /* a row's hairline */
  --tp-head: color-mix(in srgb, var(--text) 16%, transparent);        /* under the column heads */
  --tp-hover: color-mix(in srgb, var(--text) 3.5%, transparent);
  --tp-cta: #e0a82e;                                                   /* the Research "Analyze" amber */
  --tp-cta-ink: #1a1304;
  --tp-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ── the heading bar and the actions row under it ─────────────────────────────────── */
#viewTracker .trk__bar { display: block; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#viewTracker .trk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
#viewTracker .trk__acts .trk__spacer { flex: 1 1 0; }
#viewTracker .trk__acts :is(select, .cpane__tab, .trk__newacct),
#viewTracker .trk__hist .trk-usehist,
#viewProjection .pj__use {
  height: 36px; margin: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background-color: var(--surface-2); color: var(--text-2); box-shadow: none;
  font:600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: border-color .12s, color .12s, background-color .12s;
}
#viewTracker .trk__acts select.trk__sel {
  width: auto; min-width: 0; max-width: 100%; padding: 0 34px 0 14px; color: var(--text);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 15px, calc(100% - 14px) 15px; background-size: 5px 5px; background-repeat: no-repeat;
}
#viewTracker .trk__acts :is(select, .cpane__tab, .trk__newacct):hover,
#viewTracker .trk__hist .trk-usehist:hover { border-color: var(--border-hover); color: var(--text); background-color: var(--surface-2); }
/* "Bring in your holdings and your imported history": a quiet pill on its own line under the note
   (the Tracker's one amber action is Import statements) */
#viewTracker .trk__hist .trk-usehist { display: flex; align-items: center; width: fit-content; max-width: 100%; height: auto; min-height: 36px; padding: 8px 16px; margin-top: 12px; color: var(--text); white-space: normal; line-height: 1.2; text-align: left; }
#viewTracker .trk__acts .cpane__tab.is-active {
  color: var(--accent-soft, var(--accent)); background-color: var(--accent-bg, rgba(224, 168, 46, .12)); border-color: var(--border-accent, var(--accent));
}
#viewTracker .trk__acts .trk__newacct { border-style: solid; }
#viewTracker .trk__acts .trk__tourbtn { color: var(--accent-soft, var(--accent)) !important; font-weight: 650; }

/* the one amber action per area: Import statements, Save in an add form, the empty-state copy, From Portfolio */
#viewTracker .trk__acts .trk__import,
#viewTracker :is(#trkPosAdd, #trkLogAdd, .trk-useport, .trk__rescue__btn),
#viewProjection .pj__use {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--tp-cta) !important; color: var(--tp-cta-ink) !important;
  font:650 13px/1 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); filter: none;
}
#viewTracker :is(.trk__import, #trkPosAdd, #trkLogAdd, .trk-useport, .trk__rescue__btn):hover,
#viewProjection .pj__use:hover { filter: brightness(1.06); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .16); }
#viewTracker .trk__import svg { opacity: 1; }
#viewTracker :is(#trkPosAdd, #trkLogAdd), #viewProjection .pj__use { height: 32px; padding: 0 14px; }
#viewProjection .pj__use { margin-left: auto; }

/* ── panes ────────────────────────────────────────────────────────────────────────── */
:is(#viewTracker, #viewProjection) .trk__pane,
#viewTracker .trk__rescue, #viewTracker .trk__disc {
  display: block; min-width: 0; margin: 0 0 12px; padding: 0; border: 1px solid var(--tp-line); border-radius: var(--radius, 12px);
  background: var(--bg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .035);
}
body[data-theme="light"] :is(#viewTracker, #viewProjection) .trk__pane,
body[data-theme="light"] #viewTracker :is(.trk__rescue, .trk__disc) { box-shadow: 0 1px 2px rgba(58, 48, 30, .05), 0 6px 18px -12px rgba(58, 48, 30, .14); }
#viewTracker .trk__clear { border-color: var(--border-accent, rgba(224, 168, 46, .38)) !important; }
:is(#viewTracker, #viewProjection) .trk__cols { gap: 12px; margin: 0 0 12px; }
:is(#viewTracker, #viewProjection) .trk__cols > .trk__pane { margin: 0; }
/* All accounts: the combined months and the holdings each take the full width until there is room for both */
@media (max-width: 1799px) { #viewTracker .trk__cols:not(.trk__cols--full):not(.trk__cols--charts) { grid-template-columns: minmax(0, 1fr); } }
:is(#viewTracker, #viewProjection) .trk__pane > .cpane__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; height: auto; min-height: 40px;
  padding: 5px 8px 5px 12px; border: 0; border-bottom: 1px solid var(--tp-line); border-radius: 0;
  background: var(--bg) linear-gradient(to bottom, var(--soft, rgba(255, 255, 255, .045)), transparent);
}
:is(#viewTracker, #viewProjection) .trk__pane > .cpane__bar .cpane__title {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font:700 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
:is(#viewTracker, #viewProjection) .trk__pane > .cpane__bar .cpane__meta {
  margin: 0; font:500 13px/1.35 var(--mono); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
#viewTracker .trk__pane > .cpane__bar .trk__barbtns { display: flex; gap: 6px; margin-left: auto; }
#viewTracker .trk__pane > .cpane__bar .cpane__tab {
  height: 30px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: none; box-shadow: none;
  color: var(--text-2); font:650 13px/1 var(--sans); letter-spacing: 0; text-transform: none;
}
#viewTracker .trk__pane > .cpane__bar .cpane__tab:hover { color: var(--text); background: var(--tp-hover); }
#viewTracker .trk__pane > .cpane__bar .cpane__tab.is-active {
  color: var(--accent-soft, var(--accent)); background: var(--accent-bg, rgba(224, 168, 46, .12)); border-color: var(--border-accent, var(--accent));
}
/* the pane's own buttons (From Portfolio, + Add): the filter bar's outlined pill */
#viewTracker .trk__pane > .cpane__bar .trk__barbtns .cpane__tab { border-color: var(--border); background: var(--surface-2); }
#viewTracker .trk__pane > .cpane__bar .trk__barbtns .cpane__tab:hover { border-color: var(--border-hover); background: var(--surface-2); }
#viewTracker :is(.trk__barbtns, .trk__clearbtns, .trk__acts) .cpane__tab, #viewTracker :is(.trk__count, .trk__newacct) { text-decoration: none !important; }
#viewTracker .trk__pane > .cpane__bar .cpane__meta:has(.trk__chk) { margin-left: auto; }
#viewTracker .trk__chk { display: inline-flex; align-items: center; gap: 8px; font:500 13px/1.3 var(--sans); color: var(--text-2); cursor: pointer; }
#viewTracker .trk__chk input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
:is(#viewTracker, #viewProjection) .cpane__body { max-height: none; overflow-x: auto; overflow-y: visible; padding: 0; overscroll-behavior-x: contain; }

/* ── tables: the Universe / Holdings heads and rows ───────────────────────────────── */
:is(#viewTracker, #viewProjection) .cptable { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
:is(#viewTracker, #viewProjection) .cptable thead th {
  position: static; padding: 9px 10px 8px; border: 0; background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--tp-head);
  font:600 13px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2);
  text-align: right; white-space: nowrap; vertical-align: bottom;
}
:is(#viewTracker, #viewProjection) .cptable :is(th, td).l { text-align: left; }
:is(#viewTracker, #viewProjection) .cptable tbody td {
  padding: 8px 10px; border: 0; border-bottom: 1px solid var(--tp-row); background: none;
  font:400 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--text); text-align: right; white-space: nowrap; vertical-align: middle; opacity: 1;
}
:is(#viewTracker, #viewProjection) .cptable tbody td.l { font-family: var(--sans); letter-spacing: 0; }
:is(#viewTracker, #viewProjection) .cptable tr > :first-child { padding-left: 12px; }
:is(#viewTracker, #viewProjection) .cptable tr > :last-child { padding-right: 12px; }
:is(#viewTracker, #viewProjection) .cptable tbody tr:hover > td { background: var(--tp-hover); }
:is(#viewTracker, #viewProjection) .cptable tbody tr:last-child > td { border-bottom: 0; }
:is(#viewTracker, #viewProjection) .cptable td small { margin-left: 5px; font:400 13px/1.3 var(--mono); color: inherit; opacity: 1; }
:is(#viewTracker, #viewProjection) .cptable td b { font-weight: 600; color: var(--text); }
:is(#viewTracker, #viewProjection) .trk__dim { color: var(--text-2); }
:is(#viewTracker, #viewProjection) :is(.cptable, .trk__kv, .trk__hero) .cp-up { color: var(--green); }
:is(#viewTracker, #viewProjection) :is(.cptable, .trk__kv, .trk__hero) .cp-down { color: var(--red-bright, var(--red)); }
body[data-theme="light"] :is(#viewTracker, #viewProjection) :is(.cptable, .trk__kv, .trk__hero) .cp-down { color: var(--red); }
/* totals: the figures in weight, on a faint strip, under a firmer rule */
:is(#viewTracker, #viewProjection) .cptable tr:is(.trk__tot, .pj__end) > td {
  border-top: 1px solid var(--tp-head); border-bottom: 0; background: color-mix(in srgb, var(--text) 3%, var(--bg));
  font-weight: 600; color: var(--text);
}
:is(#viewTracker, #viewProjection) .cptable tr.trk__tot > td small { font-family: var(--sans); color: var(--text-2); }
/* a fund: the Universe row's amber ticker, kind badge and level pill */
#viewTracker .cptable .cp-tk { font:700 14px/1.35 var(--sans); color: var(--accent-soft, var(--accent)); letter-spacing: .01em; }
#viewTracker .cptable :is(.fund-kind, .fund-status) { margin-left: 8px; padding: 0 6px; font-size:13px; line-height: 1.35; vertical-align: 1px; }
#viewTracker .cptable .trk__lvl { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--border-strong, rgba(255, 255, 255, .16)); border-radius: 4px; font:600 13px/1.35 var(--sans); color: var(--text-2); vertical-align: 1px; }
#viewTracker .cptable .cp-bell { margin-left: 4px; }
#viewTracker .trk__also { margin-left: 8px; font:400 13px/1.3 var(--sans); letter-spacing: 0; opacity: 1; color: var(--text-2); }

/* ── the month-by-month ledger ────────────────────────────────────────────────────── */
#viewTracker .trk__tablewrap { max-height: none; overflow-x: auto; }
#viewTracker .trk__table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 0 var(--tp-row); }
#viewTracker .trk__table thead tr > :first-child { z-index: 2; background: var(--bg); box-shadow: inset 0 -1px 0 var(--tp-head); }
#viewTracker .trk__table tbody tr:hover > td:first-child { background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); }
#viewTracker .trk__table tr.trk__cur > td { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
#viewTracker .trk__table tr.trk__tot > td:first-child { background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
#viewTracker .trk__table tr.trk__empty > td { opacity: 1; color: var(--text-2); }
#viewTracker .trk__table tbody td.l.trk-simple { font:500 14px/1.35 var(--sans); color: var(--text); }
#viewTracker .trk__table tbody tr.trk__empty td.l.trk-simple { color: var(--text-2); }
#viewTracker .trk__now {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px;
  background: var(--accent-bg, rgba(224, 168, 46, .12)); color: var(--accent-soft, var(--accent));
  font:650 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; font-style: normal;
}
/* More detail: the group row over the 24 columns */
#viewTracker .trk__table thead tr.trk__grp th {
  height: 30px; padding: 0 10px; line-height: 30px; box-shadow: none; text-align: center;
  font:700 13px/30px var(--mono); letter-spacing: .08em; color: var(--accent-soft, var(--accent));
}
#viewTracker .trk__table thead tr.trk__grp th:not(.trk__grp-blank) { border-left: 1px solid var(--tp-row); border-right: 1px solid var(--tp-row); }
#viewTracker .trk__table thead tr.trk__grp + tr th { top: auto; }
/* the cells you type in: the filter bar's field, cents lined up on the decimal point */
#viewTracker .trk__in {
  display: block; width: 100%; min-width: 108px; height: 34px; margin: 0; padding: 0 10px !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  background: var(--surface-2) !important; color: var(--text) !important; box-shadow: none !important;
  font:500 14px/1 var(--mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: right;
}
#viewTracker .trk__in::placeholder { color: var(--text-3); opacity: 1; }
#viewTracker .trk__in:hover { border: 1px solid var(--border-hover) !important; background: var(--surface-2) !important; }
#viewTracker .trk__in:focus { outline: none; border: 1px solid var(--accent) !important; background: var(--bg) !important; box-shadow: var(--tp-ring) !important; }
#viewTracker .trk__in--wide { min-width: 124px; }
#viewTracker .trk__in--sm { min-width: 64px; }
#viewTracker .trk__in--note { min-width: 200px; text-align: left; font-family: var(--sans) !important; }
#viewTracker .trk__table td:has(> .trk__in) { padding-top: 6px; padding-bottom: 6px; }
#viewTracker .trk__auto { display: block; margin-top: 3px; font:500 13px/1.2 var(--mono); font-style: normal; color: var(--green); text-align: right; }
/* notes under a table */
:is(#viewTracker, #viewProjection) .trk__hint {
  margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid var(--tp-row); background: none;
  font:400 13px/1.55 var(--sans); color: var(--text-2);
}
:is(#viewTracker, #viewProjection) .trk__hint b { color: var(--text); font-weight: 600; }
/* links: the site's own (Portfolio .pb-link) — the page's ink, underlined */
:is(#viewTracker, #viewProjection) :is(.trk__hint, .trk__foot, .trk__disc) a {
  color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent);
  text-underline-offset: 3px; cursor: pointer;
}
:is(#viewTracker, #viewProjection) :is(.trk__hint, .trk__foot, .trk__disc) a:hover { text-decoration-color: currentColor; }
:is(#viewTracker, #viewProjection) :is(.trk__hint, .trk__foot, .trk__disc) a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ── the year so far: a KPI strip like Portfolio's "What it has made" ─────────────── */
#viewTracker .trk__hero { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; gap: 1px; padding: 0; background: var(--tp-row); }
#viewTracker .trk__hero > .cpane__bar { grid-column: 1 / -1; }
#viewTracker .trk__stats { display: contents; }
#viewTracker :is(.trk__hero__lead, .trk__stat) {
  min-width: 0; padding: 12px 16px 14px; border: 0 !important; background: var(--bg) !important;
}
#viewTracker .trk__hero__lead:not(.trk__hero__lead--proj) {
  background: linear-gradient(var(--accent-bg, rgba(224, 168, 46, .12)), var(--accent-bg, rgba(224, 168, 46, .12))), var(--bg) !important;
}
#viewTracker :is(.trk__hero__l, .trk__stat__l) {
  margin: 0; font:400 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
#viewTracker :is(.trk__hero__v, .trk__stat__v) {
  margin: 4px 0 3px; font:500 17px/1.3 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text);
}
#viewTracker .trk__hero__v { font-size:20px; font-weight: 600; }
#viewTracker .trk__hero__lead:not(.trk__hero__lead--proj) .trk__hero__v { color: var(--accent-soft, var(--accent)); }
#viewTracker .trk__hero__v--muted { color: var(--text-2) !important; }
#viewTracker :is(.trk__stat__v.cp-up) { color: var(--green); }
#viewTracker :is(.trk__stat__v.cp-down) { color: var(--red-bright, var(--red)); }
body[data-theme="light"] #viewTracker .trk__stat__v.cp-down { color: var(--red); }
#viewTracker :is(.trk__hero__s, .trk__stat__s) { margin: 0; font:400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--text-2); }

/* the same strip for All accounts, and for the Projection's results */
:is(#viewTracker, #viewProjection) .cpdet__kv.trk__kv {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none;
  gap: 1px; margin: 0 0 12px; padding: 0; border: 1px solid var(--tp-line); border-radius: var(--radius, 12px); background: var(--tp-row); overflow: hidden;
}
#viewProjection .pj__kpane .cpdet__kv.trk__kv { margin: 0; border: 0; border-radius: 0; }
:is(#viewTracker, #viewProjection) .trk__kv .cpkv { min-width: 0; padding: 12px 16px 14px; background: var(--bg); }
:is(#viewTracker, #viewProjection) .trk__kv .cpkv--y { background: linear-gradient(var(--accent-bg, rgba(224, 168, 46, .12)), var(--accent-bg, rgba(224, 168, 46, .12))), var(--bg); }
:is(#viewTracker, #viewProjection) .trk__kv .cpkv__l {
  display: flex; align-items: center; gap: 6px; margin: 0; font:400 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
:is(#viewTracker, #viewProjection) .trk__kv .cpkv__v { margin: 4px 0 3px; font:500 17px/1.3 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
:is(#viewTracker, #viewProjection) .trk__kv .cpkv__v--y { font-size:20px; font-weight: 600; color: var(--accent-soft, var(--accent)); }
:is(#viewTracker, #viewProjection) .trk__kvsub { margin: 0; font:400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--text-2); }

/* the "?" beside a label */
:is(#viewTracker, #viewProjection) .pj__hint {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .18)); border-radius: 999px; opacity: 1;
  font:600 13px/1 var(--sans); font-style: normal; color: var(--text-2); cursor: help; vertical-align: 1px;
}
:is(#viewTracker, #viewProjection) .pj__hint:is(:hover, :focus-visible) { border-color: var(--accent); color: var(--accent-soft, var(--accent)); outline: none; }

/* ── the lower half: Portfolio's pill tabs, one section at a time ─────────────────── */
#viewTracker .trk__switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; padding: 0; border: 0; background: none; }
#viewTracker .trk__switch .cpane__tab {
  min-height: 32px; height: auto; margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: 999px;
  background: none; box-shadow: none; color: var(--text-2); font:650 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
}
#viewTracker .trk__switch .cpane__tab:hover { color: var(--text); background: var(--tp-hover); }
#viewTracker .trk__switch .cpane__tab.is-active {
  color: var(--accent-soft, var(--accent)); background: var(--accent-bg, rgba(224, 168, 46, .12)); border-color: var(--border-accent, var(--accent));
}

/* add forms inside a pane: the same fields */
#viewTracker .trk__addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--tp-row); background: none; }
#viewTracker .trk__addrow[hidden] { display: none; }
#viewTracker .trk__addrow :is(input, select) {
  height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text);
  font:500 14px/1 var(--sans); box-shadow: none;
}
#viewTracker .trk__addrow input::placeholder { color: var(--text-3); opacity: 1; }
#viewTracker .trk__addrow :is(input, select):focus { outline: none; border-color: var(--accent); box-shadow: var(--tp-ring); }
#viewTracker .trk__empty-msg { padding: 14px 12px; font:400 14px/1.6 var(--sans); color: var(--text-2); }
#viewTracker .trk__empty-msg b { color: var(--text); font-weight: 600; }
#viewTracker .trk__empty-msg .trk-useport { height: 32px; margin: 0 6px; vertical-align: middle; }
#viewTracker .trk__x {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--text-2); font:400 18px/1 var(--sans); cursor: pointer;
}
#viewTracker .trk__x:hover { color: var(--red-bright, var(--red)); border-color: var(--border); }
#viewTracker .trk__chart { height: 260px; padding: 12px 12px 10px; }
#viewTracker .lg-row, #viewProjection .lg-row { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
:is(#viewTracker, #viewProjection) .lg { font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
:is(#viewTracker, #viewProjection) .lg:not(.lg--dash):not(.lg--line) i { width: 10px; height: 10px; border-radius: 2px; }
:is(#viewTracker, #viewProjection) :is(.lg--dash, .lg--line) i { width: 16px; }

/* the tax pane's rates */
#viewTracker .trk__rates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; padding: 12px; border: 0; border-bottom: 1px solid var(--tp-row); background: none; }
#viewTracker .trk__rates-l { display: inline-flex; align-items: center; gap: 6px; font:600 14px/1.3 var(--sans); color: var(--text); }
#viewTracker .trk__rate { display: inline-flex; align-items: center; gap: 8px; }
#viewTracker :is(.trk__rate-l, .trk__rate-p) { display: inline-flex; align-items: center; gap: 6px; font:400 14px/1.3 var(--sans); color: var(--text-2); margin: 0; }
#viewTracker .trk__in--rate { display: inline-block; width: 76px !important; min-width: 0 !important; margin: 0; }
#viewTracker .trk__rates-hint { margin-left: auto; font:400 13px/1.3 var(--sans); color: var(--text-2); }
#viewTracker .trk__rates-hint b { color: var(--text); }

/* ── Start here, the definitions, the banners and the notes ───────────────────────── */
#viewTracker .trk__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--tp-row); }
#viewTracker .trk__step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px 16px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none;
}
#viewTracker .trk__step__n {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent-bg, rgba(224, 168, 46, .12)); box-shadow: inset 0 0 0 1px var(--border-accent, rgba(224, 168, 46, .38));
  color: var(--accent-soft, var(--accent)); font:700 14px/1 var(--mono);
}
#viewTracker .trk__step h4 { margin: 4px 0 6px; font:650 15px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
#viewTracker .trk__step p { margin: 0; font:400 14px/1.6 var(--sans); color: var(--text-2); }
#viewTracker .trk__step p b { color: var(--text); font-weight: 600; }
#viewTracker .trk__start__note { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--tp-row); font:400 13px/1.55 var(--sans); color: var(--text-2); }
#viewTracker .trk__start__note b { color: var(--text); font-weight: 600; }
#viewTracker .trk__defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; margin: 0 -1px -1px 0; padding: 0; background: none; }
#viewTracker .trk__def { margin: 0; padding: 12px 16px 14px; border: 0; background: var(--bg); box-shadow: inset -1px -1px 0 var(--tp-row); }
#viewTracker .trk__def dt { margin: 0 0 5px; font:700 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft, var(--accent)); }
#viewTracker .trk__def dd { margin: 0; font:400 14px/1.6 var(--sans); color: var(--text-2); }
#viewTracker .trk__def dd b { color: var(--text); font-weight: 600; }
#viewTracker .trk__def dd i { font:400 13px/1.5 var(--mono); font-style: normal; color: var(--text-2); }
#viewTracker .trk__rescue {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 12px 12px 12px 16px;
  border-left: 3px solid var(--accent); font:400 14px/1.6 var(--sans); color: var(--text-2);
}
#viewTracker .trk__rescue--recover { border-left-color: var(--green); }
#viewTracker .trk__rescue b { color: var(--text); font-weight: 650; }
#viewTracker .trk__clearbody { padding: 12px 16px 14px; }
#viewTracker .trk__clearbody p { margin: 0 0 10px; font:400 14px/1.6 var(--sans); color: var(--text-2); }
#viewTracker .trk__clearbody p b { color: var(--text); }
#viewTracker .trk__clearbtns { display: flex; flex-wrap: wrap; gap: 8px; }
#viewTracker .trk__clearbtns .cpane__tab {
  height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text);
  font:600 13px/1 var(--sans); box-shadow: none;
}
#viewTracker .trk__clearbtns #trkClearAll { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red-bright, var(--red)); }
body[data-theme="light"] #viewTracker .trk__clearbtns #trkClearAll { color: var(--red); }
#viewTracker .trk__foot { margin: 14px 2px 10px; padding: 0; border: 0; font:400 13px/1.6 var(--sans); color: var(--text-2); }
#viewTracker .trk__foot b, #viewTracker .trk__disc b { color: var(--text); font-weight: 600; }
#viewTracker .trk__disc { margin: 0; padding: 10px 14px; font:400 13px/1.6 var(--sans); color: var(--text-2); box-shadow: none !important; }
/* All accounts */
#viewTracker .trk__table .trk__count {
  margin-left: 8px; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  font:600 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); vertical-align: 1px;
}
#viewTracker .trk__table .trk__count:hover { color: var(--text); border-color: var(--border-hover); }
#viewTracker .trk__off > td { opacity: 1; color: var(--text-2); }
#viewTracker .trk__nr { font:italic 400 13px/1.3 var(--sans); color: var(--text-2); }
#viewTracker .trk__link { cursor: pointer; }
#viewTracker .trk__own tr.trk__grp > td {
  padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--tp-head); background: color-mix(in srgb, var(--text) 3%, var(--bg));
  font-weight: 600; color: var(--text);
}
#viewTracker .trk__own tr.trk__grp > td:first-child { font:700 13px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent-soft, var(--accent)); }
#viewTracker .trk__hint--income { font-size:13px; }

/* ── the Projection ───────────────────────────────────────────────────────────────── */
#viewProjection .pj__grid, #viewProjection .pj__grid--7 {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; gap: 1px; margin: 0; padding: 0; border: 0; background: var(--tp-row);
}
#viewProjection .pj__f {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 12px 14px 14px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none;
}
#viewProjection .pj__f:focus-within { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
#viewProjection .pj__fl { display: flex; align-items: flex-start; gap: 6px; font:500 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
#viewProjection .pj__fl .pj__hint { margin-top: -1px; }
#viewProjection .pj__fi { display: flex; align-items: center; gap: 7px; }
#viewProjection .pj__fi input:is([type=number], [type=text]) {
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; height: 36px; padding: 0 10px; field-sizing: fixed;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); box-shadow: none;
  font:600 16px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: right;
}
#viewProjection .pj__fi input#projStart { width: 100%; }
#viewProjection .pj__fi input:hover { border-color: var(--border-hover); }
#viewProjection .pj__fi input:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: var(--tp-ring); }
#viewProjection .pj__fi em { flex: 0 0 auto; font:500 13px/1 var(--mono); font-style: normal; color: var(--text-2); white-space: nowrap; }
#viewProjection .pj__chart { position: relative; height: 290px; padding: 12px 12px 10px; }
#viewProjection #projTable tbody tr > :first-child { box-shadow: none; }
#viewProjection #projTable tbody td.l { font-family: var(--mono); }
#viewProjection .cpane__body { padding: 0; }
@media (max-width: 1250px) {
  #viewProjection .pj__grid--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #viewProjection .pj__grid--7 > .pj__f:last-child { grid-column: span 2; }
}

/* ── narrower screens ─────────────────────────────────────────────────────────────── */
@media (max-width: 1250px) {
  #viewTracker .trk__hero { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  #viewTracker .trk__hero__lead { grid-column: span 5; }
  #viewTracker .trk__stat { grid-column: span 2; }
}
body[data-text-size="xlarge"] #viewTracker .trk__hero { grid-template-columns: repeat(10, minmax(0, 1fr)); }
body[data-text-size="xlarge"] #viewTracker .trk__hero__lead { grid-column: span 5; }
body[data-text-size="xlarge"] #viewTracker .trk__stat { grid-column: span 2; }
@media (max-width: 1000px) {
  :is(#viewTracker, #viewProjection) .cpdet__kv.trk__kv { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewTracker .cpdet__kv.trk__kv > .cpkv:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  #viewTracker .trk__steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #viewTracker .trk__acts { gap: 8px; }
  #viewTracker .trk__acts .trk__spacer { flex-basis: 100%; height: 0; }
  #viewTracker .trk__acts select { flex: 1 1 140px; }
  #viewTracker .trk__hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewTracker .trk__hero__lead, #viewTracker .trk__stat { grid-column: auto; }
  #viewTracker .trk__stat:last-child { grid-column: 1 / -1; }
  #viewTracker :is(.trk__hero__lead, .trk__stat) { padding: 10px 12px 12px; }
  #viewTracker .trk__pane > .cpane__bar .trk__barbtns { margin-left: 0; }
  #viewTracker .trk__pane > .cpane__bar .cpane__meta:has(.trk__chk) { margin-left: 0; flex-basis: 100%; }
  #viewTracker .trk__rates-hint { margin-left: 0; }
  #viewTracker .trk__table tr > :first-child { box-shadow: inset -1px 0 0 var(--tp-head); }
  #viewProjection .pj__grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewProjection .pj__use { margin-left: 0; }
  #viewProjection .pj__chart { height: 240px; }
  #viewProjection #projTable tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 0 var(--tp-head); }
  #viewProjection #projTable thead tr > :first-child { box-shadow: inset -1px 0 0 var(--tp-head), inset 0 -1px 0 var(--tp-head); }
}
/* light: the "now" tag sits on the current month's amber tint, so its ink goes a step darker (4.45 → 6:1) */
body[data-theme="light"] #viewTracker .trk__now { color: #6b4a00; }
/* the totals row's "excludes N holdings with no cost basis" wraps under its figure rather than widening the column */
#viewTracker .cptable tr.trk__tot > td:has(> small.trk__dim) { white-space: normal; min-width: 150px; }
#viewTracker .cptable tr.trk__tot > td > small.trk__dim { display: block; margin: 2px 0 0; font-family: var(--sans); }

/* ── Strict review W21 (Sep 27): lighter Tracker chrome ─────────────────────────────────────────────
   One amber primary, Import statements; Download report, Bring in your holdings and the tour button are the
   quiet outlined pill. The actions row is at the dashboard filter bar's pill size (32px, 13px text). The
   month grid's cells are bare figures on a faint underline that show their box only on hover and focus.
   The section tabs (Month by month · What you own · Payments received · Charts · Tax estimate) sit under the
   heading by flex order, so tracker.js keeps its markup order; the notes at the foot fold to one line. */
#viewTracker .trk { display: flex; flex-direction: column; }
#viewTracker .trk > .trk__bar { order: -2; }
#viewTracker .trk > .trk__switch { order: -1; margin: 0 0 12px; }
#viewTracker .trk [data-more-panel][hidden] { display: none !important; }
#viewTracker .trk__acts :is(select, .cpane__tab, .trk__newacct), #viewTracker .trk__acts .trk__import { height: 32px; }
#viewTracker .trk__acts select.trk__sel { background-position: calc(100% - 19px) 13px, calc(100% - 14px) 13px; }
#viewTracker .trk__acts .trk__rpt { display: inline-flex; align-items: center; gap: 7px; }
#viewTracker .trk__acts .trk__rpt svg { flex: none; }
#viewTracker .trk__acts .trk__tourbtn { color: var(--text-2) !important; font-weight: 600; }
#viewTracker .trk__acts .trk__tourbtn:hover { color: var(--text) !important; }
#viewTracker #trk .trk-useport {
  height: 30px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface-2) !important; color: var(--text) !important;
  box-shadow: none; font-weight: 600;
}
#viewTracker #trk .trk-useport:hover { border-color: var(--border-hover); filter: none; box-shadow: none; }
/* the cells you type in: bare, on the row's faint underline; the box appears on hover and while typing */
#viewTracker .trk__table .trk__in {
  height: 30px; padding: 0 6px !important; border: 1px solid transparent !important; border-radius: 4px !important;
  border-bottom-color: color-mix(in srgb, var(--text) 16%, transparent) !important;
  background: transparent !important; font-weight: 400 !important;
}
#viewTracker .trk__table .trk__in:hover { border-color: var(--border-hover) !important; background: var(--surface-2) !important; }
#viewTracker .trk__table .trk__in:focus { border-color: var(--accent) !important; background: var(--bg) !important; box-shadow: var(--tp-ring) !important; }
#viewTracker .trk__table td:has(> .trk__in) { padding-top: 4px; padding-bottom: 4px; }
/* the foot: one line, the rest behind "More" */
#viewTracker .trk__fold { margin: 14px 2px 10px; }
#viewTracker .trk__fold__s {
  display: block; cursor: pointer; list-style: none; font:400 13px/1.6 var(--sans); color: var(--text-2);
}
#viewTracker .trk__fold__s::-webkit-details-marker { display: none; }
#viewTracker .trk__fold__more {
  position: relative; margin-left: 4px; color: var(--text); font-weight: 600;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent); text-underline-offset: 3px;
}
#viewTracker .trk__fold[open] .trk__fold__more { color: transparent; }
#viewTracker .trk__fold[open] .trk__fold__more::after { content: "Less"; position: absolute; left: 0; color: var(--text); }
#viewTracker .trk__fold__s:hover .trk__fold__more { text-decoration-color: currentColor; }
#viewTracker .trk__fold__s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
#viewTracker .trk__fold :is(.trk__foot, .trk__disc) {
  margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important;
  font:400 13px/1.6 var(--sans); color: var(--text-2);
}

/* ── RMS lingo (Sep 28 2026): a column head carrying a glossary "?" (glossary.css places the mark
   absolutely in the cell's right padding) must be the mark's box; these heads are otherwise static,
   so without this the marks sat at the page's right edge and widened it. ── */
#viewTracker .trk__table thead th[data-glossary] { position: relative; }