/* nav-clearance.css — Bottom padding that keeps the panes and feed cards
   clear of the bottom navigation. */

/* Topics, flashcards and Preferences clear the nav bar, which stays over
   them. Learn, Mock Tests and Progress set their own padding in today.css,
   practice.css and progress.css. */
#learn,
#cards,
#settings {
  padding-bottom: calc(96px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

.card {
  padding-bottom: calc(150px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* A marked mock's result is the lesson completion screen (lesson-ui.html) and
   fills its card from the top bar down to the tab bar, as a finished lesson
   fills #cards: Crumpet shrinks on a short screen before anything scrolls, and
   the footer keeps Continue and Review above the bar. */
#finCard:has(.guided-completion-screen) {
  padding: calc(60px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 0
    calc(72px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

#finCard:has(.guided-completion-screen) .inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}

#finCard .guided-completion-actions {
  padding-bottom: 16px;
}

/* The labelled mobile navigation is taller than the former icons-only bar. */
@media (max-width: 959px) {
  #finCard:has(.guided-completion-screen) {
    padding-bottom: calc(88px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  }
}