/* M6-B Part D — Mobile #2: taller bottom-nav tap targets, full-width on 6.1" phones.
   Grid items default to min-width:auto, so "WATCHLIST" + 12px padding overflowed the
   viewport. Keep the extra height; let each pill fill its 1/5 column. */
.bottom-nav {
  box-sizing: border-box;
  width: 100%;
  max-width: 428px;
  padding: 10px 6px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.nav-item {
  min-width: 0;
  width: 100%;
  padding: 4px 2px;
  min-height: 48px;
}

.nav-lbl,
.nav-item.active .nav-lbl {
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  padding: 8px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  box-sizing: border-box;
  font-size: clamp(9.5px, 2.7vw, 12px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}

/* Shared native carousel. A half-visible next label signals horizontal travel. */
.page,
.page-content { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav[data-mobile-navigation] {
  display: block;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav-scroll {
  display: flex;
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(100% / 8);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-scroll::-webkit-scrollbar { display: none; }
.mobile-nav-scroll::before,
.mobile-nav-scroll::after { content: ''; flex: 0 0 12.5%; }
.bottom-nav[data-mobile-navigation] .nav-item {
  box-sizing: border-box;
  flex: 0 0 25%;
  min-height: 48px;
  padding: 4px;
  text-decoration: none;
  scroll-snap-align: start;
}
.bottom-nav[data-mobile-navigation] .nav-lbl {
  width: 100%;
  min-height: 40px;
  padding: 8px 2px;
  font-size: clamp(10px, 2.8vw, 11px);
  letter-spacing: 0;
}
.bottom-nav[data-mobile-navigation] .nav-item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: 6px;
}
.bottom-nav[data-mobile-navigation]::before,
.bottom-nav[data-mobile-navigation]::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 10px;
  height: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.bottom-nav[data-mobile-navigation]::before { left: 0; background: linear-gradient(to right, #050508, transparent); }
.bottom-nav[data-mobile-navigation]::after { right: 0; background: linear-gradient(to left, #050508, transparent); }
.bottom-nav[data-mobile-navigation].has-more-left::before,
.bottom-nav[data-mobile-navigation].has-more-right::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-scroll { scroll-behavior: auto; }
}