.af{display:grid;gap:.75rem}
.af-fields{display:grid;gap:.75rem}
.af-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem}
.af label{display:grid;gap:.3rem;align-content:start;min-width:0;color:var(--muted)}
.demo .af input,.demo .af select{width:100%;height:2.25rem;padding:0 .55rem;color:var(--fg);transition:border-color 120ms ease-out}
.demo .af input:hover,.demo .af select:hover{border-color:var(--muted)}
.demo .af [aria-invalid]{border-color:var(--redline)}
.af-msg{min-height:1.4em;color:var(--redline)}
@media (max-width:420px){.af-row{grid-auto-flow:row}}
.demo .af select{appearance:none;-webkit-appearance:none;padding-right:1.6rem;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);background-size:.3rem .3rem;background-position:right .8rem center,right .5rem center;background-repeat:no-repeat}
.demo .af input:focus-visible,.demo .af select:focus-visible{outline:1px solid var(--muted);outline-offset:-1px;border-color:var(--muted)}
.demo .af [aria-invalid]:focus-visible{outline-color:var(--redline);border-color:var(--redline)}