/* Runtime spacing + alignment — does not affect layout x/y/w/h. */
html {
  overflow-x: hidden;
}

:root {
  --mx-space-micro: 4px;
  --mx-space-sm: 8px;
  --mx-space-md: 12px;
  --mx-space: 16px;
  --mx-space-lg: 24px;
  --mx-page-max-width: 1200px;
}

#mxPageHost {
  padding: var(--mx-space-lg);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#app {
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  max-width: min(var(--mx-page-max-width), 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mx-runtime-page {
  text-align: left;
  align-items: stretch;
  flex: 0 0 auto !important;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-block: var(--mx-space);
  padding-inline: 16px;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

.mx-runtime-page > .mx-runtime-free-canvas {
  flex: 0 0 auto;
}

.mx-runtime-scale-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.mx-runtime-scale-spacer {
  max-width: 100%;
  box-sizing: border-box;
}

.mx-runtime-scale-inner {
  max-width: 100%;
  box-sizing: border-box;
}

.mx-runtime-page__head {
  margin-bottom: var(--mx-space);
}

.mx-runtime-page__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.mx-runtime-free-canvas {
  text-align: left;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mx-runtime-free-item {
  text-align: left;
}

.mx-runtime-comp-content {
  /* Same inset as Builder free-canvas .mx-content (6px). Not --mx-space-sm. */
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

.mx-runtime-free-item--fixed-h .mx-runtime-comp-content {
  padding: 2px 4px;
  /* Top-align like designer free-canvas so peers with the same layout.y line up when layout.h differs. */
  justify-content: flex-start;
  overflow: visible !important;
}

.mx-runtime-free-item--fixed-h .mx-runtime-comp-host {
  justify-content: flex-start;
  overflow: visible;
}

.mx-runtime-free-item--fixed-h .mx-runtime-comp-host > .mx-runtime-comp {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
}

.mx-runtime-comp-host:has(.mx-runtime-textbox-field),
.mx-runtime-comp-host:has(.mx-runtime-textarea-field),
.mx-runtime-comp-host:has(.mx-runtime-dropdown-field),
.mx-runtime-comp-host:has(.mx-runtime-multiselect-field),
.mx-runtime-comp-host:has(.mx-runtime-datebox-field),
.mx-runtime-comp-host:has(.mx-runtime-numberbox-field),
.mx-runtime-comp-host:has(.mx-runtime-selectbox-field),
.mx-runtime-comp-host:has(.mx-runtime-checkbox-field),
.mx-runtime-comp-host:has(.mx-runtime-radio-field),
.mx-runtime-comp-host:has(.mx-runtime-label-text),
.mx-runtime-comp-host:has(.mx-runtime-btn-wrap) {
  overflow: visible;
}

/* mxButton is intentionally NOT a fixed-height type (fully resizable, matches Appbuilder's
   getFreeCanvasResizePolicy), so createFreeItemShell (pageLayout.js) gives its
   .mx-runtime-comp-content an inline overflow:auto — the same wrapper fixed-height types get
   overflow:visible!important on via .mx-runtime-free-item--fixed-h below. A native scrollbar
   appears whenever the button's actual rendered size is even a hair off from its box; button
   never needs internal scrolling, so override the same way fixed-height types already are. */
.mx-runtime-comp-content:has(.mx-runtime-btn-wrap) {
  overflow: visible !important;
}

.mx-runtime-comp-host {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
}

.mx-runtime-comp {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.mx-runtime-comp--stack {
  margin-bottom: var(--mx-space);
}

.mx-runtime-comp--fill {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mx-runtime-comp--grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.mx-runtime-grid-wrap .mx-runtime-caption,
.mx-runtime-chart-wrap .mx-runtime-caption {
  margin: 0;
}

.mx-runtime-grid-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mx-space-sm);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.mx-runtime-grid-host,
.mx-runtime-comp--grid.mx-runtime-grid-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 200px;
  min-width: 0;
  box-sizing: border-box;
}

.mx-runtime-comp--grid .dx-datagrid {
  flex: 1 1 auto;
  min-height: 0;
}

.mx-runtime-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mx-space-micro);
  width: 100%;
  min-width: 0;
}

.mx-runtime-field--in-cell {
  height: 100%;
  justify-content: center;
  gap: 0;
}

.mx-runtime-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mx-text);
}

.mx-runtime-caption {
  margin: 0 0 var(--mx-space-sm);
  font-size: 12px;
  line-height: 1.35;
  color: var(--mx-muted);
}

.mx-runtime-comp--fill .mx-runtime-caption {
  margin-bottom: var(--mx-space-sm);
  flex-shrink: 0;
}

.mx-runtime-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  /* Nudge up a few px: a labeled sibling's visual content sits lower than its own box top
     (headroom reserved for the label), while Button's text is dead-centered in its box —
     without this the two don't quite look aligned even though both boxes start at the same y. */
  margin-top: -4px;
}

.mx-runtime-btn-wrap--in-cell {
  align-items: center;
}

.mx-runtime-btn-input,
.mx-runtime-btn-wrap .dx-button {
  max-width: 100%;
}

.mx-runtime-label-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--mx-text, #0f172a);
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.mx-runtime-label-display {
  margin: 0;
}

.mx-runtime-label-text.mx-runtime-label-display--header,
.mx-runtime-label-display--header {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.mx-runtime-label-text.mx-runtime-label-display--subheader,
.mx-runtime-label-display--subheader {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
}

.mx-runtime-label-text.mx-runtime-label-display--text,
.mx-runtime-label-display--text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
}

.mx-runtime-label-text--in-cell {
  align-items: center;
}

.mx-runtime-free-item--fixed-h .mx-runtime-label-text {
  height: auto;
  min-height: 0;
  align-items: center;
}

.mx-runtime-textbox-field,
.mx-runtime-textarea-field,
.mx-runtime-dropdown-field,
.mx-runtime-multiselect-field,
.mx-runtime-datebox-field,
.mx-runtime-numberbox-field,
.mx-runtime-selectbox-field {
  overflow: visible;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}

/* DX labelMode "static" puts the label ABOVE the input (document flow). DateBox defaults to a
   label ("Birth date"), so static mode permanently offsets it vs unlabeled TextBox/Dropdown.
   Fixed slots force floating + kill the outlined-label margin-top:7.5px. */
.mx-runtime-datebox-field .dx-datebox,
.mx-runtime-datebox-field .mx-runtime-datebox-input,
.mx-runtime-datebox-field .dx-editor-outlined.dx-texteditor-with-floating-label,
.mx-runtime-datebox-field .dx-editor-outlined.dx-texteditor-with-label,
.mx-runtime-datebox-field .dx-texteditor-with-floating-label,
.mx-runtime-datebox-field .dx-texteditor-with-label,
.mx-runtime-free-item--fixed-h .mx-runtime-datebox-field .dx-editor-outlined.dx-texteditor-with-floating-label,
.mx-runtime-free-item--fixed-h .mx-runtime-datebox-field .dx-editor-outlined.dx-texteditor-with-label {
  margin-top: 0 !important;
}

.mx-runtime-datebox-field .dx-texteditor,
.mx-runtime-datebox-field .dx-datebox {
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

.mx-runtime-datebox-field--labeled {
  overflow: visible;
}

/* If DX still emits an outside/static label node, keep it out of flow in fixed slots. */
.mx-runtime-free-item--fixed-h .mx-runtime-datebox-field .dx-texteditor-label-outside > .dx-texteditor-label,
.mx-runtime-free-item--fixed-h .mx-runtime-datebox-field.dx-texteditor-label-outside > .dx-texteditor-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
}

/* Accordion: clip headers/panels to the widget outer edge (height:auto still grows on expand). */
.mx-runtime-accordion-field,
.mx-runtime-accordion-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.mx-runtime-accordion-input .dx-accordion,
.mx-runtime-accordion-input.dx-accordion {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.mx-runtime-accordion-input .dx-accordion-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mx-runtime-accordion-input .dx-accordion-item,
.mx-runtime-accordion-input .dx-accordion-item-title,
.mx-runtime-accordion-input .dx-accordion-item-body {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.mx-runtime-accordion-input .dx-accordion-item-title-caption {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-runtime-accordion-input .dx-accordion-item-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mx-runtime-textbox-field--labeled {
  padding-top: 10px;
  overflow: visible;
}

/* Fixed-height free slots: same floating-label headroom for every input (labeled or not).
   Matches designer `.live-host:has(.dx-texteditor) { padding-top: 10px }`. */
.mx-runtime-free-item--fixed-h .mx-runtime-textbox-field,
.mx-runtime-free-item--fixed-h .mx-runtime-dropdown-field,
.mx-runtime-free-item--fixed-h .mx-runtime-multiselect-field,
.mx-runtime-free-item--fixed-h .mx-runtime-datebox-field,
.mx-runtime-free-item--fixed-h .mx-runtime-numberbox-field,
.mx-runtime-free-item--fixed-h .mx-runtime-selectbox-field,
.mx-runtime-free-item--fixed-h .mx-runtime-textarea-field,
.mx-runtime-free-item--fixed-h .mx-runtime-checkbox-field,
.mx-runtime-free-item--fixed-h .mx-runtime-radio-field {
  padding-top: 10px;
  overflow: visible;
}

/* One reserved space only — suppress DX outlined-label margin-top:7.5px in fixed slots. */
.mx-runtime-free-item--fixed-h .dx-editor-outlined.dx-texteditor-with-floating-label,
.mx-runtime-free-item--fixed-h .dx-editor-outlined.dx-texteditor-with-label {
  margin-top: 0 !important;
}

.mx-runtime-textbox-field .dx-texteditor,
.mx-runtime-textbox-field .dx-texteditor-label,
.mx-runtime-textbox-field .dx-label {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Floating/top labels must paint above the outlined border, never clipped by hosts. */
.mx-runtime-field .dx-texteditor-label,
.mx-runtime-field .dx-label,
.mx-runtime-textbox-field--labeled .dx-texteditor-label,
.mx-runtime-datebox-field--labeled .dx-texteditor-label {
  overflow: visible;
  z-index: 2;
}

/* Material-style: sit the floating label outside/above the border stroke with a bg mask. */
.mx-runtime-field .dx-texteditor-with-floating-label .dx-label span,
.mx-runtime-textbox-field--labeled .dx-texteditor-with-floating-label .dx-label span,
.mx-runtime-datebox-field--labeled .dx-texteditor-with-floating-label .dx-label span {
  transform: translate(0, -11px);
  background-color: var(--mx-bg-container, #fff);
  padding: 0 4px;
  position: relative;
  z-index: 3;
}

.mx-runtime-field .dx-texteditor-with-floating-label .dx-label::before,
.mx-runtime-textbox-field--labeled .dx-texteditor-with-floating-label .dx-label::before,
.mx-runtime-datebox-field--labeled .dx-texteditor-with-floating-label .dx-label::before {
  background-color: var(--mx-bg-container, #fff);
  height: 4px;
  top: -2px;
}

.mx-runtime-comp-host:has(.dx-texteditor-with-floating-label),
.mx-runtime-comp-host:has(.dx-texteditor-with-label),
.mx-runtime-comp-host:has(.mx-runtime-textbox-field--labeled),
.mx-runtime-comp-host:has(.mx-runtime-datebox-field--labeled) {
  overflow: visible;
}

.mx-runtime-textbox-field .dx-texteditor-container,
.mx-runtime-textbox-field .dx-texteditor-input-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.mx-runtime-textbox-field .dx-texteditor {
  height: auto;
  min-height: 38px;
  overflow: visible;
}

.mx-runtime-textbox-field .dx-texteditor-label,
.mx-runtime-textbox-field .dx-label {
  font-size: 12px;
  font-weight: 600;
}

.mx-runtime-free-item--fixed-h:has(.mx-runtime-textbox-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-dropdown-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-multiselect-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-datebox-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-numberbox-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-selectbox-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-textarea-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-checkbox-field) .mx-runtime-comp-content,
.mx-runtime-free-item--fixed-h:has(.mx-runtime-radio-field) .mx-runtime-comp-content {
  padding: 0;
  overflow: visible !important;
}

.mx-runtime-field--in-cell.mx-runtime-textbox-field {
  height: auto;
  justify-content: center;
}

.mx-runtime-free-item--fixed-h {
  overflow: visible !important;
}

.mx-runtime-text-display {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mx-runtime-chart-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mx-space-sm);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.mx-runtime-chart-box {
  flex: 1 1 auto;
  min-height: 120px;
  width: 100%;
}

.mx-runtime-data-grid-box {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.mx-runtime-unknown {
  padding: var(--mx-space-md);
  margin: 0;
}

/* Layout shells (spacing only — structure unchanged) */
.mx-runtime-layout-page-root {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-md);
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.mx-runtime-layout-page-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mx-space-md);
  width: 100%;
}

.mx-runtime-layout-col {
  min-width: 0;
}

.mx-runtime-layout-cell {
  min-width: 0;
}

.mx-runtime-layout-shell {
  border: 1px solid var(--mx-border, #e5e7eb);
  background: var(--mx-bg-container, #fff);
  padding: var(--mx-space-sm);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mx-runtime-layout-title {
  font-size: 12px;
  color: var(--mx-muted, #64748b);
  margin: 0 0 var(--mx-space-sm);
  flex-shrink: 0;
}

.mx-runtime-layout-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: auto;
}

.mx-runtime-box-shell {
  border: 1px solid var(--mx-border, #e5e7eb);
  border-radius: var(--mx-space-sm);
  background: var(--mx-bg-container, #fff);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

.mx-runtime-box-header {
  font-size: 13px;
  font-weight: 700;
  padding: var(--mx-space-sm) var(--mx-space-md);
  border-bottom: 1px solid var(--mx-border, #e5e7eb);
  background: color-mix(in srgb, var(--mx-border, #e5e7eb) 20%, var(--mx-bg-container, #fff));
  flex-shrink: 0;
  margin: 0;
}

.mx-runtime-box-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: auto;
}

.mx-runtime-tabs-shell {
  background: var(--mx-bg-container, #fff);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.mx-runtime-tabs-bar {
  display: flex;
  gap: var(--mx-space-sm);
  padding: var(--mx-space-sm);
  border-bottom: 1px solid var(--mx-border, #e5e7eb);
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.mx-runtime-tabs-btn {
  border: 1px solid var(--mx-border, #e5e7eb);
  background: var(--mx-bg-container, #fff);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--mx-muted, #64748b);
}

.mx-runtime-tabs-btn.active {
  background: color-mix(in srgb, var(--mx-border, #e5e7eb) 40%, var(--mx-bg-container, #fff));
  color: var(--mx-text, #0f172a);
}

.mx-runtime-tabs-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1;
  overflow: auto;
}

.mx-runtime-tabs-pane {
  position: relative;
  min-height: 100%;
}

.mx-runtime-tabs-shell--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.mx-runtime-tabs-shell--vertical {
  flex-direction: row;
}

.mx-runtime-tabs-shell--vertical .mx-runtime-tabs-bar {
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  border-right: 1px solid var(--mx-border, #e5e7eb);
  flex-shrink: 0;
  min-width: 120px;
}

.mx-runtime-tabs-shell--vertical .mx-runtime-tabs-btn {
  text-align: left;
  border-radius: 6px;
}

.mx-runtime-tabs-shell--vertical .mx-runtime-tabs-body {
  flex: 1 1 auto;
  min-width: 0;
}

.mx-runtime-nested-canvas {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  overflow: visible;
}

/* Responsive reflow modes (applied by responsiveScale.js — display only) */
.mx-runtime-canvas--stack {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-sm);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.mx-runtime-canvas--stack > .mx-runtime-free-item {
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 100% !important;
}

.mx-runtime-canvas--stack .mx-runtime-free-item .mx-runtime-comp-content {
  position: relative !important;
  inset: auto !important;
  min-height: 36px;
  height: auto !important;
}

.mx-runtime-canvas--fluid {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.mx-runtime-page--stack,
.mx-runtime-page--fluid {
  width: 100%;
  max-width: 100%;
}

#app[data-mx-viewport="mobile"],
#app[data-mx-viewport="tablet"] {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
}

/* DevExtreme widgets — consistent internal padding */
#app .dx-texteditor,
#app .dx-dropdowneditor {
  width: 100%;
  max-width: 100%;
}

#app .dx-datagrid {
  max-width: 100%;
}

#app .dx-datagrid-rowsview {
  overflow-x: auto;
}

#app .dx-button {
  max-width: 100%;
}

#app .dx-texteditor-input,
#app .dx-button-text {
  text-align: left;
}

/* mxButton: dxButton has no native iconPosition option, so "Icon position: Right"
   is applied by flipping the icon/text order of DevExtreme's own content wrapper. */
#app .mx-btn-icon-right .dx-button-content {
  flex-direction: row-reverse;
}

#app .mx-btn-icon-right .dx-button-content .dx-icon {
  margin-right: 0;
  margin-left: 8px;
}

/* Tablet: 768px–1200px */
@media (max-width: 1200px) {
  :root {
    --mx-space-lg: 20px;
    --mx-space: 14px;
    --mx-space-md: 10px;
  }

  #mxPageHost {
    padding: var(--mx-space-md) var(--mx-space);
  }

  #app {
    padding: var(--mx-space-md);
  }

  .mx-runtime-layout-page-root {
    gap: var(--mx-space-sm);
  }

  .mx-runtime-layout-page-row {
    gap: var(--mx-space-sm);
  }

  .mx-runtime-comp-content {
    padding: 6px;
  }
}

/* Mobile: <768px */
@media (max-width: 768px) {
  :root {
    --mx-space-lg: 16px;
    --mx-space: 12px;
    --mx-space-md: 8px;
    --mx-space-sm: 6px;
  }

  #mxPageHost {
    padding: var(--mx-space-sm);
  }

  #app {
    padding: var(--mx-space-sm);
    border-radius: var(--mx-space-micro);
  }

  .mx-runtime-page__head {
    margin-bottom: var(--mx-space-sm);
  }

  .mx-runtime-page__title {
    font-size: 1.1rem;
  }

  .mx-runtime-comp-content {
    padding: 6px;
  }

  .mx-runtime-comp--stack {
    margin-bottom: var(--mx-space-sm);
  }

  .mx-runtime-label {
    font-size: 12px;
  }

  .mx-runtime-label-text.mx-runtime-label-display--header,
  .mx-runtime-label-display--header {
    font-size: 22px;
  }

  .mx-runtime-label-text.mx-runtime-label-display--subheader,
  .mx-runtime-label-display--subheader {
    font-size: 16px;
  }

  .mx-runtime-label-text.mx-runtime-label-display--text,
  .mx-runtime-label-display--text,
  .mx-runtime-label-text {
    font-size: 13px;
  }

  .mx-runtime-layout-page-root {
    gap: var(--mx-space-sm);
  }

  .mx-runtime-layout-page-row {
    grid-template-columns: 1fr;
    gap: var(--mx-space-sm);
  }

  .mx-runtime-layout-col {
    grid-column: 1 / -1 !important;
  }

  .mx-runtime-layout-shell {
    padding: var(--mx-space-micro);
  }

  .mx-runtime-box-header {
    padding: var(--mx-space-sm);
    font-size: 12px;
  }

  .mx-runtime-nested-canvas {
    overflow-x: auto;
  }

  #app .form-label,
  #app .mx-runtime-layout-title {
    font-size: 12px;
  }
}