/* ==========================================================================
   NATIVE MOBILE LAYER (<= 768px)
   Loaded after style.css. Everything here is scoped to phone widths so the
   desktop layout is untouched. Removing the <link> to this file restores the
   previous mobile design exactly.

   Structure:
     1. Tokens            6. Sub-tabs → scrollable pills
     2. Base / gutters     7. Cards & summary rows
     3. App bar            8. Forms & primary actions
     4. Bottom tab bar     9. Full-screen pages (push navigation)
     5. Floating button   10. Typography floor, drawer, motion
   ========================================================================== */

/* ---------- 1. TOKENS (shared with desktop.css) ---------- */
:root {
    --m-gutter: 14px;
    --m-appbar-h: 52px;
    --m-ticker-h: 24px;
    --m-tabbar-h: 58px;
    --m-radius: 16px;
    --m-bg: #f2f4f7;
    --m-surface: #ffffff;
    /* Bars are solid: a translucent/blurred bar let scrolled content smear through it
       behind the iPhone status bar. Kept as its own token in case that's revisited. */
    --m-surface-blur: #ffffff;
    --m-hairline: rgba(15, 23, 42, 0.08);
    --m-text: #0f172a;
    --m-muted: #64748b;
    --m-accent: #4f46e5;
    --m-accent-soft: rgba(79, 70, 229, 0.12);
    --m-accent-fill: #4f46e5;           /* filled buttons: stays deep enough for white text in both themes */
    --m-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
    /* iOS 26/27 home-screen apps soften everything in a band just below the status bar, not only
       what sits under it. Push all top-pinned UI down by an extra gap on devices that have a
       status-bar inset (clamp makes the gap 0 where the inset is 0: desktop, browser pane). */
    --m-top-gap: clamp(0px, calc(env(safe-area-inset-top, 0px) * 100), 16px);
    --m-safe-top: calc(env(safe-area-inset-top, 0px) + var(--m-top-gap));
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left: env(safe-area-inset-left, 0px);
    --m-safe-right: env(safe-area-inset-right, 0px);
}

/* Also on <html>: the page background and scrollbar gutter are painted from the root element,
   which sits outside <body>, so body-only dark tokens left a light strip down the right edge. */
:root[data-theme="dark"],
body.dark-mode {
    --m-bg: #0b1120;
    --m-surface: #111827;
    --m-surface-blur: #111827;
    --m-hairline: rgba(255, 255, 255, 0.08);
    --m-text: #f1f5f9;
    --m-muted: #94a3b8;
    --m-accent: #818cf8;
    --m-accent-soft: rgba(129, 140, 248, 0.16);
    --m-accent-fill: #4f46e5;           /* white text on #6366f1 was 4.47:1 - just under AA */
    --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Dark scrollbars and form controls in dark mode */
:root[data-theme="dark"] {
    color-scheme: dark;
    background: var(--m-bg);
}

@media (max-width: 768px) {

    /* ---------- 2. BASE / GUTTERS ---------- */
    html {
        -webkit-text-size-adjust: 100%;
        background: var(--m-bg);
    }

    body {
        margin: 0 !important;                       /* was a 20px desktop-style margin: grey strips on both sides */
        background: var(--m-bg) !important;
        -webkit-tap-highlight-color: transparent;
        /* + room for the floating AI button (44px + gaps) so the last card's actions are never under it */
        padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 76px) !important;
    }

    button, a, .nav-item, [onclick] {
        touch-action: manipulation;
    }

    /* Native apps don't show desktop scrollbars */
    * {
        scrollbar-width: none;
    }
    *::-webkit-scrollbar {
        display: none;
    }

    .tab-content > .tab-pane {
        padding-left: var(--m-gutter) !important;
        padding-right: var(--m-gutter) !important;
    }

    .tab-content > .tab-pane > .p-5,
    .tab-content > .tab-pane > .p-20 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 12px !important;
    }

    /* The app bar now shows the page name, so the big in-page headings are redundant */
    .tab-pane .section-header-main {
        display: none !important;
    }
    .tab-pane div:has(> .section-header-main:only-child) {
        display: none !important;
    }

    /* ---------- 3. APP BAR ---------- */
    /* Starts one status-bar height down rather than padding itself under the status bar:
       iOS 26 home-screen apps blur any element whose box reaches under the status bar, which
       softened the whole bar (logo, page name, icons). The status-bar strip is painted
       separately by body::before (section "PHONE PAGE FIXES"). */
    #app-header-bar {
        top: var(--m-safe-top) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--m-surface-blur) !important;
        border: none !important;
        border-bottom: 1px solid var(--m-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #app-header-bar .user-info-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Toolbar row: [logo + page title] ........ [actions] */
    #dashToolbar {
        order: 1;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        height: var(--m-appbar-h) !important;
        min-height: var(--m-appbar-h) !important;
        padding: 0 10px 0 var(--m-gutter) !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #dashToolbar::before {
        content: "ST Wealth";
        margin-right: auto;
        padding-left: 36px;
        min-height: 28px;
        display: flex;
        align-items: center;
        background: url("icons/icon-192x192.png") left center / 28px 28px no-repeat;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--m-text);
        white-space: nowrap;
    }
    body[data-active-tab="overview-tab"] #dashToolbar::before { content: "Overview"; }
    body[data-active-tab="st-wealth-tab"] #dashToolbar::before { content: "Portfolio"; }
    body[data-active-tab="budget-tab"] #dashToolbar::before { content: "Budget"; }
    body[data-active-tab="goals-tab"] #dashToolbar::before { content: "Goals"; }

    /* Round 36px icon buttons */
    #privacy-toggle,
    #dashToolbar .nw-refresh-btn,
    #dashToolbar .dash-toolbar-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        border: none !important;
        background: transparent !important;
        color: var(--m-muted) !important;
        box-shadow: none !important;
    }
    #privacy-toggle svg { width: 18px !important; height: 18px !important; }
    #dashToolbar .nw-refresh-btn svg { width: 16px !important; height: 16px !important; }
    #dashToolbar .dash-toolbar-btn .icon-svg { width: 19px !important; height: 19px !important; }
    #dashToolbar .dash-toolbar-btn-label { display: none !important; }

    #dashToolbar .dash-toolbar-btn-primary {
        background: var(--m-accent-fill) !important;
        color: #ffffff !important;
        margin-left: 2px;
    }

    /* Sync: collapse "● On" + "Sync: 44m ago" into one quiet chip showing just the age */
    #sync-status {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-width: 0 !important;
        font-size: 9px !important;
        order: 0;
    }
    #sync-status #status-text { display: none !important; }

    #last-sync-info {
        font-size: 0 !important;                    /* hides the "Sync:" prefix text node */
        padding: 4px 8px !important;
        border-radius: 999px !important;
        background: var(--m-accent-soft) !important;
        border: none !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    #last-sync-info #last-sync-time {
        font-size: 11px !important;
        font-weight: 700;
        color: var(--m-accent) !important;
    }

    /* Risk profile lives in Settings → Retake Assessment on phones */
    #nwRiskProfileBadge {
        display: none !important;
    }

    /* Ticker: a slim strip under the app bar */
    #app-header-bar .ticker-wrap {
        order: 2;
        height: var(--m-ticker-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 var(--m-gutter) !important;
        border-top: 1px solid var(--m-hairline);
        display: flex !important;
        align-items: center !important;
        font-size: 11px !important;
        width: 100% !important;
        box-sizing: border-box;
        border-radius: 0 !important;
        background: transparent !important;
    }
    #app-header-bar .ticker-wrap * {
        font-size: 11px !important;
    }

    /* ---------- 4. BOTTOM TAB BAR ---------- */
    .bottom-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid var(--m-hairline) !important;
        box-shadow: none !important;
        background: var(--m-surface-blur) !important;
        padding: 6px 4px calc(6px + var(--m-safe-bottom)) !important;
        justify-content: space-around !important;
        box-sizing: border-box;
        user-select: none;
        -webkit-user-select: none;
    }

    .nav-item {
        flex: 1 1 0;
        width: auto !important;
        height: 50px !important;
        flex-direction: column !important;
        gap: 3px;
        border-radius: 12px !important;
        background: transparent !important;
        color: var(--m-muted) !important;
    }

    .nav-item .nav-icon {
        width: 56px;
        height: 30px;
        border-radius: 15px;
        transition: background 0.25s ease;
        transform: none !important;
    }
    .nav-item .nav-icon svg {
        width: 23px !important;
        height: 23px !important;
    }

    .nav-item .nav-label {
        display: block !important;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
    }

    .nav-item.active {
        color: var(--m-accent) !important;
        background: transparent !important;
    }
    .nav-item.active .nav-icon {
        background: var(--m-accent-soft);
    }
    .nav-item.active .nav-label {
        font-weight: 800;
    }

    /* ---------- 5. FLOATING AI BUTTON ---------- */
    /* Draggable on phones, so the drawer doesn't need a duplicate entry */
    .sidebar-ai-item { display: none !important; }
    #ai-chat-fab {
        right: 16px !important;
        bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 16px) !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }

    /* ---------- 6. SUB-TABS → HORIZONTALLY SCROLLING PILLS ---------- */
    .analytics-tabs,
    .fire-sub-tabs,
    .goal-detail-tabs,
    .mc-toggle-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 8px !important;
        grid-template-columns: none !important;
    }

    .analytics-tabs {
        padding: 2px 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 16px !important;
    }

    .analytics-tabs .analytics-tab-btn,
    .mc-toggle-group .mc-toggle-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        border: 1px solid var(--m-hairline) !important;
        background: var(--m-surface) !important;
        color: var(--m-muted) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        scroll-snap-align: start;
    }
    .analytics-tabs .analytics-tab-btn .tab-icon,
    .analytics-tabs .analytics-tab-btn .tab-icon .icon-svg {
        font-size: 15px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }
    .analytics-tabs .analytics-tab-btn span:not(.tab-icon):not(.long-text):not(.short-text) {
        display: inline !important;
        font-size: 13px !important;
    }
    .analytics-tabs .analytics-tab-btn .long-text { display: none !important; }
    .analytics-tabs .analytics-tab-btn .short-text { display: inline !important; font-size: 13px !important; }

    .analytics-tabs .analytics-tab-btn.active,
    .mc-toggle-group .mc-toggle-btn.active {
        background: var(--m-text) !important;
        border-color: var(--m-text) !important;
        color: var(--m-surface) !important;
    }
    .analytics-tabs .analytics-tab-btn.active .icon-svg {
        color: inherit !important;
    }

    /* Underline-style tabs (goal detail, FIRE) scroll instead of wrapping to two rows */
    .fire-sub-tabs,
    .goal-detail-tabs {
        gap: 20px !important;
        padding: 0 2px 8px !important;
        margin-bottom: 18px !important;
    }
    .fire-sub-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        min-height: 36px;
        scroll-snap-align: start;
    }
    .fire-sub-tab-btn.active::after {
        bottom: -8px !important;
    }

    /* ---------- 7. CARDS & SUMMARY ROWS ---------- */
    .modern-asset-card,
    .networth-stat-card,
    .merged-sip-card,
    .portfolio-holdings-card,
    .analytics-card,
    .mc-card {
        border-radius: var(--m-radius) !important;
    }

    /* Budget: Total / Expense / Remaining as a compact 3-up row instead of three full-height cards */
    .budget-summary-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    .budget-summary-row .networth-stat-card {
        min-width: 0 !important;
        width: auto !important;
        padding: 12px 10px !important;
        margin: 0 !important;
    }
    .budget-summary-row .asset-category-label {
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }
    .budget-summary-row .networth-stat-card > *:not(.asset-category-label) {
        font-size: 15px !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    /* Goals: merged SIP card and merged status card keep 3 columns, compact */
    .sip-merged-card { padding: 10px 0 !important; margin: 8px 0 10px !important; }
    .sip-merged-grid, .goals-merged-tile { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sip-seg { padding: 0 8px !important; gap: 2px !important; }
    .sip-seg + .sip-seg, .gs-seg + .gs-seg { border-top: 0 !important; border-left: 1px solid rgba(148, 163, 184, 0.25) !important; }
    .sip-seg .merged-sip-label { font-size: 9px !important; letter-spacing: 0.03em !important; line-height: 1.2 !important; }
    .sip-seg .merged-sip-values { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; }
    .sip-seg .val-master { font-size: 14px !important; }
    .sip-seg .val-required { font-size: 10px !important; }
    .sip-seg .req-label, .sip-seg .merged-sip-badge, .sip-seg .col-tag-badge { display: none !important; }
    .sip-seg .merged-sip-pct { font-size: 13px !important; }
    .sip-seg-foot { margin-top: 0 !important; }
    .goals-merged-tile { padding: 10px 0 !important; border-radius: 12px !important; }
    .gs-seg { padding: 0 8px !important; }
    .gs-seg .gs-tile-icon { display: none !important; }
    .gs-seg .gs-tile-label { font-size: 9px !important; letter-spacing: 0.03em !important; line-height: 1.2 !important; }
    .gs-seg .gs-tile-value { font-size: 13px !important; }
    .gs-seg .gs-tile-sub { font-size: 10px !important; }

    /* Budget month switcher */
    .budget-month-arrow {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 22px !important;
        border-radius: 50% !important;
    }
    .budget-month-label {
        font-size: 16px !important;
    }

    .holdings-card-header h3 {
        font-size: 17px !important;
    }

    /* Portfolio tool icons: equal-width row under the app bar */
    .portfolio-tools {
        width: 100%;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 8px !important;
    }
    .portfolio-tool-btn {
        flex-direction: column;
        justify-content: center;
        gap: 4px !important;
        height: 58px;
        padding: 6px 4px !important;
        border-radius: 14px !important;
        background: var(--m-surface) !important;
        border-color: var(--m-hairline) !important;
    }
    .portfolio-tool-btn .icon-svg {
        width: 20px !important;
        height: 20px !important;
    }
    .portfolio-tool-label {
        display: block !important;
        font-size: 11px !important;
        color: var(--m-muted);
        white-space: nowrap;
    }

    /* ---------- 8. FORMS & PRIMARY ACTIONS ---------- */
    .wiz-input,
    #budget-tab input[type="text"],
    #budget-tab input[type="number"],
    #budget-tab input[type="date"],
    #budget-tab select,
    .premium-search-input {
        min-height: 46px !important;
        font-size: 16px !important;               /* 16px stops iOS zooming the page on focus */
        text-align: left !important;
        text-align-last: left;
        border-radius: 12px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .app-page select {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wiz-label,
    .modal-content label {
        font-size: 13px !important;
    }

    /* Save / Cancel: real buttons pinned to the bottom of the form instead of small red text links.
       Only where the pair sits together (a form footer), not a lone Save next to an input. */
    :has(> .btn-wiz-save):has(> .btn-wiz-cancel) {
        display: flex !important;
        gap: 10px !important;
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: 20px !important;
        padding: 12px 0 calc(12px + var(--m-safe-bottom)) !important;
        background: var(--m-bg) !important;
        justify-content: stretch !important;
    }
    .btn-wiz-save,
    .btn-wiz-cancel {
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 18px !important;
    }
    :has(> .btn-wiz-cancel) > .btn-wiz-save,
    :has(> .btn-wiz-save) > .btn-wiz-cancel {
        flex: 1 1 0 !important;
    }
    :has(> .btn-wiz-cancel) > .btn-wiz-save {
        flex-grow: 2 !important;
    }
    .btn-wiz-save {
        background: var(--m-accent-fill) !important;
        color: #ffffff !important;
        border: none !important;
    }
    .btn-wiz-cancel {
        background: var(--m-surface) !important;
        color: var(--m-muted) !important;
        border: 1px solid var(--m-hairline) !important;
    }

    /* ---------- 9. FULL-SCREEN PAGES (push navigation) ---------- */
    .app-page {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--m-bg) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 var(--m-gutter) calc(28px + var(--m-safe-bottom)) !important;
        box-sizing: border-box !important;
        animation: m-push-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    /* These four set ID-level padding in style.css; bring them onto the same gutter */
    #unifiedConfigModal.app-page,
    #unifiedAddTxModal.app-page,
    #commonPortfolioHistoryModal.app-page,
    #lumpSumAllocatorModal.app-page,
    #investorToolsModal.app-page {
        padding: 0 var(--m-gutter) calc(28px + var(--m-safe-bottom)) !important;
    }

    /* Header row the Back button is injected into (tagged by ensureBackButton).
       `.app-page div.` matches the specificity of style.css's `.app-page div[class*="header"]`. */
    .app-page div.app-page-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 56px;
        margin: 0 calc(-1 * var(--m-gutter)) 14px !important;
        padding: calc(var(--m-safe-top) + 6px) 12px 6px 8px !important;
        background: var(--m-surface-blur) !important;
        border: none !important;
        border-bottom: 1px solid var(--m-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }
    .app-page-header h2,
    .app-page-header h3,
    .app-page-header h4 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--m-text) !important;
    }

    /* Back: a round chevron, like iOS/Android */
    .app-page-header .wiz-back-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--m-accent) !important;
        justify-content: center !important;
        flex-shrink: 0;
    }
    .wiz-back-btn .wiz-back-label {
        display: none;
    }
    .wiz-back-btn .wiz-back-chevron {
        width: 24px;
        height: 24px;
    }

    /* Back and × do the same thing; on a phone the chevron alone is the native pattern.
       `:not(#_)` lifts specificity above style.css's ID-scoped button rules. */
    .app-page-header:has(.wiz-back-btn) .page-close-btn:not(#_) {
        display: none !important;
    }

    /* Goal detail: title + ‹ 4/6 › on one compact line */
    /* Goal detail: title on top, a small "‹ 4 / 6 ›" pager underneath (like a nav-bar subtitle) */
    #goalDetailTitleContainer {
        flex: 1 1 auto;
        min-width: 0;
        display: grid !important;
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "title title title title"
            "prev  count next  .";
        align-items: center;
        row-gap: 1px;
    }
    #goalDetailTitleContainer h2 {
        grid-area: title;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0;
    }
    #goalDetailTitleContainer > button {
        height: 22px;
        padding: 0 6px !important;
        font-size: 17px !important;
        color: var(--m-muted) !important;
    }
    #goalDetailTitleContainer > button:first-of-type { grid-area: prev; padding-left: 0 !important; }
    #goalDetailTitleContainer > button:last-of-type { grid-area: next; }
    #goalDetailTitleContainer > span {
        grid-area: count;
        font-size: 11px !important;
        color: var(--m-muted) !important;
    }
    #editGoalBtnGroup {
        height: 34px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Trends / Tax / Cash Flow / Stress Test page: drop the double padding around the cards */
    #analytics-detail-page .inline-style-724 {
        padding: 0 !important;
    }
    #analytics-detail-page .analytics-card {
        padding: 14px !important;
        margin-top: 0 !important;
    }
    #analytics-detail-page .analytics-card .analytics-card {
        margin-top: 14px !important;
    }

    /* Settings: single column (was a 2-column grid that scrolled sideways) */
    #settings-page > div.inline-style-642 {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: visible !important;
    }
    #settings-page > div.inline-style-642 > * {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #settings-page .inline-style-647 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #settings-page .inline-style-648 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        width: 100% !important;
    }

    /* ---------- 10. TYPOGRAPHY FLOOR, DRAWER, MOTION ---------- */
    /* Nothing smaller than ~11px on a phone */
    [style*="font-size: 0.5rem"], [style*="font-size:0.5rem"],
    [style*="font-size: 0.55rem"], [style*="font-size:0.55rem"],
    [style*="font-size: 0.6rem"], [style*="font-size:0.6rem"],
    [style*="font-size: 0.62rem"], [style*="font-size: 0.65rem"], [style*="font-size:0.65rem"],
    [style*="font-size: 0.68rem"], [style*="font-size:0.68rem"],
    .font-06 {
        font-size: 0.7rem !important;
    }

    /* Menu drawer */
    .app-sidebar {
        width: min(84vw, 320px) !important;
        left: calc(-1 * min(84vw, 320px)) !important;
        border-radius: 0 20px 20px 0;
    }
    .app-sidebar.show {
        left: 0 !important;
    }
    .sidebar-title {
        white-space: nowrap !important;
        font-size: 18px !important;
    }
    .sidebar-item {
        min-height: 46px;
        border-radius: 12px !important;
    }

    /* Press feedback */
    button:active,
    .nav-item:active,
    .sidebar-item:active,
    .portfolio-tool-btn:active {
        transform: scale(0.96);
        transition: transform 0.08s ease;
    }
    .nav-item:active .nav-icon {
        background: var(--m-accent-soft);
    }
}

/* Uses the standalone `translate` property so it still animates while `transform` is pinned */
/* ==========================================================================
   ROUND 2: native interactions (phones only)
     A. Ticker only on Overview      D. Bottom sheets (Add menu, Link Investment, Add Expense)
     B. Centre "Add" tab             E. Overview hero layout
     C. Pull-to-refresh indicator    F. Goal swipe transition
   ========================================================================== */
@media (max-width: 768px) {

    /* Stop the browser's own pull-to-refresh (full page reload) competing with ours */
    html, body {
        overscroll-behavior-y: contain;
    }

    /* ---------- A. TICKER ONLY ON OVERVIEW ---------- */
    body:not([data-active-tab="overview-tab"]) #app-header-bar .ticker-wrap {
        display: none !important;
    }

    /* ---------- B. CENTRE "ADD" TAB ---------- */
    /* The + moves from the app bar into the tab bar */
    #dashToolbar .dash-add-entry-wrap > .dash-toolbar-btn-primary {
        display: none !important;
    }

    .nav-item .nav-icon {
        width: 46px;
    }
    .nav-item.nav-add-btn .nav-icon {
        width: 48px;
        height: 32px;
        border-radius: 12px;
        background: var(--m-accent-fill) !important;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    }
    .nav-item.nav-add-btn .nav-icon svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2.75 !important;
    }
    .nav-item.nav-add-btn {
        color: var(--m-accent) !important;
    }
    body.m-add-sheet-open .nav-item.nav-add-btn .nav-icon svg {
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    /* ---------- C. PULL-TO-REFRESH INDICATOR ---------- */
    #m-ptr {
        --ptr-pull: 0px;
        --ptr-rot: 0deg;
        position: fixed;
        top: calc(var(--m-safe-top) + var(--m-appbar-h));
        left: 50%;
        width: 40px;
        height: 40px;
        margin-left: -20px;
        border-radius: 50%;
        background: var(--m-surface);
        color: var(--m-muted);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9990;
        opacity: 0;
        transform: translateY(calc(var(--ptr-pull) - 44px));
        pointer-events: none;
    }
    #m-ptr.visible {
        opacity: 1;
    }
    #m-ptr:not(.visible) {
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    #m-ptr svg {
        transform: rotate(var(--ptr-rot));
    }
    #m-ptr.ready {
        color: var(--m-accent);
    }
    #m-ptr.refreshing svg {
        animation: m-spin 0.8s linear infinite;
    }

    /* ---------- D. BOTTOM SHEETS ---------- */
    /* Dimmed backdrop behind the Add sheet; tapping it closes the sheet (outside-click handler) */
    body.m-add-sheet-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.42);
        z-index: 200090;
        animation: m-fade 0.2s ease-out;
    }

    #addEntryMenu {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px 16px calc(20px + var(--m-safe-bottom)) !important;
        border: none !important;
        border-radius: 22px 22px 0 0 !important;
        background: var(--m-surface) !important;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18) !important;
        z-index: 200100 !important;
        box-sizing: border-box;
        animation: m-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #addEntryMenu[style*="display: block"],
    #addEntryMenu[style*="display:block"] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    #addEntryMenu::before {
        content: "";
        grid-column: 1 / -1;
        justify-self: center;
        width: 38px;
        height: 5px;
        border-radius: 3px;
        background: var(--m-hairline);
        margin-bottom: 2px;
    }
    #addEntryMenu .add-sheet-title {
        grid-column: 1 / -1;
        font-size: 17px;
        font-weight: 800;
        color: var(--m-text);
        padding: 2px 4px 6px;
    }
    #addEntryMenu > a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 84px;
        padding: 10px 6px !important;
        border-radius: 16px !important;
        background: var(--m-bg) !important;
        color: var(--m-text) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        border: none !important;
    }
    #addEntryMenu > a .icon-svg {
        width: 22px !important;
        height: 22px !important;
        padding: 9px;
        border-radius: 50%;
        background: var(--m-accent-soft);
        color: var(--m-accent);
        box-sizing: content-box;
    }

    /* While being dragged down, follow the finger; on release, animate back or away */
    .m-sheet-dragging {
        transition: none !important;
        animation: none !important;
    }
    .m-sheet-settling {
        transition: translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        animation: none !important;
    }

    /* Link Investment + Add Expense: centred dialogs become bottom sheets */
    #addInvestmentToGoalModal,
    #addExpenseModal {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 88dvh !important;
        overflow-y: auto !important;
        transform: none !important;
        border: none !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 22px 18px calc(22px + var(--m-safe-bottom)) !important;
        box-sizing: border-box !important;
        animation: m-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #addInvestmentToGoalModal::before,
    #addExpenseModal::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 38px;
        height: 5px;
        margin-left: -19px;
        border-radius: 3px;
        background: var(--m-hairline);
    }
    /* Link Investment has no overlay element of its own: dim the page with a spread shadow */
    #addInvestmentToGoalModal {
        z-index: 360000 !important;             /* above full-screen pages (350000), below system dialogs */
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.42) !important;
    }
    #addInvestmentToGoalModal select,
    #addInvestmentToGoalModal input,
    #addExpenseModal select,
    #addExpenseModal input {
        min-height: 46px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------- E. OVERVIEW HERO LAYOUT ---------- */
    /* One headline Net Worth card, then Today / P&L, then a compact row of the rest */
    #overview-tab .networth-banner-swipe {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px !important;
        overflow: visible !important;
        margin-bottom: 14px;
    }
    #overview-tab #networthTopRow {
        display: contents !important;
    }
    #overview-tab .networth-banner-swipe .networth-summary-card,
    #overview-tab .networth-banner-swipe .networth-side-card {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Hero */
    #overview-tab .networth-summary-card {
        grid-column: 1 / -1;
        order: 1;
        padding: 22px 20px 12px !important;
        border: none !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 55%, #4f46e5 100%) !important;
        box-shadow: 0 10px 24px rgba(55, 48, 163, 0.28) !important;
        overflow: hidden;
    }
    #overview-tab .networth-summary-card::before,
    #overview-tab .networth-summary-card::after {
        display: none !important;
    }
    #overview-tab .networth-summary-card .asset-category-header {
        border: none !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
    }
    #overview-tab .networth-summary-card .asset-category-label {
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 11px !important;
    }
    #overview-tab .networth-summary-card .asset-category-value {
        color: #ffffff !important;
        font-size: 38px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        line-height: 1.1 !important;
    }
    #overview-tab .networth-summary-card .nw-split {
        margin-top: 8px;
        font-size: 12px;
    }

    /* Compact row: Insurance · Loans */
    #overview-tab .networth-side-card.accent-insurance { order: 2; grid-column: span 3; }
    #overview-tab .networth-side-card.accent-loans { order: 3; grid-column: span 3; }

    #overview-tab .networth-side-card {
        padding: 12px !important;
        border-radius: 16px !important;
    }
    #overview-tab .networth-side-card .asset-category-label {
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
        line-height: 1.25 !important;
    }
    #overview-tab .networth-side-card .asset-category-header {
        margin-bottom: 6px !important;
        padding-bottom: 0 !important;
        border: none !important;
    }
    #overview-tab .networth-side-card .asset-category-value {
        font-size: 15px !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    /* ---------- G. TOAST (was pinned 20px from the top: under the iPhone notch) ---------- */
    #successToast {
        top: calc(var(--m-safe-top) + 10px) !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        justify-content: center;
        padding: 13px 18px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        line-height: 1.35;
        text-align: center;
        box-shadow: 0 8px 24px rgba(5, 150, 105, 0.3) !important;
        animation: m-toast-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    /* Keep the status-bar strip solid on iPhone even when the bar itself scrolls content under it */
    #app-header-bar,
    .app-page div.app-page-header {
        background: var(--m-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .bottom-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@keyframes m-spin { to { rotate: 360deg; } }
@keyframes m-toast-in { from { translate: 0 -24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-sheet-up { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes m-swipe-from-right { from { translate: 48px 0; opacity: 0.2; } to { translate: 0 0; opacity: 1; } }
@keyframes m-swipe-from-left { from { translate: -48px 0; opacity: 0.2; } to { translate: 0 0; opacity: 1; } }
@media (max-width: 768px) {
    /* Goal page: slide-in when swiping to the next / previous goal */
    /* Hand horizontal gestures to the swipe-between-goals handler (app.js); vertical scroll stays native.
       Without this iOS can claim the touch for a pan and cancel it, so the swipe never fires. */
    #goal-detail-inline-section { touch-action: pan-y; }
    #goalDetailContent.m-swipe-next { animation: m-swipe-from-right 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
    #goalDetailContent.m-swipe-prev { animation: m-swipe-from-left 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

@keyframes m-push-in {
    from { translate: 100% 0; }
    to   { translate: 0 0; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .app-page {
        animation: none !important;
    }
}

/* Dark mode, all widths: older dark rules paint a dark box behind card headers and dim the primary
   toolbar button; neither suits the gradient Net Worth hero or the Add button. */
body.dark-mode #overview-tab .networth-summary-card .asset-category-header,
body.dark-mode #overview-tab .networth-summary-card .asset-category-label {
    background: transparent !important;
    box-shadow: none !important;
}
body.dark-mode #dashToolbar .dash-toolbar-btn-primary,
body.dark-mode .nav-item.nav-add-btn .nav-icon {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================================
   DARK MODE LEGIBILITY (all widths)
   Found by a contrast sweep of every page in dark mode: text that inherited a
   light-theme colour, and light "info" cards that stayed light behind light text.
   ========================================================================== */
body.dark-mode {
    --dm-text: #e2e8f0;
    --dm-muted: #a3b1c6;
    --dm-link: #a5b4fc;
}

/* Muted greys (#64748b) and dark text colours set inline in templates */
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode .label-tiny,
body.dark-mode .inline-style-864 {
    color: var(--dm-muted) !important;
}
body.dark-mode .inline-style-865,
body.dark-mode #goal-detail-inline-section [style*="color: #0f172a"],
body.dark-mode #goal-detail-inline-section [style*="color: #1e293b"],
body.dark-mode #goal-detail-inline-section [style*="color: #002b5c"] {
    color: var(--dm-text) !important;
}

/* Indigo links / chips on dark cards */
body.dark-mode .upcoming-activity-days,
body.dark-mode .table-action-btn {
    color: var(--dm-link) !important;
}

/* Trends range selector: the active pill was white text on white */
body.dark-mode .time-range-filter .range-btn.active {
    background: #334155 !important;
    color: #ffffff !important;
}

/* Status reds and Help tips (brown on navy) */
body.dark-mode [style*="color: #d32f2f"],
body.dark-mode [style*="color:#d32f2f"] {
    color: #f87171 !important;
}
body.dark-mode #help-sidebar [style*="color: #9a3412"],
body.dark-mode #help-sidebar [style*="color:#9a3412"] {
    color: #fdba74 !important;
}

/* Goal → Advisory cards (classes added in showGoalDetail) */
body.dark-mode .advisory-card-ok,
body.dark-mode .fv-card {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
body.dark-mode .advisory-card-gap {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
body.dark-mode .advisory-card-ok .advisory-card-title,
body.dark-mode .advisory-card-ok .advisory-card-text,
body.dark-mode .fv-card .fv-card-title,
body.dark-mode .fv-card .fv-total,
body.dark-mode .fv-row span {
    color: #6ee7b7 !important;
}
body.dark-mode .advisory-card-gap .advisory-card-title,
body.dark-mode .advisory-option > span:first-child {
    color: #fbbf24 !important;
}
body.dark-mode .advisory-card-gap p,
body.dark-mode .advisory-option,
body.dark-mode .advisory-option b {
    color: var(--dm-text) !important;
}
body.dark-mode .fv-row,
body.dark-mode .advisory-option {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: none !important;
}
body.dark-mode .fv-row div {
    color: var(--dm-muted) !important;
}

/* Import Statement and Add Goal dialogs kept white cards in dark mode */
body.dark-mode #casImportModal .modal-content,
body.dark-mode #simpleGoalWizardModal .onboarding-card {
    background: var(--m-surface) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--m-hairline) !important;
}
body.dark-mode #casImportModal h3,
body.dark-mode #simpleGoalWizardModal .onboarding-card h3,
body.dark-mode #simpleGoalWizardModal .onboarding-card h4 {
    color: var(--dm-text) !important;
}
body.dark-mode #casImportModal [style*="background: #f8fafc"],
body.dark-mode #casImportModal [style*="background: #f1f5f9"],
body.dark-mode #simpleGoalWizardModal [style*="background: #f8fafc"],
body.dark-mode #simpleGoalWizardModal [style*="background: #fff"],
body.dark-mode #simpleGoalWizardModal [style*="background: white"] {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}
body.dark-mode #casImportModal [style*="color: #94a3b8"],
body.dark-mode #simpleGoalWizardModal [style*="color: #94a3b8"],
body.dark-mode #simpleGoalWizardModal .icon {
    color: var(--dm-muted) !important;
}
body.dark-mode #simpleGoalWizardModal .goal-category-card {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #simpleGoalWizardModal .goal-category-card * {
    color: var(--dm-text) !important;
}
body.dark-mode #simpleGoalWizardModal .goal-category-card:hover,
body.dark-mode #simpleGoalWizardModal .goal-category-card.selected {
    border-color: var(--m-accent) !important;
    background: var(--m-accent-soft) !important;
}
body.dark-mode #simpleGoalWizardModal .onboarding-footer {
    background: var(--m-surface) !important;
    border-top: 1px solid var(--m-hairline) !important;
}

/* ==========================================================================
   LIGHT MODE LEGIBILITY (all widths)
   Faint greys (#94a3b8) and bright green (#10b981) on white read at ~2.3-2.6:1.
   Nudge them to the next shade so secondary text still looks secondary but is readable.
   ========================================================================== */
body:not(.dark-mode) .cell-sub,
body:not(.dark-mode) .history-card-label,
body:not(.dark-mode) .fire-sub-tab-btn:not(.active),
body:not(.dark-mode) #casImportModal [style*="color: #94a3b8"],
body:not(.dark-mode) #settings-page .inline-style-753,
body:not(.dark-mode) .fire-stat-item label,
body:not(.dark-mode) .fire-card-body label {
    color: #64748b !important;
}
/* Only GREEN text is deepened here. This used to list .status-pill, .score-status-pill,
   .tile-value-dynamic and .history-card-value outright, which turned red ones green too (a realized
   loss, loans outstanding, an "At risk" pill all showed as green in light mode). */
body:not(.dark-mode) .tile-value-dynamic.val-success,
body:not(.dark-mode) [style*="color: #10b981"],
body:not(.dark-mode) [style*="color:#10b981"] {
    color: #047857 !important;
}
body:not(.dark-mode) .tile-value-dynamic.val-danger,
body:not(.dark-mode) .status-pill[style*="color:#ef4444"],
body:not(.dark-mode) .status-pill[style*="color: #ef4444"] {
    color: #b91c1c !important;
}
body:not(.dark-mode) .status-pill[style*="color:#a855f7"] { color: #7e22ce !important; }
body:not(.dark-mode) [style*="color: #f57c00"],
body:not(.dark-mode) [style*="color:#f57c00"] {
    color: #c2410c !important;
}

/* Forms (all widths): labels always sit above their field, and dropdowns fill their column
   (an inline label + auto-width <select> rendered side by side, e.g. Configure SIP → Status). */
.wiz-label {
    display: block !important;
    margin-bottom: 6px !important;
}
select.wiz-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- Dark mode: gain / loss colours ----------
   style.css has `body.dark-mode div[style*="background:"] span { color: #cbd5e1 !important }`,
   which greyed out every inline-coloured value inside a card (e.g. positive P&L went white).
   `:not(#_)` outranks it so green/red always mean gain/loss. */
body.dark-mode [style*="color: #28a745"]:not(#_),
body.dark-mode [style*="color:#28a745"]:not(#_),
body.dark-mode [style*="color: #10b981"]:not(#_),
body.dark-mode [style*="color:#10b981"]:not(#_),
body.dark-mode [style*="color: #16a34a"]:not(#_),
body.dark-mode [style*="color: #059669"]:not(#_),
body.dark-mode [style*="color: #15803d"]:not(#_),
body.dark-mode [style*="color: #22c55e"]:not(#_) {
    color: #34d399 !important;
}
body.dark-mode [style*="color: #ef4444"]:not(#_),
body.dark-mode [style*="color:#ef4444"]:not(#_),
body.dark-mode [style*="color: #dc2626"]:not(#_),
body.dark-mode [style*="color: #d32f2f"]:not(#_),
body.dark-mode [style*="color: #b91c1c"]:not(#_),
body.dark-mode [style*="color: #e53935"]:not(#_) {
    color: #f87171 !important;
}

/* ---------- Dark mode: Add / Edit Loan ---------- */
body.dark-mode #loanWizard .inline-style-456 {            /* Rate Change & EMI Restructuring */
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
body.dark-mode #loanWizard .inline-style-467 {            /* Record Part Payment */
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
}
body.dark-mode #loanWizard .inline-style-464 {            /* Savings Simulator */
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
}
body.dark-mode #loanWizard .inline-style-265 {
    background: rgba(15, 23, 42, 0.5) !important;
}
body.dark-mode #loanWizard .inline-style-457 { color: #fbbf24 !important; }
body.dark-mode #loanWizard .inline-style-468 { color: #a5b4fc !important; }
body.dark-mode #loanWizard .inline-style-263,
body.dark-mode #loanWizard .inline-style-466 { color: #5eead4 !important; }
body.dark-mode #loanWizard .inline-style-459,
body.dark-mode #loanWizard .inline-style-465 { color: var(--dm-muted) !important; }
body.dark-mode #loanWizard .inline-style-459 { font-size: 0.72rem !important; }
body.dark-mode #loanWizard .wiz-input {
    background: #0f172a !important;
    color: var(--dm-text) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: none !important;
}
body.dark-mode #loanWizard .wiz-input::placeholder {
    color: #64748b !important;
}

/* Loan footer: Save uses the app's primary colour; Cancel is a quiet outline button in dark mode */
#loanWizard .wiz-footer-loan .inline-style-474 {
    background: var(--m-accent-fill) !important;
    color: #ffffff !important;
    border: none !important;
}
body.dark-mode #loanWizard .wiz-footer-loan .inline-style-475 {
    background: transparent !important;
    color: var(--dm-text) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
body.dark-mode #loanWizard .wiz-footer-loan {
    background: var(--m-surface) !important;
    border-top: 1px solid var(--m-hairline) !important;
}
/* Back button: same plain accent style on every page (a dark-mode rule boxed it on some) */
body.dark-mode .app-page-header .wiz-back-btn:not(#_) {
    background: transparent !important;
    border: none !important;
    color: var(--m-accent) !important;
}
body.dark-mode .app-page-header .wiz-back-btn:not(#_):hover {
    background: var(--m-accent-soft) !important;
}

/* ==========================================================================
   OVERVIEW: Financial Score as a chip on the Net Worth card (all widths)
   Tapping it opens the score popup (openScorePopup).
   ========================================================================== */
#overview-tab .networth-summary-card {
    position: relative;
}
.nw-score-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nw-score-chip:hover,
.nw-score-chip[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.22);
}
.nw-score-chip::before {
    content: "";
    align-self: center;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #a5b4fc;
}
.nw-score-chip[data-status="excellent"]::before { background: #34d399; }
.nw-score-chip[data-status="good"]::before { background: #a5b4fc; }
.nw-score-chip[data-status="fair"]::before { background: #fbbf24; }
.nw-score-chip[data-status="needs-attention"]::before { background: #f87171; }
.nw-score-chip b {
    font-size: 15px;
    font-weight: 800;
}
.nw-score-chip-label,
.nw-score-chip-max {
    opacity: 0.75;
}

/* ---------- Financial Score popup ---------- */
.score-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 360400;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.score-popup-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.score-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 360500;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 18px 20px 16px;
    border-radius: 20px;
    background: var(--m-surface);
    color: var(--m-text);
    border: 1px solid var(--m-hairline);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -48%) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.score-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
@media (min-width: 769px) {
    /* Centre on the content area and keep the sidebar undimmed, like the other dialogs */
    .score-popup-overlay { left: var(--d-sidebar-w, 280px); }
    .score-popup { left: calc(50% + var(--d-sidebar-w, 280px) / 2); }
}

.score-popup-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}
.score-popup-header h3 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--m-text);
}
.score-popup-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--m-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.score-popup-icon-btn .icon-svg {
    width: 16px;
    height: 16px;
}
.score-popup-icon-btn:hover {
    background: var(--m-bg);
    color: var(--m-text);
}

.score-popup-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--m-bg);
}
.score-popup-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.score-popup-value #financialScoreVal {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--m-text);
}
.score-popup-max {
    font-size: 15px;
    font-weight: 600;
    color: var(--m-muted);
}
.score-popup-hero .score-status-pill {
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
}

.score-popup-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fs-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.fs-row-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--m-text);
}
.fs-row-label small {
    font-size: 11px;
    font-weight: 500;
    color: var(--m-muted);
}
.fs-row-pct {
    font-size: 13px;
    font-weight: 800;
    color: var(--m-text);
}
.score-popup .fs-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--m-bg);
}
body.dark-mode .score-popup .fs-bar-track {
    background: rgba(148, 163, 184, 0.16);
}
.score-popup .fs-bar-fill {
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.fs-row-weight {
    margin-top: 4px;
    font-size: 11px;
    color: var(--m-muted);
}
.score-popup-foot {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--m-hairline);
    font-size: 12px;
    line-height: 1.45;
    color: var(--m-muted);
}
body.dark-mode .score-popup,
body.dark-mode .score-popup * {
    --m-text: #e2e8f0;
}
/* An old dark-mode rule paints a band behind any div with "header" in its class */
.score-popup .score-popup-header:not(#_) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   PHONE PAGE FIXES (round 3) - from an audit of every full page at 375px
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Status-bar strip + header position ---
       Page headers used to carry the status-bar height as their own top padding, and some
       pages added it again as page padding (a ~150px empty band on Goal / Loan / Policy / Help).
       On pages whose header sat at the very top, iOS 26 blurs content that scrolls under the
       status bar - so the sticky header itself looked blurred (Add FD, Lump Sum).
       Now: every page starts one status-bar height down, a solid strip covers the status bar,
       and headers stick just below it. The main app bar works the same way, so the strip is
       always on. */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--m-safe-top);
        background: var(--m-surface);
        z-index: 355000;
        pointer-events: none;
    }
    .app-page:not(#_) {
        padding-top: var(--m-safe-top) !important;
    }
    /* Sticky offsets are measured from inside the page's padding, which already
       includes the status-bar height, so the header sticks at 0 (not safe-top again). */
    .app-page div.app-page-header:not(#_) {
        top: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        flex-wrap: nowrap !important;
    }
    .app-page div.app-page-header:not(#_) > h2,
    .app-page div.app-page-header:not(#_) > h3 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .app-page div.app-page-header:not(#_) > div:last-child {
        flex-shrink: 0 !important;
    }

    /* --- Primary Save buttons (Save Goal / Save Policy rendered as red text links) --- */
    .btn-wiz-save:not(#_) {
        background: var(--m-accent-fill) !important;
        color: #ffffff !important;
        border: none !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
    }

    /* --- Forms whose body was a 2-column grid (label in one column, field pushed off-screen) --- */
    .wiz-body-loan:not(#_),
    #insuranceWizard .inline-style-548:not(#_),
    #help-sidebar #help-content-area:not(#_),
    #goalWizardModal .inline-style-130:not(#_) {
        display: block !important;
    }
    #goalWizardModal .inline-style-130 > * + * {
        margin-top: 12px;
    }
    .wiz-body-loan > *,
    #insuranceWizard .inline-style-548 > *,
    #goalWizardModal .inline-style-130 > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .wiz-body-loan .wiz-input,
    #insuranceWizard .wiz-input,
    #goalWizardModal .wiz-input,
    .app-page input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Inner two-up rows (e.g. Interest | Start date) keep two equal columns that fit */
    #loanWizard .inline-style-455,
    #loanWizard .inline-style-458,
    #insuranceWizard .inline-style-571,
    #goalWizardModal .inline-style-134 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #loanWizard .inline-style-469 {                     /* Part payment: amount | date | Add */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    }
    #goalWizardModal .wizard-row {
        flex-wrap: wrap !important;
        gap: 12px 20px !important;
    }

    /* Help: topic list above the content instead of a squeezed left column */
    #help-sidebar .help-tab-bar {
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    #help-sidebar #help-tab-content {
        width: 100% !important;
        min-width: 0 !important;
    }
    #help-sidebar h1, #help-sidebar h2, #help-sidebar h3, #help-sidebar h4 {
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    /* --- Add FD / Configure: type tabs scroll on one line; simulator + footer --- */
    #unifiedConfigModal .unified-type-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    #unifiedConfigModal .unified-type-pill:first-child {
        margin-left: 0 !important;
    }
    #unifiedConfigModal :has(> .unified-type-pill) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }
    #unifiedConfigModal :has(> .btn-wiz-save):has(> .btn-wiz-cancel) {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
    }
    #unifiedConfigModal :has(> .btn-wiz-save) > .btn-wiz-save {
        grid-column: 1 / -1;
        order: -1;
    }

    /* --- History --- */
    .history-show-more {
        flex-wrap: wrap;
    }
    /* Long fund names (nowrap titles) were stretching the card grid to ~670px */
    #commonPortfolioHistoryBody,
    #commonPortfolioHistoryBody > *,
    #commonPortfolioHistoryModal .modern-history-card,
    #commonPortfolioHistoryModal .history-card-header,
    #commonPortfolioHistoryModal .history-card-header > div:first-child {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #commonPortfolioHistoryModal .common-history-cards-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #commonPortfolioHistoryModal .unified-modal-header button[onclick*="exportCommonHistory"] {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* --- Live Projection --- */
    #sipProjectionSidebar div.app-page-header:not(#_) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 12px !important;
    }
    #sipProjectionSidebar #projectionGoalName {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        gap: 6px !important;
    }
    #sipProjectionSidebar .inline-style-160 button {
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        white-space: nowrap;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
    }
    #sipProjectionSidebar .inline-style-160 button br {
        display: none;
    }
    #sipProjectionSidebar > div:nth-child(2) {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 10px;
    }
    #sipProjectionSidebar .inline-style-163,
    #sipProjectionSidebar .inline-style-176,
    #sipProjectionSidebar .inline-style-182 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Live Projection + Add FD simulator: light boxes in dark mode (all widths) */
body.dark-mode #sipProjectionSidebar #glidePathInfo,
body.dark-mode #sipProjectionSidebar #projSummary {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #sipProjectionSidebar #glidePathInfo *,
body.dark-mode #sipProjectionSidebar #projSummary * {
    color: inherit;
}
body.dark-mode #fd_simulator_box {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
body.dark-mode #fd_simulator_box * {
    color: var(--dm-text) !important;
}
body.dark-mode #fd_simulator_box h4,
body.dark-mode #fd_simulator_box [style*="font-weight: 800"],
body.dark-mode #fd_simulator_box [style*="font-weight:800"] {
    color: #6ee7b7 !important;
}

/* Save buttons that older rules turned into red text links (all widths) */
.btn-wiz-save.inline-style-155:not(#_),
.btn-wiz-save.inline-style-575:not(#_) {
    background: var(--m-accent-fill) !important;
    color: #ffffff !important;
    border: none !important;
}

/* History "Show more" row (all widths) */
.history-show-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed var(--m-hairline);
    font-size: 13px;
    color: var(--m-muted);
}
.history-show-more .btn-wiz-cancel {
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

/* Goal form (all widths): checkbox labels were dark navy on dark; simulation button stayed light */
body.dark-mode #goalWizardModal .wizard-row label {
    color: var(--dm-text) !important;
}
body.dark-mode #goalWizardModal .inline-style-153 {
    background: var(--m-accent-soft) !important;
    color: #c7d2fe !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
}

/* ==========================================================================
   Hidden buttons stay hidden (all widths)
   The app hides context buttons with an inline `display: none` (e.g. Delete / Remove
   Investment while adding a new item). Several `display: ... !important` button rules
   (older footer rules in style.css, and the Save/Cancel styling here and in desktop.css)
   were overriding that, so Delete showed on brand-new loans, policies and FDs.
   ========================================================================== */
button[style*="display: none"]:not(#_),
button[style*="display:none"]:not(#_) {
    display: none !important;
}

@media (max-width: 768px) {
    #loanWizard .wiz-footer-loan button:not(#_) {
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #loanWizard .wiz-footer-loan:not(#_) {
        padding: 12px 16px calc(12px + var(--m-safe-bottom)) !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   iPHONE MEMORY: no backdrop blur, lightweight privacy masking (phones)
   Opening History put ~53 backdrop-filter layers on screen (every history card had
   `backdrop-filter: blur(20px)`, on top of a full-screen blurred overlay) plus a
   `filter: blur()` on every amount while privacy mode is on. Each is a separate GPU
   layer holding a copy of the screen; iOS kills the page when that memory runs out,
   which looked like "the app refreshes when I open History".
   The phone design already uses solid surfaces, so dropping backdrop blur changes nothing
   visually; privacy masking switches to a text-shadow blur, which needs no extra layers.
   ========================================================================== */
@media (max-width: 768px) {
    *:not(#_),
    *:not(#_)::before,
    *:not(#_)::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.privacy-active .privacy-masked:not(#_),
    body.privacy-active .privacy-masked *:not(#_) {
        filter: none !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        text-shadow: 0 0 9px rgba(100, 116, 139, 0.9) !important;
        transition: none !important;
    }
    body.dark-mode.privacy-active .privacy-masked:not(#_),
    body.dark-mode.privacy-active .privacy-masked *:not(#_) {
        text-shadow: 0 0 9px rgba(203, 213, 225, 0.85) !important;
    }
}

/* Landscape iPhone: keep content clear of the notch / rounded corners on the sides */
@media (max-width: 932px) and (orientation: landscape) {
    #dashToolbar,
    #app-header-bar .ticker-wrap {
        padding-left: calc(var(--m-gutter, 14px) + var(--m-safe-left)) !important;
        padding-right: calc(10px + var(--m-safe-right)) !important;
    }
    .bottom-nav {
        padding-left: calc(4px + var(--m-safe-left)) !important;
        padding-right: calc(4px + var(--m-safe-right)) !important;
    }
    .tab-content > .tab-pane,
    .app-page:not(#_) {
        padding-left: calc(var(--m-gutter, 14px) + var(--m-safe-left)) !important;
        padding-right: calc(var(--m-gutter, 14px) + var(--m-safe-right)) !important;
    }
}

/* Tab strips that scroll sideways must never shrink vertically. Inside a flex-column page a
   scroll container's min-height is 0, so when a taller form loaded (e.g. Configure → FD /
   Bonds) the type-pill row was squeezed to ~10px and the tabs disappeared. */
@media (max-width: 768px) {
    #unifiedConfigModal :has(> .unified-type-pill),
    #unifiedAddTxModal :has(> .unified-type-pill),
    .app-page .analytics-tabs,
    .app-page .fire-sub-tabs,
    .app-page .goal-detail-tabs,
    .app-page .mc-toggle-group {
        flex-shrink: 0 !important;
        min-height: min-content;
        overflow-y: hidden !important;
    }
}

/* ==========================================================================
   NO SIDEWAYS SWIPING (phones)
   The card rows that used to scroll left/right (Overview charts + Smart Insights,
   Portfolio Asset Breakdown, holdings type tabs) are fixed grids of smaller cards
   that fit the screen width. initAutoSwipeRow (app.js) no longer activates on phones.
   ========================================================================== */
@media (max-width: 768px) {
    .swipe-dots {
        display: none !important;
    }
    .auto-swipe-row:not(#_) {
        overflow-x: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .auto-swipe-row > *,
    .overview-activity-row > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- Portfolio: Asset Breakdown as a 2-column grid of compact cards --- */
    #liquid-grid-container #assetBreakdownGrid:not(#_) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #liquid-grid-container #assetBreakdownGrid > *:not(#_) {
        width: auto !important;
        flex: none !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        min-height: 0 !important;
        border-radius: 12px !important;
    }
    #assetBreakdownGrid > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    #liquid-grid-container #assetBreakdownGrid > *:not(#_) {
        gap: 4px !important;
    }
    #assetBreakdownGrid .asset-category-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #assetBreakdownGrid .asset-category-value,
    #assetBreakdownGrid .asset-category-invested-line {
        margin: 0 !important;
    }
    #assetBreakdownGrid .asset-category-performance {
        margin-top: 2px !important;
        padding-top: 6px !important;
    }
    #assetBreakdownGrid .pnl-divider {
        display: none !important;
    }
    #assetBreakdownGrid .pnl-badge-line {
        gap: 0 10px !important;
    }
    #assetBreakdownGrid .asset-category-label {
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
    }
    #assetBreakdownGrid .asset-category-value {
        font-size: 16px !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }
    #assetBreakdownGrid .asset-category-invested-line,
    #assetBreakdownGrid .asset-category-invested-line * {
        font-size: 11px !important;
    }
    #assetBreakdownGrid .asset-category-performance,
    #assetBreakdownGrid .asset-category-performance * {
        font-size: 11px !important;
    }

    /* --- Overview: Upcoming Activities sizes to its content (was a fixed 380px desktop height) --- */
    .overview-activities-col.upcoming-activities-card:not(#_) {
        height: auto !important;
        max-height: none;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    .overview-activity-row {
        gap: 10px !important;
        margin-top: 10px !important;
    }

    /* --- Overview: Allocation / Equity vs Debt stacked as compact cards ---
       A 1-column grid, not a flex column: syncOverviewChartsHeight (app.js) reads
       flex-direction: column as the desktop "beside Upcoming Activities" layout and
       would pin this row to that card's height, spilling the charts over Smart Insights. */
    #portfolioChartsRow:not(#_) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100%;
        height: auto !important;
    }
    #portfolioChartsRow .asset-allocation-chart-holder:not(#_) {
        height: 160px !important;
    }
    #portfolioChartsRow .asset-allocation-chart-card:not(#_) {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    #portfolioChartsRow .asset-category-header {
        margin-bottom: 6px !important;
    }

    /* --- Overview: Smart Insights as a single column of compact cards --- */
    #portfolio-insights-list.insights-grid:not(#_) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    #portfolio-insights-list.insights-grid > *:not(#_) {
        width: auto !important;
        flex: none !important;
    }
    #portfolio-insights-list .insight-card {
        padding: 10px 12px;
    }
    #portfolio-insights-list .insight-title {
        font-size: 13px;
    }
    #portfolio-insights-list .insight-desc {
        font-size: 12px;
        line-height: 1.4;
    }
    #portfolio-insights-list .insight-action-btn {
        margin-top: 8px;
    }

    /* --- Portfolio: holdings type tabs all on one row (icon over a short label) --- */
    #holdingsTypeTabs.analytics-tabs:not(#_) {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    #holdingsTypeTabs .analytics-tab-btn:not(#_) {
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 52px;
        padding: 6px 2px !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        border-radius: 12px !important;
        white-space: normal !important;
        text-align: center;
        line-height: 1.15;
    }
    #holdingsTypeTabs .analytics-tab-btn span:not(.tab-icon):not(#_) {
        font-size: 10.5px !important;
    }
}

/* ==========================================================================
   Dark mode: Link Asset / Investment to Goal (all widths)
   Its inline `background: white` matched style.css's
   `body.dark-mode div[style*="background: white"]` (60% transparent slate), so the goal page
   showed through the sheet and its fields; the 25/50/75% chips kept their light fill but got
   white text. Solid surface, solid fields, readable chips.
   ========================================================================== */
body.dark-mode #addInvestmentToGoalModal:not(#_) {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-hairline) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #addInvestmentToGoalModal > div:not(#_) {
    background: transparent !important;
    box-shadow: none !important;
}
body.dark-mode #addInvestmentToGoalModal > div:first-child {
    border-bottom-color: var(--m-hairline) !important;
}
body.dark-mode #addInvestmentToGoalModal h3 {
    color: var(--dm-text) !important;
}
body.dark-mode #addInvestmentToGoalModal label {
    color: var(--dm-muted) !important;
}
body.dark-mode #addInvestmentToGoalModal #unallocated_pct_hint {
    color: #7dd3fc !important;
}
body.dark-mode #addInvestmentToGoalModal select:not(#_),
body.dark-mode #addInvestmentToGoalModal input:not(#_) {
    background: #0b1120 !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #addInvestmentToGoalModal button[onclick*="goal_asset_pct"]:not(#_) {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #addInvestmentToGoalModal button[onclick*="value=100"]:not(#_) {
    background: var(--m-accent-soft) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #c7d2fe !important;
}
body.dark-mode #addInvestmentToGoalModal button[onclick="closeAddInvestmentToGoalModal()"]:not(#_) {
    background: transparent !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: var(--dm-text) !important;
}
body.dark-mode #addInvestmentToGoalModal > div:first-child > button:not(#_) {
    background: transparent !important;
    border: none !important;
    color: var(--dm-muted) !important;
}
body.dark-mode #addInvestmentToGoalModal button[onclick*="saveInvestmentAllocation"]:not(#_) {
    background: var(--m-accent-fill) !important;
    color: #ffffff !important;
}

/* ---------- Date fields on phones ----------
   iPhone Safari draws <input type="date"> as a native control that keeps its own minimum width (on
   top of the global min-width:130px in style.css) and ignores width:100%, so in two-column rows
   (FD Start | Maturity, Symbol | Date...) the field ran past its column and off the card. Drop the
   native chrome so the field obeys its column, let grid/flex cells shrink around it, and keep the
   value left-aligned and full height even while empty. */
@media (max-width: 768px) {
    input[type="date"],
    input[type="month"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 46px;
        text-align: left;
    }
    input[type="date"]::-webkit-date-and-time-value,
    input[type="month"]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
    }
    *:has(> input[type="date"]),
    *:has(> input[type="month"]) {
        min-width: 0;
    }
    /* Same for the other fields: selects carry a desktop min-width:180px (style.css) and number
       inputs an intrinsic width, so in the 2- and 3-column form rows (Type | Quantity | Price,
       Sector | Market Cap) the last field ran off the card. Let every field shrink to its column. */
    .modal-content select,
    .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .wiz-input {
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .modal-content *:has(> select),
    .modal-content *:has(> input) {
        min-width: 0;
    }
}

/* iPhone Safari zooms the whole page in when a form field under 16px gets focus, and stays
   zoomed after, so the app no longer fits the screen. The 16px rule above loses to desktop
   !important rules with longer selectors (.modal-content input:not(...) at 0.95rem, selects at
   0.9rem, login fields at 15px); the :not(#_) pair outranks them all. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(#_):not(#_),
    select:not(#_):not(#_),
    textarea:not(#_):not(#_) {
        font-size: 16px !important;
    }
}