/* ════════════════════════════════════════════════════════════════
   COCKPIT — dense, single-screen terminal shell (Option A).
   Loaded AFTER redesign.css. Converts the left-sidebar app shell into
   an icon rail + command bar + status bar. Flat, neutral, no glow.
   Color stays themeable via the existing CSS variables.
   ════════════════════════════════════════════════════════════════ */

/* Flatten the AI-tells globally: kill the body glow + gradient backgrounds */
body.app {
  background: var(--bg) !important;
}
.dash-head__title em {
  -webkit-text-fill-color: currentColor; background: none; color: var(--accent-soft);
}

/* ── Desktop: compact icon rail ────────────────────────────────── */
@media (min-width: 861px) {
  :root { --side-w: 58px; }
  body.app { padding-left: 58px; }

  .sidenav {
    width: 58px; padding: 12px 7px 12px; align-items: center;
    background: var(--bg-raised); border-right: 1px solid var(--border);
  }
  .sidenav__brand { justify-content: center; padding: 2px 0 14px; margin-bottom: 12px; }
  .sidenav__brandtag { display: none; }
  .sidenav__brand .logo { font-size:22px; }

  .sidenav .tab { justify-content: center; padding: 10px 0; width: 44px; gap: 0; position: relative; }
  .sidenav .tab span:not(.tab--fund) { display: none; }
  .sidenav .tab svg { width: 19px; height: 19px; }
  /* tooltip on hover */
  .sidenav .tab::after {
    content: attr(data-view); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
    font-size:13px; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
    text-transform: capitalize; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 90;
  }
  .sidenav .tab:hover::after { opacity: 1; }

  .sidenav__foot { gap: 8px; align-items: center; }
  .sidenav__foot .theme-switcher { display: none; }   /* theme via ⌘K / command bar */
  .sidenav .user-menu { width: auto; }
  .sidenav .user-menu__btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .sidenav .user-menu__name, .sidenav .user-menu__btn svg:last-child { display: none; }
  .sidenav .user-menu__avatar { margin: 0; }
}

/* ── Command bar (slim top bar) ────────────────────────────────── */
.topbar { min-height: 48px; padding: 0 16px; gap: 14px; }
.topbar__left { max-width: 560px; }
.topbar .search-wrap input { padding: 8px 14px 8px 40px; border-radius: 8px; }
.topbar .search-wrap__icon { left: 13px; }
.cmdbar-clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px;
  color: var(--text-4); font-weight: 500; letter-spacing: 0;
}
/* refined top-bar: pair clock + market status, group the appearance toggles */
.topbar-status { display: inline-flex; align-items: center; gap: 10px; }
.topbar__sep { width: 1px; height: 18px; background: var(--border); display: inline-block; flex: none; }
.topbar__resources { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; }
.topbar__resource { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size:13px; font-weight: 700; white-space: nowrap; }
.topbar__resource { text-decoration: none; transition: border-color .12s, color .12s; }
.topbar__resource:hover { background: var(--accent); color: #1a1304; }
.topbar__resource::after { content: "↗"; margin-left: 6px; }
@media (max-width: 1080px) { .topbar__resources { display: none; } }
.topbar-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.topbar-seg .cmd-icon { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px; color: var(--text-4); }
.topbar-seg .cmd-icon:hover { background: var(--surface-3); color: var(--text); }
.topbar-seg .cmd-icon.is-on { background: var(--accent-bg); color: var(--accent-soft); }
.status-row { padding: 5px 11px; }

/* ── Terminal status bar (fixed bottom) ────────────────────────── */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 28px; z-index: 55;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--bg-raised); border-top: 1px solid var(--border);
  font-family: var(--sans); font-variant-numeric: tabular-nums; font-size:13px; color: var(--text-2);
}
@media (min-width: 861px) { .statusbar { left: 58px; } }
.statusbar b { color: var(--text); font-weight: 600; }
.statusbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.statusbar__spacer { margin-left: auto; }
.statusbar__seg { display: inline-flex; align-items: center; gap: 6px; }
/* leave room so content isn't hidden behind the status bar */
.view { padding-bottom: 40px; }

/* ════════════════════════════════════════════════════════════════
   COCKPIT DASHBOARD — dense no-scroll multi-pane
   ════════════════════════════════════════════════════════════════ */
.view--dashboard.is-active { display: flex; padding: 0; height: calc(100vh - 28px); }
.view--dashboard .legacy-dash { display: none; }
.cockpit {
  display: grid; grid-template-columns: 1.6fr 1fr 0.95fr; gap: 0; width: 100%;
  height: calc(100vh - var(--cp-top, 94px) - 28px); min-height: 0;
}
.cockpit__col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 0; container-type: inline-size; }
.cockpit__col--main { container-name: cp-main; }
.cockpit__col--main { min-width: 0; }
.cockpit__col > .cpane { flex: 1; }
.cockpit__col > .cpane.cpane--flex2 { flex: 0 1 auto; }   /* detail sizes to content; movers fills the rest */

.cpane { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.cpane:last-child { border-bottom: 0; }
.cpane__bar {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: var(--bg-raised);
}
.cpane__title { font-size:13px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--text-2); }
.cpane__tabs { display: flex; gap: 2px; }
.cpane__tab { font-size:13px; font-weight: 600; color: var(--text-3); padding: 4px 9px; border-radius: 6px; border: 0; background: none; cursor: pointer; }
.cpane__tab:hover { color: var(--text); }
.cpane__tab.is-active { background: var(--surface-2); color: var(--accent-soft); }
.cpane__filter { margin-left: auto; width: 120px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font:inherit; font-size:13px; padding: 4px 9px; outline: none; }
.cpane__filter:focus { border-color: var(--border-accent); }
.cpane__meta { font-size:13px; color: var(--text-4); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cpane__body { flex: 1; overflow: auto; min-height: 0; }

/* The universe toolbar shares a resizable pane with the fund table. Keep its
   controls inside that pane: the tabs yield first, while the count and export
   button stay whole and the old double-gap after Filter is removed. */
.cockpit__col--main .cpane__bar { overflow: hidden; }
.cockpit__col--main .cpane__tabs {
  min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none;
}
.cockpit__col--main .cpane__tabs::-webkit-scrollbar { display: none; }
.cockpit__col--main .cpane__tab { flex: 0 0 auto; }
.cockpit__col--main .cpane__filter { margin-left: 0; flex: 0 1 120px; min-width: 78px; }
.cockpit__col--main .cpane__meta { margin-left: 0; white-space: nowrap; flex: 0 0 auto; }
@container cp-main (max-width: 700px) {
  .cockpit__col--main .cpane__bar { gap: 6px; padding-inline: 8px; }
  .cockpit__col--main .cpane__tab { padding-inline: 7px; font-size:13px; }
  .cockpit__col--main .cpane__filter { flex-basis: 104px; }
}
@container cp-main (max-width: 560px) {
  .cockpit__col--main .cpane__bar { height: auto; min-height: 34px; flex-wrap: wrap; padding-block: 4px; }
  .cockpit__col--main .cpane__tabs { flex: 1 1 100%; }
  .cockpit__col--main .cpane__filter { flex-basis: 120px; }
}

/* dense cockpit table */
.cptable { width: 100%; border-collapse: collapse; font-size:13px; }
.cptable thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-raised); text-align: right;
  font-size:13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-4);
  padding: 6px 11px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none;
}
.cptable thead th.l { text-align: left; }
.cptable tbody td { text-align: right; padding: 5px 11px; border-bottom: 1px solid rgba(255,255,255,.04); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-theme="light"] .cptable tbody td { border-bottom-color: rgba(15,23,42,.05); }
.cptable tbody td.l { text-align: left; font-family: var(--sans); }
.cptable tbody tr { cursor: pointer; }
.cptable tbody tr:hover { background: rgba(255,255,255,.03); }
body[data-theme="light"] .cptable tbody tr:hover { background: rgba(15,23,42,.03); }
.cptable tbody tr.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.cp-tk { font-weight: 700; color: var(--accent-soft); }
.cp-nm { color: var(--text-3); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.cp-lvl { display: inline-block; font-size:13px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border-hover); border-radius: 4px; padding: 0 5px; font-family: var(--sans); }
.cp-up { color: var(--green); } .cp-down { color: var(--red); } .cp-flat { color: var(--text-4); }
/* number hierarchy: the price leads (heavier, full-contrast), the +/- deltas step back */
.cp-px { font-weight: 600; color: var(--text); }
.cptable tbody td.cp-up, .cptable tbody td.cp-down { font-weight: 450; }
.cp-exsoon { color: var(--accent-soft); font-weight: 600; }   /* ex-dividend within 7 days */
/* a special distribution still to come: one small gold mark beside the next regular ex-date (cockpit.js cpSpecialMark) */
.cp-spec { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; font-size:13px; font-weight: 700; line-height: 15px;
  color: #F5C451; background: rgba(245, 196, 81, .14); border: 1px solid rgba(245, 196, 81, .38); vertical-align: 1px; cursor: help; }
body[data-theme="light"] .cp-spec { color: #8a6410; background: rgba(176, 128, 20, .10); border-color: rgba(176, 128, 20, .35); }
/* a discount measured against an old NAV (cockpit.js cpNavOld): that NAV's date beside it, in the labels' amber */
.cp-asof { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; font-size:13px; font-weight: 700; line-height: 14px;
  color: #E0A82E; background: rgba(224, 168, 46, .13); vertical-align: 1px; cursor: help; }
body[data-theme="light"] .cp-asof { color: #8a5a00; background: rgba(176, 110, 0, .10); }

/* detail pane */
.cpdet { padding: 13px 14px; }
.cpdet__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cpdet__tk { font-size:22px; font-weight: 800; letter-spacing: -.02em; }
.cpdet__nm { color: var(--text-3); font-size:13px; }
.cpdet__px { margin-left: auto; text-align: right; }
.cpdet__px b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:20px; font-weight: 700; }
.cpdet__px span { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; display: block; }
.cpdet__spark { height: 56px; margin: 11px 0; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-raised); overflow: hidden; }
.cpdet__kv { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: dense; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cpkv { background: var(--bg); padding: 9px 11px; }
.cpkv--return { grid-column: 1 / -1; }
.cpkv__l { font-size:13px; text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 500; }
.cpkv__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:14px; font-weight: 700; margin-top: 3px; color: var(--text); }
.cpkv--y { background: var(--accent-bg); }
.cpkv__v--y { color: var(--accent-soft); }
.cpkv__sub { font-size:13px; font-weight: 600; color: var(--text-4); margin-left: 5px; font-family: var(--sans); }
.cpkv__sub.soon { color: var(--accent-soft); }
@container (max-width: 520px) {
  #cpDetailPane .cpdet__kv { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  #cpDetailPane .cpkv--return { grid-column: auto; }
}
.cpdet__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cpdet__btn { flex: 1 1 auto; white-space: nowrap; font-size:13px; font-weight: 600; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.cpdet__btn--p { flex-basis: 100%; }
.cpdet__btn:hover { border-color: var(--border-hover); color: var(--text); }
.cpdet__btn--p { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Only the descriptive Name column yields space while a divider is dragged.
   Prices, changes, yields, dates and every other data column keep their normal
   type size and cell spacing. */
.cockpit__col--main .cp-nm { max-width: clamp(58px, 13cqw, 156px); }
@container cp-main (max-width: 1400px) {
  .cockpit__col--main .cptable th:nth-child(2),
  .cockpit__col--main .cptable td:nth-child(2) {
    width: clamp(58px, 13cqw, 156px);
    max-width: clamp(58px, 13cqw, 156px);
  }
}

/* compact rows (movers / events / news) */
.cprow { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
body[data-theme="light"] .cprow { border-bottom-color: rgba(15,23,42,.05); }
.cprow:hover { background: rgba(255,255,255,.03); }
a.cprow--link { text-decoration: none; }
a.cprow--link:hover .cprow__nm { color: var(--text) !important; }
.cprow__tk { font-family: var(--mono); font-weight: 700; font-size:13px; width: 48px; color: var(--text-1, var(--text)); }
.cprow__nm { color: var(--text-3); font-size:13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cppill { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
.cppill.up { background: var(--green-bg); color: var(--green-bright); } .cppill.down { background: var(--red-bg); color: var(--red-bright); }
.cptag { font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-hover); color: var(--text-2); flex-shrink: 0; }
.cptag--a { color: var(--accent-soft); border-color: var(--border-accent); background: var(--accent-bg); }
.cpsub { padding: 9px 12px 5px; font-size:13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }

/* mobile: cockpit stacks + scrolls */
@media (max-width: 1080px) {
  .view--dashboard.is-active { height: auto; display: block; padding-bottom: 40px; }
  .cockpit { grid-template-columns: 1fr; height: auto; }
  .cockpit__col { border-right: 0; border-bottom: 1px solid var(--border); }
  .cpane__body { max-height: 420px; }
}

/* ════════════════════════════════════════════════════════════════
   UNIFY OTHER VIEWS with the flat, dense cockpit language
   (Screener / Research / Portfolio / Income / Admin / Fund detail)
   ════════════════════════════════════════════════════════════════ */
.view:not(.view--dashboard) { padding: 16px 18px 44px; }

/* flat panels — hairline borders, no heavy shadow/gradient */
.card, .card--full, .widget, .port-stat, .kpi, .portfolio-empty, .research-notes,
.cmdk__panel, .port-insight {
  border-radius: var(--radius) !important;
}
.card, .card--full { background: var(--bg-raised); border: 1px solid var(--border); }
.card:hover, .card--full:hover { border-color: var(--border); }
.card__header { padding: 12px 16px; }
.card__header h2 { font-size:13.5px; font-weight: 700; letter-spacing: 0.01em; }
.card__title h2 { font-size:14px; }
.card__hint { font-size:13px; }

/* KPI + portfolio stat tiles → flat, no gradient/lift/accent-bar */
.kpi, .stat, .port-stat {
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important;
}
.kpi::before, .stat::before { display: none !important; }
.kpi:hover, .stat:hover, .port-stat:hover { transform: none !important; }
.kpi .stat__value, .port-stat__value { font-size:22px; }

/* Admin "who's online" dot: gray = offline, green = active in the last 5 min. */
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--text-4); }
.online-dot--on { background: var(--green); box-shadow: 0 0 0 3px rgba(22,199,132,0.18); }

/* tables: denser + mono numerals (terminal feel) */
.fund-table { font-size:13px; }
.fund-table th { padding: 9px 12px; font-size:13px; background: var(--bg-raised); text-transform: uppercase; letter-spacing: 0.04em; }
.fund-table td { padding: 8px 12px; }
.fund-table td.r, .td-price, .td-change, .td-yield, .td-volume, .td-ticker, .td-exdate, .td-ath { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.td-ticker { color: var(--accent-soft); font-size:13px; }
.fund-table tbody tr:hover { background: rgba(255,255,255,.03); box-shadow: inset 2px 0 0 var(--accent); }
body[data-theme="light"] .fund-table tbody tr:hover { background: rgba(15,23,42,.03); }
.fund-table tbody tr:nth-child(even) { background: transparent; }

/* page headers (research) flatter */
.research-page-header__title, .port-toolbar__title { font-size:20px; font-weight: 800; letter-spacing: -.02em; }
.research-subtab.is-active { color: var(--accent-soft); }

/* buttons / chips — pills everywhere (Sep 27 2026). This rule is !important, so it used to beat every
   later pill rule and left these buttons as 9px rounded rectangles; it now states the pill itself. */
.btn, .export-btn, .event-filter, .ghost-btn, .recent-chip, .port-upload-btn,
.chart-btn, .chart-source-btn, .news-watch-toggle { border-radius: var(--radius-pill, 999px) !important; }

/* allocation/mini bars keep flat fill */
.alloc-row__fill--accent, .yield-bar__fill { background: var(--accent) !important; }

/* drop any leftover gradient text */
.dash-head__title em, .research-header__ticker { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--accent-soft) !important; }

/* command-bar icon button (theme toggle) */
.cmd-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); cursor: pointer; }
.cmd-icon:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-3); }

/* densify portfolio/income summary tiles → terminal-tight */
.port-stats-row { gap: 10px; }
.port-stat { padding: 12px 15px; gap: 5px; }
.port-stat__label { font-size:13px; letter-spacing: 0.05em; }
.port-stat__value { font-size:18px !important; }
.port-insight__body { padding: 14px 18px 16px; }
.alloc-row__track { height: 8px; }

/* resizable cockpit columns */
.cockpit__col { position: relative; }
.cpresizer { position: absolute; top: 0; bottom: 0; right: -3px; width: 7px; cursor: col-resize; z-index: 6; }
.cpresizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background 0.12s; }
.cpresizer:hover::after { background: var(--accent); }
@media (max-width: 1080px) { .cpresizer { display: none; } }

/* keyboard shortcuts overlay */
.kbd-help { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(3,5,10,0.6); backdrop-filter: blur(3px); }
.kbd-help[hidden] { display: none; }
.kbd-help__panel { width: 360px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border-hover); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.kbd-help__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size:13px; font-weight: 700; }
.kbd-help__x { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); border-radius: 6px; padding: 3px 9px; font-size:13px; font-family: var(--mono); cursor: pointer; }
.kbd-help__grid { padding: 10px 18px 16px; display: flex; flex-direction: column; }
.kbd-help__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size:13px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.kbd-help__row:last-child { border-bottom: 0; }
.kbd-help__row kbd { font-family: var(--mono); font-size:13px; background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: 5px; padding: 2px 7px; margin-left: 4px; color: var(--text); }

/* live pulse on status dots (subtle "live data" signal) */
@keyframes cefPulse { 0% { box-shadow: 0 0 0 0 rgba(46,160,67,0.45); } 70% { box-shadow: 0 0 0 5px rgba(46,160,67,0); } 100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); } }
.statusbar__dot, .status-row__dot { animation: cefPulse 2.4s ease-out infinite; }
/* smooth view fade-in */
.view.is-active { animation: cefFade 0.18s ease-out; }
@keyframes cefFade { from { opacity: 0.4; } to { opacity: 1; } }
.view--dashboard.is-active { animation: none; }   /* dashboard is height-flex; skip fade */

/* ════════════════════════════════════════════════════════════════
   BLOOMBERG PALETTE — amber accent on near-black (was violet)
   Overrides the redesign violet tokens. Still themeable.
   ════════════════════════════════════════════════════════════════ */
:root {
  --accent:      #e0a82e;
  --accent-dim:  #c7901a;
  --accent-soft: #f2c14e;
  --accent-bg:   rgba(224, 168, 46, 0.14);
  --border-accent: rgba(224, 168, 46, 0.38);
}
body[data-theme="light"] {
  --accent:      #9a6b00;
  --accent-dim:  #835a00;
  --accent-soft: #7a5500;
  --accent-bg:   rgba(154, 107, 0, 0.12);
  --border-accent: rgba(154, 107, 0, 0.34);
}
/* amber fills need dark text for contrast */
.cpdet__btn--p, .btn--primary, .theme-chip.is-active,
.admin-action--admin, .news-watch-toggle.is-on, .event-filter.is-active,
#customizeBtn.is-active, .research-subtab.is-active.btn,
.cpdet__btn--p:hover, .btn--primary:hover { color: #1a1304 !important; }

/* cockpit table: sort indicators + gold rating */
.cptable thead th[data-cps] { position: relative; }
.cptable thead th.cps-asc, .cptable thead th.cps-desc { color: var(--accent-soft); }
.cptable thead th.cps-asc::after { content: " ▲"; font-size:13px; }
.cptable thead th.cps-desc::after { content: " ▼"; font-size:13px; }
.cp-rating { color: var(--accent-soft); letter-spacing: -1px; }

/* cockpit detail: live chart region (sparkline → TradingView mini) */
.cpdet__chart { height: 104px; margin: 11px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); overflow: hidden; }
.cpdet__chart iframe { width: 100%; height: 100%; border: 0; display: block; }
.cpdet__sparkfill { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px; }
.cpdet__sparkfill svg { width: 100%; height: 80%; }
.cpdet__loading { color: var(--text-4); font-size:13px; font-family: var(--mono); }

/* density toggle: compact rows for power users */
.cmd-icon.is-on { color: var(--accent-soft); border-color: var(--border-accent); background: var(--accent-bg); }
body.cp-compact .cptable tbody td { padding: 2px 11px; font-size:13px; }
body.cp-compact .cptable thead th { padding: 4px 11px; }
body.cp-compact .fund-table td { padding: 4px 12px; }
body.cp-compact .fund-table th { padding: 6px 12px; }
body.cp-compact .cprow { padding: 4px 12px; }

/* cockpit universe CSV export button */
.cpane__exp { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); cursor: pointer; flex-shrink: 0; }
.cpane__exp:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-3); }

/* skeleton shimmer (first-paint loading) */
.cpskel { pointer-events: none; }
.cpskel__b { height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: cpShimmer 1.3s ease-in-out infinite; display: inline-block; }
@keyframes cpShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* visible, grippable resize handles (horizontal cols + vertical stacked panes) */
.cpresizer::after {
  content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 26px;
  transform: translateY(-50%); border-radius: 3px; background: var(--border-hover);
  transition: background .12s, height .12s; left: auto; right: 2px;
}
.cpresizer:hover::after { background: var(--accent); height: 44px; }
.cpvresizer { position: absolute; left: 0; right: 0; bottom: -3px; height: 8px; cursor: row-resize; z-index: 6; }
.cpvresizer::after {
  content: ""; position: absolute; left: 50%; top: 2px; width: 26px; height: 3px;
  transform: translateX(-50%); border-radius: 3px; background: var(--border-hover);
  transition: background .12s, width .12s;
}
.cpvresizer:hover::after { background: var(--accent); width: 44px; }
@media (max-width: 1080px) { .cpvresizer { display: none; } }

/* ── Scrolling ticker tape (Bloomberg-style, below indices) ───── */
.view--dashboard.is-active { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 94px - 28px); overflow: hidden; }
.cockpit { flex: 1; height: auto; min-height: 0; }
.cptape { flex: 0 0 30px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--border); background: var(--bg-raised); position: relative; }
.cptape__track { display: inline-flex; align-items: center; gap: 26px; padding-left: 18px; animation: cptape 90s linear infinite; will-change: transform; }
.cptape:hover .cptape__track { animation-play-state: paused; }
@keyframes cptape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cptape__i { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; cursor: pointer; color: var(--text-3); flex-shrink: 0; }
.cptape__i b { color: var(--text-2); font-weight: 700; margin-right: 5px; }
.cptape__i:hover b { color: var(--accent-soft); }
.cptape__i .cp-up { color: var(--green); } .cptape__i .cp-down { color: var(--red); }

/* Yield-by-Risk-Level bars (Movers pane → Yield tab) */
.cpyl { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.cpyl__row { display: grid; grid-template-columns: 28px 1fr auto 34px; align-items: center; gap: 9px; }
.cpyl__l { font-family: var(--mono); font-size:13px; font-weight: 700; color: var(--text-3); }
.cpyl__track { height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.cpyl__fill { height: 100%; border-radius: var(--radius-pill); min-width: 2px; }
.cpyl__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; font-weight: 700; color: var(--text); }
.cpyl__n { font-family: var(--mono); font-size:13px; color: var(--text-4); text-align: right; }

/* Universe → Heatmap tab (market heatmap tiles) */
.cpheat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 3px; padding: 8px; }
.cpheat__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--bg-raised); border-bottom: 1px solid var(--border); font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
.cpheat__mb { font-family: var(--mono); font-size:13px; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); cursor: pointer; text-transform: none; }
.cpheat__mb.on { background: var(--accent); border-color: var(--accent); color: #1a1304; }
.cpheat__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text); text-align: left; }
.cpheat__t:hover { border-color: var(--border-hover); }
.cpheat__t.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.cpheat__tk { font-family: var(--mono); font-weight: 700; font-size:13px; }
.cpheat__c { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; opacity: 0.92; }

/* Universe filter bar */
.cpfilters { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--bg); flex-wrap: wrap; flex-shrink: 0; }
/* uniform custom chevron so all the dropdowns read as one clean set */
.cpfilters select { appearance: none; -webkit-appearance: none; background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b93a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; font:inherit; font-size:13px; font-weight: 600; padding: 5px 24px 5px 9px; cursor: pointer; outline: none; transition: border-color .12s, color .12s; }
.cpfilters select:hover { border-color: var(--border-hover); color: var(--text); }
.cpfilters select:focus { border-color: var(--border-accent); }
/* action pills, right-aligned as one group */
.cpfilters__yc { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; font:inherit; font-size:13px; font-weight: 600; padding: 5px 9px; cursor: pointer; transition: border-color .12s, color .12s; }
.cpfilters__yc:hover { border-color: var(--border-hover); color: var(--text); }
.cpfilters__yc.is-on { border-color: var(--border-accent); color: var(--text); }
.cpfilters__yc .yc-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; opacity: .45; transition: opacity .12s; background: conic-gradient(var(--green) 0deg 120deg, var(--yellow) 120deg 240deg, var(--red) 240deg 360deg); }
.cpfilters__yc.is-on .yc-dot { opacity: 1; }
.cpfilters__clear { background: none; border: 0; color: var(--text-4); font-size:13px; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: 6px; }
.cpfilters__clear:hover { color: var(--text-2); background: var(--surface-2); }
/* ⚙ Filters button + popover panel + active-filter chips */
.cpfilters__morewrap { position: relative; display: inline-flex; }
.cpfilters__more { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; font:inherit; font-size:13px; font-weight: 600; padding: 5px 10px; cursor: pointer; transition: border-color .12s, color .12s; }
.cpfilters__more:hover { border-color: var(--border-hover); color: var(--text); }
.cpfilters__more.is-on { border-color: var(--border-accent); color: var(--text); }
.cpfilters__count { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #1a1304; font-size:13px; font-weight: 700; }
.cpfpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; width: 232px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cpfpanel[hidden] { display: none; }
.cpfpanel__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size:13px; font-weight: 600; color: var(--text-2); }
.cpfpanel__row select { min-width: 114px; }
.cpchips { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cpchip { display: inline-flex; align-items: center; gap: 3px; background: var(--accent-bg); border: 1px solid var(--border-accent); color: var(--accent-soft); border-radius: 6px; font-size:13px; font-weight: 600; padding: 3px 3px 3px 8px; white-space: nowrap; }
.cpchip__x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 0; border-radius: 4px; background: none; color: var(--accent-soft); font-size:13px; line-height: 1; cursor: pointer; padding: 0; }
.cpchip__x:hover { background: var(--border-accent); color: var(--text); }

/* Capital Trend card (fund detail) — NAV erosion / compounding verdict */
/* NAV and total return share one cell — neither is readable without the other. */
.cppair { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cppair__nav { color: var(--text-3); font-weight: 600; }
.cppair__arw { color: var(--text-4); font-size:13px; }
.cppair__tr { font-weight: 800; }

/* Distribution record — compact form, cockpit detail panel. */
.cppr[hidden] { display: none; }
.cppr { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.cppr__line { font-size:13px; color: var(--text-3); line-height: 1.5; }
.cppr__ok { color: var(--green); font-weight: 700; }
.cppr__bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg-raised); gap: 1px; }
.cppr__seg { display: block; min-width: 2px; }
.cppr__seg--inc { background: var(--green); }
.cppr__seg--gain { background: var(--accent); }
.cppr__seg--roc { background: var(--yellow); }
.cppr__lg { font-size:13px; color: var(--text-4); }

/* Distribution record — payment streak + what the payout was actually made of. */
.payrec__body { display: flex; flex-direction: column; gap: 12px; }
.payrec__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.payrec__badge { font-size:13px; font-weight: 800; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.payrec__badge--ok { color: var(--green); background: rgba(22,199,132,.11); border: 1px solid rgba(22,199,132,.35); }
.payrec__meta { font-size:13px; color: var(--text-3); }
.payrec__bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 1px; }
.payrec__seg { display: block; min-width: 3px; }
.payrec__seg--inc { background: var(--green); }
.payrec__seg--gain { background: var(--accent); }
.payrec__seg--roc { background: var(--yellow); }
.payrec__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size:13px; color: var(--text-3); }
.payrec__legend span { display: inline-flex; align-items: center; gap: 6px; }
.payrec__legend b { color: var(--text); font-weight: 700; }
.payrec__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.payrec__dot--inc { background: var(--green); }
.payrec__dot--gain { background: var(--accent); }
.payrec__dot--roc { background: var(--yellow); }

.cap-trend__body { display: flex; flex-direction: column; gap: 14px; }
.cap-trend__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cap-trend__stat { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; background: var(--bg-raised); }
.cap-trend__l { font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-4); }
.cap-trend__v { font-family: var(--mono); font-size:15px; font-weight: 700; color: var(--text); }
.cap-trend__v.pos { color: var(--green); }
.cap-trend__v.neg { color: var(--red); }
@media (max-width: 640px) { .cap-trend__stats { grid-template-columns: repeat(2, 1fr); } }
.cap-trend__key { border-top: 1px solid var(--border); padding-top: 12px; }
.cap-trend__key-title { font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-bottom: 6px; }
.cap-trend__key-p { font-size:13px; color: var(--text-2); line-height: 1.5; margin: 0 0 8px; }
.cap-trend__key-p i { font-style: italic; color: var(--text); }
.cap-trend__key-p b { color: var(--text); }
.cap-trend__key-note { color: var(--text-3); }
/* Key as a hover popover (collapsed by default) */
.cap-trend { overflow: visible; } /* let the Key popover escape the card */
.cap-trend .card__header { display: flex; align-items: center; gap: 10px; }
.cap-trend__keybtn { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); border-radius: 6px; font-size:13px; font-weight: 600; padding: 4px 9px; cursor: help; outline: none; flex-shrink: 0; }
.cap-trend__keybtn:hover, .cap-trend__keybtn:focus-visible { border-color: var(--border-hover); color: var(--text); }
.cap-trend__keypop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 320px; max-width: 86vw; background: var(--surface); border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 12px 14px; text-align: left; cursor: default; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, visibility .12s, transform .12s; }
.cap-trend__keybtn:hover .cap-trend__keypop, .cap-trend__keybtn:focus-within .cap-trend__keypop { opacity: 1; visibility: visible; transform: translateY(0); }
.cap-trend__keypop .cap-trend__key-p:last-child { margin-bottom: 0; }


/* Per-risk yield color tiers (applied to the Yield column in both table systems) */
.yld-green { color: var(--green); font-weight: 700; }
.yld-yellow { color: var(--yellow); font-weight: 700; }
.yld-red { color: var(--red); }

/* Yield color-coding editor popover */
.yc-pop { position: fixed; z-index: 300; width: 300px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border-hover); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-family: var(--sans); }
.yc-pop__head { display: flex; align-items: center; justify-content: space-between; font-size:13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.yc-pop__note { font-size:13px; color: var(--text-3); line-height: 1.45; margin-bottom: 12px; }
.yc-pop__note em { color: var(--text-2); font-style: italic; }
.yc-pop__grid { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 10px; align-items: center; }
.yc-h { font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-4); text-align: center; }
.yc-h b { text-transform: none; }
.yc-lbl { display: flex; flex-direction: column; }
.yc-lbl b { font-size:13px; font-weight: 600; color: var(--text); }
.yc-lbl i { font-size:13px; color: var(--text-4); font-style: normal; }
.yc-ip { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 0 7px; width: 64px; }
.yc-ip:focus-within { border-color: var(--border-accent); }
.yc-ip input { width: 100%; background: none; border: 0; outline: none; color: var(--text); font:inherit; font-family: var(--mono); font-size:13px; font-weight: 700; text-align: right; padding: 6px 0; -moz-appearance: textfield; }
.yc-ip input::-webkit-outer-spin-button, .yc-ip input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.yc-ip em { color: var(--text-4); font-style: normal; font-size:13px; }
.yc-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size:13px; color: var(--text-3); }
.yc-pop__foot button { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; font:inherit; font-size:13px; font-weight: 600; padding: 5px 9px; cursor: pointer; }
.yc-pop__foot button:hover { border-color: var(--border-hover); color: var(--text); }
.yc-sw { position: relative; display: inline-block; width: 34px; height: 19px; flex-shrink: 0; }
.yc-sw input { opacity: 0; width: 0; height: 0; }
.yc-sw span { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: background .15s, border-color .15s; }
.yc-sw span::before { content: ''; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; background: var(--text-3); border-radius: 50%; transition: transform .15s, background .15s; }
.yc-sw input:checked + span { background: var(--green); border-color: var(--green); }
.yc-sw input:checked + span::before { transform: translateX(15px); background: #fff; }

/* ── compare: row/tile markers + detail toggle ────────────────── */
.cptable tbody tr.cp-cmp td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cptable tbody tr.cp-cmp { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cpheat__t.cmp { outline: 2px solid var(--accent); outline-offset: -2px; }
.cpdet__btn--on { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; font-weight: 700; }

/* ── compare bar (floating, bottom center) ────────────────────── */
.cpcmpbar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 8px;
  background: var(--bg-raised); border: 1px solid var(--border-hover);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02);
  max-width: min(680px, calc(100vw - 24px)); flex-wrap: nowrap;
}
.cpcmpbar__lbl { font-size:13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); font-weight: 700; margin-right: 2px; flex: 0 0 auto; }
.cpcmpbar__chips { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.cpcmpbar__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px; font:inherit; font-size:13px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px;
  padding: 4px 6px 4px 10px; cursor: pointer; letter-spacing: 0.02em;
}
.cpcmpbar__chip span { color: var(--text-4); font-weight: 700; font-size:13px; line-height: 1; }
.cpcmpbar__chip:hover { border-color: var(--border-hover); }
.cpcmpbar__chip:hover span { color: var(--red); }
.cpcmpbar__go {
  flex: 0 0 auto;
  font:inherit; font-size:13px; font-weight: 700; background: var(--accent); color: var(--bg);
  border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; margin-left: 4px;
}
.cpcmpbar__go:disabled { opacity: 0.4; cursor: not-allowed; }
.cpcmpbar__go:not(:disabled):hover { filter: brightness(1.08); }
.cpcmpbar__clr { flex: 0 0 auto; font:inherit; font-size:13px; font-weight: 600; background: none; border: 0; color: var(--text-4); cursor: pointer; padding: 6px 8px; border-radius: 999px; }
.cpcmpbar__clr:hover { color: var(--text-2); }

/* ── compare modal ────────────────────────────────────────────── */
.cpcmp { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.cpcmp__back { position: absolute; inset: 0; background: rgba(3,5,9,0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cpcmp__modal {
  position: relative; background: var(--bg-raised); border: 1px solid var(--border-hover);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  width: min(960px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.cpcmp__hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cpcmp__hd b { font-size:14px; letter-spacing: -0.01em; }
.cpcmp__x { font:inherit; font-size:22px; line-height: 1; background: none; border: 0; color: var(--text-4); cursor: pointer; padding: 0 4px; }
.cpcmp__x:hover { color: var(--text); }
.cpcmp__scroll { overflow: auto; }
.cpcmp__t { width: 100%; border-collapse: collapse; font-size:13px; }
.cpcmp__t th, .cpcmp__t td { padding: 9px 14px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cpcmp__t thead th { position: sticky; top: 0; background: var(--bg-raised); z-index: 1; vertical-align: bottom; padding-bottom: 11px; }
.cpcmp__rh { text-align: left !important; color: var(--text-3); font-weight: 600; position: sticky; left: 0; background: var(--bg-raised); }
.cpcmp__tk { font-size:15px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.cpcmp__nm { font-size:13px; color: var(--text-4); font-weight: 500; max-width: 150px; white-space: normal; line-height: 1.25; margin-top: 2px; }
.cpcmp__spk { height: 42px; padding: 4px 10px !important; }
.cpcmp__spk svg { display: block; height: 38px; width: 100%; }
.cpcmp__spkl { color: var(--text-4); font-size:13px; }
.cpcmp__t td.cpcmp__win { background: color-mix(in srgb, var(--green) 12%, transparent); font-weight: 700; }
.cpcmp__badge { display: inline-block; margin-left: 6px; font-size:13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius: 4px; padding: 1px 4px; vertical-align: middle; }
.cpcmp__t tbody tr:hover td { background: var(--surface-2); }
.cpcmp__t tbody tr:hover td.cpcmp__win { background: color-mix(in srgb, var(--green) 16%, transparent); }
@media (max-width: 640px) {
  .cpcmpbar { bottom: 60px; padding: 6px 8px; }
  .cpcmp__nm { display: none; }
}

/* ── heatmap color legend ─────────────────────────────────────── */
.cpheat__leg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cpheat__leg i { font-style: normal; font-size:13px; color: var(--text-4); font-weight: 600; letter-spacing: 0.02em; }
.cpheat__legbar { width: 76px; height: 7px; border-radius: 3px; border: 1px solid var(--border); }
@media (max-width: 720px) { .cpheat__leg { display: none; } }

/* ── chart modal (roomy TradingView / sparkline) ──────────────── */
.cpchart__modal { width: min(1080px, 95vw); height: min(680px, 88vh); }
.cpchart__title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cpchart__title b { font-size:16px; font-weight: 800; letter-spacing: -0.01em; }
.cpchart__nm { font-size:13px; color: var(--text-4); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cpchart__tools { display: flex; align-items: center; gap: 12px; }
.cpchart__px { font-size:13px; font-weight: 600; color: var(--text-2); }
.cpchart__seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.cpchart__sb { font:inherit; font-size:13px; font-weight: 600; background: var(--surface-2); color: var(--text-3); border: 0; padding: 5px 10px; cursor: pointer; }
.cpchart__sb + .cpchart__sb { border-left: 1px solid var(--border); }
.cpchart__sb.on { background: var(--accent); color: var(--bg); }
.cpchart__sb:not(.on):hover { color: var(--text); }
.cpchart__body { flex: 1; min-height: 0; background: var(--bg); }
.cpchart__body iframe { width: 100%; height: 100%; }
.cpchart__spark { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cpchart__spark svg { max-height: 420px; }
.cpdet__chart--click { cursor: pointer; position: relative; }
.cpdet__chart--click:hover { outline: 1px solid var(--border-hover); outline-offset: -1px; }
@media (max-width: 640px) {
  .cpchart__nm, .cpchart__px { display: none; }
  .cpchart__modal { height: 78vh; }
}

/* ── scorecard modal (7-criteria, surfaced in cockpit) ────────── */
.cpscore__modal { width: min(720px, 94vw); max-height: 88vh; }
.cpscore__body { overflow: auto; padding: 16px 18px; }
.cpscore__body .research-scorecard { display: grid; gap: 10px; }
.cpscore__badge { font-size:14px; font-weight: 800; padding: 3px 11px; border-radius: 999px; letter-spacing: 0.01em; background: var(--surface-2); color: var(--text-2); }
.cpscore__badge.score-good { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.cpscore__badge.score-ok { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.cpscore__badge.score-bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* ── alerts: bell badge ───────────────────────────────────────── */
.cmd-icon--alerts { position: relative; }
.cmd-icon--alerts.on { color: var(--accent); }
.cmd-badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size:13px; font-weight: 800; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--bg-raised); }

/* ── alerts: toasts ───────────────────────────────────────────── */
.cptoasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.cptoast { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-raised); border: 1px solid var(--border-hover); border-left: 3px solid var(--accent); border-radius: 10px; padding: 11px 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.5); font-size:13px; color: var(--text); cursor: pointer; animation: cptoast-in 0.32s cubic-bezier(0.2,0.9,0.3,1); }
.cptoast.out { opacity: 0; transform: translateX(12px); transition: opacity 0.4s, transform 0.4s; }
.cptoast__bell { font-size:14px; line-height: 1.3; }
.cptoast__sub { color: var(--text-4); font-size:13px; margin-top: 2px; }
.cptoast__x { margin-left: auto; background: none; border: 0; color: var(--text-4); font-size:16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cptoast__x:hover { color: var(--text); }
@keyframes cptoast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ── alerts: modal ────────────────────────────────────────────── */
.cpalert__modal { width: min(560px, 94vw); max-height: 86vh; }
.cpalert__form { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cpalert__tk-in, .cpalert__val-in, .cpalert__sel { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font:inherit; font-size:13px; padding: 7px 9px; outline: none; }
.cpalert__tk-in { width: 74px; text-transform: uppercase; font-weight: 700; }
.cpalert__val-in { width: 84px; }
.cpalert__sel { cursor: pointer; }
.cpalert__tk-in:focus, .cpalert__val-in:focus, .cpalert__sel:focus { border-color: var(--border-accent); }
.cpalert__add { background: var(--accent); color: var(--bg); border: 0; border-radius: 7px; font:inherit; font-size:13px; font-weight: 700; padding: 7px 14px; cursor: pointer; margin-left: auto; }
.cpalert__add:hover { filter: brightness(1.08); }
.cpalert__list { overflow: auto; padding: 8px 16px; }
.cpalert__empty { color: var(--text-4); font-size:13px; padding: 22px 4px; text-align: center; line-height: 1.5; }
.cpalert__row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); font-size:13px; }
.cpalert__row.fired { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cpalert__tk { font-weight: 800; min-width: 48px; }
.cpalert__cond { color: var(--text-2); }
.cpalert__now { color: var(--text-4); font-size:13px; margin-left: auto; }
.cpalert__stat { font-size:13px; font-weight: 700; letter-spacing: 0.02em; min-width: 70px; text-align: right; color: var(--text-4); }
.cpalert__row.fired .cpalert__stat { color: var(--accent); }
.cpalert__rm { background: none; border: 0; color: var(--text-4); font-size:17px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cpalert__rm:hover { color: var(--red); }
.cpalert__foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--border); }
.cpalert__hint { font-size:13px; color: var(--text-4); }
.cpalert__clr { background: none; border: 0; color: var(--text-4); font-size:13px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.cpalert__clr:hover { color: var(--text-2); background: var(--surface-2); }

/* ── alert indicators in the grid ─────────────────────────────── */
.cp-bell { font-size:13px; margin-left: 5px; vertical-align: middle; filter: grayscale(0.5); opacity: 0.6; }
.cp-bell.fired { filter: none; opacity: 1; }
.cpheat__bell { position: absolute; top: 3px; right: 4px; font-size:13px; opacity: 0.55; }
.cpheat__bell.fired { opacity: 1; }
.cpheat__t { position: relative; }
.cpdet__alert { background: none; border: 0; cursor: pointer; font-size:14px; line-height: 1; padding: 4px; margin-left: 8px; border-radius: 7px; filter: grayscale(0.8); opacity: 0.5; align-self: center; transition: opacity 0.12s, filter 0.12s, background 0.12s; }
.cpdet__alert:hover { opacity: 1; filter: none; background: var(--surface-2); }
.cpdet__alert.armed, .cpdet__alert.fired { filter: none; opacity: 1; }
.cpdet__alert.fired { animation: cpbell-pulse 1.6s ease-in-out infinite; }
@keyframes cpbell-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* ── Portfolio glance pane ────────────────────────────────────── */
.cpport { min-height: 0; }
.cpport__sum { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.cpport__stat { flex: 1; padding: 10px 14px; border-right: 1px solid var(--border); }
.cpport__stat:last-child { border-right: 0; }
.cpport__sl { display: block; font-size:13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 3px; }
.cpport__sv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:16px; font-weight: 700; color: var(--text); }
.cpport__sv small { font-size:13px; font-weight: 600; opacity: 0.85; margin-left: 3px; }
.cpport__t { width: 100%; }
.cpport__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 38px 24px; }
.cpport__empty b { font-size:14px; }
.cpport__empty span { font-size:13px; color: var(--text-4); line-height: 1.5; max-width: 320px; }
.cpport__empty .cpdet__btn { flex: 0 0 auto; margin-top: 4px; }

/* ── detail: "what it does" plain-English blurb ───────────────── */
.cpdet__about { margin: 12px 0 4px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.cpdet__about-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cpdet__about-l { font-size:13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4); }
.cpdet__about-tag { font-size:13px; font-weight: 700; color: var(--accent-soft); background: var(--accent-bg); border: 1px solid var(--border-hover); border-radius: 999px; padding: 1px 8px; margin-left: auto; white-space: nowrap; }
.cpdet__about-t { font-size:13px; line-height: 1.5; color: var(--text-2); margin: 0; }

/* ── detail: private per-fund notes (synced with research view) ─ */
.cpdet__notes { margin-top: 9px; }
.cpdet__notes-tog { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--text-4); font:inherit; font-size:13px; font-weight: 600; cursor: pointer; padding: 3px 2px; border-radius: 6px; }
.cpdet__notes-tog:hover { color: var(--text-2); }
.cpdet__notes-tog.has { color: var(--accent-soft); }
.cpdet__notes-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cpdet__notes-saved { color: var(--green); font-weight: 600; font-size:13px; }
.cpdet__notes-body { margin-top: 6px; }
.cpdet__notes-area { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font:inherit; font-size:13px; line-height: 1.45; padding: 8px 10px; resize: vertical; outline: none; }
.cpdet__notes-area:focus { border-color: var(--border-accent); }
.cpdet__notes-area::placeholder { color: var(--text-4); }

/* ── detail tweaks: TV bar chart height, hero Open-full, compact bottom summary ── */
.cpdet__chart { height: 250px; border-radius: 10px; }
.cpdet__chart iframe { border-radius: 10px; }
.cpdet__btn--hero { flex-basis: 100%; background: var(--accent); border-color: var(--accent); color: var(--bg); font-size:13px; font-weight: 800; padding: 11px; letter-spacing: 0.01em; box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.cpdet__btn--hero:hover { filter: brightness(1.07); color: var(--bg); }
.cpdet__about--sm { margin-top: 11px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.cpdet__about--sm .cpdet__about-h { margin-bottom: 7px; }
.cpdet__about--sm .cpdet__about-t { font-size:13px; line-height: 1.62; color: var(--text-2); font-weight: 500; }
.cpdet__about--sm .cpdet__about-l { font-size:13px; color: var(--text-3); }
.cpdet__about--sm .cpdet__about-tag { font-size:13px; padding: 1px 7px; }
/* "What's happening" situation block — subtle accent so it reads as timely/analytical */
.cpdet__about--sit { margin-top: 8px; border-left: 2px solid var(--accent-soft); background: var(--accent-bg); }
.cpdet__about--sit .cpdet__about-l { color: var(--accent-soft); }

/* ── configurable right column ────────────────────────────────── */
.cpslot__lbl { font-size:13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4); }
.cpslot__pick { margin-left: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font:inherit; font-size:13px; font-weight: 600; padding: 4px 8px; cursor: pointer; outline: none; max-width: 160px; }
.cpslot__pick:hover { border-color: var(--border-hover); }
.cpslot__pick:focus { border-color: var(--border-accent); }
.cprc-empty { padding: 22px 16px; text-align: center; color: var(--text-4); font-size:13px; line-height: 1.5; }
.cprc-pf { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.cprc-pf > div { flex: 1; padding: 8px 12px; border-right: 1px solid var(--border); }
.cprc-pf > div:last-child { border-right: 0; }
.cprc-pf__l { display: block; font-size:13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; }
.cprc-pf b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:13px; font-weight: 700; }
.cpheat__grid--rc { grid-template-columns: repeat(3, 1fr); padding: 6px; gap: 3px; }
.cpheat__grid--rc .cpheat__t { padding: 5px 3px; }

/* ── legibility: muted grey text read too thin/dim at small sizes ── */
:root { --text-3: #99a1b2; }                       /* lift the dark-theme mid-grey */
body[data-theme="light"] { --text-3: #56627a; }    /* keep light-theme contrast strong */
.cp-nm, .cprow__nm { font-weight: 500; color: var(--text-2); }   /* fund names: brighter + a touch heavier */
.cpdet__about-t, .cprc-empty, .cpane__meta, .mock__nm,
.cprow__nm, .cpsub, .cpane__tab { font-weight: 500; }
.cpdet__about-t { color: var(--text-2); }

/* ── mobile: stack the cockpit's 3 columns into one scrollable feed ── */
@media (max-width: 860px) {
  .view--dashboard.is-active { display: block; height: auto; }
  .cockpit { display: block; height: auto; }
  .cockpit__col { display: block; border-right: 0; }
  .cockpit__col > .cpane, .cockpit__col > .cpane.cpane--flex2 { display: flex; flex: none; }
  .cpane { border-bottom: 1px solid var(--border); }
  .cpane__body { max-height: 70vh; overflow: auto; }
  .cpdet__chart { height: 220px; }
  #cpDetailClose { cursor: pointer; }
  #cpDetailClose:hover { filter: brightness(1.18); }
  #cpDetailPane.is-collapsed { flex: 0 0 34px; }
  #cpDetailPane.is-collapsed > .cpane__body { display: none; }
  /* Mobile is a two-state master/detail view. The desktop utility panes otherwise
     spill underneath the fund list when Detail closes, which looks like a broken
     stack and keeps the user from getting back to the list. */
  #cpDetailPane ~ .cpane, #cpRightCol { display: none !important; }
  .cockpit__col.is-detail-collapsed { display: none !important; }
  /* let the universe table breathe but stay scrollable */
  #cpSlot0, #cpSlot1, #cpSlot2 { max-height: 60vh; }
}

/* ── income: "% of total" mini-bar in Dividends by Fund ── */
.div-pct { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.div-pct__bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.div-pct__t { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; color: var(--text-2); }

/* ── income: monthly trend bar + concentration callout ── */
.mo-bar { display: inline-block; height: 8px; border-radius: 3px; background: var(--green); min-width: 2px; opacity: 0.85; }
.income-callout { display: flex; align-items: flex-start; gap: 9px; margin: 4px 16px 12px; padding: 10px 13px; border-radius: 9px; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size:13px; line-height: 1.5; color: var(--text-2); }
.income-callout__icon { color: var(--accent-soft); font-size:14px; line-height: 1.3; }
.income-callout strong { color: var(--text); }

/* ── income: "loss covered" bar (income+flips offsetting unrealized) ── */
.cov { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.cov__bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.cov__bar--full { background: var(--green); }
.cov__t { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; color: var(--text-2); font-weight: 600; }


/* Risk lens — discount vs the fund's own history, and measured rate sensitivity.
   Full-width rows: these read as sentences, not as numbers in a grid cell. */
.cpkv--wide { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; }
.cpkv--wide .cpkv__l { flex: 0 0 auto; }
.cpkv--wide .cpkv__v { margin-top: 0; margin-left: auto; text-align: right; font-family: var(--sans); font-size:13px; }
.cpkv--wide .cpkv__sub { display: block; margin-left: 0; margin-top: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* "vs Own" holds short values (−2.6σ); it doesn't need the default cell padding. */
.cptable th[data-cps="discZ"], .cptable td.cp-z { padding-left: 4px; padding-right: 6px; }

/* Total return leads; NAV trails as a small grey qualifier. A CEF's NAV falls every time
   it distributes, so it must never read as the headline number. */
.cppair__nav-lbl { font-family: var(--sans); font-size:13px; color: var(--text-4); margin-left: 9px; text-transform: uppercase; letter-spacing: .04em; }
.cppair__nav { font-size:13px; color: var(--text-4); margin-left: 4px; }

/* Status badges for funds that have stopped trading. Amber for the ones that continued
   into something else (merged, converted); grey for the ones that ended in cash. */
.fund-status { font-family: var(--sans); font-size:13px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 4px; border-radius: 3px; margin-left: 5px; vertical-align: middle; white-space: nowrap; }
.fund-status--merged, .fund-status--converted { background: rgba(255,210,31,.14); color: #ffd21f; }
.fund-status--liquidated { background: rgba(255,255,255,.07); color: var(--text-4); }

/* ── Income / Equity / REIT label beside the ticker ── */
.fund-kind { font-family: var(--sans, "Inter", sans-serif); font-size:13px; font-weight: 600; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: middle; white-space: nowrap; border: 1px solid transparent; }
.fund-kind--income { background: rgba(52,211,154,.12); color: var(--green-bright); border-color: rgba(52,211,154,.25); }
.fund-kind--equity { background: rgba(231,179,51,.12); color: #f0c552; border-color: rgba(231,179,51,.25); }
.fund-kind--reit   { background: rgba(96,165,250,.12); color: #8ec1ff; border-color: rgba(96,165,250,.28); }

/* Labels toggle (dashboard filter bar) */
.hide-kinds .fund-kind { display: none; }

/* ── Laptop screens ───────────────────────────────────────────────
   The cockpit is a fixed-height, three-column desk sized to the monitor. On a laptop
   (short viewport) the fund-detail pane, which sizes to its content, is taller than the
   column, and the column itself did not scroll — so the bottom of the detail and the
   pane beneath it were simply cut off. Below 860px of height each column scrolls on its
   own and the detail pane keeps its full height inside that scroll. */
@media (max-height: 860px) and (min-width: 1081px) {
  /* the universe table (main column) keeps its own inner scroll so the filter bar stays put */
  .cockpit__col:not(.cockpit__col--main) { overflow-y: auto; overscroll-behavior: contain; }
  .cockpit__col:not(.cockpit__col--main) > .cpane.cpane--flex2 { flex: 0 0 auto; }
  .cockpit__col:not(.cockpit__col--main) > .cpane { flex: 1 0 auto; min-height: 240px; }
  .cockpit__col:not(.cockpit__col--main) .cpane__body { overflow: visible; }
}

/* Labels on/off toggle inside the Ticker column header */
.cp-kindtog { font:inherit; font-size:13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-strong, rgba(255,255,255,.14)); background: transparent; color: var(--text-4); cursor: pointer; vertical-align: middle; line-height: 1.4; }
.cp-kindtog.is-on { color: var(--green-bright); border-color: rgba(52,211,154,.35); background: rgba(52,211,154,.10); }
.cp-kindtog:hover { color: var(--text); }

/* Heatmap: risk level in the tile's top-right corner + sort toggle */
.cpheat__t { position: relative; }
.cpheat__lvl { position: absolute; top: 4px; right: 5px; font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .03em; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.85); }
.cpheat__sortlbl { margin-left: 10px; }

/* ── Headings: one language across every view ──────────────────────────────
   The Tracker's bar is the model: a hairline strip carrying the view's name in
   mono uppercase amber, a divider, then a short descriptor, with any controls
   pushed right. Card titles inside a view speak the same way one step quieter,
   so a page reads as a terminal rather than an article. */
.viewbar {
  display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 2px; background: var(--bg-raised);
}
.viewbar__name, .port-toolbar__title, .research-page-header__title {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent)); white-space: nowrap; margin: 0;
}
.viewbar__tag {
  font-family: var(--mono); font-size:13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-4); padding-left: 10px; border-left: 1px solid var(--border); white-space: nowrap;
}
/* Portfolio and Income keep their own toolbars because the broker and export buttons live
   there; they are restyled in place rather than having their controls moved. */
.port-toolbar {
  min-height: 32px; padding: 0 10px; margin-bottom: 6px; gap: 10px;
  border: 1px solid var(--border); border-radius: 2px; background: var(--bg-raised);
}
.port-toolbar__actions { margin-left: auto; }
@media (max-width: 720px) { .viewbar__tag { display: none; } }

/* Card titles: the quiet half of the same voice. */
.card__header h2,
.compare-controls__title, .browse-toolbar__title, .watch-toolbar__title {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
#viewResearch .card__header h2 { font-size:13px; }
/* The reader-set text sizes still scale these; without these two the rules in styles.css
   would be overridden here and the control would stop working on headings. */
body[data-text-size="large"] .card__header h2,
body[data-text-size="large"] #viewResearch .card__header h2 { font-size:13px; }
body[data-text-size="xlarge"] .card__header h2,
body[data-text-size="xlarge"] #viewResearch .card__header h2 { font-size:13.5px; }
body[data-text-size="large"] .viewbar__name,
body[data-text-size="large"] .port-toolbar__title { font-size:13px; }
body[data-text-size="xlarge"] .viewbar__name,
body[data-text-size="xlarge"] .port-toolbar__title { font-size:14px; }

/* ── Housekeeping: one corner scale ────────────────────────────────────────
   styles.css and redesign.css each declared their own --radius-* values (6/8/12
   and 8/10/13), so the same token meant two different things depending on which
   file won, and the newer terminal panes were drawn at a hard 2px beside cards
   rounded at 13px. One scale, set here because cockpit.css loads last. */
:root {
  --radius-xs: 6px;    /* chips, badges, small controls */
  --radius-sm: 9px;    /* buttons, inputs, selects */
  --radius:    12px;   /* cards and panes */
  --radius-lg: 16px;   /* modals and overlays */
  --radius-xl: 20px;
  --radius-pill: 999px;
}
/* Containers and controls, normalised. Pills and circles keep their own shape. */
.card, .cpane, .trk__pane, .viewbar, .port-toolbar, .widget, .cpslot,
.kbd-help__panel, .legal-panel, .cpcmp__panel, .keys-modal__panel, .compare-modal__panel,
.proj__tablewrap, .table-wrap, .screener-filters, .research-panel { border-radius: var(--radius); }
.btn, .ghost-btn, .export-btn, .cpane__tab, .event-filter, .research-subtab, .filter-field select,
.filter-field input, .screener-filters select, .screener-filters input, .news-search__input,
.trk__in, .pj__fi input, .cpane__filter, .legal-panel__ok { border-radius: var(--radius-sm); }

/* ── Housekeeping: the rest of the heading language ────────────────────────
   Section and modal titles were still bold sans at 12–22px. Fund names, news
   headlines and holding rows stay sans and mixed-case on purpose: they are data
   a reader scans, not furniture. */
.adv-research__title, .cpchart__title, .state-flag__title, .watch-empty__title,
.method-card__title, .method-foot__title, .compare-modal__title, .keys-modal__title,
.portfolio-verifier__title, .exposure-section__title, #legalTitle {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.method-card__title { font-size:13px; color: var(--accent-soft, var(--accent)); }
#legalTitle { font-size:13px; color: var(--accent-soft, var(--accent)); }
#legalTitle small { font-family: var(--sans); font-size:13px; letter-spacing: .04em; text-transform: none; color: var(--text-4); }
/* The Method intro is a sentence, not a label — keep it readable, just quieter. */
.method-intro__title { font-size:20px; font-weight: 700; letter-spacing: -.01em; }
/* Both empty states use .portfolio-empty. */
.portfolio-empty h3, .watch-empty__title {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── Reader text size on the desk ──────────────────────────────────────────
   The dashboard is a fixed-height flex layout, so it cannot be zoomed the way the
   scrolling views are without pushing the panes past the viewport. Its type is
   scaled here instead, at the same 1.12 / 1.25 steps the zoom uses. Chrome that
   lives in a fixed-height strip (status bar, ticker tape) is left alone. */
body[data-text-size="large"] .cptable thead th { font-size:13px; }
body[data-text-size="large"] .cptable tbody td { font-size:13px; }
body[data-text-size="large"] .cpane__title { font-size:14px; }
body[data-text-size="large"] .cpane__meta { font-size:13px; }
body[data-text-size="large"] .cpkv__l { font-size:13px; }
body[data-text-size="large"] .cpkv__v { font-size:15.5px; }
body[data-text-size="large"] .cpheat__t { font-size:13.5px; }
body[data-text-size="xlarge"] .cptable thead th { font-size:13px; }
body[data-text-size="xlarge"] .cptable tbody td { font-size:14.5px; }
body[data-text-size="xlarge"] .cpane__title { font-size:15.5px; }
body[data-text-size="xlarge"] .cpane__meta { font-size:14px; }
body[data-text-size="xlarge"] .cpkv__l { font-size:13px; }
body[data-text-size="xlarge"] .cpkv__v { font-size:17.5px; }
body[data-text-size="xlarge"] .cpheat__t { font-size:15px; }

/* ── Every control on one radius ───────────────────────────────────────────
   Buttons were scattered across nine different corner radii (0, 4, 5, 6, 7, 8,
   10, 20 and 999px), so normalising only the common ones left the rest visibly
   rounder than their neighbours. Clickable controls take --radius-xs; badges and
   tags take --radius-sm, which is what the fund-kind, fund-status and heatmap
   level badges already use. Genuine circles (spinners, icon toggles) keep theirs. */
.mover-expand-btn, .palette-inline-action, .port-clear-btn, .cpchip, .cpchip__x,
.watch-table__tag-mini, .watch-table__remove, .cppill, .cap-trend__keybtn,
.cpfilters__clear, .cpfilters__more, .cpfilters__count, .cpdet__btn,
.compare-modal__btn, .compare-chip, .compare-chip__x, .cpcmpbar__chip,
.browse-filter, .theme-chip, .tab, .tabs, .method-card__pill {
  border-radius: var(--radius-sm);
}
.browse-table__tag, .watch-table__badge { border-radius: var(--radius-sm); }

/* ── Texture and depth ─────────────────────────────────────────────────────
   Flat rectangles read as unfinished. Raised surfaces get a barely-there light
   gradient from the top and a soft drop shadow, so panels sit above the page
   instead of being drawn on it; controls answer the pointer. Everything here is
   deliberately small — a couple of percent of white and a few pixels of blur. */
.card, .card--full, .cpane, .trk__pane, .viewbar, .port-toolbar, .widget,
.cpdet__kv, .port-stat, .kpi, .cmdk__panel, .legal-panel, .kbd-help__panel {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px -10px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .035);
}
/* Tables and their sticky headers must not carry the gradient — it banded the rows. */
.cptable, .cptable thead th, .cptable tbody td, .trk__table { background-image: none; }

/* Controls answer the pointer: a step up on hover, a step down on press. */
.btn, .ghost-btn, .export-btn, .cpane__tab, .event-filter, .research-subtab, .cmd-icon,
.chart-btn, .chart-source-btn, .news-watch-toggle, .port-upload-btn, .recent-chip,
.cpchip, .cppill, .cpdet__btn, .theme-chip, .browse-filter, .tab, .compare-modal__btn,
.legal-panel__ok, .cpfilters__more, .cpfilters__clear, .trk__link {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.btn:hover, .ghost-btn:hover, .export-btn:hover, .cpane__tab:hover, .event-filter:hover,
.research-subtab:hover, .cmd-icon:hover, .chart-btn:hover, .chart-source-btn:hover,
.news-watch-toggle:hover, .port-upload-btn:hover, .recent-chip:hover, .cpchip:hover,
.cpdet__btn:hover, .theme-chip:hover, .browse-filter:hover, .compare-modal__btn:hover,
.legal-panel__ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
}
.btn:active, .ghost-btn:active, .export-btn:active, .cpane__tab:active, .event-filter:active,
.research-subtab:active, .cmd-icon:active, .chart-btn:active, .news-watch-toggle:active,
.port-upload-btn:active, .recent-chip:active, .cpchip:active, .cpdet__btn:active,
.compare-modal__btn:active, .legal-panel__ok:active { transform: translateY(0); box-shadow: none; }

/* Inputs read as wells rather than outlines, and say clearly when they hold focus. */
input[type="text"], input[type="number"], input[type="search"], input[type="date"],
input:not([type]), select, textarea, .trk__in, .pj__fi input {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
input:focus, select:focus, textarea:focus, .trk__in:focus, .pj__fi input:focus {
  box-shadow: 0 0 0 3px rgba(231, 179, 51, .16), inset 0 1px 2px rgba(0, 0, 0, .2);
}

/* The Aa control drew a bordered box inside the button's own box. */
.cmd-icon .text-size-toggle__icon {
  border: 0; padding: 0; border-radius: 0; font-size:13px; font-weight: 800; letter-spacing: -.01em;
}

/* ── Projection inputs ─────────────────────────────────────────────────────
   Seven hairline cells with small grey labels and thin fields read as a form to
   survive rather than numbers to play with. Each field is now its own raised
   cell with a plain-language label and a figure big enough to be the point of
   the row. The grid wraps on its own instead of being pinned to seven columns. */
.pj__grid, .pj__grid--7, .pj__grid--draw {
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px; padding: 12px; background: transparent; border-top: 0;
}
.pj__f {
  gap: 8px; padding: 12px 13px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s ease;
}
.pj__f:focus-within { border-color: var(--border-accent, var(--accent)); }
.pj__fl {
  font-family: var(--sans); font-size:13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-2, var(--text));
}
.pj__fi { align-items: center; gap: 8px; }
.pj__fi input[type=text], .pj__fi input[type=number], .pj__fi input:not([type]) {
  max-width: none; width: 100%; font-size:18px; font-weight: 700; padding: 8px 10px;
  color: var(--text); background: var(--bg); border: 1px solid var(--border-strong, rgba(255,255,255,.16));
}
.pj__fi em { font-size:13px; color: var(--text-3); }
.pj__hint { width: 16px; height: 16px; font-size:13px; border-radius: var(--radius-xs); }
/* The draw row sits under the rest, separated by a rule rather than a color change. */
.pj__grid--draw { border-top: 1px solid var(--border); }
.pj__f--mode, .pj__f--chk { justify-content: space-between; }
.pj__seg { gap: 6px; }
.pj__seg button { padding: 7px 12px; font-size:13px; border-radius: var(--radius-sm); }

/* ── The Tracker is not a trading instrument ───────────────────────────────
   The desk can be dense mono shorthand; this is a personal record a reader in
   their sixties or seventies fills in once a month. It gets sentence case, the
   sans face, larger type and more contrast than the rest of the terminal, and
   the figures stay mono only where columns of numbers have to line up. */
.trk .cpane__title {
  font-family: var(--sans); font-size:15.5px; font-weight: 650; letter-spacing: -.01em;
  text-transform: none; color: var(--text);
}
.trk .cpane__meta {
  font-family: var(--sans); font-size:13px; text-transform: none; letter-spacing: 0;
  color: var(--text-3);
}
.trk .cpane__tab { font-family: var(--sans); font-size:13px; padding: 5px 11px; }
.trk__bar { min-height: 48px; padding: 0 14px; gap: 12px; }
.trk__brand {
  font-family: var(--sans); font-size:18px; font-weight: 700; letter-spacing: -.02em;
  text-transform: none; color: var(--text);
}
.trk__tag {
  font-family: var(--sans); font-size:13px; letter-spacing: 0; text-transform: none;
  color: var(--text-3); padding-left: 12px;
}
/* Summary tiles: the number is the point, the label has to be readable. */
.trk .cpkv { padding: 13px 14px; }
.trk .cpkv__l {
  font-family: var(--sans); font-size:13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-3);
}
.trk .cpkv__v { font-size:23px; letter-spacing: -.02em; }
.trk__kvsub { font-family: var(--sans); font-size:13px; color: var(--text-3); margin-top: 5px; }
/* The table: readable rows, headings that are words rather than abbreviations. */
.trk .cptable thead th {
  font-family: var(--sans); font-size:13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-3); padding: 9px 11px;
}
.trk .cptable tbody td { font-size:14px; padding: 9px 11px; }
.trk .trk__table tr.trk__grp th { font-family: var(--sans); font-size:13px; letter-spacing: .02em; text-transform: none; }
.trk__in { font-size:14.5px; padding: 8px 10px; min-width: 90px; }
.trk .trk__hint, .trk .trk__foot, .trk .trk__disc {
  font-family: var(--sans); font-size:13px; line-height: 1.6; color: var(--text-3);
}
.trk .trk__def dt { font-family: var(--sans); font-size:13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.trk .trk__def dd { font-size:13.5px; line-height: 1.6; color: var(--text-2, var(--text)); }
.trk .pj__hint { width: 18px; height: 18px; font-size:13px; }
.trk .legal-strip { font-size:13px; }

/* Start here: the first thing a new reader meets, so it is laid out rather than listed. */
.trk__start { margin-bottom: 8px; }
.trk__steps {
  list-style: none; margin: 0; padding: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 10px;
}
.trk__step {
  display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start;
  padding: 15px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trk__step__n {
  width: 30px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--accent-bg, rgba(231,179,51,.14)); color: var(--accent-soft, var(--accent));
  font-family: var(--sans); font-size:15px; font-weight: 700; line-height: 1;
}
.trk__step h4 {
  margin: 5px 0 5px; font-family: var(--sans); font-size:14.5px; font-weight: 650;
  letter-spacing: -.01em; color: var(--text); text-transform: none;
}
.trk__step p {
  margin: 0; font-family: var(--sans); font-size:13px; line-height: 1.6; color: var(--text-3);
}
.trk__step p b { color: var(--text-2, var(--text)); font-weight: 650; }
.trk__start__note {
  padding: 0 16px 15px; font-family: var(--sans); font-size:13px; line-height: 1.6; color: var(--text-4);
}
.trk__start__note b { color: var(--text-3); font-weight: 650; }

/* ── The Tracker's summary, and the ledger that stopped looking like a form ──
   Six identical grey tiles gave the page no focal point, and twelve rows of
   bordered input boxes made a personal record look like a tax return. The year's
   income is now the one large figure on the page, the rest support it, and a
   month you have already filled in reads as plain right-aligned money until you
   move onto it. */
.trk__hero { display: grid; grid-template-columns: minmax(240px,300px) minmax(240px,300px) 1fr; margin-bottom: 10px; }
.trk__hero__lead {
  padding: 22px 24px; border-right: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(231,179,51,.10), rgba(231,179,51,.02) 62%);
}
.trk__hero__l {
  font-family: var(--sans); font-size:13px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0; text-transform: none;
}
.trk__hero__v {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:42px; font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em; margin: 6px 0 7px; color: var(--accent-soft, var(--accent));
}
.trk__hero__s { font-family: var(--sans); font-size:13px; line-height: 1.5; color: var(--text-3); }
.trk__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trk__stat { padding: 16px 18px; border-left: 1px solid var(--border); }
.trk__stat:first-child { border-left: 0; }
.trk__stat__l { font-family: var(--sans); font-size:13px; font-weight: 600; color: var(--text-3); }
.trk__stat__v {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size:21px; font-weight: 700;
  letter-spacing: -.02em; margin: 7px 0 5px; color: var(--text);
}
.trk__stat__s { font-family: var(--sans); font-size:13px; line-height: 1.45; color: var(--text-4); }
@media (max-width: 1080px) {
  .trk__hero { grid-template-columns: 1fr; }
  .trk__hero__lead--proj { border-left: 0; }
  .trk__hero__lead { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* A filled-in month is money you read; an empty one invites a number. Neither
   needs a permanent box drawn round it. */
.trk__in {
  background: transparent; border: 1px solid transparent; box-shadow: none;
  text-align: right; color: var(--text); width: 100%;
}
.trk__in::placeholder { color: var(--text-4); }
.trk__in:hover { border-color: var(--border-hover, var(--border)); background: var(--surface-2); }
.trk__in:focus {
  border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(231,179,51,.16);
}
/* An empty cell still shows where a number goes, without shouting. */
.trk__in:placeholder-shown:not(:hover):not(:focus),
.trk__in[value=""]:not(:hover):not(:focus) { border-bottom-color: rgba(255,255,255,.07); }
.trk__table tbody tr:hover td { background: rgba(255,255,255,.022); }
.trk__table tbody tr.trk__cur td { background: rgba(231,179,51,.055); }

/* ── Spacing and shape, matching the fund panel ─────────────────────────────
   Sections were butting into each other with a six-pixel seam and a two-pixel
   corner left over from the sharp scale. Every block now sits in its own rounded
   card with real air between them, the way the fund detail panel reads. */
.view--tracker { padding: 16px 20px 56px; }
.trk__pane, .trk .cpane { border-radius: var(--radius); overflow: hidden; }
.trk__cols { gap: 12px; margin-bottom: 12px; }
.trk .trk__hero { margin-bottom: 12px; }
.trk > .cpane, .trk > section.cpane { margin-bottom: 12px; }
.trk .cpane__bar { padding: 13px 16px; }
.trk .cpane__body { padding-bottom: 2px; }
.trk .trk__hint { padding: 11px 16px; }
.trk .cptable tbody td { padding: 10px 14px; }
.trk .cptable thead th { padding: 11px 14px; }
.trk .cpkv, .trk__stat { padding: 15px 17px; }
/* The figures carry the page, so let them pop the way the fund panel's do. */
.trk .cptable tbody td { color: var(--text-2, var(--text)); }
.trk .trk__tot td { font-size:14.5px; }

/* ── Three specific lines, removed ─────────────────────────────────────────
   1. The rule under the scrolling ticker tape.
   2 & 3. "Start here" and "Your numbers" each hold a row of cards that are
   already boxes. Wrapping them in a second outline, with a rule under the
   heading that lines up with nothing inside, is what made them read as a frame
   with lines running through it. The heading becomes a label above its cards;
   the cards stay the only boxes. Every other line on the site is untouched. */
.cptape { border-bottom: 0; }

.trk__start, .pj__inputs {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.trk__start > .cpane__bar, .pj__inputs > .cpane__bar {
  border-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
}
.trk__start .trk__steps, .pj__inputs .pj__grid { padding-left: 0; padding-right: 0; }
.trk__start .trk__start__note { padding-left: 2px; padding-right: 2px; }
/* The page title is a title, not a box stacked on the one below it. */
.trk__bar, .viewbar, .port-toolbar {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ── The Tracker speaks the site's language again ──────────────────────────
   I had rewritten it in sans and sentence case to feel approachable, and the
   result read as a different product bolted on: white generic headings against
   a terminal everywhere else. The words stay plain — money at work, profit
   taken — but the type is the desk's: mono, uppercase, amber where it leads.
   Sizes stay a step larger than the desk, which is the part that was actually
   about readability. */
.trk .cpane__title {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.trk__brand {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.trk .cpane__meta, .trk__tag {
  font-family: var(--mono); font-size:13px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-4);
}
.trk .cpkv__l, .trk__stat__l, .trk__hero__l {
  font-family: var(--mono); font-size:13px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-4);
}
.trk__kvsub, .trk__stat__s, .trk__hero__s {
  font-family: var(--mono); font-size:13px; letter-spacing: 0; color: var(--text-4);
}
.trk .cptable thead th {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-4);
}
.trk .trk__hint, .trk .trk__foot, .trk .trk__disc, .trk__start__note, .trk__step p {
  font-family: var(--mono); font-size:13px; line-height: 1.55;
}
.trk__step h4 {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.trk__step__n { font-family: var(--mono); }
.trk .trk__def dt {
  font-family: var(--mono); font-size:13px; letter-spacing: .07em; text-transform: uppercase;
}
.trk .trk__def dd { font-family: var(--mono); font-size:13px; }

/* A field you type in looks like a field. Making them invisible until hovered was
   my idea and it was wrong — you cannot see where to put a number. */
.trk__in {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.trk__in:hover { border-color: rgba(255, 255, 255, .18) !important; }
.trk__in:focus {
  background: var(--bg) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(231, 179, 51, .15) !important;
}

/* No blend behind the headline figure — a flat tint, like the fund panel's first cell. */
.trk__hero__lead { background: rgba(231, 179, 51, .06) !important; }
/* The tax rates read as one sentence — Federal 24.0 % NIIT 3.8 % State 5.0 % — but each
   field inherited the ledger's full width, so every one wrapped onto its own line with the
   number stranded at the right. */
.trk__in--rate {
  width: 64px !important;
  min-width: 0 !important;
  display: inline-block;
  text-align: right;
  margin: 0 3px;
}
.trk__rates { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ── Readable, and without a rule between every part of a panel ─────────────
   Body text inside the Tracker sat on --text-4 (#5c6578) against #0a0a0b, which
   is close to unreadable at 11px — the "not visible" complaint. It moves up two
   steps. And every part of a panel was fenced off from the next: a rule under
   the heading, another under the add-row, another above the closing note. The
   panel is one block; its fill already says where it starts and ends. */
.trk .trk__hint, .trk .trk__foot, .trk .trk__empty-msg, .trk__start__note, .trk__step p {
  color: var(--text-2, #c9cfd8);
}
.trk .trk__dim, .trk .cpane__meta, .trk__tag, .trk__kvsub, .trk__stat__s, .trk__hero__s {
  color: var(--text-3);
}
.trk .trk__hint b, .trk .trk__foot b, .trk .trk__empty-msg b, .trk__start__note b { color: var(--text); }
.trk .cptable thead th { color: var(--text-3); }

/* One block, not four fenced-off strips. */
.trk .cpane__bar { border-bottom: 0; background: transparent; }
.trk .trk__addrow { border-bottom: 0; background: transparent; padding: 4px 14px 12px; }
.trk .trk__hint { border-top: 0; background: transparent; }
.trk .trk__rates { border-bottom: 0; background: transparent; }
/* Clearing saved information */
.trk__clear { border: 1px solid rgba(231,179,51,.35) !important; }
.trk__clearbody { padding: 14px 18px 16px; }
.trk__clearbody p { margin: 0 0 10px; font-family: var(--mono); font-size:13px; line-height: 1.6; color: var(--text-2, var(--text)); }
.trk__clearbody p b { color: var(--text); }
.trk__clearbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.trk__clearbtns button { font-size:13px; padding: 7px 13px; }
#trkClearAll { border-color: rgba(248,113,113,.45); color: var(--red); }
#trkClearAll:hover { background: rgba(248,113,113,.12); border-color: var(--red); color: #fca5a5; }

/* ── Risk mix ───────────────────────────────────────────────────────────────
   The working-capital-by-risk-level sheet as a page: amount, actual share,
   your goal, and the difference. Rules and space rather than boxes; figures in
   tabular mono so columns line up, and type large enough to read at 70. */
.view--risk { padding-bottom: 56px; }
.rk-top { margin: 22px 0 4px; }

.rk-split__bar { position: relative; display: flex; height: 16px; margin: 18px 0 10px;
  border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.rk-split__low { background: var(--green); }
.rk-split__high { background: var(--accent); }
.rk-split__goal { position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--text); opacity: .85; border-radius: 1px; }
.rk-split__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-3); font:400 13px var(--sans); }
.rk-split__legend span { display: inline-flex; align-items: center; gap: 7px; }
.rk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rk-dot--low { background: var(--green); } .rk-dot--high { background: var(--accent); }
.rk-split__mark { color: var(--text-4); }

.rk-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px;
  margin: 28px 0 30px; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rk-controls > label { display: flex; flex-direction: column; gap: 8px; }
.rk-controls > label > span:first-child { color: var(--text-3); font:500 13px var(--sans); }
.rk-controls small { color: var(--text-4); font-size:13px; max-width: 34ch; line-height: 1.5; }
.rk-ratio__in, .rk-cash__in { display: inline-flex; align-items: center; gap: 8px; }
.rk-ratio__in em, .rk-cash__in em { color: var(--text-4); font-style: normal; font-size:22px; }
.rk-controls input { width: 96px; min-height: 54px; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-raised); color: var(--text);
  font:600 26px var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.rk-cash__in input { width: 150px; font-size:22px; text-align: right; }
.rk-controls input:focus { outline: none; border-color: var(--accent); }
.rk-controls input:disabled { opacity: 1; color: var(--text-2); background: transparent; border-style: dashed; }
.rk-controls .btn { align-self: flex-end; }

.rk-note { margin: 22px 0 0; max-width: 78ch; color: var(--text-3); font:400 14px/1.7 var(--sans); }
.rk-foot { margin: 10px 0 0; max-width: 82ch; color: var(--text-4); font:400 13px/1.7 var(--sans); }
.rk-foot b { color: var(--red); }


/* Below the header row's width, each cell labels itself — a column of bare
   numbers with the header dropped is unreadable. */

/* Where the numbers came from, and the way back to change them. */
.rk-src { margin: 16px 0 0; color: var(--text-3); font:400 14px var(--sans); }
.rk-src b { color: var(--text-2); font-weight: 600; }

/* With nothing counted the bar previews the goal, so it reads as a plan rather
   than a real position. */
.rk-split__bar.is-goal { opacity: .45; }

/* Second lead figure: what the year comes to if the recorded months keep up.
   Set alongside income-so-far, separated by a rule rather than a box. */
.trk__hero__lead--proj { border-left: 1px solid var(--border); }
.trk__hero__v--muted { color: var(--text-4); }
@media (max-width: 1100px) {
  .trk__hero { grid-template-columns: 1fr 1fr; }
}

/* Five across on a desk, two across when there is not room, so the strip never
   leaves a row with a single figure stranded in it. */
@media (max-width: 1250px) { .trk__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .trk__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .trk__stats { grid-template-columns: 1fr; } }

/* ── Tracker: lower half, one section at a time ─────────────────────────────
   Plain buttons on the page, not a pill group inside a bordered strip. The
   active one is marked by the desk's amber and a rule under it, the same way
   the pane tabs read everywhere else. */
.trk__switch { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 14px; padding: 0 2px;
  border: 0; background: none; border-bottom: 1px solid var(--border); }
.trk__switch .cpane__tab {
  flex: 0 0 auto; margin: 0; padding: 10px 0 12px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--text-3);
  font:500 14px var(--sans); letter-spacing: 0; text-transform: none;
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.trk__switch .cpane__tab:hover { background: none; color: var(--text); }
.trk__switch .cpane__tab.is-active { background: none; color: var(--accent-soft, var(--accent));
  border-bottom-color: var(--accent); }
.trk__switch .cpane__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* `hidden` is display:none at the lowest specificity, and .trk__cols sets
   display:grid — so without this the panels never actually hide. */
#trkMore [data-more-panel][hidden] { display: none !important; }

@media (max-width: 700px) {
  .trk__switch { gap: 18px; }
  .trk__switch .cpane__tab { font-size:13.5px; }
}

/* ── Locked views ───────────────────────────────────────────────────────────
   A tier that does not include a screen still sees it, veiled, with one line
   saying what it does. No card and no panel: the message sits on the veil, in
   the desk's own heading language. */
/* A locked view is capped to roughly a screen: the blur is a backdrop, not a
   3,000px scroll, so the message always lands where the reader is looking. */
.view.is-locked { position: relative; max-height: 74vh; min-height: 420px; overflow: hidden; }
.view.is-locked > *:not(.lockwrap) { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
.lockwrap {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  overflow: auto;
  gap: 14px; padding: 0 clamp(24px, 7vw, 96px); max-width: 720px;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 62%, transparent 100%);
}
.lockwrap__eyebrow { margin: 0; font:700 13px var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent)); }
.lockwrap__title { margin: 0; font:500 clamp(28px, 3vw, 40px)/1.1 var(--sans);
  letter-spacing: -.03em; color: var(--text); }
.lockwrap__body { margin: 0; max-width: 46ch; color: var(--text-2);
  font:400 16px/1.65 var(--sans); }
.lockwrap__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.lockwrap__cta { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 22px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent, #1b1206);
  font:600 14px var(--sans); text-decoration: none; }
.lockwrap__cta:hover { filter: brightness(1.06); }
.lockwrap__upgrade { gap: 8px; }
.lockwrap__more { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-soft, var(--accent)); font:600 14px var(--sans); text-decoration: none; }
.lockwrap__more:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lockwrap__note { color: var(--text-3); font-size:13px; }
.method-lock { display: grid; gap: 10px; padding: 22px 24px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.method-lock__t { margin: 0; font:600 20px/1.25 var(--sans); color: var(--text); }
.method-lock__d { margin: 0; max-width: 60ch; color: var(--text-2); font-size:15px; line-height: 1.6; }
/* the panel inside a page (app.js lockPanelHtml: the fund page's research tabs), not over a whole view */
.lockwrap.lockwrap--inline { position: static; inset: auto; z-index: auto; padding: 28px 0 32px; background: none; overflow: visible; }
.tab[data-locked="1"] { opacity: .55; }
.tab[data-locked="1"]:hover { opacity: .85; }
@media (max-width: 760px) {
  .lockwrap { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 70%, transparent 100%); }
  .lockwrap__body { font-size:15px; }
}

/* ── Theme editor ───────────────────────────────────────────────────────────
   Presets as pictures of the theme rather than a swatch and a word, then the
   individual colors grouped behind tabs so the panel is not one long list. */
.palette-panel__body { padding: 18px 18px 40px; }
.psec { margin-bottom: 26px; }
.psec__h { margin: 0 0 12px; font:600 13px var(--sans); letter-spacing: -.01em; color: var(--text); }
.psec__hint { margin: 12px 0 0; color: var(--text-3); font:400 13px/1.6 var(--sans); }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pth { display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-3); }
.pth__img { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden;
  position: relative; box-shadow: inset 0 0 0 1px #ffffff14; transition: box-shadow .15s ease; }
.pth__bar { position: absolute; inset: 0 0 auto 0; height: 46%; display: block; }
.pth__panel { position: absolute; left: 16%; right: 8%; bottom: 10%; height: 40%;
  border-radius: 4px; display: flex; align-items: center; gap: 3px; padding: 0 5px; }
.pth__panel i { width: 8px; height: 3px; border-radius: 2px; background: #ffffff2e; display: block; }
.pth:hover .pth__img { box-shadow: inset 0 0 0 1px #ffffff2e; }
.pth.is-active .pth__img, .pth[aria-pressed="true"] .pth__img {
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px #ffffff14; }
.pth__name { font:500 13px var(--sans); line-height: 1.3; text-align: center; }
.pth.is-active .pth__name { color: var(--text); }

.ptabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
  border-radius: 999px; background: var(--surface-2, #ffffff0a); }
.ptab { flex: 1; padding: 7px 10px; border: 0; border-radius: 999px; background: none;
  color: var(--text-3); font:500 13px var(--sans); cursor: pointer; }
.ptab.is-active { background: var(--bg-raised); color: var(--text); }

.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.prow + .prow { border-top: 1px solid var(--soft-line, #ffffff0d); }
.prow[hidden] { display: none !important; }
.prow__l { color: var(--text-2); font:400 13px var(--sans); }
.prow__c { display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: 999px; background: var(--surface-2, #ffffff0a); }
.palette-panel input[type=color] { width: 26px; height: 26px; flex: 0 0 26px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; }
.palette-panel input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.palette-panel input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #00000026; }
.palette-panel .palette-hex { width: 78px; border: 0 !important; background: transparent !important;
  color: var(--text) !important; font:400 13px var(--mono); padding: 0; }
.palette-panel .palette-hex:focus { outline: none; }
.palette-panel .design-select { min-height: 36px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid transparent; background: var(--surface-2, #ffffff0a); color: var(--text); font-size:13px; }
.palette-inline-action { margin-top: 10px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--surface-2, #ffffff0a); color: var(--text-2); font:500 13px var(--sans); cursor: pointer; }
.palette-inline-action:hover { color: var(--text); }

/* ── Theme editor: a panel that floats clear of every edge ──────────────────
   It was flush to the right and ran the full height, so it read as part of the
   window frame. Inset on all four sides, rounded all round, and it scales in
   from the edge it belongs to. */
body .palette-panel {
  top: 22px; bottom: 22px; height: auto; max-height: calc(100vh - 44px);
  width: min(400px, calc(100vw - 44px));
  border: 1px solid var(--border-hover); border-radius: 22px;
  box-shadow: 0 30px 80px #0000008c, 0 4px 14px #00000047;
  overflow: hidden; display: flex; flex-direction: column;
  transform-origin: 100% 50%;
  transition: right .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
body .palette-panel:not(.is-open) { right: 22px; transform: translateX(calc(100% + 44px)) scale(.96); opacity: 0; pointer-events: none; }
body .palette-panel.is-open { right: 22px; transform: none; opacity: 1; }
.palette-panel__header { flex: 0 0 auto; padding: 17px 20px 15px; border-bottom: 1px solid var(--border); }
.palette-panel__body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }

/* Segmented choices, in the same pill language as the rest of the desk. */
.pseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); }
.pseg button { padding: 6px 11px; border: 0; border-radius: 999px; background: none;
  color: var(--text-3); font:500 13px var(--sans); cursor: pointer; white-space: nowrap; }
.pseg button:hover { color: var(--text); }
.pseg button.is-on { background: var(--bg-raised); color: var(--text); }
.prow { flex-wrap: wrap; }

/* The palette control sits with the other appearance icons in the topbar. */
#paletteToggle svg { display: block; }
#paletteToggle circle { transition: opacity .15s ease; }
#paletteToggle:hover circle { opacity: .85; }

/* ── The ? explainers ──────────────────────────────────────────────────────
   A plain tip is one line. A rich tip (data-tipid) is a small card: a heading, a
   sentence or two, and where it helps a table — the bracket table, the NIIT
   thresholds. Sized for a reader who wants to actually read it, not squint. */
.cptip--rich {
  padding: 0; border-radius: var(--radius-lg, 18px); overflow: auto;
  background: var(--surface, #14171d); border: 1px solid var(--border-strong, rgba(255,255,255,.16));
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  font:400 13.5px/1.6 var(--sans); color: var(--text-2, var(--text));
  pointer-events: auto; -webkit-overflow-scrolling: touch;
}
.cptip--rich > :first-child { margin-top: 0; }
.cptip--rich > :last-child { margin-bottom: 0; }
.cptip--rich h4 {
  margin: 0; padding: 13px 18px 11px;
  font:700 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.cptip--rich p { margin: 11px 18px; }
.cptip--rich p b { color: var(--text); font-weight: 700; }
.cptip--rich .cptip__n {
  margin: 0; padding: 11px 18px 13px; border-top: 1px solid var(--border);
  font-size:13px; line-height: 1.6; color: var(--text-3);
}
.cptip--rich .cptip__t { width: calc(100% - 36px); margin: 11px 18px; border-collapse: collapse; font-size:13px; }
.cptip--rich .cptip__t th {
  text-align: left; padding: 0 10px 6px 0; font:600 13px/1.3 var(--mono, var(--sans));
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-4, var(--text-3));
  border-bottom: 1px solid var(--border);
}
.cptip--rich .cptip__t td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.07)); white-space: nowrap; }
.cptip--rich .cptip__t tr:last-child td { border-bottom: 0; }
.cptip--rich .cptip__t td:first-child { color: var(--text); }
.cptip--rich .cptip__t th:last-child, .cptip--rich .cptip__t td:last-child { padding-right: 0; }

/* The rates row on the tax pane: three labelled fields rather than a run-on sentence. */
.trk .trk__rates { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; }
.trk__rates-l { font:600 13px/1 var(--sans); color: var(--text-2); }
.trk__rate { display: inline-flex; align-items: center; gap: 7px; }
.trk__rate-l { font:400 13px/1 var(--sans); color: var(--text-3); }
.trk__rate-p { font:400 13px/1 var(--sans); color: var(--text-4, var(--text-3)); margin-left: -3px; }
.trk__rates-hint { margin-left: auto; font:400 13px/1 var(--sans); color: var(--text-4, var(--text-3)); }
.trk__rates-hint b { color: var(--text-3); }
.trk .trk__rates .pj__hint { width: 17px; height: 17px; font-size:13px; border-radius: var(--radius-pill, 999px); }

/* ── Import is the button people are looking for ───────────────────────────
   It sat in the toolbar as one more grey chip among Help / Clear / Export, so
   nobody found it. Same row, but filled and carrying an icon: the one action
   on the bar that reads as a button rather than a tab. */
.trk .trk__import {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent, #0b0d12);
  font:700 13.5px/1 var(--sans); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.trk .trk__import svg { flex-shrink: 0; opacity: .9; }
.trk .trk__import:hover { filter: brightness(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.34); }
.trk .trk__import:active { transform: translateY(1px); }
.trk .trk__import:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The Portfolio's own broker import gets the same weight for the same reason. */
.port-upload-btn.port-upload-btn--primary {
  background: var(--accent); color: var(--on-accent, #0b0d12);
  border-color: transparent; font-weight: 700;
}
.port-upload-btn.port-upload-btn--primary svg { opacity: .9; }
.port-upload-btn.port-upload-btn--primary:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent, #0b0d12); }

/* ── Several accounts should look like several accounts ────────────────────
   Importing a second statement used to read as the first being replaced. The
   strip names each account that was read and what it is worth, and the table
   carries a "Held at" column, so a fund held twice is visibly held twice. */
.port-accts {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 2px 14px;
}
.port-accts__l {
  font:600 13px/1 var(--sans); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.port-acct {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 8px 14px; border-radius: var(--radius, 13px);
  background: var(--soft-2, rgba(255,255,255,.05));
  border: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.port-acct b { font:700 13px/1.2 var(--sans); color: var(--text); }
.port-acct i { font:400 13px/1.2 var(--sans); font-style: normal; color: var(--text-3); }
.port-accts__tot {
  margin-left: auto; font:700 13px/1 var(--sans); color: var(--accent);
}
.port-acct-col { white-space: nowrap; color: var(--text-3); font-size:13px; }
.port-acct-col__none { color: var(--text-4, var(--text-3)); }

/* Tax lots under a holding (Portfolio page). Sizes are em so body[data-text-size] scales them
   with the table; colors are tokens so light and dark both follow the theme. */
.port-lots-toggle {
  margin-left: 8px; padding: 2px 9px; vertical-align: middle;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-2); font:600 max(12px, 0.92em)/1.4 var(--sans); cursor: pointer; white-space: nowrap;
}
.port-lots-toggle:hover, .port-lots-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.port-lots-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fund-table tr.port-lots-row > td { padding: 4px 12px 16px 28px; background: var(--soft-2, var(--bg-raised)); }
.port-lots { overflow-x: auto; }
.port-lots__note { margin: 8px 0 8px; color: var(--text-2); font:400 max(13px, 1em)/1.5 var(--sans); }
.fund-table .port-lots__table { width: auto; min-width: min(100%, 760px); border-collapse: collapse; font-size:max(13px, 1em); }
.fund-table .port-lots__table th {
  position: static; padding: 8px 12px; text-align: right; background: none; cursor: default;
  color: var(--text-2); font:600 max(12px, 0.92em)/1.3 var(--sans); text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--fx-line, var(--border)); white-space: nowrap;
}
.fund-table .port-lots__table th::after { content: none; }
.fund-table .port-lots__table td {
  padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--fx-rule, var(--border));
  font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text);
}
.fund-table .port-lots__table td:first-child, .fund-table .port-lots__table .port-lots__acct,
.fund-table .port-lots__table .port-lots__term { font-family: var(--sans); }

.fund-table .port-lots__table th:first-child, .fund-table .port-lots__table td:first-child,
.fund-table .port-lots__table .port-lots__acct { text-align: left; }
.fund-table .port-lots__table td.stat--up { color: var(--green); }
.fund-table .port-lots__table td.stat--down { color: var(--red); }
.fund-table .port-lots__table .port-lots__term { color: var(--text-2); }
.fund-table .port-lots__table tbody tr:last-child td { border-bottom: 0; }

/* ── Pane headings that actually lead ──────────────────────────────────────
   These were mono-uppercase but painted --text-3, so every card on the page
   opened with a grey line you slide past. The site's heading color is the
   accent (.viewbar__name, .trk__brand); pane titles now use it too, with a
   short accent rule in front so the eye lands on the start of the card. Every
   value is a token, so the palette editor still drives all of it. */
.trk .cpane__title {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.trk .cpane__title::before {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .85; flex-shrink: 0;
}
.trk .cpane__bar {
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.09));
  background: linear-gradient(to bottom, var(--soft, rgba(255,255,255,.04)), transparent);
}
.trk .cpane__meta { color: var(--text-3); }

/* An account's name heads its own block of holdings: same accent, indented
   under the card title rather than competing with it. */
.trk__own .trk__grp td {
  background: var(--soft, rgba(255,255,255,.045));
  border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.09));
  font-weight: 700; color: var(--text);
  padding-top: 11px; padding-bottom: 11px;
}
.trk__own .trk__grp td:first-child {
  font-family: var(--mono); font-size:13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.trk__own .trk__grp + tr td { padding-top: 10px; }
.trk__also { font-size:13px; letter-spacing: .02em; margin-left: 6px; opacity: .8; }

/* ── When the screen is empty but the records are not ──────────────────────
   An empty account and an empty tracker look identical, which is how a
   misclick onto a blank ledger read as having lost months of typing. These
   two banners say which it is, and put the way back one click away. */
.trk__rescue {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 14px 18px;
  border-radius: var(--radius-lg, 18px);
  background: var(--soft-2, rgba(255,255,255,.05));
  border: 1px solid var(--soft-line, rgba(255,255,255,.12));
  border-left: 3px solid var(--accent);
  font:400 14px/1.6 var(--sans); color: var(--text-2);
}
.trk__rescue b { color: var(--text); font-weight: 700; }
.trk__rescue > div { flex: 1 1 260px; }
.trk__rescue__btn {
  flex-shrink: 0; padding: 9px 16px; border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent); color: var(--on-accent, #0b0d12);
  font:700 13px/1 var(--sans); cursor: pointer;
}
.trk__rescue__btn:hover { filter: brightness(1.08); }
.trk__rescue--recover { border-left-color: var(--green, #34d39a); }
.trk__rescue--recover .trk__rescue__btn { background: var(--green, #34d39a); color: #06231a; }

/* Starting a new account is a button of its own now, not a line in the
   account list one slot below "All accounts". */
.trk__newacct {
  padding: 7px 12px; border-radius: var(--radius-pill, 999px);
  background: transparent; border: 1px dashed var(--border-strong, rgba(255,255,255,.22));
  color: var(--text-3); font:600 13px/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.trk__newacct:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }

/* "not recorded" is not "$0". A holdings export carries no income, and printing
   a zero told people they had earned nothing all year. */
.trk__nr {
  font:400 13px/1 var(--sans); color: var(--text-4, var(--text-3));
  font-style: italic; cursor: help; white-space: nowrap;
}
.trk .trk__hint--income {
  margin: 0; padding: 13px 18px;
  border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
  font:400 13px/1.65 var(--sans); color: var(--text-3);
}
.trk .trk__hint--income b { color: var(--text-2); font-weight: 700; }

/* An account you keep but do not want added into the totals. */
.trk__count {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill, 999px);
  background: transparent; border: 1px solid var(--soft-line, rgba(255,255,255,.14));
  color: var(--text-4, var(--text-3)); font:600 13px/1.5 var(--mono);
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
.trk__count:hover { color: var(--accent); border-color: var(--accent); }
.trk__off td { opacity: .45; }
.trk__off .trk__count { opacity: 1; border-style: dashed; }
.trk__rescue--dup { border-left-color: var(--amber, var(--accent)); }

/* ═══════════════════════════════════════════════════════════════════════════
   ONE HEADING LANGUAGE, ONE BUTTON LANGUAGE
   ───────────────────────────────────────────────────────────────────────────
   The tools built recently each grew their own titles and their own buttons,
   so a page carried three or four greys doing the same job and half a dozen
   controls that looked like nothing in particular. Everything below is a
   token, so the palette editor still drives the whole thing.

   Headings come in three ranks and nothing else:
     1  the view you are in      .viewbar__name          accent, widest tracking
     2  a card inside it         .cpane__title etc.      accent + a short rule
     3  a column or a field      table th, kv labels     text-3, quiet, small
   The rank tells you where you are; the color is never decorative.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Rank 2: every card title on every tool ─────────────────────────────── */
.cpane__title,
.rk-top h2, .rk-levels h2,
.port-section__title, .portfolio-card__title,
.yc-pop__head, .cap-trend__key-title {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.cpane__title { font-size:13px; }
.trk .cpane__title { font-size:13px; }          /* the ledger runs one step larger */
.cpane__title::before,
.port-section__title::before {
  content: ""; width: 13px; height: 2px; border-radius: 2px; flex-shrink: 0;
  background: var(--accent); opacity: .8;
}
/* A card bar reads as the top of the card, not as another table row. */
.cpane__bar {
  background: linear-gradient(to bottom, var(--soft, rgba(255,255,255,.045)), transparent);
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.cpane__meta { color: var(--text-3); }

/* ── Rank 3: columns and field labels — quiet, but deliberate ───────────── */
.cptable thead th, .trk .cptable thead th, .fund-table thead th,
.cpkv__l, .cpyl__l, .cprc-pf__l, .cap-trend__l, .trk__stat__l,
.rk-controls > label > span:first-child, .port-accts__l {
  font-family: var(--mono); font-size:13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.cptable thead th { border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.1)); }

/* ── Buttons: one shape, three weights ─────────────────────────────────────
   Filled = the thing to do. Outlined = a real alternative. Quiet = a view
   switch. All three press when clicked and show a ring when tabbed to, which
   is most of what makes a control feel like a control. */
.btn, .cpane__tab, .port-upload-btn, .port-clear-btn,
.trk__import, .trk__rescue__btn, .trk__newacct, .pth, .ptab, .pseg button {
  font-family: var(--sans); font-weight: 650; cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease,
              transform .1s ease, box-shadow .13s ease, filter .13s ease;
}
.btn:active, .cpane__tab:active, .port-upload-btn:active,
.trk__import:active, .trk__rescue__btn:active, .trk__newacct:active,
.ptab:active, .pseg button:active { transform: translateY(1px); }

.btn:focus-visible, .cpane__tab:focus-visible, .port-upload-btn:focus-visible,
.trk__import:focus-visible, .trk__rescue__btn:focus-visible, .trk__newacct:focus-visible,
.pth:focus-visible, .ptab:focus-visible, .pseg button:focus-visible,
.trk__count:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* filled */
.btn--primary, .trk__import, .trk__rescue__btn, .port-upload-btn--primary {
  background: var(--accent); color: var(--on-accent, #0b0d12);
  border: 1px solid transparent; border-radius: var(--radius-pill, 999px);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn--primary:hover, .trk__import:hover, .trk__rescue__btn:hover, .port-upload-btn--primary:hover {
  filter: brightness(1.07); box-shadow: 0 3px 12px var(--accent-glow, rgba(0,0,0,.3)), inset 0 1px 0 rgba(255,255,255,.16);
}

/* outlined */
.btn--ghost, .port-upload-btn, .port-clear-btn {
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border-strong, rgba(255,255,255,.16));
  background: var(--surface-2); color: var(--text-2);
}
.btn--ghost:hover, .port-upload-btn:hover, .port-clear-btn:hover {
  border-color: var(--accent); color: var(--text); background: var(--surface-3);
}

/* quiet — the view switches. An active one is unmistakable. */
.cpane__tab, .ptab {
  border-radius: var(--radius-pill, 999px); padding: 5px 12px;
  border: 1px solid transparent; background: transparent; color: var(--text-3);
  font-size:13px; letter-spacing: .01em;
}
.cpane__tab:hover, .ptab:hover { color: var(--text); background: var(--soft-2, rgba(255,255,255,.06)); }
.cpane__tab.is-active, .ptab.is-active {
  color: var(--accent-soft, var(--accent));
  background: var(--accent-bg, rgba(224,168,46,.12));
  border-color: var(--border-accent, var(--accent));
}
/* styles.css carries `.trk .cpane__tab`, which outranks a single-class rule — so the
   tracker's own tabs need the shape stated at the same specificity or they keep the
   old 3px corners while every other tab on the site is a pill. */
.trk .cpane__tab { font-size:13px; padding: 7px 14px; border-radius: var(--radius-pill, 999px); border: 1px solid transparent; }
.trk .cpane__tab.is-active { border-color: var(--border-accent, var(--accent)); }

/* Cards keep the radius the site already uses; only the edge is unified, so every
   tool's cards sit on the same hairline instead of three different greys. No
   overflow clipping here — panes contain popovers and menus that must escape. */
.cpane, .trk__pane, .portfolio-card {
  border: 1px solid var(--soft-line, rgba(255,255,255,.09));
}

/* The palette grid reads as two runs — dark, then light — each ordered by hue,
   rather than the order the presets happened to be written in. */
.pgrid__group {
  grid-column: 1 / -1; margin: 4px 0 0;
  font:600 13px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.pgrid__group + .pth { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   RISK MIX — no boxes
   ───────────────────────────────────────────────────────────────────────────
   Two goes at this were wrong in the same way: the answer to "these controls
   look unfinished" is not to draw a container round them. Hairline rules,
   space and type do the work. Nothing here has a background, a border on more
   than one edge, or a corner radius.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── The figures ────────────────────────────────────────────────────────── */

/* The lead figure is larger and carries the accent. Nothing is drawn round it. */


.rk-src { margin: 18px 0 0; font:400 13px/2 var(--sans); color: var(--text-3); }
.rk-src .btn { margin-left: 10px; vertical-align: baseline; }

/* ── The controls ───────────────────────────────────────────────────────── */
.rk-controls {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px clamp(40px, 7vw, 96px);
  margin: 30px 0 30px; padding: 24px 0 0;
  background: none; border: 0; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
  border-radius: 0; box-shadow: none; overflow: visible;
}
.rk-controls > label {
  flex: 0 1 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 0; border: 0;
}
.rk-controls > label > span:first-child {
  font-family: var(--mono); font-size:13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.rk-controls small { color: var(--text-4); font:400 13px/1.6 var(--sans); max-width: 42ch; }

/* Figures you can type over. A rule under the number, not a box around it. */
.rk-ratio__in, .rk-cash__in {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.rk-controls .rk-ratio__in input,
.rk-controls .rk-cash__in input {
  width: auto; min-height: 0; padding: 2px 2px 7px; background: none;
  border: 0; border-bottom: 2px solid var(--soft-line, rgba(255,255,255,.14)); border-radius: 0;
  font-family: var(--mono); font-weight: 600; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; text-align: center;
  transition: border-color .13s ease, color .13s ease;
}
.rk-controls .rk-ratio__in input { width: 2.6ch; font-size:40px; }
.rk-controls .rk-cash__in input  { width: 8ch; font-size:32px; text-align: left; }
.rk-controls .rk-ratio__in input:focus,
.rk-controls .rk-cash__in input:focus { outline: none; border-bottom-color: var(--accent); }
/* the second half is worked out, not typed — same size, quieter, no rule */
.rk-controls .rk-ratio__in input:disabled {
  opacity: 1; color: var(--text-3); border-bottom-color: transparent;
}
.rk-ratio__in em, .rk-cash__in em {
  color: var(--text-4); font-style: normal; font-family: var(--mono);
  font-size:26px; font-weight: 400; padding: 0;
}
.rk-cash__in em { align-self: baseline; }
.rk-controls > .btn { align-self: flex-end; margin: 0 0 4px auto; }

/* Hide the spinners: they put a box-shaped control back on the page. */
.rk-controls input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.rk-controls input[type=number]::-webkit-outer-spin-button,
.rk-controls input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The goal cells in the table are the same idea: a figure with a rule under it. */

/* The levels table is a table, not a card. It had a border on all four sides from
   the card rule above (.rk-levels was in its selector list) — the box that survived
   three rounds of "no boxes" because every check ran on a test page that never
   loaded that rule. Rows keep their hairlines; nothing is drawn round the whole. */
.view--risk .rk-levels {
  border: 0; background: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--soft-line, rgba(255,255,255,.09)); padding-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RISK MIX — built for the whole width
   ───────────────────────────────────────────────────────────────────────────
   Every part of this view was its own stacked band that filled half the row:
   the table on fixed pixel columns (~890px however wide the screen), totals
   packed to the left, the goal controls on a line of their own. Now the mix
   you hold and the goal you set sit side by side as one comparison, the
   totals span the width in equal columns, and the table's actual-share column
   takes the spare width and uses it to draw the share against the goal. No
   containers anywhere: hairlines, space and type.
   ═════════════════════════════════════════════════════════════════════════ */
.view--risk .rk-top { margin: 20px 0 0; }

/* Headings lead each run: accent, bold, with a rule. */

/* Labels under the headings are tinted toward the accent, not left grey. */
.view--risk .rk-controls > label > span:first-child {
  color: var(--text-2);
  color: color-mix(in srgb, var(--accent-soft, var(--accent)) 62%, var(--text-2));
}

/* ── Hero: what you hold | the goal you set ─────────────────────────────── */

.view--risk .rk-split__bar { height: 14px; margin: 26px 0 14px; }
.view--risk .rk-split__legend { font-size:14px; gap: 8px 26px; }

/* ── Totals: equal columns across the full width ────────────────────────── */

/* ── The table ──────────────────────────────────────────────────────────── */
.view--risk .rk-levels { border-top: 1px solid var(--soft-line, rgba(255,255,255,.09)); padding-top: 30px; }

/* The two halves of the goal ratio are equal-width fields, so left-aligning both
   put all the slack between "70" and the slash and none between the slash and
   "30". Align each half toward the slash so the pair reads as one figure. */

/* ── Risk mix, one size down ────────────────────────────────────────────────
   The full-width layout was right but everything was set a step too loud: the
   hero figures ran to 92px on a wide screen. Same structure, calmer scale — the
   big figures about 30% smaller, the totals, verdict, headings, table rows and
   the space between sections each brought down in proportion. */

.view--risk .rk-split__bar { height: 12px; margin: 20px 0 12px; }
.view--risk .rk-split__legend { font-size:13px; }

.view--risk .rk-levels { padding-top: 24px; }

/* ── Risk mix: use the same rhythm as the site's other analysis tools ─────
   This is presentation-only. The labels, figures and editable values stay in
   the same order; these rules align their type, spacing and responsive grid
   with Projection and the Income Tracker. */
.view--risk { padding: 14px 18px 56px; }

.rk-hint {   /* the one .rk-hint rule (a second, older one was removed) */
  color: var(--text-2); font:400 16px/1.55 var(--sans);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  max-width: none; padding: 12px 0 18px; margin: 0;
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.rk-hint__copy { max-width: 76ch; }
.rk-hint__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rk-hint .btn { margin-left: 0; }
.rk-goal-map {
  align-self: stretch; padding: 16px 0 4px;
  border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.rk-goal-map__title {
  display: block; margin-bottom: 13px;
  font:600 13px/1.2 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.rk-goal-map__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rk-goal-map__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px; font:500 13px/1.35 var(--sans); color: var(--text-2);
}
.rk-goal-map__head > span { display: inline-flex; align-items: center; gap: 7px; }
.rk-goal-map__head strong {
  color: var(--text); font:600 13px/1.35 var(--mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-goal-map__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rk-goal-map__cell {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding-top: 8px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.rk-goal-map__cell em {
  color: var(--text-4); font:600 13px/1 var(--mono);
  letter-spacing: .08em; font-style: normal; text-transform: uppercase;
}
.rk-goal-map__cell b {
  color: var(--text-2); font:500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .view--risk { padding: 14px 18px 48px; }
  .rk-hint { align-items: flex-start; flex-direction: column; padding-bottom: 20px; }
  .rk-hint__actions { flex-wrap: wrap; }
  
  
  .rk-goal-map__groups { grid-template-columns: 1fr; gap: 16px; }

}


/* Keep the right side of the Risk Mix hero from making the whole first row
   artificially tall on a wide desk. The ratio, cash and reset action share the
   first line; the detailed goal split sits directly below them. This lets the
   totals begin as soon as the visible content ends instead of leaving a large
   empty field beneath the current-mix chart. */


/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTION — no boxes, full width
   ───────────────────────────────────────────────────────────────────────────
   This view was a stack of cards: a card round "Your numbers" holding seven
   bordered field cards each holding a bordered input, four filled KPI tiles on
   a filled grid, a card round the chart and a card round a 520px scrolling
   table with shaded header and first-column cells. Same content, no containers:
   hairlines between runs, labels tinted toward the accent, figures you type
   over carry a rule under them, and every run spans the width. Sizes match the
   risk mix after it was brought down a step.
   ═════════════════════════════════════════════════════════════════════════ */
.view--projection .trk .cpane,
.view--projection .trk .trk__pane,
.view--projection .trk .pj__inputs {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  margin: 0; padding: 26px 0 30px;
  border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.view--projection .trk .cpane__bar,
.view--projection .trk .pj__inputs > .cpane__bar {
  background: none; border: 0; padding: 0 0 18px; min-height: 0;
}
.view--projection .trk .cpane__title { font-size:13px; }
.view--projection .trk .cpane__meta { color: var(--text-3); }

/* Labels: the quiet rank, tinted toward the accent rather than grey. */
.view--projection .trk .pj__fl,
.view--projection .trk .cpkv__l,
.view--projection .trk .cptable thead th {
  font-family: var(--mono); font-size:13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
  color: color-mix(in srgb, var(--accent-soft, var(--accent)) 62%, var(--text-2));
}

/* ── Your numbers: seven figures across the width ───────────────────────── */
.view--projection .trk .pj__grid,
.view--projection .trk .pj__grid--7 {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 24px clamp(20px, 2.4vw, 44px); background: none; border: 0; padding: 0;
}
.view--projection .trk .pj__f {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 12px; min-width: 0;
}
.view--projection .trk .pj__fl { display: flex; align-items: center; gap: 6px; }
.view--projection .trk .pj__fi { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.view--projection .trk .pj__fi input[type=number] {
  flex: 1 1 auto; width: 100%; max-width: none; min-width: 0;
  background: none; border: 0; border-bottom: 2px solid var(--soft-line, rgba(255,255,255,.14)); border-radius: 0;
  padding: 2px 0 7px; font:600 26px/1.1 var(--mono); letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; text-align: left; box-shadow: none;
  transition: border-color .13s ease;
}
.view--projection .trk .pj__fi input:focus { outline: none; background: none; border-bottom-color: var(--accent); }
.view--projection .trk .pj__fi em { font:400 13px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
.view--projection .trk .pj__fi em:first-child { font-size:20px; color: var(--text-4, var(--text-3)); }
.view--projection .trk .pj__hint { border-radius: 999px; }

/* ── The four results ───────────────────────────────────────────────────── */
.view--projection .trk .cpdet__kv.trk__kv--4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px clamp(24px, 3vw, 60px); background: none; border: 0; border-radius: 0;
  margin: 0; padding: 26px 0 30px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.view--projection .trk .cpkv,
.view--projection .trk .cpkv.cpkv--y { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.view--projection .trk .cpkv__l { margin: 0 0 8px; }
.view--projection .trk .cpkv__v { font:500 clamp(22px, 1.6vw, 28px)/1.1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.view--projection .trk .cpkv__v.cpkv__v--y { font-size:max(13px, clamp(26px, 2.1vw, 36px)); color: var(--accent-soft, var(--accent)); }
.view--projection .trk .trk__kvsub { margin-top: 7px; font:400 13px/1.45 var(--sans); color: var(--text-3); }

/* ── Chart ──────────────────────────────────────────────────────────────── */
.view--projection .trk .pj__chart { height: 300px; padding: 0; }

/* ── Year by year: the whole table, no scroll box ───────────────────────── */
.view--projection .trk .cpane__body { max-height: none; overflow: visible; padding: 0; background: none; }
.view--projection .trk .cptable { width: 100%; }
.view--projection .trk .cptable thead th {
  background: none; position: static; padding: 0 14px 11px;
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.1));
}
.view--projection .trk .cptable tbody td {
  background: none; position: static; padding: 12px 14px; font-size:15px;
  border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.07));
}
.view--projection .trk .cptable th:first-child,
.view--projection .trk .cptable td:first-child { padding-left: 0; }
.view--projection .trk .cptable th:last-child,
.view--projection .trk .cptable td:last-child { padding-right: 0; }
.view--projection .trk .trk__hint { background: none; border: 0; padding: 16px 0 0; color: var(--text-3); }

@media (max-width: 1400px) {
  .view--projection .trk .pj__grid,
  .view--projection .trk .pj__grid--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .view--projection .trk .cpdet__kv.trk__kv--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .view--projection .trk .pj__grid,
  .view--projection .trk .pj__grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two things the render showed. A label that wraps ("Distributions withdrawn")
   pushed its figure below the others, so the row of figures didn't line up —
   align every field to the bottom so the figures share one line. And the inputs
   stretched to fill the column, leaving the unit stranded at the far end of a long
   rule; let each figure take its own width so "10 % / yr" reads as one value. */
.view--projection .trk .pj__grid,
.view--projection .trk .pj__grid--7 { align-items: end; }
.view--projection .trk .pj__fi input[type=number] {
  flex: 0 1 auto; width: 5.5ch; field-sizing: content; min-width: 2.2ch; max-width: 100%;
  padding-right: 4px;
}
.view--projection .trk .pj__fi input#projStart { width: 7ch; }
.view--projection .trk .pj__fi em:not(:first-child) { margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   INCOME TRACKER — no containers, controls that read as controls
   ───────────────────────────────────────────────────────────────────────────
   Scoped to #trk (the tracker host) so the Projection view, which reuses the
   .trk classes, is untouched. Cards become hairline-separated runs; the ledger's
   filled input blocks become figures on a rule; pill tabs become underline tabs;
   secondary actions become text buttons; Import stays the one filled button.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Runs, not cards ────────────────────────────────────────────────────── */
#trk .cpane, #trk .trk__pane, #trk .trk__start {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  margin: 0; padding: 24px 0 28px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
#trk .cpane__bar { background: none; border: 0; padding: 0 0 14px; min-height: 0; flex-wrap: wrap; row-gap: 10px; }
#trk .cpane__title { font-size:13px; }
#trk .trk__pane > .cpane__body, #trk .cpane__body { max-height: none; overflow-x: auto; background: none; padding: 0; }
#trk .trk__cols { gap: 0 clamp(28px, 3vw, 56px); margin: 0; }
#trk .trk__disc, #trk .trk__foot {
  background: none; border: 0; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
  border-radius: 0; padding: 18px 0 0; margin-top: 8px;
}

/* ── Headline figures, no tiles ─────────────────────────────────────────── */
#trk .trk__hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px clamp(24px, 3vw, 56px); padding: 24px 0 28px;
}
#trk .trk__hero__lead, #trk .trk__hero__lead--proj, #trk .trk__stat {
  background: none !important; border: 0 !important; border-radius: 0; padding: 0; box-shadow: none;
}
#trk .trk__hero__v { font-size:max(13px, clamp(30px, 2.4vw, 40px)); }
#trk .cpdet__kv.trk__kv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px clamp(24px, 3vw, 56px); background: none; border: 0; border-radius: 0;
  margin: 0; padding: 24px 0 28px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
#trk .cpkv, #trk .cpkv.cpkv--y { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
#trk .cpkv__v { font:500 clamp(22px, 1.6vw, 28px)/1.1 var(--mono); letter-spacing: -.02em; color: var(--text); }
#trk .cpkv__v.cpkv__v--y { font-size:max(13px, clamp(26px, 2.1vw, 36px)); color: var(--accent-soft, var(--accent)); }

/* Labels and column heads: the quiet rank, tinted toward the accent. */
#trk .trk__hero__l, #trk .trk__stat__l, #trk .cpkv__l, #trk .cptable thead th {
  color: var(--text-2);
  color: color-mix(in srgb, var(--accent-soft, var(--accent)) 62%, var(--text-2));
}

/* ── Tables: cells sit on the page ──────────────────────────────────────── */
#trk .cptable th, #trk .cptable td { background: none; }
#trk .cptable th.l, #trk .cptable td.l { background: var(--bg); }   /* sticky first column keeps the page color */
#trk .cptable thead th { border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.1)); }
#trk .cptable tbody td { border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.06)); }

/* The ledger's cells: a figure on a rule, not a grey block. */
#trk .trk__in {
  background: none; border: 0; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.12));
  border-radius: 0; box-shadow: none; padding: 5px 2px 5px; min-height: 0;
  font:500 14px/1.2 var(--mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums;
  transition: border-color .13s ease;
}
#trk .trk__in::placeholder { color: var(--text-4, var(--text-3)); }
#trk .trk__in:hover { border-bottom-color: var(--border-strong, rgba(255,255,255,.22)); }
#trk .trk__in:focus { outline: none; background: none; border-bottom-color: var(--accent); box-shadow: none; }
#trk .trk__in--note { text-align: left; font-family: var(--sans); }

/* ── View switches: underline tabs ──────────────────────────────────────── */
#trk .cpane__bar .cpane__tab,
#trk .trk__switch .cpane__tab {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 6px 1px 7px; margin: 0 20px 0 0; border-bottom: 2px solid transparent;
  font:600 13px/1 var(--sans); letter-spacing: 0; color: var(--text-3);
}
#trk .cpane__bar .cpane__tab:hover,
#trk .trk__switch .cpane__tab:hover { color: var(--text); background: none; }
#trk .cpane__bar .cpane__tab.is-active,
#trk .trk__switch .cpane__tab.is-active {
  color: var(--accent-soft, var(--accent)); background: none; border-bottom-color: var(--accent);
}
#trk .cpane__title + .cpane__tab, #trk .cpane__title ~ .cpane__tab:first-of-type { margin-left: 22px; }
#trk .trk__switch { gap: 0; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.09)); margin: 26px 0 0; padding: 0; }
#trk .trk__switch .cpane__tab { font-size:14px; padding: 10px 1px 11px; margin-right: 28px; margin-bottom: -1px; }

/* ── Actions: text buttons; Import is the one filled button ─────────────── */
#trk .trk__bar { background: none; border: 0; border-radius: 0; padding: 0; min-height: 52px; gap: 18px; }
#trk .trk__bar > .cpane__tab,
#trk .trk__barbtns .cpane__tab,
#trk .trk__clearbtns .cpane__tab {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 6px 0;
  font:600 13px/1 var(--sans); color: var(--text-2); letter-spacing: 0;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: color .13s ease, text-decoration-color .13s ease;
}
#trk .trk__bar > .cpane__tab:hover,
#trk .trk__barbtns .cpane__tab:hover,
#trk .trk__clearbtns .cpane__tab:hover { color: var(--accent-soft, var(--accent)); text-decoration-color: currentColor; background: none; }
#trk .trk__bar > .cpane__tab.is-active { color: var(--accent-soft, var(--accent)); text-decoration-color: currentColor; }
#trk .trk__barbtns { gap: 20px; }
#trk #trkClearAll { color: var(--red); }
#trk .trk__newacct {
  background: none; border: 0; border-radius: 0; padding: 6px 0;
  font:600 13px/1 var(--sans); color: var(--text-2);
}
#trk .trk__newacct:hover { color: var(--accent-soft, var(--accent)); }
#trk .trk__import { padding: 10px 18px; font-size:13.5px; }
#trk #trkPosAdd, #trk #trkLogAdd {
  background: var(--accent); color: var(--on-accent, #0b0d12); border: 0; border-radius: var(--radius-pill, 999px);
  padding: 7px 14px; font:700 13px/1 var(--sans);
}

/* Menus: a value on a rule with its own chevron, not a filled field. */
#trk .trk__sel {
  -webkit-appearance: none; appearance: none; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  border: 0; border-bottom: 1px solid var(--border-strong, rgba(255,255,255,.2)); border-radius: 0;
  padding: 7px 22px 7px 0; min-width: 0; height: auto;
  font:600 14px/1.2 var(--sans); color: var(--text); cursor: pointer;
}
#trk .trk__sel:focus { outline: none; border-bottom-color: var(--accent); }
#trk .trk__sel option { background: var(--surface, #16171a); color: var(--text); }

/* The checkbox reads as a sentence, not terminal shorthand. */
#trk .trk__chk { font:400 13px/1.3 var(--sans); color: var(--text-2); letter-spacing: 0; text-transform: none; gap: 8px; }
#trk .trk__chk input[type=checkbox] { width: 15px; height: 15px; margin: 0; }

/* Account "counted" toggle: quiet text, no pill. */
#trk .trk__count { border: 0; padding: 0; margin-left: 10px; font:600 13px/1 var(--mono); color: var(--text-3); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
#trk .trk__count:hover { color: var(--accent-soft, var(--accent)); text-decoration-color: currentColor; }

/* Start-here steps: numbered notes, not cards. */
#trk .trk__step { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

/* Callouts keep one rule on the left and lose their fill. */
#trk .trk__rescue { background: none; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 4px 0 4px 16px; }
#trk .trk__rescue--recover { border-left-color: var(--green, #34d39a); }

/* Ledger cells, take two. An older rule forces a filled, bordered block with
   !important, and its note is right that a field must show where the number goes —
   an invisible cell was rejected. So the cell keeps a clearly visible rule under it,
   strong enough to see at a glance, without the block round it. */
#trk .trk__in {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 1px solid var(--border-strong, rgba(255,255,255,.26)) !important;
}
#trk .trk__in:hover { border-bottom-color: var(--text-3) !important; background: transparent !important; }
#trk .trk__in:focus { border-bottom: 2px solid var(--accent) !important; background: transparent !important; box-shadow: none !important; }

/* The headline row: two lead figures, then the five smaller ones in their own
   wrapping grid. One auto-fit grid for all three blocks starved the group of five
   and overlapped its figures. */
#trk .trk__hero { grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(0, 3.2fr); align-items: start; }
#trk .trk__stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px clamp(18px, 2vw, 36px); }
#trk .trk__stat { min-width: 0; }
#trk .trk__stat__v { font-size:max(13px, clamp(19px, 1.35vw, 24px)); overflow-wrap: anywhere; }
@media (max-width: 1250px) { #trk .trk__hero { grid-template-columns: 1fr 1fr; } #trk .trk__stats { grid-column: 1 / -1; } }
@media (max-width: 720px)  { #trk .trk__hero { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ETF RESEARCH — what it pays, what it holds, its payment record
   Same language as the other rebuilt pages: no containers, hairlines between
   runs, accent headings with a rule, labels tinted toward the accent.
   ═════════════════════════════════════════════════════════════════════════ */
.etfr { padding: 6px 0 34px; }
.etfr__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; padding: 8px 0 22px; }
.etfr__tk { font:700 34px/1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.etfr__name { font:400 17px/1.3 var(--sans); color: var(--text-2); }
.etfr__kind { font:600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft, var(--accent)); }
.etfr__open { margin-left: auto; }
.etfr__figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px clamp(20px, 3vw, 56px);
  margin: 0; padding: 22px 0 26px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.etfr__figs dt, .etfr__pays th {
  margin: 0 0 8px; font:600 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
  color: color-mix(in srgb, var(--accent-soft, var(--accent)) 62%, var(--text-2));
}
.etfr__figs dd { margin: 0; font:500 clamp(20px, 1.5vw, 26px)/1.1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.etfr__figs dd small { display: block; margin-top: 6px; font:400 13px/1.4 var(--sans); color: var(--text-3); }
.etfr__figs > div:first-child dd { font-size:max(13px, clamp(24px, 1.9vw, 32px)); color: var(--accent-soft, var(--accent)); }
.etfr__cols {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 72px);
  padding-top: 24px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.etfr__h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px;
  font:700 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.etfr__h::before { content: ""; width: 18px; height: 2px; border-radius: 2px; flex-shrink: 0; background: var(--accent); }
.etfr__h span { margin-left: 6px; font:400 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.etfr__sec + .etfr__sec { margin-top: 26px; }
.etfr__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 32%) 64px; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.06)); font-size:14px; color: var(--text-2);
}
.etfr__row b { min-width: 0; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfr__row em { margin-left: 7px; font:500 13px var(--mono); font-style: normal; color: var(--text-3); }
.etfr__bar { position: relative; height: 6px; border-radius: 999px; background: var(--soft-2, rgba(255,255,255,.07)); }
.etfr__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.etfr__pct { text-align: right; font:500 13.5px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.etfr__paysec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09)); }
.etfr__pays { width: 100%; max-width: 720px; border-collapse: collapse; font-size:14px; }
.etfr__pays th { text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.1)); }
.etfr__pays td { padding: 9px 0; border-bottom: 1px solid var(--soft-line, rgba(255,255,255,.06)); color: var(--text-2); font-variant-numeric: tabular-nums; }
.etfr__pays th:last-child, .etfr__pays td:last-child { text-align: right; }
.etfr__pays td:last-child { font-family: var(--mono); color: var(--text); }
.etfr__note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09)); max-width: 92ch; font:400 13.5px/1.7 var(--sans); color: var(--text-3); }
.etfr__note a { color: var(--accent-soft, var(--accent)); }
@media (max-width: 980px) { .etfr__cols { grid-template-columns: 1fr; } .etfr__cols > * + * { margin-top: 26px; } }

/* A converted fund's badge now goes to the fund it became. */
.fund-status[data-successor] { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fund-status[data-successor]:hover, .fund-status[data-successor]:focus-visible { filter: brightness(1.15); outline: none; }

/* ── Manual portfolio holdings ─────────────────────────────────────────── */
.port-manual-btn { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--accent-soft, var(--accent)); }
.port-manual-btn:hover { border-color: var(--accent); color: var(--accent-soft, var(--accent)); }
body.has-manual-holding-modal { overflow: hidden; }
.manual-holding-overlay {
  position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
  padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
}
.manual-holding-overlay[hidden] { display: none; }
.manual-holding {
  width: min(540px, 100%); max-height: calc(100dvh - 48px); overflow: auto;
  padding: 24px; border: 1px solid var(--border-strong, rgba(255,255,255,.18));
  border-radius: var(--radius-lg); background: var(--bg-raised, var(--surface));
  box-shadow: 0 24px 80px rgba(0,0,0,.62);
}
.manual-holding__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.manual-holding__eyebrow {
  display: block; margin-bottom: 7px; font:700 13px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
.manual-holding__header h3 { margin: 0; font:600 22px/1.15 var(--sans); color: var(--text); }
.manual-holding__close {
  border: 0; background: none; color: var(--text-3); cursor: pointer;
  padding: 0 2px; font:300 28px/1 var(--sans);
}
.manual-holding__close:hover { color: var(--text); }
.manual-holding__intro { margin: 16px 0 22px; font:400 13px/1.55 var(--sans); color: var(--text-3); }
.manual-holding__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.manual-holding__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.manual-holding__field--account { grid-column: 1 / -1; }
.manual-holding__field > span:first-child {
  font:600 13px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
}
.manual-holding__field small { font:inherit; color: var(--text-4); }
.manual-holding__field input {
  width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--border-strong, rgba(255,255,255,.24));
  border-radius: 0; outline: none; background: transparent; color: var(--text);
  padding: 8px 2px 9px; font:500 16px/1.2 var(--mono); font-variant-numeric: tabular-nums;
}
.manual-holding__field input:focus { border-bottom: 2px solid var(--accent); padding-bottom: 8px; }
.manual-holding__field input::placeholder { color: var(--text-4); }
.manual-holding__money { display: flex; align-items: center; gap: 5px; }
.manual-holding__money em { color: var(--text-3); font:500 15px/1 var(--mono); font-style: normal; }
.manual-holding__match { min-height: 20px; margin-top: 15px; font:500 13px/1.4 var(--sans); color: var(--text-3); }
.manual-holding__match.is-found { color: var(--green); }
.manual-holding__match.is-error, .manual-holding__error { color: var(--red); }
.manual-holding__error { margin-top: 10px; font:500 13px/1.4 var(--sans); }
.manual-holding__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--soft-line, rgba(255,255,255,.09));
}
.source-badge--manual { background: rgba(231,179,51,.12); color: var(--accent-soft, var(--accent)); }
.manual-row-actions { display: flex; gap: 9px; margin-top: 5px; }
.manual-row-actions button {
  border: 0; padding: 0; background: none; cursor: pointer; color: var(--text-3);
  font:600 13px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.manual-row-actions button:hover { color: var(--accent-soft, var(--accent)); }
.manual-row-actions [data-manual-remove]:hover { color: var(--red); }
@media (max-width: 640px) {
  .manual-holding-overlay { align-items: end; padding: 0; }
  .manual-holding {
    width: 100%; max-height: calc(100dvh - 18px); padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .manual-holding__fields { grid-template-columns: 1fr; gap: 17px; }
  .manual-holding__field--account { grid-column: auto; }
  .manual-holding__actions .btn { min-height: 42px; }
}

/* "High over" period picker above the dashboard table (5/10/15/20y / since inception) */
.cp-highspan { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.cp-highspan__l { margin-right: 6px; font-size:max(13px, .72rem); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

/* 5Y column header: opens the period menu */
.cp-hsbtn { white-space: nowrap; background: none; border: 0; padding: 0; font:inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-bottom: 1px dashed currentColor; }
.cp-hsbtn::after { content: " \25BE"; font-size:13px; }
.cp-hsbtn:hover { color: var(--accent); }
.cp-hsmenu { position: fixed; z-index: 1000; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.cp-hsmenu[hidden] { display: none; }
.cp-hsmenu__l { font-size:13px; color: var(--text-3); padding: 4px 8px 6px; }
.cp-hsmenu button { background: none; border: 0; text-align: left; font:inherit; font-size:14px; color: var(--text-2); padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.cp-hsmenu button:hover { background: var(--surface-2); color: var(--text); }
.cp-hsmenu button.is-active { color: var(--accent); font-weight: 700; }
.cp-hsmenu { max-width: 240px; }
.cp-hsmenu__note { font-size:13px; line-height: 1.45; color: var(--text-3); padding: 8px 8px 4px; border-top: 1px solid var(--border); margin-top: 4px; }

/* paywalled news: a lock, and for one-fund headlines a link to the article beside the in-app fund page */
.news-lock { display: inline-block; margin-left: 8px; font-size:13px; color: var(--text-4); white-space: nowrap; }
.news-lock[data-news-ext] { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.news-lock[data-news-ext]:hover { color: var(--accent); }

/* Index strip at laptop widths (~1100px): nine items share the row, and a long change
   ("+478.62 (+0.93%)") ran over into the next item's price. Let it drop under the price. */
.index-item__right { flex-wrap: wrap; row-gap: 0; }

/* ── Readability floor (Sep 26 2026) ──────────────────────────────────────────
   Matt: "i hate this small font and its so thin u can barely see it … it looks very cheap."
   He was right on the numbers: headings' descriptors, the disclaimer line and helper notes
   were 10–10.5px mono in --text-4 (#565f72) on near-black, about 2.9:1 contrast (the minimum
   for body text is 4.5:1), for readers who are mostly over sixty. Every size under 11px in the
   three stylesheets went up 1.5px; the two quietest greys are lifted so "quiet" still reads;
   and the mono furniture is set at a medium weight, since the monospace faces render thin at 400. */
:root { --text-3: #a7afbf; --text-4: #7f889b; }
body[data-theme="light"] { --text-3: #4f5a70; --text-4: #6b7589; }

.viewbar__name, .port-toolbar__title, .research-page-header__title { font-size:13px; letter-spacing: .12em; }
.viewbar__tag { font-size:13px; font-weight: 500; letter-spacing: .05em; color: var(--text-3); }
.card__header h2, .compare-controls__title, .browse-toolbar__title, .watch-toolbar__title,
#viewResearch .card__header h2 { font-size:13px; }
.legal-strip, .legal-strip b, .legal-strip a { font-size:13px; color: var(--text-3); }
.legal-strip a:hover { color: var(--text-2); }
.cpane__meta { font-weight: 500; }
.rk-top small, .view small { font-size:13.5px; line-height: 1.5; color: var(--text-2); }
body[data-text-size="large"] .viewbar__name, body[data-text-size="large"] .port-toolbar__title { font-size:14.5px; }
body[data-text-size="xlarge"] .viewbar__name, body[data-text-size="xlarge"] .port-toolbar__title { font-size:16px; }
body[data-text-size="large"] .viewbar__tag { font-size:13.5px; }
body[data-text-size="xlarge"] .viewbar__tag { font-size:15px; }
body[data-text-size="large"] .card__header h2 { font-size:13.5px; }
body[data-text-size="xlarge"] .card__header h2 { font-size:15px; }

/* ── Market strip ─────────────────────────────────────────────────────────────
   Name small and quiet on top, the level large, the day's move as a tinted pill with an
   arrow, so up and down read at a glance without leaning on color alone. Items share the
   row equally, with no dividers between them. */
.indices-bar { gap: 0; padding: 8px 14px; }
.index-item { padding: 8px 16px; gap: 5px; border-right: 0; border-radius: 0; }
.index-item__label { font-family: var(--sans); font-size:13px; font-weight: 700; letter-spacing: .07em; color: var(--text-3); }
.index-item__right { gap: 4px 8px; align-items: center; }
.index-item__price { font-family: var(--sans); font-size:18px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--text); }
.index-item__change { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
  font-family: var(--sans); font-size:13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.index-item__change.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.index-item__change.down { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.index-item__change.flat { color: var(--text-3); background: var(--surface-2, rgba(255,255,255,.05)); }
.index-item__change.up::before { content: '▲'; font-size:max(13px, .72em); }
.index-item__change.down::before { content: '▼'; font-size:max(13px, .72em); }
/* Oct 8: items were sharing the row equally, so at laptop and pane widths a move like "−1,672.91 (−2.01%)"
   was wider than its slot and its pill ran into the next index. Now each item is at least as wide as its
   own content, the move sits under the level, and below 1500px only the percent shows. If the row still
   does not fit, it scrolls sideways rather than overlapping. */
.indices-bar { overflow-x: auto; scrollbar-width: none; }
.indices-bar::-webkit-scrollbar { display: none; }
.index-item { flex: 1 0 auto; min-width: max-content; }
.index-item__right { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px; }
.ix-pc::before { content: '('; } .ix-pc::after { content: ')'; }
@media (max-width: 1499px) {
  .ix-pt { display: none; }
  .ix-pc::before, .ix-pc::after { content: none; }
}
/* The ⌘K hint sits inside the search box; keep the typed text and placeholder clear of it. */
.search-wrap input#searchInput { padding-right: 52px; text-overflow: ellipsis; }
/* The wordmark followed the dark theme's near-white in light mode and vanished. */
body[data-theme="light"] .logo { color: var(--text); }

/* ── Settings menu (settings.js) ─────────────────────────────────────────────
   One labelled button in place of six unlabelled icons; each setting is a row with its name
   in words and its current value underneath, big enough to read and hit comfortably. */
.settings { position: relative; }
.settings__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface, transparent); color: var(--text-2);
  font:600 13.5px var(--sans); }
.settings__btn:hover, .settings.is-open .settings__btn { color: var(--text); border-color: var(--border-accent, var(--accent)); }
.settings__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 600; width: 300px; padding: 8px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.settings__panel[hidden] { display: none; }
.settings__h { margin: 8px 10px 4px; font:700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.settings__h:first-child { margin-top: 4px; }
.settings .settings__row { display: flex !important; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 50px;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.settings .settings__row:hover, .settings .settings__row:focus-visible { background: var(--surface-2, rgba(255,255,255,.06)); outline: none; }
.settings__ic { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--surface-2, rgba(255,255,255,.06)); color: var(--text-2); }
.settings__aa { font:800 14px var(--sans); color: var(--text); }
.settings__q { font:800 16px var(--sans); color: var(--accent); }
.settings__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.settings__txt b { font:600 15px var(--sans); color: var(--text); }
.settings__txt small { font:500 13px var(--sans); color: var(--text-3); }
#tourBtn .settings__txt b { color: var(--accent); }
body[data-text-size="large"] .settings__txt b { font-size:16.5px; }
body[data-text-size="xlarge"] .settings__txt b { font-size:18px; }
@media (max-width: 720px) {
  .settings__btn span { display: none; }
  .settings__btn { padding: 0 9px; }
  .settings__panel { position: fixed; right: 8px; left: 8px; top: 56px; width: auto; }
}
/* #textSizeToggle kept its old fixed icon size (38px, no padding) from the top-bar rules */
.settings #textSizeToggle { width: 100% !important; height: auto !important; padding: 8px 10px !important; }
.settings #textSizeToggle, .settings #textSizeToggle.is-active { border: 0 !important; background: transparent; box-shadow: none; }
.settings #textSizeToggle:hover { background: var(--surface-2, rgba(255,255,255,.06)); }

/* ═════════════════════════════════════════════════════════════════════════
   RISK PYRAMID  (Risk mix page — renderRiskMix / rkPyramidHtml / rkWirePyramid in app.js)
   The page reads top to bottom: a calm summary (the mix against the goal, one
   sentence, the split bar, four plain figures), then the pyramid, then "Adjust
   your goal" folded into one soft panel. Each layer: the trapezoid (outline =
   goal, fill = held, stripes = above goal) and beside it the level, what it
   holds, goal vs holding, the funds held as tinted ticker chips, a slim "gas
   tank" of how many of the site's funds there you own, and their yield. Tap a
   layer to open its full list right under it. Premium, not blocky: soft radii,
   elevation instead of outlines, sentence case, tabular figures; color only
   for meaning (green on goal, amber off it). Every color is a site token.
   ═════════════════════════════════════════════════════════════════════════ */
.view--risk .rk-top { margin: 18px 0 0; }
.view--risk .rk-levels[hidden] { display: none; }

/* ── Summary ───────────────────────────────────────────────────────────── */
.rk-sum {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 28px clamp(40px, 6vw, 120px); align-items: end; padding: 6px 0 34px;
}
.rk-sum p { margin: 0; }
.rk-sum__k { color: var(--text-2); font:600 15px/1.3 var(--sans); }
.rk-sum__ratio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px !important; }
.rk-sum__ratio strong {
  font:500 clamp(48px, 4.4vw, 68px)/1 var(--mono); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.rk-sum__ratio strong i { font-style: normal; font-weight: 300; color: var(--text-3); margin: 0 .08em; }
.rk-sum__ratio span { color: var(--text-2); font:500 18px/1.2 var(--sans); }
.rk-sum__ratio span b { color: var(--text); font:600 19px var(--mono); font-variant-numeric: tabular-nums; margin-left: 4px; }
.rk-sum__say { margin-top: 14px !important; color: var(--text-2); font:400 18px/1.55 var(--sans); max-width: 62ch; }
.rk-sum__say b { color: var(--text); font-weight: 650; }
.view--risk .rk-sum .rk-split__bar {
  height: 10px; margin: 22px 0 12px; overflow: visible;
  background: var(--fx-track); border-radius: 999px;
}
.view--risk .rk-sum .rk-split__low { border-radius: 999px 0 0 999px; }
.view--risk .rk-sum .rk-split__high { border-radius: 0 999px 999px 0; }
.view--risk .rk-sum .rk-split__goal { top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); opacity: 1;
  box-shadow: 0 0 0 2px var(--bg); }
.view--risk .rk-sum .rk-split__legend { gap: 6px 24px; color: var(--text-2); font:500 14px/1.4 var(--sans); }
.view--risk .rk-sum .rk-split__mark { color: var(--text-2); }
.rk-split__tick { display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--text); }
.view--risk .rk-sum .rk-src { margin: 14px 0 0; color: var(--text-2); font:400 14px/1.5 var(--sans); }
.rk-src__go {
  margin-left: 10px; padding: 5px 12px; border: 0; border-radius: var(--fx-radius-ctl, 999px);
  background: var(--fx-track); color: var(--text); font:600 13px/1.2 var(--sans); cursor: pointer;
}
.rk-src__go:hover { background: var(--fx-track-hi); }
.view--risk .rk-hint .btn {
  border: 0; border-radius: var(--fx-radius-ctl, 999px); background: var(--fx-track); color: var(--text);
  font:600 13.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; padding: 8px 16px;
}
.view--risk .rk-hint .btn:hover { background: var(--fx-track-hi); }
.view--risk .rk-hint { border-bottom: 0; padding-bottom: 8px; color: var(--text-2); }
.rk-src__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rk-sum__figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0;
}
.rk-sum__figs > div { min-width: 0; }
.rk-sum__figs dt { margin: 0 0 6px; color: var(--text-2); font:500 14px/1.3 var(--sans); }
.rk-sum__figs dd {
  margin: 0; color: var(--text); font:500 clamp(22px, 1.7vw, 28px)/1.1 var(--mono);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-sum__figs > div:first-child dd { color: var(--accent-soft, var(--accent)); font-weight: 600; }

/* A section heading: sentence case, with its descriptor beside it. */
.view--risk .rk-sec {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 22px;
  font:650 21px/1.25 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--text);
}
.view--risk .rk-sec::before { content: none; }
.rk-sec__meta { color: var(--text-2); font:400 15px/1.5 var(--sans); letter-spacing: 0; }

/* ── Pyramid ───────────────────────────────────────────────────────────── */
.rk-pyr { --pyr-gap: clamp(18px, 2.2vw, 36px); padding: 8px 0 12px; }
.rk-pyr__empty { margin: -6px 0 24px; max-width: 72ch; color: var(--text-2); font:400 16px/1.7 var(--sans); }
.rk-pyr__link {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent-soft, var(--accent)); font:600 16px/1.7 var(--sans);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.rk-pyr__link:hover { text-decoration-color: currentColor; }
.rk-pyr__shape { display: grid; gap: 8px; }

/* One layer: the shape on the left, what is in it on the right. Its color is the
   level's: green deepening toward level 1, amber reddening toward level 7. */
.rk-pyr__row, .rk-pyr__item { --lc: var(--green); }
.rk-pyr__row--low  { --lc: color-mix(in srgb, var(--green) calc(100% - (var(--lv) - 1) * 9%), var(--text-2)); }
.rk-pyr__row--high { --lc: color-mix(in srgb, var(--accent) calc(100% - (var(--lv) - 5) * 9%), var(--red)); }
.rk-pyr__item { --lc: var(--accent); }
.rk-pyr__row {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: 0 var(--pyr-gap); align-items: stretch;
}
.rk-pyr__cell { position: relative; min-height: 96px; display: flex; }
.rk-pyr__layer {
  position: relative; flex: 1 1 auto; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--lc) 15%, transparent);
  transition: filter .18s ease, background-color .18s ease;
}
.rk-pyr__row:hover .rk-pyr__layer, .rk-pyr__row.is-open .rk-pyr__layer, .rk-pyr__layer:focus-visible {
  filter: brightness(1.14) saturate(1.08);
  background-color: color-mix(in srgb, var(--lc) 24%, transparent);
  outline: none;
}
.rk-pyr__fill, .rk-pyr__over { position: absolute; top: 0; bottom: 0; }
.rk-pyr__fill { left: 0; right: 0; transform-origin: 50% 50%; background: var(--lc); }
.rk-pyr__over {
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--lc) 0 6px, color-mix(in srgb, var(--lc) 45%, transparent) 6px 12px);
}
.rk-pyr__num {
  position: relative; z-index: 1;
  font:700 24px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text);
}
.rk-pyr__layer.has-fill .rk-pyr__num { color: var(--bg); }
/* The dotted leader runs from the layer's slanted edge to what is in it. */
.rk-pyr__lead {
  position: absolute; top: 50%; right: calc(-1 * var(--pyr-gap) + 6px);
  border-top: 1px dotted color-mix(in srgb, var(--text-3) 70%, transparent);
  pointer-events: none;
}

/* What is in a layer: level, goal and holding, chips | status, tank, yield. */
.rk-pyr__note {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(210px, 1fr);
  gap: 8px 28px; align-items: center; min-width: 0; padding: 10px 14px; margin: 0 -14px 0 0;
  border-radius: var(--fx-radius, 12px); cursor: pointer; transition: background-color .15s ease;
}
.rk-pyr__row:hover .rk-pyr__note, .rk-pyr__item:not(.is-static):hover .rk-pyr__note { background: color-mix(in srgb, var(--text) 3%, transparent); }
.rk-pyr__row.is-open .rk-pyr__note, .rk-pyr__item.is-open .rk-pyr__note { background: color-mix(in srgb, var(--lc) 8%, transparent); }
.rk-pyr__item.is-static .rk-pyr__note { cursor: default; }
.rk-pyr__main, .rk-pyr__aside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rk-pyr__aside { align-items: flex-start; }
.rk-pyr__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rk-pyr__name { color: var(--text); font:650 18px/1.25 var(--sans); transition: color .15s ease; }
.rk-pyr__tag { color: var(--text-2); font:400 14px/1.35 var(--sans); }
.rk-pyr__row:hover .rk-pyr__name, .rk-pyr__row.is-open .rk-pyr__name,
.rk-pyr__item.is-open .rk-pyr__name { color: var(--accent-soft, var(--accent)); }
.rk-pyr__figs { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.rk-pyr__fig { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rk-pyr__fig em { font-style: normal; font:500 13.5px var(--sans); color: var(--text-2); }
.rk-pyr__fig b { color: var(--text); font:600 16px var(--mono); font-variant-numeric: tabular-nums; }
.rk-pyr__fig i { color: var(--text-2); font:400 14.5px var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }

/* The funds held there: soft tinted lozenges, no borders. */
.rk-pyr__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-pyr__chip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 10px;
  border-radius: var(--fx-radius-chip, 7px);
  background: color-mix(in srgb, var(--lc) 16%, transparent);
  color: var(--text-2); font:500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-pyr__chip b { color: var(--text); font:700 13.5px/1.3 var(--mono); }
.rk-pyr__chip--more { background: var(--fx-track); font-family: var(--sans); font-weight: 600; }
.rk-pyr__nochip { color: var(--text-3); font:400 14px/1.4 var(--sans); }

/* Status in words; the dot and color mark on goal (green) or off it (amber). */
.rk-pyr__status {
  display: inline-flex; align-items: center; gap: 8px;
  font:650 15px/1.25 var(--sans); color: var(--text); white-space: nowrap;
}
.rk-pyr__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; box-sizing: border-box; }
.rk-pyr__status.is-ok { color: var(--green); }
.rk-pyr__status.is-ok::before { background: var(--green); }
.rk-pyr__status.is-under::before { border: 2px solid var(--accent-soft, var(--accent)); }
.rk-pyr__status.is-over { color: var(--accent-soft, var(--accent)); }
.rk-pyr__status.is-over::before { background: var(--accent-soft, var(--accent)); }
.rk-pyr__status.is-none { color: var(--text-2); font-weight: 500; }
.rk-pyr__status.is-none::before { background: var(--fx-track-hi); }

/* The "gas tank": how many of the site's funds at this level you own. */
.rk-pyr__cov { display: flex; align-items: center; gap: 10px; color: var(--text-2); font:400 14px/1.35 var(--sans); }
.rk-pyr__cov b { color: var(--text); font:650 14.5px var(--mono); font-variant-numeric: tabular-nums; }
.rk-pyr__tank { position: relative; flex: 0 0 64px; height: 5px; border-radius: 999px; background: var(--fx-track-hi); overflow: hidden; }
.rk-pyr__tank i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--lc); }
.rk-pyr__yld { color: var(--text-2); font:400 14px/1.35 var(--sans); }
.rk-pyr__yld b { color: var(--text); font:600 14.5px var(--mono); font-variant-numeric: tabular-nums; margin-left: 2px; }
.rk-pyr__yld small { display: block; color: var(--text-3); font-size:13px; }
.rk-pyr__open {
  margin-top: 2px; padding: 5px 12px 5px 12px; border: 0; border-radius: var(--fx-radius-ctl, 999px);
  background: var(--fx-track); color: var(--text); font:600 13px/1.2 var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.rk-pyr__open::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
  transition: transform .18s ease;
}
.rk-pyr__open[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.rk-pyr__open:hover { background: var(--fx-track-hi); }
.rk-pyr__open:focus-visible, .rk-pyr__others-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A layer's full list opens under it as one raised panel. */
.rk-pyr__list {
  margin: 2px 0 10px; padding: 8px 22px 16px; border-radius: var(--fx-radius, 12px);
  background: var(--fx-surface); box-shadow: var(--fx-shadow);
  animation: rkPyrOpen .22s ease both;
}
.rk-pyr__list[hidden] { display: none; }
@keyframes rkPyrOpen { from { opacity: 0; transform: translateY(-4px); } }
.rk-pyr__tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rk-pyr__tbl th {
  padding: 10px 0 8px; text-align: right; color: var(--text-2); font:600 13px/1.3 var(--sans);
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--fx-rule); white-space: nowrap;
}
.rk-pyr__tbl td { padding: 11px 0; text-align: right; color: var(--text); font:500 15px/1.35 var(--mono); border-bottom: 1px solid var(--fx-rule); white-space: nowrap; }
.rk-pyr__tbl th + th, .rk-pyr__tbl td + td { padding-left: 20px; }
.rk-pyr__tbl th:first-child, .rk-pyr__tbl td:first-child { text-align: left; white-space: normal; width: 55%; }
.rk-pyr__tbl tbody tr:last-child td { border-bottom: 0; }
.rk-pyr__tbl tfoot td { border-top: 1px solid var(--fx-total); border-bottom: 0; font-weight: 650; }
.rk-pyr__tbl tfoot td:first-child { font:600 14px var(--sans); color: var(--text-2); }
.rk-pyr__tk { display: inline-block; min-width: 4.4em; margin-right: 10px; color: var(--text); font:700 15px var(--mono); }
.rk-pyr__fn { color: var(--text-2); font:400 14.5px/1.35 var(--sans); }
.rk-pyr__none { margin: 10px 0 4px; color: var(--text-2); font:400 15px/1.6 var(--sans); }
.rk-pyr__others-btn {
  margin: 14px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-2); font:600 14px/1.4 var(--sans);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fx-track-hi);
}
.rk-pyr__others-btn:hover { color: var(--text); text-decoration-color: currentColor; }
.rk-pyr__others[hidden] { display: none; }
.rk-pyr__others-h { margin: 12px 0 4px; color: var(--text-3); font:400 13.5px/1.5 var(--sans); }
.rk-pyr__others ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 32px;
}
.rk-pyr__others li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--fx-rule);
}
.rk-pyr__others .rk-pyr__tk { min-width: 4.2em; margin: 0; font-size:14px; color: var(--text-2); }
.rk-pyr__others .rk-pyr__fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:14px; }
.rk-pyr__oy { color: var(--text-2); font:500 14px var(--mono); font-variant-numeric: tabular-nums; }

/* The line between the steadier base and the livelier top. */
.rk-pyr__split {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: 0 var(--pyr-gap); align-items: center; margin: 10px 0;
}
.rk-pyr__split-line { height: 0; border-top: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.rk-pyr__split-labels { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.rk-pyr__split-labels > span {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px;
  color: var(--text); font:600 15px/1.3 var(--sans);
}
.rk-pyr__split-labels b { font:700 15.5px var(--mono); font-variant-numeric: tabular-nums; }
.rk-pyr__split-top b { color: var(--accent-soft, var(--accent)); }
.rk-pyr__split-low b { color: var(--green); }
.rk-pyr__split-labels small { color: var(--text-2); font:400 13.5px var(--sans); }
.rk-pyr__split-top { padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }

/* Beside the pyramid: ETFs, anything unrated, cash — side by side under the shape. */
.rk-pyr__beside { margin-top: 34px; }
.view--risk .rk-pyr__beside-h { margin: 0 0 12px; color: var(--text); font:650 17px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.rk-pyr__items { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.rk-pyr__items:has(> [data-row="unrated"]) { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.rk-pyr__items > .rk-pyr__list { grid-column: 1 / -1; }
.rk-pyr__item .rk-pyr__note { margin: 0 -14px; background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.rk-pyr__item.is-static .rk-pyr__note { grid-template-columns: 1fr; }
.rk-pyr__items:has(> [data-row="unrated"]) .rk-pyr__item .rk-pyr__note { grid-template-columns: 1fr; }

/* ── Adjust your goal: one soft panel, folded once a goal is saved ─────── */
.rk-adjust {
  margin: 34px 0 0; border-radius: var(--fx-radius, 12px);
  background: var(--fx-surface); box-shadow: var(--fx-shadow);
}
.rk-adjust__head {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; width: 100%;
  padding: 18px 56px 18px 22px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text);
  border-radius: var(--fx-radius, 12px);
}
.rk-adjust__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rk-adjust__t { font:650 18px/1.3 var(--sans); }
.rk-adjust__now { color: var(--text-2); font:500 14.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.rk-adjust__now b { color: var(--accent-soft, var(--accent)); font-family: var(--sans); font-weight: 600; }
.rk-adjust__chev {
  position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg); transition: transform .2s ease;
}
.rk-adjust.is-open .rk-adjust__chev { transform: rotate(-135deg); margin-top: -2px; }
.rk-adjust__body { padding: 0 22px 22px; }
.rk-adjust__body[hidden] { display: none; }
.view--risk .rk-adjust .rk-controls {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content;
  gap: 24px 40px; align-items: start; margin: 0; padding: 6px 0 0; border: 0;
}
.view--risk .rk-adjust .rk-ratio { grid-column: 1; grid-row: 1; }
.view--risk .rk-adjust .rk-cash { grid-column: 2; grid-row: 1; }
.view--risk .rk-adjust .rk-controls > .btn { grid-column: 3; grid-row: 1; align-self: start; margin: 0; }
.view--risk .rk-adjust .rk-goal-map { grid-column: 1 / -1; grid-row: 2; }
.view--risk .rk-adjust .rk-controls > label { gap: 10px; }
.view--risk .rk-adjust .rk-controls input { min-height: 0; box-shadow: none; }
.view--risk .rk-adjust .rk-controls > .btn {
  border: 0; border-radius: var(--fx-radius-ctl, 999px); background: var(--fx-track); color: var(--text);
  font:600 13.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; padding: 8px 16px;
}
.view--risk .rk-adjust .rk-controls > .btn:hover { background: var(--fx-track-hi); }
.view--risk .rk-adjust .rk-controls > label > span:first-child {
  font:600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text);
}
.view--risk .rk-adjust .rk-controls small { max-width: 44ch; color: var(--text-2); font:400 14px/1.5 var(--sans); }
.view--risk .rk-adjust .rk-controls .rk-ratio__in input { width: 2.2ch; font:600 40px/1 var(--mono); padding: 0 0 6px; }
.view--risk .rk-adjust .rk-controls .rk-ratio__in em { font-size:28px; color: var(--text-3); }
.view--risk .rk-adjust .rk-controls .rk-cash__in input { width: 7ch; font:600 30px/1 var(--mono); padding: 0 0 6px; text-align: left; }
.view--risk .rk-adjust .rk-controls .rk-cash__in em { font-size:24px; color: var(--text-2); }
.view--risk .rk-adjust .rk-goal-map { padding: 18px 0 0; border-top: 1px solid var(--fx-rule); }
.view--risk .rk-adjust .rk-goal-map__title {
  margin-bottom: 14px; color: var(--text); font:600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
}
.view--risk .rk-adjust .rk-goal-map__title small { margin-left: 8px; color: var(--text-2); font:400 14px var(--sans); }
.view--risk .rk-adjust .rk-goal-map__groups { gap: 20px 40px; }
.view--risk .rk-adjust .rk-goal-map__head { margin-bottom: 10px; color: var(--text-2); font:500 14px/1.35 var(--sans); }
.view--risk .rk-adjust .rk-goal-map__head strong { color: var(--text); font:600 14px/1.35 var(--mono); }
.view--risk .rk-adjust .rk-goal-map__cells { gap: 10px 14px; }
.view--risk .rk-adjust .rk-goal-map__cell { gap: 6px; padding: 0; border: 0; }
.view--risk .rk-adjust .rk-goal-map__cell em {
  color: var(--text-2); font:500 13.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.rk-goal-map__in { display: inline-flex; align-items: baseline; gap: 3px; }
.rk-goal-map__in i { font-style: normal; color: var(--text-2); font:500 14px var(--mono); }
.view--risk .rk-goal-map__in input.rk-goal {
  width: 4.4ch; min-width: 0; padding: 2px 0 4px; background: none; text-align: right;
  border: 0; border-bottom: 1.5px solid var(--fx-track-hi); border-radius: 0;
  color: var(--text); font:600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; transition: border-color .13s ease;
}
.view--risk .rk-goal-map__in input.rk-goal:focus { outline: none; border-bottom-color: var(--accent); }
.view--risk .rk-goal-map__in input.rk-goal::-webkit-outer-spin-button,
.view--risk .rk-goal-map__in input.rk-goal::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rk-goal-map__warn { margin: 14px 0 0; color: var(--accent-soft, var(--accent)); font:500 14px/1.5 var(--sans); }
.view--risk .rk-note { margin-top: 28px; color: var(--text-2); font-size:14.5px; }
.view--risk .rk-foot { color: var(--text-2); font-size:14px; }
.view--risk .rk-foot b { color: var(--accent-soft, var(--accent)); }

/* First draw: layers rise from the base up, then each fill spreads to its size. */
@keyframes rkPyrRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rkPyrGrow { from { transform: scaleX(0); } }
@keyframes rkPyrFade { from { opacity: 0; } }
.rk-pyr.is-first .rk-pyr__row { animation: rkPyrRise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 85ms); }
.rk-pyr.is-first .rk-pyr__fill { animation: rkPyrGrow .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 85ms + 260ms); }
.rk-pyr.is-first .rk-pyr__over { animation: rkPyrFade .6s ease both; animation-delay: calc(var(--i) * 85ms + 700ms); }
.rk-pyr.is-first .rk-pyr__split,
.rk-pyr.is-first .rk-pyr__beside { animation: rkPyrFade .6s ease both; animation-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
  .rk-pyr.is-first .rk-pyr__row, .rk-pyr.is-first .rk-pyr__fill, .rk-pyr.is-first .rk-pyr__over,
  .rk-pyr.is-first .rk-pyr__split, .rk-pyr.is-first .rk-pyr__beside, .rk-pyr__list { animation: none; }
  .rk-pyr__layer, .rk-pyr__name, .rk-pyr__note, .rk-adjust__chev, .rk-pyr__open::after { transition: none; }
}

/* ── Narrower screens ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rk-pyr__note { grid-template-columns: minmax(0, 1.2fr) minmax(190px, 1fr); gap: 8px 20px; }
  .rk-pyr__items, .rk-pyr__items:has(> [data-row="unrated"]) { grid-template-columns: 1fr 1fr; }
  .rk-pyr__items .rk-pyr__note { grid-template-columns: 1fr; }
}
/* Too narrow to set the figures beside the shape without stretching every layer into
   a tall sliver: each layer becomes a band (still tapering, level 1 the widest) with
   what is in it written under it. */
@media (max-width: 900px) {
  .rk-pyr__row { grid-template-columns: 1fr; }
  .rk-pyr__cell { min-height: 50px; width: min(100%, 560px); }
  .rk-pyr__lead { display: none; }
  .rk-pyr__note { margin: 6px 0 14px; padding: 10px 12px; }
  .rk-pyr__split { grid-template-columns: 1fr; margin: 4px 0 14px; }
  .rk-pyr__split-line { width: min(100%, 560px); }
  .rk-sum { grid-template-columns: 1fr; align-items: start; }
  .rk-sum__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view--risk .rk-adjust .rk-controls { grid-template-columns: 1fr 1fr; }
  .view--risk .rk-adjust .rk-controls > .btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .view--risk .rk-adjust .rk-goal-map { grid-row: 2; }
}
@media (max-width: 640px) {
  .rk-sum { padding-bottom: 26px; gap: 22px; }
  .rk-sum__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .rk-sum__say { font-size:16.5px; }
  .rk-sum__ratio span { font-size:16px; }
  .view--risk .rk-sec { font-size:19px; margin-bottom: 18px; }
  .rk-sec__meta { font-size:14px; }
  .rk-pyr { --pyr-gap: 12px; }
  .rk-pyr__cell { min-height: 46px; }
  .rk-pyr__num { font-size:18px; }
  .rk-pyr__note { grid-template-columns: 1fr; padding: 8px 10px; margin: 4px -10px 12px; gap: 6px; }
  .rk-pyr__main, .rk-pyr__aside { gap: 6px; }
  .rk-pyr__name { font-size:16.5px; }
  .rk-pyr__tag { font-size:13px; }
  .rk-pyr__figs { flex-direction: column; gap: 2px; }
  .rk-pyr__fig b { font-size:15px; }
  .rk-pyr__fig i { font-size:13.5px; }
  .rk-pyr__status { font-size:14px; white-space: normal; }
  .rk-pyr__cov { font-size:13.5px; align-items: flex-start; flex-direction: column; gap: 5px; }
  .rk-pyr__tank { flex-basis: auto; width: 64px; }
  .rk-pyr__split-labels > span { font-size:14px; }
  .rk-pyr__list { padding: 6px 14px 14px; margin-left: -4px; margin-right: -4px; }
  .rk-pyr__tbl thead { display: none; }
  .rk-pyr__tbl, .rk-pyr__tbl tbody, .rk-pyr__tbl tfoot { display: block; }
  .rk-pyr__tbl tr { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--fx-rule); }
  .rk-pyr__tbl tbody tr:last-child { border-bottom: 0; }
  .rk-pyr__tbl tfoot tr { border-top: 1px solid var(--fx-total); border-bottom: 0; }
  .rk-pyr__tbl td, .rk-pyr__tbl tfoot td { padding: 0 !important; border: 0; font-size:14px; }
  .rk-pyr__tbl td:first-child { grid-column: 1 / -1; width: auto; display: flex; align-items: baseline; gap: 10px; }
  .rk-pyr__tbl td:first-child .rk-pyr__tk { flex: 0 0 auto; min-width: 3.6em; margin: 0; }
  .rk-pyr__tbl td:nth-child(2) { text-align: left; }
  .rk-pyr__tbl td:nth-child(3)::after { content: " of total"; color: var(--text-3); font:400 13px var(--sans); }
  .rk-pyr__tbl td:nth-child(4)::after { content: " yield"; color: var(--text-3); font:400 13px var(--sans); }
  .rk-pyr__others ul { grid-template-columns: 1fr; }
  .rk-pyr__items, .rk-pyr__items:has(> [data-row="unrated"]) { grid-template-columns: 1fr; }
  .rk-pyr__item .rk-pyr__note { margin: 0; }
  .rk-adjust__head { padding: 16px 48px 16px 16px; }
  .rk-adjust__chev { right: 20px; }
  .rk-adjust__body { padding: 0 16px 18px; }
  .view--risk .rk-adjust .rk-controls { grid-template-columns: 1fr; }
  .view--risk .rk-adjust .rk-ratio, .view--risk .rk-adjust .rk-cash,
  .view--risk .rk-adjust .rk-goal-map, .view--risk .rk-adjust .rk-controls > .btn { grid-column: 1; grid-row: auto; }
  .view--risk .rk-adjust .rk-goal-map__title small { display: block; margin: 4px 0 0; }
  .view--risk .rk-adjust .rk-goal-map__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .view--risk .rk-adjust .rk-goal-map__cell em { font-size:13px; }
  .view--risk .rk-goal-map__in input.rk-goal { width: 100%; font-size:15.5px; }
}

/* ════════════════════════════════════════════════════════════════
   PORTFOLIO — HOLDINGS TABLE + SUMMARY STRIP (pv-*)
   Plain sentence-case labels for readers of 60–70; no boxes — hairline rules, space and type.
   Header sticks inside the scrolling wrap, the Fund column stays pinned when the table scrolls
   sideways (phones, or many columns). Text size follows the view zoom (applyTextSize).
   ════════════════════════════════════════════════════════════════ */
#portfolioSummaryCard.port-stats-strip { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
#portfolioSummary.port-stats-row { display: block; padding: 0; background: transparent; }
#portfolioAccounts[hidden] { display: none; }
.pv-sum { display: flex; align-items: stretch; gap: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; }   /* the panel is the section's, not the strip's */
.pv-sum__lead { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 32px 0 0; min-width: 0; background: none; }
.pv-sum__hero { font:700 44px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.02em; }
.pv-sum__grid { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pv-sum__cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 14px; border-left: 0; min-width: 0; }
.pv-sum__label { font:500 13px/1.3 var(--sans); color: var(--text-2); letter-spacing: 0; text-transform: none; }
.pv-sum__value { font:600 21px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pv-sum__sub { font:500 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pv-sum__value.stat--up, .pv-sum__value.is-income { color: var(--green); }
.pv-sum__value.stat--down { color: var(--red); }
@media (max-width: 1100px) {
  .pv-sum { flex-direction: column; gap: 0; }
  .pv-sum__lead { padding: 0 0 18px; }
  .pv-sum__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
}
@media (max-width: 560px) {
  .pv-sum__hero { font-size:36px; }
  .pv-sum__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-sum__cell { padding: 0; }
  .pv-sum__value { font-size:19px; }
}

/* the table's own scroll box: sticky header + pinned Fund column both work inside it */
/* The holdings card takes the statement corner; the site-wide .card rule is !important, so this must be too. */
/* Sep 27 2026 (Holdings in the "Exchange" layout, portfolio.css): removed the two #portfolioTableCard rules
   that stood here — a card radius with overflow:hidden (it broke the sticky header) and the .table-wrap
   scroll box the new markup no longer has. The #portfolioTable.pv-table rules below no longer match:
   the table is not given the pv-table class any more. */
#portfolioTable.pv-table { font-size:13.5px; border-collapse: separate; border-spacing: 0; width: 100%; }
#portfolioTable.pv-table > thead > tr > th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  padding: 0; text-transform: none; letter-spacing: 0; white-space: nowrap;
  border-bottom: 1px solid var(--fx-line, var(--border)); box-shadow: 0 1px 0 var(--fx-line, var(--border));
}
#portfolioTable.pv-table > thead > tr > th::after { content: none; }
#portfolioTable.pv-table > thead > tr > th button:not(.gq) {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  padding: 12px 16px; font:600 13px/1.25 var(--sans); color: var(--text-2);
}
#portfolioTable.pv-table > thead > tr > th.r button { text-align: right; }
#portfolioTable.pv-table > thead > tr > th button:not(.gq):hover { color: var(--text); }
#portfolioTable.pv-table > thead > tr > th button:not(.gq):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#portfolioTable.pv-table > thead > tr > th.is-asc button:not(.gq), #portfolioTable.pv-table > thead > tr > th.is-desc button:not(.gq) { color: var(--accent); }
#portfolioTable.pv-table > thead > tr > th.is-asc button:not(.gq)::after { content: " ▲"; font-size:max(13px, .75em); }
#portfolioTable.pv-table > thead > tr > th.is-desc button:not(.gq)::after { content: " ▼"; font-size:max(13px, .75em); }
#portfolioTable.pv-table > tbody > tr > td, #portfolioTable.pv-table > tfoot > tr > td { padding: 10px 16px; vertical-align: top; border-bottom: 1px solid var(--fx-rule, var(--border)); }
#portfolioTable.pv-table > tbody > tr.pv-row > td { background: var(--surface); }
#portfolioTable.pv-table tbody tr.pv-row:hover { background: transparent; box-shadow: none; }
#portfolioTable.pv-table tbody tr.pv-row:hover > td { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
#portfolioTable.pv-table .pv-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
#portfolioTable.pv-table .pv-main { display: block; color: var(--text); font-weight: 500; }
#portfolioTable.pv-table .pv-sub { display: block; margin-top: 3px; font-size:13px; color: var(--text-3); font-weight: 400; }
#portfolioTable.pv-table .stat--up .pv-main, #portfolioTable.pv-table .stat--up .pv-sub { color: var(--green); }
#portfolioTable.pv-table .stat--down .pv-main, #portfolioTable.pv-table .stat--down .pv-sub { color: var(--red); }
#portfolioTable.pv-table .is-income .pv-main { color: var(--green); }
#portfolioTable.pv-table .pv-dim { color: var(--text-3); font-weight: 400; }
#portfolioTable.pv-table .pv-text { text-align: left; font-family: var(--sans); color: var(--text-2); }
#portfolioTable.pv-table td.pv-text { max-width: 220px; white-space: normal; line-height: 1.35; }
#portfolioTable.pv-table [title] { cursor: default; }
/* the Fund column, pinned */
#portfolioTable.pv-table th.pv-fund-h, #portfolioTable.pv-table td.pv-fund {
  position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left;
  min-width: 170px; max-width: 260px; box-shadow: 1px 0 0 var(--border);
}
#portfolioTable.pv-table th.pv-fund-h { z-index: 3; }
.pv-fund__top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.pv-fund__top .ticker-link { font:700 14px/1.2 var(--mono); color: var(--text); }
.pv-fund__top .ticker-link:hover { color: var(--accent); }
.pv-fund__top .source-badge { margin-left: 0; }
.pv-fund__top .port-lots-toggle { margin-left: 2px; }
.pv-fund__name { margin-top: 3px; font:400 13px/1.3 var(--sans); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
#portfolioTable.pv-table .manual-row-actions { margin-top: 4px; }
/* risk: a colored dot and the number — no badge box */
.pv-risk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.pv-risk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rk); }
/* payment changes */
#portfolioTable.pv-table .pv-chg--cut .pv-main { color: var(--red); }
#portfolioTable.pv-table .pv-chg--never .pv-main { color: var(--text); }
#portfolioTable.pv-table .pv-chg--varies .pv-main { color: var(--text-3); }
#portfolioTable.pv-table .pv-chg .pv-sub { font-family: var(--sans); }
/* totals */
#portfolioTable.pv-table > tfoot > tr > td { border-top: 1px solid var(--fx-total, var(--text-3)); border-bottom: 0; background: var(--surface); position: sticky; bottom: 0; z-index: 1; }
#portfolioTable.pv-table > tfoot > tr > td.pv-fund { z-index: 2; }
#portfolioTable.pv-table > tfoot .pv-main { font-weight: 700; }
#portfolioTable.pv-table > tfoot > tr > td.pv-fund .pv-main { font:700 13.5px/1.2 var(--sans); }
/* lots row spans every column; it must not pin */
#portfolioTable.pv-table tr.port-lots-row > td { position: static; }

/* column chooser */
.pv-cols { position: relative; margin-left: 8px; }
.pv-cols__btn {
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-xs, 2px); background: transparent;
  color: var(--text-2); font:600 13px/1.3 var(--sans); cursor: pointer;
}
.pv-cols__btn:hover, .pv-cols__btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.pv-cols__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-cols__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 230px; padding: 10px 0 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.pv-cols__menu[hidden] { display: none; }
.pv-cols__h { margin: 0 14px 6px; font:600 13px/1.3 var(--sans); color: var(--text-3); }
.pv-cols__opt { display: flex; align-items: center; gap: 9px; padding: 6px 14px; font:500 13.5px/1.3 var(--sans); color: var(--text); cursor: pointer; }
.pv-cols__opt:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.pv-cols__opt input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.pv-cols__reset { all: unset; display: block; margin: 6px 14px 0; padding-top: 8px; border-top: 1px solid var(--border); width: calc(100% - 28px); font:600 13px/1.3 var(--sans); color: var(--accent); cursor: pointer; }
.pv-cols__reset:hover { text-decoration: underline; }

@media (max-width: 700px) {
  #portfolioTableCard .table-wrap { max-height: 78vh; }
  #portfolioTable.pv-table > thead > tr > th button:not(.gq) { padding: 10px 10px; }
  #portfolioTable.pv-table > tbody > tr > td, #portfolioTable.pv-table > tfoot > tr > td { padding: 9px 10px; }
  #portfolioTable.pv-table th.pv-fund-h, #portfolioTable.pv-table td.pv-fund { min-width: 118px; max-width: 150px; }
  .pv-fund__name { max-width: 130px; }
  .pv-cols__menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 70vh; overflow: auto; }
}

/* ── Grouped screens (nav.js) ────────────────────────────────────────────────
   Overview, Trades, Risk mix and Income sit as tabs inside Portfolio; Calendar inside News. A plain
   underlined tab strip, square and quiet, the way a brokerage statement separates its sections. */
.tab.tab--grouped { display: none !important; }
/* One pill track; the open tab is the raised pill inside it. */
.subnav { display: flex; width: max-content; max-width: 100%; gap: 2px; margin: 4px 0 20px; padding: 4px;
  border-radius: var(--fx-radius-ctl, 999px); background: var(--fx-track, var(--surface-2)); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0;
  border-radius: var(--fx-radius-ctl, 999px); background: none;
  color: var(--text-2); font:600 14px/1.2 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.subnav__tab:hover { color: var(--text); }
.subnav__tab.is-active { color: var(--text); background: var(--fx-pill-on, var(--surface-3)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--fx-line, transparent); }
.subnav__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.subnav__lock { opacity: .7; }
body[data-text-size="large"] .subnav__tab { font-size:15.5px; }
body[data-text-size="xlarge"] .subnav__tab { font-size:17px; }

/* ═══ Shared parts for the newer screens ═══════════════════════════════════════
   Notifications, Email alerts, the Calendar, the Risk pyramid, Holdings and the
   grouped-tab strip take their shape from these tokens, so they move together.
   The feel is a premium dark app, not a stack of boxes: panels are rounded and
   sit one step lighter than the page (elevation, not outlines); controls are
   pills, and a segmented choice is one pill track with the chosen option raised
   inside it; chips are soft tinted lozenges; hairlines only between the rows of
   a list. Labels are sentence case, figures tabular, amber only for the one
   figure that matters and for what is switched on. Declared on body because
   the themes set their colors on body[data-theme]; every value is a token, so
   all fifteen themes and light mode follow. */
body {
  --fx-radius: 14px;                                   /* panels, cards, popovers (was 12; Portfolio and Today use 14) */
  --fx-radius-lg: 16px;                                /* dialogs */
  --fx-radius-ctl: 999px;                              /* buttons, segmented tracks, tags */
  --fx-radius-chip: 7px;                               /* ticker chips */
  --fx-surface: var(--surface, var(--bg-raised));      /* a panel, one step above the page */
  --fx-line: color-mix(in srgb, var(--text) 7%, transparent);   /* a panel's whisper of an edge */
  --fx-rule: color-mix(in srgb, var(--text) 8%, transparent);   /* between the rows of a list (= Portfolio's line) */
  --fx-faint: color-mix(in srgb, var(--text) 4.5%, transparent);/* calendar day dividers */
  --fx-total: color-mix(in srgb, var(--text) 18%, transparent); /* the rule over a total (= Portfolio's tfoot) */
  --fx-panel: color-mix(in srgb, var(--text) 3.5%, var(--bg));  /* an in-page panel (= Portfolio's surface) */
  --fx-panel-shadow: 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent) inset, 0 12px 32px rgba(0, 0, 0, .18);
  --fx-head: var(--fx-surface);                        /* sticky headers: same as the panel */
  --fx-track: color-mix(in srgb, var(--text) 6%, transparent);  /* a pill track, a quiet button */
  --fx-track-hi: color-mix(in srgb, var(--text) 10%, transparent);
  --fx-pill-on: var(--surface-3, var(--surface-2));    /* the raised option inside a track */
  --fx-tint: color-mix(in srgb, var(--accent) 8%, transparent); /* the one focal cell */
  --fx-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -14px rgba(0, 0, 0, .6);
  --fx-shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .3);
}
/* Used across the stylesheets but never defined, so every use fell back to a hard-coded value.
   Declared on :root (not body) because a chosen color palette sets some of them inline on <html>
   (applyPalette in app.js), and that must keep winning. Light mode is picked out with :has(). */
:root {
  --on-accent: #14161a;                          /* text on an amber fill */
  --soft: rgba(255, 255, 255, .04);
  --soft-2: rgba(255, 255, 255, .07);
  --soft-line: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --text-muted: #b4bcca;                         /* retired name = --text-2; the palette JS may still set it */
  --accent-glow: rgba(224, 168, 46, .35);
}
:root:has(> body[data-theme="light"]) {
  --on-accent: #ffffff;                          /* light-theme amber is dark (#9a6b00) */
  --soft: rgba(15, 23, 42, .04);
  --soft-2: rgba(15, 23, 42, .07);
  --soft-line: rgba(15, 23, 42, .09);
  --border-strong: rgba(15, 23, 42, .18);
  --text-muted: #3b4456;
  --accent-glow: rgba(154, 107, 0, .25);
}
body[data-theme="light"] {
  --fx-panel: var(--surface, #fff);              /* on paper, a panel sits a step lighter than the page */
  --fx-panel-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -12px rgba(15, 23, 42, .16);
  --fx-pill-on: var(--surface, #fff);
  --fx-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .14);
  --fx-shadow-pop: 0 24px 60px -18px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .08);
}
/* A panel's title: sentence case, sans, clear. */
.nfy__h, .alx__head h2, .cal-mo__dh, .rk-pyr__side-h {
  font-family: var(--sans); font-size:16px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.005em; text-transform: none; color: var(--text);
}
/* Quiet labels: a group inside a panel, a weekday, a column. */
.nfy__gh, .cal-mo__wd, .cal-row--head, .rk-pyr__detail-h {
  font-family: var(--sans); font-size:13px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--text-3);
}
/* Pills. */
.nfy__btn, .nfy__segb, .nfy__close, .alx__btn, .alx__x,
.cal-seg, .cal-seg__b, .cal-btn, .cal-select, .cal-chipf, .cal-badge, .cal-tag, .cal-mo__today,
.nfy__new, .nfy__tag, .port-lots-toggle, .pv-cols__btn { border-radius: var(--fx-radius-ctl); }
.cal-chip { border-radius: var(--fx-radius-chip); }
.nfy, .cal-pop, .cal-mo__detail, .rk-pyr__side, .pv-cols__menu { border-radius: var(--fx-radius); }
.alx { border-radius: var(--fx-radius-lg); }

/* ── Portfolio · Holdings — premium pass (Sep 27 2026) ───────────────────────────
   Matt: "I like the info but I HATE the containers." One soft elevated surface per section,
   no tiles and no box inside a box; figures separated by space, not borders; sentence-case
   headings; the table reads as a clean ledger. Scoped to #viewPortfolio so nothing else moves. */
#viewPortfolio { --pv-surface: color-mix(in srgb, var(--text) 3.5%, var(--bg)); --pv-line: color-mix(in srgb, var(--text) 8%, transparent); }
#viewPortfolio .port-stats-strip,
#viewPortfolio .port-insights > .card {
  background: var(--pv-surface) !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent) inset, 0 12px 32px rgba(0,0,0,.18) !important;
  margin-bottom: 18px;
}
/* Summary: one headline figure, the rest in a quiet row */
#viewPortfolio .port-stats-strip { padding: 26px 30px !important; }
#viewPortfolio .pv-sum { display: flex !important; align-items: flex-end; gap: 48px; flex-wrap: wrap; border: 0 !important; background: none !important; }
#viewPortfolio .pv-sum__lead { display: flex; flex-direction: column; gap: 6px; padding: 0 !important; background: none !important; border: 0 !important; min-width: 220px; }
#viewPortfolio .pv-sum__hero { font:700 44px/1 var(--sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
#viewPortfolio .pv-sum__grid { display: flex !important; flex-wrap: wrap; gap: 14px 40px; flex: 1; border: 0 !important; background: none !important; }
#viewPortfolio .pv-sum__cell { display: flex; flex-direction: column; gap: 5px; padding: 0 !important; border: 0 !important; background: none !important; min-width: 110px; }
#viewPortfolio .pv-sum__label { font:500 13px var(--sans); color: var(--text-2); text-transform: none; letter-spacing: 0; }
#viewPortfolio .pv-sum__value { font:600 21px/1.1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
#viewPortfolio .pv-sum__sub { font:500 13px var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
#viewPortfolio .stat--up { color: var(--green) !important; } #viewPortfolio .stat--down { color: var(--red) !important; }

/* Section headings: a calm title and a quiet hint, no box, no capitals */
#viewPortfolio .card__header { border: 0 !important; background: none !important; padding: 20px 24px 8px !important; gap: 12px; align-items: baseline; }
#viewPortfolio .card__header h2 { font:600 17px var(--sans) !important; text-transform: none !important; letter-spacing: -.005em !important; color: var(--text) !important; }
#viewPortfolio .card__header h2::before { display: none !important; }
#viewPortfolio .card__hint { font:400 13px var(--sans); color: var(--text-2); text-transform: none; letter-spacing: 0; }

/* Where your income comes from */
#viewPortfolio .port-insights { display: block !important; }
#viewPortfolio .port-insight__body { padding: 4px 24px 20px; }
#viewPortfolio .pinc__row { display: grid; grid-template-columns: 22px minmax(160px, 1.4fr) minmax(80px, 2fr) auto; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--pv-line); }
#viewPortfolio .pinc__row:first-child { border-top: 0; }
#viewPortfolio .pinc__rank { font:600 13px var(--sans); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
#viewPortfolio .pinc__fund { display: flex; flex-direction: column; min-width: 0; }
#viewPortfolio .pinc__fund b { font:600 15px var(--sans); color: var(--text); }
#viewPortfolio .pinc__fund small { font:400 13px var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewPortfolio .pinc__bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
#viewPortfolio .pinc__bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
#viewPortfolio .pinc__amt { display: flex; flex-direction: column; align-items: flex-end; }
#viewPortfolio .pinc__amt b { font:600 15px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
#viewPortfolio .pinc__amt small { font:400 13px var(--sans); color: var(--text-2); }
#viewPortfolio .pinc__more, #viewPortfolio .pinc__empty { padding: 12px 0 0 38px; font:400 13.5px var(--sans); color: var(--text-2); border-top: 1px solid var(--pv-line); }
#viewPortfolio .pinc__empty { padding-left: 0; border: 0; }

/* Sep 27 2026: the "Positions" rules that stood here (the holdings card's pills, and a ledger of
   !important paddings and borders on every #portfolioTableCard cell) are removed; portfolio.css draws
   the Holdings table now and those !important cell rules overrode it. */
/* the "?" beside a heading shows only when that heading is hovered or focused */
#viewPortfolio thead th .gq { opacity: 0; transition: opacity .15s; }
#viewPortfolio thead th:hover .gq, #viewPortfolio thead th:focus-within .gq, #viewPortfolio thead th .gq[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { #viewPortfolio thead th .gq { opacity: .85; } }
@media (max-width: 720px) {
  #viewPortfolio .port-stats-strip { padding: 20px !important; }
  #viewPortfolio .pv-sum { gap: 20px; } #viewPortfolio .pv-sum__hero { font-size:36px; }
  #viewPortfolio .pv-sum__grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  #viewPortfolio .pinc__row { grid-template-columns: 18px 1fr auto; } #viewPortfolio .pinc__bar { display: none; }
}
/* Summary alignment (Matt: "bad formatting"): every figure sits on one line — label, value, then a
   note line that is reserved even when empty — and the row lines up with the headline figure. The
   inner row keeps no panel of its own (it drew a second, shorter box inside the first). */
#viewPortfolio #portfolioSummary.port-stats-row, #viewPortfolio .port-stats-row { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
#viewPortfolio .port-stats-strip { padding: 24px 30px 22px !important; }
#viewPortfolio .pv-sum { align-items: center !important; gap: 56px !important; }
#viewPortfolio .pv-sum__lead { justify-content: center; }
#viewPortfolio .pv-sum__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: start !important; gap: 18px 28px !important; }
#viewPortfolio .pv-sum__cell { display: grid !important; grid-template-rows: auto auto 18px; row-gap: 6px; align-content: start; }
#viewPortfolio .pv-sum__cell .pv-sum__sub { line-height: 18px; }

/* ═════════════════════════════════════════════════════════════════════════
   ONE FORMAT — Portfolio, Income and returns, Risk mix, News  (Sep 27 2026)
   The Holdings premium pass above is the reference; these rules carry it to the
   other screens. One soft elevated panel per section (--fx-panel, radius 14,
   --fx-panel-shadow, no border, no header band, nothing boxed inside it); titles
   600 17px sentence case; figure labels 13px --text-2; big figure 44px --text;
   tables: 12.5px sentence-case headers on one hairline, 15px tabular figures,
   tickers mono 700 in --text; pills for every control; fine print 13px --text-2.
   Amber only for sorted headings, "on" states and the chosen tab.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Shared pieces ───────────────────────────────────────────────────────── */
/* The one big figure and the quiet row beside it, wherever .pv-sum is drawn. A cell is a grid of
   label / figure / note; the older flex rule's justify-content:center centred that grid in its column,
   so figures in a column no longer lined up (visible once the row wraps). Left-aligned now. */
#viewPortfolio .pv-sum__cell, #viewIncome .pv-sum__cell { justify-content: start; }
#viewPortfolio .pv-sum, #viewIncome .pv-sum { overflow: visible !important; }
.pv-sum__hero.stat--up, .pv-sum__hero.stat--down { color: var(--text); }
/* Toolbar pills: 36px, no outline. A labelled export or toggle is a pill with its icon. */
.export-btn.export-btn--label, #viewPortfolio .port-toolbar .port-upload-btn, #viewPortfolio .port-toolbar .port-clear-btn,
#viewPortfolio .port-toolbar .broker-pill, #viewPortfolio .portfolio-verifier .port-clear-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0;
  background: var(--fx-track); color: var(--text); font:500 13.5px/1.2 var(--sans); letter-spacing: 0;
  text-transform: none; box-shadow: none; cursor: pointer; white-space: nowrap;
}
.export-btn.export-btn--label { width: auto; height: auto; }
.export-btn.export-btn--label:hover, #viewPortfolio .port-toolbar .port-upload-btn:hover, #viewPortfolio .port-toolbar .port-clear-btn:hover,
#viewPortfolio .port-toolbar .broker-pill:hover, #viewPortfolio .portfolio-verifier .port-clear-btn:hover {
  background: var(--fx-track-hi); color: var(--text); border: 0; transform: none; box-shadow: none;
}
#viewPortfolio .port-toolbar .port-upload-btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
#viewPortfolio .port-toolbar .port-upload-btn--primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.06); }
#viewPortfolio .port-toolbar .port-manual-btn { color: var(--text); }
#viewPortfolio .port-toolbar .broker-pill { padding: 0 10px 0 6px; }
#viewPortfolio .port-toolbar .broker-pill.is-connected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.export-btn:focus-visible, .port-more__btn:focus-visible, .port-more__item:focus-visible,
#viewPortfolio .port-toolbar .broker-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A choose-one select in a toolbar is a pill too. */
#viewIncome .port-filter-select, #viewPortfolio .port-filter-select {
  min-height: 36px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; background-color: var(--fx-track);
  color: var(--text); font:500 13.5px/1.2 var(--sans); cursor: pointer;
}

/* "More": the less-used tools folded under one pill. */
.port-more { position: relative; }
.port-more > summary { list-style: none; }
.port-more > summary::-webkit-details-marker { display: none; }
.port-more__btn::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.port-more[open] .port-more__btn { background: var(--fx-track-hi); }
.port-more__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 290px; padding: 6px;
  background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: var(--fx-radius, 14px); box-shadow: var(--fx-shadow-pop);
}
.port-more__item {
  display: block; width: 100%; margin: 0; padding: 11px 14px; border: 0; border-radius: 10px; background: none; text-align: left;
  color: var(--text); font:500 15px/1.35 var(--sans); cursor: pointer;
}
.port-more__item:hover { background: var(--fx-track); }

/* In-page panels. The site-wide .card rule carries !important, so these must too. */
#viewIncome .income-card, #viewIncome .portfolio-empty,
#viewNews > .card, #viewPortfolio .portfolio-empty, #viewPortfolio #portfolioAuditCard,
#viewRisk .rk-sum, #viewRisk .rk-pyr, #viewRisk .rk-adjust {
  background: var(--fx-panel) !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: var(--fx-panel-shadow) !important; margin: 0 0 18px;
}
#viewIncome .card__header, #viewNews > .card > .card__header, #viewPortfolio #portfolioAuditCard .card__header {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; min-height: 0;
  padding: 20px 24px 8px !important; border: 0 !important; background: none !important;
}
#viewIncome .card__header h2, #viewNews > .card > .card__header h2, #viewPortfolio #portfolioAuditCard .card__header h2 {
  margin: 0; font:600 17px/1.3 var(--sans) !important; letter-spacing: -.005em !important; text-transform: none !important; color: var(--text) !important;
}
#viewIncome .card__header h2::before, #viewNews > .card > .card__header h2::before { display: none !important; }
#viewIncome .card__hint { font:400 13px/1.4 var(--sans); color: var(--text-2); letter-spacing: 0; text-transform: none; }
#viewIncome .collapse-arrow, #viewNews .collapse-arrow, #viewPortfolio .collapse-arrow { color: var(--text-2); margin-left: auto; align-self: center; }
/* A counter beside a title is a quiet tag, not an amber badge. */
#viewIncome .screener-count, #viewIncome #incomeAuditStatus {
  padding: 2px 10px; border: 0; border-radius: 999px; background: var(--fx-track); color: var(--text-2);
  font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
#viewIncome #incomeAuditStatus.is-down { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }

/* Tags: sentence case, soft fill, no outline. */
.inc-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--fx-track);
  color: var(--text-2); font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; vertical-align: 1px; white-space: nowrap;
}
td > .inc-tag:first-child { margin-left: 0; }
.inc-tag--ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.inc-tag--bad { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }

/* Whole-screen empty state (first run): on one panel, left-aligned, no icon. */
#viewPortfolio .portfolio-empty, #viewIncome .portfolio-empty { padding: 28px 30px !important; text-align: left; color: var(--text-2); }
#viewPortfolio .portfolio-empty h3, #viewIncome .portfolio-empty h3 {
  margin: 0 0 8px; font:600 21px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text);
}
#viewPortfolio .portfolio-empty p, #viewIncome .portfolio-empty p { max-width: 64ch; margin: 0 0 6px; font:400 16px/1.55 var(--sans); color: var(--text-2); }
#viewPortfolio .portfolio-empty__icon, #viewIncome .portfolio-empty__icon { display: none; }
#viewPortfolio .portfolio-empty .portfolio-empty__hint, #viewIncome .portfolio-empty .portfolio-empty__hint {
  margin-top: 20px; font:400 13px/1.55 var(--sans); color: var(--text-2); opacity: 1; font-style: normal;
}
.portfolio-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.portfolio-empty__actions .btn { min-height: 44px; padding: 0 22px; border: 0; font:600 15px/1 var(--sans); display: inline-flex; align-items: center; cursor: pointer; }
.portfolio-empty__actions .btn--primary { background: var(--accent); color: var(--on-accent) !important; }
.portfolio-empty__actions .btn--ghost { background: var(--fx-track); color: var(--text); }
.portfolio-empty__actions .btn--ghost:hover { background: var(--fx-track-hi); border: 0; }
.portfolio-empty__loading { margin: 0; font:400 15px/1.55 var(--sans); color: var(--text-2); }

/* ── Portfolio · Holdings: the remaining gaps ────────────────────────────── */
#viewPortfolio .port-toolbar__actions { flex-wrap: wrap; row-gap: 8px; }
/* The holdings card's header: title and hint on the left, its three controls together on the right. */
/* (Sep 27 2026: three #portfolioTableCard header rules removed — the header is portfolio.css's .pb-sec__h now.) */
#portfolioTable.pv-table .pv-sub { font-size:13px; color: var(--text-2); }
.pv-fund__name { font-size:13px; color: var(--text-2); }
#portfolioTable .pv-fund__top .ticker-link { color: var(--text); font-weight: 700; }
#portfolioTable .pv-fund__top .ticker-link:hover { color: var(--accent); text-decoration: none; }
#viewPortfolio .pinc__fund b { font:700 15px var(--mono); letter-spacing: .01em; }
#viewPortfolio .pinc__amt small { font-size:13px; }
#viewPortfolio .source-badge {
  margin: 0; padding: 2px 9px; border-radius: 999px; background: var(--fx-track); color: var(--text-2);
  font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none;
}
#viewPortfolio .port-lots-toggle {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fx-track); color: var(--text);
  font:600 13px/1 var(--sans); cursor: pointer;
}
#viewPortfolio .port-lots-toggle:hover, #viewPortfolio .port-lots-toggle[aria-expanded="true"] { background: var(--fx-track-hi); color: var(--text); border: 0; }
.port-acct-col, #portfolioTable.pv-table td.pv-acct { font-size:13px; color: var(--text-2); }
.port-accts__l { font:500 13px/1.3 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-2) !important; }
.port-acct { border: 0 !important; border-radius: 14px; background: var(--fx-track) !important; }
.port-acct i { font-size:13px; color: var(--text-2); }
/* Column headings carry the glossary "?" (glossary.js), shown when the heading is hovered or focused. */
#portfolioTable.pv-table > thead > tr > th { padding: 10px 14px !important; }
#portfolioTable.pv-table > thead > tr > th button:not(.gq) { display: inline; width: auto; padding: 0; }
#portfolioTable.pv-table > thead > tr > th.r { text-align: right; }
#portfolioTable.pv-table > thead > tr > th > .gq { margin-left: 4px; vertical-align: 1px; }
/* The column chooser: a pill, and a floating panel for its menu. */
.pv-cols__btn { min-height: 36px; padding: 0 14px; border: 0; background: var(--fx-track); color: var(--text); font:500 13.5px/1 var(--sans); }
.pv-cols__btn:hover, .pv-cols__btn[aria-expanded="true"] { color: var(--text); background: var(--fx-track-hi); border: 0; }
.pv-cols__menu { background: var(--fx-surface); border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-pop); padding: 12px 0 10px; width: 250px; }
.pv-cols__h { margin: 0 16px 6px; font:600 13px/1.3 var(--sans); color: var(--text-2); }
.pv-cols__opt { padding: 7px 16px; font-size:15px; }
.pv-cols__reset { margin: 8px 16px 0; padding-top: 10px; border-top: 1px solid var(--fx-rule); width: calc(100% - 32px);
  font:600 13.5px/1.3 var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
/* E*TRADE panels under the toolbar: section titles in sentence case. */
#viewPortfolio .portfolio-verifier__title { font:600 17px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
#viewPortfolio .portfolio-verifier__hint { font-size:14px; color: var(--text-2); }
/* The broker check (admin tool on this page) */
#viewPortfolio #portfolioAuditCard .card__body { padding: 4px 24px 20px; }
#viewPortfolio .audit-badge { border: 0; font:600 13px/1.5 var(--sans); padding: 2px 10px; }
#viewPortfolio .audit-section-title, #viewIncome .audit-section-title {
  margin: 16px 0 6px; padding: 0; font:600 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
#viewIncome .audit-section-title { padding: 0 24px; }

/* ── Income and returns ──────────────────────────────────────────────────── */
#viewIncome .card__body { padding: 0; }
#viewIncome .income-grid { gap: 18px; margin-bottom: 0; }
#viewIncome .income-grid > .income-card { margin-bottom: 18px; }
#viewIncome .income-card__hint { margin: 0; padding: 0 24px 10px; font:400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--text-2); }
/* Summary: one headline figure and a quiet row, as on Holdings. */
#viewIncome #incomeSummary.port-stats-row, #viewIncome #incomeProjSummary, #viewIncome #incomeAuditSummary {
  display: block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; min-height: 0;
}
#viewIncome .income-card--summary .card__body, #viewIncome .income-card--summary.card--collapsed .card__body { padding: 8px 24px 22px; }
#viewIncome .pv-sum--row .pv-sum__grid { display: flex; flex-wrap: wrap; gap: 16px 56px; }
#viewIncome .pv-sum--row .pv-sum__cell { min-width: 110px; }
/* The total-return table shows its first eight funds before it is opened out; room for them and the total. */
#viewIncome .income-pnl-wrap { max-height: 520px; }
#viewIncome #incomeProjSummary, #viewIncome #incomeAuditSummary { padding: 6px 24px 14px; }
#viewIncome .pv-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 56px; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
#viewIncome .pv-sum__lead { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; min-width: 220px; }
#viewIncome .pv-sum__hero { font:700 44px/1 var(--sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
#viewIncome .pv-sum__grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: start; gap: 18px 28px; }
#viewIncome .pv-sum__cell { display: grid; grid-template-rows: auto auto minmax(18px, auto); row-gap: 6px; padding: 0; border: 0; background: none; min-width: 0; }
#viewIncome .pv-sum__label { font:500 13px/1.3 var(--sans); color: var(--text-2); letter-spacing: 0; text-transform: none; }
#viewIncome .pv-sum__value { font:600 21px/1.1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewIncome .pv-sum__sub { font:500 13px/18px var(--sans); color: var(--text-2); }
#viewIncome .pv-sum__value.stat--up, #viewIncome .pv-sum__value.is-income { color: var(--green); }
#viewIncome .pv-sum__value.stat--down { color: var(--red); }
/* Tables: a clean ledger. */
#viewIncome .table-wrap { padding: 0 10px 10px; border-radius: 0; }
#viewIncome .fund-table { font-size:15px; border-collapse: separate; border-spacing: 0; }
#viewIncome .fund-table thead th {
  position: sticky; top: 0; z-index: 1; padding: 10px 14px; background: var(--fx-panel) !important;
  border: 0; border-bottom: 1px solid var(--fx-rule); box-shadow: none;
  font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); white-space: nowrap;
}
#viewIncome .fund-table thead th::after { font-size:13px; }
#viewIncome .fund-table thead th.sorted-asc, #viewIncome .fund-table thead th.sorted-desc,
#viewIncome .fund-table thead th.is-asc, #viewIncome .fund-table thead th.is-desc { color: var(--accent); }
#viewIncome .fund-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--fx-rule); color: var(--text); font-size:15px; vertical-align: middle; }
#viewIncome .fund-table tbody tr:last-child td { border-bottom: 0; }
#viewIncome .fund-table td.r { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
#viewIncome .fund-table tbody tr:hover, #incomePnlTable tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); box-shadow: none; }
#viewIncome .fund-table tbody tr:nth-child(even) { background: transparent; }
#viewIncome .fund-table tbody tr:nth-child(even):hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
#viewIncome .fund-table td.is-up, #viewIncome .fund-table td.stat--up { color: var(--green); }
#viewIncome .fund-table td.is-down, #viewIncome .fund-table td.stat--down { color: var(--red); }
#viewIncome .td-ticker { color: var(--text); font-size:15px; }
#viewIncome .ticker-link, #incomePnlTable .ticker-link { color: var(--text); font:700 15px var(--mono); letter-spacing: .01em; cursor: pointer; }
#viewIncome .ticker-link:hover, #incomePnlTable .ticker-link:hover { color: var(--accent); text-decoration: none; }
#viewIncome tfoot td, #incomePnlTable tfoot td { padding: 12px 14px; border-top: 1px solid var(--fx-total); font-size:15px; font-weight: 600; color: var(--text); }
#incomePnlTable tfoot td:first-child { font-family: var(--sans); }
.inc-strong { font-weight: 600 !important; }
.inc-dim { color: var(--text-2) !important; }
.inc-month, .inc-date { font:500 15px var(--sans); color: var(--text); white-space: nowrap; }
.inc-sub, #viewIncome td.inc-sub { color: var(--text-2); }
.inc-note { font:400 13px/1.4 var(--sans); color: var(--text-2); }
.inc-desc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-none { padding: 14px !important; text-align: left; font:400 15px/1.5 var(--sans); color: var(--text-2) !important; }
#incomeRecentDivTable:not(.is-admin) .income-admin-col { display: none; }
#incomeDoubleDipCard.is-empty .table-wrap { display: none; }
#incomeDoubleDipCard.is-empty .card__body::after { content: "None in this period."; display: block; padding: 4px 24px 20px; font:400 15px/1.5 var(--sans); color: var(--text-2); }
/* A note inside a panel: tinted, rounded, no outline or stripe. */
#viewIncome .income-callout { margin: 0 24px 12px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--fx-track); color: var(--text-2); font:400 14px/1.55 var(--sans); }
/* Bars in cells: pill ends, amber (income) and green once a loss is fully covered. */
#viewIncome .cov__bar, #viewIncome .div-pct__bar, #viewIncome .mo-bar { height: 6px; border-radius: 999px; opacity: 1; }
#viewIncome .mo-bar { background: var(--accent); }
#viewIncome .cov__t, #viewIncome .div-pct__t { font-weight: 500; color: var(--text); }
#viewIncome #incomeAuditPolicy { padding: 0 24px 6px; }

/* ── Risk mix: the pyramid stays; its sections sit on Portfolio's panels ─── */
#viewRisk .rk-top { margin-top: 0; }
#viewRisk .rk-sum { padding: 24px 30px 22px; gap: 24px clamp(40px, 5vw, 96px); align-items: center; }
#viewRisk .rk-sum__k { font:500 13px/1.3 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum__ratio { gap: 6px 20px; margin-top: 6px !important; }
#viewRisk .rk-sum__ratio strong { font:700 44px/1 var(--sans); letter-spacing: -.02em; color: var(--text); }
#viewRisk .rk-sum__ratio strong i { font-weight: 400; color: var(--text-2); }
#viewRisk .rk-sum__ratio span { font:500 13px/1.3 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum__ratio span b { margin-left: 6px; font:600 21px/1.1 var(--sans); color: var(--text); }
#viewRisk .rk-sum__say { margin-top: 12px !important; font:400 16px/1.55 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum__say b { font-weight: 600; color: var(--text); }
#viewRisk .rk-sum .rk-split__bar { height: 8px; margin: 18px 0 12px; }
#viewRisk .rk-sum .rk-split__legend { font:500 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum .rk-src { font:400 13px/1.5 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum .rk-src b { color: var(--text); font-weight: 600; }
#viewRisk .rk-src__go { min-height: 30px; padding: 0 12px; font:600 13px/1 var(--sans); }
#viewRisk .rk-sum__figs { gap: 18px 28px; }
#viewRisk .rk-sum__figs dt { font:500 13px/1.3 var(--sans); color: var(--text-2); }
#viewRisk .rk-sum__figs dd, #viewRisk .rk-sum__figs > div:first-child dd { font:600 21px/1.1 var(--sans); letter-spacing: 0; color: var(--text); }
#viewRisk .rk-pyr { padding: 20px 24px 24px; }
#viewRisk .rk-sec { margin: 0 0 18px; font:600 17px/1.3 var(--sans); letter-spacing: -.005em; gap: 4px 12px; }
#viewRisk .rk-sec__meta { font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__empty { font:400 15px/1.55 var(--sans); }
#viewRisk .rk-pyr__link { font:600 15px/1.55 var(--sans); color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
#viewRisk .rk-pyr__name { font:600 16px/1.3 var(--sans); }
#viewRisk .rk-pyr__tag { font:400 13px/1.35 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__fig em { font:500 13px var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__fig b { font:600 15px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
#viewRisk .rk-pyr__fig i { font:400 13px var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
#viewRisk .rk-pyr__nochip { font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__status { font:600 15px/1.25 var(--sans); }
#viewRisk .rk-pyr__cov, #viewRisk .rk-pyr__yld { font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__cov b, #viewRisk .rk-pyr__yld b { font:600 15px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
#viewRisk .rk-pyr__yld small { font-size:13px; color: var(--text-2); }
#viewRisk .rk-pyr__open { min-height: 30px; padding: 0 12px; }
#viewRisk .rk-pyr__split-labels > span { font:600 15px/1.3 var(--sans); }
#viewRisk .rk-pyr__split-labels b { font:600 15px var(--sans); }
#viewRisk .rk-pyr__split-top b { color: var(--text); }
#viewRisk .rk-pyr__split-low b { color: var(--text); }
#viewRisk .rk-pyr__split-labels small { font:400 13px var(--sans); color: var(--text-2); }
/* A layer's list opens inside the panel as a quiet inset, not a second raised panel. */
#viewRisk .rk-pyr__list { border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, transparent); box-shadow: none; }
#viewRisk .rk-pyr__tbl th { font:500 13px/1.3 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__tbl tfoot td:first-child { font:600 15px var(--sans); color: var(--text); }
#viewRisk .rk-pyr__others-h { font:400 13px/1.5 var(--sans); color: var(--text-2); }
#viewRisk .rk-pyr__fn { font-size:13px; }
/* Beside the pyramid: the same panel, set off by one hairline; no tiles. */
#viewRisk .rk-pyr__beside { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--fx-rule); }
#viewRisk .rk-pyr__beside-h { font:600 17px/1.3 var(--sans); }
#viewRisk .rk-pyr__item .rk-pyr__note { background: none; margin: 0; padding: 10px 0; }
#viewRisk .rk-pyr__item:not(.is-static):hover .rk-pyr__note { background: none; }
#viewRisk .rk-pyr__item.is-open .rk-pyr__note { background: none; }
#viewRisk .rk-pyr__items { gap: 8px 40px; }
#viewRisk .rk-adjust { margin-top: 0; }
#viewRisk .rk-adjust__head { padding: 20px 56px 18px 24px; border-radius: 14px; }
#viewRisk .rk-adjust__t { font:600 17px/1.3 var(--sans); }
#viewRisk .rk-adjust__now { font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-adjust__now b { color: var(--text); }
#viewRisk .rk-adjust__body { padding: 0 24px 22px; }
#viewRisk .rk-adjust .rk-controls small { font:400 13px/1.5 var(--sans); color: var(--text-2); }
#viewRisk .rk-adjust .rk-goal-map__title small, #viewRisk .rk-adjust .rk-goal-map__head { font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewRisk .rk-adjust .rk-goal-map__head strong { font:600 15px/1.35 var(--sans); }
#viewRisk .rk-adjust .rk-goal-map__cell em { font:500 13px/1.2 var(--sans); }
#viewRisk .rk-note, #viewRisk .rk-foot { max-width: 78ch; margin: 24px 0 0; font:400 13px/1.55 var(--sans); color: var(--text-2); }
#viewRisk .rk-foot { margin-top: 8px; }
#viewRisk .rk-foot b { color: var(--text); font-weight: 600; }
#viewRisk .rk-hint { color: var(--text-2); font:400 16px/1.55 var(--sans); }
#viewRisk .rk-hint .btn { min-height: 36px; padding: 0 14px; font:500 13.5px/1 var(--sans); }

/* ── News ────────────────────────────────────────────────────────────────── */
#viewNews > .card > .card__body { padding: 0 0 12px; }
/* The event kinds: one segmented control, the chosen kind raised inside the track. */
#viewNews .events-filters {
  display: flex; width: max-content; max-width: calc(100% - 48px); gap: 2px; margin: 4px 24px 10px; padding: 4px;
  border-radius: 999px; background: var(--fx-track); overflow-x: auto; scrollbar-width: none;
}
#viewNews .events-filters::-webkit-scrollbar { display: none; }
#viewNews .event-filter {
  flex: 0 0 auto; min-height: 36px; padding: 0 16px; border: 0; background: none; box-shadow: none; transform: none;
  color: var(--text-2); font:600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
#viewNews .event-filter:hover { color: var(--text); background: none; box-shadow: none; transform: none; }
#viewNews .event-filter.is-active { color: var(--text) !important; background: var(--fx-pill-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--fx-line); }
#viewNews .event-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Events: rows on hairlines, not a card per event. */
#viewNews .events-list { display: block; padding: 0 24px 8px; }
#viewNews .event-item {
  display: flex; gap: 16px; align-items: baseline; margin: 0; padding: 14px 0; border: 0; border-radius: 0; background: none; transform: none;
}
#viewNews .event-item + .event-item { border-top: 1px solid var(--fx-rule); }
#viewNews .event-item:hover { background: color-mix(in srgb, var(--text) 3%, transparent); transform: none; box-shadow: none; }
#viewNews .event-tag {
  flex: 0 0 auto; min-width: 118px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--fx-track); color: var(--text-2);
  font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; text-align: center;
}
#viewNews .event-tag--liquidation, #viewNews .event-tag--delisting { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
#viewNews .event-title { font:600 15px/1.45 var(--sans); color: var(--text); }
#viewNews .event-tickers { margin-right: 8px; }
#viewNews .event-ticker-badge, #viewNews .news-chip {
  display: inline-block; margin: 0 4px 0 0; padding: 1px 7px; border: 0; border-radius: var(--fx-radius-chip, 7px);
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font:650 13.5px/1.45 var(--mono); letter-spacing: 0;
}
#viewNews .event-meta { margin-top: 4px; font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewNews .event-meta__source { font-weight: 600; color: var(--text-2); }
#viewNews .event-meta__dot, #viewNews .news-item__dot { background: var(--text-3); }
#viewNews .events-empty, #viewNews .news-full-list > .loading, #viewNews .events-list > .loading {
  padding: 14px 24px; font:400 15px/1.5 var(--sans); color: var(--text-2); text-align: left;
}
#viewNews .events-list > .loading, #viewNews .events-list > .events-empty { padding: 14px 0; }
/* The news search sits in the panel, a pill input; the watchlist switch beside it. */
#viewNews .news-search { padding: 4px 24px 10px; border: 0; background: none; }
#viewNews .news-search__icon { left: 38px; width: 16px; height: 16px; color: var(--text-2); }
#viewNews .news-search__input {
  min-height: 40px; padding: 0 40px 0 42px; border: 0; border-radius: 999px; background: var(--fx-track);
  color: var(--text); font:400 15px/1.3 var(--sans); box-shadow: none;
}
#viewNews .news-search__input:focus { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
#viewNews .news-search__clear { right: 128px; width: 26px; height: 26px; background: var(--fx-track-hi); }
#viewNews .news-search__count { min-width: 90px; font:400 13px/1.3 var(--sans); color: var(--text-2); }
#viewNews .news-watch-toggle {
  display: inline-flex; align-items: center; min-height: 36px; margin: 0 24px 6px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--fx-track); color: var(--text); font:500 13.5px/1 var(--sans); box-shadow: none; transform: none;
}
#viewNews .news-watch-toggle:hover { background: var(--fx-track-hi); color: var(--text); border: 0; }
#viewNews .news-watch-toggle.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-soft) !important; }
/* Stories: grouped under a quiet date label; each story a row on a hairline. */
#viewNews .news-date-group { border: 0; }
#viewNews .news-date-label {
  position: sticky; top: 0; z-index: 2; padding: 18px 24px 6px; border: 0; background: var(--fx-panel);
  font:600 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
#viewNews .news-item { margin: 0 12px; padding: 12px 12px; border: 0; border-radius: 10px; }
#viewNews .news-item + .news-item { border-top: 1px solid var(--fx-rule); border-radius: 0 0 10px 10px; }
#viewNews .news-search__clear[hidden] { display: none; }
#viewNews .news-search__input { min-width: 0; }
#viewNews .news-search__count:empty { display: none; }
#viewNews .news-item:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
#viewNews .news-item--watch { border-left: 0; background: none; }
#viewNews .news-item__time { min-width: 76px; padding-top: 1px; font:400 13px/1.45 var(--sans); color: var(--text-2); }
#viewNews .news-item__title { margin-bottom: 4px; font:500 15px/1.45 var(--sans); color: var(--text); }
#viewNews .news-item__summary { margin: 2px 0 4px; font:400 14px/1.55 var(--sans); color: var(--text-2); }
#viewNews .news-item__meta { flex-wrap: wrap; gap: 6px 10px; font:400 13px/1.4 var(--sans); color: var(--text-2); }
#viewNews .news-item__source { color: var(--text-2); font-weight: 600; }
#viewNews .news-item__funds { color: var(--text); font:700 13.5px var(--mono); }
#viewNews .news-chip--watch { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); }
#viewNews .news-watch-flag {
  padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text); font:600 13px/1.5 var(--sans);
}
#viewNews .news-lock { margin-left: 0; font:400 13px/1.4 var(--sans); color: var(--text-2); }

/* ── Status bar and disclaimer line (2.10) ───────────────────────────────── */
.statusbar__seg--legal { color: var(--text-2); }
.legal-strip, .legal-strip b, .legal-strip a { font-size:13px; color: var(--text-2); }

/* Narrower than the summary row: the headline figure sits above the row, and both use the full width
   (the Holdings rule centres them with align-items, which shrank the row and pushed it off the panel). */
@media (max-width: 1100px) {
  #viewPortfolio .pv-sum, #viewIncome .pv-sum { align-items: stretch !important; }
  #viewPortfolio .pv-sum__cell { grid-template-rows: auto auto minmax(18px, auto) !important; }
}
/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  #viewIncome .income-card--summary .card__body, #viewIncome .income-card--summary.card--collapsed .card__body { padding: 6px 20px 20px; }
  #viewIncome .pv-sum { gap: 18px; }
  #viewIncome .pv-sum__hero { font-size:36px; }
  #viewIncome .pv-sum__grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  #viewIncome .card__header, #viewNews > .card > .card__header, #viewPortfolio #portfolioAuditCard .card__header { padding: 18px 20px 8px !important; }
  #viewIncome #incomeProjSummary, #viewIncome #incomeAuditSummary { padding: 4px 20px 12px; }
  #viewIncome .table-wrap { padding: 0 4px 8px; }
  #viewPortfolio .portfolio-empty, #viewIncome .portfolio-empty { padding: 22px 20px !important; }
  #viewPortfolio .pv-sum__grid { grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important; }
  #viewPortfolio .pv-sum__cell, #viewIncome .pv-sum__cell { text-align: left; justify-items: start; min-width: 0; }
  #viewPortfolio .pv-sum__value, #viewIncome .pv-sum__value { font-size:19px; }
  #viewPortfolio .port-stats-strip { padding: 20px !important; }
  #viewPortfolio .pv-sum { gap: 22px !important; }
  #viewIncome .card__header, #viewNews > .card > .card__header { position: relative; padding-right: 52px !important; }
  #viewIncome .card__header .collapse-arrow, #viewNews > .card > .card__header .collapse-arrow { position: absolute; right: 20px; top: 24px; margin: 0; }
  #viewRisk .rk-sum { padding: 20px; }
  #viewRisk .rk-sum__ratio strong { font-size:36px; }
  #viewRisk .rk-sum__figs { gap: 16px 18px; }
  #viewRisk .rk-sum__figs dd, #viewRisk .rk-sum__figs > div:first-child dd { font-size:18px; }
  #viewRisk .rk-pyr { padding: 18px 16px 20px; }
  #viewRisk .rk-adjust__head { padding: 18px 48px 16px 16px; }
  #viewRisk .rk-adjust__body { padding: 0 16px 18px; }
  #viewNews .events-filters { margin: 4px 16px 10px; max-width: calc(100% - 32px); }
  #viewNews .events-list { padding: 0 16px 8px; }
  #viewNews .event-item { flex-direction: column; gap: 6px; }
  #viewNews .event-tag { min-width: 0; }
  #viewNews .news-search { padding: 4px 16px 10px; }
  #viewNews .news-search__icon { left: 30px; }
  #viewNews .news-search__clear { right: 110px; }
  #viewNews .news-watch-toggle { margin: 0 16px 6px; }
  #viewNews .news-date-label { padding: 16px 16px 6px; }
  #viewNews .news-item { margin: 0 6px; padding: 12px 10px; }
  #viewNews .news-item--full { flex-direction: column; gap: 2px; }
  .port-more__menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 44px; min-width: 0; }
}
/* ═══ end One format block ═══ */

/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD · PYRAMID TAB  (Sep 27 2026 — renderPyramidPane in cockpit.js)
   The Risk mix pyramid, dashboard-sized: one row per level (7 at the top, 1 at
   the base) and ETFs beside it. The left column is the pyramid itself — each
   layer's shape is the goal, its fill what is held against it, stripes above it.
   Then the level and what it holds as chips (solid amber = owned, soft outline =
   watchlist, as on the calendar), You vs Goal as aligned figures with the gap in
   words, and "You own X of Y" with its slim tank. With nothing held: the site's
   count and average yield per level. Same language as the Risk mix page and the
   Holdings premium block: one soft elevated surface, hairlines only between
   rows, pills, sentence case, tabular figures. Sizes are in em so the text-size
   setting scales the whole pane. Scoped to .cppyr; nothing else moves.
   ═════════════════════════════════════════════════════════════════════════ */
.cppyr { font-size:15px; padding: 14px 14px 4px; color: var(--text); font-family: var(--sans); min-width: 0; }
.cppyr[hidden] { display: none; }
body[data-text-size="large"] .cppyr { font-size:16.5px; }
body[data-text-size="xlarge"] .cppyr { font-size:18px; }
.cppyr {
  --py-g: 4.2em;                                   /* the pyramid column */
  --py-gap: 1em;
  --py-cols: var(--py-g) minmax(0, 1fr) 4.6em 4.8em;
  --py-surface: color-mix(in srgb, var(--text) 3.5%, var(--bg));
}
.cppyr.is-site { --py-cols: var(--py-g) minmax(0, 1fr) 6em 7em 5.6em; }
.cppyr.is-site.no-c { --py-cols: var(--py-g) minmax(0, 1fr) 6.5em 7.5em; }

/* Heading: the name, one quiet line under it, and the way to the full page. */
.cppyr__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75em 1.25em; padding: .2em .35em 1em; }
.cppyr__title { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.cppyr__h { font:650 max(13px, 1.12em)/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); }
.cppyr__sub { font:400 max(13px, .95em)/1.45 var(--sans); color: var(--text-2); }
.cppyr__sub b { color: var(--text); font:600 max(13px, 1em) var(--mono); font-variant-numeric: tabular-nums; }
.cppyr__sub small { display: inline-block; font-size:max(13px, .9em); color: var(--text-2); }
.cppyr__link {
  padding: 0; border: 0; background: none; cursor: pointer; font:600 max(13px, 1em)/1.45 var(--sans);
  color: var(--accent-soft, var(--accent)); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.cppyr__link:hover { text-decoration-color: currentColor; }
.cppyr__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5em; min-height: 2.3em; padding: 0 1em;
  border: 0; border-radius: var(--fx-radius-ctl, 999px); background: var(--fx-track); color: var(--text);
  font:600 max(13px, .9em)/1.2 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .15s ease;
}
.cppyr__go::after { content: ""; width: .42em; height: .42em; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }
.cppyr__go:hover { background: var(--fx-track-hi); }
.cppyr__go:focus-visible, .cppyr__link:focus-visible, .cppyr__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One soft surface for the rows: elevation, not an outline. */
.cppyr__card {
  padding: .7em .9em .8em; border-radius: 14px; background: var(--py-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent) inset, 0 12px 32px rgba(0, 0, 0, .18);
}
body[data-theme="light"] .cppyr__card { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .14); }
.cppyr__colhead {
  display: grid; grid-template-columns: var(--py-cols); column-gap: var(--py-gap); align-items: end;
  padding: .1em 0 .55em; font:600 max(13px, .82em)/1.3 var(--sans); color: var(--text-2);
}
.cppyr__colhead .cppyr__a, .cppyr__colhead .cppyr__b, .cppyr__colhead .cppyr__c { text-align: right; }
.cppyr__rows { display: grid; gap: 3px; }

/* A row. Its color is its level's: green deepening toward 1, amber reddening toward 7. */
.cppyr__row {
  position: relative; display: grid; grid-template-columns: var(--py-cols); column-gap: var(--py-gap);
  grid-template-areas: "g m a b" "g m s s"; grid-template-rows: auto 1fr; --lc: var(--accent);
}
.cppyr__row--low  { --lc: color-mix(in srgb, var(--green) calc(100% - (var(--lv) - 1) * 9%), var(--text-2)); }
.cppyr__row--high { --lc: color-mix(in srgb, var(--accent) calc(100% - (var(--lv) - 5) * 9%), var(--red)); }
.cppyr.is-site .cppyr__row { grid-template-areas: "g m a b c"; grid-template-rows: auto; align-items: center; }
.cppyr.is-site.no-c .cppyr__row { grid-template-areas: "g m a b"; }
/* hairline between rows, over the words only, so the pyramid stays one shape */
.cppyr__row + .cppyr__row::before {
  content: ""; position: absolute; top: -2px; left: calc(var(--py-g) + var(--py-gap)); right: 0;
  border-top: 1px solid var(--fx-rule, color-mix(in srgb, var(--text) 7%, transparent));
}
.cppyr__row--side { margin-top: .7em; }
.cppyr__row--side + .cppyr__row--side { margin-top: 0; }

/* The layer: its trapezoid is the goal, the fill is what is held against it. */
.cppyr__glyph {
  grid-area: g; position: relative; align-self: stretch; min-height: 3.2em; overflow: hidden;
  background: color-mix(in srgb, var(--lc) 16%, transparent);
}
.cppyr__fill, .cppyr__over { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.cppyr__fill { transform-origin: 50% 50%; background: var(--lc); }
.cppyr__over { background: repeating-linear-gradient(135deg, var(--lc) 0 5px, color-mix(in srgb, var(--lc) 45%, transparent) 5px 10px); }
.cppyr__glyph--side {
  align-self: center; justify-self: center; min-height: 0; padding: .3em .7em; border-radius: var(--fx-radius-ctl, 999px);
  background: color-mix(in srgb, var(--lc) 16%, transparent); color: var(--text);
  font:700 max(13px, .78em)/1.2 var(--mono); letter-spacing: .02em;
}

.cppyr__main { grid-area: m; display: flex; flex-direction: column; justify-content: center; gap: .45em; min-width: 0; padding: .6em 0; }
.cppyr.is-site .cppyr__main { padding: .75em 0; }
.cppyr__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .6em; }
.cppyr__name { font:650 max(13px, 1em)/1.3 var(--sans); color: var(--text); white-space: nowrap; }
.cppyr__tag { font:400 max(13px, .9em)/1.35 var(--sans); color: var(--text-2); }

/* The funds: soft lozenges. Solid amber = yours, soft outline = on your watchlist. */
.cppyr__chips { display: flex; flex-wrap: wrap; gap: .35em; }
.cppyr__chip {
  display: inline-flex; align-items: baseline; gap: .45em; min-height: 1.85em; padding: .28em .6em; border: 0;
  border-radius: var(--fx-radius-chip, 7px); cursor: pointer; white-space: nowrap;
  font:650 max(13px, .88em)/1.2 var(--mono); letter-spacing: .01em; font-variant-numeric: tabular-nums;
  transition: filter .15s ease, box-shadow .15s ease;
}
.cppyr__chip span { font-weight: 500; opacity: .88; }
.cppyr__chip.is-own { color: var(--on-accent, var(--bg)); background: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.cppyr__chip.is-watch { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 32%, transparent); }
.cppyr__chip:hover { filter: brightness(1.08); }
.cppyr__chip.is-watch:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 55%, transparent); }
.cppyr__chip.is-sel { outline: 2px solid var(--text); outline-offset: 2px; }
.cppyr__more { align-self: center; font:500 max(13px, .85em)/1.2 var(--sans); color: var(--text-2); padding: 0 .2em; cursor: default; }
.cppyr__none { font:400 max(13px, .88em)/1.4 var(--sans); color: var(--text-2); }

/* Figures: right-aligned in their columns, tabular. The inline labels show only when narrow. */
.cppyr__fig { display: flex; align-items: baseline; justify-content: flex-end; gap: .35em; min-width: 0; white-space: nowrap; }
.cppyr__fig b { font:600 max(13px, 1.02em)/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.cppyr__lbl { display: none; font:500 max(13px, .85em)/1.2 var(--sans); font-style: normal; color: var(--text-2); }
.cppyr__figs { display: contents; }
.cppyr__row .cppyr__a { grid-area: a; } .cppyr__row .cppyr__b { grid-area: b; } .cppyr__row .cppyr__c { grid-area: c; }
.cppyr.is-mine .cppyr__a, .cppyr.is-mine .cppyr__b { align-self: end; padding-top: .6em; }
.cppyr.is-mine .cppyr__b b { color: var(--text-2); font-weight: 500; }
/* The gap to the goal in words, then "You own X of Y" (how many of the site's funds there are yours). */
.cppyr__meta { grid-area: s; display: flex; flex-direction: column; align-items: flex-end; gap: .3em; padding: .3em 0 .6em; min-width: 0; }
.cppyr__status { display: inline-flex; align-items: center; gap: .45em; font:600 max(13px, .84em)/1.25 var(--sans); color: var(--text); white-space: nowrap; }
.cppyr__status::before { content: ""; width: .55em; height: .55em; border-radius: 50%; flex: 0 0 .55em; box-sizing: border-box; }
.cppyr__status.is-ok { color: var(--green); }
.cppyr__status.is-ok::before { background: var(--green); }
.cppyr__status.is-under { color: var(--text-2); }
.cppyr__status.is-under::before { border: 2px solid var(--accent-soft, var(--accent)); }
.cppyr__status.is-over { color: var(--accent-soft, var(--accent)); }
.cppyr__status.is-over::before { background: var(--accent-soft, var(--accent)); }
.cppyr__status.is-none { color: var(--text-2); font-weight: 500; }
.cppyr__status.is-none::before { background: var(--fx-track-hi); }

.cppyr__own { white-space: nowrap; font:400 max(13px, .84em)/1.3 var(--sans); color: var(--text-2); }
.cppyr__own b { color: var(--text); font:650 max(13px, 1.02em) var(--mono); font-variant-numeric: tabular-nums; }

.cppyr__foot { margin: 0; padding: .9em .35em 1em; font:400 max(13px, .85em)/1.5 var(--sans); color: var(--text-2); }

/* Narrow pane (phones, or a narrow main column): the figures go under the words, each
   with its label, and the column heads drop away. */
@container cp-main (max-width: 600px) {
  .cppyr { --py-g: 2.6em; --py-gap: .8em; padding: 10px 8px 2px; }
  .cppyr__head { flex-direction: column; padding-bottom: .8em; }
  .cppyr__card { padding: .5em .7em .6em; }
  .cppyr__colhead { display: none; }
  .cppyr__lbl { display: inline; }
  .cppyr .cppyr__row, .cppyr.is-site .cppyr__row, .cppyr.is-site.no-c .cppyr__row {
    grid-template-columns: var(--py-g) minmax(0, 1fr); grid-template-areas: "g m" "g f"; grid-template-rows: auto auto; align-items: start;
  }
  .cppyr__main, .cppyr.is-site .cppyr__main { padding: .7em 0 .45em; }
  .cppyr__figs { grid-area: f; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em 1.1em; min-width: 0; padding-bottom: .75em; }
  .cppyr__fig, .cppyr.is-mine .cppyr__a, .cppyr.is-mine .cppyr__b { justify-content: flex-start; padding: 0; }
  .cppyr__meta { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3em 1.1em; padding: 0; }
  .cppyr__chip { min-height: 2.1em; }
}
/* Seven tabs share the main pane's bar with the filter: at a 1440 screen the column is ~710px,
   so the tabs tighten a little rather than scroll Portfolio out of sight. */
@container cp-main (max-width: 900px) {
  .cockpit__col--main .cpane__tabs .cpane__tab { padding-inline: 8px; }
  .cockpit__col--main .cpane__filter { flex-basis: 96px; }
}
/* Narrower than that (a 1280 screen, a larger text size, a phone), the tabs take a row of their
   own above the filter and wrap if they must, so all seven stay in sight instead of scrolling
   off the edge. The largest text size always does this. */
@container cp-main (max-width: 680px) {
  .cockpit__col--main .cpane__bar { height: auto; min-height: 34px; flex-wrap: wrap; padding-block: 5px; row-gap: 6px; }
  .cockpit__col--main .cpane__tabs { flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; overflow: visible; }
}
body[data-text-size="xlarge"] .cockpit__col--main .cpane__bar { height: auto; min-height: 34px; flex-wrap: wrap; padding-block: 5px; row-gap: 6px; }
body[data-text-size="xlarge"] .cockpit__col--main .cpane__tabs { flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; overflow: visible; }
/* ═══ end Dashboard · Pyramid tab ═══ */
/* Matt, Sep 27: no rule between the top bar and the index strip ("the single line that I hate"). */
.topbar { border-bottom: 0 !important; box-shadow: none !important; }
.topbar::after { display: none !important; }

/* ═══ QA Sep 27: correctness fixes (layout that broke, not styling) ═══ */
/* A hidden add-row stays hidden: the flex display overrode [hidden], so the Ticker / Shares / Total
   cost form always showed, on top of the "What you own" header. */
.trk__addrow[hidden] { display: none !important; }
/* Pane headers grow with what wraps inside them. A fixed 30px height let the second line (the
   "fill this table…" checkbox, the From Portfolio button) spill over the first table row. */
#trk .cpane__bar, .view--projection .trk .cpane__bar { height: auto; }
/* Year-by-year projection: scroll the table inside its pane, never the page. */
#viewProjection .cpane__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  /* Tracker toolbar: wrap onto as many rows as it needs; the selects show their value. */
  #trk .trk__bar { flex-wrap: wrap; height: auto; row-gap: 10px; }
  #trk .trk__bar .trk__tag { flex: 1 1 100%; white-space: normal; }
  #trk .trk__bar .trk__spacer { display: none; }
  #trk .trk__sel { min-width: 0; flex: 1 1 140px; max-width: 100%; }
  #trk .trk__sel--yr { flex: 0 0 auto; min-width: 84px; }
  #trk .cpane__meta { margin-left: 0 !important; flex: 1 1 100%; white-space: normal; }
  #trk .trk__barbtns { margin-left: 0; flex-wrap: wrap; }
  /* Research → Browse: the filters fit the grid cell instead of pushing past the screen. */
  .browse-filters > * { min-width: 0; width: 100%; }
}
/* Fund page Exposure: the two columns had no gap ("as of May 29, 2026WHERE", "54.6%US") and the right
   column's note ran past the panel edge. */
#fundExposure { column-gap: 48px; padding: 4px 18px 8px; box-sizing: border-box; }
#fundExposure .fund-exp { min-width: 0; }
#fundExposure .fund-exp__h { gap: 16px; flex-wrap: wrap; }
#fundExposure .fund-exp__note { color: var(--text-3); }
#fundExposure .fund-exp-row { grid-template-columns: minmax(0, 150px) 1fr 52px; }
#fundExposure .fund-exp-row__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Screener: the Record column was cut off at 1440 (the table ran 45px past its panel). Long names
   give way first, with the full name on hover. */
@media (max-width: 1700px) {
  #screenerTable .td-name { max-width: 170px; white-space: nowrap; }
  body[data-text-size="large"] #screenerTable .td-name { max-width: 140px; }
  body[data-text-size="xlarge"] #screenerTable .td-name { max-width: 110px; }
}
/* Phone width: the fixed status bar kept every segment on one 375px line, so "Average yield 10.…" ran
   off the edge and the breadth figures wrapped over two lines. Keep the essentials, on one line, and
   leave room under the page for the bar. The average yield and the disclaimer are on the desk and in
   the page footer. */
@media (max-width: 700px) {
  .statusbar { gap: 12px; padding: 0 12px; white-space: nowrap; overflow: hidden; }
  .statusbar #sbYield, .statusbar #sbLegal, .statusbar #sbBreadth, .statusbar__seg:last-child { display: none; }
  body.app { padding-bottom: 32px; }
  /* Research sub-tabs: all four on screen (Watchlist was past the edge). */
  .research-subtabs { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
}
/* Projection fine print: the "Full disclaimer" link was the browser's default blue (2.11:1 on near-black). */
.trk__hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Calendar heading: a "late" warning ran past the screen edge (to 1450px at 1440). It takes its own line
   under the freshness line and wraps inside the bar. */
.viewbar .viewbar__fresh { white-space: normal; flex: 0 1 auto; max-width: 62%; text-align: right; }
.viewbar .viewbar__fresh .fr__warn { display: block; margin: 2px 0 0; }
@media (max-width: 720px) { .viewbar .viewbar__fresh { max-width: none; text-align: left; } }
@media (max-width: 700px) {
  /* Projection at the largest text size: the chart legend and "Use my numbers" wrap instead of pushing the page sideways. */
  .view--projection .cpane__bar { flex-wrap: wrap; row-gap: 6px; }
  .view--projection .lg-row { flex-wrap: wrap; row-gap: 4px; white-space: normal; min-width: 0; }
  .view--projection .cpane__bar > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  .view--projection .trk__bar { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .view--projection .trk__bar .trk__spacer { display: none; }
  .view--projection .trk__bar .trk__tag { white-space: normal; }
}

/* ═══ Strict review W19 (Sep 27): one quiet grey that reads, one red, one green ═══════════════════════════
   --text-4 was #7f889b: 5.0–5.6:1 on the page and 4.57 on a raised strip, and it carried real content (the
   Universe's announced dates, the fund page's labels). It is lifted so it clears 4.5:1 on every dark surface
   up to --surface-4 (#a3abba: 8.57 page · 7.77 surface · 7.05 surface-2 · 6.05 surface-3 · 4.86 surface-4),
   and the content that used it moves to --text-2 below.
   There were three reds (#ea3943 Universe 4.41:1 on a panel and 3.96 on the selected row, #ff5b66 Portfolio,
   #ff7c83 Risk mix) and two greens. Now --red and --red-bright are the same #ff6b73 (7.16 page · 6.49 surface ·
   5.89 surface-2 · 5.06 surface-3 · 5.83 on the amber selected row) and --green / --green-bright the same
   #16c784 (8.99 · 8.15 · 7.39 · 6.34 · 7.31). The tinted backgrounds (--red-bg / --green-bg) stay. */
:root, .sidenav { --text-4: #a3abba; }
/* Final check (Sep 28): #ff6b73 read 6.88:1 on the pane (#101012). #ff737a, the same hue (357°) a shade lighter:
   7.53 page · 7.23 pane · 7.03 amber selected row · 6.82 surface · 6.19 surface-2. */
:root { --red: #ff737a; --red-bright: #ff737a; --green: #16c784; --green-bright: #16c784; }
/* content that sat in the quiet grey: dates, labels, counts — secondary text (--text-2, 9.4–10.4:1) */
/* (.cp-flat is the Universe's announced-date column and its unchanged figures: 885 cells) */
.cp-flat, .cpfilters__clear, .cpkv__sub, .cppr__lg, .cppair__nav-lbl, .cppair__nav,
.hero-stat__label, .cpslot__lbl, .cpsub { color: var(--text-2); }
/* Compare window: a neutral mark on the highest / lowest value — no green "winner" fill (no-advice rule). */
.cpcmp__t td.cpcmp__win, .cpcmp__t tbody tr:hover td.cpcmp__win { background: none; font-weight: inherit; }
.cpcmp__badge { color: var(--text-2); border-color: var(--border); font-size:13px; font-weight: 600; letter-spacing: .04em; }

/* ═══ Strict review 2 P-B (Sep 27): the desk fits the screen exactly ═══════════════════════════════════════
   It was sized as 100vh − 94px − 28px, but the top bar and market strip are 158px on a MacBook (more at the
   larger text sizes), so the page ran 36px past the screen and its last pane sat under the status bar.
   cockpit.js (cpFitDesk) measures them into --desk-top and the status bar into --desk-sb. The pane under the
   fund detail was crushed to 2px because the detail sizes to its content; it now keeps a usable height and the
   detail scrolls inside its own body. */
@media (min-width: 1081px) {
  /* (the fallbacks are the old budget, for the preview page, which does not load cockpit.js). At the larger
     text sizes styles.css zooms #viewDashboard, and the zoom scales its height too, so it is divided back. */
  .view--dashboard.is-active {
    height: calc((100vh - var(--desk-top, 94px) - var(--desk-sb, 28px)) / var(--desk-z, 1));
    height: calc((100dvh - var(--desk-top, 94px) - var(--desk-sb, 28px)) / var(--desk-z, 1));
  }
  body[data-text-size="large"] #viewDashboard { --desk-z: 1.12; }
  body[data-text-size="xlarge"] #viewDashboard { --desk-z: 1.25; }
  #cockpit > .cockpit__col > .cpane.cpane--flex2 + .cpane { min-height: clamp(180px, 34%, 300px); }
}

/* ═══ Strict review 2 item 7: figures on the amber selected row and the amber Yield box reach 7:1 ═══════════
   The amber tint (--accent-bg over the page, about #2d2516) took the one red to 5.8:1, the Income badge to 5.8
   and the Yield label to 5.8. On the tint only, the red, green and badge greens step lighter (same hues):
   red #ff9ea3 7.7:1, green #4be3a5 9.2:1, the Income badge #5ae8ad 7.8:1 on its own tint; the label takes
   the secondary grey #cdd2db, 9.9:1. Light mode keeps its own darker inks. */
body:not([data-theme="light"]) .cptable tbody tr.sel :is(.cp-down, .yld-red) { color: #ff9ea3; }
body:not([data-theme="light"]) .cptable tbody tr.sel :is(.cp-up, .yld-green) { color: #4be3a5; }
body:not([data-theme="light"]) .cptable tbody tr.sel .fund-kind--income { color: #5ae8ad; }
body:not([data-theme="light"]) .cptable tbody tr.sel .fund-kind--equity { color: #ffd67a; }
body:not([data-theme="light"]) .cptable tbody tr.sel .fund-kind--reit { color: #a9d0ff; }
body:not([data-theme="light"]) .cpkv--y .cpkv__l,
body:not([data-theme="light"]) .cpkv--y .cpkv__l .gq { color: #cdd2db; }
body[data-theme="light"] .cpkv--y .cpkv__l .gq { color: #3f4550; }   /* the "?" on the light amber box: 3.8 → 6.9:1 */

/* ═══ Leftovers item 7: dashboard detail pane — "NAV alone" is never clipped. (The "?" no longer wraps onto
   a line by itself anywhere: glossary.js glues it to the label's last word.) In the Total return cell the
   NAV figure takes its own line under the total return, at the pane's 13px, so a long "NAV alone −10.3%"
   fits the half-width cell at every text size. ════════════════════════════════════════════════════════ */
#cpDetailPane .cpkv--return .cppair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; white-space: normal; }
#cpDetailPane .cpkv--return .cppair__tr { flex: 0 0 100%; }
#cpDetailPane .cpkv--return .cppair__nav-lbl { margin: 0; font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
#cpDetailPane .cpkv--return .cppair__nav { margin: 0; font:600 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
/* its label is the pane's longest ("TOTAL RETURN / YR ?", 154px against 145px): a touch less tracking fits
   it on one line at normal text; at Large it wraps with the "?" kept beside "YR" */
#cpDetailPane .cpkv--return .cpkv__l { letter-spacing: .04em; }

/* Universe pane: the right edge fades while more columns lie past it (cockpit.js cpEdgeFade), so a figure cut at
   the edge reads as "scroll for more". Placed against its column (already position: relative); never takes a click. */
.cpedge { position: absolute; width: 28px; pointer-events: none; z-index: 3; background: linear-gradient(to right, transparent, var(--bg) 85%); }
.cpedge[hidden] { display: none; }
/* While the Compare bar floats over the desk (bottom 24px, about 56px tall), every pane keeps that much room
   under its last row, so nothing stays hidden behind it. On the full desk (a fixed-height grid) the panes end
   above the bar instead: with room only inside the scrolling bodies, the bar still sat on the last Gainers row,
   the heatmap tiles and the Pyramid's Goal figures until each was scrolled. */
@media (max-width: 1080px) { body.cp-cmpbar-on .cockpit .cpane__body { padding-bottom: 88px; } }
@media (min-width: 1081px) { body.cp-cmpbar-on #viewDashboard .cockpit { padding-bottom: 60px; } }
/* Oct 8: an estimated next date ("~10/15", not announced yet) reads quieter than an announced one */
/* estimated from the fund's schedule, not announced: a plain date in a quieter color (no "~", no italics, owner Oct 9) */
.cp-est { color: #8F826A !important; font-style: normal; }
/* a payment's own ex-date once it has passed, while its payday is still ahead (IGD ex 10/1, pays 10/15) */
.cp-expast { color: var(--text-3) !important; }
body[data-theme="light"] .cp-est { color: #7a6c52 !important; }

/* Admin overview tiles (Oct 9): color says what the number is — green people on the desk, gold the paid
   plans, amber waiting on someone, red refused — instead of seven identical grey boxes. */
.adm-stat { --adm: var(--text-3); border-left: 3px solid var(--adm) !important; background: color-mix(in srgb, var(--adm) 7%, transparent) !important; }
.adm-stat .port-stat__value { color: var(--adm); }
.adm-stat--live { --adm: var(--green); }
.adm-stat--plan { --adm: var(--accent); }
.adm-stat--wait { --adm: var(--orange, #f0a23b); }
.adm-stat--stop { --adm: var(--red); }
.adm-stat--all { --adm: var(--text-2); }
.adm-stat.is-zero { opacity: .55; }

/* Admin → Visitors (Oct 9): green = people, gold = pages, blue = where they came from (as the user tiles) */
.adm-visits .card__header { flex-wrap: wrap; gap: 8px 12px; }
.adm-visits__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.adm-visits__me.is-active { color: var(--orange, #f0a23b); border-color: color-mix(in srgb, var(--orange, #f0a23b) 55%, transparent); }
.adm-visits__body { padding: 0 16px 18px; display: grid; gap: 18px; }
.adm-visits__tiles { padding: 0 !important; }
.adm-vchart { position: relative; padding: 18px 44px 0 0; border-radius: 12px; }
.adm-vchart__top { position: absolute; top: 12px; right: 0; font:600 13px var(--sans); color: var(--text-3); }
.adm-vchart__plot { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid var(--border); }
.adm-vbar { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--green); opacity: .9; }
.adm-vbar.is-zero { background: var(--border); opacity: 1; }
.adm-vbar:hover { opacity: 1; filter: brightness(1.15); }
.adm-vchart__x { display: flex; justify-content: space-between; margin-top: 6px; font:500 13px var(--sans); color: var(--text-3); }
.adm-visits__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.adm-visits__h { margin: 0 0 8px; font:700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft, var(--accent)); }
.adm-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.adm-vlist li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size:14px; color: var(--text); }
.adm-vlist__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-vlist__bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; }
.adm-vlist__bar i { display: block; height: 100%; border-radius: 999px; }
.adm-vlist--page .adm-vlist__bar i { background: var(--accent); }
.adm-vlist--src .adm-vlist__bar i { background: var(--cyan, #5bb8f5); }
.adm-vlist b { font-variant-numeric: tabular-nums; font-weight: 600; }
.adm-visits__note { margin: 0; color: var(--text-3); font-size:13px; line-height: 1.5; }
@media (max-width: 760px) { .adm-visits__cols { grid-template-columns: minmax(0, 1fr); } .adm-visits__acts { margin-left: 0; } }

/* Name column (owner, Oct 9: "the name shrunk down to nothing so people can see all of the other columns when
   they expand"): in the Dashboard and Screener tables it gives up its room first, all the way down, and once the
   extra columns are switched on it steps aside entirely. The full name stays on the ticker's tooltip, in the
   fund's panel and on its page. */
.cptable :is(th[data-cps="fundName"], th[data-sort="fundName"]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewScreener #screenerTable.cptable td.cp-nm { min-width: 0 !important; }
.cptable:has(thead :is(th.cpx-h, th.th-x)) :is(th[data-cps="fundName"], th[data-sort="fundName"], td.cp-nm) { display: none; }
/* the sign-up funnel under Visitors: green people still moving, gold the money steps */
.adm-fn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.adm-fn__row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 56px 64px; gap: 12px; align-items: center; font-size:14px; color: var(--text); }
.adm-fn__bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; }
.adm-fn__bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.adm-fn__row.is-money .adm-fn__bar i { background: var(--accent); }
.adm-fn__row b { text-align: right; font-variant-numeric: tabular-nums; }
.adm-fn__row small { text-align: right; color: var(--text-3); font-size:13px; font-variant-numeric: tabular-nums; }
.adm-fn__row.is-zero { color: var(--text-3); }
@media (max-width: 760px) { .adm-fn__row { grid-template-columns: minmax(0, 1fr) 48px 56px; } .adm-fn__bar { display: none; } }