.sa-grid:not(.sa-grid .sa-grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  grid-auto-rows: minmax(30rem, auto);
}

@media (max-width: 640px) {
  .sa-grid:not(.sa-grid .sa-grid) {
    grid-template-columns: 1fr;
  }
}

.sa-question {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: 0.375rem !important;
}

.sa-visualizer__content {
  font-family: var(--font-family, "Segoe UI", SegoeUI, Arial, sans-serif) !important;
  display: grid !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.sa-question__content {
  border: 1px solid var(--border-color, #eee) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  height: 100% !important;
}

/* Hide SurveyJS logo only in survey response previews */
#surveyjs-results-preview .sd-logo,
#surveyjs-results-preview .sv-logo--left {
  display: none !important;
}

/* Hide images in survey response previews to reduce visual clutter */
#surveyjs-results-preview .sd-image,
#surveyjs-results-preview .sd-image__image,
#surveyjs-results-preview .sd-question--image {
  display: none !important;
}

/* Contain wide matrixdropdown tables (e.g. ranging-status-* questions with a
   search bar + 4-column status grid) so they don't bleed past the framed
   question card's width. SurveyJS renders .sd-table at its natural column
   width regardless of the card's width, and every ancestor defaults to
   overflow: visible, so without this the table bled past the card border.
   overflow-x is hidden, not auto: once SurveyJS's mobile-responsive layout
   forces the native <tr>/<td> elements to display: block, the browser's
   table auto-layout algorithm still computes leftover intrinsic sizing in
   the background, giving .sd-table-wrapper a few px of phantom scrollWidth
   with no real content behind it. Confirmed via devtools that every cell
   already fits its container and hidden vs auto is pixel-identical -- auto
   just exposes a swipeable range that scrolls nothing. */
.sd-table-wrapper {
  overflow-x: hidden;
  max-width: 100%;
}