html.workspace-dialog-open { overflow: hidden; }

/* Shared popup surfaces. Load this after each application's legacy styles so
 * native dialogs, dynamic editors and CAD popovers use the same MEPOS tokens.
 * Width and canvas layout remain the responsibility of the individual editor. */
:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, dialog.workspace-dialog, .cad-export-popover.cad-export-section) {
  --ink: var(--workspace-ink, #202326);
  --muted: var(--workspace-muted, #697174);
  --line: var(--workspace-border, #e5e5e2);
  --line-strong: var(--workspace-border-strong, #d3d5d2);
  box-sizing: border-box;
  color-scheme: light;
  color: var(--ink);
  background: var(--workspace-bg, #fff);
  border: 1px solid var(--line);
  border-radius: var(--workspace-dialog-radius, 12px);
  box-shadow: var(--workspace-dialog-shadow, 0 16px 48px rgba(20, 28, 34, .14));
  font: 400 14px/1.6 var(--workspace-font-family, system-ui, sans-serif);
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, dialog.workspace-dialog)::backdrop {
  background: var(--workspace-dialog-backdrop, rgba(32, 35, 38, .28));
  backdrop-filter: none;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(h2, h3) {
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--workspace-font-weight-medium, 500);
  line-height: 1.5;
  letter-spacing: -.02em;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(input, select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--workspace-bg, #fff);
  border-color: var(--line);
  border-radius: var(--workspace-control-radius, 9px);
  font: inherit;
  font-size: 13px;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: 40px;
  padding: 8px 10px;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(input[type=checkbox], input[type=radio]) {
  accent-color: var(--workspace-action, #25292c);
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) button {
  min-height: 36px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--workspace-surface-muted, #f5f5f3);
  border: 1px solid transparent;
  border-radius: var(--workspace-control-radius, 9px);
  box-shadow: none;
  font: 400 13px/1.4 var(--workspace-font-family, system-ui, sans-serif);
  cursor: pointer;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--workspace-hover, #ebebe8);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) :is(button.primary, button.cad-primary-action) {
  color: #fff;
  background: var(--workspace-action, #25292c);
  border-color: transparent;
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) :is(button.primary, button.cad-primary-action):hover:not(:disabled) {
  color: #fff;
  background: var(--workspace-action-hover, #111416);
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Review states and destructive actions remain distinguishable. */
.load-workflow-app dialog button.danger,
.load-workflow-app dialog button.danger:hover:not(:disabled) {
  color: var(--red, #ad3e36);
  background: var(--red-soft, #fff1ef);
}

.load-workflow-app dialog button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--workspace-hover, #ebebe8);
  border-color: var(--line-strong);
}

:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) :is(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--workspace-focus, #7b858a);
  outline-offset: 2px;
  box-shadow: none;
}

/* Headers stay quiet; close controls keep a full click target. */
:is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog) :is(.boundary-editor-head, .new-analysis-heading, .profile-detail-head, .wc-header) > button,
.cad-export-popover .cad-export-popover-close {
  flex-shrink: 0;
  min-height: 36px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.load-workflow-app dialog :is(.dialog-actions, .boundary-editor-footer) {
  background: var(--workspace-bg, #fff);
  border-color: var(--line);
}

.load-workflow-app dialog .dialog-actions {
  padding: 16px 20px;
  gap: 8px;
}

.load-workflow-app dialog :is(.dialog-actions, .boundary-editor-footer) .actions {
  margin: 0;
  padding: 0;
}

.load-workflow-app dialog .dialog-body { padding: 20px; }
.load-workflow-app dialog .dialog-body > h3 { margin: 0 0 8px; }
.load-workflow-app dialog .dialog-body > p { font-size: 13px; }

.load-workflow-app #confirmDialog { width: min(440px, calc(100vw - 32px)); }
.load-workflow-app #confirmDialog .dialog-actions { border: 0; padding-top: 0; padding-bottom: 20px; }
.load-workflow-app #confirmDialog .dialog-actions button { min-width: 76px; min-height: 40px; }

/* Preserve the room detail drawer's edge-to-edge shape. */
.load-workflow-app .profile-detail-dialog { border-radius: 0; }

dialog.native-operational-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  overflow: auto;
}
dialog.native-operational-dialog h3 { margin: 0 0 8px; }
dialog.native-operational-dialog form > p { color: var(--muted); font-size: 13px; }
dialog.native-operational-dialog .actions { gap: 8px; margin-top: 20px; padding-top: 16px; }

.cad-export-popover.cad-export-section { padding: 20px; max-height: calc(100dvh - 32px); }
.cad-export-popover::backdrop { background: transparent; }
.cad-export-popover .cad-section-title strong { font-size: 16px; }
.cad-export-popover .cad-export-popover-close { width: 36px; height: 36px; flex-basis: 36px; font-size: 22px; }

dialog.workspace-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--workspace-border, #e5e5e2);
  border-radius: var(--workspace-dialog-radius, 12px);
  background: var(--workspace-bg, #fff);
  color: var(--workspace-ink, #202326);
  box-shadow: var(--workspace-dialog-shadow, 0 16px 48px rgba(20, 28, 34, .14));
  font: 400 14px/1.6 var(--workspace-font-family, system-ui, sans-serif);
  text-align: left;
  color-scheme: light;
}

.workspace-dialog * { box-sizing: border-box; }
.workspace-dialog .workspace-dialog-header { display: flex; align-items: center; gap: 12px; }
.workspace-dialog .workspace-dialog-icon {
  display: none;
}
.workspace-dialog svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.workspace-dialog .workspace-dialog-title { flex: 1; min-width: 0; margin: 0; font: 500 16px/1.5 var(--workspace-font-family, system-ui, sans-serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.workspace-dialog .workspace-dialog-close {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px;
  margin: -4px -6px -4px 0; padding: 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--workspace-muted, #697174); box-shadow: none; cursor: pointer;
}
.workspace-dialog .workspace-dialog-close:hover { background: var(--workspace-surface-muted, #f5f5f3); color: var(--workspace-ink, #202326); }
.workspace-dialog .workspace-dialog-message { margin: 12px 0 24px; color: var(--workspace-muted, #697174); font: inherit; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.workspace-dialog .workspace-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; }
.workspace-dialog .workspace-dialog-button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto;
  min-width: 76px; min-height: 40px; margin: 0; padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--workspace-control-radius, 9px);
  box-shadow: none; font: 400 13px/1.4 var(--workspace-font-family, system-ui, sans-serif); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.workspace-dialog .workspace-dialog-cancel { background: var(--workspace-surface-muted, #f5f5f3); color: var(--workspace-ink, #202326); }
.workspace-dialog .workspace-dialog-cancel:hover { background: var(--workspace-hover, #ebebe8); }
.workspace-dialog .workspace-dialog-confirm { background: var(--workspace-action, #25292c); color: #fff; }
.workspace-dialog .workspace-dialog-confirm:hover { background: var(--workspace-action-hover, #111416); }
.workspace-dialog[data-tone="danger"] .workspace-dialog-confirm { background: #ad3e36; }
.workspace-dialog[data-tone="danger"] .workspace-dialog-confirm:hover { background: #96362f; }
.workspace-dialog button:focus-visible { outline: 2px solid var(--workspace-focus, #7b858a); outline-offset: 3px; }

@media (max-width: 480px) {
  dialog.workspace-dialog { padding: 20px; }
  .workspace-dialog .workspace-dialog-button { flex: 1; }
  :is(.load-workflow-app dialog:where(:not(.workspace-dialog)), dialog.window-catalog-dialog, dialog.native-operational-dialog, dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog, .cad-export-popover) button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-dialog .workspace-dialog-button { transition: none; }
}

/* CAD engineering panels share the workspace controls. Geometry rendering and
 * panel-specific grids remain in their own stylesheets. These selectors are
 * more specific than the layout classes, including design CSS loaded last. */
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) {
  --mep-dialog-padding: 20px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-width: 0;
  padding: var(--mep-dialog-padding);
  overflow: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) *,
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) *::before,
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) *::after {
  box-sizing: border-box;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) > header {
  position: sticky;
  top: calc(-1 * var(--mep-dialog-padding));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: calc(-1 * var(--mep-dialog-padding)) calc(-1 * var(--mep-dialog-padding)) 0;
  padding: var(--mep-dialog-padding) var(--mep-dialog-padding) 8px;
  background: var(--workspace-bg, #fff);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) > header h2 {
  min-width: 0;
  margin: 0;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) > header button {
  flex-shrink: 0;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(fieldset, details, section) {
  min-width: 0;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) label {
  min-width: 0;
  font-size: 13px;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) label:has(input:is([type="checkbox"], [type="radio"])) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) input:is([type="checkbox"], [type="radio"]) {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--workspace-focus, #7b858a);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(input, select, textarea):disabled {
  color: var(--workspace-muted, #697174);
  background: var(--workspace-surface-muted, #f5f5f3);
  border-color: var(--workspace-border, #e5e5e2);
  cursor: not-allowed;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) textarea {
  resize: vertical;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button {
  min-height: 40px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="primary"] {
  color: #fff;
  background: var(--workspace-action, #25292c);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="primary"]:hover:not(:disabled) {
  color: #fff;
  background: var(--workspace-action-hover, #111416);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="secondary"] {
  color: var(--workspace-ink, #202326);
  background: var(--workspace-surface-muted, #f5f5f3);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="secondary"]:hover:not(:disabled) {
  background: var(--workspace-hover, #ebebe8);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="danger"] {
  color: var(--cad-control-danger-text, #a5433d);
  background: var(--cad-control-danger-bg, #fff1f0);
  border-color: var(--cad-control-danger-border, #ebc4c1);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[data-variant="danger"]:hover:not(:disabled) {
  color: var(--cad-control-danger-text, #a5433d);
  background: #fce4e2;
  border-color: var(--cad-control-danger-text, #a5433d);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) button[aria-pressed="true"] {
  border-color: var(--workspace-action, #25292c);
  box-shadow: inset 0 0 0 1px var(--workspace-action, #25292c);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) summary {
  min-height: 40px;
  padding-block: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is([data-tone], [data-error="true"]):not(:empty) {
  margin-block: 12px;
  padding: 10px 12px;
  border: 1px solid var(--workspace-border, #e5e5e2);
  border-inline-start-width: 3px;
  border-radius: var(--workspace-control-radius, 9px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) [data-tone="info"] {
  color: var(--workspace-ink, #202326);
  background: var(--workspace-surface-muted, #f5f5f3);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) [data-tone="warning"] {
  color: #755511;
  background: #fff8e8;
  border-color: #ccb77f;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is([data-tone="error"], [data-error="true"]:not([data-tone])) {
  color: var(--cad-control-danger-text, #a5433d);
  background: var(--cad-control-danger-bg, #fff1f0);
  border-color: var(--cad-control-danger-border, #ebc4c1);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(.mep-table-scroll, .pressure-table) {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  margin-block: 12px;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(.mep-table-scroll, .pressure-table):focus-visible {
  outline: 2px solid var(--workspace-focus, #7b858a);
  outline-offset: 2px;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) table {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) :is(td, th) {
  border-color: var(--workspace-border, #e5e5e2);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) th {
  color: var(--workspace-ink, #202326);
  background: var(--workspace-surface-muted, #f5f5f3);
}
:is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) [hidden] {
  display: none !important;
}
@media (max-width: 600px) {
  :is(dialog.design-dialog, dialog.routing-dialog, dialog.pressure-dialog) {
    --mep-dialog-padding: 12px;
    padding: 12px;
  }
}