/* Visual polish on top of the Nord themes: button glow, nav gradient, ambient background, tinted
   cards, gradient progress bars, row hover and a drifting env banner. Every colour comes from Nord
   tokens, so light and dark need no separate rules.

   Everything sits under :where(), which adds no specificity: a page-specific rule such as the
   green completed mapping bar in site.css always beats it. The high-contrast themes are left
   untouched; site.js keeps data-theme-applied in step with the theme picker. */

@property --sync-sheen {
    syntax: "<percentage>";
    inherits: true;
    initial-value: -60%;
}

@keyframes sync-env-drift {
    to {
        background-position: -200% 0;
    }
}

:where(:root:not([data-theme-applied$="_high"])) {
    /* --n-color-text-link is the accent in light and a brighter blue in dark, where the accent
       itself is too dim to read as a glow. */
    --sync-glow: var(--n-color-text-link);
    --sync-violet: rgb(124 92 255);
    --sync-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Resolved here, so it still holds the theme's colour where a tab group clears it below. */
    --sync-border-strong: var(--n-color-border-strong);

    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--n-color-text) 25%, transparent) transparent;

    & ::selection {
        background: color-mix(in srgb, var(--sync-glow) 30%, transparent);
    }

    /* Buttons. The sidebar's own buttons (search, notifications, user menu) stay flat. */
    & nord-button:not(nord-navigation nord-button) {
        border-radius: var(--n-border-radius-s);
        transition:
            filter 0.25s var(--sync-ease),
            transform 0.25s var(--sync-ease);
    }

    /* Primary: a light sheen sweeps across once per hover, over a soft diagonal gradient. The
       sheen snaps back instantly on leave so the next hover sweeps again. */
    & nord-button[variant="primary"] {
        --n-button-gradient:
            linear-gradient(
                110deg,
                transparent calc(var(--sync-sheen) - 18%),
                rgb(255 255 255 / 0.35) var(--sync-sheen),
                transparent calc(var(--sync-sheen) + 18%)
            ),
            linear-gradient(
                135deg,
                rgb(255 255 255 / 0.16),
                rgb(255 255 255 / 0) 55%,
                color-mix(in srgb, var(--sync-violet) 30%, transparent)
            );
        transition:
            filter 0.25s var(--sync-ease),
            transform 0.25s var(--sync-ease),
            --sync-sheen 0s;
    }

    & nord-button[variant="primary"]:hover:not([disabled]) {
        --sync-sheen: 160%;
        filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--sync-glow) 75%, transparent));
        transform: translateY(-1px);
        transition:
            filter 0.25s var(--sync-ease),
            transform 0.25s var(--sync-ease),
            --sync-sheen 0.8s var(--sync-ease);
    }

    & nord-button[variant="danger"]:hover:not([disabled]) {
        filter: drop-shadow(
            0 6px 18px color-mix(in srgb, var(--n-color-status-danger) 60%, transparent)
        );
        transform: translateY(-1px);
    }

    & nord-button:is(:not([variant]), [variant="default"]):not(nord-navigation nord-button):hover:not([disabled]) {
        --n-button-border-color: color-mix(in srgb, var(--sync-glow) 65%, var(--n-color-border));
        filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--sync-glow) 35%, transparent));
    }

    /* Navigation. A parent item is skipped: a filter would trap its fixed-position rail flyout. */
    & nord-nav-item[active]:not(:has(> [slot="subnav"])) {
        --n-nav-item-background-active: linear-gradient(
            120deg,
            var(--n-color-accent),
            color-mix(in oklch, var(--sync-glow) 70%, var(--sync-violet))
        );
        filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--sync-glow) 55%, transparent));
    }

    & .sync-brand {
        background: linear-gradient(95deg, var(--n-color-text) 20%, var(--sync-glow));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    & .sync-logo {
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sync-glow) 45%, transparent));
    }

    /* Two faint glows fixed to the viewport, so the nav and the main column share them. */
    & nord-layout {
        --n-layout-background-color:
            radial-gradient(
                70rem 40rem at 90% 5%,
                color-mix(in srgb, var(--sync-glow) 18%, transparent),
                transparent 70%
            ) fixed,
            radial-gradient(
                56rem 34rem at 20% 100%,
                color-mix(in srgb, var(--sync-violet) 13%, transparent),
                transparent 70%
            ) fixed,
            var(--n-color-background);
    }

    & nord-card {
        --n-card-box-shadow:
            0 0 0 1px var(--n-color-border),
            0 1px 2px rgb(0 0 0 / 0.04),
            0 14px 32px -16px color-mix(in srgb, var(--sync-glow) 50%, transparent);
        --n-card-header-background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--sync-glow) 13%, transparent),
            transparent
        );
    }

    /* Nord fills the tab strip with the surface colour across the full width, while the cards
       in the panel are inset, so on the ambient background it read as a wider, unmatched card.
       Unfilled, the tabs sit on the page like the header does. Nord has no public token for
       this; tests/test_polish_css.py catches a rename on upgrade. The fill also masked the
       strip's scroll-edge indicators, which are drawn in border-strong, so that is cleared for
       the tab group's own shadow root and restored for everything slotted into it. A sticky
       strip keeps its fill, since content scrolls underneath it. */
    & nord-tab-group:not([sticky]) {
        --_n-tab-group-list-background: transparent;
        --n-color-border-strong: transparent;
    }

    & nord-tab-group:not([sticky]) > * {
        --n-color-border-strong: var(--sync-border-strong);
    }

    & nord-progress-bar {
        --n-progress-color: linear-gradient(
            90deg,
            var(--n-color-accent),
            color-mix(in oklch, var(--sync-glow) 70%, var(--sync-violet))
        );
    }

    & nord-table tbody tr {
        transition: background-color 0.15s var(--sync-ease);
    }

    & nord-table tbody tr:hover {
        background-color: color-mix(in srgb, var(--sync-glow) 7%, transparent);
    }

    & :is(nord-input, nord-select, nord-textarea) {
        transition: filter 0.2s var(--sync-ease);
    }

    & :is(nord-input, nord-select, nord-textarea):focus-within {
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sync-glow) 40%, transparent));
    }

    & nord-modal {
        --n-color-overlay: radial-gradient(
            circle at 50% 15%,
            color-mix(in srgb, var(--sync-glow) 25%, rgb(0 0 0 / 0.35)),
            rgb(0 0 0 / 0.62)
        );
    }

    /* base.html gives each stage a gradient whose first and last stops match, so the tile
       repeats without a seam. */
    & .env-banner {
        background-size: 200% 100%;
        animation: sync-env-drift 10s linear infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(:root) nord-button {
        transform: none !important;
        transition: none !important;
    }

    :where(:root) .env-banner {
        animation: none !important;
    }
}