.form {
    display: grid;
    gap: 0.5em;
    grid-template-columns: minmax(min-content, max-content) min-content;
}

.form > label {
    grid-column: 1;
}

.form > input,
.form > select {
    grid-column: 2;
}

.zebra {
    border: 1px solid var(--color-zebra-header);
    border-spacing: 0;
}

.zebra > thead > tr {
    background-color: var(--color-zebra-header);
}

.zebra > tbody > tr:nth-child(even) {
    background-color: var(--color-zebra-even);
}

.zebra th {
    text-align: left;
}

.zebra th,
.zebra td {
    padding: 0.5em;
}

button > a {
    color: ButtonText;
    cursor: default;
    text-decoration: none;
}

:root {
    color-scheme: light dark;
    --color-zebra-even: #ffdbbb;
    --color-zebra-header: #f4b360;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-zebra-even: #421f00;;
        --color-zebra-header: #9d5e0b;
    }
}