/* The look of an input, in one place. The two primitives that wear it stay separate — a search
   field clears on Escape and needs no label, a form field requires one — but their input is the
   same object, and it stood here as two byte-equal copies (BACKLOG Ф-40).

   Both classes live in ONE module on purpose: order between two CSS modules is the order of their
   imports, and the modifier below has to come after the base. */
.input {
  width: 100%;
  height: var(--row-height);
  border: 1px solid transparent;
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-text);
}

.input::placeholder {
  color: var(--color-text-secondary);
}

/* The only patch of colour in a panel is the border of the focused field (accent, prompt §1). */
.input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* A field of a FORM shows its edge at rest; a filter stays quiet until it is focused. */
.framed {
  border-color: var(--color-border);
}