/* ════════════════════════════════════════════════════════════════════════
   Global tab switcher (UI.tabs) — the app's one underline tab strip.

   Edit here to restyle every tool's sub-tabs at once. Paired with
   js/ui/tabs.js, which renders the markup. The tabs sit on a full-width white
   bar (rounded surface card); the active tab is --primary text on a --primary
   underline.
   ════════════════════════════════════════════════════════════════════════ */

.ui-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 18px;
    padding: 0 8px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.ui-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--gray-600);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ui-tab .ui-icon { width: 16px; height: 16px; opacity: .7; }

.ui-tab:hover { color: var(--text); }
.ui-tab:hover .ui-icon { opacity: .9; }

.ui-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.ui-tab.active .ui-icon { opacity: 1; }

/* Compact variant (size: 'sm') — e.g. nested sub-tabs. */
.ui-tabs-sm .ui-tab { padding: 9px 12px; font-size: .82rem; }