/* Dialog: the native <dialog>, which the browser puts in its top layer and centres for us.
   The element itself carries no padding and no border — every pixel of it is either the frame
   inside or the backdrop outside, which is what lets the click handler tell the two apart. */
.dialog {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-ink);
  max-width: min(var(--dialog-width), calc(100vw - var(--space-8)));
  width: 100%;
}

/* A sheet: the release's and the hold's, a row of choices beside each label. */
.dialog.dialog-wide {
  max-width: min(var(--dialog-width-wide), calc(100vw - var(--space-8)));
}

/* A broad sheet: the roster's table of lines, as wide as the page's own measure allows. */
.dialog.dialog-broad {
  max-width: min(var(--dialog-width-broad), calc(100vw - var(--space-8)));
}

.dialog::backdrop {
  background: var(--color-overlay);
}

.dialog-frame {
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

/* The section size of the display face, as the snapshot titles a block. */
.dialog-title {
  font-size: var(--text-display-5);
  font-weight: var(--weight-regular);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  margin: 0;
}

.dialog-body > :first-child { margin-top: 0; }
.dialog-body > :last-child { margin-bottom: 0; }

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* While a modal is up the page behind it does not scroll. The element is inert already; this is
   only about the scrollbar, which the top layer does not cover. */
html.dialog-open {
  overflow: hidden;
}