/* nav-topbar.css — pattern: in-page contextual nav (tabs / segmented).
   See FSE_UI.md → Topbar. */

.biq-topbar {
    display: flex;
    gap: var(--biq-space-2);
    border-bottom: 1px solid var(--biq-color-rule);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.biq-topbar__item {
    display: inline-flex;
    align-items: center;
    min-height: var(--biq-touch-target);
    padding: var(--biq-space-2) var(--biq-space-4);
    color: var(--biq-color-text-secondary);
    font-weight: var(--biq-fw-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--biq-duration-fast) var(--biq-ease-standard),
        border-color var(--biq-duration-fast) var(--biq-ease-standard);
}

.biq-topbar__item:hover {
    color: var(--biq-color-text-primary);
    text-decoration: none;
}

.biq-topbar__item[aria-current="page"],
.biq-topbar__item[aria-selected="true"] {
    color: var(--biq-color-action);
    border-bottom-color: var(--biq-color-action);
}

/* Segmented variant — pill-grouped, smaller scope */
.biq-segmented {
    display: inline-flex;
    background: var(--biq-color-surface-sunk);
    border-radius: var(--biq-radius-md);
    padding: var(--biq-space-1);
    gap: var(--biq-space-1);
}

.biq-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--biq-space-7);
    padding: 0 var(--biq-space-3);
    border-radius: var(--biq-radius-sm);
    color: var(--biq-color-text-secondary);
    font-size: var(--biq-fs-sm);
    font-weight: var(--biq-fw-medium);
    cursor: pointer;
    background: transparent;
    border: 0;
    text-decoration: none;
}

.biq-segmented__item:hover { color: var(--biq-color-text-primary); }

.biq-segmented__item[aria-pressed="true"],
.biq-segmented__item[aria-selected="true"] {
    background: var(--biq-color-surface-raised);
    color: var(--biq-color-text-primary);
    box-shadow: var(--biq-shadow-xs);
}