/**
 * MB4 Category 6 — Settings page stability on mobile
 * Prevents flicker/jitter/oscillation via GPU layer pinning + contain.
 */

@media (max-width: 768px) {
  .settings-container,
  .settings-panel,
  #settingsPanelOverlay,
  [data-page="settings"] {
    contain: layout style paint !important;
    will-change: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .settings-user-list,
  .settings-user-row,
  .sp-toggle-row,
  .sp-tab {
    transition: opacity 200ms ease, background-color 200ms ease !important;
  }

  /* Kill accidental global "transition: all" animations inside settings */
  .settings-container *,
  .sp-content * {
    animation-name: none !important;
  }

  /* Prevent infinite re-render loops caused by DOM measurement storms */
  #settingsPanelOverlay .sp-shell {
    overflow: hidden !important;
    isolation: isolate;
  }

  /* Lock widths — stops horizontal oscillation from responsive reflow */
  .settings-container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}