/* ==========================================================================
   Track My Wealth — Sept 2026 redesign ("v2"), matching the iPhone app.
   Every rule is scoped under html.v2, which js/design-v2.js always sets (the new design has been
   the only design since 23 Sept 2026). Palette, type and radii come from the mobile app's
   src/constants/palette.ts ("ink navy + restrained gold") — keep the two in sync.
   Structure: 1 fonts · 2 tokens · 3 base elements · 4 shared components · 5 app header/nav ·
   6 wealth file page · 7 other pages · 8 dialogs/toasts · 9 responsive
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted: the site CSP only allows fonts from 'self') ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }

/* ---------- 2. Tokens ---------- */
html.v2 {
  color-scheme: light;
  /* the iPhone palette */
  --v2-ink: #12213B; --v2-ink-alt: #1B2E4D; --v2-paper: #F5F7FA; --v2-card: #FFFFFF;
  --v2-slate: #5B6472; --v2-slate-soft: #8B93A1; --v2-hair: #E1E6ED;
  --v2-gold: #B9862E; --v2-gold-soft: #EFDDB6; --v2-gold-text: #6B4A12;
  --v2-emerald: #1F7A5C; --v2-emerald-soft: #DCEEE6;
  --v2-rust: #B54B3A; --v2-rust-soft: #F3DFDA; --v2-rust-text: #7E3326;
  --v2-on-ink: #F5F7FA; --v2-on-ink-muted: #A9B4CC; --v2-emerald-on-ink: #7BE3BE;
  --v2-hero-a: #12213B; --v2-hero-b: #1B2E4D; --v2-hero-line: #D2A44E;
  --v2-btn-bg: #12213B; --v2-btn-fg: #F5F7FA; --v2-btn-bg-hover: #1B2E4D;
  --v2-focus: #B9862E;
  --v2-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v2-display: 'Instrument Sans', 'Inter', system-ui, sans-serif;

  /* the variables the existing pages already use, remapped */
  --surface-1: var(--v2-card); --surface-page: var(--v2-paper);
  --text-primary: var(--v2-ink); --text-secondary: var(--v2-slate); --text-muted: #687183;
  --gridline: var(--v2-hair); --baseline: #C9D1DC; --border: var(--v2-hair);
  --card-shadow: 0 1px 2px rgba(18,33,59,0.04);
  --success-text: var(--v2-emerald);
  --accent: var(--v2-ink-alt); --accent-hover: var(--v2-ink);
  --danger: var(--v2-rust); --success: var(--v2-emerald);

  --series-property: #1B2E4D; --series-shares: #B9862E; --series-cash: #1F7A5C;
  --series-loans: #B54B3A; --series-net: #B9862E; --series-super: #2F7F86;
  --series-other: #9C6B4E; --series-crypto: #7A8599;
  --property-wash: rgba(27,46,77,0.12); --shares-wash: rgba(185,134,46,0.16);
  --cash-wash: rgba(31,122,92,0.12); --net-wash: rgba(185,134,46,0.16);
}
html.v2[data-theme="dark"] {
  color-scheme: dark;
  --v2-ink: #0B1526; --v2-ink-alt: #101E36; --v2-paper: #0E1626; --v2-card: #16233A;
  --v2-slate: #A9B2C3; --v2-slate-soft: #6E7891; --v2-hair: #263251;
  --v2-gold: #D2A44E; --v2-gold-soft: #3A3220; --v2-gold-text: #EFDDB6;
  --v2-emerald: #4FBE93; --v2-emerald-soft: #163429;
  --v2-rust: #E37A64; --v2-rust-soft: #3A2420; --v2-rust-text: #F2B8AA;
  --v2-hero-a: #0B1526; --v2-hero-b: #101E36;
  --v2-btn-bg: #F5F7FA; --v2-btn-fg: #0E1626; --v2-btn-bg-hover: #DDE3EC;
  --v2-focus: #D2A44E;

  --surface-1: var(--v2-card); --surface-page: var(--v2-paper);
  --text-primary: #F5F7FA; --text-secondary: var(--v2-slate); --text-muted: #8C95A8;
  --gridline: var(--v2-hair); --baseline: #34426A; --border: var(--v2-hair);
  --card-shadow: none;
  --accent: #D2A44E; --accent-hover: #E4BD6C;

  --series-property: #8FA3C7; --series-shares: #D2A44E; --series-cash: #4FBE93;
  --series-loans: #E37A64; --series-net: #D2A44E; --series-super: #5FB3B9;
  --series-other: #C9967A; --series-crypto: #9AA6BC;
  --property-wash: rgba(143,163,199,0.16); --shares-wash: rgba(210,164,78,0.16);
  --cash-wash: rgba(79,190,147,0.14); --net-wash: rgba(210,164,78,0.16);
}

/* ---------- 3. Base elements ---------- */
html.v2 body {
  font-family: var(--v2-font); background: var(--surface-page); color: var(--text-primary);
  font-feature-settings: 'tnum' 1, 'cv11' 1; -webkit-font-smoothing: antialiased;
}
html.v2 h1, html.v2 h2, html.v2 h3 { font-family: var(--v2-display); font-weight: 600; letter-spacing: -0.005em; color: var(--text-primary); }
html.v2 a { color: var(--accent); }
html.v2 :focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }

html.v2 input, html.v2 select, html.v2 textarea {
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 11px; font-family: var(--v2-font);
}
html.v2 input:focus, html.v2 select:focus, html.v2 textarea:focus { outline: 2px solid var(--v2-focus); outline-offset: 0; border-color: transparent; }
html.v2 input[type=checkbox], html.v2 input[type=radio] { accent-color: var(--v2-ink-alt); }
html.v2[data-theme="dark"] input[type=checkbox], html.v2[data-theme="dark"] input[type=radio] { accent-color: #D2A44E; }
html.v2 label { color: var(--text-secondary); }

html.v2 button, html.v2 .btn, html.v2 a.btnlike {
  font-family: var(--v2-font); font-weight: 600; border-radius: 11px;
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
}
html.v2 button:hover, html.v2 .btn:hover, html.v2 a.btnlike:hover { background: var(--surface-page); }
html.v2 button.primary, html.v2 button[type=submit].primary, html.v2 a.btnlike.open,
html.v2 .upgrade-modal-go, html.v2 .note-modal-save, html.v2 .cd-ok {
  background: var(--v2-btn-bg); color: var(--v2-btn-fg); border-color: var(--v2-btn-bg);
}
html.v2 button.primary:hover, html.v2 a.btnlike.open:hover, html.v2 .upgrade-modal-go:hover,
html.v2 .note-modal-save:hover, html.v2 .cd-ok:hover { background: var(--v2-btn-bg-hover); filter: none; }
html.v2 button.danger-text { background: none; border: none; color: var(--v2-rust); }

/* ---------- 4. Shared components ---------- */
html.v2 .card, html.v2 .section-card, html.v2 .table-card, html.v2 .plan-card, html.v2 .stat-card,
html.v2 .file-card, html.v2 .client-card, html.v2 .personal-card, html.v2 .pchoice, html.v2 .upgrade-cm-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow);
}
html.v2 .pill { font-family: var(--v2-font); font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 100px; background: var(--surface-page); color: var(--text-secondary); }
html.v2 .pill.owner { background: var(--v2-gold-soft); color: var(--v2-gold-text); }
html.v2 .pill.editor, html.v2 .pill.active { background: var(--v2-emerald-soft); color: var(--v2-emerald); }
html.v2 .pill.manager, html.v2 .pill.power_user, html.v2 .pill.complimentary { background: rgba(27,46,77,0.10); color: var(--v2-ink-alt); }
html.v2[data-theme="dark"] .pill.manager, html.v2[data-theme="dark"] .pill.power_user, html.v2[data-theme="dark"] .pill.complimentary { background: rgba(143,163,199,0.16); color: #C9D5EA; }
html.v2 .pill.viewer, html.v2 .pill.starter, html.v2 .pill.standard_user, html.v2 .pill.canceled { background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border); }
html.v2 .pill.super_admin, html.v2 .pill.trialing { background: var(--v2-gold-soft); color: var(--v2-gold-text); }
html.v2 .pill.past_due { background: var(--v2-rust-soft); color: var(--v2-rust); }

html.v2 table.data-table th, html.v2 .table-card thead th {
  background: var(--surface-page); color: var(--text-secondary); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--border);
}
html.v2 table.data-table td, html.v2 .table-card tbody td { border-bottom: 1px solid var(--border); }

html.v2 .modal, html.v2 .note-modal, html.v2 .upgrade-modal, html.v2 .cd-modal, html.v2 #wtIdleModal {
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(11,21,38,0.28);
}
html.v2 .modal-backdrop, html.v2 .note-modal-backdrop, html.v2 .upgrade-modal-backdrop, html.v2 .cd-backdrop, html.v2 #wtIdleBackdrop { background: rgba(14,22,38,0.46); }

/* hero card (net worth) — the iPhone's gradient card */
html.v2 .v2-hero {
  background: linear-gradient(150deg, var(--v2-hero-a) 0%, var(--v2-hero-b) 100%);
  color: var(--v2-on-ink); border-radius: 20px; padding: 22px 22px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
html.v2[data-theme="dark"] .v2-hero { box-shadow: inset 0 0 0 1px var(--v2-hair); }
html.v2 .v2-hero-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--v2-on-ink-muted); }
html.v2 .v2-hero-value { font-family: var(--v2-display); font-weight: 600; font-size: 36px; line-height: 1.05; color: var(--v2-on-ink); font-variant-numeric: tabular-nums; }
html.v2 .v2-hero-sub { font-size: 12px; color: var(--v2-on-ink-muted); }
html.v2 .v2-hero svg { display: block; width: 100%; height: 86px; }
html.v2 .v2-delta { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; border-radius: 100px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
html.v2 .v2-delta.up { background: rgba(31,122,92,0.35); color: var(--v2-emerald-on-ink); }
html.v2 .v2-delta.down { background: rgba(181,75,58,0.32); color: #F6B3A4; }
html.v2 .v2-delta svg { width: 10px; height: 10px; }

/* ---------- 5. App header + nav (every logged-in page) ---------- */
/* Sept 2026 (Mike-requested): centre the page-link menu (Dashboard / My wealth files / Admin /
   Billing / Account) the same way the wealth file's own Overview/Holdings/Cash flow/Notes
   switcher is centred below (see section 6's body.v2-app header.topbar grid) -- same 3-column
   grid mechanism (brand | centred middle column | right-aligned account controls), just applied
   generally here instead of only on the wealth-file page. dashboard.html/account.html/
   admin.html/clients.html/billing.html each split their old single <nav> into a plain
   <nav class="page-links"> (just the links) and a sibling <div class="account-controls">
   (role pill / who / log out) so there are three real grid children to place, exactly like
   .brand / .v2-seg / .topbar-actions on the wealth-file page.
   app.html (the wealth-file page) keeps its own more specific body.v2-app override below,
   which still wins regardless of source order since it's the more specific selector. */
html.v2 header.topbar {
  position: sticky; top: 0; z-index: 40; margin: 0; min-height: 68px; padding: 10px 28px;
  background: var(--surface-1); border-bottom: 1px solid var(--border); box-shadow: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
}
html.v2 header.topbar .site-logo { max-height: 43px; height: 43px; width: auto; }
html.v2[data-theme="dark"] header.topbar img.site-logo:not(.site-logo-dark) { content: url('/wealthtracker-logo-white.png?v=20260923c'); }
html.v2 header.topbar .brand-divider { height: 22px; background: var(--border); }
html.v2 header.topbar h1 { font-size: 16px; }
html.v2 header.topbar nav.page-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-self: center; }
html.v2 header.topbar nav.page-links a {
  color: var(--text-secondary); font-size: 13.5px; font-weight: 600; text-decoration: none;
  border-radius: 9px; padding: 8px 13px;
}
html.v2 header.topbar nav.page-links a:hover { color: var(--text-primary); background: var(--surface-page); text-decoration: none; }
html.v2 header.topbar nav.page-links a[aria-current="page"] { color: var(--text-primary); background: var(--surface-page); }
html.v2 header.topbar .account-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-self: end; }
html.v2 header.topbar .who { font-size: 13px; color: var(--text-secondary); margin: 0 4px 0 8px; }
html.v2 header.topbar .who::before { content: none; }
html.v2 header.topbar button { font-size: 13px; padding: 8px 13px; border-radius: 10px; }
html.v2 .v2-theme-btn { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
html.v2 .v2-theme-btn svg { width: 16px; height: 16px; stroke: var(--text-secondary); }
html.v2 .site-footer, html.v2 footer.site-footer { color: var(--text-secondary); }

html.v2 .v2-page-title { font-size: 30px !important; font-weight: 600; margin-bottom: 4px !important; }
html.v2 body.v2-auth .v2-page-title { font-size: 26px !important; }

/* ---------- 6. Wealth file page (app.html) — layout built by js/v2-app.js ---------- */
html.v2 body.v2-app .wrap.viz-root { max-width: 1320px; padding: 26px 32px 90px; }
html.v2 body.v2-app header.topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; padding: 10px 28px; }
html.v2 body.v2-app header.topbar .v2-seg { justify-self: center; }
html.v2 body.v2-app header.topbar .brand { gap: 14px; }
/* "← My files": a clear button, not small grey text (Mike, 23 Sept 2026) */
html.v2 body.v2-app header.topbar .brand #myFilesLink {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--text-primary); text-decoration: none;
  padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-1);
}
html.v2 body.v2-app header.topbar .brand #myFilesLink:hover { background: var(--surface-page); }
html.v2 body.v2-app header.topbar .brand #myFilesLink .v2-back-arrow { font-size: 18px; line-height: 1; }
html.v2 .v2-more-list a { display: block; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); text-decoration: none; border: none; background: none; }
html.v2 .v2-more-list a:hover, html.v2 .v2-more-list button:hover { background: var(--surface-page); }
/* the light/dark button: an icon instead of the emoji app.js writes into it */
html.v2 #themeToggle {
  font-size: 0; width: 38px; height: 38px; padding: 0; background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}
html.v2[data-theme="dark"] #themeToggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B2C3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
/* ▾/▴ open-close arrows (collapsible cards, holding rows, Asset breakdown): 28px — more than
   twice the earlier 13px, so they're easy to see and hit (Mike, 23 Sept 2026) */
html.v2 body.v2-app .entry-card-chevron, html.v2 body.v2-app .collapsible-card-chevron, html.v2 .v2-expand-btn {
  font-size: 28px; line-height: 1; color: var(--text-secondary); flex-shrink: 0;
}
html.v2 body.v2-app .tools-menu-item .tmi-icon { display: none; }
html.v2 body.v2-app header.topbar .brand .sub { display: none; }
html.v2 body.v2-app .topbar-actions { justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
html.v2 body.v2-app .topbar-actions > * { flex-shrink: 0; }
html.v2 body.v2-app #whoami { display: none; }
html.v2 body.v2-app .topbar-actions button, html.v2 body.v2-app .topbar-actions a.mini-btn,
html.v2 body.v2-app .tools-menu > button { font-size: 13px; padding: 8px 12px; border-radius: 10px; }
html.v2 body.v2-app a.mini-btn { color: var(--text-secondary); text-decoration: none; font-weight: 600; border: none; background: none; }
html.v2 body.v2-app a.mini-btn:hover { color: var(--text-primary); }
html.v2 body.v2-app .save-status { font-size: 12px; color: var(--text-secondary); min-width: 64px; }

/* segmented view switcher (Overview / Holdings / Cash flow / Notes) */
html.v2 .v2-seg { display: inline-flex; gap: 4px; background: var(--surface-page); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
html.v2 .v2-seg button {
  border: none; background: transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  border-radius: 9px; padding: 8px 18px;
}
html.v2 .v2-seg button:hover { color: var(--text-primary); background: transparent; }
html.v2 .v2-seg button[aria-selected="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(18,33,59,0.14); }
html.v2[data-theme="dark"] .v2-seg button[aria-selected="true"] { background: #22314F; box-shadow: none; }

/* "More" overflow menu in the header (backup export/import) */
html.v2 .v2-more { position: relative; }
html.v2 .v2-more > summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
html.v2 .v2-more > summary::-webkit-details-marker { display: none; }
html.v2 .v2-more-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(11,21,38,0.18);
  display: flex; flex-direction: column; gap: 2px;
}
html.v2 .v2-more-list button { border: none; text-align: left; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; }

/* title row */
html.v2 .v2-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
html.v2 .v2-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.v2 .v2-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.v2 .v2-title .wealth-file-name { font-family: var(--v2-display); font-size: 28px; font-weight: 600; color: var(--text-primary); max-width: none; overflow: visible; white-space: normal; }
html.v2 .v2-title #renameFileBtn { border: none; background: none; color: var(--text-secondary); font-size: 15px; padding: 4px 6px; }
html.v2 .v2-title-sub { font-size: 13px; color: var(--text-secondary); }
html.v2 .v2-hint { font-size: 12.5px; color: var(--text-secondary); }

html.v2 .profile-bar { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; margin-bottom: 18px; }
html.v2 .profile-bar select { width: auto; min-width: 180px; padding: 7px 10px; }

/* summary tiles */
/* one row that scrolls sideways; about five tiles visible on a laptop, arrows appear when there's more */
html.v2 .v2-tiles-row { position: relative; margin-bottom: 22px; }
html.v2 .v2-tiles {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: thin; padding-bottom: 6px; overscroll-behavior-x: contain;
}
html.v2 .v2-tiles > .v2-tile { flex: 0 0 calc((100% - 64px) / 5); min-width: 180px; scroll-snap-align: start; }
html.v2 .v2-tiles-arrow {
  position: absolute; top: calc(50% - 3px); transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(11,21,38,0.16);
}
html.v2 .v2-tiles-arrow[hidden] { display: none; }
html.v2 .v2-tiles-arrow svg { width: 16px; height: 16px; }
html.v2 .v2-tiles-prev { left: -14px; }
html.v2 .v2-tiles-next { right: -14px; }
html.v2 .v2-tile {
  text-align: left; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 17px 19px 12px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; font-family: var(--v2-font);
  box-shadow: none; transition: border-color .12s ease;
}
html.v2 .v2-tile:hover { background: var(--surface-1); border-color: var(--baseline); }
html.v2 .v2-tile[aria-pressed="true"] { border: 2px solid var(--v2-ink-alt); padding: 16px 18px 11px; }
html.v2[data-theme="dark"] .v2-tile[aria-pressed="true"] { border-color: #D2A44E; }
html.v2 .v2-tile-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); }
html.v2 .v2-tile-value { font-family: var(--v2-display); font-size: 25px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v2 .v2-tile-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
html.v2 .v2-up { color: var(--v2-emerald); font-weight: 600; }
html.v2 .v2-down { color: var(--v2-rust); font-weight: 600; }
html.v2 .v2-tile svg { display: block; width: 100%; height: 40px; margin-top: 4px; }
html.v2 .v2-tile.v2-tile-debt { background: var(--v2-rust-soft); border-color: transparent; }
html.v2 .v2-tile.v2-tile-debt .v2-tile-label, html.v2 .v2-tile.v2-tile-debt .v2-tile-meta { color: var(--v2-rust-text); }
html.v2 .v2-tile.v2-tile-debt .v2-tile-value { color: var(--v2-rust); }
html.v2 .v2-tile.v2-tile-excluded { opacity: .55; }

/* split view */
html.v2 .v2-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
html.v2 .v2-left { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
html.v2 .v2-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
html.v2 .v2-right > .card, html.v2 .v2-left > .card, html.v2 .v2-right > section, html.v2 .v2-right > .charts-grid { margin: 0; }
html.v2 .v2-left .card { padding: 0; }
html.v2 .v2-left #futureProjectionCard { padding: 18px 20px; }
html.v2 body.v2-app .card { padding: 20px 22px; }
html.v2 body.v2-app .collapsible-card { padding: 0; }
html.v2 body.v2-app .collapsible-card-head { padding: 16px 20px; }
html.v2 body.v2-app .card h2 { font-size: 17px; }
html.v2 body.v2-app .card-desc { color: var(--text-secondary); }
html.v2 body.v2-app .hero-card { display: none; } /* replaced by .v2-hero; kept in the DOM for app.js */

/* which blocks show in which view */
html.v2 body.v2-app .v2-right [data-v2-view] { display: none; }
html.v2 body.v2-app.v2-view-overview .v2-right [data-v2-view~="overview"],
html.v2 body.v2-app.v2-view-holdings .v2-right [data-v2-view~="holdings"],
html.v2 body.v2-app.v2-view-cashflow .v2-right [data-v2-view~="cashflow"],
html.v2 body.v2-app.v2-view-notes .v2-right [data-v2-view~="notes"] { display: block; }
html.v2 body.v2-app.v2-view-overview .v2-right .charts-grid[data-v2-view~="overview"] { display: grid; }
html.v2 body.v2-app.v2-view-cashflow .section-tabs-bar,
html.v2 body.v2-app.v2-view-notes .section-tabs-bar { display: none; }
html.v2 body.v2-app #sectionTabs [data-tab="cashflow"], html.v2 body.v2-app #sectionTabs [data-tab="notes"] { display: none !important; }
html.v2 body.v2-app .household-card[style*="display: none"] { display: none !important; }

/* category chips (the existing section tabs, restyled) */
html.v2 body.v2-app .section-tabs-bar { margin-bottom: 16px; }
html.v2 body.v2-app .section-tabs { gap: 8px; }
html.v2 body.v2-app .section-tabs button {
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 100px; padding: 8px 15px; font-size: 13px; font-weight: 600;
}
html.v2 body.v2-app .section-tabs button.active { background: var(--v2-btn-bg); border-color: var(--v2-btn-bg); color: var(--v2-btn-fg); }
html.v2 body.v2-app .collapse-all-btn { border: none; background: none; color: var(--text-secondary); font-size: 12.5px; }

/* entry rows — the iPhone's rounded rows */
html.v2 body.v2-app .entry-list { display: flex; flex-direction: column; gap: 12px; }
html.v2 body.v2-app .entry-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px;
  box-shadow: none; margin: 0;
}
html.v2 body.v2-app .entry-card.expanded { border-color: var(--baseline); box-shadow: 0 6px 24px rgba(18,33,59,0.07); }
html.v2 body.v2-app .entry-card-title-display { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
html.v2 body.v2-app .entry-card-footer, html.v2 body.v2-app .entry-card-footer-inline { color: var(--text-secondary); font-size: 12.5px; }
html.v2 body.v2-app .entry-card-toggle { border: none; background: none; border-radius: 10px; }
html.v2 body.v2-app .entry-card-toggle:hover { background: var(--surface-page); }
html.v2 body.v2-app .entry-card-body { background: var(--surface-page); margin: 14px -16px -14px; padding: 16px; border-top: 1px solid var(--border); border-radius: 0 0 16px 16px; }
html.v2 body.v2-app .entry-card-fields .field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
html.v2 body.v2-app .entry-card-fields .field input, html.v2 body.v2-app .entry-card-fields .field select { background: var(--surface-1); border-radius: 10px; }
html.v2 body.v2-app .add-row-btn {
  margin-top: 14px; background: var(--v2-btn-bg); color: var(--v2-btn-fg); border-color: var(--v2-btn-bg);
  border-radius: 11px; padding: 11px 18px; font-size: 14px;
}
html.v2 body.v2-app .add-row-btn:hover { background: var(--v2-btn-bg-hover); }

html.v2 body.v2-app .stat-tile { background: var(--surface-page); border: 1px solid var(--border); border-radius: 14px; }
html.v2 body.v2-app .stat-tile .stat-value { font-family: var(--v2-display); }
html.v2 body.v2-app .household-card .hero-figure, html.v2 body.v2-app .tool-result-hero { font-family: var(--v2-display); }
html.v2 body.v2-app .table-toggle-btn { font-size: 12.5px; padding: 7px 12px; }
html.v2 body.v2-app .charts-grid { gap: 18px; }
html.v2 body.v2-app .viewer-banner { border-radius: 14px; background: var(--v2-gold-soft); color: var(--v2-gold-text); border: none; }
html.v2 body.v2-app .save-banner { border-radius: 14px; }
html.v2 body.v2-app .progress-track { background: var(--surface-page); border-radius: 8px; }
html.v2 body.v2-app .progress-fill { background: var(--v2-gold); border-radius: 8px; }
html.v2 body.v2-app .progress-fill.met { background: var(--v2-emerald); }
html.v2 body.v2-app .tools-menu-list, html.v2 body.v2-app .tools-panel, html.v2 body.v2-app .autocomplete-list {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(11,21,38,0.18);
}
html.v2 body.v2-app .site-footer { margin-top: 36px; text-align: center; font-size: 12.5px; }

/* ---------- 7. Other pages ---------- */
/* My wealth files (dashboard.html) */
html.v2 body.v2-dashboard .wrap, html.v2 body.v2-clients .wrap, html.v2 body.v2-account .wrap,
html.v2 body.v2-billing .wrap { max-width: 1200px; padding-top: 32px; }
html.v2 .v2-page-hero-row { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; }
html.v2 body.v2-dashboard .files-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
html.v2 body.v2-dashboard .file-card {
  flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; flex-wrap: wrap;
}
html.v2 body.v2-dashboard .file-card h3 { font-size: 15.5px; margin: 0; }
html.v2 body.v2-dashboard .file-card .meta { color: var(--text-secondary); font-size: 12.5px; flex-basis: 100%; order: 3; margin-top: -8px; padding-left: 56px; }
html.v2 body.v2-dashboard .file-card .actions { margin: 0 0 0 auto; padding: 0; order: 2; align-items: center; }
html.v2 .v2-file-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-page); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.v2 .v2-file-icon svg { width: 18px; height: 18px; stroke: var(--series-property); }
html.v2 .v2-file-value { font-family: var(--v2-display); font-size: 17px; font-weight: 600; min-width: 110px; text-align: right; color: var(--text-primary); }
html.v2 .v2-file-value.v2-neg { color: var(--v2-rust); }
html.v2 body.v2-dashboard .file-card .actions button, html.v2 body.v2-dashboard .file-card .actions a.btnlike,
html.v2 body.v2-clients .client-card .actions button, html.v2 body.v2-clients .client-card .actions a.btnlike,
html.v2 body.v2-clients .personal-card .actions button, html.v2 body.v2-clients .personal-card .actions a.btnlike {
  font-size: 12.5px; padding: 7px 12px; border-radius: 10px;
}
html.v2 body.v2-dashboard .empty { border-radius: 20px; background: var(--surface-1); }
html.v2 body.v2-dashboard .welcome-categories span { background: var(--v2-gold-soft); color: var(--v2-gold-text); border-color: transparent; }
html.v2 #upsellBanner { background: var(--v2-gold-soft) !important; color: var(--v2-gold-text) !important; border: none !important; border-radius: 16px !important; }
html.v2 #upsellBanner a, html.v2 #upsellBanner button { color: var(--v2-btn-fg); background: var(--v2-btn-bg); border-radius: 10px; }

/* Adviser dashboard (clients.html) */
html.v2 body.v2-clients .stat-strip { gap: 16px; }
html.v2 body.v2-clients .stat-card .stat-num { font-family: var(--v2-display); font-weight: 600; color: var(--text-primary); }
html.v2 body.v2-clients .stat-card .stat-label { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
html.v2 body.v2-clients .clients-grid { gap: 16px; }
html.v2 body.v2-clients .client-card { padding: 18px; }
html.v2 body.v2-clients .client-card .avatar { background: var(--v2-gold-soft); color: var(--v2-gold-text); }
html.v2 body.v2-clients .client-card h4, html.v2 body.v2-clients .personal-card h4 { font-family: var(--v2-display); font-size: 16px; }
html.v2 body.v2-clients .personal-card .file-icon { background: var(--surface-page); }
html.v2 body.v2-clients .dash-section .section-head h3 { font-size: 18px; }
html.v2 .v2-card-value { font-family: var(--v2-display); font-size: 21px; font-weight: 600; color: var(--text-primary); }
html.v2 .v2-card-value.v2-neg { color: var(--v2-rust); }

/* Account (account.html) + the shared display-preference toggles (account + clients modal) */
html.v2 body.v2-account .section-card { padding: 22px 24px; }
html.v2 .status-badge.on { background: var(--v2-emerald-soft); color: var(--v2-emerald); }
html.v2 .status-badge.off { background: var(--surface-page); color: var(--text-secondary); }
html.v2 .pref-row { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; }
html.v2 .pref-row.dragging { border-color: var(--v2-gold); }
html.v2 .pref-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 42px !important; height: 24px; border-radius: 24px; flex: none;
  background: var(--border); position: relative; cursor: pointer; border: none; padding: 0; margin: 0; transition: background .15s ease;
}
html.v2 .pref-toggle input[type="checkbox"]::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left .15s ease;
}
html.v2 .pref-toggle input[type="checkbox"]:checked { background: var(--v2-emerald); }
html.v2 .pref-toggle input[type="checkbox"]:checked::after { left: 21px; }
html.v2 .backup-codes code, html.v2 .secret-fallback code { background: var(--surface-page); border-radius: 8px; }

/* Billing (billing.html) */
html.v2 body.v2-billing .plan-card { padding: 24px 26px; }
html.v2 body.v2-billing .plan-card .name { font-family: var(--v2-display); font-weight: 600; font-size: 24px; }
html.v2 .cycle-toggle { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
html.v2 .cycle-toggle button { border: none; background: transparent; color: var(--text-secondary); border-radius: 9px; }
html.v2 .cycle-toggle button.active { background: var(--v2-btn-bg); color: var(--v2-btn-fg); }
html.v2 .pchoice { padding: 24px; }
html.v2 .pchoice h3 { font-size: 20px; }
html.v2 .price-line { font-family: var(--v2-display); }
html.v2 .feature-list svg { color: var(--v2-emerald); stroke: var(--v2-emerald); }
html.v2 .status-note { border-radius: 12px; background: var(--surface-page); color: var(--text-secondary); }
html.v2 .status-note.good { background: var(--v2-emerald-soft); color: var(--v2-emerald); }
html.v2 .status-note.warn { background: var(--v2-gold-soft); color: var(--v2-gold-text); }
html.v2 .status-note.bad { background: var(--v2-rust-soft); color: var(--v2-rust); }

/* Admin (admin.html) */
html.v2 body.v2-admin .page-head h1 { font-size: 30px; }
html.v2 body.v2-admin .stat-card { border-radius: 16px; }
html.v2 body.v2-admin .stat-total { font-family: var(--v2-display); font-weight: 600; color: var(--text-primary); }
html.v2 body.v2-admin .stat-label { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11.5px; color: var(--text-secondary); }
html.v2 body.v2-admin .stat-icon { background: var(--surface-page); color: var(--series-property); }
html.v2 body.v2-admin .tabs { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 4px; display: inline-flex; gap: 4px; border-bottom: 1px solid var(--border); }
html.v2 body.v2-admin .tab-btn { border: none; background: transparent; color: var(--text-secondary); border-radius: 9px; padding: 8px 16px; }
html.v2 body.v2-admin .tab-btn.active { background: var(--v2-btn-bg); color: var(--v2-btn-fg); border: none; }
html.v2 body.v2-admin .tab-btn.active .count { background: rgba(255,255,255,0.18); color: inherit; }
html.v2 body.v2-admin .chip { border-radius: 100px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600; }
html.v2 body.v2-admin .chip.active { background: var(--v2-btn-bg); border-color: var(--v2-btn-bg); color: var(--v2-btn-fg); }
html.v2 body.v2-admin .search-box input { border-radius: 10px; background: var(--surface-1); }
html.v2 body.v2-admin .table-card tbody tr:hover { background: var(--surface-page); }
html.v2 body.v2-admin .avatar { background: var(--v2-gold-soft); color: var(--v2-gold-text); }
html.v2 body.v2-admin .menu { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(11,21,38,0.18); }
html.v2 body.v2-admin .menu button { border: none; border-radius: 9px; }
html.v2 body.v2-admin .menu button.danger { color: var(--v2-rust); }
html.v2 body.v2-admin .icon-btn { border-radius: 9px; }
html.v2 body.v2-admin #newUserBtn { background: var(--v2-btn-bg); color: var(--v2-btn-fg); border-color: var(--v2-btn-bg); }
html.v2 body.v2-admin .file-link { color: var(--text-primary); }

/* Log in / sign up / password pages (a single centred card) */
html.v2 body.v2-auth { background: var(--surface-page); }
html.v2 body.v2-auth .wrap > .card { padding: 32px 32px 28px; border-radius: 22px; }
html.v2 body.v2-auth .card .site-logo { height: 34px; width: auto; margin-bottom: 18px; }
html.v2[data-theme="dark"] body.v2-auth .card img.site-logo { content: url('/wealthtracker-logo-white.png?v=20260923c'); }
html.v2 body.v2-auth h1 { font-size: 26px; }
html.v2 body.v2-auth input { padding: 12px 14px; }
html.v2 body.v2-auth button.primary { border-radius: 12px; padding: 13px 16px; }
html.v2 body.v2-auth .v2-auth-tools { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
html.v2 .msg.error { background: var(--v2-rust-soft); color: var(--v2-rust); }
html.v2 .msg.success { background: var(--v2-emerald-soft); color: var(--v2-emerald); }

/* ---------- 8. Dialogs, toasts ---------- */
html.v2 .undo-toast { background: #12213B; color: #F5F7FA; border-radius: 14px; box-shadow: 0 12px 32px rgba(11,21,38,0.3); font-family: var(--v2-font); }
html.v2 .undo-toast-btn { color: #D2A44E; font-weight: 700; background: none; border: none; }
html.v2[data-theme="dark"] .undo-toast { background: #F5F7FA; color: #0E1626; }
html.v2[data-theme="dark"] .undo-toast-btn { color: #8A6212; }
html.v2 .cd-cancel, html.v2 .note-modal-cancel, html.v2 .upgrade-modal-cancel { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
html.v2 .cd-input { border-radius: 11px; }
html.v2 #wtIdleStayBtn { background: var(--v2-btn-bg); color: var(--v2-btn-fg); }

/* ---------- 9. Responsive ---------- */
@media (max-width: 1100px) {
  html.v2 .v2-split { grid-template-columns: 1fr; }
  html.v2 .v2-left { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  html.v2 body.v2-app header.topbar { grid-template-columns: 1fr auto; }
  html.v2 body.v2-app header.topbar .v2-seg { grid-column: 1 / -1; order: 3; justify-self: start; }
  /* Same "wrap the centred middle column onto its own row" fallback as the wealth-file page's
     .v2-seg above, for the page-link menu on dashboard/account/admin/clients/billing. */
  html.v2 header.topbar { grid-template-columns: 1fr auto; }
  html.v2 header.topbar nav.page-links { grid-column: 1 / -1; order: 3; justify-self: start; }
  html.v2 .v2-page-hero-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  html.v2 header.topbar { padding: 10px 14px; }
  html.v2 header.topbar nav.page-links { overflow-x: auto; max-width: 100%; }
  html.v2 body.v2-app .wrap.viz-root { padding: 16px 14px 70px; }
  html.v2 body.v2-app .topbar-actions { flex-wrap: wrap; justify-content: flex-start; }
  html.v2 .v2-seg { overflow-x: auto; max-width: 100%; }
  html.v2 .v2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.v2 .v2-tile-value { font-size: 20px; }
  html.v2 .v2-title .wealth-file-name { font-size: 22px; }
}

/* Admin table: one text size across every cell (classic mixed 13px and the browser default) */
html.v2 body.v2-admin .table-card tbody td { font-size: 13.5px; }
html.v2 body.v2-admin .page-head { margin: 8px 0 22px; }

/* "Open" buttons on file / client cards: the page stylesheets' own, more specific rules would
   otherwise paint these with --accent (gold in dark mode) instead of the primary button colour. */
html.v2 .file-card .actions a.btnlike.open, html.v2 .client-card .actions a.btnlike.open,
html.v2 .personal-card .actions a.btnlike.open {
  background: var(--v2-btn-bg); color: var(--v2-btn-fg); border-color: var(--v2-btn-bg);
}

/* Phones: header becomes logo row, then actions, then the view switcher — all wrapping, never wider than the screen */
@media (max-width: 720px) {
  html.v2 body.v2-app header.topbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  html.v2 body.v2-app header.topbar .brand { flex: 1 1 auto; min-width: 0; }
  html.v2 body.v2-app .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; order: 2; }
  html.v2 body.v2-app header.topbar .v2-seg { order: 3; flex: 1 1 100%; justify-self: auto; overflow-x: auto; }
  html.v2 body.v2-app header.topbar .v2-seg button { flex: 1 0 auto; padding: 8px 12px; }
  html.v2 body.v2-app .v2-more-list { left: 0; right: auto; }
  html.v2 header.topbar nav { margin-left: 0; }
}

/* Display-preference toggles: one column on phones (the classic two-column grid overflowed a 390px screen) */
@media (max-width: 560px) {
  html.v2 .pref-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) { html.v2 body.v2-app .save-status { min-width: 0; } html.v2 body.v2-app .save-status:empty { display: none; } }

/* Collapsible cards (FIRE countdown, benchmark, land tax, drawdown): the clickable header is a
   <button> in the markup — without this it picked up the general button look (its own border and
   rounded box), which made the open card look split in two. */
html.v2 .collapsible-card-head { border: none; border-radius: 0; background: transparent; width: 100%; box-shadow: none; text-align: left; font-weight: inherit; }
html.v2 .collapsible-card-head:hover, html.v2 .collapsible-card-head:focus-visible { background: var(--surface-page); }
html.v2 .collapsible-card.expanded .collapsible-card-head { border-bottom: 1px solid var(--border); }
html.v2 .collapsible-card-body { padding-top: 14px; }
html.v2 body.v2-app select, html.v2 body.v2-app input[type=text], html.v2 body.v2-app input[type=number] { font-size: 14px; }

/* Asset breakdown over time: collapsed by default, arrow on the right to open it */
/* Same look as the collapsible cards (Net worth benchmark etc): the whole header is the toggle,
   arrow on the right, a divider under the header once it's open */
html.v2 body.v2-app .v2-chart-collapsible { padding: 0; overflow: hidden; }
html.v2 .v2-chart-collapsible .chart-head {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; cursor: pointer;
}
html.v2 .v2-chart-collapsible .chart-head:hover { background: var(--surface-page); }
html.v2 .v2-chart-collapsible .chart-head > div:first-child { flex: 1 1 auto; min-width: 0; }
html.v2 .v2-chart-collapsible:not(.v2-collapsed) .chart-head { border-bottom: 1px solid var(--border); }
html.v2 .v2-chart-collapsible .chart-canvas-wrap, html.v2 .v2-chart-collapsible .table-view { margin: 14px 20px 20px; }
html.v2 .v2-expand-btn { border: none; background: none; padding: 0 2px; border-radius: 0; box-shadow: none; transition: transform .15s ease; transform: rotate(180deg); }
html.v2 .v2-expand-btn:hover { background: none; }
html.v2 .v2-collapsed .v2-expand-btn { transform: rotate(0deg); }
html.v2 .v2-collapsed .chart-canvas-wrap, html.v2 .v2-collapsed .table-view, html.v2 .v2-collapsed .table-toggle-btn { display: none !important; }

/* Asset breakdown: lighter fills so the stacked areas read as colours, not a grey block */
html.v2 { --property-wash: rgba(27,46,77,0.10); }
@media (max-width: 1100px) { html.v2 .v2-left { align-items: start; } }
html.v2 body.v2-app .table-toggle-btn { white-space: nowrap; flex-shrink: 0; }

/* Log-out rating stars: keep the classic look (plain glyphs, light grey → amber), not the general
   button style this file gives every <button> (Mike, 23 Sept 2026) */
html.v2 .cd-star, html.v2 .cd-star:hover {
  background: none; border: none; border-radius: 0; box-shadow: none; padding: 2px;
  font-size: 26px; line-height: 1; font-weight: normal; color: #d8d7d0;
}
html.v2 .cd-star:hover { transform: scale(1.12); }
html.v2 .cd-star.filled, html.v2 .cd-star.filled:hover { color: #e0a000; }

/* "+ Add …" and "Import CSV": identical buttons side by side */
html.v2 body.v2-app .add-row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
html.v2 body.v2-app .add-row-actions .add-row-btn { margin: 0; }
html.v2 body.v2-app .add-row-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; font-family: var(--v2-font); line-height: 1; }

/* Household total: no empty space where the per-profile breakdown goes when there's only one profile */
html.v2 #householdStatRow:empty, html.v2 #householdTable:empty { display: none; }

/* Phones: category pills wrap into a tidy grid of equal-width buttons (every pill visible, no
   sideways scrolling), with "Collapse all" on its own line underneath. Sept 2026: the earlier
   one-row sideways scroll hid most pills off-screen on a narrow phone. */
@media (max-width: 720px) {
  html.v2 body.v2-app .section-tabs-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  html.v2 body.v2-app .section-tabs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px;
    overflow: visible; padding: 2px 0; margin: 0;
  }
  html.v2 body.v2-app .section-tabs button {
    width: 100%; min-width: 0; padding: 9px 4px; font-size: 12.5px; letter-spacing: -0.1px; text-align: center; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.v2 body.v2-app .collapse-all-btn { align-self: flex-end; padding: 4px 2px; }
}

/* A chart's table view now replaces the chart, so give it the chart's height */
html.v2 body.v2-app .chart-card .table-view.shown { max-height: 340px; margin-top: 12px; }

/* Income tile: a yearly figure (not an asset) — soft gold so it reads as different from the asset tiles */
html.v2 .v2-tile.v2-tile-income { background: var(--v2-gold-soft); border-color: transparent; }
html.v2 .v2-tile.v2-tile-income .v2-tile-label, html.v2 .v2-tile.v2-tile-income .v2-tile-meta { color: var(--v2-gold-text); }
html.v2 .v2-tile-split { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; color: var(--v2-gold-text); }
html.v2 .v2-tile.v2-tile-income[aria-pressed="true"] { border: 2px solid var(--v2-gold); }
html.v2 .v2-tiles, html.v2 body.v2-app .section-tabs { position: relative; }

/* Save / Remove swap on entry rows: Save while the row is open, Remove once it's closed */
html.v2 .entry-card-save { display: none; background: var(--v2-btn-bg); color: var(--v2-btn-fg); border: 1px solid var(--v2-btn-bg);
  border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; margin-left: auto; flex: none; }
html.v2 .entry-card-save:hover { background: var(--v2-btn-bg-hover); }
html.v2 .entry-card.expanded .entry-card-save { display: inline-flex; }
html.v2 .entry-card.expanded .entry-card-remove { display: none; }
/* Cancel (Sept 2026, Save/Cancel): sits beside Save while the row is open, discards this editing
   session's changes instead of committing them. Outline style so Save (the commit action) stays
   the visually stronger of the two. */
html.v2 .entry-card-cancel { display: none; background: transparent; color: var(--v2-btn-bg); border: 1px solid var(--v2-border, var(--v2-btn-bg));
  border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; flex: none; }
html.v2 .entry-card-cancel:hover { background: var(--v2-hover-bg, rgba(0,0,0,.04)); }
html.v2 .entry-card.expanded .entry-card-cancel { display: inline-flex; }
html.v2 .entry-card.just-saved .entry-card-remove, html.v2 .entry-card.just-saved .entry-card-remove:disabled { color: var(--v2-emerald); opacity: 1; font-weight: 600; }

/* "Look up price" beside the ticker field (Shares, Crypto) */
html.v2 .entry-card-row-main .row-main-lookup { flex: none; height: 42px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: var(--v2-btn-bg); color: var(--v2-btn-fg); border: 1px solid var(--v2-btn-bg); white-space: nowrap; }
html.v2 .entry-card-row-main .row-main-lookup:hover { background: var(--v2-btn-bg-hover); }
body.read-only-mode .row-main-lookup { display: none !important; }

/* Read-only "Linked loan" field on asset rows */
html.v2 .field-linked-loan input[disabled] { background: var(--surface-page); color: var(--text-secondary); cursor: not-allowed; opacity: 1; border-style: dashed; }
html.v2 .field-linked-loan .field-note { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* Keep each footer snippet (label + value) on one line; wraps happen only between snippets. */
html.v2 .entry-card-footer > span { white-space: nowrap; }
@media (max-width: 380px) { html.v2 .entry-card-footer > span { white-space: normal; } }

/* Dark mode: every Track My Wealth logo uses the white-tile version (Sept 2026) — the navy tile
   disappeared into the dark background. Covers headers on every page and the popup dialogs. */
html.v2[data-theme="dark"] img.site-logo:not(.site-logo-dark):not(.site-logo-light),
html.v2[data-theme="dark"] .cd-modal img.cd-logo { content: url('/wealthtracker-logo-white.png?v=20260923c'); }

/* Page links (My wealth files / Admin / Billing / Account) use the same segmented control as the
   wealth file's view switcher; the current page is the raised "selected" segment. Sept 2026. */
html.v2 header.topbar nav .v2-nav-seg { margin-right: 6px; }
html.v2 header.topbar nav .v2-nav-seg a {
  border: none; background: transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  border-radius: 9px; padding: 8px 16px; white-space: nowrap;
}
html.v2 header.topbar nav .v2-nav-seg a:hover { color: var(--text-primary); background: transparent; }
html.v2 header.topbar nav .v2-nav-seg a[aria-current="page"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(18,33,59,0.14); }
html.v2[data-theme="dark"] header.topbar nav .v2-nav-seg a[aria-current="page"] { background: #22314F; box-shadow: none; }
@media (max-width: 720px) {
  html.v2 header.topbar nav .v2-nav-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); flex: 1 1 100%; margin-right: 0; overflow: visible; }
  html.v2 header.topbar nav .v2-nav-seg a { text-align: center; padding: 8px 6px; font-size: 13px; }
}

/* One look for every header menu item (Mike, 23 Sept 2026: "they should all be identical"):
   the wealth file's Overview / Holdings / Cash flow / Notes switcher, the "‹ My files" button and
   the page links (Dashboard / My wealth files / Admin / Billing / Account) all share the same
   font, size, weight and height. Placed last and scoped to header.topbar so it beats the general
   `header.topbar button` rule (13px), which had been shrinking the switcher's buttons. */
html.v2 header.topbar .v2-seg button,
html.v2 header.topbar nav .v2-nav-seg a,
html.v2 body.v2-app header.topbar .brand #myFilesLink {
  font-family: var(--v2-font); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0;
}
html.v2 header.topbar .v2-seg button,
html.v2 header.topbar nav .v2-nav-seg a { padding: 8px 16px; border-radius: 9px; }
html.v2 body.v2-app header.topbar .brand #myFilesLink { padding: 8px 14px 8px 10px; }
@media (max-width: 720px) {
  html.v2 header.topbar .v2-seg button,
  html.v2 header.topbar nav .v2-nav-seg a,
  html.v2 body.v2-app header.topbar .brand #myFilesLink { font-size: 13px; }
  html.v2 header.topbar .v2-seg button, html.v2 header.topbar nav .v2-nav-seg a { padding: 8px 10px; }
}

/* Region wording (Oct 2026): see js/region.js */
body.non-au .au-only{display:none!important}
body:not(.non-au) .non-au-only{display:none!important}