div.controls {
    display: flex;
}

div.controls>form {
    flex-grow: 1;
}

@media only screen and (max-width: 720px) {
    div.controls {
        flex-direction: column;
        gap: 1em;
    }

    div.controls>form *:not(:last-child) {
        margin-bottom: 0.5em;
    }
}

details {
    margin: 1em 0;
    padding: 0 1em;
}

details[open] summary {
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--section-border-bottom-color);
}

details summary h2 {
    display: inline-block;
    margin: 0;
    padding: 0;
}

details>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

details>ul>li {
    display: grid;
    grid: "details actions" 1fr "status status" auto / 1fr auto;
    gap: 1em;
    margin: 1em 0;
    padding: 1em 1em 0.5em;
    border-radius: 1em;
    background: var(--chore-card-background-color);
    box-shadow: 0 0 0.1em var(--chore-card-box-shadow-color);
}

details div.details {
    grid-area: details;
}

details>ul>li h3 {
    margin: 0 0 0.5em;
}

details ul.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8em;
}

details ul.tag-list>li {
    display: inline-block;
    padding: 0.4em 0.6em;
    border-radius: 1em;
    background: var(--chore-card-tag-background-color);
    color: var(--chore-card-tag-color);
}

details p.footer {
    font-size: 0.8em;
    margin-bottom: 0;
}

details div.actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    text-align: center;
}

details div.actions>form {
    flex-grow: 1;
}

details div.actions>ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8em;
}

details div.actions>ul>li {
    flex-grow: 1;
}

details div.status {
    grid-area: status;
    display: flex;
    border-radius: 1em;
    overflow: hidden;
    border: 1px solid var(--chore-progress-border-color);
}

details div.status div.progress {
    display: inline-block;
    height: 0.5em;
}

div.progress.state-completed {
    background-color: var(--chore-progress-state-completed-background-color)
}

div.progress.state-due {
    background-color: var(--chore-progress-state-due-background-color)
}

div.progress.state-overdue {
    background-color: var(--chore-progress-state-overdue-background-color)
}