:root {
    display: grid;
    grid-template-areas:
        "main  source"
        "aside aside";
    grid-template-columns: 50% 50%;
    grid-template-rows: auto min-content;

    @media (max-width: 500px) {
        grid-template-areas:
            "main"
            "source"
            "aside";
        grid-template-columns: auto;
        grid-template-rows: auto auto min-content;
    }

    height: 100vh;
    width: 100vw;
    overflow: hidden;

    body {
        display: contents;
    }

    main {
        display: contents;
    }

    :where(#main) {
        grid-area: main;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        :where(#setValueButton) {
            text-align: start;
        }

        :where(#target) {
            flex: 1 1 auto;
            overflow: auto;
            display: grid;
            grid-template-columns: auto auto;
            grid-auto-flow: row dense;
            grid-auto-rows: min-content;

            .message {
                display: grid;
                column-gap: 5px;
                grid-template-columns: subgrid;
                grid-column: 1 / -1;

                &[data-type=set] {
                    --color: red;
                }

                &[data-type=change1] {
                    --color: blue;
                }

                &[data-type=change2] {
                    --color: green;
                }

                color: white;
                background-color: var(--color);

                .name {
                    grid-area: name;
                    grid-column: 1;
                }

                .time {
                    grid-area: time;
                    grid-column: 2;
                }
            }
        }
    }

    :where(#sources) {
        grid-area: source;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-family: monospace;

        .source {
            position: relative;

            &::before {
                display: block;
                position: sticky;
                width: 100%;
                top: -0.5em;
                left: -0.5em;
                right: -0.5em;
                content: attr(data-file);
                background-color: black;
                color: white;
                margin: -0.5em;
                margin-bottom: 0.5em;
            }

            padding: 0.5em;
            overflow: auto;
            flex: 1 1 auto;
            white-space: pre-wrap;
        }
    }

    :where(aside) {
        grid-area: aside;
        overflow: hidden;
        word-break: break-all;
    }
}