/* <x-modal>: same look as the modals in Bouwplan. Uses <dialog>, so it is always on top. */
x-modal {

  .modal {
    width: min(520px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--fg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  }

  .modal[open] { display: flex; flex-direction: column; animation: modal-in 0.45s var(--ease); }
  .modal::backdrop { background: rgba(10, 16, 22, 0.45); animation: backdrop-in 0.35s var(--ease); }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 24px;
    border-bottom: 1px solid var(--line);
  }

  .title { font-size: 17px; font-weight: 600; }

  .close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--fg-2);
    display: grid;
    place-items: center;
    transition: background 0.25s var(--ease);

    &:hover { background: var(--zebra); color: var(--fg); }
  }

  .body { padding: 20px 24px 24px; display: grid; gap: 16px; overflow-y: auto; }
  .foot { display: flex; gap: 8px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); }
  .spacer { flex: 1; }
}

@keyframes modal-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes backdrop-in { from { opacity: 0; } }

/* Mobile: a sheet from the bottom */
@media (max-width: 767px) {
  x-modal .modal {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 6px 6px 0 0;
  }
}