/* ================================================================
   Dashboard → Overview (prefix mo-)
   Built on the tokens in system.css. The parts are the page's own;
   the manner (sentences, marks, a visual per summary, hairline rows,
   outlined actions) is the CONNECT pages'.
   ================================================================ */

.mo-page { font-size: 13px; color: var(--ds-ink); }
.mo-page :where(p, h3, dl, dd) { margin: 0; padding: 0; }
.mo-page button { font-family: inherit; }
.mo-page :is(button, [role="button"]):focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.mo-ic {
  width: 14px; height: 14px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* One card for every block on this page. */
.mo-card {
  min-width: 0;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  overflow: clip;
}

/* Card head: tile, title, count, an aside, tools at the right. */
/* One inset: everything inside a card starts and ends 14px from its edge,
   the head, its rows, a band's head, the composer row and the foot. */
.mo-hd {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ds-line);
}
.mo-hd h3 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mo-tile {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--ds-well); color: var(--ds-ink-2);
}
.mo-count {
  flex: none; padding: 0 5px; border-radius: 4px; background: #f3f3f3; color: #4b4b4b;
  font-size: 11px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.mo-hd-sub { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.mo-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

/* Segmented choice. */
.mo-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ds-well); }
.mo-seg button {
  height: 20px; display: inline-flex; align-items: center; padding: 0 8px;
  border: 0; border-radius: 6px; background: transparent; color: #7a7a7a;
  font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.mo-seg button:hover { color: var(--ds-ink); }
.mo-seg button.is-on { background: #ffffff; color: var(--ds-ink); box-shadow: 0 1px 2px rgba(20, 20, 20, .1); }

/* Buttons. */
.mo-btn {
  appearance: none; height: 26px; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px;
  border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff; color: var(--ds-ink-2);
  font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.mo-btn:hover { background: #f7f7f7; color: var(--ds-ink); }
.mo-btn .mo-ic { width: 13px; height: 13px; }
.mo-btn--main { border-color: #cfcfcf; color: var(--ds-ink); font-weight: 600; }
.mo-btn--main:hover { border-color: #b8b8b8; }
.mo-btn--quiet { border-color: transparent; background: transparent; color: var(--ds-ink-3); }
.mo-btn--quiet:hover { background: transparent; color: var(--ds-ink); }

/* Card foot strip. */
.mo-foot {
  min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 14px;
  border-top: 1px solid var(--ds-line); background: var(--ds-surface);
  color: var(--ds-ink-3); font-size: 12px; white-space: nowrap;
}
.mo-foot > .mo-ic { color: var(--ds-ink-4); }
.mo-foot > b { color: var(--ds-ink); font-weight: 600; }
.mo-foot > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.mo-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; padding: 24px; color: var(--ds-ink-4); font-size: 12.5px; text-align: center;
}
.mo-empty .mo-ic { width: 18px; height: 18px; color: var(--ds-green); }
.mo-empty b { color: var(--ds-ink-2); font-size: 13px; font-weight: 600; }

/* ================================================================
   Summaries
   ================================================================ */
.mo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-gap); }
.mo-stat {
  position: relative; display: flex; flex-direction: column; min-height: 168px;
  padding: 14px; cursor: pointer; transition: border-color .12s;
}
.mo-stat:hover { border-color: #d6d6d6; }
.mo-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.mo-stat-lbl {
  min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ds-ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.mo-stat-lbl .mo-ic { color: var(--ds-ink-4); }
.mo-fig {
  display: flex; align-items: baseline; gap: 6px; margin-top: 11px; white-space: nowrap;
  color: #212121; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.mo-fig small { color: var(--ds-ink-3); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.mo-note {
  margin-top: 6px; color: var(--ds-ink-3); font-size: 11.5px; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mo-note b { color: var(--ds-ink-2); font-weight: 600; }
.mo-stat-foot { margin-top: auto; padding-top: 12px; }

/* Net worth: what your assets are made of. */
.mo-split { display: flex; gap: 2px; height: 10px; }
.mo-split i { min-width: 3px; border-radius: 2px; }
.mo-legend { display: flex; gap: 11px; margin-top: 8px; color: var(--ds-ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; }
.mo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mo-legend i { width: 7px; height: 7px; flex: none; border-radius: 2px; }
.mo-legend b { color: var(--ds-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* In a card head a legend is a tool: centred on the title's line, at the
   head's 12px, without the stat foot's top margin. */
.mo-hd .mo-legend { margin-top: 0; align-items: center; font-size: 12px; }

/* Cash: one column per account, the bar in the bank's colour. Runs to the card's edges. */
.mo-stat--cols .mo-stat-foot,
.mo-stat--months .mo-stat-foot { margin: auto -14px -13px; padding-top: 12px; }
.mo-cols, .mo-months { display: flex; border-top: 1px solid var(--ds-line); }
.mo-col, .mo-month {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 0 7px; border-left: 1px solid var(--ds-line-soft);
}
.mo-col:first-child, .mo-month:first-child { border-left: 0; }
.mo-col-bar, .mo-month-bar { position: relative; width: 12px; height: 30px; display: flex; align-items: flex-end; }
.mo-col-bar i, .mo-month-bar i { width: 100%; border-radius: 2px 2px 0 0; }
.mo-col.is-empty .mo-col-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--ds-orange);
}
.mo-col em, .mo-month em {
  max-width: 100%; overflow: hidden; color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; font-weight: 600;
  text-overflow: ellipsis; white-space: nowrap;
}

/* This month: the next twelve months of money coming in; this month marked. */
.mo-month-bar i { background: #b7b7b7; }
.mo-month.is-now { background: var(--ds-well); }
.mo-month.is-now .mo-month-bar i { background: var(--ds-teal); }
.mo-month.is-now em { color: var(--ds-ink); }
.mo-month.is-zero .mo-month-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: #dcdcdc;
}

/* Credit: twenty steps of your limit, the used part filled, a guide at 30%. */
.mo-ruler { position: relative; display: flex; gap: 3px; height: 22px; align-items: flex-end; }
.mo-ruler i { flex: 1 1 0; height: 12px; border-radius: 2px; background: #ececec; }
.mo-ruler.tone-green i.is-used { background: var(--ds-green); }
.mo-ruler.tone-orange i.is-used { background: var(--ds-orange); }
.mo-ruler.tone-red i.is-used { background: var(--ds-red); }
.mo-ruler-guide { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -1px; background: var(--ds-ink-2); }
.mo-ruler-guide span {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1px;
  color: var(--ds-ink-3); font-size: 10px; font-weight: 600; line-height: 1;
}
.mo-ends { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ds-ink-3); font-size: 11px; white-space: nowrap; }
.mo-ends b { color: var(--ds-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ================================================================
   Needs you · Coming up
   ================================================================ */
.mo-focus { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--ds-gap); align-items: stretch; }
.mo-needs, .mo-upcoming { display: flex; flex-direction: column; }
.mo-rows, .mo-ups { flex: 1 1 auto; }

.mo-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 132px auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 14px;
  border-top: 1px solid var(--ds-line-soft);
}
.mo-row:first-child { border-top: 0; }
.mo-row:hover { background: var(--ds-hover); }
.mo-row-tile {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: var(--ds-well); color: var(--ds-ink-2);
}
.mo-row-tile .mo-ic { width: 15px; height: 15px; }
.mo-row-text { min-width: 0; }
.mo-row-text p {
  overflow: hidden; color: var(--ds-ink-2); font-size: 13.5px; line-height: 1.3;
  white-space: nowrap; text-overflow: ellipsis;
}
.mo-row-text p b { color: var(--ds-ink); font-weight: 600; }
.mo-row-text > span {
  display: block; margin-top: 3px; overflow: hidden; color: var(--ds-ink-4); font-size: 12px;
  white-space: nowrap; text-overflow: ellipsis;
}
.mo-row-state .ds-mark { font-size: 12px; font-weight: 500; }
.mo-row-act { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }

.mo-up {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 8px 12px 8px 14px; border: 0; border-top: 1px solid var(--ds-line-soft); background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.mo-up:first-child { border-top: 0; }
.mo-up:hover { background: var(--ds-hover); }
.mo-date {
  width: 34px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--ds-border); border-radius: 8px; background: #ffffff; line-height: 1;
}
.mo-date em { color: var(--c, var(--ds-ink-4)); font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mo-date b { margin-top: 3px; color: var(--ds-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-date.tone-red { --c: var(--ds-red); }
.mo-date.tone-orange { --c: var(--ds-orange-ink); }
.mo-date.tone-green { --c: var(--ds-green-ink); }
.mo-up-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mo-up-text > span { overflow: hidden; color: var(--ds-ink-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.mo-up-text > span b { color: var(--ds-ink); font-weight: 600; }
.mo-up-text > em { overflow: hidden; color: var(--ds-ink-4); font-size: 12px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.mo-up-when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.mo-up-when b { color: var(--ds-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-up-when em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }

/* ================================================================
   Net worth over time
   ================================================================ */
.mo-traj .mo-tools .fin-graph-period-wrap { display: inline-flex; }
.mo-traj .mo-tools .fin-graph-period {
  height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px;
  border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff;
  color: var(--ds-ink-2); font-size: 12px; font-weight: 500;
}
.mo-traj .mo-tools .fin-graph-period:hover { background: #f7f7f7; color: var(--ds-ink); }
.mo-traj-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.mo-traj-chart { min-width: 0; padding: 12px 14px 8px; }
.mo-traj-side { display: flex; flex-direction: column; border-left: 1px solid var(--ds-line); background: var(--ds-surface); }
.mo-traj-fig { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 13px; border-bottom: 1px solid var(--ds-line); }
.mo-traj-fig span { color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.mo-traj-fig strong { color: #212121; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mo-traj-side dl { display: flex; flex-direction: column; padding: 6px 0; }
.mo-traj-side dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 16px; }
.mo-traj-side dt { display: inline-flex; align-items: center; gap: 7px; color: var(--ds-ink-3); font-size: 12px; }
.mo-traj-side dt i { width: 7px; height: 7px; border-radius: 2px; }
.mo-traj-side dd { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The Accounts and Credit rails keep their cards; their heads take this page's head. */
.mo-page .fin-seg.is-cards { min-height: 30px; margin: 2px 0 0; }
.mo-page .fin-seg.is-cards .fin-seg-title { font-size: 13.5px; }

@media (max-width: 1180px) {
  .mo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-focus { grid-template-columns: 1fr; }
  .mo-traj-body { grid-template-columns: 1fr; }
  .mo-traj-side { border-left: 0; border-top: 1px solid var(--ds-line); }
}

/* Right column: Coming up over Statements. */
.mo-side { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-gap); }
.mo-side > .mo-upcoming { flex: none; }
.mo-side > .mo-statements { flex: 1 1 auto; display: flex; flex-direction: column; }
.mo-stmts { flex: 1 1 auto; padding: 4px 0; }
.mo-stmt {
  width: 100%; min-height: 36px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 104px; align-items: center; gap: 10px;
  padding: 0 14px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.mo-stmt:hover { background: var(--ds-hover); }
.mo-stmt > i { width: 8px; height: 8px; border-radius: 2px; }
.mo-stmt > span { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.mo-stmt > span b { color: var(--ds-ink); font-size: 12.5px; font-weight: 500; }
.mo-stmt > em { color: var(--ds-ink-3); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.mo-stmt > .ds-mark { justify-self: end; font-size: 11.5px; font-weight: 500; }

/* Summary cards are never narrower than their design width (the page scales instead),
   so they are not size containers; that keeps them free to share rows (see Polish). */

/* ================================================================
   Graphs (net worth over time)
   Shapes stretch in a 1000 × 100 box; labels are text laid over them.
   ================================================================ */
:root {
  --mo-equity: #674ea7;
  --mo-rent: #6aa84f;
  --mo-holdings: #dcdcdc;
  --mo-inflation: #cc0000;
}
.mo-traj-chart { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 10px; }
.mo-glegend { display: flex; align-items: center; gap: 16px; min-height: 18px; color: var(--ds-ink-3); font-size: 12px; white-space: nowrap; }
.mo-glegend span { display: inline-flex; align-items: center; gap: 6px; }
.mo-glegend b { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-glegend i { width: 10px; height: 10px; flex: none; border-radius: 2px; }
.mo-glegend i.is-equity { background: var(--mo-equity); }
.mo-glegend i.is-rent { background: var(--mo-rent); }
.mo-glegend i.is-holdings { background: var(--mo-holdings); }
.mo-glegend i.is-inflation { background: repeating-linear-gradient(135deg, rgba(204, 0, 0, .55) 0 2px, #f4f4f4 2px 4px); }
.mo-glegend i.is-real { height: 0; border-top: 2px dashed var(--ds-ink-2); border-radius: 0; }
.mo-glegend i.is-nominal { height: 3px; background: var(--ds-teal); }
.mo-glegend i.is-band { background: #f4f4f4; }
.mo-glegend-aside { margin-left: auto; }

/* The top grid line starts one inset (14px) under the head, so its label
   (7px above the line) never touches the head's border. */
.mo-plot { position: relative; padding: 14px 0 24px 58px; }
.mo-plot.has-ends { padding-right: 168px; }
.mo-plot.has-ends.is-one { padding-right: 92px; }
.mo-plot-area { position: relative; height: 100%; }
.mo-plot-area > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mo-plot-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ds-line-soft); }
.mo-plot-grid.is-zero { border-top: 1px solid #bdbdbd; }
.mo-plot-grid span {
  position: absolute; right: calc(100% + 10px); top: -7px; color: var(--ds-ink-4);
  font-size: 11px; line-height: 14px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mo-plot-grid.is-zero span { color: var(--ds-ink-2); font-weight: 600; }
.mo-plot-x {
  position: absolute; top: calc(100% + 8px); transform: translateX(-50%);
  color: var(--ds-ink-4); font-size: 11px; white-space: nowrap;
}
.mo-plot-x:first-of-type { transform: none; }
.mo-a-equity { fill: var(--mo-equity); opacity: .9; }
.mo-a-rent { fill: var(--mo-rent); opacity: .85; }
.mo-a-inflation { fill: rgba(204, 0, 0, .1); }
.mo-a-band { fill: rgba(61, 133, 198, .12); }
.mo-a-soft { fill: rgba(61, 133, 198, .08); }
.mo-l-top { fill: none; stroke: #3d85c6; stroke-width: 1.5; }
.mo-l-real { fill: none; stroke: var(--ds-ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mo-l-nominal { fill: none; stroke: var(--ds-teal); stroke-width: 2.25; stroke-linejoin: round; }

.mo-plot-end {
  position: absolute; left: calc(100% + 12px); transform: translateY(-50%);
  color: var(--ds-ink-3); font-size: 12px; white-space: nowrap;
}
.mo-plot-end b { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-plot-end.is-muted b { color: var(--ds-ink-2); }
.mo-plot-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid var(--ds-teal);
  border-radius: 3px; background: #ffffff;
}

/* Pointer readout. */
.mo-plot-hover { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.mo-plot-hover > i { position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px dashed #9a9a9a; }
.mo-plot-tip {
  position: absolute; top: 4px; left: 10px; min-width: 168px; display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 20, 20, .08); font-size: 12px; z-index: 3;
}
.mo-plot-hover.is-flip .mo-plot-tip { left: auto; right: 10px; }
.mo-plot-tip b { margin-bottom: 2px; color: var(--ds-ink); font-weight: 600; }
.mo-plot-tip span { display: flex; justify-content: space-between; gap: 14px; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.mo-plot-tip em { color: var(--ds-ink-3); font-style: normal; }

/* G3: growth in each period. */
.mo-steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; height: 236px; padding-top: 2px; }
.mo-step { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mo-step > b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-step-bar {
  flex: 1 1 auto; width: min(64px, 70%); display: flex; flex-direction: column-reverse; justify-content: flex-start;
  border-bottom: 1px solid #bdbdbd;
}
.mo-step-bar i { width: 100%; }
.mo-step-bar i.is-equity { background: var(--mo-equity); border-radius: 3px 3px 0 0; }
.mo-step-bar i.is-rent { background: var(--mo-rent); }
.mo-step-bar i.is-rent:last-child { border-radius: 3px 3px 0 0; }
.mo-step > em { color: var(--ds-ink-2); font-size: 11.5px; font-style: normal; font-weight: 500; white-space: nowrap; }
.mo-step > small { color: var(--ds-ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }

/* G4: milestones pinned on the line. */
.mo-plot.has-pins { padding-top: 0; }
.mo-pin { position: absolute; top: 0; bottom: 0; width: 0; }
.mo-pin > i {
  position: absolute; left: -4px; top: var(--py); width: 8px; height: 8px; margin-top: -4px;
  border: 2px solid var(--c, var(--ds-ink-3)); border-radius: 2px; background: #ffffff; z-index: 2;
}
.mo-pin::before { content: ""; position: absolute; left: 0; top: var(--lane-top); bottom: calc(100% - var(--py)); border-left: 1px solid var(--c, #bdbdbd); opacity: .55; }
.mo-pin > span {
  position: absolute; left: -1px; top: var(--lane-top); display: flex; flex-direction: column; gap: 1px;
  padding: 3px 7px 4px; border-left: 2px solid var(--c, var(--ds-ink-3)); background: #ffffff;
  color: var(--ds-ink-2); font-size: 11.5px; line-height: 1.25; white-space: nowrap;
}
.mo-pin > span em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; }
.mo-pin > span b { color: var(--ds-ink); font-weight: 600; }
.mo-pin.lane-0 { --lane-top: 0px; }
.mo-pin.lane-1 { --lane-top: 38px; }
.mo-pin.lane-2 { --lane-top: 76px; }
.mo-pin.tone-red { --c: var(--ds-red); }
.mo-pin.tone-orange { --c: var(--ds-orange); }
.mo-pin.tone-green { --c: var(--ds-green); }
.mo-pin.tone-teal { --c: var(--ds-teal); }
.mo-pin.tone-grey { --c: #9a9a9a; }

/* G5: a ladder of dates. */
.mo-ladder { display: flex; flex-direction: column; }
.mo-rung { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; align-items: center; gap: 14px; min-height: 40px; border-top: 1px solid var(--ds-line-soft); }
.mo-rung:first-child { border-top: 0; }
.mo-rung-label, .mo-rung-value { display: flex; flex-direction: column; gap: 2px; }
.mo-rung-label b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.mo-rung-label em, .mo-rung-value em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.mo-rung-value { align-items: flex-end; }
.mo-rung-value b { color: var(--ds-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-rung-bar { display: flex; height: 14px; gap: 1px; }
.mo-rung-bar i { height: 100%; }
.mo-rung-bar i:first-child { border-radius: 3px 0 0 3px; }
.mo-rung-bar i:last-child { border-radius: 0 3px 3px 0; }
.mo-rung-bar .is-holdings { background: var(--mo-holdings); }
.mo-rung-bar .is-equity { background: var(--mo-equity); }
.mo-rung-bar .is-rent { background: var(--mo-rent); }

/* Graph picker in the card head. */
.mo-select {
  position: relative; height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff; color: var(--ds-ink-2);
}
.mo-select .mo-ic { width: 13px; height: 13px; color: var(--ds-ink-4); }
.mo-select select {
  appearance: none; height: 24px; min-height: 0; padding: 0 16px 0 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; color: var(--ds-ink-2); font-size: 12px; font-weight: 500; cursor: pointer;
  background-image: none;
}
.mo-select::after {
  content: ""; position: absolute; right: 9px; top: 9px; width: 5px; height: 5px;
  border-right: 1.5px solid var(--ds-ink-4); border-bottom: 1.5px solid var(--ds-ink-4); transform: rotate(45deg);
  pointer-events: none;
}
.mo-traj .mo-traj-body { grid-template-columns: minmax(0, 1fr) 260px; }

/* ================================================================
   Summary visuals
   ================================================================ */
/* A hundred squares, each 1% of what you own. */
.mo-waffle { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 2px; }
.mo-waffle i { aspect-ratio: 1; border-radius: 2px; }

/* Owned against owed. */
.mo-balance { display: flex; flex-direction: column; gap: 7px; }
.mo-balance > div { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 8px; }
.mo-balance em { color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; }
.mo-balance span { height: 10px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.mo-balance span i { display: block; height: 100%; border-radius: 2px; }
.mo-balance b { color: var(--ds-ink); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Cash tiles, sized by balance, in the bank's colour. */
.mo-tiles { display: flex; gap: 2px; height: 38px; }
.mo-tile-cash {
  min-width: 6px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 7px;
  border-radius: 4px; color: #ffffff; overflow: hidden; white-space: nowrap;
}
.mo-tile-cash.is-small { padding: 0; }
.mo-tile-cash b { font-size: 11px; font-weight: 700; line-height: 1.1; }
.mo-tile-cash em { font-size: 10.5px; font-style: normal; opacity: .85; line-height: 1.1; }

/* Largest accounts. */
.mo-ranked { display: flex; flex-direction: column; gap: 5px; }
.mo-ranked > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.mo-ranked span { overflow: hidden; color: var(--ds-ink-2); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.mo-ranked i { height: 7px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.mo-ranked i b { display: block; height: 100%; border-radius: 2px; }
.mo-ranked em { color: var(--ds-ink); font-size: 11.5px; font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mo-ranked .is-rest span, .mo-ranked .is-rest em { color: var(--ds-ink-4); font-weight: 500; }
.mo-ranked .is-rest i { background: transparent; }

/* A lane per card: its length is the limit, the fill is what you owe. */
.mo-lanes { display: flex; flex-direction: column; gap: 4px; }
.mo-lanes > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.mo-lanes span { overflow: hidden; color: var(--ds-ink-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.mo-lanes i { position: relative; display: block; height: 7px; border-radius: 2px; background: #dcdcdc; }
.mo-lanes i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.mo-lanes em { color: var(--ds-ink); font-size: 11px; font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Limit by bank. */
.mo-bankbar { display: flex; gap: 2px; height: 14px; }
.mo-bankbar span { position: relative; min-width: 4px; border-radius: 3px; overflow: hidden; }
.mo-bankbar span i { position: absolute; inset: 0; opacity: .28; }
.mo-bankbar span b { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; }

/* This month: work and rent stacked. */
.mo-months.is-sources .mo-month-bar { flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; }
.mo-months.is-sources .mo-month-bar i { border-radius: 0; }
.mo-months.is-sources .mo-month-bar i.is-work { background: var(--ds-teal); border-radius: 2px 2px 0 0; }
.mo-months.is-sources .mo-month-bar i.is-rent { background: var(--mo-rent); }
.mo-months.is-sources .mo-month.is-now .mo-month-bar i.is-work { background: #3d85c6; }

/* The year ahead as a line. */
.mo-yearline { position: relative; height: 46px; }
.mo-yearline svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mo-yl-area { fill: rgba(61, 133, 198, .12); }
.mo-yl-line { fill: none; stroke: var(--ds-teal); stroke-width: 2; stroke-linejoin: round; }
.mo-yl-now { position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--ds-ink-2); }
.mo-yl-event { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--ds-orange); }
.mo-yl-event em {
  position: absolute; top: -2px; left: 5px; padding: 0 4px; border-radius: 3px; background: var(--ds-orange-bg);
  color: var(--ds-orange-ink); font-size: 10.5px; font-style: normal; font-weight: 600; white-space: nowrap;
}
.mo-ends span + span { text-align: center; }
.mo-ends span:last-child { text-align: right; }

/* ================================================================
   All views (the comparison sheet)
   ================================================================ */
.mo-sheet { display: flex; flex-direction: column; gap: var(--ds-gap); }
.mo-sheet-bar {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px 0 10px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface);
  color: var(--ds-ink-3); font-size: 12.5px;
}
.mo-sheet-bar b { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.mo-sheet-h { margin: 8px 2px 0; color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.mo-sheet-graphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap); }
.mo-sheet-graph:first-child { grid-column: 1 / -1; }
.mo-sheet-no {
  min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px;
  border-radius: 6px; background: var(--ds-ink); color: #ffffff; font-size: 11px; font-weight: 700;
}
.mo-sheet-inuse { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-green-ink); font-size: 12px; font-weight: 600; }
.mo-sheet-inuse .mo-ic { width: 13px; height: 13px; }
.mo-sheet-row { display: flex; flex-direction: column; gap: 8px; }
.mo-sheet-row h4 { margin: 4px 2px 0; color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.mo-sheet-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); }
.mo-sheet-option { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mo-sheet-option figcaption { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 12.5px; }
.mo-sheet-option figcaption b { flex: 1 1 auto; color: var(--ds-ink-2); font-weight: 500; }
.mo-sheet-option .mo-stat { cursor: default; }
.mo-pin > span .mo-pin-title { font-weight: 400; color: var(--ds-ink-2); }
.mo-pin > span small { color: var(--ds-ink-4); font-size: 10.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.mo-pin.is-flip > span { left: auto; right: -1px; border-left: 0; border-right: 2px solid var(--c, var(--ds-ink-3)); text-align: right; align-items: flex-end; }
.mo-pin.lane-1 { --lane-top: 44px; }
.mo-pin.lane-2 { --lane-top: 88px; }
.mo-glegend i.is-prior { background: #dcdcdc; }
.mo-step-bar i.is-prior { background: #dcdcdc; }
.mo-step-bar i.is-equity { border-radius: 0; }
.mo-step-bar i:last-child:not([style*="height:0%"]) { border-radius: 3px 3px 0 0; }
.mo-step-bar i.is-equity:nth-last-child(2) { border-radius: 3px 3px 0 0; }
.mo-step-bar { justify-content: flex-start; }
/* Options are shown at the size they would have on the overview. */
.mo-sheet-graphs { grid-template-columns: minmax(0, 1fr); }
.mo-sheet-graph .mo-traj-chart { padding-right: 296px; }
.mo-sheet-cards { align-items: stretch; }
.mo-sheet-option > .mo-stat { flex: 1 1 auto; }
.mo-lanes i { background: #dcdcdc; }

/* ================================================================
   Finances → Overview (prefix fo-)
   ================================================================ */
.fo-page .mo-stat-foot .mo-legend span:nth-child(n+4) { display: none; }
.mo-months.fo-kept .mo-month-bar i { background: #b7b7b7; }
.mo-months.fo-kept .mo-month.is-now .mo-month-bar i { background: var(--ds-teal); }
.mo-months.fo-kept .mo-month.is-short .mo-month-bar i { background: var(--ds-red); }
.mo-col.is-zero .mo-col-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: #dcdcdc; }

/* The money map. */
/* The map is tall enough for every label it holds: at least 300px, and 38px
   for each node (with its share of the gaps) in the longer column. */
.fo-map-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 0; height: max(300px, calc(var(--fo-rows, 6) * 48px + 36px)); padding: 18px 16px 18px; }
.fo-col { position: relative; }
.fo-node { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 9px; min-height: 2px; }
.fo-node > i { align-self: stretch; width: 6px; flex: none; border-radius: 2px; }
.fo-node.is-left { flex-direction: row-reverse; text-align: right; }
.fo-node > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fo-node.is-left > span { align-items: flex-end; }
.fo-node b { overflow: hidden; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; }
.fo-node em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-flow { position: relative; margin: 0 6px; }
.fo-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fo-mid {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: #ffffff; box-shadow: var(--ds-shadow);
}
.fo-mid b { color: var(--ds-ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fo-mid em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }

/* Income runway. */
.fo-run { padding: 4px 0 2px; overflow-x: auto; }
.fo-run-row {
  display: grid; grid-template-columns: 300px repeat(12, minmax(52px, 1fr)) 112px; align-items: center;
  min-height: 48px; border-top: 1px solid var(--ds-line-soft);
}
.fo-run-row.is-head { min-height: 32px; border-top: 0; color: var(--ds-ink-4); font-size: 11.5px; }
.fo-run-row.is-head > span:last-child { padding-right: 14px; text-align: right; }
.fo-run-m { text-align: center; font-weight: 500; }
.fo-run-m.is-now { color: var(--ds-ink); font-weight: 700; }
.fo-run-m em { color: var(--ds-ink-5); font-style: normal; }
.fo-run-name { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 12px 0 14px; cursor: pointer; }
.fo-run-name > i { width: 8px; height: 28px; border-radius: 3px; }
.fo-run-name > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fo-run-name b { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fo-run-name em { overflow: hidden; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.fo-run-name .ds-mark { font-size: 11.5px; font-weight: 500; }
.fo-run-name:hover b { text-decoration: underline; text-underline-offset: 2px; }
/* Each month: the amount in ink, and under it a grey track filled in the
   source's colour to its share of that month's income, so a month's bars
   down the column add up to the whole. Nothing paid leaves the track bare. */
.fo-run-cell { height: 36px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 6px; }
.fo-run-cell.is-now { border-radius: 4px; background: var(--ds-well); }
.fo-run-cell > em { height: 14px; color: var(--ds-ink-2); font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.fo-run-cell > i { height: 6px; border-radius: 2px; background: linear-gradient(to right, var(--c) var(--w), #ececec var(--w)); }
.fo-run-cell.is-off > i { background: #ececec; }
.fo-run-key i { width: 18px !important; height: 6px !important; border-radius: 2px; background: linear-gradient(to right, var(--ds-ink-3) 60%, #ececec 60%); }
.fo-run-cell.is-now > em { color: var(--ds-ink); }
.fo-run-row.is-total + .fo-run-row.is-total { border-top: 1px solid var(--ds-line-soft); }
.fo-run-row.is-net > span:first-child { color: var(--ds-ink); font-weight: 600; }
.fo-run-row.is-net .fo-run-sum { color: var(--ds-ink); }
.fo-run-total { padding-right: 14px; color: var(--ds-ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fo-run-row.is-total { min-height: 40px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); }
.fo-run-row.is-total > span:first-child { padding-left: 32px; color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.fo-run-sum { color: var(--ds-ink-2); font-size: 11.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.fo-run-sum.is-now { color: var(--ds-ink); }

/* Costs every month. */
.fo-costs, .fo-spend { display: flex; flex-direction: column; }
.fo-cost-list { flex: 1 1 auto; padding: 4px 0; }
.fo-cost {
  width: 100%; min-height: 44px; display: grid; grid-template-columns: 180px minmax(0, 1fr) 112px 92px; align-items: center; gap: 14px;
  padding: 0 14px; border: 0; border-top: 1px solid var(--ds-line-soft); background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.fo-cost:first-child { border-top: 0; }
.fo-cost:hover { background: var(--ds-hover); }
.fo-cost-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fo-cost-name b { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.fo-cost-name em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.fo-cost-bar { height: 8px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.fo-cost-bar i { display: block; height: 100%; border-radius: 2px; }
.fo-cost-share { color: var(--ds-ink-2); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fo-cost-share em { color: var(--ds-ink-4); font-weight: 400; font-style: normal; }
.fo-cost-value { color: var(--ds-ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Spending, before anything is tracked. */
.fo-spend-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 22px; text-align: center; }
.fo-spend-empty b { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.fo-spend-empty span { max-width: 300px; color: var(--ds-ink-3); font-size: 12.5px; line-height: 1.5; }
.fo-spend-acts { display: flex; gap: 6px; margin-top: 8px; }
.fo-receipt { width: 64px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; padding: 10px 10px 12px; border: 1px solid var(--ds-border); border-radius: 6px; background: var(--ds-surface); }
.fo-receipt i { height: 4px; border-radius: 2px; background: #e3e3e3; }
.fo-receipt i:nth-child(2) { width: 70%; }
.fo-receipt i:nth-child(3) { width: 85%; }
.fo-receipt i:nth-child(4) { width: 50%; background: #cfcfcf; }
.fo-spend-body { padding: 16px 14px; }

/* ================================================================
   Mail-style rows (Needs you, Coming up): one line per item, grouped
   under bands, as in the CONNECT Inbox list.
   ================================================================ */
.mo-band + .mo-band { border-top: 1px solid var(--ds-line); }
.mo-band-hd {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 0; border-bottom: 1px solid var(--ds-line); background: #fafafa; color: var(--ds-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.mo-band-hd.is-static { padding-left: 14px; cursor: default; }
.mo-band-hd b { font-size: 12.5px; font-weight: 600; }
.mo-band-hd .ds-mark { margin-left: 4px; font-size: 11.5px; font-weight: 500; }
.mo-band-hd .mo-chev { width: 13px; height: 13px; color: var(--ds-ink-4); transition: transform .15s; }
.mo-band.is-closed .mo-chev { transform: rotate(-90deg); }
.mo-band.is-closed .mo-band-hd { border-bottom: 0; }

.mo-mail {
  position: relative; width: 100%; min-height: 44px;
  /* The state column gives up room (down to 160px) before a title is cut. */
  display: grid; grid-template-columns: 24px 96px minmax(200px, 1fr) minmax(160px, 236px) 116px; align-items: center; gap: 12px;
  padding: 0 14px; border: 0; border-top: 1px solid var(--ds-line-soft); background: #ffffff;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mo-band-hd + .mo-mail { border-top: 0; }
.mo-mail:hover { background: var(--ds-hover); }
.mo-mail-tile {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
  background: var(--ds-well); color: var(--ds-ink-2);
}
.mo-mail-tile .mo-ic { width: 13px; height: 13px; }
.mo-mail-tile.tone-red { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-tile.tone-orange { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-tile.tone-green { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-tile.tone-teal { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-from { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mo-mail-subject { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.mo-mail-subject b { flex: none; max-width: 100%; overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; }
.mo-mail-subject em { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; }
.mo-mail-state { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.mo-mail-state > em { overflow: hidden; color: var(--ds-ink-4); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; }
.mo-mail-state .mo-arrow { width: 12px; height: 12px; flex: none; color: #c4c4c4; }
.mo-mail-state .ds-mark { font-size: 12.5px; font-weight: 500; }
.mo-mail-when { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mo-mail-acts {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; gap: 4px; padding-left: 12px; background: var(--ds-hover);
}
.mo-mail:hover .mo-mail-acts, .mo-mail:focus-within .mo-mail-acts { display: flex; }
.mo-mail:hover .mo-mail-when, .mo-mail:focus-within .mo-mail-when { visibility: hidden; }
.mo-mail-acts .mo-btn { height: 24px; }
.mo-ibtn {
  width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff; color: #7a7a7a; cursor: pointer;
}
.mo-ibtn:hover { color: var(--ds-ink); background: #f7f7f7; }
.mo-ibtn .mo-ic { width: 13px; height: 13px; }

/* Coming up: tile, what, and when. */
.mo-mail--up { grid-template-columns: 24px minmax(0, 1fr) auto; }
.mo-mail--up .mo-mail-when { display: flex; align-items: baseline; gap: 6px; }
.mo-mail--up .mo-mail-when em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; font-weight: 400; }

.mo-needs .mo-rows, .mo-upcoming .mo-ups { flex: 1 1 auto; }
.mo-band-more {
  width: 100%; min-height: 34px; padding: 0 14px 0 50px; border: 0; border-top: 1px solid var(--ds-line-soft);
  background: #ffffff; color: var(--ds-ink-3); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.mo-band-more:hover { background: var(--ds-hover); color: var(--ds-ink); }
.fo-run-name { grid-template-columns: 8px minmax(0, 1fr); }
.fo-run-meta { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.fo-run-meta em { flex: none; max-width: 45%; }
.fo-run-meta .ds-mark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fo-run-row { grid-template-columns: 250px repeat(12, minmax(52px, 1fr)) 104px; }

/* ================================================================
   Finances → Net Worth (prefix nw-)
   ================================================================ */
/* The equation. */
.nw-eq { display: flex; align-items: stretch; gap: 6px; }
.nw-eq > span {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px;
  border: 1px solid var(--ds-border); border-radius: 7px; background: #ffffff;
}
.nw-eq > span em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; font-weight: 500; }
.nw-eq > span b { color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-eq > span em::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; background: var(--eq-c, #b7b7b7); vertical-align: 1px; }
.nw-eq > span.is-own { --eq-c: #674ea7; }
.nw-eq > span.is-owe { --eq-c: var(--ds-red); }
.nw-eq > span.is-net { --eq-c: #3d85c6; }
.nw-eq > span.is-net b { color: var(--ds-ink); }
.nw-eq > i { align-self: center; color: var(--ds-ink-4); font-size: 14px; font-style: normal; font-weight: 600; }

/* Ready cash: a square for each month it covers. */
.nw-months { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.nw-months i { height: 18px; border-radius: 2px; background: #ececec; }
.nw-months i.is-on { background: var(--ds-teal); }
.nw-months i.is-guide { box-shadow: 2px 0 0 0 #ffffff, 3.5px 0 0 0 var(--ds-ink-2); }

/* Nothing owed. */
.nw-clear { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 10px; border-radius: 7px; background: var(--ds-green-bg); color: var(--ds-green-ink); font-size: 11.5px; white-space: nowrap; }
.nw-clear i { width: 7px; height: 7px; border-radius: 2px; background: var(--ds-green); }
.nw-clear b { font-weight: 700; }

/* Balance sheet and ladder side by side. */
.nw-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ds-gap); align-items: stretch; }
.nw-sheet, .nw-ladder { display: flex; flex-direction: column; }
.nw-sheet-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 6px; padding: 14px 16px 12px; }
.nw-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nw-side-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.nw-side-hd b { overflow: hidden; color: var(--ds-ink-2); font-size: 12px; font-weight: 500; text-overflow: ellipsis; }
.nw-side-hd span { color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-stack { height: 300px; display: flex; flex-direction: column; gap: 2px; }
.nw-block {
  min-height: 3px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px;
  border-radius: 5px; background: var(--c); color: #ffffff; overflow: hidden;
}
.nw-block[role="button"] { cursor: pointer; }
.nw-block[role="button"]:hover { filter: brightness(1.06); }
.nw-block b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nw-block em { font-size: 11.5px; font-style: normal; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nw-block.is-yours { background: repeating-linear-gradient(135deg, #3d85c6 0 10px, #3d85c6 10px 20px); }
.nw-block.is-yours b { font-size: 13px; }
.nw-side-ft { min-height: 18px; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ds-ink-3); font-size: 11.5px; }
.nw-side-ft span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nw-side-ft i { width: 7px; height: 7px; border-radius: 2px; }
.nw-side-ft b { color: var(--ds-ink); font-weight: 600; }
.nw-equals { display: grid; place-items: center; padding-top: 26px; }
.nw-equals span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ds-border); border-radius: 7px; background: #ffffff; color: var(--ds-ink-3); font-weight: 600; }

.nw-steps { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 0; }
.nw-step { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--ds-line-soft); }
.nw-step:first-child { border-top: 0; }
.nw-step-hd { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.nw-step-hd b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.nw-step-hd em { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; font-style: normal; text-overflow: ellipsis; }
.nw-step-hd span { margin-left: auto; color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-step-bar { display: flex; height: 12px; border-radius: 3px; background: var(--ds-well); overflow: hidden; }
.nw-step-bar i.is-before { background: #b7b7b7; }
.nw-step-bar i.is-add { background: var(--ds-teal); }
.nw-step-ft { overflow: hidden; color: var(--ds-ink-3); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.nw-step-ft b { color: var(--ds-teal-ink); font-weight: 600; }
.nw-step-ft em { color: var(--ds-ink-5); font-style: normal; }

/* The ledger. */
.nw-cols, .nw-line {
  grid-template-columns: 8px minmax(0, 1fr) 132px 112px 64px 120px;
}
.nw-cols {
  display: grid; align-items: center; gap: 12px; min-height: 30px; padding: 0 14px;
  border-bottom: 1px solid var(--ds-line); color: var(--ds-ink-4); font-size: 11.5px; font-weight: 500;
}
.nw-cols span:nth-child(n+5) { text-align: right; }
.nw-line { padding: 0 14px; }
.nw-line.is-fixed { cursor: default; }
.nw-line-mark { width: 8px; height: 22px; border-radius: 2px; }
.nw-line-src { overflow: hidden; color: var(--ds-ink-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.nw-line-liq { display: flex; align-items: center; gap: 2px; }
.nw-line-liq i { width: 9px; height: 9px; border-radius: 2px; background: #e4e4e4; }
.nw-line-liq i.is-on { background: var(--ds-teal); }
.nw-line-liq em { margin-left: 6px; color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.nw-line-share { color: var(--ds-ink-3); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.nw-line-value { color: var(--ds-ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.nw-line-value.is-debt, .nw-band-total.is-debt, .nw-totals b.is-debt { color: var(--ds-red-ink); }
.nw-band-mark { width: 7px; height: 7px; border-radius: 2px; }
.nw-band-total { margin-left: auto; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-none { padding: 12px 14px 12px 50px; color: var(--ds-ink-5); font-size: 12.5px; }
.nw-totals {
  display: flex; justify-content: flex-end; gap: 28px; min-height: 44px; align-items: center; padding: 0 14px;
  border-top: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-3); font-size: 12.5px;
}
.nw-totals b { margin-left: 6px; color: var(--ds-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-totals .is-net b { color: var(--ds-teal-ink); font-size: 14px; }
.nw-ledger .mo-mail-subject em { font-size: 12px; }
@media (max-width: 1180px) { .nw-pair { grid-template-columns: 1fr; } }
.nw-block.is-light { color: var(--ds-ink, #1a1a1a); }

/* ================================================================
   Finances → Income (prefix in-)
   ================================================================ */
/* A square for each month of the record. */
.in-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.in-strip span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.in-strip i { width: 100%; height: 16px; border-radius: 2px; background: #ececec; }
.in-strip .is-done i { background: var(--ds-teal); }
.in-strip .is-missing i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ds-red); }
.in-strip .is-now i { outline: 2px solid var(--ds-ink-2); outline-offset: 1px; }
.in-strip em { color: var(--ds-ink-4); font-size: 10px; font-style: normal; font-weight: 600; }
.in-strip .is-now em { color: var(--ds-ink); }

/* This month: how much of the expected pay is written down. */
.in-fill { height: 14px; border-radius: 3px; background: repeating-linear-gradient(135deg, #f1f1f1 0 6px, #e7e7e7 6px 12px); overflow: hidden; }
.in-fill i { display: block; height: 100%; background: var(--ds-teal); }

.in-extras { display: flex; flex-direction: column; gap: 4px; }
.in-extras > div { display: flex; justify-content: space-between; gap: 10px; color: var(--ds-ink-3); font-size: 11.5px; white-space: nowrap; }
.in-extras span { overflow: hidden; text-overflow: ellipsis; }
.in-extras b { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pay in the year. */
.mo-glegend i.in-key-expected { background: transparent; border: 1.5px dashed #3d85c6; }
.in-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.in-month {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 6px 8px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.in-month:hover { border-color: var(--ds-border); background: var(--ds-hover); }
.in-month.is-now { border-color: var(--ds-border); background: var(--ds-surface); }
.in-month-mark { min-height: 16px; display: flex; justify-content: center; overflow: hidden; }
.in-month-mark .ds-mark { font-size: 11px; font-weight: 500; }
.in-month-bars { position: relative; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.in-month-bars i { position: absolute; bottom: 0; width: 58%; border-radius: 4px 4px 0 0; }
.in-expected { border: 1.5px dashed #3d85c6; border-bottom: 0; background: #f4f4f4; }
.in-recorded { background: var(--ds-teal); width: 40% !important; }
.in-month.is-ahead .in-expected { border-color: #d0d0d0; background: transparent; }
.in-month-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #bdbdbd; }
.in-month-fig { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.in-month-fig b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.in-month-fig em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.in-month-label { color: var(--ds-ink-2); font-size: 12px; font-weight: 500; text-align: center; }
.in-month.is-now .in-month-label { color: var(--ds-ink); font-weight: 700; }

/* The record. */
.in-scroll { overflow-x: auto; }
.in-row {
  min-width: 1180px; display: grid; grid-template-columns: 260px repeat(12, minmax(66px, 1fr)) 110px; align-items: center;
  min-height: 40px; border-top: 1px solid var(--ds-line-soft);
}
.mo-band-hd + .in-row { border-top: 0; }
.in-row > span { min-width: 0; padding: 0 6px; }
.in-row.is-head { min-height: 32px; border-top: 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink-4); font-size: 11.5px; font-weight: 500; }
.in-row.is-head > span { text-align: right; }
.in-row.is-head > span:first-child { padding-left: 14px; text-align: left; }
.in-row.is-head > span.is-now { color: var(--ds-ink); font-weight: 700; }
.in-row-name { display: flex; align-items: center; gap: 8px; padding-left: 14px !important; overflow: hidden; white-space: nowrap; }
.in-row-name i { width: 8px; height: 20px; flex: none; border-radius: 2px; }
.in-row-name b { overflow: hidden; color: var(--ds-ink); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; }
.in-row-name em { overflow: hidden; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; }
.in-cell, .in-ref, .in-row.is-sum > span, .in-row.is-status > span { text-align: right; }
.in-cell.is-now, .in-ref.is-now, .in-row > span.is-now { background: #f4f4f4; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.in-cell .fin-cell-input {
  width: 100%; height: 28px; min-height: 0; padding: 0 6px; border: 1px solid transparent !important; border-radius: 6px;
  background: transparent !important; color: var(--ds-ink); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums;
}
.in-row:hover .in-cell .fin-cell-input { border-color: var(--ds-control) !important; background: #ffffff !important; }
.in-cell .fin-cell-input:focus { border-color: #2563eb !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; }
.in-cell.is-pick .fin-cell-input { border-color: var(--ds-teal) !important; background: var(--ds-teal-bg) !important; }
.in-ref { color: var(--ds-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.in-total { padding-right: 14px !important; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.in-row.is-sum { background: var(--ds-surface); min-height: 34px; color: var(--ds-ink-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.in-row.is-sum .in-row-name em, .in-row.is-status .in-row-name em { color: var(--ds-ink-3); font-size: 12px; font-style: normal; }
.in-row.is-status { min-height: 38px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); }
.in-row.is-status .ds-mark { font-size: 11px; font-weight: 500; justify-content: flex-end; }
.in-band-sub { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; font-style: normal; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.in-table .mo-band.is-ref .mo-band-hd { background: #f3f3f3; }
.in-table .mo-band.is-muted .in-row-name b { color: var(--ds-ink-3); }
.in-table .mo-band-hd { min-width: 1180px; }
.in-cell .fin-cell-input::placeholder { color: #cfcfcf; }

/* ================================================================
   Finances → Expenditure (prefix ex-)
   ================================================================ */
/* Bring it in. */
.ex-capture-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.ex-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.ex-option {
  display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--ds-border); border-radius: 9px;
  background: #ffffff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s;
}
.ex-option:hover { border-color: #c9c9c9; background: var(--ds-hover); }
.ex-option-text { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.ex-option-text b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.ex-option-text em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.ex-mock {
  height: 74px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 7px; background: var(--ds-surface); border: 1px solid var(--ds-line-soft);
}
.ex-mock-doc, .ex-mock-receipt, .ex-mock-form, .ex-mock-rows {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--ds-border); border-radius: 5px; background: #ffffff;
}
.ex-mock-doc { width: 46px; }
.ex-mock-doc i, .ex-mock-receipt i, .ex-mock-rows i, .ex-mock-form i { height: 3px; border-radius: 2px; background: #dedede; }
.ex-mock-doc i:nth-child(2n) { width: 70%; }
.ex-mock-rows { width: 62px; gap: 6px; }
.ex-mock-rows i { height: 6px; background: #dcdcdc; }
.ex-mock-rows i:nth-child(2) { background: #cc0000; width: 80%; }
.ex-mock-arrow { color: var(--ds-ink-4); }
.ex-mock-arrow .mo-ic { width: 14px; height: 14px; }
.ex-mock-receipt { width: 44px; border-bottom-style: dashed; }
.ex-mock-receipt i:nth-child(2) { width: 60%; }
.ex-mock-receipt b { height: 5px; margin-top: 3px; border-radius: 2px; background: #cc0000; width: 70%; align-self: flex-end; }
.ex-mock-form { width: 96px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; }
.ex-mock-form i { flex: 1 1 100%; height: 8px; border: 1px solid #e3e3e3; background: #ffffff; }
.ex-mock-form i.is-short { flex: 1 1 50%; }
.ex-mock-form b { color: var(--ds-ink-3); font-size: 10px; }
.ex-recent { display: flex; flex-direction: column; border-left: 1px solid var(--ds-line); background: var(--ds-surface); }
.ex-recent-hd { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 8px 0 14px; color: var(--ds-ink-2); font-size: 12px; }
.ex-recent-hd b { font-weight: 600; }
.ex-recent-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 0; border-top: 1px solid var(--ds-line-soft); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ex-recent-row:hover { background: #ffffff; }
.ex-doc-type { height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--ds-well); color: var(--ds-ink-3); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.ex-recent-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ex-recent-text b { overflow: hidden; color: var(--ds-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ex-recent-text em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }

/* Summary visuals. */
.ex-days { display: flex; align-items: flex-end; gap: 1px; height: 36px; }
.ex-days i { flex: 1 1 0; min-width: 1px; border-radius: 1.5px 1.5px 0 0; background: #cc0000; }
.ex-days i.is-weekend { background: #a64d79; }
.ex-days + .mo-ends span:nth-child(2) { color: var(--ds-ink-4); }
.ex-cat-tiles { height: 38px; }
.ex-billdays { display: flex; align-items: flex-end; gap: 1px; height: 30px; border-bottom: 1px solid #bdbdbd; }
.ex-billdays span { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.ex-billdays span::before { content: ""; position: absolute; left: 50%; bottom: 0; height: 4px; border-left: 1px solid #d4d4d4; }
.ex-billdays span.is-today::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px solid var(--ds-ink-2); }
.ex-billdays i { width: 100%; border-radius: 2px 2px 0 0; background: var(--ds-purple); }
.ex-places .mo-ranked > div, .ex-places-card .mo-ranked > div { cursor: pointer; }

/* Spending by day. */
.ex-cal-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 120px; gap: 26px; align-items: start; padding: 14px 18px 16px; }
.ex-cal-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ex-cal-hd b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.ex-cal-hd span { color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-cal-week, .ex-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ex-cal-week span { color: var(--ds-ink-4); font-size: 10.5px; font-weight: 600; text-align: center; }
.ex-cal-grid { margin-top: 4px; }
.ex-cal-grid span { position: relative; aspect-ratio: 1.35; border-radius: 4px; }
.ex-cal-grid span em { position: absolute; left: 4px; top: 2px; color: rgba(0, 0, 0, .32); font-size: 9.5px; font-style: normal; font-weight: 600; }
.ex-cal-grid span.is-blank { background: transparent !important; }
.ex-cal-grid span.is-today { box-shadow: inset 0 0 0 2px var(--ds-ink-2); }
.ex-cal-grid span.is-future { opacity: .45; }
.ex-cal-key { display: flex; align-items: center; gap: 3px; padding-bottom: 2px; color: var(--ds-ink-4); font-size: 11px; }
.ex-cal-key i { width: 12px; height: 12px; border-radius: 3px; }
.ex-cal-key span:first-child { margin-right: 3px; }
.ex-cal-key span:last-child { margin-left: 3px; }

/* Places and the one you pick. */
.ex-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ds-gap); align-items: stretch; }
.ex-places, .ex-focus { display: flex; flex-direction: column; }
.ex-place { grid-template-columns: 24px minmax(0, 1fr) 160px 96px; }
.ex-place.is-on { background: var(--ds-teal-bg); }
.ex-place .mo-mail-tile { font-size: 11px; font-weight: 700; }
.ex-place-bar { height: 7px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.ex-place-bar i { display: block; height: 100%; border-radius: 2px; }
.ex-focus-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ds-line); }
.ex-focus-figs > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-left: 1px solid var(--ds-line-soft); }
.ex-focus-figs > div:first-child { border-left: 0; }
.ex-focus-figs span { color: var(--ds-ink-3); font-size: 12px; }
.ex-focus-figs b { color: #212121; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ex-focus-figs em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.ex-focus-months { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 6px; min-height: 140px; padding: 14px; }
.ex-focus-months span { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ex-focus-months i { width: 70%; border-radius: 3px 3px 0 0; background: var(--ds-teal); }
.ex-focus-months em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; font-weight: 600; }
.ex-rule { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-3); font-size: 12.5px; }
.ex-rule b { color: var(--ds-ink); }
.ex-rule select { flex: 1 1 auto; min-width: 0; height: 28px; }
.ex-cat-list { flex: 1 1 auto; padding: 4px 0; }
.ex-cat { display: grid; grid-template-columns: 8px 120px minmax(0, 1fr) 44px 80px; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.ex-cat:first-child { border-top: 0; }
.ex-cat > i { width: 8px; height: 18px; border-radius: 2px; }
.ex-cat > span:nth-child(2) { overflow: hidden; color: var(--ds-ink); white-space: nowrap; text-overflow: ellipsis; }
.ex-cat em { color: var(--ds-ink-3); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ex-cat b { color: var(--ds-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Recurring and property. */
.ex-act .ex-subs, .ex-act .ex-estate { display: flex; flex-direction: column; }
.ex-act .mo-rows { flex: 1 1 auto; }
.ex-sub { grid-template-columns: 24px minmax(0, 1fr) auto 110px 24px; cursor: default; }
.ex-sub .nw-line-value em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; font-weight: 400; }
.ex-sub .ds-mark { font-size: 11.5px; font-weight: 500; }
/* Bills to pay: the bill, when it is due, what it asks for, and Mark paid. */
.mo-mail.ex-bill { grid-template-columns: 24px minmax(0, 1fr) auto 110px auto; cursor: default; }
.mo-mail.ex-bill:hover { background: #ffffff; }
.ex-bill:is(:hover, :focus-within) .item-more { opacity: 1; }
.ex-bill .bz-acts { align-items: center; }
.ex-bill.is-paid .mo-mail-subject b { font-weight: 500; }
.bz-bill-row .ed-ms-when { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
.ex-sub-add { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px minmax(0, 1fr) auto; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); }
.ex-sub-add input { height: 28px; min-height: 28px; padding: 0 8px; }
.ex-link-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; text-align: center; color: var(--ds-ink-3); font-size: 12.5px; line-height: 1.5; }
.ex-link-empty > span { max-width: 340px; }
.ex-link-mock { display: flex; align-items: center; gap: 10px; }
.ex-link-line, .ex-link-prop { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--ds-border); border-radius: 7px; background: #ffffff; font-size: 11px; white-space: nowrap; }
.ex-link-line i { width: 6px; height: 14px; border-radius: 2px; background: #cc0000; }
.ex-link-line b { color: var(--ds-ink); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 600; }
.ex-link-line em { color: var(--ds-ink-3); font-style: normal; }
.ex-link-prop { border-color: #dcdcdc; background: var(--ds-teal-bg); color: var(--ds-teal-ink); }
.ex-link-prop .mo-ic { width: 13px; height: 13px; }

/* The log. */
.ex-table-wrap { margin: 0 !important; width: 100% !important; }
.ex-log-table td { padding-top: 4px !important; padding-bottom: 4px !important; }
.ex-log-table :is(select, input) { width: 100%; }
.ex-after { color: var(--ds-ink-2); font-size: 12.5px; }
.ex-after em { display: block; color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
/* A transaction's own receipt, and what is yours of its amount. */
.ex-log-table td.ex-what { position: relative; }
.finance-page.finance-page .ex-log-table td.ex-what:has(.ex-receipt-mark) input { padding-right: 26px; }
.ex-receipt-mark {
  position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ds-ink-4);
  transform: translateY(-50%); cursor: pointer;
}
.ex-receipt-mark:hover { background: var(--ds-hover); color: var(--ds-ink-2); }
.ex-receipt-mark .mo-ic { width: 13px; height: 13px; }
.ex-part { display: block; max-width: 100%; overflow: hidden; padding-right: 6px; color: var(--ds-ink-4); font-size: 11px; font-style: normal; text-align: right; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ex-months-toggle { border-top: 1px solid var(--ds-line); border-bottom: 0; }
.ex-months-table tr.is-empty th, .ex-months-table tr.is-empty td { color: var(--ds-ink-5); }
.ex-dash { color: #d4d4d4; }
@media (max-width: 1180px) { .ex-pair, .ex-capture-body { grid-template-columns: 1fr; } .ex-cal-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-cal-key { align-self: end; }
.ex-focus-months i { max-width: 46px; }
/* Dates and pickers in the log show their chrome only when pointed at. */
.finance-page.finance-page .ex-log-table td :is(select, input) { padding-left: 6px; }
.finance-page.finance-page .ex-log-table td select { appearance: none; background-image: none; }
.finance-page.finance-page .ex-log-table tr:hover td select { appearance: auto; }
.finance-page.finance-page .ex-log-table td input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.finance-page.finance-page .ex-log-table tr:hover td input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; }
.ex-log-table th:nth-child(1) { width: 130px; }
.ex-log-table th:nth-child(2) { width: 26%; }
.ex-log-table th:nth-child(6) { width: 110px; }
.finance-page.finance-page .ex-log-table td.num input { text-align: right; font-variant-numeric: tabular-nums; }
/* Expenditure: composer rows and the property list. */
.ex-sub-composer { grid-template-columns: 24px minmax(0, 1fr) 80px 150px 140px auto; }
.ex-tx-composer {
  width: 100%; grid-template-columns: 24px auto minmax(0, 1fr); gap: 10px; border-bottom: 0; cursor: pointer; font: inherit; text-align: left;
}
.ex-tx-composer > span:nth-child(2) { color: var(--ds-ink-2); font-size: 13px; font-weight: 500; }
.ex-tx-composer > em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.ex-tx-composer:hover { background: var(--ds-hover); }
.ex-estate .ex-sub { grid-template-columns: 24px minmax(0, 1fr) 0 auto 0; cursor: pointer; }
.ex-estate .ex-sub .mo-mail-subject { min-width: 0; }
.ex-sub-add { display: none; }
.ex-log .ds-composer.ex-tx-composer { gap: 10px; border: 0; border-top: 1px solid var(--ds-line); border-radius: 0; }

/* ================================================================
   Finances → Master Data (prefix md-)
   ================================================================ */
.md-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--ds-gap); align-items: start; }
/* The side menu, at the main menu's own values: 30px rows, 0 8px, gap 10,
   radius 6, Inter 13.5px/420 #2a2a2a, 16px icons #3d3d3d at 1.6, hover
   #f7f7f7, selected #f1f1f1; counts 12px #9a9a9a underlined #d8d8d8;
   section heads 28px, DM Sans 11.5px/600 #8f8f8f, 12px chevron at 1.8;
   search 32px, #fafafa, 1px #ededed, radius 7. */
.md-nav {
  position: sticky; top: 14px; display: flex; flex-direction: column; padding: 6px 8px 10px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: #ffffff; box-shadow: var(--ds-shadow);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.md-nav-head { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; color: #2a2a2a; }
.md-nav-head b { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.md-nav-ic { flex: none; width: 16px; height: 16px; fill: none; stroke: #3d3d3d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.md-nav-search {
  display: flex; align-items: center; gap: 8px; height: 32px; margin: 4px 2px 8px; padding: 0 10px;
  border: 1px solid #ededed; border-radius: 7px; background: #fafafa; color: #a9a9a9; font-size: 13px; cursor: text;
}
.md-nav-cmd { margin-left: -2px; font-size: 13px; font-weight: 500; }
.finance-page.finance-page .md-nav-search input {
  flex: 1 1 auto; min-width: 0; height: 17px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none; color: #1a1a1a; font: inherit; font-size: 13px; line-height: 1;
}
.md-nav-search input::placeholder { color: #a9a9a9; }
.md-nav-sh {
  width: 100%; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; background: transparent;
  color: #8f8f8f; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .035em; text-align: left; cursor: pointer;
}
.finance-page .md-nav-sh > span { flex: 1 1 auto; font-family: 'DM Sans', -apple-system, sans-serif; }
.md-nav-sec + .md-nav-sec { margin-top: 6px; }
.md-nav-chev { width: 12px; height: 12px; fill: none; stroke: #616161; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.md-nav-sh:hover .md-nav-chev { stroke: #2a2a2a; }
.md-nav-sec.is-folded .md-nav-chev { transform: rotate(-90deg); }
.md-nav-sec.is-folded .md-nav-sh { color: #4a4a4a; }
/* Folding by the grid-row transition, as the main menu folds. */
.md-nav-rows { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.md-nav-rows > div { min-height: 0; overflow: hidden; }
.md-nav-sec.is-folded .md-nav-rows { grid-template-rows: 0fr; }
.md-nav-item {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px;
  background: transparent; color: #2a2a2a; font: inherit; font-size: 13.5px; font-weight: 420; text-align: left; cursor: pointer;
}
.md-nav-item:hover { background: #f7f7f7; }
.md-nav-item.is-on, .md-nav-item.is-on:hover { background: #f1f1f1; }
.md-nav-item[hidden], .md-nav-sec[hidden] { display: none; }
.md-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; letter-spacing: -0.005em; white-space: nowrap; text-overflow: ellipsis; }
.md-nav-count { flex: none; color: #9a9a9a; font-size: 12px; font-weight: 420; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: #d8d8d8; text-underline-offset: 2px; }
.md-nav-none { margin: 4px 8px 2px; color: #a9a9a9; font-size: 13px; }
.md-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-gap); }
.md-section { scroll-margin-top: 12px; }

/* Accounts and cards. */
.md-reg { grid-template-columns: 8px minmax(0, 1fr) 140px 150px 120px; padding: 0 14px; }
.md-missing { color: var(--ds-orange-ink); }
.md-page .ds-composer.md-add { width: 100%; grid-template-columns: 24px auto minmax(0, 1fr); gap: 10px; border: 0; border-top: 1px solid var(--ds-line-soft); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
.md-page .ds-composer.md-add > span:nth-child(2) { color: var(--ds-ink-2); font-size: 13px; font-weight: 500; }
.md-page .ds-composer.md-add > em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.md-page .ds-composer.md-add:hover { background: var(--ds-hover); }

/* A list's entries, three to a line, each with how often it is used. */
/* Two columns beside the side menu, so every name is read whole. */
.md-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 4px 14px 8px; }
.md-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 62px 22px; align-items: center; gap: 8px;
  min-height: 36px; border-bottom: 1px solid var(--ds-line-soft);
}
.md-entry-name { overflow: hidden; color: var(--ds-ink); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.md-entry-use { height: 5px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.md-entry-use i { display: block; height: 100%; border-radius: 2px; background: var(--ds-teal); }
.md-entry em { color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-entry.is-unused .md-entry-name { color: var(--ds-ink-3); }
.md-entry.is-unused em { color: var(--ds-ink-5); }
.md-entry-lock { color: var(--ds-ink-5); font-size: 10.5px; white-space: nowrap; }
.md-entry .md-remove { width: 22px; height: 22px; opacity: 0; transition: opacity .12s; }
.md-entry:hover .md-remove, .md-remove:focus-visible { opacity: 1; }
.md-composer { grid-template-columns: 24px minmax(0, 1fr) auto; }

/* Institutions. */
.md-inst-tools { padding: 12px 16px 6px; }
.md-inst-search { width: 100%; max-width: 420px; }
.md-inst-yours, .md-inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 0 14px; }
.md-inst-yours { padding-bottom: 8px; border-bottom: 1px solid var(--ds-line); }
.md-inst-grid { max-height: 360px; overflow: auto; padding-top: 4px; padding-bottom: 8px; }
.md-inst { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 34px; border-bottom: 1px solid var(--ds-line-soft); }
.md-inst[hidden] { display: none; }
.md-inst > i { width: 8px; height: 8px; border-radius: 2px; }
.md-inst > span { overflow: hidden; color: var(--ds-ink-2); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.md-inst.is-yours > span { color: var(--ds-ink); font-weight: 600; }
.md-inst > em { color: var(--ds-teal-ink); font-size: 11.5px; font-style: normal; white-space: nowrap; }
.md-inst .md-remove { width: 22px; height: 22px; opacity: 0; }
.md-inst:hover .md-remove { opacity: 1; }

/* Tax brackets as a staircase. */
.md-tax-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.md-stairs { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 230px; padding: 26px 18px 8px 18px; }
.md-stair { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; }
.md-stair-rate { color: var(--ds-ink-2); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.md-stair-bar { position: relative; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; background: #b7b7b7; overflow: hidden; }
.md-stair-bar i.is-fed { background: #3d85c6; }
.md-stair.is-yours .md-stair-bar { background: #b7b7b7; }
.md-stair.is-yours .md-stair-bar i.is-fed { background: #cc0000; }
.md-stair.is-yours .md-stair-rate { color: var(--ds-red-ink); }
.md-stair-range { color: var(--ds-ink-4); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-you { position: absolute; top: 4px; bottom: 26px; margin-left: 18px; border-left: 1.5px dashed var(--ds-ink-2); }
.md-you b, .md-you em { position: absolute; left: 6px; white-space: nowrap; font-style: normal; }
.md-you b { top: 0; color: var(--ds-ink); font-size: 12px; font-weight: 700; }
.md-you em { top: 16px; color: var(--ds-ink-3); font-size: 11.5px; }
.md-tax-facts { display: flex; flex-direction: column; border-left: 1px solid var(--ds-line); background: var(--ds-surface); }
.md-tax-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--ds-line-soft); }
.md-tax-facts span { color: var(--ds-ink-3); font-size: 12.5px; }
.md-tax-facts b { color: var(--ds-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.md-tax-key { justify-content: flex-start !important; gap: 14px !important; border-bottom: 0 !important; }
.md-tax-key span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.md-tax-key i { width: 10px; height: 10px; border-radius: 2px; }
.md-tax-key i.is-fed { background: #3d85c6; }
.md-tax-key i.is-on { background: #b7b7b7; }


/* ================================================================
   Dashboard → Projection (prefix pj-)
   ================================================================ */
.pj-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--ds-gap); align-items: start; }
.pj-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-gap); }
.pj-levers { position: sticky; top: 12px; }
.pj-block { padding: 12px 14px 10px; border-top: 1px solid var(--ds-line-soft); }
.pj-levers .mo-hd + .pj-block { border-top: 0; }
.pj-block-hd { margin-bottom: 8px; color: #979797; font-family: var(--font-sidebar); font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.pj-scenario { display: flex; }
.pj-scenario button { flex: 1 1 0; justify-content: center; }
.pj-source { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--ds-line-soft); cursor: pointer; }
.pj-source:last-child { border-bottom: 0; }
.pj-source input { position: absolute; opacity: 0; pointer-events: none; }
.pj-switch { width: 28px; height: 16px; padding: 2px; border-radius: 5px; background: #d9d9d9; transition: background .15s; }
.pj-switch i { display: block; width: 12px; height: 12px; border-radius: 3px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.pj-source.is-on .pj-switch { background: var(--ds-teal); }
.pj-source.is-on .pj-switch i { transform: translateX(12px); }
.pj-source input:focus-visible + .pj-switch { outline: 2px solid #2563eb; outline-offset: 2px; }
.pj-source-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-source-text b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.pj-source-text em { overflow: hidden; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.pj-source:not(.is-on) .pj-source-text b, .pj-source:not(.is-on) strong { color: var(--ds-ink-4); }
.pj-source strong { color: var(--ds-ink); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-source strong small { color: var(--ds-ink-4); font-size: 11px; font-weight: 400; }
.pj-source strong.is-neg { color: var(--ds-red-ink); }
.finance-page.finance-page .pj-assumptions { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; box-shadow: none; }
.finance-page.finance-page .pj-assumptions > label { grid-template-columns: minmax(0, 1fr) auto 110px; }
.pj-levers .mo-foot span { white-space: normal; line-height: 1.4; padding: 8px 0; }

/* Outcome and the range across scenarios. */
.pj-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.pj-outcome-main { padding: 16px 18px; border-right: 1px solid var(--ds-line); }
.pj-outcome-main .mo-fig { font-size: 34px; }
.pj-outcome-main .mo-note { white-space: normal; }
.pj-range { padding: 16px 22px 18px; }
.pj-range-hd { display: flex; justify-content: space-between; margin-bottom: 30px; color: var(--ds-ink-3); font-size: 12px; }
.pj-range-hd b { color: var(--ds-ink); font-weight: 600; }
.pj-range-track { position: relative; height: 8px; margin: 0 40px 40px; }
.pj-range-track > i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #dcdcdc, #dcdcdc 50%, #dcdcdc); }
.pj-range-mark { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.pj-range-mark i { width: 4px; height: 20px; border-radius: 2px; background: var(--ds-ink-4); }
.pj-range-mark b { margin-top: 4px; color: var(--ds-ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-range-mark em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; white-space: nowrap; }
.pj-range-mark.is-on i { background: var(--ds-teal-ink); }
.pj-range-mark.is-on b { color: var(--ds-ink); }
/* Close scenarios: each keeps its tick, one label names them all. */
.pj-range-mark.is-tick b, .pj-range-mark.is-tick em { display: none; }
.pj-range-mark.is-label i { visibility: hidden; }

/* What each year adds. */
.pj-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-gap); align-items: stretch; }
.pj-years, .pj-sense { display: flex; flex-direction: column; }
.pj-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; height: 240px; }
/* The figure and the year each keep their 16px; the bars share what is left
   above and below the line, so nothing is pushed out of the chart. */
.pj-col { min-width: 0; display: grid; grid-template-rows: 16px minmax(0, var(--up)) minmax(0, var(--down)) 16px; gap: 0; align-items: end; }
.pj-col > b { color: var(--ds-ink-2); font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-col > b.is-neg { color: var(--ds-red-ink); }
.pj-col-up { height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; border-bottom: 1px solid #9a9a9a; }
.pj-col-up i { width: 100%; }
.pj-col-up i:last-child { border-radius: 3px 3px 0 0; }
.pj-col-down { height: 100%; align-self: start; }
.pj-col-down i { display: block; width: 100%; border-radius: 0 0 3px 3px; background: #cc0000; opacity: .8; }
.pj-col > em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; text-align: center; }

/* What moves it most. */
.pj-tornado { flex: 1 1 auto; padding: 8px 16px 14px; }
.pj-t-axis { display: grid; grid-template-columns: 130px 1fr 1fr 1fr 130px; align-items: end; min-height: 26px; color: var(--ds-ink-4); font-size: 11px; }
.pj-t-axis span:nth-child(1) { grid-column: 2; }
.pj-t-axis span:nth-child(2) { grid-column: 3; text-align: center; color: var(--ds-ink-2); font-weight: 600; }
.pj-t-axis span:nth-child(3) { grid-column: 4; text-align: right; }
.pj-t-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px; align-items: center; gap: 0; min-height: 36px; border-top: 1px solid var(--ds-line-soft); }
.pj-t-label { display: flex; flex-direction: column; gap: 1px; }
.pj-t-label b { color: var(--ds-ink); font-size: 12.5px; font-weight: 500; }
.pj-t-label em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.pj-t-bar { position: relative; height: 14px; }
.pj-t-bar::before { content: ""; position: absolute; left: 50%; top: -11px; bottom: -11px; border-left: 1px solid #9a9a9a; }
.pj-t-bar i { position: absolute; top: 0; bottom: 0; }
.pj-t-bar i.is-low { right: 50%; border-radius: 3px 0 0 3px; background: #cc0000; }
.pj-t-bar i.is-high { left: 50%; border-radius: 0 3px 3px 0; background: #6aa84f; }
.pj-t-vals { display: flex; justify-content: flex-end; gap: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pj-t-vals em { font-style: normal; }
.pj-t-vals .is-neg { color: var(--ds-red-ink); }
.pj-t-vals .is-pos { color: var(--ds-green-ink); }

.pj-table-toggle { border-bottom: 0; }
.pj-year-table .is-neg { color: var(--ds-red-ink); }
@media (max-width: 1240px) { .pj-layout, .pj-pair, .pj-outcome { grid-template-columns: 1fr; } .pj-levers { position: static; } }
.finance-page.finance-page.finance-page .pj-assumptions { grid-template-columns: minmax(0, 1fr); padding: 0; }
.finance-page.finance-page.finance-page .pj-assumptions > label { grid-template-columns: minmax(0, 1fr) auto 104px; }

/* ================================================================
   Dashboard → Activity (ac-) and Health (hl-)
   ================================================================ */
.ac-moves .mo-col { gap: 4px; }
.ac-move { position: relative; width: 12px; height: 34px; }
.ac-move::before { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 1px solid #c9c9c9; }
.ac-move i { position: absolute; left: 0; right: 0; border-radius: 2px; }
.ac-move i.is-up { bottom: 50%; }
.ac-move i.is-down { top: 50%; opacity: .55; }
.ac-mirror { position: relative; display: flex; gap: 2px; height: 40px; }
.ac-mirror::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #c9c9c9; }
.ac-mirror span { position: relative; flex: 1 1 0; height: 100%; }
.ac-mirror span.is-empty { flex: 1 1 100%; }
.ac-mirror i { position: absolute; left: 0; right: 0; border-radius: 2px; }
.ac-mirror i.is-in { bottom: 50%; background: var(--ds-green); }
.ac-mirror i.is-out { top: 50%; background: #cc0000; }
.ac-key { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; }
.ac-key.is-in { background: var(--ds-green); }
.ac-key.is-out { background: #cc0000; }
.ac-facts { display: flex; flex-direction: column; gap: 4px; }
.ac-facts > div { display: flex; justify-content: space-between; gap: 10px; color: var(--ds-ink-3); font-size: 11.5px; white-space: nowrap; }
.ac-facts b { overflow: hidden; color: var(--ds-ink); font-weight: 600; text-overflow: ellipsis; }

.ac-pair { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--ds-gap); align-items: stretch; }
.ac-feed, .hl-checks, .hl-coverage { display: flex; flex-direction: column; }
.ac-line { grid-template-columns: 8px minmax(0, 1fr) auto 120px 120px; padding: 0 14px; cursor: default; }
.ac-line .ds-mark { font-size: 11.5px; font-weight: 500; }
.ac-amount { color: var(--ds-ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ac-amount.is-in, .ac-acct-fig em.is-in { color: var(--ds-green-ink); }
.ac-amount.is-out, .ac-acct-fig em.is-out { color: var(--ds-red-ink); }
.ac-after { display: flex; flex-direction: column; align-items: flex-end; color: var(--ds-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.ac-after em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; }
.ac-side { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-gap); }
.ac-accts { flex: 1 1 auto; }
.ac-acct { display: grid; grid-template-columns: 8px minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-top: 1px solid var(--ds-line-soft); cursor: pointer; }
.ac-acct:first-child { border-top: 0; }
.ac-acct:hover { background: var(--ds-hover); }
.ac-acct-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-acct-name b { overflow: hidden; color: var(--ds-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ac-acct-name em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.ac-acct svg { width: 70px; height: 28px; overflow: visible; }
.ac-acct svg path { fill: none; stroke: #b5b5b5; stroke-width: 1.5; }
.ac-acct svg path.is-up { stroke: var(--ds-green); }
.ac-acct svg path.is-down { stroke: #cc0000; }
.ac-acct-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ac-acct-fig b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-acct-fig em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }

/* Health. */
.hl-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.hl-score { padding: 16px 18px; border-right: 1px solid var(--ds-line); }
.hl-score .mo-fig { font-size: 34px; }
.hl-score .mo-note { display: flex; align-items: center; gap: 8px; white-space: normal; }
.hl-meter { padding: 18px 22px; }
.hl-meter-bar { display: flex; gap: 3px; height: 22px; }
.hl-meter-bar span { position: relative; border-radius: 4px; background: #ffffff; box-shadow: inset 0 0 0 1.5px #b7b7b7; }
.hl-meter-bar span.is-ready { background: var(--ds-teal); box-shadow: none; }
.hl-meter-labels { display: flex; gap: 3px; margin-top: 6px; }
.hl-meter-labels span { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 10.5px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.hl-check { grid-template-columns: 24px minmax(0, 1fr) 160px 110px; cursor: default; }
.hl-check .ds-mark, .hl-cover .ds-mark { justify-self: end; font-size: 12px; font-weight: 500; }
.hl-diff { position: relative; height: 10px; }
.hl-diff::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 1px solid #9a9a9a; }
.hl-diff i { position: absolute; top: 0; bottom: 0; }
.hl-diff i.is-above { left: 50%; border-radius: 0 3px 3px 0; background: #cc0000; }
.hl-diff i.is-below { right: 50%; border-radius: 3px 0 0 3px; background: #cc0000; }
.hl-axis { display: flex; justify-content: space-between; width: 160px; margin-right: 118px; color: var(--ds-ink-4); font-size: 11px; }
.hl-axis em { font-style: normal; }
.hl-cover { grid-template-columns: 24px minmax(0, 1fr) 52px 90px 52px; }
.hl-points { color: var(--ds-ink-4); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.hl-go { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.hl-go .mo-ic { width: 12px; height: 12px; }
.hl-cover:hover .hl-go { color: var(--ds-ink); }
.hl-page .ac-pair { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
@media (max-width: 1180px) { .ac-pair, .hl-top { grid-template-columns: 1fr; } }

/* ================================================================
   Dashboard → Decision Lab (prefix dl-; kept panels are fin-di-)
   ================================================================ */
.dl-head { display: block; }
.dl-head-main { padding: 14px 18px 14px; }
.dl-head-top { display: flex; align-items: center; gap: 10px; }
.dl-kicker { color: #979797; font-family: var(--font-sidebar); font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.dl-pick { max-width: 360px; }
.dl-pick select { max-width: 320px; }
.dl-head h2 { margin: 0 0 6px; color: #212121; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.dl-verdict { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--ds-ink-2); font-size: 13.5px; line-height: 1.5; }
.dl-verdict .ds-mark { flex: none; font-size: 12.5px; }
.dl-paths-pick { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 14px 18px; border-left: 1px solid var(--ds-line); }
.dl-templates {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 9px 14px;
  border-top: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-4); font-size: 12px;
}
.dl-templates span { margin-right: 4px; }
.dl-templates button {
  height: 24px; padding: 0 9px; border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff;
  color: var(--ds-ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.dl-templates button:hover { background: #f7f7f7; color: var(--ds-ink); }

/* Summary visuals. */
.dl-mini-grid { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 3px; }
.dl-mini-grid i { height: 12px; border-radius: 2px; }
.dl-mini-grid i.is-safe { background: var(--ds-green); }
.dl-mini-grid i.is-watch { background: var(--ds-orange); }
.dl-mini-grid i.is-breach { background: #cc0000; }
.dl-ruler { position: relative; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #ececec 0 8px, #ffffff 8px 10px); }
.dl-ruler i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #dcdcdc; }
.dl-ruler b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ds-teal-ink); }
.dl-floor { position: relative; height: 14px; border-radius: 3px; background: var(--ds-well); }
.dl-floor-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid #9a9a9a; }
.dl-floor i { position: absolute; top: 2px; bottom: 2px; background: var(--ds-teal); border-radius: 2px; }
.dl-floor i.is-neg { background: #cc0000; }
.dl-floor b { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--ds-ink-2); }
.dl-sources { display: flex; gap: 3px; height: 14px; }
.dl-sources span { border-radius: 3px; background: #ffffff; box-shadow: inset 0 0 0 1.5px #b7b7b7; }
.dl-sources span.is-ready { background: var(--ds-teal); box-shadow: none; }

/* Layout. */
.dl-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--ds-gap); align-items: start; }
.dl-main, .dl-side { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-gap); }
.finance-page .dl-page .fin-workspace-card { margin: 0; }

/* The paths. */
.dl-path-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.dl-path {
  display: flex; flex-direction: column; gap: 0; padding: 14px 16px 10px; border: 0; border-left: 1px solid var(--ds-line);
  background: #ffffff; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dl-path:first-child { border-left: 0; }
.dl-path:hover { background: var(--ds-hover); }
.dl-path.is-best { background: #f3f3f3; }
.dl-path-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.dl-path-hd b { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.dl-path-hd .ds-mark { font-size: 11.5px; font-weight: 500; }
.dl-path-fig { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; color: #212121; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dl-path-fig small { color: var(--ds-ink-3); font-size: 12.5px; font-weight: 600; }
.dl-path-bar { height: 6px; margin: 8px 0 8px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.dl-path-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ds-teal); }
.dl-fact { display: flex; justify-content: space-between; gap: 10px; min-height: 32px; align-items: center; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.dl-fact span { color: var(--ds-ink-3); }
.dl-fact b { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-fact b.is-neg { color: var(--ds-red-ink); }
.dl-fact b.is-pos { color: var(--ds-green-ink); }

.dl-floor-line { fill: none; stroke: var(--ds-ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.mo-glegend i.dl-key-floor { height: 0; border-top: 2px dashed var(--ds-ink-2); border-radius: 0; }

.dl-measure-list { padding: 4px 0; }
.dl-measure { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--ds-line-soft); }
.dl-measure:first-child { border-top: 0; }
.dl-measure > span:first-child { display: flex; justify-content: space-between; gap: 10px; }
.dl-measure > span:first-child b { color: var(--ds-ink); font-size: 12.5px; font-weight: 500; }
.dl-measure > span:first-child em { color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; }
.dl-measure-bar { position: relative; height: 8px; border-radius: 2px; background: var(--ds-well); }
.dl-measure-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.dl-measure-bar i.is-good { background: var(--ds-green); }
.dl-measure-bar i.is-mid { background: var(--ds-orange); }
.dl-measure-bar i.is-low { background: #cc0000; }
.dl-measure-bar b { position: absolute; top: -3px; bottom: -3px; border-left: 1px solid #9a9a9a; }

/* Kept panels, drawn in the same hand. */
.dl-page .fin-di-heat-grid { gap: 3px; padding: 12px 14px; }
.dl-page .fin-di-heat-grid > strong { color: var(--ds-ink-3); font-size: 11.5px; font-weight: 500; }
.dl-page .fin-di-heat-grid button { border: 0; border-radius: 6px; background: var(--ds-well); }
.dl-page .fin-di-heat-grid button.is-safe { background: var(--ds-well); color: var(--ds-ink-2); }
.dl-page .fin-di-heat-grid button.is-watch { background: #e69138; color: #ffffff; }
.dl-page .fin-di-heat-grid button.is-breach { background: #cc0000; color: #ffffff; }
.dl-page .fin-di-heat-grid button:is(.is-watch, .is-breach) em { color: #ffffff; opacity: .85; }
.dl-page .fin-di-heat-grid button span { font-weight: 600; }
.dl-page .fin-di-method { padding: 10px 14px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-3); font-size: 11.5px; line-height: 1.45; }
.dl-page .fin-module-head b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.dl-page .fin-module-head b.is-negative { color: var(--ds-red-ink); }
.dl-page .fin-di-ripple-list button, .dl-page .fin-di-claims button {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 0 14px; border: 0; border-top: 1px solid var(--ds-line-soft); border-radius: 0; background: #ffffff; text-align: left; cursor: pointer;
}
.dl-page .fin-di-ripple-list button:hover, .dl-page .fin-di-claims button:hover { background: var(--ds-hover); }
.dl-page .fin-di-ripple-list strong { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.dl-page .fin-di-ripple-list span { overflow: hidden; color: var(--ds-ink-3); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.dl-page .fin-di-ripple-list b { color: var(--ds-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-page .fin-di-ripple-list em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; text-align: right; }
.dl-page .fin-di-claims button { grid-template-columns: minmax(0, 1fr) 120px 90px; }
.dl-page .fin-di-claims i { height: 7px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.dl-page .fin-di-claims i b { display: block; height: 100%; border-radius: 2px; background: var(--ds-teal); }
.dl-page .fin-di-claims small { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; text-align: right; }
.dl-page .fin-di-claims em { display: block; color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.dl-page .fin-di-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); }
.dl-page .fin-di-actions button {
  height: 26px; padding: 0 10px; border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff;
  color: var(--ds-ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.dl-page .fin-di-actions button:hover { background: #f7f7f7; color: var(--ds-ink); }
.dl-page .fin-di-actions button.is-danger { color: var(--ds-red-ink); }
@media (max-width: 1240px) { .dl-layout, .dl-head { grid-template-columns: 1fr; } .dl-paths-pick { align-items: flex-start; border-left: 0; border-top: 1px solid var(--ds-line); } }
.dl-page .fin-di-heat-grid button { box-shadow: none !important; }

/* Decision Lab in rows. */
.dl-row { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--ds-gap); align-items: stretch; }
.dl-row.is-full { grid-template-columns: minmax(0, 1fr); }
.dl-row > * { display: flex; flex-direction: column; margin: 0 !important; min-width: 0; }
.dl-row > * > :last-child { flex: 1 1 auto; }
.dl-row .fin-di-pressure .fin-di-heat-grid { flex: 1 1 auto; align-content: stretch; }
.dl-row .fin-di-collision .fin-di-claims { flex: 1 1 auto; }
.dl-row .fin-di-collision .fin-di-method, .dl-row .fin-di-pressure .fin-di-method { flex: none; }
.dl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-tile {
  display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 12px 14px; border: 0;
  border-left: 1px solid var(--ds-line-soft); border-top: 1px solid var(--ds-line-soft); background: #ffffff;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dl-tile:nth-child(3n + 1) { border-left: 0; }
.dl-tile:nth-child(-n + 3) { border-top: 0; }
.dl-tile:hover { background: var(--ds-hover); }
.dl-tile b { color: #212121; font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dl-tile em { overflow: hidden; color: var(--ds-ink-3); font-size: 12px; font-style: normal; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dl-memory-body { display: grid; grid-template-columns: 220px minmax(0, 1.2fr) minmax(0, 1fr) 220px; }
.dl-memory-body > div { padding: 12px 16px; border-left: 1px solid var(--ds-line); }
.dl-memory-body > div:first-child { border-left: 0; }
.dl-memory-facts { display: flex; flex-direction: column; gap: 0; padding: 4px 16px !important; }
.dl-memory-facts > div { display: flex; justify-content: space-between; gap: 10px; min-height: 34px; align-items: center; border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.dl-memory-facts > div:last-child { border-bottom: 0; }
.dl-memory-facts span { color: var(--ds-ink-3); }
.dl-memory-facts b { color: var(--ds-ink); font-weight: 600; }
.dl-memory-why p { margin: 8px 0 0; color: var(--ds-ink-2); font-size: 13px; line-height: 1.55; }
.dl-memory-history > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--ds-line-soft); }
.dl-memory-history b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.dl-memory-history em, .dl-none { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.dl-none { display: block; margin-top: 8px; line-height: 1.5; }
.dl-memory-acts { display: flex; flex-direction: column; gap: 6px; background: var(--ds-surface); }
.dl-memory-acts .mo-btn { justify-content: flex-start; }
.dl-danger { color: var(--ds-red-ink) !important; }
@media (max-width: 1240px) { .dl-row, .dl-memory-body { grid-template-columns: 1fr; } .dl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================
   Real Estate (re-) and Realtor (rt-)
   ================================================================ */
.re-dollar { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; }
.re-dollar i { height: 16px; border-radius: 2px; }
.re-dollar i.is-kept { background: #3d85c6; }
.re-dollar i.is-cost { background: #b7b7b7; }
.re-chart { padding-bottom: 14px; }
.re-chart .fin-area-chart, .re-chart svg { width: 100%; }
.re-bridge-rows { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; padding: 8px 0; }
.re-bridge-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 84px; align-items: center; gap: 10px; min-height: 30px; padding: 0 14px; font-size: 12.5px; }
.re-bridge-row > span:first-child { color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-bridge-row > b { color: var(--ds-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.re-bridge-row > b.is-out { color: var(--ds-red-ink); }
.re-bridge-row.is-total { border-top: 1px solid var(--ds-line); padding-top: 6px; }
.re-bridge-row.is-total > span:first-child { color: var(--ds-ink); font-weight: 600; }
.re-bridge-bar { position: relative; height: 12px; }
.re-bridge-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.re-bridge-bar i.is-in { background: var(--ds-green); }
.re-bridge-bar i.is-out { background: #b7b7b7; }
.re-bridge-bar i.is-net { background: #3d85c6; }

.re-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); align-items: stretch; }
.re-sheet-card { display: flex; flex-direction: column; }
.finance-page.finance-page.finance-page .re-facts { grid-template-columns: minmax(0, 1fr); padding: 0 14px 4px; border: 0; box-shadow: none; flex: 1 1 auto; align-content: start; }
.finance-page.finance-page.finance-page .re-facts > label { grid-template-columns: minmax(0, 1fr) auto minmax(110px, 50%); }
.re-addr { padding: 12px 14px 4px; }
.re-addr .fin-addr-wrap { display: block; }
.re-addr .fin-addr-input { width: 100%; }
.re-addr-note { margin: 6px 0 0; color: var(--ds-ink-4); font-size: 11.5px; line-height: 1.4; }
.re-portfolio .re-cols, .re-prop { grid-template-columns: 8px minmax(0, 1fr) 120px 120px 120px 100px; }
.re-prop { padding: 0 14px; }
.re-fig-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.re-fig-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-left: 1px solid var(--ds-line-soft); }
.re-fig-strip > div:first-child { border-left: 0; }
.re-fig-strip span { color: var(--ds-ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-fig-strip b { color: var(--ds-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.re-schedules .re-schedule-body { flex: 1 1 auto; max-height: 420px; overflow: auto; }
.re-schedule-body .fin-seg { display: none; }
.re-schedule-body .fin-table-wrap { margin: 0 !important; width: 100% !important; }
.re-stack { min-width: 0; display: flex !important; flex-direction: column; gap: var(--ds-gap); }
.re-stack > * { flex: 1 1 auto; display: flex; flex-direction: column; }
.re-matchers { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink-3); font-size: 12px; }
.re-linked .ex-sub, .re-docs .ex-sub { grid-template-columns: 24px minmax(0, 1fr) 0 auto 0; }
.re-page .fin-estate-switcher { gap: var(--ds-gap); }

.rt-outcome { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rt-facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
.rt-facts-strip > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 16px; border-left: 1px solid var(--ds-line-soft); }
.rt-facts-strip span { color: var(--ds-ink-3); font-size: 12px; }
.rt-facts-strip b { color: var(--ds-ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-stages { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; padding: 10px 0; }
.rt-stage { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; }
.rt-stage-label { display: flex; flex-direction: column; gap: 2px; }
.rt-stage-label b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.rt-stage-label em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rt-stage-bar { display: flex; justify-content: center; height: 30px; border-radius: 4px; background: var(--ds-surface); }
.rt-stage-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3d85c6, #3d85c6); }
.rt-stage-n { color: #212121; font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.finance-page.finance-page.finance-page .rt-facts { grid-template-columns: minmax(0, 1fr); padding: 0 14px 4px; border: 0; box-shadow: none; }
@media (max-width: 1240px) { .re-sheet, .rt-outcome { grid-template-columns: 1fr; } .re-fig-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------- Employment ---------------- */
.dl-row.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.em-sources .fo-cost { grid-template-columns: 150px minmax(0, 1fr) 48px 92px; cursor: default; }
.em-sources .fo-cost:hover { background: transparent; }
/* Contracts across the calendar. */
.em-tl { --lane: 184px; position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: 6px 16px 30px; }
.em-months em:first-child { transform: none; }
.em-months, .em-lane { display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); align-items: center; gap: 16px; }
.em-months { height: 26px; }
.em-months .em-lane-track { position: relative; height: 100%; }
.em-months em { position: absolute; top: 6px; transform: translateX(-50%); color: var(--ds-ink-4); font-size: 11px; font-style: normal; white-space: nowrap; }
.em-lane { min-height: 52px; border-top: 1px solid var(--ds-line-soft); }
.em-lane-name { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; }
.em-lane-name i { grid-row: 1 / 3; width: 8px; height: 26px; align-self: center; border-radius: 2px; }
.em-lane-name b { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.em-lane-name em { overflow: hidden; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.em-lane-track { position: relative; height: 26px; border-radius: 3px; background: repeating-linear-gradient(90deg, #f4f4f4 0 calc(100% / 8 - 1px), #ffffff calc(100% / 8 - 1px) calc(100% / 8)); }
.em-term { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; border-radius: 3px; background: var(--c); overflow: hidden; }
.em-term em { color: #ffffff; font-size: 11px; font-weight: 600; font-style: normal; white-space: nowrap; }
.em-term.is-ended { background: #b7b7b7; }
.em-term.is-ended em { color: #ffffff; }
.em-term.is-future { background: #ffffff; border: 1.5px dashed var(--c); }
.em-term.is-future em { color: var(--ds-ink-2); }
.em-term.is-open { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.em-term.is-undated { background: #f3f3f3; border: 1px dashed #e69138; }
.em-term.is-undated em { color: #a35d10; }
.em-today { left: calc(32px + var(--lane) + (100% - 48px - var(--lane)) * var(--f)); position: absolute; top: 32px; bottom: 26px; width: 2px; margin-left: -1px; background: var(--ds-teal-ink); pointer-events: none; }
.em-today b { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: var(--ds-teal-ink); color: #ffffff; font-size: 10px; font-weight: 700; }
/* Each job. */
.em-perjob .mo-rows { flex: 1 1 auto; }
.em-job { grid-template-columns: 8px minmax(0, 1fr) auto !important; }
.em-job .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.em-job-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.em-job-fig b { color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.em-job-fig em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; }
/* Economics. */
.em-import { padding: 0 !important; }
.em-import .em-import-row { border-bottom: 1px solid var(--ds-line-soft); }
.em-import .ex-recent-row { border-radius: 0; border-bottom: 1px solid var(--ds-line-soft); }
.em-import .ex-recent-row:last-child { border-bottom: 0; }
.ds-composer.em-import-row { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 14px; }
.em-import-text { display: flex; flex-direction: column; gap: 2px; }
.em-import-text b { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.em-import-text em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.finance-page .em-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--ds-gap); align-items: stretch; }
/* Taxes. */
.em-meter { height: 10px; margin-top: 4px; }
.em-meter i { border-radius: 3px; }
.em-facts { flex: 1 1 auto; justify-content: space-around; }
.em-mark { display: inline-block; width: 6px; height: 14px; margin-right: 10px; vertical-align: -2px; }
.em-deduct tr.is-total th, .em-deduct tr.is-total td { border-top: 1px solid var(--ds-line); font-weight: 700; color: var(--ds-ink); }
@media (max-width: 1240px) { .dl-row.is-even { grid-template-columns: 1fr; } .em-tl { --lane: 140px; } }
.finance-page.finance-page .fin-table th.num, .finance-page.finance-page .fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- Investments ---------------- */
.iv-page .fin-estate-switcher { gap: var(--ds-gap); margin: 0; }
.iv-page .fin-estate-card { min-height: 0; }
.iv-mini { display: flex; flex-direction: column; gap: 6px; }
.iv-mini > div { display: grid; grid-template-columns: 112px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.iv-mini em { overflow: hidden; color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.iv-mini span { position: relative; height: 8px; border-radius: 2px; background: var(--ds-well); }
.iv-mini span::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #c9c9c9; }
.iv-mini span i { position: absolute; left: 50%; top: 0; bottom: 0; border-radius: 2px; background: #3d85c6; }
.iv-mini span i.is-neg { left: auto; right: 50%; background: #cc0000; }
.iv-mini b { color: var(--ds-ink); font-size: 11.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.iv-mini b.is-out { color: var(--ds-red-ink); }
.iv-scale { margin-top: 2px; }
.iv-scale-track { position: relative; display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #dcdcdc 0%, #f3f3f3 45%, #dcdcdc 70%, #dcdcdc 100%); }
.iv-scale-track i { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; box-shadow: 0 0 0 1.5px #ffffff; }
.iv-scale-track b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ds-ink); }
/* The list. */
.iv-list .iv-cols, .iv-line { grid-template-columns: 8px minmax(0, 1fr) 128px 104px 104px 64px 84px; }
.iv-line, .iv-acct { padding: 0 14px; }
.iv-cols span:nth-child(n+4) { text-align: right; }
.iv-line-stage { min-width: 0; display: flex; }
.iv-line-stage .ds-mark { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.iv-line .mo-mail-subject, .iv-acct .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
/* Risk and return. */
.iv-map-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 18px 10px 52px; }
.iv-map-area { position: relative; flex: 1 1 auto; min-height: 200px; margin-bottom: 22px; background: linear-gradient(90deg, #f4f4f4, #f4f4f4); border-radius: 4px; }
.iv-map-area .mo-plot-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed #e6e6e6; }
.iv-map-area .mo-plot-grid.is-zero { border-top: 1px solid #cfcfcf; }
.iv-map-area .mo-plot-grid span { position: absolute; right: calc(100% + 8px); top: -7px; color: var(--ds-ink-4); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.iv-map-x { position: absolute; bottom: -20px; transform: translateX(-50%); color: var(--ds-ink-4); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.iv-dot { position: absolute; transform: translate(-50%, -50%); border: 2px solid #ffffff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
.iv-dot em { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); color: var(--ds-ink-2); font-size: 11px; font-weight: 600; font-style: normal; white-space: nowrap; pointer-events: none; }
.iv-map-ends { margin-top: 0; padding-left: 0; }
/* Payback. */
.iv-legend { margin-top: 0; }
.iv-pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #ffffff; border-radius: 3px; background: var(--c); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.iv-payback .mo-plot, .iv-cash .mo-plot { margin: 12px 16px 26px 56px; }
/* Accounts. */
.iv-accts .iv-acct-cols, .iv-acct { grid-template-columns: 8px minmax(0, 1fr) 190px 64px 120px; }
.iv-acct-cols span:nth-child(n+4) { text-align: right; }
.iv-kind { cursor: default; grid-template-columns: 120px minmax(0, 1fr) 92px; }
/* California kinds carry their IRS limit beside the kind ("Before tax ·
   $24,500 a year"), so the name column is wide enough for one line. */
.iv-kinds.is-us .iv-kind { grid-template-columns: 220px minmax(0, 1fr) 92px; }
.iv-kinds.is-us .iv-kind .fo-cost-name em { white-space: nowrap; }
.iv-kind:hover { background: transparent; }
.iv-kinds .mo-rows { display: flex; flex-direction: column; }
.iv-kinds .iv-kind { flex: 1 1 auto; }
/* Underwriting. */
.iv-years { display: flex; gap: 2px; height: 14px; }
.iv-years i { flex: 1 1 0; border-radius: 2px; background: #dcdcdc; }
.iv-years i.is-back { background: #b7b7b7; }
.iv-years i.is-payoff { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 -3px 0 #3d85c6; }
.iv-scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); }
.iv-scen-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.iv-scen-card:hover { border-color: #cfcfcf; }
.iv-scen-card.is-on { border-color: #b7b7b7; box-shadow: 0 0 0 2px rgba(61, 133, 198, .10); }
.iv-scen-top { display: flex; align-items: center; justify-content: space-between; }
.iv-scen-top b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.iv-scen-fig { color: var(--ds-ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.iv-scen-fig.is-out { color: var(--ds-red-ink); }
.iv-scen-fig small { margin-left: 6px; color: var(--ds-ink-4); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.iv-scen-facts { display: flex; gap: 14px; color: var(--ds-ink-3); font-size: 12px; }
.iv-scen-facts b { color: var(--ds-ink); font-weight: 600; }
.iv-check { grid-template-columns: minmax(0, 1fr) auto !important; padding: 0 14px; cursor: default; }
.iv-check .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.iv-checks .mo-rows { display: flex; flex-direction: column; }
.iv-checks .iv-check { flex: 1 1 auto; }
.iv-case { color: var(--ds-ink-3); font-size: 12px; }
.iv-schedule .inv-table-shell { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.iv-dili-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 4px 16px 8px; }
.iv-dili-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink-2); font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.iv-dili-row input { margin: 2px 0 0; accent-color: #3d85c6; }
.iv-dili-row:has(input:checked) span { color: var(--ds-ink-4); text-decoration: line-through; }
.iv-act { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--ds-line); }
.mo-btn.is-danger { color: var(--ds-red-ink); }
.iv-fine { margin: 0; color: var(--ds-ink-4); font-size: 11.5px; }
/* The assumptions: four even cards, two by two. */
.finance-page.finance-page .iv-editor-wrap .inv-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap); overflow: visible; border: 0; border-radius: 0; background: transparent; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-section { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card); box-shadow: var(--ds-shadow); }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title { min-height: 46px; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--ds-line); }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title > span { width: 24px; height: 24px; border-radius: 7px; background: var(--ds-well); color: var(--ds-ink-2); font-size: 10.5px; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title strong { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title small, .finance-page.finance-page .iv-editor-wrap .inv-field small:not(.fact-explain) { display: none; }
.finance-page.finance-page .iv-editor-wrap .inv-field > .fact-name { display: flex; margin: 0; }
.finance-page.finance-page .iv-editor-wrap .inv-field > .fact-name:has(.fact-explain) { color: var(--ds-ink-2); }
.finance-page.finance-page .iv-editor-wrap .inv-field .fact-explain { display: block; margin: 0; color: var(--ds-ink-3); font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.finance-page.finance-page .iv-editor-wrap .inv-field-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2px 14px 6px; }
.finance-page.finance-page .iv-editor-wrap .inv-editor.is-focus-returns, .finance-page.finance-page .iv-editor-wrap .inv-editor.is-focus-debt, .finance-page.finance-page .iv-editor-wrap .inv-editor.is-focus-risk { grid-template-columns: minmax(0, 1fr); }
/* Markets. */
.mk-rows { flex: 1 1 auto; display: flex; flex-direction: column; }
.mk-row { flex: 1 1 auto; min-height: 46px; display: grid; grid-template-columns: 220px minmax(0, 1fr) 64px 70px; align-items: center; gap: 14px; padding: 0 16px; border-top: 1px solid var(--ds-line-soft); }
.mk-row:first-child { border-top: 0; }
.mk-bar { position: relative; height: 10px; border-radius: 2px; background: var(--ds-well); }
.mk-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #6aa84f; }
.mk-bar i.is-bond { background: #3d85c6; }
.mk-bar i.is-equity, .mk-bar i.is-market { background: #674ea7; }
.mk-bar s { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #3d85c6; text-decoration: none; }
.mk-spread { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mk-spread.is-in { color: var(--ds-green-ink); }
.mk-spread.is-out { color: var(--ds-red-ink); }
.mk-sources a { color: var(--ds-blue-ink); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.mk-sources a:hover { text-decoration: underline; }
.mk-warn span { color: var(--ds-orange-ink) !important; font-size: 12px; }
.mk-table .inv-table-shell { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Markets: the name column has the room, figures are right-aligned in
   columns sized to them, and cells keep the card's 14px inset. */
.mk-table .inv-market-table { min-width: 860px !important; table-layout: fixed; }
.mk-table .inv-market-table col.c-name { width: 26%; }
.mk-table .inv-market-table col.c-kind { width: 12%; }
.mk-table .inv-market-table col.c-rate { width: 10%; }
.mk-table .inv-market-table col.c-when { width: 11%; }
.mk-table .inv-market-table col.c-value { width: 12%; }
.mk-table .inv-market-table col.c-spread { width: 10%; }
.mk-table .inv-market-table col.c-src { width: 7%; }
.mk-table .inv-market-table :is(th, td) { padding-left: 14px; padding-right: 14px; }
.mk-table .inv-market-table td:first-child { padding-right: 20px; }
.mk-table .inv-market-table :is(th, td).is-num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table .inv-market-table td strong { display: block; white-space: normal; line-height: 1.35; }
.finance-page .mk-table .inv-market-table td > strong + small { max-width: none; margin: 2px 0 0; white-space: normal; }
.mk-table .inv-market-table tr.is-off td { color: var(--ds-ink-3); }
@media (max-width: 1240px) { .iv-scen { grid-template-columns: 1fr; } .finance-page.finance-page .iv-editor-wrap .inv-editor { grid-template-columns: 1fr; } .iv-dili-list { grid-template-columns: 1fr; } }
.iv-dot em.is-left { left: auto; right: calc(100% + 6px); }
.iv-list .mo-rows { flex: 1 1 auto; }
.iv-list > .iv-totals, .em-perjob > .mo-rows + * { flex: none; }
.finance-page.finance-page .inv-field .inv-input-wrap { display: flex; align-items: center; justify-content: flex-end; }
.finance-page.finance-page .inv-field .inv-input-wrap input { field-sizing: content; width: auto; flex: 0 1 auto; min-width: 4ch; max-width: 100%; }
.mk-row { grid-template-columns: 270px minmax(0, 1fr) 64px 70px; }
.iv-case b { color: var(--ds-ink); font-weight: 700; }

/* ---------------- Education ---------------- */
.ed-terms i { background: #ececec; }
.ed-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.ed-spark i { flex: 1 1 0; border-radius: 2px 2px 0 0; background: #b7b7b7; }
.ed-spark i.is-up { background: #6aa84f; }
.ed-study { position: absolute; left: 0; top: 0; bottom: 0; border-right: 1px dashed #c9c9c9; background: #f4f4f4; pointer-events: none; }
.ed-study em { position: absolute; left: 8px; top: 6px; color: var(--ds-purple-ink, #674ea7); font-size: 10.5px; font-weight: 600; font-style: normal; }
.ed-value .mo-plot { margin: 12px 16px 26px 56px; }
.ed-scen .mo-rows { display: flex; flex-direction: column; }
.ed-scen-row { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 90px 64px !important; padding: 0 14px; cursor: default; }
.ed-scen-row .mo-mail-subject, .ed-ms .mo-mail-subject, .ed-line .mo-mail-subject, .ed-detail .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.ed-scen-bar { height: 8px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.ed-scen-bar i { display: block; height: 100%; border-radius: 2px; }
.ed-scen-bar i.is-green { background: #6aa84f; } .ed-scen-bar i.is-blue { background: #3d85c6; } .ed-scen-bar i.is-grey { background: #b7b7b7; } .ed-scen-bar i.is-red { background: #cc0000; }
/* Milestones and records: a row is one button plus a remove. */
.ed-ms, .ed-detail { display: grid; grid-template-columns: minmax(0, 1fr) 32px !important; padding: 0 6px 0 0; cursor: default; }
.ed-ms-main { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 96px; align-items: center; gap: 12px; padding: 0 8px 0 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ed-ms-main:hover { background: var(--ds-hover); }
.ed-detail-main { grid-template-columns: 28px minmax(0, 1fr) auto auto 96px; }
.ed-detail-main .fin-edu-logo, .ed-detail-main > :first-child { width: 28px; height: 28px; border-radius: 6px; }
.ed-ms-when { display: flex; flex-direction: column; gap: 1px; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.ed-ms-when em { color: var(--ds-ink-4); font-size: 11.5px; font-weight: 400; font-style: normal; }
.ed-ms-when.is-late { color: var(--ds-red-ink); }
.ed-ms.is-done .mo-mail-subject b { color: var(--ds-ink-4); text-decoration: line-through; }
.ed-ms-del { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ds-ink-4); cursor: pointer; }
.ed-ms-del:hover { background: #f3f3f3; color: var(--ds-red-ink); }
.ed-ms-del .mo-ic { width: 14px; height: 14px; }
/* Money due. */
.ed-due-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 16px 8px; flex: 1 1 auto; }
.ed-due-cols > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ed-due-bar { width: 100%; flex: 1 1 auto; min-height: 70px; display: flex; align-items: flex-end; border-radius: 4px; background: var(--ds-well); overflow: hidden; }
.ed-due-bar i { display: block; width: 100%; border-radius: 4px; background: #e69138; }
.ed-due-cols b { color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ed-due-cols em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.finance-page .ed-due > .ed-due-facts { flex: none; padding: 0 16px 6px !important; border-top: 1px solid var(--ds-line); }
/* Sheets. */
.ed-sheet { display: flex; flex-direction: column; }
.ed-school { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.ed-school > :first-child { flex: none; }
.ed-school > span:not(.rs-tile):not([class*="logo"]) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-school b { overflow: hidden; color: var(--ds-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ed-school em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.finance-page.finance-page.finance-page .ed-sheet .re-facts > label { grid-template-columns: minmax(0, 1fr) auto minmax(136px, 48%); }
/* Lines you edit. */
.ed-lines .ed-line-cols, .ed-line { grid-template-columns: 8px minmax(0, 1fr) 120px 56px 130px 70px !important; }
.ed-line { padding: 0 8px 0 14px; cursor: default; }
.ed-line-cols span:nth-child(4), .ed-line-cols span:nth-child(5) { text-align: right; }
.ed-sure { display: inline-block; width: 64px; height: 6px; margin-right: 6px; border-radius: 2px; background: var(--ds-well); vertical-align: middle; overflow: hidden; }
.ed-sure i { display: block; height: 100%; background: #3d85c6; }
.ed-sure-n { color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.finance-page.finance-page .ed-line-input input { width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; box-shadow: none; }
.finance-page.finance-page .ed-line-input input:hover { background: var(--ds-hover); }
.finance-page.finance-page .ed-line-input input:focus { background: #ffffff; box-shadow: 0 0 0 1px var(--ds-control) inset; outline: none; }
.ed-line-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.ed-lines > .nw-totals { flex: none; }
.ed-sure-bar { position: relative; }
.ed-sure-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.ed-sure-bar i.is-stated { background: #e3e3e3; }
.ed-ranked .mo-rows, .ed-sure-card .mo-rows { display: flex; flex-direction: column; }
.ed-ranked .iv-kind, .ed-sure-card .iv-kind { flex: 1 1 auto; grid-template-columns: 130px minmax(0, 1fr) 88px; }
/* Year by year. */
.ed-year-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; padding: 16px 16px 4px; }
.ed-year { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ed-year-bars { width: 100%; max-width: 160px; height: 110px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; border-bottom: 1px solid var(--ds-line); }
.ed-year-bars i { width: 34%; border-radius: 3px 3px 0 0; }
.ed-year-bars i.is-cost { background: #cc0000; }
.ed-year-bars i.is-fund { background: #6aa84f; }
.ed-year b { margin-top: 4px; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.ed-year em { font-size: 11.5px; font-weight: 600; font-style: normal; }
.ed-year em.is-out { color: var(--ds-red-ink); } .ed-year em.is-in { color: var(--ds-green-ink); }
.ed-year-key { justify-content: flex-end; margin: 0; padding: 4px 16px 12px; }
/* The directory sits as a card like the rest. */
.ed-page .fin-edu-directory { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); }
@media (max-width: 1240px) { .ed-ms-main { grid-template-columns: 80px minmax(0, 1fr) auto 80px; } }
.ed-due-cols > div { justify-content: flex-end; }
.ed-due-bar { flex: 0 1 140px; max-height: 140px; }
.ed-year.is-past .ed-year-bars i { opacity: .35; }
.ed-year.is-past b, .ed-year.is-past em { color: var(--ds-ink-4); }
.ed-year.is-now .ed-year-bars { border-bottom: 2px solid #3d85c6; }
.ed-cal-months { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 14px; }
.ed-cal-month > b { display: block; margin-bottom: 6px; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.ed-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ed-cal-grid em { color: var(--ds-ink-5, #b0b0b0); font-size: 10px; font-style: normal; text-align: center; }
.ed-cal-grid span { height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--ds-ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ed-cal-grid span.is-blue { background: #3d85c6; color: #ffffff; font-weight: 700; }
.ed-cal-grid span.is-orange { background: #e69138; color: #ffffff; font-weight: 700; }
.ed-cal-grid span.is-red { background: #cc0000; color: #ffffff; font-weight: 700; }
.ed-cal-grid span.is-green { background: #dcdcdc; color: var(--ds-green-ink); font-weight: 700; }
.ed-cal-grid span.is-today { box-shadow: inset 0 0 0 1.5px #3d85c6; color: var(--ds-ink); font-weight: 700; }

/* ---------------- Repository and Archive ---------------- */
.rp-list .rp-cols, .rp-row { grid-template-columns: 40px minmax(0, 1fr) 130px 120px 110px 28px; }
.rp-row { padding: 0 14px; min-height: 52px; }
.rp-cols span:nth-child(5) { text-align: right; }
.rp-row .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.rp-row.is-selected { background: #f3f3f3; }
.rp-row.is-focused { box-shadow: inset 0 0 0 1.5px #b7b7b7; }
.rp-type { width: 40px; }
.rp-type.is-pdf { background: #f3f3f3; color: #cc0000; }
.rp-type.is-xlsx { background: #dcdcdc; color: #3f7a2a; }
.rp-type.is-image { background: #f3f3f3; color: #245f97; }
.rp-type.is-task { background: #f3f3f3; color: #674ea7; }
.rp-status { min-width: 0; display: flex; }
.rp-when { font-size: 12.5px; font-weight: 500; }
.rp-spark { height: 30px; }
.rp-cover { padding-bottom: 0; }
.rp-grid { display: grid; grid-template-columns: 150px repeat(var(--m), minmax(0, 1fr)); gap: 4px; align-items: center; padding: 14px 16px 6px; }
.rp-grid > em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; text-align: center; }
.rp-grid > b { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--ds-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rp-grid > b i { width: 8px; height: 18px; flex: none; border-radius: 2px; }
.rp-cell { height: 24px; border: 0; border-radius: 4px; background: #f1f1f1; padding: 0; }
.rp-cell.is-due { background: #dcdcdc; }
.rp-cell.is-on { background: #3d85c6; cursor: pointer; }
.rp-cell.is-on:hover { background: #3d85c6; }
.rp-key { justify-content: flex-end; margin: 0; padding: 6px 16px 12px; }
.rp-side .mo-rows { display: flex; flex-direction: column; }
.rp-side .iv-kind, .rp-side .rp-slip { flex: 1 1 auto; }
.rp-side .iv-check[role="button"] { cursor: pointer; }
.rp-side .iv-check[role="button"]:hover { background: var(--ds-hover); }
.ar-list .ar-cols, .ar-row { grid-template-columns: 40px minmax(0, 1fr) 130px 120px 110px 28px; }
.ar-cols span:nth-child(5) { text-align: right; }
.ar-row:not([role="button"]) { cursor: default; }
/* A removed business is marked as the menu marks it: its own colour, solid,
   at the size of a file's type badge, with its initials. */
.ar-biz-mark { width: 40px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: #ffffff; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }

/* Projection in rows: no side column. */
.pj-levers { position: static; display: block; }
/* The sources run across the width in three columns, sized by their rows. */
.pj-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 0 16px 4px; }
.pj-sources .pj-source { min-width: 0; }
.pj-source-text { min-width: 0; }
.pj-source-text b, .pj-source-text em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pj-levers .mo-seg.pj-scenario button { flex: none; }
.finance-page.finance-page.finance-page.finance-page .pj-assume .pj-assumptions { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 4px 16px 8px; }
.finance-page.finance-page.finance-page.finance-page .pj-assume .pj-assumptions > label { grid-template-columns: minmax(0, 1fr) auto 120px; }
@media (max-width: 1240px) { .finance-page.finance-page.finance-page.finance-page .pj-assume .pj-assumptions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Polish: stat heads keep the label whole; two-bar comparisons size their label column to the longest word. */
.mo-stat-lbl { flex: none; }
.mo-stat-top > .ds-mark { margin-left: auto; }
.mo-balance { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 8px; row-gap: 7px; }
.mo-balance > div { display: contents; }
.mo-balance em { white-space: nowrap; }
.md-entry { grid-template-columns: minmax(0, 1fr) 56px 62px 48px; }
.md-entry > :last-child { justify-self: end; }
.mk-warn span { overflow-wrap: anywhere; }
.finance-page small, .finance-page em { overflow-wrap: break-word; }

/* ---------------- Repository: card view ---------------- */
.rp-cards { padding: 4px 16px 16px; }
.rp-band { display: flex; align-items: center; gap: 8px; padding: 14px 2px 10px; }
.rp-band h4 { color: var(--ds-ink-2); font-size: 13px; font-weight: 600; }
.rp-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rp-card { min-width: 0; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--ds-border); border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 20, 20, .04); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.rp-card:hover { border-color: #d6d6d6; box-shadow: 0 4px 14px rgba(20, 20, 20, .06); }
.rp-card.is-selected { border-color: #b7b7b7; box-shadow: 0 0 0 2px rgba(61, 133, 198, .12); }
.rp-card.is-focused { border-color: #b7b7b7; }
.rp-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* The drawing of the paper. */
.rp-pv { height: 148px; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 0; border-radius: 7px; background: #f4f4f4; overflow: hidden; }
.rp-pv > * { background: #ffffff; }
.rp-pv-head { flex: none; height: 16px; display: flex; align-items: center; padding: 0 8px; border-radius: 4px 4px 0 0; box-shadow: inset 0 3px 0 var(--a); }
.rp-pv-head b { width: 34%; height: 4px; border-radius: 2px; background: #dcdcdc; }
.rp-pv-rows { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.rp-pv-rows span { display: flex; justify-content: space-between; }
.rp-pv-rows i, .rp-pv-rows em { height: 4px; border-radius: 2px; background: #e4e4e4; }
.rp-pv-rows em { background: #cfcfcf; }
.rp-pv-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12px; gap: 2px; padding: 4px; background: #e8e8e8; }
.rp-pv-grid i { background: #ffffff; }
.rp-pv-grid i.is-h { background: #dcdcdc; }
.rp-pv.is-receipt { align-items: center; }
.rp-pv.is-receipt > * { background: transparent; }
.rp-pv-slip { width: 46%; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; border-radius: 4px 4px 0 0; background: #ffffff !important; }
.rp-pv-slip b { width: 50%; height: 5px; margin: 0 auto 4px; border-radius: 2px; background: #cfcfcf; }
.rp-pv-slip i { height: 4px; border-radius: 2px; background: #e4e4e4; }
.rp-pv-slip em { height: 5px; width: 40%; margin-left: auto; border-radius: 2px; background: #cfcfcf; }
.rp-pv-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 8px 0; }
.rp-pv-boxes i { height: 14px; border: 1px solid #e2e2e2; border-radius: 3px; }
.rp-pv-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.rp-pv-lines i { height: 4px; border-radius: 2px; background: #e4e4e4; }
.rp-pv.is-image { padding: 10px; }
.rp-pv.is-image > svg { width: 100%; height: 100%; background: transparent; }
/* Name, source and state. */
.rp-card-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 4px 2px; }
.rp-card-foot .rp-type { width: 34px; height: 20px; font-size: 9px; }
.rp-card-foot > b { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rp-card-who i { display: block; width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #ececec; }
.rp-card-meta { display: flex; align-items: center; gap: 10px; padding: 4px 4px 2px; color: var(--ds-ink-4); font-size: 11.5px; }
.rp-card-meta > b { margin-left: auto; color: var(--ds-ink-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-pv.is-task > .rp-pv-task { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 8px 12px; border-radius: 4px 4px 0 0; }
.rp-pv-task span { display: flex; align-items: center; gap: 8px; }
.rp-pv-task b { width: 10px; height: 10px; flex: none; border: 1.5px solid #cfcfcf; border-radius: 3px; }
.rp-pv-task b.is-done { border-color: #674ea7; background: #674ea7; }
.rp-pv-task i { height: 4px; border-radius: 2px; background: #e4e4e4; }
.ar-card:not([role="button"]) { cursor: default; }
.rp-grid-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rp-card-meta > span { white-space: nowrap; }
.rp-card-meta .ds-mark { min-width: 0; }

/* Real previews: the front of the file itself. */
.rp-pv { position: relative; }
/* The file itself, whole and centred on the grey ground with the same 10px
   all round, whatever its shape: a tall receipt, a wide photo, a page. */
/* Every tile shows its file the same way: the file fills the frame's width,
   14px in from the top and sides, and runs off the bottom edge, so the top
   of a receipt, page or photo is always large enough to read. */
.rp-pv.is-real { padding: 14px 14px 0; background: #f2f2f2; }
.rp-pv.is-real img { position: absolute; top: 14px; left: 14px; display: block; width: calc(100% - 28px); height: auto; min-height: calc(100% - 14px); max-width: none; margin: 0; object-fit: cover; object-position: top center; border-radius: 4px 4px 0 0; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06); }
.rp-pv.is-table { padding: 14px 14px 0; }
/* An email or a closed task is drawn on the same white sheet. */
.rp-pv.is-sheet { padding: 14px 14px 0; background: #f2f2f2; }
.rp-pv-sheet { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 4px 4px 0 0; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06); }
.rp-pv-sheet > b { color: var(--ds-ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.rp-pv-sheet > em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rp-pv-sheet > i { height: 4px; border-radius: 2px; background: #ececec; }
.rp-pv-sheet > i:first-of-type { margin-top: 6px; }
.rp-pv-table { width: 100%; border-collapse: collapse; background: #ffffff; font-size: 8.5px; line-height: 1.3; table-layout: fixed; }
.rp-pv-table th, .rp-pv-table td { padding: 2px 4px; overflow: hidden; border: 1px solid #ececec; color: var(--ds-ink-3); white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.rp-pv-table th { background: #f7f7f7; color: var(--ds-ink-2); font-weight: 600; }
.rp-pv.is-empty, .rp-pv.is-loading { align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.rp-pv-ext { padding: 3px 8px; border-radius: 5px; background: #ffffff; color: var(--ds-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.rp-pv.is-empty em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rp-pv.is-loading { background: linear-gradient(90deg, #f4f4f4 0%, #fafafa 50%, #f4f4f4 100%); background-size: 200% 100%; animation: rp-shimmer 1.2s linear infinite; }
@keyframes rp-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.rp-pv.is-note { justify-content: center; gap: 6px; padding: 14px 16px; }
.rp-pv.is-note b { color: var(--ds-ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.rp-pv.is-note em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rp-pv.is-note > * { background: transparent; }

/* Card view without a container: heading row, then the cards on the page. */
.rp-files { display: flex; flex-direction: column; }
.rp-cards.is-bare { padding: 0; }
.rp-cards.is-bare .rp-band:first-child { padding-top: 10px; }
.rp-seg-tools { display: inline-flex; gap: 6px; margin-right: 6px; }
.rp-empty { padding: 18px 2px; color: var(--ds-ink-4); font-size: 12.5px; }
.rp-side-wide .rp-side .mo-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.rp-side-wide .rp-side .mo-band-hd { grid-column: 1 / -1; }

/* ================================================================
   Polish: one height logic for the whole system.
   ================================================================ */
/* 1. Summary cards in a row share the same lines: title, figure, note and the visual's baseline.
      Each card spans four rows of the summary grid (subgrid), so a longer note or a taller
      visual in one card moves the line for all four. */
.mo-stats:not(:has(> :not(.mo-stat))) { grid-auto-rows: auto; }
.mo-stats:not(:has(> :not(.mo-stat))) > .mo-stat { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-height: 0; }
.mo-stats:not(:has(> :not(.mo-stat))) > .mo-stat > .mo-stat-foot { margin-top: 0; }
/* The visual sits on a shared baseline; its caption (legend or ends) sits under it. */
.mo-stat-foot { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-top: 14px; }
.mo-stat-foot > :first-child { align-self: end; }
.mo-stat-foot > :nth-child(2) { align-self: start; }
/* A visual without a caption keeps the caption's room, so thin bars line up across cards. */
.mo-stat-foot:has(> :only-child:is(.mo-split, .iv-years, .ed-spark, .dl-ruler, .mo-tiles, .nw-months, .in-fill)) { padding-bottom: 23px; }
.mo-stat-foot:empty { padding: 0; }
/* One thickness for thin bars. */
.iv-years { height: 10px; }
.ed-spark { height: 30px; justify-content: flex-start; }
.ed-spark i { max-width: 22px; }

/* 2. A short list beside a taller card spreads its rows to fill the card instead of leaving
      a blank strip; an empty list centres its message. */
:is(.dl-row, .ac-pair) > .mo-card > .mo-rows { display: flex; flex-direction: column; }
.mo-rows:has(> :only-child:is(.nw-none, .mo-empty)) { display: flex; align-items: center; justify-content: center; }
.mo-rows > .nw-none:only-child { padding: 24px; text-align: center; }

/* 3. Activity: each account as a card on the page, like the account cards. */
.ac-accts { display: flex; flex-direction: column; }
.ac-acct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 8px; }
.ac-acct-grid .ac-acct { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-rows: auto 34px; row-gap: 10px; min-height: 0; padding: 14px; border: 1px solid var(--ds-border); border-top: 1px solid var(--ds-border); border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 20, 20, .04); }
.ac-acct-grid .ac-acct:first-child { border-top: 1px solid var(--ds-border); }
.ac-acct-grid .ac-acct:hover { border-color: #d6d6d6; background: #ffffff; }
.ac-acct-grid .ac-acct > svg { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 34px; }
.ac-acct-grid .ac-acct-fig { grid-column: 3; grid-row: 1; }

/* 4. Health: what is recorded in two columns, then the checks, each full width. */
.hl-coverage .mo-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
.hl-coverage .mo-rows > .hl-cover:nth-child(2) { border-top: 0; }
.hl-coverage .mo-rows > .hl-cover:nth-child(odd) { border-right: 1px solid var(--ds-line-soft); }
/* Fact lists inside a stretched card spread their lines instead of leaving a blank strip. */
.dl-path { flex-direction: column; }
.dl-path > .dl-fact { flex: 1 1 auto; max-height: 52px; align-items: center; }
.dl-measures .dl-measure-list { display: flex; flex-direction: column; }
.dl-measures .dl-measure-list > * { flex: 1 1 auto; max-height: 80px; }
.re-page > .re-schedules .re-schedule-body { max-height: 460px; }
.dl-row > .mo-card > div:last-child:has(> .ex-recent-row) { display: flex; flex-direction: column; }

/* ---------------- Card collections (one component, see cardGroup) ---------------- */
.cg { display: flex; flex-direction: column; gap: 8px; }
.cg-head .fin-seg-right { display: flex; align-items: center; gap: 10px; }
.cg-tools { display: inline-flex; align-items: center; gap: 6px; }
.cg .rp-band { padding: 8px 2px 0; }
.cg .fin-card-grid.cg-grid:not(.is-collapsed) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cg .fin-card-grid.is-collapsed > * { flex: 0 0 calc(25% - 10px); }
.cg .fin-estate-card { min-height: 0; }
.ac-accts .ac-acct { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-rows: auto 34px; row-gap: 10px; min-height: 0; padding: 14px; border: 1px solid #e5e5e5; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 6px 18px rgba(20, 20, 20, .035); }
.ac-accts .ac-acct:hover { border-color: #d6d6d6; background: #ffffff; }
.ac-accts .ac-acct > svg { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 34px; }
.ac-accts .ac-acct-fig { grid-column: 3; grid-row: 1; }
.rp-card { border-color: #e5e5e5; border-radius: 8px; box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 6px 18px rgba(20, 20, 20, .035); }
/* The add card takes the row's height from the cards beside it. */
.rp-add { min-height: 0; }
/* Every tile's ··· sits on the picture's top right and shows on hover. */
.rp-card { position: relative; }
.rp-card > .item-more-wrap { position: absolute; top: 14px; right: 14px; z-index: 5; }
.rp-card > .item-more-wrap .item-more { background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.rp-card:hover .item-more, .rp-card:focus-within .item-more { opacity: 1; }
.rp-card:has(.item-more-pop) { z-index: 40; }

/* ---------------- Graphs: data in full colour, context in grey ---------------- */
.mo-a-equity, .mo-a-rent { opacity: 1; }
.mo-a-inflation { fill: #ececec; }
.mo-l-inflation { fill: none; stroke: #cc0000; stroke-width: 1.5; }
.mo-glegend i.is-inflation { background: #ececec; box-shadow: inset 0 2px 0 #cc0000; }
.mo-a-band { fill: rgba(0, 0, 0, .06); }
.mo-a-soft { fill: rgba(0, 0, 0, .04); }
.mo-glegend i.is-band { background: rgba(0, 0, 0, .1); }
.mo-l-top { stroke: #3d85c6; }
.em-term.is-ended { background: #e3e3e3; }
.em-term.is-ended em { color: var(--ds-ink-3); }
.em-term.is-future { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--c); }
.em-term.is-future em { color: var(--c); }
.re-value .mo-plot { margin: 14px 64px 28px 56px; }
.re-end { position: absolute; right: -60px; transform: translateY(-50%); color: var(--ds-ink); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------- No boxes inside boxes ----------------
   Inside a card, sections are separated by lines, never by another rounded, bordered box.
   Controls (buttons, fields, marks) keep their own shape; content containers do not. */
.finance-page :is(.mo-card, .fin-workspace-card, .fin-chart-card) :is(.fin-module-empty, .fin-input-group, .fin-chart-card, .fin-workspace-card, .fin-edu-institution-card, .fin-edu-detail-card, .fin-recent-doc-row, .inv-empty, .fin-doc-empty) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent;
}
.finance-page .fin-module-empty { min-height: 0; padding: 28px 16px; }
.finance-page .fin-module-empty span { font-size: 12px; }
.finance-page .fin-module-empty button { border-radius: 7px; font-size: 12px; padding: 6px 12px; }
/* Option tiles become columns of one card, divided by lines. */
.ex-options { gap: 0; padding: 0; }
.ex-option { border: 0 !important; border-radius: 0 !important; border-left: 1px solid var(--ds-line-soft) !important; background: transparent; box-shadow: none !important; padding: 16px; }
.ex-option:first-child { border-left: 0 !important; }
.ex-option:hover { background: var(--ds-hover); }
.ex-mock { border: 0 !important; border-radius: 4px; }
/* A text field inside a card is a field, drawn like the other fields: a line, not a box. */
.finance-page .mo-card .fin-estate-matchers { border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: var(--ds-hover); }
.finance-page .mo-card .fin-estate-matchers:focus { outline: none; border-bottom-color: #3d85c6; background: #ffffff; }

/* ---------------- Employment: one panel per job ---------------- */
.em-jobs-list { display: flex; flex-direction: column; gap: var(--ds-gap); }
.em-jobp-hd { gap: 10px; }
.em-jobp-hd h3 { margin-left: 2px; }
.em-jobp-toggle { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border: 0; border-radius: 6px; background: transparent; color: var(--ds-ink-3); cursor: pointer; }
.em-jobp-toggle:hover { background: var(--ds-hover); color: var(--ds-ink); }
.em-jobp-toggle svg { width: 14px; height: 14px; }
.em-jobp-figs { border-bottom: 0; }
.em-jobp.is-open .em-jobp-figs { border-bottom: 1px solid var(--ds-line); }
.em-jobp-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.em-tcol { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--ds-line-soft); }
.em-tcol:first-child { border-left: 0; }
.em-tcol-hd { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--ds-line-soft); }
.em-tcol-hd b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.em-tcol-gross { margin-left: auto; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.em-tcol-hd .ed-ms-del { margin-right: -6px; }
.finance-page.finance-page.finance-page .em-tcol .re-facts { padding: 0 16px 8px; }
.finance-page.finance-page.finance-page .em-tcol .re-facts > label:last-child { border-bottom: 0; }
.em-tcol-src { padding: 0 16px 12px; color: var(--ds-ink-4); font-size: 11.5px; }
.em-warn { display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px; color: var(--ds-ink-3); font-size: 12px; }
.iv-scen { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.iv-scen-top { gap: 8px; }
.iv-scen-top b { margin-right: auto; }
.iv-scen-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.iv-scen-card:hover .iv-scen-acts, .iv-scen-card:focus-within .iv-scen-acts { opacity: 1; }
.iv-scen-add { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; border: 1px dashed #d6d6d6; border-radius: var(--ds-radius); background: transparent; color: var(--ds-ink-3); font: inherit; text-align: left; cursor: pointer; }
.iv-scen-add:hover { border-color: #b8b8b8; color: var(--ds-ink); }
.iv-scen-add span { font-size: 18px; line-height: 1; }
.iv-scen-add b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.iv-scen-add em { font-size: 12px; font-style: normal; }

/* ---------------- Reminders ---------------- */
.rm-row { grid-template-columns: 24px 74px minmax(0, 1fr) 110px auto 84px 96px !important; }
.rm-list .rm-row, .rm-preview .rm-row { grid-template-columns: 24px 70px minmax(0, 1fr) auto 72px 90px !important; }
.rm-row.is-done .mo-mail-subject b { color: var(--ds-ink-4); text-decoration: line-through; }
.rm-remind { color: var(--ds-ink-4); font-size: 11.5px; white-space: nowrap; }
.rm-amount { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rm-acts { gap: 4px; }
.rm-composer { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 150px auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ds-line); }
.rm-composer input[type="text"] { height: 32px; border: 0; background: transparent; font: inherit; font-size: 13px; outline: none; }
.rm-new-date { position: relative; }
.rm-days { display: flex; align-items: flex-end; gap: 6px; height: 34px; }
.rm-days span { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.rm-days i { width: 100%; max-width: 26px; border-radius: 2px 2px 0 0; background: #e3e3e3; }
.rm-days i.is-on { background: #3d85c6; }
.rm-days em { color: var(--ds-ink-4); font-size: 10px; font-style: normal; }
.iv-years i.is-late { background: #cc0000; }
.rm-cal .ed-cal-grid span { height: 30px; font-size: 12px; }
.rm-cal-key { justify-content: flex-end; margin: 0; }
.rm-cal-key b { margin-right: 3px; color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* This month in the side column; this month and the next two when the card runs the full width. */
.rm-cal .ed-cal-month > b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rm-cal .ed-cal-month > b em { color: var(--ds-ink-3); font-size: 12px; font-style: normal; font-weight: 400; }
.dl-row:not(.is-stacked) .rm-cal .ed-cal-month:not(:first-child) { display: none; }
.dl-row.is-stacked .rm-cal .rm-cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; padding: 14px 20px 16px; }
.rm-area .fin-card-top { gap: 10px; }
.rm-area .fin-card-value small { margin-left: 4px; color: var(--ds-ink-4); font-size: 12px; font-weight: 500; }
.rm-area .fin-card-foot span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rm-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap); align-items: stretch; }
.rm-rule { display: flex; flex-direction: column; }
.rm-rule.is-off .rm-sentence, .rm-rule.is-off .rm-preview { opacity: .45; }
.rm-sentence { margin: 0; padding: 14px 16px 12px; color: var(--ds-ink-2); font-size: 14px; line-height: 2.1; }
.rm-num { width: 52px; height: 28px; margin: 0 2px; padding: 0 6px; border: 0; border-bottom: 1.5px solid #3d85c6; border-radius: 0; background: #f3f3f3; color: var(--ds-blue-ink); font: inherit; font-weight: 700; text-align: center; }
.rm-num:focus { outline: none; background: #ffffff; }
.rm-preview { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; }
.rm-preview-lbl { color: var(--ds-ink-4); font-size: 11.5px; }
.rm-preview .rm-row { border: 1px dashed #dcdcdc; border-radius: 8px; cursor: default; }
/* A rule's preview sits in a half-width card: its area is the card's own, so the
   title takes that room and wraps onto a second line rather than being cut. */
.rm-rule .rm-preview .rm-row.mo-mail { grid-template-columns: 24px minmax(0, 1fr) auto 72px 104px !important; padding-top: 8px; padding-bottom: 8px; }
.rm-preview .rm-row .mo-mail-from { display: none; }
.rm-preview .rm-row .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.rm-preview .rm-row .mo-mail-subject b { max-width: 100%; white-space: normal; line-height: 1.35; }
.rm-preview .rm-row .mo-mail-subject em { max-width: 100%; white-space: nowrap; }
.rm-preview .rm-acts { display: none; }
.rm-switch { position: relative; min-height: 0; border: 0; gap: 0; cursor: pointer; }
.rm-own-row { grid-template-columns: minmax(0, 1fr) 30px !important; padding: 0 0 0 2px; min-height: 40px; cursor: default; }
.mo-mail-tile.tone-blue { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-tile.tone-purple { background: var(--ds-well); color: var(--ds-ink-2); }
.mo-mail-tile.tone-grey { background: var(--ds-well); color: var(--ds-ink-3); }
.rm-row .mo-mail-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.rm-row .mo-mail-when b { font-size: 12.5px; }
.rm-row .mo-mail-when em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rm-list .rm-row, .rm-preview .rm-row { grid-template-columns: 24px 70px minmax(0, 1fr) auto 72px 104px !important; }
.rm-preview .rm-row { border: 0; border-top: 1px solid var(--ds-line-soft); border-radius: 0; padding-left: 0; padding-right: 0; }
.nw-goal { grid-template-columns: minmax(0, 1fr) 220px 120px 130px !important; padding: 0 14px; min-height: 52px; }
.nw-goal .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.nw-goal-bar { height: 8px; border-radius: 2px; background: var(--ds-well); overflow: hidden; }
.nw-goal-bar i { display: block; height: 100%; border-radius: 2px; background: #3d85c6; }
.nw-goal-fig { display: flex; flex-direction: column; align-items: flex-end; }
.nw-goal-fig b { color: var(--ds-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-goal-fig em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.nw-goal .ds-mark { justify-self: end; }

/* ---------------- Old module cards drawn as current cards ----------------
   Every remaining old panel (school directory, Decision Lab panels, records) uses the
   same card, head and buttons as the rest of the platform. */
.finance-page .fin-workspace-card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card); box-shadow: var(--ds-shadow); overflow: clip; }
.finance-page .fin-workspace-card > .fin-module-head { min-height: 46px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px 0 16px; border-bottom: 1px solid var(--ds-line); flex-wrap: nowrap; }
.finance-page .fin-workspace-card > .fin-module-head > div:first-child > strong { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.finance-page .fin-workspace-card > .fin-module-head > div:last-child:not(:first-child) { margin-left: auto; }
.finance-page .fin-small-btn { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--ds-control); border-radius: 7px; background: #ffffff; color: var(--ds-ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; box-shadow: none; }
.finance-page .fin-small-btn:hover { background: #f7f7f7; color: var(--ds-ink); }
.finance-page .fin-small-btn.primary { border-color: #cfcfcf; color: var(--ds-ink); font-weight: 600; }
/* The school directory: a toolbar of fields, then results as a flat grid. */
.finance-page .fin-edu-directory-toolbar { gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--ds-line-soft); background: transparent; }
.finance-page .fin-edu-directory-toolbar label { color: var(--ds-ink-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.finance-page .fin-edu-directory-toolbar :is(input, select) { height: 34px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: var(--ds-hover); box-shadow: none; font-size: 13px; }
.finance-page .fin-edu-directory-toolbar :is(input, select):focus { outline: none; border-bottom-color: #3d85c6; background: #ffffff; }
.finance-page .fin-edu-directory-toolbar button { align-self: end; }
.finance-page .fin-edu-directory-meta { padding: 10px 16px; color: var(--ds-ink-4); font-size: 11.5px; }
.finance-page .fin-edu-directory-foot { padding: 12px 16px; border-top: 1px solid var(--ds-line-soft); color: var(--ds-ink-4); font-size: 11.5px; line-height: 1.5; }
.finance-page .fin-edu-directory-pagination { padding: 10px 16px; border-top: 1px solid var(--ds-line-soft); }
.finance-page .re-addr .fin-addr-input { height: 34px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: var(--ds-hover); box-shadow: none; padding: 0 10px; font-size: 13px; }
.finance-page .re-addr .fin-addr-input:focus { outline: none; border-bottom-color: #3d85c6; background: #ffffff; }

/* ---------------- Padding: content never leaves the card's padding ----------------
   Summary cards share rows (subgrid) but their single column is the card's width,
   so a long mark or a wide strip shortens with "…" inside the padding instead of
   pushing past it. */
.mo-stats:not(:has(> :not(.mo-stat))) > .mo-stat { grid-template-columns: minmax(0, 1fr); }
.mo-stat > * { min-width: 0; max-width: 100%; }
.mo-stat-top { overflow: hidden; }
.mo-stat-foot > * { min-width: 0; }
.mo-legend { min-width: 0; }
.mo-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- Visual grammar applied ---------------- */
/* Meters: a fill on a full-width track. */
.dl-ruler { background: var(--viz-track); }
.dl-ruler i { background: var(--viz-fill); }
.mo-balance span, .fo-cost-bar, .ed-scen-bar, .nw-goal-bar, .mk-bar, .rp-cell, .iv-mini span { background: var(--viz-track); }
.pj-range-track > i { background: var(--viz-track); }
.iv-scale-track { background: var(--viz-track); }
.mo-lanes i { background: var(--viz-track); }
/* Bridges: every row carries the full track, so each step reads against the whole. */
.re-bridge-bar { border-radius: 2px; background: var(--viz-track); }
.re-bridge-bar i.is-in { background: var(--viz-in); }
.re-bridge-bar i.is-out { background: var(--viz-out); }
.re-bridge-bar i.is-net { background: var(--viz-fill-strong); }
/* Units (squares): filled squares in colour, the rest as track; squares never stretch into blocks. */
.iv-years { justify-content: flex-start; }
.iv-years i { max-width: 26px; background: var(--viz-track); }
.iv-years i.is-back { background: var(--viz-fill); }
.re-dollar i.is-cost { background: var(--viz-track); }
.hl-meter-bar span, .dl-sources span { background: var(--viz-track); box-shadow: none; }
.hl-meter-bar span.is-ready, .dl-sources span.is-ready { background: var(--viz-fill); }
/* Columns: each column stands in its own track slot; the current one is darker. */
.mo-month-bar { background: var(--viz-track); border-radius: 2px 2px 0 0; }
.mo-month-bar i, .mo-months.fo-kept .mo-month-bar i { background: var(--viz-fill); }
.mo-month.is-now .mo-month-bar i { background: var(--viz-fill-strong); }
.ed-spark { align-items: stretch; gap: 4px; height: 34px; }
.ed-spark .slot { position: relative; flex: 1 1 0; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 2px 2px 0 0; background: var(--viz-track); }
.ed-spark .slot i { display: block; width: 100%; max-width: none; border-radius: 2px 2px 0 0; background: var(--viz-fill); }
.ed-spark .slot i.is-up { background: var(--viz-fill); }
.ed-spark .slot em { position: absolute; left: 0; right: 0; bottom: -15px; color: var(--ds-ink-4); font-size: 10px; font-style: normal; text-align: center; }
.ed-spark:has(em) { margin-bottom: 15px; }
/* Tax brackets: the bracket in colour, your bracket marked. */
.md-stair-bar { background: var(--viz-fill); }
.md-stair-bar i.is-fed { background: var(--viz-fill-strong); }
.md-stair.is-yours .md-stair-bar { background: var(--viz-attn); }
.md-stair.is-yours .md-stair-bar i.is-fed { background: #c6522f; }
/* Selection and attention states in colour, not grey. */
.rp-cell.is-due { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--viz-attn); }
.rp-card.is-selected, .rp-card.is-focused, .iv-scen-card.is-on { border-color: var(--viz-fill); }
.rp-type.is-xlsx { background: var(--ds-green-bg); color: var(--ds-green-ink); }
.ed-cal-grid span.is-green { background: var(--ds-green-bg); }
/* Single-line text that runs long ends in "…" inside the padding (legends, card tops, results). */
.mo-legend { flex-wrap: nowrap; }
.mo-legend span { display: inline-block; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mo-legend span:first-child { flex-shrink: 0.4; }
.mo-legend span i { display: inline-block; margin-right: 5px; vertical-align: 0; }
.finance-page .fin-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.finance-page .fin-card-top > strong { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finance-page .fin-card-top > span:not(.fin-dot):not(.mo-mail-tile) { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finance-page .fin-card-foot { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.finance-page .fin-card-foot > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finance-page .fin-edu-institution-card > span { min-width: 0; }
.finance-page .fin-edu-institution-card > span > * { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-spark .slot i { flex: none; }
/* Columns everywhere stand in a track slot (cash per account, money out, months). */
.mo-col-bar { background: var(--viz-track); border-radius: 2px 2px 0 0; }
/* In/out by day: each day a track slot; money in above the line, out below. */
.ac-mirror span { background: var(--viz-track); border-radius: 2px; }
.ac-mirror span.is-empty { background: var(--viz-track); }
.ac-mirror i.is-out { background: var(--viz-out); }
.ac-mirror i.is-in { background: var(--viz-in); }
.ac-mirror::before { z-index: 1; border-top-color: #ffffff; }
.in-strip i { background: var(--viz-track); }
.in-strip .is-done i { background: var(--viz-fill); }
/* A month's line sits flat along a square bottom edge, never bent round a corner. */
.in-strip .is-missing i { border-radius: 2px 2px 0 0; background: linear-gradient(to top, var(--viz-out) 3px, var(--viz-track) 3px); box-shadow: none; }
.in-strip .is-now i { outline: 0; border-radius: 2px 2px 0 0; background: linear-gradient(to top, var(--ds-ink) 3px, var(--viz-track) 3px); box-shadow: none; }
.in-strip .is-now.is-done i { background: linear-gradient(to top, var(--ds-ink) 3px, var(--viz-fill) 3px); }
.in-strip .is-now.is-missing i { background: linear-gradient(to top, var(--viz-out) 3px, var(--viz-track) 3px); }
/* "Yours" is derived from what you own less what you owe: drawn as the fill colour, outlined, never a loud pattern. */
.nw-block.is-yours { background: var(--viz-fill); box-shadow: none; }
.nw-block.is-yours, .nw-block.is-yours * { color: #ffffff !important; }
.in-fill { background: var(--viz-track); }
/* Pay by month: each month a track slot; the expected pay is a dashed target, what was paid fills it;
   a month with nothing recorded is underlined in red, as in the strip above. */
.in-month-bars { background: linear-gradient(to right, transparent 21%, var(--viz-track) 21%, var(--viz-track) 79%, transparent 79%); border-radius: 4px 4px 0 0; }
.in-month.is-missing .in-month-bars::after { border-bottom: 3px solid var(--viz-out); left: 21%; right: 21%; }
/* The legend shows the same colours as the bars it explains. */
.md-tax-key i.is-fed { background: var(--viz-fill-strong); }
.md-tax-key i.is-on { background: var(--viz-fill); }
.iv-map-area { background: #fafafa; }
.mo-plot-empty { position: absolute; left: 50%; top: 40%; z-index: 3; transform: translate(-50%, -50%); padding: 8px 12px; border-radius: 8px; background: #ffffff; color: var(--ds-ink-3); font-size: 12.5px; white-space: nowrap; }
.rt-stage-bar { background: var(--viz-track); }
.in-table .in-row { padding-right: 16px; }
.pj-scen-row { padding: 12px 14px 4px; }
.pj-scen-row .mo-seg { display: flex; width: 100%; }
.pj-scen-row .mo-seg button { flex: 1 1 0; justify-content: center; }
.mo-ends { gap: 10px; min-width: 0; }
.mo-ends span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Paired cards that cannot share a height without empty space stack full
   width (balanceRows in finance.js); inputs then spread across the width. */
.dl-row.is-stacked { grid-template-columns: minmax(0, 1fr) !important; }
.dl-row.is-stacked > .mo-card > .fin-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px; }
.fit-more { align-self: flex-start; }
/* An empty foot holds only its note, inside the card's padding like every
   other foot, even where the drawing it replaces ran edge to edge. */
.mo-stat > .mo-stat-foot.is-empty { display: flex; align-items: flex-end; margin: 0; padding: 14px 0 0; }
.mo-stat > .mo-stat-foot.is-empty > .mo-foot-empty { align-self: flex-end; }
.mo-foot-empty { margin: 0; color: var(--ds-ink-4); font-size: 12px; }
/* A calendar given the full width shows its months side by side. */
.dl-row.is-stacked .ed-cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 28px; }
/* The currency sign sits against its amount. */
.finance-page.finance-page .inv-field .inv-input-wrap input { padding-left: 3px; }
.finance-page.finance-page .inv-field .inv-input-wrap b { padding-right: 0; }
/* Second lines in table cells stay on one line and end in "…"; the whole
   note is on hover. */
.finance-page .fin-table td small { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A job's own facts are few: they run across the top of the open panel, and
   its terms sit side by side beneath, so no column is left half empty. */
.em-jobp-body > .em-tcol:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--ds-line-soft); }
.finance-page.finance-page.finance-page .em-jobp-body > .em-tcol:first-child .re-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.finance-page.finance-page.finance-page .em-jobp-body > .em-tcol:first-child .re-facts > label { border-bottom: 0; }
.em-jobp-body > .em-tcol:nth-child(2) { border-left: 0; }
/* A month still missing is outlined in the attention colour, as on the
   statements grid. */
.iv-years i.is-gap { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--viz-attn); }
/* Terms fill the panel's width: one term spreads its facts across. */
.em-jobp-body { display: flex; flex-wrap: wrap; }
.em-jobp-body > .em-tcol { flex: 1 1 320px; }
.em-jobp-body > .em-tcol:first-child { flex-basis: 100%; }
.finance-page.finance-page.finance-page .em-jobp-body > .em-tcol:nth-child(2):last-child .re-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }

/* ================================================================
   Record sheet (openHoldingSheet): one wide sheet per thing you own or
   owe. Head with the tile and the name, three columns of fact rows,
   details of your own, notes; nothing boxed.
   ================================================================ */
.rs-overlay .modal.rs-sheet {
  width: min(980px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--ds-border); border-radius: 12px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 48px rgba(0, 0, 0, .12);
}
.rs-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ds-line); }
.rs-tile { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--ds-well); color: var(--ds-ink-2); }
.rs-tile .mo-ic { width: 18px; height: 18px; }
.rs-title { min-width: 0; }
.rs-name { width: 100%; height: 30px; padding: 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: var(--ds-ink); font: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.rs-name::placeholder { color: var(--ds-ink-5); font-weight: 500; }
.rs-name:focus { border-bottom-color: var(--f-focus, #2563eb); }
.rs-title p { margin: 2px 0 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.rs-close { align-self: start; }
.rs-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 18px; }
.rs-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.rs-col, .rs-wide { min-width: 0; }
.rs-body h4 { display: flex; align-items: center; gap: 6px; margin: 16px 0 2px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.finance-page.finance-page .rs-facts, .rs-sheet .rs-facts.fin-input-grid { display: grid; grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; column-gap: 0; }
.rs-sheet .rs-facts > label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 52%); align-items: center; gap: 0 10px; min-height: 40px; margin: 0; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink-3); font-size: 12.5px; }
.rs-sheet .rs-facts > label.has-suffix { grid-template-columns: minmax(0, 1fr) minmax(96px, 52%) 14px; }
.rs-sheet .rs-facts > label > :is(input, select) { width: 100%; height: 30px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px; font-weight: 500; text-align: right; outline: 0; }
.rs-sheet .rs-facts > label > :is(input, select):hover { box-shadow: inset 0 -1px 0 #d4d4d4; }
.rs-sheet .rs-facts > label > :is(input, select):focus { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.rs-sheet .rs-facts > label > input::placeholder { color: var(--ds-ink-5); font-weight: 400; }
.rs-extras { display: flex; flex-direction: column; }
.rs-extra { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--ds-line-soft); }
.rs-extra input { height: 30px; padding: 0 2px; border: 0; background: transparent; color: var(--ds-ink); font: inherit; font-size: 13px; outline: 0; }
.rs-extra input:first-child { color: var(--ds-ink-3); }
.rs-extra input:focus { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.rs-extra-add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 34px; padding: 0 2px; border: 0; background: transparent; color: var(--ds-ink-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.rs-extra-add:hover { color: var(--ds-ink); }
.rs-extra-add .mo-ic { width: 13px; height: 13px; }
.rs-note { display: block; width: 100%; min-height: 64px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--ds-line-soft); background: transparent; color: var(--ds-ink); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; outline: 0; }
.rs-note:focus { border-bottom-color: var(--f-focus, #2563eb); }
.rs-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ds-line); }
.rs-foot-space { flex: 1 1 auto; }
.rs-remove { color: var(--ds-red-ink); }
.rs-sheet .fin-input-grid.rs-facts { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.rs-sheet .rs-facts.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px; }

/* ================================================================
   Every dialog in the record sheet's language (one rule for all the
   shared .modal dialogs): a quiet sheet, fact rows with the label at the
   left and a text-like value at the right, hairlines, an underline on
   focus, outlined buttons and "Remove" in red text.
   ================================================================ */
.modal-overlay .modal:not(.rs-sheet) { width: min(720px, calc(100vw - 48px)); border: 1px solid var(--ds-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 48px rgba(0, 0, 0, .12); }
.modal-overlay .modal.modal-wide:not(.rs-sheet) { width: min(860px, calc(100vw - 48px)); }
.modal-overlay .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ds-line); }
.modal-overlay .modal-title-text { color: var(--ds-ink); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.modal-overlay .modal-heading p { margin-top: 3px; color: var(--ds-ink-4); font-size: 12px; }
.modal-overlay .modal-body { padding: 4px 20px 14px; }
.modal-overlay .modal-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 58%); align-items: center; gap: 0 12px; min-height: 42px; margin: 0; border-bottom: 1px solid var(--ds-line-soft); }
.modal-overlay .modal-field > * { min-width: 0; }
.modal-overlay .modal-label { margin: 0; overflow: hidden; color: var(--ds-ink-3); font-size: 12.5px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.modal-overlay .modal-label > span { margin-left: 4px; color: var(--ds-ink-5); font-size: 11px; font-weight: 400; }
.modal-overlay .modal-error { grid-column: 1 / -1; margin: 0 0 6px; }
.modal-overlay .modal-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.modal-overlay :is(.modal-select, .modal-date-input, .modal-title-input, .modal-input, .modal-field > input:not([type="checkbox"]):not([type="radio"]), .modal-field > select) {
  width: 100%; min-height: 30px; height: 30px; padding: 0 2px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  color: var(--ds-ink); font: inherit; font-size: 13px; font-weight: 500; text-align: right; outline: 0;
}
.modal-overlay .modal-select { padding-right: 18px; background-position: right 2px center; text-align-last: right; }
.modal-overlay :is(.modal-select, .modal-date-input, .modal-title-input, .modal-input):hover { box-shadow: inset 0 -1px 0 #d4d4d4; }
.modal-overlay :is(.modal-select, .modal-date-input, .modal-title-input, .modal-input):focus { border: 0; box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.modal-overlay :is(.modal-select, .modal-date-input, .modal-title-input, .modal-input)::placeholder { color: var(--ds-ink-5); font-weight: 400; }
/* Notes and other long text run the full width under their label. */
.modal-overlay .modal-field:has(> textarea) { grid-template-columns: minmax(0, 1fr); padding: 10px 0 8px; }
.modal-overlay .modal-field:has(> textarea) .modal-label { margin-bottom: 4px; }
.modal-overlay :is(.modal-note-input, .modal-field > textarea) { width: 100%; min-height: 64px; padding: 6px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px; line-height: 1.5; outline: 0; }
.modal-overlay :is(.modal-note-input, .modal-field > textarea):focus { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.modal-overlay .modal-advanced { margin: 6px 0 0; border: 0; border-radius: 0; background: transparent; }
.modal-overlay .modal-advanced summary { min-height: 40px; padding: 0; border-bottom: 1px solid var(--ds-line-soft); }
.modal-overlay .modal-advanced summary span { color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.modal-overlay .modal-advanced-body { padding: 0; border-top: 0; background: transparent; }
.modal-overlay .inst-picker { border: 0; border-radius: 0; background: transparent; }
.modal-overlay .inst-picker:focus-within { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.modal-overlay .modal-actions { gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ds-line); background: #ffffff; }
.modal-overlay :is(.btn-primary, .btn-secondary, .btn-danger) { height: 30px; padding: 0 14px; border-radius: 7px; font-size: 13px; font-weight: 500; }
/* Ink written out (it is --ds-ink) so the Paper and Night builds give this
   button its own text colour; with the variable, Night's generic button rule
   put dark text on the dark button. */
.modal-overlay .btn-primary { border: 1px solid #cfcfcf; background: #ffffff; color: #1a1a1a; font-weight: 600; }
.modal-overlay .btn-primary:hover { border-color: #b8b8b8; background: #f7f7f7; }
.modal-overlay .btn-secondary { border: 1px solid var(--ds-control); background: #ffffff; color: var(--ds-ink-2); }
.modal-overlay .btn-danger { padding: 0 4px; border: 0; background: transparent; color: var(--ds-red-ink); }
.modal-overlay .btn-danger:hover { background: transparent; text-decoration: underline; }
.modal-overlay .rx { margin-top: 6px; }
.modal-overlay .rx-hd { display: flex; align-items: center; gap: 6px; margin: 14px 0 2px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.modal-overlay .rx-rows { display: flex; flex-direction: column; }
.modal-overlay .rx .rs-extra-add { margin-bottom: 2px; }
/* Dialogs sit inside the finance page; their fields keep the sheet's look
   over the page's general field rules. */
.modal-overlay.modal-overlay.modal-overlay :is(.modal-note-input, .modal-field > textarea, .rs-extra input, .rs-note, .rs-name) { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.modal-overlay.modal-overlay.modal-overlay :is(.modal-note-input, .modal-field > textarea, .rs-note) { border-bottom: 1px solid var(--ds-line-soft); }
.modal-overlay.modal-overlay.modal-overlay :is(.modal-note-input, .modal-field > textarea, .rs-extra input, .rs-note, .rs-name):focus { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.modal-overlay.modal-overlay.modal-overlay .rs-sheet .rs-facts > label > :is(input, select) { border: 0; border-radius: 0; background-color: transparent; }
/* Rows that open where their numbers are set show it on hover. */
.finance-page :is(.re-bridge-row, .rt-stage, .ed-scen-row, .ed-sure-row, .fo-cost, .rp-slip)[role="button"] { cursor: pointer; }
.finance-page :is(.re-bridge-row, .rt-stage, .ed-scen-row, .ed-sure-row, .fo-cost, .rp-slip)[role="button"]:hover { background: var(--ds-hover); }
.rp-slip.is-skipped .mo-mail-subject b { color: var(--ds-ink-4); }
.rp-slip .mo-btn--quiet { margin-left: 8px; }
/* Facts in labelled groups side by side (factGroups). */
.fs-groups { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: 32px; padding: 0 14px 10px; }
.fs-group { min-width: 0; }
.fs-group h4 { margin: 12px 0 2px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.finance-page.finance-page.finance-page .fs-group .re-facts { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; background: transparent; box-shadow: none; }
.ed-school .rs-tile { width: 44px; height: 44px; }
.finance-page.finance-page.finance-page.finance-page .fs-group .fin-input-grid.re-facts { padding: 0; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title > span { display: grid; place-items: center; color: var(--ds-ink-3); }
.finance-page.finance-page .iv-editor-wrap .inv-editor-title > span .mo-ic { width: 14px; height: 14px; }
/* Chart areas are the grey of "the rest", never a faint tint of the line. */
.mo-yl-area, .mo-a-soft, .mo-a-band { fill: rgba(0, 0, 0, .06); }
.mo-a-inflation { fill: rgba(0, 0, 0, .06); }
.fin-di-radar-value { fill: rgba(0, 0, 0, .06); }
/* The address finder is a text-like field too: a hairline, an underline on focus. */
.finance-page.finance-page.finance-page .fin-addr-input { height: 34px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: transparent; box-shadow: none; }
.finance-page.finance-page.finance-page .fin-addr-input:hover { border-bottom-color: #d4d4d4; }
.finance-page.finance-page.finance-page .fin-addr-input:focus { border-bottom-color: var(--f-focus, #2563eb); box-shadow: inset 0 -1px 0 var(--f-focus, #2563eb); }
.finance-page .mo-mail.rp-slip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; }
.finance-page .rp-slip .mo-btn--quiet { margin-left: 0; height: 26px; padding: 0 8px; font-size: 12px; }
.finance-page .mo-mail.iv-check.rp-slip { grid-template-columns: minmax(0, 1fr) auto auto !important; }
/* Rules: the number in a sentence is an underlined value in the sentence,
   and the preview is plain rows under a hairline, never a framed slip. */
.finance-page.finance-page .rm-num { width: 3.2ch; min-width: 0; height: 24px; margin: 0 3px; padding: 0; border: 0; border-bottom: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font-weight: 600; text-align: center; }
.finance-page.finance-page .rm-num:hover { border-bottom-color: #bdbdbd; }
.finance-page.finance-page .rm-num:focus { border-bottom-color: var(--f-focus, #2563eb); background: transparent; }
.finance-page .rm-preview { gap: 0; }
.finance-page .rm-preview .rm-row { border: 0; border-top: 1px solid var(--ds-line-soft); border-radius: 0; }

/* Details of your own on the page (pageExtras): the dialog's rows, flat. */
.px { min-width: 0; }
.px .rx-hd { display: flex; align-items: center; gap: 6px; margin: 12px 0 2px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.finance-page.finance-page.finance-page .px .rs-extra input { height: 30px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px; text-align: left; outline: 0; }
.finance-page.finance-page.finance-page .px .rs-extra input:first-child { color: var(--ds-ink-3); }
.finance-page.finance-page.finance-page .px .rs-extra input:focus { box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.px-note { display: block; margin-top: 6px; }
.px-note > span { display: block; margin: 8px 0 2px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.finance-page.finance-page.finance-page .px-note textarea { display: block; width: 100%; min-height: 52px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--ds-line-soft); border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; outline: 0; }
.finance-page.finance-page.finance-page .px-note textarea:focus { border-bottom-color: var(--f-focus, #2563eb); box-shadow: inset 0 -1px 0 var(--f-focus, #2563eb); }
.em-jobp-body > .em-xcol { flex-basis: 100%; padding: 0 16px 12px; border-top: 1px solid var(--ds-line-soft); border-left: 0; }
.re-extras .px-wrap { padding: 0 16px 12px; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-section.is-extras .px { padding: 0 14px 12px; }
.finance-page.finance-page .iv-editor-wrap .inv-editor-section.is-extras { grid-column: 1 / -1; }
.finance-page.finance-page.finance-page .em-jobp-body > .em-tcol:nth-child(2):nth-last-child(2) .re-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }

/* Planner cards: priority is a mark like every status on the platform; the
   category is a plain word on a light grey ground, sentence case, no colour
   of its own (the column and the card's own colour carry that). */
.finance-planner :is(.card-tags, .li-tags) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.finance-planner :is(.card-tags, .li-tags) .ds-mark { font-size: 11.5px; font-weight: 500; }
.finance-planner .tag.is-plain {
  padding: 2px 7px; border-radius: 4px; background: #f3f3f3; color: #5f5f5f;
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.finance-planner .board.cols-5 .tag.is-plain { font-size: 10.5px; padding: 1px 6px; }
.finance-planner .col-empty .col-empty-text { color: #8a8a8a; font-size: 12.5px; font-weight: 500; }
.finance-planner .tv-waterfall-item em { color: #8a8a8a; }

/* ---------------- Planner: My board ----------------
   Columns are the person's own (a ··· on each, the approved menu; a title
   field for quick cards; a column of its own to add another).
   A card reads top to bottom as one surface with one left edge: the real
   front page of the file it carries, the part of your money it concerns
   (the main menu's icon and a grey word) beside its priority mark, the
   title, its note, the money as a figure followed by words, what it is
   about and who it is for, its steps on one thin line, and a foot that says
   how close its date is, relative first, with what else it holds in grey.
   Colour is only ever a solid mark: priority, the date's closeness, the
   square of the business or person it is for, and the steps' line. */
.my-board .column-header { position: relative; }
.my-board .col-actions { position: relative; }
.my-board .mb-menu { top: calc(100% + 4px); left: auto; right: 0; }
.my-board .mb-menu .no-icon-menu-preview { position: absolute; top: 0; right: 0; transform: scale(.5); transform-origin: top right; }
.my-board .mb-menu.is-up .no-icon-menu-preview { top: auto; bottom: 0; transform-origin: bottom right; }
/* A value keeps its full width; the panel grows for it (up to its cap). */
.my-board .mb-menu .no-icon-menu-right { max-width: none; }
.my-board .mb-menu .no-icon-menu-value { flex: none; }
.my-board .mb-card { --mb-pad: 14px; display: flex; flex-direction: column; cursor: pointer; }
.my-board .board:is(.cols-4, .cols-5) .mb-card { --mb-pad: 10px; }
.my-board .mb-card-more { position: absolute; top: 9px; right: 9px; z-index: 3; padding: 2px 5px; border-radius: 4px; color: var(--ds-ink-4); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.my-board .mb-card:hover .mb-card-more,
.my-board .mb-card-more:focus-visible,
.my-board .mb-card:has(.mb-menu) .mb-card-more { opacity: 1; }
.my-board .mb-card-more:hover { background: var(--ds-well); color: var(--ds-ink); }
.my-board .mb-card.has-cover .mb-card-more { background: var(--ds-card); box-shadow: 0 0 0 1px var(--ds-border); }
.my-board .mb-card > .mb-menu { top: 30px; right: 6px; z-index: 1300; }
.my-board .mb-card > .mb-menu.is-up { top: 6px; }
.my-board .mb-card:has(.mb-menu) { z-index: 50; }
.my-board .mb-card .mo-ic { width: 13px; height: 13px; flex: none; stroke-width: 1.8; }

/* The file's own front page, edge to edge at the top of the card. */
.my-board .mb-cover { position: relative; height: 112px; margin: calc(var(--mb-pad) * -1) calc(var(--mb-pad) * -1) 12px; overflow: hidden; border-bottom: 1px solid var(--ds-line); border-radius: 7px 7px 0 0; background: var(--ds-well); }
.my-board .mb-cover .rp-pv { position: relative; height: 100%; padding: 12px 12px 0; border-radius: 0; background: transparent; }
.my-board .mb-cover .rp-pv.is-real { background: transparent; }
.my-board .mb-cover .rp-pv.is-real img { top: 12px; left: 12px; width: calc(100% - 24px); }

/* Area and priority. */
.my-board .mb-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 16px; margin-bottom: 6px; padding-right: 24px; }
.my-board .mb-area { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ds-ink-4); font-size: 11.5px; font-weight: 500; }
.my-board .mb-area > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.my-board .mb-card-head .ds-mark { flex: none; font-size: 11.5px; font-weight: 500; }

/* Title and note. */
.my-board .mb-card .card-title { margin: 0; align-items: flex-start; }
.my-board .mb-card:not(.has-head):not(.has-cover) .card-title { padding-right: 24px; }
.my-board .mb-card .card-title-text { flex: 1 1 auto; min-width: 0; -webkit-line-clamp: 3; }
.my-board .mb-card .card-note-preview { margin: 4px 0 0; -webkit-line-clamp: 3; }
.my-board.is-detailed .mb-card .card-note-preview { -webkit-line-clamp: 8; }

/* Money: the figure, then the words saying which way it goes. */
.my-board .mb-money { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 10px; }
.my-board .mb-money b { color: var(--ds-ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-board .mb-money span { overflow: hidden; color: var(--ds-ink-4); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* What it is about, who it is for, and (Detailed) its files and links. */
.my-board .mb-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; margin-top: 10px; }
.my-board .mb-fact { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ds-ink-3); font: inherit; font-size: 12px; line-height: 1.35; text-align: left; text-decoration: none; }
.my-board :is(button, a).mb-fact { cursor: pointer; }
.my-board :is(button, a).mb-fact:hover { color: var(--ds-ink); }
.my-board .mb-fact[disabled] { color: var(--ds-ink-4); cursor: default; }
.my-board .mb-fact > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.my-board .mb-who { width: 9px; height: 9px; flex: none; margin: 0 2px; border-radius: 2px; }

/* Steps: a count and one thin line; opened, they are ticked on the card. */
.my-board .mb-steps { margin-top: 12px; }
.my-board .mb-steps-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 0; border: 0; background: none; color: var(--ds-ink-3); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.my-board .mb-steps-head b { margin-left: auto; color: var(--ds-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.my-board .mb-steps-head:hover { color: var(--ds-ink); }
.my-board .mb-track { height: 3px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: var(--viz-track); }
.my-board .mb-track i { display: block; height: 100%; border-radius: 2px; background: var(--viz-fill); }
.my-board .mb-track.is-full i { background: var(--viz-in); }
.my-board .mb-step-list { display: flex; flex-direction: column; margin-top: 8px; cursor: default; }
.my-board .mb-step { display: flex; align-items: flex-start; gap: 9px; min-height: 30px; padding: 6px 0; border-top: 1px solid var(--ds-line-soft); color: var(--ds-ink-2); font-size: 12.5px; line-height: 1.4; }
.my-board .mb-step > span { min-width: 0; overflow-wrap: anywhere; }
.my-board .mb-step.is-done > span { color: var(--ds-ink-4); text-decoration: line-through; }
.my-board .mb-step-add input { flex: 1 1 auto; min-width: 0; height: 18px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ds-ink); font: inherit; font-size: 12.5px; }
.my-board .mb-step-add input::placeholder { color: var(--ds-ink-4); }
.mb-check { width: 15px; height: 15px; flex: none; display: grid; place-items: center; margin-top: 1px; padding: 0; border: 1.5px solid #c2c2c2; border-radius: 4px; background: transparent; color: #ffffff; cursor: pointer; }
.mb-check:hover { border-color: var(--ds-ink-3); }
.mb-check.is-on { border-color: var(--ds-green); background: var(--ds-green); }
.mb-check.is-add { border-style: dashed; cursor: default; }
.mb-check.is-add:hover { border-color: #c2c2c2; }
.my-board .mb-check .mo-ic, .mb-sheet .mb-check .mo-ic { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* The foot: how close the date is, then what else the card holds. */
.my-board .mb-card-foot { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ds-line-soft); font-size: 11.5px; }
.my-board .mb-when { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 0; max-width: 100%; }
.my-board .mb-when .ds-mark { flex: none; font-size: 11.5px; font-weight: 500; }
.my-board .mb-when em { overflow: hidden; color: var(--ds-ink-4); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.my-board .mb-tail { min-width: 0; margin-left: auto; overflow: hidden; color: var(--ds-ink-4); white-space: nowrap; text-overflow: ellipsis; }

/* Condensed: what it is and when; everything else waits in the sheet. */
.my-board .board.condensed .mb-card :is(.mb-cover, .card-note-preview, .mb-facts, .mb-steps) { display: none; }
.my-board .board.condensed .mb-card-foot { margin-top: 8px; padding-top: 7px; }

.my-board .mb-swatch { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.my-board .mb-composer { padding: 10px 12px; border: 1px solid #dddddd; border-radius: 8px; background: #ffffff; }
.my-board .mb-composer input,
.my-board .mb-rename { width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: #242424; font: inherit; font-size: 13.5px; font-weight: 500; }
.my-board .mb-composer input::placeholder { color: var(--ds-ink-5); font-weight: 400; }
.my-board .mb-rename { width: 150px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #242424; }
.my-board .mb-card.is-dragging { opacity: .35; }
.my-board .mb-card.mb-drop-before { box-shadow: 0 -3px 0 -1px var(--col-color, #3d85c6); }
.my-board .cards.mb-drop-end { box-shadow: inset 0 -3px 0 -1px var(--col-color, #3d85c6); }
.my-board .mb-new-column { flex: 0 0 220px; min-width: 220px; background: transparent; border: 0; }
.my-board .mb-new-column .add-status-btn { margin-top: 2px; }
/* Columns share the width; the add-a-column column stays narrow and in view. */
.finance-planner.my-board .board .column.mb-column { flex: 1 1 0; min-width: 268px; max-width: 460px; }
.finance-planner.my-board .board .column.mb-new-column { flex: 0 0 180px; min-width: 180px; max-width: 180px; }

/* A card's sheet: the record sheet, with rows for what it is about, its
   files, steps and links, and what happened to it. */
.mb-sheet .mb-sheet-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--ds-line-soft); }
.mb-sheet .mb-sheet-lead { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--ds-well); color: var(--ds-ink-3); }
.mb-sheet .mb-sheet-lead .mo-ic { width: 14px; height: 14px; }
.mb-sheet .mb-sheet-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mb-sheet .mb-sheet-text b { overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mb-sheet .mb-sheet-text em { overflow: hidden; color: var(--ds-ink-4); font-size: 12px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.mb-sheet .rs-extra.mb-sheet-step { grid-template-columns: 15px minmax(0, 1fr) 28px; }
.mb-sheet .rs-extra.mb-sheet-step input { color: var(--ds-ink); }
.mb-sheet .rs-extra.mb-sheet-step.is-done input { color: var(--ds-ink-4); text-decoration: line-through; }
.mb-sheet .rs-extra.mb-sheet-link { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 28px 28px; }
.mb-sheet a.mo-ibtn { display: grid; place-items: center; color: var(--ds-ink-3); }
.mb-sheet .rs-extras > .rs-facts { margin: 0; }
.mb-sheet .mb-history { display: flex; flex-direction: column; }
.mb-sheet .mb-history > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.mb-sheet .mb-history time { color: var(--ds-ink-4); font-variant-numeric: tabular-nums; }
.mb-sheet .mb-history span { min-width: 0; overflow: hidden; color: var(--ds-ink-2); white-space: nowrap; text-overflow: ellipsis; }

/* A footer that runs to the card's edges is wider than the card's column by
   the card's padding; the column cap above must not cut its right side. */
.mo-stat > .mo-stat-foot { max-width: none; }

/* An item's ··· : quiet until the row or card is hovered, at its top right;
   it opens the approved menu anchored under it. */
.item-more-wrap { position: relative; display: inline-flex; justify-content: flex-end; }
.item-more { padding: 2px 6px; border-radius: 4px; color: var(--ds-ink-4); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
:is(.iv-line, .inv-opportunity-card, .inv-portfolio-table tr):hover .item-more,
.item-more:focus-visible,
.item-more[aria-expanded="true"] { opacity: 1; }
.item-more:hover, .item-more[aria-expanded="true"] { background: var(--ds-well); color: var(--ds-ink); }
.item-more-pop { position: absolute; top: calc(100% + 4px); right: 0; width: 203px; height: 0; z-index: 1300; cursor: default; }
.item-more-pop .no-icon-menu-preview { position: absolute; top: 0; right: 0; transform: scale(.5); transform-origin: top right; }
.iv-list .iv-cols, .iv-line { grid-template-columns: 8px minmax(0, 1fr) 128px 104px 104px 64px 84px 24px; }
.iv-line .item-more-wrap { justify-self: end; }
.inv-opportunity-card > .item-more-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.inv-portfolio-table .item-more-cell { width: 32px; text-align: right; }
.iv-list, .iv-list .mo-rows { overflow: visible; }

/* Day charts follow the bar grammar: a full light-grey track per day and
   the coloured part inside it; a day with nothing draws no colour. */
.rm-days .rm-day { flex: 1 1 auto; width: 100%; max-width: 26px; display: flex; align-items: flex-end; border-radius: 2px 2px 0 0; background: var(--viz-track); }
.rm-days .rm-day i { max-width: none; background: transparent; }
.rm-days .rm-day i.is-on { background: #3d85c6; }
.ex-days > b { flex: 1 1 0; min-width: 1px; height: 100%; display: flex; align-items: flex-end; border-radius: 1.5px 1.5px 0 0; background: var(--viz-track); }
.ex-days > b > i { width: 100%; min-width: 0; flex: none; }

/* ··· on every record. Rows keep a narrow gutter at the right for it, cards
   hold it at their top right and keep their own top line clear of it; it
   shows on hover (and while its menu is open), never covering a figure. */
.has-item-more { position: relative; }
.mo-mail.has-item-more, .fin-estate-row.has-item-more { padding-right: 40px; }
.has-item-more > .item-more-wrap { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 6; }
:is(.fin-account-card, .fin-estate-card, .ac-acct, .inv-opportunity-card).has-item-more > .item-more-wrap { top: 10px; right: 10px; transform: none; }
:is(.fin-account-card, .fin-estate-card).has-item-more .fin-card-top { padding-right: 26px; }
.ac-acct.has-item-more { padding-right: 40px; }
.has-item-more:hover .item-more,
.has-item-more:focus-within .item-more,
.rm-row:hover .item-more,
.em-jobp-hd .item-more,
.ed-line:hover .item-more { opacity: 1; }
.has-item-more:has(.item-more-pop) { z-index: 40; }
/* A menu opened inside a card is drawn whole and on top: while it is open
   the card stops clipping at its edge and sits above the cards after it
   (a card that is sticky keeps its own position). page.js turns a menu
   upward when the window has no room below it. */
:where(.mo-card, .fin-workspace-card):has(.item-more-pop:not([hidden]), .planner-col-menu-popover:not(.profile-menu-popover), .atlas-row-menu-popover) { position: relative; }
:is(.mo-card, .fin-workspace-card):has(.item-more-pop:not([hidden]), .planner-col-menu-popover:not(.profile-menu-popover), .atlas-row-menu-popover) { overflow: visible; z-index: 45; }
.planner-col-menu-popover.is-up:not(.mb-menu, .profile-menu-popover) { top: auto; bottom: calc(100% + 6px); }
/* A menu lifted out and pinned to the window beside its button (page.js). */
.is-pinned-menu { position: fixed !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; translate: none !important; z-index: 1300 !important; }
.ed-line-acts { display: flex; justify-content: flex-end; }
/* A list where any row has the ··· keeps its gutter on every row, header and
   total line, so figures stay in one column across all its bands. */
:is(.mo-card, section):has(.mo-mail.has-item-more) :is(.mo-mail, .mo-band-hd, .nw-cols, .nw-totals) { padding-right: 40px; }
/* Education lines: the actions column holds only the ··· now, and the
   yearly total sits under "A year". */
.ed-lines .ed-line-cols, .ed-lines .ed-line { grid-template-columns: 8px minmax(0, 1fr) 120px 56px 130px 28px !important; }
.ed-lines > .nw-totals { padding-right: calc(8px + 28px + var(--ed-gap, 12px)); }
.item-more-pop.is-up { top: auto; bottom: calc(100% + 4px); }
.item-more-pop.is-up .no-icon-menu-preview { top: auto; bottom: 0; transform-origin: bottom right; }
.iv-map-key { margin: 8px 0 0; }

/* A value just worked out from another field shows a brief soft tint, so
   the change is noticed without a message. */
/* Filled for you: a value the app worked out or brought in from a public
   source sits on a darker grey cell, so it is clear it need not be typed.
   Typing into it makes it yours and the fill goes. Read-only worked-out
   values (a venture's driven figures) look the same. */
:is(input, select).is-auto,
input.is-calculated,
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > :is(input, select).is-auto,
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label:hover > :is(input, select).is-auto,
.finance-page.finance-page .inv-field :is(input, select).is-auto { background-color: #ececec !important; border-radius: 6px; color: #3a3a3a; }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > :is(input, select).is-auto:focus { box-shadow: inset 0 -2px 0 var(--f-focus); border-radius: 6px 6px 0 0; }
.finance-page.finance-page .inv-field .inv-input-wrap:has(> input.is-auto) { background-color: #ececec; }

/* ---------------- Realtor ---------------- */
.rt-hello { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: center; gap: 24px; padding: 18px 20px; }
.rt-hello-main h2 { margin: 0; color: var(--ds-ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.rt-hello-main .mo-note { margin-top: 6px; font-size: 13px; white-space: normal; }
.rt-goal-hd { display: flex; align-items: baseline; justify-content: space-between; color: var(--ds-ink-3); font-size: 12px; }
.rt-goal-hd b { color: var(--ds-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-goal-track { display: flex; height: 10px; margin: 8px 0 8px; overflow: hidden; border-radius: 3px; background: var(--viz-track); }
.rt-goal-track i { display: block; height: 100%; }
.rt-goal-track i.is-earned { background: #6aa84f; }
.rt-goal-track i.is-coming { background: #b6d7a8; }
.rt-cols, .rt-deal { grid-template-columns: 8px minmax(0, 1fr) 90px 150px 74px 110px 110px; }
.rt-cols span:nth-child(n+5) { text-align: right; }
.rt-deal { padding-left: 14px; cursor: pointer; }
.rt-deal .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.rt-deal .nw-line-src:nth-of-type(5) { text-align: right; }
.rt-deal-stage { min-width: 0; display: flex; }
.rt-deal-stage .ds-mark { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rt-item { padding-left: 14px; }
.rt-item .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 2px; }
.rt-item .mo-btn { flex: none; }
.rt-source { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 100px; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--ds-line-soft); }
.rt-source-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-source-name b { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
.rt-source-name em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.rt-source-bar { display: block; height: 8px; border-radius: 2px; background: var(--viz-track); overflow: hidden; }
.rt-source-bar i { display: block; height: 100%; border-radius: 2px; background: #3d85c6; }
.rt-first { margin: 12px 16px 16px; }
.rt-practice .rt-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rt-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.rt-item .mo-mail-when { text-align: right; }
.rt-item .mo-mail-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rt-item .mo-mail-when em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.mo-stat--rt-earned .iv-years i.is-back { background: #6aa84f; }
/* The Realtor page's "Add your first deal" is the same composer row as Master Data's. */
.rt-page .ds-composer.md-add { width: 100%; grid-template-columns: 24px auto minmax(0, 1fr); gap: 10px; border: 0; border-top: 1px solid var(--ds-line-soft); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
.rt-page .ds-composer.md-add > span:nth-child(2) { color: var(--ds-ink-2); font-size: 13px; font-weight: 500; }
.rt-page .ds-composer.md-add > em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.rt-page .ds-composer.md-add:hover { background: var(--ds-hover); }
/* A label in a column that runs to the bottom keeps its own height; it is
   never squeezed below its line, which would clip its letters. */
.md-stair-range { flex: none; line-height: 1.35; }

/* The Dashboard greeting: a quiet card at the top on arrival that fades and
   folds away after about two and a half minutes. */
.dash-hello { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; padding: 16px 18px; overflow: hidden; max-height: 260px;
  transition: opacity .6s ease, max-height .6s ease .1s, padding .6s ease .1s, margin .6s ease .1s, border-width .6s ease .1s; }
.dash-hello h2 { margin: 0; color: var(--ds-ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.dash-hello .mo-note { margin-top: 4px; font-size: 13px; white-space: normal; }
.dash-hello.is-leaving { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(-1 * var(--ds-gap, 16px)); border-width: 0; }
.mo-stat--rt-earned .rt-goal-track { margin: 0; }
/* The greeting's × is drawn like a card's ···: no box of its own, quiet at
   the top right, shown when the greeting is hovered or focused. */
.dash-hello-x { position: absolute; top: 10px; right: 10px; padding: 1px 6px; font-size: 16px; font-weight: 400; letter-spacing: 0; }
.dash-hello:hover .dash-hello-x, .dash-hello-x:focus-visible { opacity: 1; }


/* The week at the greeting's right: Late, then today and the six days after,
   one bar each in the bar grammar (light-grey track, colour inside, nothing
   for an empty day), the count over a bar that has one and the day under it.
   It fits the greeting's own height, never grows the card, stays clear of
   the × and opens Reminders. */
.dash-hello:has(.dash-hello-week) { grid-template-columns: auto minmax(0, 1fr); column-gap: 56px; }
.dash-hello-week { justify-self: end; align-self: center; display: flex; align-items: stretch; gap: 10px; height: 48px; margin-right: 18px; border-radius: 6px; cursor: pointer; }
.dash-day { width: 38px; display: grid; grid-template-rows: 13px minmax(0, 1fr) 13px; justify-items: center; row-gap: 2px; }
.dash-day b { color: var(--ds-ink-2); font-size: 11px; font-weight: 600; line-height: 13px; font-variant-numeric: tabular-nums; }
.dash-day i { width: 18px; height: 100%; display: flex; align-items: flex-end; border-radius: 2px 2px 0 0; background: var(--viz-track); overflow: hidden; }
.dash-day i u { width: 100%; border-radius: 2px 2px 0 0; background: #3d85c6; text-decoration: none; }
.dash-day.is-late i u { background: #cc0000; }
.dash-day.is-today i u { background: #e69138; }
.dash-day em { color: var(--ds-ink-3); font-size: 11px; font-style: normal; line-height: 13px; white-space: nowrap; }
.dash-day.is-late em { color: #cc0000; }
.dash-day.is-today em { color: var(--ds-ink); font-weight: 600; }
.dash-hello-week:hover .dash-day em { color: var(--ds-ink); }

/* Markets for United States · California: Fed and overnight rates in indigo,
   borrowing in orange, beside deposits and Treasury. Sources and dates lists
   every publisher with the date of its latest figure. */
.mk-bar i.is-policy { background: #4a5fb5; }
.mk-bar i.is-borrowing { background: #e69138; }
.us-sources .us-source { grid-template-columns: minmax(0, 1fr) 96px 96px; }
.us-source-date { color: var(--ds-ink-3); font-size: 12px; text-align: right; white-space: nowrap; }
.us-sources .mo-mail-subject a { color: inherit; text-decoration: underline; text-decoration-color: var(--ds-line, #e5e5e5); text-underline-offset: 2px; }
/* Five cards in a row where a page has five (California taxes). */
.mo-stats.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* A step too narrow for its labels keeps its bar; the labels are in its
   tooltip, so short steps never overlap their neighbours' words. */
.md-stair.is-narrow .md-stair-rate, .md-stair.is-narrow .md-stair-range { visibility: hidden; }

/* Venture spending (Investments › Underwriting): items grouped by kind of
   cost, each a row with its status and amount and the record ···; a
   twelve-month column chart of what is paid and what is to come; the
   switches that take each total into the model. */
.iv-spend .mo-rows { display: flex; flex-direction: column; }
.iv-spend-figs { border-bottom: 1px solid var(--ds-line); }
.iv-spend-band { cursor: default; }
.iv-spend-band em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }
.iv-spend-band > span:last-child { margin-left: auto; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-spend-row { grid-template-columns: 8px minmax(0, 1fr) auto 128px; padding-right: 40px; }
.iv-spend-row .nw-line-value small { color: var(--ds-ink-4); font-size: 11px; font-weight: 500; }
.iv-spend .ds-composer.md-add { margin: 12px; }
/* A business you run: payers, staff, licences, what it pays you. */
.iv-staff .em-facts, .iv-licences .em-facts { border-top: 1px solid var(--ds-line); }
.iv-owner .fin-input-grid.re-facts { grid-template-columns: minmax(0, 1fr); padding: 2px 16px 6px; border-bottom: 1px solid var(--ds-line); }
.iv-owner .fin-input-grid.re-facts > label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 42%); align-items: center; gap: 12px; border-bottom: 1px solid var(--ds-line-soft); }
.iv-owner .fin-input-grid.re-facts > label:last-child { border-bottom: 0; }
.iv-owner .fin-input-grid.re-facts input { text-align: right; }
/* Jobs and pay: the businesses you run. */
.em-biz .mo-rows { display: flex; flex-direction: column; }
.em-biz-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 150px auto 128px; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; cursor: pointer; }
.em-biz-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.em-biz-fig em { color: var(--ds-ink-3); font-size: 11.5px; font-style: normal; }
.em-biz-fig b { color: var(--ds-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.em-biz-row .nw-line-value small { color: var(--ds-ink-4); font-size: 11px; font-weight: 500; }
.em-biz-tax tr[data-em-business] { cursor: pointer; }
.iv-spend-months { display: flex; align-items: stretch; gap: 8px; height: 150px; padding: 14px 16px 6px; }
.iv-spend-months > span { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 14px minmax(0, 1fr) 14px; justify-items: center; row-gap: 3px; }
.iv-spend-months b { color: var(--ds-ink-3); font-size: 10.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-spend-months i { width: 100%; max-width: 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 2px 2px 0 0; background: var(--viz-track); overflow: hidden; }
.iv-spend-months u { width: 100%; text-decoration: none; }
.iv-spend-months u.is-planned { background: #3d85c6; }
.iv-spend-months u.is-paid { background: #6aa84f; }
.iv-spend-months em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; }
.iv-spend-cats { padding: 6px 16px 16px; }
.iv-drives { display: flex; flex-direction: column; padding: 4px 0; }
.iv-drive { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ds-line-soft); }
.iv-drive > span { color: var(--ds-ink-2); font-size: 13px; }
.iv-drive > b { font-size: 13px; font-variant-numeric: tabular-nums; }
.iv-match { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; color: var(--ds-ink-3); font-size: 12px; }
.iv-match textarea { width: 100%; min-height: 44px; resize: vertical; border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; font: inherit; font-size: 13px; color: var(--ds-ink); padding: 4px 0; outline: none; }
.iv-spend-model .em-facts .mo-btn { margin-left: 10px; }

/* ---------------- Accounts (admin) ----------------
   Mail rows: initials, name, email with what is known about them, one mark,
   last signed in over last saved, and the ··· at the right. */
.ac-row { grid-template-columns: 24px 160px minmax(0, 1fr) auto 150px; cursor: default; }
.ac-initials { color: var(--ds-ink-2); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.ac-you { margin-left: 6px; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; font-weight: 500; }
.ac-row .ds-mark { font-size: 12.5px; font-weight: 500; }
.ac-row .mo-mail-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ac-row .mo-mail-when b { font-size: 12.5px; }
.ac-row .mo-mail-when em { color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; font-weight: 400; }
.ac-row:hover .mo-mail-when, .ac-row:focus-within .mo-mail-when { visibility: visible; }
.ac-row.is-disabled .mo-mail-from, .ac-row.is-disabled .mo-mail-subject b { color: var(--ds-ink-4); }
/* The row menus open past the card's edge; the last row keeps its corners. */
.ac-list, .ac-list .mo-rows { overflow: visible; }
.ac-list .mo-rows > .mo-mail:last-child { border-radius: 0 0 var(--ds-radius) var(--ds-radius); }

/* ---------------- Estates: the stepped form and the Facts card ----------------
   The form is the app's dialog, wider, with the steps across the top as
   numbered tabs (rounded squares), two columns of fact rows per step, and
   hint lines for what public records or a lender's rate suggest. */
.re-wiz-overlay .modal.re-wiz { width: min(880px, calc(100vw - 48px)); max-width: none; }
.re-wiz-steps { display: flex; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--ds-line); overflow-x: auto; flex: none; }
.re-wiz-tab { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-ink-3); font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.re-wiz-tab:hover { background: var(--ds-hover); color: var(--ds-ink); }
.re-wiz-tab b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--ds-well); color: var(--ds-ink-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.re-wiz-tab.is-on { background: #f3f3f3; color: var(--ds-ink); }
.re-wiz-tab.is-on b { background: #1a1a1a; color: #ffffff; }
.re-wiz-tab.is-done b { background: #e3efe3; color: #2b6a2e; }
/* Steady between steps without a blank half: room for the longest short
   step, scrolling past 60% of the window. */
.re-wiz-body { min-height: min(46vh, 380px); max-height: min(62vh, 560px); }
.re-wiz-step[hidden] { display: none !important; }
.finance-page.finance-page.finance-page .re-wiz .fin-input-grid.re-wiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 0; border: 0; box-shadow: none; }
.finance-page.finance-page.finance-page .re-wiz .fin-input-grid.re-wiz-grid > label { grid-template-columns: minmax(0, 1fr) auto minmax(120px, 46%); }
.re-wiz-addr { margin: 0 0 10px; }
.re-wiz-addr .fin-addr-wrap { display: block; position: relative; }
.re-wiz-addr .fin-addr-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--ds-control); border-radius: 8px; background: #ffffff; color: var(--ds-ink); font: inherit; font-size: 13.5px; }
.re-wiz-addr .fin-addr-input:focus { outline: 0; border-color: #b8b8b8; box-shadow: 0 0 0 3px rgba(61, 133, 198, .12); }
.re-wiz-status { margin: 8px 0 0; color: var(--ds-ink-3); font-size: 12px; line-height: 1.45; }
.re-wiz-status b { color: var(--ds-ink); font-weight: 600; }
.re-wiz-status.is-busy { color: var(--ds-ink-2); }
.re-wiz-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--ds-line-soft); color: var(--ds-ink-3); font-size: 12px; line-height: 1.45; }
.re-wiz-hint b { color: var(--ds-ink); font-weight: 600; }
.re-wiz-hint .mo-btn { flex: none; }
.re-wiz-review { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ds-line); border-radius: 8px; overflow: hidden; }
.re-wiz-review > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-left: 1px solid var(--ds-line); }
.re-wiz-review > div:first-child { border-left: 0; }
.re-wiz-review span { color: var(--ds-ink-3); font-size: 12px; }
.re-wiz-review b { color: var(--ds-ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.re-wiz-actions { align-items: center; }
.re-wiz-count { margin-right: auto; color: var(--ds-ink-4); font-size: 12px; }

.re-facts-card .mo-hd-sub { max-width: 46%; }
.re-facts-secs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.re-facts-sec { min-width: 0; padding: 10px 16px 14px; border-left: 1px solid var(--ds-line-soft); }
.re-facts-sec:first-child { border-left: 0; }
.re-facts-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 4px; }
.re-facts-hd b { color: var(--ds-ink); font-size: 12.5px; font-weight: 600; }
.re-facts-sec > div:not(.re-facts-hd) { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.re-facts-sec > div:not(.re-facts-hd) span { color: var(--ds-ink-3); }
.re-facts-sec > div:not(.re-facts-hd) b { min-width: 0; overflow: hidden; color: var(--ds-ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-card-sub { margin: -2px 0 6px; overflow: hidden; color: var(--ds-ink-4); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Money in other currencies (Net Worth): the code in its tile, the amount in
   its own currency, the rate used with its publisher and date, and what it is
   worth in yours. A balance in another currency shows that line under it. */
.nw-fx-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, auto) 120px; cursor: default; }
.nw-fx-code { width: 40px; color: var(--ds-ink-2); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.nw-fx-rate { min-width: 0; overflow: hidden; color: var(--ds-ink-4); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nw-fx-row:hover .mo-mail-when { visibility: visible; }
.fin-card-note { margin-top: 2px; color: var(--ds-ink-4); font-size: 11.5px; }

/* What a field means: a plain line under its name, on the left; the value
   stays on the right. In dialogs and in the property form. */
/* A label with an explanation: the name one step darker, the explanation in the label grey (4.5:1 or better). */
.modal-overlay .modal-label:has(.modal-explain) { padding: 8px 0; overflow: visible; white-space: normal; color: var(--ds-ink-2); }
.modal-explain { display: block; margin-top: 2px; color: var(--ds-ink-3); font-size: 11.5px; font-weight: 400; line-height: 1.4; }
.modal-overlay .modal-field[hidden] { display: none !important; }
.fact-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 0; }
.fact-name:has(.fact-explain) { color: var(--ds-ink-2); }
.fact-explain { color: var(--ds-ink-3); font-size: 11.5px; font-weight: 400; line-height: 1.35; }

/* Where a file came from: its business's square from the menu, grey for
   your own, orange for an email still waiting for a business. */
.rp-from-sq { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.rp-row:hover .item-more, .ar-row:hover .item-more { opacity: 1; }
.ar-row.is-focused { box-shadow: inset 0 0 0 1.5px #b7b7b7; }
/* A file's details: facts on the right of each row, as in the forms. */
.fin-doc-facts .fin-doc-fact { justify-self: end; min-width: 0; overflow: hidden; color: var(--ds-ink); font-size: 13px; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.fin-doc-facts .fin-doc-fact-more { margin-left: 6px; color: var(--ds-ink-4); font-weight: 400; }
/* A transaction's ··· shows on hover, like every other row's. */
.ex-log-table tr:hover .item-more { opacity: 1; }
.ex-log-table td.ex-x { text-align: right; }
/* A task made from a record, and a business kept as a venture, link back. */
.planner-about { margin-top: 8px; }
.bz-profile-id .bz-venture { margin-left: auto; }
/* A task made from a record names it on the card, and opens it. */
.card .card-about { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 2px 0 4px; padding: 0; border: 0; background: none; color: var(--ds-ink-3, #5c5c5c); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.card .card-about span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .card-about svg { flex: 0 0 auto; width: 13px; height: 13px; }
.card .card-about:hover { color: var(--ds-ink, #0a0a0a); }
/* A business's income: rows show their ··· on hover. */
.bz-income-row { grid-template-columns: minmax(0, 1fr) auto 110px 110px 28px; }
.bz-income-row:hover .item-more { opacity: 1; }

/* Rent received: twelve months as solid blocks (paid in full, part paid,
   nothing), each labelled with its month, then the year's figures and each
   payment. */
.re-rent-year { padding: 12px 16px 4px; }
.re-rent-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.re-rent-month { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.re-rent-month i { display: block; width: 100%; height: 26px; border-radius: 2px; background: var(--viz-track); }
.re-rent-month.is-full i { background: #6aa84f; }
.re-rent-month.is-part i { background: #e69138; }
.re-rent-month em { font-style: normal; font-size: 11px; color: var(--ds-ink-3); }
.re-rent-month.is-now em { color: var(--ds-ink); font-weight: 600; }
.re-rent-year .mo-legend { margin-top: 8px; }
.re-rent-row { grid-template-columns: 30px minmax(0, 1fr) 120px 110px 28px; }

/* Selecting many: a box where each row's ··· was (picked: the site's blue,
   the row in the menu's flat grey), and a bar at the foot of the window. */
.bulk-pick { width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--ds-ink-4); border-radius: 4px; background: var(--ds-card); cursor: pointer; }
.bulk-pick svg { width: 12px; height: 12px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bulk-pick.is-on { border-color: #3d85c6; background: #3d85c6; }
.bulk-pick.is-on svg { opacity: 1; }
.bulk-pick:focus-visible { outline: 2px solid #3d85c6; outline-offset: 2px; }
:has(> .item-more-wrap > .bulk-pick.is-on) { background: var(--ds-hover); }
.bulk-bar { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 1400; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); color: var(--ds-ink); font-size: 13px; }
.bulk-bar > b { margin-right: 6px; font-weight: 600; white-space: nowrap; }
.bulk-bar .mo-btn[disabled] { opacity: .5; cursor: default; }