/* ═══════════════════════════════════════════════════════════════════════════ EARLY SPLASH — paints and starts spinning BEFORE the heavy file is parsed. Why the loader looked like a frozen red dot: the old splash markup sits ~19,000 lines into a 7.9 MB document, so the browser had to parse most of the file before that element even existed. By then the main thread was saturated, so the animation could not start cleanly and stalled on a single frame (the red circle is the top-most of the three, which is why it looked like one red dot). This cover is declared at the very top of the head, and its element is the first node inside the document body, so it paints on the first frame, starts animating immediately, and — promoted to the GPU via will-change — keeps spinning while the rest of the document parses. It also removes the "old content flash": an opaque cover exists from the first painted frame until the app is ready, so nothing underneath can ever be seen half-built. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes tapx-l3-0{ 0%,20%{transform:rotate(0)} 100%{transform:rotate(360deg)} } @keyframes tapx-l3-1{ 50%{transform:rotate(var(--s,90deg))} 100%{transform:rotate(0)} } #tapx-early-splash{ position:fixed; inset:0; z-index:2147483647; background:#ffffff; display:flex; align-items:center; justify-content:center; transition:opacity .45s ease; opacity:1; } #tapx-early-splash.tapx-es-hide{ opacity:0; pointer-events:none; } #tapx-early-splash .tapx-es-ldr{ width:58px; aspect-ratio:1; border-radius:50%; background:#E3AAD6; transform-origin:top; display:grid; animation:tapx-l3-0 1s infinite linear; will-change:transform; backface-visibility:hidden; } #tapx-early-splash .tapx-es-ldr::before, #tapx-early-splash .tapx-es-ldr::after{ content:""; grid-area:1/1; background:#F4DD51; border-radius:50%; transform-origin:top; animation:inherit; animation-name:tapx-l3-1; will-change:transform; backface-visibility:hidden; } #tapx-early-splash .tapx-es-ldr::after{ background:#F10C49; --s:180deg; } /* the old late cover is redundant while this one is up — avoids two covers */ #tapx-splash{ display:none !important; } /* ═══ EARLY LANDING GUARD (top of , before the overlay node exists) ═════ The login overlay (#tapx-login-overlay) sits far down the document, but a CSS rule down there reveals it whenever its inline display isn't literally 'display:none'. To beat every timing race we place the authoritative guard HERE, at the very top of : whenever carries `tapx-landing-guard` the overlay/dash overlay are display:none !important and cannot paint, no matter what any later CSS or inline style says. The first head script (below) adds this class synchronously on every non-login visit; login/register clicks and the auth reload remove it. Because this rule is parsed first, the portal can never flash on the landing. */ html.tapx-landing-guard #tapx-login-overlay, html.tapx-landing-guard #tapx-dash-overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── HERO FIRST-PAINT COLOR LOCK (kills the yellow/light-blue draft flash) ── The FINAL light-mode hero colors were defined ~80k lines below in the file, so during the browser's top-to-bottom parse the hero painted in its DRAFT palette first — light-blue headline (rule ~L5916) + yellow typewriter (rule ~L62792) — and only flipped to navy once the parser reached the late rules (~L95357). That long gap WAS the flash. These rules sit up here in , before the hero paints, and use higher specificity than every draft rule (html:not(.dark) + #hero + .hero-landing-ambient + target), so the hero is the final navy from the very first frame and no later rule can flip it back. Light-mode only — the dashboard dark theme is untouched. */ html:not(.dark) #hero.hero-landing-ambient .hero-headline-fines{ color:#0a2540 !important; text-shadow:none !important; } html:not(.dark) #hero.hero-landing-ambient #hero-typewriter-line, html:not(.dark) #hero.hero-landing-ambient #hero-typewriter-text, html:not(.dark) #hero.hero-landing-ambient #hero-typewriter-cursor{ color:#0a2540 !important; text-shadow:none !important; } html:not(.dark) #hero.hero-landing-ambient .text-slate-800{ color:#1e293b !important; } /* Hide the native calendar/clock picker icon on ALL date/time fields (dashboard + landing page). Field still works; only the icon is removed. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { display: none !important; opacity: 0 !important; -webkit-appearance: none !important; appearance: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; } input[type="date"]::-webkit-inner-spin-button, input[type="datetime-local"]::-webkit-inner-spin-button, input[type="month"]::-webkit-inner-spin-button, input[type="time"]::-webkit-inner-spin-button { display: none !important; -webkit-appearance: none !important; appearance: none !important; } /* ════════════════════════════════════════════════════════════════════ CROSS-DEVICE / CROSS-BROWSER FIELD CONSISTENCY (UI-only) Makes