/* tabs.css - navigation tab bar (scrolls sideways if it overflows) */
.tabs {
    display: flex;
    gap: 22px;
    padding: 0 max(var(--pad-x), env(safe-area-inset-right, 0px)) 0 max(var(--pad-x), env(safe-area-inset-left, 0px));
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 2px;
    color: var(--tab);
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid var(--tab);
    touch-action: manipulation;
}
.tabs a.active { color: var(--tab-active); border-bottom-color: var(--tab-active); }

@media (max-width: 640px) {
    .tabs { gap: 18px; }
    .tabs a { font-size: 1rem; }
}