/* * app.css — shared design tokens, iOS Safari resets, safe-area utilities. * Loaded from base.html before any feature CSS. Iteration 30. */ /* ----------------------------------------------------------------------------- * Design tokens * The theme itself (light/dark) is driven by `data-theme` on , set by * the inline script in base.html. Bulma provides most base colors; these * variables cover the app-specific extras. * -------------------------------------------------------------------------- */ :root { --vh-full: 100vh; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --tap-target-min: 44px; } @supports (height: 100dvh) { :root { --vh-full: 100dvh; } } /* ----------------------------------------------------------------------------- * iOS Safari resets (safe on all browsers) * -------------------------------------------------------------------------- */ /* Kill iOS auto-zoom on focused inputs — needs at least 16px font size. */ .input, .textarea, .select select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="tel"], input[type="url"], textarea, select { font-size: max(16px, 1rem); } /* Remove Safari's grey tap flash on interactive elements. */ a, button, .button, [role="button"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], .navbar-item, .dropdown-item { -webkit-tap-highlight-color: transparent; } /* Better scroll momentum on iOS scrolling containers. */ .scroll-touch, .table-container, .modal-card-body { -webkit-overflow-scrolling: touch; } /* ----------------------------------------------------------------------------- * Touch-device only overrides * Applied when the inline `js-touch-device` detection in base.html finds * (hover: none) and (pointer: coarse). Rules here are ADDITIVE — they never * remove desktop hover behavior. * -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { /* Kill rubber-band overscroll on the outer document only on touch. */ html { overscroll-behavior-y: none; } } /* ----------------------------------------------------------------------------- * Safe-area utilities * Apply to any element that pins to the edge of the viewport (fixed nav, * bottom drawers, sticky footers). Uses max() so it collapses to 0 on * devices without a notch or home indicator. * -------------------------------------------------------------------------- */ .safe-top { padding-top: max(0px, var(--safe-top)); } .safe-bottom { padding-bottom: max(0px, var(--safe-bottom)); } .safe-x { padding-left: max(0px, var(--safe-left)); padding-right: max(0px, var(--safe-right)); } .safe-all { padding-top: max(0px, var(--safe-top)); padding-bottom: max(0px, var(--safe-bottom)); padding-left: max(0px, var(--safe-left)); padding-right: max(0px, var(--safe-right)); } /* Additive: navbar respects the notch/status-bar area on iOS. */ nav.navbar { padding-top: max(0px, var(--safe-top)); padding-left: max(0px, var(--safe-left)); padding-right: max(0px, var(--safe-right)); } /* ----------------------------------------------------------------------------- * Tap target helper * Ensure hit area is at least 44x44 CSS pixels per Apple HIG. * -------------------------------------------------------------------------- */ .tap-target { min-width: var(--tap-target-min); min-height: var(--tap-target-min); display: inline-flex; align-items: center; justify-content: center; } /* Bulma navbar burger — bump to a full 44x44 hit area without changing icon size. */ .navbar-burger { min-width: var(--tap-target-min); min-height: var(--tap-target-min); } /* ----------------------------------------------------------------------------- * Full-viewport height helper * Use var(--vh-full) instead of 100vh anywhere a container must fill the * screen. On modern iOS Safari this resolves to 100dvh (accounts for the * dynamic URL bar); on old browsers it falls back to 100vh. * -------------------------------------------------------------------------- */ .h-full-viewport { height: var(--vh-full); } /* ----------------------------------------------------------------------------- * Existing global from base.html (moved out of the inline