/* ================================================================
   Maktoob design system
   Loaded after every other stylesheet. It gives every page one set of
   tokens and one version of each shared part, taken from the CONNECT
   pages (Inbox, Tasks): white page, one card style, hairlines, neutral
   greys, outlined controls, and colour only where it means something.

   Accent colours keep their meanings on every page:
     teal    your money: net worth, assets, the main series
     green   money in, gains, healthy
     red     money out, losses, breaches, overdue
     orange  needs attention, pending, at risk
     blue    cash, selected, new
     purple  modelled or projected
   ================================================================ */

:root {
  --ds-teal: #3d85c6;    --ds-teal-bg: #f3f3f3;    --ds-teal-ink: #245f97;
  --ds-green: #6aa84f;   --ds-green-bg: #f3f3f3;   --ds-green-ink: #3f7a2a;
  --ds-red: #cc0000;     --ds-red-bg: #f3f3f3;     --ds-red-ink: #cc0000;
  --ds-orange: #e69138;  --ds-orange-bg: #f3f3f3;  --ds-orange-ink: #a35d10;
  --ds-blue: #3d85c6;    --ds-blue-bg: #f3f3f3;    --ds-blue-ink: #245f97;
  --ds-purple: #674ea7;  --ds-purple-bg: #f3f3f3;  --ds-purple-ink: #674ea7;
  --ds-grey: #a3a3a3;    --ds-grey-bg: #f3f3f3;    --ds-grey-ink: #565656;

  --ds-page: #ffffff;
  --ds-card: #ffffff;
  --ds-border: #e6e6e6;
  --ds-line: #ebebeb;
  --ds-line-soft: #f2f2f2;
  --ds-well: #f4f4f4;
  --ds-surface: #fcfcfc;
  --ds-hover: #fafafa;
  --ds-control: #e5e5e5;
  --ds-ink: #1a1a1a;
  --ds-ink-2: #3e3e3e;
  --ds-ink-3: #707070;
  --ds-ink-4: #8b8b8b;
  --ds-ink-5: #a3a3a3;
  --ds-shadow: 0 1px 2px rgba(20, 20, 20, .035), 0 7px 18px rgba(20, 20, 20, .025);
  --ds-radius: 10px;
  --ds-radius-control: 7px;
  --ds-radius-chip: 4px;
  --ds-gap: 14px;
}

/* ---------- Tokens the existing styles already read ---------- */
.finance-page {
  --fin-page: var(--ds-page);
  --fin-surface: var(--ds-card);
  --fin-ink: var(--ds-ink);
  --fin-secondary: var(--ds-ink-3);
  --fin-muted: var(--ds-ink-5);
  --fin-border: var(--ds-border);
  --fin-divider: var(--ds-line);
  --fin-hover: var(--ds-hover);
  --fin-card-radius: var(--ds-radius);
  --fin-control-radius: var(--ds-radius-control);
  --fin-card-shadow: var(--ds-shadow);
  --fin-space-section: var(--ds-gap);
  --fin-section-gap: var(--ds-gap);
  --fin-grid-gap: var(--ds-gap);
  --ov-border: var(--ds-border);
  --proj-border: var(--ds-border);
  --inv-line: var(--ds-border);
  --text-secondary: var(--ds-ink-3);
  --text-muted: var(--ds-ink-4);
  --site-red: var(--ds-red);
  --site-orange: var(--ds-orange);
  --site-green: var(--ds-green);
  --site-teal: var(--ds-teal);
  --site-blue: var(--ds-blue);
  --site-purple: var(--ds-purple);
  background: var(--ds-page);
  color: var(--ds-ink);
}
.finance-page, .finance-page * { font-synthesis: none; }

/* ---------- Type: three weights only ---------- */
.finance-page :is(strong, b, h1, h2, h3, h4, th) { font-weight: 600; }

/* ================================================================
   Cards. Every block on a page is one of these.
   ================================================================ */
.finance-page :is(
  .fin-kpi, .fin-chart-card, .fin-hero, .fin-workspace-card, .fin-ov-card, .fin-ov-stat-card,
  .fin-account-card, .fin-add-card, .fin-doc-card, .fin-estate-graph-card, .fin-estate-card,
  .fin-job-card, .fin-proj-hero, .fin-proj-source, .fin-proj-assumptions, .fin-mini,
  .fin-board, .fin-board-cols, .fin-metric-list, .fin-input-group, .fin-input-grid,
  .fin-plan-card, .fin-edu-institution-card, .fin-edu-program-identity, .fin-ma-wrap,
  .fin-di-intro, .fin-module-empty, .fin-goal-card,
  .inv-card, .inv-opportunity-card, .inv-opportunity-add, .inv-market-card, .inv-scenario-card,
  .inv-decision-check, .inv-command-head, .inv-underwrite-head, .inv-editor,
  .inv-diligence-list, .inv-learning-grid, .inv-provider-grid
) {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background-color: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
/* Cards that sit inside another card lose their own frame. */
.finance-page :is(.fin-workspace-card, .fin-hero, .inv-editor, .fin-board) :is(.fin-metric-list, .fin-input-grid, .fin-input-group, .fin-chart-card) {
  box-shadow: none;
}

/* Clickable cards: a firmer edge on hover, never a fill. */
.finance-page :is(.fin-account-card, .fin-doc-card, .fin-add-card, .fin-estate-card, .inv-opportunity-card, .fin-ledger-card, .fin-goal-card):hover {
  border-color: #d6d6d6;
  background-color: var(--ds-card);
}

/* ================================================================
   Card heads. One title size, one subtitle size, tools at the right.
   ================================================================ */
.finance-page :is(
  .fin-graph-title, .fin-ov-card-title, .fin-module-head > div:first-child > strong,
  .fin-seg-title, .fin-ledger-col-head strong, .inv-command-head h2, .fin-di-intro h2,
  .inv-underwrite-head h2, .fin-ma-label
) {
  color: var(--ds-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
}
.finance-page :is(.fin-graph-sub, .fin-ov-card-sub, .fin-module-head > div:first-child > span, .fin-seg-meta) {
  color: var(--ds-ink-4);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
.finance-page .fin-module-head {
  min-height: 48px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-card);
}
.finance-page .fin-module-head > div:first-child { gap: 1px; }

/* Counts beside a title. */
.finance-page :is(.fin-seg-count, .column-count, .fin-count) {
  flex: none;
  padding: 0 5px;
  border-radius: var(--ds-radius-chip);
  background: #f3f3f3;
  color: #4b4b4b;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Section heads over a row of cards (Accounts, Credit capacity, ledgers):
   the same title and count as a card head, sitting just above its cards. */
.finance-page .fin-seg {
  min-height: 28px;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0 2px;
}
.finance-page .fin-seg-viewall {
  color: var(--ds-ink-2);
  font-size: 12px;
  font-weight: 500;
}

/* ================================================================
   Stat cards (fin-kpi): label and mark, the figure, one line.
   ================================================================ */
.finance-page .fin-kpi {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 104px;
  padding: 12px 14px 13px;
}
.finance-page .fin-kpi-top {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.finance-page :is(.fin-kpi-label, .fin-ov-stat-label) {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-ink-2);
  font-family: var(--font-app);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-page .fin-kpi-valrow { margin-top: 10px; align-items: baseline; }
.finance-page :is(.fin-kpi-value, .fin-ov-stat-val, .fin-hero-side strong, .fin-card-value) {
  color: #212121;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.finance-page :is(.fin-kpi-value, .fin-ov-stat-val) { font-size: 28px; }
.finance-page .fin-hero-side strong { font-size: 30px; }
.finance-page .fin-card-value { font-size: 24px; }
.finance-page :is(.fin-kpi-sub, .fin-ov-stat-prev) {
  margin-top: 6px;
  color: var(--ds-ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}
.finance-page .fin-kpi .fin-trend { display: none; }
/* Smaller stat cards inside a busier layout keep the same parts, smaller figure. */
.finance-page :is(.fin-estate-side-kpis, .fin-merch-kpis) .fin-kpi-value { font-size: 22px; }
.finance-page.is-density-compact .fin-kpi { min-height: 0; padding: 10px 12px; }
.finance-page.is-density-compact .fin-kpi-value { font-size: 22px; }

/* Marks: a small square of colour and a word. Used for movement and status. */
.finance-page :is(.fin-kpi-mark, .ds-mark) {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-ink, var(--ds-ink-3));
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.finance-page :is(.fin-kpi-mark, .ds-mark) > i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--c, var(--ds-grey));
}
.finance-page .fin-kpi-mark.is-up { --c: var(--ds-green); --c-ink: var(--ds-green-ink); }
.finance-page .fin-kpi-mark.is-down { --c: var(--ds-red); --c-ink: var(--ds-red-ink); }

/* Finances → Overview: its stat cards become the same card. */
.finance-page .fin-ov-stat-card { padding: 12px 14px 13px; }
.finance-page .fin-ov-stat-label { display: flex; align-items: center; gap: 6px; }
.finance-page .fin-ov-stat-label svg { width: 14px; height: 14px; color: var(--ds-ink-4); }
.finance-page .fin-ov-stat-val { margin-top: 10px; }
.finance-page .fin-ov-stat-change { margin-top: 6px; color: var(--ds-ink-3); font-size: 11.5px; }

/* The side figure in the net-worth hero. */
.finance-page .fin-hero-side { border-left: 1px solid var(--ds-line); background: var(--ds-surface); }
.finance-page .fin-side-label {
  color: var(--ds-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.finance-page .fin-side-mini em { color: var(--ds-ink-3); font-style: normal; font-size: 12px; }
.finance-page .fin-side-mini b { color: var(--ds-ink); font-weight: 600; }

/* ================================================================
   Small labels. Labels of a value are written normally; only short
   kickers above a heading keep capitals, all in one style.
   ================================================================ */
.finance-page :is(
  .fin-input-group-title, .fin-proj-assumptions label, .fin-ma-head, .fin-table-tool-group-label,
  .fin-table-format-label, .rbc-import-stat em, .fin-estate-exp-summary span, .fin-job-foot em,
  .fin-job-term-summary em, .inv-scenario-card span, .inv-feed-status em,
  .fin-document-meta span, .fin-edu-detail-card small, .fin-edu-roadmap-stats small,
  .fin-edu-milestone-row small, .fin-di-claims em, .fin-di-rationale span, .fin-addr-src
) {
  color: var(--ds-ink-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.finance-page :is(.inv-eyebrow, .fin-di-intro > div:first-child > span, .inv-market-card-head span, .fin-di-docs h3, .fin-di-drift-columns, .fin-ledger-col-head span) {
  color: var(--ds-ink-4);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

/* ================================================================
   Buttons. Outlined everywhere; the header's Add is the only fill.
   ================================================================ */
.finance-page :is(.fin-small-btn, .inv-primary-action, .fin-module-empty button, .fin-seg-btn) {
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--ds-control);
  border-radius: var(--ds-radius-control);
  background: var(--ds-card);
  color: var(--ds-ink-2);
  font-family: var(--font-app);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background .12s, color .12s, border-color .12s;
}
.finance-page :is(.fin-small-btn, .inv-primary-action, .fin-module-empty button, .fin-seg-btn):hover {
  background: #f7f7f7;
  color: var(--ds-ink);
}
/* The main action of a block: the same outline, a little firmer. */
.finance-page :is(.fin-small-btn.primary, .inv-primary-action) {
  border-color: #cfcfcf;
  color: var(--ds-ink);
  font-weight: 600;
}
.finance-page :is(.fin-small-btn.primary, .inv-primary-action):hover { border-color: #b8b8b8; background: #f7f7f7; }
.finance-page :is(.fin-small-btn, .inv-primary-action) svg { width: 13px; height: 13px; }
.finance-page :is(.fin-recent-doc-row, .fin-doc-card) button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--ds-control);
  border-radius: var(--ds-radius-control);
  background: var(--ds-card);
  color: var(--ds-ink-2);
  font-size: 12px;
  font-weight: 500;
}

/* Segmented switches (Board / List / Table, Curve / Mix …). */
.finance-page :is(.fin-view-switch, .fin-seg-switch, .fin-proj-views) {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  background: var(--ds-well);
  overflow: visible;
}
.finance-page :is(.fin-view-switch, .fin-seg-switch, .fin-proj-views) button {
  height: 22px;
  min-height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
}
.finance-page :is(.fin-view-switch, .fin-seg-switch, .fin-proj-views) button:hover { background: transparent; color: var(--ds-ink); }
.finance-page :is(.fin-view-switch, .fin-seg-switch, .fin-proj-views) button:is(.is-active, .active, [aria-pressed="true"]) {
  background: var(--ds-card);
  color: var(--ds-ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(20, 20, 20, .1);
}

/* Quiet menu buttons inside card heads ("2-year projection ▾"). */
.finance-page .fin-graph-period {
  color: var(--ds-ink-3);
  font-size: 12px;
  font-weight: 500;
}

/* ================================================================
   Chips and tags: rounded rectangles, never capsules.
   ================================================================ */
.finance-page :is(.inv-type-chip, .fin-archive-kind, .fin-ledger-kind, .fp-tag, .tag, .fin-chip, .fin-pill, .fin-status-pill) {
  border-radius: 6px;
  letter-spacing: 0;
  text-transform: none;
}
.finance-page .inv-type-chip {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ds-control);
  background: var(--ds-card);
  color: var(--ds-ink-2);
  font-size: 12px;
  font-weight: 500;
}
.finance-page .inv-type-chip:hover { background: #f7f7f7; color: var(--ds-ink); }
.finance-page :is(.fin-archive-kind, .fin-ledger-kind) {
  padding: 0 6px;
  border-radius: var(--ds-radius-chip);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}
/* Small markers are squares with soft corners. */
.finance-page :is(.fin-dot, .inv-class-dot, .inv-check-light, .progress-dot, .tv-tn-priority-dot, .is-ready, .fin-ov-legend span, .fin-legend-dot, .fin-swatch) {
  border-radius: 2px;
}
.finance-page :is(.fin-bar, .fin-bar-fill, .fin-proj-bridge-track, .fin-proj-bridge-track > i) { border-radius: 2px; }

/* ================================================================
   Fields
   ================================================================ */
.finance-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):not(.cn-hb-search-input) {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-control);
  background-color: var(--ds-card);
  color: var(--ds-ink);
  font-family: var(--font-app);
  font-size: 12.5px;
  box-shadow: none;
}
.finance-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select):not(.cn-hb-search-input):not(.fin-cell-input) {
  min-height: 30px;
}
.finance-page :where(input, select, textarea):not(.cn-hb-search-input):hover { border-color: #d6d6d6; }
.finance-page :where(input, select, textarea):not(.cn-hb-search-input):focus {
  border-color: #2563eb;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.finance-page label { color: var(--ds-ink-3); }

/* ================================================================
   Tables
   ================================================================ */
.finance-page .fin-table th {
  height: 34px;
  color: var(--ds-ink-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.finance-page .fin-table td { height: 40px; color: var(--ds-ink); font-size: 13px; }
.finance-page .fin-table :is(th, td) { border-bottom-color: var(--ds-line-soft); }
.finance-page .fin-table thead th { border-bottom-color: var(--ds-line); }
.finance-page .fin-table tbody th { color: var(--ds-ink); font-size: 13px; font-weight: 500; }
.finance-page .fin-table-wrap::before,
.finance-page .fin-table-wrap::after { background: var(--ds-line); }
/* Inside a card, a table runs to the card's edges with no outer rules. */
.finance-page :is(.fin-workspace-card, .fin-ledger-module) .fin-table-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  --fin-table-bleed: 14px;
}
.finance-page :is(.fin-workspace-card, .fin-ledger-module) .fin-table-wrap::before,
.finance-page :is(.fin-workspace-card, .fin-ledger-module) .fin-table-wrap::after { display: none; }
.finance-page :is(.fin-workspace-card, .fin-ledger-module) .fin-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.finance-page .fin-table tbody tr:hover :is(td, th) { background: var(--ds-hover); }
.finance-page .fin-table td > strong + small { margin-left: 7px; color: var(--ds-ink-4); font-size: 12px; font-weight: 400; }
.finance-page .fin-table td > strong { font-weight: 500; }
/* Money reads down a right-aligned column. */
.finance-page .fin-ledger-module .fin-table :is(th, td):last-child { text-align: right; font-variant-numeric: tabular-nums; }
.finance-page .fin-table td { font-variant-numeric: tabular-nums; }

/* ================================================================
   Dashboard blocks that had been left bare go back into cards.
   ================================================================ */
.finance-page :is(.fin-ledger-module, .fin-goals-module, .fin-recent-docs) {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
.finance-page :is(.fin-ledger-module, .fin-goals-module, .fin-recent-docs) > .fin-module-head,
.finance-page .fin-recent-docs.is-compact > .fin-module-head {
  min-height: 48px;
  margin: 0;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-card);
}
.finance-page :is(.fin-ledger-module, .fin-goals-module, .fin-recent-docs) > .fin-module-head > div:first-child > strong { font-size: 13.5px; }

/* Source documents: one flat row of cells in the card, divided by lines. */
.finance-page .fin-recent-docs .fin-recent-doc-list {
  gap: 0;
  padding: 0;
}
.finance-page .fin-recent-docs .fin-recent-doc-row {
  margin: 0;
  border: 0;
  border-right: 1px solid var(--ds-line);
  border-radius: 0;
  box-shadow: none;
  background: var(--ds-card);
}
.finance-page .fin-recent-docs .fin-recent-doc-row:last-child { border-right: 0; }
.finance-page .fin-recent-docs .fin-recent-doc-row:hover { background: var(--ds-hover); }

/* Board view of the ledger: columns inside the card, cards flat on white. */
.finance-page .fin-ledger-module .fin-ledger-board { padding: 14px; }
.finance-page .fin-ledger-module .fin-ledger-card { box-shadow: none; }

/* File-type badges (PDF, XLSX). */
.finance-page .fin-doc-icon {
  border-radius: 7px;
  background: var(--ds-well);
  color: var(--ds-ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ================================================================
   Empty states
   ================================================================ */
.finance-page :is(.fin-empty, .fin-chart-empty, .fin-module-empty) {
  color: var(--ds-ink-5);
  font-size: 12.5px;
}
.finance-page .fin-module-empty { box-shadow: none; border-style: solid; }
.finance-page .fin-module-empty strong { color: var(--ds-ink-2); font-size: 13px; font-weight: 600; }

/* ================================================================
   Charts: one axis and grid colour, one label size.
   ================================================================ */
.finance-page svg text { font-family: var(--font-app); }
.finance-page :is(.fin-axis-label, .fin-chart-axis text, .fin-axis text) { fill: var(--ds-ink-4); font-size: 10.5px; }
.finance-page .fin-gauge-track { stroke: var(--ds-well); }
.finance-page .fin-gauge-target { stroke: var(--ds-ink); }
.finance-page .fin-gauge-number { fill: #212121; font-weight: 700; }
.finance-page .fin-gauge-label { fill: var(--ds-ink-3); font-weight: 600; text-transform: none; font-size: 11px; letter-spacing: 0; }
.finance-page .fin-gauge-detail { fill: var(--ds-ink-4); }

/* ================================================================
   Shell pieces drawn by the finance pages
   ================================================================ */
/* Tab-bar and Experience menus keep the Workspace panel's own border and
   shadow (header.css), so every menu on the platform is the same panel. */
.fin-experience-radio { border-radius: 5px; }

/* ================================================================
   Marks: tones
   ================================================================ */
.ds-mark.is-green  { --c: var(--ds-green);  --c-ink: var(--ds-green-ink); }
.ds-mark.is-red    { --c: var(--ds-red);    --c-ink: var(--ds-red-ink); }
.ds-mark.is-orange { --c: var(--ds-orange); --c-ink: var(--ds-orange-ink); }
.ds-mark.is-blue   { --c: var(--ds-blue);   --c-ink: var(--ds-blue-ink); }
.ds-mark.is-teal   { --c: var(--ds-teal);   --c-ink: var(--ds-teal-ink); }
.ds-mark.is-purple { --c: var(--ds-purple); --c-ink: var(--ds-purple-ink); }
.ds-mark.is-grey   { --c: #c4c4c4;          --c-ink: var(--ds-ink-3); }

/* ================================================================
   Lists inside a card: flat rows divided by hairlines.
   ================================================================ */
.finance-page :is(.fin-ov-stream-list, .fin-ov-action-list, .fin-ov-watch-list) {
  gap: 0;
  margin: 10px -14px 0;
}
.finance-page :is(.fin-ov-stream-row, .fin-ov-action-row, .fin-ov-watch-row) {
  min-height: 46px;
  gap: 12px;
  padding: 7px 14px;
  border: 0;
  border-top: 1px solid var(--ds-line-soft);
  border-radius: 0;
}
.finance-page :is(.fin-ov-stream-row, .fin-ov-action-row, .fin-ov-watch-row):hover { background: var(--ds-hover); }
.finance-page :is(.fin-ov-stream-row, .fin-ov-action-row, .fin-ov-watch-row) strong {
  color: var(--ds-ink);
  font-size: 13px;
  font-weight: 500;
}
.finance-page :is(.fin-ov-stream-row, .fin-ov-action-row, .fin-ov-watch-row) em {
  color: var(--ds-ink-4);
  font-size: 12px;
}
.finance-page :is(.fin-ov-stream-row, .fin-ov-watch-row) b {
  color: var(--ds-ink);
  font-size: 13px;
  font-weight: 600;
}
.finance-page .fin-ov-action-row { grid-template-columns: 74px minmax(0, 1fr) auto; }
.finance-page .fin-ov-action-row.is-late em { color: var(--ds-red-ink); font-weight: 500; }
.finance-page .fin-ov-stream-row { grid-template-columns: 8px minmax(0, 1fr) auto 64px; }
.finance-page .fin-ov-stream-color { width: 8px; height: 28px; border-radius: 3px; }
.finance-page .fin-ov-stream-row .ds-mark { justify-self: end; }
.finance-page .fin-ov-watch-row { grid-template-columns: 8px minmax(0, 1fr) auto auto; }
.finance-page .fin-ov-watch-row > span { width: 8px; height: 28px; border-radius: 3px; }
.finance-page .fin-ov-action-buttons {
  margin: 0 -14px -14px;
  padding: 10px 14px;
  border-top: 1px solid var(--ds-line);
  background: var(--ds-surface);
}
.finance-page :is(.fin-ov-btn, .fin-ov-action-buttons button) {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-color: var(--ds-control);
  color: var(--ds-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.finance-page .fin-ov-card { padding: 12px 14px 14px; }
.finance-page .fin-ov-card-head strong { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.finance-page .fin-ov-card-head span { color: var(--ds-ink-4); font-size: 12px; }
.finance-page .fin-ov-card-title svg { color: var(--ds-ink-4); }

/* The page's own title row reads like a section head, not a headline. */
.finance-page .fin-ov-head { align-items: center; margin-bottom: 0; }
.finance-page .fin-ov-head h2 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.finance-page .fin-ov-head p { margin-top: 2px; color: var(--ds-ink-4); font-size: 12px; }

/* Stat cards: label, figure, then the lines beneath — the same order as everywhere else. */
.finance-page .fin-ov-stat-card { display: flex; flex-direction: column; min-height: 104px; }
.finance-page .fin-ov-stat-label { order: 0; }
.finance-page .fin-ov-stat-val { order: 1; }
.finance-page .fin-ov-stat-prev { order: 2; margin-top: 6px; }
.finance-page .fin-ov-stat-change { order: 3; margin-top: 2px; }
.finance-page .fin-ov-stat-change svg { width: 12px; height: 12px; }

/* Monthly bars: flat tops, no pills. */
.finance-page .fin-ov-bar-pair span { width: 12px; border-radius: 2px 2px 0 0; }

/* ================================================================
   Editable cells: plain text until you point at them.
   ================================================================ */
.finance-page.finance-page .fin-table td :is(input, select):not([type="checkbox"]):not([type="radio"]) {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.finance-page.finance-page .fin-table tr:hover td :is(input, select):not([type="checkbox"]):not([type="radio"]) { border-color: var(--ds-control); background-color: var(--ds-card); }
.finance-page.finance-page .fin-table td :is(input, select):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: #2563eb;
  background-color: var(--ds-card);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.finance-page .fin-table tfoot td,
.finance-page .fin-table tr.is-total td,
.finance-page .fin-table tr[class*="total"] td { font-weight: 600; }

/* ================================================================
   Remaining small labels (Education, Planner tree) in the one style.
   ================================================================ */
.finance-page :is(.fin-edu-outlook-summary small, .fin-edu-roadmap-stats small, .fin-edu-detail-card small, .fin-edu-milestone-row small),
.finance-planner :is(.tv-compare-stats em, .tv-tn-financials em, .tv-insight-kpis span, .tv-insight-title em, .tv-heat-kpis span, .tv-annotation-head, .tv-heat-legend, .tv-heat-rank-body em) {
  color: var(--ds-ink-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.finance-planner .tv-insights-head span {
  color: #979797;
  font-family: var(--font-sidebar);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
}
.finance-page .fin-edu-outlook-summary > * { box-shadow: none; }
.finance-page .fin-edu-outlook-summary strong { color: #212121; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* Round shapes left over: avatars, plus buttons, counts, thin bars. */
.finance-page :is(.card-avatar, .tv-tn-avatar) { border-radius: 5px; }
.finance-page .inv-opportunity-add span { border-radius: 8px; }
.finance-page .fin-board-col h3 span { border-radius: var(--ds-radius-chip); }
.finance-planner :is(.tv-flow-bars b, .positive, .negative) { border-radius: 2px; }
.finance-page .card-avatar { background-color: var(--ds-ink-3); }

/* ================================================================
   Investment cards
   ================================================================ */
.finance-page .inv-card-capital { gap: 0; margin: 0 -14px 12px; border-top: 1px solid var(--ds-line-soft); border-bottom: 1px solid var(--ds-line-soft); }
.finance-page .inv-card-capital > div { padding: 9px 14px; border-radius: 0; background: transparent; }
.finance-page .inv-card-capital > div + div { border-left: 1px solid var(--ds-line-soft); }
.finance-page :is(.inv-card-capital span, .inv-card-metrics em) { color: var(--ds-ink-4); font-size: 11.5px; }
.finance-page .inv-card-capital strong { color: var(--ds-ink); font-size: 15px; font-weight: 600; }
.finance-page .inv-card-metrics strong { font-size: 13px; font-weight: 600; }
.finance-page .inv-card-metrics .is-negative { color: var(--ds-red-ink); }
.finance-page .inv-card-type { color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.finance-page .inv-status {
  padding: 0 6px;
  border: 0;
  border-radius: var(--ds-radius-chip);
  background: #f3f3f3;
  color: #4b4b4b;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}
.finance-page .inv-risk-line { border-radius: 2px; background: var(--ds-well); }
.finance-page .inv-card-foot { color: var(--ds-ink-4); font-size: 11.5px; }
.finance-page .inv-card-foot button { color: var(--ds-ink); font-size: 12px; font-weight: 600; }
.finance-page .inv-opportunity-card:hover { transform: none; box-shadow: var(--ds-shadow); }

/* "Add" cards: a solid frame like every other card; the plus is the cue. */
.finance-page :is(.fin-add-card, .inv-opportunity-add, .fin-estate-add, .fin-estate-card.fin-estate-add) { border-style: solid; }

/* ================================================================
   Nothing boxed inside a card: inner panels sit on white, set apart
   by a line. Notes at the foot of a card use the card-foot tint.
   ================================================================ */
.finance-page :is(.inv-market-outcome, .fin-job-term) {
  border: 0;
  border-top: 1px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-card);
  box-shadow: none;
}
.finance-page .fin-job-term { margin-inline: -14px; padding-inline: 14px; }
.finance-page :is(.inv-disclaimer, .fin-di-method, .fin-edu-method-note) {
  background: var(--ds-surface);
  color: var(--ds-ink-3);
}
.finance-planner .tv-tn-title-text { font-family: var(--font-app); font-weight: 600; letter-spacing: -.01em; }

/* ================================================================
   Archive: one card of mail-like rows, like System Checks.
   ================================================================ */
.finance-page[data-fin-page] .fin-archive-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
.finance-page .fin-archive-row {
  min-height: 46px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ds-line-soft);
  border-radius: 0;
  box-shadow: none;
}
.finance-page .fin-archive-row:first-child { border-top: 0; }
.finance-page .fin-archive-row:hover { background: var(--ds-hover); }
.finance-page .fin-archive-row strong { font-weight: 500; }

/* Card heads carry a title, a count and tools — never an explanatory sentence. */
.finance-page .fin-module-head > div:first-child > span { display: none; }
.finance-page .fin-module-head { min-height: 46px; }
.finance-page .fin-graph-head .fin-graph-sub:not(:empty) { max-width: 40ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Below the 1440 px design width the whole page is drawn smaller (see scale.js). */
#root { width: 100%; height: 100%; transform: none; }
html.is-scaled body { width: var(--app-w); height: var(--app-h); transform: scale(var(--app-scale)); transform-origin: 0 0; }

/* Polish: a mark gives way before the label it sits beside (shortens with "…"). */
.finance-page :is(.fin-kpi-mark, .ds-mark) { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.finance-page .ds-mark > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.finance-page .ds-mark > i { flex: none; }

/* Undo notice. */
.mk-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 10px; background: #1f1f1f; color: #ffffff; font-family: var(--font-app); font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.mk-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mk-toast button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; }
.mk-toast button:hover { background: rgba(255, 255, 255, .2); }
.mk-toast .mk-toast-x { width: 26px; padding: 0; background: transparent; color: rgba(255, 255, 255, .6); font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.finance-page .ex-log-table .ex-x { width: 36px; text-align: right; }
.finance-page .ex-log-table tr .ex-x .ed-ms-del { opacity: 0; }
.finance-page .ex-log-table tr:hover .ex-x .ed-ms-del, .finance-page .ex-log-table tr:focus-within .ex-x .ed-ms-del { opacity: 1; }

/* ================================================================
   Visual grammar (every chart, meter and strip follows these)
   track  — the empty part or "the rest" of a whole: always --viz-track
   fill   — what the figure measures: a picked colour, never a pale tint
   other  — a minor slice of a whole: --viz-other
   ================================================================ */
:root {
  --viz-track: #ececec;
  --viz-fill: #3d85c6;
  --viz-fill-strong: #4a5fb5;
  --viz-in: #6aa84f;
  --viz-out: #cc0000;
  --viz-attn: #e69138;
  --viz-model: #674ea7;
  --viz-other: #b7b7b7;
}

/* Tab bar: tabs keep their full names and never shrink; the controls give
   way instead (fitTabsBar in page.js adds is-compact, then is-icons). These
   replace the fixed-width container steps, which cut tab names at 1440. */
.tabs .tab { flex: 0 0 auto; max-width: none; }
.tabs .tab-label { overflow: visible; text-overflow: clip; max-width: none; }
.tabs .tabs-controls { flex: 0 0 auto; }
.tabs:not(.is-compact) .tc-btn strong { display: inline; }
.tabs:not(.is-icons) .tc-btn { width: auto; padding: 0 14px; gap: 6px; justify-content: flex-start; }
.tabs:not(.is-icons) .tc-btn > span { display: inline; }
.tabs.is-compact .tc-btn strong { display: none; }
.tabs.is-icons .tc-btn { width: 34px; padding: 0; gap: 0; justify-content: center; }
.tabs.is-icons .tc-btn > span { display: none; }

/* Dropdown lists (assets/ds-select.js): the approved workspace menu, drawn
   at twice its size and shown at half, exactly as the sidebar draws it. */
.ds-select-pop { position: fixed; z-index: 4000; pointer-events: none; }
.ds-select-pop .ds-select-menu {
  position: absolute; top: 0; left: 0; box-sizing: border-box;
  transform: scale(.5); transform-origin: top left; pointer-events: auto;
}
.ds-select-menu .no-icon-menu-row { justify-content: flex-start; }
.ds-select-menu .no-icon-menu-left { min-width: 0; flex: 1 1 auto; }
.ds-select-menu .no-icon-menu-left > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-select-menu .no-icon-menu-row:focus { outline: 0; background: #f7f7f7; }
.ds-select-menu .no-icon-menu-row.is-active:focus { background: #f1f1f1; }
.ds-select-menu .no-icon-menu-row.is-disabled { color: #b0b0b0; cursor: default; }

/* Labels inside pages are sentence case in the page's grey, never spaced
   capitals (the menu's WORKSPACE title is the shell's own). */
.finance-page :is(.pj-block-hd, .dl-kicker) { font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ds-ink-4); }

/* The approved menu (approvedMenu in page.js): rows may be buttons; a row
   that only shows a fact is static. The label takes the room left after the
   value, which always keeps its full width; only a label longer than the
   widest panel ends in "…". */
button.no-icon-menu-row { width: calc(100% + 20px); border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.no-icon-menu-row.is-static { cursor: default; }
.no-icon-menu-row.is-static:hover { background: transparent; }
.no-icon-menu-row:focus-visible { outline: 0; background: #f7f7f7; }
.no-icon-menu-left { min-width: 0; flex: 1 1 auto; }
.no-icon-menu-left > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.no-icon-menu-right { min-width: 0; flex: none; max-width: 70%; }
.no-icon-menu-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Text that ends in "…" is clipped to its box, so the box must hold the
   letters' tails (g, p, y): a line one font-size tall cut them off. The row
   keeps its height and centres the text, so nothing moves. */
.no-icon-menu-left > span, .no-icon-menu-value, .ds-select-menu .no-icon-menu-left > span { line-height: 1.3; }
/* The header's Add opens the same panel, anchored to its right edge. */
.cn-hb-add-wrap { position: relative; }
.cn-hb-add-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 203px; height: 0; z-index: 1200; overflow: visible; }
.cn-hb-add-pop .no-icon-menu-preview { position: absolute; top: 0; right: 0; transform: scale(.5); transform-origin: top right; }
/* The profile menu is the same panel; nothing in it is resized. */
.profile-menu-popover .no-icon-menu-preview { font-size: inherit; }

/* Experience: drawn like the tab bar's controls (icon, name, chosen value),
   opening the site's one menu. */
.cn-hb-experience-wrap .cn-hb-experience-btn { height: 28px; gap: 6px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary, #5f5f5f); font-size: 13px; font-weight: 500; }
.cn-hb-experience-wrap .cn-hb-experience-btn:hover,
.cn-hb-experience-wrap.open .cn-hb-experience-btn { border: 0; background: #f7f7f7; color: var(--text-primary); }
.cn-hb-experience-wrap .cn-hb-experience-btn > svg { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 1.6; }
.cn-hb-experience-wrap .cn-hb-experience-btn strong { margin-left: 3px; padding: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: inherit; }
.cn-hb-experience-wrap.is-custom .cn-hb-experience-btn::after { display: none; }
.cn-hb-experience-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 203px; height: 0; z-index: 1600; overflow: visible; }
.cn-hb-experience-pop .no-icon-menu-preview.cn-hb-experience-menu {
  position: absolute; top: 0; right: 0; width: max-content; min-width: 406px; max-width: 640px; max-height: none; overflow: hidden;
  padding: 17px 26px; border: 1px solid #dddddd; border-radius: 17px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 22px rgba(0, 0, 0, .08);
  opacity: 1; visibility: visible; pointer-events: auto; transform: scale(.5); transform-origin: top right; transition: none;
}