@layer components {
/* forms.css — Form component styles */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--space-block);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.form-label.is-required::after {
  content: " *";
  color: var(--color-negative);
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-canvas-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  line-height: 1.5;
  appearance: none;
}

.form-input::placeholder {
  color: var(--color-ink-muted);
}

.form-input:focus {
  border-color: var(--color-primary);
  background: var(--color-canvas-raised);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

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

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-canvas-raised);
}

.form-input.is-invalid {
  border-color: var(--color-negative);
}

.form-input.is-invalid:focus {
  border-color: var(--color-negative);
  box-shadow: 0 0 0 3px var(--color-negative-soft);
}

/* Validation message for a field or a refused submit. UIGUIDE documents this
   class under Error/Validation States; it had never been written, so the
   runner's error markup would have rendered unstyled had it ever been shown. */
.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--line-height-normal);
  color: var(--color-negative);
}

.form-error__list {
  margin: 0;
  padding-left: var(--space-4);
  list-style: disc;
}

.form-textarea {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-canvas-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  line-height: 1.5;
  min-height: 8rem;
  resize: vertical;
}

.form-textarea::placeholder {
  color: var(--color-ink-muted);
}

.form-textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-canvas-raised);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-canvas-raised);
}

.form-textarea.is-invalid {
  border-color: var(--color-negative);
}

.form-textarea.is-invalid:focus {
  border-color: var(--color-negative);
  box-shadow: 0 0 0 3px var(--color-negative-soft);
}

/* Select with custom chevron arrow */
.form-select {
  display: block;
  width: 100%;
  padding: 0.55rem 2.5rem 0.55rem 0.75rem;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-canvas-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}

.form-select:focus {
  border-color: var(--color-primary);
  background-color: var(--color-canvas-raised);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-canvas-raised);
}

.form-select.is-invalid {
  border-color: var(--color-negative);
}

.form-select.is-invalid:focus {
  border-color: var(--color-negative);
  box-shadow: 0 0 0 3px var(--color-negative-soft);
}

/* Checkbox and radio */
.form-checkbox,
.form-radio {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-link);
  cursor: pointer;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.form-radio {
  border-radius: var(--radius-full);
}

/* A native checkbox draws its own box, so border-color — which is what
   .is-invalid sets everywhere else — is invisible on it. An outline is the one
   thing that shows. Without this the class rendered as "no style applied" on
   two of the five field types, which looks plausible in a screenshot and is
   exactly what UIGUIDE checklist 13 is about. */
.form-checkbox.is-invalid,
.form-radio.is-invalid {
  outline: 2px solid var(--color-negative);
  outline-offset: 1px;
}

.form-checkbox:focus-visible,
.form-radio:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Checkbox/radio label row */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check .form-label {
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.form-check label {
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
}

/* Hint / helper text */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  line-height: 1.4;
}

/* Validation error message */
.field-container .error-message,
.form-group .error-message {
  font-size: var(--text-xs);
  color: var(--color-negative);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Rails-generated field_with_errors wrapper */
.field_with_errors .form-input,
.field_with_errors .form-textarea,
.field_with_errors .form-select {
  border-color: var(--color-negative);
}

.field_with_errors .form-label {
  color: var(--color-negative);
}

/* Inline form layout */
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.form-inline .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

/* Search input variant */
.form-search {
  padding-left: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.625rem center;
  background-size: 1rem 1rem;
}

/* Required field indicator */
.form-required-indicator {
  color: var(--color-negative);
  margin-left: 0.125rem;
  font-weight: 400;
}

/* ============================================================================
   Field Container (step field groups)
   ============================================================================ */

.field-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================================================
   Answer Type Grid (radio button pill selector for question steps)
   ============================================================================ */

.answer-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.answer-type-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-canvas-raised);
  color: var(--color-ink-subtle);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  user-select: none;
}

.answer-type-option:hover {
  border-color: var(--color-border-strong);
  background: var(--color-canvas-alt);
  color: var(--color-ink);
}

.answer-type-option.is-selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

[data-theme="dark"] .answer-type-option.is-selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* ============================================================================
   Option Item (multiple choice / dropdown option rows)
   ============================================================================ */

.option-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.option-item__delete {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  color: var(--color-ink-muted) !important;
  flex-shrink: 0;
}

.option-item__delete:hover {
  color: var(--color-negative) !important;
}

.option-item:hover .option-item__delete {
  opacity: 1;
}
}