Text fields in articles aren't visible

[getaaron]

The background color of an article is the same as the background color of a text field, and the text field doesn't have a border, so the text field becomes invisible when putting a text field inside an article:

One possible approach is to add a border, for example in this diff:

-input, select, textarea {font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}
+input, select, textarea {font-size: 1em; color:var(--c4); background: var(--c2); border: 1px solid var(--c4); padding: 0.6em}

which adds a border:

However, I didn't check any other use cases so it's likely this is undesirable in some way.

If it's helpful, here's some reproduction HTML

<section>
  <article>
    <form action="/weather" accept-charset="UTF-8" method="post">
      <h2>New weather search</h2>
      <div>
        <label for="zip_code">Zip code</label>
        <input type="text" name="zip" id="zip">
        <div>
          <input type="submit" name="commit" value="Search Weather" data-disable-with="Search Weather">
        </div>
      </div>
    </form>
  </article>
</section>

[FinancialMistake]

I may not be using this properly, but as far as I can see, the text has no margin which makes it harder to read. Adding perhaps a few pixels of margin could improve it unless I'm missing something