@layer wa-utils {
    /*  products nav */
    .nav-products .product {
        border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0;
        line-height: 1;
        display: flex;
        align-items: center;
    }

    /* full sized */
    .wrapper-nav-products {
        background-color: var(--nav-products-bg, var(--wa-color-surface-lowered));
        padding-block-start: var(--wa-space-xs);
        padding-inline: var(--wa-space-xs);
        inline-size: 100%;
        transition: background-color var(--wa-transition-slow) var(--wa-transition-easing);
    }

    wa-page:has(.wrapper-nav-products, .nav-products-drawer) {
        &:has(.product-jwebmp:hover) {
            --nav-products-bg: var(--nav-products-fill-quiet-jwebmp);
        }
        &:has(.product-guicedee:hover) {
            --nav-products-bg: var(--nav-products-fill-quiet-guicedee);
        }
        &:has(.product-entity-assist:hover) {
            --nav-products-bg: var(--nav-products-fill-quiet-entity-assist);
        }
        &:has(.product-activity-master:hover) {
            --nav-products-bg: var(--nav-products-fill-quiet-activity-master);
        }
    }

    .nav-products-full {
        .product {
            /*padding-block: var(--wa-space-m);*/
            padding-inline: var(--wa-space-s);
        }

        .logo-icon {
            font-size: 1.75rem; /* ~ 28px for product icons in the nav bar */
        }

        .product-active .logo-icon {
            font-size: 2rem; /* slightly larger for the current-product logo */
        }
    }

    .nav-products-secondary .pseudo-product wa-icon {
        color: var(--wa-color-brand);
        font-size: var(--wa-font-size-l);
    }

    /* drawer-based */
    .nav-products-drawer {
        .product {
            /* match dimensions of drawer's close-button */
            padding-inline: var(--wa-form-control-padding-inline);
            height: var(--wa-form-control-height);

            &.product-active {
                --nudge-inline-start: calc(var(--wa-form-control-padding-inline) * -1.5);
            }

            /* nudge the non-first/second products to account for extra inline-start padding */
            &:nth-child(n + 4) {
                margin-inline-start: calc(-1 * var(--wa-form-control-padding-inline));
            }
        }
    }

    /* header */
    wa-page > [slot='header'] {
        /* reset default page component-based header styles */
        padding: 0;
        gap: 0;
        container-type: inline-size;
        container-name: header;
        background-color: var(--nav-products-bg, var(--wa-color-surface-lowered));
    }

    /* Ensure the wa-page internal header bar (shadow DOM) also picks up the background */
    wa-page::part(header) {
        background-color: var(--nav-products-bg, var(--wa-color-surface-lowered));
    }

    /* Narrow (≤ 80ch): compact header with logo */
    @container header (inline-size <= 80ch) {
        .header-nav,
        .header-toolbar,
        .wrapper-nav-products {
            display: block;
        }

        .header-logo-simple {
            display: block;
        }
    }

    /* > 80ch: hide compact logo */
    @container header (inline-size > 80ch) {
        .header-logo-simple {
            display: none;
        }

        .header-toggle-nav {
            margin-inline-start: var(--wa-space-s); /* visually align with product nav's .product-active */
        }
    }
}

/* Nav toggle: show when sidebar is hidden (wa-page mobile view), hide when sidebar is shown */
wa-page[view='mobile'] > [slot='header'] .header-toggle-nav {
    display: block;
}

wa-page[view='desktop'] > [slot='header'] .header-toggle-nav {
    display: none;
}

/* Mobile: hide the "JWebMP" text in the top-left product link, keep the icon */
wa-page[view='mobile'] .product-jwebmp.product-active {
    font-size: 0;        /* collapse the bare text node */
}
wa-page[view='mobile'] .product-jwebmp.product-active > .logo-jwebmp-svg {
    font-size: 1rem;     /* reset so the mask-image span keeps its dimensions */
}

/* Mobile: hide Star and Docs buttons and version badges to save header space */
wa-page[view='mobile'] .product-star,
wa-page[view='mobile'] .product-docs,
wa-page[view='mobile'] .version-badge {
    display: none;
}

/* Hide the menu sidebar when in mobile view (burger button visible) */
wa-page[view='mobile'] {
    --menu-width: 0px;
    --aside-width: 0px;
}
wa-page[view='mobile'] > [slot='menu'] {
    display: none;
}
wa-page[view='mobile'] > [slot='aside'] {
    display: none;
}

wa-page::part(drawer) {
    --size: auto;
}

/* drawer-based products nav */
wa-page::part(drawer__header) {
    background-color: var(--drawer-header-bg, var(--wa-color-surface-lowered));
    padding-block-start: 0;
    transition: background-color var(--wa-transition-slow) var(--wa-transition-easing);
}

wa-page:has(.nav-products-drawer .product-jwebmp:hover) {
    --drawer-header-bg: var(--nav-products-fill-quiet-jwebmp);
}
wa-page:has(.nav-products-drawer .product-guicedee:hover) {
    --drawer-header-bg: var(--nav-products-fill-quiet-guicedee);
}
wa-page:has(.nav-products-drawer .product-entity-assist:hover) {
    --drawer-header-bg: var(--nav-products-fill-quiet-entity-assist);
}
wa-page:has(.nav-products-drawer .product-activity-master:hover) {
    --drawer-header-bg: var(--nav-products-fill-quiet-activity-master);
}

wa-page::part(drawer__header-actions) {
    align-self: center;
}

wa-page > [slot='navigation-header'] {
    background-color: transparent;
    padding-block-end: var(--wa-space-xs);
}

/* colophon */
#colophon .the-socials {
    /* nudge those linkies left */
    margin-inline-start: calc(var(--wa-space-xs) * -1);

    a[target='_blank'] {
        color: var(--wa-color-text-quiet);
        padding-inline: var(--wa-space-xs);

        &:hover {
            color: var(--wa-color-text-normal);
        }
    }
}

/* search trigger */
wa-button#search-trigger {
    &::part(base) {
        background-color: var(--wa-form-control-background-color);
        border: var(--wa-form-control-border-width) var(--wa-form-control-border-style)
        var(--wa-form-control-border-color);
        box-shadow: none;
    }
    &::part(label) {
        text-align: start;
        width: 100%;
    }
}
#search-trigger kbd {
    font-size: var(--wa-font-size-2xs);
    line-height: var(--wa-form-control-value-line-height);
    padding-inline: 0.33em;
}

/* anchor headings  */
.anchor-heading a {
    opacity: 0;
    visibility: hidden;
    text-decoration: none;
    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
}

@media (hover: hover) {
    .anchor-heading:hover a {
        opacity: 1;
        visibility: visible;
        padding: var(--wa-space-3xs);
    }
}

/* dialogs */
wa-dialog.app-dialog [slot='footer'] {
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    flex-grow: 1; /* make footer contents span entire width of dialog */
    padding-block-start: var(--wa-space-l);
}

/* Make tree-item links fill the full row so the entire area is clickable */
wa-tree-item > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

wa-tree-item:has(> a)::part(label) {
    display: block;
    width: 100%;
}

wa-tree-item:has(> a)::part(item) {
    cursor: pointer;
}

/* #region hero tags — distinct brand-harmonious palette
   Brand = brand color (pink/magenta)
   Success = teal/cyan
   Neutral = slate/grey with brand tint
   Warning = amber/gold
*/
wa-tag[variant="brand"] {
    --wa-color-brand-fill-quiet: color-mix(in srgb, var(--wa-color-brand) 12%, transparent);
    --wa-color-brand-on-fill-quiet: var(--wa-color-brand);
    --wa-color-brand-border-quiet: color-mix(in srgb, var(--wa-color-brand) 25%, transparent);
    --wa-color-brand-border: color-mix(in srgb, var(--wa-color-brand) 40%, transparent);
    --wa-color-brand-normal: var(--wa-color-brand);
}

wa-tag[variant="success"] {
    --wa-color-success-fill-quiet: color-mix(in srgb, oklch(0.75 0.15 180) 12%, transparent);
    --wa-color-success-on-fill-quiet: oklch(0.55 0.12 180);
    --wa-color-success-border-quiet: color-mix(in srgb, oklch(0.65 0.13 180) 30%, transparent);
    --wa-color-success-border: color-mix(in srgb, oklch(0.65 0.13 180) 45%, transparent);
    --wa-color-success-normal: oklch(0.55 0.12 180);
    --wa-color-success-fill-normal: oklch(0.55 0.12 180);
    --wa-color-success-on-fill-normal: #fff;
}

wa-tag[variant="neutral"] {
    --wa-color-neutral-fill-quiet: color-mix(in srgb, var(--wa-color-text) 7%, transparent);
    --wa-color-neutral-on-fill-quiet: color-mix(in srgb, var(--wa-color-text) 65%, transparent);
    --wa-color-neutral-border-quiet: color-mix(in srgb, var(--wa-color-text) 12%, transparent);
    --wa-color-neutral-border: color-mix(in srgb, var(--wa-color-text) 20%, transparent);
    --wa-color-neutral-normal: color-mix(in srgb, var(--wa-color-text) 50%, transparent);
}

wa-tag[variant="warning"] {
    --wa-color-warning-fill-quiet: color-mix(in srgb, oklch(0.80 0.15 85) 12%, transparent);
    --wa-color-warning-on-fill-quiet: oklch(0.55 0.13 70);
    --wa-color-warning-border-quiet: color-mix(in srgb, oklch(0.70 0.14 80) 30%, transparent);
    --wa-color-warning-border: color-mix(in srgb, oklch(0.70 0.14 80) 45%, transparent);
    --wa-color-warning-normal: oklch(0.55 0.13 70);
    --wa-color-warning-fill-normal: oklch(0.55 0.13 70);
    --wa-color-warning-on-fill-normal: #fff;
}

.wa-dark wa-tag[variant="success"] {
    --wa-color-success-on-fill-quiet: oklch(0.80 0.12 180);
    --wa-color-success-border-quiet: color-mix(in srgb, oklch(0.70 0.12 180) 35%, transparent);
    --wa-color-success-border: color-mix(in srgb, oklch(0.70 0.12 180) 50%, transparent);
}

.wa-dark wa-tag[variant="neutral"] {
    --wa-color-neutral-on-fill-quiet: color-mix(in srgb, var(--wa-color-text) 75%, transparent);
}

.wa-dark wa-tag[variant="warning"] {
    --wa-color-warning-on-fill-quiet: oklch(0.82 0.13 85);
    --wa-color-warning-border-quiet: color-mix(in srgb, oklch(0.75 0.13 85) 35%, transparent);
    --wa-color-warning-border: color-mix(in srgb, oklch(0.75 0.13 85) 50%, transparent);
}
/* #endregion */

/* Header action icons (GitHub links) hover state */
.header-action-icon:hover {
    color: var(--wa-color-brand-normal) !important;
}

pre {
    border-radius: inherit !important;

}

/* Ensure cards in grids have equal height and footers align to bottom */
wa-grid wa-card {
    height: 100%;
}

wa-card::part(base) {
    display: flex;
    flex-direction: column;
    height: 100%;
}

wa-card::part(body) {
    flex: 1 1 auto;
}

wa-card::part(footer) {
    flex: 0 0 auto;
}

/* Built-on attribution links */
.built-on-links a {
    text-decoration: none;
    padding: var(--wa-space-3xs) var(--wa-space-xs);
    border-radius: var(--wa-border-radius-m);
    transition:
        background-color var(--wa-transition-fast) var(--wa-transition-easing),
        color var(--wa-transition-fast) var(--wa-transition-easing),
        transform var(--wa-transition-fast) var(--wa-transition-easing),
        box-shadow var(--wa-transition-fast) var(--wa-transition-easing);
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}

.built-on-links a wa-icon,
.built-on-links a .built-on-logo {
    font-size: var(--wa-font-size-m);
    opacity: 0.7;
    transition: opacity var(--wa-transition-fast) var(--wa-transition-easing);
}

.built-on-links a:hover wa-icon,
.built-on-links a:hover .built-on-logo {
    opacity: 1;
}

.built-on-links a:hover {
    background-color: color-mix(in srgb, var(--wa-color-brand-normal) 12%, transparent);
    color: var(--wa-color-brand-dark) !important;
    transform: translateX(var(--wa-space-3xs));
    box-shadow: inset 2px 0 0 var(--wa-color-brand-normal);
}

.built-on-links a:active {
    background-color: color-mix(in srgb, var(--wa-color-brand-normal) 20%, transparent);
    transform: translateX(var(--wa-space-3xs)) scale(0.98);
}

.wa-dark .built-on-links a:hover {
    background-color: color-mix(in srgb, var(--wa-color-brand-normal) 18%, transparent);
    color: var(--wa-color-brand-light) !important;
}

/* Drawer navigation: tighten spacing between header and tree, fix alignment */
wa-page > [slot='navigation'] {
    padding: 0;
}

wa-page > [slot='navigation'] wa-tree {
    padding-inline: 0;
}

wa-page::part(drawer__body) {
    padding-block-start: 0;
}

/* Push tree items left in menu sidebar and drawer navigation */
wa-page > [slot='menu'] wa-tree,
wa-page > [slot='navigation'] wa-tree {
    --indent-size: 0;
    padding-inline-start: 0;
    margin-inline-start: -40px;
}

wa-page > [slot='menu'] wa-tree-item::part(item),
wa-page > [slot='navigation'] wa-tree-item::part(item) {
    padding-inline-start: var(--wa-space-2xs);
}