/* Manifest Utilities */

@layer base, components, utilities;

@layer utilities {

    /* Center in flex parent */
    :where(.center) {
        justify-content: center;
        align-items: center
    }

    /* Flex utilities */
    :where(.row, .row-wrap, .col, .col-wrap) {
        display: flex
    }

    /* Flex column */
    :where(.col) {
        flex-flow: column nowrap
    }

    /* Wrapping flex column */
    :where(.col-wrap) {
        flex-flow: column wrap
    }

    /* Flex row */
    :where(.row) {
        flex-flow: row nowrap
    }

    /* Wrapping flex row */
    :where(.row-wrap) {
        flex-flow: row wrap
    }

    /* Content width & horizontal centering */
    :where(.content) {
        width: var(--spacing-content-width, 74rem);
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: auto
    }

    /* Ghost */
    :where(.ghost) {
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: transparent;

        &:hover {
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
        }
    }

    /* Hug */
    :where(.hug) {
        min-width: 0;
        width: fit-content;
        height: fit-content;
        padding: 0
    }

    /* Outlined */
    :where(.outlined) {
        border-width: 1px;
        border-style: solid;
        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, oklch(43.9% 0 0)))
    }

    /* Dark theme override */
    .dark :where(.outlined) {
        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
    }

    /* Transparent */
    :where(.transparent) {
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: transparent !important;

        &:hover {
            color: var(--color-content-stark, oklch(43.9% 0 0))
        }
    }

    /* Large */
    :where(.lg) {
        --spacing-field-height: 2.5rem;
        --spacing-field-padding: 0.78rem;
        font-size: 125%
    }

    /* Small */
    :where(.sm) {
        --spacing-field-height: 1.5rem;
        --spacing-field-padding: 0.49rem;
        font-size: 75%;

        /* Reposition select picker icon */
        &::picker-icon {
            line-height: 0.2
        }
    }

    /* Disabled */
    :where(.disabled) {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    /* Page content layout */
    :where(body.page) {
        display: flex;
        flex-direction: column;
        min-height: 100vh
    }

    .page {

        /* Overlay header & footer if fixed */
        &>header,
        &>footer {
            z-index: 30
        }

        /* Page margins */
        &>header,
        &>footer,
        &>main {
            padding-inline-start: var(--spacing-viewport-padding, 5vw);
            padding-inline-end: var(--spacing-viewport-padding, 5vw);
        }

        /* Width and horizontal centering for content wrappers */
        &>header nav:not([popover]),
        &>footer nav:not([popover]),
        &>main>section:not(.banner, .overlay-dark, .overlay-light) {
            width: var(--spacing-content-width, 74rem);
            max-width: 100%;
            margin-inline-start: auto;
            margin-inline-end: auto
        }

        /* Push footer down */
        &>footer {
            margin-top: auto
        }
    }

    /* No focus */
    .no-focus:focus,
    .no-focus:focus-visible,
    .no-focus:focus-within {
        box-shadow: 0 0 0 0 transparent
    }

    /* No scrollbar */
    :where(.no-scrollbar) {
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none
        }
    }

    /* No spinners */
    .no-spinner {
        appearance: textfield !important;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
            margin: 0
        }
    }

    /* Banner overlays */
    :where(.overlay-dark, .overlay-light) {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%
        }

        >* {
            position: relative;
            z-index: 1
        }
    }

    /* Dark overlay */
    :where(.overlay-dark) {
        color: white !important;

        &::after {
            background: oklch(0% 0 0 / 50%)
        }
    }

    /* Light overlay */
    :where(.overlay-light) {
        color: oklch(14.5% 0 0) !important;

        &::after {
            background: oklch(100% 0 0 / 75%)
        }
    }

    /* Prose styles for long-form content */
    :where(.prose, .prose details) {
        width: 42rem;
        max-width: 100%;

        /* Asides inside a prose element are used as callouts */
        & aside:not([popover]) {
            margin-top: calc(1rem * 1.4);
            padding: calc(var(--spacing, 0.25rem) * 4);
            border-radius: calc(var(--radius, 0.5rem) * 2);
            color: var(--color-content-stark, oklch(43.9% 0 0));
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);

            /* Auto format asides with icons */
            &:has([x-icon]):not([x-code-group] aside, aside.frame) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                & [x-icon] {
                    padding-top: 0.25rem;
                    font-size: 1.25rem
                }
            }
        }

        & [x-code-group] aside.frame {
            margin-top: 0;
            padding: calc(var(--spacing, 0.25rem) * 4);
            font-family: var(--font-sans);
            font-size: initial;
            background-color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
            border: 0 none;
            border-radius: 0
        }

        &>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
            margin-top: calc(1rem * 1.4)
        }

        &>blockquote {
            margin-top: calc(1rem * 2);

            & * {
                margin: 0
            }
        }

        &>details,
        &>hr+details {
            margin-top: 0
        }

        &>details:first-child,
        &> :not(details, hr)+details {
            margin-top: calc(3rem)
        }

        &>details:last-child {
            margin-bottom: calc(3rem)
        }

        /* Own rule — :not() is not forgiving either, so an unsupported :has()
           inside it would take :last-child above down with it. */
        &>details:not(:last-child):not(:has(+ details, + hr)) {
            margin-bottom: calc(3rem)
        }

        &>details+ :not(details, hr) {
            margin-top: 0
        }

        &>figcaption {
            margin-top: 1rem
        }

        &>figure {
            margin-top: calc(1rem * 1.4);

            & img {
                margin: 0
            }
        }

        &>h1 {
            font-size: 2.25rem
        }

        &>h1+p {
            margin-top: 0.625rem;
            font-size: 1.125rem;
            color: var(--color-content-neutral, oklch(43.9% 0 0))
        }

        &>h2 {
            font-size: 1.75rem;
            margin-top: 1rem;
            margin-bottom: calc(1rem * 0.6667)
        }

        &>h3 {
            font-size: 1.25rem;
            margin-top: calc(1rem * 2.4)
        }

        &>h4 {
            margin-top: calc(1rem * 3)
        }

        &>h4+p {
            margin-top: 0.25rem
        }

        &>h5 {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        &>h6 {
            margin-top: calc(1rem * 2);
            margin-bottom: 1rem
        }

        &>hr {
            margin-top: calc(1rem * 3);
            margin-bottom: calc(1rem * 3);
        }

        &>details+hr:has(+ details) {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        &>img,
        &>p {
            margin-top: calc(1rem * 1.4)
        }

        &>ol,
        &>ul,
        &>small {
            margin-top: 1rem
        }

        &>table {
            margin-top: calc(1rem * 2);
            margin-bottom: calc(1rem * 2)
        }

        &>[x-code-group],
        &>[x-code],
        &>pre {
            margin-top: 2rem;
            margin-bottom: 2rem
        }

        &>[x-code-group] [x-code] {
            margin-top: 0;
            margin-bottom: 0
        }

        &>[x-code] pre {
            margin-top: 0;
            margin-bottom: 0
        }
    }

    /* Inline trailing content */
    :where(.trailing) {
        display: inline-block;
        margin-inline-start: auto;
        color: var(--color-content-subtle, oklch(55.6% 0 0))
    }

    /* Brand colors */
    :where(.brand) {
        --color-field-surface: var(--color-brand-surface, oklch(85.2% 0.199 91.936));
        --color-field-surface-hover: var(--color-brand-surface-hover, oklch(90.5% 0.182 98.111));
        --color-field-inverse: var(--color-brand-inverse, oklch(98.5% 0 0));
        --color-content-stark: var(--color-brand-content, oklch(68.1% 0.162 75.834));
        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 70%, transparent)
    }

    /* Accent colors */
    :where(.accent) {
        --color-field-surface: var(--color-accent-surface, oklch(43.9% 0 0));
        --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
        --color-field-inverse: var(--color-accent-inverse, oklch(98.5% 0 0));
        --color-content-stark: var(--color-accent-content, oklch(43.9% 0 0));
        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(43.9% 0 0)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(43.9% 0 0)) 70%, transparent)
    }

    /* Negative colors */
    :where(.negative) {
        --color-field-surface: var(--color-negative-surface, salmon);
        --color-field-surface-hover: var(--color-negative-surface-hover, lightcoral);
        --color-field-inverse: var(--color-negative-inverse, maroon);
        --color-content-stark: var(--color-negative-content, crimson);
        --color-content-neutral: color-mix(in oklch, var(--color-negative-content, crimson) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-negative-content, crimson) 70%, transparent)
    }

    /* Positive colors */
    :where(.positive) {
        --color-field-surface: var(--color-positive-surface, palegreen);
        --color-field-surface-hover: var(--color-positive-surface-hover, lightgreen);
        --color-field-inverse: var(--color-positive-inverse, darkgreen);
        --color-content-stark: var(--color-positive-content, limegreen);
        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, limegreen) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, limegreen) 70%, transparent)
    }

    /* Text colors */
    :where(.stark) {
        color: var(--color-content-stark, oklch(43.9% 0 0))
    }

    :where(.neutral) {
        color: var(--color-content-neutral, oklch(43.9% 0 0))
    }

    :where(.subtle) {
        color: var(--color-content-subtle, oklch(55.6% 0 0))
    }

    /* Visibility — viewport */
    @media (min-width: 640px) {
        .mobile-only { display: none !important }
    }

    @media (max-width: 639.98px) {
        .desktop-only { display: none !important }
    }

    /* Visibility — input device (independent of viewport) */
    @media (pointer: fine) {
        .touch-only { display: none !important }
    }

    @media not all and (pointer: fine) and (hover: hover) {
        .cursor-only { display: none !important }
    }

    @media not all and (any-pointer: fine) {
        .pointer-only { display: none !important }
    }

    /* Visibility — operating system (html[data-os] set by the utilities plugin) */
    html:not([data-os="macos"]) .mac-only { display: none !important }
    html:not([data-os="windows"]) .windows-only { display: none !important }
    html:not([data-os="linux"]) .linux-only { display: none !important }
    html:not([data-os="ios"]) .ios-only { display: none !important }
    html:not([data-os="android"]) .android-only { display: none !important }
    html:not([data-os="macos"]):not([data-os="ios"]) .apple-only { display: none !important }

    /* Visibility — operating system omission */
    html[data-os="macos"] .no-mac { display: none !important }
    html[data-os="windows"] .no-windows { display: none !important }
    html[data-os="linux"] .no-linux { display: none !important }
    html[data-os="ios"] .no-ios { display: none !important }
    html[data-os="android"] .no-android { display: none !important }
    html[data-os="macos"] .no-apple, html[data-os="ios"] .no-apple { display: none !important }

    /* Visibility — connectivity & container (html[data-*] set by the $device signal) */
    html:not([data-online="false"]) .offline-only { display: none !important }
    html[data-online="false"] .online-only { display: none !important }
    html:not([data-standalone]) .standalone-only { display: none !important }
    html:not([data-native]) .native-only { display: none !important }
    html[data-native] .web-only { display: none !important }

    /* Safe-area padding (var --safe-* is 0 unless viewport-fit=cover on a notched screen) */
    :where(.pt-safe) { padding-top: var(--safe-top) }
    :where(.pr-safe) { padding-right: var(--safe-right) }
    :where(.pb-safe) { padding-bottom: var(--safe-bottom) }
    :where(.pl-safe) { padding-left: var(--safe-left) }
    :where(.px-safe) { padding-left: var(--safe-left); padding-right: var(--safe-right) }
    :where(.py-safe) { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom) }
    :where(.p-safe) { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) }

    /* Dynamic viewport height (avoids the mobile 100vh browser-chrome jump) */
    :where(.min-h-dvh) { min-height: 100dvh }
    :where(.h-dvh) { height: 100dvh }

    /* Native — suppress web tells (opt-in) */
    :where(.no-callout) { -webkit-touch-callout: none }
    :where(.no-select) { -webkit-user-select: none; user-select: none }
    :where(.no-tap-zoom) { touch-action: manipulation }
    :where(.no-overscroll) { overscroll-behavior: none }
    :where(.no-overscroll-y) { overscroll-behavior-y: none }
}