:root {
    --a11y-focus: oklch(0.68 0.14 72);
    --a11y-danger: oklch(0.48 0.17 25);
    --a11y-danger-soft: oklch(0.95 0.03 25);
    --a11y-muted-text: oklch(0.43 0.015 275);
    --a11y-muted-text-dark: oklch(0.85 0.01 275);
    --a11y-warning-border: oklch(0.77 0.16 75);
    --a11y-warning-surface: oklch(0.98 0.025 90);
    --a11y-warning-text: oklch(0.38 0.09 65);
    --a11y-warning-action: oklch(0.5 0.12 60);
    --a11y-warning-action-hover: oklch(0.42 0.1 60);
    --a11y-warning-surface-dark: oklch(0.25 0.055 60);
    --a11y-warning-text-dark: oklch(0.95 0.04 90);
    --a11y-target-pwa: 2.75rem;
    --a11y-target-admin: 2.75rem;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:where(button, input, select, textarea, a[href]) {
    touch-action: manipulation;
}

:where(button, input, select, textarea, a[href]):focus-visible {
    outline: 3px solid var(--a11y-focus) !important;
    outline-offset: 3px !important;
}

:where(.app-shell, .shell) :where(button, a[href], input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-block-size: var(--a11y-target-pwa);
}

:where(.fi-body, .fi-layout) :where(button, a[href], input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, [role="button"], [role="link"], [role="tab"]) {
    min-block-size: var(--a11y-target-admin);
}

:where(.app-shell, .shell) :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
    min-block-size: var(--a11y-target-pwa);
}

:where(.fi-body, .fi-layout) :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
    min-block-size: var(--a11y-target-admin);
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--a11y-danger) !important;
    box-shadow: 0 0 0 1px var(--a11y-danger) !important;
}

:where([role="alert"], .form-error):not([hidden]) {
    overflow-wrap: anywhere;
}

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

:where(.fi-ta-content, .fi-section-content, .table-scroll) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

@media (min-width: 40rem) {
    .fi-ta-table .fi-ta-cell:has(.fi-wrapped) {
        min-inline-size: 12rem;
        max-inline-size: 24rem;
    }

    .fi-ta-table .fi-ta-actions-header-cell,
    .fi-ta-table .fi-ta-cell:has(> .fi-ta-actions) {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        border-inline-start: 1px solid var(--insta-border);
        background-color: var(--insta-surface);
    }

    .fi-ta-table .fi-ta-actions-header-cell {
        z-index: 3;
        background-color: var(--insta-surface-muted);
    }
}

:where(.bidi, code, [data-bidi="ltr"]) {
    unicode-bidi: isolate;
}

html[dir="rtl"] :where([dir="ltr"], input[type="email"], input[type="tel"], input[inputmode="numeric"], code, [data-bidi="ltr"]) {
    direction: ltr;
    text-align: start;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

:where(.fi-ta-text-item[dir="ltr"], .bidi-cell) {
    direction: ltr;
    unicode-bidi: isolate;
}

:where(.fi-ta-text-item.break-anywhere, .break-anywhere) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fi-ta-placeholder {
    color: var(--a11y-muted-text) !important;
}

.dark .fi-ta-placeholder {
    color: var(--a11y-muted-text-dark) !important;
}

.impersonation-banner {
    position: sticky;
    inset-block-start: .75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-inline-size: 80rem;
    min-block-size: 3.5rem;
    margin-inline: auto;
    margin-block-end: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--a11y-warning-border);
    border-radius: .75rem;
    background: var(--a11y-warning-surface);
    color: var(--a11y-warning-text);
    box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

.impersonation-banner__title {
    font-weight: 700;
}

.impersonation-banner__meta {
    margin-block-start: .125rem;
    font-size: .875rem;
}

.impersonation-banner__exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--a11y-target-admin);
    padding: .625rem 1rem;
    border-radius: .5rem;
    background: var(--a11y-warning-action);
    color: oklch(0.98 0.004 75);
    font-weight: 700;
    white-space: nowrap;
}

.impersonation-banner__exit:hover {
    background: var(--a11y-warning-action-hover);
}

.dark .impersonation-banner {
    border-color: var(--a11y-warning-border);
    background: var(--a11y-warning-surface-dark);
    color: var(--a11y-warning-text-dark);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :where(button, input, select, textarea, a[href]):focus-visible {
        outline-color: Highlight !important;
    }

    :where([role="alert"], .form-error, .banner, .notice) {
        border: 1px solid CanvasText !important;
    }
}

@media (prefers-contrast: more) {
    :where(.muted, .meta) {
        color: currentColor !important;
    }
}

@media (max-width: 35rem) {
    :where(.fi-body, .fi-layout) :where(button, a[href], input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, [role="button"], [role="link"], [role="tab"]) {
        min-inline-size: var(--a11y-target-admin);
    }

    .fi-sidebar-header-logo-ctn > a[href],
    [data-customer-360] a[href] {
        display: flex;
        min-block-size: 3rem !important;
        min-inline-size: 3rem !important;
    }

    :where(.cluster, .split, .fi-ta-actions) {
        flex-wrap: wrap;
    }

    .impersonation-banner {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .impersonation-banner__exit {
        inline-size: 100%;
        white-space: normal;
    }
}