body {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
}

.bottom-nav {
    z-index: 10000;
    isolation: isolate;
    pointer-events: auto;
    left: 50%;
    right: auto;
    bottom: max(2px, calc(env(safe-area-inset-bottom) - 10px));
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    transform: translateX(-50%);
    padding: 10px 12px 12px;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .46);
}

.bottom-nav .nav-btn {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    min-width: 52px;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: center;
}

.bottom-nav .nav-btn.nav-pulse {
    animation: navTapPulse 240ms ease-out;
}

@keyframes navTapPulse {
    0% { transform: scale(1); }
    42% { transform: scale(1.12); }
    72% { transform: scale(.96); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav .nav-btn.nav-pulse {
        animation: none;
    }
}

.bottom-nav .nav-btn > * {
    pointer-events: none;
}

.bottom-nav .nav-icon {
    width: 27px;
    height: 27px;
    display: block;
    margin: 0 auto 5px;
    fill: currentColor;
    color: #f4f4f6;
}

.bottom-nav .nav-icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bottom-nav .nav-btn:not(.active) .nav-icon {
    color: #d5d5da;
}

.bottom-nav .nav-btn.active .nav-icon {
    color: #ffffff;
}

/*
 * Mobile keyboards resize the visual viewport and can lift fixed navigation
 * over the active workout fields. Keep the logger clear while typing.
 */
@media (max-width: 720px) {
    body:has(.workout-session-logger input:focus) .bottom-nav,
    body:has(.workout-session-logger select:focus) .bottom-nav,
    body:has(.workout-session-logger textarea:focus) .bottom-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}