/* nowornava.com device dock — iOS-style translucent tab bar (phone / iPad), floating pill (desktop).
   Shared by /, /berlin/, /impella/, /HeartMate3/. Markup: <nav class="nn-dock"> (React DeviceDock on the homepage). */
body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.nn-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  background: rgba(247, 245, 240, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(26, 43, 69, 0.12);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nn-dock { background: rgba(247, 245, 240, 0.95); }
  .nn-dock.nn-dock--dark { background: rgba(15, 23, 42, 0.95); }
}
.nn-dock-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 60px; text-decoration: none; color: #5a6e88; line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.nn-dock-ico {
  width: 26px; height: 26px; border-radius: 8px; color: #fff; margin-bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(26, 43, 69, 0.18);
  transition: transform 0.15s ease;
}
.nn-dock-ico svg { width: 17px; height: 17px; display: block; }
.nn-dock-item b { font-size: 11px; font-weight: 600; color: #1a2b45; letter-spacing: 0.1px; white-space: nowrap; }
.nn-dock-k { font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 1px; white-space: nowrap; }
.nn-dock-item:not(.is-current) b { color: #34475f; font-weight: 500; }
.nn-dock-item:hover .nn-dock-ico, .nn-dock-item:focus-visible .nn-dock-ico { transform: translateY(-1px); }
.nn-dock-item:active .nn-dock-ico { transform: scale(0.94); }
.nn-dock-item:focus-visible { outline: 2px solid #0e7c7b; outline-offset: -2px; border-radius: 10px; }
/* dark-page variant (Impella) */
.nn-dock--dark { background: rgba(15, 23, 42, 0.62); border-top-color: rgba(255, 255, 255, 0.12); }
.nn-dock--dark .nn-dock-item { color: #94a3b8; }
.nn-dock--dark .nn-dock-item b { color: #f1f5f9; }
.nn-dock--dark .nn-dock-item:not(.is-current) b { color: #cbd5e1; }
.nn-dock--dark .nn-dock-ico { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
/* keep the berlin / HeartMate3 back-to-top button above the bar */
#totop { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
  body { padding-bottom: 96px; }
  .nn-dock {
    left: 50%; right: auto; bottom: 18px; transform: translateX(-50%);
    height: 60px; padding: 0 6px; grid-template-columns: repeat(4, 88px);
    border: 1px solid rgba(26, 43, 69, 0.14); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(26, 43, 69, 0.18), 0 1px 3px rgba(26, 43, 69, 0.08);
  }
  .nn-dock--dark { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
  #totop { bottom: 18px; }
}