:root {
    color-scheme: dark;

    --input-background: oklch(0.2 0.025 260);
    --dropdown-background: oklch(0.2 0.025 260);
}

* {
    box-sizing: border-box;
    margin: 0;

    line-height: 1.5;
}

input,
button {
    font-size: inherit;
}

h4 {
    margin-bottom: 0.25em;
}

body {
    display: grid;
    align-items: center;
    justify-content: center;

    min-height: 100dvh;

    background-image: linear-gradient(
        to bottom right,
        oklch(0.1 0.025 260),
        oklch(0.3 0.025 260)
    );
    background-image: linear-gradient(
        in oklch to bottom right,
        oklch(0.1 0.025 260),
        oklch(0.3 0.025 260)
    );

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

main,
form {
    display: flex;
    flex-direction: column;

    min-width: 50dvw;
    max-width: 60dvw;

    @media (max-aspect-ratio: 1) {
        max-width: 90dvw;
    }

    @media (overflow-block: scroll) {
        margin-block: 5dvh;
    }

    border-radius: 1rem;

    background-color: oklch(0.95 0.1 260 / 0.1);

    & > header,
    & > div {
        padding: 0.5rem 1rem;
    }

    & > header {
        border-radius: 1rem 1rem 0 0;

        background-color: oklch(0.95 0.1 260 / 0.1);
    }

    & > div {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & > div {
            display: flex;
            flex-direction: column;
        }
    }

    & > a,
    & > button {
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 0 0 1rem 1rem;

        font-weight: 500;

        background: var(--input-background);
        cursor: pointer;

        display: grid;
        justify-content: center;
        align-content: center;

        color: inherit;
        text-decoration: none;
    }
}

#rating-view {
    display: block;

    font-variant-numeric: tabular-nums;
    text-align: center;
}

.star-rating {
    display: grid;
    grid-template-columns: 3ch 1fr;

    font-size: 4em;

    justify-content: right;

    @media (max-aspect-ratio: 1) {
        grid-template-columns: 1fr;
    }

    & .stars {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        align-content: center;
    }

    & input[type="radio"] {
        appearance: none;

        display: block;

        width: 100%;

        aspect-ratio: 1;
        background-image: url("../assets/star.svg");
        background-size: 100%;

        filter: grayscale(1);

        &:checked,
        &:has(~ :checked) {
            filter: grayscale(0);
        }

        &[value="0"] {
            background-image: url("../assets/zero.svg");
        }
    }
}

hr {
    border: none;
    border-top: 1px solid oklch(0.5 0 0 / 0.5);
    margin: 0.25em -1rem;
}