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>
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:
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