/*
 * IntelliSee interaction states.
 *
 * Standardizes focus, hover, and active treatment across interactive
 * elements so behavior feels predictable everywhere — and adds an
 * accessible, brand-aligned focus ring (gold) on every focusable
 * surface that doesn't already define one.
 *
 * Specificity strategy: most rules use :where() to keep specificity at
 * zero so feature-scoped CSS continues to win. The keyboard-only ring
 * is the one global default that should NOT be overridden carelessly.
 */

@layer base {

    /* ----- Universal keyboard focus ring ----------------------------- */
    /* Gold focus ring on any element that takes keyboard focus. Mouse
       focus is intentionally suppressed via :focus-visible so the ring
       only appears for keyboard users — matching modern UX expectations.
       Specificity is zero (no :where() because we want this to be the
       documented default; pages can opt out by setting outline:none on
       a more-specific selector). */
    :focus-visible {
        outline: 2px solid var(--macc-focus-border);
        outline-offset: 2px;
        border-radius: var(--macc-radius-sm, 4px);
    }

    /* Form controls already have their own focus border + ring inside
       the input box. Avoid double-ringing them by trimming the outer
       outline; the existing token-driven border/box-shadow handles it. */
    :where(
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [contenteditable]:focus-visible
    ) {
        outline-offset: 0;
    }

    /* Suppress the ring when the element is *also* hovered with a
       pointing device — keyboard ring is the priority. (Hover focus
       falls back to focus, which doesn't trigger :focus-visible.) */
}

@layer components {

    /* ----- Links ----------------------------------------------------- */
    /* Quiet underline on hover, subtle color shift. Pages that already
       style links retain their look (we use :where + bare selector). */
    :where(a:not(.btn):not(.nav-link):not(.macc-card--interactive)) {
        color: var(--macc-link, var(--macc-text-soft));
        text-decoration: none;
        transition: color 120ms ease;
    }

    :where(a:not(.btn):not(.nav-link):not(.macc-card--interactive)):hover {
        color: var(--macc-link-hover, var(--macc-text-emphasis));
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }

    /* ----- Buttons --------------------------------------------------- */
    /* Subtle press-down on active (mouse-down). Already-styled hover
       states from primitives remain authoritative. */
    :where(.btn):active:not(:disabled):not(.disabled) {
        transform: translateY(1px);
    }

    @media (prefers-reduced-motion: reduce) {
        :where(.btn):active:not(:disabled):not(.disabled) {
            transform: none;
        }
    }

    /* ----- Table rows ------------------------------------------------ */
    /* Predictable hover on body rows. Pages can disable via .table--quiet
       or by setting a more-specific rule. Skips header rows. */
    :where(.table:not(.macc-table) tbody tr:not(.macc-row-disabled):not(.disabled)) {
        transition: background-color 120ms ease;
    }

    :where(.table:not(.macc-table) tbody tr:not(.macc-row-disabled):not(.disabled)):hover {
        background-color: var(--macc-grid-row-hover, var(--macc-hover));
    }

    /* Selected row treatment — additive class .is-selected. */
    :where(.table:not(.macc-table) tbody tr.is-selected) {
        background-color: var(--macc-grid-row-selected, var(--macc-hover));
    }

    /* ----- Interactive list items ----------------------------------- */
    /* Drop-in hover for nav lists, dropdown items, etc. Uses :where
       so existing component CSS still wins. */
    :where(.list-group-item-action, .dropdown-item):hover,
    :where(.list-group-item-action, .dropdown-item):focus-visible {
        background-color: var(--macc-hover);
        color: var(--macc-text-emphasis);
    }

    /* ----- Pressable surface (.macc-pressable) ---------------------- */
    /* Add .macc-pressable to any element that should react like a
       button (sidebar items, custom rows, tile cards). Combines hover
       tint, focus ring, and active press. */
    .macc-pressable {
        cursor: pointer;
        transition:
            background-color 120ms ease,
            color 120ms ease,
            transform 120ms ease;
    }

    .macc-pressable:hover {
        background-color: var(--macc-hover);
    }

    .macc-pressable:active:not(:disabled):not(.disabled) {
        transform: translateY(1px);
    }

    .macc-pressable.is-active {
        background-color: var(--macc-surface-3, var(--macc-hover));
        color: var(--macc-text-emphasis);
    }

    .macc-pressable[aria-disabled="true"],
    .macc-pressable:disabled,
    .macc-pressable.disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    @media (prefers-reduced-motion: reduce) {
        .macc-pressable,
        .macc-pressable:active {
            transition: none;
            transform: none;
        }
    }

    /* ----- Disabled affordance (consistent across surfaces) --------- */
    /* For elements that lack a native :disabled selector. */
    :where([aria-disabled="true"]:not(button):not(input):not(select):not(textarea)) {
        cursor: not-allowed;
        opacity: 0.55;
        pointer-events: none;
    }
}