feat(nav): shared sub-tabs component for settings and kitchen

Extracts the tab-bar UI into a reusable renderSubTabs() utility
(public/utils/sub-tabs.js + public/styles/sub-tabs.css) so all
sub-module navigation shares one implementation and visual style.

- Settings: replaces template-literal <nav class="settings-tabs">
  with renderSubTabs(); tabs now show icon + label (pill-style),
  group separators via separatorBefore, panel switching via onChange
- Kitchen: renderKitchenTabsBar() becomes a thin wrapper around
  renderSubTabs(); kitchen-tabs.css keeps only layout adjustment rules
- CSS: kitchen-tab* rules removed from kitchen-tabs.css,
  settings-tab-btn* rules removed from settings.css; both now
  inherit from sub-tabs.css
- tokens.css: adds --sub-tabs-height (52px default;
  kitchen overrides to --kitchen-tabs-height: 56px)
- test-browser-loader.mjs: resolves browser-absolute /utils/*.js
  imports to public/ directory for Node test compatibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/utils/kitchen-tabs.js

@@ -1,4 +1,5 @@
 import { t } from '/i18n.js';
+import { renderSubTabs } from '/utils/sub-tabs.js';
 
 export const KITCHEN_ROUTES = ['/meals', '/recipes', '/shopping'];
 export const KITCHEN_STORAGE_KEY = 'oikos-kitchen-tab';
@@ -23,46 +24,15 @@ export function isKitchenRoute(path) {
 }
 
 export function renderKitchenTabsBar(container, activeRoute) {
-  try {
-    sessionStorage.setItem(KITCHEN_STORAGE_KEY, activeRoute);
-  } catch { /* ignore */ }
-
   container.classList.add('has-kitchen-tabs');
 
-  const bar = document.createElement('div');
-  bar.className = 'kitchen-tabs-bar';
-  bar.setAttribute('role', 'tablist');
-  bar.setAttribute('aria-label', t('nav.kitchen'));
-
-  TABS().forEach(({ route, labelKey, icon }) => {
-    const btn = document.createElement('button');
-    btn.className = 'kitchen-tab' + (route === activeRoute ? ' kitchen-tab--active' : '');
-    btn.dataset.route = route;
-    btn.type = 'button';
-    btn.setAttribute('role', 'tab');
-    btn.setAttribute('aria-selected', route === activeRoute ? 'true' : 'false');
-
-    const i = document.createElement('i');
-    i.dataset.lucide = icon;
-    i.className = 'kitchen-tab__icon';
-    i.setAttribute('aria-hidden', 'true');
-
-    const span = document.createElement('span');
-    span.className = 'kitchen-tab__label';
-    span.textContent = t(labelKey);
-
-    btn.appendChild(i);
-    btn.appendChild(span);
-    bar.appendChild(btn);
+  renderSubTabs(container, {
+    tabs: TABS().map(({ route, labelKey, icon }) => ({ id: route, label: t(labelKey), icon })),
+    activeId: activeRoute,
+    storageKey: KITCHEN_STORAGE_KEY,
+    extraClass: 'kitchen-tabs-bar',
+    ariaLabel: t('nav.kitchen'),
+    insertPosition: 'afterbegin',
+    onChange: (route) => window.oikos?.navigate(route),
   });
-
-  bar.addEventListener('click', (e) => {
-    const btn = e.target.closest('[data-route]');
-    if (!btn || btn.dataset.route === activeRoute) return;
-    window.oikos?.navigate(btn.dataset.route);
-  });
-
-  container.insertAdjacentElement('afterbegin', bar);
-
-  if (window.lucide) window.lucide.createIcons({ el: bar });
 }