/* Blazor's FocusOnNavigate programmatically focuses h1 on each navigation for screen-reader announcements. Screen readers don't need a visible focus ring, and Chrome's :focus-visible heuristic still paints an outline on programmatic focus that follows a mouse click, which reads as a flash on every navigation. Suppress the outline — h1 isn't interactive so there's no keyboard "where am I" loss from removing it. */ h1:focus, h1:focus-visible { outline: none; } /* Skip-to-content link. Visually hidden until keyboard focus lands on it, then slides into the top-left corner above everything. The target is the
in MainLayout. Positioned above the Fluent header's z-index so the link isn't hidden behind the header when it appears. */ .skip-link { position: absolute; top: 0; left: 0; transform: translateY(-110%); z-index: 1000; padding: 8px 16px; background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); text-decoration: none; border-radius: 0 0 4px 0; transition: transform 120ms ease-out; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--foreground-on-accent-rest); outline-offset: -4px; } /* Tune the default iOS/Android tap-highlight (which is a translucent grey that clashes with the blue accent palette) to a faint accent wash, keeping the "something was tapped" feedback on touch devices but matching the brand. Set at so everything inherits. */ html { -webkit-tap-highlight-color: rgba(24, 95, 165, 0.15); } /* Mobile typography pass (M-24). Hunting-down and rewriting every Style="font-size: 0.85rem" (30+ occurrences) would churn a lot of code — instead, intercept the two explicit inline sizes that render too small on phones (0.85rem ≈ 13.6 px; 0.8rem ≈ 12.8 px) and bump them to a readable minimum below 768 px. !important on a rule in a stylesheet beats non-!important inline styles. Desktop viewports keep the dense sizing because the text is easier to read at arm's length on a large display. Out of scope: fluid-typography clamp() pass for headings (M-26, low priority). */ @media (max-width: 767px) { [style*="font-size: 0.85rem"], [style*="font-size:0.85rem"] { font-size: 0.95rem !important; } [style*="font-size: 0.8rem"], [style*="font-size:0.8rem"] { font-size: 0.9rem !important; } } /* WCAG 2.2 SC 2.5.8 — 24×24 minimum; Apple HIG / Material recommend 44×44 for primary touch targets. We apply the 44 px floor only on coarse pointer devices so mouse-driven desktops keep their compact control heights. The ::part(control) selector reaches the interactive element inside Fluent's shadow DOM; native