/*
 * components/forms: the form controls of ui/forms.js, lifted from the DS components/forms/*.jsx.
 *
 * FormField: 2px from label to control (a label belongs to its control; FormStack's 8px row gap stays well above
 * it), the label regular --text-sm in --text-body ink (not --type-label: a stack of 500-weight labels reads as a wall
 * of bold), the required asterisk in danger ink, the message --type-caption at --text-2xs (hint muted, error danger;
 * the error replaces the hint).
 * FieldStyles.control: ONE box for everything you type into: --control-h-sm (28px), --text-sm, --radius-control, a
 * --border-default hairline that firms to --border-strong on hover, --border-focus + --focus-ring on focus, a danger
 * border (and no ring) when invalid, disabled = sunken fill at 50% and not-allowed.
 * The text beside a checkbox, switch or radio (FieldStyles.optionLabel) is one step below the label: --text-2xs.
 */

/* ---- FormField ---- */
.ae-field { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; } /* 2px: DS FormField */
/* a floated legend is a normal grid item, not the fieldset's "rendered legend" drawn into its border */
.ae-field > legend { float: left; width: 100%; padding: 0; }
.ae-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.ae-field__label { font: var(--type-body); font-size: var(--text-sm); color: var(--text-body); }
.ae-field__required { margin-left: var(--s-1); color: var(--status-danger-fg); }
.ae-field__optional { color: var(--text-muted); }
.ae-field__message { font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-muted); }
.ae-field__message.is-error { font: var(--type-caption); font-size: var(--text-2xs); color: var(--status-danger-fg); }
.ae-field__count { font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
.ae-field__count.is-over { color: var(--status-danger-fg); font-weight: var(--weight-semibold); }

.ae-field__label-row.is-label-hidden { justify-content: flex-end; } /* the label is hidden, its count is not */

/* ---- the control box (DS FieldStyles.control) ---- */
.ae-input, .ae-textarea, .ae-select__control {
  display: block; width: 100%; min-width: 0; height: var(--control-h-sm); margin: 0; padding: 0 var(--s-3);
  background: var(--surface-card); color: var(--text-strong);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-control);
  font: var(--type-body); font-size: var(--text-sm);
  outline: none; box-shadow: none; transition: var(--transition-control);
}
.ae-input--mono { font-family: var(--font-mono); }
.ae-input::placeholder, .ae-textarea::placeholder { color: var(--text-subtle); opacity: 1; }
.ae-input:hover, .ae-textarea:hover, .ae-select__control:hover { border-color: var(--border-strong); }
.ae-input:focus, .ae-textarea:focus, .ae-select__control:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.ae-input[aria-invalid="true"], .ae-textarea[aria-invalid="true"], .ae-select__control[aria-invalid="true"] {
  border-color: var(--status-danger-fg); box-shadow: none;
}
.ae-input:disabled, .ae-textarea:disabled, .ae-select__control:disabled {
  background: var(--surface-sunken); border-color: var(--border-default); opacity: 0.5; cursor: not-allowed;
}
/* the form canvas swaps the brand focus ring for a neutral one on its fields (DS readme, States; chrome.css) */
.ae-form-canvas :is(.ae-input, .ae-textarea, .ae-select__control):focus:not([aria-invalid="true"]) {
  border-color: var(--form-canvas-focus-border); box-shadow: var(--form-canvas-focus-ring);
}
/* ...but a dialog opened from a canvas page is its own form shell, which keeps the brand ring ("the other two form
   shells keep the brand ring", chrome.css): the same dialog field looks the same wherever the dialog is opened */
.ae-form-canvas .ae-dialog :is(.ae-input, .ae-textarea, .ae-select__control):focus:not([aria-invalid="true"]) {
  border-color: var(--border-focus); box-shadow: var(--focus-ring);
}

/* DS Textarea: the same box, a real border, vertical resize, the wide scrollbar */
.ae-textarea { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--leading-normal); resize: vertical; }

/* DS Select: the caret is --text-subtle, a step lighter than the value; 26px right inset leaves it room */
.ae-select { position: relative; min-width: 0; }
.ae-select__control { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; text-overflow: ellipsis; }
.ae-select__control option { background: var(--surface-raised); color: var(--text-strong); }
.ae-select__caret {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-subtle);
}

/* ---- option rows: checkbox, switch, radio (DS FieldStyles.optionLabel) ---- */
.ae-option-text { display: grid; gap: 2px; min-width: 0; }
.ae-option-label { font: var(--type-body); font-size: var(--text-2xs); color: var(--text-body); cursor: pointer; overflow-wrap: anywhere; }
.is-disabled > .ae-option-text .ae-option-label, .ae-radio.is-disabled .ae-option-label { cursor: not-allowed; }

/* DS Checkbox: 16px box, 2px --text-muted edge when empty (a border grey reads as disabled), --radius-xs; ticked =
   the neutral charcoal --table-control-fg (or the opt-in brand), 12px glyph at a 3.5 stroke. The tick uses
   --surface-card: white in light (the DS's --ae-neutral-0) and dark on the light dark-scheme fill, where white
   would vanish. */
.ae-check { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s-2); align-items: start; }
.ae-check__box { position: relative; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; }
.ae-check__input {
  appearance: none; -webkit-appearance: none; display: block; width: 16px; height: 16px; margin: 0;
  border: var(--border-width-emphasis) solid var(--text-muted); border-radius: var(--radius-xs); background: transparent;
  cursor: pointer; transition: var(--transition-control);
}
.ae-check__input:hover:not(:checked):not(:indeterminate) { border-color: var(--text-body); }
.ae-check__input:checked, .ae-check__input:indeterminate { background: var(--table-control-fg); border-color: var(--table-control-fg); }
.ae-check--brand .ae-check__input:checked, .ae-check--brand .ae-check__input:indeterminate {
  background: var(--surface-brand); border-color: var(--surface-brand);
}
.ae-check__input:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.ae-check__input:disabled { cursor: not-allowed; }
.ae-check__glyph {
  position: absolute; inset: 0; margin: auto; pointer-events: none; opacity: 0; stroke-width: 3.5; color: var(--surface-card);
}
.ae-check--brand .ae-check__glyph { color: var(--text-on-brand); }
.ae-check__input:checked:not(:indeterminate) ~ .ae-check__tick, .ae-check__input:indeterminate ~ .ae-check__dash { opacity: 1; }
.ae-check.is-disabled { opacity: 0.5; }

/* DS Switch: 46x22 track, 18px thumb at a 2px inset; off is --border-strong (a track has to read as a track),
   on is the brand, or the success ink for allow/grant toggles */
.ae-switch-field { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: start; }
.ae-switch-field > .ae-option-text { padding-top: 2px; } /* centres the 18px label line on the 22px track */
.ae-switch { position: relative; display: inline-flex; flex: none; width: 46px; height: 22px; }
.ae-switch__input {
  appearance: none; -webkit-appearance: none; display: block; width: 46px; height: 22px; margin: 0;
  border-radius: 11px; background: var(--border-strong); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ae-switch__input:checked { background: var(--surface-brand); }
.ae-switch--success .ae-switch__input:checked { background: var(--status-success-fg); }
.ae-switch__input:focus-visible { outline: none; border-radius: 11px; box-shadow: var(--focus-ring); }
.ae-switch__input:disabled { cursor: not-allowed; }
.ae-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: var(--ae-neutral-0); box-shadow: var(--shadow-sm); transition: transform var(--duration-normal) var(--ease-standard);
}
.ae-switch__input:checked + .ae-switch__thumb { transform: translateX(24px); } /* 46 - 18 - 2 x 2 */
.ae-switch-field.is-disabled .ae-switch { opacity: 0.5; }

/* DS RadioGroup: the checkbox's ink rules, round: --text-muted ring when empty, brand ring + 8px brand dot when picked */
.ae-radio-group__options { display: flex; flex-direction: column; gap: var(--s-1); padding-top: 2px; }
.ae-radio-group__options.is-row { flex-direction: row; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.ae-radio { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.ae-radio.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ae-radio__box { position: relative; display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.ae-radio__input {
  appearance: none; -webkit-appearance: none; display: block; width: 16px; height: 16px; margin: 0;
  border: var(--border-width-emphasis) solid var(--text-muted); border-radius: 50%; background: transparent;
  cursor: inherit; transition: var(--transition-control);
}
.ae-radio__input:hover:not(:checked):not(:disabled) { border-color: var(--text-body); }
.ae-radio__input:checked { border-color: var(--surface-brand); }
.ae-radio__input:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--focus-ring); }
.ae-radio__dot {
  position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: var(--surface-brand); opacity: 0;
}
.ae-radio__input:checked + .ae-radio__dot { opacity: 1; }

/* ---- Segmented: the DS segmented join (AdvancedSearch JoinToggle): a 26px sunken track with a 2px inset, the
   picked segment a filled neutral slate (--seg-active-*), deliberately not the brand ---- */
.ae-segmented {
  justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 2px;
  background: var(--surface-sunken); border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
}
.ae-segmented__item { position: relative; display: inline-flex; height: 100%; }
.ae-segmented__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ae-segmented__text {
  display: inline-flex; align-items: center; height: 100%; padding-inline: var(--s-2); border-radius: var(--radius-sm);
  font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.02em; color: var(--text-subtle);
  white-space: nowrap; pointer-events: none; transition: var(--transition-control);
}
.ae-segmented__input:hover:not(:checked) + .ae-segmented__text { color: var(--text-strong); }
.ae-segmented__input:checked + .ae-segmented__text { background: var(--seg-active-bg); color: var(--seg-active-fg); box-shadow: var(--shadow-xs); }
.ae-segmented__input:focus-visible + .ae-segmented__text { box-shadow: var(--focus-ring); }

/* ---- Labels on the left, in a form card (the AE console form row: "Workflow name | the control") ----
   The body of a FormCard that is not `wide` (.ae-form-rows) lays each labelled field out as a row: the label in a
   --form-label-w column, its first line level with the control's text (4px down on a 28px box), then the control
   and its hint or error in a column capped at --form-control-w, and what sat at the end of the label row (a
   character count) under them. Tick boxes and switches keep their label beside them and sit in the control column,
   like the options of a radio group; a FormStack becomes one column of rows; a DefinitionList takes the same label
   column. The label column is a share of the card (28cqi, 140-260px), so every row of one card lines up however it
   is nested. A card under 520px wide keeps the labels above the controls. Fields inside another field, a dialog, a
   table or a toolbar keep their own layout. */
.ae-form-rows { --form-label-w: clamp(140px, 28cqi, 260px); --form-control-w: 560px; }
@container (min-width: 520px) {
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) {
    grid-template-columns: var(--form-label-w) minmax(0, var(--form-control-w)); column-gap: var(--s-6); row-gap: 2px;
    align-items: start;
  }
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > .ae-field__label-row:not(.sr-only) { display: contents; }
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > .ae-field__label-row:not(.sr-only) > .ae-field__label,
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > legend { grid-column: 1; grid-row: 1 / span 3; width: auto; padding-top: 4px; }
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > .ae-field__label-row:not(.sr-only) > :not(.ae-field__label) { grid-column: 2; grid-row: 3; justify-self: start; }
  .ae-form-rows .ae-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > :not(.ae-field__label-row, legend) { grid-column: 2; }
  .ae-form-rows .ae-radio-group:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > legend { padding-top: 1px; } /* level with the first option */
  .ae-form-rows .ae-segmented-field:not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) > legend { padding-top: 3px; } /* centred on the 26px track */
  .ae-form-rows :is(.ae-check, .ae-switch-field):not(.ae-field *, .ae-dialog *, table *, .ae-toolbar-strip *) {
    margin-inline-start: calc(var(--form-label-w) + var(--s-6)); max-width: var(--form-control-w);
  }
  .ae-form-rows .ae-form-stack:not(.ae-dialog *) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); max-width: none; margin-inline: 0; }
  .ae-form-rows .ae-dl__row { grid-template-columns: var(--form-label-w) minmax(0, 1fr); column-gap: var(--s-6); }
}