:host {
  display: block;
  --sf-primary: #005fcc;
  --sf-primary-hover: #0047a3;
  --_branding-link-color: #1976d2;
  --sf-text-primary: #111827;
  --sf-text-secondary: #6b7280;
  --sf-error-color: #dc2626;
  --sf-error-text: #991b1b;
  --sf-error-bg: #fef2f2;
  --sf-error-border: #fecaca;
  --sf-success-text: #166534;
  --sf-success-bg: #f0fdf4;
  --sf-success-border: #bbf7d0;
  --sf-card-bg: #ffffff;
  --sf-card-border: #d1d5db;
  --sf-card-radius: 8px;
  --sf-button-radius: 6px;
  --sf-transition: 150ms ease;
  --sf-progress-bg: #e5e7eb;
  --sf-progress-fill: var(--sf-primary);
  --sf-feature-focus-bg: rgba(0, 95, 204, 0.1);
  --sf-feature-drag-bg: rgba(0, 95, 204, 0.2);
}

[part~='feature-item-dragging'] {
  opacity: 0.5;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Progress */
[part~='progress'] {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

[part~='progress-label'] {
  color: var(--sf-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

[part~='form-label'],
[part~='form-radio-label'],
[part~='form-checkbox-label'],
[part~='radio-label'] {
  font-size: 1rem;
}

[part~='progress-track'] {
  height: 4px;
  overflow: hidden;
  background: var(--sf-progress-bg);
  border-radius: 2px;
}

[part~='progress-fill'] {
  height: 100%;
  background: var(--sf-progress-fill);
  border-radius: 2px;
  transition: width var(--sf-transition);
}

/* Focus indicators for accessibility */
[role='listitem']:focus {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

[part~='feature-item-focused'] {
  background-color: var(--sf-feature-focus-bg);
}

[part~='feature-item-drag-mode'] {
  background-color: var(--sf-feature-drag-bg);
  border: 2px dashed var(--sf-primary);
}

/* Button focus indicators */
button:focus {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [role='listitem']:focus,
  button:focus {
    outline: 3px solid;
  }

  [part~='feature-item-focused'] {
    background-color: highlight;
    color: highlighttext;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [part~='step-transition'],
  [part~='kano-step'],
  [part~='maxdiff-step'],
  [part~='pairwise-step'],
  [part~='funnel-complete-step'] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Focus indicators for radio inputs */
input[type='radio']:focus {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

/* Pairwise option selected state */
button[part~='pairwise-option-left'][part~='pairwise-option-selected'],
button[part~='pairwise-option-right'][part~='pairwise-option-selected'] {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

/* Focus indicators for pairwise buttons */
button[part~='pairwise-option-left']:focus,
button[part~='pairwise-option-right']:focus {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

[part~='error-container'] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px;
  color: var(--sf-error-text);
  background: var(--sf-error-bg);
  border: 1px solid var(--sf-error-border);
  border-radius: 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: left;
}

[part~='error-message'] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--sf-error-text);
  background: var(--sf-error-bg);
  border: 1px solid var(--sf-error-border);
  border-radius: 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

[part~='success-message'] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--sf-success-text);
  background: var(--sf-success-bg);
  border: 1px solid var(--sf-success-border);
  border-radius: 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

[part~='error-container'] > [part~='error-message'] {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

[part~='survey-field-error-message'] {
  display: block;
  width: auto;
  margin: 4px 0 0;
  padding: 0;
  color: var(--sf-error-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
}

[part='troubleshooting-link'] {
  display: inline-flex;
  align-items: center;
  color: var(--sf-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

[part~='branding'] {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 16px;
  color: var(--sf-text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

[part~='branding-link'] {
  color: var(--_branding-link-color);
  font-weight: 600;
  text-decoration: none;
}