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

main {
    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;
    grid-template-rows:
        var(--header-height)
        [content-start] 1fr
        [content-end];

    ul.calendar {
        grid-row: content;

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

        .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;

            scroll-snap-align: start;
            scroll-snap-stop: normal;
            scroll-margin-top: var(--header-height);

            hgroup {
                display: contents;

                ul li a {
                    &.past {
                        opacity: 0.5;
                    }

                    h2 {
                        &.short {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}