.dialog {
  max-inline-size: none;
  max-block-size: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.dialog::backdrop {
  background: var(--overlay-scrim);
}
.panel {
  display: grid;
  max-block-size: calc(100dvh - var(--space-8));
  overflow: hidden;
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-overlay);
}
.modal .panel {
  inline-size: min(44rem, calc(100vw - var(--space-8)));
}
.drawer {
  margin-block: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
.drawer .panel {
  inline-size: min(24rem, 88vw);
  min-block-size: 100dvh;
  border-radius: 0;
}
.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-block-end: 1px solid var(--border-standard);
}
.header h2 {
  margin: 0;
  font-size: var(--type-heading-3-size);
}
.header p {
  margin-block: var(--space-2) 0;
  color: var(--text-secondary);
}
.content {
  min-block-size: 0;
  padding: var(--space-6);
  overflow-y: auto;
}
@media (max-width: 479px) {
  .modal .panel {
    inline-size: calc(100vw - var(--space-4));
    max-block-size: calc(100dvh - var(--space-4));
  }
  .header,
  .content {
    padding: var(--space-4);
  }
}
@media (forced-colors: active) {
  .panel {
    border: 2px solid CanvasText;
  }
}
