/*
Shared bottom-navigation island — mobile-only, floating.

Used by fitness, finance and (optionally) routines. Class prefix is
`dft-` because this CSS belongs to no single module (the fitness `f-`
namespace stays for fitness-owned components).

Design tokens: the island inherits colour via `currentColor` and
`inherit` where possible. Where a concrete token is needed, it reads
from a per-module CSS variable with a sensible fallback, so a module
that hasn't defined the variable still renders reasonably:

    --dft-island-bg      background of the floating island
    --dft-island-fg      inactive tab colour
    --dft-island-active  active tab colour + accent border
    --dft-island-border  hairline separator inside the island
    --dft-island-radius  corner radius
    --dft-island-shadow  drop shadow

Fitness maps these to its --f-* tokens; finance maps them to its
--dft-* tokens; the fallback below is a plain grey/white pair that
looks fine on either palette.
*/

.dft-bottombar {
    position: fixed;
    left: 12px;
    right: 12px;
    /* Sit above the home indicator on iOS by respecting the safe area,
       and inset from the viewport bottom by 12px for the floating feel.
       env() falls back to 0 on browsers without safe-area support, so
       the 12px stays the effective inset there. */
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--dft-island-bg, #FDFCFA);
    border: 1px solid var(--dft-island-border, #D6D1C8);
    border-radius: var(--dft-island-radius, 14px);
    box-shadow: var(--dft-island-shadow,
                0 8px 24px -10px rgba(28, 28, 26, 0.30));
    z-index: 30;
    overflow: hidden;
}

.dft-bottombar__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* 44px is the WCAG minimum; 60px gives comfortable thumb-tap. */
    min-height: 60px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--dft-island-fg, #8C887F);
    /* No visible top-border by default so the border-radius crop is
       clean; the active tab paints its own accent (below). */
    border-top: 2px solid transparent;
    /* Tabs share a row so overflow-wrap doesn't matter, but keep the
       label single-line for the 320pt case. */
    white-space: nowrap;
}

.dft-bottombar__tab:hover,
.dft-bottombar__tab:focus-visible {
    color: var(--dft-island-active, #1C1C1A);
}

.dft-bottombar__icon {
    font-size: 20px;
    line-height: 1;
}

.dft-bottombar__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.dft-bottombar__tab--active {
    color: var(--dft-island-active, #1C1C1A);
    border-top-color: var(--dft-island-active, #C8A97E);
    /* Slight visual weight-bump on the active label so it's readable
       at a glance in bright sunlight. */
    font-weight: 500;
}

/* Desktop: no island. The per-module top navs take over. */
@media (min-width: 640px) {
    .dft-bottombar { display: none; }
}