nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5em;
    position: relative;
}

nav ul {
    list-style-type: none;
    font-size: 1.3em;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 1em;
}

nav ul li.page-btn {
    padding: 0.4em 0.8em;
    /* Match Reference genome toggle's light track */
    background-color: #ebf7fc;
    border: 1px solid rgba(2, 117, 138, 0.28);
    color: #02758A;
    border-radius: 0.3em;
    cursor: pointer;
    font-weight: 600;
}

/* Make the inner link fill the clickable tab. */
nav ul li.page-btn a.page-btn-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

nav ul li.page-btn:hover {
    background-color: rgba(2, 117, 138, 0.10);
}

/* Active page indicator (minimal, high-contrast) */
nav ul li.page-btn.page-btn--active {
    background-color: #02758A;
    border-color: #02758A;
    color: white;
    box-shadow: 0 0.6em 1.1em -0.9em rgba(39, 52, 56, 0.45);
}

/* BIH logo — top left */
li.bih-logo-li {
    position: absolute;
    left: 2em;
    top: 0.4em;
    margin: 0;
    list-style: none;
}

.bih_logo {
    display: block;
    height: 4.4em;
    width: auto;
}

li.bih-logo-li a {
    display: block;
    line-height: 0;
}

/* Documentation — bottom left; warm accent to separate help from app modes */
li.page-btn.page-btn--docs,
li.page-btn#nav-documentation {
    position: fixed;
    left: 1.1em;
    bottom: 1.1em;
    z-index: 9998;
    margin: 0;
    font-size: 1.05em;
    background-color: #f6f0e8;
    border-color: rgba(138, 90, 40, 0.35);
    color: #8a5a28;
    box-shadow: 0 0.7em 1.8em -1.3em rgba(80, 50, 20, 0.4);
}

li.page-btn.page-btn--docs:hover,
li.page-btn#nav-documentation:hover {
    background-color: rgba(138, 90, 40, 0.12);
}

li.page-btn.page-btn--docs.page-btn--active,
li.page-btn#nav-documentation.page-btn--active {
    background-color: #8a5a28;
    border-color: #8a5a28;
    color: white;
    box-shadow: 0 0.6em 1.1em -0.9em rgba(80, 50, 20, 0.45);
}

.ui-scale-fab {
    position: fixed;
    right: 1.1em;
    bottom: 1.1em;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.45em 0.7em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(2, 117, 138, 0.18);
    box-shadow: 0 0.7em 1.8em -1.3em rgba(39, 52, 56, 0.45);
    backdrop-filter: blur(8px);
}

.ui-scale-fab-label {
    font-size: 1.0em;
    font-weight: 700;
    color: #02758A;
    user-select: none;
    white-space: nowrap;
}

.ui-scale-fab .ui-scale-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.ui-scale-fab .ui-scale-btn {
    padding: 0.35em 0.75em;
    box-shadow: none;
}

@media (max-width: 900px) {
    li.page-btn.page-btn--docs,
    li.page-btn#nav-documentation {
        left: 0.8em;
        bottom: 0.8em;
        font-size: 0.95em;
        padding: 0.35em 0.65em;
    }
}