/* Low-detail mode keeps the DOM sharp while reducing compositor and paint work. */
[data-ui-detail="low"] {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    scroll-behavior: auto;
}

[data-ui-detail="low"] *,
[data-ui-detail="low"] *::before,
[data-ui-detail="low"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.06s !important;
    scroll-behavior: auto !important;
}

/* Replace the displacement graph with one cheap, stable frosted pass. */
[data-ui-detail="low"] .app-header::before,
[data-ui-detail="low"] nav.nav::before,
[data-ui-detail="low"] .app-nav::before,
[data-ui-detail="low"] .nav-indicator::before {
    -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
    backdrop-filter: blur(6px) saturate(115%) !important;
    filter: none !important;
}

[data-ui-detail="low"] .agent-dialog::backdrop,
[data-ui-detail="low"] .scan-source-dialog::backdrop,
[data-ui-detail="low"] .modal-overlay,
[data-ui-detail="low"] .modal,
[data-ui-detail="low"] .weather-overlay,
[data-ui-detail="low"] .weather-panel,
[data-ui-detail="low"] .toast,
[data-ui-detail="low"] .login-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

[data-ui-detail="low"] .card,
[data-ui-detail="low"] .agent-shell,
[data-ui-detail="low"] .record-card,
[data-ui-detail="low"] .rewards-coupon,
[data-ui-detail="low"] .result-card,
[data-ui-detail="low"] .agent-dialog,
[data-ui-detail="low"] .scan-source-dialog,
[data-ui-detail="low"] .modal,
[data-ui-detail="low"] .weather-panel,
[data-ui-detail="low"] .toast,
[data-ui-detail="low"] .login-card {
    box-shadow: none !important;
}

/* Off-screen list items do not need paint work until they approach the viewport. */
[data-ui-detail="low"] .record-card,
[data-ui-detail="low"] .rewards-coupon,
[data-ui-detail="low"] .nearby-recycling-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 160px;
}