/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3B: Form/input primitives

   Scope:
   - Fields, labels, hints, errors
   - Text inputs, selects, textareas
   - Safe legacy form compatibility

   This file intentionally avoids cards, buttons, tabs, modals/sheets,
   header/auth UI, tanks custom controls, and profile ghost-edit fields.
   ====================================================================== */

#alMemberArea {
  --almx-field-gap: var(--almx-space-2);
  --almx-field-group-gap: var(--almx-space-4);
  --almx-field-label-text: var(--almx-color-text);
  --almx-field-hint-text: var(--almx-color-text-muted);
  --almx-field-error-text: var(--almx-color-danger);
  --almx-input-height: var(--almx-control-h);
  --almx-input-padding-y: 10px;
  --almx-input-padding-x: 12px;
  --almx-input-radius: var(--almx-form-radius);
  --almx-input-bg: var(--almx-form-bg);
  --almx-input-border: color-mix(in srgb, var(--almx-form-border) 86%, #fff);
  --almx-input-text: var(--almx-form-text);
  --almx-input-placeholder: var(--almx-form-placeholder);
  --almx-input-shadow: var(--almx-shadow-xs);
  --almx-input-focus-border: color-mix(in srgb, var(--almx-color-brand) 45%, var(--almx-color-border));
  --almx-input-focus-ring: var(--almx-form-focus-ring);
  --almx-input-disabled-bg: color-mix(in srgb, var(--almx-color-surface-muted) 70%, #fff);
  --almx-textarea-min-h: calc(var(--almx-control-h) * 2.35);
}

#alMemberArea .almx-field {
  display: grid;
  gap: var(--almx-field-gap);
  min-width: 0;
}

#alMemberArea .almx-field__label {
  color: var(--almx-field-label-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

#alMemberArea .almx-field__hint {
  color: var(--almx-field-hint-text);
  font-size: 12px;
  line-height: 1.35;
}

#alMemberArea .almx-field__error {
  color: var(--almx-field-error-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

#alMemberArea .almx-field-group {
  display: grid;
  gap: var(--almx-field-group-gap);
  min-width: 0;
}

#alMemberArea .almx-input,
#alMemberArea .almx-select,
#alMemberArea .almx-textarea,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) select:not([role="switch"]),
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) .al-input:not([type="range"]):not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) .al-select:not([role="switch"]),
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--almx-input-height) !important;
  border: 1px solid var(--almx-input-border) !important;
  border-radius: var(--almx-input-radius) !important;
  padding: var(--almx-input-padding-y) var(--almx-input-padding-x) !important;
  background: var(--almx-input-bg) !important;
  color: var(--almx-input-text) !important;
  box-shadow: var(--almx-input-shadow) !important;
  font: inherit !important;
  line-height: 1.35 !important;
  transition:
    border-color var(--almx-motion-fast) var(--almx-motion-ease),
    box-shadow var(--almx-motion-fast) var(--almx-motion-ease),
    background-color var(--almx-motion-fast) var(--almx-motion-ease) !important;
}

#alMemberArea .almx-textarea,
#alMemberArea:not(.al-tanks) .al-textarea,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost) {
  min-height: var(--almx-textarea-min-h) !important;
  resize: vertical !important;
}

#alMemberArea .almx-input::placeholder,
#alMemberArea .almx-textarea::placeholder,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) .al-input:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost)::placeholder {
  color: var(--almx-input-placeholder) !important;
  opacity: 1 !important;
}

#alMemberArea .almx-input:focus,
#alMemberArea .almx-select:focus,
#alMemberArea .almx-textarea:focus,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) select:focus,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) .al-input:not([type="range"]):not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) .al-select:focus,
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost):focus {
  outline: none !important;
  border-color: var(--almx-input-focus-border) !important;
  box-shadow: var(--almx-input-focus-ring) !important;
}

#alMemberArea .almx-input[aria-invalid="true"],
#alMemberArea .almx-select[aria-invalid="true"],
#alMemberArea .almx-textarea[aria-invalid="true"],
#alMemberArea:not(.al-tanks) input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) select[aria-invalid="true"],
#alMemberArea:not(.al-tanks) textarea[aria-invalid="true"]:not(.al-ghost-textarea):not(.al-edit--ghost) {
  border-color: color-mix(in srgb, var(--almx-color-danger) 55%, var(--almx-color-border)) !important;
}

#alMemberArea .almx-input[aria-invalid="true"]:focus,
#alMemberArea .almx-select[aria-invalid="true"]:focus,
#alMemberArea .almx-textarea[aria-invalid="true"]:focus,
#alMemberArea:not(.al-tanks) input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) select[aria-invalid="true"]:focus,
#alMemberArea:not(.al-tanks) textarea[aria-invalid="true"]:not(.al-ghost-textarea):not(.al-edit--ghost):focus {
  box-shadow: var(--almx-glow-danger) !important;
}

#alMemberArea .almx-input:disabled,
#alMemberArea .almx-select:disabled,
#alMemberArea .almx-textarea:disabled,
#alMemberArea:not(.al-tanks) input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) select:disabled,
#alMemberArea:not(.al-tanks) textarea:disabled:not(.al-ghost-textarea):not(.al-edit--ghost) {
  background: var(--almx-input-disabled-bg) !important;
  cursor: not-allowed !important;
  opacity: .65 !important;
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-input,
  #alMemberArea .almx-select,
  #alMemberArea .almx-textarea {
    transition: none !important;
  }
}