/* "Best viewed on desktop" notice. * * Shown ONLY on mobile-width viewports (<=768px) and ONLY until the user * dismisses it. Desktop users never see it. Dismissal persists via * localStorage; js/mobile-notice.js adds `gc-mnd` to before paint so * there is no flash on reload after dismissal. * * Loaded on index.html (landing) and dashboard.html (the modeling app). */ .gc-mobile-notice { display: none; /* desktop default — never shown */ } @media (max-width: 768px) { .gc-mobile-notice { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; background: #1f2937; color: #f3f4f6; font-size: 0.8125rem; line-height: 1.4; border-bottom: 2px solid #6366f1; position: relative; z-index: 2000; } .gc-mobile-notice__text { flex: 1 1 auto; } .gc-mobile-notice__dismiss { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; border: none; color: #f3f4f6; font-size: 1.375rem; line-height: 1; cursor: pointer; border-radius: 6px; } .gc-mobile-notice__dismiss:hover, .gc-mobile-notice__dismiss:focus-visible { background: rgba(255, 255, 255, 0.14); outline: 2px solid #a5b4fc; outline-offset: 1px; } } /* Dismissed (or returning dismisser) — hide on every viewport. * Higher specificity than the media-query rule, so it wins without !important. */ html.gc-mnd .gc-mobile-notice { display: none; }