/*
 * Overlay syntax paint + CSS Custom Highlight selection.
 *
 * FIND:code-highlight
 * WHY: Syntax colors are a fixed light-dark() palette. Chrome tokens
 * (`--color-primary`) and `color-mix` with `CanvasText` resolve to navy/black
 * on the code background. `::highlight(code-selection)` mirrors host selection.
 */
@layer components {
    .code-highlight-overlay {
        display: block;
        pointer-events: none;
        user-select: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
        /* WHY: gutter lives on the host; JS copies that padding. A second gutter here wraps earlier. */
        box-sizing: border-box;
        color-scheme: inherit;
        color: light-dark(#1f2328, #e6edf3);
        -webkit-text-fill-color: currentColor;
        white-space: pre;
        tab-size: 4;
        z-index: 1;
        visibility: visible;
        opacity: 1;
    }

    .code-highlight-overlay,
    .code-highlight-overlay__gutter,
    .code-highlight-overlay__paint,
    .code-highlight-overlay__paint * {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        font-stretch: inherit;
        font-variant: inherit;
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
        font-kerning: none;
        font-variation-settings: inherit;
        line-height: max(1.35em, var(--code-line-height, 1.45));
        letter-spacing: inherit;
        word-spacing: inherit;
        tab-size: inherit;
        text-rendering: inherit;
        font-synthesis: none;
        -webkit-text-fill-color: currentColor;
    }

    .code-highlight-overlay__gutter {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: var(--code-gutter, 0px);
        text-align: end;
        padding-inline-end: 0.5rem;
        box-sizing: border-box;
        color: light-dark(#656d76, #8b949e);
        white-space: pre;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
    }

    .code-highlight-overlay__paint {
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        white-space: inherit;
        word-break: inherit;
        overflow-wrap: inherit;
        overflow: visible;
    }

    pre:has(> .code-highlight-overlay),
    .code-highlight-host:has(> .code-highlight-overlay) {
        position: relative;
    }

    /* WHY: Capacitor inplace/source-only has no overlay sibling. Overlay-gated
     * `display:block` never applied, so `code` stayed inline and normalize
     * `--color-bg-alt` painted a chip per line box. */
    pre > code,
    pre > .code-highlight-source,
    .code-highlight-source:not(textarea),
    .code-highlight-inplace,
    .code-highlight-source-only {
        display: block !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        border-radius: 0;
        white-space: pre;
        word-break: normal;
        overflow-wrap: normal;
        line-height: max(1.35em, var(--code-line-height, 1.45));
        padding-inline-start: var(--code-gutter, 0px);
        font-variant-ligatures: none;
        font-kerning: none;
        font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
        caret-color: light-dark(#1f2328, #e6edf3);
    }

    /* INVARIANT: never hide source unless overlay paint has glyphs. */
    pre:has(> .code-highlight-painted + .code-highlight-overlay) > code.code-highlight-painted,
    .code-highlight-source.code-highlight-painted:has(+ .code-highlight-overlay),
    .code-highlight-host > .code-highlight-source.code-highlight-painted {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .code-highlight-source.code-highlight-placeholder + .code-highlight-overlay,
    .code-highlight-host > .code-highlight-source.code-highlight-placeholder + .code-highlight-overlay {
        opacity: 0.62;
    }

    /* WHY: `currentColor` fill on the host inherits as a computed color and
     * flattens every hljs span to one ink. Only source-only (no spans) may
     * pin fill; inplace tokens set fill on themselves. */
    .code-highlight-source.code-highlight-source-only {
        color: #e6edf3;
        color: light-dark(#1f2328, #e6edf3);
    }

    .code-highlight-source.code-highlight-inplace {
        color: #e6edf3;
        color: light-dark(#1f2328, #e6edf3);
        -webkit-text-fill-color: unset;
    }

    /* WHY: hljs bold/italic changes advance width vs the plain source caret. */
    .code-highlight-overlay__paint,
    .code-highlight-overlay__paint * {
        font-weight: 400;
        font-style: normal;
        font-synthesis: none;
    }

    pre:has(> .code-highlight-overlay) > code:not(.code-highlight-inplace)::selection,
    .code-highlight-source:not(.code-highlight-inplace)::selection {
        background-color: color-mix(in oklab, #79c0ff 32%, transparent);
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    pre[data-language]:not([data-language=""]) {
        position: relative;
    }

    pre[data-language]:not([data-language=""])::after {
        content: attr(data-language);
        position: absolute;
        inset-block-start: 0.35rem;
        inset-inline-end: 0.5rem;
        z-index: 2;
        padding: 0.1em 0.45em;
        border-radius: var(--radius-xs, 4px);
        font-family: var(--md-font-sans, var(--font-family, sans-serif));
        font-size: 0.7em;
        line-height: 1.2;
        letter-spacing: 0.02em;
        text-transform: lowercase;
        color: light-dark(#656d76, #8b949e);
        background: color-mix(in oklab, var(--md-bg-code, var(--view-code-bg, Canvas)) 70%, transparent);
        pointer-events: none;
    }

    .code-highlight-overlay,
    .code-highlight-inplace {
        [class^="hljs-"],
        [class*=" hljs-"] {
            /* WHY: Capacitor WebView paints fill, not `color`, on inherited text. */
            -webkit-text-fill-color: currentColor;
        }

        .hljs-comment,
        .hljs-quote {
            color: #8b949e;
            color: light-dark(#656d76, #8b949e);
        }

        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-literal,
        .hljs-built_in {
            color: #79c0ff;
            color: light-dark(#0550ae, #79c0ff);
        }

        .hljs-string,
        .hljs-addition,
        .hljs-attr {
            color: #a5d6ff;
            color: light-dark(#0a3069, #a5d6ff);
        }

        .hljs-number,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-type {
            color: #3fb950;
            color: light-dark(#116329, #3fb950);
        }

        .hljs-title,
        .hljs-title.function_,
        .hljs-section,
        .hljs-name {
            color: #79c0ff;
            color: light-dark(#0550ae, #79c0ff);
        }

        .hljs-property,
        .hljs-attribute,
        .hljs-selector-class,
        .hljs-selector-id {
            color: #7ee787;
            color: light-dark(#116329, #7ee787);
        }

        .hljs-meta,
        .hljs-doctag,
        .hljs-punctuation,
        .hljs-operator,
        .hljs-tag {
            color: #c9d1d9;
            color: light-dark(#656d76, #c9d1d9);
        }

        .hljs-deletion {
            color: #ffa198;
            color: light-dark(#cf222e, #ffa198);
        }

        .hljs-emphasis,
        .hljs-strong {
            color: inherit;
        }
    }
}

@layer overrides {
    ::highlight(code-selection) {
        background-color: color-mix(in oklab, #79c0ff 32%, transparent);
        color: inherit;
    }

    /* WHY: Android RAW is source-only (no overlay / no innerHTML). Token ink
     * is CSS Custom Highlight on the plain text node — caret stays synced. */
    ::highlight(hljs-comment),
    ::highlight(hljs-quote) {
        color: #8b949e;
    }

    ::highlight(hljs-keyword),
    ::highlight(hljs-selector-tag),
    ::highlight(hljs-literal),
    ::highlight(hljs-built_in),
    ::highlight(hljs-title),
    ::highlight(hljs-section),
    ::highlight(hljs-name) {
        color: #79c0ff;
    }

    ::highlight(hljs-string),
    ::highlight(hljs-addition),
    ::highlight(hljs-attr) {
        color: #a5d6ff;
    }

    ::highlight(hljs-number),
    ::highlight(hljs-variable),
    ::highlight(hljs-template-variable),
    ::highlight(hljs-type) {
        color: #3fb950;
    }

    ::highlight(hljs-property),
    ::highlight(hljs-attribute),
    ::highlight(hljs-selector-class),
    ::highlight(hljs-selector-id) {
        color: #7ee787;
    }

    ::highlight(hljs-meta),
    ::highlight(hljs-doctag),
    ::highlight(hljs-punctuation),
    ::highlight(hljs-operator),
    ::highlight(hljs-tag) {
        color: #c9d1d9;
    }

    ::highlight(hljs-deletion) {
        color: #ffa198;
    }

    /* WHY: screen paint is a transparent source + overlay. Print drops the
     * overlay and must show the source glyphs or fenced/RAW blocks are blank. */
    @media print {
        .code-highlight-overlay {
            display: none !important;
        }

        pre:has(> .code-highlight-overlay) > code,
        .code-highlight-source,
        .code-highlight-source.code-highlight-painted,
        .code-highlight-host > .code-highlight-source,
        pre[data-raw-target] > code {
            color: #111 !important;
            -webkit-text-fill-color: #111 !important;
        }
    }
}