@property --session-30-start {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --session-30-span {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

main {
    padding: 0;
    width: calc(100vw - (2 * var(--border-width)));
    width: calc(100dvw - (2 * var(--border-width)));
    height: calc(100vh - (2 * var(--border-width)));
    height: calc(100dvh - (2 * var(--border-width)));
    overflow-x: clip;

    display: grid;
    grid-template-columns:
        1fr
        [content-start] var(--size-content-3)
        [content-end]
        1fr;
    grid-auto-rows: auto;

    &.index {
        grid-template-columns: 12.5rem 1fr;
    }
    &.map {
        grid-template-columns: [content-start] 1fr [content-end];
    }

    > * {
        grid-column: content;
    }

    ul.calendar {
        grid-column: 2;

        overflow-y: scroll;
        scroll-snap-type: y mandatory;

        .scroll-indicator {
            height: 1px;
        }
        li.header {
            position: sticky;
            top: 0px;
            z-index: var(--layer-5);

            width: 100%;
            max-width: unset;

            background: Canvas;
            border-bottom: var(--border-width) solid CanvasText;
        }
        li.calendar-week {
            width: 100%;
            max-width: unset;
            height: calc(
                100dvh - var(--header-height) - (2 * var(--border-width))
            );

            overflow: clip;
            scroll-snap-align: end;
            scroll-snap-stop: normal;
            scroll-margin-top: var(--header-height);

            display: grid;
            grid-template-columns: 4rem repeat(3, 1fr);
            grid-template-rows: auto repeat(48, 1fr);
            gap: var(--size-1);

            hgroup {
                display: contents;

                h1 {
                    grid-row: 1;
                }
                ul {
                    grid-row: 2 / span 48;

                    height: 100%;
                    width: 100%;

                    display: grid;
                    grid-auto-flow: dense;
                    grid-template-rows: subgrid;
                    gap: var(--size-1);

                    li {
                        display: contents;
                    }
                    a {
                        grid-row: calc(var(--session-30-start) + 1) / span
                            var(--session-30-span);
                        container: item / inline-size;
                        min-width: 1px;
                        min-height: 1px;

                        background-color: var(--uchu-light-red);

                        @media (prefers-color-scheme: dark) {
                            background-color: var(--uchu-dark-red);
                        }

                        &.past {
                            opacity: 0.5;
                        }

                        h2 {
                            &.short {
                                display: none;
                            }

                            @container item (max-width: 17ch) {
                                &.long {
                                    display: none;
                                }
                                &.short {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}