/**
 * Enhanced Objects Styles - Modern Support for Visual Engine UI Components
 * Comprehensive styling for enhanced interactive objects and their containers
 * with accessibility and performance optimizations
 */

/* ===== CSS CUSTOM PROPERTIES FOR ENHANCED OBJECTS ===== */
:root {
  /* Enhanced Objects Color System */
  --enhanced-bg-primary: var(--color-gray-50, #f9f9f9);
  --enhanced-bg-secondary: var(--color-white, #ffffff);
  --enhanced-border: var(--color-gray-300, #d1d5db);
  --enhanced-border-focus: var(--color-primary, #007cba);
  --enhanced-text-primary: var(--color-gray-900, #111827);
  --enhanced-text-secondary: var(--color-gray-600, #6b7280);
  --enhanced-text-muted: var(--color-gray-500, #9ca3af);

  /* Enhanced Objects Shadows */
  --enhanced-shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --enhanced-shadow-md: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  --enhanced-shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  --enhanced-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Enhanced Objects Spacing */
  --enhanced-gap-sm: var(--spacing-2, 8px);
  --enhanced-gap-md: var(--spacing-4, 16px);
  --enhanced-gap-lg: var(--spacing-6, 24px);
  --enhanced-padding-sm: var(--spacing-3, 12px);
  --enhanced-padding-md: var(--spacing-5, 20px);
  --enhanced-padding-lg: var(--spacing-8, 32px);

  /* Enhanced Objects Border Radius */
  --enhanced-radius-sm: var(--radius-base, 4px);
  --enhanced-radius-md: var(--radius-lg, 8px);
  --enhanced-radius-lg: var(--radius-xl, 12px);

  /* Enhanced Objects Transitions */
  --enhanced-transition-fast: var(--transition-fast, 150ms ease-in-out);
  --enhanced-transition-base: var(--transition-base, 250ms ease-in-out);
  --enhanced-transition-slow: var(--transition-slow, 350ms ease-in-out);

  /* Enhanced Objects Typography */
  --enhanced-font-size-xs: var(--font-size-xs, 0.75rem);
  --enhanced-font-size-sm: var(--font-size-sm, 0.875rem);
  --enhanced-font-size-base: var(--font-size-base, 1rem);
  --enhanced-font-size-lg: var(--font-size-lg, 1.125rem);
  --enhanced-font-size-xl: var(--font-size-xl, 1.25rem);

  /* Enhanced Objects Z-Index */
  --enhanced-z-base: 1;
  --enhanced-z-tooltip: 1000;
  --enhanced-z-modal: 2000;

  /* Touch Targets */
  --enhanced-touch-target: 44px;

  /* Focus Ring */
  --enhanced-focus-ring: 2px solid var(--enhanced-border-focus);
  --enhanced-focus-offset: 2px;
}

/* ===== ENHANCED ETHICS METERS ===== */
.enhanced-ethics-meters {
  display: flex;
  flex-direction: column;
  gap: var(--enhanced-gap-md);
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  padding: var(--enhanced-padding-md);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
  contain: layout style;
  position: relative;
}

.enhanced-ethics-meters:hover {
  box-shadow: var(--enhanced-shadow-md);
  border-color: var(--enhanced-border-focus);
}

.enhanced-ethics-meters:focus-within {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.ethics-meters-header {
  text-align: center;
  margin-bottom: var(--enhanced-gap-sm);
}

.ethics-meters-header h3 {
  margin: 0 0 var(--spacing-1, 4px) 0;
  color: var(--enhanced-text-primary);
  font-size: var(--enhanced-font-size-xl);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
}

.ethics-meters-header p {
  margin: 0;
  color: var(--enhanced-text-secondary);
  font-size: var(--enhanced-font-size-sm);
  line-height: var(--line-height-normal, 1.5);
}

.meters-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  position: relative;
}

.meters-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--enhanced-radius-sm);
}

/* Loading State for Ethics Meters */
.enhanced-ethics-meters.loading {
  pointer-events: none;
}

.enhanced-ethics-meters.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--enhanced-border);
  border-top: 3px solid var(--enhanced-border-focus);
  border-radius: 50%;
  animation: enhanced-spin 1s linear infinite;
  z-index: var(--enhanced-z-tooltip);
}

@keyframes enhanced-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Error State for Ethics Meters */
.enhanced-ethics-meters.error {
  border-color: var(--color-error, #ef4444);
  background: rgba(239, 68, 68, 0.05);
}

.enhanced-ethics-meters.error .ethics-meters-header h3 {
  color: var(--color-error, #ef4444);
}

.enhanced-ethics-meters.error::before {
  content: '⚠';
  position: absolute;
  top: var(--enhanced-padding-sm);
  right: var(--enhanced-padding-sm);
  color: var(--color-error, #ef4444);
  font-size: var(--enhanced-font-size-lg);
  z-index: var(--enhanced-z-base);
}

/* ===== ENHANCED ACTION BUTTONS ===== */
.enhanced-actions {
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  padding: var(--enhanced-padding-md);
  box-shadow: var(--enhanced-shadow-sm);
  contain: layout style;
  position: relative;
}

.actions-header {
  text-align: center;
  margin-bottom: var(--enhanced-gap-md);
}

.actions-header h3 {
  margin: 0;
  color: var(--enhanced-text-primary);
  font-size: var(--enhanced-font-size-lg);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
}

.actions-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--enhanced-gap-md);
  flex-wrap: wrap;
}

/* ===== ENHANCED SIMULATION SLIDERS ===== */
.enhanced-simulation-sliders {
  margin: var(--enhanced-gap-lg) 0;
  padding: var(--enhanced-padding-md);
  background: var(--enhanced-bg-primary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
  contain: layout style;
  position: relative;
}

.enhanced-simulation-sliders:hover {
  box-shadow: var(--enhanced-shadow-md);
  border-color: var(--enhanced-border-focus);
}

.enhanced-simulation-sliders:focus-within {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.enhanced-simulation-sliders h3 {
  margin: 0 0 var(--enhanced-gap-md) 0;
  color: var(--enhanced-text-primary);
  font-size: var(--enhanced-font-size-lg);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  line-height: var(--line-height-tight, 1.25);
}

.slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--enhanced-gap-sm);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--enhanced-gap-sm);
  padding: var(--enhanced-gap-sm) 0;
}

.slider-label {
  color: var(--enhanced-text-secondary);
  font-size: var(--enhanced-font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  min-width: 120px;
  flex-shrink: 0;
}

.slider-input {
  flex: 1;
  min-height: var(--enhanced-touch-target);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: var(--enhanced-radius-sm);
  outline: none;
  transition: all var(--enhanced-transition-fast);
}

.slider-input::-webkit-slider-track {
  background: var(--enhanced-border);
  height: 6px;
  border-radius: 3px;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--enhanced-border-focus);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-fast);
}

.slider-input::-webkit-slider-thumb:hover {
  box-shadow: var(--enhanced-shadow-md);
  transform: scale(1.1);
}

.slider-input::-moz-range-track {
  background: var(--enhanced-border);
  height: 6px;
  border-radius: 3px;
  border: none;
}

.slider-input::-moz-range-thumb {
  background: var(--enhanced-border-focus);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-fast);
}

.slider-input::-moz-range-thumb:hover {
  box-shadow: var(--enhanced-shadow-md);
  transform: scale(1.1);
}

.slider-input:focus-visible::-webkit-slider-thumb {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.slider-input:focus-visible::-moz-range-thumb {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.slider-value {
  color: var(--enhanced-text-primary);
  font-size: var(--enhanced-font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  min-width: 60px;
  text-align: right;
  padding: var(--spacing-1, 4px) var(--enhanced-gap-sm);
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-sm);
}

/* Legacy Support */
.simulation-sliders {
  margin: var(--enhanced-gap-lg) 0;
  padding: var(--enhanced-padding-md);
  background: var(--enhanced-bg-primary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
  contain: layout style;
  position: relative;
}

/* ===== ENHANCED SIMULATION CARDS ===== */
.enhanced-sim-button {
  position: relative;
  overflow: hidden;
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-md);
  padding: var(--enhanced-padding-sm) var(--enhanced-padding-md);
  color: var(--enhanced-text-primary);
  font-size: var(--enhanced-font-size-base);
  font-weight: var(--font-weight-medium, 500);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--enhanced-touch-target);
  cursor: pointer;
  transition: all var(--enhanced-transition-base);
  contain: layout style;
  /* Prevent accidental selection */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.enhanced-sim-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--enhanced-shadow-hover);
  border-color: var(--enhanced-border-focus);
  background: var(--enhanced-bg-primary);
}

.enhanced-sim-button:active {
  transform: translateY(0);
  box-shadow: var(--enhanced-shadow-sm);
}

.enhanced-sim-button:focus-visible {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.enhanced-sim-button:disabled,
.enhanced-sim-button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Ripple effect for enhanced sim buttons */
.enhanced-sim-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width var(--enhanced-transition-slow),
    height var(--enhanced-transition-slow);
  pointer-events: none;
}

.enhanced-sim-button:active::after {
  width: 300px;
  height: 300px;
}

/* Button variants */
.enhanced-sim-button.primary {
  background: var(--color-primary, #007cba);
  color: var(--color-white, #ffffff);
  border-color: var(--color-primary, #007cba);
}

.enhanced-sim-button.primary:hover {
  background: var(--color-primary-dark, #005a8a);
  border-color: var(--color-primary-dark, #005a8a);
}

.enhanced-sim-button.secondary {
  background: var(--color-secondary, #6b7280);
  color: var(--color-white, #ffffff);
  border-color: var(--color-secondary, #6b7280);
}

.enhanced-sim-button.secondary:hover {
  background: var(--color-secondary-dark, #4b5563);
  border-color: var(--color-secondary-dark, #4b5563);
}

.enhanced-sim-button.danger {
  background: var(--color-error, #ef4444);
  color: var(--color-white, #ffffff);
  border-color: var(--color-error, #ef4444);
}

.enhanced-sim-button.danger:hover {
  background: var(--color-error-dark, #dc2626);
  border-color: var(--color-error-dark, #dc2626);
}

/* Button sizes */
.enhanced-sim-button.small {
  padding: var(--enhanced-gap-sm) var(--enhanced-padding-sm);
  font-size: var(--enhanced-font-size-sm);
  min-height: 36px;
}

.enhanced-sim-button.large {
  padding: var(--enhanced-padding-md) var(--enhanced-padding-lg);
  font-size: var(--enhanced-font-size-lg);
  min-height: 52px;
}

/* Icon support */
.enhanced-sim-button .icon {
  margin-right: var(--enhanced-gap-sm);
  font-size: 1.2em;
}

.enhanced-sim-button.icon-only {
  width: var(--enhanced-touch-target);
  padding: var(--enhanced-gap-sm);
}

.enhanced-sim-button.icon-only .icon {
  margin: 0;
}

/* ===== VISUAL ENGINE CANVAS CONTAINERS ===== */
.enhanced-visual-engine-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--enhanced-gap-md) 0;
  padding: var(--enhanced-padding-sm);
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
  contain: layout style;
  position: relative;
}

.enhanced-visual-engine-container:hover {
  box-shadow: var(--enhanced-shadow-md);
  border-color: var(--enhanced-border-focus);
}

.enhanced-visual-engine-container:focus-within {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.enhanced-visual-engine-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--enhanced-radius-md);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
  display: block;
}

.enhanced-visual-engine-container canvas:hover {
  box-shadow: var(--enhanced-shadow-md);
}

.enhanced-visual-engine-container canvas:focus {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

/* Canvas loading state */
.enhanced-visual-engine-container.loading {
  pointer-events: none;
}

.enhanced-visual-engine-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--enhanced-border);
  border-top: 3px solid var(--enhanced-border-focus);
  border-radius: 50%;
  animation: enhanced-spin 1s linear infinite;
  z-index: var(--enhanced-z-tooltip);
}

/* Canvas error state */
.enhanced-visual-engine-container.error {
  border-color: var(--color-error, #ef4444);
  background: rgba(239, 68, 68, 0.05);
}

.enhanced-visual-engine-container.error::before {
  content: '⚠ Canvas Error';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-error, #ef4444);
  font-size: var(--enhanced-font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  text-align: center;
  background: var(--enhanced-bg-secondary);
  padding: var(--enhanced-padding-sm);
  border-radius: var(--enhanced-radius-sm);
  border: 1px solid var(--color-error, #ef4444);
  z-index: var(--enhanced-z-base);
}

/* Canvas accessibility */
.enhanced-visual-engine-container canvas[role='img'] {
  cursor: pointer;
}

.enhanced-visual-engine-container canvas[aria-hidden='true'] {
  pointer-events: none;
}

/* Legacy support */
.visual-engine-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--enhanced-gap-md) 0;
  padding: var(--enhanced-padding-sm);
  background: var(--enhanced-bg-secondary);
  border: 1px solid var(--enhanced-border);
  border-radius: var(--enhanced-radius-lg);
  box-shadow: var(--enhanced-shadow-sm);
  transition: all var(--enhanced-transition-base);
}

.visual-engine-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--enhanced-radius-md);
  box-shadow: var(--enhanced-shadow-sm);
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders,
  .enhanced-sim-button,
  .enhanced-visual-engine-container,
  .enhanced-sim-button::after,
  .slider-input::-webkit-slider-thumb,
  .slider-input::-moz-range-thumb {
    transition: none;
    animation: none;
  }

  .enhanced-sim-button:hover {
    transform: none;
  }

  .enhanced-sim-button:active {
    transform: none;
  }

  .enhanced-sim-button:active::after {
    width: 0;
    height: 0;
  }

  @keyframes enhanced-spin {
    to {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }

  @keyframes loading-shimmer {
    0%,
    100% {
      transform: translateX(0);
    }
  }
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders {
    gap: var(--enhanced-gap-sm);
    padding: var(--enhanced-padding-sm);
  }

  .enhanced-ethics-meters canvas,
  .enhanced-simulation-sliders canvas,
  .enhanced-visual-engine-container canvas {
    width: 100% !important;
    height: auto !important;
  }

  .actions-container {
    flex-direction: column;
    gap: var(--enhanced-gap-sm);
  }

  .enhanced-sim-button {
    width: 100%;
    justify-content: center;
  }

  .slider-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--enhanced-gap-sm);
  }

  .slider-label {
    min-width: auto;
    width: 100%;
  }

  .slider-input {
    width: 100%;
  }

  .slider-value {
    text-align: left;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders,
  .enhanced-visual-engine-container {
    margin: var(--enhanced-gap-sm) 0;
    padding: var(--enhanced-gap-sm);
  }

  .ethics-meters-header h3,
  .actions-header h3,
  .enhanced-simulation-sliders h3 {
    font-size: var(--enhanced-font-size-base);
  }

  .enhanced-sim-button {
    padding: var(--enhanced-gap-sm) var(--enhanced-padding-sm);
    font-size: var(--enhanced-font-size-sm);
    min-height: 40px;
  }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders,
  .enhanced-visual-engine-container {
    border: 2px solid var(--enhanced-text-primary);
    background: var(--enhanced-bg-secondary);
  }

  .enhanced-sim-button {
    border: 2px solid var(--enhanced-text-primary);
    font-weight: var(--font-weight-bold, 700);
    background: var(--enhanced-bg-secondary);
    color: var(--enhanced-text-primary);
  }

  .enhanced-sim-button:focus-visible {
    outline: 3px solid var(--enhanced-border-focus);
    outline-offset: 2px;
  }

  .slider-input::-webkit-slider-track {
    background: var(--enhanced-text-primary);
    border: 1px solid var(--enhanced-text-primary);
  }

  .slider-input::-webkit-slider-thumb {
    background: var(--enhanced-text-primary);
    border: 2px solid var(--enhanced-bg-secondary);
  }

  .slider-input::-moz-range-track {
    background: var(--enhanced-text-primary);
    border: 1px solid var(--enhanced-text-primary);
  }

  .slider-input::-moz-range-thumb {
    background: var(--enhanced-text-primary);
    border: 2px solid var(--enhanced-bg-secondary);
  }
}

.high-contrast .enhanced-ethics-meters,
.high-contrast .enhanced-actions,
.high-contrast .enhanced-simulation-sliders,
.high-contrast .enhanced-visual-engine-container {
  border: 2px solid var(--enhanced-text-primary);
  background: var(--enhanced-bg-secondary);
}

.high-contrast .enhanced-sim-button {
  border: 2px solid var(--enhanced-text-primary);
  font-weight: var(--font-weight-bold, 700);
  background: var(--enhanced-bg-secondary);
  color: var(--enhanced-text-primary);
}

.high-contrast .enhanced-sim-button:focus-visible {
  outline: 3px solid var(--enhanced-border-focus);
  outline-offset: 2px;
}

/* ===== LARGE TEXT MODE SUPPORT ===== */
@media (min-resolution: 2dppx) and (max-width: 768px) {
  .ethics-meters-header h3,
  .actions-header h3,
  .enhanced-simulation-sliders h3 {
    font-size: calc(var(--enhanced-font-size-xl) * 1.2);
  }

  .ethics-meters-header p {
    font-size: calc(var(--enhanced-font-size-sm) * 1.1);
  }

  .enhanced-sim-button {
    font-size: calc(var(--enhanced-font-size-base) * 1.1);
    padding: calc(var(--enhanced-padding-sm) * 1.2)
      calc(var(--enhanced-padding-md) * 1.2);
    min-height: calc(var(--enhanced-touch-target) * 1.2);
  }

  .slider-label,
  .slider-value {
    font-size: calc(var(--enhanced-font-size-sm) * 1.1);
  }
}

.large-text .ethics-meters-header h3,
.large-text .actions-header h3,
.large-text .enhanced-simulation-sliders h3 {
  font-size: calc(var(--enhanced-font-size-xl) * 1.4);
}

.large-text .ethics-meters-header p {
  font-size: calc(var(--enhanced-font-size-sm) * 1.3);
}

.large-text .enhanced-sim-button {
  font-size: calc(var(--enhanced-font-size-base) * 1.2);
  padding: calc(var(--enhanced-padding-sm) * 1.5)
    calc(var(--enhanced-padding-md) * 1.5);
  min-height: calc(var(--enhanced-touch-target) * 1.3);
}

.large-text .slider-label,
.large-text .slider-value {
  font-size: calc(var(--enhanced-font-size-sm) * 1.2);
}

/* Loading and Animation States */
.enhanced-object-loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.enhanced-object-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: loading-shimmer 1.5s infinite;
  border-radius: inherit;
}

@keyframes loading-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Focus and Accessibility */
.enhanced-sim-button:focus,
.visual-engine-container:focus-within {
  outline: 2px solid var(--enhanced-border-focus);
  outline-offset: 2px;
}

/* Skip link for enhanced objects */
.skip-to-enhanced-controls {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--enhanced-gap-sm) var(--enhanced-padding-md);
  background: var(--enhanced-border-focus);
  color: var(--enhanced-bg-secondary);
  text-decoration: none;
  border-radius: var(--enhanced-radius-sm);
  font-size: var(--enhanced-font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  transition: all var(--enhanced-transition-fast);
}

.skip-to-enhanced-controls:focus {
  left: var(--enhanced-gap-sm);
  top: var(--enhanced-gap-sm);
}

/* ===== TOUCH DEVICE SUPPORT ===== */
@media (hover: none) and (pointer: coarse) {
  .enhanced-sim-button,
  .slider-input {
    min-height: var(--enhanced-touch-target);
    min-width: var(--enhanced-touch-target);
  }

  .enhanced-sim-button:hover {
    transform: none;
    box-shadow: var(--enhanced-shadow-sm);
  }

  .slider-input::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
  }

  .slider-input::-moz-range-thumb {
    height: 24px;
    width: 24px;
  }

  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders,
  .enhanced-visual-engine-container {
    padding: calc(var(--enhanced-padding-md) * 1.2);
  }
}

/* ===== RTL (RIGHT-TO-LEFT) SUPPORT ===== */
[dir='rtl'] .actions-container {
  direction: rtl;
}

[dir='rtl'] .slider-row {
  direction: rtl;
}

[dir='rtl'] .slider-label {
  text-align: right;
}

[dir='rtl'] .slider-value {
  text-align: left;
}

[dir='rtl'] .enhanced-sim-button .icon {
  margin-right: 0;
  margin-left: var(--enhanced-gap-sm);
}

[dir='rtl'] .skip-to-enhanced-controls:focus {
  left: auto;
  right: 8px;
}

/* ===== PRINT STYLES ===== */
@media print {
  .enhanced-ethics-meters,
  .enhanced-actions,
  .enhanced-simulation-sliders,
  .enhanced-visual-engine-container {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
    background: #fff !important;
    color: #000 !important;
  }

  .enhanced-sim-button {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
    box-shadow: none;
  }

  .enhanced-sim-button::after {
    display: none;
  }

  .enhanced-ethics-meters.loading::after,
  .enhanced-visual-engine-container.loading::after {
    display: none;
  }

  .skip-to-enhanced-controls {
    display: none;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide interactive elements in print */
  .slider-input {
    -webkit-appearance: none;
    appearance: none;
    background: #fff !important;
    border: 1px solid #000 !important;
  }
}

/* ===== ARIA AND SCREEN READER SUPPORT ===== */
/* Screen reader classes are defined in accessibility.css */

.enhanced-ethics-meters[aria-live='polite'] .meters-container,
.enhanced-simulation-sliders[aria-live='polite'] .slider-container,
.enhanced-visual-engine-container[aria-live='polite'] {
  /* Ensure live regions are properly announced */
  position: relative;
}

.enhanced-sim-button[aria-pressed='true'] {
  background: var(--enhanced-border-focus);
  color: var(--enhanced-bg-secondary);
  border-color: var(--enhanced-border-focus);
}

.enhanced-sim-button[aria-expanded='true']::before {
  content: '▼ ';
}

.enhanced-sim-button[aria-expanded='false']::before {
  content: '▶ ';
}

/* Loading and error states for screen readers */
.enhanced-ethics-meters.loading::before {
  content: 'Loading ethics meters...';
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.enhanced-ethics-meters.error::after {
  content: 'Error loading ethics meters. Please try again.';
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.enhanced-visual-engine-container.loading::before {
  content: 'Loading visualization...';
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.enhanced-visual-engine-container.error .sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== UTILITY CLASSES ===== */
.enhanced-object-hidden {
  display: none !important;
}

.enhanced-object-visible {
  display: block !important;
}

.enhanced-object-flex {
  display: flex !important;
}

.enhanced-object-grid {
  display: grid !important;
}

.enhanced-object-center {
  text-align: center !important;
}

.enhanced-object-left {
  text-align: left !important;
}

.enhanced-object-right {
  text-align: right !important;
}

.enhanced-object-shadow-none {
  box-shadow: none !important;
}

.enhanced-object-shadow-sm {
  box-shadow: var(--enhanced-shadow-sm) !important;
}

.enhanced-object-shadow-md {
  box-shadow: var(--enhanced-shadow-md) !important;
}

.enhanced-object-shadow-lg {
  box-shadow: var(--enhanced-shadow-lg) !important;
}

.enhanced-object-rounded-none {
  border-radius: 0 !important;
}

.enhanced-object-rounded-sm {
  border-radius: var(--enhanced-radius-sm) !important;
}

.enhanced-object-rounded-md {
  border-radius: var(--enhanced-radius-md) !important;
}

.enhanced-object-rounded-lg {
  border-radius: var(--enhanced-radius-lg) !important;
}

.enhanced-object-border-none {
  border: none !important;
}

.enhanced-object-border-thin {
  border: 1px solid var(--enhanced-border) !important;
}

.enhanced-object-border-thick {
  border: 2px solid var(--enhanced-border) !important;
}

.enhanced-object-spacing-xs {
  gap: var(--spacing-1, 4px) !important;
}

.enhanced-object-spacing-sm {
  gap: var(--enhanced-gap-sm) !important;
}

.enhanced-object-spacing-md {
  gap: var(--enhanced-gap-md) !important;
}

.enhanced-object-spacing-lg {
  gap: var(--enhanced-gap-lg) !important;
}

.enhanced-object-padding-none {
  padding: 0 !important;
}

.enhanced-object-padding-sm {
  padding: var(--enhanced-padding-sm) !important;
}

.enhanced-object-padding-md {
  padding: var(--enhanced-padding-md) !important;
}

.enhanced-object-padding-lg {
  padding: var(--enhanced-padding-lg) !important;
}

.enhanced-object-margin-none {
  margin: 0 !important;
}

.enhanced-object-margin-sm {
  margin: var(--enhanced-gap-sm) !important;
}

.enhanced-object-margin-md {
  margin: var(--enhanced-gap-md) !important;
}

.enhanced-object-margin-lg {
  margin: var(--enhanced-gap-lg) !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.enhanced-ethics-meters,
.enhanced-actions,
.enhanced-simulation-sliders,
.enhanced-visual-engine-container {
  will-change: box-shadow, border-color;
}

.enhanced-sim-button {
  will-change: transform, box-shadow, background-color;
}

.enhanced-sim-button::after {
  will-change: width, height;
}

.slider-input::-webkit-slider-thumb,
.slider-input::-moz-range-thumb {
  will-change: transform, box-shadow;
}

/* Contain layout and style recalculations */
.enhanced-ethics-meters,
.enhanced-actions,
.enhanced-simulation-sliders,
.enhanced-visual-engine-container {
  contain: layout style;
}

/* Prevent layout shifts */
.meters-container,
.actions-container,
.slider-container {
  min-height: 1em;
}

/* GPU acceleration for animations */
.enhanced-sim-button:hover,
.enhanced-sim-button:active {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize font rendering */
.enhanced-ethics-meters,
.enhanced-actions,
.enhanced-simulation-sliders,
.enhanced-visual-engine-container {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== FOCUS-VISIBLE SUPPORT ===== */
.enhanced-sim-button:focus:not(:focus-visible) {
  outline: none;
}

.enhanced-sim-button:focus-visible {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.slider-input:focus:not(:focus-visible) {
  outline: none;
}

.slider-input:focus-visible {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

.enhanced-visual-engine-container canvas:focus:not(:focus-visible) {
  outline: none;
}

.enhanced-visual-engine-container canvas:focus-visible {
  outline: var(--enhanced-focus-ring);
  outline-offset: var(--enhanced-focus-offset);
}

/* ===== ANIMATION STATES ===== */