/* Mobile bottom tab bar — motion (SAMPLE for the owner's approval, 2026-09-28). Brand mint only, subtle.
 * - a 2 px mint indicator above the active tab slides to the tapped tab (200 ms, ease-out)
 * - the active icon grows slightly (scale 1.08, 180 ms); a press dips it (scale 0.92, 100 ms)
 * - the label colour eases between grey and mint (180 ms)
 * Nothing changes layout: the indicator is an absolutely placed pseudo-element moved with transform,
 * the icons scale with transform. Everything sits inside prefers-reduced-motion: no-preference — a viewer
 * who asks for reduced motion gets today's bar exactly. mobile.js sets --tb-n (tab count) and --tb-i
 * (active index) on .tabbar. Drop the <link> in index.html (or this file) to remove it. */
@media (prefers-reduced-motion: no-preference) {
  .tabbar { position: relative; --tb-pl: 6px; --tb-pr: 6px; }
  html.mobile-live .tabbar { --tb-pl: max(6px, env(safe-area-inset-left)); --tb-pr: max(6px, env(safe-area-inset-right)); }
  .tabbar::before {
    content: ""; position: absolute; top: -1px; left: var(--tb-pl);
    width: calc((100% - var(--tb-pl) - var(--tb-pr)) / var(--tb-n, 5)); height: 2px;
    background: linear-gradient(var(--mint, #00D68F), var(--mint, #00D68F)) center / 22px 2px no-repeat;
    transform: translateX(calc(100% * var(--tb-i, 0)));
    transition: transform 200ms ease-out; pointer-events: none;
  }
  [dir="rtl"] .tabbar::before { left: auto; right: var(--tb-pr); transform: translateX(calc(-100% * var(--tb-i, 0))); }
  .tabbar button { transition: color 180ms ease; -webkit-tap-highlight-color: transparent; }
  .tabbar button span:first-child { transition: transform 180ms ease-out; }
  .tabbar button.active span:first-child { transform: scale(1.08); }
  .tabbar button:active span:first-child { transform: scale(0.92); transition-duration: 100ms; }
}