/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Mobile-friendly select dropdown styling */
select {
  /* Ensure proper sizing on mobile */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

/* Ensure consistent height for touch targets */
@media (max-width: 640px) {
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Reserved for future global CSS overrides */

.survey-lifecycle { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #fff; color: #17263c; }
.survey-lifecycle-steps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.survey-lifecycle-steps li { display: flex; align-items: center; gap: .35rem; color: #64748b; font-size: .875rem; }
.survey-lifecycle-steps li span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid currentColor; border-radius: 50%; }
.survey-lifecycle-steps li[aria-current] { color: #174da6; font-weight: 700; }
.survey-lifecycle-steps li[aria-current] span { background: #174da6; color: white; }
.survey-lifecycle-steps .is-complete { color: #166534; }
.survey-lifecycle h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.survey-lifecycle p { max-width: 75ch; }
.survey-lifecycle .survey-lifecycle-session { margin-top: .5rem; font-size: .8rem; color: #64748b; }
.survey-lifecycle.is-compact { margin: 0; padding: 0; border: 0; background: transparent; }
.survey-lifecycle.is-compact .survey-lifecycle-steps { margin: 0; gap: .5rem 1.4rem; }