/**
 * File Name: gco-ui-form.css
 * Project: GCO UI CSS Architecture Migration
 * Pattern: gco_basic_form
 *
 * Contract:
 * - Implements governed form controls using authoritative ACC field-state semantics.
 * - Theme agnostic.
 * - Form owns labels, controls, required indicator, field-state surfaces, and interaction states.
 * - Default context is a dark host; --on-light explicitly selects a light host.
 * - Controls remain light interactive surfaces and own dark foreground text.
 * - Persistent selected styling is used only for selection-capable controls.
 * - Native admin control selectors retain pattern ownership against host input/select rules.
 */

.gco-ui-form {
  --gco-ui-form-current-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-form-current-muted-foreground: var(--gco-ui-text-muted-on-dark);
  --gco-ui-form-required-foreground: var(--gco-ui-form-current-foreground);
  --gco-ui-form-control-regular-background: var(--gco-ui-bg-light-background);
  --gco-ui-form-control-regular-foreground: var(--gco-ui-text-on-light);
  --gco-ui-form-control-border: var(--gco-ui-color-rim);
  --gco-ui-form-control-empty-optional-background: var(--gco-ui-bg-light-background-alt);
  --gco-ui-form-control-empty-required-background: var(--gco-ui-color-state-selected-light);
  --gco-ui-form-control-populated-background: var(--gco-ui-color-state-hover-light);
  --gco-ui-form-control-informational-background: var(--gco-ui-bg-light-background);
  --gco-ui-form-choice-hover-background: var(--gco-ui-color-state-hover-light);
  --gco-ui-form-choice-selected-background: var(--gco-ui-color-state-selected-light);
  --gco-ui-form-choice-light-foreground: var(--gco-ui-text-on-light);

  display: grid;
  gap: var(--gco-ui-space-4);
  font-family: var(--gco-ui-font-family);
  font-size: var(--gco-ui-font-size-2);
  line-height: var(--gco-ui-line-height);
  color: var(--gco-ui-form-current-foreground);
}

.gco-ui-form--on-light {
  --gco-ui-form-current-foreground: var(--gco-ui-text-on-light);
  --gco-ui-form-current-muted-foreground: var(--gco-ui-text-muted-on-light);
}

.gco-ui-form__field {
  display: grid;
  gap: var(--gco-ui-space-2);
  min-width: 0;
}

.gco-ui-form__label,
.gco-ui-form__legend {
  font-family: var(--gco-ui-font-family);
  font-size: var(--gco-ui-font-size-2);
  font-weight: var(--gco-ui-font-weight-bold);
  line-height: var(--gco-ui-line-height);
  color: var(--gco-ui-form-current-foreground);
  margin: 0;
}

.gco-ui-form__required {
  color: var(--gco-ui-form-required-foreground);
  font-weight: var(--gco-ui-font-weight-bold);
}

.gco-ui-form__control,
body.wp-admin .gco-ui-form .gco-ui-form__control {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--gco-ui-space-2) var(--gco-ui-space-3);
  border: 2px solid var(--gco-ui-form-control-border);
  border-radius: var(--gco-ui-radius-2);
  background: var(--gco-ui-form-control-regular-background);
  color: var(--gco-ui-form-control-regular-foreground);
  font-family: var(--gco-ui-font-family);
  font-size: var(--gco-ui-font-size-2);
  font-weight: var(--gco-ui-font-weight-normal);
  line-height: var(--gco-ui-line-height);
  box-shadow: none;
}

.gco-ui-form__field--empty-optional > .gco-ui-form__control,
body.wp-admin .gco-ui-form .gco-ui-form__field--empty-optional > .gco-ui-form__control {
  background: var(--gco-ui-form-control-empty-optional-background);
}

.gco-ui-form__field--empty-required > .gco-ui-form__control,
body.wp-admin .gco-ui-form .gco-ui-form__field--empty-required > .gco-ui-form__control {
  background: var(--gco-ui-form-control-empty-required-background);
}

.gco-ui-form__field--populated > .gco-ui-form__control,
body.wp-admin .gco-ui-form .gco-ui-form__field--populated > .gco-ui-form__control {
  background: var(--gco-ui-form-control-populated-background);
}

.gco-ui-form__field--informational > .gco-ui-form__control,
body.wp-admin .gco-ui-form .gco-ui-form__field--informational > .gco-ui-form__control {
  background: var(--gco-ui-form-control-informational-background);
}

.gco-ui-form__control:not([readonly]):not(:disabled):hover,
body.wp-admin .gco-ui-form .gco-ui-form__control:not([readonly]):not(:disabled):hover {
  box-shadow: var(--gco-ui-interaction-hover-ring);
}

.gco-ui-form__control:focus-visible,
body.wp-admin .gco-ui-form .gco-ui-form__control:focus-visible {
  outline: var(--gco-ui-interaction-focus-ring-width) solid var(--gco-ui-interaction-focus-ring-color);
  outline-offset: var(--gco-ui-interaction-focus-ring-offset);
}

.gco-ui-form__control[readonly],
body.wp-admin .gco-ui-form .gco-ui-form__control[readonly] {
  cursor: default;
}

.gco-ui-form__fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.gco-ui-form__choices {
  display: grid;
  gap: var(--gco-ui-space-2);
}

.gco-ui-form__choice {
  display: flex;
  align-items: center;
  gap: var(--gco-ui-space-2);
  padding: var(--gco-ui-space-2) var(--gco-ui-space-3);
  border: 2px solid var(--gco-ui-form-control-border);
  border-radius: var(--gco-ui-radius-2);
  color: var(--gco-ui-form-current-foreground);
  font-family: var(--gco-ui-font-family);
  font-size: var(--gco-ui-font-size-2);
  font-weight: var(--gco-ui-font-weight-normal);
  line-height: var(--gco-ui-line-height);
  cursor: pointer;
}

.gco-ui-form__choice-input {
  accent-color: var(--gco-ui-color-accent);
}

.gco-ui-form__choice:hover {
  background: var(--gco-ui-form-choice-hover-background);
  color: var(--gco-ui-form-choice-light-foreground);
  box-shadow: var(--gco-ui-interaction-hover-ring);
}

.gco-ui-form__choice:has(.gco-ui-form__choice-input:checked) {
  background: var(--gco-ui-form-choice-selected-background);
  color: var(--gco-ui-form-choice-light-foreground);
  font-weight: var(--gco-ui-font-weight-bold);
}

.gco-ui-form__choice:has(.gco-ui-form__choice-input:checked):hover {
  background: var(--gco-ui-form-choice-selected-background);
  box-shadow: var(--gco-ui-interaction-hover-ring);
}

.gco-ui-form__choice:has(.gco-ui-form__choice-input:focus-visible) {
  outline: var(--gco-ui-interaction-focus-ring-width) solid var(--gco-ui-interaction-focus-ring-color);
  outline-offset: var(--gco-ui-interaction-focus-ring-offset);
}

.gco-ui-form__help {
  margin-block-end: 0;
}

/* Keep the native select arrow when governed background replaces admin chrome. */
body.wp-admin .gco-ui-form select.gco-ui-form__control {
  appearance: auto;
}