/* Child results only: override the generic dialog's 32rem width cap.
   Keep this in current-stage so both local and hosted current clients use it. */
body [role="dialog"].max-w-6xl {
  width: calc(100vw - 2rem) !important;
  max-width: 1440px !important;
  max-height: calc(100dvh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body [role="dialog"].max-w-6xl > .space-y-5 {
  container-type: inline-size;
}

body [role="dialog"].max-w-6xl .grid > * {
  min-width: 0;
}

/* Cards wrap according to the space they really have, including browser zoom. */
body [role="dialog"].max-w-6xl .grid.lg\:grid-cols-5 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

body [role="dialog"].max-w-6xl .grid.lg\:grid-cols-6 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.75rem), 1fr));
}

body [role="dialog"].max-w-6xl > .relative {
  padding-right: 4rem;
}

body [role="dialog"].max-w-6xl button p {
  overflow-wrap: anywhere;
}

/* Do not squeeze charts into columns on tablets or magnified displays. */
@container (max-width: 850px) {
  body [role="dialog"].max-w-6xl .grid.lg\:grid-cols-\[0\.95fr_1\.35fr\] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  body [role="dialog"].max-w-6xl {
    width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem);
  }
  body [role="dialog"].max-w-6xl .grid.lg\:grid-cols-5,
  body [role="dialog"].max-w-6xl .grid.lg\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}