/* =========================================================================
   Learner bottom navigation — fixed bar across the learner app.
   Home · Practice · Assessments · Somolangu. Mounted once the learner is
   authenticated (learner-bottom-nav.js). Emerald theme to match the learner
   identity. All targets >= 44px (mobile webview rule).
   ========================================================================= */

#learnerBottomNav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
  padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
}

#learnerBottomNav .lbn-inner {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
}

#learnerBottomNav .lbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .125rem;
  min-height: 52px;
  padding: .25rem .125rem;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 12px;
  color: #64748b;
  font-weight: 600; font-size: .6875rem; line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}

#learnerBottomNav .lbn-item svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

#learnerBottomNav .lbn-item:active { transform: scale(.96); }

#learnerBottomNav .lbn-item.active {
  color: #059669;
  background: #ecfdf5;
}

/* Room for the fixed bar so content never hides behind it */
body.lbn-active #mainAppContent {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}