:where(mjj-content-modal, mjj-window-modal) {
  display: contents;
}

:where(mjj-content-modal, mjj-window-modal) dialog {
  --mjj-modal-border: var(--zenbu-sys-color-border-strong);
  --mjj-modal-shadow:
    inset 0 0 0 var(--zenbu-sys-stroke-width)
      var(--zenbu-sys-color-action-primary-border),
    var(--zenbu-sys-space-control)
      var(--zenbu-sys-space-control)
      0
      var(--zenbu-sys-color-danger-border),
    var(--zenbu-sys-shadow-dialog);
  box-sizing: border-box;
  width: min(
    calc(100vw - var(--zenbu-sys-space-container)),
    var(--mjj-modal-width)
  );
  max-width: none;
  max-height: calc(100dvh - var(--zenbu-sys-space-container));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--zenbu-sys-stroke-width) solid var(--mjj-modal-border);
  border-radius: 0;
  background: var(--zenbu-sys-color-surface-raised);
  color: var(--zenbu-sys-color-text-primary);
  box-shadow: var(--mjj-modal-shadow);
}

:where(mjj-content-modal, mjj-window-modal) dialog::backdrop {
  background: var(--zenbu-sys-color-scrim);
  backdrop-filter: blur(var(--zenbu-sys-stroke-width-emphasis));
}

:where(mjj-content-modal, mjj-window-modal) dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation:
    mjj-modal-enter
    var(--zenbu-sys-motion-duration-layout)
    var(--zenbu-sys-motion-ease-enter);
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-header] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--zenbu-sys-space-group);
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-heading] {
  display: grid;
  gap: var(--zenbu-sys-space-icon-label);
  min-width: 0;
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-kicker] {
  margin: 0;
  color: var(--zenbu-sys-color-warning-foreground);
  font-size: var(--zenbu-sys-font-size-xs);
  font-weight: var(--zenbu-sys-font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-title] {
  margin: 0;
  color: var(--zenbu-sys-color-action-primary-background);
  font-family: var(--zenbu-sys-type-title-family);
  font-size: var(--zenbu-sys-type-title-size);
  font-weight: var(--zenbu-sys-type-title-weight);
  line-height: var(--zenbu-sys-type-title-line-height);
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions],
:where(mjj-content-modal, mjj-window-modal) [data-modal-footer-actions] {
  display: flex;
  align-items: center;
  gap: var(--zenbu-sys-space-control);
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions] {
  justify-content: flex-end;
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zenbu-sys-space-group);
}

:where(mjj-content-modal, mjj-window-modal) [data-modal-footer] > p {
  margin: 0;
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-sm);
}

:where(mjj-content-modal, mjj-window-modal) zen-scroll-area[data-cyber-scroll] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: scroll;
  border: 0;
  border-radius: 0;
  background: var(--zenbu-sys-color-surface-default);
  scrollbar-color:
    var(--zenbu-sys-color-action-primary-background)
    var(--zenbu-sys-color-surface-sunken);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

:where(mjj-content-modal, mjj-window-modal)
  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar {
  width: var(--zenbu-sys-space-control);
  height: var(--zenbu-sys-space-control);
}

:where(mjj-content-modal, mjj-window-modal)
  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-track {
  border-inline-start: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-info-border);
  background: var(--zenbu-sys-color-surface-sunken);
}

:where(mjj-content-modal, mjj-window-modal)
  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb {
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-surface-sunken);
  border-radius: 0;
  background: var(--zenbu-sys-color-action-primary-background);
}

:where(mjj-content-modal, mjj-window-modal)
  zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb:hover {
  background: var(--zenbu-sys-color-danger-foreground);
}

mjj-content-modal {
  --mjj-modal-width: 54rem;
}

mjj-content-modal dialog {
  --mjj-modal-border: var(--zenbu-sys-color-action-primary-border);
}

mjj-content-modal [data-modal-header] {
  padding:
    var(--zenbu-sys-padding-xl)
    var(--zenbu-sys-padding-xl)
    var(--zenbu-sys-padding-lg);
  border-bottom: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-danger-border);
  background: var(--zenbu-sys-color-surface-raised);
}

mjj-content-modal [data-modal-body] {
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: var(--zenbu-sys-color-surface-default);
  color: var(--zenbu-sys-color-text-primary);
  font-family: var(--zenbu-sys-type-reading-family);
  font-size: var(--zenbu-sys-type-reading-size);
  line-height: var(--zenbu-sys-type-reading-line-height);
}

mjj-content-modal [data-modal-article] {
  display: grid;
  gap: var(--zenbu-sys-space-content);
  padding:
    var(--zenbu-sys-padding-xl)
    max(
      var(--zenbu-sys-padding-xl),
      calc((100% - 42rem) / 2)
    );
}

mjj-content-modal [data-modal-article] > :where(
  h2,
  h3,
  p,
  blockquote,
  pre,
  ul,
  ol
) {
  margin-block: 0;
}

mjj-content-modal [data-modal-body] :where(h2, h3) {
  color: var(--zenbu-sys-color-action-primary-background);
  font-family: var(--zenbu-sys-font-family-ui);
}

mjj-content-modal [data-modal-body] [data-modal-description] {
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-type-body-large-size);
  line-height: var(--zenbu-sys-type-body-large-line-height);
}

mjj-content-modal [data-modal-body] blockquote {
  padding:
    var(--zenbu-sys-padding-md)
    var(--zenbu-sys-padding-lg);
  border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
    var(--zenbu-sys-color-danger-border);
  background: var(--zenbu-sys-color-surface-sunken);
  color: var(--zenbu-sys-color-text-secondary);
}

mjj-content-modal [data-modal-body] pre {
  padding: var(--zenbu-sys-padding-lg);
  overflow: auto;
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-info-border);
  border-radius: 0;
  background: var(--zenbu-sys-color-surface-sunken);
  font-family: var(--zenbu-sys-type-code-family);
  font-size: var(--zenbu-sys-type-code-size);
  line-height: var(--zenbu-sys-type-code-line-height);
}

mjj-content-modal [data-modal-footer] {
  padding:
    var(--zenbu-sys-padding-md)
    var(--zenbu-sys-padding-xl);
  border-top: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-danger-border);
  background: var(--zenbu-sys-color-surface-raised);
}

mjj-window-modal {
  --mjj-modal-width: 72rem;
}

mjj-window-modal dialog {
  --mjj-modal-border: var(--zenbu-sys-color-info-border);
  height: min(82dvh, 48rem);
  border-radius: 0;
}

mjj-window-modal [data-modal-header] {
  padding:
    var(--zenbu-sys-padding-md)
    var(--zenbu-sys-padding-lg);
  border-bottom: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-action-primary-border);
  background: var(--zenbu-sys-color-surface-sunken);
  box-shadow: var(--zenbu-sys-shadow-subtle);
}

mjj-window-modal [data-modal-body] {
  min-width: 0;
  min-height: 0;
  padding: var(--zenbu-sys-padding-lg);
  overflow: auto;
  background: var(--zenbu-sys-color-surface-default);
}

mjj-window-modal [data-modal-body][data-modal-layout="split"] {
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
  gap: var(--zenbu-sys-space-group);
}

mjj-window-modal [data-modal-pane] {
  min-width: 0;
  min-height: 0;
  padding: var(--zenbu-sys-padding-lg);
  overflow: auto;
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-info-border);
  border-radius: 0;
  background: var(--zenbu-sys-color-surface-sunken);
}

mjj-window-modal [data-modal-pane="primary"] {
  border-color: var(--zenbu-sys-color-action-primary-border);
  background: var(--zenbu-sys-color-surface-raised);
  box-shadow:
    var(--zenbu-sys-space-icon-label)
    var(--zenbu-sys-space-icon-label)
    0
    var(--zenbu-sys-color-danger-border);
}

mjj-window-modal [data-modal-footer] {
  padding:
    var(--zenbu-sys-padding-sm)
    var(--zenbu-sys-padding-lg);
  border-top: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-action-primary-border);
  background: var(--zenbu-sys-color-surface-sunken);
}

@keyframes mjj-modal-enter {
  0% {
    clip-path: inset(49% 45%);
    opacity: 0.72;
    transform: scaleX(0.12);
  }
  45% {
    clip-path: inset(49% 0);
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 42rem) {
  :where(mjj-content-modal, mjj-window-modal) dialog {
    width: calc(100vw - var(--zenbu-sys-space-group));
    max-height: calc(100dvh - var(--zenbu-sys-space-group));
  }

  mjj-content-modal [data-modal-header],
  mjj-content-modal [data-modal-footer] {
    padding-inline: var(--zenbu-sys-padding-lg);
  }

  mjj-content-modal [data-modal-body] {
    padding: 0;
  }

  mjj-content-modal [data-modal-article] {
    padding: var(--zenbu-sys-padding-lg);
  }

  mjj-window-modal dialog {
    height: calc(100dvh - var(--zenbu-sys-space-group));
  }

  mjj-window-modal [data-modal-body][data-modal-layout="split"] {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(mjj-content-modal, mjj-window-modal) dialog[open] {
    animation: none;
  }
}