/* Dashboard — page styles.
   Values are taken from the Figma Dashboard frame (node 7367:16497) and its
   variable collection. They are declared locally rather than pushed into
   _ds/colors_and_type.css so the six existing prototype pages don't shift:
   the design file has drifted from the shipped DS in a few places (card radius
   22 vs 28, neutral ramp, status hues). */

/* Page-scoped: db.css is only linked from Dashboard.html. */
:root {
  /* surfaces & lines */
  --db-radius-lg: 22px;   /* rounding/Large  */
  --db-radius-md: 10px;   /* rounding/Medium */
  --db-radius-sm: 6px;    /* rounding/Small  */
  --db-border: #DCDCDC;         /* border/default, stroke/primary */
  --db-border-subtle: #ECEDF0;  /* border/subtle */
  --db-tile: rgba(44, 53, 79, .05);

  /* text */
  --db-fg: #303030;         /* fg/text/primary */
  --db-fg-muted: #717171;   /* fg/muted */
  --db-fg-subtle: #B0B0B0;  /* fg/subtle */

  /* accents */
  --db-brand: #2E5FFF;              /* fg/brand */
  --db-surface-brand: #E0EFFF;      /* bg/surface/brand */
  --db-surface-neutral: #ECEDF0;    /* bg/surface/neutral */
  --db-success: #008F35;            /* fg/status/success */
  --db-success-bg: #D9F8DC;         /* bg/status/success */
  --db-danger: #DC0055;             /* fg/status/danger */
  --db-danger-bg: #FFE2E6;          /* bg/status/danger */

  /* inverted surface — every floating tooltip / dropdown in the app */
  --db-inverted: #303030;             /* bg/surface/inverted        */
  --db-fg-on-inverted: #B0B0B0;       /* fg/text/secondary-on-bg    */
  --db-border-on-inverted: #555555;   /* stroke/primary-on-bg       */
  --db-shadow-elevated: 4px 4px 8px -4px rgba(48, 48, 48, .3); /* shadow/surface/elevated */
}

/* ---------------- layout ---------------- */

/* Each prototype page declares this itself; ps-assets/styles.css only ships
   the .head shell around it. */
.head__title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.db-page { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; }

.db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.db-grid__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* The accounts card is sized by the left column and scrolls internally, as in
   the design (566px tall with nine rows behind a scrollbar). Absolute
   positioning keeps its nine rows from inflating the grid row. */
.db-grid__cell { position: relative; min-width: 0; min-height: 0; }
.db-grid__cell > .db-card { position: absolute; inset: 0; }

.db-section { display: flex; flex-direction: column; gap: 16px; }

.db-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------------- card ---------------- */

.db-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  border: 1.5px solid #FFFFFF;
  border-radius: var(--db-radius-lg);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .15);
  overflow: hidden;
}

.db-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 60px; flex-shrink: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--db-border);
}
.db-card__head-r { display: flex; align-items: center; gap: 4px; }
.db-accounts .db-card__head-r { gap: 8px; }

.db-eyebrow {
  font: 600 13px/1.4 'Inter Tight';
  letter-spacing: .65px;
  text-transform: uppercase;
  color: var(--db-fg);
  margin: 0;
}

/* ---------------- primitives ---------------- */

.db-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px; border-radius: var(--db-radius-sm);
  font: 500 12px/1.35 'Inter Tight'; letter-spacing: .48px;
  text-transform: uppercase; white-space: nowrap;
}
.db-badge--brand { background: var(--db-surface-brand); color: var(--db-brand); }
.db-badge--neutral { background: var(--db-surface-neutral); color: var(--db-fg-muted); }

.db-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 6px; border-radius: var(--db-radius-sm);
  font: 400 11px/1.45 'Inter Tight'; letter-spacing: .55px;
  white-space: nowrap; flex-shrink: 0;
}
.db-status--success { background: var(--db-success-bg); color: var(--db-success); }
.db-status--neutral { background: var(--db-surface-neutral); color: var(--db-fg-muted); }
.db-status--danger { background: var(--db-danger-bg); color: var(--db-danger); }
/* "Not Viewed" on a fast link — informational, so the brand surface rather
   than the danger one the old unread dot used. */
.db-status--brand { background: var(--db-surface-brand); color: var(--db-brand); }
.db-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.db-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.db-metric.is-divided { border-left: 1px solid var(--db-border); padding-left: 16px; }
.db-metric__k {
  font: 400 12px/1.35 'Inter Tight'; letter-spacing: .48px;
  color: var(--db-fg-muted); white-space: nowrap;
}
.db-metric__v {
  font: 600 18px/1.1 'Inter Tight'; letter-spacing: -.36px;
  color: var(--db-fg); white-space: nowrap;
}
/* the label + value pair sits tight; the change pill hangs 4px below */
.db-metric .db-status { margin-top: -4px; }

.db-metrics { display: flex; align-items: center; gap: 24px; }
.db-metrics > .db-metric { flex: 1 1 0; }
.db-metrics--bordered {
  padding: 12px 24px; border-bottom: 1px solid var(--db-border); flex-shrink: 0;
}
.db-metrics--wide { padding: 16px 24px; gap: 32px; flex-shrink: 0; }
.db-metrics--wide > .db-metric { flex: 0 0 auto; }

.db-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--db-brand); text-decoration: none; flex-shrink: 0;
}
.db-link__t {
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  border-bottom: 1px solid currentColor;
}
.db-link:hover { color: #1F3FD1; }

.db-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 80px; padding: 0 12px;
  border: 0; border-radius: var(--db-radius-md); background: transparent;
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.db-btn:hover { background: rgba(48, 48, 48, .04); color: var(--db-fg); }
.db-btn__sep { width: 1px; height: 16px; background: var(--db-border); flex-shrink: 0; }

/* ---------------- select ---------------- */

.db-select { position: relative; }
.db-select__btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 12px;
  border: 0; border-radius: var(--db-radius-md); background: transparent;
  cursor: pointer; white-space: nowrap; color: var(--db-fg);
  transition: background .12s ease;
}
.db-select__btn:hover,
.db-select__btn.is-open { background: rgba(48, 48, 48, .05); }
.db-select__k { font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg-muted); }
.db-select__v { font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg); }

/* The open menu inverts onto the dark surface (Figma actionMenu 7367:16727):
   bg/surface/inverted, rounding/Large, the elevated shadow, and the on-bg text
   ladder. The trigger stays light. */
.db-select__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 100%; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--db-inverted); border: 0;
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-elevated);
}
.db-select__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 8px;
  border: 0; border-radius: var(--db-radius-sm); background: transparent;
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-on-inverted); white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.db-select__opt:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.db-select__opt.is-on { color: #fff; }

/* ---------------- 1. plan projections ---------------- */

.db-pp { display: flex; align-items: stretch; gap: 24px; padding: 20px 24px; }
.db-pp__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.db-pp__col--pad { padding: 0 24px; }
.db-pp__rule { width: 1px; background: var(--db-border-subtle); flex-shrink: 0; }
.db-pp__hd { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.db-pp__k { font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg); }
.db-pp__gauge { display: flex; align-items: center; gap: 12px; height: 64px; }
.db-pp__pct { font: 600 36px/1 'Inter Tight'; letter-spacing: -.72px; color: var(--db-fg); }
.db-pp .db-metrics { width: 100%; height: 64px; }

/* ---------------- 2. asset allocation ---------------- */

/* The segment tooltip is taller than the card, and the design lets it spill
   over the surfaces below — so this one card opts out of the card clip and
   lifts above its siblings. */
.db-alloc { overflow: visible; position: relative; z-index: 5; }
.db-alloc__body { position: relative; display: flex; align-items: center; gap: 24px; padding: 24px; }
.db-alloc__body.is-bar { flex-direction: column; align-items: stretch; gap: 20px; }

/* legend column — the "View Allocation & Holdings" link closes it on its own
   row rather than wrapping in among the legend items */
.db-alloc__side {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}

.db-alloc__hero { display: flex; flex-direction: column; gap: 4px; }

.db-alloc__chart { position: relative; width: 200px; height: 200px; flex-shrink: 0; }
.db-alloc__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  pointer-events: none;
}
.db-alloc__total { font: 600 18px/1.1 'Inter Tight'; letter-spacing: -.36px; color: var(--db-fg); }
.db-alloc__cap { font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg-muted); }
.db-donut__seg { transition: opacity .14s ease; }

/* Figma 7367:15514 — 16px track, 2px radius, 4px between segments */
.db-alloc__bar { display: flex; gap: 4px; height: 16px; }
.db-alloc__bar-seg { border-radius: 2px; transition: opacity .14s ease; cursor: default; }

.db-legend {
  width: 100%; min-width: 0;
  display: flex; flex-wrap: wrap; align-content: center; align-items: center;
  gap: 12px 20px;
}
.db-legend__i { display: flex; align-items: center; gap: 8px; cursor: default; }
.db-legend__sq { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.db-legend__l { font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg-muted); }
.db-legend__v { font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg); margin-left: -4px; }
.db-legend__i.is-on .db-legend__l { color: var(--db-fg); }

/* ---------------- 3. fast links / bottom links ---------------- */

.db-fast { padding: 12px; gap: 8px; }

.db-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 16px;
  background: var(--db-tile); text-decoration: none;
  transition: background .12s ease;
}
.db-tile:hover { background: rgba(44, 53, 79, .09); }
.db-tile--compact { padding: 10px; }

.db-tile__ic {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--db-radius-md); color: var(--db-fg);
}
.db-tile__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.db-tile__head { display: flex; align-items: center; gap: 8px; }
.db-tile__t { font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg); }
.db-tile__d {
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-tile__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--db-danger); border: 1px solid #fff; flex-shrink: 0;
}
.db-tile__go { margin-left: auto; color: var(--db-fg); flex-shrink: 0; }

/* ---------------- 4. accounts ---------------- */

.db-accounts { min-height: 0; }
.db-table {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 20px;
}
.db-table::-webkit-scrollbar { width: 9px; }
.db-table::-webkit-scrollbar-track { background: transparent; }
.db-table::-webkit-scrollbar-thumb {
  background: var(--db-border); border-radius: 14px;
  border: 3px solid transparent; background-clip: content-box;
}
.db-table { scrollbar-width: thin; scrollbar-color: var(--db-border) transparent; }

.db-row {
  position: relative;
  display: flex; align-items: center;
  min-height: 60px; padding: 10px 0;
}
.db-row::after {
  content: ''; position: absolute; left: 42px; right: 0; bottom: 0;
  height: 1px; background: var(--db-border-subtle);
}
.db-row:last-child::after { display: none; }

.db-row__ic {
  width: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--db-fg-muted);
}
.db-row__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.db-row__nm {
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.db-row__type { font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg-muted); }
.db-row__meta .db-status { font: 400 12px/1.35 'Inter Tight'; letter-spacing: .48px; padding: 0 8px; }
.db-row__bal {
  width: 170px; flex-shrink: 0; padding: 0 6px; text-align: right;
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg);
}

/* ---------------- 4b. hover-tip triggers ----------------
   The pills are the only place the dashboard explains where an account's
   numbers came from, so they carry a tooltip rather than staying decorative.
   The tooltip itself is the shared .db-tip shell below — this is only the
   trigger's affordance. */

.db-hinted { display: inline-flex; outline: none; }
.db-hinted:focus-visible { outline: 2px solid var(--db-brand); outline-offset: 2px; border-radius: var(--db-radius-sm); }
.db-row__meta .db-hinted .db-status { cursor: help; }

/* ---------------- 5. tabs + projections chart ---------------- */

.db-tabs { display: flex; gap: 8px; }
.db-tab {
  height: 35px; padding: 0 8px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: 500 15px/1 'Inter Tight'; letter-spacing: .2px;
  color: var(--db-fg-muted); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.db-tab:hover { color: var(--db-fg); }
.db-tab.is-on { color: var(--db-fg); border-bottom-color: #1A4BEB; }

.db-chart { position: relative; flex: 1 1 auto; }
.db-chart__svg { display: block; }
.db-chart__ytick,
.db-chart__xtick {
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; fill: var(--db-fg-subtle);
}

.db-milestone {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--db-border-subtle); border-radius: 50%;
  background: #fff; color: var(--db-fg); cursor: pointer;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .15);
}
.db-milestone:hover { border-color: var(--db-border); }
/* positioning only — the surface comes from .db-tip .db-tip--compact */
.db-milestone__tip {
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}

/* ---------------- tooltips ----------------
   ONE shell for every floating tip in the dashboard — the two chart tooltips
   (Figma 7367:17204 projections, 7367:15576 allocation), the milestone label,
   the account status hint and the balance-change chip. Anything new hangs a
   modifier off .db-tip rather than declaring its own surface, so a change here
   moves all of them together.

   Shell: bg/surface/inverted, rounding/Medium, the elevated shadow, 20px
   padding, a 15px title over the 14px on-bg text ladder, and a
   stroke/primary-on-bg rule between the header and the rows.
   Deviation: the projections frame sets its rows at 15px and the allocation
   frame at 14px; both render at 14px here so the tooltips read as one
   component.

   Modifiers: --alloc pins to the allocation card, --hover follows a hovered
   trigger, --r hangs off the trigger's right edge, --compact is the one-line
   label. */
.db-tip {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border-radius: var(--db-radius-md);
  background: var(--db-inverted); color: #fff;
  box-shadow: var(--db-shadow-elevated);
  pointer-events: none;
}
.db-tip__hd { display: flex; flex-direction: column; gap: 8px; }
.db-tip__title {
  display: flex; align-items: center; gap: 8px;
  font: 600 15px/1.2 'Inter Tight'; letter-spacing: .3px; color: #fff;
}
.db-tip__sub {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-on-inverted); white-space: nowrap;
}
.db-tip__sub b { font-weight: 500; }
.db-tip__rule { height: 1px; background: var(--db-border-on-inverted); flex-shrink: 0; }

/* a plain metadata line — same 14px on-bg step as .db-tip__row, without the
   two-column layout */
.db-tip__line {
  font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-on-inverted);
}

.db-tip__rows { display: flex; flex-direction: column; gap: 8px; }
.db-tip__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-on-inverted);
}
.db-tip__nm {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-tip__dot { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.db-tip__amt { font-weight: 500; white-space: nowrap; }
/* the running total closes the list in the primary on-bg tone */
.db-tip__row--total { color: #fff; }

/* Allocation segment tooltip — pinned to the top-right of the card body, over
   the legend, as in the design. */
.db-tip--alloc { top: 8px; right: 8px; width: 320px; }

/* Hover tip: fixed rather than absolute because the accounts table scrolls and
   would otherwise clip it. Title + metadata lines sit tighter than the chart
   tooltips' header/rule/rows stack. */
.db-tip--hover {
  position: fixed; z-index: 300;
  gap: 4px; max-width: 340px;
  animation: dbFade .12s ease-out;
}
/* hangs off the trigger's right edge instead of its left */
.db-tip--r { transform: translateX(-100%); }

/* one short line — the milestone label and the balance-change chip */
.db-tip--compact { padding: 6px 10px; gap: 0; }
.db-tip--compact .db-tip__title {
  font: 400 12px/1.35 'Inter Tight'; letter-spacing: .36px;
}
@media (max-width: 900px) {
  .db-tip--alloc { left: 8px; right: 8px; width: auto; }
}

.db-chart-legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 24px 20px;
}
.db-chart-legend__i {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 12px/1.35 'Inter Tight'; letter-spacing: .48px; color: var(--db-fg-muted);
}
.db-chart-legend__sq { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.db-chart-legend__note { color: var(--db-fg-subtle); }

/* ---------------- 7. modals ----------------
   Two dialogs hang off the Accounts card head: "Add Account" (Figma
   7357:122071) and the "View More" account table (7367:16259). Both reuse the
   card surface — gradient fill, 1.5px white border, 22px radius — so a dialog
   reads as the same material as the page behind it. */

.db-scrim {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(48, 48, 48, .55);
  animation: dbFade .16s ease-out;
}

.db-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%; max-height: calc(100vh - 48px); min-height: 0;
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  border: 1.5px solid #FFFFFF;
  border-radius: var(--db-radius-lg);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .4);
  overflow: hidden;
  animation: dbPop .16s ease-out;
}

.db-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 60px; flex-shrink: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--db-border);
}
.db-modal__title {
  margin: 0;
  font: 600 18px/1.2 'Inter Tight'; letter-spacing: .18px; color: var(--db-fg);
}
.db-modal__head-r { display: flex; align-items: center; gap: 5px; }
.db-modal__body { overflow-y: auto; min-height: 0; }

.db-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  padding: 8px; border: 0; border-radius: var(--db-radius-md);
  background: transparent; color: var(--db-fg-muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.db-iconbtn:hover { background: rgba(48, 48, 48, .05); color: var(--db-fg); }

@keyframes dbFade { from { opacity: 0; } }
@keyframes dbPop { from { opacity: 0; transform: translateY(4px); } }

/* ---- 7a. Add Account ---- */

.db-addacct { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.db-addacct__opts { display: flex; align-items: stretch; gap: 20px; }

.db-opt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border: 1px solid var(--db-border); border-radius: 16px;
}
.db-opt.is-rec { border-color: var(--db-brand); }

.db-opt__hd { display: flex; align-items: center; gap: 12px; }
.db-opt__ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--db-radius-md);
  background: var(--db-surface-neutral); color: var(--db-fg);
}
.db-opt.is-rec .db-opt__ic { background: var(--db-surface-brand); color: var(--db-brand); }
.db-opt__t {
  margin: 0;
  font: 600 18px/1.2 'Inter Tight'; letter-spacing: .18px; color: var(--db-fg);
}
.db-opt__d {
  margin: 0;
  font: 400 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg-muted);
}

.db-opt__tag {
  display: flex; align-items: center; justify-content: center;
  height: 28px; border-radius: var(--db-radius-sm);
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px;
  background: var(--db-surface-neutral); color: var(--db-fg-muted);
}
.db-opt.is-rec .db-opt__tag { background: var(--db-surface-brand); color: var(--db-brand); }

.db-opt__list {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0; padding: 4px; list-style: none;
}
.db-opt__li {
  display: flex; align-items: center; gap: 12px;
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg);
}
.db-opt__li svg { flex-shrink: 0; color: var(--db-fg-muted); }
.db-opt.is-rec .db-opt__li svg { color: var(--db-brand); }

/* the CTA sits on the card floor, so a shorter column still lines up */
.db-opt .db-cta { margin-top: auto; }

.db-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 80px; padding: 8px 12px;
  border: 1px solid var(--db-border); border-radius: var(--db-radius-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-muted); cursor: pointer;
  transition: filter .12s ease, color .12s ease;
}
.db-cta:hover { color: var(--db-fg); filter: brightness(.98); }
.db-cta--primary {
  border: 1.5px solid #5688FC;
  background: linear-gradient(180deg, #2E5FFF 0%, #5688FC 100%);
  color: #fff;
}
.db-cta--primary:hover { color: #fff; filter: brightness(1.06); }

.db-note {
  display: flex; align-items: center; gap: 12px;
  padding: 20px;
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
}
.db-note__ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--db-radius-md);
  background: var(--db-success-bg); color: var(--db-success);
}
.db-note__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.db-note__t { font: 600 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg); }
.db-note__d { font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg-muted); }

/* ---- 7b. Investment Accounts table ---- */

.db-acctable { display: flex; flex-direction: column; padding: 8px 20px; }

.db-acctable__head { display: flex; align-items: center; flex-shrink: 0; }
.db-acctable__h {
  display: flex; align-items: center; height: 36px; padding: 0 6px;
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-acctable__h:first-child { flex: 1 1 0; min-width: 0; }
.db-acctable__h.is-right { justify-content: flex-end; }
.db-acctable__h:not(:first-child) { flex-shrink: 0; }

.db-acctable__body { display: flex; flex-direction: column; }

.db-acctable__row { display: flex; align-items: stretch; }
.db-acctable__ic {
  width: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--db-fg-muted);
}

.db-acctable__c {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 60px; padding: 10px 6px;
  border-bottom: 1px solid var(--db-border-subtle);
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.db-acctable__row:last-child .db-acctable__c { border-bottom: 0; }
.db-acctable__c.is-right { align-items: flex-end; }
.db-acctable__c.is-muted { color: var(--db-fg-muted); }
.db-acctable__c--name { flex: 1 1 0; min-width: 0; }
/* justify-content on the base cell centres along the column axis; switching
   this cell to a row would inherit that as horizontal centring, so the
   left-alignment has to be restated. */
.db-acctable__c--owner {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
}
.db-acctable__c--owner svg { flex-shrink: 0; color: var(--db-fg-muted); }

.db-acctable__nm {
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px; color: var(--db-fg);
  overflow: hidden; text-overflow: ellipsis;
}
.db-acctable__sub {
  font: 400 13px/1.4 'Inter Tight'; letter-spacing: .52px; color: var(--db-fg-muted);
  overflow: hidden; text-overflow: ellipsis;
}
.db-acctable__owner { overflow: hidden; text-overflow: ellipsis; }

/* balance and its change chip share a line, right-aligned. The compound
   selector is needed to beat `.db-acctable__c.is-right`, whose flex-end would
   otherwise drop this row-direction cell to the bottom of its 60px box. */
.db-acctable__c.db-acctable__bal {
  flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px;
}

.db-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 6px; border-radius: var(--db-radius-sm);
  background: var(--db-success-bg); color: var(--db-success);
  font: 400 11px/1.45 'Inter Tight'; letter-spacing: .55px;
  white-space: nowrap; cursor: help;
}

.db-addlink {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  font: 500 15px/1 'Inter Tight'; color: var(--db-brand); cursor: pointer;
  transition: background .12s ease;
}
.db-addlink:hover { background: rgba(46, 95, 255, .08); }

.db-editbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; min-width: 64px; padding: 8px;
  border: 1.5px solid var(--db-border-subtle); border-radius: var(--db-radius-sm);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
  font: 500 14px/1.35 'Inter Tight'; letter-spacing: .28px;
  color: var(--db-fg-muted); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.db-editbtn:hover { color: var(--db-fg); border-color: var(--db-border); }
.db-editbtn svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .db-scrim, .db-modal, .db-tip--hover { animation: none; }
}

/* ---------------- narrow screens ---------------- */

@media (max-width: 1180px) {
  .db-metrics--wide { flex-wrap: wrap; gap: 16px 24px; }
}

/* The Investment Accounts table is designed at 1200px and its columns are
   fixed, so below that the table scrolls sideways inside the dialog rather
   than crushing the numeric columns. */
@media (max-width: 1264px) {
  .db-modal { width: 100% !important; }
  .db-acctable { overflow-x: auto; }
  .db-acctable__head,
  .db-acctable__body { min-width: 1160px; }
}

@media (max-width: 900px) {
  .db-grid,
  .db-bottom { grid-template-columns: 1fr; }
  .db-scrim { padding: 12px; }
  .db-addacct__opts { flex-direction: column; }
  .db-grid__cell { min-height: 520px; }
  .db-grid__cell > .db-card { position: static; }
  .db-pp { flex-direction: column; gap: 20px; }
  .db-pp__rule { width: auto; height: 1px; }
  .db-pp__col--pad { padding: 0; }
  .db-alloc__body { flex-direction: column; align-items: center; }
  .db-accounts .db-table { max-height: 420px; }
}