/* Desktop modal spacing: compact 32, review 40, tour 56, preview 24. */
@media (min-width: 681px) {
  .dialog {
    --dialog-inset: 32px;
    --dialog-top: 60px;
    --dialog-bottom: 32px;
    --dialog-section-gap: 24px;
    max-height: calc(100dvh - 48px);
  }
  .dialog:is(.practice-compare-dialog, .compare-dialog, .result-dialog, .voice-result-dialog) {
    --dialog-inset: 40px;
  }
  .dialog:is(.phone-zoom-dialog, .preview-dialog, .case-zoom-dialog) {
    --dialog-inset: 24px;
    --dialog-bottom: 24px;
  }
  .dialog:not(.draw-dialog):not(.tour-dialog) .dialog-header {
    position: static;
    padding: var(--dialog-top) var(--dialog-inset) 0;
    margin: 0;
  }
  .dialog:not(.draw-dialog):not(.tour-dialog) .dialog-body {
    padding: var(--dialog-section-gap) var(--dialog-inset);
  }
  .dialog:not(.draw-dialog):not(.tour-dialog) .dialog-actions {
    padding: 0 var(--dialog-inset) var(--dialog-bottom);
    gap: 12px;
  }
  .dialog .dialog-header .btn.icon-button[data-action="close"],
  .dialog.draw-dialog .draw-close {
    position: absolute;
    inset: 12px 12px auto auto;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 12px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: 2;
  }
  .dialog .dialog-header .btn.icon-button[data-action="close"] .icon,
  .dialog.draw-dialog .draw-close .icon { width: 20px; height: 20px; }

  .dialog.compare-dialog .compare-column > .phone-preview,
  .dialog.practice-compare-dialog .practice-compare-previews .practice-artifact.has-phone {
    height: clamp(220px, calc(100dvh - 420px), 440px);
    min-height: 0;
  }

  /* Results have an illustrated header inside the body. */
  .dialog:not(.draw-dialog):not(.tour-dialog):is(.result-dialog, .voice-result-dialog) .dialog-header { padding: 0; }
  .dialog:not(.draw-dialog):not(.tour-dialog).result-dialog .dialog-body { padding: 60px 40px 24px; }
  .dialog:not(.draw-dialog):not(.tour-dialog).voice-result-dialog .dialog-body { padding: 60px 0 0; }
  .dialog.voice-result-dialog { max-height: calc(100dvh - 48px); }
  .repair-result-scroll { padding-inline: 40px; }
  .repair-feedback { padding-bottom: 24px; }
  .repair-result-actions { padding: 24px 40px 32px; }

  /* Keep the approved Figma tutorial canvas and its spacing. */
  .dialog.tour-dialog { padding: 56px; }
  .dialog.tour-dialog .dialog-actions { margin-top: 32px; }
  .dialog:is(.phone-zoom-dialog, .preview-dialog) { max-height: calc(100dvh - 48px); }

  /* Card face and its actions share the same inset; keep the close row clear. */
  .dialog.draw-dialog {
    width: min(420px, calc(100vw - 48px), calc((100dvh - 48px) * 940 / 1297));
  }
  .draw-card-front { padding: 72px 32px 32px; gap: 24px; }
}