/* ============================================================================= KANINE — interaction-until-connected cue (presentational half). UI-GUAR-032 — LIGHT CUE, NO BLOCK (owner ruling 2026-06-28). The page is DRAWN and fully interactive as soon as the InteractiveServer circuit allows — we do NOT curtain it, dim it, set `pointer-events:none`, or `inert` while the circuit connects (the owner accepts that a click in the sub-second handshake simply does nothing rather than ever being blocked from acting). The ONLY connect-window affordance is a slim "connecting" progress bar across the top of the routed body, shown while `` is set (kanine-circuit-guard.js arms it at first paint + on each enhanced navigation; the CircuitGuard island clears it the instant the circuit is up, with a ~5s failsafe). Data fills in progressively after connect (pages load in OnAfterRenderAsync and re-render each region as it arrives). SCOPE. The authenticated shell's routed body — `.kl-shell .kl-shell-main` (MainLayout) — and the chromeless pre-auth login card — `.kl-auth .kl-shell-main` (AuthLayout). The nav rail / top bar / theme toggle (which work with NO circuit, OUTSIDE `.kl-shell-main`) are untouched. The framework `#blazor-error-ui` is outside `.kl-shell-main` too. This file is referenced from App.razor; it is intentionally SEPARATE from the big shared kanine-design-system.css so this guard has zero overlap with it. ========================================================================== */ /* Anchor the connecting bar to the routed body (no other visual change — the page stays fully drawn and interactive). */ html[data-circuit-connecting] .kl-shell .kl-shell-main, html[data-circuit-connecting] .kl-auth .kl-shell-main { position: relative; } /* A slim "connecting" progress bar across the TOP of the routed body — the sole, honest cue that the circuit is still wiring up. It covers nothing and blocks nothing; it is removed the instant the circuit connects (the flag is cleared). */ html[data-circuit-connecting] .kl-shell .kl-shell-main::before, html[data-circuit-connecting] .kl-auth .kl-shell-main::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; /* BEHIND the nav chrome, not over it (owner report 2026-07-23). The routed body starts at x=240 but the fixed rail is 257px wide, so `.kl-shell-main` UNDERLAPS the rail by ~17px — at z-index 60 the bar's leading sliver painted on top of the dark rail instead of stopping at the top bar's bottom edge. The rail is z-index 50, the open mobile drawer 60, the mobile top bar 70; sitting below all three keeps the bar clear of every piece of nav chrome while still painting above the routed page content (which is static/auto). */ z-index: 40; pointer-events: none; background-color: color-mix(in srgb, var(--k-accent, #14b8a6) 20%, transparent); background-image: linear-gradient(90deg, transparent, var(--k-accent, #14b8a6), transparent); background-size: 38% 100%; background-repeat: no-repeat; animation: kl-circuit-bar 1.05s ease-in-out infinite; } @keyframes kl-circuit-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } } /* Respect reduced-motion: keep the bar visible, drop the sweep animation. */ @media (prefers-reduced-motion: reduce) { html[data-circuit-connecting] .kl-shell .kl-shell-main::before, html[data-circuit-connecting] .kl-auth .kl-shell-main::before { animation: none; background-image: linear-gradient(90deg, transparent, var(--k-accent, #14b8a6), transparent); background-size: 100% 100%; } }