@layer components {
    :root {
        --whodunit-grid-sheet: var(--secondary-system-background);
        --whodunit-grid-sheet-alternate: color-mix(
            in oklch,
            var(--tint) 7%,
            var(--secondary-system-background)
        );
        --whodunit-grid-cell: var(--tertiary-system-background);
        --whodunit-grid-cell-band: color-mix(
            in oklch,
            var(--whodunit-grid-cell) 55%,
            var(--whodunit-grid-sheet)
        );
        --whodunit-grid-cell-band-alternate: color-mix(
            in oklch,
            var(--whodunit-grid-cell) 55%,
            var(--whodunit-grid-sheet-alternate)
        );
        --whodunit-grid-cell-edge: color-mix(
            in oklch,
            var(--label) 10%,
            transparent
        );
        --whodunit-grid-cell-hover: color-mix(
            in oklch,
            var(--tint) 7%,
            var(--whodunit-grid-cell)
        );
        --whodunit-grid-caption: var(--secondary-label);
        --whodunit-grid-label: var(--label);
        --whodunit-grid-column: var(--secondary-label);
        --whodunit-grid-focus: var(--tint);
        --whodunit-grid-scene: var(--tint);
        --whodunit-grid-scene-wash: var(--tint-fill);
        --whodunit-grid-cross: var(--tint);
        --whodunit-grid-no: var(--secondary-label);
        --whodunit-grid-ruled: var(--tertiary-label);
        --whodunit-grid-yes: var(--tint);
        --whodunit-grid-yes-light: color-mix(
            in oklch,
            var(--whodunit-grid-yes) 74%,
            oklch(100% 0 0deg)
        );
        --whodunit-grid-yes-deep: color-mix(
            in oklch,
            var(--whodunit-grid-yes) 76%,
            oklch(0% 0 0deg)
        );
        --whodunit-grid-yes-mark: var(--tint-label);
        --whodunit-grid-yes-wash: color-mix(
            in oklch,
            var(--tint) 10%,
            var(--whodunit-grid-cell)
        );
        --whodunit-grid-conflict: var(--system-red);
        --whodunit-grid-conflict-light: color-mix(
            in oklch,
            var(--whodunit-grid-conflict) 74%,
            oklch(100% 0 0deg)
        );
        --whodunit-grid-conflict-deep: color-mix(
            in oklch,
            var(--whodunit-grid-conflict) 76%,
            oklch(0% 0 0deg)
        );
        --whodunit-grid-conflict-wash: color-mix(
            in oklch,
            var(--system-red) 12%,
            var(--whodunit-grid-cell)
        );
        --whodunit-grid-culprit: var(--tint);
        --whodunit-grid-shadow: color-mix(
            in oklch,
            var(--label) 22%,
            transparent
        );
    }

    .whodunit-grid {
        --whodunit-grid-columns: 6;
        --whodunit-grid-heading: 3.5rem;
        --whodunit-grid-inset: 0.125rem;
        --whodunit-grid-largest: 3.25rem;
        --whodunit-grid-spacing: 0.125rem;

        display: grid;
        gap: 1.25rem;
        inline-size: 100%;

        &.whodunit-grid--size-4 {
            --whodunit-grid-columns: 4;
        }

        &.whodunit-grid--size-5 {
            --whodunit-grid-columns: 5;
        }
    }

    .whodunit-grid__table {
        background-color: var(--whodunit-grid-sheet);
        border-collapse: separate;
        border-radius: 1rem;
        border-spacing: var(--whodunit-grid-spacing);
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: calc(
            var(--whodunit-grid-heading) + var(--whodunit-grid-columns) *
                var(--whodunit-grid-largest) +
                (var(--whodunit-grid-columns) + 2) *
                var(--whodunit-grid-spacing) + 2 * var(--whodunit-grid-inset)
        );
        padding-block: 0.25rem var(--whodunit-grid-inset);
        padding-inline: var(--whodunit-grid-inset);
        table-layout: fixed;
        -webkit-user-select: none;
        user-select: none;

        & tbody tr:nth-child(even) {
            --whodunit-grid-fill: var(--whodunit-grid-cell-band);
        }

        &
            tr:has(.whodunit-grid__cell:is(:hover, :focus-visible))
            .whodunit-grid__row {
            color: var(--whodunit-grid-cross);
        }

        &:has(
                tbody
                    td:nth-child(2)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(2),
        &:has(
                tbody
                    td:nth-child(3)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(3),
        &:has(
                tbody
                    td:nth-child(4)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(4),
        &:has(
                tbody
                    td:nth-child(5)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(5),
        &:has(
                tbody
                    td:nth-child(6)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(6),
        &:has(
                tbody
                    td:nth-child(7)
                    .whodunit-grid__cell:is(:hover, :focus-visible)
            )
            thead
            th:nth-child(7) {
            color: var(--whodunit-grid-cross);
        }
    }

    .whodunit-grid__table--upright {
        background-color: var(--whodunit-grid-sheet-alternate);

        & tbody tr:nth-child(even) {
            --whodunit-grid-fill: var(--whodunit-grid-cell-band-alternate);
        }
    }

    .whodunit-grid__caption {
        caption-side: top;
        color: var(--whodunit-grid-caption);
        font-size: var(--font-size-caption2);
        font-weight: 700;
        letter-spacing: 0.0625rem;
        padding: 0 0.5rem 0.375rem;
        text-align: start;
        text-transform: uppercase;
    }

    .whodunit-grid__corner {
        inline-size: var(--whodunit-grid-heading);
        padding: 0;
    }

    .whodunit-grid__column {
        color: var(--whodunit-grid-column);
        font-size: var(--font-size-caption);
        font-weight: 600;
        line-height: 1;
        padding: 0.25rem 0 0.375rem;
        text-align: center;
        transition: color 120ms;
        vertical-align: bottom;

        &.whodunit-grid__column--scene {
            color: var(--whodunit-grid-scene);
            font-weight: 800;
        }
    }

    .whodunit-grid__label {
        border-radius: 0.375rem;
        display: inline-block;
        max-inline-size: 6.5rem;
        overflow: hidden;
        padding-block: 0.125rem;
        padding-inline: 0.3125rem;
        rotate: 180deg;
        text-overflow: ellipsis;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .whodunit-grid__table--upright .whodunit-grid__label {
        font-variant-numeric: tabular-nums;
        max-inline-size: none;
        padding-block: 0.25rem;
        padding-inline: 0.25rem;
        rotate: none;
        writing-mode: horizontal-tb;
    }

    .whodunit-grid__name {
        border-radius: 0.375rem;
        display: inline-block;
        margin-inline-start: -0.3125rem;
        padding: 0.25rem 0.3125rem;
    }

    .whodunit-grid__column--scene .whodunit-grid__label,
    .whodunit-grid__row--scene .whodunit-grid__name {
        background-color: var(--whodunit-grid-scene-wash);
    }

    .whodunit-grid__row {
        color: var(--whodunit-grid-label);
        font-size: var(--font-size-footnote);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        line-height: 1.1;
        overflow-wrap: anywhere;
        padding: 0 0.375rem 0 0.25rem;
        text-align: start;
        transition: color 120ms;

        &.whodunit-grid__row--scene {
            color: var(--whodunit-grid-scene);
            font-weight: 800;
        }

        &.whodunit-grid__row--culprit {
            color: var(--whodunit-grid-culprit);
            font-weight: 800;
        }
    }

    .whodunit-grid__slot {
        padding: 0;
    }

    .whodunit-grid__form {
        display: grid;
    }

    .whodunit-grid__cell {
        aspect-ratio: 1;
        background-color: var(--whodunit-grid-fill, var(--whodunit-grid-cell));
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.0625rem 0 var(--whodunit-grid-cell-edge);
        color: var(--whodunit-grid-no);
        cursor: pointer;
        display: grid;
        inline-size: 100%;
        padding: 0;
        place-items: center;
        scroll-margin-block: 5rem 12rem;
        touch-action: manipulation;
        transition:
            background-color 160ms,
            scale 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
        -webkit-tap-highlight-color: transparent;

        &:hover {
            background-color: var(--whodunit-grid-cell-hover);
        }

        &:active {
            scale: 0.9;
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--whodunit-grid-focus);
            outline-offset: 0.0625rem;
        }

        &.whodunit-grid__cell--yes {
            background-color: var(--whodunit-grid-yes-wash);
        }

        &.whodunit-grid__cell--conflict {
            background-color: var(--whodunit-grid-conflict-wash);
        }
    }

    .whodunit-grid--finished .whodunit-grid__cell {
        cursor: default;
    }

    .whodunit-grid__mark {
        block-size: 60%;
        display: grid;
        inline-size: 60%;
        place-items: center;
        pointer-events: none;

        &.whodunit-grid__mark--yes,
        &.whodunit-grid__mark--conflict {
            --whodunit-grid-disc: var(--whodunit-grid-yes);
            --whodunit-grid-disc-light: var(--whodunit-grid-yes-light);
            --whodunit-grid-disc-deep: var(--whodunit-grid-yes-deep);

            background: radial-gradient(
                circle at 35% 28%,
                var(--whodunit-grid-disc-light),
                var(--whodunit-grid-disc) 64%
            );
            block-size: 68%;
            border-radius: 50%;
            box-shadow:
                0 0.0625rem 0.1875rem var(--whodunit-grid-shadow),
                inset 0 -0.125rem 0.125rem var(--whodunit-grid-disc-deep);
            color: var(--whodunit-grid-yes-mark);
            inline-size: 68%;
        }

        &.whodunit-grid__mark--conflict {
            --whodunit-grid-disc: var(--whodunit-grid-conflict);
            --whodunit-grid-disc-light: var(--whodunit-grid-conflict-light);
            --whodunit-grid-disc-deep: var(--whodunit-grid-conflict-deep);
        }

        &.whodunit-grid__mark--no {
            color: var(--whodunit-grid-no);
        }

        &.whodunit-grid__mark--ruled {
            block-size: 42%;
            color: var(--whodunit-grid-ruled);
            inline-size: 42%;
        }
    }

    .whodunit-grid__glyph {
        block-size: 100%;
        fill: none;
        inline-size: 100%;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.25;
    }

    .whodunit-grid__mark--yes .whodunit-grid__glyph,
    .whodunit-grid__mark--conflict .whodunit-grid__glyph {
        block-size: 82%;
        inline-size: 82%;
        stroke-width: 2.75;
    }

    .whodunit-grid__mark--ruled .whodunit-grid__glyph {
        stroke-width: 1.75;
    }
}