/* Inert on older Apple engines, regular Safari tabs, Android and desktop.
   Keep the existing root colours, viewport and solver sizing outside this gate. */
[data-ios-pwa-status-backing] { display: none; }

html[data-ios-pwa-status-surface] [data-ios-pwa-status-backing] {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(12px, env(safe-area-inset-top, 0px));
  z-index: 45;
  background-color: var(--background);
  pointer-events: none;
}

html[data-ios-pwa-status-surface='solver'] [data-ios-pwa-status-backing] {
  background-color: #2f4354;
}
html.dark[data-ios-pwa-status-surface='solver'] [data-ios-pwa-status-backing] {
  background-color: #111c27;
}
/* Keep the device-tested 12px backing unchanged. The existing control row has
   empty space above its centred buttons, so only 6px of extra padding is needed
   to keep the backing clear of their visuals/focus rings. Never reduce a real
   safe-area inset. The original 55.25px row and all button sizes stay unchanged. */
html[data-ios-pwa-status-surface='solver'] .qbank-solver .solver-header {
  padding-top: max(6px, env(safe-area-inset-top, 0px));
}

/* Only the newer iPad Safari-tab solver sets this attribute. The PWA fix and
   all other browsers/routes retain their existing scrolling and positioning. */
html[data-ipad-safari-solver] {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-ipad-safari-solver] body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-ipad-safari-solver] .qbank-solver {
  position: absolute;
  top: var(--ipad-safari-visible-top, 0px);
  left: 0;
  width: 100%;
  height: var(--ipad-safari-visible-height, 100dvh);
  min-height: 0;
  padding-bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
html[data-ipad-safari-solver] .qbank-solver > .solver-header {
  grid-row: 1;
  position: relative;
  top: auto;
}
html[data-ipad-safari-solver] .qbank-solver > main {
  grid-row: 2;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
html[data-ipad-safari-solver] .qbank-solver > .solver-footer {
  grid-row: 3;
  position: relative;
  inset: auto;
}
/* The scrollport now starts below the header; do not reserve its height twice.
   Draggable/fixed highlight toolbars keep their existing position and behavior. */
html[data-ipad-safari-solver] .qbank-solver > main [aria-label='Highlight tools'].sticky {
  top: 0;
}