/**
 *
 * Space:
 * - minimum width: 19rem
 *   -> should be 304px on most devices (1rem = 16px)
 *   -> minimal padding of 0.5rem on all sides -> 18rem of usable space
 * - break at: 37rem -> 36rem of usable space
 * - a basic element has 3rem or 6rem including padding
 *
 * Components:
 *
 * `block`:
 * - positions itself on the page
 * - might be modified to have a border (+ `block_with_border`)
 * - might be modified (+ `block_with_highlight`) to have special
 *   positioning for child with class `block_highlight`
 * - might be modified to be single line only (+ `block_single_row`) which
 *   may have centered children (+ `block_single_row_centered`)
 *
 * `control`:
 * - gives uniform padding, etc. to page controls (input, ...)
 * - might be highlighted (+ `control_highlight`)
 * - might be made to grow / shrink (+ `control_variable_width`)
 *
 * `pane`:
 * - group `control`s together so they can break nicely at the end of
 *   their `block`
 * - do not add paddings
 * - might be stacked
 *
 * `text-container`:
 * - container for text which add padding
 */

/* colors */

:root, .bright_mode {
    --color-bg: #FFFFFF;
    --color-on-bg: #000000;
    --color-shadow: rgba(0, 0, 0, 30%);
    --color-def: hsl(0, 0%, 95%);
    --color-def-variant: hsl(0, 0%, 85%);
    --color-on-def: #000000;
    --color-txt: hsl(0, 0%, 95%);
    --color-txt-variant: hsl(0, 0%, 85%);
    --color-on-txt: #000000;
    --color-cap: hsl(0, 0%, 95%);
    --color-cap-variant: hsl(0, 0%, 85%);
    --color-on-cap: #000000;
    --color-ref: hsl(112, 100%, 95%);
    --color-ref-variant: hsl(112, 100%, 85%);
    --color-on-ref: #000000;
    --color-pat: hsl(360, 100%, 95%);
    --color-pat-variant: hsl(360, 100%, 85%);
    --color-on-pat: #000000;
    --color-int: hsl(253, 100%, 95%);
    --color-int-variant: hsl(253, 100%, 85%);
    --color-on-int: #000000;
    --color-res: hsl(220, 100%, 95%);
    --color-res-variant: hsl(220, 100%, 85%);
    --color-on-res: #000000;

    --width-base: 3rem;
    --padding: 0.5rem;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --color-bg: #000000;
        --color-on-bg: #FFFFFF;
        --color-shadow: rgba(255, 255, 255, 30%);
        --color-def: hsl(0, 0%, 90%);
        --color-def-variant: hsl(0, 0%, 85%);
        --color-on-def: #000000;
        --color-txt: hsl(0, 0%, 90%);
        --color-txt-variant: hsl(0, 0%, 85%);
        --color-on-txt: #000000;
        --color-cap: hsl(0, 0%, 90%);
        --color-cap-variant: hsl(0, 0%, 85%);
        --color-on-cap: #000000;
        --color-ref: hsl(112, 100%, 90%);
        --color-ref-variant: hsl(112, 100%, 85%);
        --color-on-ref: #000000;
        --color-pat: hsl(360, 100%, 90%);
        --color-pat-variant: hsl(360, 100%, 85%);
        --color-on-pat: #000000;
        --color-int: hsl(253, 100%, 90%);
        --color-int-variant: hsl(253, 100%, 85%);
        --color-on-int: #000000;
        --color-res: hsl(220, 100%, 90%);
        --color-res-variant: hsl(220, 100%, 85%);
        --color-on-res: #000000;
    }
}

.dark_mode {
    --color-bg: #000000;
    --color-on-bg: #FFFFFF;
    --color-shadow: rgba(255, 255, 255, 30%);
    --color-def: hsl(0, 0%, 90%);
    --color-def-variant: hsl(0, 0%, 85%);
    --color-on-def: #000000;
    --color-txt: hsl(0, 0%, 90%);
    --color-txt-variant: hsl(0, 0%, 85%);
    --color-on-txt: #000000;
    --color-cap: hsl(0, 0%, 90%);
    --color-cap-variant: hsl(0, 0%, 85%);
    --color-on-cap: #000000;
    --color-ref: hsl(112, 100%, 90%);
    --color-ref-variant: hsl(112, 100%, 85%);
    --color-on-ref: #000000;
    --color-pat: hsl(360, 100%, 90%);
    --color-pat-variant: hsl(360, 100%, 85%);
    --color-on-pat: #000000;
    --color-int: hsl(253, 100%, 90%);
    --color-int-variant: hsl(253, 100%, 85%);
    --color-on-int: #000000;
    --color-res: hsl(220, 100%, 90%);
    --color-res-variant: hsl(220, 100%, 85%);
    --color-on-res: #000000;
}

/**
 * reset
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button {
    margin: 0;
    padding: 0;
    border-style: none;
    border-width: 0;
    border-radius: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    vertical-align: baseline;
    background-color: transparent;
    line-height: 1;
    text-transform: none;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
[type="range"]{
    margin: 0;
    padding: 0;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    border-style: none;
    padding: 0;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-on-bg);
}

strong {
    font-weight: bold;
}

a {
    text-decoration: underline;
}

button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

input[type="radio"] {
    visibility: collapse;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

textarea {
    background-color: var(--color-bg);
}

/**
 * structure
 */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    /*min-width: 19rem;
    max-width: 50rem;
    magin: auto;*/
    height: 96vh;
    height: 96svh;
    padding: 2vh;
    padding: 2svh;
}

main {
    height: 96vh;
    height: 96svh;
    display: grid;
    column-gap: 2vw;
    row-gap: var(--padding);
    grid-template-columns: 47vw 47vw;
    grid-template-rows: calc(1rem + 2 * var(--padding)) auto calc(1rem + 2 * var(--padding));
    grid-template-areas:
        "header right"
        "left right"
        "control right";
}

@media (max-width: 800px) {
    main {
        column-gap: 0;
        row-gap: 0;
        grid-template-columns: auto;
        grid-template-rows: calc(1rem + 2 * var(--padding)) auto calc(1rem + 2 * var(--padding)) 10rem;
        grid-template-areas:
            "header"
            "right"
            "control"
            "left";
    }
}

#EntityCollection, #ContentPreview {
    grid-area: right;
    overflow: scroll;
    user-select: none;
}

#DocumentationEditor, #ContentEditor {
    grid-area: left;
}

#MainControl {
    grid-area: control;
}

#Header {
    grid-area: header;
    display: flex;
    align-items: flex-end;
}

.modal_background {
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_canvas {
    background-color: var(--color-bg);
    border-radius: calc(2 * var(--padding));
    box-shadow: 0 0 calc(2 * var(--padding)) var(--color-shadow);
}

.modal_content {
    padding: calc(2 * var(--padding));
}

.modal_bar .control {
    width: 2rem;
    min-width: initial;
    max-width: initial;
    flex-grow: 1;
    flex-shrink: 1;
}

.modal_bar_top .control:first-child {
    border-top-left-radius: calc(2 * var(--padding));
}

.modal_bar_top .control:last-child {
    border-top-right-radius: calc(2 * var(--padding));
}

.modal_bar_bottom .control:first-child {
    border-bottom-left-radius: calc(2 * var(--padding));
}

.modal_bar_bottom .control:last-child {
    border-bottom-right-radius: calc(2 * var(--padding));
}

/* controls */

.pane {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.control,
.label {
    padding: var(--padding);
}

.control {
    color: var(--color-on-def);
    border-color: var(--color-def-variant);
    background-color: var(--color-def);
    text-align: center;
}

.control_variable_width {
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.label {
    color: var(--color-on-def);
    font-weight: bold;
}

.control:hover {
    background-color: var(--color-def-variant);
}

.control_highlight {
    font-weight: bold;
}

/* EntityCollection */

.heading {
    font-weight: bold;
    text-align: center;
    padding-top: calc(var(--padding)*2);
}

h1.heading {
    text-align: left;
    font-size: 1.5em;
    padding: var(--padding) 0;
}

.collapsed .group {
    display: none;
}

h2.heading::after {
    content: ' ▴';
}

.collapsed h2.heading::after {
    content: ' ▾';
}

.item {
    margin: calc(0.5 * var(--padding));
}

.item_cap {
    font-weight: bold;
}

.item_color .item_ref {
    background-color: var(--color-ref);
    border-color: var(--color-ref-variant);
    color: var(--color-on-ref);
}

.item_color .item_ref:hover {
    background-color: var(--color-ref-variant);
}

.item_color .item_pat {
    background-color: var(--color-pat);
    border-color: var(--color-pat-variant);
    color: var(--color-on-pat);
}

.item_color .item_pat:hover {
    background-color: var(--color-pat-variant);
}

.item_color .item_int {
    background-color: var(--color-int);
    border-color: var(--color-int-variant);
    color: var(--color-on-int);
}

.item_color .item_int:hover {
    background-color: var(--color-int-variant);
}

.item_color .item_res {
    background-color: var(--color-res);
    border-color: var(--color-res-variant);
    color: var(--color-on-res);
}

.item_color .item_res:hover {
    background-color: var(--color-res-variant);
}

.item_border .item {
    border-style: none none none solid;
    border-width: 0.5rem;
}

/* EntityCollection */

#EntityCollection .control,
#EntityCollection .label {
    max-width: calc(var(--width-base) * 5);
    min-width: calc(var(--width-base) * 1.8);
}

.editor_mode.collection {
    background-color: hsl(0, 0%, 90%);
    padding: var(--padding);
}

.editor_mode .category {
    background-color: hsl(0, 0%, 85%);
    padding: var(--padding);
}

.editor_mode .group, .editor_mode .content {
    background-color: hsl(0, 0%, 80%);
    margin-bottom: var(--padding);
    padding: var(--padding);
}

.editor_mode .group:last-child, .editor_mode .content:last-child {
    margin-bottom: 0;
}

.editor_mode .content {
    background-color: var(--color-def);
}

/* EntityEditor */

#EntityEditor {
    min-width: 80%;
    max-width: 90%;
}

.editor_row .control,
.editor_row .label {
    width: calc(var(--width-base) * 5);
}

.editor_row .control {
    flex-grow: 1;
    text-align: left;
}

.editor_row .label {
    text-align: right;
}

.editor .pane {
    flex-wrap: wrap;
}

.editor_row textarea.control {
    height: 10rem;
}

.editor_row input[type=checkbox].control {
    height: initial;
    width: initial;
    flex-grow: 0;
}

/* Dialog */

#DialogBackground {
    z-index: 1000010;
}

#Dialog {
    min-width: 20%;
    max-width: 40%;
}

#Dialog .pane .control_variable_width {
    width: 2rem;
    min-width: initial;
    max-width: initial;
}

/* ContentWindow */

#ContentWindow {
    width: 60%;
    padding: calc(2 * var(--padding));
}

/* SourceIndicator / SourceList / ScrollNavigation */

#SourceIndicator {
    flex-grow: 1;
    padding: calc(2 * var(--padding)) calc(var(--padding) * 3) 0 calc(var(--padding) * 3);
    cursor: pointer;
}

#SourceIndicator::after {
    content: ' ▾';
}

#SourceList, #ScrollNavigation {
    display: flex;
    flex-wrap: wrap;
}

#SourceList .control, #ScrollNavigation .control {
    width: 100%;
    max-width: 100%;
}

#SourceList, #ScrollNavigation {
    width: 40%;
    padding: calc(2 * var(--padding));
}

/* MainControl */

#MainControl .control {
    margin: 0 var(--padding);
    max-width: calc(var(--width-base) * 5);
    min-width: calc(var(--width-base) * 1.8);
}

#MainControl .control:first-child {
    margin: 0 var(--padding) 0 0;
}

/* default styling */

.content {
    line-height: 1.3em;
    padding: var(--padding);
}

.collapsed .content {
    display: none;
}

.content h1 {
    font-size: 2.3rem;
}

.content h2 {
    font-size: 2.0rem;
}

.content h3 {
    font-size: 1.8rem;
}

.content h4 {
    font-size: 1.5rem;
}

.content h5 {
    font-size: 1.3rem;
}

.content h6 {
    font-size: 1rem;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    font-weight: bold;
    margin-bottom: 1rem;
}

.content p, .content blockquote, .content pre, .content ul, .content ol,
.content table {
    margin-bottom: 1rem;
}

.content p:last-child, .content blockquote:last-child, .content pre:last-child,
.content ul:last-child, .content ol:last-child, .content table:last-child {
    margin-bottom: 0;
}

.content th {
    font-weight: bold;
    text-align: left;
}

.content thead tr {
    background-color: var(--color-def-variant);
    border-bottom: 0.1rem solid var(--color-on-def);
}

.content tr:nth-child(even) {
    background-color: var(--color-def);
}

.content th, .content td {
    padding: var(--padding);
}

.content blockquote {
    margin-left: 1rem;
    font-weight: italic;
}

.content pre, .content code {
    font-family: monospace;
}

.content a {
    text-decoration: underline;
}

.content strong {
    font-weight: bold;
}

.content del {
    text-decoration: line-through;
}

.content em {
    font-weight: italic;
}

.content ol, .content ul {
    padding-inline-start: 3rem;
}

.content ol {
    list-style-type: decimal;
}

.content ul {
    list-style-type: disc;
}

.content li {
    display: list-item;
}

.content small, .content sub, .content super {
    font-size: 0.8rem;
}

.content sub {
    vertical-align: sub;
}

.content sup {
    vertical-align: super;
}

.content big {
    font-size: 1rem;
}