/* 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 one form every sheet over an order page takes (17 Oct 2026, the polish round): the
   artboards' width, where a table of items or lines sits on one line a row. */
.dialog.dialog-sheet {
  max-width: min(var(--dialog-width-sheet), 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 frame is one column of its own width, so the widest table inside cannot set the dialog's
   width and push its footer off a phone; a table wider than the frame scrolls inside its wrap. */
.dialog-frame {
  grid-template-columns: minmax(0, 1fr);
}

/* The title, a sheet's subtitle after it on the same line, and a sheet's × at the far end. */
.dialog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

/* 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;
}

/* A sheet's title at the artboards' size and weight: 22 px at 600, as a page's title on the shell. */
.dialog-sheet .dialog-title {
  font-size: var(--text-display-3);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.dialog-subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* The ×: a square of the control's small height at the head's far end, the glyph in muted ink. */
.dialog-close {
  margin-left: auto;
  align-self: start;
  width: var(--control-height-small);
  height: var(--control-height-small);
  display: inline-grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-display-5);
  line-height: 1;
  cursor: pointer;
}

.dialog-close:hover {
  color: var(--color-ink);
}

.dialog-close:focus-visible {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: 0;
}

.dialog-explain {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

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

/* The footer: what happens on the left, the held-back reason on its own line above the buttons,
   the buttons on the right. A question's footer is its buttons alone. */
.dialog-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    ". held"
    "says actions";
  align-items: center;
  column-gap: var(--space-4);
}

.dialog-sheet .dialog-foot {
  border-top: var(--hairline) solid var(--color-ink);
  padding-top: var(--space-4);
}

.dialog-says {
  grid-area: says;
  margin: 0;
  /* The footer's one line: not held to a paragraph's measure, which broke it in two beside room. */
  max-width: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.dialog-held {
  grid-area: held;
  justify-self: end;
  text-align: right;
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

.dialog-held:not(:empty) {
  margin-bottom: var(--space-2);
}

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

/* A sheet's two buttons at the artboards' height. */
.dialog-sheet .dialog-actions .button:not(.button-quiet) {
  height: var(--control-height-sheet);
}

/* A sheet on a phone fills the screen: no margin, no radius, and its body scrolls under a footer
   that stays in reach; a table wider than the screen scrolls sideways inside its own wrap. */
@media (max-width: 40rem) {
  .dialog.dialog-sheet {
    max-width: 100vw;
    max-height: 100dvh;
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }

  .dialog-sheet .dialog-frame {
    min-height: 100%;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    padding: var(--space-4);
    align-content: start;
  }

  /* The footer stays in reach: it sticks to the screen's foot while the body scrolls under it. */
  .dialog-sheet .dialog-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "held"
      "actions"
      "says";
    row-gap: var(--space-2);
  }

  .dialog-sheet .dialog-held {
    justify-self: stretch;
    text-align: left;
  }
}

/* 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;
}