:root {
    /* --accent-color: rgb(167, 100, 23); */
    /* --navigation-accent-color: rgb(167, 100, 23); */
    /* --navigation-muted-color: color-mix( */
    /*   in srgb, */
    /*   var(--navigation-accent-color), */
    /*   black 40% */
    /* ); */
    /* --navigation-background-color: color-mix( */
    /*   in srgb, */
    /*   var(--navigation-accent-color), */
    /*   white 95% */
    /* ); */
    /* --bullet-color: var(--accent-color); */
    /* --blockexample-accent-color: cornflowerblue; */
    /* --blocksrc-accent-color: lightgreen; */
    /* --blockquote-accent-color: orange; */
    /* --blockverse-accent-color: violet; */
    /* --blockcomment-accent-color: salmon; */
    /* --block-background-color: gainsboro; */
    /* --code-background-color: gainsboro; */
    /* --properties-color: lightslategray; */
    /* --properties-content-color: slategray; */
    /* --formatting-color: var(--accent-color); */

    --background-color: white;
    --accent-color: #4080c0;
    --muted-color: lightslategray;
    --navigation-accent-color: midnightblue;
    --navigation-muted-color: slategray;
    --navigation-background-color: linen;
    --bullet-color: orange;
    --blockexample-accent-color: cornflowerblue;
    --blocksrc-accent-color: lightgreen;
    --blockquote-accent-color: orange;
    --blockverse-accent-color: violet;
    --blockcomment-accent-color: salmon;
    --block-background-color: gainsboro;
    --code-background-color: gainsboro;
    --properties-color: lightslategray;
    --properties-content-color: slategray;
    --formatting-color: lightslategray;

    --save-indicator-color-saved: forestgreen;
    --save-indicator-color-unsaved: orange;
    --save-indicator-color-pending: greenyellow;
    --save-indicator-color-error: red;

    --autocomplete-border-color: var(--navigation-accent-color);
    --autocomplete-background-color: var(--background-color);
    --autocomplete-hover-background-color: var(--navigation-background-color);
    --autocomplete-active-color: var(--background-color);
    --autocomplete-active-background-color: var(--accent-color);
    --autocomplete-description-color: var(--muted-color);
    --autocomplete-active-description-color: gainsboro;

    --backdrop-color: #99999933;
    --backdrop-filter: grayscale(60%) blur(6px);

    --browser-default-input-border-color: #767676;
    --browser-default-input-outline-color: #0060cc;

    --comment-color: forestgreen;
}

html {
    color-scheme: light dark;
}

body {
    font-family: system-ui, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.heading-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 3em;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    background-color: var(--navigation-background-color);
    border-bottom: solid 1px var(--navigation-accent-color);

    & h1 {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    & a {
        color: var(--navigation-accent-color);
        font-weight: bold;
        text-decoration: none;
    }
}

.shortcut-column {
    margin-left: auto;
    margin-right: 0;
    font-size: 20pt;

    a {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    & span {
        margin-right: 0.75em;
    }
}

.main {
    display: flex;
    width: 100%;

    centre-panel {
        width: calc(100% - 20em);
        max-width: 50em;
    }

    & .file-navigation {
        padding-right: 2em;
        margin-right: 1px;
        width: 14em;
        /* font-family: monospace; */
        /* height: calc(100vh - 4em); */
        /* overflow-y: scroll; */

        & a {
            color: var(--navigation-accent-color);
            font-weight: bold;
            text-decoration: none;
        }

        & summary {
            color: var(--navigation-muted-color);
            font-weight: bold;
            /* cursor: pointer; */
        }

        .directory,
        .file {
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .directory {
            margin-left: 0.85em;
        }

        .directory > summary {
        }

        .file {
            border: 1px solid transparent;
            box-sizing: border-box;
        }

        & .directory > .file {
            padding-left: 0.7em;
        }

        & .current-page {
            border: 1px var(--navigation-accent-color) solid;
            background-color: var(--navigation-background-color);
        }
    }
}

.noscript {
    background-color: lightpink;
    display: block;
    padding: 1em 2em 1em 2em;
    margin-bottom: 1em;
}

/* #org-editor { */
/*   width: calc(100% - 20em); */
/* } */

org-save-indicator {
    /* display: inline-block; */
    margin-right: 0.75em;
    cursor: default;

    &.saved {
        color: var(--save-indicator-color-saved);
    }

    &.unsaved {
        color: var(--save-indicator-color-unsaved);
    }

    &.pending {
        color: var(--save-indicator-color-pending);
    }

    &.error {
        color: var(--save-indicator-color-error);
    }
}

backlinks-panel {
    & a {
        cursor: pointer;
        color: var(--accent-color);
    }

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        display: inline-block;
        margin-block-start: 0;
        margin-block-end: 0;
        font-weight: bold;
        overflow-wrap: anywhere;
    }

    ol > li::marker {
        font-size: 1rem;
        font-weight: bold;
    }

    ol > li {
        padding-bottom: 1em;
    }
}

#org-editor {
    min-height: 25rem;
}

org-editor,
org-display {
    display: block;
    font-family: monospace;
    white-space: pre-wrap;
    outline: 0;

    /* Headings are awkward. We want to have headings inline so they use the trailing newline like all the other lines.      */
    /* But there's a bug in Chromium if we use display: inline-block to do this - it breaks up/down arrow-key navigations.   */
    /* (Basically, keying UP from a heading takes you to the very beginning of the document, and keying DOWN takes you to    */
    /* the very end. Using display: inline seems to work...                                                                  */
    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        display: inline-block;
        margin-block-start: 0;
        margin-block-end: 0;
        font-weight: bold;
        overflow-wrap: anywhere;
    }

    /* Headings are awkward. We want to have headings inline so they use the trailing newline like all the other lines.      */
    /* But there's a bug in Chromium if we use display: inline-block to do this - it breaks up/down arrow-key navigations.   */
    /* (Basically, keying UP from a heading takes you to the very beginning of the document, and keying DOWN takes you to    */
    /* the very end. So we use inline now, but I'm keeping these classes here a little longer in case that doesn't work out. */
    & .h1,
    & .h2,
    & .h3,
    & .h4,
    & .h5,
    & .h6 {
        margin-block-start: 0;
        margin-block-end: 0;
        font-weight: bold;
        overflow-wrap: anywhere;
    }

    .h1 {
        font-size: 2em;
    }

    .h2 {
        font-size: 1.5em;
    }

    .h3 {
        font-size: 1.17em;
    }

    .h4 {
        font-size: 1em;
    }

    .h5 {
        font-size: 0.83em;
    }

    .h6 {
        font-size: 0.67em;
    }

    & a {
        cursor: pointer;
        color: var(--accent-color);
    }

    & org-link.org-link-by-id {
        background-color: var(--navigation-background-color);
    }

    & code,
    & pre {
        border-radius: 4px;
        background-color: var(--code-background-color);
        overflow: auto;
        max-width: 100%;
    }

    & pre {
        padding: 0.75rem 1rem;
        tab-size: 2;
    }

    & ol,
    & ul {
        margin-left: 1em;
    }

    & li {
        overflow-wrap: anywhere;
    }

    & img,
    & svg,
    & picture,
    & video {
        max-width: 100%;
        height: auto;
        border-radius: 0.25rem;
        margin-inline: auto;
        display: block;
    }

    & .format-characters {
        color: var(--formatting-color);
        outline: 0;
    }

    & .header-stars {
        color: var(--accent-color);
        display: inline-block;
        text-align: right;
        width: 5em;
        margin-left: -5em;
    }

    & .header-separator {
        width: 1em;
        font-size: 1rem;
    }

    & .format-characters.bullet {
        color: var(--bullet-color);
    }

    & .bullet-line {
        /* padding-left: 20px; */
        /* display: inline-block; */
    }

    & .bullet-line > .bullet {
        /* margin-left: -20px; */
    }

    & .bullet-line > .bullet-body {
    }

    & .block {
        display: inline-block;
        margin-left: 2.5em;
        background-color: var(--block-background-color);
        padding: 0.75rem 1rem 0.75rem 1.25rem;
        border-radius: 0 0.5rem 0.5rem 0;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    & .blockexample-block {
        border-inline-start: 2px solid var(--blockexample-accent-color);
    }

    & .blocksrc-block {
        border-inline-start: 2px solid var(--blocksrc-accent-color);
    }

    & .blockquote-block {
        border-inline-start: 2px solid var(--blockquote-accent-color);
    }

    & .blockverse-block {
        border-inline-start: 2px solid var(--blockverse-accent-color);
    }

    & .blockcomment-block {
        border-inline-start: 2px solid var(--blockcomment-accent-color);
    }

    & .properties-container {
        display: inline-block;
    }

    & .properties-start,
    & .properties-end {
        color: var(--properties-color);
        outline: 0;
    }

    & .properties-content {
        color: var(--properties-content-color);
        outline: 0;
    }

    & .title-start {
        color: var(--properties-color);
        outline: 0;
    }

    & .title-content {
        display: inline-block;
        color: var(--accent-color);
        outline: 0;
    }

    & org-horizontal-rule {
        display: inline-block;
        /* border: 1px solid red; */
        width: calc(100% - 4ch);
    }

    & org-horizontal-rule > hr {
        display: inline-block;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--accent-color);
    }

    & org-horizontal-rule > span {
        /* background-color: yellow; */
    }

    & .comment {
        color: var(--comment-color);
    }

    & .table {
        display: table;
    }

    & .table-row {
        display: table-row;
    }

    & .table-cell,
    & .table-separator {
        display: table-cell;
    }
}

dialog,
.login-form {
    /* overflow: hidden; */
    width: 50em;
    /* min-height: 20em; */
    padding: 0;
    margin-top: 10em;
    border-radius: 0.5rem 0.5rem 0 0;

    header {
        width: 100%;
        background-color: var(--navigation-background-color);
        border-bottom: 1px solid var(--navigation-accent-color);
    }

    h2 {
        display: inline-block;
        margin: 0 0 0 2em;
    }

    .form-body {
        margin: 1em;
        margin-right: 1.5em;

        .input-line {
            display: flex;
            flex-direction: row;
        }

        .input-line input {
            font-size: 1rem;
            padding: 8px 4px;
            width: 100%;
        }

        org-autocomplete-component,
        org-search-component {
            width: 100%;
        }
    }

    &::backdrop {
        background-color: var(--backdrop-color);
        backdrop-filter: var(--backdrop-filter);
    }
}

org-autocomplete-component,
org-search-component {
    padding: 1px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--browser-default-input-border-color);
    border-radius: 2px;
    font-size: 1rem;

    &:focus-within {
        padding: 0;
        border: 2px solid var(--browser-default-input-outline-color);
        border-radius: 2px;
    }
}

org-search-component input {
    width: 100%;
}

org-autocomplete-component,
org-search-component,
org-link-autocomplete-component {
    & > span {
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
    }

    & span[contenteditable] {
        outline: 0;
        padding: 4px;
        flex: 1 1 auto;

        &:empty::before {
            content: "\feff " attr(placeholder);
            color: var(--browser-default-input-border-color);
        }
    }

    .prefix {
        background-color: var(--code-background-color);
    }

    .autocomplete {
        border-top: 2px var(--autocomplete-border-color) solid;
        max-height: 50vh;
        overflow-y: scroll;

        & .option {
            padding: 10px;
            cursor: pointer;
            background-color: var(--autocomplete-background-color);
            border-bottom: 1px var(--autocomplete-border-color) solid;

            &:hover {
                background-color: var(--autocomplete-hover-background-color);
            }

            &.active {
                background-color: var(--autocomplete-active-background-color);
                color: var(--autocomplete-active-color);

                & .option-description {
                    color: var(--autocomplete-active-description-color);
                }
            }

            & .option-name {
                font-size: large;
            }

            & .option-description {
                font-size: small;
                color: var(--autocomplete-description-color);
            }
        }
    }
}

.debug-rect {
    display: none;
    position: absolute;
    min-width: 10px;
    margin-left: -5px;
    height: 16px;
}

.debug-rect-current-caret {
    border: 2px solid blue;
}

.debug-rect-node {
    border: 1px solid green;
    /* background-color: purple; */
}

.debug-rect-node-target {
    border: 1px solid orange;
    /* opacity: 0.2; */
}

.debug-rect-node-primary-target {
    background-color: yellow;
    border: 1px solid red;
}

.debug-rect-node-client-rect {
    border: 1px solid purple;
    /* background-color: purple; */
    /* opacity: 0.1; */
}

.debug-possible-caret-point {
    background-color: yellow;
    width: 4px !important;
    z-index: 1000;
}

.login-form {
    max-width: fit-content;
    margin-top: 5em;
    margin-left: auto;
    margin-right: auto;

    label {
        display: inline-block;
        width: 100px;
    }

    .error-message {
        color: var(--save-indicator-color-error);
        font-weight: bold;
    }

    div:has(> input[type="submit"]) {
        text-align: right;
    }
}

org-link-autocomplete-component {
    display: block;
    position: absolute;
    min-width: 100px;
    min-height: 100px;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 1px solid black;
}