html[data-stp-modal-open="true"] {
  overflow: hidden;
}

.stp-modal {
  inline-size: min(92vw, 54rem);
  max-block-size: min(88vh, 56rem);
  padding: 0;
  border: 3px solid currentColor;
  background: Canvas;
  color: CanvasText;
}

.stp-modal::backdrop {
  background: rgb(0 0 0 / .62);
}

.stp-modal__surface {
  max-block-size: min(82vh, 52rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 2rem);
}

.stp-modal__surface > :first-child {
  margin-block-start: 0;
}

.stp-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 1.5rem;
}

.stp-modal__actions :where(button, a) {
  min-block-size: var(--ua-target-size, 2.75rem);
  min-inline-size: var(--ua-target-size, 2.75rem);
}

.stp-modal__status:empty {
  display: none;
}

@media (forced-colors: active) {
  .stp-modal {
    border-color: CanvasText;
  }
  .stp-modal::backdrop {
    background: Canvas;
    opacity: .75;
  }
}

/* Phase 38 Round 6: diagnostic and application dialogs remain inside ultra-narrow viewports. */
.stp-modal {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: calc(100vw - 1rem);
}
.stp-modal__surface,
.stp-modal__inner {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}
@media (max-width: 20rem) {
  .stp-modal { inline-size: calc(100vw - .5rem); max-inline-size: calc(100vw - .5rem); }
  .stp-modal__surface, .stp-modal__inner { padding-inline: .5rem; }
}