:root {
    /* Room for icon + gap 8 + label; pad clears scaled PNG bloom under the border. */
    --nav-bar-height: 104px;
}

#spa-wrapper {
    flex: 1;
    display: flex;
    width: 300vw;
    transition: transform var(--motion-panel) cubic-bezier(0.1, 0.7, 0.1, 1);
    height: calc(100vh - var(--nav-bar-height) - env(safe-area-inset-bottom, 0px));
}

.spa-screen {
    width: 100vw;
    height: 100%;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}

#twa-nav-bar {
    height: calc(var(--nav-bar-height) + env(safe-area-inset-bottom, 0px));
    /* Clearance under the top border so scaled PNG bloom stays inside the bar. */
    padding-top: 14px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0A0A0A;
    border-top: 1px solid var(--divider-color);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 900;
    /* Keep icon blend modes inside the nav panel only. */
    isolation: isolate;
}
/* One pressable control: icon + label share the same hit target.
   Label stays bottom-aligned; icon stays gap-8 above it, centered in the item. */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    padding: 4px 10px 10px;
    color: var(--text-color);
    cursor: pointer;
    flex: 1;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    transition: color var(--motion-ui) var(--ease-standard);
    -webkit-user-select: none;
    user-select: none;
}
.nav-item__label {
    display: block;
    margin: 0;
    text-align: center;
    pointer-events: none;
}
.nav-item.active {
    color: var(--purple-active);
    font-weight: 400;
}

/* Statistics nav may mirror Daily Report gate when the tab is NOT active
   (see navReportStatus.js). Active tab always uses the same purple as Mentor/Goals.
   Yellow must never be used for this button. */
#btn-nav-analytics.nav-report-open:not(.active) {
    color: var(--text-color) !important; /* white — can submit */
}
#btn-nav-analytics.nav-report-submitted:not(.active) {
    color: var(--purple-active) !important; /* purple — report submitted */
}
#btn-nav-analytics.nav-report-closed:not(.active) {
    color: var(--text-color) !important; /* white — window closed */
}
#btn-nav-analytics.nav-item.active {
    color: var(--purple-active) !important;
}
/* Shared icon slot: zoom crops PNG padding so art sits with the label. */
.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: 0 auto;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
    /* Soft edge so PNGs don't read as square photo stickers. */
    -webkit-mask-image: radial-gradient(circle at center, #000 52%, transparent 74%);
    mask-image: radial-gradient(circle at center, #000 52%, transparent 74%);
}
.nav-icon__img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    object-position: center;
    transform-origin: center center;
    /* Opaque PNG blacks: screen merges #000 into nav panel (#0A0A0A). */
    mix-blend-mode: screen;
    filter: contrast(1.28) brightness(0.98) saturate(1.04);
    user-select: none;
    -webkit-user-drag: none;
    opacity: 0.94;
    pointer-events: none;
    transition: opacity var(--motion-ui) var(--ease-standard),
        filter var(--motion-ui) var(--ease-standard);
}
/* Uniform slot; zoom trims empty PNG margins (keeps aspect). */
#btn-nav-analytics .nav-icon__img {
    transform: scale(1.72);
}
#btn-nav-coach .nav-icon__img {
    transform: scale(1.88);
}
#btn-nav-matrix .nav-icon__img {
    transform: scale(1.65);
}
.nav-item:hover .nav-icon__img {
    opacity: 0.98;
    filter: contrast(1.28) brightness(1.05) saturate(1.04);
}
.nav-item.active .nav-icon__img {
    opacity: 1;
    filter: contrast(1.28) brightness(1.12) saturate(1.04);
}
.nav-item:active .nav-icon__img {
    opacity: 0.96;
    filter: contrast(1.28) brightness(1.02) saturate(1.04);
}