/* ==========================================================================
   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); }
/* Verge Technologies footer logo (Mike, 30 Oct 2026) — app.html doesn't load shared.css, where
   this rule was first added, so without this copy here the logo rendered at its full native
   800x225 size on the wealth file page. */
html.v2 .site-footer .footer-logo { display: block; height: 20px; width: auto; margin: 0 auto 8px; opacity: .85; }
html.v2[data-theme="dark"] .site-footer .footer-logo { content: url('/logo-white.png'); }

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: 1024px) {
  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%; }
  /* This rule has existed since the Sept 2026 redesign but never actually worked: the base
     .v2-tiles rule (section 4) is display:flex, so grid-template-columns here was always
     silently ignored, and tiles kept horizontally scrolling at their 180px min-width regardless
     of screen size — the real root of the recurring "too wide" / sideways-scrolling reports
     (Mike, 30 Oct 2026). Matches the native app's own tile grid exactly (WealthSummaryPanel,
     wealth-tracker-mobile): a plain 2-up wrapping grid, never a horizontal scroller. */
  html.v2 .v2-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-x: visible; }
  html.v2 .v2-tiles > .v2-tile { min-width: 0; flex: none; }
  html.v2 .v2-tiles-arrow { display: none !important; }
  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: 1024px) {
  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: 1024px) { 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: 1024px) {
  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: 1024px) {
  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: 1024px) {
  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}

/* ---------- 10. Mobile header menu (Oct 2026, Mike-requested) ----------
   Below 720px, js/v2-shell.js moves every header control except the logo &mdash; individually,
   not as whole containers &mdash; into this single hamburger menu, right-justified in the header,
   instead of wrapping onto extra rows that pushed page content down and made the header unusable
   in portrait or landscape. "Log out" is always the last item. */
html.v2 .v2-header-menu { display: none; position: relative; justify-self: end; }
@media (max-width: 1024px) {
  html.v2 header.topbar { grid-template-columns: 1fr auto !important; }
  html.v2 .v2-header-menu { display: block; }
}
html.v2 .v2-header-menu-btn {
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); color: var(--text-secondary);
}
html.v2 .v2-header-menu-btn svg { width: 20px; height: 20px; }
html.v2 .v2-header-menu.open .v2-header-menu-btn { color: var(--text-primary); background: var(--surface-page); }
html.v2 .v2-header-menu-list {
  /* position:fixed, not absolute (Mike, 30 Oct 2026): header.topbar is position:sticky, and an
     absolutely-positioned descendant of a sticky ancestor was contributing to the page's own
     scrollable width in a way overflow-x:hidden didn't fully catch, which is what was making
     the whole page measure wider than the screen specifically while this menu was open. Fixed
     positioning is anchored to the viewport directly, sidestepping that entirely. */
  display: none; position: fixed; top: 64px; right: 14px; z-index: 70; min-width: 230px;
  max-width: calc(100vw - 28px); max-height: calc(100vh - 90px); overflow-y: auto; padding: 8px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(11,21,38,0.18); flex-direction: column; gap: 2px;
}
html.v2 .v2-header-menu.open .v2-header-menu-list { display: flex; }
/* Each moved item is a direct child of the list (a page link, the theme button, a tools/export
   menu, "Log out", etc.) &mdash; normalise them into one plain vertical list of full-width rows,
   overriding whatever inline/segmented/toolbar styling they had in the header itself. !important
   is deliberate: this is the one place these controls are meant to look different from the header
   bar. Scoped to real controls (a/button/.tools-menu), never to the hidden #importInput file
   input, which must stay display:none. */
html.v2 .v2-header-menu-list > a,
html.v2 .v2-header-menu-list > button {
  display: block !important; width: 100%; box-sizing: border-box; text-align: left !important;
  padding: 11px 12px !important; border-radius: 9px !important; font-size: 14px !important; white-space: normal !important;
  /* Every one of these carries its own colour/border/background from whatever it looked like in
     the header — #myFilesLink in particular is styled as a bordered pill with its colour set by
     a selector requiring it to be inside .brand (header.topbar .brand #myFilesLink), which no
     longer matches once it's moved in here, leaving it to fall back to the site's plain link
     colour on a see-through background: readable on its own, but easy to misread as a blank row
     at a glance, which is what the "empty space" turned out to be (Mike, 30 Oct 2026). Forcing
     one plain colour/background/border on every row removes that ambiguity for good. */
  color: var(--text-primary) !important; background: none !important; border: none !important; box-shadow: none !important;
}
html.v2 .v2-header-menu-list > a[aria-current="page"] { background: var(--surface-page) !important; }
html.v2 .v2-header-menu-list > .who,
html.v2 .v2-header-menu-list > .pill { display: block; width: auto; padding: 8px 12px 2px; font-size: 13px; }
/* app.html hides #whoami in the header already (section 6) — force it here too, so a blank, padded row never shows in the menu in its place (Mike, 30 Oct 2026). */
html.v2 body.v2-app .v2-header-menu-list > #whoami { display: none !important; }
/* save-status is blank almost all the time (it only ever shows transient "Saving…"/"Saved"
   text) — in the header bar that's fine, but as a dropdown row it just reads as unexplained
   empty space (the other half of Mike's 30 Oct 2026 report), so it's dropped from the menu
   entirely rather than shown blank. */
html.v2 .v2-header-menu-list > .save-status { display: none !important; }
/* "Log out" gets a divider above it, since v2-shell.js always places it last in this list. */
html.v2 .v2-header-menu-list > #logoutBtn { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px !important; }
/* The wealth file page's Export report / Tools dropdowns (already their own trigger + list inside
   .tools-menu) keep working as-is once moved in here &mdash; just stacked and de-floated so the
   list opens inline instead of as a second floating panel on top of this one. */
html.v2 .v2-header-menu-list > .tools-menu { display: flex !important; flex-direction: column; width: 100%; }
html.v2 .v2-header-menu-list > .tools-menu > button { width: 100%; text-align: left; }
html.v2 .v2-header-menu-list .tools-menu-list,
html.v2 .v2-header-menu-list .v2-more-list { position: static !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin-top: 2px; width: 100%; }
/* The moved-in "More" details (#v2More, wraps Help/Export backup/Import backup) as a full-width
   row like everything else here, its own trigger styled to match .v2-header-menu-list > button. */
html.v2 .v2-header-menu-list > .v2-more { width: 100%; }
html.v2 .v2-header-menu-list > .v2-more > summary {
  display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 11px 12px;
  border-radius: 9px; font-size: 14px; border: none; background: none;
}

/* ---------- 11. Footer always at the bottom of the screen (Mike, 30 Oct 2026) ----------
   On a short page (few wealth files, a short help article, etc.) the footer used to sit right
   after the content, leaving a block of bare background below it instead of reaching the bottom
   of the screen. Standard sticky-footer fix: body becomes a column flex container spanning at
   least the full viewport height, and the footer's margin-top:auto pushes it down to fill
   whatever's left — while still being pushed further down, not overlapped, once real content
   exceeds the viewport. Modal/dialog backdrops (position:fixed) are unaffected by body becoming
   a flex container. */
html.v2, html.v2 body { min-height: 100%; }
html.v2 body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
/* Flex items default to min-width:auto, which lets a wide child (the wealth-file tiles row, a
   wide chart/table) stop the body shrinking back to screen width — the page-width regression
   Mike hit on 30 Oct 2026, right after this fix went in. Forcing min-width:0 on every direct
   child restores normal shrink-to-fit behaviour; each child's own layout (block, its own
   overflow-x scroll, etc.) is unaffected. */
html.v2 body > * { min-width: 0; }
html.v2 .site-footer, html.v2 footer.site-footer { margin-top: auto; }
/* Belt-and-braces: min-width:0 above should stop the page growing past screen width at all, but
   given this has now come back twice (Mike, 30 Oct 2026), this also hard-clips any horizontal
   overflow at the document level, whatever is actually causing it. Anything that needs to scroll
   sideways on its own (the tiles row, a wide table) already manages that itself with its own
   overflow-x — this only affects the outer page, which should never need to. */
html.v2, html.v2 body { overflow-x: hidden; }

/* ---------- 12. "Dark Mode" / "Light Mode" text in the mobile menu (Mike, 30 Oct 2026) ----------
   The theme toggle is an icon-only button everywhere else (a moon/sun svg for the shared pages'
   generated .v2-theme-btn, a CSS background-image for app.html's #themeToggle) — fine in the
   header bar, unreadable as just a symbol sitting in a list of text rows. Swapped for a plain
   text label here only, driven by html's data-theme attribute so it stays correct as the theme
   is toggled; no JS changes needed. */
html.v2 .v2-header-menu-list > #themeToggle {
  background-image: none !important; font-size: 0 !important;
  /* font-size stays 0 here (its original value, v2.css section 6) — that's what hides
     #themeToggle's actual button text, a literal 🌙 emoji in app.html's static markup, not
     an svg or background image. Giving the button itself a visible font-size (an earlier
     attempt) un-hid that real emoji alongside the "Dark Mode"/"Light Mode" label below,
     instead of removing it (Mike, 30 Oct 2026) — the label gets its own font-size instead.
     #themeToggle's own width/height/padding (section 6) are plain ID-selector rules with no
     !important, but ID beats the class selector this file otherwise uses for every other row
     (html.v2 .v2-header-menu-list > button) even without !important on width/height — so
     those need overriding here too, or the button stays a small 38px square. */
  width: 100% !important; height: auto !important; padding: 11px 12px !important;
}
html.v2 .v2-header-menu-list > .v2-theme-btn svg { display: none; }
html.v2 .v2-header-menu-list > #themeToggle::after,
html.v2 .v2-header-menu-list > .v2-theme-btn::after { content: "Dark Mode"; font-size: 14px; }
html.v2[data-theme="dark"] .v2-header-menu-list > #themeToggle::after,
html.v2[data-theme="dark"] .v2-header-menu-list > .v2-theme-btn::after { content: "Light Mode"; }

/* ---------- 13. Profile bar on mobile (Mike, 30 Oct 2026) ----------
   app.css's .profile-bar is flex-wrap:wrap, which should already let "Profile [Mike ▾]",
   "Traditional view ▾" and "Rename" drop onto their own lines rather than overflow — but its
   two <select> elements carry their own 160-180px min-width (app.css/v2.css), which is more
   than enough on its own, combined, to force the row wider than a phone screen even before
   anything else on the page is accounted for. This is the one element visible cut off in every
   "page too wide" screenshot Mike sent (30 Oct 2026), so it's constrained directly and
   explicitly here rather than relying on the general min-width:0 / overflow-x:hidden fixes
   above to catch it indirectly. */
@media (max-width: 1024px) {
  html.v2 .profile-bar { flex-direction: column; align-items: stretch; }
  html.v2 .profile-bar select { min-width: 0 !important; width: 100% !important; }
  html.v2 .profile-bar .profile-bar-spacer { margin-left: 0; }
}

/* ---------- 14. Nuclear option: nothing wider than its own container on mobile (Mike, 30 Oct 2026) ----------
   Found one confirmed cause — the wealth-file title explicitly removes its own width limit
   (.wealth-file-name has max-width:none, meant for a wide desktop 3-column layout, section 5) so
   it never wraps and just extends past the screen on mobile — but given how many rounds this has
   taken, rather than find and fix each element with the same problem one at a time, this forces
   the issue shut everywhere at once: nothing inside the page can render wider than its own parent
   below 1024px, full stop. Scoped to the page content only (.wrap.viz-root and .wrap), not the
   header/menu (handled separately above) or any element's own deliberate horizontal scroller
   (max-width:100% constrains a scrolling row's own box, not its children, which are what's
   allowed to add up to more than the row and scroll — .v2-tiles keeps scrolling sideways as
   intended). */
@media (max-width: 1024px) {
  html.v2 body .wrap.viz-root *:not(.v2-header-menu-list):not(.v2-header-menu-list *),
  html.v2 body .wrap:not(.viz-root) * { max-width: 100% !important; }
}

/* ---------- 15. Data tables scroll within themselves on mobile (Mike, 30 Oct 2026) ----------
   table.data-table is used all over the app (per-profile breakdown, CGT register, property/
   share summaries, net-wealth-over-time, etc.) for genuinely tabular, many-column data that has
   no card/tile equivalent in the mobile app's own design — unlike the tiles row, this is a case
   where horizontal scroll is the right answer, just contained to the table itself rather than
   carrying the whole page wider. display:block on the table (its rows/cells keep their own
   table-row/table-cell display from the browser's default stylesheet regardless) turns it into
   a plain scrollable box. */
@media (max-width: 1024px) {
  html.v2 table.data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.v2 table.data-table thead, html.v2 table.data-table tbody, html.v2 table.data-table tr { display: revert; }
}