/* ---- */
/* Core */
/* ---- */

* {
  margin: 0;
  padding: 0;
}

:root {
    /* All global settings that aren't really a part of any specific element */
    color-scheme: light dark;
    font: 1rem /* 16px, but scales with user font size */
        "Adwaita Sans",
        InterVariable,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    font-feature-settings: "calt", "cv05", "liga";
    line-height: 1.3rlh;
    text-wrap-style: pretty;
    font-weight: 400;
}

* {
    /* I find this easier to use */
    box-sizing: border-box;
}

/* ---------- */
/* Typography */
/* ---------- */

code {
    /* Intentionally non-root-relative font size */
    font: 0.9em "Adwaita Mono",
          "Iosevka",
          "Monaco",
          "Courier New",
          Courier,
          monospace;
    border: 0.05rem solid var(--scheme-content-border);
    border-radius: 0.25rem;
    padding: 0.1rem;
}
p, main > details, main > ol, main > ul, main > blockquote {
    margin-block: 1lh;
}
h1, h2, h3, h4, h5, h6 {
    margin-block: 1.25lh;
}
block-inhibit > *, details > *, li > *, blockquote > p {
    margin-block: 0;
}
li {
    margin-top: 0.25lh;
    margin-bottom: 0.25lh;
}
li > ul, li > ol {
    margin-left: 2rem;
}
a {
    color: var(--scheme-link);
}
hr {
    border: 0 solid var(--scheme-dimmed-fg);
    border-bottom-width: 0.1rem;
    opacity: var(--scheme-dimmed-opacity);
}
blockquote {
    padding-left: 1rem;
    border: 0 solid var(--scheme-more-dimmed-fg);
    border-left-width: 0.15rem;
}
.captioned {
    margin-block-end: 0.25rem;
}
.caption {
    opacity: var(--scheme-dimmed-opacity);
}


/* ------ */
/* Layout */
/* ------ */

body {
    background-image: url('background.svg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    margin: 0;
    padding: 2rem;
    display: grid;
    grid-template-areas: "left center right";
    grid-template-columns: 1fr auto 1fr;
    grid-auto-rows: min-content;
    grid-auto-flow: column dense;
    gap: 1rem;

    background-color: var(--scheme-site-bg);
    color: var(--scheme-site-fg);
}

.window {
    border-radius: 0.9375rem;
    background-color: var(--scheme-content-bg);
    color: var(--scheme-content-fg);
    box-shadow: var(--scheme-content-shadow);
    outline: 1px solid var(--scheme-content-outline);
    outline-offset: -1px;
}

/* One of three "windows" that form the site UI. */
.toplevel-window {
    height: min-content;
}
/* Left top-level window. */
*[shdn-toplevel-area=left] {
    width: min(100%, 20rem);
    grid-area: left;
    justify-self: self-end;
}
*[shdn-toplevel-area=center] {
    grid-area: center;
}
*[shdn-toplevel-area=right] {
    width: min(100%, 20rem);
    grid-area: right;
    justify-self: self-start;
}

/* Long-form text content.
 * Adjust widths for text content, implement a minimum height.
 * TODO: Is minimum height a good idea...? */
.toplevel-window-article, .toplevel-window-post, .toplevel-window-note {
    width: min(95vw, 42rem);
    min-height: calc(100vh - 4rem);
    display: grid;
    grid-template-rows: auto 1fr;
}
/* Short-form text content.
 * Same as article, but without minimum height. */
.toplevel-window-dialog {
    width: min(95vw, 42rem);
    display: grid;
    grid-template-rows: auto 1fr;
}
/* A vertical list of items. */
.toplevel-window-list {
    padding: 1rem;
}
/* A card displaying a song or album. */
.toplevel-window-music {
    width: min(100%, 20rem);
    padding: 1rem;
    display: grid;
    grid-template-rows: 2rem auto;
    grid-template-areas: "flavor cover"
                         "info   cover";
    place-content: space-between;
    gap: 0.5rem;
}

.music-flavor {
    grid-area: flavor;
}

.music-info {
    display: flex;
    flex-direction: column;
    grid-area: info;
    font-size: 0.9em;
    line-height: 0.9lh;
    gap: 0.25rem;
}

.music-artist {
    border: 0 solid var(--scheme-dimmed-fg);
    border-bottom-width: 0.1rem;
    opacity: var(--scheme-dimmed-opacity);
}

.music-cover-container {
    line-height: 0;
    grid-area: cover;
}

.music-cover {
    margin-left: 1rem;
    max-width: 8rem;
    max-height: 100%;
    aspect-ratio: 1;
    border-radius: 0.25rem;
    padding: 1px;
    padding-bottom: 2px;
    background: #B4B4B4;
    box-shadow: var(--scheme-object-shadow);
}

header {
    max-width: 100%;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

    display: flex;
    flex-direction: column;

    background-color: var(--scheme-header-bg);
    color: var(--scheme-content-fg);
    background-clip: content-box;
    overflow: hidden;

    .header-top {
        min-width: 100%;
        background-color: var(--scheme-header-bg);
        display: flex;
        justify-content: space-between;

        .header-text {
            margin: 0.15rem 1rem 0 1rem;
            align-self: center;
            color: var(--scheme-header-fg);
        }

        .header-controls {
            display: flex;
            flex-direction: row-reverse;
            margin: 0.5rem;
            gap: 0.5rem;

            div {
                display: flex;
                width: 1.5rem;
                height: 1.5rem;
                background-color: var(--scheme-header-control-bg);
                color: var(--scheme-header-bg);
                stroke: var(--scheme-header-fg);
                fill: var(--scheme-header-fg);
                border-radius: 100%;
                padding: 0.25rem;

                svg {
                    width: 1rem;
                    height: 1rem;
                    stroke-width: 0;
                    background-color: var(--scheme-header-control-bg);
                    color: var(--scheme-header-bg);
                    stroke: var(--scheme-header-fg);
                    fill: var(--scheme-header-fg);
                }
            }
        }
    }

    .header-bottom {
        display: grid;
        grid-template-columns: max-content 1fr;
        background-color: var(--scheme-content-bg);

        .header-decoration {
            min-height: 100%;
            background-color: var(--scheme-header-bg);
            color: var(--scheme-header-bg);
            stroke: var(--scheme-content-bg);
            fill: var(--scheme-content-bg);
            background-clip: content-box;
        }

        .header-buttons {
            padding: 0.30rem 0rem 0.70rem 0.75rem;

            display: flex;
            flex-direction: column;

            background-color: var(--scheme-header-bg);
            color: var(--scheme-header-fg);
            place-content: space-around;

            nav {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                column-gap: 0.75rem;
                line-height: 0.5rlh;

                * {
                    color: var(--scheme-header-fg);
                    stroke-width: 0;
                    stroke: var(--scheme-header-fg);
                    fill: var(--scheme-header-fg);
                    width: 1.5rem;
                    height: 1.5rem;
                }
            }
        }
    }
}

main {
    overflow-wrap: break-word;
    margin: 0 auto;
    padding: 0 2rem;
    width: min(42rem, 100vw, 100%);
}

.flavor-caption {
    color: var(--scheme-flavor-caption);
    margin: 0;
    padding: 0;
    line-height: 0.5rlh;
    font: 0.775rem
        "Adwaita Mono",
        "Source Code Pro",
        "Monaco",
        "Courier New",
        Courier,
        monospace;
}

/* Screen is less wide than maximum article width + minimum width of two
 * widgets + whitespace. Collapse right widget under the center toplevel. */
@media (max-width: 80rem) {
    body {
        grid-template-areas: "left center"
                             "right center";
        grid-template-columns: auto auto;
        grid-template-rows: auto 1fr;
        justify-items: center;
        justify-content: center;
    }
    .toplevel-window[shdn-toplevel-area=left] {
        justify-self: revert;
    }
    .toplevel-window[shdn-toplevel-area=right] {
        justify-self: revert;
    }

}

/* Screen is less wide than maximum article width + minimum width of one widget
 * + whitespace.
 * Layout becomes completely vertical, with left toplevel above the center
 * toplevel, and right toplevel below it. All toplevels lock their width to
 * that of the center one. */
@media (max-width: 57rem) {
    body {
        grid-template-areas: "left"
                             "center"
                             "right";
        grid-template-columns: auto;
        grid-template-rows: 1fr auto 1fr;
        gap: 1rem;
    }
    .toplevel-window-article, .toplevel-window-post, .toplevel-window-note {
        min-height: revert;
    }
    .toplevel-window[shdn-toplevel-area=center] {
        margin: 0 auto;
    }
    .toplevel-window[shdn-toplevel-area=left] {
        margin: 0 auto;
        width: min(95vw, 42rem);

    }
    .toplevel-window[shdn-toplevel-area=right] {
        margin: 0 auto;
        width: min(95vw, 42rem);
    }
}

/* Screen is less wide than maximum article width.
 * Use as much space as possible for the article.
 * Decrease font size on long-form text for readability.
 */
@media (max-width: 44rem) {
    body {
        grid-template-areas: "left"
                             "center"
                             "right";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
        margin: 0 auto;
        padding: 1rem 0;
        gap: 1rem;
    }
    .toplevel-window-article, .toplevel-window-post, .toplevel-window-note {
        font-size: 0.875rem;
        line-height: 0.875rlh;
    }
}

/* ------------- */
/* Color palette */
/* ------------- */

:root {
    --palette-fragments-light-green: #DDF7E9;
    --palette-fragments-mid-green: #93C1A9;
    --palette-fragments-dark-green: #2A332E;

    --palette-adwaita-light-window-bg: #fafafb;
    --palette-adwaita-light-window-fg: rgb(0 0 6 / 80%);
    --palette-adwaita-light-sidebar-bg: #ebebed;
    --palette-adwaita-light-sidebar-fg: rgb(0 0 6 / 80%);
    --palette-adwaita-light-view-bg: #ffffff;
    --palette-adwaita-light-view-fg: rgb(0 0 6 / 80%);
    --palette-adwaita-light-shade: rgb(0 0 6 / 7%);

    --palette-adwaita-dark-window-bg: #222226;
    --palette-adwaita-dark-window-fg: #ffffff;
    --palette-adwaita-dark-sidebar-bg: #2e2e32;
    --palette-adwaita-dark-sidebar-fg: #ffffff;
    --palette-adwaita-dark-view-bg: #1d1d20;
    --palette-adwaita-dark-view-fg: #ffffff;
    --palette-adwaita-dark-shade: rgb(0 0 6 / 25%);
    /* A more transparent opacity for layering backgrounds. */
    --palette-fragments-more-dim-opacity: 35%;
    --palette-adwaita-dim-opacity: 55%;
    /* A more readable opacity for dimmed text. */
    --palette-fragments-less-dim-opacity: 85%;
    --palette-adwaita-window-outline: rgb(255 255 255 / 7%);
    --palette-adwaita-window-shadow: 0 0 14px 5px rgb(0 0 0 / 15%),
                                     0 0 5px 2px rgb(0 0 0 / 10%),
                                     0 0 0 1px rgb(0 0 0 / 5%);
    /* A softer shadow for light theme. I think this is an acceptable deviation,
       since the shadow serves no purpose on a website, due to not having focus
       changes, and looks sort of distracting against the white background.      */
    --palette-fragments-window-shadow: 0 0 14px 5px rgb(0 0 0 / 10%),
                                       0 0 5px 2px rgb(0 0 0 / 5%);

    /* The same shadow used by GNOME Files for image thumbnails */
    --palette-adwaita-object-shadow: 0px 1px 1px 1px rgb(0,0,0,0.18),
                                     0px 0px 0px 1px var(--scheme-content-shadow),
                                     0px 2px 0px 0px var(--scheme-content-shadow);
}

/* ------------- */
/* Color schemes */
/* ------------- */

:root {
    --scheme-site-bg: light-dark(
        var(--palette-adwaita-light-sidebar-bg),
        var(--palette-adwaita-dark-sidebar-bg)
    );
    --scheme-site-fg: light-dark(
        var(--palette-adwaita-light-sidebar-fg),
        var(--palette-adwaita-dark-sidebar-fg)
    );
    --scheme-content-bg: light-dark(
        var(--palette-adwaita-light-window-bg),
        var(--palette-adwaita-dark-window-bg)
    );
    --scheme-content-fg: light-dark(
        var(--palette-adwaita-light-window-fg),
        var(--palette-adwaita-dark-window-fg)
    );
    --scheme-link: light-dark(
        var(--palette-fragments-mid-green),
        var(--palette-fragments-light-green)
    );
    --scheme-content-shadow: light-dark(
        var(--palette-adwaita-dark-shade),
        var(--palette-adwaita-light-shade)
    );
    --scheme-content-border: light-dark(
        var(--palette-adwaita-dark-shade),
        var(--palette-adwaita-dark-sidebar-bg)
    );
    --scheme-content-outline: var(--palette-adwaita-window-outline);
    /* Set for dark theme with a media query, light-dark() is only for colors */
    --scheme-content-shadow: var(--palette-fragments-window-shadow);
    @media (prefers-color-scheme: dark) {
      --scheme-content-shadow: var(--palette-adwaita-window-shadow);
    }
    --scheme-object-shadow: var(--palette-adwaita-object-shadow);
    --scheme-flavor-caption: light-dark(
        var(--palette-adwaita-light-window-fg),
        var(--palette-adwaita-dark-window-fg)
    );
    --scheme-dimmed-opacity: var(--palette-adwaita-dim-opacity);
    --scheme-dimmed-fg: rgb(from var(--scheme-content-fg) r g b / var(--scheme-dimmed-opacity));
    --scheme-dimmed-bg: rgb(from var(--scheme-content-bg) r g b / var(--scheme-dimmed-opacity));
    --scheme-less-dimmed-opacity: var(--palette-fragments-less-dim-opacity);
    --scheme-less-dimmed-fg: rgb(from var(--scheme-content-fg) r g b / var(--scheme-less-dimmed-opacity));
    --scheme-less-dimmed-bg: rgb(from var(--scheme-content-bg) r g b / var(--scheme-less-dimmed-opacity));
    --scheme-more-dimmed-opacity: var(--palette-fragments-more-dim-opacity);
    --scheme-more-dimmed-fg: rgb(from var(--scheme-content-fg) r g b / var(--scheme-more-dimmed-opacity));
    --scheme-more-dimmed-bg: rgb(from var(--scheme-content-bg) r g b / var(--scheme-more-dimmed-opacity));

    /*
      Inverted from normal colors.
      In light theme, uses dark palette, and vice versa
    */
    --scheme-header-bg: light-dark(
        var(--palette-adwaita-dark-view-bg),
        var(--palette-adwaita-light-view-bg)
    );
    --scheme-header-fg: light-dark(
        var(--palette-adwaita-dark-view-fg),
        var(--palette-adwaita-light-view-fg)
    );
    --scheme-header-control-bg: light-dark(
        var(--palette-adwaita-dark-sidebar-bg),
        var(--palette-adwaita-light-sidebar-bg)
    );
}