/* ── Ambient layer: subtle film grain + aurora glow at the top of the app. Both are fixed to the viewport, pointer-events:none, and z-index:0 so they sit behind everything. Makes flat amber feel slightly printed/analog rather than digital-flat. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; /* Subtle amber aurora across the top 40% of the viewport. */ background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(224,162,72,0.055) 0%, transparent 70%), radial-gradient(ellipse 60% 30% at 20% 8%, rgba(224,162,72,0.035) 0%, transparent 60%), radial-gradient(ellipse 60% 30% at 80% 12%, rgba(224,162,72,0.025) 0%, transparent 60%); } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.035; mix-blend-mode: overlay; /* 128×128 SVG noise — inlined so there's no extra request. */ background-image: url("data:image/svg+xml;utf8,"); } /* Every real content element needs to live above the ambient layers. */ body > * { position: relative; z-index: 3; } /* Scroll lock applied to body when a modal is open. Prevents the dashboard behind the modal from scrolling when the user scrolls on the backdrop. Paired with useBodyScrollLock() on the modal side. */ body.oa-scroll-locked { overflow: hidden; /* Pad the right edge to prevent content shift as the scrollbar disappears on Windows/Chrome. The actual value is set as a CSS var by the hook. */ padding-right: var(--oa-scrollbar-width, 0); } /* ── Mobile button hygiene ────────────────────────────────────── Suppresses the mobile text-selection UI on interactive elements. On Chrome Android a normal tap on a button used to select the button's own text label and raise the OS selection handles + copy/share popup — the "blue select box". • user-select:none — label text isn't selectable • -webkit-touch-callout:none — no long-press callout menu • -webkit-tap-highlight-color — no blue tap flash • touch-action:manipulation — drops the 300ms double-tap delay Covers

Create your account

Create your account