/* Mobile simplification gates — only active when is set by the server (i.e. real phone UA + mobile_simplified feature flag on, and the env kill switch is not engaged). Otherwise these rules are inert. Tablets and desktop see zero changes from this file. */ .mobile-only { display: none; } body.is-mobile .mobile-only { display: block; } body.is-mobile .desktop-only { display: none !important; } /* Reusable desktop-CTA card surface — shared by every "open on desktop" gate. */ body.is-mobile .desktop-cta-card { background: var(--card-bg, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 18px; padding: 28px 22px; margin: 14px 0; text-align: center; } body.is-mobile .desktop-cta-icon { font-size: 32px; margin-bottom: 10px; } body.is-mobile .desktop-cta-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--text, #fff); } body.is-mobile .desktop-cta-pitch { font-size: 13.5px; color: var(--muted, #94a3b8); line-height: 1.55; margin: 0 0 10px; } body.is-mobile .desktop-cta-hint { font-size: 12px; color: var(--muted, #94a3b8); opacity: 0.85; margin: 0; } /* Dashboard strategy tile simplification — keep header (symbol/status/P&L) and primary action; hide dense detail sections. */ body.is-mobile .card .section { display: none; } body.is-mobile .card-footer .btn[onclick*="openTrades"], body.is-mobile .card-footer .btn[onclick*="deleteStrategy"] { display: none; } /* New-strategy modal — simplified mobile form. Hide advanced fieldsets but keep them in the DOM so the JS-applied preset values still submit (see openNew() → applyPreset('balanced')). */ body.is-mobile .advanced-only { display: none !important; } /* Topbar — tighter buttons + initials avatar on mobile. The Jinja `{% if is_mobile and mobile_simplified_enabled %}` block in the topbar markup handles the icon-only / initials switch, so we only need to style the avatar circle here. Non-flag users never reach this stylesheet (it's loaded but its rules are gated by `body.is-mobile`). */ body.is-mobile .topbar .btn-sm { padding: 6px 9px; min-width: 32px; } body.is-mobile .acct-initials { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold, #c2902d); color: #000; font-weight: 700; font-size: 11px; letter-spacing: 0; margin-right: 4px; }