/*
 * Project styling that sits on top of Unfold.
 *
 * A stylesheet rather than a shadowed template: these rules apply to every tab
 * bar in the application at once, and nothing here has to be re-synced against
 * Unfold's markup when the package is upgraded.
 *
 * Registered via UNFOLD["STYLES"] in settings.py.
 */

/* --- Selected tab -------------------------------------------------------
 *
 * Unfold marks the active tab with a white pill and a very faint shadow, which
 * on the dark theme is nearly the same value as its neighbours — the selected
 * tab was hard to pick out at a glance.
 *
 * This borrows the language the sidebar already uses for "you are here":
 * accent colour and heavier weight. Colours come from Unfold's own theme
 * variables, so they follow UNFOLD["COLORS"] and stay correct if the accent is
 * ever rebranded, rather than freezing today's purple into a stylesheet.
 *
 * #tabs-items > .active outranks Unfold's single-class utilities, so the
 * box-shadow below replaces theirs instead of fighting it — which is why the
 * original elevation is restated here alongside the new underline.
 *
 * The underline is an inset shadow, not a border: a border would add 2px to
 * the element and shift every tab as the selection moved.
 */
#tabs-items > .active {
    color: var(--color-primary-600);
    font-weight: 600;
    box-shadow:
        inset 0 -2px 0 0 var(--color-primary-600),
        0 1px 2px 0 rgb(0 0 0 / 0.06);
}

/* Hover must not wash the accent back out to the default text colour. */
#tabs-items > .active:hover {
    color: var(--color-primary-600);
}

.dark #tabs-items > .active,
.dark #tabs-items > .active:hover {
    /* One step lighter on dark, matching the sidebar's active row. */
    color: var(--color-primary-500);
    box-shadow: inset 0 -2px 0 0 var(--color-primary-500);
}

/* The overflow dropdown lists the same tabs; keep the selected one consistent. */
#tabs-dropdown > .active {
    color: var(--color-primary-600);
    font-weight: 600;
}

.dark #tabs-dropdown > .active {
    color: var(--color-primary-500);
}

/* Respect a reduced-motion preference for the colour transition Unfold applies. */
@media (prefers-reduced-motion: reduce) {
    #tabs-items > a {
        transition: none;
    }
}