.nav-inner > .turgelis-nav-desktop,
.header-tools > .turgelis-nav-tools {
    display: none;
}

.turgelis-nav-link {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.turgelis-nav-link img {
    display: block;
    width: 26px;
    height: 28px;
}

@supports ((-webkit-mask-image: url("turgelis-nav.svg")) or (mask-image: url("turgelis-nav.svg"))) {
    .turgelis-nav-link img { display: none; }

    .turgelis-nav-link::before {
        content: "";
        width: 26px;
        height: 28px;
        background-color: var(--green, #284c39);
        -webkit-mask: url("turgelis-nav.svg") center / contain no-repeat;
        mask: url("turgelis-nav.svg") center / contain no-repeat;
    }

    @media (prefers-color-scheme: dark) {
        .turgelis-nav-link::before { background-color: currentColor; }
    }

    @supports (color: oklch(from #284c39 l c h / clamp(0, calc((0.6 - l) * 10), 1))) {
        .turgelis-nav-link::before {
            /* The app can switch the page palette without changing the system preference. */
            --turgelis-nav-green: oklch(from var(--green, #284c39) l c h / clamp(0, calc((0.6 - l) * 10), 1));
            background-color: currentColor;
            background-image: linear-gradient(var(--turgelis-nav-green), var(--turgelis-nav-green));
        }
    }
}

@media (max-width: 760px) {
    .masthead .header-tools > .turgelis-nav-tools {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .masthead .header-tools > .turgelis-nav-tools::before {
        background-color: currentColor;
        background-image: none;
    }
}

@media (min-width: 761px) {
    .nav-inner.has-turgelis-link {
        --turgelis-nav-edge: 40px;
        --turgelis-nav-tools-space: 244px;
        --turgelis-nav-extra-space: 56px;
    }

    .nav-inner > .turgelis-nav-desktop {
        position: absolute;
        inset-inline-end: var(--turgelis-nav-edge);
        display: inline-flex;
    }

    .nav-inner.has-turgelis-link:not(.has-sticky-tools) > a:nth-last-child(2) {
        margin-inline-end: auto;
    }

    .nav-inner.has-turgelis-link.has-sticky-tools {
        padding-inline-end: calc(var(--turgelis-nav-tools-space) + var(--turgelis-nav-extra-space));
    }

    .nav-inner.has-sticky-tools > .turgelis-nav-desktop {
        display: none;
    }

    .nav-inner.has-sticky-tools > .header-tools > .turgelis-nav-tools {
        display: inline-flex;
    }
}

@media (min-width: 761px) and (max-width: 1150px) {
    .nav-inner.has-turgelis-link {
        --turgelis-nav-tools-space: 148px;
        --turgelis-nav-extra-space: 52px;
    }
}

@media (min-width: 761px) and (max-width: 1000px) {
    .nav-inner.has-turgelis-link {
        --turgelis-nav-edge: 28px;
        --turgelis-nav-tools-space: 132px;
    }
}