/* EasyProxy shared UI layer.
   Loaded after each page's inline <style>, so every selector here uses :where()
   (specificity 0): page styles always win, this only fills the gaps.
   Motion tokens follow the transitions.dev scale. */

:root {
    --ep-nav-h: 52px;

    --ep-duration-micro: 80ms;
    --ep-duration-quick: 150ms;
    --ep-duration-fast: 250ms;
    --ep-duration-medium: 350ms;
    --ep-duration-slow: 400ms;
    --ep-duration-very-slow: 500ms;

    --ep-ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ep-ease-out: ease-out;
    --ep-ease-linear: linear;
}

/* Focus: no panel defines :focus-visible, so keyboard users get no ring. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
    outline: 2px solid var(--accent-primary, #818cf8);
    outline-offset: 2px;
}

:where(:focus:not(:focus-visible)) {
    outline: none;
}

/* Motion: no template honours the OS setting. */
@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scrolling: smooth anchors, offset under the fixed .ep-nav, themed scrollbars. */
:where(html) {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ep-nav-h) + 16px);
}

:where(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--border-accent, rgba(255, 255, 255, 0.15)) transparent;
}

:where(*::-webkit-scrollbar) {
    width: 10px;
    height: 10px;
}

:where(*::-webkit-scrollbar-track) {
    background: transparent;
}

:where(*::-webkit-scrollbar-thumb) {
    background: var(--surface-elevated, rgba(255, 255, 255, 0.12));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

:where(*::-webkit-scrollbar-thumb:hover) {
    background: var(--border-accent, rgba(255, 255, 255, 0.24));
    background-clip: content-box;
}

:where(:target) {
    scroll-margin-top: calc(var(--ep-nav-h) + 16px);
}

/* Forms: no panel sets accent-color, placeholder contrast or tap behaviour. */
:where(::placeholder) {
    color: var(--text-secondary, #a1a1aa);
    opacity: 1;
}

:where(input, select, textarea) {
    accent-color: var(--accent-primary, #6366f1);
    touch-action: manipulation;
}

:where(textarea) {
    resize: vertical;
}

:where(button, [role="button"], summary, a) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:where(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.6;
}

:where([aria-busy="true"]) {
    cursor: progress;
}

/* Text selection is invisible on the dark palette today. */
:where(::selection) {
    background: var(--accent-primary, #6366f1);
    color: #fff;
}

:where(abbr[title]) {
    text-decoration: underline dotted;
    cursor: help;
}

/* Interaction: colour/transform changes snap instead of easing on the token scale. */
:where(a, button, [role="button"], summary, .btn, .card, .glass-card) {
    transition: background-color var(--ep-duration-quick) var(--ep-ease-smooth-out),
        border-color var(--ep-duration-quick) var(--ep-ease-smooth-out),
        color var(--ep-duration-quick) var(--ep-ease-smooth-out),
        box-shadow var(--ep-duration-fast) var(--ep-ease-smooth-out),
        transform var(--ep-duration-fast) var(--ep-ease-smooth-out);
}

@media (hover: hover) and (pointer: fine) {
    :where(.card, .glass-card):hover {
        transform: translateY(-2px);
    }
}

/* ponytail: no sticky <thead> here — it needs per-page background/offset checks.
   Add when a panel with long tables asks for it. */

:where(.sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}