/* ═══════════════════════════════════════════════════════════════
   careiti-nav.css — the one bottom nav
   ═══════════════════════════════════════════════════════════════ */

.cnav-retired { display: none !important; }

.cnav-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(var(--ct-wide, 100%), 100%);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--print, #FFFDF8);
  border-top: 1px solid var(--edge, #8E7C5E);
  font-family: var(--f-album, system-ui, sans-serif);
}

.cnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Five targets across the narrowest phone is 78px each — comfortably
     over the 44px minimum on the axis that matters, and the height is
     stated so it never depends on the label wrapping. */
  min-height: 52px;
  padding: 4px 2px;
  border-radius: var(--r-ui, 8px);
  color: var(--ink-2, #5B5147);
  text-decoration: none;
}
.cnav-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.cnav-label {
  font-size: max(calc(11px * var(--ct-k1, 1)), var(--ct-min, 0px));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* The current page. Colour alone would be the only signal for someone who
   cannot distinguish it, so the icon also thickens and the label goes
   bold — three cues, one state. */
.cnav-item.is-on {
  color: var(--teal-ink, #0B6E64);
  background: var(--paper-2, #EFE7D8);
}
.cnav-item.is-on .cnav-icon { stroke-width: 2.4; }

@media (min-width: 700px) {
  .cnav-item { min-height: 58px; }
  .cnav-icon { width: 26px; height: 26px; }
}

/* Content must not end underneath a fixed bar. Stated once here rather
   than being each page's problem, which is how three pages ended up with
   their last card half-covered. */
body:has(.cnav-bar) { padding-bottom: 84px; }
@media (min-width: 700px) { body:has(.cnav-bar) { padding-bottom: 92px; } }