/* ==========================================================================
   Form Components
   ========================================================================== */

.form-field {
  margin-bottom: var(--space-lg);
}

.form-field label,
.form-field .form-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--warm-grey-dark);
}

.form-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.form-field-header label {
  margin-bottom: 0;
}

.field-hint {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--warm-grey-light);
}

.text-input,
.color-input {
  width: 100%;
  max-width: 30rem;
  padding: var(--space-sm);
  border: 2px solid var(--parchment-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--parchment-50);
  color: var(--warm-grey-dark);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-input--monospace {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 0.85rem;
}

select.text-input {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a5550' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.text-input:focus,
.color-input:focus {
  outline: none;
  border-color: var(--warm-grey);
}

.color-input {
  max-width: 10rem;
  height: 3rem;
  padding: var(--space-xs);
}

/* Color scheme picker */
.color-scheme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: 40rem;
}

.color-scheme-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.color-scheme-option {
  cursor: pointer;
  margin: 0;
  display: block;
}

.color-scheme-preview {
  height: 5rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--parchment-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base) ease;
}

.color-scheme-preview:hover {
  border-color: var(--warm-grey);
  box-shadow: var(--shadow-sm);
}

.color-scheme-radio:checked + .color-scheme-option .color-scheme-preview {
  border-color: var(--warm-grey-dark);
  border-width: 3px;
  box-shadow: var(--shadow-md);
}

.color-scheme-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.02em;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: normal;
  cursor: pointer;
}

/* Form hint card — pale background for collapsible details sections */
.form-hint--card {
  background-color: var(--parchment-50, white);
  border: 1px solid var(--parchment-300, #e0d8cc);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--grey-600, #6b6b6b);
}

.form-hint--card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--warm-grey);
}

.form-hint--card p {
  margin: var(--space-xs) 0 0;
}

.form-actions {
  margin-top: var(--space-xl);
  display: flex;
  gap: var(--space-md);
}

/* Inline field errors */
.field-error {
  color: var(--color-error);
  font-size: 0.9rem;
  margin-top: var(--space-xs);
  min-height: 1.5rem;
}

.field_with_errors {
  display: contents;
}

.field_with_errors .text-input,
.field_with_errors .color-input,
.field_with_errors lexxy-editor {
  border-color: var(--color-error);
  border-width: 2px;
}

.field_with_errors .text-input:focus,
.field_with_errors .color-input:focus,
.field_with_errors lexxy-editor:focus {
  border-color: var(--color-error);
  outline: none;
}

/* Field warnings - advisory messages that don't block submission */
.field-warning {
  background-color: var(--parchment-100);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--grey-700);
}

/* Typed trait input wrapper - positions save indicator inside input */
.typed-input-wrapper {
  position: relative;
  max-width: 30rem;
  width: 100%;
}

.typed-input-wrapper .text-input {
  max-width: none;
}

.typed-input-wrapper select.text-input {
  padding-right: 4rem;
}

.typed-input-wrapper .autosave-progress-indicator {
  top: 50%;
  bottom: auto;
  right: 0.5rem;
  transform: translateY(-50%);
}

.typed-input-wrapper:has(select) .autosave-progress-indicator {
  right: 2.25rem;
}

/* Disabled input style */
.text-input.disabled,
.text-input:disabled {
  background-color: var(--parchment-dark);
  color: var(--warm-grey-light);
  cursor: not-allowed;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) /* tablet */ {
  .text-input,
  .color-input {
    max-width: 100%;  /* Full width on mobile */
  }

  /* Color scheme picker: 2 columns on mobile instead of 3 */
  .color-scheme-picker {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  .color-scheme-preview {
    height: 4rem;  /* Slightly smaller */
  }

  .form-actions {
    flex-direction: column;  /* Stack buttons vertically */
    gap: var(--space-sm);
  }

  .form-actions .button-primary,
  .form-actions .button-secondary {
    width: 100%;  /* Full width buttons */
    text-align: center;
  }

  /* Buttons - Ensure adequate touch targets (44x44px minimum) */
  .button-primary,
  .button-secondary {
    padding: var(--space-md) var(--space-md);  /* Larger touch target */
    min-height: 44px;  /* iOS minimum touch target */
  }
}

/* ==========================================================================
   Icon Selector Form Component
   ========================================================================== */

.icon-selector-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.icon-selector-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: var(--space-sm);
  background-color: var(--parchment-base);
  border: 2px solid var(--parchment-400);
  border-radius: var(--radius-md);
}

.icon-selector-preview-container:empty {
  border-style: dashed;
  border-color: var(--parchment-300);
}

.icon-selector-preview-container .icon-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ==========================================================================
   Visual Style Picker
   ========================================================================== */

.visual-style-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 640px) {
  .visual-style-picker {
    grid-template-columns: repeat(2, 1fr);
  }
}

.visual-style-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.visual-style-option {
  flex: 1;
  min-width: 200px;
  padding: var(--space-md);
  border: 2px solid var(--parchment-400);
  border-radius: var(--radius-md);
  background: var(--parchment-50);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
}

.visual-style-option:hover {
  border-color: var(--color-accent);
  background: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.visual-style-radio:checked + .visual-style-option {
  border-color: var(--color-accent);
  background: white;
  box-shadow: var(--shadow-lg);
}

.visual-style-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}

.visual-style-svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentcolor;
}

.visual-style-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--grey-700);
  white-space: nowrap;
}

.visual-style-desc {
  font-size: var(--text-xs);
  color: var(--grey-500);
  display: block;
  margin-top: var(--space-2xs);
}