:root {
    font-family: "Fira Sans", "Source Sans 3", "Source Sans Pro", sans-serif;

    --color-background: light-dark(white, #29292e);
    --color-stroke-soft: light-dark(rgb(60%, 60%, 60%), rgb(40%, 40%, 40%));
    --color-stroke: light-dark(black, white);
    --color-accent: #3ca5cc;

    --duration-transitions: 0.2s;

    scrollbar-gutter: stable;
}

body {
    color: var(--color-stroke);
    background-color: var(--color-background);
}

p, ul, ol, li, figcaption {
    margin-block: 0.5rem;
}

ul, ol {
    padding-inline-start: 1.4rem;
}

ul {
    list-style-type: "– ";
}

figure {
    margin: 0;

    text-align: center;
}

pre, code, .mono {
    font-family: "Fira Mono", monospace;
}

pre {
    text-align: start;
}

.no-wrap {
    white-space: nowrap;
}

a:where([href]):not(.anchor, .button) {
    color: var(--color-accent);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.button {
    color: var(--color-accent);
    text-decoration: none;

    &:is(:active, :focus, .selected-button) {
        color: var(--color-stroke);
    }
}

:target {
    animation: linear pulse-target 1s;
}

@keyframes pulse-target {
    from {
        background-color: var(--color-stroke-soft);
    }

    to {
        background-color: transparent;
    }
}

.scrollable {
    overflow: auto;
}

ol.timeline {
    /* TODO: RTL support. */

    --timeline-height: 2em;
    --timeline-line-thickness: 0.1rem;
    --timeline-arrow-start-margin: calc(var(--timeline-height) / 5);
    --timeline-arrow-end-margin: calc(var(--timeline-height) / 3);
    --timeline-arrow-height: calc(var(--timeline-height) + 2 * var(--timeline-line-thickness) * (1 - 1 / sqrt(2)));
    --timeline-arrow-width: calc(var(--timeline-arrow-height) / 2);
    --timeline-arrow-peek: calc(var(--timeline-line-thickness) / sqrt(2));

    display: inline-flex;
    flex-direction: row;
    align-items: center;

    margin: 0;
    padding: 0;

    width: max-content;
    height: var(--timeline-height);
    margin-inline-start: var(--timeline-arrow-peek);
    margin-inline-end: calc(var(--timeline-arrow-width) + var(--timeline-arrow-peek));
    border-block: var(--timeline-line-thickness) solid currentColor;

    list-style: none;

    & > li {
        position: relative;

        margin-block: 0.5rem;
        margin-inline-start: var(--timeline-arrow-width);
        padding-inline-start: var(--timeline-arrow-end-margin);
        padding-inline-end: var(--timeline-arrow-start-margin);

        &:first-child::before, &::after {
            content: "";

            position: absolute;
            inset-block: 0;
            margin-block: auto;

            width: hypot(var(--timeline-arrow-height) / 2, var(--timeline-arrow-width));
            /* `aspect-ratio: 1 / 1;` does not work properly in Chrome, so we have to repeat ourselves. */
            height: hypot(var(--timeline-arrow-height) / 2, var(--timeline-arrow-width));
            border-top: var(--timeline-line-thickness) solid currentColor;
            border-right: var(--timeline-line-thickness) solid currentColor;
            rotate: 45deg;

            pointer-events: none;
        }

        &::after {
            inset-inline-start: 100%;
            translate: -50%;
        }

        &:first-child::before {
            inset-inline-start: 0;
            translate: calc(0pt - var(--timeline-arrow-width) - 50%);
        }
    }
}

.icon {
    font-family: "MDLC Icons";
    font-synthesis: none;

    margin-inline-end: 0.3em;
    vertical-align: var(--icon-align);

    user-select: none;
}