/* Shared styles for every <dialog>: reset, scrim, close button, open and close motion. */
dialog {
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: var(--scrim); }
dialog[open]::backdrop { animation: scrim-in .3s var(--ease-std) both; }
dialog.is-closing::backdrop { animation: scrim-out .28s var(--ease-std) both; }

.close-button {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  background: var(--ink);
  color: var(--paper);
  font: 400 var(--fs-ui)/1 var(--sans);
  letter-spacing: -0.02em;
}
.close-button__label { display: flex; align-items: center; padding: 0 10px; }
.close-button__rule { align-self: center; width: 1px; height: 24px; background: currentColor; opacity: .22; }
.close-button__icon { position: relative; width: 32px; }
.close-button__icon::before, .close-button__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-button__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.close-button--light { background: var(--paper); color: var(--ink); }

/* Centred modal panel used by the demo form and the glossary. */
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(640px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--paper);
}
.modal[open] { animation: modal-in .45s var(--ease-out) both; }
.modal.is-closing { animation: modal-out .25s var(--ease-std) both; }
.modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--paper);
}
.modal__body { padding: 8px 20px 24px; }
.modal__title {
  font: 400 clamp(26px, 3vw, 34px)/1.05 var(--sans);
  letter-spacing: -0.03em;
}