/* Text-like controls: everything except buttons, toggles, range, file, color,
 * image. `input:not([type])` matches (no excluded type) so bare inputs are
 * covered. Preflight already inherits font + resets appearance — don't repeat. */
:where(
  input:not(
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="color"],
    [type="image"]
  ),
  select,
  textarea
) {
  display: block;
  inline-size: 100%;
  padding: var(--marx-space-xs) var(--marx-space-md);
  font-size: var(--marx-text-base);
  line-height: var(--marx-leading);
  color: var(--marx-text);
  background-color: var(--marx-bg);
  border: 1px solid var(--marx-border);
  border-radius: var(--marx-radius);

  &:user-invalid {
    border-color: var(--marx-danger);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: border-color 0.15s ease;
  }
}

/* One focus ring for every control (buttons style their own). */
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--marx-ring);
  outline-offset: 2px;
}

/* Disabled + read-only. `[readonly]` (not `:read-only`, which also matches
 * non-editable elements like buttons and plain divs). */
:where(input, select, textarea):disabled {
  color: var(--marx-disabled);
  cursor: not-allowed;
  background-color: var(--marx-surface);
}

:where(input, select, textarea)[readonly] {
  color: var(--marx-muted);
  border-color: var(--marx-border);
}

/* Grow to fit content; start tall enough to read as a textarea. */
:where(textarea) {
  field-sizing: content;
  min-block-size: 5lh;
}

/* Native controls that paint with the accent color. */
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--marx-primary);
}

/* Native widgets sit high on the text line; size them to 1em and shift down. */
:where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.15em;
}

/* A list whose items hold a checkbox or radio is an option group, not a bullet
 * list: drop the markers and the indent so the controls sit flush. Classless
 * (no `.task-list` needed); lives in the forms layer so it wins over the list
 * rules in the content layer. Browsers without `:has()` keep the bullets. */
:where(ul:has(input:is([type="checkbox"], [type="radio"]))) {
  padding-inline-start: 0;
  list-style: none;
}

:where(ul:has(input:is([type="checkbox"], [type="radio"])) > li) {
  padding-inline-start: 0;
}

/* Progress + meter — replace the native chrome with a clean Marx bar.
 * Each vendor pseudo-element lives in its own rule: an engine that doesn't
 * recognise one must not drop the others. */
:where(progress, meter) {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: var(--marx-space-xs);
  border: 0;
  border-radius: var(--marx-radius);
  /* Track: the element background is the Firefox track and the fallback. */
  background-color: var(--marx-surface);
  /* Clip the fill to the rounded track. */
  overflow: hidden;
}

:where(progress)::-webkit-progress-bar {
  background-color: var(--marx-surface);
}

:where(progress)::-webkit-progress-value {
  background-color: var(--marx-primary);
}

:where(progress)::-moz-progress-bar {
  background-color: var(--marx-primary);
}

:where(meter)::-webkit-meter-bar {
  background-color: var(--marx-surface);
  border: 0;
}

:where(meter)::-webkit-meter-optimum-value {
  background-color: var(--marx-success);
}

:where(meter)::-webkit-meter-suboptimum-value {
  background-color: var(--marx-warning);
}

:where(meter)::-webkit-meter-even-less-good-value {
  background-color: var(--marx-danger);
}

/* Firefox can't split the meter bands by pseudo-element; colour the fill green. */
:where(meter)::-moz-meter-bar {
  background-color: var(--marx-success);
}

/* Single selects: swap the cramped native chevron for a roomy custom one.
 * The mid-grey stroke reads on both light and dark surfaces (a background SVG
 * can't follow a token color). Multi/size selects are list boxes, so they keep
 * their native rendering. */
:where(select:not([multiple], [size])) {
  appearance: none;
  padding-inline-end: var(--marx-space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--marx-space-md) center;
  background-size: 1em;
}

/* Bordered swatch at a comfortable tappable size. */
:where(input[type="color"]) {
  inline-size: 3rem;
  block-size: 2.5rem;
  padding: var(--marx-space-2xs);
  background-color: var(--marx-bg);
  border: 1px solid var(--marx-border);
  border-radius: var(--marx-radius);
}

/* File picker button matches the marx primary button. */
:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--marx-space-md);
  padding: var(--marx-space-xs) var(--marx-space-md);
  color: var(--marx-on-primary);
  cursor: pointer;
  background-color: var(--marx-primary);
  border: 1px solid transparent;
  border-radius: var(--marx-radius);
}

:where(input[type="file"])::file-selector-button:hover {
  background-color: var(--marx-primary-strong);
}

@media (prefers-reduced-motion: no-preference) {
  :where(input[type="file"])::file-selector-button {
    transition: background-color 0.15s ease;
  }
}

/* Placeholder: preflight sets a currentColor mix; marx prefers its muted token. */
::placeholder {
  color: var(--marx-muted);
}

:where(label) {
  display: inline-block;
  line-height: var(--marx-leading);
  vertical-align: middle;
}

/* 8px above the field, not below the label: margin on an inline-block label
   grows the line box and lifts a sibling radio or checkbox. */
:where(
  label
    + :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="hidden"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="image"]
      ),
      select,
      textarea
    )
) {
  margin-block-start: var(--marx-space-xs);
}

:where(label:has(> input:is([type="checkbox"], [type="radio"]))) {
  display: inline-flex;
  align-items: center;
  column-gap: var(--marx-space-2xs);
}

:where(fieldset) {
  padding: var(--marx-space-md);
  border: 1px solid var(--marx-border);
  border-radius: var(--marx-radius);
}

:where(legend) {
  padding-inline: var(--marx-space-xs);
  font-weight: 500;
}