/*
 * mlp-dialog styles. Import after platform.css, same convention as mlp-forms/mlp-sidebar —
 * reuses its tokens (--c-*, --s-*, --radius, --shadow). This is the modal *mechanism* only:
 * the box and its backdrop. Content inside a `.mlp-dialog` (an Advanced Filters form, or
 * anything else a future dialog holds) is the consuming page's own CSS.
 */

.mlp-dialog {
  box-sizing: border-box;
  width: min(90vw, 32rem);
  max-height: min(85vh, 40rem);
  margin: auto; /* centers a <dialog> both axes once .showModal() is called */
  padding: var(--s-5);
  border: none;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow);
}

.mlp-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

.mlp-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.mlp-dialog__header h2 {
  margin: 0;
  font-size: var(--t-md);
}

.mlp-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-text-muted);
  cursor: pointer;
}

.mlp-dialog__close:hover {
  background: var(--c-accent-wash);
  color: var(--c-text);
}