body {
    font-family: system-ui, sans-serif;
    margin: 0 auto;
    max-width: 48rem;
    padding: 1rem;
    line-height: 1.5;

    & header nav {
        display: flex;
        gap: 1rem;
    }

    & form {
        display: grid;
        gap: 0.75rem;
        max-width: 20rem;
    }

    & label {
        display: grid;
    }
}

table {
    border-collapse: collapse;
    width: 100%;

    & th, & td {
        border-bottom: 1px solid #ddd;
        padding: 0.25rem 0.5rem;
        text-align: left;
        vertical-align: top;
    }
}

nav.states {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.text {
    white-space: pre-wrap;
}

dl.gate dt {
    margin-top: 0.5rem;

    &.pending::before { content: "○ "; }
    &.completed::before { content: "● "; }
    &.skipped::before { content: "◌ "; }
}