/* v.403 — full-width, uncropped document thumbnails with safe space for floating controls */
body.documentation-page .doc2026__thumbs-wrap {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(12px, env(safe-area-inset-left)) !important;
  padding-right: max(88px, calc(env(safe-area-inset-right) + 88px)) !important;
  padding-bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px)) !important;
  overflow: visible !important;
}

body.documentation-page #doc2026Thumbs,
body.documentation-page .doc2026__thumbs {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 42vw), 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  gap: clamp(8px, 1.2vw, 18px) !important;
  padding: 6px 0 12px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
}

body.documentation-page #doc2026Thumbs .doc2026__thumb,
body.documentation-page #doc2026Thumbs button.doc2026__thumb,
body.documentation-page #doc2026Thumbs .doc2026__thumb.landscape {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
  padding: 4px !important;
  overflow: visible !important;
  transform: none !important;
}

body.documentation-page #doc2026Thumbs .doc2026__thumb img,
body.documentation-page #doc2026Thumbs .doc2026__thumb.landscape img {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(130px, 22vw, 300px) !important;
  max-height: min(42vh, 300px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body.documentation-page #doc2026Thumbs .doc2026__thumb-caption,
body.documentation-page #doc2026Thumbs .doc2026__thumb > span {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

/* Keep fixed controls clickable and visually above the full-width thumbnail area. */
body.documentation-page :is(
  .ui-back-to-top,
  .back-to-top,
  .scroll-to-top,
  [data-back-to-top],
  #backToTop,
  #upbutton,
  .theme-toggle,
  #themeToggle,
  .music-toggle,
  .music-control,
  .sound-toggle,
  .sound-control,
  .site-search-toggle,
  .quick-nav,
  .quick-nav-trigger
) {
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  body.documentation-page .doc2026__thumbs-wrap {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(68px, calc(env(safe-area-inset-right) + 68px)) !important;
    padding-bottom: max(74px, calc(env(safe-area-inset-bottom) + 74px)) !important;
  }

  body.documentation-page #doc2026Thumbs,
  body.documentation-page .doc2026__thumbs {
    grid-template-columns: repeat(auto-fit, minmax(min(118px, 42vw), 1fr)) !important;
  }

  body.documentation-page #doc2026Thumbs .doc2026__thumb img,
  body.documentation-page #doc2026Thumbs .doc2026__thumb.landscape img {
    height: clamp(120px, 42vw, 220px) !important;
    max-height: 34vh !important;
  }
}

@media (max-width: 390px) {
  body.documentation-page #doc2026Thumbs,
  body.documentation-page .doc2026__thumbs {
    grid-template-columns: 1fr !important;
  }

  body.documentation-page #doc2026Thumbs .doc2026__thumb img,
  body.documentation-page #doc2026Thumbs .doc2026__thumb.landscape img {
    height: min(58vh, 360px) !important;
  }
}