@charset "UTF-8";
/**
 * 🎨 Questions Plugin - Design System Variables
 * 
 * Core stylesheet that defines the design system variables and imports component styles.
 * This file serves as the single source of truth for theming and customization.
 * 
 * Features:
 * - Global CSS custom properties (variables)
 * - Consistent spacing and typography scales
 * - Color system with semantic naming
 * - Component-specific configurations
 * - Mobile-first responsive design
 * 
 * Dependencies:
 * - _mixins.scss
 * - _form.scss
 * - _fields.scss
 * - _progress.scss
 * - _debug.scss
 */
/* ==========================================================================
   📦 Dependencies
   ========================================================================== */
/* Import mixins first so they're available to all other files */
/**
 * 🧰 Questions Plugin - Mixins
 * 
 * Collection of reusable SCSS mixins for common styling patterns
 * and functionality across components with mobile-first approach.
 * 
 * Features:
 * - Focus state management
 * - Error state styling
 * - Accessibility helpers
 * - Motion control
 * - Mobile-specific utilities
 * 
 * Dependencies:
 * - questions.scss (variables)
 */
/* ==========================================================================
   🎯 Focus States
   ========================================================================== */
/**
 * Applies consistent focus ring styling
 * Used for interactive elements when focused
 */
/* ==========================================================================
   ⚠️ Error States
   ========================================================================== */
/**
 * Applies error state styling
 * Used for form fields with validation errors
 */
/* ==========================================================================
   📱 Mobile Optimization
   ========================================================================== */
/**
 * Ensures minimum touch target size for mobile
 * Apple and Google recommend 44px minimum
 */
/**
 * Prevents text overflow with mobile-friendly word breaking
 */
/**
 * Prevents horizontal overflow and enables proper box-sizing
 */
/**
 * iOS-specific fixes to prevent zoom on input focus
 */
/* ==========================================================================
   ♿ Accessibility
   ========================================================================== */
/**
 * High contrast mode support
 * Ensures visibility in Windows High Contrast Mode
 */
/**
 * Reduced motion support
 * Respects user's motion preferences
 */
/**
 * Screen reader only content
 * Visually hidden but available to assistive technology
 */
/* ==========================================================================
   📐 Responsive Design
   ========================================================================== */
/**
 * Mobile-first responsive breakpoints
 */
/**
 * Touch device detection
 */
/* Import component stylesheets */
/**
 * 🎨 Questions Plugin - Design System Variables
 * 
 * Core stylesheet that defines the design system variables and imports component styles.
 * This file serves as the single source of truth for theming and customization.
 * 
 * Features:
 * - Global CSS custom properties (variables)
 * - Consistent spacing and typography scales
 * - Color system with semantic naming
 * - Component-specific configurations
 * - Mobile-first responsive design
 * 
 * Dependencies:
 * - _mixins.scss
 * - _form.scss
 * - _fields.scss
 * - _progress.scss
 * - _debug.scss
 */
/* ==========================================================================
   📦 Dependencies
   ========================================================================== */
/* Import mixins first so they're available to all other files */
/**
 * 📝 Questions Plugin - Form Styles
 * 
 * Core form component styles including layout, navigation,
 * and state management for multi-step forms.
 * 
 * Features:
 * - Mobile-first responsive design
 * - Multi-step navigation with touch-friendly controls
 * - Error handling
 * - Success states
 * - Accessibility support
 * - Overflow prevention
 * 
 * Dependencies:
 * - questions.scss (variables)
 * - _mixins.scss
 */
/* ================================================== 
     📋 Form Container & Layout                         
    ================================================== */
.questions-form-container {
  /* Mobile-first: minimal margins to prevent overflow */
  margin-inline: var(--questions-spacing-sm);
  padding: 0;
  /* Ensure container doesn't overflow */
  max-width: 100%;
  overflow-x: hidden;
}

/* Responsive container margins */
@media (min-width: 480px) {
  .questions-form-container {
    margin-inline: var(--questions-spacing-base);
  }
}
@media (min-width: 768px) {
  .questions-form-container {
    margin-inline: var(--questions-spacing-lg);
  }
}
@media (min-width: 1024px) {
  .questions-form-container {
    margin-inline: var(--questions-spacing-xl);
  }
}
/* Desktop: form beside header wordmark, top-aligned (step pages only) */
@media (min-width: 30em) {
  body.questions-page {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: var(--space-xl, var(--questions-spacing-xl));
  }
  body.questions-page > header.site-header {
    flex: 0 0 auto;
    width: auto;
  }
  body.questions-page > main {
    flex: 1 1 auto;
    margin-top: 0;
    min-width: 0;
    max-width: none;
  }
  body.questions-page .questions-form-container {
    margin-inline: 0;
  }
  body.questions-page .questions-form {
    margin-inline: 0;
    padding-top: 0;
  }
  body.questions-page .questions-form__progress {
    margin-top: 0;
  }
}
.questions-form {
  max-width: var(--questions-form-max-width);
  margin: 0 auto;
  font-family: var(--questions-font-family);
  color: var(--questions-color-text);
  line-height: var(--questions-line-height);
  padding: var(--questions-container-padding);
  /* Prevent horizontal overflow */
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Allow flexbox shrinking */
}

/* Step container */
.questions-form__step {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}
.questions-form__step--active {
  display: block;
}

/* Mobile-first column layout */
.questions-form__column {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: var(--questions-spacing-lg);
  /* Ensure grid items don't overflow */
}
.questions-form__column > * {
  min-width: 0; /* Allow grid items to shrink */
  max-width: 100%;
}

/* Responsive grid layout */
@media (min-width: 768px) {
  .questions-form__column {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--questions-spacing-xl);
  }
  .questions-form__column > * {
    grid-column: span var(--span, 12);
  }
}
/* Question blocks */
.questions-form__block {
  margin: 0; /* Using grid gap for spacing */
  /* Prevent overflow in blocks */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/*  ================================================== 
     ⚠️ Error Handling                         
    ==================================================  */
/**
 * Form-level error container
 * Displays validation errors and form-wide messages
 */
.questions-form__errors {
  padding: var(--questions-spacing-md);
  margin-bottom: var(--questions-spacing-lg);
  border: var(--questions-border-width) solid var(--questions-color-error);
  border-radius: var(--questions-border-radius);
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--questions-color-error);
  /* Prevent overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Resume banner — saved-answers prompt after a session gap (TASK-132) */
.questions-resume {
  padding: var(--questions-spacing-md);
  margin-bottom: var(--questions-spacing-lg);
  border: var(--questions-border-width) solid var(--questions-color-primary);
  border-radius: var(--questions-border-radius);
  background-color: var(--questions-color-background-light);
  color: var(--questions-color-text);
}
.questions-resume[hidden] {
  display: none;
}
.questions-resume__text {
  margin: 0 0 var(--questions-spacing-sm);
}
.questions-resume__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--questions-spacing-sm);
}
.questions-resume__continue, .questions-resume__fresh {
  cursor: pointer;
  padding: var(--questions-spacing-sm) var(--questions-spacing-md);
  border-radius: 1rem;
  font: inherit;
  font-weight: var(--questions-font-weight-medium);
}
.questions-resume__continue {
  background: var(--questions-color-primary);
  color: var(--color-on-primary, var(--color-text-inverse, #fff));
  border: 1px solid var(--questions-color-primary);
}
.questions-resume__fresh {
  background: transparent;
  color: var(--questions-color-primary);
  border: 1px solid var(--questions-color-primary);
}
.questions-resume__continue:focus-visible, .questions-resume__fresh:focus-visible {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 2px;
}

.questions-form__errors-heading {
  font-weight: 500;
  margin: 0 0 var(--questions-spacing-sm);
}

.questions-form__error {
  margin: var(--questions-spacing-xs) 0;
}

.questions-form__errors-list {
  margin: 0;
  padding-left: var(--questions-spacing-lg);
}

/* Summary entries link to their field (focus moves on activation) */
.questions-form__error-link {
  color: inherit;
  text-decoration: underline;
}
.questions-form__error-link:focus-visible {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-error);
  outline-offset: 2px;
}

/* Inline per-field error, referenced by the input's aria-describedby */
.questions-field__error {
  margin: var(--questions-spacing-xs) 0 0;
  color: var(--questions-color-error);
  font-size: var(--questions-font-size-sm);
}

/* ================================================== 
     🔄 Navigation Controls                     
    ================================================== */
/**
 * Form navigation container
 * Houses prev/next/submit buttons with mobile-friendly layout
 */
.questions-form__navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--questions-spacing-xl);
  gap: var(--questions-spacing-md);
  /* Mobile: stack buttons vertically if needed */
  flex-wrap: wrap;
}

.questions-form__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--questions-spacing-xl);
  gap: var(--questions-spacing-md);
  /* Mobile: allow wrapping */
  flex-wrap: wrap;
}

/* Base button styles with mobile-friendly touch targets (navigation only) */
.questions-form__navigation :is(button,
.questions-form__next-button,
.questions-form__submit-button) {
  /* Ensure minimum touch target size (44px) */
  min-height: var(--questions-button-height);
  padding: var(--questions-spacing-sm) var(--questions-spacing-lg);
  border: none;
  border-radius: var(--questions-border-radius);
  font-weight: 500;
  font-size: var(--questions-font-size-base); /* Prevent zoom on iOS */
  cursor: pointer;
  transition: var(--questions-transition);
  /* Prevent button text from wrapping */
  white-space: nowrap;
  /* Mobile: ensure buttons don't overflow */
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile: make buttons full width on very small screens */
@media (max-width: 380px) {
  .questions-form__navigation {
    flex-direction: column;
    gap: var(--questions-spacing-sm);
  }
  .questions-form__navigation :is(button,
  .questions-form__next-button,
  .questions-form__submit-button) {
    width: 100%;
  }
}
/* Previous step button */
.questions-form__prev-button {
  background-color: var(--questions-color-border);
  color: var(--questions-color-text);
}

/* Next and submit buttons */
.questions-form__next-button,
.questions-form__submit-button {
  text-decoration: none;
  background-color: var(--questions-color-primary);
  color: white;
}

/* Button hover states (not on touch devices) */
@media (hover: hover) and (pointer: fine) {
  .questions-form__prev-button:hover {
    opacity: 0.9;
  }
  .questions-form__next-button:hover,
  .questions-form__submit-button:hover {
    opacity: 0.9;
  }
}
/* Button focus states */
.questions-form__prev-button:focus,
.questions-form__next-button:focus,
.questions-form__submit-button:focus {
  outline: none;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

/* Pending state: questions.js disables the button while the submit runs (TASK-174) */
.questions-form__submit-button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ================================================== 
     ✅ Success State                          
    ================================================== */
/**
 * Success message container
 * Shown after successful form submission
 */
.questions-form__success {
  padding: var(--questions-spacing-lg);
  border: var(--questions-border-width) solid var(--questions-color-primary);
  border-radius: var(--questions-border-radius);
  background-color: rgba(74, 144, 226, 0.1);
  margin-bottom: var(--questions-spacing-lg);
  /* Prevent overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ================================================== 
     🎛️ Form Fields                           
    ================================================== */
/**
 * Base field styles
 * Common styling for all form inputs with mobile optimization
 */
.questions-form label {
  margin-bottom: var(--questions-spacing-xs);
  font-weight: 500;
  /* Prevent label overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.questions-form input[type=text],
.questions-form input[type=email],
.questions-form input[type=tel],
.questions-form input[type=number],
.questions-form input[type=url],
.questions-form textarea,
.questions-form select {
  width: 100%;
  min-height: var(--questions-input-height); /* Touch-friendly */
  padding: var(--questions-input-padding);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-border-radius);
  font-family: inherit;
  font-size: var(--questions-font-size-base); /* Prevent zoom on iOS */
  line-height: var(--questions-line-height);
  transition: var(--questions-transition);
  background-color: var(--questions-color-input-bg);
  color: var(--questions-color-input-text);
  /* Prevent overflow */
  box-sizing: border-box;
  max-width: 100%;
  /* Improve mobile typing experience */
  -webkit-appearance: none;
  appearance: none;
}

/* Textarea specific adjustments */
.questions-form textarea {
  resize: vertical;
  min-height: calc(var(--questions-input-height) * 2.5);
}

/* Field focus states */
.questions-form input[type=text]:focus,
.questions-form input[type=email]:focus,
.questions-form input[type=tel]:focus,
.questions-form input[type=number]:focus,
.questions-form input[type=url]:focus,
.questions-form textarea:focus,
.questions-form select:focus {
  outline: none;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

/* ================================================== 
     🔘 Options Groups                         
    ================================================== */
/**
 * Container for grouped options
 * Used for radio buttons and checkboxes with mobile-friendly spacing
 */
.questions-form__options {
  display: flex;
  flex-direction: column;
  gap: var(--questions-spacing-md); /* Larger gaps for easier touch */
}

.questions-form__options--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--questions-spacing-lg);
}

/* Mobile: force vertical layout for horizontal options on small screens */
@media (max-width: 480px) {
  .questions-form__options--horizontal {
    flex-direction: column;
    gap: var(--questions-spacing-md);
  }
}
/* ================================================== 
     🎭 Animations                             
    ================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ================================================== 
     ♿ Accessibility                          
    ================================================== */
/**
 * Screen reader only class
 * Visually hidden but available to screen readers
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .questions-form__navigation :is(button,
  .questions-form__next-button,
  .questions-form__submit-button) {
    border: var(--questions-border-width) solid currentColor;
  }
  .questions-form__progress-bar {
    border: var(--questions-border-width) solid currentColor;
  }
}
/**
 * Reduced motion preferences
 * Respects user's motion preferences
 */
@media (prefers-reduced-motion: reduce) {
  .questions-form * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Remove margin-bottom from child elements since we're using gap */
.questions-form__block,
.questions-form__column {
  margin-bottom: 0;
}

/* ================================================== 
     👋 Welcome & Goodbye Pages                    
    ================================================== */
/**
 * Welcome and goodbye page specific styles
 * Ensures consistent styling with the main form design system
 */
/* Clear header-compact main offset without setting margin-top on main */
body.header-compact:has(.questions-form-container--welcome) > main,
body.header-compact:has(.questions-form-container--goodbye) > main {
  margin-top: unset;
}

.questions-form-container--welcome .questions-form,
.questions-form-container--goodbye .questions-form {
  padding: 0 var(--questions-container-padding);
}
.questions-form-container--welcome .questions-form__message,
.questions-form-container--goodbye .questions-form__message {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--questions-spacing-xl);
  font-size: var(--questions-font-size-lg);
  line-height: var(--questions-line-height);
  color: var(--questions-color-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.questions-form-container--welcome .questions-form__message h1,
.questions-form-container--welcome .questions-form__message h2,
.questions-form-container--welcome .questions-form__message h3,
.questions-form-container--goodbye .questions-form__message h1,
.questions-form-container--goodbye .questions-form__message h2,
.questions-form-container--goodbye .questions-form__message h3 {
  margin-top: 0;
  margin-bottom: var(--questions-spacing-md);
  font-weight: var(--questions-font-weight-bold);
}
.questions-form-container--welcome .questions-form__message p,
.questions-form-container--goodbye .questions-form__message p {
  margin-bottom: var(--questions-spacing-md);
}
.questions-form-container--welcome .questions-form__message p:last-child,
.questions-form-container--goodbye .questions-form__message p:last-child {
  margin-bottom: 0;
}

.questions-form-container--welcome .questions-form__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--questions-spacing-md);
  width: 100%;
  margin-top: var(--questions-spacing-md);
}
.questions-form-container--welcome .questions-form__signoff p {
  margin: 0;
}
.questions-form-container--welcome .questions-form__navigation {
  justify-content: center;
  margin-top: 0;
  width: 100%;
}
.questions-form-container--welcome .questions-form__navigation .questions-form__next-button {
  padding: var(--questions-spacing-md) var(--questions-spacing-xxl);
  font-size: var(--questions-font-size-lg);
  font-weight: var(--questions-font-weight-medium);
  white-space: nowrap;
  width: 100%;
}
@media (min-width: 48em) {
  .questions-form-container--welcome .questions-form__footer {
    margin-top: var(--questions-spacing-lg);
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--questions-spacing-xl);
  }
  .questions-form-container--welcome .questions-form__navigation {
    width: auto;
    justify-content: flex-end;
  }
  .questions-form-container--welcome .questions-form__navigation .questions-form__next-button {
    width: auto;
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .questions-form-container--welcome .questions-form__message,
  .questions-form-container--goodbye .questions-form__message {
    font-size: var(--questions-font-size-base);
  }
}
/**
 * 🎨 Questions Plugin - Design System Variables
 * 
 * Core stylesheet that defines the design system variables and imports component styles.
 * This file serves as the single source of truth for theming and customization.
 * 
 * Features:
 * - Global CSS custom properties (variables)
 * - Consistent spacing and typography scales
 * - Color system with semantic naming
 * - Component-specific configurations
 * - Mobile-first responsive design
 * 
 * Dependencies:
 * - _mixins.scss
 * - _form.scss
 * - _fields.scss
 * - _progress.scss
 * - _debug.scss
 */
/* ==========================================================================
   📦 Dependencies
   ========================================================================== */
/* Import mixins first so they're available to all other files */
/**
 * 📝 Questions Plugin - Form Fields Styles
 * 
 * This file contains styles for all form field types including:
 * - Text inputs and textareas
 * - Select fields
 * - Checkboxes and Radio buttons
 * - Field labels and help text
 * - Error states
 * - Mobile-optimized touch targets
 */
/* ================================================== 
    Base Field Container                         
   ================================================== */
.questions-field {
  margin: 0;
  /* Ensure fields don't overflow */
  max-width: 100%;
  box-sizing: border-box;
}

/* ================================================== 
    Labels and Text Elements                         
   ================================================== */
.questions-field__label, .questions-field__legend {
  display: block;
  margin-bottom: var(--questions-spacing-sm);
  font-weight: var(--questions-font-weight-bold);
  line-height: var(--questions-line-height);
  /* Prevent label text overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: var(--questions-hyphens, none);
}

.questions-field__label--choice {
  font-weight: var(--questions-font-weight-normal);
  cursor: pointer;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  line-height: var(--questions-line-height);
  /* Mobile: ensure choice labels don't overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.questions-field__help {
  margin-bottom: var(--questions-spacing-sm);
  font-size: var(--questions-font-size-sm);
  color: var(--questions-color-text-light);
  line-height: var(--questions-line-height);
  /* Prevent help text overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ================================================== 
    Help Dropdown Component                         
   ================================================== */
.questions-field__help-dropdown {
  display: inline-block;
  margin-left: var(--questions-spacing-xs);
  vertical-align: top;
}

/* Keep inline positioning when opened */
.questions-field__help-dropdown[open] {
  display: inline-block;
  vertical-align: top;
}

.questions-field__help-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: transparent;
  color: var(--questions-color-primary);
  border: 2px solid var(--questions-color-primary);
  font-size: var(--questions-font-size-sm);
  font-weight: var(--questions-font-weight-bold);
  cursor: pointer;
  list-style: none;
  transition: var(--questions-transition);
  transform: translateY(-3px);
}

/* Remove default details marker */
.questions-field__help-summary::-webkit-details-marker {
  display: none;
}

/* Focus styles for accessibility */
.questions-field__help-summary:focus {
  outline: none;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

/* Hover state */
.questions-field__help-summary:hover {
  background-color: var(--questions-color-primary);
  color: var(--questions-color-background);
  transform: translateY(-4px) scale(1.05);
}

/* Active state */
.questions-field__help-summary:active {
  transform: translateY(-4px) scale(0.98);
}

/* Open state - reverse colors */
.questions-field__help-dropdown[open] .questions-field__help-summary {
  background-color: var(--questions-color-primary);
  color: var(--questions-color-background);
}

/* Open state hover - keep reversed colors but darker */
.questions-field__help-dropdown[open] .questions-field__help-summary:hover {
  background-color: var(--questions-color-primary-hover);
  color: var(--questions-color-background);
}

.questions-field__help-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.questions-field__help-content {
  display: block;
  background-color: var(--questions-color-background-light);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-border-radius);
  padding: var(--questions-spacing-md);
  margin-top: var(--questions-spacing-sm);
  font-size: var(--questions-font-size-sm);
  line-height: var(--questions-line-height);
  color: var(--questions-color-text);
  /* Prevent text overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Smooth expand animation */
  animation: questions-help-expand 0.3s ease-out;
}

/* Animation for inline expand */
@keyframes questions-help-expand {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
    padding-top: var(--questions-spacing-md);
    padding-bottom: var(--questions-spacing-md);
    margin-top: var(--questions-spacing-sm);
  }
}
/* Ensure dropdown doesn't appear when details is closed */
.questions-field__help-dropdown:not([open]) .questions-field__help-content {
  display: none;
}

.questions-field__required {
  color: var(--questions-color-error);
  margin-left: var(--questions-spacing-xs);
}

.questions-field__error {
  margin-top: var(--questions-spacing-sm);
  color: var(--questions-color-error);
  font-size: var(--questions-font-size-sm);
  line-height: var(--questions-line-height);
  /* Prevent error text overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ================================================== 
    Input Base Styles                       
   ================================================== */
.questions-field__select, .questions-field__textarea, .questions-field__input {
  width: 100%;
  min-height: var(--questions-input-height); /* Touch-friendly height */
  padding: var(--questions-input-padding);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-border-radius);
  font-size: var(--questions-font-size-base); /* Prevent zoom on iOS */
  line-height: var(--questions-line-height);
  transition: var(--questions-transition);
  background-color: var(--questions-color-input-bg);
  color: var(--questions-color-input-text);
  margin: 0;
  /* Prevent overflow and improve mobile experience */
  box-sizing: border-box;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.questions-field__select:focus, .questions-field__textarea:focus, .questions-field__input:focus {
  outline: none;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

/* ================================================== 
    Error States                          
   ================================================== */
.questions-field--has-error .questions-field__input,
.questions-field--has-error .questions-field__textarea,
.questions-field--has-error .questions-field__select {
  border-color: var(--questions-color-error);
}
.questions-field--has-error .questions-field__input:focus,
.questions-field--has-error .questions-field__textarea:focus,
.questions-field--has-error .questions-field__select:focus {
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(231, 76, 60, var(--questions-focus-ring-alpha));
}
.questions-field--has-error .questions-field__checkbox,
.questions-field--has-error .questions-field__radio {
  outline: 2px solid var(--questions-color-error);
}
.questions-field--has-error .questions-field__checkbox:focus,
.questions-field--has-error .questions-field__radio:focus {
  outline: 2px solid var(--questions-color-error);
  outline-offset: 2px;
}

/* ================================================== 
    Text Inputs and Textareas              
   ================================================== */
.questions-field__textarea {
  resize: vertical;
  min-height: calc(var(--questions-input-height) * 2.5); /* Larger touch target */
}

/* ================================================== 
    Select Fields              
   ================================================== */
.questions-field__select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  /* Ensure input takes full width */
}
.questions-field__select-wrapper .questions-field__select {
  width: 100%;
  padding-right: calc(var(--questions-input-padding) + 2rem);
}
.questions-field__select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--questions-spacing-base);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--questions-color-text-light);
  pointer-events: none;
  /* Mobile: make dropdown arrow larger for better visibility */
}
@media (max-width: 768px) {
  .questions-field__select-wrapper::after {
    border-width: 8px;
  }
}

.questions-field__select {
  padding-right: 3rem; /* More space for larger mobile arrow */
  cursor: pointer;
  margin-bottom: 0;
}

/* ================================================== 
    Checkbox and Radio Fields               
   ================================================== */
.questions-field--checkbox,
.questions-field--radio {
  margin: 0;
}
.questions-field--checkbox .questions-field__label, .questions-field--checkbox .questions-field__legend,
.questions-field--radio .questions-field__label,
.questions-field--radio .questions-field__legend {
  margin-bottom: 0;
}

.questions-field__options {
  display: flex;
  flex-direction: column;
  gap: var(--questions-spacing-md); /* Larger gaps for mobile */
}

.questions-field__option {
  display: flex;
  align-items: flex-start;
  gap: var(--questions-input-gap);
  /* Mobile: ensure sufficient touch target area */
  min-height: var(--questions-input-height);
  padding: var(--questions-spacing-xs) 0;
  /* Prevent option overflow */
  max-width: 100%;
  box-sizing: border-box;
}

.questions-field__radio, .questions-field__checkbox {
  /* Mobile-optimized touch targets */
  flex: 0 0 var(--questions-input-size);
  width: var(--questions-input-size);
  height: var(--questions-input-size);
  cursor: pointer;
  margin: calc(var(--questions-line-height) * 0.125em) 0 0 0;
  /* Mobile: larger touch targets */
}
@media (max-width: 768px) {
  .questions-field__radio, .questions-field__checkbox {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    flex: 0 0 1.25rem;
  }
}
.questions-field__radio:focus, .questions-field__checkbox:focus {
  outline: 2px solid var(--questions-color-primary);
  outline-offset: 2px;
}

/* ================================================== 
    Radio Group Layouts              
   ================================================== */
.questions-field__radio-group {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--questions-spacing-md); /* Larger mobile gaps */
}

.questions-field__radio-group--vertical .questions-field__radio-option {
  margin: 0;
}

.questions-field__radio-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--questions-spacing-md) var(--questions-spacing-lg);
}
.questions-field__radio-group--horizontal .questions-field__radio-option {
  margin: 0;
  /* Mobile: ensure horizontal options don't crowd */
  min-width: calc(50% - var(--questions-spacing-sm));
}
@media (max-width: 480px) {
  .questions-field__radio-group--horizontal .questions-field__radio-option {
    min-width: 100%;
  }
}

/* Mobile: force vertical layout for better usability */
@media (max-width: 480px) {
  .questions-field__radio-group--horizontal {
    flex-direction: column;
    gap: var(--questions-spacing-md);
  }
  .questions-field__radio-group--horizontal .questions-field__radio-option {
    min-width: 100%;
  }
}
/* ================================================== 
    Comments Block              
   ================================================== */
.questions-form__block--q-comments {
  font-size: 0.7em;
  color: var(--questions-color-text-light);
  margin-top: calc(-1.3 * var(--questions-spacing-lg));
}
.questions-form__block--q-comments .questions-field__label, .questions-form__block--q-comments .questions-field__legend {
  display: inline-block;
  font-weight: var(--questions-font-weight-normal);
}
.questions-form__block--q-comments .questions-field__summary {
  text-align: right;
  /* Mobile: improve summary text handling */
}
@media (max-width: 480px) {
  .questions-form__block--q-comments .questions-field__summary {
    text-align: left;
    margin-top: var(--questions-spacing-xs);
  }
}

/* ================================================== 
    Mobile-Specific Optimizations              
   ================================================== */
/* iOS: Prevent zoom on form focus */
@supports (-webkit-touch-callout: none) {
  .questions-field__input,
  .questions-field__textarea,
  .questions-field__select {
    font-size: max(var(--questions-font-size-base), 16px);
  }
}
/* Android: Improve form field appearance */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .questions-field__input,
  .questions-field__textarea,
  .questions-field__select {
    -webkit-appearance: none;
  }
}
/* ================================================== 
    Input Icons & Controls              
   ================================================== */
/**
 * Standardized input wrapper for fields with icons/controls
 * Provides consistent positioning for arrows and clear buttons
 */
.questions-field__input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  /* Ensure input takes full width */
}
.questions-field__input-wrapper .questions-field__input,
.questions-field__input-wrapper .questions-field__textarea,
.questions-field__input-wrapper .questions-field__select {
  width: 100%;
  padding-right: calc(var(--questions-input-padding) + 2rem);
}

/**
 * Base styles for input control buttons (arrow and clear)
 * Provides consistent positioning, sizing, and interactions
 */
button.questions-input__clear,
button.questions-field__clear-button, button.questions-input__arrow {
  /* Control button positioning and sizing */
  --control-button-size: 1.5rem;
  --control-button-touch-target: 2rem;
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--questions-spacing-xs);
  border-radius: var(--questions-border-radius);
  transition: var(--questions-transition);
  /* Mobile: white circle so buttons stay visible when input text is long */
}
@media (max-width: 768px) {
  button.questions-input__clear,
  button.questions-field__clear-button, button.questions-input__arrow {
    background-color: var(--questions-color-background);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    width: var(--control-button-touch-target);
    height: var(--control-button-touch-target);
  }
}
button.questions-input__clear,
button.questions-field__clear-button, button.questions-input__arrow {
  /* Ensure it's properly sized for touch */
  min-width: var(--control-button-touch-target);
  min-height: var(--control-button-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-button-size);
  width: var(--control-button-size);
  /* Remove default button styling */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button.questions-input__clear:hover,
button.questions-field__clear-button:hover, button.questions-input__arrow:hover {
  background-color: var(--questions-color-background-light);
}
button.questions-input__clear:focus,
button.questions-field__clear-button:focus, button.questions-input__arrow:focus {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 1px;
  background-color: var(--questions-color-background-light);
}
button.questions-input__clear:active,
button.questions-field__clear-button:active, button.questions-input__arrow:active {
  background-color: var(--questions-color-border);
}
button.questions-input__clear,
button.questions-field__clear-button, button.questions-input__arrow {
  /* Common symbol positioning */
}
button.questions-input__clear::after,
button.questions-field__clear-button::after, button.questions-input__arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--questions-transition);
}

/**
 * Dropdown arrow button
 */
button.questions-input__arrow {
  z-index: 1;
  /* Create arrow symbol */
}
button.questions-input__arrow::after {
  content: "🪄";
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
button.questions-input__arrow {
  /* Hide when clear button is visible */
}
.questions-field__input-wrapper:has(.questions-input__clear[style*="display: block"],
.questions-field__clear-button[style*="display: block"]) button.questions-input__arrow, .questions-field__input-wrapper:has(.questions-input__clear:not([style*="display: none"]),
.questions-field__clear-button:not([style*="display: none"])) button.questions-input__arrow {
  opacity: 0;
  pointer-events: none;
}

/**
 * Clear button
 */
button.questions-input__clear,
button.questions-field__clear-button {
  z-index: 10;
  /* Make sure the button is visible when it should be */
}
button.questions-input__clear[style*="display: none"],
button.questions-field__clear-button[style*="display: none"] {
  display: none !important;
}
button.questions-input__clear,
button.questions-field__clear-button {
  /* Create "×" symbol */
}
button.questions-input__clear::after,
button.questions-field__clear-button::after {
  content: "×";
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  color: var(--questions-color-text-light);
}
button.questions-input__clear,
button.questions-field__clear-button {
  /* Hover/focus effects */
}
button.questions-input__clear:hover::after, button.questions-input__clear:focus::after,
button.questions-field__clear-button:hover::after,
button.questions-field__clear-button:focus::after {
  color: var(--questions-color-text);
}
button.questions-input__clear,
button.questions-field__clear-button {
  /* Hide the screen reader text visually but keep it accessible */
}
button.questions-input__clear .sr-only,
button.questions-field__clear-button .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;
}

/* ================================================== 
    High Contrast Mode Support              
   ================================================== */
@media (forced-colors: active) {
  .questions-field__input:focus,
  .questions-field__textarea:focus,
  .questions-field__select:focus {
    outline: 2px solid Highlight;
  }
  .questions-field--has-error .questions-field__input,
  .questions-field--has-error .questions-field__textarea,
  .questions-field--has-error .questions-field__select {
    border: 2px solid Mark;
  }
  .questions-field--has-error .questions-field__checkbox,
  .questions-field--has-error .questions-field__radio {
    outline: 2px solid Mark;
  }
  .questions-field__error {
    color: Mark;
  }
  .questions-field__select-wrapper::after {
    border-top-color: currentColor;
  }
  .questions-input__arrow::after {
    border-top-color: currentColor;
  }
}
/**
 * 📊 Questions Plugin - Progress Bar Styles
 * 
 * Styles for the multi-step form progress indicator. Provides visual feedback
 * about form completion progress with mobile-optimized design.
 * 
 * Features:
 * - Animated progress bar
 * - Step counter display
 * - Mobile-first responsive design
 * - Touch-friendly interface
 * 
 * Dependencies:
 * - questions.scss (variables)
 */
/* ==================================================
     📈 Progress Bar Component
    ================================================== */
.questions-form__progress {
  margin-top: 0;
}
@media (min-width: 480px) {
  .questions-form__progress {
    margin-top: var(--questions-spacing-base);
  }
}
@media (min-width: 768px) {
  .questions-form__progress {
    margin-top: var(--questions-spacing-lg);
  }
}
.questions-form__progress {
  margin-bottom: var(--questions-spacing-lg);
  width: 100%;
  box-sizing: border-box;
  /* Flex header: Step X of Y on the left, About button on the right */
}
.questions-form__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--questions-spacing-sm);
  margin-bottom: var(--questions-spacing-sm);
}
.questions-form__progress {
  /* Step counter — <p role="status"> */
}
.questions-form__progress-text {
  margin: 0;
  font-weight: var(--questions-font-weight-medium);
  font-size: var(--questions-font-size-xs);
  line-height: var(--questions-line-height);
  white-space: nowrap; /* keep "Step X of Y" on one line */
  flex-shrink: 0;
  color: var(--questions-color-text-light);
}
.questions-form__progress {
  /* Progress bar track */
}
.questions-form__progress-bar {
  height: var(--questions-progress-height);
  background-color: var(--questions-color-border);
  border-radius: var(--questions-progress-border-radius);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .questions-form__progress-bar {
    height: 10px;
  }
}
.questions-form__progress {
  /* Progress bar fill */
}
.questions-form__progress-indicator {
  height: 100%;
  background-color: var(--questions-color-primary);
  transition: width var(--questions-transition);
  border-radius: inherit;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .questions-form__progress-indicator {
    transition: none;
  }
}
.questions-form {
  /* About button (inline with Step X of Y) */
}
.questions-form__about-button {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--questions-color-primary);
  border-radius: 1rem;
  color: var(--questions-color-primary);
  font-size: var(--questions-font-size-xs);
  font-weight: var(--questions-font-weight-medium);
  padding: 0.125rem 0.5rem;
  min-height: auto;
  cursor: pointer;
  transition: var(--questions-transition);
  line-height: var(--questions-line-height);
}
.questions-form__about-button:hover {
  background-color: var(--questions-color-primary);
  color: var(--color-on-primary, var(--color-text-inverse, #ffffff));
}
.questions-form__about-button:focus-visible {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 2px;
}
.questions-form__about-button:active {
  opacity: 0.85;
}

/* ==================================================
     ℹ️ About Dialog
    ================================================== */
.questions-about-dialog {
  border: none;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  box-shadow: none;
  background-color: var(--color-page);
  color: var(--color-text);
}
.questions-about-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}
.questions-about-dialog__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.questions-about-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: var(--questions-spacing-sm);
}
.questions-about-dialog__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--questions-font-weight-bold);
  line-height: var(--questions-line-height);
}
.questions-about-dialog__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: var(--questions-border-radius);
  transition: var(--questions-transition);
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.questions-about-dialog__close:hover {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}
.questions-about-dialog__close:focus-visible {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 2px;
}
.questions-about-dialog__body {
  padding: 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  font-size: var(--text-base);
  line-height: 1.4;
}
.questions-about-dialog__body p {
  margin: 0 0 var(--questions-spacing-md);
}
.questions-about-dialog__body p:last-child {
  margin-bottom: 0;
}
.questions-about-dialog {
  /* Large: centered panel with standard content width */
}
@media (min-width: 30em) {
  .questions-about-dialog {
    width: min(var(--questions-content-width), 100vw - 2 * var(--space-2xl, 4rem));
    max-width: var(--questions-content-width);
    height: auto;
    max-height: min(90dvh, 100%);
    margin: auto;
    border-radius: var(--space-2xs, 4px);
    box-shadow: 0 0.5rem 2rem color-mix(in oklch, var(--color-text) 20%, transparent);
  }
  .questions-about-dialog__inner {
    height: auto;
    max-height: min(90dvh, 100%);
  }
  .questions-about-dialog__header {
    padding: var(--space-lg) var(--space-2xl) var(--space-md);
  }
  .questions-about-dialog__body {
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
    flex: 0 1 auto;
  }
}

/* High contrast support */
@media (forced-colors: active) {
  .questions-about-dialog {
    border: 2px solid ButtonText;
  }
  .questions-form__about-button {
    border-color: ButtonText;
    color: ButtonText;
  }
}
/* ==================================================
     🏷️ Survey page mark — mobile bottom / desktop top
    ================================================== */
/* Bottom mark: mobile only */
.questions-survey-mark {
  margin-top: 4rem;
  padding: 0.5rem var(--questions-spacing-base) 1rem;
  /* Hidden on desktop — mark lives in <header> there */
}
@media (min-width: 30em) {
  .questions-survey-mark {
    display: none;
  }
}
.questions-survey-mark a {
  text-decoration: none;
}
.questions-survey-mark {
  /* Replicate header h1 mark styles (scoped to header in main.scss) */
}
.questions-survey-mark h1 {
  color: black !important; /* required for filter: url(#remove-black) */
  font-family: var(--font-ks, system-ui);
  font-size: 1.1rem;
  gap: 0.25em;
}
.questions-survey-mark h1 span.type-block {
  background-color: var(--lightpurple, oklch(68% 0.22 295deg));
  padding: 0.4rem;
  margin-top: 0.5rem;
  margin-right: 0.25rem;
  display: inline-block;
  border-radius: 0.25rem;
  filter: url(#remove-black);
  line-height: 1;
}

/* Top mark: hide on mobile so the bottom one shows instead */
@media (max-width: 30em) {
  body.questions-page > header {
    display: none;
  }
}
/**
 * 🔧 Questions Plugin - Debug Interface Styles
 * 
 * Provides styles for the debugging interface, including layout, typography,
 * and visual feedback components.
 * 
 * Features:
 * - Consistent debug panel layout
 * - Status badges for different states
 * - Code display formatting
 * - Form debugging tools
 * 
 * Dependencies:
 * - questions.scss (variables)
 */
/*  ================================================== 
     🔍 Debug Details Element                          
    ================================================== */
.questions-debug__details[open] .questions-debug__emoji {
  transform: rotate(180deg);
}

.questions-debug__summary {
  cursor: pointer;
  padding: var(--questions-spacing-base);
  font-size: var(--questions-font-size-lg);
  font-weight: var(--questions-font-weight-bold);
  list-style: none;
  text-align: left;
}
.questions-debug__summary::-webkit-details-marker {
  display: none;
}

.questions-debug__emoji {
  display: inline-block;
  margin-right: var(--questions-spacing-sm);
  transform: rotate(0deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/*  ================================================== 
     🖥️ Debug Container                          
    ================================================== */
.questions-debug {
  font-family: var(--questions-debug-font-family);
  font-size: var(--questions-debug-font-size);
  color: var(--questions-color-text);
  padding: var(--questions-spacing-xl);
  text-align: left;
}
@media (min-width: 1024px) {
  .questions-debug::after {
    content: "";
    display: table;
    clear: both;
  }
}

/*  ================================================== 
     📝 Typography                          
    ================================================== */
.questions-debug h1,
.questions-debug h2,
.questions-debug h3 {
  margin-top: var(--questions-spacing-sm);
  margin-bottom: var(--questions-spacing-base);
  font-weight: var(--questions-font-weight-normal);
}

/*  ================================================== 
     📦 Content Sections                          
    ================================================== */
/**
 * Main content section container
 * Provides consistent spacing and borders
 */
.questions-debug__section {
  margin-bottom: var(--questions-spacing-xl);
  padding: var(--questions-spacing-base);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-debug-border-radius);
  background-color: var(--questions-color-background-light);
  word-break: break-all;
}
@media (min-width: 1024px) {
  .questions-debug__section {
    float: left;
    width: calc(50% - var(--questions-spacing-base));
    max-width: 30%;
    margin-right: var(--questions-spacing-base);
    margin-bottom: var(--questions-spacing-base);
  }
}
@media (min-width: 1024px) {
  .questions-debug__section:nth-child(2n) {
    margin-right: var(--questions-spacing-base);
  }
  .questions-debug__section:nth-child(3n) {
    margin-right: 0;
  }
}

/**
 * Code display area
 * Ensures proper formatting of code snippets
 */
.questions-debug__code {
  background-color: var(--questions-color-background-light);
  padding: var(--questions-spacing-base);
  border-radius: var(--questions-debug-border-radius);
  overflow: auto;
  white-space: pre-wrap;
}

/*  ================================================== 
     🏷️ Status Badges                          
    ================================================== */
/**
 * Base badge styles
 * Used for status indicators and labels
 */
.questions-debug__badge {
  display: inline-block;
  padding: var(--questions-spacing-xs) var(--questions-spacing-sm);
  font-size: var(--questions-font-size-sm);
  font-weight: var(--questions-font-weight-bold);
  border-radius: var(--questions-debug-border-radius);
  margin-right: var(--questions-spacing-sm);
}

/* Success state badge */
.questions-debug__badge--success {
  background-color: #d4edda;
  color: #155724;
}

/* Error state badge */
.questions-debug__badge--danger {
  background-color: #f8d7da;
  color: #721c24;
}

/* Info state badge */
.questions-debug__badge--info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/*  ================================================== 
     📊 Layout Grid                          
    ================================================== */
.questions-debug__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--questions-spacing-base);
}

/*  ================================================== 
     📝 Form Debug Elements                          
    ================================================== */
/**
 * Form group container
 * Provides consistent spacing for form elements
 */
.questions-debug__form-group {
  margin-bottom: var(--questions-spacing-base);
}

/* Form labels */
.questions-debug__form-group label {
  display: block;
  margin-bottom: var(--questions-spacing-sm);
}

/* Form inputs */
.questions-debug__form-group input,
.questions-debug__form-group select {
  padding: var(--questions-spacing-sm);
  width: 100%;
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-debug-border-radius);
}

/* Debug action button */
.questions-debug__button {
  background-color: var(--questions-color-primary);
  color: var(--questions-color-background);
  border: none;
  padding: var(--questions-spacing-sm) var(--questions-spacing-base);
  cursor: pointer;
  border-radius: var(--questions-debug-border-radius);
}

/**
 * 🔍 Accessible Autocomplete Component
 * 
 * Styled autocomplete component using the Questions plugin design system.
 * Based on the accessible-autocomplete library with custom theming.
 * 
 * Features:
 * - Consistent with Questions design system variables
 * - Accessible keyboard navigation
 * - Focus management and visual indicators
 * - Mobile-friendly touch targets
 * - High contrast mode support
 * 
 * Dependencies:
 * - questions.scss design system variables
 */
/* ==========================================================================
   🔍 Autocomplete Wrapper
   ========================================================================== */
.autocomplete__wrapper {
  position: relative;
}

/* ==========================================================================
   📝 Input Elements
   ========================================================================== */
.autocomplete__hint,
.autocomplete__input {
  appearance: none;
  border: var(--questions-input-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-input-border-radius);
  box-sizing: border-box;
  height: var(--questions-input-height);
  line-height: var(--questions-line-height);
  margin-bottom: 0;
  width: 100%;
  font-family: var(--questions-font-family);
  font-size: var(--questions-font-size-base);
  font-weight: var(--questions-font-weight-normal);
  transition: var(--questions-transition);
}

.autocomplete__input {
  background-color: var(--questions-color-input-bg);
  position: relative;
  color: var(--questions-color-input-text);
  padding: var(--questions-input-padding);
}
.autocomplete__input:hover {
  border-color: var(--questions-color-primary);
}

.autocomplete__hint {
  color: var(--questions-color-text-light);
  position: absolute;
  padding: var(--questions-input-padding);
}

/* ==========================================================================
   🎯 Input States
   ========================================================================== */
.autocomplete__input--default {
  padding: var(--questions-input-padding);
}

.autocomplete__input--focused {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 0;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

.autocomplete__input--show-all-values {
  cursor: pointer;
  padding: var(--questions-input-padding) calc(var(--questions-input-padding) + 2rem) var(--questions-input-padding) var(--questions-input-padding);
}

/* ==========================================================================
   ⬇️ Dropdown Arrow (Library's built-in arrow - hidden)
   ========================================================================== */
.autocomplete__dropdown-arrow-down {
  display: none !important; /* Hide library's built-in arrow */
}

/* ==========================================================================
   📋 Dropdown Menu
   ========================================================================== */
.autocomplete__menu {
  background-color: var(--questions-color-background);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-top: 0;
  border-radius: 0 0 var(--questions-border-radius) var(--questions-border-radius);
  color: var(--questions-color-text);
  margin: 0;
  max-height: 21.375rem; /* ~342px at 16px base */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  width: 100%;
  font-family: var(--questions-font-family);
  font-size: var(--questions-font-size-base);
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Custom scrollbar styling */
}
.autocomplete__menu::-webkit-scrollbar {
  width: var(--questions-spacing-xs);
}
.autocomplete__menu::-webkit-scrollbar-track {
  background: var(--questions-color-background-light);
}
.autocomplete__menu::-webkit-scrollbar-thumb {
  background: var(--questions-color-border);
  border-radius: var(--questions-border-radius);
}
.autocomplete__menu::-webkit-scrollbar-thumb:hover {
  background: var(--questions-color-text-light);
}

.autocomplete__menu--visible {
  display: block;
  animation: fadeIn var(--questions-transition-duration) var(--questions-transition-timing);
}

.autocomplete__menu--hidden {
  display: none;
}

.autocomplete__menu--overlay {
  box-shadow: 0 var(--questions-spacing-xs) var(--questions-spacing-md) rgba(0, 0, 0, 0.15);
  left: 0;
  position: absolute;
  top: 100%;
  z-index: 100;
}

.autocomplete__menu--inline {
  position: relative;
}

/* ==========================================================================
   📋 Menu Options
   ========================================================================== */
.autocomplete__option {
  border-bottom: 1px solid var(--questions-color-background-light);
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 1px;
  cursor: pointer;
  display: block;
  position: relative;
  padding: var(--questions-spacing-md);
  font-size: var(--questions-font-size-base);
  font-weight: var(--questions-font-weight-normal);
  transition: var(--questions-transition);
  /* Ensure child elements don't interfere with click events */
}
.autocomplete__option > * {
  pointer-events: none;
}
.autocomplete__option:first-of-type {
  border-top-width: 0;
}
.autocomplete__option:last-of-type {
  border-bottom-width: 0;
}

.autocomplete__option--odd {
  background-color: var(--questions-color-background-light);
}

.autocomplete__option--focused,
.autocomplete__option:hover {
  background-color: var(--questions-color-primary);
  border-color: var(--questions-color-primary);
  color: var(--questions-color-background);
  outline: none;
}

.autocomplete__option--no-results {
  background-color: var(--questions-color-background-light);
  color: var(--questions-color-text-light);
  cursor: not-allowed;
  font-style: italic;
}

/* ==========================================================================
   📱 Responsive Typography
   ========================================================================== */
@media (min-width: 768px) {
  .autocomplete__hint,
  .autocomplete__input,
  .autocomplete__option {
    font-size: var(--questions-font-size-lg);
    line-height: var(--questions-line-height);
  }
}
/* ==========================================================================
   ♿ High Contrast Mode Support
   ========================================================================== */
@media (forced-colors: active) {
  .autocomplete__menu {
    border-color: FieldText;
  }
  .autocomplete__option {
    background-color: Field;
    color: FieldText;
  }
  .autocomplete__option--focused,
  .autocomplete__option:hover {
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
    outline-color: HighlightText;
  }
  .autocomplete__option--no-results {
    background-color: Field;
    color: GrayText;
  }
}
/* ==========================================================================
   ✨ Animations
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-var(--questions-spacing-xs));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   🔧 Utility Classes
   ========================================================================== */
/* Focus trap helper for better accessibility */
.autocomplete__wrapper--focused .autocomplete__input {
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}

/* Loading state */
.autocomplete__wrapper--loading .autocomplete__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M10 3.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm0-1.5a8 8 0 110 16 8 8 0 010-16z' opacity='.4'/%3E%3Cpath fill='%23666' d='M10 2a8 8 0 018 8h-2a6 6 0 00-6-6V2z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--questions-spacing-md) center;
  background-size: 1.25rem;
  padding-right: calc(var(--questions-input-padding) + 2rem);
}

/* ==========================================================================
   🗑️ Clear Button (uses standardized styles from _fields.scss)
   ========================================================================== */
/* Clear button styling is inherited from .questions-input__clear in _fields.scss */
/* Ensure the autocomplete wrapper can position the clear button correctly */
.questions-field__autocomplete-wrapper {
  position: relative;
  /* Make sure the autocomplete wrapper is positioned relative for the clear button */
}
.questions-field__autocomplete-wrapper .autocomplete__wrapper {
  position: relative;
}

/* ==========================================================================
   🎨 Design System Variables
   ========================================================================== */
/* Aliases site theme tokens (main.css) with fallbacks for standalone plugin CSS. */
:root {
  /* ==========================================================================
     🎯 Colors
     ========================================================================== */
  /* --purple, not --lightpurple: lightpurple is 2.63:1 on the light page (WCAG 1.4.3) */
  --questions-color-primary: var(--purple, oklch(0.55 0.25 295));
  --questions-color-primary-hover: color-mix(
    in oklch,
    var(--purple, oklch(0.55 0.25 295)) 85%,
    var(--color-text, black)
  );
  --questions-color-text: var(--color-text, #333333);
  --questions-color-text-light: var(--color-text-muted, #666666);
  --questions-color-border: var(--color-border, #dddddd);
  --questions-color-background: var(--color-surface, #ffffff);
  --questions-color-input-bg: #ffffff;
  /* Fixed dark text to match the fixed white input bg (dark-theme --color-text would be 1.26:1) */
  --questions-color-input-text: oklch(0.22 0.01 30);
  --questions-color-background-light: var(--color-bg-muted, #f0f0f0);
  --questions-color-error: var(--color-error, #e74c3c);
  --questions-color-error-light: var(--color-error-bg, #fef5f5);
  /* ==========================================================================
     📏 Spacing Scale (aliases site --space-*; fallbacks for standalone CSS)
     ========================================================================== */
  --questions-spacing-xs: var(--space-2xs, 0.25rem);
  --questions-spacing-sm: var(--space-xs, 0.5rem);
  --questions-spacing-md: var(--space-sm, 0.75rem);
  --questions-spacing-base: var(--space-md, 1rem);
  --questions-spacing-lg: var(--space-lg, 1.25rem);
  --questions-spacing-xl: var(--space-xl, 1.5rem);
  --questions-spacing-xxl: var(--space-2xl, 2rem);
  /* Container spacing */
  --questions-container-padding: var(--questions-spacing-xs);
  /* ==========================================================================
     📝 Typography System
     ========================================================================== */
  /* Font family stack */
  --questions-font-family:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Font size scale (aliases site --text-*; fallbacks for standalone CSS) */
  --questions-font-size-xs: var(--text-xs, 0.75rem); /* 12px @ 16px root */
  --questions-font-size-sm: var(--text-sm, 0.875rem); /* 14px */
  --questions-font-size-base: var(--text-base, 1rem); /* 16px - prevents zoom on iOS */
  --questions-font-size-lg: var(--text-lg, 1.125rem); /* 18px */
  --questions-font-size-xl: var(--text-xl, 1.25rem); /* 20px */
  /* Line height and font weights */
  --questions-line-height: 1.5;
  --questions-font-weight-normal: 400;
  --questions-font-weight-medium: 500;
  --questions-font-weight-bold: 600;
  /* Hyphenation: none (off) | manual | auto. Set to auto to enable. */
  --questions-hyphens: none;
  /* ==========================================================================
     🔲 Borders & Effects
     ========================================================================== */
  --questions-border-radius: 4px;
  --questions-border-width: 1px;
  --questions-focus-ring-width: 3px;
  --questions-focus-ring-alpha: 0.25;
  /* ==========================================================================
     ⚡ Animations
     ========================================================================== */
  --questions-transition: var(--questions-transition-duration)
    var(--questions-transition-timing);
  --questions-transition-duration: var(
    --transition-fast,
    0.2s
  ); /* use global settings with fallback */
  --questions-transition-timing: ease;
  /* ==========================================================================
     📐 Layout (Mobile-First)
     ========================================================================== */
  --questions-content-width: 48rem; /* matches site .mw7 */
  --questions-form-max-width: 100%;
  --questions-input-height: 2.75rem; /* 44px - touch-friendly */
  --questions-button-height: 2.75rem; /* 44px - touch-friendly */
  /* ==========================================================================
     🎛️ Input Controls
     ========================================================================== */
  --questions-input-size: 1.125rem;
  --questions-input-border-width: var(--questions-border-width);
  --questions-input-border-radius: var(--questions-border-radius);
  --questions-input-padding: var(--questions-spacing-md);
  --questions-input-gap: var(--questions-spacing-sm);
  /* ==========================================================================
     📊 Progress Bar
     ========================================================================== */
  --questions-progress-height: 8px;
  --questions-progress-border-radius: var(--questions-border-radius);
  /* ==========================================================================
     🔧 Debug Tools
     ========================================================================== */
  --questions-debug-font-family: "SF Mono", monospace;
  --questions-debug-font-size: 0.65em;
  --questions-debug-border-radius: 0.25em;
}

/* ==========================================================================
   📱 Responsive Design Variables
   ========================================================================== */
/* Tablet and larger screens */
@media (min-width: 768px) {
  :root {
    /* Increase container padding */
    --questions-container-padding: var(--questions-spacing-lg);
    /* Standard site content width */
    --questions-form-max-width: var(--questions-content-width);
  }
}
/* Desktop screens */
@media (min-width: 1024px) {
  :root {
    /* Larger container padding */
    --questions-container-padding: var(--questions-spacing-xl);
  }
}
/* ==========================================================================
   🌐 Global Box-Sizing Reset
   ========================================================================== */
.questions-form *,
.questions-form *::before,
.questions-form *::after {
  box-sizing: border-box;
}

.questions-form {
  hyphens: var(--questions-hyphens);
}

/* Autosuggestion field styles */
.questions-field--autosuggestion .questions-field__input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.questions-field--autosuggestion .questions-field__mappings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--questions-color-border);
}
.questions-field--autosuggestion .questions-field__mapping {
  margin-bottom: 1rem;
}
.questions-field--autosuggestion .questions-field__mapping:last-child {
  margin-bottom: 0;
}
.questions-field--autosuggestion .questions-field__textarea {
  width: 100%;
  padding: var(--questions-input-padding);
  border: var(--questions-border-width) solid var(--questions-color-border);
  border-radius: var(--questions-border-radius);
  font-family: var(--questions-font-family);
  font-size: var(--questions-font-size-base);
  resize: vertical;
  transition: var(--questions-transition);
}
.questions-field--autosuggestion .questions-field__textarea:hover {
  border-color: var(--questions-color-primary);
}
.questions-field--autosuggestion .questions-field__textarea:focus {
  outline: var(--questions-focus-ring-width) solid var(--questions-color-primary);
  outline-offset: 0;
  border-color: var(--questions-color-primary);
  box-shadow: 0 0 0 var(--questions-focus-ring-width) rgba(74, 144, 226, var(--questions-focus-ring-alpha));
}
.questions-field--autosuggestion .questions-field__warning {
  background-color: var(--questions-color-error-light);
  border: var(--questions-border-width) solid var(--questions-color-error);
  border-radius: var(--questions-border-radius);
  padding: var(--questions-spacing-md);
  margin-bottom: 1rem;
}
.questions-field--autosuggestion .questions-field__warning p {
  margin: 0 0 var(--questions-spacing-sm) 0;
  color: var(--questions-color-error);
  font-size: var(--questions-font-size-sm);
}
.questions-field--autosuggestion .questions-field__warning p:last-child {
  margin-bottom: 0;
  font-size: var(--questions-font-size-sm);
  opacity: 0.8;
}