:root {
  --ahd-mobile-bottom-nav-height: 76px;
  --ahd-mobile-top-clearance: 74px;
  --ahd-mobile-paper: #fffaf3;
  --ahd-mobile-ink: #18151f;
  --ahd-mobile-muted: #6b6475;
  --ahd-mobile-gold: #d6a35b;
  --ahd-mobile-line: rgba(24, 21, 31, 0.12);
}

.ahd-mobile-bottom-nav {
  display: none;
}

@media (max-width: 920px) {
  html {
    scroll-padding-top: var(--ahd-mobile-top-clearance);
    scroll-padding-bottom: calc(var(--ahd-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 18px);
  }

  body {
    min-height: 100dvh;
  }

  body:has(.ahd-mobile-bottom-nav) {
    padding-bottom: calc(var(--ahd-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  body > header,
  .top,
  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    background: rgba(255, 250, 243, 0.92);
    border-bottom: 1px solid var(--ahd-mobile-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body > header .nav,
  header.wrap.nav,
  .top,
  .topbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ahd-mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    min-height: var(--ahd-mobile-bottom-nav-height);
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 250, 243, 0.94);
    border-top: 1px solid var(--ahd-mobile-line);
    box-shadow: 0 -18px 42px rgba(24, 21, 31, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .ahd-mobile-nav-item {
    min-width: 0;
    min-height: 50px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    color: var(--ahd-mobile-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    -webkit-tap-highlight-color: transparent;
  }

  .ahd-mobile-nav-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ahd-mobile-nav-item svg.ahd-bodygraph-mini {
    width: 24px;
    height: 24px;
  }

  .ahd-mobile-nav-item svg.ahd-bodygraph-mini path,
  .ahd-mobile-nav-item svg.ahd-bodygraph-mini rect {
    vector-effect: non-scaling-stroke;
  }

  .ahd-mobile-nav-item svg.ahd-bodygraph-mini .ahd-bodygraph-mini-lines {
    opacity: 0.42;
  }

  .ahd-mobile-nav-item.active {
    color: var(--ahd-mobile-gold);
  }

  .ahd-mobile-nav-item:focus-visible {
    outline: 3px solid rgba(214, 163, 91, 0.32);
    outline-offset: 2px;
    border-radius: 12px;
  }

  footer,
  main.wrap,
  main.page {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }
}

@media print {
  .ahd-mobile-bottom-nav {
    display: none !important;
  }
}