math-field::part(menu-toggle) {
    display: none;
}

math-field::part(virtual-keyboard-toggle) {
    display: none;
}

math-field::part(placeholder) {
    color: #000;
}

math-field:focus-within {
    outline: none;
}

/* A widget of the toolkit keeps its text from being selected, and a math field standing inside one
   inherits that. The caret a click on the field means then has nowhere to land in it and is left in
   the box around it, so the field is focused and deaf: the keys that command it - a backspace, an
   arrow - still reach it, while what is typed goes nowhere. The field is selectable from the start,
   before the focus a click on it would give it. */
math-field:not([read-only]) {
    user-select: text;
    -webkit-user-select: text;
}

math-field {
    border: 1px solid transparent;
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    --placeholder-color: #000;
    --placeholder-opacity: 0.5;
    font-size: 16px;
}

.form-math-field::part(container) {
    pointer-events: none;
}

.mdl-shape-overlay-popup {
    z-index: var(--mdl-shape-overlay-z-index) !important;
}

.mdl-shape-overlay-popup.mdl-shape-overlay-popup-nested {
    z-index: var(--mdl-shape-overlay-nested-z-index) !important;
}

.mdl-focused-toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    color: #253047;
    font-size: 13px;
    line-height: 1;
}

.mdl-focused-toolbar-button--method {
    min-width: 32px;
    justify-content: center;
    padding: 4px 6px;
}

.mdl-focused-toolbar-button--term {
    min-width: 180px;
    justify-content: flex-start;
}

.mdl-permissions-selector .dx-button-content i {
    font-size: 18px;
}

.mdl-permissions-icon-animate {
    animation: mdl-permissions-pop 0.3s ease;
}

@keyframes mdl-permissions-pop {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.35); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.dx-button .trash {
    font-weight: 300;
    color: red;
    transition: opacity 0.2s ease-in-out;
}

.dx-button:hover .trash {
    display: none;
}

.dx-button:hover .trash-hover {
    display: inline-block;
    font-weight: 900;
    color: red;
}

.trash-hover {
    display: none;
}

.mdl-dropdown-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mdl-dropdown-list-item--icon-only {
    justify-content: center;
    min-width: 28px;
    gap: 0;
}

.mdl-actions-menu {
    padding: 4px 0;
}

.mdl-actions-menu [data-action-item] {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.mdl-actions-menu [data-action-item]:hover {
    background: var(--dx-color-accent-hover, rgba(0,0,0,0.06));
}

.mdl-actions-menu-separator {
    height: 1px;
    background: var(--dx-color-border, #e0e0e0);
    margin: 4px 0;
}

.mdl-dropdown-list-label {
    flex: 1;
    white-space: nowrap;
}

.mdl-dropdown-list-control {
    display: flex;
    align-items: center;
}

/* The start and end menus each hold a single number, and stood only as wide as that number was. They
   keep a floor a third wider than that, and the room goes to the field rather than to empty padding. */
.mdl-player-range-dropdown .dx-overlay-content {
    min-width: 215px;
}

.mdl-player-range-dropdown .mdl-dropdown-list-control {
    min-width: 110px;
    justify-content: flex-end;
}

.mdl-player-range-dropdown .mdl-dropdown-list-control .dx-numberbox {
    width: 100%;
}

/* A term standing alone and a list of terms are given the same room, so a chip reads the same
   wherever it is: one control's width, whether the row holds one of them or a list. */
.mdl-dropdown-list-control .term-packed-control,
.mdl-dropdown-list-control .shape-terms-control {
    width: 240px;
}

/* The list spends that width on its rows rather than on padding of its own. What the handle and the
   bin take is theirs; nothing else is held back from the chip. */
.shape-terms-list .dx-list-item-content {
    padding-right: 0;
}

.mdl-dropdown-list-control .shape-image-dropzone {
    width: 212px;
}

.mdl-wide-terms-menu .mdl-dropdown-list-control {
    width: 320px;
    justify-content: flex-end;
}

.mdl-wide-terms-menu .mdl-dropdown-list-control .term-packed-control,
.mdl-wide-terms-menu .mdl-dropdown-list-control .shape-terms-control {
    width: 100%;
}

/* The frequency chart names its categories with a term picker and its values with a list of series,
   and the menu holding both is as wide as that list. The picker is given the whole of that width
   rather than being left at the width a lone selector would have had. */
.mdl-frequency-terms-menu .mdl-dropdown-list-control {
    width: 360px;
    justify-content: flex-end;
}

.mdl-frequency-terms-menu .mdl-dropdown-list-control .term-packed-control,
.mdl-frequency-terms-menu .mdl-dropdown-list-control .shape-terms-control {
    width: 100%;
}

.mdl-frequency-mark-selector,
.mdl-frequency-function-selector {
    width: 100%;
}

.mdl-frequency-mark-field {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.mdl-frequency-mark-icon {
    flex: none;
    margin-left: 9px;
    opacity: 0.85;
}

.mdl-frequency-mark-text {
    flex: 1;
    min-width: 0;
}

.mdl-frequency-mark-text .dx-texteditor {
    background: transparent;
}

.mdl-frequency-mark-text .dx-texteditor::before,
.mdl-frequency-mark-text .dx-texteditor::after {
    display: none;
}

.mdl-frequency-mark-text .dx-texteditor-input {
    padding-left: 8px;
    background: transparent;
}

.mdl-component-terms-menu .mdl-dropdown-list-control {
    width: 320px;
}

.mdl-component-terms-menu .mdl-dropdown-list-control .term-packed-control,
.mdl-component-terms-menu .mdl-dropdown-list-control .shape-terms-control {
    width: 100%;
}

/* The place kept in the toolbar for the keys that say how a row is read. An object with no such row
   keeps nothing, so it takes up no room at all. */
.mdl-component-mode-item {
    display: flex;
    align-items: center;
}

.mdl-component-mode-item:empty {
    display: none;
}

.mdl-dropdown-list-suffix {
    line-height: 1;
    opacity: 0.7;
}

.mdl-permissions-menu {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdl-permissions-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mdl-permissions-menu-label {
    white-space: nowrap;
    font-size: 13px;
}

.mdl-dropdown-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    padding: 8px 12px;
}

.mdl-dropdown-grid-label {
    font-size: 13px;
    white-space: nowrap;
}

.mdl-dropdown-grid-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* A row of axis bounds fills its cell and its boxes share the width, so a long value scrolls
   inside its box instead of widening the menu past its edge. */
.mdl-axis-range-row {
    display: flex;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.mdl-axis-range-box {
    flex: 1 1 0;
    min-width: 0;
}

.mdl-axis-range-box .dx-numberbox {
    width: 100%;
}

/* An axis is a chip the width of its cell: its two ends typeset as maths with the toolbar's × between
   them, in the colour it has there, and after them a mark for each of the other choices its drop down
   offers, written the way the chosen pill is. Inside, each end has a box the width of the row, and
   the choices stand on rows of their own under the ends. */
.mdl-axis-chip-host,
.mdl-axis-chip-editor {
    width: 100%;
    min-width: 0;
}

.mdl-axis-chip .mdl-axis-chip__bound {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
}

.mdl-axis-chip__x {
    flex: none;
    font-size: 6px;
    line-height: 1;
    margin: 0 2px;
    color: #253047;
}

.mdl-axis-chip__mark .mdl-axis-chip__mark-field {
    font-size: 12px;
}

.mdl-axis-chip__mark {
    font-size: 12px;
}

.mdl-axis-chip-rows {
    min-width: 200px;
}

.mdl-term-editor-row-control.mdl-axis-chip-bound-row,
.mdl-term-editor-row-control.mdl-axis-chip-bound-row .mdl-axis-range-box {
    width: 100%;
}

.mdl-term-editor-row-control.mdl-axis-chip-part-row {
    justify-content: flex-start;
}

.mdl-gauge-ranges-editor {
    width: 100%;
}

.mdl-gauge-ranges-menu {
    padding: 8px 12px;
}

.mdl-gauge-ranges-list .dx-list-item-content {
    padding: 4px 0;
}

.mdl-gauge-menu-title {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
    padding-bottom: 6px;
}

.mdl-gauge-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mdl-gauge-range-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 400;
    color: inherit;
}

.mdl-gauge-range-field > span {
    opacity: 0.5;
}

.mdl-gauge-range-row.mdl-missing-term .dx-numberbox .dx-texteditor-container {
    background-color: rgba(209, 52, 56, 0.08);
    box-shadow: inset 0 0 0 1px #d13438;
}

.mdl-gauge-range-row.mdl-missing-term .dx-numberbox .dx-texteditor-input {
    color: #d13438 !important;
}

.mdl-gauge-range-color {
    flex: 0 0 auto;
}

.mdl-gauge-range-delete .dx-button-content {
    padding: 5px 7px;
}

.mdl-gauge-range-delete i {
    color: red;
}


.mdl-name-btn-term {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.mdl-name-btn-separator {
    font-size: 6px;
    line-height: 1;
    margin: 0 4px;
}

/* The mark a key wears while it is waiting to be handed a term: the same one that stands between two
   of them, standing alone where a name will go, and faded the way the word it replaced was. */
.mdl-name-btn-empty {
    font-size: 12px;
    line-height: 1;
    opacity: 0.5;
}

.mdl-name-btn-term-text {
    font-family: KaTeX_Math, serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1;
}

.mdl-name-btn-extra {
    font-size: 10px;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.10);
    margin-left: 2px;
}


/* One term reads as one thing: the colour it is drawn in, its name, the unit it is measured in and
   the case it is read from, gathered into a single field. Nothing in the row competes with the name
   for room, so a term is legible whatever else the row happens to carry. */
.mdl-term-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    pointer-events: none;
}

.mdl-term-chip__color {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.mdl-term-chip .mdl-term-editor-math-field,
.mdl-term-chip .mdl-term-editor-value {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* The mark a value is counted in — π for a portion of a turn, º for a degree — stands a space after
   the number rather than against it, so the two are read apart at a glance. */
.mdl-term-chip .mdl-term-editor-value-suffix {
    flex: none;
    margin-left: 1px;
}

/* The unit follows the name behind a faded slash, the way a term carries its unit on a label or a
   readout everywhere else here, so it can never be mistaken for a second name. */
.mdl-term-chip__unit {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    opacity: 0.55;
}

.mdl-term-chip__slash {
    font-size: 14px;
    line-height: 1;
}

.mdl-term-chip__pair {
    flex: none;
    opacity: 0.55;
    margin-left: -2px;
}

.mdl-term-chip__case {
    display: flex;
    align-items: center;
    flex: none;
}

/* Whatever else the chip's drop down holds — whether the term is shown, the way a series is drawn,
   the lock on a row — leaves its mark on the chip, in the order the drop down writes them and faded
   against the name, so a closed chip says what the row holds without competing with what it names. */
.mdl-term-chip__mark {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: 12px;
    line-height: 1;
    opacity: 0.55;
}

.mdl-term-chip__mark .shape-term-secondary-icon {
    font-size: 12px;
    line-height: 1;
}

/* The editor's own input is kept — it carries the placeholder and the typing — but it is not
   allowed to take the room the chip is drawn in. */
.mdl-term-chip-editor .dx-texteditor-input {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* A value is set by typing it into the field itself, so a focused field is given over to what the
   reader writes: the chip stands down, the input takes the room it was drawn in, and the caret
   stands where the writing goes. The chip is put back on as soon as the field is left or the value
   is taken. A term is written here in the size it is written in the list this field drops, so what
   is typed is the size of what it is being chosen against. */
.mdl-term-chip-editor.mdl-term-editing .mdl-term-chip {
    display: none;
}

.mdl-term-chip-editor.mdl-term-editing .dx-texteditor-input {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
}

/* Under the list of terms, behind a rule: what the term is measured in, which case it is read from
   and what it is drawn in, each one named by a label of its own. */
.mdl-term-editor-rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    min-width: 236px;
    padding: 12px;
}

.mdl-term-editor-row-label {
    white-space: nowrap;
    font-size: 13px;
    opacity: 0.75;
}

.mdl-term-editor-row-control {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mdl-term-editor-row-control.shape-term-units,
.mdl-term-editor-row-control.shape-term-term-row,
.mdl-term-editor-row-control.shape-term-extra-term {
    width: 100%;
}

.mdl-term-editor-row-control.shape-term-units .dx-widget,
.mdl-term-editor-row-control.shape-term-term-row .dx-widget,
.mdl-term-editor-row-control.shape-term-extra-term .dx-widget {
    width: 100%;
}

/* The case and the colour were centred when they stood in a cell of their own; standing in a row
   under a label they line up with the unit above them. */
.mdl-term-editor-row-control .dx-button-content {
    justify-content: flex-start;
}

.mdl-term-editor-row-control .shape-term-secondary-button,
.mdl-term-editor-row-control .mdl-color-picker-button-template {
    justify-content: flex-start;
    padding-left: 9px;
}

/* The eye and the lock are switches rather than fields, so they stand where the fields above them
   begin rather than centred in a box of their own. */
.mdl-term-editor-row-control.shape-term-visibility,
.mdl-term-editor-row-control.shape-term-lock,
.mdl-term-editor-row-control.shape-term-feature {
    justify-content: flex-start;
}

.mdl-term-editor-toggle.dx-checkbox .dx-checkbox-icon {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.mdl-term-editor-toggle .dx-checkbox-icon::before,
.mdl-term-editor-toggle .dx-checkbox-icon::after {
    display: none;
}

.mdl-term-editor-toggle-icon {
    font-size: 15px;
    line-height: 1;
    color: #4d4d4d;
    cursor: pointer;
}

.term-packed-control {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.term-packed-control__button {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    margin: 0;
    padding: 0;
    flex: 0 0 34px;
}

.term-packed-control__select {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.term-packed-checkbox {
    margin: 0;
    padding: 0;
    width: 34px;
    min-width: 34px;
    height: 32px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #f5f5f5;
}

.term-packed-checkbox .dx-checkbox-container {
    width: 34px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.term-packed-checkbox .dx-checkbox-icon {
    width: 34px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.term-packed-checkbox.dx-state-focused .dx-checkbox-icon,
.term-packed-checkbox.dx-state-hover .dx-checkbox-icon,
.term-packed-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.term-packed-checkbox.dx-checkbox-checked.dx-state-focused .dx-checkbox-icon,
.term-packed-checkbox.dx-checkbox-checked.dx-state-hover .dx-checkbox-icon,
.term-packed-checkbox.dx-checkbox-checked.dx-state-active .dx-checkbox-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.term-packed-checkbox .dx-checkbox-icon::before,
.term-packed-checkbox .dx-checkbox-icon::after {
    display: none;
}

.term-packed-checkbox .term-packed-checkbox-icon {
    font-size: 14px !important;
    line-height: 1;
    color: #4d4d4d !important;
}

.term-packed-lock-checkbox {
    margin: 0;
    padding: 0;
    width: 28px;
    min-width: 28px;
    height: 32px;
    background-color: transparent;
}

.term-packed-lock-checkbox .dx-checkbox-container {
    width: 28px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.term-packed-lock-checkbox .dx-checkbox-icon {
    width: 28px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.term-packed-lock-checkbox.dx-state-focused .dx-checkbox-icon,
.term-packed-lock-checkbox.dx-state-hover .dx-checkbox-icon,
.term-packed-lock-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.term-packed-lock-checkbox.dx-checkbox-checked.dx-state-focused .dx-checkbox-icon,
.term-packed-lock-checkbox.dx-checkbox-checked.dx-state-hover .dx-checkbox-icon,
.term-packed-lock-checkbox.dx-checkbox-checked.dx-state-active .dx-checkbox-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.term-packed-lock-checkbox .dx-checkbox-icon::before,
.term-packed-lock-checkbox .dx-checkbox-icon::after {
    display: none;
}

.term-packed-lock-icon {
    font-size: 13px !important;
    line-height: 1;
    color: #4d4d4d !important;
    cursor: pointer;
}

.term-packed-control__select .dx-texteditor {
    border-radius: 4px;
    margin: 0;
}

.term-packed-control--physical {
    align-items: center;
    gap: 0;
}

.mdl-physical-term-label {
    font-family: KaTeX_Math, serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1;
    padding-left: 6px;
    color: inherit;
    opacity: 0.8;
}

.term-packed-control__select .dx-field-item-content {
    padding: 0;
    margin: 0;
}

.term-packed-terms-control,
.term-packed-terms-list {
    width: 100%;
}

.term-packed-terms-list .dx-list-item,
.term-packed-terms-list .dx-list-item-content {
    padding: 0;
}

.term-packed-terms-list .dx-scrollview-content {
    padding: 0;
}

.name-packed-control {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.name-packed-control__button {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    margin: 0;
    padding: 0;
    flex: 0 0 34px;
}

.name-packed-control__color {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    margin: 0;
    padding: 0;
    flex: 0 0 34px;
}

.name-packed-control__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.name-packed-control__color .mdl-color-picker {
    width: 100%;
}

.name-packed-control__color .dx-button {
    min-height: 34px;
    border-radius: 0;
}

.mdl-color-picker .dx-button {
    width: 100%;
    min-height: 32px;
    padding: 0;
    background: #f5f5f5;
}

.mdl-color-picker .dx-button-content {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdl-color-picker-button-template {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdl-color-picker-button-icon {
    font-size: 18px;
    line-height: 1;
    -webkit-text-stroke-width: 1px;
}

.mdl-color-picker-menu .dx-popup-content {
    padding: 6px;
}

.mdl-color-picker-tileview {
    width: auto;
    height: auto;
}

.mdl-color-picker-menu .dx-tile,
.mdl-color-picker-menu .dx-tile-content {
    padding: 0;
}

.mdl-color-picker-menu .dx-tileview-wrapper,
.mdl-color-picker-menu .dx-scrollable-content {
    margin: 0;
    padding: 0;
}

.mdl-color-picker-menu .dx-tile {
    background: transparent;
    border: none;
    box-shadow: none;
}

.mdl-color-picker-item {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.mdl-color-picker-item-icon {
    font-size: 16px;
    line-height: 1;
}

.mdl-color-picker-menu .dx-tile.dx-state-hover .mdl-color-picker-item,
.mdl-color-picker-menu .dx-tile.dx-state-active .mdl-color-picker-item {
    background: #e8e8e8;
}

.mdl-formula-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    background: #fafafa;
    transition: background 0.15s, border-color 0.15s;
}

.mdl-formula-shortcut:hover {
    background: #e8f0fe;
    border-color: #0f6cbd;
}

.mdl-shortcuts .dx-button {
    height: auto;
}

.mdl-shortcuts .dx-button-content {
    display: flex;
    align-items: center;
    height: auto;
    padding: 6px 10px;
}

.mdl-shortcuts .form-math-field {
    display: inline-flex;
    align-items: center;
    height: auto;
}

.mdl-shortcuts-picker-menu .dx-popup-content {
    padding: 10px;
}

.mdl-shortcuts-palette {
    width: 100%;
    box-sizing: border-box;
}

.mdl-shortcuts-palette-tiles .dx-tile {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fafafa;
}

.mdl-shortcuts-palette-tiles .dx-tile.dx-state-hover,
.mdl-shortcuts-palette-tiles .dx-tile.dx-state-focused,
.mdl-shortcuts-palette-tiles .dx-tile.dx-state-active,
.mdl-shortcuts-palette-tiles .dx-tile.mdl-shortcuts-palette-tile-focused {
    border-color: #0f6cbd;
    background: #e8f0fe;
}

.mdl-shortcuts-palette-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 3px;
    box-sizing: border-box;
}

.mdl-shortcuts-palette-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
}

.mdl-shortcuts-palette-preview,
.mdl-shortcuts-palette-preview * {
    pointer-events: none;
}

.mdl-shortcuts-palette-status {
    min-height: 28px;
}

.mdl-shortcuts-palette-status .dx-toolbar {
    min-height: 28px;
    padding: 0;
    background: transparent;
}

.mdl-shortcuts-palette-status .dx-toolbar-items-container {
    height: 28px;
}

.mdl-shortcuts-palette-status-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #555;
    font-size: 12px;
}

.mdl-shortcuts-palette-shortcut-pill {
    padding: 2px 7px;
    border: 0;
    border-radius: 999px;
    background: #e9edf2;
    color: #46505a;
    font: 11px/1.25 system-ui, sans-serif;
    white-space: nowrap;
}

.mdl-expression-shortcuts-hint {
    position: fixed;
    z-index: 15000;
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    background: #e9edf2;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    color: #444;
    font-size: 12px;
    pointer-events: none;
}

.name-packed-control__input .dx-texteditor {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
}

.name-packed-control__input .dx-field-item-content {
    padding: 0;
    margin: 0;
}

/* A row in a shape's drop down holds controls; it is not a thing to select. Pressing a control in it
   leaves the row pressed otherwise, because the control it was pressed on is redrawn under the
   pointer and the state never lifts. */
.mdl-shape-overlay-popup .dx-list-item.dx-state-active,
.mdl-shape-overlay-popup .dx-list-item.dx-state-focused {
    background-color: transparent !important;
}

/* Where a shape's sound is set: the two ways of choosing a clip while there is none, and once one is
   chosen the name it was chosen under with the trash that takes it back. The name gives way rather
   than pushing the row wider than the menu holding it. Last comes the choice of what the value does
   to the sound, kept apart from the rest by a gap of its own. */
.mdl-audio-control {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mdl-audio-control-name {
    max-width: 140px;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.mdl-audio-control-clear .dx-icon {
    color: var(--math-error, #d32f2f);
}

.mdl-audio-control .mdl-audio-control-modulation {
    margin-left: 6px;
}

/* Why the engine refused a row, written where the row was written: a band across the row on the card,
   and a panel at the foot of the card carrying the sentence. Nothing here is hovered for. */
.mdl-expression-error-marks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.mdl-expression-error-mark {
    position: absolute;
    left: 0;
    right: 0;
}

.mdl-expression-error-mark-band {
    position: absolute;
    inset: 0;
    background-color: var(--math-error, #d32f2f);
    opacity: 0.09;
    border-radius: 2px;
}

.mdl-expression-error-mark-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--math-error, #d32f2f);
    border-radius: 1px;
}

/* Where in the row the reading is about: a slot standing where something is missing, drawn the way an
   empty slot of a template is drawn, or a line under what cannot stand where it was written. */
.mdl-expression-error-spot {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(0.55em);
    background-color: var(--math-error, #d32f2f);
    border-radius: 1px;
    opacity: 0.85;
}

.mdl-expression-error-spot.hole {
    top: 2px;
    bottom: 2px;
    height: auto;
    transform: none;
    background-color: transparent;
    border: 1px dashed var(--math-error, #d32f2f);
    border-radius: 3px;
    opacity: 0.9;
}

.mdl-expression-error-mark.lit .mdl-expression-error-mark-band {
    opacity: 0.24;
}

.mdl-expression-error-mark.pulsing .mdl-expression-error-mark-band {
    animation: mdl-expression-error-pulse 0.9s ease-out;
}

@keyframes mdl-expression-error-pulse {
    0% { opacity: 0.32; }
    100% { opacity: 0.09; }
}

.mdl-expression-error-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: none;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 4px 6px;
    background-color: var(--math-error-panel-background, #ffffff);
    color: var(--math-error-panel-color, #1f2430);
    border-top: 1px solid var(--math-error, #d32f2f);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.mdl-expression-error-panel.visible {
    display: block;
}

.mdl-expression-error-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    width: 100%;
    padding: 2px 4px;
    border: none;
    border-radius: 3px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    line-height: 1.35;
    cursor: pointer;
}

.mdl-expression-error-row:hover,
.mdl-expression-error-row:focus-visible {
    background-color: rgba(127, 127, 127, 0.14);
}

.mdl-expression-error-row + .mdl-expression-error-row {
    margin-top: 2px;
}

/* A row is named by its number alone, in a column of its own so the readings line up beside it. */
.mdl-expression-error-row-label {
    flex: 0 0 auto;
    min-width: 0.9em;
    color: var(--math-error, #d32f2f);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mdl-expression-error-row-message {
    min-width: 0;
    font-size: 12px;
}

/* A fragment of the model inside a message is typeset, and sits on the prose's own line. */
.mdl-message-math {
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
}

.mdl-message-math .ML__latex {
    font-size: 1.05em;
}

/* A number box is written into through a math field laid over its own input, so a value is typeset
   as it is typed - 1e-3 as written, 1.5*10^3 as a power of ten - and read back as the number it
   says. The input stays underneath, holding the value for the box, but out of the way of the
   pointer and the tab key. */
.mdl-numeric-box .dx-texteditor-input-container {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

.mdl-numeric-box .dx-texteditor-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    min-width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.mdl-numeric-math-field {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 9px;
    font-size: 12px;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
    --caret-color: currentColor;
    --selection-background-color: rgba(24, 113, 194, 0.25);
    --placeholder-opacity: 0.5;
}

.mdl-numeric-math-field:focus-within {
    outline: none;
}

.mdl-numeric-math-field::part(container) {
    min-height: 0;
}

.mdl-numeric-math-field::part(content) {
    padding: 0;
}

.mdl-numeric-math-field::part(menu-toggle),
.mdl-numeric-math-field::part(virtual-keyboard-toggle),
.mdl-term-typing-field::part(menu-toggle),
.mdl-term-typing-field::part(virtual-keyboard-toggle) {
    display: none;
}

/* The box's placeholder is drawn over the empty field, the way the input drew it. */
.mdl-numeric-math-field[data-empty]::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.5;
    pointer-events: none;
}

/* A term field that can be typed into is typed into through a math field of its own, so a value
   and a name are written the way they are read, at the size a value is written in a number box.
   The editor's input stays where it was, out of sight, so the placeholder and the box's own focus
   still work. */
.mdl-term-chip-editor.mdl-term-editing:has(.mdl-term-typing-field) .dx-texteditor-input {
    position: absolute;
    width: 0;
    min-width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.mdl-term-typing-field {
    flex: 1 1 auto;
    min-width: 40px;
    padding: 0;
    font-size: 12px;
    color: inherit;
    background: transparent;
    border: none;
    --caret-color: currentColor;
    --selection-background-color: rgba(24, 113, 194, 0.25);
}

.mdl-term-typing-field:focus-within {
    outline: none;
}

.mdl-term-typing-field::part(container) {
    min-height: 0;
}

.mdl-term-typing-field::part(content) {
    padding: 0;
}