:root {
    --app-bg: hsl(0, 0%, 4%);
    --app-text-shadow: #0008;
    --app-box-shadow: #0008;

    --FIXME: magenta;

    --layer0: hsl(0, 0%, 12%);
    --layer1: hsl(0, 0%, 16%);
    --layer2: hsl(0, 0%, 21%);
    --layer3: hsl(0, 0%, 25%);
    --layer4: hsl(0, 0%, 30%);
    --layer5: hsl(0, 0%, 35%);
    --layer6: hsl(0, 0%, 40%);

    --text: #fffd;
}

:root {
    --flavour: hsl(210, 0%, 35%);
    --flavour-bare: hsl(210, 0%, 35%);
    --flavour-accent: hsl(210, 13%, 33%);
    --flavour-danger: hsl(4, 40%, 40%);
    --flavour-emphasis: hsl(35, 40%, 40%);
    --flavour-confirm: hsl(160, 22%, 40%);
    --flavour-help: hsl(280, 35%, 40%);

    --flavour-info: hsl(215, 44%, 40%);

    /* --flavour-disabled: hsl(0, 0%, 35%); */
    /* --flavour-invalid: hsl(0, 80%, 50%); */

    --disabled-button-bg: #444;
    --disabled-button-text: #fff6;

    --disabled-text: #fff6;
    --disabled-icon: #fff6;
    --disabled-link: #fff6;

    --disabled-edit-bg: #333;
    --disabled-edit-border: #555;
    --disabled-edit-text: #fff4;
    --disabled-edit-placeholder: #fff2;

    --invalid-link: #f88;
    --invalid-link_hover: #fcc;
    --invalid-link_active: #f66;

    --invalid-button-bg: #f66;
    --invalid-button_hover-bg: #f77;
    --invalid-button_active-bg: #f55;

    --invalid-edit-bg: #500;
    --invalid-edit-border: #c00;
    --invalid-edit-focusring: #f88;
    --invalid-edit-text: #fcc;
    --invalid-edit-selection: #a33;
    --invalid-edit-cursor: #f88;
    --invalid-edit-placeholder: #fcc6;
}

:root {
    --theme: var(--theme-bare);
    --padding: 0.25em;
    --padding-extra: calc(var(--padding) * 2);
    --framing: 1px;
}

* {
    /* STATICS */
    /* STATICS */
    --theme-icon: inherit;
    --theme-text: inherit;
    --theme-highlight: inherit;
    --theme-caret: inherit;
    --theme-placeholder: inherit;

    --padding: inherit;
    --padding-extra: inherit;
    --framing: inherit;

    --cursor-action: inherit;
    --cursor-move: inherit;

    /* BUTTON */
    --theme-button-bg: inherit;
    --theme-button_focushover-bg: inherit;
    --theme-button_active-bg: inherit;

    --theme-button-border: inherit;
    --theme-button_focushover-border: inherit;
    --theme-button_active-border: inherit;

    --theme-button-text: inherit;
    --theme-button_focushover-text: inherit;
    --theme-button_active-text: inherit;

    /* OPTION */

    --theme-option-bg: inherit;
    --theme-option_focushover-bg: inherit;
    --theme-option_active-bg: inherit;

    --theme-option-border: inherit;
    --theme-option_focushover-border: inherit;
    --theme-option_active-border: inherit;

    --theme-option-text: inherit;
    --theme-option_focushover-text: inherit;
    --theme-option_active-text: inherit;

    --theme-option_selected-bg: inherit;
    --theme-option_selected_focushover-bg: inherit;
    --theme-option_selected_active-bg: inherit;

    --theme-option_selected-border: inherit;
    --theme-option_selected_focushover-border: inherit;
    --theme-option_selected_active-border: inherit;

    --theme-option_selected-text: inherit;
    --theme-option_selected_focushover-text: inherit;
    --theme-option_selected_active-text: inherit;

    /* LINK */
    --theme-link: inherit;
    --theme-link_focushover: inherit;
    --theme-link_active: inherit;

    /* AREA */
    --theme-area-bg: inherit;
    --theme-area_focushover-bg: inherit;
    --theme-area_active-bg: inherit;

    --theme-area-border: inherit;
    --theme-area_focushover-border: inherit;
    --theme-area_active-border: inherit;

    --theme-area-text: inherit;
    --theme-area_focushover-text: inherit;
    --theme-area_active-text: inherit;

    /* SLATE */
    --theme-slate-bg: inherit;
    --theme-slate-border: inherit;

    /* DETAIL */
    --theme-detail-bg: inherit;
    --theme-detail_focushover-bg: inherit;
    --theme-detail_active-bg: inherit;

    --theme-detail-border: inherit;
    --theme-detail_focushover-border: inherit;
    --theme-detail_active-border: inherit;

    --theme-detail-text: inherit;
    --theme-detail_focushover-text: inherit;
    --theme-detail_active-text: inherit;
}

::selection {
    background: var(--theme-text-selection);
}

.flavour-bare {
    --flavour: var(--flavour-bare);
}

.flavour-accent {
    --flavour: var(--flavour-accent);
}

.flavour-emphasis {
    --flavour: var(--flavour-emphasis);
}
.flavour-danger {
    --flavour: var(--flavour-danger);
}
.flavour-confirm {
    --flavour: var(--flavour-confirm);
}
.flavour-info {
    --flavour: var(--flavour-info);
}
.flavour-help {
    --flavour: var(--flavour-help);
}

.flavour-inherit {
    --flavour: inherit;
}

:root,
.flavour-bare,
.flavour-accent,
.flavour-emphasis,
.flavour-danger,
.flavour-confirm,
.flavour-info,
.flavour-help {
    /* STATICS */
    --theme-icon: oklch(from var(--flavour) calc(l + 0.1) c h);
    --theme-text: #ddd;
    --theme-highlight: oklch(from var(--flavour) calc(l - 0.1) c h);
    --theme-caret: oklch(from var(--flavour) calc(l + 0.3) c h);
    --theme-placeholder: #fff6;

    --padding-base: var(--padding);
    --padding-border: calc(var(--padding) - 1px);
    --padding-innards: calc(var(--padding) - 4px);

    --cursor-action: pointer;
    --cursor-move: move;

    /* BUTTON */
    --theme-button-bg: oklch(from var(--flavour) l c h);
    --theme-button_focushover-bg: oklch(from var(--theme-button-bg) calc(l * 1.2) c h);
    --theme-button_active-bg: oklch(from var(--theme-button-bg) calc(l / 1.1) c h);

    --theme-button-border: oklch(from var(--flavour) l c h);
    --theme-button_focushover-border: oklch(from var(--theme-button-border) calc(l * 1.2) c h);
    --theme-button_active-border: oklch(from var(--theme-button-border) calc(l / 1.1) c h);

    --theme-button-text: #fffc;
    --theme-button_focushover-text: rgba(from var(--theme-button-text) r g b 1);
    --theme-button_active-text: rgba(from var(--theme-button-text) r g b 1);

    /* OPTION */

    --theme-option-bg: oklch(from var(--flavour) 0.2 calc(c * 0.5) h);
    --theme-option_focushover-bg: oklch(from var(--theme-option-bg) calc(l * 1.2) c h);
    --theme-option_active-bg: oklch(from var(--theme-option-bg) calc(l / 1.1) c h);

    --theme-option-border: oklch(from var(--flavour) l c h);
    --theme-option_focushover-border: oklch(from var(--theme-option-border) calc(l * 1.2) c h);
    --theme-option_active-border: oklch(from var(--theme-option-border) calc(l / 1.1) c h);

    --theme-option-text: oklch(from var(--flavour) 0.8 calc(c + 0.01) h);
    --theme-option_focushover-text: rgba(from var(--theme-option-text) r g b 1);
    --theme-option_active-text: rgba(from var(--theme-option-text) r g b 1);

    --theme-option_selected-bg: oklch(from var(--flavour) l c h);
    --theme-option_selected_focushover-bg: oklch(from var(--theme-option_selected-bg) calc(l * 1.2) c h);
    --theme-option_selected_active-bg: oklch(from var(--theme-option_selected-bg) calc(l / 1.1) c h);

    --theme-option_selected-border: oklch(from var(--flavour) l c h);
    --theme-option_selected_focushover-border: oklch(from var(--theme-option_selected-border) calc(l * 1.2) c h);
    --theme-option_selected_active-border: oklch(from var(--theme-option_selected-border) calc(l / 1.1) c h);

    --theme-option_selected-text: #fffc;
    --theme-option_selected_focushover-text: rgba(from var(--theme-option_selected-text) r g b 1);
    --theme-option_selected_active-text: rgba(from var(--theme-option_selected-text) r g b 1);

    /* LINK */
    --theme-link: oklch(from var(--flavour) 0.8 calc(c + 0.01) h);
    --theme-link_focushover: oklch(from var(--theme-link) calc(l * 1.2) c h);
    --theme-link_active: oklch(from var(--theme-link) calc(l / 1.2) c h);

    /* AREA */
    --theme-area-bg: oklch(from var(--flavour) 0.2 calc(c * 0.5) h);
    --theme-area_focushover-bg: oklch(from var(--theme-area-bg) calc(l + 0.05) c h);
    --theme-area_active-bg: oklch(from var(--theme-area-bg) calc(l - 0.05) c h);

    --theme-area-border: oklch(from var(--flavour) 0.4 c h);
    --theme-area_focushover-border: oklch(from var(--theme-area-border) calc(l * 1.5) c h);
    --theme-area_active-border: oklch(from var(--theme-area-border) calc(l / 1.5) c h);

    --theme-area-text: #fffc;
    --theme-area_focushover-text: oklch(from var(--theme-area-text) l c h);
    --theme-area_active-text: oklch(from var(--theme-area-text) l c h);

    /* SLATE */
    --theme-slate-bg: oklch(from var(--flavour) calc(l - 0.35) c h);
    --theme-slate-border: oklch(from var(--flavour) calc(l - 0.1) c h);

    /* DETAIL */
    --theme-detail-bg: oklch(from var(--flavour) calc(l - 0.15) calc(c - 0.02) h);
    --theme-detail_focushover-bg: oklch(from var(--flavour-detail-bg) calc(l + 0.05) c h);
    --theme-detail_active-bg: oklch(from var(--flavour-detail-bg) calc(l - 0.05) c h);

    --theme-detail-border: oklch(from var(--flavour) calc(l - 0.05) c h);
    --theme-detail_focushover-border: oklch(from var(--flavour-detail-border) calc(l + 0.05) c h);
    --theme-detail_active-border: oklch(from var(--flavour-detail-border) calc(l - 0.05) c h);

    --theme-detail-text: #fffc;
    --theme-detail_focushover-text: oklch(from var(--flavour-detail-text) calc(l + 0.05) c h);
    --theme-detail_active-text: oklch(from var(--flavour-detail-text) calc(l - 0.05) c h);
}

.state-invalid {
    --theme-icon: #f66;
    --theme-text: #f66;
    --theme-highlight: #633;
    --theme-caret: #fcc;
    --theme-placeholder: #fcc6;

    /* BUTTON */
    --theme-button-bg: #822;
    --theme-button-border: #822;
    --theme-button-text: #fcc;

    /* OPTION */
    --theme-option-bg: #422;
    --theme-option-border: #c33;
    --theme-option-text: #faa;

    --theme-option_selected-bg: #c33;
    --theme-option_selected-border: #c33;
    --theme-option_selected-text: #fcc;

    /* LINK */
    --theme-link: #f88;

    /* AREA */
    --theme-area-bg: #422;
    --theme-area-border: #f66;
    --theme-area-text: #fcc;
}

.state-disabled {
    --cursor-action: default;
    --cursor-move: default;

    --theme-icon: #fff4;
    --theme-text: #fff3;
    --theme-highlight: #666;
    --theme-caret: #fff4;
    --theme-placeholder: #fff2;

    /* BUTTON */
    --theme-button-bg: #444;
    --theme-button-border: #444;
    --theme-button-text: #fff6;

    /* OPTION */
    --theme-option-bg: #222;
    --theme-option-border: #444;
    --theme-option-text: #fff6;

    --theme-option_selected-bg: #444;
    --theme-option_selected-border: #444;
    --theme-option_selected-text: #fff6;

    /* LINK */
    --theme-link: #fff6;

    /* AREA */
    --theme-area-bg: #222;
    --theme-area-border: #444;
    --theme-area-text: #fff6;
}

#root {
    height: 100%;
    width: 100%;
    isolation: isolate;
}
#modal-root,
#widget-root {
    position: absolute;
    inset: 0;
    isolation: isolate;
}
#widget-root,
#modal-root {
    pointer-events: none;
}
#widget-root > *,
#modal-root > * {
    pointer-events: initial;
}
#modal-root:empty,
#widget-root:empty {
    display: none;
}

body {
    overflow: hidden;
}

td,
th {
    padding: 0.125rem 0.5rem;
}

section {
    display: flex;
    flex-direction: column;
}
article {
    min-height: 0;
    overflow-y: scroll;
}

@keyframes snakeStroke {
    to {
        stroke-dashoffset: 0;
    }
}