/** * Navbar right cluster + first-paint sans stack — MUST load immediately after * /css/inter-font-face.css and BEFORE tw-built.css / styles.css. * * Without this, Chrome can paint the header while tw-built is still parsing and * styles.css has not yet applied: UA serif on nav, .ffy-header-actions rules missing, * and a visible “empty” slot next to the theme toggle (reserved min-width applies later). * Desktop cluster visibility uses max-width hide + lg flex only — no site-wide display:none on the cluster. * * Auth CTA span visibility is duplicated below (lg+) and in styles.css on purpose: * early paints can run before styles.css has fully applied; these rules match * html[data-auth] from so the Sign In / Account label is correct on first paint. */ html.font-sans { font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Hide the desktop-only cluster on small viewports only. Avoid a global `display: none` on this node (previously overridden at lg): that pattern can leave the Sign In / theme slot empty for a frame on navigation while the media block applies — reads as the pill “popping in”. */ @media (max-width: 1023px) { header .h-16 .ffy-header-actions { display: none !important; } } @media (min-width: 1024px) { header .h-16 .ffy-header-actions { display: flex !important; align-items: center; flex-shrink: 0; gap: 0.5rem; min-width: 11.75rem; } header .h-16 .ffy-header-actions #theme-toggle-desktop { display: inline-flex !important; } /* Mirror styles.css auth spans — keep in sync when changing [data-auth] rules. */ header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-in { display: none !important; } header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-out { display: inline !important; } html[data-auth="signed-in"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-in, html[data-auth="signed-in-free"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-in, html[data-auth="signed-in-pro"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-in { display: inline !important; } html[data-auth="signed-in"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-out, html[data-auth="signed-in-free"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-out, html[data-auth="signed-in-pro"] header .h-16 .ffy-header-actions a.auth-cta-link .auth-signed-out { display: none !important; } header .h-16 .ffy-header-actions a.auth-cta-link { box-sizing: border-box; display: inline-flex !important; flex: 0 0 auto; visibility: visible !important; min-width: 8.25rem; max-width: 8.25rem; justify-content: center; font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; font-synthesis: none; } }