html {
    /* Account for sticky adding row at the bottom, when scrolling the just added row into view */
    scroll-padding-bottom: 5rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: var(--border-width) solid var(--border);

    h1 {
        margin: 0;
    }

    nav {
        ul {
            display: flex;
            gap: 1.5rem;
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin: 0;
            }
        }
    }
}

main {
    margin: 1.5rem 2rem 5rem;
}

.spreadsheet {

    /* Default styling */

    thead {
        position: sticky;
        /* Workaround to the header's cell borders disappearing when scrolled */
        outline: var(--border-width) solid var(--border);
        outline-offset: calc(-0.5 * var(--border-width));
        top: calc(0.5 * var(--border-width));
    }

    tr.adding {
        position: sticky;
        /* Workaround to the row's cell borders disappearing when sticky */
        outline: var(--border-width) solid var(--border);
        outline-offset: calc(-0.5 * var(--border-width));
        bottom: calc(0.5 * var(--border-width));
    }

    tr {
        background-color: var(--bg);
    }

    td, th {
        vertical-align: top;
        text-align: left;
        white-space: pre-wrap;
    }

    /* Focusable table cells */

    td {
        outline: none;
        cursor: pointer;

        &:focus {
            background-color: color-mix(in srgb, var(--accent), transparent 85%);
            outline: 2px solid var(--accent);
            outline-offset: -2px;
        }

        &:has(input) {
            padding: 2px;
        }

        input {
            width: 100%;
            box-sizing: border-box;
            padding: 0.5rem;
            margin: 0;
        }
    }

    /* Highlight the focused row */

    tr.viewing:has(td:focus) {
        background-color: var(--accent-bg);
    }

    tr.editing:has(td:focus, input:focus) {
        background-color: var(--marked);
    }
}