/* Shared interaction feedback. Keep motion subtle and avoid layout shifts. */
:where(body) :where(a, button, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

:where(body) :where(input, select, textarea) {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:where(body) summary { cursor: pointer; }

:where(body) :where(a, button, summary, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid #5e5bc8;
    outline-offset: 3px;
}

:where(body) :where(a, button, [role="button"]):active {
    filter: brightness(.96);
}

.career-system .career-table tbody tr {
    transition: background-color .18s ease;
}

.career-system details[open] > :not(summary),
.page-faq details[open] > :not(summary) {
    animation: ui-panel-reveal .18s ease-out both;
}

dialog[open] {
    animation: ui-dialog-reveal .2s ease-out both;
}

dialog[open]::backdrop {
    animation: ui-backdrop-reveal .2s ease-out both;
}

@keyframes ui-panel-reveal {
    from { opacity: .55; }
    to { opacity: 1; }
}

@keyframes ui-dialog-reveal {
    from { opacity: .65; }
    to { opacity: 1; }
}

@keyframes ui-backdrop-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    :where(body) :where(a, button, summary, input, select, textarea, [role="button"]),
    .career-system .career-table tbody tr {
        transition: none !important;
    }

    .career-system details[open] > :not(summary),
    .page-faq details[open] > :not(summary),
    dialog[open],
    dialog[open]::backdrop {
        animation: none !important;
    }
}