:root {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/system-color */
    color-scheme: dark light;

    --gap: 1rem;
    --grid-min: calc(var(--thumb-size) + 26ch + (var(--gap) / 2));
    --grid-width: 30ch;
    --queue-width: 40ch;
    --img-size: calc(12 * 1.5em);
    --link-pad: 0.5rem;
    --nav-bg: hsl(from Canvas h s calc(l * 1.5));
    --pad: 1ch;
    --thumb-size: calc((3 * 1.5em) + var(--pad));
    --toast-bg: hsl(from Canvas h s calc(l * 3));

    --calendar-hour-height: 3lh;

    --footer-flex-basis: 50%;

    /* --fc-today-bg-color: green; */
    --fc-border-color: GrayText;
    --fc-button-bg-color: ButtonFace;
    --fc-button-border-color: ButtonBorder;
    --fc-button-active-bg-color: SelectedItem;
    --fc-button-active-border-color: ButtonBorder;
    --fc-button-hover-bg-color: rgb(82, 82, 94); /* -moz-buttonhoverface */
    --fc-button-hover-border-color: inherit;
    --fc-button-text-color: ButtonText;

    --fc-page-bg-color: Canvas;
    --fc-event-bg-color: AccentColor;
    --fc-event-text-color: AccentColorText;
    --fc-today-bg-color: #316fb126; /* I chose this at random via color picker. */
}

body {
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Niue",
        Arial,
        "Noto Sans",
        "Liberation Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    font-variant-numeric: tabular-nums;
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
h1 {
    margin-block: 0.67em;
    font-size: 2em;
}

li button[popovertarget] {
    /* style it like a text link */
    background: inherit;
    border: none;
    margin: 0;
    display: inline-block;
    color: LinkText;
    padding-bottom: var(--pad);
    text-decoration: underline;

    &:hover {
        cursor: pointer;
    }
}

.nowrap {
    text-wrap: nowrap;
}

[popover] {
    padding: 0;

    > menu {
        flex-direction: column;
        gap: 0;

        li > a {
            display: block;
            padding: var(--pad);
        }
    }
}

nav {
    background: var(--nav-bg);
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gap);

    & :is(a, button[popovertarget]) {
        text-decoration: none;

        &:hover {
            background-color: Highlight;
            color: HighlightText;
        }
    }

    menu {
        display: flex;
        flex-wrap: wrap;
        list-style-type: "";
        padding-left: 0;
    }

    a,
    button[popovertarget] {
        display: inline-block;
        padding: var(--pad);
    }

    li:has(form) {
        align-content: center;

        form {
            display: flex;
            margin-inline: var(--pad);
        }
    }

    :popover-open {
        background: var(--nav-bg);
        border: 0;
        inset: unset;
    }
}

ul.tabular {
    list-style-type: "";
    padding: 0;
}

:is(ol, ul).tabular,
ol.medium {
    /* Revist this choice after calc-size() is implemented. */
    /* width: min(100%, calc-size(1.5 * fit-content)); */

    > li > :first-child {
        display: flex;

        & > *:not(:is(:first-child, :last-child)) {
            /* spacers between the "name" and it's "value" */
            align-self: end;
            flex-grow: 1;
            border-bottom: dashed GrayText 1px;
            /* height: 1.9lh; */
            margin-inline: 1rem;
            margin-block: 0.33rem;
        }

        & > :last-child {
            text-align: right;
        }
    }
}

ol.release {
    list-style-type: "";
    padding-left: 0;

    > li:not(:first-child) {
        margin-top: calc(2 * var(--gap));
    }

    > li > div {
        text-align: right;
    }
}

ol.medium {
    padding-left: 3ch;

    > li {
        margin-block: calc(var(--gap) / 2);
    }
}

abbr[title] {
    cursor: help;
}

ol.moods {
    /* Moods have less to show than most grid items, so they're a little
   narrower. */
    grid-template-columns: repeat(
        auto-fit,
        minmax(calc(var(--grid-width) - 10ch), 1fr)
    );
}

ol.search-results {
    /* Search results have more to show than most grid items, so they're a
   little wider. */
    grid-template-columns: repeat(
        auto-fit,
        minmax(calc(5ch + var(--grid-width)), 1fr)
    );
}

ol.newest-releases {
    list-style-type: "";
    padding-left: 0;

    > li:not(:first-child) {
        margin-block: var(--gap);
    }
}

.days > menu {
    display: inline-block;
    padding-left: 0;

    > li {
        display: inline-block;
        & + li {
            margin-inline-start: 0.5ch;
        }
    }
}

li > div:only-child {
    display: flex;
    align-items: center;
}

footer {
    background: var(--nav-bg);
    bottom: 0;
    color: GrayText;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 2;

    & #elm-footer > div > div {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        justify-content: space-between;
        padding: var(--pad);
        text-align: center;
        width: 100%;
    }

    .left {
        align-items: center;
        display: flex;
        flex-basis: fit-content;
        flex-direction: row;
        gap: var(--gap);
        justify-content: start;
    }

    .right {
        align-items: center;
        display: flex;
        flex-basis: var(--footer-flex-basis);
        flex-direction: row;
        flex-grow: 1;
        gap: var(--pad);
        justify-content: end;
    }

    a {
        color: GrayText;
        display: inline-block;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }

        .text {
            &:hover {
                text-decoration: none !important;
            }
        }

        &:has(img) {
            align-items: center;
            display: flex;
            flex-direction: row;
            gap: var(--pad);

            & img {
                display: inline-block;
                max-height: 2lh;
            }
        }
    }
}

ul.inline {
    list-style-type: "";
    padding-left: 0;

    > li {
        display: inline-block;

        &:not(:last-child) ::after {
            content: ", ";
        }
    }
}

section > section > h3 + ul {
    font-size: small;
}

ol.medium > li > :not(:first-child) {
    font-size: 90%;
}

.toast {
    background: var(--toast-bg);
    color: FieldText;
    margin-top: calc(-1 * var(--gap));
    margin-bottom: var(--gap);
    padding: var(--pad);
    text-align: center;
}

p {
    max-width: 70ch;
    & + :is(form, p) {
        margin-top: 1ch;
    }
}

main {
    display: grid;
    gap: var(--gap);
    grid-template-areas:
        "primary"
        "secondary"
        "image";
    grid-template-columns: 1fr;
    margin-inline: auto;
    margin-block-end: calc(6 * var(--gap));
    padding-inline: var(--pad);
    max-width: 1440px;

    &.root {
        /* The now playing queue. */
        > section:first-child {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}

main > section {
    grid-area: secondary;
    justify-self: stretch;

    &:first-child {
        grid-area: primary;
    }

    &:has(img:only-child) {
        grid-area: image;
        justify-self: center;
    }
}

section:has(> section + section) {
    /* This will add a gap between subsections in the stats/info section,
   as well as the artist page between releases and compilation
   appearances. */
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

:is(h1, h2):not(:has(+ section:first-of-type)) {
    margin-bottom: var(--gap);
}

hgroup {
    margin-bottom: var(--gap);

    & > h1,
    & > h2 {
        margin-bottom: 0 !important; /* the hgroup will handle it */
    }
}

:is(ol, ul):is(.grid, .outer-grid, .queue) {
    list-style-type: "";
    padding-left: 0;

    :is(ol, ul) {
        list-style-type: "";
        padding-left: 0;
    }
}

.outer-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.grid {
    column-gap: var(--gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), auto));
    grid-template-rows: 1fr;
}

a:has(.link) {
    color: CanvasText;
    text-decoration: none;

    .link {
        color: LinkText;
        text-decoration: underline;
    }
}

.grid.links {
    align-items: safe center;
    /* Links grids are generally simpler, so let them have more
   columns. */
    grid-template-columns: repeat(auto-fit, minmax(30ch, auto));

    > li > a {
        display: block;
        /* Shift left so text lines up, but on hover, there's still nice
   padding. */
        margin-inline-start: calc(-1 * var(--pad) / 2);
        padding: calc(var(--pad) / 2);

        &:hover,
        &:hover .link {
            background: Highlight;
            color: HighlightText;
        }
    }
}

:is(.fancy, .queue) {
    a:has(.link) {
        .link + * {
            font-size: small;
        }
    }

    img {
        height: var(--thumb-size);
        width: var(--thumb-size);
    }
}

.grid.fancy {
    > li {
        height: var(--thumb-size);

        > div > a {
            align-items: safe center;
            display: flex;
            gap: var(--pad);
            overflow: hidden;
            padding-inline-end: var(--pad);
            width: 100%;

            &:hover,
            &:hover .link {
                background: Highlight;
                color: HighlightText;
            }

            /* Allow the first line to wrap, but not any subsequent lines. */
            > div:has(> div) {
                overflow: hidden;

                > div + div {
                    overflow: hidden;
                    text-wrap: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

.queue {
    align-content: stretch;
    display: flex;
    flex-direction: column;
    min-width: min(var(--queue-width), 100%);

    & > li {
        padding-left: var(--pad);

        &:hover {
            background: Highlight;
            color: HighlightText;

            .link {
                color: HighlightText;
            }
        }

        & > a {
            align-content: center;
            align-items: safe center;
            column-gap: var(--pad);
            display: grid;
            grid-template-columns: auto var(--thumb-size);
            grid-template-areas:
                "title  img"
                "artist img";
            justify-items: end;
            text-align: end;

            & > :nth-child(1) {
                grid-area: title;
                align-self: end;
            }

            & > :nth-child(2) {
                grid-area: artist;
                align-self: start;
            }

            & > img {
                grid-area: img;
            }
        }
    }
}

.highlight {
    background-color: Highlight;
}

/* This could probably be improved and generalized. */
.user-token-secret {
    & > div {
        background-color: Highlight;
        display: inline-block;
        margin: calc(var(--pad) / 2);
        padding: calc(var(--pad) / 2);
    }
}

:has(> .extended-info) {
    position: relative;

    &:hover {
        .extended-info {
            display: block;
        }
    }
}

.extended-info {
    display: none;
    font-size: small;
    left: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    z-index: 100; /* Ensure it's above the calendar view. */

    & > div {
        background: var(--toast-bg);
        border-radius: var(--pad);
        color: FieldText;
        margin-left: calc(var(--gap) / 2);
        padding: var(--gap);

        & > div {
            display: flex;
            align-items: center;
            column-gap: 1ex;
        }
    }
}

.days {
    margin-bottom: var(--gap);
}

.now-playing {
    background: var(--toast-bg);
    color: FieldText;
}

section:has(> #calendar) {
    min-width: 60%;
}

#calendar {
    h2 {
        margin-block: 0.67em;
    }

    height: 100%;
}

.calendar {
    background: Field;

    display: grid;
    column-gap: var(--pad);
    grid-template-columns: max-content max-content 1fr;
}

.calendar .scheduling-block {
    background: Canvas;

    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;

    &.now {
        background: AccentColor;
        color: AccentColorText;
    }

    & .icofont-circled-right {
        color: var(--toast-bg);
    }

    & > :first-child {
        grid-column: 1 / 2;
        text-align: right;
    }

    & > :last-child {
        font-weight: bold;
        grid-column: 3 / 4;
    }
}

/* For spacing the users-sessions and users-tokens pages. */
section:has(> h1) > section:has(> h2) {
    margin-bottom: var(--gap);
    margin-top: var(--gap);
}

form.columnar {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: center;
    justify-items: start;
    max-width: 60ch;
    gap: var(--pad);

    & > :nth-child(odd) {
        justify-self: end;
    }

    & > button[type="submit"] {
        grid-column: 2 / -1;
        justify-self: left;
    }
}

table {
    border-spacing: 0;

    tbody {
        tr {
            &:nth-child(even) {
                background-color: hsl(from Canvas h s calc(l * 1.5));
            }

            :is(td, th) {
                padding: 0.5ch;
            }
        }
    }
}

/* Don't let mildred's styles bleed into FullCalendar, ugh. */
.fc {
    table {
        tbody {
            tr {
                &:nth-child(even) {
                    background-color: inherit;
                }

                :is(td, th) {
                    padding: inherit;
                }
            }
        }
    }
}

/* Override some FullCalendar theme bits. */
.fc {
    table {
        &.fc-scrollgrid {
            border: none !important;
        }

        & .fc-daygrid-day.fc-day-today {
            background-color: inherit;
            border: none !important;
        }

        & .fc-theme-standard td,
        & .fc-theme-standard th {
            border: none !important;
        }
    }
}

#player-controls {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    justify-content: center;
    whitespace: nowrap;

    button {
        color: GrayText;
        border: none;
    }
}

@media (min-width: 640px) {
    main {
        grid-template-areas:
            "image     primary"
            "secondary primary"
            "extra     primary";
        grid-template-columns: minmax(auto, var(--img-size)) auto;
        justify-items: end;

        /* Pages without the sidebar, like the artists index. */
        &:has(section:only-child) {
            grid-template-areas: "primary";
            grid-template-columns: 1fr;
        }

        > section:has(img:only-child) {
            justify-self: end;
            img {
                width: 100cqw;
            }
        }

        & > section:not(:first-child) {
            max-width: 288px;
        }

        &.root {
            grid-template-areas: "primary secondary";
            grid-template-columns: 40% 60%;

            /* The now playing queue. */
            > section:first-child {
                align-items: end;
                align-self: start;
            }

            /* The daily calendar view. */
            > section:last-child {
                justify-self: start;
                max-width: unset; /* Unset the non-root secondary setting. */

                h2 {
                    text-align: center;
                }
            }
        }
    }

    .grid {
        /* Prevent a single item in a 3-wide grid from being super wide. */
        justify-content: start;
    }

    .queue {
        & > li {
            border-radius: var(--pad) 0 0 var(--pad);
        }
    }
}