/* Modern Natural — explicit, geometry-neutral production control skin.
 * Owners retain dimensions, padding, type, icons, native appearance and behavior.
 * The named important layer is deliberately limited to visual properties: legacy
 * member/lesson/plant owners use unlayered !important declarations. A layer avoids
 * duplicating their selectors or escalating specificity in every consumer.
 * Never opt a composite widget in merely because it contains an input.
 */
@layer al-product-forms {
  :root {
    --al-form-background: var(--al-surface-card);
    /* Controls need a stronger boundary than a decorative card border (AA 3:1). */
    --al-form-border: var(--al-surface-border-empty);
    --al-form-border-hover: var(--al-surface-border-hover);
    --al-form-text: var(--al-surface-ink);
    --al-form-placeholder: var(--al-surface-ink-muted);
    --al-form-disabled-background: var(--al-surface-subtle);
    --al-form-disabled-text: var(--al-surface-ink-muted);
    --al-form-readonly-background: var(--al-surface-subtle);
    --al-form-error: var(--al-button-danger, #963939);
    --al-form-success: var(--al-surface-border-selected);
    --al-form-focus: var(--al-surface-border-hover);
    --al-form-accent: var(--al-surface-border-selected);
    --al-form-radius: var(--al-surface-radius-compact);
    --al-form-transition: none;
  }

  :where(.al-form-control, .al-form-surface) {
    background-color: var(--al-form-background) !important;
    border-color: var(--al-form-border) !important;
    border-style: solid !important;
    border-radius: var(--al-form-radius) !important;
    color: var(--al-form-text) !important;
    box-shadow: none !important;
    transition: var(--al-form-transition) !important;
  }
  /* Do not erase native/module select arrows or attached unit geometry. */
  :where(input.al-form-control, textarea.al-form-control, .al-form-surface) {
    background-image: none !important;
  }
  :where(.al-form-control)::placeholder {
    color: var(--al-form-placeholder) !important;
    opacity: 1 !important;
  }
  :where(.al-form-control:hover:not(:disabled):not([aria-disabled="true"]), .al-form-surface:hover) {
    border-color: var(--al-form-border-hover) !important;
  }
  :where(.al-form-control:focus, .al-form-surface:has(> .al-form-control:focus)) {
    border-color: var(--al-form-focus) !important;
    outline: 2px solid var(--al-form-focus) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  :where(.al-form-control[readonly]) {
    background-color: var(--al-form-readonly-background) !important;
  }
  :where(.al-form-control:disabled, .al-form-control[aria-disabled="true"]) {
    background-color: var(--al-form-disabled-background) !important;
    border-color: var(--al-form-border) !important;
    color: var(--al-form-disabled-text) !important;
    opacity: 1 !important;
  }
  /* Existing explicit validation only; never mark untouched required fields red. */
  :where(.al-form-control[aria-invalid="true"], .al-form-control[aria-invalid=""], .al-form-control.is-invalid) {
    border-color: var(--al-form-error) !important;
  }
  :where(.al-form-control.is-valid) {
    border-color: var(--al-form-success) !important;
  }
  /* Compound search owns its border; keep its input and submit control separate. */
  :where(.al-form-control--embedded) {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
  }
  :where(.al-form-choice) {
    accent-color: var(--al-form-accent) !important;
  }
  :where(.al-form-choice):focus-visible {
    outline: 2px solid var(--al-form-focus) !important;
    outline-offset: 2px !important;
  }
  /* State styling is opt-in; no live-region, validation or disabling behavior. */
  :where(.al-form-message--error) { color: var(--al-form-error); }
  :where(.al-form-message--success) { color: var(--al-form-success); }
  @media (prefers-reduced-motion: reduce) {
    :where(.al-form-control, .al-form-surface, .al-form-choice) { transition: none !important; }
  }
  @media (forced-colors: active) {
    :where(.al-form-control, .al-form-surface) {
      border-color: ButtonText !important;
      background-color: Canvas !important;
      color: CanvasText !important;
    }
    :where(.al-form-control):focus,
    :where(.al-form-choice):focus-visible,
    :where(.al-form-surface):has(> .al-form-control:focus) { outline-color: Highlight !important; }
    :where(.al-form-control:disabled) { color: GrayText !important; border-color: GrayText !important; }
    :where(.al-form-control--embedded) { border-color: transparent !important; }
  }
}