/* App-shell bottom navigation (2026-05-31; reskinned to the Emerald/Teal
   design system 2026-06-03). Fixed full-width bar with 4 tabs. Loaded by
   partials/bottom_nav.html wherever the goals sidebar is included.
   Token fallbacks mirror design-system.css so the bar still reads correctly
   on pages that have not yet linked the shared stylesheet. */

:root { --bn-height: 60px; }

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    height: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px));
    padding: 8px 6px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg2, #0b1815) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
}

.bn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--faint, #6b7799);
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.12s;
}
.bn-tab svg { width: 21px; height: 21px; stroke-width: 1.8; }
.bn-tab.on { color: var(--accent-bright, #34d399); }
.bn-tab:active { color: var(--accent, #10b981); }

/* Lift the page off the bar so the last content + the floating Report button
   clear it. Pages that don't include the nav never load this file. */
body { padding-bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 8px); }

/* Float the feedback "Report" button + legal corner above the nav, not behind it. */
.fb-trigger, #fb-trigger {
    bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 14px) !important;
}
#legal-corner {
    bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 10px) !important;
}

@media (prefers-color-scheme: light) {
    .bottom-nav {
        background: color-mix(in srgb, #ffffff 92%, transparent);
        border-top-color: var(--border, rgba(15, 23, 42, 0.10));
        box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.10);
    }
    .bn-tab { color: var(--faint, #7a85a3); }
    .bn-tab.on { color: var(--accent, #059669); }
    .bn-tab:active { color: var(--accent-deep, #047857); }
}

/* Desktop: a fixed bottom tab-bar reads as mobile chrome and overlaps content
   at wide widths. Hide it >=900px and reclaim the body bottom-padding +
   reset the floating-corner offsets. (Desktop nav = the auth-bar home link +
   in-page links.) */
@media (min-width: 900px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 24px; }
    .fb-trigger, #fb-trigger { bottom: 14px !important; }
    #legal-corner { bottom: 10px !important; }
}