{{ define "head" }}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark light">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="theme-color" id="theme-color">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Resource hints for external domains -->
    <link rel="preconnect" href="https://imgs.blue" crossorigin>
    <link rel="dns-prefetch" href="https://imgs.blue">

    <!-- Preload critical assets. Font list is discovered from the public FS
         at startup so renaming a .woff2 doesn't silently 404. -->
    <link rel="preload" href="/icons.svg" as="image" type="image/svg+xml">
    {{ range fontPreloads }}
    <link rel="preload" href="{{ . }}" as="font" type="font/woff2" crossorigin>
    {{ end }}

    <!-- Theme: apply early to prevent flash -->
    <script>
    (function() {
        function getEffectiveTheme(pref) {
            if (pref === 'dark') return 'dark';
            if (pref === 'light') return 'light';
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }

        function updateThemeColor() {
            var meta = document.getElementById('theme-color');
            if (!meta) return;
            var bg = getComputedStyle(document.documentElement).getPropertyValue('--color-base-100').trim();
            if (bg) {
                meta.setAttribute('content', bg);
                return true;
            }
            return false;
        }

        // On cold load the stylesheet may not be parsed when this script
        // runs, so --color-base-100 resolves empty. Retry on rAF until we
        // get a real value, and again on the load event as a final safety
        // net. Also re-run on system preference changes.
        function scheduleThemeColorUpdate() {
            if (updateThemeColor()) return;
            requestAnimationFrame(function() {
                if (updateThemeColor()) return;
                window.addEventListener('load', updateThemeColor, { once: true });
            });
        }

        var pref = localStorage.getItem('theme') || 'system';
        var effective = getEffectiveTheme(pref);
        document.documentElement.classList.toggle('dark', effective === 'dark');
        document.documentElement.setAttribute('data-theme', effective);

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', scheduleThemeColorUpdate);
        } else {
            scheduleThemeColorUpdate();
        }

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', scheduleThemeColorUpdate);
    })();
    </script>

    <!-- Tailwind CSS (built via npm run css:build) -->
    <link rel="stylesheet" href="/css/style.css?v={{ assetHash "css/style.css" }}">
    {{ extraCSS }}

    <!-- Bundled JS: HTMX + Actor Typeahead + App -->
    <script type="module" src="/js/bundle.min.js?v={{ assetHash "js/bundle.min.js" }}"></script>
{{ end }}