/* Keep the action and its current status together while controls scroll. */
.adaptive-camera-page .adaptive-session {
  position: sticky;
  top: var(--adaptive-stop-top, max(8px, env(safe-area-inset-top)));
  z-index: 12;
  display: grid;
  gap: 8px;
  background: var(--background);
  box-shadow: 0 0 0 8px var(--background);
}
.adaptive-camera-page .adaptive-session #camera-status {
  margin: 0;
}
.adaptive-camera-page .calibration input[type="range"] {
  margin: 0;
}
.adaptive-camera-page .camera-controls :is(input, button, summary, a, label) {
  scroll-margin-top: calc(var(--adaptive-session-height, 96px) + 24px);
}
@media (max-width: 760px) {
  .adaptive-camera-page {
    --adaptive-stop-top: calc(max(260px, 42svh) + 8px);
  }
  .adaptive-camera-page .camera-controls :is(input, button, summary, a, label) {
    scroll-margin-top: calc(
      max(260px, 42svh) + var(--adaptive-session-height, 96px) + 24px
    );
  }
}
@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .adaptive-camera-page {
    --adaptive-stop-top: 8px;
  }
  .adaptive-camera-page .camera-controls :is(input, button, summary, a, label) {
    scroll-margin-top: calc(var(--adaptive-session-height, 96px) + 24px);
  }
}