/* Headerns verkliga höjd mäts också när mobilmenyn bryts till flera rader. */
:root { --skylt-header-height: 48px; }
@media screen {
    /* Vissa sidor inkluderar menyn direkt, utan omslutande #header.
       Samma kantfria placering ska gälla även där. */
    body:has(#header), body:has(nav.mobile-navigation) {
        margin-top: 0;
        padding-top: var(--skylt-header-height) !important;
    }
    body #header, body:not(:has(#header)) nav.mobile-navigation {
        position: fixed !important; inset: 0 0 auto 0; height: auto !important;
        padding: 0 !important; margin: 0 !important; width: 100%;
        z-index: 1000; background: #eee; box-sizing: border-box;
    }
    #header nav, nav.mobile-navigation, nav.mobile-navigation > ul { margin: 0; padding: 0; }
    body.map-home { margin: 0; overflow: hidden; }
    .map-home #map {
        /* Google sätter position:relative direkt på kartelementet.
           Behåll vår viewportplacering och ge kartan en explicit höjd. */
        position: fixed !important; inset: var(--skylt-header-height) 0 0;
        margin: 0; width: 100%;
        height: calc(100vh - var(--skylt-header-height)) !important;
        height: calc(100dvh - var(--skylt-header-height)) !important;
    }
    .map-home #mapsinput { width: min(300px, 75vw); margin: 10px; }
    #project-picker {
        position: fixed; z-index: 10; top: calc(var(--skylt-header-height) + 12px);
        right: 12px; width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
        background: white; border: 1px solid #ccd7dd; border-radius: 10px;
        box-shadow: 0 3px 12px #0002; padding: 10px 12px;
    }
    #project-picker summary { cursor: pointer; font-weight: bold; overflow-wrap: anywhere; }
    #project-picker label { display: block; margin-top: 10px; }
    #project-search { width: 100%; box-sizing: border-box; padding: 10px; font-size: 16px; }
    #project-results { max-height: 55dvh; overflow: auto; margin-top: 8px; }
    #project-results button {
        display: block; width: 100%; text-align: left; white-space: normal;
        padding: 9px 10px; margin: 0; border: 0;
        background: white; color: #173c4c; text-shadow: none; box-shadow: none;
        cursor: pointer; font-size: 14px; line-height: 1.4;
    }
    #project-results button:hover, #project-results button:focus-visible { background: #e5f3fa; }
    #project-results button[aria-pressed="true"] { background: #d6efdf; }
    /* Nästlade listor ger verklig hierarki utan breadcrumbs eller skiljelinjer. */
    #project-results ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
    #project-results > ul { padding-left: 0; }
    #project-results li { margin: 0; padding: 0; }
    #project-results ul:empty { display: none; }
    body:is(.mobile-sign, .mobile-project) #skylttrad {
        position: fixed; top: var(--skylt-header-height); left: 0;
        margin: 0; padding: 0; z-index: 40;
    }
    body:is(.mobile-sign, .mobile-project) #div_tree {
        margin: 0; padding: 0; box-sizing: border-box;
        max-height: calc(100dvh - var(--skylt-header-height)); overflow: auto;
    }
    @media (max-width: 800px) {
        body:is(.mobile-sign, .mobile-project) {
            padding-top: calc(var(--skylt-header-height) + 44px) !important;
        }
        body:is(.mobile-sign, .mobile-project) #skylttrad { width: 100%; max-width: 100%; }
        body:is(.mobile-sign, .mobile-project) #div_tree {
            max-height: calc(100dvh - var(--skylt-header-height) - 44px);
        }
    }
    @media (max-width: 600px) {
        #project-picker { top: auto; bottom: 28px; }
        #project-results { max-height: 40dvh; }
    }
}