@import url("../fonts.css");
@import url("./variables.css");
@import url("./typography.css");
@import url("./elements.css");
@import url("./layout.css");
@import url("./docs.css");
@import url("./type-stage.css");

/******************************************************************************
material symbols
*******************************************************************************/

.material-symbols-outlined {
    font-size: 1.125rem !important;
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 20;
}

/******************************************************************************
layout and font
*******************************************************************************/

.layout-and-font {
    padding: 1em;

    .ui_font-select_label,
    .ui_generic_select-label {
        text-align: right;
        width: 14% !important;
    }

    .ui_font-select_select {
        &,
        &::picker(select) {
            /* stylelint-disable-next-line declaration-property-value-no-unknown */
            appearance: base-select;
            flex-shrink: 100;
        }
    }

    .ui_font-select_label {
        display: initial;
    }
}

/******************************************************************************
dialog manage fonts
*******************************************************************************/

dialog {
    width: 50vw;
    min-width: 400px;
    max-width: 700px;
    margin: 0;
    top: 10vh;
    left: 50%;
    translate: -50% 0;

    h4 {
        margin-top: 0;
    }
}

.dialog-fonts {
    margin: 1em 0;
    padding: 0;
    background-color: var(--background-color);
    border: 1px solid var(--input-border-color);
    height: 15rem;
    overflow-y: scroll;

    ul {
        list-style: none;
        margin: 0 !important;
        padding: 0;
    }

    li {
        background-color: var(--list-item-odd-bg);
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 1em;
        justify-content: start;
        padding: 0.5em;

        &:nth-child(odd) {
            background-color: var(--list-item-even-bg);
        }
    }
}

/******************************************************************************
layout select
*******************************************************************************/

.layout-and-font {
    select {
        font-size: 1.2em;
        height: auto;

        &::picker(select) {
            font-size: 0.8rem;
        }
    }
}

/******************************************************************************
document manager
*******************************************************************************/

.document-manager {
    border-top: 1px solid var(--fieldset-border-color);
    padding: 1em;
}

/**************************************************************************** */

/**
 * Using .typeroof-ui as the class for containers within which the
 * elements will be treated as typeroof ui components. Especially
 * for the styling general html-elements (h1, h2, ...).
 */
.typeroof-ui :is(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--gap-size) var(--gap-size);
}

.typeroof-ui :is(ol, ul) {
    margin-block: var(--gap-size) var(--gap-size);
}

/* No margin for nested lists. */
.typeroof-ui :is(ol, ul) :is(ul, ol) {
    margin-block: 0;
}

.typeroof-ui {
    font-size: 0.8rem;
    font-variation-settings: "opsz" 9;
}

.ui_select_task_automation .ui_plain_select-label {
    display: block;
    margin: 0.5em 0 0.35em;
}

.ui_select_task_automation .ui_plain_select-label,
.ui_axes_math > label {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Should probably not use <strong> there! */
.typeroof-ui-label,
.typeroof-ui label > :is(strong, span):first-child {
    font-weight: 600;
    text-transform: capitalize;
}

.key_moments_timeline-items {
    list-style: none;
    padding: 0;
}

.active > .key_moments_timeline-button {
    font-weight: 700;
}

.ui_time_control_circle {
    display: block;
    margin: 0 auto;
    touch-action: none;
    width: 200px;
    height: 200px;
}

.ui_time_control_circle-track {
    fill: oklch(95% 0.05 calc(1turn * var(--t)));
    stroke: black;
    stroke-width: 2;
}

.ui_time_control_circle-track_back {
    fill: var(--gap-color);
}

.ui_time_control_circle-hand {
    stroke: black;
    stroke-width: 2;
    fill: oklch(90% 0.2 calc(1turn * var(--t)));
}

.ui_time_control_circle-key_moments > * {
    fill: black;
}

.ui_time_control_circle-key_moments > .active {
    fill: red;
}

.ui_time_control_circle-key_moments :hover {
    stroke: black;
    stroke-width: 7;
    stroke-opacity: 0.3;

    /* paint the stroke under the fill */
    paint-order: stroke;
}

.motion_stage {
    /* It's important, that the inner size of the stage has
     * the exact width/height dimensions.
     */
    box-sizing: content-box;
    border: var(--gap-size) solid var(--gap-color, black);
    border-inline-start-width: 0;
}

.motion_stage-wrapper {
    position: relative;
    overflow: hidden;
}

.motion_stage-wrapper::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: var(--transparency-indicator-bg-size);
    background-image: var(--transparency-indicator-bg-image);
}

.motion_stage-wrapper > .motion_stage-layer-top {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.motion_stage-layer-sub {
    position: absolute;
    overflow: visible;
}

.actor_renderer-line_of_text {
    display: block;
    white-space: pre;
    height: fit-content; /* inherit; */
    width: fit-content; /* inherit; */
}

.stage-manager_actors li.active > button span {
    font-weight: 700;
}

.ui_toggle_key_moment_button.active {
    font-weight: 700;
}

ol.ui_zone-key_moments_main {
    padding: 0;
    list-style: inside square;
}

.ui_key_moment_controller > label {
    display: block;
}

.ui_zone-key_moments_main .ui_key_moment_controller:nth-child(odd) {
    background: var(--list-item-odd-bg);
}

.ui_zone-key_moments_main .ui_key_moment_controller:nth-child(even) {
    background: var(--list-item-even-bg);
}

li.ui_key_moment_controller.active:not(:last-child) {
    border-bottom: var(--gap-size) solid var(--gap-color);
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.stage-manager_actors ol {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
}

.ui_actor_time_control_circle {
    width: 75px;
    height: 75px;
}

.ui_actor_time_control_circle
    :is(.ui_time_control_circle-track, .ui_time_control_circle-hand) {
    stroke-width: 5;
}

.stage-manager_actors > ol:empty::before {
    content: "(empty: drop actor here)";
}

.tree_editor > ol:empty::before {
    content: "(empty: drop item here)";
}

/******************************************************************************
base map items
*******************************************************************************/

.ui_base_map ol {
    background-color: #fff;
}

.ui_base_map-item {
    display: flex;
    align-items: center;
    border: 1px solid #999;
    margin-bottom: -1px;
    padding: 0.5em;

    > .ui_base_map-key {
        flex-grow: 1;

        > .ui_base_map-key-input {
            width: 100%;
        }
    }

    > button {
        line-height: 1;
    }

    > [class*="_map-item-value"] {
        &.active {
            font-weight: 700;
        }
    }

    > :is([class*="_map-item-drag_handle"], .ui_button-remove) {
        order: 10;
    }
}

/**************************************************************************** */

.ui_axes_math-locations_sum-items:empty::before,
.ui_base_list-items:empty::before,
.ui_base_map-items:empty::before {
    content: "(empty: add item here)";
}

.ui-axes_math-location_values:empty::before,
.ui-style_patch-composite:empty::before {
    content: " (empty: add item here) ";
    background: var(--list-item-odd-bg);
}

.ui-style_patch-composite:empty::before,
.stage-manager_actors > ol:empty::before,
.ui_axes_math-locations_sum-items:empty::before,
.ui_base_list-items:empty::before,
.ui_base_map-items:empty::before,
.ui_axes_math-map_product-items:empty::before {
    display: block;
    background-color: var(--list-item-odd-bg);
}

.ui-style_patch-composite > *:nth-child(odd),
.stage-manager_actors li.odd-row {
    --background-base-color: var(--list-item-odd-bg);

    background: var(--list-item-odd-bg);
}

.stage-manager_actors > ol,
.ui-style_patch-composite > *:nth-child(even),
.stage-manager_actors li.even-row {
    --background-base-color: var(--list-item-even-bg);

    background: var(--list-item-even-bg);
}

/* FIXME: make alternating perhaps? */
.ui_axes_math-locations_sum,
.ui_axes_math-locations_sum > *,
.ui_base_list-items,
.ui_base_list-items > * {
    --background-base-color: var(--list-item-odd-bg);

    background: var(--list-item-odd-bg);
}

.ui_videoproof_array_layers-items > *:nth-child(odd) {
    --background-base-color: var(--list-item-odd-bg);

    background: var(--list-item-odd-bg);
}

.ui_videoproof_array_layers-items,
.ui_videoproof_array_layers-items > *:nth-child(even) {
    --background-base-color: var(--list-item-even-bg);

    background: var(--list-item-even-bg);
}

/******************************************************************************
stage manager actors (document manager)
*******************************************************************************/

.stage-manager_actors {
    border: 1px solid #999;
    margin: 1em 0;
}

.stage-manager_actors li {
    padding: var(--indicator-padding) 0;
}

.stage-manager_actors li > :first-child {
    margin-inline-start: calc(
        var(--indentation-width, 1em) * var(--structural-depth, 0) + 0.25em
    );
}

.stage-manager_actors li:last-child > ol {
    /* Only for layer (container) items
   * This way there's a drop zone to insert the drop after the li.
   */
    padding-bottom: 0.1em;
}

.stage-manager_actors li > * {
    vertical-align: middle;
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    vertical-align: -webkit-baseline-middle;
}

.stage-manager_actors button {
    background: none;
    border: 0;
    padding: 0 0.5em;
}

:is(
    .ui_videoproof_array_layers-items,
    .ui_videoproof_array_layers-items > *,
    .ui_base_map,
    .ui_base_map > *,
    .ui_base_map-item,
    .ui_base_map-item > .ui_base_map-key,
    .ui_axes_math-locations_sum,
    .ui_axes_math-locations_sum > *,
    .ui_base_list-items,
    .ui_base_list-items > *,
    .ui-style_patch-composite,
    .ui-style_patch-composite > *
):is(.drop_target_indicator-before, .drop_target_indicator-after),
.stage-manager_actors li.drop_target_indicator-before,
.stage-manager_actors li.drop_target_indicator-after {
    background-position: calc(
            var(--indentation-width, 1em) * var(--structural-depth, 0)
        )
        0;
    background-size: 10em auto;
    background-repeat: no-repeat;
}

:is(
    .ui_videoproof_array_layers-items,
    .ui_videoproof_array_layers-items > *,
    .ui_base_map,
    .ui_base_map > *,
    .ui_base_map-item,
    .ui_base_map-item > .ui_base_map-key,
    .ui_axes_math-locations_sum,
    .ui_axes_math-locations_sum > *,
    .ui_base_list-items,
    .ui_base_list-items > *,
    .ui-style_patch-composite,
    .ui-style_patch-composite > *
):is(.drop_target_indicator-before),
.stage-manager_actors li.drop_target_indicator-before {
    --local-indicator-padding: calc(
        var(--indicator-padding) + var(--own-padding-top, 00em)
    );

    padding-top: var(--local-indicator-padding);
    padding-bottom: var(--own-padding-bottom, 0);
    background-image: linear-gradient(
        to bottom,
        var(--drop-indicator-color) var(--indicator-padding),
        var(--background-base-color) var(--indicator-padding)
    );
}

:is(
    .ui_videoproof_array_layers-items,
    .ui_videoproof_array_layers-items > *,
    .ui_base_map,
    .ui_base_map > *,
    .ui_base_map-item,
    .ui_base_map-item > .ui_base_map-key,
    .ui_axes_math-locations_sum,
    .ui_axes_math-locations_sum > *,
    .ui_base_list-items,
    .ui_base_list-items > *,
    .ui-style_patch-composite,
    .ui-style_patch-composite > *
):is(.drop_target_indicator-after),
.stage-manager_actors li.drop_target_indicator-after {
    --local-indicator-padding: calc(
        var(--indicator-padding) + var(--own-padding-bottom, 0em)
    );

    padding-top: var(--own-padding-top, 0);
    padding-bottom: var(--local-indicator-padding);
    background-image: linear-gradient(
        to top,
        var(--drop-indicator-color) var(--indicator-padding),
        var(--background-base-color) var(--indicator-padding)
    );
}

.stage-manager_actors .drop_target_indicator-after:last-child {
    padding: calc(var(--indicator-padding) * 0.5) 0 var(--indicator-padding) 0;
}

.stage-manager_actors ol:empty::after,
.stage-manager_actors .drop_target_indicator-insert::after {
    display: block;
    content: "";
    margin-left: calc(
        var(--indentation-width, 1em) * (1 + var(--structural-depth, 0))
    );
    padding: var(--indicator-padding) 0;
}

.stage-manager_actors ol:not(.drop_target_indicator-insert):empty::after {
    background: var(--background-base-color);
}

.stage-manager_actors .drop_target_indicator-insert::after {
    background-image: linear-gradient(
        to top,
        var(--drop-indicator-color) var(--indicator-padding),
        var(--background-base-color) var(--indicator-padding)
    );
    background-size: 10em auto;
    background-repeat: no-repeat;
}

:is(
        .ui_axes_math-locations_sum-items,
        .ui_base_list-items,
        .ui_base_map-items,
        .ui_axes_math-map_product-items,
        .ui-axes_math-location_values,
        .ui-style_patch-composite
    ):empty::before {
    padding: var(--indicator-padding);
}

:is(
        .ui_axes_math-locations_sum-items,
        .ui_base_list-items,
        .ui_base_map-items,
        .ui_axes_math-map_product-items,
        .ui-axes_math-location_values,
        .ui-style_patch-composite
    ).drop_target_indicator-insert::before {
    border: var(--indicator-padding) solid var(--drop-indicator-color);
    padding: 0;
}

/******************************************************************************
drag handle
*******************************************************************************/

.drag_handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--button-bg-color);
    box-shadow: rgb(43 43 43 / 8%) 0 0 0.1875rem;
    border: 1px solid var(--button-border-color);
    border-radius: 0.25rem;
    color: var(--text-color);
    cursor: grab;
    margin-right: 0.125rem;
}

.drag_handle > span {
    font-size: 0.875rem !important;
}

.drag_handle:hover {
    box-shadow: rgb(43 43 43 / 15%) 0 0 0.625rem;
    outline: 0.1em solid black;
    z-index: 1;
    position: relative;
}

.drag_handle:active:hover {
    cursor: grabbing;
}

/******************************************************************************
drop target
*******************************************************************************/

.ui_base_drop_target {
    border: 1px dashed darkred;
    border-radius: 5px;
    color: darkred;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 1em 0;
    padding: 0.25em;
}

.ui_base_drop_target-main_drop_zone::after {
    content: "";
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: "Material Symbols Outlined";
    font-size: 1.125rem;
}

.waste_basket_drop_target-main_drop_zone::after {
    content: "\e872";
}

.ui_document_element_typespec-receptive,
.waste_basket_drop_target-receptive {
    background: #fff;
    border-style: solid;
}

/******************************************************************************
color patch
*******************************************************************************/

.ui_color_patch {
    display: inline-block;
    margin-right: 0.25em;
    vertical-align: middle;
    position: relative;

    --width: 1.2em;
    --height: 1.2em;

    width: var(--width);
    height: var(--height);
    overflow: visible;
}

.ui_color_patch-has_color::after,
.ui_color_patch-has_color::before {
    display: block;
    content: "";
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 0;
    top: 0;
}

.ui_color_patch-has_color:hover::after {
    --hover-size: 7rem;

    min-width: var(--hover-size);
    height: var(--hover-size);
    left: calc((-1 * var(--hover-size) / 2) + (var(--width) / 2));
    top: calc((-1 * var(--hover-size) / 2) + (var(--height) / 2));
    border-radius: calc(var(--hover-size) / 2);

    /* NOTE for transparent colors this is important, otherwise, we can't
     * see why/where surrounding UIs are blocked. */
    border: var(--gap-size) solid var(--gap-color);

    /* This way the enlarged color patch won't keep the hover state, i.e.
     * making the bigger hover color patch disappear when the area
     * of the .ui_color_patch-has_color is left by the pointer.
     */
    pointer-events: none;
    z-index: 2;
}

.ui_color_patch-has_color::after {
    z-index: 1;
    background-color: var(--color);
}

.ui_color_patch-has_color::before {
    z-index: 0;
    background-size: var(--transparency-indicator-bg-size);
    background-image: var(--transparency-indicator-bg-image);
}

.ui_color_patch-no_color_label {
    display: none;
}

.ui_color_patch-no_color .ui_color_patch-no_color_label {
    display: initial;
    padding-left: 2em;
}

/******************************************************************************
processed properties
*******************************************************************************/

.ui-show_processed_properties {
    font-variation-settings: "wdth" 80;
    margin: 1.5em 0;

    .ui_collapsible-closed & {
        display: none;
    }
}

.ui-show_processed_properties h4 {
    margin: 0;
    margin-top: 1em;
    margin-bottom: -1px;
    padding: 0.5em 0;
}

.ui-show_processed_properties-list {
    background-color: #fff;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0;
    width: 100%;
}

.ui-show_processed_properties-item {
    border: 1px solid #999;
    display: flex;
    gap: 2em;
    margin-top: -1px;
    padding: 0.5em;
    justify-content: space-between;
}

.ui-show_processed_properties-value {
    font-weight: bold;
    text-align: right;
    word-break: break-all;
}

/******************************************************************************
color chooser
*******************************************************************************/

.ui_color_chooser-label_toggle {
    display: list-item;
    list-style-type: disclosure-closed;
    list-style-position: inside;
}

.settings_visible .ui_color_chooser-label_toggle {
    list-style-type: disclosure-open;
}

.ui_color_chooser .ui_color_patch {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: baseline;
    margin-top: 0.3em;
}

.ui_color_chooser_two_colors-label_toggle {
    display: flex;
    justify-content: center;
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    align-items: anchor-center;
    gap: 0.3rem;
    margin: 0.5rem 0;

    .ui-button-swap {
        height: 2rem;
    }

    .ui_color_patch {
        --width: 4rem;
        --height: 2rem;
    }
}

/******************************************************************************
color component
*******************************************************************************/

.ui_color_component {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
    grid-template-areas:
        "value-box toggle"
        "color-bar color-bar";
    gap: 0.25em;
    margin-bottom: 1.5em;
}

.ui_color_component > .ui_toggle_button {
    grid-area: toggle;
    justify-self: end;
}

.ui_color_component > .number-and-range-color-input_value-box {
    grid-area: value-box;
}

.ui_color_component > .number-and-range-color-input_color-bar {
    grid-area: color-bar;
}

.ui_color_component_ranges {
    margin: 1em 0 3em;
}

/******************************************************************************
number and range color input
*******************************************************************************/

.number-and-range-color-input_color-bar::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: var(--transparency-indicator-bg-size);
    background-image: var(--transparency-indicator-bg-image);
}

.number-and-range-color-input_color-bar {
    position: relative;
    display: flex;
    justify-content: center;
    height: 3rem;
}

.number-and-range-color-input_color-bar input {
    width: 100%;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: stretch;
    position: relative;
    z-index: 1;
}

.number-and-range-color-input_color-bar canvas {
    width: var(--width, 0);
    height: var(--height, 0);

    /*
     * important, canvas in this element must not change the container height
     * width and height will be set in javascript to cover all of the container.
     */
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

/******************************************************************************
number and range input
ui plain select
*******************************************************************************/

.number-and-range-input,
.ui_font-select,
.ui_generic_select,
.ui_plain_select {
    align-items: center;
    display: flex;
    gap: 0.75em;
    padding: 0.25em 0;

    label,
    .ui_generic_select-label {
        text-align: right;
        width: 35%;
    }

    input[type="number"] {
        width: 15%;
    }

    input[type="range"] {
        width: 22%;
    }

    button {
        margin-left: auto;
        width: 18%;
    }
}

/******************************************************************************
manual-axes-locations
*******************************************************************************/

.manual_axes_locations {
    .number-and-range-input {
        label abbr {
            text-transform: none;
        }
    }
}

/******************************************************************************
select and drag
*******************************************************************************/

.select_and_drag > label {
    align-items: center;
    display: flex;
    gap: 0.25em;
}

/**************************************************************************** */

.measure_box {
    position: absolute;
    top: -100px; /* hide off-screen */

    /* rather use 1px, so there is no shortcut optimization that
     * prevents measuring the content.
     */
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.measure_box-sample {
    white-space: nowrap;
}

/** =>> START from Videoproof Array **/
.fixed-line-breaks {
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 36pt;
    line-height: 1.5;
    text-align: left;
}

/* where is this rule used? */
.end-of-line::after {
    display: block;
    content: "";
}

.fixed-line-breaks div,
.fixed-line-breaks span {
    display: block;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.fixed-line-breaks span {
    display: inline-block;
    min-width: 0.1em;

    /* 	font: inherit; */
    text-align: left;
    margin-right: 0.3em;
}

/* used in contextual/kerning mode */
.fixed-lines span {
    display: inline;
    margin-right: 0;
    white-space: nowrap;
}

.actor_renderer-videoproof_contextual {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.actor_renderer-videoproof_contextual-spacer {
    box-sizing: border-box;
    display: flow-root;
}

.actor_renderer-videoproof_contextual-content {
    position: sticky;
    top: 0;
    text-align: var(
        --cell-alignment,
        center
    ); /* this is the actual text align */

    /*
     * This is part of a hack to override the application of
     * background-color layout specific.
     */
    background-color: var(--background-color);
}

.actor_renderer-videoproof_contextual-content.fixed-lines span {
    margin-right: calc(1em * var(--gap-em, 0));
}

.actor_renderer-videoproof_contextual-content.fixed-lines span.end-of-line {
    margin-right: 0;
}

.actor_renderer-videoproof_contextual-content span {
    outline: var(--cell-boxes-outline, none);
    background: var(--cell-background-color, none);
}

.actor_renderer-videoproof_input {
    width: 100%;

    /*
     * This is part of a hack to override the application of
     * background-color layout specific.
     */
    background-color: var(--background-color);
}

/*
 * Also .ProseMirror to win over the rules of prosemirror.css. It disables
 * ligatures, but the typographic properties, including OpenType features,
 * are set on the parent and the text is measured with ligatures ("+liga").
 */
.actor_renderer-videoproof_input-editor.ProseMirror {
    /* A single line of text, the font-size is fitted to the space. */
    white-space: pre;
    font-variant-ligatures: inherit;
    font-feature-settings: inherit;
    overflow-wrap: normal;
    background: var(--cell-background-color, none);
}

.actor_renderer-videoproof_array {
    /**
     * This way it scrolls vertically within the stage.
     * FIXME:CAUTION: May be too simplistic and require rethinking but
     * looks good so far. In a stand-alone layout, as opposed to in the
     * motion-stage layout, we might need a different handling.
     * I.e. in the case of usage within an movie/film-like
     * non-interactive animation, it is wrong to add manual scrolling to
     * this! However, so far there's no distinction made between
     * interactive and non-interactive usage. Overflow setup could be
     * another property.
     */
    height: 100%;
    overflow-y: auto;
}

/** <<= END from Videoproof Array **/

.ui_checkbox-extended.not-available {
    color: var(--text-color-disabled);
}

.ui_key_moments_link_navigation-list,
.ui_more_raps-list {
    list-style: none;
    padding: 0;
    font-size: 0.8em;
    font-variation-settings: "opsz" 7;
}

:is(.ui_key_moments_link_navigation-list, .ui_more_raps-list) li {
    margin: 0.25em 0;
}

.ui_more_raps-list_item.active {
    --animation-local-impact: 1;
}

.ui_key_moments_link_navigation-list_item,
.ui_more_raps-list_item.active {
    /*
    color: oklch(calc(var(--animation-local-impact, 0) * 67.35%) 0.217 12.23);
    */
    color: hsl(0deg 100% calc(50% * var(--animation-local-impact, 0)));
}

.ui_key_moments_link_navigation-list_item-input,
.ui_more_raps-list_item-input {
    cursor: pointer;
    text-decoration: none;
}

.ui_videoproof_array_layers-items {
    padding: 0;
}

.ui_videoproof_array_layers-items > * {
    display: list-item;
    list-style: none;
}

.ui_videoproof_array_layers-item {
    padding: var(--gap-size) 0;
}

.ui_videoproof_array_layers-item .ui_button {
    float: right;
}

.ui_base_list_simple_item {
    height: 1.5em;
    border: 1px solid #999;
    margin-bottom: -1px;
    padding: 0.5em;
}

.ui_base_list_item > .tools_container {
    float: right;
    display: inline-flex;

    & > * {
        margin-right: 0.125rem;

        /* place everything before move and remove */
        order: -3;
    }

    .ui_button-move {
        order: -2;
    }

    .ui_button-remove {
        order: -1;
    }
}

.dragging {
    outline: 0.05em solid grey;
}

.actor_renderer-videoproof_array_v2 {
    /* configuration in CSS is not yet a common praxis in this project
     * line-height: 1.5;
     */
    --line-height-em: 1.5;
    --gap-widht-em: 0.1;

    display: block flex;

    /* row-gap: .4em; */

    /* Better than having display: inline children as together with
     * "flex-wrap: wrap" the children have line breaks, but with column-gap
     * we can control the gap between children without having to remove
     * e.g. the margin-right on a last element of the line.
     */
    flex-wrap: wrap;
    gap: 0 calc(1pt * var(--font-size-pt, 24) * var(--gap-widht-em, 0));
    background-color: var(--background-color);
}

.videoproof_layout {
    width: 100%;
    box-sizing: border-box;

    /* Grows with its content so the background covers the full scroll
     * extent (min-height covers short content). The array actor
     * measures the available space via 'environment@layout'
     * (viewport-stable), so growth does not feed back into its cell
     * sizing. */
    min-height: 100%;

    /* Contextual is the inner scroller (overflow-y: auto;
     * height: 100%): it needs a definite height chain container ->
     * layer (height: inherit) -> actor, or it grows with its spacer
     * and never scrolls. Its measurement also comes from
     * 'environment@layout', so the clamp does not feed back. (The
     * actor sits inside a .videoproof_layout-layer, hence the
     * descendant selector.) */
    &:has(.actor_renderer-videoproof_contextual) {
        height: 100%;
    }

    .actor_renderer-videoproof_array_v2,
    .actor_renderer-videoproof_contextual-content,
    .actor_renderer-videoproof_input {
        /*
         * This is a switch specific to layouts/videoproof where the layout
         * can set that var to `none` and render the background itself on a
         * parent node. The default is that the `--layout-specific-override-actor-renderer-videoproof-array-v2-background-color`
         * is not defined and we fall through to `--background-color`, which
         * is set by the actor itself.
         * For colors with transparency, this prevents that the color is
         * added on top of itself.
         */
        background-color: var(
            --layout-specific-override-actor-renderer-videoproof-array-v2-background-color,
            var(--background-color)
        );
    }
}

.typeroof-layout > .actor_renderer-videoproof_array_v2 {
    /* To make sure the outline of the cell boxes is visible at the top
     * At the same time, it's good when we don't see the gap between this
     * and the .typeroof-layout-before element, hence prefering padding
     * over margin. This way, when there's a background, there's no
     * white gap.
     */
    padding-top: var(--gap-size);
    min-height: calc(100% - var(--gap-size));
}

.actor_renderer-videoproof_array_v2-zone {
    font-size: calc(1pt * var(--font-size-pt, 24));
    height: calc(1em * var(--line-height-em, 1));

    /* inline is not required anymore, as the parent lays these out as
     * flex with flex-wrap: wrap.
     */
    display: /*inline*/ flex;
    justify-content: var(
        --cell-alignment,
        center
    ); /* this is the actual text align */

    position: relative;
    width: calc(1em * (var(--widest-cell-em, 3)));

    /* outline: 1px solid; */
}

.actor_renderer-videoproof_array_v2-cell {
    position: absolute;
    line-height: initial;

    /* This is a nice feature to turn on optionally, as it accurateley
     * draws the glyph box and that in the text color, so it is easy
     * to understand.
     */

    /* outline: 1px solid; */

    /*
     * FIXME: good feature additionally would be drawing the baseline
     * optionally.
     */

    /* The box height seems rounded to */

    /**
     * align to bottom of box
     * --descender-em: move down to align baseline with bottom of the box
     * --max-descender-em: move up to align with bottom of the biggest cell descender

     This is good because it leaves some space at the to of the page
     to no clip extensively high diacritics. However, at the bottom, it
     may clip extensively low diacritics.
     */
    bottom: calc(1em * (var(--max-descender-em) - var(--descender-em)));

    /**
     * align to top of box
     * --ascender-em: move up to align baseline with top of the box
     * --max-ascender-em: move down to align with top of the biggest cell descender

    top: calc(1em *(var(--max-ascender-em) - var(--ascender-em)))
     */
}

.actor_renderer-videoproof_array_v2-cell:first-child {
    margin-left: 0;
}

.ui_alignment label {
    display: block;
}

.ui_alignment-radio_icon {
    display: none;
}

.ui_alignment input + .ui_alignment-radio_icon {
    display: block;
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: "Material Symbols Outlined";
    font-size: 2rem;
    width: 3em;
    height: 3em;
    background: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    background-color: white;
    color: #ccc;
    position: absolute;
    z-index: 1;
}

.ui_alignment label.ui_alignment-radio_label {
    cursor: pointer;
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    width: 3em;
    height: 3em;
    overflow: hidden;
}

.ui_alignment input {
    position: absolute;
    z-index: 0;
}

.ui_alignment input:checked + .ui_alignment-radio_icon {
    color: black;
}

/* The rap items (ui_key_moments_link_navigation) are inserted lazily,
   i.e. after the quick dial, which is inserted when the layout is built.
   Ordering is therefore done here, so the quick dial is below the rap. */
.videoproof_layout-key_moments {
    display: flex;
    flex-direction: column;
}

.ui_more_axes {
    order: 1;

    /* No axes left uncovered by the rap: don't show a lone heading. */
    &.ui_more_axes-empty {
        display: none;
    }

    .ui_more_axes-item-active {
        color: hsl(0deg 100% 50%);
    }
}

.ui_axes_math-locations_sum-items {
    margin-left: var(
        --indentation-width,
        1em
    ); /* space for the list-style-type */

    --own-padding-top: 0.25em;
    --own-padding-bottom: 0em;
}

.ui_axes_math-locations_sum-items > * {
    display: list-item;
    list-style: none;
    padding-top: var(--own-padding-top, 0);
    padding-bottom: var(--own-padding-bottom, 0);
}

.ui_axes_math-map-label,
.ui_axes_math-locations_sum-label,
.ui-axes_math-locations_sum_item-label {
    padding: 0 0.2em;
    border: 0.1em solid black;
    line-height: 2em;
}

.ui-axes_math-locations_sum_item > :last-child {
    /* have the label on the same line as the drag-handle
     * the drag-handle is first-child if present
     * The child widget (currently!!) is inserted last.
     * this affects the this.element/localZoneElement
     *
     * I would have moved the label outside, but the focus-within
     * mechanism below, that reveals some tools, is nice like that and
     * the label is a natural element to click on and hence capture
     * focus.
     */
    display: inline;
}

.ui-axes_math-location_value-numeric_value {
    width: calc(5 * 0.75em);
}

/* this could be handled as above with focus-within and <output>,
 * the styling would be easier, especially the typography
 */
.ui_base_map-item .ui_base_map-key-input {
    border: none;
    text-align: left;
    background: transparent;

    /* body text setup, it's hard to inherit for <input> */
    font-family: RobotoFlex, sans-serif;
    font-variation-settings: "opsz" 12;
    font-size: inherit;
    font-weight: 600;
}

:is(ol, ul).ui_base_map-items {
    list-style: none;
    margin: 0;
    padding: 0;

    --own-padding-top: 0.25em;
    --own-padding-bottom: 0em;
}

.ui_base_map-item,
.ui_axes_math-map-item,
.ui-dimension_sequence {
    --padding-horizontal: 0.25em;

    padding-top: var(--own-padding-top, 0);
    padding-bottom: var(--own-padding-bottom, 0);

    --drop-target-indicator-width: 0.2em;
    --background-base-color: var(--list-item-odd-bg);
}

.ui_axes_math-map-item {
    & > :is(*, .ui_base_map-key) {
        flex: 0 1 content;
    }
}

:is(.ui_base_map-item) > :is(.ui_base_map-key) {
    padding-right: var(--padding-horizontal);
}

:is(.ui_axes_math-map-item) > :is(.ui_axes_math-axis_tag, ) {
    padding-right: var(--padding-horizontal);

    .ui_base_map-key-input {
        margin-inline: 0.25em;
        width: 3em;
    }
}

.ui-axes_math-location_values {
    display: block flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: initial;
}

.ui_axes_math-axis_tag:has(+ .drag_handle) {
    padding-right: 0;
}

.ui_axes_math-map-item > .ui-axes_math-location_value,
.ui-axes_math-location_values > .ui-axes_math-location_value {
    padding: 0 var(--padding-horizontal);
    height: 2.5em;
    margin: 0 -1px 0 0; /* has a border from .ui_base_list_simple_item */
    display: flex;
    align-items: center;
}

.ui-axes_math-location_value.drop_target_indicator-after {
    border-right: var(--drop-target-indicator-width) solid
        var(--drop-indicator-color);
    padding-right: calc(
        var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
    );
}

.ui-axes_math-location_value.drop_target_indicator-after
    + .ui-axes_math-location_value {
    padding-left: calc(
        var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
    );
}

.ui-axes_math-location_value.drop_target_indicator-before {
    border-left: var(--drop-target-indicator-width) solid
        var(--drop-indicator-color);
    padding-left: calc(
        var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
    );
}

:is(.ui_axes_math-axis_tag, .drag_handle, .ui-axes_math-location_value):has(
    + .drop_target_indicator-before
) {
    padding-right: calc(
        var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
    );
}

.ui_base_map-tools {
    display: inline-block;

    /* margin-left: 0.5em; */
    vertical-align: middle;
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    vertical-align: -webkit-baseline-middle;
}

.ui_base_map-tools > * {
    display: none;
}

.ui_node_spec_map-tools,
.ui_style_patches_map-tools,
.ui_links_map-tools,
.ui_mark_spec_map-tools {
    & > * {
        display: initial;
    }

    & > .ui_links_map-key-create > .ui_generic_select,
    & > .ui_generic_select {
        display: block;
    }
}

.ui_node_spec_to_type_spec_links_map-tools > * {
    /* otherwise some are initially inline and we get a line break
     * when we focus
     */
    display: block;
}

.ui_links_map-tools {
    margin-left: 0;
    margin-bottom: 0.5em;
    display: block;
}

.ui_links_map-tools:not(
        /* always show for this case */
        .ui_node_spec_to_type_spec_links_map-tools
    ) > *:not(
        .ui_links_map-create_select
    ) {
    display: none;
}

.ui_axes_math-map-tools {
    display: inline-flex;
    float: right;

    & > * {
        display: block;
    }
}

/* the potentials location overrides map (milestone 6): same reveal
 * as the axes-math map tools — the generic .ui_base_map-tools > *
 * rule hides them otherwise. */
.ui_potentials-location_overrides-tools {
    & > * {
        display: initial;
    }
}

/* needs more specificity than the rule above */
.ui_links_map-tools.ui_links_map-tools:focus-within > * {
    display: block;
}

.ui_links_map-tools.ui_links_map-tools:focus-within > .ui_generic_select {
    display: block;
}

.ui_links_map-item_value {
    flex-basis: 10em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .ui_generic_select-select {
        appearance: auto;
    }
}

.ui_links_map-item_value-value_label {
    flex: 1 1 100%;
}

.ui_links_map-item_value-change_input {
    flex: 1;
}

.ui_links_map-item_value-change_input
    > .ui_links_map-item_value-change_input-input {
    width: 100%;
}

.ui_links_map-item_value-change_select,
.ui_links_map-item_value-change_input,
.ui_links_map-item_value .line_of_text {
    display: none;
}

.ui_links_map-item_value:focus-within
    :is(
        .ui_links_map-item_value-change_select,
        .ui_links_map-item_value-change_input,
        .line_of_text,

    ) {
    display: block;
}

.ui_style_patches_map-tools {
    margin-left: 0;
}

.ui_style_patches_map-tools .ui_base_map-key-input {
    width: 4em;
}

.ui_axes_math
    > .ui_axes_math-locations_sum
    > .ui_axes_math-locations_sum-items {
    margin-left: 0;
}

.ui_axes_math
    .ui_key_moments_link_navigation
    .ui_key_moments_link_navigation-label {
    font-weight: 600;
}

.ui_axes_math .ui_key_moments_link_navigation {
    margin-block: var(--gap-size) var(--gap-size);

    /* it's nested into another fieldset */
    border: none;
    padding: 0;
}

.ui_axes_math .ui_key_moments_link_navigation-list {
    margin-block-start: 0;
}

.ui_time_control .ui_time_control-duration input {
    width: 6em;
}

/******************************************************************************
collapsible
*******************************************************************************/

.minimal-collapsible {
    /** same toggle styling as color chooser */
    & > .ui_collapsible_toggle {
        display: list-item;
        list-style-type: disclosure-closed;
        list-style-position: inside;
    }

    &.ui_collapsible-opened > .ui_collapsible_toggle {
        list-style-type: disclosure-open;
    }
}

.separating-collapsible {
    /* sane as the collapsible style i.e. used to separate logical major UI blocks  */

    border-top: 1px solid var(--fieldset-border-color);
    border-bottom: 1px solid var(--fieldset-border-color);
    margin-bottom: -1px;

    & > .ui_collapsible_toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font-weight: 600;
        padding: 0.5em 1em;
        text-transform: capitalize;
    }

    & > .ui_collapsible_toggle::after {
        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
        font-family: "Material Symbols Outlined";
        font-size: 1.3rem;
        font-variation-settings: "wght" 200;
        line-height: 0.8rem;
        content: "\e313";
    }

    &.ui_collapsible-opened > .ui_collapsible_toggle::after {
        content: "\e316";
    }

    & > .ui_collapsible-contents {
        padding: 1em;
    }

    &.ui_collapsible-closed > .ui_collapsible-contents {
        display: none;
    }
}

/**************************************************************************** */

.ui-dialog_openers-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-dialog_openers-item-button {
    width: 100%;
}

.ui_missing-ui_element {
    --border-spec: 1px dashed red;

    border-bottom: var(--border-spec);
    margin-bottom: var(--gap-size) 0;
}

.ui_missing-ui_element h4 {
    background: darkred;
    color: white;
}

.ui_missing-ui_element-full_key {
    font-weight: bold;
}

.ui_missing-ui_element-message {
    display: block;
    background: khaki;
}

.ui_leading-algorithm_container > :not(:first-child) {
    background: #dfdfdf;
    padding: 0.2em;
}

.ui_type_tools_grid_layout {
    padding: var(--gap-size);
    min-height: 100%;
    min-width: fit-content;
}

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

.ui_type_tools_grid-cell-parameters,
.ui-parameters-display /* as used with video-proof-array-v2 */ {
    font-family: monospace !important;
    font-weight: bolder;
    font-size: 12pt;
    font-variation-settings: "opsz" 12;
    color: var(
        --parameters-label-high-contrast-text-color,
        var(--parameters-label-color)
    );

    strong {
        font-weight: inherit;
    }
}

.ui_type_tools_grid-cell-parameters {
    margin-bottom: 0.3em;
}

/* as used with video-proof-array-v2 */

/* draw a box after the font name to illustrate text-color and fill-color */
.ui-parameters-display_layer::before {
    /* This is U+25A0: BLACK SQUARE and it is supposed to be rendered using
     * color, to illustrate the color of the font of that layer
     */
    content: " ■ ";
    margin-right: 0.3em;
    white-space: pre;
    color: var(--cell-text-color);
    background-color: var(--cell-background-color);
}

.ui_type_tools_grid-labels-caption {
    display: table-cell;

    .ui_type_tools_grid-labels-caption-cell {
        position: absolute;
        z-index: 1;
        line-height: 2rem;
    }
}

.ui_type_tools_grid-labels-caption-x
    ~ .ui_type_tools_grid-row.ui_type_tools_grid-labels-data
    > .ui_type_tools_grid-cell {
    padding-top: 2rem;
    padding-bottom: var(--gap-size);
    position: sticky;

    /* nice effect where we can see the table actually scroll past
     * the caption in the gap.
     */
    top: var(--gap-size);
}

.ui_type_tools_grid-labels-caption,
.ui_type_tools_grid-labels-data {
    font-weight: 700;
    background: var(--list-item-even-bg);
}

/* paddings after the caption elements
 * .ui_type_tools_grid-labels-data mark the captions.
 */
.ui_type_tools_grid-row.ui_type_tools_grid-labels-data
    + .ui_type_tools_grid-row
    > .ui_type_tools_grid-cell {
    padding-top: var(--gap-size);
}

.ui_type_tools_grid-cell.ui_type_tools_grid-labels-data
    + .ui_type_tools_grid-cell {
    padding-left: var(--gap-size);
}

.ui_type_tools_grid-labels-caption-y .ui_type_tools_grid-labels-caption-cell {
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    top: 3rem;
    position: absolute;
    line-height: 2rem;
    z-index: 1;
}

.ui_type_tools_grid-labels-caption-y
    ~ *
    .ui_type_tools_grid-labels-data:first-child {
    vertical-align: baseline; /* or maybe top? */
    position: sticky;

    /* nice effect where we can see the table actually scroll past
     * the caption in the gap.
     */
    left: var(--gap-size);

    /* make space for the Y label and have it share the background */
    padding-left: 2rem;
    padding-right: var(--gap-size);
}

.ui_type_tools_grid-cell {
    display: table-cell;

    /* Not sure if this produces typographically correct lines
     * is the line height still correct? It seems like the trimmed value
     * is lost from the line height...
     * Not sure if it's just lost for the initial line, and in-between lines
     * it's correct. I had a box, one line, font size: 52px; (39pt) bit the
     * box height measured (debugger, Computed, box model diagram) was 48px; line-height was
     * set to 1;
     * With two lines and a line break height was 100; (48 + 52 == 100) and
     * three lines: 152; so, it seems the trimmed value is lost only once,
     * for the box and the inter-line height is preserved. this has however
     * implications for boxes/block elements that create lines, as these
     * line-heights, when stacked, are shorter!
     *
     * It would probably be correct to add the trimmed value at the top of
     * the box. i.e. padding-top: 4px for the example above.
     */
    text-box-trim: trim-both;
    text-box-edge: text alphabetic;
    line-height: 1;

    /* the below doesn't work for more than one line, as the height is
     * then bigger than 1em and thus the trimmed amount misses again.
     * it would be good to add the trimmed amount as padding-top...
     * but there's likely no css-way to calculate that.
     *
     * As this is a table cell height is essentialy min-height, as the
     * cell will grow with other cells. min-height doesn't have an effect
     * with table-cell, so in another context, min-height would be better
     * here. This is to make the line height consistent also for first
     * lines. See above in the comment about tex-box-*.
       vertical-align: bottom;
       height: 1em;
     */
}

/******************************************************************************
dimension sequence
*******************************************************************************/

.ui-dimension_sequence {
    border-top: 1px solid var(--fieldset-border-color);
    border-bottom: 1px solid var(--fieldset-border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: -1px;
    padding: 0.5em 0;

    .add_or_drag-drag_handle {
        width: fit-content;
    }
}

.ui-dimension_sequence .typeroof-ui-label {
    margin-inline-end: 0.5em;
}

/* "fontAxisTagValue" FIXME: not a good selector, not a good label */
.ui-dimension_sequence .ui_generic_struct_container .line_of_text label {
    margin-top: 0.3em;
    font-weight: 600;
    display: block;
}

/* "fontAxisTagValue" FIXME: not a good selector, not a good label */
.ui-dimension_sequence .ui_generic_struct_container .line_of_text label,
.ui-dimension_sequence .ui_generic_struct_container .number_input label {
    margin-top: 0.3em;
    font-weight: 600;
    display: block;
}

.ui_generic_struct_container {
    h3 {
        --font-size-change: 1.25;

        font-variation-settings: "opsz" 12;
    }

    > .ui-language_tag,
    > .ui_leading-algorithm_container,
    > .ui-margins,
    > .ui_opentype_features_chooser,
    > .manual_axes_locations {
        margin-bottom: 2em;
    }

    > .ui-language_tag,
    > .number-and-range-input + .ui_color_chooser,
    > .ui_opentype_features_chooser {
        margin-top: 2em;
    }
}

/******************************************************************************
prosemirror menu
*******************************************************************************/

.ui_prose_mirror_menu {
    /* The amount of style buttons can change quickly when using
   * the cursor to navigate the document. This leads to the UI in the
   * sidebar "jumping" around, creating a instable feeling. I don't think
   * a fixed height is necessarily the best solution here, however,
   * it resolves the wobbling issue. The size is selected to
   * allow around 4 rows of buttons (blocks and styles) before scrolling.
   */
    height: 7.5em;
    overflow: auto;
}

.ui_prose_mirror_menu-container > * {
    display: inline;
}

.ui_prose_mirror_menu-container > .typeroof-ui-label::after {
    content: " ";
}

.ui_prose_mirror_menu-blocks,
.ui_prose_mirror_menu-styles {
    button {
        vertical-align: top;
    }

    button.active,
    button.active > * {
        color: white;
    }

    button.active {
        background: black;
        font-variation-settings:
            "opsz" 12,
            "GRAD" 150;
    }

    button.active:disabled {
        background: darkgrey;
    }
}

.ui_prose_mirror_menu-container-nesting {
    & > * {
        display: block flex;
    }

    .material-symbols-outlined {
        font-size: 1.5rem !important;
    }
}

.ui_prose_mirror_menu-simple {
    display: flex;
    gap: 0.25em;
    height: auto;
    margin-bottom: 1em;

    .ui_prose_mirror_menu-container-blocks,
    .typeroof-ui-label {
        display: none;
    }

    button {
        height: auto;
        padding: 0.25rem;

        &.active {
            color: white;
            background: var(--button-active-color);
            border-color: var(--button-active-color);
        }
    }

    button.active:disabled {
        background: darkgrey;
    }
}

/*
 * Reset styles for the documents:
 * I've noted that, despite of setting font-variation-settings on e.g.
 * <h1> or <strong> elements, in the ProseMirror document, therefore
 * in general as well, the browser default (Firefox, Chrome)
 * font-weight: bold; was still applied. For all our content elements,
 * where we apply the CSS/typography it makes sense to reset the styles.
 * However, we often use very generiv elements, so it wasn't necessary
 * previously. Adding ".typeroof-layout" by default as well, we might
 * at a :not() rule to make an exception possible
 */

[contenteditable]:focus {
    outline: 0 solid transparent;
}

/* stylelint-disable */
/* prettier-ignore */
:where(.ProseMirror, .typeroof-document, .typeroof-layout, .reset-default-css) {
  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  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;
  }
}
/* stylelint-enable */

:is(.videoproof_layout, .ui-parameters-display.ui_videoproof) {
    padding-left: 2em; /* using padding: so we include the background color */
}

.ui_opentype_features_chooser-select-select {
    max-width: 100%;
}

.ui_boolean_ot_feature {
    & .ui_boolean_ot_feature-label-content::before {
        content: "[";
    }

    &:where(.is-in-font) .ui_boolean_ot_feature-label-content::before {
        content: "";
    }

    & .ui_boolean_ot_feature-label-content::after {
        content: "]*";
    }

    &:where(.is-default-value) .ui_boolean_ot_feature-label-content::after {
        content: "]";
    }

    &:where(.is-in-font) .ui_boolean_ot_feature-label-content::after {
        content: "*";
    }

    &:where(.is-in-font.is-default-value)
        .ui_boolean_ot_feature-label-content::after {
        content: "";
    }
}

/******************************************************************************
typespec properties > language
*******************************************************************************/

.ui-language_tag-info {
    background: #ddd;
    margin-top: 0.5em;
    padding: 0.25em 0.5em;

    > ul {
        list-style: inside;
        padding: 0;
    }
}

.ui_language_subtag_input {
    align-items: center;
    display: flex;
    gap: 0.75em;
    padding: 0.25em 0;

    > label {
        text-align: right;
        width: 35%;
    }

    > input {
        width: 20%;
    }
}

.ui_language_subtag_info ~ .ui_language_subtag_info {
    padding-block-start: 1.3em;
}

.ui_language_subtag_info-list {
    margin: 0;

    dt {
        display: inline;
        font-weight: bolder;
    }

    dt::after {
        content: ":";
    }

    dd + dt::before {
        display: block;
        content: "";
    }

    dd {
        display: inline;
        margin-inline-start: 0;
    }

    dd::before {
        content: " ";
    }

    dd + dd::before {
        content: ", ";
    }
}

/******************************************************************************
checkbox
*******************************************************************************/

.ui_checkbox {
    display: flex;
    align-items: center;
    gap: 0.25em;
    width: max-content;
}

/******************************************************************************
tooltips
*******************************************************************************/

.ui_tooltip_trigger {
    cursor: pointer;
}

.ui_tooltip {
    inset: unset;
    position: absolute;
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    align-self: anchor-center;
    left: calc(anchor(right) + 5px);
    margin: 0;
    padding: 0.5em;
    background-color: var(--tooltip-bg-color);
    border: 0;
    color: var(--tooltip-text-color);
}

/**************************************************************************** *
ui-contextual-template
/**************************************************************************** */

.type_driven-type-template_rule_model {
    border-top: 1px solid var(--fieldset-border-color);
    border-bottom: 1px solid var(--fieldset-border-color);
    padding-bottom: 0.2rem;
    margin-bottom: -1px;
}

.type_driven-type-template_rule_model:nth-child(2n) {
    background: var(--list-item-even-bg);
}

.type_driven-type-template_rule_model:nth-child(2n + 1) {
    background-color: var(--list-item-odd-bg);
}

.ui_chars_selector_container .ui_generic_select-label {
    width: auto;
}

.type_driven-type-chars_selector_items_model-items {
    background: none;
    border-left: 1px solid var(--fieldset-border-color);
    border-top: 1px solid var(--fieldset-border-color);
    padding-left: 0.75em;
}

/**************************************************************************** *
select menus...
/**************************************************************************** */

.ui_type_spec_select-select,
.ui_font-select_select {
    /* This made long options overflow and break, the overflow options
     * below did not have an effect (in Chrome).
     * value `auto` restores expected behavior.
     */
    &,
    &::picker(select) {
        appearance: auto;
    }

    width: 100%;
    text-overflow: ellipsis;
}

.ui_font-select_label {
    display: none;
}