:root {
    /* --main-font: monospace; */
    --main-font: system-ui, sans-serif;
    --navigation-font: var(--main-font);
    --titlebar-font: var(--main-font);
    --header-font: var(--main-font);

    --font-size: 1rem;

    --background-color: white;
    --accent-color: #2D93AD;
    --muted-color: #AC92A6;
    --navigation-accent-color: #2D93AD;
    --navigation-muted-color: slategray;
    --navigation-background-color: #DFF8EB;
    --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: #DFF8EB;
    --code-background-color: #DFF8EB;
    --properties-color: #AC92A6;
    --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;

    /* From: https://www.alwaystwisted.com/articles/building-typographic-scales-with-headings-sibling-index-and-pow */
    /* Scale ratios based on musical intervals */
    --scale-minor-second: 1.067;
    --scale-major-second: 1.125;
    --scale-minor-third: 1.2;
    --scale-major-third: 1.25;
    --scale-perfect-fourth: 1.333;
    --scale-augmented-fourth: 1.414;
    --scale-perfect-fifth: 1.5;
    --scale-golden-ratio: 1.618;

    /* Active scale - change this to switch globally */
    --typographic-scale: var(--scale-major-second);

    --heading-base-size: var(--font-size);
    --heading-max-level: 6;
}

/* From: https://www.alwaystwisted.com/articles/building-typographic-scales-with-headings-sibling-index-and-pow */
/* When :heading and sibling-index() become generally available we can wrap these all into one line. */
h1 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 1)
  );
}

h2 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 2)
  );
}

h3 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 3)
  );
}

h4 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 4)
  );
}

h5 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 5)
  );
}

h6 {
  font-size: calc(
    var(--heading-base-size) *
      pow(var(--typographic-scale), var(--heading-max-level) - 6)
  );
}

html {
    color-scheme: light dark;
}

body {
    font-family: var(--main-font);
    font-weight: normal;
    font-size: var(--font-size);
    line-height: 1.5;
    margin: 0;
}

header {
    position: sticky;
    top: 0;
}

.titlebar-row {
    display: flex;
    font-family: var(--titlebar-font);
    flex-direction: row;
    flex-wrap: wrap;
    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;
    }
}

.logo {
    width: calc(
	var(--heading-base-size) *
	pow(var(--typographic-scale), var(--heading-max-level) - 1)
    );
    height: calc(
	var(--heading-base-size) *
	pow(var(--typographic-scale), var(--heading-max-level) - 1)
    );
    vertical-align: text-bottom;
}

.shortcut-column {
    margin-left: auto;
    margin-right: 0;
    /* font-size: xx-large; */

    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-family: var(--header-font);
        font-weight: bold;
        overflow-wrap: anywhere;
    }

    ol > li::marker {
        font-size: var(--font-size);
        font-weight: bold;
    }

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

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

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

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

    .hide-unselected {
	visibility: hidden;
    }

    [org-selection=true] > .hide-unselected {
	visibility: initial;
    }

    .remove-unselected {
	display: none;
    }

    [org-selection=true] > .remove-unselected {
	display: initial;
    }

    & 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;
    }

    & .embedded-image {
	max-width: 50rem;
	max-height: 50rem;
	object-fit: cover;
    }

    & .autolinked-url {
	color: var(--muted-color);
    }

    & .format-marker {
        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: var(--font-size);
    }

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

    & .bullet-line {
        display: flex;
    }

    & .bullet-line > .bullet {
        flex: 0 0 20px;
    }

    & .bullet-line > .bullet-body {
	flex: 1;
    }

    & .block {
        /* display: inline-block; */
        display: 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; */
    }

    & org-drawer {
	/* color: var(--formatting-color); */
    }
    
    & org-keyword {
	color: var(--formatting-color);
    }

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

    & .table {
        display: table;
    }

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

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

org-display-formatting {
    .remove-unselected {
	display: initial !important;
    }
}

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: var(--font-size);
            padding: 8px 4px;
            width: 100%;
        }

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

    .image-preview-scrollable {
	overflow: scroll;
	height: 400px;
    }

    .image-preview-container {
	display: flex;
	justify-content: center;
    }

    .image-preview {
	max-height: 800px;
	max-width: 800px;
    }

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

.paste-image-dialog {
    max-height: 80vh;
}

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: var(--font-size);

    &: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: larger;
            }

            & .option-description {
                font-size: smaller;
                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;
}