/* Reusable <dialog>-based modal for the planning app.
   Apply by adding class="planning-modal" to a <dialog> and wrapping its
   inner content in <div class="planning-modal__content">.
   Width can be overridden per-instance via the --modal-w custom property. */

dialog.planning-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 12px;
  padding: 0;
  width: var(--modal-w, 640px);
  max-width: calc(100vw - 2rem);
  max-height: 90vh;
  height: fit-content;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

dialog.planning-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.planning-modal__content {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 90vh;
  box-sizing: border-box;
}