/* ============================================================
   Tab Bar — フッターナビ
   選択中は署名色 --brand と上辺インジケータ（左右に満ちる）。
   中央 FAB は記録への近道で、塗りの --brand を許す唯一の例外。
   タブは 2–4 ＋ FAB の 5 枠まで。
   ============================================================ */

.tabbar {
  display: flex; width: 100%; max-width: 380px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.tabbar button {
  flex: 1; padding: 11px 4px 9px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ash); font-size: 11px; letter-spacing: .04em;
}
.tabbar button .ind {
  position: absolute; top: 0; left: 50%; width: 24px; height: 2px;
  background: var(--brand); transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform var(--dur-slow) var(--ease);
}
.tabbar button[aria-selected="true"] { color: var(--brand); }
.tabbar button[aria-selected="true"] .ind { transform: translateX(-50%) scaleX(1); }

.tabbar .fab { flex: 0 0 auto; width: 54px; }
.tabbar .fab .plus {
  width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 0;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop);
}