/* Shell metrics every other sheet is allowed to depend on.
   Loaded before the rest so any sheet can read these. */

:root {
    /* Height of the sticky app header.

       This is a CONSUMER-side value: sheets that need to clear the header read
       it. It is deliberately not what sizes the header — .navbar owns that in
       site.css — because a token that both sized and reported the height would
       feed back on itself through the observer below.

       wwwroot/js/site.js replaces this with the header's measured height once
       the shell is up, which covers the variants CSS cannot predict (the
       authenticated header carries a drawer trigger, the brand text can wrap).
       The values here are the first-paint fallback and must stay in step with
       .navbar's min-height. */
    --app-header-h: 4.2rem;

    /* Breathing room between the header and whatever sticks below it. */
    --app-gap: 1rem;

    /* What a sticky element needs to clear the header. Nothing should hardcode
       this offset again — that is what left fourteen sticky elements with eight
       different hand-guessed values. */
    --app-sticky-top: calc(var(--app-header-h) + var(--app-gap));

    /* Height available to a sticky panel that starts below the header.
       dvh rather than vh: on mobile browsers vh counts the retractable URL bar,
       so a vh-sized panel hangs off the bottom of the screen until you scroll. */
    --app-sticky-max-h: calc(100dvh - var(--app-sticky-top) - var(--app-gap));
}

@media (max-width: 1199.98px) {
    :root {
        --app-header-h: 3.75rem;
    }
}

/* Anchor navigation and scrollIntoView land below the header rather than under
   it. Declared once here so no page has to remember its own scroll-margin-top. */
html {
    scroll-padding-top: var(--app-sticky-top);
}