/* Manifest Typography */

@layer base, components, utilities;

@layer base {

    /* All text elements */
    :where(abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label:not(.avatar, :has([type=file], [type=search])), legend, p, small, cite, q):not(.unstyle),
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .paragraph,
    .small,
    .caption,
    .label {
        color: var(--color-content-stark, oklch(43.9% 0 0));

        /* Inline links */
        & a:not(.unstyle),
        & .link {
            text-decoration: underline;
            text-underline-offset: 2px
        }

        /* Inline icons */
        & [x-icon] {
            margin-inline-end: 0.25em
        }
    }

    /* Headings */
    :where(h1, h2, h3, h4, h5, h6):not(.unstyle),
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        font-weight: 550;
        word-wrap: break-word
    }

    :where(h1, h2, h3):not(.unstyle),
    .h1,
    .h2,
    .h3 {
        letter-spacing: -0.025em
    }

    :where(h1):not(.unstyle),
    .h1 {
        font-size: 3rem;
        line-height: 1.25
    }

    :where(h2):not(.unstyle),
    .h2 {
        font-size: 2.25rem
    }

    :where(h3):not(.unstyle),
    .h3 {
        font-size: 1.75rem;
        line-height: 1.4
    }

    :where(h4):not(.unstyle),
    .h4 {
        font-size: 1rem
    }

    :where(h5):not(.unstyle),
    .h5 {
        font-size: 1rem;
        line-height: 1rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

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

    :where(h6):not(.unstyle),
    .h6 {
        font-size: 0.8125rem;
        line-height: 1.4;
        color: var(--color-brand-content, oklch(68.1% 0.162 75.834))
    }

    /* Paragraphs */
    :where(p):not(.unstyle),
    .paragraph {
        line-height: 1.6;
    }

    /* Links */
    :where(a:not([role=button])):not(.unstyle),
    .link {
        text-align: unset;
        text-decoration: none;
        color: var(--color-content-stark, oklch(43.9% 0 0));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);

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

        &:where(:has([x-icon])) {
            display: inline-flex;
            align-items: center;
            gap: 0.25em
        }
    }

    /* Asides */
    :where(aside):not(.unstyle) {
        padding: calc(var(--spacing, 0.25rem) * 4);
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem)
    }

    /* Badges. Leading is normal so descenders clear the bottom edge, padding
       comes off --spacing rather than ch (0.65ch crowds the first letter), and
       the radius follows --radius instead of a hard pill. The semantic surface
       stays solid: tinting it and keeping --color-field-inverse drops dark-mode
       contrast to ~1.1, and moving to --color-content-stark only reaches ~3. */
    :where(.badge) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
        height: fit-content;
        padding: calc(var(--spacing, 0.25rem) * 0.5) calc(var(--spacing, 0.25rem) * 2);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.25;
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(97% 0 0) 10%, transparent));
        border-radius: calc(var(--radius, 0.5rem) * 0.6);

        /* Solo icons square up, as buttons do. (The old :only-child here keyed
           off the badge's siblings, so an icon badge next to anything got word
           padding.) */
        &[x-icon] {
            padding: calc(var(--spacing, 0.25rem) * 0.5);
            aspect-ratio: 1
        }

        /* Same for a badge wrapping a bare <svg>. Its own rule so the plain
           selector above still lands without :has(). */
        &:has(> svg:only-child) {
            padding: calc(var(--spacing, 0.25rem) * 0.5);
            aspect-ratio: 1
        }
    }

    /* Blockquotes */
    :where(blockquote):not(.unstyle) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: calc(var(--spacing, 0.25rem) * 4) 0;
        padding: 0 calc(var(--spacing, 0.25rem) * 4);
        color: var(--color-content-stark, oklch(43.9% 0 0));
        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 25%, transparent);
        border-inline-end: none;

        & * {
            color: inherit
        }
    }

    /* Code */
    :where(code):not(.unstyle) {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        padding: 0 0.7ch;
        font-size: 82.5%;
        line-height: 1.4;
        word-wrap: break-word;
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
        border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(55.6% 0 0)) 10%, transparent);
        border-radius: var(--radius, 0.5rem);

        &[role=button] {
            cursor: pointer
        }
    }

    /* Captions */
    :where(figcaption):not(.unstyle),
    .caption {
        font-size: 0.8125rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

        & a:not([role=button]) {
            color: inherit;

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

    :where(figure figcaption):not(.unstyle) {
        margin: calc(var(--spacing, 0.25rem) * 2) auto;
        text-align: center
    }

    /* Small text */
    :where(small):not(.unstyle),
    .small {
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(43.9% 0 0));

        & a:not([role=button]) {
            color: inherit;

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

    /* Icons */
    :where([x-icon]) {
        display: inline-flex;
        width: fit-content
    }

    /* Inserted text */
    :where(ins):not(.unstyle) {
        text-decoration: none
    }

    /* Keyboard text */
    :where(kbd):not(.unstyle),
    .kbd {
        display: inline-block;
        vertical-align: baseline;
        width: fit-content;
        min-width: 1.4rem;
        padding: 0.3rem;
        font-family: inherit;
        font-size: 75%;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        color: var(--color-content-neutral, oklch(43.9% 0 0));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5);

        &:not(:last-of-type) {
            margin-inline-end: 1px
        }
    }

    /* RTL keyboard overrides */
    [dir=rtl] :where(kbd:not(:last-of-type), .kbd:not(:last-of-type)) {
        margin-inline-start: 1px;
        margin-inline-end: 0
    }

    /* Labels */
    :where(label):not(.unstyle),
    .label {
        width: fit-content;
        user-select: none
    }

    /* Legends */
    :where(legend):not(.unstyle),
    .legend {
        display: block;
        max-width: 100%;
        white-space: normal
    }

    /* Lists */
    :where(ol):not(.unstyle) {
        list-style-type: decimal;
    }

    :where(ul):not(.unstyle) {
        list-style-type: disc;
    }

    :where(ol):not(.unstyle),
    :where(ul):not(.unstyle) {
        padding-inline-start: 1.75ch;

        &:has(input[type=checkbox]) {
            padding-inline-start: 0
        }

        /* Offset items so markers align inside the element frame  */
        & li {
            padding-inline-start: 1ch;

            /* Space out items */
            &:not(:last-of-type) {
                margin-bottom: 1.25ch
            }

            /* Inline links */
            & a:not(.unstyle),
            & .link {
                text-decoration: underline;
                text-underline-offset: 2px
            }

            /* Allow icons to replace markers */
            &:has([x-icon]) {
                position: relative;
                display: inherit;
                list-style: none;

                & [x-icon] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1.75ch
                }
            }

            /* Checklist items */
            &:has(input[type=checkbox]) {
                position: relative;
                display: inherit;
                list-style: none;

                & input[type=checkbox] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1ch
                }
            }
        }
    }

    :where(nav, menu):not(.unstyle) ul,
    :where(nav, menu):not(.unstyle) ol {
        list-style: none;
        padding: 0;

        & li,
        li:not(:last-of-type) {
            margin: 0;
            padding: 0
        }
    }

    /* RTL list overrides */
    [dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),
    [dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
        & li:has([x-icon]) {
            & [x-icon] {
                left: auto;
                right: -1.75ch
            }
        }

        & li:has(input[type=checkbox]) {
            & input[type=checkbox] {
                left: auto;
                right: -1.25ch
            }
        }
    }

    /* Nested list spacing */
    :where(ol, ul):not(nav ol):not(menu ol):not(.unstyle) ul,
    :where(ol, ul):not(nav ul):not(menu ul):not(.unstyle) ol {
        margin-top: 1ch;
        padding-inline-start: 2.75ch;

        &+li {
            margin-top: 1.5ch
        }
    }

    /* Pre code blocks */
    :where(pre):not(.unstyle) {
        display: flex;
        flex-flow: row wrap;
        font-size: 0.8125rem;
        line-height: 1.7;
        background-color: var(--color-page, oklch(98.5% 0 0));
        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem);
        overflow: hidden;
        tab-size: 4;
        white-space: pre;
        white-space-collapse: preserve;

        &>code {
            flex-grow: 1;
            display: inline-block;
            height: auto;
            padding: calc(var(--spacing, 0.25rem) * 4);
            padding-inline-end: calc(var(--spacing, 0.25rem) * 12);
            font-size: inherit;
            line-height: inherit;
            background-color: transparent;
            border: 0 none;
            box-shadow: none;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;

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

        &:not(:has(code)) {
            padding: calc(var(--spacing, 0.25rem) * 4)
        }
    }
}