h1 {
    font-size: xx-large;
    letter-spacing: 0.25rem;
}

input[list]::-webkit-calendar-picker-indicator,
input[list]::-webkit-list-button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

input[type="number"] {
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

main {
    display: grid;
    gap: 1.25rem;
    width: calc(120ch + 6rem + 2px);
    margin-inline: auto;
    padding: 2rem;
}

header {
    position: relative;
    display: grid;
    gap: 0.25rem;
}

header > button {
    position: absolute;
    top: 0;
    right: 0;
    font-size: large;
}

article {
    display: grid;
    gap: 0.25rem;
}

.panel {
    display: grid;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
}

.create-form {
    display: grid;
    grid-template-columns:
        minmax(0, 0.5fr)
        minmax(0, 0.5fr)
        minmax(0, 0.25fr)
        minmax(0, 2fr)
        max-content;
    grid-template-rows: auto auto;
    gap: 0.5rem 1rem;
    align-items: end;

    > label {
        grid-row: 1;
    }

    > input {
        grid-row: 2;
    }

    > button {
        grid-column: 5;
        grid-row: 2;
    }
}

.session-list {
    display: grid;
    gap: 1rem;
}

.session-card {
    summary {
        display: grid;
        grid-template-columns:
            max-content
            24ch
            7ch
            5ch
            minmax(0, 1fr)
            max-content
            max-content;
        gap: 1rem;
        align-items: center;
        list-style: none;

        &::before {
            content: "+";
        }

        [data-field="session"],
        [data-field="level"] {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    details[open] {
        > summary::before {
            content: "−";
        }

        > [data-field="player-list"] {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--color-border);
        }
    }
}

.player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    color: var(--color-muted);
    list-style: none;

    &:empty::before {
        content: attr(data-empty);
    }
}

.stats {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    gap: 0.5rem;
    color: var(--color-border);
    font-size: medium;

    p:not(:last-child)::after {
        margin-left: 0.5rem;
        content: "‧";
    }
}

dialog {
    position: fixed;
    width: min(calc(40ch + 6rem + 2px), calc(100% - 2rem));
    margin: 6rem auto;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;

    &::backdrop {
        background: rgb(0 0 0 / 50%);
        backdrop-filter: blur(4px);
    }

    header button[command="close"] {
        display: none;
    }
}

.download-content {
    display: grid;
    gap: 1rem;

    [data-action="download"] {
        justify-self: center;
    }
}