.input {
  accent-color: var(--input-accent-color, var(--color-ink));
  background-color: var(--input-background, var(--color-subtle-light));
  border-radius: var(--input-border-radius, 0.5em);
  border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-border-interactive));
  color: var(--input-color, var(--color-ink));
  font-size: max(16px, 1em);
  inline-size: 100%;
  line-height: 1.2;
  max-inline-size: 100%;
  padding: var(--input-padding, 0.6em 0.85em);
  resize: none;

  &:autofill,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-ink);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
  }

  &:where(:not(:active)):focus {
    --input-border-color: var(--color-selected-dark);
    --hover-color: var(--color-selected-dark);
    --hover-size: 0.15rem;
    --outline-size: 0;
    --outline-color: transparent;

    filter: var(--hover-filter);
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }
}

/* Native <select> dropdown: theme the popup so options aren't light-on-white
   in dark mode (belt-and-suspenders alongside :root color-scheme). */
select.input option {
  background-color: var(--color-bg);
  color: var(--color-ink);
}

.input--mono {
  --input-color: var(--color-subtle-dark);
  font-family: var(--font-mono);
}

/* Ghost field for optional, tertiary text (e.g. the reader-facing link note):
   frameless at rest, so it reads like the muted output line it produces —
   the base :focus rule brings the border back, this restores the fill. */
.input--ghost {
  --input-background: transparent;
  --input-border-color: transparent;
  --input-color: var(--color-subtle-dark);

  &:focus {
    --input-background: var(--color-subtle-light);
  }
}

.input--textarea {
  --input-padding: 0.6em 0.8em;
  /* NB: --input-padding holds TWO values, so it can't be used inside calc() —
     1.2em below is the vertical padding (2 × 0.6em) written out. */
  line-height: 1.4;
  min-block-size: calc(4lh + 1.2em);

  @supports (field-sizing: content) {
    field-sizing: content;
    max-block-size: calc(20lh + 1.2em);
    min-block-size: calc(4lh + 1.2em);
  }
}

label {
  color: var(--label-color, var(--color-subtle-dark));
  display: block;
  font-size: var(--label-font-size, 0.85em);
  font-weight: var(--label-font-weight, 500);
  margin-block-end: var(--label-margin, 0.4em);
}