/* =============================================================================
* pm-nav-instant.css — the CSS half of the shared nav, loaded SYNCHRONOUSLY in
* so it paints on the FIRST frame, before pm-nav.js mounts the real
* sidebar.
*
* The problem it fixes: pm-nav.js injects the sidebar on DOMContentLoaded, i.e.
* AFTER the browser's first paint. So navigating between tabs flashed a bare
* cream page with an empty 240px gutter, then the dark sidebar popped in. This
* file pre-paints that gutter in the sidebar's exact colour, so there is no
* cream→dark flash — the real sidebar (z-40) just lands on top of this skeleton
* (z-39) seamlessly (same colour, same geometry).
*
* Adopt alongside the script:
* (in )
*
*
* Colours/geometry MUST match .pmnav-side in pm-nav.js (INK #2a3a2a, 240px).
* ============================================================================= */
/* Desktop sidebar gutter — a fixed dark bar in the left 240px, painted instantly.
Desktop only (>=768px), matching .pmnav-side's own media query; on mobile the
sidebar is hidden and a bottom bar is used instead. pointer-events:none so it
never intercepts a click even if a page's content briefly overlaps it. */
@media (min-width: 768px) {
html::before {
content: "";
position: fixed;
inset-block: 0;
left: 0;
width: 240px;
background: #2a3a2a;
z-index: 39;
pointer-events: none;
}
}
/* Light skin (opt-in, data-pmnav-skin="light" on , set by pm-nav.js): the
instant gutter goes light too, so the pre-mount skeleton matches the light
sidebar instead of flashing dark. The attr is set by the deferred script, so a
cold load can still show one dark frame; fully flicker-free would need a
blocking head script (deferred, since this is an opt-in setting). */
@media (min-width: 768px) {
html[data-pmnav-skin="light"]::before { background: #fbf8f0; border-right: 1px solid #e6dfcd; }
}
/* Content offset — DUPLICATED from pm-nav.js's injected css() on purpose. The JS
copy only lands at mount (DOMContentLoaded), so a standalone page's content
used to sit at x=0 until then and REFLOW 240px right when the nav appeared.
Painting the same offset synchronously here places the content correctly from
the first frame — no reflow, no content briefly under the gutter. (The app
shell self-offsets with md:ml-60 and does NOT use this class, so it's
unaffected.) Keep these values in lockstep with pm-nav.js. */
@media (min-width: 768px) { .pmnav-offset { padding-left: 240px; } }
@media (max-width: 767px) { .pmnav-offset { padding-bottom: 84px; } }
/* Smooth cross-document tab switches where the browser supports it (Chrome 126+,
Safari 18.2+): the browser HOLDS the current page until the next one is ready,
then cross-fades — instead of flashing a blank cream page. Harmless no-op in
older browsers (they just navigate as before). A short fade keeps it snappy. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}